/* Clearfix */
.clearfix:before, .clearfix:after { content: " "; display: table } .clearfix:after { clear: both } .clearfix { *zoom: 1 }

/* Basic Styles */
body { font-family: 'Poppins', sans-serif; width: 100%; color:#808080; margin:auto; font-size:14px; background:#ffffff; line-height: 27px }
body, html { height: 100% }
a { cursor: pointer !important }
#wrapper { width: 100%; max-width: 100%; margin: 0% auto; height: 100%; display: block }
.link { text-align: center }
.link a { padding: 1% 12%; background:#fff; color:#5c5c5c; text-decoration: none; border-radius: 10px; float: right; border: 1px solid #5c5c5c }
.link a:hover { background: #5c5c5c; color: #fff }
.enlaces { text-align: center }
.enlaces a { padding: 1% 12%; background:#96c3bc; color:#fff; text-decoration: none; border-radius: 10px; float: right; border: 1px solid #96c3bc }
.enlaces a:hover { background: #fff; color: #96c3bc }

/* Header Styles */
#header_box { width: 100%; margin: 0% auto; color: #ece8df; float: left; background: #ffffff }
#header { width: 100%; float: left }
#header #data { width: 88%; float: left; background:#263c4e; color: #ffffff; border-bottom:1px solid #ece8df; padding: 0% }
#header #data .phone { float:left; padding: 0% 2% 0% 6%; margin:0.5% 0%; background: url("../img/iconPhoneWhite.png") no-repeat 12% center; border-right: 1px solid #fff }
#header #data .email { float:left; padding: 0% 2% 0% 6.6%; margin:0.5% 0%; background: url("../img/iconEmailWhite.png") no-repeat 8% center; border-right: 1px solid #fff }
#header #data .address { float:left; padding: 0% 2% 0% 7%; margin:0.5% 0%; background: url("../img/iconAddress.png") no-repeat 8% center }

#header #rrss { width: 10%; float: left; padding: 0.5% 1%; margin: 0%; background: #263c4e; height: 25px; color:#ffffff; }

#header #logo { width: 20%; float: left; color:#ece8df; padding: 1% 0%; margin: 0% 40%; text-align:center; }
#header #logo img { max-height: 124px }

#header h1 { text-indent: -9999px; display: none }

#header #barraMenu { width: 74%; float: left; background:#F3F6F9; color: #ffffff; padding: 2px 13%; margin: 0px }
#header #barraMenu #menu { width:55%; padding: 0%; margin: 0% auto; text-align: center }
#header #barraMenu #menu .enlace { float: left }
#header #barraMenu #menu .enlace a { color:#263c4e; text-decoration: none; float: left; padding: 10px 20px; font-size: 20px }
#header #barraMenu #menu .enlace:hover { background:#ece8df }
#header #barraMenu #menu .enlace a:hover, #header #barraMenu #menu .enlace a.activo { color:#263c4e; background: #ece8df }
#header #login, #header #toggle, #header #togglehide { display: none }
#header #barraMenu #menu .ofertas a, #header #barraMenu #menu .ofertas a.activo { background: #da121a; color:#fff }


/* Content Styles */
#container_box { width: 100%; max-width: 100%; padding: 0%; float:left; background: #fff; overflow: hidden }
#container { width: 100%; max-width: 100%; margin: 0% auto; color: #525252; float: left }

#carousel { float: left; width: 100% }
#carousel .cover { background: url(../img/coverBottom.png) no-repeat; z-index: 7; position: absolute; width: 100%; height: 160px; margin-top: -155px } 

#acerca { float: left; width: 80%; padding:3% 10%; background:#ffffff; }
#acerca h1 { color:#263c4e; width:100%; text-align:center; font-size:48px; line-height: 48px; }
#acerca .content { float: left; width: 100%; padding: 0%; text-align: justify }
#acerca .mision { float: left; width: 35%; padding: 4% 58% 5% 7%; text-align: left; background: url(../img/bgMision.jpg) no-repeat center; color: #fff; background-size: 100% }
#acerca .vision { float: left; width: 35%; padding: 10% 7% 10% 58%; text-align: left; background: url(../img/bgVision.jpg) no-repeat center; color: #fff; background-size: 100% }
#acerca .mision h2 { text-transform: uppercase; border-bottom: 1px solid #fff }
#acerca .vision h2 { text-transform: uppercase; border-bottom: 1px solid #fff}

#slogan { float: left; width: 100%; font-size: 70px; color:#fff; line-height: 60px }
#slogan .coverTop { background: url(../img/coverTop.png) no-repeat; z-index: 7; width: 100%; height: 160px; margin-top: -1px; float: left } 
#slogan .coverBottom { background: url(../img/coverBottom.png) no-repeat; z-index: 7; width: 100%; height: 160px; margin-top: 0px; float: left } 
#slogan .content { float: left; width: 70%; padding: 2% 15%; text-align: center }

#servicios { float: left; width: 100%; background:#ece8df }
#servicios .title { float: left; width: 80%; padding: 2% 10% }
#servicios .title h2 { color:#263c4e; font-size: 40px; text-align: center; margin-bottom: 0% }
#servicios .title p { text-align: center; width: 30%; margin: 20px auto 0px; }
#servicios .title h2 span { color:#CE1E0F }
#servicios .content { float: left; width: 80%; padding: 0% 10% 2%; text-align: justify }
#servicios .content ul { float:left; width: 90%; padding: 2% 5%; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 30px; }
#servicios .content ul li { list-style: none; position: relative; height: auto; background: #fff; border-radius: 10px; text-align: center; padding: 20px; box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.1); }
#servicios .content ul li .imagen { float: left; width: 100%; height: 150px; display: flex; align-items: center; justify-content: center; }
#servicios .content ul li .imagen img { max-width: 100%; max-height: 100% }
#servicios .content ul li h3 { font-size: 1.2em; line-height: 18px; margin: 0px auto 10px; color:#263c4e; height: 40px; float: left; width: 100% }
#servicios .content ul li .descripcion { line-height: 18px; text-align: left; padding: 0% 3% 3%; margin: 0px 0px 10px; height: 70px; float: left }
#servicios .content ul li .link { float: left; margin: 0px; width: 42%; margin-right: 5%; }
#servicios .content ul li .enlaces { float: left; margin: 0px; width: 42%; clear:left; }

#servicio { float: left; width: 100%; background:#ece8df }
#servicio .title { float: left; width: 80%; padding: 2% 10% }
#servicio .title h2 { color:#263c4e; font-size: 40px; text-align: center; margin-bottom: 0% }
#servicio .title p { text-align: center; width: 30%; margin: 20px auto 0px; }
#servicio .title h2 span { color:#CE1E0F }
#servicio .content { float: left; width: 80%; padding: 0% 10% 2%; text-align: justify }
#servicio .content .imagen { float: left; width: 100%; height: 150px; display: flex; align-items: center; justify-content: center; }
#servicio .content .imagen img { max-width: 100%; max-height: 100% }
#servicio .content h3 { font-size: 1.2em; line-height: 18px; margin: 0px auto 10px; color:#263c4e; height: 40px; float: left; width: 100% }
#servicio .content .descripcion { line-height: 18px; text-align: left; padding: 0% 3% 3%; margin: 0px 0px 10px; height: auto; float: left }
#servicio .content .link { float: right; margin: 0px; width: 42% }

#galeria { float: left; width: 100%; background: #f8f8f8 }
#galeria .coverTop { background: url(../img/coverTop.png) no-repeat; z-index: 7; width: 100%; height: 160px; margin-top: -1px; float: left } 
#galeria .coverBottom { background: url(../img/coverBottomGray.png) no-repeat; z-index: 7; width: 100%; height: 160px; margin-top: 0px; float: left } 
#galeria .title { float: left; width: 90%; padding: 2% 5% }
#galeria .title h2 { color:#263c4e; font-size: 60px; text-align: center; margin-bottom: 0% }
#galeria .content { float: left; width: 90%; padding: 1% 5% 7%; text-align: justify }
#galeria .btnInstagram { background:#96c3bc; text-align:center; padding:5px 10px; border-radius:10px; float:left; margin: 0px 44% 50px; width: 200px; }
#galeria .btnInstagram a { color:#fff; text-decoration:none; font-weight:bold; }
#galeria .btnInstagram:hover { background:#263c4e }

#cursos { float: left; width: 100%; background: #F3F6F9 }
#cursos .content { float: left; width: 100%; padding: 0%; text-align: justify }
#cursos .content .curso { float: left; width: 30%; padding: 5% 10%; text-align: justify; height: 280px; }
#cursos .content .curso:nth-child(1) h3 { color:#183A6D; font-size: 2em; text-align: left; margin-bottom: 0% }
#cursos .content .curso:nth-child(1) p.resumen { color:#183A6D; font-size: 1em; text-align: left; margin-bottom: 0% }

#cursos .content .red { background: #CE1E0F !important }
#cursos .content .curso:nth-child(2) h3 { color:#fff; font-size: 2em; text-align: left; margin-bottom: 0% }
#cursos .content .curso:nth-child(2) p.resumen { color:#fff; font-size: 1em; text-align: left; margin-bottom: 0% }

#clientes { float: left; width: 90%; background: #F3F6F9; padding: 0% 5%; }
#clientes h2 { float: left; width: 100%; color: #565656; text-align: center; margin:2% 0% }
#clientes .banner { width: 21%; height: auto; margin: 1% 2%; padding: 0%; float: left; display: flex; justify-content: center; background: #fff; border-radius: 10px }

#ubicacion { float: left; width: 100%; background: #fff }
#ubicacion .title { float: left; width: 90%; padding: 2% 5% 0% }
#ubicacion .title h2 { color:#000000; font-size: 60px; text-align: center }
#ubicacion .content { float: left; width: 50%; padding: 0%; text-align: justify }
#ubicacion .content #mapaempresa { float: left; width: 80%; width: 100%; height: 400px; margin: 0% }

#ubicacion #formulario { float: left; width: 30%; padding: 25px 10%; height: 350px; background:#96c3bc; }
#ubicacion #formulario h2 { color:#ffffff; font-size: 2em; line-height: 50px; margin: 0px auto 10px }
#ubicacion #formulario .campos { width: 40%; margin: 2%; padding: 2% 2.4%; border: 1px solid #ffffff; background: none; float: left }
#ubicacion #formulario .textos { width: 90%; margin: 2%; padding: 2%; border: 1px solid #ffffff; background: none; float: left }
#ubicacion #formulario .campos input[type=text] { background: none; border:none; width: 100%; color:#666 }
#ubicacion #formulario .campos input[type=text]::placeholder { color: #ffffff; opacity: 1 }
#ubicacion #formulario .campos input[type=text]:-ms-input-placeholder { color: #ffffff }
#ubicacion #formulario .campos input[type=text]::-ms-input-placeholder { color: #ffffff }
#ubicacion #formulario .textos textarea { background: none; border:none; width: 100%; color:#666 }
#ubicacion #formulario .textos textarea::placeholder { color: #ffffff; opacity: 1 }
#ubicacion #formulario .textos textarea:-ms-input-placeholder { color: #ffffff }
#ubicacion #formulario .textos textarea::-ms-input-placeholder { color: #ffffff }
#ubicacion #formulario .enviar { background: #ffffff; color: #263c4e; width: 30%; margin: 1% 33%; text-align: center; float: left; border:none; padding: 2%; border-radius: 2px; font-size: 1.5em; cursor: pointer }
#ubicacion #formulario .enviar:hover { background: #263c4e; color:#ffffff; }
#ubicacion #bgContacto { float: left; width: 50%; padding: 0%; background: #fff; overflow: hidden; position: relative; height: 580px }
#ubicacion #bgContacto .child { float: left; height: 100%; width: 100%; background: rgba(0,0,0,0.5) }
#ubicacion #bgContacto .child img { position: absolute; top: -9999px; bottom: -9999px; left: -9999px; right: -9999px; margin: auto; }
#ubicacion #bgContacto .over { position: absolute; height: 100%; width: 100%; background: rgba(24,98,114,0.4); z-index: 1 }
#ubicacion #bgContacto .over h4 { color:#fff; border: 2px solid #fff; width: 40%; padding: 15% 15%; margin: 10% 14.9%; font-size: 3em; line-height: 50px }

#contacto { float: left; width: 100%; padding: 0%; background: #f8f8f8; background: url(../img/bgFooter.png) no-repeat left center; }
#contacto #dataFooter { width: 40%; float: left; color: #ffffff; padding: 8% 30% }
#contacto #dataFooter .logoFooter { float:left; margin:3% 12% 2% }
#contacto #dataFooter .schedule { float:left; padding: 0% 2% 0% 22%; margin:1% 0%; background: url("../img/iconSchedule.png") no-repeat 12% center; width: 93%; line-height: 20px }
#contacto #dataFooter .phone { float:left; padding: 0% 2% 0% 22%; margin:1% 0%; background: url("../img/iconPhoneWhite.png") no-repeat 12% center; width: 93% }
#contacto #dataFooter .whatsapp { float:left; padding: 0% 2% 0% 22%; margin:1% 0%; background: url("../img/iconWhatsAppWhite.png") no-repeat 12.4% center; width: 93% }
#contacto #dataFooter .email { float:left; padding: 0% 2% 0% 22%; margin:1% 0%; background: url("../img/iconEmailWhite.png") no-repeat 12% center; width: 93% }
#contacto #dataFooter .address { float:left; padding: 0% 2% 0% 22%; margin:1% 0%; background: url("../img/iconAddress.png") no-repeat 12% center; width: 93% }

/* Footer Styles */
#footer_box { width: 100%; max-width: 100%; margin: 0% auto; background: #ece8df; color: #fff; float: left }
#footer_box .wcs_button_label { color:#000 !important }
#footer { padding:2% 10%; width:80%; float:left; background: #ece8df }
#aside1 { width:100%; float:left; background:#fff; padding:1% 0%; text-align:center }
#aside2 { width:100%; float:left; background:#525252; padding:1% 0%; text-align:center; color:#fff }
#whatsapp { left:2px; position:fixed; bottom:50px }

/* Generic Styles */
.myInput { display: none }
.img-hover-zoom--slowmo img { transform-origin: 50% 65%; transition: transform 5s, filter 3s ease-in-out; filter: brightness(110%) }
.img-hover-zoom--slowmo:hover img { filter: brightness(100%); transform: scale(1.2) }
.object-fit_cover { object-fit: cover }
.mensajes { margin: 0%; padding: 50px 10%; width: 80%; text-align: center; background: rgba(0,0,0,0.8); color: #fff; font-weight: bold; top: 0px; z-index: 999999; bottom: 0px; display: flex; align-items: center; position: fixed; justify-content: center; }
td a { color:#da121a }
textarea:focus, input:focus, select:focus{
    outline: none;
}

@media only screen and (max-width: 959px) {
	#header #data { display: none; }
	#header #logo { width: 100%; padding: 2% 0%; margin:0px; text-align:center; }
	#header #logo a { display: block; width: 100% }
	#header #logo a img { width: 40%; min-height: auto; max-height: auto; }
	#header #logo img { max-height: none }
	#header #barraMenu { width: 100%; margin: 0%; padding: 0% }
	#header #barraMenu #menu { width: 90%; margin: 0% auto; padding: 0% 5%; border-radius: 0px; display: none }
	#header #barraMenu #menu .enlace { width: 96%; border-bottom: 1px dotted #263c4e; padding: 0% 2% }
	#header #barraMenu #menu .enlace a { padding: 10px 10%; width: 80% }
	#header #barraMenu #menu .enlace:last-child { border-bottom: none }
	#header #toggle { display: block; width: 10%; position: absolute; right: 30px; top:25px }
	#header #togglehide { display: none; width: 10%; position: absolute; right: 30px; top:15px }
	#header #rrss { display:none; }
	
	#container_box { width: 100%; margin: 0%; border-top: 1px solid #ece8df }
	.nivoSlider { height: auto !important }
	#carousel .cover { margin-top: -70px; background-size:200% }
	#slogan .coverBottom, #galeria .coverBottom, #contacto .coverBottom { background-size:175%; height: 70px }
	.title { width: 80% !important; padding: 2% 10% !important }
	.content { width: 100% !important; padding: 0% !important }
	.title h2 { line-height: 60px; margin: 5% 0% 0% }
	#galeria .content { padding:2% 10% 10% !important }
	#servicios .content ul, #otrosservicios .content ul { grid-template-columns: repeat(1, 1fr) }
	#acerca .content { width: 100% !important; padding: 0% !important }
	#acerca .mision { width: 90%; padding: 2% 5%; background: #ece8df }
	#acerca .vision { width: 90%; padding: 2% 5%; background: #CE1E0F }
	#servicios .content ul li h3 { text-align: center }
	#servicios .title h2 { line-height: 40px; }
	#servicios .title p { width: 100%; margin: 20px auto 0px }
	#servicios .content ul li .descripcion { height: auto }
	
	#otrosservicios .content { padding: 0% 5% !important }
	
	#serviciodestacado { float: left; width: 100%; background:none !important }
	#serviciodestacado .content { float: left; width: 72% !important; margin: 4% 10% !important }
	#serviciodestacado .content h2 { color: #ece8df; font-size: 1.5em; background: url(../img/bgH2Destacado.png) no-repeat left center; padding-left: 50px }
	#serviciodestacado .content h2 span { color:#CE1E0F }
	
	#cursos .curso { height: auto !important }
	#clientes { padding: 5% }
	#clientes .banner { width: 96% }
	.bx-wrapper .bx-controls-direction a { margin-top: 0px !important }
	.bx-wrapper .bx-prev { left: 0px !important }
	.bx-wrapper .bx-next { right: 0px !important }
	
	#cursos .content .curso { width: 80% }
	
	#dataFooter { width: 90% !important; padding: 5% !important; }
	#formulario { height: auto !important; width: 80% !important; padding: 5% 10% !important; background:#96c3bc }
	#formulario h2 { font-size:1.7em !important }
	#ubicacion #formulario .campos { width: 90% }
	#formulario #contactar {  width: 80%; padding: 0% 10% }
	#aside1 { height: 0%; margin-top: 0px }
	
	#contacto { background-image: none !important }
	#contacto #dataFooter .schedule { background: url(../img/iconSchedule.png) no-repeat 0% center; padding: 0% 2% 0% 14%; width: 84% }
	#contacto #dataFooter .phone { background: url(../img/iconPhoneWhite.png) no-repeat 0% center; padding: 0% 2% 0% 14%; width: 84% }
	#contacto #dataFooter .email { background: url(../img/iconEmailWhite.png) no-repeat 0% center; padding: 0% 2% 0% 14%; width: 84% }
	#contacto #dataFooter .address { background: url(../img/iconAddress.png) no-repeat 0% center; padding: 0% 2% 0% 14%; width: 84% } 
	#contacto #dataFooter .whatsapp { background: url(../img/iconWhatsAppWhite.png) no-repeat 1% center; padding: 0% 2% 0% 14%; width: 84% } 
	#contacto #formulario h2 { font-size: 1em; text-align: center; padding-left: 0px  }
}