/*
 * Fonts
 */
@font-face {
    font-family: 'DMSans';
    src: url('./fonts/DMSans-Regular.ttf');
    font-weight: 400;
}

@font-face {
    font-family: 'DMSans';
    src: url('./fonts/DMSans-Italic.ttf');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'DMSans';
    src: url('./fonts/DMSans-Bold.ttf');
    font-weight: 700;
}

@font-face {
    font-family: 'DMSans';
    src: url('./fonts/DMSans-BoldItalic.ttf');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Reckless Neue';
    src: url("./fonts/RecklessNeue-Light.otf") format("opentype");
    font-weight: 300;
}

@font-face {
    font-family: 'Reckless Neue';
    src: url("./fonts/RecklessNeue-LightItalic.otf") format("opentype");
    font-weight: 300;
    font-style: italic;
}


/*
 * Colors
 */

:root {
    --primary: #E65026;
    --primary-dark: #b7460e;
    --secondary: #fff;
    --brown: #a8a491;
    --blue: #05091d;
    --view-height: 100vh;

}


/*
 * Base structure
 */

html {
/*    scroll-behavior: smooth;*/
/*    overflow: hidden;*/
}

html,
body {
    font-family: 'DMSans', sans-serif;
    font-size: 22px;
}

body {
/*    overflow: hidden;*/
}


main {
/*    overflow: scroll;*/
    height: var(--view-height);
/*    scroll-snap-type: y proximity;*/
/*    scroll-behavior: smooth;*/
    margin-top: 84px;
}

footer {
    position: relative;
}

/*.snap {
    scroll-snap-align: start;
}*/


.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
.btn,
.form-control,
input,
textarea {
    font-family: 'DMSans', sans-serif;
}

h1 {
    font-weight: 700;
    font-size: 64px;
    color: #fff;
}

h2 {
    font-weight: bold;
    font-size: 40px;
}

p {
    font-size: 24px;
    font-weight: 400;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    color: var(--primary);
    text-decoration: underline;
}

/*
 * Navbar
 */


.navbar {
    background-color: var(--secondary);
    z-index: 99999;
    position: fixed;
    width: 100%;
    height: 84px;
    top: 0;
}

.navbar-brand img {
    width: 242px;
    margin-right: 10px;
    object-fit: contain;
}

.navbar-brand {
    padding-top: 2px;
    padding-bottom: 2px;
}

.navbar-nav .nav-link {
    margin-left: 20px;
}


.navbar-nav {
    width: 75%;
    justify-content: space-between;
}


.navbar-nav.lang-ext {
    width: 85%;
    justify-content: space-between;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--primary);
    font-size: 22px;
    text-transform: uppercase;
}


.navbar-light .navbar-nav .nav-link.lang {
    color: var(--primary);
    font-size: 22px;
    text-transform: none;
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    text-decoration: underline;
    color: var(--primary);
}

.nav-item {
    width: fit-content;
    margin-top: auto;
    margin-bottom: auto;
}

.navbar-light .navbar-nav .nav-link {
    padding-right: 0px;
    padding-left: 0px;
}

.navbar-light .navbar-nav .nav-link.lang {
    padding-right: .5rem;
    padding-left: .5rem;
}

/*
 * Elements
*/


a.btn {
    padding: 10px 40px;
    font-size: 22px;
    width: fit-content;
}

.btn-primary {
    border-radius: 0px;
    background-color: var(--primary);
    color: var(--secondary) !important;
    border: 1px solid var(--secondary);
}

.btn-primary:hover {
    border-radius: 0px;
    background-color: var(--secondary);
    color: var(--primary) !important;
    border: 1px solid var(--primary);
}

.btn-secondary {
    border-radius: 0px;
    background-color: transparent;
    color: var(--secondary) !important;
    border: 1px solid var(--secondary);
}

.btn-secondary:hover {
    border-radius: 0px;
    background-color: var(--secondary);
    color: var(--primary) !important;
    border: 1px solid var(--secondary);
}

.bg-brown .btn-secondary:hover {
    background-color: var(--secondary);
    color: var(--brown) !important;
    border: 1px solid var(--brown);
}

.btn-blue {
    border-radius: 0px;
    background-color: transparent;
    color: var(--blue) !important;
    border: 1px solid var(--blue);
}

.btn-blue:hover {
    border-radius: 0px;
    background-color: var(--blue);
    color: var(--secondary) !important;
    border: 1px solid var(--secondary);
}

.btn-primary-reverse {
    border-radius: 0px;
    background-color: var(--secondary);
    color: var(--primary) !important;
    border: 1px solid var(--primary);
    height: fit-content;
    align-self: center;
    padding: 5px 40px;

}

.align-bottom {
    vertical-align: bottom;
}

.btn-primary-reverse:hover {
    border-radius: 0px;
    background-color: var(--primary);
    color: var(--secondary) !important;
    border: 1px solid var(--secondary);
}

.custom-control-label::before {
    background-color: white;
    border: 1px solid var(--primary);
}

