﻿
/*********************************************************************************************************************/
/*---------------------------------------------------- GENERAL ------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------*/ 

h1 {font-size: 3rem; font-family: "cronos-pro", sans-serif;}
h2 {font-size: 2.5rem; font-family: "cronos-pro", sans-serif;}
h3 {font-size: 2rem; font-family: "cronos-pro", sans-serif;}
h4 {font-size: 1.5rem; font-family: "cronos-pro", sans-serif;}
h5 {font-size: 1.5rem; font-family: "cronos-pro", sans-serif;}
p {font-size: 1.7rem; margin: 0; font-family: "cronos-pro", sans-serif;}
span { font-size: 1.7rem; font-family: "cronos-pro", sans-serif; }
@media(max-width: 991px) {
    p {font-size: 1.5rem;}

}

@media(max-width: 767px) {
    h1 {font-size: 2.3rem;}
    h2 {font-size: 2rem;}
    h3 {font-size: 1.6rem;}
    h4 {font-size: 1.4rem;}
}

ul {padding: 0;}
a:hover, 
a:hover > * {text-decoration: none; color: #F2A900 !important; transition: .2s;}

html, body {height: auto; position: relative; min-height: 100%; margin: 0; padding: 0;}

/*------------------------------*/
/*-------- social links --------*/
/*------------------------------*/
.social-links {margin-top: 7px;}
.social-links li {display: inline-block;}
.social-links li.contact-links__sign-up {border: 2px solid white; border-radius: 5px; padding: 0; margin-top: 1px; transform: translateY(2px);}
.social-links li.contact-links__sign-up a {color: white; width: 100%; display: inline-block; padding: 2px 10px;}

@media(max-width: 991px) {
    .social-links li:not(.contact-links__sign-up) a {height: 17px;}
}

/*********************************************************************************************************************/
/*------------------------------------------------------ MAIN -------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------*/ 

/*-----------------------*/
/*---- header banner ----*/ 
/*-----------------------*/
main {margin: 80px 0 0 0;}
.main__header-wrapper { border-bottom: 20px solid #F2A900; position: relative; height: 700px; overflow: hidden; width: 100%;}
.main__header-wrapper.home { height: auto; }

.main__header-wrapper .image-container,
.main__header-wrapper .image-container div {height: 100%;}
.main__header-wrapper .image-container .slick-slide {position: relative; overflow: hidden;}
.main__header-wrapper .image-container video { display: block; width: 100%; height: auto; }

.main__header-wrapper .container {display: table; height: 100%; width: 100%; position: absolute; top: 0; left: 0; right: 0;}
.main__header-wrapper .container .row {height: auto;}

.main__header-text {text-align: center; text-transform: uppercase; color: white; padding: 120px 0 0 0;}
.main__header-text h1 {font-size: 5rem; margin-bottom: 0; font-weight: bold; text-shadow: 0 1px 8px darkslategray;}
.main__header-text h2 {margin-top: 5px; text-shadow: 0 1px 8px darkslategray;}

/*---- image containers / carousels ----*/ 
.slick-list {height: 100%;}
.image-container .slick-slide > div {position: relative;}
.header-slider-arrows {width: 100%;}
.slick-arrow {background-image: url(../images/icons/ArrowLeft1.png); height: 49px !important; width: 20px; z-index: 2; position: absolute !important; top: 45%; cursor: pointer; background-size: cover; transition: .2s; }
.image-container img {-webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; left: 50%; top: 50%;  height: auto; width: auto; min-height: 100%; min-width: 100%;}
.slick-arrow--left  {left: 5%;}
.slick-arrow--right {right: 5%; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);}

.slick-slide > div > img {z-index: -1;}
.slick-slide.slick-current > div > img  {z-index: 1;}

.header-image.image-container .slick-slide > div {height: 700px;}
.row__image .image-container .slick-slide > div {height: 600px;}

.main-header-image { margin-top:30px; max-width: 100%; }

/*----------------------*/
/*---- content rows ----*/ 
/*----------------------*/
main .container-fluid > .row {height: 600px; margin: 0;}

.row article {padding: 40px 60px; display: table; height: 100%;}

.row article iframe {max-width: 650px;}

.row article > div { position: relative; height: 100%; width: 100%;}
.row:nth-child(even) article > div {float: right;}

.row__title {color: rgba(0, 45, 115, 1); min-height: 75px; width: 75%; padding-bottom: 25px; font-weight: bolder; text-transform: uppercase;}
.row__sub-title {color: #F2A900; text-transform: uppercase; font-weight: bolder;}

.row__copy-body {width: 98%; padding: 25px 35px 10px 0; position: relative; height: 290px;}
.page--pick-up .row__copy-body { height: 460px; }
.page--pick-up .row__copy-body.remove-line > p { height: 100% !important; }

/*.row__copy-body.remove-line {width: 130%;}*/
.row__copy-body:after {content: ""; display: table; clear: both;}
.row__copy-body:not(.remove-line):before {content: ""; border-top: 2px solid #F2A900; position: absolute; top: 0; left: 10%; width: 20%; max-width: 55px; min-width: 30px;}
.row__copy-body p {padding: 0 40px 10px 0; height: 290px; overflow-y: scroll;}
.row__copy-body.remove-line p {height: unset;}
.row__copy-body a {color: #F2A900;}

.row {height: 100%; padding: 0;}
.row__image {height: 600px; overflow: hidden; padding: 0;}
.row__image h3 {z-index: 1; position: relative; font-size: 3rem; color: #fff; font-weight: bolder; padding: 20px 60px;}
.row-image { max-height: 100%; } 

.row__illustration {position: absolute; right: 3%; bottom: 8%; max-height: 225px; min-height: 200px; height: 25%; opacity: .5; z-index: -1;}

.row__link {color: rgba(0, 45, 115, 1); font-size: 3rem; padding-bottom: 25px; font-weight: bolder; position: relative; display: block; text-transform: uppercase; padding: 15px 0 0 0;}

button.btn-primary.order-button {margin: 30px 0 10px 0; background-color: white; border-radius: 0; width: 50%; border: 2px solid #F2A900;}
button.btn-primary.order-button:last-child {margin-top: 5px}
button.order-button a {text-transform: uppercase; color: rgba(0, 45, 115, 1); font-weight: bolder;}

/*--- insta widget ---*/
.lightwidget-widget {width: 95%; border: 0; overflow: hidden;}

/*--- contact modal ---*/
.modal.in .modal-dialog {-webkit-transform: translate(0,75%); -ms-transform: translate(0,75%); transform: translate(0,75%); width: 75%; max-width: 1000px}
.modal-content:before {content: ""; background-image: url(../images/logo/sabor-logo__57.png); background-repeat: no-repeat; background-position: 50%; z-index: 1; width: 65px; height: 65px; position: absolute; top: -25px; left: 15px; background-color: rgba(0, 45, 115, 1); border-radius: 100%;}
.modal-body {padding: 50px 8% 30px 8%;}
.modal-content {border: 35px solid rgba(0, 45, 115, 1); border-radius: 0; text-align: center;}
.modal-content h5 {font-size: 2.5rem; margin-bottom: 10px;}
.modal-content p {font-size: 2rem;}
.modal-content a {color: #f2a900;}
.modal-content button.btn-primary {margin: 30px 0 10px 0; background-color: white; border-radius: 0; width: 50%; border: 2px solid #F2A900;}
.modal-content button.btn-primary:last-child {margin-top: 5px}
.modal-content button a {text-transform: uppercase; color: rgba(0, 45, 115, 1); font-weight: bolder;}
.modal-content button.close {position: absolute; top: 10px; right: 10px;}

/*--- signup page ---*/
#sign-up .container-fluid { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: flex-start; align-items: flex-start; padding-top: 50px; }
#sign-up .container-fluid .row { margin: 0 0 20px; }
#sign-up .container-fluid .row article { padding: 40px 0; }
#sign-up .container-fluid h1.modal-title, 
#sign-up .container-fluid .checkbox-row input[type=checkbox] { margin-right: 5px;}
#sign-up .container-fluid .row span { color: rgba(0, 45, 115, 1); font-weight:bold;}
#sign-up .container-fluid .row:not(:last-child) div,
#sign-up .container-fluid .row h1 { font-weight:bold; }
#sign-up .container-fluid .row h2 { text-align:left; margin-top: 0px;  color: rgba(0, 45, 115, 1); }
#sign-up .container-fluid .row h2 { font-size: 21px; font-weight:bold; }
#sign-up .container-fluid .row div input[type=text] { width:100%; margin:0; border: 1px solid rgba(0, 45, 115, 1); padding: 3px;}
#sign-up .container-fluid .row div label { display:block; font-size:16px; padding: 5px 0; font-family: "cronos-pro", sans-serif;}
#sign-up .container-fluid .row div.privacy-check label { font-size:14px; font-family: "cronos-pro", sans-serif;}
#sign-up .container-fluid .row div.privacy-check span { font-size:14px;}
#sign-up .container-fluid .row div.privacy-check span a { text-decoration:underline;}
#sign-up .container-fluid button.btn-primary {margin: 30px 0 10px 0; background-color: white; border-radius: 0; width: 50%; border: 2px solid #F2A900;}
#sign-up .container-fluid button.btn-primary:last-child {margin-top: 5px}
#sign-up .container-fluid .form-thank-you { display:none;}
#sign-up .container-fluid #privacyCheck { margin-right: 5px;}
#sign-up .container-fluid .about-scroll-content { height: auto; }
/*new version mods*/
#sign-up { margin: 0; }
#sign-up .container-fluid { height: auto; }
#sign-up .sign-up-form { height: 100%; width: 100%; }
#sign-up .sign-up-form iframe { height: 100%; width: 100%; min-width: 100%; }

@media (max-width: 991px) {
    #sign-up .container-fluid .row article { padding: 25px 0; }
}

/*--- scrollbar ---*/
.row article ::-webkit-scrollbar {width: 8px;}
.row article ::-webkit-scrollbar-thumb {background-color: white; border: 1px solid lightgray;}

/*--- careers form ---*/
.careerForm input, textarea { display:block; margin: 10px auto; width: 50%; border: 3px solid #f2a900; padding: 5px 0 5px 10px; text-align: left;}
.careerForm textarea {height:150px; resize:none;}
.careerForm button { padding: 10px 30px; text-transform:uppercase; background-color: rgba(0, 45, 115, 1); border: 3px solid #f2a900; color:white; }
.careerForm button:hover { color:#F2A900; }

.careerForm a .apply-button { margin: 30px auto 10px; background-color: rgba(0, 45, 115, 1); border: 3px solid #f2a900; color:white; padding: 10px; text-transform:uppercase; width: 180px; }

.careerThankYou { display:none; }

@media(max-width: 1199px) {

    /*-----------------------*/
    /*---- header banner ----*/ 
    /*-----------------------*/
    .header-image.image-container .slick-slide > div,
    .main__header-wrapper {height: 600px}
    .main__header-wrapper .header-slider div img,
    .main__header-wrapper > img {min-width: 992px; max-width: 1199px;}
    .main__header-text h1 {font-size: 3.5rem;}

    /*----------------------*/
    /*---- content rows ----*/ 
    /*----------------------*/
    .slick-slide > div,
    .row__image,
    main .container-fluid > .row {height: 500px;}

    .row:nth-child(even) article > div {float: none;}

    .slick-arrow {top: 40%;}

    article .row__title {width: 100%; padding-bottom: 15px; min-height: 60px; margin: 5px 0;}
    article .row__copy-body {padding: 25px 0 10px 0;}

    .page--pick-up .row__copy-body.remove-line,
    .row__copy-body.remove-line {width: 120%;}
    .page--pick-up .row__copy-body.remove-line > p,
    .row__copy-body.remove-line p {height: 290px;}

}

@media(max-width: 991px) {

    /*-----------------------*/
    /*---- header banner ----*/ 
    /*-----------------------*/
    .header-image.image-container .slick-slide > div,
    .main__header-wrapper {height: 450px;}
    .main__header-wrapper .header-slider div img,
    .main__header-wrapper > img {min-width: 767px; max-width: 992px;}
    .main__header-wrapper .image-container img {width: 130%; min-height: unset;}

    .main-header-image { margin-top:0; }

    /*----------------------*/
    /*---- content rows ----*/  
    /*----------------------*/
    main .container-fluid > .row {min-height: 400px;}
    main .container-fluid > .row article {padding: 25px 0 25px 45px;}

    article .row__title {min-height: 50px;}
    article .row__illustration {right: 4%; bottom: 3%;}

    .page--pick-up .row__copy-body.remove-line,
    .row__copy-body.remove-line {width: 98%;}
}

@media(max-width: 767px) {

    .container-fluid {padding: 0}
    main {margin: 52px 0 0 0;}

    /*-----------------------*/
    /*---- header banner ----*/ 
    /*-----------------------*/
    .header-image.image-container .slick-slide > div,
    .main__header-wrapper {height: 300px;}

    .main__header-wrapper .image-container img {width: 125%; min-height: unset;}
    .main-header-image { margin-top:0; }

    .image-container img {min-height: unset; top: 0; transform: translate(-50%, 0%); min-width: unset;}
    
    .header-slider-arrows .slick-arrow {height: 25px; width: 10px;}
    .header-slider-arrows .header-slider-arrows__left {left: 1%;}
    .header-slider-arrows .header-slider-arrows__right {right: 1%;}

    .main__header-text {padding: 50px 0 0 0;}

    /*----------------------*/
    /*---- content rows ----*/
    /*----------------------*/
    main .container-fluid > .row {height: auto;}
    main .container-fluid > .row:nth-child(even) article > div {float: none; min-height: 250px;}

    .slick-slide div,
    .row__image,
    main .container-fluid > .row,
    .row article {min-height: 250px;}

    main .container-fluid > .row article {padding: 25px 0 25px 25px;}
    .row article div {max-width: 100%;}

    .row__image .image-container .slick-slide > div,
    .row .row__image {height: 340px;}

    .page--pick-up .row__copy-body.remove-line,
    .page--pick-up .row__copy-body.remove-line > p,
    .row__copy-body,
    .row__copy-body p {height: auto; padding: 0 10px 10px 0;}

    article .row__title {width: 80%;}
    article .row__copy-body {width: 90%;}
    article .row__link {font-size: 2.5rem;}
    article .row__illustration {opacity: .6; z-index: -1; max-height: 140px; height: 55%;}

    .modal.in .modal-dialog {width: 95%; -webkit-transform: translate(0,50%); -ms-transform: translate(0,50%); transform: translate(0,50%);}
    .modal-body {padding: 50px 5% 20px 5%;}
    .modal-content {border: 15px solid rgba(0, 45, 115, 1);}
    .modal-content h5 {font-size: 2rem;}
    .modal-content p {font-size: 1.6rem;}
    .modal-content button.btn-primary {width: 75%;}
}

@media(max-width: 600px) {

    /*-----------------------*/
    /*---- header banner ----*/ 
    /*-----------------------*/
    .header-image.image-container .slick-slide > div,
    .main__header-wrapper {height: 270px;}
    .main__header-wrapper.home { height: calc(100vh - 32px); }
    .main__header-wrapper .image-container { position: relative; }
    .main__header-wrapper .image-container img {width: 140%; min-height: unset;}
    .main__header-wrapper .image-container video { position: absolute; width: auto; height: 100%; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }
}

@media(max-width: 400px) {

    /*-----------------------*/
    /*---- header banner ----*/ 
    /*-----------------------*/
    .main__header-wrapper {height: 200px}
    .main__header-wrapper .header-slider div img,
    .main__header-wrapper > img {min-width: 400px; max-width: 310px;}

    .main__header-text {padding: 15px 20px 0 20px;}

    .main__header-text h1 {font-size: 2.5rem;}
    .main__header-text h2 {font-size: 1.7rem;}

    .image-container img {width: 130%;}
    .main-header-image { margin-top:0; }


    .row__image .image-container .slick-slide > div,
    .row .row__image {height: 275px;}
}

/*********************************************************************************************************************/
/*---------------------------------------------------- HEADER -------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------*/   
.header {background-color: rgba(0, 45, 115, 1); height: 114px; position: fixed; width: 100vw; padding-left: 0; padding-right: 0; z-index: 3; top: 0;}

/*------------------------------------*/
/*---------- header height -----------*/
/*------------------------------------*/
.header,
.header .row {height: 80px;}

/*------------------------------------*/
/*--------------- logo ---------------*/
/*------------------------------------*/
.header__logo-container {padding: 10px; display: table;}
.header__logo-container > img { width: 40px; position: absolute; top: 25%; left: -40px; z-index: 2; }
.header__logo-container a {display: table-cell; vertical-align: middle; text-align: left;}
.header__logo-container a img {padding: 5px; width: 100px; background-color: rgba(0, 45, 115, 1); border-radius: 100%; position: absolute; top: 30px; left: 15px;}

/*------------------------------------*/
/*--------- main nav content ---------*/
/*------------------------------------*/

/*--- nav ---*/
.header nav  {padding: 0 0 0 15px; display: table; height: 100%;}
.header nav ul {width: 100%; margin: 0; text-align: left; display: table-cell; vertical-align: middle;}
.header nav ul li {display: inline-block; padding: 0 3% 0 0; text-align: left; cursor:pointer;}
.header nav ul li:nth-child(2) {padding: 0 3% 0 120px;}
.header nav ul li.header__logo-container {padding: 0 3% 0 0;}
.header nav ul li a {display: block; width: 100%;}
.header nav ul li a.en-casa { display: -webkit-flex; display: flex; -webkit-align-items: flex-end; align-items: flex-end; }
.header nav ul li a.en-casa img { width: 130px; margin: 0 0 8px 10px; }
.header nav ul li a h4 {color: white; text-transform: uppercase;}
.header nav ul li a h4.active {color: #F2A900;}

.header #email-signup-btn { display: block; width: 115px; padding: 5px; border: 3px solid #f2a900; background-color: rgba(0, 45, 115, 1); color: #fff; font-size: 13px; text-align: center; }
.header nav #email-signup-btn { display: none; width: 75%; margin-bottom: 15px; }

.header .padding-left-none {padding-left: 0;}

/*--- social ---*/
.header__social-links { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; margin-top: 20px; }
.header__social-links { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; margin-top: 20px; }
.header__social-links .social-links { display: -webkit-flex; display: flex; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-align-items: center; align-items: center; width: calc(100% - 125px); margin: 0; }
.header__social-links .social-links li:nth-of-type(2) { margin: 0 4%; }

@media(max-width: 1199px) {

    .header .container {max-width: 100%;}

    .header__logo-container > img { width: 30px; top: 10%; left: 5px; }

    .header__top-bar {padding-top: 8px;}
    .header__contact-links {padding: 15px 10px 5px 0; width: 80%;}

    .header #email-signup-btn { width: 95px; font-size: 11px; }

    .header .col-xs-2 { width: 15%; }
    .header__social-links .social-links { width: calc(100% - 105px); }
    .header__social-links .social-links img { width: 95%; }

    .header nav ul {padding: 0;}
    .header nav ul li {padding: 0 3% 0 0;}
    .header nav ul li a h4 { font-size: 1.4rem; }
    .header nav ul li a.en-casa img { width: 108px; }
}

@media(max-width: 991px) {
    .header__content {padding-left: 0;}

    .header__logo-container {padding: 0 0 0 6px;}
    .header__logo-container a {text-align: center;}
    .header__logo-container a img {width: 80px;}

    .header__contact-links {width: 100%;}

    .header nav ul li {padding: 0 1%;}
    .header nav ul li:nth-child(2) {padding: 0 3% 0 90px;}
    .header nav ul li a h4 { font-size: 1.3rem;}
    .header nav ul li a.en-casa img { width: 70px; margin: 0 0 10px 5px; }

    .header__social-links .social-links { width: calc(100% - 80px); }
    .header__social-links .social-links li:not(.contact-links__sign-up) {padding: 0 0 0 3%;}
}

@media(max-width: 767px) {

    /*------------------------------------*/
    /*---------- header height -----------*/
    /*------------------------------------*/
    .header__content,
    .header__content > .row,
    .header__logo-container,
    .header {height: 52px;}

    .header .container > .row {margin: 0;}   

    .header__logo-container > img { width: 22px; border-top-left-radius: 10%; left: -12px; }
    .header__logo-container a {text-align: left;}
    .header__logo-container a img {position: absolute; width: 80px; z-index: 1; max-width: unset; left: 5px; top: 7px; padding: 5px; background-color: rgba(0, 45, 115, 1); border-radius: 100%}

    .header__content {position: initial;}

    .header__top-bar {padding: 0 10px 0 0; position: initial;}
    .header__top-bar:before {content: ""; display: table; clear: both;}

    nav ul li {opacity: 0; transition: .5s;}
    nav.active ul li {opacity: 1;}

    .header__contact-links {padding: 5px 10px 5px 0; position: initial; position: absolute; left: 115px; width: auto;}
    .header__contact-links:before {content: ""; display: table; clear: both; }  
    .header__contact-links li {float: left; position: relative;}
    .header__contact-links li:nth-child(2) {clear: left; padding: 0 15px 0 0; border: none;}
    .header__contact-links li:nth-child(2):after {content: ""; border-right: 1px solid white; position: absolute; right: 0; top: 3px; height: 15px;}
    .header__contact-links li:first-child {border-right: none; padding: 0;}

    .header nav #email-signup-btn { display: block; }

    .header__social-links:before {content: ""; display: table; clear: both;}  
    .header__social-links ul, 
    .header__contact-links li a span { display: none !important; }

    .burger-menu-wrapper { width: 80px; float: right; position: relative; text-align: left; }
    .burger-menu-wrapper img { display: inline-block; position: fixed; top: 15px; right: 180px; width: 22px; margin: 0;  }
    
    .mob-menu-btn { display: inline-block; vertical-align: middle; position: relative; width: 30px; height: 30px; margin: 11px 0 0 50px; cursor: pointer; }

    .mob-menu-btn span.mob-menu-btn__top {top: 3px;}
    .mob-menu-btn span.mob-menu-btn__middle {top: 12px;}
    .mob-menu-btn span.mob-menu-btn__bottom {top: 21px;}

    .mob-menu-btn span {position: absolute; opacity: 1; background-color: white; height: 4px; width: 100%; 
        -webkit-transition: -webkit-transform 0.25s ease, top 0.25s ease 0.15s, opacity 0.25s;
        -moz-transition: -moz-transform 0.25s ease, top 0.25s ease 0.15s, opacity 0.25s;
        transition: transform 0.25s ease, top 0.25s ease 0.15s, opacity 0.25s;
    }

    .mob-menu-btn.active span {
	    -webkit-transition: -webkit-transform 0.25s ease 0.15s, top 0.25s ease, opacity 0.25s;
        -moz-transition: -moz-transform 0.25s ease 0.15s, top 0.25s ease, opacity 0.25s;
        transition: transform 0.25s ease 0.15s, top 0.25s ease, opacity 0.25s;
    }

    .mob-menu-btn.active span.mob-menu-btn__top {top: 12px; transform: rotate(-45deg)}
    .mob-menu-btn.active span.mob-menu-btn__middle {opacity: 0;}
    .mob-menu-btn.active span.mob-menu-btn__bottom {top: 12px; transform: rotate(45deg)}

    .header nav {position: relative; background-color: rgba(0, 45, 115, 1); z-index: 3; padding: 10px 20px 15px 15px; width: 200px; position: absolute; right: 0; transform: translate(220px, 0); transition: .2s; top: 48px; height: auto; display: inline-block;}
    .header nav.active {transform: translate(0, 0);}
    .header nav ul {padding: 0 0 15px 0;}
    .header nav ul li {display: block; padding: 2px 0;}
    .header nav ul li:nth-child(2) {padding-left: 0}

    .header #email-signup-btn { position: fixed; top: 10px; right: 65px; width: 100px; }

    .header__social-links-mob {padding: 0 0 5px 0;}
    .header__social-links-mob li {float:left;}
    .header__social-links-mob li:nth-child(1),
    .header__social-links-mob li:nth-child(2) {width: 30px; padding: 0 5px 15px 0;}
    .header__social-links-mob li.contact-links__sign-up {width: 100%; padding: 0 0 5px; text-align: left;}

    .header__social-links-mob .contact-links__email {width: 100%; padding: 15px 0 0 0;}
    .header__social-links-mob .contact-links__email a {color: white;}
}

@media(max-width: 450px) {
    
    .header__logo-container a img {width: 75px; top: 7px; left: 10px;}
    .header__contact-links {left: 70px; padding-top: 7px;}

    .header__contact-links li:last-child,
    .header__contact-links li:nth-child(2):after {display: none;}

    .header__social-links-mob li.contact-links__email {display: inline-block;}
}

/*********************************************************************************************************************/
/*----------------------------------------------------- FOOTER ------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------*/   
footer {background-color: rgba(0, 45, 115, 1); padding: 30px 0 0 0; border-top: 20px solid #F2A900; }

footer h1,
footer h2,
footer h3,
footer p {color: white;}

footer h1 {font-size: 24px;}

/*--------------------*/
/*--- cookie popup ---*/
/*--------------------*/
footer div#cookie_popup { min-width: 100%; padding: 10px 20px; background: #F2A900; display: table; position: fixed; bottom: -200px; z-index: 9999; -webkit-transition-duration: .3s; -moz-transition-duration: .3s; transition-duration: .3s; }
    footer div#cookie_popup p,
    footer div#cookie_popup a { font-size: 14px; color: #fff; line-height: 18px; }
    footer div#cookie_popup p,
    footer div#cookie_popup div { display: table-cell; vertical-align: middle; }
    footer div#cookie_popup p a { color: #fff; border-bottom: 1px solid #fff; }
    footer div#cookie_popup p a:hover { color: #fff !important; border-color: #ddd; }
    footer div#cookie_popup a.button { padding: 12px 50px; border: 1px solid #ccc; float: right; -webkit-transition-duration: .3s; -moz-transition-duration: .3s; transition-duration: .3s; }
    footer div#cookie_popup a.button:hover { color: #F2A900; background: #fff; }

/*-------------------*/
/*--- footer left ---*/
/*-------------------*/
.footer-left {position: relative;}
.footer-left:after {content: ""; display: table; clear: both;}
.footer-left > img {position: absolute; left: 12px; width: 40%; top: 5%; transform: rotate(20deg); filter: contrast(4);}

.footer-left__newsletter {width: 100%;}
.footer-left__newsletter div.row h2 {padding: 0 15px;}
.footer-left__newsletter div.row div:nth-of-type(2) {padding: 0;}
.footer-left__newsletter div.row img {width: 15%; margin: 20px 0 -35px 0;}

.footer-left__contact {z-index: 1; float: left; position: relative; width: 50%; padding-top: 40px;}   
.footer-left__contact h2, 
.footer-left__contact p {color: white;}
.footer-left__contact h2 {margin: 0 0 10px 0; }

.footer-left__contact .legado-logo { width: 24rem; margin-top: 30px; }

.footer-left__opening,
.footer-left__3d {float: left; width: 50%; padding-left: 0px; padding-top: 40px;}
.footer-left__opening h1,
.footer-left__opening h2,
.footer-left__opening h3 {color: white;}   
.footer-left__opening h2 {font-weight:bolder; margin: 20px 0 0 0;}
.footer-left__opening h3 {margin: 0;}

.footer-left__3d  {padding-top:10px;}
.footer-left__3d img {width:80%;}

.footer-left__partners img { width: 100%; max-width: 20rem; }
    
.footer-left .footer__social-links li:not(:first-child) {padding: 0 0 0 10px;}

/*--------------------*/
/*--- footer right ---*/
/*--------------------*/
.footer-right {padding: 0 20px 0 80px;}
.footer-right img {width: 50%; filter: contrast(4);}
.footer-right a:hover {opacity: .7;}

.footer-right__reservations {padding-bottom: 33px;}

.footer-right__bookings a,
.footer-right__join a,
.footer-right__pr a {color: #f2a900; }

/*-------------------*/
/*--- footer foot ---*/
/*-------------------*/
.footer__foot {padding: 10px;}
.footer__foot:after {content: ""; display: table; clear: both;}

.footer__foot .footer__opacity {opacity: .3;}
.footer__foot .footer__registered,
.footer__foot .footer__mission-link {padding: 10px 0 0 0; font-size: 1.3rem}

.footer__foot .footer__registered {float: left;}
.footer__foot .footer__mission-link {float: right;}
.footer__foot .footer__mission-link a {color: white;}

/*-------------------------*/
/*--- footer form items ---*/
/*-------------------------*/
.footer__form-item {border: 3px solid #f2a900; padding: 5px; background-color: rgba(0, 45, 115, 1); text-align: center;}
.footer__form-item a {color: #fff; cursor: pointer; text-transform: uppercase;}

.footer__form-item--input {border: 3px solid #f2a900; padding: 5px 0 5px 10px; text-align: left; background-color: rgba(0, 45, 115, 1); color: #fff; transform: translateY(1px); width: 75%;}
.footer__form-item--input::-webkit-input-placeholder {color: #fff;}
.footer__form-item--input::-ms-input-placeholder {color: #fff;}
.footer__form-item--input:-moz-placeholder {color: #fff;}
.footer__form-item--input::-moz-placeholder {color: #fff;}

.footer__form-item--newsletter-submit {border: 3px solid #f2a900; text-transform: uppercase; width: 22%; display: inline-block; text-align: center;  transform: translateY(.5px); color: #fff;}

.footer__form-item--reservations {width: 40%; float: left; margin-right: 20px; text-transform:uppercase; color:white;}

/*--- email sign up ---*/
.email-div {padding-left: 0;}
.email-div a {text-transform:uppercase; color:white;}
.email-div #email-signup-btn {cursor: pointer;}
#email_signup {height: 50px; position: absolute; bottom: 0; opacity: 1; z-index: 2;}

@media(max-width: 1199px) {
    footer .container {max-width: 100%;}

    .footer__links li a {font-size: 1.8rem}
}

@media(max-width: 991px) {
    .footer__links:after {width: 20%; top: -10px; left: 15%;}

    .footer__links li {display: block; text-align: left;}
    .footer__links li:nth-child(2),
    .footer__links li:nth-child(3) {text-align: left; padding: 0 0 5px 0;}

    .footer__links li a {padding: 0; font-size: 2rem;}
    .footer__links li:nth-child(2) a,
    .footer__links li:nth-child(3) a {padding: 0;}

    .footer-left__opening h3:nth-child(odd) {margin: 20px 0 0 0;}
    .footer-left__opening {padding-left: 50px;}

    .footer-left__3d {padding-left: 50px;}

}

@media(max-width: 767px) {

    footer.container-fluid {padding: 30px 20px;}

    footer div#cookie_popup { padding: 0 10px 10px; text-align: center; }
        footer div#cookie_popup p,
        footer div#cookie_popup a { font-size: 12px; line-height: 16px; text-align: center; }
        footer div#cookie_popup p,
        footer div#cookie_popup div { margin: 10px 0; display: inline-block; float: none; }
        footer div#cookie_popup div { margin: 0 10px; }

    footer > .container {padding: 0;}
    footer > .container > .row {margin: 0;}

    .footer__links:after {display: block; width: 75%; top: 50%; left: 0; right: 0; margin: 0 auto;}

    .footer-left {padding: 25px 0 0 0;}
    .footer-left > img {top: 50px; right: -15px; left: unset; width: 50%; max-width: 300px; transform: rotate(90deg);}

    .footer-left__newsletter {position: absolute; bottom: 0; padding-bottom: 30px; z-index: 2;}

    .footer-left__opening {padding: 0 10px 20px 20px;}
    .footer-left__contact {padding: 0 10px 120px 0; overflow: visible}

    .footer-left__contact p {padding: 0 0 5px 0;}
    .footer-left__contact a {color: #f2a900; text-transform: uppercase; font-size: 2.2rem; padding-bottom: 15px} 

    .footer-left__contact > br,
    .footer-left__opening br {display: none;}

    .footer-left__3d img {width:80%;}

    .footer__links li:nth-child(1), 
    .footer__links li:nth-child(2), 
    .footer__links li:nth-child(3) {text-align: center; padding: 5px 0;}

    .footer__links li:nth-child(1) p, 
    .footer__links li:nth-child(2) a, 
    .footer__links li:nth-child(3) a {padding: 0 20px;}
    
    .footer-right {padding: 0;}
    .footer-right img {margin-top: 15px; max-width: 300px; min-width: 240px;}

    .footer-right__reservations {text-align: center; padding-bottom: 15px;}
    .footer__form-item--reservations {margin: 0 auto; float: none; min-width: 200px;}

    .footer__foot {padding: 0 0 10px 0;}

        .footer-left__newsletter .legado-logo { width: 24rem !important; }
    .footer-left__newsletter { padding-bottom: 5px; }

    .footer__legal { margin-top: 40px !important; }
    
    #email-signup-btn {width: 100%;}

}

@media(max-width: 400px) {

    .footer-left__opening {padding: 0 10px 10px 20px;}
    .footer-left__3d {padding: 0 10px 130px 20px;}
    .footer-left__3d img {width: 100%;}
    .footer-left__contact {padding: 0 10px 130px 0; overflow: visible}

    .footer__form-item--input,
    .footer__form-item--newsletter-submit {width: 100%; margin: 5px 0;}
}