*{
    font-family: 'Bentley_Light';
}

#sceneDetailsContainer {
    max-height: unset;
}


#pano {
    overflow: hidden;
}

#pano canvas {
    background-color: #C1CDC9 !important;
}

#krpanoSWFObject {
    background-color: #C1CDC9 !important;
}

/* CHANGES LOG V5 Commented */
/* #prev .sceneTitle,
#next .sceneTitle {
    color: #394D45;
}

#prev .sceneTitle{
    text-align: left;
}
#next .sceneTitle{
    text-align: right;
} */

/* CHANGES LOG V5 Commented */
/* #startIcon {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;

    margin-bottom: 40px;

    color: white;
    font-family: 'Bentley_Light';
    font-style: normal;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    letter-spacing: 0.2em;
}

#startIcon>img {
    width: 58px;
    margin-bottom: 20px !important;
} */


html.mobile {
    height: unset;
    overflow: auto;

    --margin-body: 10px;
}

html.mobile body {
    height: calc(100vh - var(--margin-body)*2);
    overflow: auto;
    margin: var(--margin-body);
}

html.mobile #mainFlex {
    height: 100%;
    width: calc(100% - 20px);
}

html.mobile #mainRightColumn {
    height: 100%;
    width: calc(100vw - 15vw - 20px - 24px);
}

html.mobile #mainTopRow {
    margin-bottom: 10px;
    width: calc(100vw - 15vw - 20px - 24px);
    height: calc((100vw - 15vw - 20px - 24px) / 16 * 9);
}

html.mobile .bottomFlex>div>div>div:first-child {
    width: 26px;
    height: 26px;
}

html.mobile .bottomFlex>div>div>div:first-child>img {
    width: 10px;
    height: 10px;
}

html.mobile .bottomFlex>div>div {
    font-size: 7px;
    line-height: 9px;
}

html.mobile .bottomFlex>div>div>div:last-child {
    margin-top: 5px;
}

/* CHANGES LOG V5 */
#bentleyLogo {
    width: 166px;
}

html.mobile #bentleyLogo {
    width: 80px;
}

html.mobile #sceneDetailsContainer.openned {
    margin-top: 5vh;
}

html.mobile #sceneDetailsContainer>#currentSceneDescription {
    margin-top: 3vh;

    font-size: 12px;
    line-height: 15px;
}

html.mobile #krpanoExplain {
    padding: 5vh 5vw;
}

html.mobile #krpanoExplain>div:first-child>*:nth-child(1) {
    margin-top: 2vh;
}

html.mobile #krpanoExplain>div:first-child>*:nth-child(2) {
    margin-top: 2vh;
}

/* CHANGES LOG V5 Commented */
/* html.mobile #startIcon {
    margin-bottom: 1vh;
}

html.mobile #startIcon>img {
    width: 40px;
    margin-bottom: 1vh !important;
} */

@media (pointer:coarse){
    .tooltip:hover .tooltiptext{
        visibility: hidden;
        opacity: 0;
    }

    #settingsBtn:not(.hover).tooltip .tooltip-top {
        visibility: hidden !important;
        opacity: 0 !important;
    }

    #settingsBtn.hover.tooltip .tooltip-top {
        visibility: visible !important;
        opacity: 1 !important;
    }

    #settingsBtn.hover.tooltip.disabled .tooltip-top #tooltipDisabled {
        visibility: visible !important;
        opacity: 1 !important;
    }
    #settingsBtn.hover.tooltip .tooltip-top #tooltipOptions {
        visibility: visible !important;
        opacity: 1 !important;
    }

     /* ===================   MODIF EC 1-7-24 SHOWING LANGUAGE SELECTOR ON IPAD   ================= */

    #languageManager:not(.hover).tooltip .tooltip-top {
        visibility: hidden !important;
        opacity: 0 !important;
    }

    #languageManager.hover.tooltip .tooltip-top {
        visibility: visible !important;
        opacity: 1 !important;
    }

    #languageManager.hover.tooltip.disabled .tooltip-top #tooltipDisabled {
        visibility: visible !important;
        opacity: 1 !important;
    }
    #languageManager.hover.tooltip .tooltip-top #tooltipOptions {
        visibility: visible !important;
        opacity: 1 !important;
    }
}


html:not(.mobile) #rotateDeviceWarning {
    display: none !important;
}

html.mobile #rotateDeviceWarning {
    display: flex;

    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: hsla(0, 0%, 0%, 0.9);
    z-index: 1000;
    top: 0;
    left: 0;
    text-align: center;
    padding: 10vw;
    box-sizing: border-box;
    font-size: 20px;
    line-height: 1.3em;
    user-select: none;
    pointer-events: all;

}

html.mobile #rotateDeviceWarning #txtWarning {
    color: white;
    font-family: 'Bentley_Light';
}

html.mobile #closeAbout>img,
html.mobile #closeControls>img {
    width: 30px;
}

html.mobile #aboutPopup #aboutCredits {
    height: unset;
}

html.mobile #aboutPopup #aboutCredits>img:first-child {
    display: none;
}

html.mobile #aboutPopup #aboutCredits>div:not(.tourVersion) {
    font-size: 16px;
    line-height: 20px;
    margin-top: 10px;
}

html.mobile #aboutPopup #aboutCredits>div.tourVersion {
    font-size: 8px;
}

html.mobile #aboutPopup #aboutCredits>*:nth-child(4) {
    margin: 1vh;
    width: 8px;
}

html.mobile #aboutPopup #aboutCredits>*:last-child {
    margin-top: 1vh;
    width: 70px;
}

html.mobile #aboutPopup #aboutBtm {
    height: unset;
    max-width: 90%;
}

html.mobile #aboutPopup #aboutSocialIcons {
    width: 100%;
}

html.mobile #aboutPopup #aboutSocialIcons>img {
    width: 15px;
}

html.mobile #aboutPopup #aboutSeparatorLine {
    margin-top: 1.5vh;
    margin-bottom: 0.5vh;
}

html.mobile #aboutPopup #aboutBtm>*:nth-child(3) {
    font-size: 10px;
    line-height: 12px;
}

html.mobile #aboutPopup #aboutBtm>*:nth-child(4) {
    margin-top: 2vh;
}

html.mobile #aboutPopup #aboutBtm>*:nth-child(4)>a {
    font-size: 10px;
    line-height: 12px;
}

html.mobile #aboutPopup #aboutBtm>*:nth-child(5) {
    margin-top: 3vh;
}

html.mobile #aboutPopup #aboutBtm>*:nth-child(5)>div>img {
    width: 10px;
}

/* CHANGES LOG V5 Commented */
/* #mainLeftColumn {
    width: 15vw;
}

#mainRightColumn {
    width: calc(100vw - 15vw - 48px - 24px);
}

#mainTopRow {
    width: calc(100vw - 15vw - 48px - 24px);
    height: calc((100vw - 15vw - 48px - 24px) / 16 * 9);
} */

/* CHANGES LOG V5 Commented */
/* .bottomFlex {
    height: calc(100vh - ((100vw - 15vw - 48px - 24px) / 16 * 9) - 48px - 16px);

    margin-left: auto !important;
    margin-right: auto !important;
    max-width: calc(80vh* 16 / 9);
    transition: all 0.2s ease-in-out;
} */


#modalHotspot {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #040404;
    padding: 25px;
    box-sizing: border-box;

    /* CHANGES LOG V5 */
    background-color: #00000099;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
}

#modalHotspot.openned {
    display: block;
}

#modalHotspot.type2 {
    background-color: transparent;
}

#modalHotspot>#closeHotspot {
    width: 44px;
    position: absolute;
    right: 18px;
    top: 18px;

    user-select: none;
    pointer-events: all;
    cursor: pointer;

    z-index: 10;
}

#contentModalHotspot {
    display: flex;
    width: 100%;

    color: #FFFFFF;

    flex-direction: row;
    flex-wrap: nowrap;
    /* CHANGES LOG V5 Commented */
    /* align-items: center; */
    justify-content: space-between;

    column-gap: 30px;

    overflow: hidden;

    /* CHANGES LOG V5 */
    background: #00000099;
    backdrop-filter: blur(20px);
    height: auto !important;
    padding: 50px;
    display: flex;
    flex-direction: row-reverse;
}

#contentModalHotspot.eggVideo{
    flex-direction: row;
    transition: all 1s ease-in-out;
}
#contentModalHotspot.eggVideo>.leftColumnModal{
    display: none;
}
#contentModalHotspot.eggVideo>.rightColumnModal{
    animation: fadeOut 1s ease forwards;
}
@keyframes fadeOut {
    100%{
        scale: 0;
        opacity: 0;
        display: none;
    }
}
#contentModalHotspot.eggVideo>.eggVideo{
    transition: all 1s ease-in-out;
    scale: 0;
    opacity: 0;
    animation: fadeIn 1s 1s ease forwards;
}
@keyframes fadeIn {
    100%{
        scale: 1;
        opacity: 1;
    }
}

