/* 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 }

/* Header Styles */
#header_box { width: 100%; margin: 0% auto; color: #27a2bd; float: left; background: #ffffff }
#header { width: 100%; float: left }
#header #contacto { width: 90%; float: left; background:#27a2bd; color: #ffffff; border-bottom:1px solid #27a2bd; padding: 0% 5% }
#header #contacto .phone { float:left; padding: 0.5% 5%; background: url("../img/iconPhoneWhite.png") no-repeat 12% center }
#header #contacto .mail { float:left; padding: 0.5% 5%; background: url("../img/iconEmailWhite.png") no-repeat 8% center }
#header #contacto .register { float:left; padding: 0.5% 5% }
#header #contacto .publish { float:left; padding: 0.5% 5% }
#header #contacto .services { float:left; padding: 0.5% 5% }
#header #contacto a { color:#fff; text-decoration: none; font-weight: bold; }

#header #logo { width: 20%; float: left; color:#27a2bd; padding: 0%; margin: 0% 5% 0% }
#header #logo img { max-height: 124px }

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

#header #barraMenu { width: 38%; float: left; background:#fff; color: #ffffff; margin: 3% 1% }
#header #barraMenu #menu { width:90%; float: left; padding: 0% 5%; margin: 0% auto; text-align: center }
#header #barraMenu #menu .enlace { float: left }
#header #barraMenu #menu .enlace a { color:#000; text-decoration: none; letter-spacing: 1px; font-size: 16px; float: left; padding: 10px 20px }
#header #barraMenu #menu .enlace:hover { background:#27a2bd }
#header #barraMenu #menu .enlace a:hover, #header #barraMenu #menu .enlace a.activo { color:#fff; background: #27a2bd }
#header #login, #header #toggle, #header #togglehide { display: none }
#header #barraMenu #menu .ofertas a, #header #barraMenu #menu .ofertas a.activo { background: #da121a; color:#fff }

#header #rrss { width: 20%; float: left; margin: 2.5% 5% }

