@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@font-face {
    font-family: 'Qanelas-Bold';
    src: url('fonts/Qanelas-Bold.ttf');
}
@font-face {
    font-family: 'Qanelas-Medium';
    src: url('fonts/Qanelas-Medium.ttf');
}
body{color: #54565b; padding-top: 60px;}
footer{background-color: transparent;}
.font-qanelas-bold{font-family: 'Qanelas-Bold', sans-serif;}
.font-qanelas-medium{font-family: 'Qanelas-Medium', sans-serif;}
.font-roboto{font-family: 'Roboto', sans-serif;}
.navbar{border-bottom: 1px solid #000000; border-top: 1px solid #000000;}
.font12{font-size: 12px;}
.font13{font-size: 13px;}
.font15{font-size: 15px;}
.font18{font-size: 18px; line-height: 22px;}
.font20{font-size: 20px;line-height: 22px;}
.font21{font-size: 21px;line-height: 23px;}
.font22{font-size: 22px; line-height: 26px;}
.font24{font-size: 24px; line-height: 28px;}
.font26{font-size: 26px;line-height: 30px;}
.font28{font-size: 28px; line-height: 30px;}
.font30{font-size: 30px;}
.font36{font-size: 36px;}
.font42{font-size: 42px;}
.font45{font-size: 45px;}
.font53{font-size: 53px; line-height: 53px;}
.font60{font-size: 60px; line-height: 63px;}
.bg-eeefef{background-color:#eeefef}
.bg-fff{background-color:#ffffff}
.bg-143D35{background-color: #143D35;}
.color-009a96{color: #009a96;}
.color-143D35{color: #143D35;}
.color-c76c61{color: #c76c61;}
.color-54565b{color: #54565b;}
.bold{font-weight: 700;}
.bold500{font-weight: 500;}
.bg-009a96{background-color: #009a96;}
.bg-f5f5f5{background-color: #f5f5f5;}
.mt-neg-90{margin-top: -90px; z-index: 10;}
.shadow-text{text-shadow: 0px 0px 7px rgba(0,0,0,0.6);}
.w-18-p{width: 18.6%;}
.h100px{height: 100px;}
.menu-footer li a{color: #ffffff;}
.menu-footer li a:hover{color: #ccc5c5;}
.width30{width: 30px;}
.active{color: #009a96!important; font-weight: 700;}
.nav-link:hover {color: #009a96;}
.active.nav-link:hover {color: #ffffff;}
.circle{width: 250px; height: 250px; color: #ffffff; text-align: center; font-size: 22px; display: flex; align-items: center; justify-content: center; background-color: #143D35; border-radius: 50%;}
.circle2{width: 170px; height: 170px; color: #ffffff; text-align: center; font-size: 18px; display: flex; align-items: center; justify-content: center; background-color: #009a96; border-radius: 50%;}
.efecto-circulo-bg .circle:hover{background-color: #009a96;}
.swiper-button-next:after, .swiper-button-prev:after {font-size: 80px; color: #009a96;}
.portada-sostenibilidad{min-height: 700px;}
.portada-barco{min-height: 500px;}
.enviar-cv{background-color: #009a96; color: #ffffff; font-size: 50px; font-weight: 700; padding: 15px 30px; border-color: #009a96; border-radius: 10px; text-decoration: none; transition: all 0.15s;}
.enviar-cv:hover{background-color: #0f8d89; color: #ffffff;}
.btn-entrar{background-color: #009a96; color: #ffffff; font-size: 22px; font-weight: 700; border-color: #009a96; border-radius: 10px; text-decoration: none; transition: all 0.15s;}
.btn-entrar:hover{background-color: #0f8d89; color: #ffffff;}
.txt-overlay .card-img-overlay{opacity: 0; transition: all .3s ease-in-out;}
.txt-overlay:hover .card-img-overlay{background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 100%, rgba(0,0,0,0) 100%);display: flex; transition: all .3s ease-in-out; opacity: 1;}
.txt-overlay{overflow: hidden; transition: all .3s ease-in-out;}
.btn-outline-primary{border-color: #009a96; color: #009a96;}
.btn-outline-primary:hover{background-color: #009a96; color: #ffffff; border-color: #009a96;}
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    color: var(--bs-btn-active-color);
    background-color: #009a96;
    border-color: #009a96;
}
#myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #555555a6;
    color: white;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 6px;
  }
.centrar-absolute{top: 50%; left: 50%; transform: translate(-50%, -50%) !important;}
.navbar {
border-bottom: 1px solid #BBBBBB;
background-color: #ffffff;
border-top: none;
}
.nav-link {
text-decoration: none;
display: inline-block;
position: relative;
opacity: 0.75;
padding: 3px 10px;
margin: 0px 5px;
}
.nav-link:hover {
opacity: 1;
}
.nav-link::before {
transition: 300ms;
height: 2px;
content: "";
position: absolute;
background-color: #009a96;
}
.nav-link-ltr::before {
    width: 0%;
    bottom: 0px;
}
.contact-btn:hover{background-color: #fff; color: #009a96!important; transition: 0.2s all;}
.nav-link-ltr:hover::before {
width: 90%;
}
.dropdown-options {
    transition: 0.3s all;
    display: block;
    position: absolute;
    overflow: auto;
    width: 100%;
    left: 0;
    z-index: 99;
	opacity: 0;
	transform: translate(0px, -30px);
  }

  .dropdown:hover .dropdown-options {
        opacity: 1;
  }
.bg-dropdown{border-radius: 15px;background-color: #003b31; color: #fff;}
.dropdown-options .tooltip-arrow {
    display: block;
    width: 30px;
    height: 30px;
}
.dropdown-options .tooltip-arrow{
     top: 8px;
    left: 150px;
	position: relative;
}

.dropdown-options .tooltip-arrow::before {
    position: absolute;
    content: "";
    border-color: transparent;
    border-style: solid;
}
.dropdown-options .tooltip-arrow::before {
    top: 0;
    border-width: 15px;
    border-bottom-color: #003b31;
}
/* .video-container{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -3;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
video {
    object-fit: cover;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -2;
    background-color: #ccc;
} */

@media (min-aspect-ratio: 16/9){
    video{
        width: 100%;
        height: 100%;
    }
}
@media (max-aspect-ratio: 16/9){
    video{
        width: auto;
        height: 100%;
    }
}

.h-1080px{height: 1080px;}

.efecto-circulos-scale{transition: all 0.2s;}
.efecto-circulos-scale:hover{transform: scale(1.08);transition: all 0.2s;}
.bg-image {
    background-image: url('../img/atardecer-contact.jpg');
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
}
.hito_txt{border-bottom: 3px solid #009a96; padding-bottom: 15px; position: relative;}
.hito_txt::after{
    content: '';
    width: 3px;
    height: 27px;
    background: #009a96;
    position: absolute;
    bottom: -27px;}
.hito{
    display: flex;
    justify-content: center;
    align-items: center;
}
.hito_year{
    font-size: 70px;
    font-weight: 700;
    color: #009a96;
    width: 250px;
    height: 250px;
    border: 3px solid #009a96;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center center;}

.hito_year::before {
    content: '';
    height: 250px;
    width: 250px;
    border-radius: 50%;
    border: 3px solid #009a96;
    position: absolute;
    background: #fff;
    z-index: 10;
}
.hito_year:hover::before{display: none;}
.hito_year span {
    z-index: 11;
}
.flip-card {perspective: 1000px; min-height: 300px;}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-back {
    border-radius: 50%;
    border: 2px solid #54565b;
    background-color: #009a96;
    color: white;
    font-weight: 600;
    transform: rotateY(180deg);
}
.select2-container--bootstrap4 .select2-selection--single {
    height: calc(2em + 1.8rem + 2px) !important;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: calc(2em + 1.8rem);
}
.txt-shw-fff{
    text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
    1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}
.popup-email {width: 100%; height: 100%; display: none; background: rgba(0, 0, 0, 0.7); position: fixed; top: 0; left: 0; z-index: 99999999999;}
.popup-email .element {
    width: 320px;
    height: auto;
    position: absolute;
    left: 50%;
    margin-left: -150px;
    top: 50%;
    margin-top: -50px;
    background-color: #009a96;
    display: block;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    -webkit-background-clip: padding;
    -moz-background-clip: padding;
    background-clip: padding-box;
    text-align: center;
    padding: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.popup-email .element p {margin-bottom: 20px; font-weight: 700;}
.popup-email .element button {margin: 0 auto 10px;}
.popup-email .success {color: #ffffff; font-size: 24px; display: block; margin-top: 20px; line-height: normal;}
.popup-email .error {color: #ffb8b8; font-size: 24px; display: block; margin-top: 20px; line-height: normal;}
.e-btn{display: inline-block;
  height: 55px;
  line-height: 52px;
  text-align: center;
  padding: 0 35px;
  color: #ffffff;
  background: #00cac7;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 19px;
  text-transform: lowercase;
  border: 2px solid #00cac7;
  transition: all 0.3s ease-out 0s;}
.progress {
    display: -ms-flexbox;
    display: flex;
    height: 20px !important;
    overflow: hidden;
    font-size: .75rem;
    background-color: #e9ecef;
    border-radius: 0.25rem;
    margin-top: 10px;
	padding: 0;
}
.progress-bar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #28a745;
    transition: width .6s ease;
    font-size: 16px;
    text-align: center;
}
#uploadStatus {
    padding: 10px 20px;
    margin-top: 10px;
    font-size: 20px;
    text-align: center;
}
.invalid-feedback {
    background-color: #ddd;
	padding: 0px 5px;}
@media (max-width: 1400px) {
    .flip-card{min-height: 261px;}
    .hito_year{height: 220px; width: 220px; font-size: 58px;}
    .hito_year::before{height: 220px; width: 220px;}
    .font21{font-size: 18px;line-height: 21px;}
}
@media (max-width: 1200px) {
    .circle{width: 220px; height: 220px;}
    .circle2{width: 170px; height: 170px;}
    .hito_year{height: 180px; width: 180px; font-size: 58px;}
    .hito_year::before{height: 180px; width: 180px;}
}
@media (max-width: 991px) {
    .w-18-p{width: 47%; margin-bottom: 18px;}
    .circle{width: 200px; height: 200px;font-size: 18px;}
    .circle2{width: 150px; height: 150px;}
    .font60{font-size: 50px; line-height: 53px;}
    .h-750px{height: 500px;}
    .flip-card{min-height: 218px;}
    .font36{font-size: 28px;}
}
@media (max-width: 768px) {
    .font-resp-25 { font-size: 25px !important; line-height: 28px !important; }
    .font-resp-28 { font-size: 28px !important; line-height: 32px !important; }
    .font-resp-20 { font-size: 20px !important; line-height: 23px !important; }
    .font-resp-18 { font-size: 18px !important; line-height: 21px !important; }
    .font-resp-16 { font-size: 16px !important; line-height: 19px !important; }
    .font-resp-14 { font-size: 14px !important; }
    .font-resp-13 { font-size: 13px !important; }
    .font-resp-12 { font-size: 12px !important; }
    .w-18-p{width: 47%; margin-bottom: 18px;}
    .mt-neg-90{margin-top: -30px; z-index: 10;}
    .portada-sostenibilidad{min-height: 450px;}
    .portada-barco{min-height: 450px;}
    .bg-image {height: 250px;}
    .flip-card{min-height: 248px;}
}
@media (max-width: 576px) {
.font26{font-size: 18px;line-height: 20px;}
.font60{font-size: 34px; line-height: 36px;}
.w-18-p{width: 90%; margin-bottom: 18px;}
.w-18-p h3{font-size: 34px;}
.w-18-p p{font-size: 16px;}
.font45{font-size: 28px;}
.font53{font-size: 45px; line-height: 48px;}
.circle{width: 150px; height: 150px;font-size: 16px;}
.circle2{width: 130px; height: 130px;}
.mt-neg-90{margin-top: 0px; z-index: 10;}
.font53{font-size: 30px; line-height: 35px;}

.flip-card{min-height: 260px; min-width: 280px;}
.flip-card-back {font-size: 14px;}
}
@media (max-width: 480px) {
    .portada-sostenibilidad{min-height: 250px;}
    .portada-barco{min-height: 250px;}
    .swiper-button-next, .swiper-button-prev {top: 233px;}
    .font18{font-size: 16px;}
    .flip-card-back {font-size: 12px;}
}