.leftColumnModal {
    max-width: 50%;
    min-width: 20%;

    overflow: hidden;
    overflow-y: auto;
    padding-right: 10px;

    max-height: 100%; /* CHANGES LOG V4 2024/08/22 Fix height modals and scroll */


    /* animation: opacityTransition 1s 1s cubic-bezier(0.075, 0.82, 0.165, 1) forwards; */
    /* CHANGES LOG V5 Commented because of backdrop filter bug */
    /* opacity: 0; */
    /* animation: opacityTransition 1s 0.2s cubic-bezier(0.075, 0.82, 0.165, 1) forwards; */

    /* CHANGES LOG V5 */
    background: white;
    padding: 20px;
}
#contentModalHotspot:not(.eggHsStyle) .leftColumnModal{
    opacity: 0;
    animation: opacityTransition 1s 0.2s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}
@keyframes opacityTransition {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

.rightColumnModal {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
    height: 100%;

    /* CHANGES LOG V4 align texts and photos heritage*/
        max-width: 60%;
        align-self: center;

    /* CHANGES LOG V5 Commented because of backdrop filter bug */
    /* CHANGES LOG V5 */
    /* opacity: 0;
    animation: opacityTransition 1s 0.2s cubic-bezier(0.075, 0.82, 0.165, 1) forwards; */
}
#contentModalHotspot:not(.eggHsStyle) .rightColumnModal{
    opacity: 0;
    animation: opacityTransition 1s 0.2s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}

.rightColumnModal>img {
    max-width: 100%;
    max-height: 80vh;
}

.imagewithtext_txttitle,
.titleModal {
    font-family: 'Bentley_Light';
    font-style: normal;
    font-size: 20px;
    line-height: 28px;

    color: #FFFFFF;
    color: black;
}

.imagewithtext_txttext,
.textModal {
    font-family: 'Bentley_Light';
    font-style: normal;
    font-size: 14px;
    line-height: 16px;

    color: #FFFFFF;
    color: black;
}

#contentModalHotspot .year {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 10vw;
    opacity: 0.3;

    font-family: 'Bentley';

    display: none;
}

.rightColumnModal>.photoArrowContainer{
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.rightColumnModal div.photoArrow {
    font-size: 46px;
    font-weight: bold;

    width: 50px;
    height: 50px;
    position: absolute;

    user-select: none;
    cursor: pointer;

    transition: all 0.2s ease-in-out;

    display: flex;
    align-items: flex-end;
    justify-content: center;


    background-size: 22px;
    background-position: center;
    background-repeat: no-repeat;
}

.rightColumnModal div.photoArrow:hover {
    opacity: 0.6;
    width: 40px;
}

.rightColumnModal div.photoArrow.next {
    right: 0;
    bottom: 0;
    filter: invert(1);

    background-image: url(../assets/imgs/icons/arrow-right.svg);
}

.rightColumnModal div.photoArrow.prev {
    left: 0;
    bottom: 0;
    filter: invert(1);

    background-image: url(../assets/imgs/icons/arrow-left.svg);
}

.rightColumnModal.rightColumnModalHeritage .photoArrowContainer[photoValue="0"] div.photoArrow.prev {
    opacity: 0.3;
    pointer-events: none;
}
.rightColumnModal.rightColumnModalHeritage .photoArrowContainer[photoValue="1"] div.photoArrow.next {
    opacity: 0.3;
    pointer-events: none;
}

.rightColumnModal>.photoArrowContainer>.slidesBarContainer{
    height: 1px;
    background-color: #ffffff4d;

    width: calc(100% - 120px);
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    margin: auto;

    display: flex;
}
.rightColumnModal>.photoArrowContainer>.slidesBarContainer>.slidesBar{
    background-color: #ffffff;
    width: 50%;
    height: 1px;
}
.rightColumnModal>.photoArrowContainer[photoValue="0"]>.slidesBarContainer{
    justify-content: flex-start;
}
.rightColumnModal>.photoArrowContainer[photoValue="0"]>.slidesBarContainer .slidesBar{
    transform: translateX(0%);
}
.rightColumnModal>.photoArrowContainer[photoValue="1"]>.slidesBarContainer{
    justify-content: flex-end;
}
.rightColumnModal>.photoArrowContainer[photoValue="1"]>.slidesBarContainer .slidesBar{
    transform: translateX(100%);
}

.rightColumnModal>video {
    max-width: 100%;
    max-height: 100%;

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

.playVideoBtn {
    position: absolute;
}

.playVideoBtn>img{
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 500px !important;
    overflow: visible !important;
    box-shadow: #000000cc 0px 0px 48px !important;
}

.playVideoBtn.hide {
    display: none;
}

.playVideoBtn>img.hide {
    display: none;
}

#krpanoExplain {
    background-color: #000000;
    animation: fadeIntro 2s 1s forwards;

    z-index: 100;
}

#krpanoExplain::before{
    content: '';
    width: 150vw;
    height: 110vh;
    background-color: #04040466;
    position: absolute;
    left: -50vw;
    top: -10vh;
    z-index: -1;

    pointer-events: none;
}

@keyframes fadeIntro {
    from {
        background-color: #000000ff;
    }

    to {
        background-color: #000000aa;
    }
}

#aboutPopup.openned {
    z-index: 10;
}

.heritageArrows {
    position: absolute;
    top: 25px;

    display: flex;
    column-gap: 16px;
    flex-direction: row;
    flex-wrap: nowrap;

    max-width: 50px;
}

.heritageArrows>div {
    width: 30px;
    height: 30px;

    background-position: center;
    background-repeat: no-repeat;

    cursor: pointer;
}

.heritageArrows>div.prevArrow {
    /* background-image: url(assets/imgs/icons/arrow-left-heritage.svg); */
    background-image: url(../assets/imgs/icons/arrow-left.svg);
    background-position: left;
    filter: invert(1);
}

.heritageArrows>div.nextArrow {
    /* background-image: url(assets/imgs/icons/arrow-right-heritage.svg); */
    background-image: url(../assets/imgs/icons/arrow-right.svg);
    background-position: right;
    filter: invert(1);
}

.externalLink {
    margin-right: 5px;
    /* CHANGES LOG V5 Commented */
    /* filter: invert(1); */
    width: 11px;
    transform: translateY(2px);
}

/* CHANGES LOG V5 Commented */
/* #bentleyLogo {
    cursor: pointer;
} */

@media (max-width:1000px) or (max-height:570px) {
    .heritageArrows {
        top: 20px;
    }

    #modalHotspot {
        padding: 4vw 7vh;
        padding-top: 60px;
    }

    #modalHotspot>#closeHotspot {
        width: 40px;
        right: 10px;
        top: 10px;
    }

    #contentModalHotspot {
        column-gap: 15px;
    }

    .leftColumnModal {
        min-width: 30%;
    }
   
}
/* CHANGES LOG V5 */
    #sceneDetailsBtn>*:first-child{
        margin: 0;
    }

/* @media (max-width:800px) or (max-height:400px) { */
    .heritageArrows {
        top: 5px;
    }
    .leftColumnModalHeritage{
        --offset: 5px !important;
    }

    #modalHotspot {
        padding: 20px 20px;
        padding-top: 40px;
    }

    #modalHotspot>#closeHotspot {
        width: 35px;
        right: 4px;
        top: 4px;
    }

    .leftColumnModal {
        min-width: 40%;
    }

    #sceneDetailsContainer>#currentSceneDescription {
        overflow-y: scroll;
        padding-right: 5px;
        width: calc(100% + 5px);
        box-sizing: border-box;
    }

    #mainFlex {
        column-gap: 5px;
    }

    /* CHANGES LOG V5 Commented */
    /* #mainLeftColumn {
        width: calc(15vw + 24px);
    } */

    #infoView {
        min-width: none;
    }

    #prev,
    #next {
        padding-top: 15px;
    }

    /* CHANGES LOG V5 Commented */
    /* span.sceneTitle::before {
        display: none;
    } */

    #mainTopRow {
        margin-bottom: 2vh !important;
    }

    .bottomFlex>div>div>div:last-child {
        margin-top: 1vh !important;
    }
/* } */

html.mobile #sceneDetailsContainer.openned {
    max-height: calc(100vh - 150px);
}

#sceneDetailsContainer>#currentSceneDescription::-webkit-scrollbar-thumb {
    background-color: #335B4C;
}

#krpanoDiv:fullscreen #pano {
    border-radius: 0px;
}

#krpanoDiv:fullscreen #pano canvas {
    border-radius: 0px;
}