.custom-checkbox .custom-control-label::before {
    border-radius: 0px;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: var(--primary);
}

p.txt-sm {
    margin-bottom: 5px;
    font-size: 20px;
}

.form-check-input {
    margin-top: 0.5rem;
}

.colored-line {
    border: none;
    border-top: 1px solid var(--primary);
    /* Replace with your desired color */
    margin: 10px 0;
}

.big-mg-top {
    margin-top: 250px;
}

section.container-fluid {
    padding: 51px 66px;
}


section#contact.container-fluid .row,
section#valores.container-fluid .row,
section#proposito.container-fluid .row,
section#tiempo.container-fluid .row,
section#oficinas.container-fluid .row {
    min-height: auto;
}

.hv-100 {
    height: calc(var(--view-height) - 84px);
}

.h-auto {
    height: auto;
}


.container-fluid .row {
    margin-right: 0px;
    margin-left: 0px;
}

.c-pad {
    padding: 50px;
}

.c-pad.sticky-title {
    padding-top: 0px;
}



.right-pannel {
    color: var(--primary);
}

.bg-orange {
    background-color: var(--primary);
}

.bg-brown {
    background-color: var(--brown);
}

.bg-blue {
    background-color: var(--blue);
}

.blue-text {
    color: var(--blue);
}

.section-title {
    padding-top: 50px;
    padding-bottom: 30px;
}

.section-text {
    font-size: 2.2rem;
    line-height: 2.7rem;
    color: var(--secondary);
    text-align: left;
    width: 100%;
}

.full-height-img {
    width: 100%;
    object-fit: cover;
    position: relative;
    height: calc(var(--view-height) - 84px);
}

.p-rel {
    position: relative;
}

.img-text {
    position: absolute;
    bottom: 0;
    left: 0;
    color: var(--secondary);
    padding: 50px;
}

.img-text p {
    font-size: 60px;
    line-height: 72px;
    margin-bottom: 0px;
}

.img-text.tsm p,
.img-text.tsm a {
    font-size: 40px;
    line-height: 50px;
    color: var(--secondary);
}

.img-text.ttop {
    position: absolute;
    top: 0px;
    left: 0;
}

.img-text.ttop p {
    font-size: 5rem;
    line-height: 4.8rem;
}

.full-width-img {
    position: relative;
    height: calc(var(--view-height) - 84px);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.full-width-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.full-width-img h2 {
    font-size: 140px;
    line-height: 120px;
    margin-bottom: 80px;
    font-weight: 400;
}

.full-width-img a {
    position: absolute;
    bottom: 0;
    margin-bottom: 60px;
}


.left-pannel h1 {
    font-weight: 400;
    font-size: 5rem;
    line-height: 4.8rem;
}

.left-pannel h1.sticky-top,
.left-pannel .row.sticky-top {
    font-size: 5rem;
    padding-top: 50px;
    top: 45px;
}


#ambiental .left-pannel h1,
#social .left-pannel h1,
#gobernanza .left-pannel h1 {
    font-size: 100px;
    line-height: 115px;
}


.right-pannel p.description {
    font-family: 'Reckless Neue', sans-serif;
    font-weight: 300;
    font-size: 38px;
    line-height: 46px;
}
.right-pannel .commitment-item p.description {
    font-size: 24px;
    line-height: 1.1;
}

.right-pannel .img {
    position: relative;
    width: 100%;
}

.right-pannel .img:after {
    content: "";
    display: block;
    padding-bottom: 65%;
    /* The padding depends on the width, not on the height, so with a padding-bottom of 100% you will get a square */
}

.right-pannel .img img {
    position: absolute;
    /* Take your picture out of the flow */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* Make the picture taking the size of it's parent */
    width: 100%;
    /* This if for the object-fit */
    height: 100%;
    /* This if for the object-fit */
    object-fit: cover;
    /* Equivalent of the background-size: cover; of a background-image */
    object-position: center;
}

.img-title {
    font-size: 26px;
    margin-top: 25px;
    margin-bottom: 80px;
}

.img-title.last {
    margin-bottom: 1rem;
}

.right-pannel .illustration img {
    /* width: 100%; */
    height: auto;
    object-fit: cover;
    object-position: center;
}

.right-pannel .illustration#ill-mg {
    margin-top: 100px;
}

.right-pannel .title {
    font-size: 62px;
    line-height: normal;
}

.right-pannel .description {
    font-size: 32px;
}

