@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700|Lato:300,400,700,900|Source+Sans+Pro:300,400,600,700,900');
/* HTML TAGS */
body, html {
  opacity: 1;
    font-family: "Source Sans Pro";
    margin: 0;
    padding:0;
    color: #000;
    --color-one: #222;
    --color-two: #777;
    --color-three: #222;
    --color-primary: #1955c1;
    --color-secondary: #487ddd;
}

.phone .btn.btn-warning {
    background: 0 0;
    background-color: #000;
    border-color: #000;
    color: #fff;
}
.phone .btn {
    padding-left: 30px;
    position: relative;
}
.phone .btn {
    width: 100%;
    max-width: 400px;
    min-width: 300px;
    padding: 10px 0;
    font-size: 20px;
    margin-bottom: 5px;
}
.phone .btn i {
    position: absolute;
    font-size: 25px;
    left: 0;
    top: 13px;
    width: 50px;
    text-align: center;
}
.phone.active {
opacity: 1;
    display: block;
    transform: translateZ(351px) translateY(0)!important;
    -webkit-transform: translateZ(351px) translateY(0)!important;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
}

.phone {
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(72 125 221 / 87%);
    display: none;
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transform: translateZ(351px) translateY(-100vh)!important;
    -webkit-transform: translateZ(351px) translateY(-100vh)!important;
    text-align: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
}
@keyframes animacionPhone{0%{transform:translateZ(361px) scale(1,1);-webkit-transform:translateZ(361px) scale(1,1)}50%{transform:translateZ(361px) scale(1,1);-webkit-transform:translateZ(361px) scale(1,1)}52%{transform:translateZ(361px) scale(1.2,1.2);-webkit-transform:translateZ(361px) scale(1.2,1.2)}54%{transform:translateZ(361px) scale(1,1);-webkit-transform:translateZ(361px) scale(1,1)}56%{transform:translateZ(361px) scale(1.2,1.2);-webkit-transform:translateZ(361px) scale(1.2,1.2)}58%{transform:translateZ(361px) scale(1,1);-webkit-transform:translateZ(361px) scale(1,1)}60%{transform:translateZ(361px) scale(1.2,1.2);-webkit-transform:translateZ(361px) scale(1.2,1.2)}62%{transform:translateZ(361px) scale(1,1);-webkit-transform:translateZ(361px) scale(1,1)}100%{transform:translateZ(361px) scale(1,1);-webkit-transform:translateZ(361px) scale(1,1)}}
.phoneButton{width:70px;height:70px;line-height:70px;font-size:43px;border-radius:100%;background-color:#5491ff;position:fixed;bottom:20px;left:20px;animation-duration:7s;animation-name:animacionPhone;animation-iteration-count:infinite;text-align:center;box-shadow:0 0 20px rgba(0,0,0,.2);z-index:1000000;color:#fff}
.bg-primary {background-color: #1955c1;}
ul, li {margin:0px;padding:0px;list-style:none;}
ul.accessory li {list-style: disc; margin-left: 20px;}
h1, h2, h3, h4, h5, h6 {margin:0px; font-weight: 400;}
main, footer {background-attachment: fixed; background-size: cover; background-repeat: no-repeat; background-position: center center;}
p {font-weight: 300;}
h2 {font-size: 36px;}
h3 {font-size: 34px;}
.titular {color: var(--color-primary);}
a .titular {color: var(--color-one);}
a:hover .titular {color: var(--color-secondary);}
a {color: var(--color-two);}
a:hover {
    color: var(--color-three);
    text-decoration: none;
}
b, strong {color: var(--color-primary);}
img{max-width: 100%;}

/* GENERIC CUSTOM */
.wrapper-flex, .wrapper-flex-notablet, .wrapper-flex-nomobile {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
.container-flex {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.container-flex > [class*='flex'] {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
.flex-bottom {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;}
.fill-parent {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1;}
.relative {position: relative;}
.full-height {height: 100%;}
.full-width {width: 100%;}
.separa {height: 5px; clear: both;}
.separa-10 {height: 10px; clear: both;}
.separa-20 {height: 20px; clear: both;}
.separa-30 {height: 30px; clear: both;}
.separa-40 {height: 40px; clear: both;}
.imagen {background-position: center; background-repeat: no-repeat; background-size: cover;}
.imagen:after {content: ""; padding-top: 100%; display: block;}
.btn {
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}
.btn-primary {
    border: 2px solid var(--color-two);
    background-color: var(--color-two);
    color: #fff;
}
.btn-primary:hover {
    border: 2px solid var(--color-three);
    background-color: var(--color-three);
    color: #fff;
}
.btn-primary.btn-bordered {
    border: 2px solid #fff;
    background-color: transparent;
    color: #fff;
}
.btn-primary.btn-bordered:hover {
    border: 2px solid var(--color-three);
    background-color: transparent;
    color: #fff;
}
.nav-pills > li > a{border-radius:0 !important;}
.nav-pills > li.active > a{background-color: var(--color-primary);}
.progress {background-color: #bbb; border-radius: 0; position: relative;}
.progress-number {color: #fff; position: absolute; text-align: center; width: 100%;}
.bx-wrapper .bx-pager {
    top: calc(100% - 80px);
}
.bx-wrapper .bx-pager.bx-default-pager a,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: transparent;
    display: block;
    height: 18px;
    opacity: 0.5;
    position: relative;
    width: 18px;
}
.bx-wrapper .bx-pager.bx-default-pager a.active::after {
    background-color: #fff;
    border-radius: 50%;
    content: "";
    height: 60%;
    left: 20%;
    position: absolute;
    top: 20%;
    width: 60%;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover {
    border-color: var(--color-three);
    background-color: transparent;
    opacity: 1;
}
.bootbox.modal .modal-title {color: var(--color-primary);}
.bootbox.modal .modal-body {color: #444;}
.fix-cabecera {height: 80px; width: 100%;}
#contenido_principal h1,
#contenido_principal h2,
#contenido_principal h3 {color: var(--color-primary);}

/* SPECIFIC CUSTOM */
/* NAVBAR */
.navbar-default {background-color: #fff;}
.navbar-default .navbar-brand {
    padding: 11px 15px;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.navbar-default .navbar-brand img {
    display: inline-block;
    height: 56px;
}
.navbar-default .navbar-brand img.logo {
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.navbar-default .navbar-brand img.logo-text {height: 17px; padding: 0 10px;}
.navbar-default .navbar-nav > li > a {
    padding-top: 30px;
    padding-bottom: 30px;
}
.navbar-default .navbar-nav li a {
    font-size: 17px;
    font-weight: 600;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.navbar-default .navbar-nav li a:hover {color: var(--color-secondary);}
.navbar-default .navbar-nav li.active a,
.navbar-default .navbar-nav li.active a:hover,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover,
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
    background-color: transparent;
    color: var(--color-three);
}
.navbar-default.fino {
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.navbar-default.fino .navbar-brand {padding: 15px 15px;}
.navbar-default.fino .navbar-brand img.logo {
    height: 36px;
    margin-top: -8px;
}
.navbar-default.fino .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
}
#banner-portada {outline: 1px solid #f6f6f6;}
#banner-portada li {position: relative;}
#banner-portada .overlay {position: absolute; width: 100%; height: 100%;}
#banner-portada .bx-wrapper .bx-pager {bottom: 0;}
#banner-portada .imagen::after {padding-top: 30%;}
#banner-portada .contenido {background-color: rgba(255,255,255,0.7); width: 100%;}
#banner-portada .contenido.transparente {background-color: transparent;}
#banner-portada .titulo {color: var(--color-primary); padding: 15px;}
#banner-portada .subtitulo {background-color: var(--color-primary); color: #fff; display: inline-block; margin: 0; padding: 10px 15px;}
#banner-portada .titulo, #banner-portada .subtitulo {font-size: 32px; font-weight: bold;}
ul.lista-bloques {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
}
ul.lista-bloques > li {margin-bottom: 30px;}
ul.lista-bloques > li a {
    color: var(--color-one);
    display: block;
    outline: 1px solid #e6e6e6;
    overflow: hidden;
    padding: 15px;
    text-align: center;
}
ul.lista-bloques > li a:hover {color: var(--color-secondary);}
ul.lista-bloques > li h4 {
    font-size: 16px;
    height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
}
ul.lista-bloques > li .imagen {
    background-size: contain;
    background-position: center center;
    background-size: 56px 56px;
    height: 56px;
    width: 100%;
}
ul.lista-bloques > li .imagen::after {padding-top: 0;}
#compromiso-portada .imagen,
#comodidades-portada .imagen {background-size: contain; background-position: center center;}
#compromiso-portada .imagen::after,
#comodidades-portada .imagen::after {padding-top: 60%;}
ul.lista-colaboradores .imagen {
    background-size: contain;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    height: 24px;
    opacity: 0.5;
}
ul.lista-colaboradores .imagen::after {padding-top: 0;}
.imagen.islas {height: 235px; background-size: contain; background-position: center bottom;}
.imagen.islas::after {padding-top: 0;}

/* APP PORTADA */
#app-portada .container {overflow: hidden;}
#app-portada > .imagen {
  box-shadow: inset 0 -10px 10px -10px rgba(0,0,0,1);
  position: relative;
  height: auto;
  width: auto;
  background-size: cover;
}
#app-portada > .imagen::after {padding-top: 0;}
#app-portada .contenido {
  padding: 20px;
  background-color: rgba(255,255,255,0.9);
  color: var(--color-primary);
  border-radius: 8px;
}
#app-portada > .botones-wrapper {
  border-top: 1px solid rgba(250,250,250,0.1);
}

/* BLOG */
.noticias h4 {
    text-align: center;
    opacity: 0.8;
    font-weight: 600;
    color: #aaaaaa;
}
.bloqueNoticias h1 {color: #aaa; opacity: 0.8; font-weight: 600; text-align: center; font-size: 28px;}
.bloqueNoticias p {
    font-weight: 300;
    color: #aaaaaa;
    font-size: 16px;
}
.noticias a .bloqueNoticias p {
    overflow: hidden;
    height: 225px;
    margin: 0px;
    text-align: center;
    opacity: 0.75;
}
.noticias a:hover {
    text-decoration: none;
    color: #000;
}
.noticias .imagen {
    width: 100%;

    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
}
.noticias a .bloqueNoticias:hover .imagen {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
}
.noticias .imagen::after {
    padding-top: 60%;
}
.bloqueNoticias {
    padding: 0 15px;
    margin-bottom: 40px;
}
.bloqueNoticias {margin-bottom: 40px;}
.bloqueNoticias .wrapper-imagen {overflow: hidden;}
.bloqueNoticias .imagen::after {padding-top: 0;}
.bloqueNoticias .imagen {height: 250px !important; width: 100%;}

footer {
    background-color: var(--color-three);
    color: #fff;
}
footer hr {border-color: #333; margin: 0;}
footer .dark-footer {background-color: var(--color-three);}
footer .dark-footer .signature {text-align: right;}
footer a, footer strong {color: #fff;}
footer .signature .fa-heart,
footer a:hover {color: var(--color-secondary);}
footer .signature a:not(:hover) {color: var(--color-two);}
footer ul,
footer ul > li {
    margin-bottom: 10px;
}
footer ul > li::before {
    content: "•"; color: var(--color-primary);
    display: inline-block;
    margin-left: -1em;
    width: 1em;
}

#resultados-wrapper table td img {height: 36px;}
#resultados-wrapper table td {line-height: 34px;}

@media screen and (min-width: 1200px) {
    #bloques-portada ul > li.col-lg-2 {width: 12.5%;}
}

@media screen and (max-width: 1200px) {

}

@media screen and (max-width: 992px) {
    #banner-portada .imagen::after {padding-top: 40%;}
    #banner-portada .titulo, #banner-portada .subtitulo {font-size: 24px;}
    #bloques-portada ul > li a {
        height: 80px;
    }
    #bloques-portada ul > li h4 {height: auto;}
    #compromiso-portada .imagen::after,
    #comodidades-portada .imagen::after {padding-top: 50%;}
    footer .dark-footer .signature,
    footer .dark-footer .col-sm-6 {text-align: center;}
}

@media screen and (max-width: 768px) {
    h3 {font-size: 24px;}
    .fix-cabecera {height: 50px;}
    .navbar-default .navbar-brand {padding: 15px 15px;}
    .navbar-default .navbar-brand img.logo {
        height: 36px;
        margin-top: -8px;
    }
    .navbar-default .navbar-nav > li > a,
    .navbar-default.fino .navbar-nav > li > a {padding: 5px 15px;}
    #banner-portada .imagen::after {padding-top: 60%;}
    #banner-portada .titulo, #banner-portada .subtitulo {font-size: 18px;}
    #banner-portada .bx-wrapper .bx-pager {display: none;}
    #bloques-portada ul > li a {height: auto;}
    #bloques-portada ul > li h4 {height: 40px;}
    #compromiso-portada h3,
    #comodidades-portada h3 {text-align: center;}
    #compromiso-portada .contenido > p,
    #comodidades-portada .contenido > p {text-align: center;}
    .imagen.islas {height: 100px; background-size: contain; background-position: center bottom;}
}