#krpanoDiv:fullscreen #krpanoSWFObject {
    border-radius: 0px;
}

#krpanoDiv:fullscreen #modalHotspot {
    border-radius: 0px;
}


#hsTooltip {
    visibility: hidden;
    opacity: 0;

    position: absolute;
    background-color: #FFFFFFcc;
    color: black;
    padding: 10px;

    transform: translate(-50%, -150%);

    pointer-events: none;

    transition: opacity 0.4s ease-in-out;

    text-align: center;

    font-family: 'Bentley_Light';
    line-height: 1.2;
}

#hsTooltip.displayed {
    visibility: visible;
    opacity: 1;
}

#hsTooltip.disabled {
    display: none;
}

#hsTooltip>span {
    font-family: 'Bentley';
}

/* CHANGES LOG V5 Commented */
/* .visitedCat>div>div>div>div {
    background-color: #335B4C !important;
    color: #FFFFFF !important;
}

.selectedCat>div>div>div>div {
    background-color: #94C11D !important;
    color: #000000 !important;
} */

/* CHANGES LOG V5 Commented CONCLUDE */
/*
.concludeBtn {
    background-color: #335B4C;
}

.concludeBtn>img {
    filter: invert(0);
}

#concludeBtnContainer {
    transition: all 0.2s ease-in-out;
}

#concludeBtnContainer.disabled {
    transform: scaleX(0) scaleY(0);
    width: 0;
}

body.concluded {
    background-color: black;
}

body.concluded #mainLeftColumn {
    width: 0;
    display: none;
}

body.concluded #mainRightColumn {
    width: calc(100vw - 48px);
    height: calc(100vh - 48px);
    justify-content: center;
}

body.concluded #mainTopRow {
    width: calc(100vw - 48px);
    height: calc((100vw - 48px) / 16 * 9);
}

body.concluded #mainRightColumn>div:last-child {
    display: none;
} */

/* CHANGES LOG V5 Commented */
/* #mainLeftColumn, */
body,
#mainRightColumn,
#mainTopRow {
    transition: all 0.2s ease-in-out;
}

/* CHANGES LOG V5 Commented */
/* #miniMap {
    width: 15vw;
    height: 9vw;
    background-color: #C1CDC9;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

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

    position: relative;

    margin-top: 30px;

    cursor: pointer;
}

#miniMap .txt_map {
    font-family: 'Bentley';
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #040404;

    margin-left: 10px;
} */

/* CHANGES LOG 06/09/2023 TEXT SIZE */
html.ja #miniMap .txt_map,
html.ko #miniMap .txt_map,
html.zh #miniMap .txt_map{
    font-size: 10px;
    line-height: 12px;
}
/* CHANGES LOG 06/09/2023 TEXT SIZE END */

#miniMap #mapBtn {
    position: absolute;
    top: calc(100% + 8px);
    left: 0px;
    opacity: 0.4;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    opacity: 0.4;
}

#miniMap #mapBtn.openned {
    opacity: 1;
}

/* CHANGES LOG V5 Commented */
/* #mainLeftColumn {
    justify-content: space-between;
    height: calc((100vw - 15vw - 48px - 24px) / 16 * 9);
    max-height: 80vh;
} */

#tooltipsContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 60px;
    box-sizing: border-box;

    display: flex;
    pointer-events: none;

    z-index: 100;
}

#tooltipTutorial {
    position: absolute;

    --colorTutorialBG: #DCD8C0;
    background-color: var(--colorTutorialBG);
    padding: 30px;

    width: 20%;
    min-width: 200px;
    min-height: 300px; /* CHANGES LOG 2024/06/25 V4 Allow div adjust different languages */

    font-family: 'Bentley_Light';
    font-size: 18px;
    line-height: 28px;

    pointer-events: all;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

#tooltipTutorial div:first-child img{
    /* filter: invert(1) sepia(49%) saturate(19%) hue-rotate(359deg) brightness(98%) contrast(97%); */
    cursor: pointer;
}
#tooltipTutorial div:last-child img{
    transform: rotate(180deg);
    max-width: 18px;
}

#tooltipTutorial div:last-child{
    font-size: 12px;
}

#tooltipTutorial div:first-child,
#tooltipTutorial div:last-child{
    display: flex;
    justify-content: space-between;

    line-height: 13.8px;
}

#tooltipTutorial.tutorial1 {
    top: 20px;
    right: 20px;
}
#tooltipTutorial.tutorial2 {
    top: 20px;
    right: 20px;
}
#tooltipTutorial.tutorial3 {
    bottom: 20px;
    left: 20px;
}
#tooltipTutorial.tutorial3::after {
    content: '';
    position: absolute;
    border-width: 10px 8px;
    border-style: solid;
    border-color: transparent var(--colorTutorialBG) var(--colorTutorialBG) transparent;
    right: 100%;
    bottom: 24px;
}
#tooltipTutorial.tutorial4 {
    bottom: 20px;
    right: 20px;
}
#tooltipTutorial.tutorial4::after {
    content: '';
    position: absolute;
    border-width: 8px 10px;
    border-style: solid;
    border-color: var(--colorTutorialBG) var(--colorTutorialBG) transparent transparent;
    top: 100%;
    right: 16px;
}
#tooltipTutorial.tutorial5 {
    position: relative;
    margin-top: auto;
    margin-bottom: -40px;
    margin-right: auto;
    margin-left: auto;

    transform: translateX(-65px);
}
#tooltipTutorial.tutorial5::after {
    content: '';
    position: absolute;
    border-width: 8px 10px;
    border-style: solid;
    border-color: var(--colorTutorialBG) var(--colorTutorialBG) transparent transparent;
    top: 100%;
    right: calc(50% - 5px);
}


#tutorialStep {
    text-align: right;
    font-size: 13px;
}

#tutorialContent {
    margin: 10px 0;
    height: 100%;
    align-content: end;
    flex: auto; /* CHANGES LOG 2024/06/25 V4 Allow div adjust different languages *//* Allow div fill the height */
}


#tooltipTutorial.tutorial2 #tutorialContent{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#tooltipTutorial.tutorial2 #containerContentType>div{
    font-size: 15px;
    line-height: 26px;
    padding-top: 16px;

    justify-content: flex-start;
}

#containerContentType{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}
#containerContentType>div{
    flex: 1;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}
#containerContentType>div>div{
    aspect-ratio: 1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    width: 100%;
    max-width: 65px;

    max-width: 46px;
}
#containerContentType>div:nth-child(1)>div{
    background-image: url(/imgs/icons/hotspot/image_tip.svg);
}
#containerContentType>div:nth-child(2)>div{
    background-image: url(/imgs/icons/hotspot/video_tip.svg);
}
#containerContentType>div:nth-child(3)>div{
    background-image: url(/imgs/icons/hotspot/nav_tip.svg);
}

/* CHANGES LOG 17/01/2024 KEEP BTNS CENTERED */
    .bottomFlex>div:first-child,
    .bottomFlex>div:last-child{
        width: 100%;
    }
    .bottomFlex>div:first-child{
        justify-content: flex-start;
    }
    .bottomFlex>div:last-child{
        justify-content: flex-end;
    }


/* CHANGES LOG 19/02/2024 READ MORE IFRAME */
.styledIframeHotspot{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border:0;
}
.openIframeSpan{
    text-decoration: underline;
    cursor: pointer;
}
/* CHANGES LOG 19/02/2024 END */

/* CHANGES LOG 21/02/2024 Style for hotspots already visited */
.visitedHsImage.blurHsType{
    background: none !important;
}
.visitedHsImage.blurHsType::before{
    content: '';

    background: url(./../assets/imgs/icons/hotspot/image_visited.svg) -5px -5px / 60px 60px !important;
    width: 50px;
    height: 50px;
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 25px);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 500px !important;
    overflow: visible !important;
    box-shadow: #000000cc 0px 0px 48px !important;
}
.visitedHsVideo.blurHsType{
    background: none !important;
}
.visitedHsVideo.blurHsType::before{
    content: '';

    background: url(./../assets/imgs/icons/hotspot/video_visited.svg) -5px -5px / 60px 60px !important;
    width: 50px;
    height: 50px;
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 25px);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 500px !important;
    overflow: visible !important;
    box-shadow: #000000cc 0px 0px 48px !important;
}
.visitedHsNav.blurHsType{
    background: none !important;
}
.visitedHsNav.blurHsType::before{
    content: '';

    background: url(./../assets/imgs/icons/hotspot/nav_visited.svg) -5px -5px / 60px 60px !important;
    width: 50px;
    height: 50px;
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 25px);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 500px !important;
    overflow: visible !important;
    box-shadow: #000000cc 0px 0px 48px !important;
}
/* CHANGES LOG 21/02/2024 END */