.text-decoration-underline {
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

a.text-decoration-underline {
    font-family: 'Reckless Neue', sans-serif;
}

a.text-decoration-underline:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

.pd-large {
    padding-bottom: 200px !important;
}

.contact-addresses {
    margin-bottom: 68px;
}

.inner-address {
    border-top: 1px solid var(--secondary);
    border-bottom: 1px solid var(--secondary);
    color: var(--secondary);
    padding-top: 10px;
    margin: 0px;
    margin-right: 20px;
    height: 100%;
}

.contact-addresses div:last-of-type>.inner-address {
    margin-right: 0px;
}

.inner-address p {
    font-size: 20px;
    color: white !important;
}

.inner-address a {
    color: white !important;
    text-decoration: none;
}

footer .addr {
    line-height: normal;
}

footer a {
    line-height: normal;
}

.show-sm {
    display: none !important;
}

/*
 * Sliders
*/

.carousel-item img {
    width: 100%;
    height: calc(var(--view-height) - 129px);
    object-fit: cover;
}

.carousel-caption h3 {
    font-size: 52px;
}

.carousel-item.no-pic {
    width: 100%;
    height: 800px;
    background-color: var(--blue);
}

.carousel-caption {
    position: absolute;
    top: 0;
    bottom: 0;
    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;
    /* text-shadow: 1px 1px 2px black; */
}

.carousel-caption.outside {
    position: relative;
    color: var(--primary);
    text-align: left;
    float: left;
    left: 0px;
    padding: 5px 26px;
    height: 45px;
    text-shadow: none;
}

.carousel-caption.outside p {
    margin-bottom: 0px;
}

.carousel-control-prev-icon {
    background-image: url("../img/Fletxa.png");
    background-size: contain;
    width: 80px;
    height: 80px;
}

.carousel-control-next-icon {
    background-image: url("../img/Fletxa.png");
    transform: scaleX(-1);
    background-size: contain;
    width: 80px;
    height: 80px;
}

.carousel-control-prev {
    justify-content: flex-start;
    padding-left: 50px;
    opacity: 1;
}

.carousel-control-next {
    justify-content: flex-end;
    padding-right: 50px;
    opacity: 1;

}

.counter-txt {
    position: absolute;
    color: white;
    font-size: 18px;
}

/*.commitment-item {
    border-radius: 50px;
    border: 3px solid var(--blue);
}*/

.right-pannel p.description.quality {
    font-family: 'DMSans', sans-serif;
    font-size: 36px;
    line-height: 1.1;
    padding-top: 20px;
    padding-bottom: 20px;
/*    text-align: center;*/
}

.text-link {
    font-size: 18px;
    display: inline-block;
    padding-top: 30px;
    padding-bottom: 20px;
    line-height: 22px;

}

.text-link a:hover {
    color: var(--brown);
    text-decoration: none;
}

.text-link a:hover img {
    filter: invert(0.5) sepia(1) saturate(0.5) hue-rotate(353deg);
    opacity: 0.8;
}

.hotel-title {
    font-size: 60px;
    padding-top: 30px;
}


#compromiso1 .carousel-inner {
    background-image: url("../img/Compromiso\ -\ Medioambiental.jpg");
    height: calc(var(--view-height) - 85px);
    background-size: cover;
    background-repeat: no-repeat;
}

#compromiso2 .carousel-inner {
    background-image: url("../img/Compromiso\ -\ Social.jpg");
    height: calc(var(--view-height) - 85px);
    background-size: cover;
    background-repeat: no-repeat;
}

.carousel-item img {
    height: calc(var(--view-height) - 129px);
}

.carousel-caption-logos {
    flex-direction: column;
}
.compromiso-logos-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.compromiso-logos-row img {
    width: auto !important;
    height: auto !important;
    filter: brightness(0) invert(1);
}

/* #negocios1 .carousel-item, */
#compromiso1 .carousel-item,
#compromiso2 .carousel-item {
    /* height: 100%; */
    height: calc(var(--view-height) - 85px);
}

#negocios1 .carousel-item img {
    height: calc(var(--view-height) - 85px);
}


.carousel-inner {
    height: calc(var(--view-height) - 85px);
}

.carousel-item {
    /* height: 100%;  */
    height: calc(var(--view-height) - 85px);
}

#moreInfo .title,
#moreInfo .description {
    color: var(--blue)
}

#moreInfo .col-2 {
    padding-left: 0px;
}

#moreInfo .col-10 {
    padding-left: 0px;
    margin-left: -15px;
}


#aviso-legal p,
#aviso-legal h1,
#aviso-legal h2,
#aviso-legal h3,
#aviso-legal li {
    color: var(--primary);
    line-height: normal;


}

#aviso-legal ul,
#privacidad ul,
#cookies-text ul {
    list-style: '- ';
}

#aviso-legal h2,
#privacidad h2,
#cookies-text h2 {
    font-size: 35px;
    font-weight: normal;
    margin-top: 30px;
}

#aviso-legal h2:first-of-type,
#privacidad h2:first-of-type,
#cookies-text h2:first-of-type {
    margin-top: 0px;
}

#aviso-legal h3,
#privacidad h3,
#cookies-text h3 {
    font-size: 24px;
    font-weight: normal;
    text-transform: uppercase;
    margin-top: 20px;
}

#aviso-legal p,
#privacidad p,
#cookies-text p,
#aviso-legal li,
#privacidad li,
#cookies-text li {
    font-size: 20px;
    font-weight: normal;
}


#privacidad p,
#privacidad h1,
#privacidad h2,
#privacidad h3,
#privacidad li {
    color: var(--primary);
    line-height: normal;

}



