/* @layer devices;

@import 'styleDevices.css' layer(devices) screen and (max-width: 768px); */

:root {
    --black: #161615;
    --lightBlack: #444;
    --grey: #707070;
    --red: #D5322E;
    --red2: #CC0000;
    --altRed: #E5062F;
    --darkRed: #950809;
    --pink: #EF8BBF;
    --brightPink:#EB1C89;
    --lightBlue: #B0D4F6;    ;
    --blue: #2863AF;
    --darkBlue: #033A82;
    --grey1: #8C8C8C;
    --grey2: #BDBDBD;
    --grey3: #EEEEEE;



    --shadow: #91919129 0px 5px 18px;
    --shadow2: #91919129 0px 3px 6px;
    --shadow3: #00000029 0 0 6px;

    --widthCallToAction: 120%;

    --greyHidderDiv: #cecdd1;
}

#modalHotspotDiv{
    box-sizing: border-box;
    z-index: 4010;
}
/* html{
    height: 100vh !important;

    -webkit-tap-highlight-color: transparent;
} */

.centerElement{
    /*position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);*/
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    height: 100vh;
}
body.index .centerElement{
    height: calc(100vh - 175px);
}

.textWithIcon{
    display: inline-flex;
    align-items: center;
}
.textWithIcon>img{
    margin-right: 15px;
}

.blurred{
    filter: blur(10px);
    pointer-events: none;
}


.float25{
    float: left;
    width: 25%;
}
.float50{
    float: left;
    width: 50%;
}


::-webkit-scrollbar{
    width: 6px;
}
::-webkit-scrollbar-button{

}
::-webkit-scrollbar-thumb{
    background: var(--red2);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--darkRed);
}
::-webkit-scrollbar-track{

}
::-webkit-scrollbar-track-piece{
    background: white;
}
::-webkit-scrollbar-corner{

}
::-webkit-resize{

}


::-moz-selection { /* Code for Firefox */
    color: white;
    background: var(--grey);
}

::selection {
    color: white;
    background: var(--grey);
}



body.index{
    overflow: hidden !important;
}

.buttonGeneral{
    margin: auto;
    background: var(--red2);
    border-radius: 25px;
    color: white;
    font-size: 20px;
    font-family: 'ProximaNovaAExCn-Regular', 'Proxima Nova Alt';
    height: 50px;
    text-align: center;
    line-height: 50px;
    padding: 0 20px;
    min-width: 78px;
    cursor: pointer;
    transition: background-color .25s ease-in-out;

    user-select: none;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
}
.buttonGeneral:hover{
    background: var(--darkRed);
}
body.splash .buttonGeneral{
    margin: unset;
}

/*START JAVASCRIPT CLASSES*/
.hidden{
    display: none !important;
}
.pointerEventsNone{
    pointer-events: none;
}


#menuIcon{
    transition: opacity 1s cubic-bezier(0.35, 0.17, 0.33, 0.93);
}

#quickLinks.opened{
    /*background: var(--red);*/

    transition: background-color .25s ease-in-out;
}
/*#txt_quickLinks.opened{
    color: white;
}*/
/*#quickLinksImg.opened{
    filter: invert(1);
}*/

/*END JAVASCRIPT CLASSES*/

.part3parent{
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-around;
    flex-direction: row;
    align-items: flex-start;
}
.part3{
    flex: 1 1 0px;
}
.centeredContent{
    display: flex;
    height: inherit;
    position: relative;
    text-align: center;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}

html.index{
    cursor: pointer;
}


body.index{
    margin: 0;
}
body.index img{
    margin: auto;
    display: block;
}

body.index #logo{
    cursor: pointer;
    margin: 25px;
    width: 130px;
}
@keyframes callToAction {
    0% {
        width: 100%;
        left: 0;
        opacity: 100%;
    }
    80% {
        opacity: 0%;
    }
    100% {
        width: var(--widthCallToAction);
        left: calc((100% - var(--widthCallToAction))/2);
        opacity: 0%;
    }
}
/*@-webkit-keyframes callToAction {
    0% {
        width: 100%;
        left: 0;
        opacity: 100%;
    }
    80% {
        opacity: 0%;
    }
    100% {
        width: var(--widthCallToAction);
        left: calc((100% - var(--widthCallToAction))/2);
        opacity: 0%;
    }
}*/