/* CHANGES LOG 23/02/2024 On hover shows play/pause controls */
.rightColumnModal:hover .playVideoBtn {
    display: flex;
}
/* CHANGES LOG 23/02/2024 END */


.bottomFlex>div>div{
    justify-content: unset;
}

div.blurHsType:not(.visitedHsImage, .visitedHsVideo, .visitedHsNav){
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 500px !important;
    overflow: visible !important;
    box-shadow: #000000cc 0px 0px 48px !important;
}


.categoryLayer{
    font-family: 'Bentley';

    background: linear-gradient(60deg, #394D45 50%, #637A77);
    background: #183319; /* CHANGES LOG V5 */
    color:#FFFFFF;

	font-size: 16px;
    line-height: 14px;
    letter-spacing: 0.01em;

    /* border-radius: 2px; */
}


@media (max-width: 1200px) or (max-height: 575px) { /* MODIF EC 3-7-24 TO ACCOMMODATE LABELS IN MAP */
    html.desktop .categoryLayer {
        scale: 0.9;
        height: 40px!important;
        font-size: 12px!important;

        translate: -12px; /* MODIF EC SANDRA CHANGES TO ACCOMMODATE LABELS IN MAP */
    }

    html.desktop .categoryLayerHs {
        scale: 0.6;
        transform: translateY(3px) !important; /* MODIF EC SANDRA CHANGES TO ACCOMMODATE LABELS IN MAP */
    }

    html.desktop .categoryLayer > div{ /* MODIF EC SANDRA CHANGES TO ACCOMMODATE LABELS IN MAP */
        height: 40px;
    }
}


.selectedCat>.categoryLayer{
    transform-style: preserve-3d;
}
.visitedCat>.categoryLayer{
    background: white !important;
    color: #040404 !important;
    color: #4D4D4D !important; /* CHANGES LOG V5 */
}
.visitedCat:not(.selectedCat)>.categoryLayer>div{
    /* opacity: 0.4; */ /* CHANGES LOG V5 */
}
.visitedCat.selectedCat>.categoryLayer{
    background: #DCD8C2 !important;
    color: #000000 !important;
}
.visitedCat:not(.selectedCat)>.categoryLayerHs{
    opacity: 0.4 !important;
}
/* .selectedCat>.categoryLayer::before{
    content: '';

    background: linear-gradient(20deg, #394D45, #BDC4C1);
    position: absolute;
    top: -1px;
    left: -1px;
    border-radius: 2px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);

    transform: translateZ(-1px);
} */
.visitedCat>.categoryLayerHs{
    filter: invert(1) sepia(98%) saturate(18%) hue-rotate(243deg) brightness(110%) contrast(97%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.selectedCat>.categoryLayerHs::after{
    content: '';
    width: 6px;
    height: 6px;
    background-color: #FFFFFF;
    display: block;
    border-radius: 10px;
}

.rightColumnModalHeritage{
    max-width: 60%;

    align-self: center; /* CHANGES LOG V4 align texts and photos heritage*/

    opacity: 0;
    animation: opacityTransition 1s 1s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}

.leftColumnModalHeritage{
    /* CHANGES LOG V4 align texts and photos heritage*/ /* CHANGES LOG V4 2024/08/22 Fix height modals and scroll (copied here but not necessary?) */
        align-self: flex-start;
        max-height: calc(((100vw - 15vw - 48px - 24px) / 16* 9) - 50px);

    /* CHANGES LOG V4 align texts and photos heritage*/
    align-self: flex-start;
    --offset: 120px;
    max-height: calc(((100vw - 15vw - 48px - 24px) / 16* 9) - 50px - (var(--offset) / 2));
}


.titleModal{
    font-family: 'Bentley_Light';
    font-size: 24px;
    line-height: 28px;
    letter-spacing: 0em;
    margin-bottom: 15px; /* CHANGES LOG V4 Added margin bottom title */
}

.textHeritageData{
    font-family: 'Bentley_Light';
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0em;
}

.imagewithtext_txttext, /* CHANGES LOG V4 Added style */
.textModal, /* CHANGES LOG V4 Added style */
.textHeritageInfo{
    font-family: 'Bentley_Light';
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0em;
}

#controlsPopup{
    z-index: 10;
}

.msg_info{
	background-color: #394D45;
	padding: 24px 32px;
}
.warningIconLine{
	display: flex;
	flex-direction: row;
	column-gap: 16px;
}

/* CHANGES LOG V5 Commented */
/* #smallScreensDiv{
    display: none;
}
.smallScreensElem{
    display: none !important;
} */



/* CHAGNES LOG V4 2024/06/20 Hotspot text align */
/* CHANGES LOG V4 align texts and photos heritage*/
/* #contentModalHotspot{
    align-items: flex-start;
    height: inherit;
} */
#modalHotspot.openned{
    display: flex;
    align-items: center;
}


.bottomFlex>div{
    column-gap: 18px;
}

#tutorialBtn{
    cursor: pointer;
}