#privacidad strong {
    font-family: 'DMSans', sans-serif;
}

.banner {
    padding-top: 0px;
}

.banner h1 {
    text-align: center;
    padding-top: 60px;
    padding-bottom: 60px;
    font-weight: normal;
}

#cookies-text p,
#cookies-text h1,
#cookies-text h2,
#cookies-text h3,
#cookies-text li {
    color: var(--primary);
    line-height: normal;

}


#cookies-text strong {
    font-family: 'DMSans', sans-serif;
}

#cookies-text table td {
    border: 1px solid var(--primary);
    padding: 5px;
    font-size: 14px;
}

#cookies-text table td p {
    font-size: 20px;
    font-family: 'DMSans', sans-serif;
    margin-bottom: 0px;
}


section#residencial.container-fluid .row.hv-100 {
    min-height: calc(var(--view-height) - 84px);
    height: auto !important;
}

/*
 * Forms
*/

.form-control {
    border: none;
    border-bottom: 1px solid var(--primary);
    border-radius: 0px;
    padding: 0px;
    color: var(--brown);
}

.form-control.noborder {
    border-bottom: none;
}

.form-group {
    margin-bottom: 5px;
}

label {
    margin-bottom: 0px;
}

.form-group:first-of-type {
    border-top: 1px solid var(--primary);
    padding-top: 5px;
}

.form-control::placeholder,
.form-control:focus {
    color: var(--brown);
}

.form-control:focus {
    background-color: #fff;
    border-color: var(--primary);
    outline: 0;
    box-shadow: none;
}

/*
 * Footer
*/

footer .container-fluid {
    padding-top: 30px;
    padding-bottom: 20px;
    color: var(--primary);
    margin-bottom: 84px;
}

footer h3 {
    font-size: 40px;
}

.gray-bg {
    background-color: #e1e0d9;
}

footer img {
    height: auto;
    width: 250px;
}


/*
 * Cookies
*/

.cookies-container {
    background-color: var(--secondary);
    position: fixed;
    bottom: 0px;
    z-index: 9999999999;
    color: var(--primary);
    padding: 20px 10px;
    font-family: 'DMSans', sans-serif;
    font-size: 20px;
    line-height: 25px;
    display: block;
    width: 100%;
}

.cookies-container .btn-sm {
/*    padding: 4px 30px;*/
    padding: 4px 5px;
    width: 250px;
    margin-right: 15px;
}

/**/
.cookies{ 
    display:none;
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:auto;
    z-index:9999;
    background:#ffffff;
    box-shadow:0px -5px 10px rgba(0,0,0,0.5);
}
.cookies .ccontent.preferences input{ margin: 0 10px 0 0; }
.chide{ display:none !important; }
/**/


.navbar-light .navbar-toggler {
    border: none;
    color: var(--primary);
}

.navbar-light .navbar-toggler:focus,
.navbar-light .navbar-toggler:active {
    border: none;
}

.navbar.sticky-top {
    background-color: #fff;

}

.navbar.sticky-top.fixed {
    z-index: 99999;
    position: fixed;
    width: 100%;
}

.contact-height {
    height: calc(var(--view-height) - 84px);
    padding-top: 84px;
}

.bottom-contact {
    border-top: 1px solid var(--primary);
    padding-top: 20px;
}

#leerBtn {
    border: none;
    padding-left: 0px;
}

.btn-blue#leerBtn:hover {
    background-color: transparent;
    color: var(--blue) !important;
}


.c-pad.withnav {
    padding-top: 100px;
}



.right-pannel .sticky-brother {
    padding-top: 0px;
}

.right-pannel .sticky-brother.withnav {
    padding-top: 50px;
}

#tiempo .right-pannel .sticky-brother.withnav,
#proposito .right-pannel .sticky-brother.withnav,
#oficinas .right-pannel .sticky-brother.withnav,
#hoteles .right-pannel .sticky-brother.withnav,
#gobernanza .right-pannel .sticky-brother.withnav {
    padding-top: 100px;
}

h1.sticky-top.withnav,
.left-pannel .row.sticky-top.withnav {
    padding-top: 100px;
}

#oficinas .c-pad.withnav,
#hoteles .c-pad.withnav,
#tiempo .c-pad.withnav,
#proposito .c-pad.withnav,
/* #valores .c-pad.withnav, */
#gobernanza .c-pad.withnav {
    padding-top: 0px;
}



#contact .c-pad.withnav {
    padding-top: 50px;
    transition: none;
}

@media (max-width: 1600px) {

    #ambiental .left-pannel h1,
    #social .left-pannel h1,
    #gobernanza .left-pannel h1 {
        font-size: 90px;
        line-height: 105px;
    }

    .left-pannel h1.sticky-top {
        line-height: 90px;
        font-size: 105px;
    }

    .left-pannel h1 {
        line-height: 90px;
        font-size: 105px;
    }

    .right-pannel p.description {
        font-size: 34px;
        line-height: 38px;
    }
    .right-pannel .commitment-item p.description {
        font-size: 22px;
        line-height: 1.1;
    }
}

