html, body {color: #383A44;font-family: 'Open Sans', sans-serif;font-size: 16px;height: 100% !important;line-height: 1.8;}
/* Comunes */
a, a:focus, a:hover{color: #333; transition: 0.2s; -moz-transition: 0.2s; -webkit-transition: 0.2s}
a:focus, a:hover{opacity: .7; text-decoration: none}
a{text-decoration: underline}
a, .btn, button{transition: 0.2s; -moz-transition: 0.2s; -webkit-transition: 0.2s}
a:hover, a:focus{color:#999}
section, header, footer{padding:80px 0}
@media(max-width: 1200px){
section, header, footer {
padding: 50px 0;
}
}
.fa-opacity{opacity: .4}
.size-28 { font-size: 28px}
.size-38 { font-size: 38px}
.size-48 { font-size: 48px}
.size-64 { font-size: 64px}
.size-96 { font-size: 96px}
img{transition: 0.2s; -moz-transition: 0.2s; -webkit-transition: 0.2s}
img:hover, img:focus{opacity:0.9}
h1{ text-transform:none}
.h2, .h3, .h4, .h5, .h6, h2, h3, h4, h5, h6{clear: both; line-height: 1.8; text-transform: uppercase; font-weight: 800}
h1, h2, h3{margin-top: 20px; margin-bottom: 30px}
h2 a, h2 a:hover, h2 a:focus{text-decoration: none}
h2{font-size: 35px}
h4{font-size:18px}
.lead{margin-bottom: 20px;font-size: 16px;font-weight: 300;line-height: 1.4;font-weight: 600}
h1.lead{margin-top:0}
header .cover p{margin-bottom:10px}
.font-extrabold{font-weight:800}
p{padding-bottom: 20px}
hr{border-top: 1px solid #ccc}
.icon::before, .icon{text-decoration: none!important}
.icon-heading{line-height: 96px}
.thin{font-weight: 400}
.fixed{background-attachment: fixed!important}
.btn-default,
.btn-default:hover, .btn-default:focus {background: transparent}
/* Navegación */
.navbar {
background-color: #fff;box-shadow: 0px 1px 9px gray;padding:2px 0px 2px 0px;
-webkit-transition: all 0.4s ease-in-out 0s;-moz-transition: all 0.4s ease-in-out 0s;-ms-transition: all 0.4s ease-in-out 0s;-o-transition: all 0.4s ease-in-out 0s;transition: all 0.4s ease-in-out 0s;
}
.navbar-toggler{width:52px;border:none!important;margin:14px -2px 0 0}
.icon-bar{background-color:#789;display:block;height:3px;width:100%;border-radius:16px;margin-bottom:4px}
.navbar-transparent .icon-bar{ background-color:#fff;}
.navbar-transparent{background-color:transparent;box-shadow:0 0 0 transparent;padding:10px 0}
.navbar-transparent .navbar-brand img{opacity:0}
.navbar-header .navbar-brand {text-transform: uppercase; font-weight: 700; color: #333; text-decoration: none; height:100%; padding:0}
.navbar-header .navbar-brand img{max-height:70px}
.navbar-light .navbar-nav .nav-link{text-transform: uppercase; font-size: 12px; font-weight: 700; color: #333; letter-spacing: 0.1em; text-decoration: none; opacity: 1;padding: 10px 15px}
.navbar-light.navbar-transparent .nav-link{color: rgba(255,255,255,.7)}
.navbar-light .navbar-nav .nav-link.active{color: #789!important;}
.navbar-light.navbar-transparent .navbar-nav .nav-link:focus, .navbar-light.navbar-transparent.active .navbar-nav .nav-link:focus,
.navbar-light.navbar-transparent .navbar-nav .nav-link:hover, .navbar-light.navbar-transparent.active .navbar-nav .nav-link:hover {color: rgba(255,255,255,.9)}
ul.navbar-nav{border-top:1px solid transparent}
/* Contenedores de secciones*/
.site-wrapper-1 {background: url(../img/header.jpg)}
.site-wrapper-2 {background-image: url(../img/compromiso.jpg);}
.site-wrapper a, .site-wrapper a:hover, .site-wrapper a:focus, #footer, #footer a, #footer a:hover, #footer a:focus {color: #fff;}
.site-wrapper{
display: table;width: 100%;height: 100%;min-height: 100%;text-align: center;color: #fff;z-index:99;position:relative;overflow:hidden;
background-color: #1b1f23;background-repeat: no-repeat;background-position: 50% 50%;-webkit-background-size: cover;-moz-background-size: cover;
background-size: cover;padding: 0 0 50px;text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.site-wrapper-2{width:100%;height:auto!important;min-height:auto;padding:100px 0}
.site-wrapper-inner {display: table-cell; vertical-align: middle; position:relative}
@media(min-width:768px) {
.site-wrapper-inner {vertical-align: middle}
}
@media (max-width: 768px){
.site-wrapper-inner {vertical-align: top}
}
.site-wrapper .overlay, .site-wrapper .overlay-dark{z-index: 0;}
.overlay, .overlay-dark {width:100%; height:100%; position:absolute; z-index: -1; top:0; left:0}
.overlay {background: rgba(0, 0, 0, 0.4)}
.overlay-dark {background: rgba(0, 0, 0, 0.6)}
/* Ratón Header */
.scroll-btn {padding: 30px 0 10px; width: 100%; display: block; text-align: center}
.scroll-btn .wheel {position: relative; display: inline-block; width: 20px; height: 40px; margin: 6px auto 5px; border: 2px solid #fff; border-radius: 24px; opacity: .6}
.scroll-btn .mouse {position: relative; display: inline-block; width: 50px; height: 77px; margin: 0 auto 5px; border: 2px solid #fff; border-radius: 24px; opacity: .6}
.scroll-btn .wheel span {position: absolute; display: block; top: 0; left: 50%; width: 8px; height: 12px; margin: -10px 0 0 -4px; background: #fff; border-radius: 20px;
-webkit-animation: scroll 2s linear infinite; -moz-animation: scroll 2s linear infinite; animation: scroll 2s linear infinite}
@-webkit-keyframes scroll { 1% {opacity: 1; top: 30%} 20% {opacity: 1; top: 80%} 60% {opacity: 0; top: 80%} 100% {opacity: 0; top: 30%} }
@-moz-keyframes scroll { 1% {opacity: 1; top: 30%} 20% {opacity: 1; top: 80%} 60% {opacity: 0; top: 80%} 100% {opacity: 0; top: 30%} }
@keyframes scroll { 1% {opacity: 1; top: 30%} 20% {opacity: 1; top: 80%} 60% {opacity: 0; top: 80%} 100% {opacity: 0; top: 30%} }
@media (max-width: 991px){
.scroll-btn{display:none!important}
}
/* About */
#about .icon {display: block;}
.quienes-somos{padding:0;list-style-type: none}
/* Action */
#action h3.lead{padding-left:5px;padding-right:5px;text-transform:none}
/* Portfolio */
.no-pad {padding: 0;}
.center-block {display: block;margin-right: auto;margin-left: auto;}
#portfolio {background: #eee;}
.portfolio-item .portfolio-link {display: block;position: relative;}
.portfolio-item .portfolio-link .caption {
position: absolute;width: 100%;height: 100%; opacity: 0;background: rgba(255, 255, 255, 0.9);
-webkit-transition: all 0.6s ease 0s;-moz-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s;display:block;
}
.portfolio-item .portfolio-link .caption:hover,
#portfolio img:hover, #portfolio img:focus, a.portfolio-link:focus, a.portfolio-link:hover {opacity:1!important;left: 0}
.portfolio-item .portfolio-link:hover {-moz-transform: scale(1.04); -webkit-transform: scale(1.04); -ms-transform: scale(1.04); transform: scale(1.04);}
.portfolio-item .portfolio-link .caption .caption-content {
position: absolute;top: 0;left:0;font-size: 15px;color: #333;text-transform: uppercase;
padding: 30px; text-align: left;line-height:20px;display:block;
}
.portfolio-item .portfolio-link .caption .caption-content span {display: block;font-weight: normal;text-transform: none;}
.portfolio-item {overflow: hidden;cursor: default;display:block}
/* Contacto */
.tel_link, .mail_link{text-decoration:none}
.mail_link{color:#555}
.location {margin: 0;padding-bottom: 5px;font-weight: bold;}
#contact .text-address{font-weight:600;font-size:18px}
/* Sponsor */
#sponsor {padding: 30px 0; background: #f2f2f2;}
.sponsor img {max-width: 170px;max-height: 100px;vertical-align: middle;}
.background-gray {color: #383A44!important;background: #eee!important;text-shadow: none!important;}
ul.sponsor{list-style-type: none;margin-bottom:0;padding:0;min-height:100px}
/* Mapa */
section#officemap{padding:0}
#map {width: 100%;height: 300px;border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;}
@media(min-width:768px) {
#map {height: 400px;}
}
/* Footer */
.footer-iso27001{padding-top: 40px; padding-bottom: 40px;}
.footer-iso27001-seal {padding-right: 10px;}
#footer {position: relative;z-index: 999;overflow: hidden;background: #1b1f23 url(../img/footer.jpg) no-repeat 50% 50%;
-webkit-background-size: cover;-moz-background-size: cover;background-size: cover;}
#footer h2{width:100%;}
#footer h3{font-size:24px}
#footer, #footer h3{ font-weight: 700;}
#footer .list-inline {margin-top: 15px;margin-left: -5px;margin-bottom:10px}
p.copy {width: 100%;max-width: 440px;margin: 0 auto;line-height: 14px;font-size: 14px;color: #ddd;margin-top: 25px;}
p.copy small {font-weight: normal;}
p.footer-title {font-size:35px;text-transform:uppercase;margin-top:20px;margin-bottom:10px}
p.footer-title a{text-decoration: none}
p.footer-arrow{font-size:35px;width:100%;padding-bottom:0;margin-bottom:20px}
address.text-address{font-size: 24px;font-weight:700;margin-top:20px;margin-bottom:20px;line-height:1.8;text-transform:uppercase}
.text-phone{font-size:24px;margin-top: 20px;margin-bottom: 30px;padding:0}
.text-phone a{text-decoration:none}
/* Modal */
.light-modal{z-index:100000!important}
.light-modal-content{background: #333!important;width: 70vw!important;}
.light-modal-content .light-modal-body a{color:#fff}
.light-modal-close-icon, a.light-modal-close-btn{background:#0260cc!important}
.table100 {width:100%; margin:0 auto;}
.table100 th, .table100 td { border: 1px solid white; border-collapse: collapse;}
.conduct_link {text-indent: 30px;}
/* Separador de cronología: margen vertical reducido y tamaño controlado (original = margin:0.12rem 0;) */
.timeline-sep{margin: 1.94rem 0; font-size:1.1rem; line-height:1; display:block}
.timeline-sep i{vertical-align:middle}
.lead-cronology{margin-bottom: 5px;}
/*** RESPONSIVE ***/
/* Portfolio */
.portfolio-container{padding:0;margin-top:0;margin-bottom:0}
@media(max-width:1550px){ .portfolio-item .portfolio-link .caption span{font-size:0.95vw;line-height:1.2vw}}
@media(max-width:1270px){ .portfolio-item .portfolio-link .caption span{font-size:1vw;line-height:1.1vw}}
@media(max-width:1199px){ .portfolio-item .portfolio-link .caption span{font-size:1.25vw;line-height:1.5vw}}
@media(max-width:991px) { .portfolio-item .portfolio-link .caption span{font-size:1.7vw;line-height:2vw}}
@media(max-width:767px) { .portfolio-item .portfolio-link .caption span{font-size:3vw;line-height:4vw}}
@media(max-width:575px) { .portfolio-item .portfolio-link .caption span{font-size:3.5vw;line-height:5vw}}
@media(max-width:400px) { .portfolio-item .portfolio-link .caption span{font-size:4vw;line-height:5vw}}
/* Móviles */
@media(max-width:768px) {
.navbar .navbar-header .navbar-brand img{max-height:60px; padding-top:5px; padding-bottom:5px;margin-left:10px}
ul.navbar-nav{border-top:1px solid #ccc;padding-top:10px;padding-bottom:10px}
.navbar-transparent ul.navbar-nav{background:#fff;padding-top:5px;padding-bottom:5px}
.navbar-light.navbar-transparent .nav-link{color: #333;}
.navbar .container-fluid{padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto; }
h1 {font-size: 26px;}
h2{font-size: 24px;margin-bottom: 20px;}
p.footer-title {font-size: 25px;margin-top:10px;margin-bottom: 10px;padding-bottom:0}
p.footer-arrow{font-size: 25px;}
h3, #footer h3, .text-phone{font-size: 20px;margin-top: 10px;margin-bottom: 15px;}
address.text-address{font-size: 20px;line-height:29px;margin-top: 5px;margin-bottom: 5px;}
#contact .text-address{font-size:16px;line-height:1.4;margin-bottom:20px}
#contact {text-align: center;}
.location-list{margin:0;padding:0;}
.location-list li {margin: 0 auto 10px;width: 80%;line-height: 1.4em;list-style-type: none;}
.site-wrapper2{padding:50px 0}
.cover-container {padding: 30% 15px 15px}
}
/* PC */
@media(min-width:992px) {
.cover-container {max-width: 350px;margin:0 auto}
}
@media(min-width:768px) {
.navbar-header{float:left}
ul.navbar-nav{margin-left: auto!important}
#navbarToggler{height:70px}
header .cover-container {margin:0 auto;padding-top: 100px;}
.lead{font-size: 18px;line-height: 1.9;}
.lead.text-address {line-height: 1.4;margin-bottom: 19px;}
#contact h3{font-size:24px;}
}