/* CHANGES LOG V5 Commented */
/* @media (max-width: 1023px) or (max-height: 575px) { */
    *{
        --barHeight: 50px;
        /* --barHeight: 0px; */ /* CHANGES LOG V5 Reverted to fix mobile bar navigation heights */
    }
    #mainFlex{
        width: 100vw;
        left: 0;
        top: 0;

        height: 100%; /* % used to take into account the URL bar on mobile devices */
    }
    /* CHANGES LOG V5 Commented */
    /* #mainLeftColumn{
        display: none;
    } */
    #mainRightColumn{
        width: 100vw;
        height: 100vh;

        height: 100%; /* % used to take into account the URL bar on mobile devices */
    }
    #mainTopRow{
        width: 100vw;
        height: calc(100vh - var(--barHeight));
        height: calc(100% - var(--barHeight)); /* % used to take into account the URL bar on mobile devices */
        height: calc(100% - 0px); /* CHANGES LOG V5 to fix mobile bar navigation heights */
        max-height: unset;
        margin-bottom: 0px !important;
        max-width: unset;
    }

    #tooltipTutorial.tutorial1 {
        top: unset;
        right: unset;
    }
    #tooltipTutorial.tutorial2 {
        top: unset;
        right: unset;
    }
    #tooltipTutorial.tutorial3 {
        bottom: calc(var(--barHeight) + 20px);
        left: unset;
    }
    #tooltipTutorial.tutorial3::after {
        border-width: 8px 10px;
        border-color: var(--colorTutorialBG) var(--colorTutorialBG) transparent transparent;
        top: 100%;
        right: calc(33% - 5px);
    }
    #tooltipTutorial.tutorial4 {
        bottom: calc(var(--barHeight) + 20px);
        right: unset;
    }
    #tooltipTutorial.tutorial4::after {
        display: none;
    }
    #tooltipTutorial.tutorial5 {
        bottom: calc(var(--barHeight) + 20px);

        position: absolute;
        margin-top: auto;
        margin-bottom: auto;
        margin-right: auto;
        margin-left: auto;
        transform: none;
    }
    #tooltipTutorial.tutorial5::after {
        right: calc(67% - 5px);
    }



    #krpanoExplain{
        display: none;
    }
    #tooltipsContainer{
        background: #000000aa;
        height: calc(100% + var(--barHeight));
        pointer-events: all;
    }
    #krpanoDiv #pano{
        border: none;
    }

    .bottomFlex{
        background-color: #394D45;
        max-width: unset;
    }

    /* CHANGES LOG V5 Commented */
    /* .prevNextTxt{
        display: none;
    }
    #prev .sceneTitle, #next .sceneTitle{
        display: none;
    } */

    .bottomFlex{
        height: var(--barHeight);
        height: 50px; /* CHANGES LOG V5 */
        min-height: unset;

        /* justify-content: center; */
    }
    .bottomFlex>div:first-child,
    .bottomFlex>div:last-child{
        height: 100%;
    }
    .bottomFlex>div{
        align-items: center;
        filter: invert(1);
        width: unset !important;
    }
    .bottomFlex>div:nth-child(2){
        /* width: 100% !important; */
        display: flex;
        justify-content: space-evenly;
    }
    #prev, #next{
        background-size: unset;
        background-position-x: unset;

        width: 40px;
    }
    #prev:hover, #next:hover{
        opacity: 0.6;
        transform: scale(1.2);
        background-position-x: 50%;
    }
    #prev {
        background-position-x: 100%;
    }
    .ocultoPlus{
        visibility: visible;
        opacity: 0.3;
        pointer-events: none;
    }

    .bottomFlex>div:nth-child(2)>*{
        display: none;
    }
    .bottomFlex>div:nth-child(2)>div:nth-child(1),
    .bottomFlex>div:nth-child(2)>div:nth-child(2){
        display: flex;
    }

    .smallScreensElem{
        display: flex !important;
    }
    #smallScreensDiv{
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100%;

        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;

        pointer-events: none;

        background: linear-gradient(180deg, #04040466, #04040400 80px);
    }
    #smallScreensDiv>.topSSdiv{
        width: 100%;

        /* CHANGES LOG V5 Commented */
        /* height: 36px; */
        /* margin-top: 12px; */
        margin-top: 16px;

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

        position: relative;

        z-index: 1;

        pointer-events: none;
    }
    .generalButton{
        pointer-events: auto;
    }
    .menuSSdiv{
        position: absolute;
        right: 20px;
        color: #FFFFFF;

        display: flex;
        flex-direction: row;
        column-gap: 8px;

        pointer-events: all;
        cursor: pointer;
    }
    .menuSSdiv>div:first-child{
        margin-top: 1px;
        font-size: 11px;
        font-family: 'Bentley';
        line-height: 20px;
    }
    #smallScreensDiv>.bottomSSdiv{
        height: var(--barHeight);
        margin-bottom: 20px;

        display: flex;
        flex-direction: row;
        align-items: center;

        /* margin-top: var(--barHeight); */ /* CHANGES LOG V5 to fix mobile bar navigation heights */

        pointer-events: none;
    }
    #sceneInfo,
    #navigationDiv>*,
    #fullScreenDiv>*{
        pointer-events: auto;
    }
    .bottomFlex>div>div>div:last-child{
        display: none;
    }

    /* CHANGES LOG V5 Commented */
    /* .categoryLayer{
        font-size: 12px;
    } */

    #modalHotspot.openned{
        height: calc(100% + var(--barHeight));
        height: 100%;/* CHANGES LOG V5 to fix mobile bar navigation heights */
        z-index: 100;
        padding: 20px !important;
        padding-top: 30px !important;
    }

    /* CHANGES LOG V4 2024/06/12 Get hotspot type2 (scenes) aspect of hotspot*/
        #modalHotspot.type2{
            background-color: #000000;
        }
        #modalHotspot.type2 #closeHotspot{
            display: block !important;
        }
        #pano:has(~#modalHotspot.type2.openned){
            z-index: 120;
            position: absolute;
            margin-top: 30px; /* CHANGES LOG V5 Commented */
        }
    /* CHANGES LOG V4 2024/06/12 END Get hotspot type2 (scenes) aspect of hotspot*/

    #currentSceneNameSmallScreens{
        color: white;

        font-size: 14px;
        font-family: 'Bentley';

        padding-bottom: 10px;
        border-bottom: 2px white solid;
        margin-bottom: calc(70px + var(--barHeight));
        opacity: 0;
    }
    #currentSceneNameSmallScreens.animated{
        animation: showSceneName 5s cubic-bezier(0.075, 0.82, 0.165, 1) 0.5s;
    }
    @keyframes showSceneName {
        0%{
            opacity: 0;
        }
        25%{
            opacity: 1;
        }
        90%{
            opacity: 1;
        }
        100%{
            opacity: 0;
        }
    }


    #smallScreensDiv #menuDiv{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        background-blend-mode: hard-light;
        background: linear-gradient(#061A1B, #061A1B), url(/imgs/backgroundAbout.png);
        background-position-x: left;
        background-position-y: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-blend-mode: hard-light;

        color: white;
        font-family: 'Bentley_Light';
        font-size: 24px;
        line-height: 24px;

        padding: 40px 20px;
        padding-top: 70px;
        box-sizing: border-box;

        display: none;
    }
    /* CHANGES LOG V5 Commented */
    /* #smallScreensDiv #menuDiv>div.menuContent>div{
        display: flex;
        flex-direction: row;
        column-gap: 17px;
        cursor: pointer;
    } */
    #smallScreensDiv #menuDiv.opened{
        display: flex;
        pointer-events: all;
    }
    #smallScreensDiv #menuDiv.opened>div{
        display: none;
    }
    #smallScreensDiv .menuSSdiv.opened>img:first-of-type{
        display: none;
    }
    #smallScreensDiv .menuSSdiv:not(.opened)>img:last-child{
        display: none;
    }
    #smallScreensDiv .menuSSdiv>img:last-child{
        width: 12px;
    }
    #smallScreensDiv #menuDiv.opened>div.menuContent{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        row-gap: 80px;
        pointer-events: all;

        /* CHANGES LOG V5 */
        /* width: 100%; */
        width: 20%;
    }
    #smallScreensDiv .menuSSback{
        display: none;
    }
    /* #smallScreensDiv.opened .menuSSdiv{
        display: none;
    } */
    #smallScreensDiv.opened .menuSSback{
        /* position: absolute; */
        display: flex;
        left: 20px;
        width: 30px;
        height: 100%;
        align-items: center;
        pointer-events: all;
        cursor: pointer;
    }
    /* CHANGES LOG V5 */
    /* #smallScreensDiv.opened #menuDiv>div.menuContent{
        display: none;
    } */
    #smallScreensDiv.opened #menuDiv.controls>div.menuControlsContent{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        row-gap: 8vh;

        /* CHANGES LOG V5 */
        /* width: 100%; */
        width: 80%;
        text-align: center;
        font-family: 'Bentley_Light';
        font-size: 18px;
        line-height: 28px;
        letter-spacing: 0em;
    }
    #smallScreensDiv.opened #menuDiv.controls>div.menuControlsContent>div{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        row-gap: 16px;

        max-width: 220px;
    }
    /* CHANGES LOG V5 Commented */
    /* #smallScreensDiv.opened #menuDiv.controls>div.menuControlsContent>div>:first-child{
        font-size: 31px;
        line-height: 1.1em;
        letter-spacing: 0.01em;
    } */
    #smallScreensDiv.opened #menuDiv.controls .separatorLine{
        width: 32px;
        border-bottom: 1px solid #FFFFFF;
    }

    #smallScreensDiv.opened #menuDiv.about>div.menuAboutContent{
        display: flex;
    }

    #smallScreensDiv.opened #menuDiv.lang>div.menuLanguageContent{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        row-gap: 8vh;

        /* CHANGES LOG V5 Commented*/
        /* width: 100%; */
        width: 80%;
        text-align: center;
        font-family: 'Bentley_Light';
        font-size: 18px;
        line-height: 28px;
        letter-spacing: 0em;
    }
    #smallScreensDiv.opened #menuDiv.lang>div.menuLanguageContent>input{
        display: none;
    }

    #aboutPopup.openned{
        position: fixed;

        justify-content: space-between;
        padding: 12px 20px;
        box-sizing: border-box;
    }
    #aboutPopup>div:not(:first-child){
        width: 100% !important;
        height: 50% !important;
    }

    #aboutPopup #aboutCredits>*:nth-child(4){
        width: unset;
    }

    #aboutPopup #aboutCredits>img:first-child{
        /* CHANGES LOG V5 Commented */
        /* width: 80px; */
        width: 166px;
        margin-top: 0;
    }

    #aboutPopup #aboutSocialIcons{
        width: 95%;
    }

    /* CHANGES LOG V5 Commented */
    /* #aboutPopup #aboutCredits>div.tourVersion{
        margin-top: -8vh;
    } */

    #aboutPopup.menuSSversion{
        background: none;
        padding-top: 0;
        margin-top: 40px;
        height: calc(100% - 40px);
    }
    #aboutPopup.menuSSversion>#closeAbout{
        display: none;
    }
    #aboutPopup.menuSSversion>#aboutCredits :first-child{
        display: none;
    }

    .bottomFlex>div{
        column-gap: 0px;
    }
/* } */

@media (max-width: 1023px) or (max-height: 575px){
    @media  (orientation : portrait){
        #modalHotspot.openned #contentModalHotspot:has(> .leftColumnModal){
            display: flex;
            flex-direction: column-reverse;
            justify-content: flex-end;
            align-items: flex-start;
            align-items: center; /* CHANGES LOG V5 Center content */

            max-height: 100%; /* CHANGES LOG V4 align texts and photos heritage*/
        }

        #modalHotspot.openned #contentModalHotspot:has(> .leftColumnModal) > .rightColumnModal{
            height: unset;
            margin-top: 30px;

            /* CHANGES LOG V4 align texts and photos heritage*/
            max-width: unset;
            display: inline-table;
        }
        #modalHotspot.openned #contentModalHotspot:has(> .leftColumnModal) > .rightColumnModal > img{
            /* CHANGES LOG V4 align texts and photos heritage*/
            max-height: 30vh;
        }
        #modalHotspot.openned #contentModalHotspot > .leftColumnModal{
            margin-top: 30px;
            max-width: unset;
            max-height: unset; /* CHANGES LOG V4 align texts and photos heritage*/
            overflow: auto; /* CHANGES LOG V5 Fixing Hotspots responsive */
        }
        .sliderContent .contentContainer{
            max-height: stretch; /* CHANGES LOG V5 Fixing Hotspots responsive */
            max-height: -webkit-fill-available; /* CHANGES LOG V5 Fixing Hotspots responsive SAFARI */

            display: contents; /* CHANGES LOG V5 Fixing Hotspots responsive BUG iPhone */
        }
        .sliderContent .contentContainer .content{
            max-height: fit-content !important; /* CHANGES LOG V5 Fixing Hotspots responsive */

            max-height: calc(90vh - 100px) !important; /* CHANGES LOG V5 Fixing Hotspots responsive BUG iPhone */
        }
    }
}


