@charset "utf-8";

/* CSS Document */
*{box-sizing:border-box;}
html{background: #333; width:100%; margin:0; padding:0;}
body{width:100%; margin:0; padding:15px;font-family: 'Dosis'; font-weight:700; font-size:1em; color:#EEE; display:flex; align-items:stretch; justify-content:center;}

/*Variables*/
:root{
	--main-highlight: #921d1d;
}
a{text-decoration: none;}
ul{list-style: none;}
/*Estilos individuales*/
.big{font-size:2em !important;}
.reminder{font-size:0.9em; color:#888888;}

/*Mainframe*/
#main-container{background:rgba(0,0,0,0.4);width:1220px; display:flex; flex-direction:column;align-items:stretch; justify-content:flex-start; }
header{margin:15px; position:relative; height:100px; display:flex; align-items:center; justify-content:flex-start;}
nav{margin:15px; background:rgba(0,0,0,0.3);}
main{margin:15px;}
footer{background:rgba(0,0,0,0.4); padding:15px; display:flex; flex-direction:row; align-items:stretch; justify-content:space-evenly;}

/*Header*/
.logo{height:150px;}
.empresa{font-size:3.5em; margin:15px; font-family:'Bungee'; background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}

/*Navbar*/

.nav_new{list-style:none; margin:10px; padding:0; display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:stretch; column-gap:20px; font-family:'Oswald'; font-size:18px}
.nav_new li{display:block;}
.nav_whatsapp{text-decoration:none; display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; background:#1BD741; color:white; border-radius:5px;box-shadow: 0 0 0 0 rgba(27,215,65,1);animation: pulse-verde 2s infinite;}
.nav_red{height:100%;text-decoration:none; display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; background:#921d1d; box-shadow:0 0 0 0 rgba(146,29,29,1); color:white; border-radius:5px; padding:10px 20px; animation: pulse-rojo 2s infinite;}
.nav_red_bright{height:100%;text-decoration:none; display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; background:#DD0000; box-shadow:0 0 0 0 rgba(221,0,0,1); color:white; border-radius:5px; padding:10px 20px; animation: pulse-rojo-bright 2s infinite;}
.nav_red_auto{height:50px;text-decoration:none; display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; background:#921d1d; box-shadow:0 0 0 0 rgba(146,29,29,1); color:white; border-radius:5px; padding:10px 20px; animation: pulse-rojo 2s infinite;}
.nav{
    width: 100%;
    height: 100%;
    position: fixed;
	top:0;
    background-color: rgba(0,0,0,0.8);
    overflow: hidden;
	z-index:9998;
	margin:0;
	left:0;
}
.menu a{
    display: block;
    padding: 20px;
    color: white;
}
.menu a:hover{
    background-color: #921d1d;
}
.nav{
    max-height: 0;
    transition: max-height .5s ease-out;
}
.hamb{cursor: pointer;float: right;padding: 30px 20px;position:fixed;top:20px; right:20px; z-index:9999;background:rgba(0,0,0,0.5);border-radius:10px;}
.menu{padding-top:90px;padding-left:0px; margin:0;font-size:20px;}
.hamb-line {
    background: white;
    display: block;
    height: 2px;
    position: relative;
    width: 24px;

}
.hamb-line::before,
.hamb-line::after{
    background: white;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}
.hamb-line::before{
    top: 5px;
}
.hamb-line::after{
    top: -5px;
}

.side-menu {
    display: none;
}
.side-menu:checked ~ nav{
    max-height: 100%;
}
.side-menu:checked ~ .hamb .hamb-line {
    background: transparent;
}
.side-menu:checked ~ .hamb .hamb-line::before {
    transform: rotate(-45deg);
    top:0;
}
.side-menu:checked ~ .hamb .hamb-line::after {
    transform: rotate(45deg);
    top:0;
}

/*Layout de columnas*/
.col2{display:flex; flex-direction:row; justify-content:flex-start; align-items:stretch;width:100%;}
.col-izq{width:400px; margin:0 10px; display:flex; flex-direction:column; align-items:stretch; justify-content: flex-start;}
.col-der{width:800px; margin:0 10px; display:flex; flex-direction:column; align-items:stretch; justify-content: flex-start;}
.col-full{width:100%; margin:0 10px; display:flex; flex-direction:column; align-items:stretch; justify-content: flex-start;}

/*Estilo de bloques*/
.titulo-bloque{font-size:1.2em; color: var(--main-highlight);}

/*Inputs y forms*/
.input-estilo{background:rgba(255,255,255,0.1); border:none; color:white; font-family:'Dosis'; font-size:1em; padding:5px; margin:5px; width:97% !important;}
.btnestilado{display:block; margin:3px ; padding:10px 20px; transition:0.2s; background:var(--main-highlight); text-decoration:none; color:white; font-family:'Oswald'; font-weight:300; font-size:1em;}
.btnestilado:hover{box-shadow: 0 0 10px var(--main-highlight); transition:0.2s;}
textarea.input-estilo{height:100px !important;}
.btnp-amarillo{display:block; margin:3px ; padding:10px 20px; transition:0.2s; background:#FFF100; text-decoration:none; color:#111; font-family:'Oswald'; font-weight:bold; font-size:1em;animation: pulse-amarillo 2s infinite;}

/*Buscador*/
#buscador{background:rgba(0,0,0,0.3); display:flex; flex-direction:column; align-items:stretch; justify-content: flex-start; padding:10px; }

/*Promos destacadas*/
#promociones-destacadas{background:rgba(0,0,0,0.3); margin-top:10px; display:flex; flex-direction:column; align-items:stretch; justify-content: flex-start; padding:10px;min-height:500px;}
.promo-peque{width:330px; position:relative; margin-top:10px;}
.promo-peque .promo-titulo{position:absolute; bottom:4px; background:rgba(0,0,0,0.6); display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; padding:10px; width:100%; transition:0.5s; color:white; text-decoration:none;}
.promo-peque img{width:100%;}
.promo-peque .promo-titulo .promo_carro{color:gold;}
.promo-peque:hover .promo-titulo{background:rgba(0,0,0,0.8); transition:0.5s}

/*Banner*/
#slick{height:400px; position:relative; width:800px;}
.banner-inicial{background:rgba(0,0,0,0.6); height:400px; position:relative;}
.banner-caption{ display:block; position:absolute; bottom:20px; right:0; padding:15px; font-size:2em; font-family:'Oswald';color:white; background:rgba(0,0,0,0.6);}


/*Catálogo destacado*/
#catalogo-destacado{margin-top:10px; padding:10px; background:rgba(0,0,0,0.3); display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;width:100%;}
#catalogo-destacado #bloque-items{display:flex; flex-wrap:wrap; align-items:stretch; justify-content: space-evenly; margin-top:15px;}
#bloque-items-izquierda{display:flex; flex-wrap:wrap; align-items:stretch; justify-content: space-evenly; margin-top:15px;}
.catalogo-peque{position:relative; margin:5px; background:rgba(0,0,0,0.3); width:250px; dislpay:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; padding:15px;}
.catalogo-peque img{width:100%;}
.catalogo-peque span{display:block; margin:5px 10px; color:white !important;}
.catalogo-peque .catalogo-precio{color:gold !important;}
.catalogo-peque .catalogo-km{font-size:0.8em; color: #DDD !important;}
#bloque-items-izquierda .catalogo-peque{margin:10px 18px;}
.catalogo-carro{height:50px;}
#producto-mainframe{margin-top:10px; padding:10px; background:rgba(0,0,0,0.3); display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;}
.auto_dos-columnas{display:flex; flex-direction:row; align-items:stretch; justify-content:flex-start;}
.auto-galeria{margin:10px; width:500px;}
.auto-detalle{margin:10px; width:100%; padding:10px; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; background:rgba(0,0,0,0.3) url(../img/png/logo_fonsek_watermk.png) no-repeat center center; background-size:contain;}
.auto-detalle div{margin:5px; font-size:1.4em;}
.auto-left{display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; width:700px}
#slick-auto{height:auto; position:relative; width:400px;}

/*Quienes somos*/
.media-card{width:30%; background:rgba(0,0,0,0.5); display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch;}
.card-titulo{color:#EEE; margin:10px; font-size: 1.2em;}
.card-contenido{margin:10px; font-size:0.9em;text-align:justify;}

/*Noticias*/
.noticia-container{display:flex; background:#0f0f0f; margin:5px; padding:10px; width:32%; flex-direction:column;justify-content:flex-start; align-items:stretch; transition:0.2s;}
.noticia-desc{font-size:0.8em; color:#DDD;}
.link-rojo{text-align:right; display:block; font-size:0.8em; color:var(--main-highlight); text-decoration:none; font-family:'Oswald';}
.noticia-container:hover{transform: scale(1.05); box-shadow: 0 0 10px rgba(0,0,0,0.8); transition:0.2s;}
.prevnext{display:flex; flex-direction:row; align-items:stretch; justify-content:space-between;}
.prevnext a{text-decoration:none; color:white; display:block; padding:10px; margin:10px; background:rgba(0,0,0,0.3);}
.prevnext a:hover{color:var(--main-highlight)}

/*Contacto*/
#col-twice{display:flex; flex-direction:row;justify-content:flex-start; align-items:stretch;}
.c1{width:49%; min-height:300px; margin:10px;}

/*Footer*/
.bloque-footer{width:30%; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;}
.noticia-item{background:rgba(0,0,0,0.3); margin:5px; padding:10px;}
.bloque-footer img{width:100%;}

/*Efectos animados*/
@keyframes pulse-rojo {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(146,29,29, 0.7);
  }
  
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(146,29,29, 0);
  }
  
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(146,29,29, 0);
  }
}
@keyframes pulse-verde {
  
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(27,215,65, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(27,215,65, 0);
  }
  
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(27,215,65, 0);
  }
}
@keyframes pulse-amarillo {
  
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255,241,0, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(255,241,0, 0);
  }
  
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255,241,0, 0);
  }
}
@keyframes pulse-rojo-bright {
  
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(221,0,0, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(221,0,0, 0);
  }
  
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(221,0,0, 0);
  }
}

@media screen and (max-width: 800px){
	#main-container{width:100%;}
	header{flex-direction:column;height:auto;}
	.logo{height:80px;}
	.empresa{font-size:2.1em;margin:5px; line-height:40px;}
	nav{margin:0;}
	nav ul{justify-content:space-evenly; flex-wrap:wrap;}
	main{margin:0;}
	.col2{flex-direction:column;margin:0;}
	.col-izq,.col-der,.col-full{width:100% !important; margin:0;}
	#slick,#slick-auto{width:100% !important; }
	
	#promociones-destacadas{min-height:0px;}
	footer{flex-direction:column; width:100%;}
	.bloque-footer{width:100%;}
	#bloque-items-izquierda{flex-direction:column; width:100%; align-items:center;}
	.noticia-container{width:100%;}
	.auto-galeria{margin:0;}
	.auto_dos-columnas{flex-direction:column;}
	.auto-detalle{margin:0; font-size:.6em;}
	.big{font-size:1.5em !important}
	.media-card{width:100%;}
	.auto-left{width:100%;}
	.hamb{cursor: pointer;float: right;padding: 30px 20px;position:fixed;top:20px; right:20px;z-index:9999;background:rgba(0,0,0,0.5);border-radius:10px;}
	.menu{padding-top:90px;padding-left:0;font-size:20px;}
}