.videoDiv{
    padding: 57% 0 0 0;
    position: relative;
    width: -webkit-fill-available;
    width: 100%;
    /*min-width: 50vw;*/
    min-width: calc(65vw - 100px);
}

#divVimeoVideo{
    margin-top: 5%;
    position: relative;
    width: -webkit-fill-available;
    width: 100%;
    /*height: 100%;*/
    aspect-ratio: 16/9;
}
.iframeVimeo{
    position: unset;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*max-height: 50vh;*/
    background-color: black;

    max-height: calc(100vh - 100px);
}

#modalHotspotDivContent .adventurePhotos{
    width: 100%;
    display: contents;
}
#modalHotspotDivContent .adventurePhotos img{
    width: 100%;
    margin-top: 5%;
    display: block;
}




/* ======  ALPINE SPECIFICS =======  */

/* popup static with gradient */
.overlay {
    position:fixed; left:0; top: 0; width:100%; height:100%; background: none;
    height: 100%;
}
.centering {width:100%; height:100%; display:flex; align-items: center;
    height: calc(100% - 80px);
}
.gradient-box {
    display: flex;
    align-items: center;
    /*width: 65vw;*/
    width: calc(65vw - 100px);
    margin: auto;
    /* margin-top:10.5em; */
    max-width: fit-content;
    position: relative;
    padding: 2vh 5vw;
    /*box-sizing: border-box;*/
    box-sizing: content-box;
    color: #FFF;
    background: rgb(0, 0, 0,0.6);
    background-clip: padding-box;
    /* !importanté */
    border: solid 1px transparent;
    /* !importanté */
    border-radius: 1em;
    min-width: 400px;
    /*min-width: fit-content;*/
    padding: 30px 50px;
    }
.gradient-box:before {


    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -2px;
    /* !importanté */
    border-radius: inherit;
    /* !importanté */
    background: linear-gradient(120deg, rgb(239, 139, 191,0.6), rgb(40, 98, 175,0.6) 80%);
}

#modalHotspotInnerDivContent {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;
    max-height: 90vh;
    justify-content: space-between;
    align-items: center;
}

#modalHotspotInnerDivContent h1 {
    font-family: "Third Rail";
    font-size: 3.5em;
    letter-spacing: 0.1em;
    margin-block-start: 0.17em!important;
    margin-block-end: 0.17em!important;
}

#modalHotspotInnerDivContent h2 {
    font-family: futura;
    font-size: 2em;
    letter-spacing: 0.1em;
}

#modalHotspotInnerDivContent p {
    font-family: 'Noto Sans';
    font-size: 1em;
    letter-spacing: 0.1em;
    display: block;
}
#modalHotspotInnerDivContent p#caption{
    font-family: 'Noto Sans';
}

#modalHotspotInnerDivContent #banner p {
    padding-left: 10%;
    padding-right: 10%;
}
#modalHotspotInnerDivContent #banner{
    padding-bottom: 20px;
}
#modalHotspotInnerDivContent #banner.welcomeBanner h1{
    font-size: 3em;
}


#modalHotspotDivContent hr { width: 50%; opacity: 0.5}

#closeIcon img {
    position: absolute;
    top: 15px;
    right: 15px;
    transform: scale(0.9);
}

#closeIcon img:hover {
    position: absolute;
    top: 15px;
    right: 15px;
    transform: scale(1.2);
}

#closeIcon:hover {cursor: pointer;}





/* SLIDESHOW GALLERY */

.slideshowGallery,
.slideshowGallery * {
    box-sizing: border-box;
}
.slideshowGallery{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-content: center;
    align-items: center;

    overflow: hidden;

    max-width: 100%;

}

/* Position the image container (needed to position the left and right arrows) */
/*.slideshowGallery.container {
    position: relative;
}*/