@media (max-height: 575px)
and (orientation : landscape) {
    body {
        overflow: visible; /* CHANGES LOG V4 mobile landscape fit */
    }

    #tooltipsContainer{
        --paddingTooltipsContainer: 20px;
        padding: var(--paddingTooltipsContainer);

        height: calc(100% + var(--barHeight));
    }
    #tooltipTutorial{
        height: unset;
        width: unset;
        min-width: unset;
        max-width: calc(100vw - 2 * var(--paddingTooltipsContainer));
        max-height: calc(100% - 2 * var(--paddingTooltipsContainer));
        box-sizing: border-box;

        min-height: unset;
        width: 100%;
    }

    #smallScreensDiv #menuDiv.opened>div.menuContent{
        flex-direction: row;
        column-gap: 60px;
    }
    #smallScreensDiv.opened #menuDiv.controls>div.menuControlsContent{
        flex-direction: row;
        column-gap: 60px;
    }
}

/* MODIF EC 4/7/24 TO REMOVE DATE OF VISIT */
#visitDate {
    display:none!important;
}


/* MODIF EC 4/7/24 TO CAPITALISE THE NAME OF THE VISIT AND REDUCE TYPE SIZE */

#sceneDetailsContainer>#currentSceneName {
    font-size: 22px!important;
    text-transform: uppercase!important;

}

#sceneDetailsContainer>#currentSceneName::first-letter {
    text-transform: unset!important;
}

/* CHANGES LOG V4 2024/07/24 Fix this for responsive */
    #mainFlex{
        justify-content: center;
    }
    #mainRightColumn{
        max-width: fit-content;
    }

/* CHANGES LOG V4 2024/07/24 Fix for Heritage hotspots overlapping arrows */
    #contentModalHotspot:has(.leftColumnModalHeritage){
        height: 100%;
        padding-top: 30px;
        box-sizing: border-box;
    }
    .leftColumnModalHeritage{
        max-height: 100%;
        overflow-y: auto;
        align-self: center;
    }
    .rightColumnModalHeritage{
        height: unset;
    }

    /* CHANGES LOG V4 2024/08/22 Fix height modals and scroll */
    @media (orientation: landscape){
        #contentModalHotspot{
            height: 100%;
        }
    }


/* CHANGES LOG V5 */
*{
    --bottomBarHeight: 50px;
}
#smallScreensDiv{
    background: linear-gradient(180deg, #04040466, #04040400 135px), linear-gradient(0deg, #04040466, #04040400 135px);
    color: white;
    pointer-events: none;
    user-select: none;
}
#smallScreensDiv>*{
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    justify-content: space-between !important;
    pointer-events: all;
}
.topSSdiv{

}
.menuSSdiv{
    position: relative;
    right: unset;
}
#smallScreensDiv>.bottomSSdiv{
    height: unset;

    align-items: flex-end;
}
#smallScreensDiv>.bottomSSdiv>*{
    /* min-height: var(--bottomBarHeight); */  /* CHANGES LOG V5 Commented */ /* CHANGES LOG V5 to fix mobile bar navigation heights */
    width: 100%;
}
#sceneInfo{
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid;
}
#sceneDetailsContainer{
    height: 0px;
}
#sceneDetailsBtn{
    padding: 12px 0;
}
#currentSceneDescription{
    padding-bottom: 18px;
    text-transform: none !important;
}
#sceneDetailsBtn.openned,
#currentSceneDescription{
    color: white !important;
}
#sceneDetailsContainer.openned{
    height: unset;
}

#navigationDiv{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}
#fullScreenDiv{
    display: flex;
    justify-content: flex-end;
}



#fullScreenDiv>div:not(.fullscreen)>:last-child{
    display: none;
}
#fullScreenDiv>div.fullscreen>:first-child{
    display: none;
}

#smallScreensDiv #menuDiv{
    z-index: 100;
}


#closeSettingsMenu{
    position: absolute;
    display: block;
    right: 24px;
    top: 20px;
}

@media (max-width:800px) or (max-height:400px) {
    #fullScreenDiv{
        display: none;
    }

    #smallScreensDiv>.bottomSSdiv{
        flex-direction: column;
    }
}

#aboutPopup.openned,
#smallScreensDiv #menuDiv{
    background: transparent;
    backdrop-filter: blur(20px);
    background: #00000088;
}

#aboutPopup #aboutBtm>*:nth-child(3){
    line-height: 2em;
}

#aboutPopup #aboutSocialIcons{
        max-width: 500px;
}
@media (min-width:800px) and (min-height:400px) {
    #aboutPopup #aboutBtm>*:nth-child(3) br{
        display: none;
    }
}



/* SLIDER */
body:not(.startSliders) #startSlidersContainer{
    display: none;
}
body.startSliders #smallScreensDiv .bottomSSdiv,
body.startSliders #smallScreensDiv .topSSdiv>div{
    opacity: 0;
}
#smallScreensDiv *{
    transition: all 1s ease-in-out;
}
#startSlidersContainer{
    background: #000000aa;
    height: calc(100% + var(--barHeight));
    pointer-events: all;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 60px;
    box-sizing: border-box;
    display: flex;
    z-index: 100;

    overflow: hidden;
    white-space: nowrap;
    display: block;
    align-content: center;
    
    background-color: #000000;
    animation: fadeBackgroundStart 1s 1s forwards;
}
@keyframes fadeBackgroundStart {
    0%{
       background-color: #000000; 
    }
    100%{
       background-color: #000000aa; 
    }
}
#startSlidersContainer>.slider{
    width: 100%;
    height: 465px;
    width: 100%;
    display: inline-block;
    transition: all 1s ease;
    position: relative;
    white-space: wrap;
}
#startSlidersContainer>.slider[sliderIndex="-1"]{
    margin-left: -100%;
}
#startSlidersContainer>.slider[sliderIndex="-2"]{
    margin-left: -200%;
}
#startSlidersContainer>.slider>.sliderContent{
    position: absolute;
}

.slider>.sliderContent{
    width: 100%;
    height: 100%;

    /* background-image: url("../assets/imgs/Bentley Tour Experience - 1.png"); */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    padding: 40px;
    padding-top: 75px;
    box-sizing: border-box;
}

#startSlidersContainer .slider>.sliderContent,
#modalHotspot.openned #contentModalHotspot.sliderContent.eggHsStyle{
    background-blend-mode: multiply;
    background-color: #000000;
    animation: fadeBackground 1s 0.2s forwards;
}


#startSlider>.sliderContent{
    background-image: url("../assets/imgs/Bentley Tour Experience - 1.png");
}
#seasonSlider>.sliderContent{
    background-image: url("../assets/imgs/seasons/main.png");
}

.slider>.sliderContent{
    z-index: 2;
}
.slider>.sliderContent .content{
    background: #00000055;
    backdrop-filter: blur(20px);
    max-width: 600px;
    padding: 40px;

    box-sizing: border-box;

    color: white;
}
#startSlidersContainer .sliderContent .content{
    min-height: calc(465px - 75px - 40px);
}
/* #startSlider>.sliderContent .content::after{
    content: '';
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    right: -20px;
    top: -20px;
    background-color: red;
    z-index: -1;
} */
.slider>.sliderContent .contentBehind{
    position: absolute;
    display: block;
    --width: 240px;
    --height: 240px;
    --offset: 40px;
    width: var(--width);
    height: var(--height);
    left: calc(40px + 600px - var(--width) + var(--offset));
    top: calc(75px - var(--offset));
    background-color: #00000055;
    backdrop-filter: blur(40px);
}

.slidersControls{
    background: white;
    position: absolute;
    bottom: 40px;
    width: 100%;
    display: flex;
    max-width: 600px;
    width: calc(100vw - 60px - 60px);
}

.slidersControls>.photoArrowContainer{
    display: flex;
    align-items: flex-end;
    justify-content: center;

    margin: 0 30px;
    width: 100%;
    position: relative;
}
.slidersControls div.photoArrow {
    font-size: 46px;
    font-weight: bold;

    width: 50px;
    height: 50px;
    position: absolute;

    user-select: none;
    cursor: pointer;

    transition: all 0.2s ease-in-out;

    display: flex;
    align-items: flex-end;
    justify-content: center;


    background-size: 22px;
    background-position: center;
    background-repeat: no-repeat;
}