@media (max-width: 1440px) {

    .c-pad {
        padding: 45px;
    }

    .left-pannel h1.sticky-top {
        line-height: 3.2rem;
        font-size: 4.2rem;
    }

    .left-pannel h1 {
        line-height: 3.2rem;
        font-size: 4.2rem;
    }

    .navbar-nav {
        width: 85%;
    }

    .navbar-light .navbar-nav .nav-link {
        margin-left: 0;
    }

    .navbar-brand img {
        width: 222px;
    }

    .full-height-img {
        padding-top: 0px;
    }

    .right-pannel .title {
        font-size: 52px;
    }

    #moreInfo .col-10 {
        padding-left: 0px;
        margin-left: 0px;
    }

    #ambiental .left-pannel h1,
    #social .left-pannel h1,
    #gobernanza .left-pannel h1 {
        font-size: 85px;
        line-height: 95px;
    }

    .contact-addresses {
        margin-bottom: 92px;
    }

    .navbar-nav.lang-ext {
        width: 90%;
    }

    .hotel-title {
        font-size: 50px;
        line-height: 54px;
    }

    .compromiso-logos-row img {
        max-width: 150px;
    }
}


@media (max-width: 1384px) {

    #ambiental .left-pannel h1,
    #social .left-pannel h1,
    #gobernanza .left-pannel h1 {
        font-size: 3rem;
        line-height: 3rem;
    }

}

@media (max-width: 1286px) {
    .section-text {
        font-size: 2rem;
        line-height: 2.4rem;
    }

    .hotel-title {
        font-size: 45px;
        line-height: 50px;
    }
}

@media (max-width: 1200px) {
    .navbar-light .navbar-nav .nav-link {
        margin-left: 0;
        font-size: 20px;
    }

    .navbar-light .navbar-nav .nav-link.lang {
        padding-right: .3rem;
        padding-left: .3rem;
        font-size: 20px;
    }

    .navbar-nav {
        width: 90%;
    }

    .img-text.ttop p {
        font-size: 4rem;
        line-height: 3.8rem;
    }

    .img-text.tsm p,
    .img-text.tsm a {
        font-size: 30px;
        line-height: 40px;
    }

    .right-pannel p.description {
        font-size: 28px;
        line-height: 36px;
    }
    .right-pannel .commitment-item p.description {
        font-size: 20px;
        line-height: 1.1;
    }

    .img-title {
        font-size: 20px;
        margin-top: 18px;
    }

    .carousel-caption h3 {
        font-size: 36px;
    }

    .section-text {
        font-size: 1.8rem;
        line-height: 2.2rem;
        width: 100%;
    }

    .left-pannel h1,
    .left-pannel h1.sticky-top {
        font-size: 75px;
        line-height: 74px;
    }

    .left-pannel h1.sticky-top {
        font-size: 75px;
        line-height: 74px;
    }

    .right-pannel .title {
        font-size: 42px;
    }

    .right-pannel p.description {
        font-size: 26px;
        line-height: 30px;
    }
    .right-pannel .commitment-item p.description {
        font-size: 20px;
        line-height: 1.1;
    }

    .compromiso-logos-row img {
        max-width: 120px;
    }

}



@media (max-width: 1079px) {
    .contact-addresses {
        margin-bottom: 122px;
    }

    .navbar-light .navbar-nav .nav-link,
    .navbar-light .navbar-nav .nav-link.lang {
        margin-left: 0;
        font-size: 18px;
    }

    .navbar-nav.lang-ext {
        width: 95%;
    }
}


