* {margin: 0;padding: 0;font-family: Verdana;}
body {background-color:rgb(245,245,255);}


#menu{position: absolute;position:fixed;top: 0px;width: 100%;height: 120px;background-color: rgba(240,240,255,0.9); z-index:3;} 
#menu img{margin-left: 130px;margin-top:7px; width:190px;}
#menu ul{margin-left: 25%; margin-top: -80px;}





#ban_slider{ width: 1350px; height: 1000px; overflow: hidden; margin-top:120px; margin-bottom:100px;}
#ban_slider ul{ display: flex; animation: cambio 12s infinite alternate linear; width: 300%;}
#ban_slider li{ width: 100%; list-style: none;}
#ban_slider img{ width: 100%; object-fit:cover;}
@keyframes cambio{
    0%{margin-left: 0;}
    28%{margin-left: 0;}
   
    33%{margin-left: -100%;}
    66%{margin-left: -100%;}
    
    72%{margin-left: -200%;}
    100%{margin-left: -200%;}}
@media only screen and (min-width:320px) and (max-width:768px){#ban_slider, #ban_slider ul, #ban_slider img{ height: 100vh; } }


#baner_principal{background-image: url('../Imagenes/Paginas/baners/index1.png'); background-size:cover; margin-top:130px; margin-left:0px; width: 1350px; height: 2500px; 
animation: anm_baner_principal 14s infinite;}
@keyframes anm_baner_principal{
25%{background-image: url('../Imagenes/Paginas/baners/index1.png'); background-size:cover;}

30%{background-image: url('../Imagenes/Paginas/baners/index2.png'); background-size:cover;}
50%{background-image: url('../Imagenes/Paginas/baners/index2.png'); background-size:cover;}

55%{background-image: url('../Imagenes/Paginas/baners/index3.png'); background-size:cover;}
75%{background-image: url('../Imagenes/Paginas/baners/index3.png'); background-size:cover;}

80%{background-image: url('../Imagenes/Paginas/baners/index4.png'); background-size:cover;}
100%{background-image: url('../Imagenes/Paginas/baners/index4.png'); background-size:cover;}

}