.slidersControls div.photoArrow:hover {
    opacity: 0.6;
    width: 40px;
}

.slidersControls div.photoArrow.next {
    right: 0;
    bottom: 0;

    background-image: url(../assets/imgs/icons/arrow.svg);
}

.slidersControls div.photoArrow.prev {
    left: 0;
    bottom: 0;

    background-image: url(../assets/imgs/icons/arrow.svg);
    rotate: 180deg;
}

#startSlidersContainer[sliderGlobalIndex="0"] .slidersControls .photoArrowContainer div.photoArrow.prev {
    opacity: 0.3;
    pointer-events: none;
}
#startSlidersContainer[sliderGlobalIndex="1"] .slidersControls .photoArrowContainer div.photoArrow.next {
    opacity: 0.3;
    pointer-events: none;
}

.slidersControls>.photoArrowContainer>.slidesBarContainer{
    height: 1px;
    background-color: #ffffff4d;

    width: calc(100% - 120px);
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    margin: auto;

    display: flex;
}
.slidersControls>.photoArrowContainer>.slidesBarContainer>.slidesBar{
    /* background-color: #ffffff; */
    background-color: #000000;
    transition: all 1s ease;
    position: relative;
    left: unset;
}
#startSlidersContainer[sliders="2"] .slidersControls>.photoArrowContainer>.slidesBarContainer>.slidesBar{
    width: 50%;
}
#startSlidersContainer[sliders="3"] .slidersControls>.photoArrowContainer>.slidesBarContainer>.slidesBar{
    width: 33%;
}
/* .slidersControls>.photoArrowContainer[photoValue="0"]>.slidesBarContainer{
    justify-content: flex-start;
}
.slidersControls>.photoArrowContainer[photoValue="1"]>.slidesBarContainer{
    justify-content: flex-end;
} */
#startSlidersContainer[sliderGlobalIndex="0"] .slidersControls>.photoArrowContainer>.slidesBarContainer{
    justify-content: flex-start;
}
#startSlidersContainer[sliderGlobalIndex="1"] .slidersControls>.photoArrowContainer>.slidesBarContainer>.slidesBar{
    transform: translateX(100%);
}
#startSlidersContainer[sliderGlobalIndex="2"] .slidersControls>.photoArrowContainer>.slidesBarContainer>.slidesBar{
    transform: translateX(200%);
}

.greenBtn{
    background-color: #3D4D46;
    width: fit-content;
    padding: 15px 40px !important;
    text-align: center;
}



#menuSSback.opened.menuSSback{
    position: absolute;
    display: flex !important;
    left: 24px;
    width: 30px;
    height: 100%;
    align-items: center;
    pointer-events: all;
    cursor: pointer;
    top: 20px;
    height: auto;
    padding: 12px;
}


#smallScreensDiv.opened #menuDiv.imgQlt>div.menuImgQltContent{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    row-gap: 8vh;

    /* CHANGES LOG V5 */
    /* width: 100%; */
    width: 80%;
    text-align: center;
    font-family: 'Bentley_Light';
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0em;
}
.menuImgQltContent #settingsBtn.disabled #tooltipOptions{
    display: none;
}
.menuImgQltContent #settingsBtn.disabled #tooltipDisabled{
    display: flex;
}

#settingsMenu{
    display: flex;
    flex-direction: column;
    position: relative;
    /* row-gap: 20px; */
}
#settingsMenu>.btnSettings{
    cursor: pointer;
    padding: 20px;
}



.slidesBarContainer{
    height: 100%;
    background: #ffffff4d;
    position: absolute;
    width: 1px;
    margin: 0;
}
.slidesBar{
    background: #FFFFFF;
    transition: all 1s ease;
    width: 3px;
    left: -1px;
    position: absolute;
}

.slidesBarContainer[elements="2"] .slidesBar{
    height: 50%;
}
.slidesBarContainer[elements="3"] .slidesBar{
    height: 33.3%;
}
.slidesBarContainer[selectedElem="0"] .slidesBar{
    transform: translateY(0%);
}
.slidesBarContainer[selectedElem="1"] .slidesBar{
    transform: translateY(100%);
}
.slidesBarContainer[selectedElem="2"] .slidesBar{
    transform: translateY(200%);
}


#controls360{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;
    column-gap: 20px;
}

#krpanoControls{
    display: flex;
    justify-content: space-between;
    row-gap: 50px !important;
}
#krpanoControls>#controls360>div:not(:nth-child(2)){
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;

    row-gap: 25px;
    width: 100%;
}
#krpanoControls>#controls360>div:not(:nth-child(2))>div{
    align-items: center;
}
#krpanoControls>#controls360>div:nth-child(3){
    /* align-items: flex-end; */
}
#krpanoControls>#controls360>div:nth-child(3)>div.textAndImg{
    align-self: flex-end;
}
#krpanoControls>#controls360>div:not(:nth-child(2))>img{
    max-height: 89px;
    align-self: flex-start;
}
/* CHANGES LOG V5 Commented */
/* #krpanoControls>#controls360>div>div{
    max-width: 120px;
} */
#smallScreensDiv.opened #menuDiv.controls>div.menuControlsContent>div{
    max-width: none;
}

#krpanoControls{
    color: #FFFFFF;
    font-family: 'Bentley_Light';
    font-size: 14px;
    line-height: 19px;
    background-color: #00000055;
    padding: 100px;
}
#krpanoControls .controlsTitle{
    font-size: 28px;
    line-height: 34px;

    margin-bottom: 4%;

    border-bottom: solid 1px #4D4D4D;
}

#controlsNavigation{
    display: flex;
    flex-direction: row;
    border-top: 1px solid #4D4D4D;
    padding-top: 20px;
    column-gap: 80px;
}
.textAndImg{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    column-gap: 10px;
}
.textAndImg>*{
    max-width: 200px;
}

#controls360>:nth-child(1){
    text-align: left;
}
#controls360>:nth-child(3){
    text-align: right;
}
#controlsNavigation>:nth-child(1){
    text-align: right;
}
#controlsNavigation>:nth-child(2){
    text-align: left;
}
/* #controlsNavigation>:nth-child(2)>div{
    max-width: 150px;
} */


#settingsBtn.disabled{
    opacity: 1 !important;
}

.menuLanguageContent input[type="radio"]:checked + label,
.menuImgQltContent #tooltipOptions>div.selected{
    cursor: default;
    user-select: none;
    pointer-events: none;
    /* font-family: 'Bentley_SemiBold'; */
    background-color: #183319;
    color: white;
}
.menuLanguageContent input[type="radio"] + label,
.menuImgQltContent #tooltipOptions>div{
    cursor: pointer;
    background-color: white;
    color: black;
    /* font-family: 'Bentley_SemiBold'; */
    padding: 10px;
    min-width: 200px;

    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 10px;
}
.menuLanguageContent input[type="radio"]{
    display: none;
}

#smallScreensDiv.opened #menuDiv.lang>div.menuLanguageContent>div{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 700px;
    justify-content: space-between;
    row-gap: 20px;
}

.menuImgQltContent #tooltipOptions{
    display: flex;
    flex-wrap: wrap;
    column-gap: 40px;
    row-gap: 40px;
    justify-content: center;
}

.menuTitle{
    font-size: 32px;
    font-family: 'Bentley_Light';
}

#startSlidersContainer>.slidersControls{
    display: none;
}

#smallScreensDiv #menuDiv.opened>#menuSSback{
    display: none !important;
}

#krpanoControlsMobile{
    display: none !important;
}


.leftColumnModal{
    position: relative;
    display: flex;
    padding: 0;
    align-items: flex-end;
    background: transparent;
    overflow: visible;
}

.sliderContent{
    align-items: flex-end;
}

.sliderContent .contentContainer{
    position: relative;
    padding-top: 25px;
    max-width: 100%;
}
.sliderContent .contentContainer .contentBehind{
    background-color: #FFFFFF55;
    height: 80%;
    width: 80%;
    top: 0;
    z-index: -1;
    right: 0;
    left: unset;
}
.sliderContent .contentContainer .content{
    background: white;
    width: calc(100% - 25px);
    max-height: calc(100vh - 100px); /* CHANGES LOG V5 to fix tablets */
    overflow: auto; /* CHANGES LOG V5 to fix tablets */
}

/* Handle */
.sliderContent .contentContainer .content::-webkit-scrollbar-thumb {
    background-color: #333333;
}

.openIframeSpan::before{
    content: url("../assets/imgs/icons/external-link.svg");
    margin-right: 10px;
}

