*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    transition: .3s;}
body{
    width: 100%;
    height: auto;
    margin: 0 auto;
    max-width: 1920px; 
    font-family: Roboto;
    min-width: 320px;} 
html {
  scroll-behavior: smooth;}
/*------------------------------------BOTON WHATSAPP*/
.whatsapp {
    position:fixed;
    width:60px;
    height:60px;
    bottom:20px;
    right:20px;
    background-color:#25D366;
    border-radius:50px;
    text-align:center;
    z-index:100; }
.img-wpp { 
    width:60%;
    margin:20%; }


/*---------------------------------------------BOTONERA---*/
header{
	width: 100%;
    height: 70px;
	float: left;
    position: fixed;
    max-width: 1920px; 
    z-index: 100000;
    background: #143558;}
#btn-menu, #btn-menu2{
    display: none;}
.header-logo{
	float: left;
    height: 50px;
	margin: 10px 0px 0px 10px;}
.nav-redes{
	float: right;
    height: 30px;
	margin: 20px 40px 20px 0px;}
.header-logo:hover{
    opacity: 0.7;
    cursor: pointer;}
.menu{
    float: right;
    height: 80px;
    line-height: 80px;
	list-style:none;}
.menu li{
    float: left;
    font-family: Roboto;
    font-weight: 300;
    font-size: 16px;}
.menu li:hover {
	color:black;}
.botones{
	color:white;
	text-decoration:none;
    margin: 0px 10px;
    border-radius: 15px;
	padding: 8px 20px;}
.botones:hover {
    opacity: .7;}
.linea1, .linea2{
    width: 40px;
    height: 3px;
    margin-top: 8px;
    float: left;
    transition: .3s;
    background:white;}


/*--------------------INICIO*/
#inicio{
    width: 100%;
    float: left;
    max-width: 1920px; 
    background-image: url(../img/fondo-header.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    text-align: center;}
.logoinicio{
    float: left;
    width: 20%;
    margin: 15% 40% 5%;}
h1{
    width: 50%;
    margin: 0% 25% 5%;
    float: left;
    font-size: 40px;
    font-weight: 200;
    color: white;}

/*-------------QUIENES SOMOS*/
#quienes-somos{
    width: 100%;
    float: left;
    background-image: url(../img/fondo-quienes-somos.jpg);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: left;}
.contenido-quienessomos{
    width: 60%;
    margin: 20% 10% 20% 30%;
    float: right;}
h2{
    font-size: 30px;
    color:#143558;
    font-weight: 800;}
.txt-quienessomos{
    font-size: 20px;
    font-weight: 300;}
.txt-quienessomos-caja{
    background:  #143558;
    color: white;
    padding: 20px;
    float: left;
    margin-top: 20px;}
.txt-quienessomos-caja ul{
    list-style: none;}
.txt-quienessomos-caja ul li{
    margin-right: 10px;
    float: left;
    margin-top: 10px;}

/*-------------------------------------servicios*/
#servicios{
    width: 100%;
    float: left;
    padding: 5%;}
.titu-servicios{
    width: 100%;
    float: left;
    text-align: center;
    font-size: 40px;
    margin-bottom: 20px;
    letter-spacing: 2px;
    font-weight: 300;
    color: #143558;}
.item-servicios{
    width: 23%;
    height: 250px;
    margin: 1%;
    float: left;
    background:rgb(185, 185, 185);
    color: #143558;
    padding: 1%;}
.logo-item-servicios{
    width: 50px;
    float: left;
    margin: 10px;}
.titu-item-servicios{
    width: 100%;
    float: left;
    margin-bottom: 10px;
    font-weight: bold;}
.txt-item-servicios{
    width: 100%;
    float: left;
    font-size: 13px;}

/*-------------------------------------PORQUE ELEGIRNOS*/
#porqueelegirnos{
    width: 100%;
    float: left;
    padding: 5%;
    background-image: url(../img/fondo-porque-elegirnos.jpg);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: right;}