@media (max-width: 991px) {

    .show-sm {
        display: block !important;
    }

    .hide-sm {
        display: none !important;
    }

    .navbar {
        padding: 0px;
        overflow: hidden;
    }

    .collapse {
        height: var(--view-height) !important;
        width: 100%;
    }

    .collapse.show {
        height: var(--view-height) !important;
        width: 100%;
    }

    .navbar.fixed-full {
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: flex;
        align-items: flex-start;
        overflow: hidden;
        background-color: white;
    }

    .navbar-brand img {
        height: 35px;
        margin-right: 10px;
        padding-left: 20px;
        object-position: left;
        vertical-align: middle;
        height: 100%;
    }

    .navbar-brand {
        height: 84px;
    }

    .img-text.ttop {
        top: 50px;
    }

    .navbar-nav {
        width: 100%;
        padding-left: 20px;
    }

    .navbar-light .navbar-nav .nav-link {
        color: var(--secondary);
        font-size: 42px;
        text-transform: none;
        line-height: 38px;
    }

    .navbar-light .navbar-nav .nav-link.lang {
        text-transform: uppercase;
        color: var(--secondary);
        font-size: 20px;
        line-height: 30px;
    }

    .navbar-light .navbar-nav .nav-link:focus,
    .navbar-light .navbar-nav .nav-link:hover,
    .navbar-light .navbar-nav .nav-link.active,
    .navbar-light .navbar-nav .nav-link.lang:focus,
    .navbar-light .navbar-nav .nav-link.lang:hover,
    .navbar-light .navbar-nav .nav-link.lang.active {
        color: var(--secondary);
    }

    .navbar-collapse {
        background-color: var(--primary);
        height: var(--view-height);
        padding-top: 20px;
    }

    .navbar-light .navbar-nav .nav-link.lang {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .lang.active {
        text-decoration: underline;
    }

    button:focus {
        outline: none;
    }

    .full-width-img h2 {
        font-size: 90px;
        line-height: 95px;
    }

    #menuBtn {
        font-size: .8rem;
    }

    a.btn {
        padding: 10px 20px;
    }

    .c-pad {
        padding: 30px;
    }

    .img-text {
        padding: 30px;
    }

    .c-pad.withnav {
        padding-top: 80px;
    }

    section#retail.container-fluid .row,
    section#oficinas.container-fluid .row,
    section#hoteles.container-fluid .row,
    section#residencial.container-fluid .row,
    section#ambiental.container-fluid .row,
    section#social.container-fluid .row,
    section#gobernanza.container-fluid .row {
        height: auto !important;
    }

    .left-pannel h1.sticky-top,
    .left-pannel .row.sticky-top {
        padding-top: 30px;
    }

    .left-pannel h1.sticky-top.withnav,
    .left-pannel .row.sticky-top.withnav {
        padding-top: 50px;
    }

    section#hoteles.container-fluid .row.hv-100 {
        height: auto !important;
    }

    section .container-fluid .left-pannel {
        height: auto !important;
    }

    section .container-fluid .left-pannel.h-100 {
        height: auto !important;
    }

    .contact-height {
        height: calc(var(--view-height) - 50px);
        padding-top: 50px;
    }

    .full-height-img {
        /* height: calc(100vh - 50px); */
        height: calc(var(--view-height) - 50px);

    }

    .inner-address {
        border-bottom: 0px;
    }

    .right-pannel p.description.quality {
        font-size: 30px;
        line-height: 1.1;
    }

    .left-pannel h1.sticky-top,
    .left-pannel h1 {
        line-height: 2.2rem;
        font-size: 2.5rem;
    }

    #ambiental .left-pannel h1,
    #social .left-pannel h1,
    #gobernanza .left-pannel h1 {
        font-size: 2rem;
        line-height: 2rem;
    }

    .navbar-light .navbar-nav .nav-link.lang {
        padding-right: 0px;
        padding-left: 0px;
    }

    .compromiso-logos-row img {
        max-width: 100px;
    }


}