/* Hide the images by default */
.slideshowGallery .mySlides {
    max-height: 50vh;
    width: 100%;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;

    transform: translateX(0%);
    transition: all 1s cubic-bezier(0, 0.88, 0.24, 0.99);

    overflow: hidden;

}
.slideshowGallery .mySlides img{
    max-height: 50vh;
    width: 100%;
    /* width: 100% !important; */
    height: fit-content;
    max-width: fit-content;
}
.slideshowGallery .mySlides video{
    height: 100% !important;
}


/* Add a pointer when hovering over the thumbnail images */
.slideshowGallery .cursor {
    cursor: pointer;
}
.sliderGlobal{
    position: relative;

    max-width: 100%;
}

/* Next & previous buttons */
.slideshowGallery .prev,
.slideshowGallery .next {
    cursor: pointer;
    position: absolute;
    /*top: 40%;*/
    top: calc(50% - 15px);
    width: auto;
    /*padding: 16px;*/
    padding: 0 16px;
    /*margin-top: -50px;*/
    color: white;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;

    background-color: #00000055;
    line-height: 2em;
}

/* Position the "next button" to the right */
.slideshowGallery .next {
    right: 0;
    border-radius: 3px 0 0 3px;
}
.slideshowGallery .prev {
    left: 0;
}

/* On hover, add a black background color with a little bit see-through */
/*.slideshowGallery .prev:hover,
.slideshowGallery .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}*/

/* Number text (1/3 etc) */
.slideshowGallery .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* Container for image text */
.caption-container {
    text-align: left;
    padding: 2vh 0px;
    color: white;
    display: flex;

    align-content: center;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;

    width: 100%;
}

.slideshowGallery .row:after {
    content: "";
    display: table;
    clear: both;
}

/* Six columns side by side */
.slideshowGallery .column {
    float: left;
    flex: 1;
}

/* Add a transparency effect for thumnbail images */
.slideshowGallery .demo {
    opacity: 0.6;
    width: 150% !important;
}
.slideshowGallery .column.verticalImage .demo{
    width: 100% !important;
}
.slideshowGallery .row.limitWidth{
    width: 50%;
}

.slideshowGallery .active,
.slideshowGallery .demo:hover {
    opacity: 1;
}

.caption-container .captionDiv{
    width: 20%;
    float: left;
    padding-right: 30px;
    font-size: 20px;
}
.caption-container.caption-containerLeft{
    padding-bottom: 0;
    border-top: 1px solid var(--lightBlue);
}
.caption-container.caption-containerLeft .captionDiv{
    padding-right: unset;
    padding-left: 30px;
    width: 30%;
}
.caption-container .descriptionDiv{
    width: 80%;
    float: left;
    border-left: 2px dotted var(--lightBlue);
    padding-left: 30px;
}
.caption-container.caption-containerLeft .descriptionDiv{
    border-left: none;
    padding-left: unset;
    border-right: 2px dotted var(--lightBlue);
    padding-right: 30px;
    width: 70%;
}
.caption-container.justDescription .captionDiv{
    display: none;
}
.caption-container.justDescription .descriptionDiv{
    width: 100%;
    padding-left: 0;
    border-left: 0;
}
.slideshowGallery .row{
    clear: left;

    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;

    width: 100%;
}
.slideshowGallery .row .column:first-child{
    margin-left: 0;
}
.slideshowGallery .row .column:last-child{
    margin-right: 0;
}
.slideshowGallery .row .column{
    margin: 0.5vh 1vw;
    overflow: hidden;
    aspect-ratio: 1.5;
    display: flex;
    justify-content: center;
    align-items: center;

    max-height: 70px;
}
.caption-container p{
    margin: 0.5em 0;
}
.caption-container .descriptionDiv p{
    margin-top: 0;
}
.caption-container .descriptionDiv a{
    color: var(--lightBlue);
    text-decoration: none;
}


.slideshowGallery #slidesFlexDiv{
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;

    transition: max-height 1s cubic-bezier(0.35, 0.17, 0.33, 0.93) 0s;
    /*max-height: 512px;*/
}


/* MODALES CON PRINCIPAL Y SLIDER DEBAJO */
.mainWithSlider{
    text-align: left;
    width: 30vw;
    min-width: 400px;
}