.titu-porqueelegirnos{
    width: 100%;
    float: left;
    text-align: center;
    font-size: 40px;
    margin-bottom: 20px;
    letter-spacing: 2px;
    font-weight: 300;
    color: #143558;}
.txt-porqueelegirnos{
    width: 60%;
    margin: 5% 20%;
    float: left;
    font-size: 24px;
    text-align: center;
    font-weight: 300;}

/*-------------------------------------CLIENTES*/

#nuestros-clientes{
    background-image: url(../img/fondo-clientes.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    width: 100%;
    float: left;
    padding: 5%;
    height: 400px;}
.titu-nuestrosclientes{
    width: 100%;
    float: left;
    text-align: center;
    font-size: 40px;
    margin: 50px 0px;
    letter-spacing: 2px;
    font-weight: 300;
    color: white;}
.slider {
    display: flex;
    color: white;
    text-align: center;
    font-size: 20px;
    font-style: italic;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100%;
    overflow: hidden;}
.slider .move {
    display: flex;
    width: calc(250px * 14);
    animation: animacion 50s linear infinite;}
.slider .box {
    height: 100px;
    width: 250px;}

@keyframes animacion {
  0% {
    transform: translateX(0);  }
  100% {
    transform: translateX(calc(-250px * 7));  }
}



/*-------------------------------------NOVEDADES*/
#novedades{
    width: 100%;
    float: left;
    padding: 5%;}