@media (max-width: 768px) {

    main {
        margin-top: 50px;
    }

    section.container-fluid {
        padding: 25px;
    }

    .hv-100 {
        height: calc(var(--view-height) - 50px);
    }


    .contact-height {
        height: auto;
    }

    .img-text p {
        font-size: 30px;
        line-height: 35px;
    }

    .img-text {
        padding: 20px;
    }

    .section-text {
        font-size: 24px;
        line-height: 28px;
        width: 100%;
        margin-bottom: 10px;
    }

    .big-mg-top {
        margin-top: 125px;
    }

    footer .big-mg-top {
        margin-top: 100px;
    }

    footer .container-fluid {
        padding-bottom: 30px;
        min-height: calc(var(--view-height));
    }

    a.btn {
        padding: 8px 20px !important;
        font-size: .75rem;
    }


    .full-width-img {
        height: calc(var(--view-height) - 50px);
    }

    .full-width-img h2 {
        padding: 20px;
        font-size: 60px;
        line-height: 65px;
        margin-bottom: 0px;
        margin-top: -40px;
    }

    .full-width-img .text-left {
        width: 100%;
    }

    .full-width-img .btn {
        align-self: center;
        margin: 10px;
        position: relative;
    }

    footer .container-fluid {
        padding-left: 0px;
        padding-right: 0px;
        margin-bottom: 0px;
    }

    footer h3 {
        font-size: 24px;
        padding-bottom: 30px;
        border-bottom: 1px solid var(--primary);
    }

    footer .addr {
        margin-bottom: 50px;
        font-size: 20px;
        line-height: 20px;
    }

    footer a {
        font-size: 20px;
        line-height: auto;

    }

    footer .col-md-4 {
        height: 27px;
    }

    footer .col-md-4.addr {
        height: auto;
    }

    .cookies-container .btn-sm {
        width: auto;
        font-size: 14px;
        padding: 4px 10px;
        margin-right: 15px;
    }

    .cookies-container {
        font-size: 16px;
        line-height: 20px;
    }

    .cookies-container .btn {
        margin-top: 20px;
    }

    button:focus {
        outline: none;
    }

    .navbar {
        padding: 0px;
        height: 50px;
    }

    .navbar-brand img {
        height: 35px;
        margin-right: 10px;
        padding-left: 20px;
        object-position: left;
    }

    .navbar-brand {
        height: 50px;
    }

    .img-text.ttop {
        top: 0px;
    }

    .navbar-nav {
        width: 100%;
    }

    .navbar-light .navbar-nav .nav-link {
        color: var(--secondary);
        font-size: 42px;
        text-transform: none;
        line-height: 38px;
    }

    .navbar-light .navbar-nav .nav-link.lang {
        text-transform: uppercase;
        color: var(--secondary);
        font-size: 22px;
    }

    .navbar-light .navbar-nav .nav-link:focus,
    .navbar-light .navbar-nav .nav-link:hover,
    .navbar-light .navbar-nav .nav-link.active,
    .navbar-light .navbar-nav .nav-link.lang:focus,
    .navbar-light .navbar-nav .nav-link.lang:hover,
    .navbar-light .navbar-nav .nav-link.lang.active {
        color: var(--secondary);
    }

    .navbar-collapse {
        background-color: var(--primary);
        height: calc(var(--view-height) - 50px);
        padding-top: 20px;
    }

    .img-text.ttop p {
        font-size: 55px;
        line-height: 58px;
    }

    .img-text.tsm p,
    .img-text.tsm a {
        font-size: 1.2rem;
        line-height: 1.3rem;
        color: var(--secondary);
        margin-bottom: 5px;
    }

    .img-text.tsm.compromiso p,
    .img-text.tsm.compromiso a {
        margin-bottom: 12px;
    }

    .right-pannel {
        min-height: auto;
    }

    .sticky-top {
        position: sticky;
    }

    .left-pannel h1.sticky-top {
        position: relative;
    }

    .left-pannel h1.sticky-top,
    .left-pannel h1 {
        font-size: 45px;
        line-height: 40px;
    }

    .left-pannel h1 {
        font-size: 45px;
        line-height: 50px;
        word-break: break-all;
    }

    .c-pad {
        padding: 20px;
    }

    .c-pad.withnav {
        padding-top: 60px;
    }

    #contact .c-pad.withnav {
        padding-top: 20px;
    }

    .c-pad.sticky-title {
        padding-top: 20px;
    }

    .c-pad.align-self-end.px-0 {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .left-pannel h1.sticky-top,
    .left-pannel .sticky-top {
        padding-top: 0px;
    }

    .left-pannel h1.sticky-top,
    .left-pannel .row.sticky-top {
        line-height: 40px;
        padding-top: 0px;
    }

    .right-pannel p.description {
        font-size: 1rem;
        line-height: 1.3rem;
    }

    .right-pannel .description {
        margin-bottom: 30px;
    }

    .right-pannel .col-md-12,
    .right-pannel .col-1,
    .right-pannel .col-10,
    .right-pannel .col-md-11 {
        padding-right: 0px;
        padding-left: 0px;
    }

    .img-title {
        font-size: 0.65rem;
        margin-top: 10px;
        margin-bottom: 30px;
    }

    .right-pannel .title {
        font-size: 1.5rem;
    }

    .carousel-caption {
        align-items: flex-start;
        left: 20px;
        right: 20px;
    }

    .carousel-caption h3 {
        font-size: 24px;
        text-align: left;
        margin-top: 50px;
    }

    .carousel-item img {
        height: calc(var(--view-height) - 50px);
    }

    #negocios1 .carousel-item img {
        /* height: 100%; */
        height: calc(var(--view-height) - 50px)
    }

    .carousel-item img {
        height: calc(var(--view-height) - 110px);
    }

    /* #negocios1 .carousel-item, */
    #compromiso1 .carousel-item,
    #compromiso2 .carousel-item {
        /* height: 100%; */
        height: calc(var(--view-height) - 50px);
    }

    #negocios1 .carousel-item img {
        height: calc(var(--view-height) - 50px);
    }

    .carousel-item.no-pic {
        height: calc(var(--view-height) - 50px);
    }

    .carousel-control-next,
    .carousel-control-prev {
        align-items: flex-end;
        bottom: 85px;
    }

    #compromiso1 .carousel-control-next,
    #compromiso1 .carousel-control-prev,
    #compromiso2 .carousel-control-next,
    #compromiso2 .carousel-control-prev,
    #negocios1 .carousel-control-next,
    #negocios1 .carousel-control-prev {
        bottom: 25px;
    }

    .carousel-caption.outside {
        padding: 5px 20px;
        height: 60px;
    }

    .carousel-caption.outside p {
        font-size: 20px;
        line-height: 20px;
        margin: auto;
    }

    .carousel-inner {
        height: calc(var(--view-height) - 50px);
    }

    .carousel-item {
        /* height: 100%;  */
        height: calc(var(--view-height) - 50px);
    }

    .inner-address {
        border-top: none;
        border-bottom: none;
    }

    .inner-address p {
        margin-bottom: 0px;
        line-height: 24px;
    }

    .contact-addresses {
        margin-bottom: 0px;
    }

    label,
    .txt-sm {
        font-size: .8rem;
    }

    label.custom-control-label {
        font-size: .7rem;
    }

    .custom-control-label::before,
    .custom-control-label::after {
        width: .7rem;
        height: .7rem;
        margin-top: 6px;
    }

    .custom-control {
        padding-left: 1rem;
        margin-bottom: 30px;
    }

    .btn-primary-reverse {
        margin: auto;
    }

    .cookies-container .btn-sm {
        margin-right: 0px;
    }

    .left-pannel h1.sticky-top.withnav,
    .left-pannel .row.sticky-top.withnav {
        padding-top: 0px;
    }

    .carousel-control-prev {
        padding-left: 30px;
    }

    .carousel-control-next {
        padding-right: 30px;
    }

    .carousel-control-next,
    .carousel-control-prev {
        width: 20%;
    }

    .c-pad.sticky-sm-title {
        position: sticky;
        top: 0;
        z-index: 1020;
    }

    .left-pannel h1.sticky-top.withnav,
    .left-pannel .row.sticky-top.withnav,
    .left-pannel h1.sticky-sm-title.withnav,
    .left-pannel .row.sticky-sm-title.withnav {
        padding-top: 70px;
    }

    .col-md-6.bg-brown.c-pad.sticky-sm-title.left-pannel.d-flex.flex-column.justify-content-between.withnav {
        padding-top: 60px;
    }

    .full-height-img {
        height: calc(var(--view-height) - 50px);

    }

    .bottom-contact {
        flex-direction: column;
    }

    .pb-4-sm {
        padding-bottom: 1.5rem;
    }

    #moreInfo .title {
        padding-left: 0px;
    }

    #moreInfo .description {
        padding-right: 0px;
    }

    .illustration img {
        width: 60% !important;
        margin-top: 80px;
        margin-bottom: 40px;
    }

    .illustration img.w-100 {
        width: 100% !important;
        margin-bottom: 0px;
    }

    .right-pannel .illustration#ill-mg {
        margin-top: 0px;

    }

    .right-pannel .illustration#ill-mg img {
        margin-bottom: 10px;
    }

    .illustration img.w-100 {
        padding-right: 5px;
        padding-left: 5px;
    }

    #compromiso1 .carousel-inner {
        background-image: url("../img/Mobile/Compromiso-medioambiental.jpg");
        height: calc(var(--view-height) - 50px);
        background-size: cover;
        background-repeat: no-repeat;
    }

    #compromiso2 .carousel-inner {
        background-image: url("../img/Mobile/Compromiso\ social.jpg");
        height: calc(var(--view-height) - 50px);
        background-size: cover;
        background-repeat: no-repeat;
    }

    .right-pannel p.description.quality {
        font-size: 24px;
        line-height: 1.1;
        padding-top: 0px;
    }

    .text-link {
        font-size: 14px;
        display: inline-block;
        padding-top: 30px;
        padding-bottom: 20px;
        line-height: 18px;

    }

    .hotel-title {
        font-size: 36px;
        line-height: 38px;
        padding-top: 10px;
    }

    .banner {
        height: 80px;
        padding: 0px;
    }

    .banner h1 {
        padding-top: 20px;
        padding-bottom: 20px;
        font-size: 30px;
    }

    section#residencial.container-fluid .row.hv-100 {
        min-height: auto !important;
    }

    .nav-item.show-sm {
        padding-top: 15px;
    }



}