.mainWithSlider .main{
    padding-bottom: 2vh;
}
.mainWithSlider .main p{
    margin-bottom: 0;
}

.mainWithSlider .slider{
    border-top: 2px dotted var(--lightBlue);
    padding-top: 2vh;
}
.mainWithSlider .slider>img{
    float: left;
    margin-right: 2vw;
    margin-bottom: 2vh;
}
.mainWithSlider .slider h3,
.mainWithSlider .slider h4{
    clear: left;
}
.mainWithSlider .slider h4{
    color: var(--lightBlue);
}

.mainWithSlider .arrowsDiv{
    height: 20px;
}
.mainWithSlider .arrowsDiv a{
    position: absolute;
    font-size: 20px;
    color: var(--lightBlue);
    cursor: pointer;
}
.mainWithSlider .arrowsDiv a.leftArrow{
    left: 3vw;
}
.mainWithSlider .arrowsDiv a.rightArrow{
    right: 3vw;
}





.mainWithSlider .sliderPercent{
    border-top: 2px dotted var(--lightBlue);
    padding-top: 2vh;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
}
.mainWithSlider .sliderPercent>div>p{
    margin-top: 0;
    font-size: 18px;
    font-weight: bold;
}
.mainWithSlider .sliderPercent img{
    margin-left: 2vw;
    margin-bottom: 2vh;
    height: fit-content;
}
.mainWithSlider .sliderPercent .linesPercent{
    position: relative;
}
.mainWithSlider .sliderPercent .linesPercent div{
    height: 3px;
    width: 100%;
}
.mainWithSlider .sliderPercent .linesPercent .line100Percent{
    background-color: var(--lightBlue);
    opacity: 0.2;
}
.mainWithSlider .sliderPercent .linesPercent .lineXPercent{
    background-color: var(--lightBlue);

    position: absolute;
    top: 0%;

    width: 0%;
    transition: width 1s 0.4s cubic-bezier(0.35, 0.17, 0.07, 1.43);
}
.mainWithSlider .sliderPercent .divPercent p{
    margin-bottom: 0;
}
.mainWithSlider .sliderPercent .divPercent p.pPercent{
    margin-top: 0.1em;
    margin-bottom: 1.5em;
    color: var(--lightBlue);
    font-weight: bold;
}


#modalHotspotDiv{
    transform: scaleY(0);
    /*pointer-events: none;*/
    scale:0.7;
}
#closeIcon{
    pointer-events: auto;
    z-index: 10;
}
#modalHotspotDiv.opened{
    animation: appearDiv 0.2s /*cubic-bezier(0.35, 0.17, 0.07, 1.43)*/ cubic-bezier(0, 0.88, 0.24, 0.99) forwards;
}

@keyframes appearDiv {
    0%{
        transform: /*scaleX(0)*/ scaleY(0);
    }
    /*50%{
        transform: scaleX(1) scaleY(0.01);
    }*/
    100%{
        transform: /*scaleX(1)*/ scaleY(1);
    }
}

/* #modalHotspotDivContent{
    transform: translateX(0);
}
#modalHotspotDivContent.opened{
    animation: appearDivTranslation 1s cubic-bezier(0.35, 0.17, 0.07, 1.43) forwards;
}

@keyframes appearDivTranslation {
    0%{
        transform: translateX(-50%);
    }
    50%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(0);
    }
} */