/* 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% }

#logros { float: left; width: 100% }
#logros ul { padding: 0%; display: grid; grid-gap: 0px; grid-template-columns: repeat(6, 1fr); color:#fff; margin: 0% }
#logros ul li { background:#27a2bd; list-style: none; padding: 10% 15%;  }
#logros ul li:nth-of-type(2n){ background: #666666 }
#logros ul li h3 {font-weight: normal; font-size: 1em }

#perfil { float: left; width: 100% }
#perfil .title { float: left; width: 20%; padding: 5% 5% 5% 10% }
#perfil .title h2 { color:#000000; font-size: 1em }
#perfil .title h3 { color:#27a2bd; font-size: 3em; line-height: 50px; margin: 0px auto 10px; }
#perfil .content { float: left; width: 50%; padding: 5% 10% 5% 5%; text-align: justify }

#fotoperfil { float: left; width: 100%; height: 640px; overflow: hidden }
#fotoperfil .image { float: left; width: 100%;  height: 640px }
#fotoperfil .child { float: left; height: 640px; width: 100%; background: rgba(0,0,0,0.5) }
#fotoperfil .child img { top: -9999px; bottom: -9999px; left: -9999px; right: -9999px; margin: auto; }
#fotoperfil .over { position: absolute; height: 640px; width: 100%; background: rgba(17,77,90,0.7); z-index: 1 }
#fotoperfil .over h4 { color:#fff; width: 36%; padding: 5%; margin: 20% 49% 5% 5%; font-size: 1.8em; line-height: 40px }

#blogs { float:left; width:90%; padding:2% 5% 4% }
#blogs .title { float:left; width:100%; height:auto }
#blogs .title h2 { text-align:center; color:#fff; background:#244258; width:20%; margin:0px auto 2%; padding:2%; border-radius:50px }
#blogs .title h2 span { color:#cce82f }
#blogs .content { text-align:left; width:100%; height:auto; padding:2% 0%; float:left }
#blogs .content .left { float:left; width:22%; margin-right:2%; padding:1% 3% 2%; background:#f5f5f6; position: sticky; top: 0 }
#blogs .content .left ul { padding:0%; display:list-item; list-style: none }
#blogs .content .left ul a { color:#525252; text-decoration: none }
#blogs .content .left ul a h3 { font-size: 1em; font-weight: normal }

#blogs .content .right { float:left; width:64%; padding:2% 3%; background:#f5f5f6 }
#blogs .content .right ul { padding:0%; display:grid; grid-gap:10px; grid-template-columns:50% 50%; color:#666; margin:0%; grid-template-rows: 360px 360px; }
#blogs .content .right  ul li { list-style:none; padding:0%; background:#fff; box-shadow:0 0 10px rgba(0,0,0,.2); width: 100% }
#blogs .content .right  ul li .foto { width:100%; overflow: hidden; height: 200px }
#blogs .content .right  ul li .foto img { width:100% }
#blogs .content .right  ul li a h3 { font-size:0.9em; width:90%; padding:2% 5%; margin:0% 0% 0%; height:50px; background:rgba(0,0,0,0.5); float:left; line-height:22px; font-weight: normal }
#blogs .content .right  ul li a { color:#fff; text-decoration:none }
#blogs .content .right  ul li a p { margin:3% 0% 5%; padding:0% 5%; float:left; line-height:18px; color:#666; font-size: 0.8em }

#blog { float:left; width:90%; padding:2% 5% 4% }
#blog .left { float:left; width:62%; margin-right:2%; padding:1% 3% 2%; background:#f5f5f6 }
#blog .left { color:#244258 }
#blog .left h1 { font-size: 1.5em }
#blog .left img { width:100% } 
#blog .right { float:left; width:24%; padding:2% 3%; background:#f5f5f6 }
#blog .right #relacionados { float:left; margin:0%; padding:0% }
#blog .right #relacionados h2 { font-size:1.5em; color:#244258; border-bottom:1px dotted #244258; margin:0% 0% 4% }
#blog .right #relacionados .content { float:left; margin:0% 0% 2% }
#blog .right #relacionados .content a { color:#244258; text-decoration:none }
#blog .right #relacionados .content a h3 { font-size:1em; line-height:20px }
#blog .right #relacionados .content a img { width:100% } 

#galeria { float: left; width: 80%; padding: 5% 10%; background: #f5f5f6 }
#galeria .title { float: left; width: 100%; height: auto }
#galeria .title h2 { color:#000000; font-size: 1em }
#galeria .title h3 { color:#27a2bd; font-size: 3em; line-height: 50px; margin: 0px auto 10px; }
#galeria .content { text-align: center; width: 100%; height: auto; padding: 2% 0%; float: left }
#galeria .content ul { padding: 0%; display: grid; grid-gap: 20px; grid-template-columns: repeat(3, 1fr); color:#666; margin: 0% }
#galeria .content ul li { list-style: none; padding: 0%; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.2) }
#galeria .content ul li img { width: 100% }
#galeria .content ul li h4 {font-weight: bold; font-size: 1.2em; width: 70%; padding: 5% 15% }

#retos { float: left; width: 100%; background: #27a2bd; height: 665px }
#retos .video { float: left; width: 50%; padding: 0%; height: 100% }
#retos .video video { float: left; width: 100%; height: 100% }
#retos .content { float: left; width: 36%; padding: 5% 7%; text-align: justify; background: #fff }
#retos .content h2 { color:#000000; font-size: 1em }
#retos .content h3 { color:#27a2bd; font-size: 3em; line-height: 50px; margin: 0px auto 10px; }

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

#mapa { float: left; width: 100%; height: auto }

#datos { float: left; width: 80%; height: auto; padding: 5% 10% }
#datos h2 { text-align: center; color:#27a2bd; font-size: 3em }
#datos .content { text-align: center; width: 80%; height: auto; padding: 1% 10% }
#datos .content .email { background: url("../img/iconEmail.jpg") no-repeat left center; padding-left: 28px }
#datos .content .phone { background: url("../img/iconPhone.jpg") no-repeat left center; padding-left: 28px; margin-right: 50px }
#datos .content .address { width: 100%; text-align: center; margin-top: 10px; float: left; } 

#fotohistoria { float: left; width: 100%; height: auto }

#historia { float: left; width: 90%; height: auto; padding: 5% }
#historia .title { float: left; width: 100%; height: auto }
#historia .title h2 { color:#27a2bd; font-size: 2em; line-height: 50px; margin: 0px auto 10px; text-align: center }
#historia .content { text-align: center; width: 90%; height: auto; padding: 1% 5% }
#historia .content p { float: left; width: 45%; padding: 2.5%; text-align: justify }

/* Footer Styles */
#redesfooter { width: 96%; max-width: 100%; margin: 0% auto; background: #fff; float: left; padding: 2% }
#redesfooter .facebook { width:31%; margin-left:2%; float:left }
#redesfooter .twitter { width:30%; margin:0% 2%; float:left }
#redesfooter .instagram { width:31%; margin-right:2%; float:left }