@media (max-width: 576px) {
    .full-width-img h2 {
        font-size: 55px;
        line-height: 55px;
    }

    .left-pannel h1 {
        font-size: 40px;
        line-height: 45px;
    }

    .cookies-container .btn-sm {
        width: auto;
        font-size: 12px;
        padding: 4px 8px;
        margin-right: 0px;
    }

    .right-pannel p.description.blue-text {
        margin-bottom: 0px;
    }

    .img-text.ttop p {
        font-size: 41px;
        line-height: 42px;
    }

    .navbar-light .navbar-nav .nav-link {
        font-size: 40px;
        line-height: 38px;
    }

    .left-pannel h1.sticky-top,
    .left-pannel h1 {
        font-size: 42px;
        line-height: 40px;
        word-break: break-word;
    }

    #ambiental .left-pannel h1,
    #social .left-pannel h1,
    #gobernanza .left-pannel h1 {
        font-size: 42px;
        line-height: 40px;
        word-break: break-word;
    }

    footer .big-mg-top {
        margin-top: 30px;
    }

}

@media (max-width: 350px) {
    .full-width-img h2 {
        font-size: 50px;
        line-height: 54px;
    }

    .left-pannel h1.sticky-top,
    .left-pannel h1 {
        font-size: 38px;
        line-height: 43px;
    }


}

@media (max-width: 325px) {
    .full-width-img h2 {
        font-size: 45px;
        line-height: 48px;
        word-break: break-all;
    }

    .cookies-container .btn-sm {
        font-size: 12px;
        padding: 4px 8px;
        margin-right: 0px;
    }

    .navbar-light .navbar-nav .nav-link {
        font-size: 32px;
        line-height: 36px;
    }

}