/* ----------- 
ETIQUETAS 
----------- */
* { box-sizing: border-box; }
body { margin: 0; border: 0; padding: 0; font-family: Verdana, sans-serif; font-size: 18px; }
h1 { font-family: 'Anton', sans-serif; margin: 13px 0; color: #222222; }
h2 { font-family: 'Anton', sans-serif; }
button { padding: 8px 18px; border: thin solid #ccc; border-radius: 5px; font-size: 16px; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }

header h2 a { color: #000; }
header h2 a:hover { color: #FFDE16; text-decoration: none; }

/* ----------- 
CLASES
----------- */
.boton1 { background-color: #FFDE16; padding: 14px 18px; border: 1px solid #a29b28; border-radius: 7px; font-family: 'Anton'; color: #111111; 
font-size: 24px; text-decoration: none; }
.boton1:hover { background-color: #ffd900; }

.ancho { margin: 0 auto; width: 1100px; }
.ancho:after , .cols:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

.ancho2 { margin: 0 auto; width: 1200px; padding: 0 10px; }
.ancho2 > header { padding: 10px; }

.cols {  }
.col-1de1 { }
.col-1de2 { float: left; width: 50%; }
.col-1de3 { float: left; width: 33.33%; }
/* MODAL */
.modal { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; overflow: auto; background-color: rgb(0,0,0); 
background-color: rgba(0,0,0,0.8); }
.modal-cerrar { position: absolute; z-index: 1001; top: 0; right: 0; color: #999999; }
.modal-cerrar:hover { color: black; }
.modal-caja { position: relative; width: 350px; background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; border-radius: 4px; }
.modal-interno { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }

/* Modal Caja */
.modal-caja-cerrar { position: absolute; top: 0; right: 0; color: #999999; }
.modal-caja-cerrar:hover { color: black; text-decoration: none; }
/* Modal Galería */
#modal-imagen { display: none; }
#modal-imagen-img { max-width: 100%; max-height: 100%; }

/* ---------------------------------------------------------------------------------- */
.caja-svg { margin: 20px 0; border: thin solid #bbbbbb; border-radius: 6px; display: grid; grid-template-columns: 90px auto; }
.caja-svg .insignia { padding: 16px 0; font-size: 40px; text-align: center; }
.caja-svg .texto { padding: 16px 10px 16px 0; }

/* CAJAS FLEX */
.cajas-flex { display: flex; flex-wrap: wrap; }
.cajas-flex div div.caja {  }
.cajas-flex div.caja picture {  }
.cajas-flex div.caja picture img { width: 100%; }

.cajas-flex div.caja { border: thin solid #cccccc; border-radius: 5px; font-size: 16px; }

.cajas-flex div.caja header,
.cajas-flex div.caja article,
.cajas-flex div.caja footer { padding-left: 14px; padding-right: 14px; }

.cajas-flex div.caja header { padding-top: 14px; padding-bottom: 14px; }
.cajas-flex div.caja article { padding-top: 2px; padding-bottom: 1px; }
.cajas-flex div.caja footer { padding-top: 16px; padding-bottom: 16px; font-size: 15px; display: grid; grid-template-columns: auto auto; }
.cajas-flex div.caja footer .boton { padding: 6px 8px; background-color: #222222; 
border: thin solid #000000; border-radius: 6px; color: #eeeeee; font-size: 12px; text-decoration: none; }
.cajas-flex div.caja footer .boton:hover { color: #FFDE16; }

.cajas-flex div.caja footer .botones { text-align: right; }

.cajas-flex div.caja header h3,
.cajas-flex div.caja header h4 { margin: 0px; }

div.flex3 > div { width: 33.33%; padding: 10px; }
div.flex3 > div.flex3-2 { width: 66.66%; }
/* ----------------------------------------------------------------------------------
GALERIA */
div.galeria-flex { display: flex; flex-wrap: wrap; }
div.galeria-flex > div { width: 33.33%; padding: 10px; }
div.galeria-flex div.caja {  }
div.galeria-flex div.caja > img { width: 100%; }

/* ---------------------------------------------------------------------------------- */
/* Divisiones Fijadas */
div#mensaje { position: fixed; top: 20%; right: 20%; left: 20%; z-index: 9; background-color: #fbfbfb; box-shadow: 2px 2px 2px #000; 
border: thin solid #ddd; border-radius: 5px; padding: 0px 25px 25px; }
div#mensaje div.botones { text-align: center; }

div.scrollup { bottom: 1.5em; cursor: pointer; display: none; position: fixed; right: 2.2em; z-index: 4; }
/* ---------------------------------------------------------------------------------- */
/* Navegación 
nav#ant { background-color: #FFDE16; font-family: 'Anton', sans-serif; }
nav#ant div#logo { float: left; width: 18%; }
nav#ant div#logo img { margin: 5px 0; }
nav#ant div#navegacion { float: left; width: 82%; }
nav#ant div#navegacion ul { float: right; list-style-type: none; margin: 0; padding: 0; }
nav#ant div#navegacion ul li { float: left; }
nav#ant div#navegacion ul li a,
nav#ant div#navegacion ul li span { display: block; padding: 34px 20px; text-decoration: none; color: #111; font-size: 35px; text-transform: uppercase; }
nav#ant div#navegacion ul li a:hover,
nav#ant div#navegacion ul li span:hover {  }

#boton-menu { display: none; float: left; }
#boton-menu img {  }
.abrir { }
.cerrar { }
*/
/* ---------------------------------------------------------------------------------- */
/* NUEVO MENÚ NAVEGACION */
div#nav2 { background-color: #FFDE16; }
div#nav2 div.ancho2 { display: grid; grid-template-columns: 181px auto 0; }
div#nav2 div.ancho2 picture { padding: 2px 0; }
div#nav2 div.ancho2 picture img { display: block; width: 100%; margin: 0; padding: 0; }

div#nav2 div.ancho2 nav,
div#nav2 div.ancho2 section { display: grid; align-content: center; justify-content: end; }
div#nav2 div.ancho2 nav div { }
div#nav2 div.ancho2 nav div ul { list-style-type: none; margin: 0; padding: 0; }
div#nav2 div.ancho2 nav div > ul { display: flex; flex-direction: row; }
div#nav2 div.ancho2 nav div ul li { }
div#nav2 div.ancho2 nav div ul li a { display: block; text-decoration: none; white-space: nowrap; color: inherit; }
div#nav2 div.ancho2 nav div ul li a:hover { color: #eeeeee; }
div#nav2 div.ancho2 nav div > ul > li > a { padding: 16px; font-family: 'Anton', sans-serif; font-size: 35px; text-transform: uppercase; }

div#nav2 div.ancho2 nav div ul .modal-caja-cerrar { display: none; }

div#nav2 div.ancho2 section button { display: none; margin-right: 9px; }
/* ---------------------------------------------------------------------------------- */
/* Slideshow */
section#slideshow { position: relative; width: 100%; margin: auto; overflow: hidden; }
section#slideshow div.slides { display: none; }
section#slideshow div.slides img { display: block; width: 100%; height: 100%; border: 0 }
section#slideshow .prev,
section#slideshow .next { background-color: rgba(0,0,0,0.3); cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; 
font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; text-decoration: none; }
section#slideshow .next { right: 0; border-radius: 3px 0 0 3px; }
section#slideshow .prev:hover,
section#slideshow .next:hover { background-color: rgba(0,0,0,0.8); color: #FFDE16; }

section#slideshow .textoslide { width: 100%; position: absolute; padding: 8px 12px; color: #FFDE16; /* font-size: 5em; */ font-weight: bold; text-shadow: 4px 4px 2px black; text-align: center; }

section#slideshow .textoslide.sup0 { top: 0; }
section#slideshow .textoslide.sup5 { top: 5%; }
section#slideshow .textoslide.sup10 { top: 10%; }
section#slideshow .textoslide.sup15 { top: 15%; }
section#slideshow .textoslide.sup20 { top: 20%; }
section#slideshow .textoslide.sup30 { top: 30%; }
section#slideshow .textoslide.sup40 { top: 40%; }
section#slideshow .textoslide.inf0 { bottom: 0; }
section#slideshow .textoslide.inf5 { bottom: 5%; }
section#slideshow .textoslide.inf10 { bottom: 10%; }
section#slideshow .textoslide.inf15 { bottom: 15%; }
section#slideshow .textoslide.inf20 { bottom: 20%; }
section#slideshow .textoslide.inf30 { bottom: 30%; }
section#slideshow .textoslide.inf40 { bottom: 40%; }
/* The dots/bullets/indicators */
#dots { position: absolute; bottom: 1%; left: 0; right: 0; text-align: center; }
.dot { cursor: pointer; height: 13px; width: 13px; margin: 0 2px; background-color: #aaa; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }
.active, .dot:hover { background-color: #de1; }
/* Fading animation */
.fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; }
@-webkit-keyframes fade { 
	from { opacity: .4} to { opacity: 1 }
}
@keyframes fade { 
	from { opacity: .4 } to { opacity: 1 }
}
/* mymoving animation */
.mymove { -webkit-animation-name: mymove; -webkit-animation-duration: 1.5s; animation-name: mymove; animation-duration: 1.5s; }
@-webkit-keyframes mymove { 
	from { right: -100% } to { right: 0 }
}
@keyframes mymove { 
	from { right: -100% } to { right: 0 }
}
/* moverder animation */
.moverder { -webkit-animation-name: moverder; -webkit-animation-duration: 1.5s; animation-name: moverder; animation-duration: 1.5s; }
@-webkit-keyframes moverder { 
	from { right: -100% } to { right: 0 }
}
@keyframes moverder { 
	from { right: -100% } to { right: 0 }
}
/* moverizq animation */
.moverizq { -webkit-animation-name: moverder; -webkit-animation-duration: 1.5s; animation-name: moverizq; animation-duration: 1.5s; }
@-webkit-keyframes moverizq { 
	from { left: -100% } to { left: 0 }
}
@keyframes moverizq { 
	from { left: -100% } to { left: 0 }
}
/* ---------------------------------------------------------------------------------- */
/* Main */
div#migas { margin: 4px 0; font-size: 18px; font-family: Arial, helvetica, sans-serif; }
div#migas .fas { /*color: #FFDE16;*/ }
div#migas a { color: #222222; font-size: 18px; }
div#migas a:hover { text-decoration: none; color: #ffd900; }
/* ---------------------------------------------------------------------------------- */
/* ARTÍCULO */

article > header { padding: 10px; }

article h1 { font-size: 38px; }
article h2 { font-size: 30px; }

article .enconstruccion { display: flex; }
article .enconstruccion div.imagen { width: 304px; }
article .enconstruccion div.texto { width: auto; padding-left: 20px; }

article .contenido { padding: 0 11px; }

article > footer { padding: 15px; }
/* ---------------------------------------------------------------------------------- */
/* SECCIONES */
section h2 { font-size: 38px; }


/* Servicios 2 */
section#servicios2 { padding: 30px 0; }
section#servicios2 header { margin-bottom: 30px; }

.insignias-flex { display: flex; flex-flow: row wrap; padding: 40px 0 90px; }

.insignias-flex .caja { border: thin solid #bbb; border-radius: 6px; display: grid; grid-template-columns: 90px auto; }
.insignias-flex .caja:hover { background-color: #fd1; border: thin solid #fd1; }
.insignias-flex .caja .insignia { padding: 18px 0; font-size: 40px; text-align: center; }
.insignias-flex .caja .texto { padding: 18px 10px 18px 0; }

/* Servicios */

#servicios { margin: 0; padding: 30px 0; }
#flexservicios { display: flex; flex-wrap: wrap; padding: 40px 0; }
#servicios .ancho div { width: 33.33%; padding: 12px 6px; }
#servicios .ancho div.doble { width: 66.66%; }

#flexservicios > div { margin: 25px 0; }
#flexservicios > div > div.insignia { display: flex; width: 100%; }
#flexservicios > div > div.insignia > div.insignia-vector { width: 70px; font-size: 36px; text-align: center; }
#flexservicios > div > div.insignia > div.insignia-texto { width: auto; }
/* -------------------------------------------------------------- */
/* Productos */
section#productos { padding: 30px 0; }
section#productos header { margin: 0 0 20px 0; }
section#productos > div > footer { margin-top: 60px; text-align: center; }
/* -------------------------------------------------------------- */
/* Promociones */

.completo { width: 100%; }

#promos { padding: 20px 0 70px 0; }
#promos header {  }
#promos .completo { display: flex; flex-direction: row; }
/*#promos .ancho > div { width: 33.33%; }*/
#promos .completo > div { padding: 2% 1%; }
#promos .completo > div > img { display: block; width: 100%; }

#promo1 { width: 37%; }
#promo2, #promo3 { width: 31.5%; }
/* -------------------------------------------------------------- */
/* Promocions 2 nuevo */

div#promociones-grid { display: grid; grid-template-columns: 37% auto auto; row-gap: 20px; }
div#promociones-grid > div { padding: 10px; }
div#promociones-grid > div > div > img { width: 100%; }
div#promociones-grid > div > div > a > img { width: 100%; }
div#promociones-grid > div#promocion0 { grid-column: 1 / 4; border: 1px solid #ccc; border-radius: 3px; }
div#promociones-grid > div.promocion1d3 { grid-column: 1 / 4; border: 1px solid #ccc; border-radius: 3px; }

/* -------------------------------------------------------------- */
/* Ubicación */

section#ubicacion { }
section#ubicacion iframe#mapa { border: 0; width: 100%; }
/* -------------------------------------------------------------- */
/* Contacto */
section#contacto { padding: 60px 0; }
section#contacto .campos label { display: block; float: left; width: 20%; margin: 6px 0px; }
section#contacto .campos input { display: block; float: left; width: 80%; margin: 4px 0px; padding: 5px 8px; font-size: 18px; }
section#contacto .campos textarea { display: block; float: left; width: 80%; margin: 4px 0px; padding: 5px 8px; font-family: Verdana, sans-serif; 
font-size: 18px; }
section#contacto .botones { padding: 20px 0; text-align: right; }
section#contacto .botones input { margin: 10px 0px; padding: 10px 20px; font-size: 16px; }

.promo-banner { text-align: center; padding: 40px 0; }

/* ---------------------------------------------------------------------------------- */
/* Pie de Página */
footer#maquetacion { padding: 20px 0; background: #111; color: #ccc; }
footer#maquetacion div#footer1-grid { display: grid; grid-template-columns: auto auto; }
footer#maquetacion div#footer1-grid > div { padding: 10px; }
footer#maquetacion div#footer1-grid > div:nth-child(2) { text-align: right; }

@media screen and (max-width: 1250px) {
	.ancho2 { width: 100%; }
	
	div#nav2 div.ancho2 { display: grid; grid-template-columns: 184px 0 auto; }
	div#nav2 div.ancho2 nav div > ul { display: flex; flex-direction: column; }
	div#nav2 div.ancho2 nav div ul { margin: 40px auto; padding: 10px; }
	
	div#nav2 div.ancho2 nav div ul li a { display: inline-block; }
	div#nav2 div.ancho2 nav div ul li a:hover { color: #222222; }
	div#nav2 div.ancho2 nav div > ul > li > a { margin: 5px; padding: 5px; }
	
	div#nav2 div.ancho2 nav div ul .modal-caja-cerrar { display: block; }
	
	div#nav2 div.ancho2 nav div { display: none; }
	div#nav2 div.ancho2 section button { display: block; }
	
	.insignias-flex { padding: 0; }
}

@media screen and (max-width: 1120px) {
	.ancho { width: 90%; }
	div.scrollup { }
	
	/* Navegación */
	
	nav div#logo { width: 90%; }
	nav div#logo img { margin: 10px 0 7px 0; width: 100px; }
	nav div#navegacion { display: none; position: absolute; z-index: 1; top: 84px; right: 0; width: auto; background: white; }
	nav div#navegacion ul { float: left; margin: 0; }
	nav div#navegacion ul li { float: none; }
	nav div#navegacion ul li a,
	nav div#navegacion ul li span { padding: 10px 20px; color: #111; font-size: 20px; text-transform: uppercase; }
	
	#boton-menu { display: block; text-align: right; }
	#boton-menu img { width: 16px; margin: 34px 0 0 0; }
}

@media screen and (max-width: 1100px){
	#servicios .ancho div, #servicios .ancho div.doble { width: 50%; }
	#flexservicios { padding: 30px 0; }
}

@media screen and (max-width: 1000px){
	#promos .completo { display: flex; flex-direction: column; }
	#promos .completo > div { padding: 5% 20%; }
	#promo1 { width: 100%; }
	#promo2, #promo3 { width: 100%; }
}

@media screen and (max-width: 900px){
	#servicios .ancho div, #servicios .ancho div.doble { width: 100%; }
	
	div.flex3 > div { width: 50%; }
	div.flex3 > div.flex3-2 { width: 50%; }	
}
@media screen and (max-width: 800px){
	div#promociones-grid { grid-template-columns: 50% 50%; }
	div#promociones-grid div#promocion1 { grid-column: 1 / 3 }
	div#promociones-grid > div#promocion0 { grid-column: 1 / 3; }
}

@media screen and (max-width: 600px){
	article .enconstruccion { display: block; }
	article .enconstruccion div.imagen { width: 100%; }
}

@media screen and (max-width: 600px){
	div.flex3 > div { width: 100%; }
	div.flex3 > div.flex3-2 { width: 100%; }
}

@media screen and (max-width: 500px){
	section#contacto .campos label { width: 100%; }
	section#contacto .campos input { width: 100%; }
	section#contacto .campos textarea { width: 100%; }
}

@media screen and (max-width: 454px){
	.modal-caja { width: 96%; }
	
	footer#maquetacion div#footer1-grid { display: grid; grid-template-columns: auto; }
	footer#maquetacion div#footer1-grid > div:nth-child(2) { text-align: left; }
}