.nav li{padding: 8px 16px; margin-left:2%;}
.nav a li {color: #000000;text-decoration: none;font-size: 28px;display: block;z-index:1;transition-duration: 500ms;}
.nav a li{float: left;list-style: none;transition-duration: 500ms;border-radius: 10px;}
.nav a li:hover{background: rgb(170,170,245);z-index:1;color: white;}
.nav a > li:hover{color:white;}
.nav a li ul{background-color: rgba(255,255,255,0.8); display: none;position: absolute;width: 300px;}
.nav a li ul a{width: 250px;position: relative;left:20px;}
.nav a li:hover > ul{display: block;}


#menumob {width: 90px;height: 90px;position:absolute;position:fixed;z-index:4;top:15px;left:25px; transition-duration: 500ms;}
#menumob img{width:50px;height:40px;position:absolute;position:fixed;z-index:4;top:40px;left:35px;}
#menumob div{ padding-left:30px; margin-top:95px; margin-left:-25px; background-color:rgb(240,245,255); height:2100px; width:550px; transition-duration: 500ms; transform-origin: left; transform:scaleX(0);}
#menumob div ul a{text-decoration:none;}
#menumob div ul li{ margin-top: 10px; margin-left: 20px; color:rgba(0,0,0,0); font-weight: normal; font-size:40px; text-decoration:none;}
#menumob:hover div ul li{display:block; color:rgb(0,0,0); transform: scaleX(1);}
#menumob:hover div{display:block; transition-duration: 500ms; transform: scaleX(1);}


#cabecera{position: absolute;top:120px;width: 100%;height: 550px;}
#contenedor{position: absolute;color:white;top: 2950px;left:50px;width: 1250px;height: 1300px;background: rgba(0,0,0,0);}

ul.autos li {width: 180px;height: 180px;float: left; display: inline;margin-left:25px; margin-bottom: 30px;padding: 0;background:rgb(4,17,66);position: relative;}
ul.autos li:hover {z-index: 1;}
ul.autos li img {z-index: 2;position: relative;width: 180px;height: 180px;transition-duration: 400ms;}
ul.autos li:hover img{position: absolute;margin-left: 10px;width: 160px;height: 160px;z-index: 2;margin-top: 10px;}
ul.autos li .info {position: absolute;left: -3px; top: -3px;padding: 220px 3px 12px;width: 220px;display: none;background: rgb(4,17,66);z-index: 1;}
ul.autos li:hover .info {display: block;}
ul.autos li h2 {font-size: 15px;padding: 6px 0;text-align: justify;}
ul.autos li p {font-size: 12px;text-align: justify;}

ul.marcas_autos li {width: 280px;height: 280px;float: left; display: inline;margin-left:25px; margin-bottom: 30px;padding: 0;background:rgb(4,17,66);position: relative;}
ul.marcas_autos li:hover {z-index: 1;}
ul.marcas_autos li img {z-index: 2;position: relative;width: 280px;height: 280px;transition-duration: 400ms;}
ul.marcas_autos li:hover img{position: absolute;margin: 10px;width: 260px;height: 260px;z-index: 2;}
ul.marcas_autos li .info {position: absolute;left: -3px; top: -3px;padding: 220px 3px 12px;width: 220px;display: none;background: rgb(4,17,66);z-index: 1;}
ul.marcas_autos li:hover .info {display: block;}
ul.marcas_autos li h2 {font-size: 15px;padding: 6px 0;text-align: justify;}
ul.marcas_autos li p {font-size: 12px;text-align: justify;}

ul.marcas_productos li {width: 280px;height: 280px;float: left; display: inline;margin-left:25px; margin-bottom: 30px;padding: 0;background:rgb(0,58,0);position: relative;}
ul.marcas_productos li:hover {z-index: 1;}
ul.marcas_productos li img {z-index: 2;position: relative;width: 280px;height: 280px;transition-duration: 400ms;}
ul.marcas_productos li:hover img{position: absolute;margin: 10px;width: 260px;height: 260px;z-index: 2;}
ul.marcas_productos li .info {position: absolute;left: -3px; top: -3px;padding: 220px 3px 12px;width: 220px;display: none;background: rgb(4,17,66);z-index: 1;}
ul.marcas_productos li:hover .info {display: block;}
ul.marcas_productos li h2 {font-size: 15px;padding: 6px 0;text-align: justify;}
ul.marcas_productos li p {font-size: 12px;text-align: justify;}

ul.columns {width:1300px; margin-left:-50px;}
ul.columns li {width: 590px;height: 640px;float: left; display: inline;margin-left:50px; margin-bottom: 50px;padding: 0;position: relative;background: rgb(255,255,255); z-index:0; border: solid #005692 5px;}
ul.columns li div{width:590px; height:130px; background:white; position:absolute; top:510px; z-index:2; }
ul.columns li div p{font-size:70px; text-align:center; margin-top:20px; font-weight:bold; color: rgb(0,86,146);}
ul.columns li img {position: relative;width: 570px;height: 570px;z-index: 2;transition-duration: 400ms; margin:10px;}


ul.columns li:hover {z-index: 1; background: rgb(5,80,130); transition-duration: 400ms; border: solid #055082 5px;}
ul.columns li:hover img{position: absolute;margin-left: 10px;width: 560px;height: 560px;z-index: 2;margin: 15px;}
ul.columns li:hover div{width:590px; height:140px; background:rgb(5,80,130); top:500px; transition-duration: 400ms;}
ul.columns li:hover div p{ margin-top:30px; color: white; transition-duration: 400ms;}


ul.columns li .info {position: absolute;left: -5px; top: -5px;padding: 280px 5px 15px;width: 280px;display: none;background: rgba(4,17,66,1);}
ul.columns li:hover .info {display: block;}
ul.columns li h2 {font-size: 15px;padding: 6px 0;text-align: justify;}
ul.columns li p {font-size: 12px;text-align: justify;}

#promocion{background-image: url('../Imagenes/Paginas/baners/index_envios_1.png'); background-size:cover; margin-top:900px; margin-left:-50px; width: 1350px; height: 900px; 
animation: anmpromocion 7s infinite;}
@keyframes anmpromocion{
25%{background-image: url('../Imagenes/Paginas/baners/index_envios_1.png'); background-size:cover;}
25%{background-image: url('../Imagenes/Paginas/baners/index_envios_2.png'); background-size:cover;}
50%{background-image: url('../Imagenes/Paginas/baners/index_envios_3.png'); background-size:cover;}
80%{background-image: url('../Imagenes/Paginas/baners/index_envios_3.png'); background-size:cover;}
100%{background-image: url('../Imagenes/Paginas/baners/index_envios_1.png'); background-size:cover;}

}


/* SUB MENU INFERIOR PRINCIPAL*/
#datos{position: absolute;width: 1350px;height: 160px;background: rgb(4,17,66);color:#FFFFFF;left: 0px;}
.datos{text-align: center;font-size: 33px;}
.datos a{margin-left: 25px;margin-right: 25px;}
.datos h2{margin-top:8px;font-size: 25px;}
.datos p b a{text-decoration: none;color: white;}
.datos p b a:hover{text-decoration: underline white; }

/* SECCION DE WHSTASPP*/
#whats {width: 550px;height: 110px;position:absolute;position:fixed;z-index:3;top:2320px;left:1250px;border-radius: 15px;transition-duration: 500ms;}
#whats img{width:160px;height:160px;position:absolute;position:fixed;z-index:2;top:2300px;left:1200px;}
#whats p{margin-top: 10px;margin-left: 20px; color:rgba(0,0,0,0); position:absolute; font-weight: normal; font-size:35px; transition-duration: 500ms;transform-origin: right;transform:scaleX(0);}
#whats:hover{background:rgba(255,255,255,1);left:690px;}
#whats:hover p{color:rgba(0,0,0,1);display:block;transform: scaleX(1);}