.externalVideo{
    cursor: pointer;
    text-decoration: underline;

    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
.externalVideo::before{
    content: url("../assets/imgs/icons/play_inline.svg");
    margin-right: 2px;
    margin-left: 10px;
}

#contentModalHotspot.eggHsStyle{
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: flex-end;
    background-blend-mode: multiply;
    background-color: #000000;
    /* transition: all 5s ease; */
}
#modalHotspot.openned #contentModalHotspot.eggHsStyle{
    /* background-color: #FFFFFF; */
    animation: fadeBackground 1s 0.2s forwards;
}
@keyframes fadeBackground {
    0%{
       background-color: #000000; 
    }
    100%{
       background-color: #FFFFFF; 
    }
}
#modalHotspot.openned #contentModalHotspot.eggHsStyle .contentContainer .content{
    /* transform: translate3d(0, 0, 0);
    will-change: transform, backdrop-filter;
    background-color: #00000099; */
    /* animation: backgroundRefresh 1s 1.2s forwards; */
}
@keyframes backgroundRefresh {
    0%{
       background: #000000ff;
    }
    100%{
       background: #00000099;
    }
}
.sliderContent.eggHsStyle .contentContainer .content{
    background: #00000099;
    color: white;
}
.sliderContent.eggHsStyle .contentContainer .content *{
    color: white;
}
.sliderContent.eggHsStyle .contentContainer .content .externalLink{
    filter: invert(1);
}

body{
    margin: 0;
}

.hsBtn{
    margin-top: 10px;
}
.hsBtn>img{
    margin-right: 10px;
}

#effectContainer{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
}


/* .columnedContent{
    overflow: hidden;
}
.columnedContent>*{
    column-count: 3;
    width: calc(3 * 100%);
    transform: translateX(calc(0 * 100% / 3));
} */

.leftColumnModalHeritage{
    margin-bottom: 0;
    margin-top: auto;
}

#fullScreenVideo{
    display: none;
}

@media (hover:hover){

    .iconBtn.animatedBtn:hover>img{
        animation: animatedBtn 0.7s ease-in-out 0s infinite alternate;
    }
    .iconBtn.animatedBtn.rotation:hover>img{
        animation: animatedBtnFree 0.7s ease-in-out 0s infinite alternate;
}

}

@keyframes animatedBtnFree {
    from {transform: scale(1) rotate(0deg);}
    to {transform: scale(1.3) rotate(20deg);}
}

.uniqueSliderBtn{
    transition: all 0.5s 1s ease-in-out;
}

/* CHANGES LOG V5 Insert closeHotspotBtn in contentModal */
#contentModalHotspot #closeHotspot{
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}
#contentModalHotspot #closeHotspot:hover{
    animation: animatedBtn 0.7s ease-in-out 0s infinite alternate;
}

@media (max-width:800px) or (max-height:400px){
    *{
        --bottomBarHeight: 50px;
    }
    #bentleyLogo{
        width: 100px;
    }
    #smallScreensDiv>.bottomSSdiv{
        margin-bottom: 1vh;
    }
    .generalButton{
        padding: 8px;
    }
    #mapBtn{
        padding: 0px 12px;
    }
    #startSlidersContainer>.slider{
        max-height: calc(100% - 50px);
    }
    #modalHotspot.openned #contentModalHotspot:has(> .leftColumnModal) > .rightColumnModal{
        min-height: auto;
    }
    #sceneDetailsBtn{
        padding: 1vh 0; /* CHANGES LOG V5 */
        padding-bottom: 0px; /* CHANGES LOG V5 */
        margin-top: 0px; /* CHANGES LOG V5 */
    }
    #sceneDetailsContainer.openned { /* CHANGES LOG V5 */
        margin-top: 0vh;
    }
    #sceneDetailsContainer>#currentSceneDescription{
        margin-top: 1vh;
    }
    #currentSceneDescription{ /* CHANGES LOG V5 */
        padding-bottom: 1vh;
    }
    .rightColumnModal>img{
        max-height: 80vh;
    }
    #fullScreenVideo{
        position: absolute;
        bottom: 10px;
        right: 10px;
        z-index: 10;
    }
    #fullScreenVideo.videoType{
        display: block;
    }
    #fullScreenVideo>div:not(.fullscreen)>:last-child{
        display: none;
    }
    #fullScreenVideo>div.fullscreen>:first-child{
        display: none;
    }
    #smallScreensDiv #menuDiv.opened>#menuSSback.opened.menuSSback{
        display: flex !important;
    }
    #startSlidersContainer>.slidersControls{
        display: flex;
        width: 100%;
        height: 50px;
        background: transparent;
        position: relative;
        bottom: 0;
        justify-self: center;
    }

    .menuLanguageContent input[type="radio"]:checked + label,
    .menuImgQltContent #tooltipOptions>div.selected{
        background: none;
        border-bottom: solid 1px white;
    }
    .menuLanguageContent input[type="radio"] + label,
    .menuImgQltContent #tooltipOptions>div{
        background: none;
        color: white;
    }
    .menuImgQltContent #tooltipOptions img{
        display: none;
    }

    #menuSSback:not(.opened) ~ .menuContent{
        width: 100% !important;
    }
    #menuSSback:not(.opened) ~ .contents{
        display: none !important;
    }
    #menuSSback.opened ~ .menuContent{
        display: none !important;
    }
    #menuSSback.opened ~ .contents{
        width: 100% !important;
    }

    #smallScreensDiv.opened #menuDiv.lang>div.menuLanguageContent>div{
        justify-content: center;
    }
    .menuImgQltContent #tooltipOptions{
        justify-content: center;
        row-gap: 20px;
    }

    #settingsMenu #slidesBarSettings{
        display: none;
    }

    .sliderContent .slidersControls{
        display: none;
    }


    #startSlidersContainer{
        padding: 20px;
        padding-bottom: 0px;
    }
    .slider>.sliderContent{
        padding: 20px;
    }
    .slider>.sliderContent .content{
        padding: 20px;
    }

    #controls360{
        flex-direction: column;
    }
    #diagramContainer{
        display: none;
    }

    body.startSliders #smallScreensDiv .topSSdiv>img{
        opacity: 0;
    }

    #krpanoControls{
        display: none !important;
    }
    #krpanoControlsMobile{
        display: flex !important;
    }

    #krpanoControlsMobile .textAndImg{
        flex-direction: column;
        margin-top: 20px;
        align-items: center;
    }
    #krpanoControlsMobile .textAndImg img{
        margin-bottom: 10px;
    }
    /* #krpanoControlsMobile>div .textAndImg:first-child{
        flex-direction: column-reverse;
    } */
    .textAndImg>*{
        max-width: unset;
    }

    #contentModalHotspot{
        padding: 25px;
        background-color: #00000033;
    }

    /* #startSlidersContainer>.slider{
        aspect-ratio: 1.5;
        height: auto;
    } */

    .sliderContent .contentContainer .contentBehind{
        display: none;
    }
    .sliderContent .contentContainer .content{
        width: 100%;
        /* max-height: calc(100vh - 400px); */ /* CHANGES LOG V5 Commented */
        overflow: auto;
        background: none;
        min-height: 180px; /* CHANGES LOG V5 */
        max-height: calc(100vh - 100px); /* CHANGES LOG V5 to fix mobile bar navigation heights */
    }
    /* Handle */
    .sliderContent .contentContainer .content::-webkit-scrollbar-thumb {
        background-color: #FFFFFF;
    }

    .slidersControls>.photoArrowContainer{
        margin: 0 2vw;
    }

    /* CHANGES LOG V5 */
        .sliderContent .contentContainer .content .externalLink{
            filter: invert(1);
        }
        #startSlidersContainer .sliderContent .content{
            min-height: auto;
        }
        #startSlidersContainer .sliderContent .content > p{
            margin: 0.5em 0;
        }
        .slider>.sliderContent .contentBehind{
            display: none;
        }

    .sliderContent .contentContainer{
        padding: unset;
    }

    .eggHsStyle .leftColumnModal{
        display: none;
    }

    .titleModal, .textModal{
        color: white;
    }

    .leftColumnModal{
        min-width: 250px;
    }

    #smallScreensDiv>.topSSdiv{
        align-items: flex-start;
    }
}


@media (max-height:600px) and (min-height:401px){
    #startSlidersContainer>.slider>.sliderContent{
        padding-top: 20px;
    }
    #startSlidersContainer{
        padding: 30px;
    }
    .slider>.sliderContent .contentBehind{
        top: calc(45px - var(--offset));
    }
    #startSlidersContainer .sliderContent .content{
        min-height: calc(465px - 75px - 40px - 20px);
    }
    .slidersControls{
        bottom: 120px;
    }
}