.divider{
    border-top: 2px dotted var(--lightBlue);
    margin-top: 30px;
    margin-bottom: 30px;
}
.sceneIcon{
    margin-bottom: 30px;
}
.mainGeneral{
    text-align: left;
    width: 400px;
}
.mainGeneral>img{
    width: 100%;
}
.mainQuote{
    text-align: left;
    width: 400px;
}
.mainQuote .contentFlex{
    display: flex;
}
.mainQuote .content img{
    float: left;
    margin-right: 2vw;
    margin-bottom: 1.9vh;

    max-width: 180px;
    max-height: 252px;
}
.mainQuote .content p{
    display: flex !important;
    margin-top: 0;
}
.mainQuote .content h3,
.mainQuote .content h4{
    clear: left;
    width: 100%;
}
.mainQuote .content h3{
    margin-bottom: 0.3em;
}
.mainQuote .content h4{
    margin-top: 0.3em;
}
.content h3{
    font-size: 1.2em;
}
.content h4{
    font-size: 1em;
}
.caption-containerLeft h4,
.mainQuote h4{
    color: var(--lightBlue);
}
.caption-containerLeft h3{
    margin-bottom: 0.3em;
}
.caption-containerLeft h4{
    margin-top: 0.3em;
}
#modalHotspotInnerDivContent .headerLeftDiv{
    width: 100%;
}
#modalHotspotInnerDivContent .headerLeftDiv.alt5{
    border-bottom: 1px solid var(--lightBlue);
}
#modalHotspotInnerDivContent .headerLeftDiv p{
    font-family: SegoeUI-Semibold;
    font-size: 2em;
    letter-spacing: 0em;
    text-align: left;

    letter-spacing: 0.1em;
}

.w505{
    width: 505px !important;
}
.w750{
    width: 750px !important;
}
#modalHotspotInnerDivContent .w750{
    text-align: center;
}

/*  PRUEBAS PARA LA ANCHUA DE LAS IMAGENES DEL SLIDER */
.slideshowGallery .mySlides img {
    object-fit: contain;
}


#endOfJourneyDiv{
    position: fixed;
    bottom: 100px;
    right: 50px;
    z-index: 5000;
    cursor: pointer;
}

#shopNowCTA{
    background-color: var(--brightPink);
    border-radius: 4px 4px 4px 0;
    padding: 4px;
    width: fit-content;
    margin: auto;

    cursor: pointer;
}
#shopNowCTA>div{
    background-color: white;
    border-radius: 4px 4px 4px 0;
    padding: 4px;
}
#shopNowCTA>div>div{
    background-color: var(--blue);
    border-radius: 4px 4px 4px 0;
}
#shopNowCTA>div>div>a{
    margin: 0;
    padding: 2px 14px;

    font-family: SegoeUI-Semibold;
    font-size: 1em;
    line-height: 1em;

    text-decoration: none;
    color: white;
}
#endCarImage{
    width: auto;
    max-height: 0;
    max-width: 750px;
    /*height: calc(100vh - 550px);*/
    display: block;
    margin: auto;
    transition: all 1s cubic-bezier(0, 0.88, 0.24, 0.99);
}
.shopNowInfo{
    font-size: 10px !important;
    max-width: 130px;
    margin: auto;
    margin-top: 4px;
    line-height: 1.1em;
    padding: 0;
}

@media only screen and (max-width: 1300px){
    .gradient-box-noWidth{
        width: unset !important;
    }
}



.translateZhelper{
    transform: translateZ(0) !important;
    z-index: 4000 !important;
}
.translateZhsActive{
    z-index: 4005 !important;
}
.hsVisited{
    /* opacity: 0.5 !important; */
    filter: brightness(0.5) !important;
}

.downloadImage{
    position: relative;
}
.downloadImage a{
    color: white;
    font-size: 36px;
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: #00000055;
    padding: 10px;
    border-radius: 3px 0 0 0;
}

button.accessibilityHelper{
    opacity: 0;
    position: fixed;
    top: -50px;
    left: -50px;
}
/* div.accessibilityHelper{
    filter: saturate(1.5) drop-shadow(2px 4px 6px #EB218A);
} */

.mySlides.accessibilityVideoHelper{
    visibility: hidden;
}
.mySlides.accessibilityVideoHelper.active{
    visibility: visible;
}


#accessibilityInfo>div{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}
#accessibilityInfo h3{
    font-size: 14px;
    font-weight: normal;
    font-family: 'SegoeUI-Regular';
}
#accessibilityInfo div h3{
    text-decoration: underline;
}
#accessibilityInfo img{
    margin-right: 10px;
}

.accessibilityBanner h2{
    font-family: 'SegoeProBlack' !important;
}
.accessibilityBanner img{
    max-width: 100%;
}

#disclaimerEnd{
    font-size: 10px !important;
    margin-top: 0;
    transform: translateY(-20px);
}


.fixedElement{
    position: fixed;
}