/* Footer Styles */
#footer_box { width: 100%; max-width: 100%; margin: 0% auto; background: #27a2bd; color: #fff; float: left }
#footer_box .wcs_button_label { color:#000 !important }
#footer { padding:2% 10%; width:80%; float:left; background: #27a2bd }
#footer h2:after { content: ""; height: 3px; width: 50px; background: #fec901; display: block; bottom: 0 }
#footer #aside0 { width:31%; margin-left:2%; float:left }
#footer #aside0 .enlace { padding: 0% 2% }
#footer #aside0 .enlace a { color:#ffffff; text-decoration: none; letter-spacing: 1px }
#footer #aside1 { display: none }
#footer #aside1 { width:31%; margin-left:2%; float:left }
#footer #aside1 .enlace { padding: 0% 2% }
#footer #aside1 .enlace a { color:#ffffff; text-decoration: none; letter-spacing: 1px }
#footer #aside2 { width:31%; margin-left:2%; float:left }
#footer #aside2 p { letter-spacing: 1px }
#footer #aside3 { width:30%; float:left }
#footer #aside3 a { width:15%; float:left; padding: 0% 3%; margin:0% 2% }
#footer #aside3 a img { width: 100%; height: auto; }
#footer #aside3 p { float: left; width: 80%; padding: 0% 20% 0% 0%; }
#aside4 { width:100%; float:left; background:#fff; padding:1% 0%; text-align:center }
#aside5 { 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 #contacto { display: none; }
	#header #contacto .mail, #header #contacto .phone { width: 90%; margin: 1% 2%; padding: 0% 3%; text-align: center; border-bottom: 1px solid #27a2bd }
	#header #contacto .phone { display: none }
	#header #logo { width: 60%; padding: 2% 20%; margin:0px }
	#header #logo a { display: block; width: 100% }
	#header #logo a img { width: 100% }
	#header #barraMenu { width: 100%; margin: 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 #fff; 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: none; width: 10%; position: absolute; right: 25px; top:40px }
	#header #togglehide { display: none; width: 10%; position: absolute; right: 25px; top:40px }
	#header #rrss { width: 80%; float: left; margin: 0% 10% 5%; text-align: center }
	
	#container_box { width: 100%; margin: 0%; border-top: 1px solid #27a2bd }
	
	.nivoSlider { height: auto !important }
	#logros ul, #blogs .content ul { grid-template-columns: repeat(1, 1fr); }
	#logros ul li { padding: 5% 15% }
	#perfil .title, #perfil .content { float: left; width: 80%; padding: 5% 10%; }
	#fotoperfil, #fotoperfil .image, #fotoperfil .child, #fotoperfil .over, #retos, #contacto { height: auto }
	#fotoperfil .child img, #retos .video, #contacto #bgContacto { width: 100%; }
	#fotoperfil .over { position: relative; float: left }
	#fotoperfil .over h4 { color: #fff; width: 80%; padding: 5%; margin: 5% 5%; font-size: 1em; line-height: 20px }
	#retos .content { width: 86% }
	#retos .content h3 { text-align: left }
	#contacto #formulario { width: 90% }
	#contacto #bgContacto .over h4 { color: #fff; border: 2px solid #fff; width: 50%; padding: 15% 10%; margin: 79% 14.9% 10%; font-size: 2em; line-height: 25px }
	#contacto #formulario .campos { width: 90%;  margin: 2%; padding: 2% 3% }
	#historia .content p { width: 90%; padding: 2.5% 5% }
	#datos h2 { font-size: 1.5em; }
	#fotohistoria img { width: 100% }
	.nivo-controlNav { margin: -40px 40% 0px 40% !important; width: 14% !important }
	#datos .content { text-align: center; width: 100%; height: auto; padding: 1% 0% }
	#datos .content .phone { margin-right: 0px; }
	
	#redesfooter .facebook, #redesfooter .instagram, #redesfooter .twitter { width: 96%; margin: 2% }
	#redesfooter .facebook .fb-page, #redesfooter .facebook .fb-page span, #redesfooter .facebook .fb-page span iframe { width: 100% !important }
	
	#footer #aside0, #footer #aside1, #footer #aside2, #footer #aside3 { width: 100%; margin: 0%; display: block }
	#footer #aside3 { margin-bottom: 0px; }
	#footer #aside0 .enlace a, #footer #aside1 .enlace a { display: block; padding: 0%; }
	#aside4 { height: 0%; margin-top: 0px }
}