.titu-novedades{
    width: 100%;
    float: left;
    text-align: center;
    font-size: 40px;
    margin-bottom: 20px;
    letter-spacing: 2px;
    font-weight: 300;
    color: #143558;}
.conte-nove{
    width: 30%;
    margin: 1.5%;
    color: black;
    height: 450px;
    text-decoration: none;
    float: left;}
.img-conte-nove{
    width: 100%;
    float: left;
    height: auto;
    margin-bottom: 20px;
    overflow: hidden;}
.image-conte-nove{
    width: 100%;    
    height: auto;}
.txt-conte-nove{ 
    font-size: 24px;
    width: 100%;
    color: #143558; 
    text-decoration: none;
    font-weight: light;
    float: left;}
.btn-conte-nove{
    width: 100%;
    float: left;
    margin-top: 10px;
    color: #143558;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;}
    
.btn-conte-nove:hover{
    letter-spacing: 4px;}

.titu-novedades{
    width: 100%;
    float: left;
    padding: 5%;
    text-align: center;
    color: #143558;
    font-size: 40px;
    font-weight: 300;}
.txt-novedades{
    width: 60%;
    margin: 5% 20%;
    font-size: 18px;
    line-height: 24px;
    float: left;}
.btn-volver-blog{
    width: 20%;
    text-align: center;
    color: white;
    background: black;
    padding: 1%;
    float: left;
    text-decoration: none;
    margin: 5% 40%;}
/*-------------------------------------CONTACTO*/
#contacto{
    width: 100%;
    float: left;
    padding: 5%;
    background-image: url(../img/fondo-contacto.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;}
.info-contacto{
    width: 40%;
    margin: 0% 0% 0% 10%;
    color:#143558;
    float: left;}
.titu-contacto{
    font-weight: 300;
    font-size: 26px;
    margin-bottom: 20px;
    width: 100%;
    float: left;}
.conte-contacto{
    width: 100%;
    float: left;}
.ico-contacto{
    width: 40px;
    float: left;}
.txt-contacto{
    width: 90%;
    color: #143558;
    line-height: 40px;
    float: right;}
.conte-formulario{
    float: left;
    width: 40%;
    margin: 0% 10% 0% 0%;
    background: #143558;
    padding: 3%;}
.conte-formulario input{
    width: 100%;
    height: 50px;
    float: left;
    margin: 2% 0%;}
.conte-formulario textarea{
    width: 100%;
    margin-top: 2%;
    max-width: 100%;
    min-width: 100%;
    height:150px;
    min-height: 150px;}
.conte-formulario button{
    border: 1px solid white;
    background: #143558;
    color: white;
    width: 30%;
    padding: 2%;
    margin-top: 2%;
    float: right;}
.contenido{
    width: 100%;
    height: 50px;
    float: left;}
#mapa{
    width: 100%;
    float: left;
    height: 200px;}
/*-------------------------------------FOOTER*/
footer{
    width: 100%;
    float: left;
    padding: 5% 2% 1%;
    background: black;}
.logo-footer{
    width: 20%;
    margin: 5%;
    float: left;}
.iconos-footer{
    width: 40%;
    margin: 5%;
    float: right;}
.img-redes-footer{
    width: 50px;
    margin: 10px;
    float: right;}
.img-redes-footer:hover{
    opacity: .5;}
.alidesign{
    width: 100%;
    float: left;
    text-align: center;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: white;}
.alidesign a{
    text-decoration: none;
    font-weight: 600;
    color: white;}
.alidesign:hover{
    opacity: .5;}


@media(max-width:1200px) {
    .info-contacto{
        width: 50%;
        margin: 0%;}
    .conte-formulario{
        width: 50%;
        margin: 0%;}

}
@media(max-width: 1000px) {
	#btn-menu2{
        float: right;
        display: block;
        margin: 15px;
        width: 50px;
        height: 50px;}
	.menu{
		width: 50%;
        margin: 70px -1000px 0px 0px;
        height: auto;
        background: #143558ec;
		float: right;}
	.menu li{
        border-bottom: 1px solid white;
        text-align: center;
		width: 100%;}
	.botones, .btndif{
        width: 95%;
        margin:0px 2.5%;
        float: left;
        border-radius: 0px;
        font-weight: 400;
        background: #00000000;
        font-size: 18px;
        border-bottom: 1px solid #383838;
        padding: 2%;}    
    #btn-menu:checked ~ .menu{
        margin: 70px -220px 0px 0px;}
    #btn-menu:checked ~ label .apagar{
        display: none;}
    #btn-menu:checked ~ label .linea1{
        transform: rotate(45deg);
        margin-top: 20px;
        float: left;}
    #btn-menu:checked ~ label .linea2{
        transform: rotate(-45deg);
        float: left;
        margin-top: -3px;}
    h1{
        font-size: 30px;}
    .item-servicios{
        width: 48%;
        height: 250px;
        padding: 2%;
        margin: 1%;}
    #porqueelegirnos{
        background-size: 100%;
        padding: 10% 5%;}
    .txt-porqueelegirnos{
        width: 80%;
        margin: 5% 10%;}
}
@media(max-width:900px) {
    #contacto{
        padding: 10%;
        background-size: cover;
        background-position: right;}
    .info-contacto{
        width: 100%;
        padding: 2%;
        background: rgba(255, 255, 255, 0.842);}
    .conte-formulario{
        margin-top: 5%;
        width: 100%;}
    footer{
        padding: 5% 5% 1%;}
    .logo-footer{
        width: 50%;
        margin: 5% 25%;}
    .iconos-footer{
        width: 40%;
        margin: 5% 30%;}
    .img-redes-footer{
        width: 20%;
        margin: 2% 6.5%; }
    .logoinicio{
        width: 50%;
        margin: 50% 25% 5%;}
    h1{
        width: 80%;
        margin: 5% 10% 40%;
        font-size: 20px;}
    #inicio{
        background-position: left;}
    #nuestros-clientes{
        background-size: cover;
        background-position: top;
        padding: 5%;
        height: 400px;}
    #novedades{
        padding: 20%; }
    .titu-novedades{
        font-size: 30px;}
    .conte-nove{
        width: 100%;
        margin: 3% 0%;
        height: auto;}
}


@media(max-width:600px) {
    .ico-contacto{
        width: 30px;}
    .txt-contacto{
        padding: 0px;
        float: left;
        width: 85%;}
    .nav-redes{
        display: none;}
    #btn-menu:checked ~ .menu{
        margin: 70px -80px 0px 0px;}
    .logo-item-servicios{
        width: 20%;
        margin: 1% 40%;}
    .item-servicios{
        width: 100%;
        height: auto;
        padding: 3%;
        margin: 2% 0%;}
    .titu-item-servicios{
        text-align: center;}
    .contenido-quienessomos{
        width: 90%;
        margin: 30% 5%;}
    #quienes-somos{
        background-size: 100%;}
    .titu-servicios{
        font-size: 30px;    }
    #porqueelegirnos{
        padding:20% 5%;}
    .titu-porqueelegirnos, .titu-nuestrosclientes{
        font-size: 30px;}
    .txt-porqueelegirnos{
        width: 100%;
        font-size: 16px;
        margin: 5% 0%;}
}