@import url('https://fonts.googleapis.com/css2?family=Alumni+Sans+Pinstripe&family=Bebas+Neue&family=Lexend:wght@100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    cursor: none!important;
}

h1, h2, h3, a{
    font-family: 'Bebas Neue', cursive; 
    font-weight: 300!important; 
}

p, figcaption, input{
    /* font-family: 'Alumni Sans Pinstripe', sans-serif; */
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
}

figcaption{
    font-weight: 200;
    font-size: 18px;
    padding-top: 5px;
    margin-bottom: -14px;
}

.main_title_home{
    color: #020304!important; 
}

#burger_span{
    user-select: none;
}

html,
body {
    overflow: hidden;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    outline: none;
}

body h1 {
    /* position: fixed; */
    /* top: 8px; */
    /* left: 50px; */
    z-index: 6;
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    user-select: none;
    color: #fff;
}

body h1 > span {
    text-transform: none;
    opacity: .8;
    font-weight: 300;
    color: #ffffff;
    font-size: 1.75rem;
    letter-spacing: 0.65px;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #020304;
}

body {
    padding: 0;
    margin: 0;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: url("https://catacombes.xyz/assets/images/tombePhilibertAspairt_catacombes.webp")
        center center;
    background-size: cover;
    font-family: sans-serif;
    background-repeat: no-repeat;
    font-weight: 300;
}

a {
  text-decoration: none;
}

.wrapper {
  display: flex;
  gap: 25px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

.menu,
.menu > div {
  padding: 0.4rem;
  border-radius: 1.8rem;
}

.menu:hover {
  padding: 0.6rem;
  border-radius: 1.8rem;
}

.menu > div > div {
  font-size: 20px;
  color: white;
  padding: 0.4rem 0.6rem;
  border-radius: 0.8rem;
  transition: all 0.1s ease-in;
}

.menu > div > div:hover {
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: inset -2px -2px 2px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(2px);
}

.dock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 2rem;
  padding: 0.6rem;
}

.dock,
.dock > div {
  border-radius: 2rem;
}

.dock:hover {
  padding: 0.8rem;
  border-radius: 2.5rem;
}

.dock:hover > div {
  border-radius: 2.5rem;
}

.dock img {
  width: 75px;
  padding: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.dock img:hover {
  transform: scale(0.95);
  transform-origin: center center;
}

.button {
  padding: 1.5rem 2.5rem;
  border-radius: 3rem;
}

.button,
.button > div {
  border-radius: 3rem;
}

.button:hover {
  padding: 1.8rem 2.8rem;
}

.button:hover > div {
  border-radius: 4rem;
}

.button svg {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.button:hover svg {
  transform: scale(0.95);
}

@keyframes moveBackground {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: 0% -500%;
  }
}

.icon-tabler-search {
    position: absolute;
    right: 5px; 
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
}

.parentDivRoomInfo:hover, .parentDivPrezSecond:hover{
    box-shadow: 0 8px 32px 0 rgba( 153, 157, 196, 0.5 );
    backdrop-filter: blur( 3px );
    -webkit-backdrop-filter: blur( 3px );
}

.parentDivPrezSecond:hover{
    cursor : pointer;
}

.loading-bar{
    z-index: 2;
    position: relative;
    transform-origin: left center; 
    will-change: transform;
    width: 100%!important;
    height: 100vh!important;
    transition: opacity 0.5s ease-in-out;
}

.loading-bar.ended{
    opacity: 0;
}

#loader_inside_white{
    width: 0%;
    height: 10px;
    background-color: #fff;
    transition: width .25s linear; 
}

#loading_bar_percent{
    font-size: 20vh;
    color: #ffffff;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    right: 0;
    position: absolute;
    width: 42vh;
    top: 77%;
    transition: opacity 0.5s ease-in-out; 
}

#loader_div_main{
    width: 30vh;
    height: 10px;
    border: 1px solid #fff;
    top: 50%;
    position: absolute;
    right: 46%;
}
#loader_inside_white{
    width: 0%;
    height: 10px;
    transition: width .5s ease-out;
    background-color: #fff;
}

.grass_loading_elem{
    width: 64px;
    position: absolute;
    top: 185px;
    left: -30px;
}

.grass_loading_elem_second{
    width: 64px;
    height: 50px;
    position: absolute;
    top: 169px;
    left: -33px;
}

.glass_morph_style{
    background: rgba( 255, 255, 255, 0.25 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    border-radius: 75px 75px 10px 10px;
    border: 3px solid rgb(255 255 255 / 55%); 
}


.buttonRedirect3D:hover{
    box-shadow: 0 8px 32px 0 rgba( 153, 157, 196, 0.37 );
    backdrop-filter: blur( 3px );
    -webkit-backdrop-filter: blur( 3px );
}

.imgRoom{
    grid-area: 2 / 4 / 5 / 7;
    background-size: contain;
    width: 65%; 
    height: 90%; 
    border-radius: 5px;
    margin: auto;
}

ul{
    list-style-type: none;
    text-align: left;
    padding-left: 10px;
}

.display_all_rooms_main_div{
    display: inline-flex; 
    background: rgba( 255, 255, 255, 0.25 );
    /* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
    backdrop-filter: blur( 2px );
    -webkit-backdrop-filter: blur( 2px );
    border-radius: 10px;
    /* border: 1px solid rgba( 255, 255, 255, 0.18 ); */
    cursor: pointer;
    transition: 0.5s box-shadow ease-out, 1s background ease-out;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
}

.display_all_rooms_main_div:hover{
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.35); 
    background: rgba( 255, 255, 255, 0.9 );
}

.small_name_room_homepage{
    margin: auto;
}

.display_all_rooms_small{
    position: fixed; 
    right: -180px; 
    top: 5rem; 
    width: 10rem;
    background: #ffffff40; 
    z-index: 1; 
    height: 77%; 
    border-radius: 10px; 
    max-height: 76%; 
    overflow-y: scroll;
    padding: 5px 8px;
    opacity: 0;
    transition: 0.8s right ease-out, 0.7s opacity ease-out;
}

.display_all_rooms_small::-webkit-scrollbar {
    display: none;
}

.small_cards_rotation{
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}

.card_0{
    z-index: 1;
}

.display_all_rooms_button, .display_infos_button{
    position: fixed;
    right: 0px;
    top: 325px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    z-index: 1;
    background: #FFF;
    padding: 20px 5px;
    border-radius: 5px 0 0 10px;
    text-transform: uppercase;
    display: inline-flex;
    opacity: 1;
    -moz-user-select: none; 
    -webkit-user-select: none;
    -ms-user-select: none; 
    user-select: none; 
    transition: 0.8s right ease-out, 0.7s opacity ease-out;
}

.small_image_room_homepage{
    width: 35%;
    border-radius: 10px; 
}

.marginPageimages{
    background-size: cover; 
    background-position: center; 
    margin: 4px; 
    border-radius: 4px;
}

.iconeBurgerMenu{
    display: none;
    /* visibility: hidden; */
    text-align: center;
    margin-left: 1em;
    position: fixed;
    bottom: 1em;
}

.iconeBurgerMenu a{
    padding: 0 1rem;
}
  
#iconeLinkedin:hover svg {
    border-radius: 5px!important;
}

.icon-tabler-brand-linkedin:hover{
    border-radius: 5px;
}
  
#iconeLinkedin:hover svg path:first-child {
    transition: 0.3s;
    fill: #FF882A;
    stroke-width: 2px;
    stroke: #FFF;
}


#iconeLinkedin:hover svg path{
    transition: 0.3s;
    stroke: #000;
}

#iconeSite:hover svg path {
    transition: 0.3s;
    fill: #0048fc;
    stroke: #000;
}

#iconeSite:hover svg{
    border-radius: 5px;
    stroke: #000;
}

#iconeLinkedin:hover {
    stroke: #FFFFFF!important;
}

#iconeGit:hover svg path{
    transition: 0.3s;
    fill: #fdcfb3;
}

#iconeGit:hover svg path:nth-child(2) {
    transition: 0.3s;
    stroke: #000;
}

#iconeGit:hover svg{
    border-radius: 5px;
}

#iconeMail:hover svg path:nth-child(2) {
    transition: 0.3s;
    fill: #f92a5e;
}

#iconeMail:hover svg path{
    transition: 0.3s;
    fill: #f92a5e;
}

#iconeMail:hover svg path:nth-child(2), #iconeMail:hover svg path:nth-child(3) {
    transition: 0.3s;
    fill: #f92a5e;
    stroke: #000;
}

#iconeMail:hover svg{
    border-radius: 5px;
}

.textStroke{
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: #020304;
    color: #fff;
}

.parentMap {
    display: grid;
    background-image: url("https://catacombes.xyz/assets/images/paris.png");
    width: fit-content;
    background-size: contain;
    background-repeat: no-repeat;
    margin: auto;
    border: #000000 solid 7px;
    place-self: center;
}

.petitMontrouge{
    grid-area: 21 / 14 / 28 / 17;
    background-color: rgb(115, 255, 0, 0.33);
}

.montparnasse{
    grid-area: 17 / 14 / 21 / 18;
    background-color: rgb(39, 83, 243, 0.33);
}

.notreDameDesChamps{
    grid-area: 12 / 14 / 17 / 17;
    background-color: rgb(231, 16, 16, 0.33);

}

.valDeGrace{
    grid-area: 14 / 17 / 17 / 19;
    background-color: rgb(223, 216, 13, 0.33);
}

.salpetriere{
    grid-area: 18 / 21 / 21 / 26;
    background-color: rgb(39, 235, 243, 0.33);
}

.gare{
    grid-area: 21 / 22 / 28 / 27;
    background-color: rgb(207 39 243 / 33%);
}

.maisonBlanche{
    grid-area: 21 / 19 / 28 / 22;
    background-color: rgb(255 152 0 / 0.33);
}

.textCenter{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 10px;
    margin: 2px;
    transition: box-shadow 0.5s ease-out, backdrop-filter 0.5s ease-out;
}

.textCenter:hover{
    box-shadow: 0 8px 32px 0 rgba( 153, 157, 196, 0.5 );
    backdrop-filter: blur( 3px );
    -webkit-backdrop-filter: blur( 3px );
}

.districtName{
    color: #484848;
    opacity: 1!important;
    text-align: center;
    margin: 0;
    font-size: 1.2rem;
    /* -webkit-text-stroke: 0.5px #000; */
}

/* Small map */
.montrougeDiv{
    display: grid;
    /* margin-top: 2em; */
    display: none;
    opacity: 0;
    grid-column-gap: 4px;
    grid-row-gap: 5px;
    margin: auto;
    /* width: 100%; */
    /* margin: 2em auto 0 auto; */
    /* transition: opacity 1s ease-out; */
}

.imageMapMontrouge{
    grid-area: 3 / 4 / 11 / 7;
    background-image: url("https://catacombes.xyz/assets/images/petitMontrouge.png");
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
    /* border: #000000 solid 11px; */
}

.parentDivPrezSecond{
    display: grid;
    grid-template-columns: repeat(3, 0.8fr) 0.7fr;
    grid-template-rows: repeat(3, 1fr);
    padding: 2px 0px 2px 10px;
    background: rgba( 255, 255, 255, 0.5 );
    border-radius: 10px;
    border: 0.3px solid #d2caca;
    -moz-user-select: none; 
    -webkit-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    transition: box-shadow 0.5s ease-out, backdrop-filter 0.5s ease-out;
}

.parentDivPrezMain{
    grid-area: 3 / 1 / 4 / 3;
}

.titleRoomSmallDiv{
    grid-area: 1 / 1 / 2 / 4;
}

.locationRoomSmallDiv{
    grid-area: 2 / 1 / 4 / 4;
}

.imageRoomSmallDiv{
    grid-area: 1 / 4 / 4 / 5;
    width: 72%;
    margin: auto;
    padding-top: 3px;
    margin-right: 5px;
}

.depthSmallRoom{
    grid-area: 2 / 3 / 4 / 4;
}

.pointRoom{
    z-index: 99;
}

.gridAreaPrecise{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(4, 0.85fr);
    height: 100%;
}

.retourButton{
    background: #ffffff;
    border-radius: 5px;
    position: absolute; 
    font-family: 'Bebas Neue', cursive;
    text-transform: uppercase;
    margin-top: 6px; 
    margin-left: 5px;
    color: #000; 
    text-decoration: none;
    /* grid-area: 1 / 1 / 3 / 2;  */
    left: 5px;
    -moz-user-select: none; 
    -webkit-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
}

.parent_lost_page {
    display: grid;
    grid-template-columns: repeat(10, 10%);
    grid-template-rows: repeat(10, 1fr);
    overflow-y: revert;
    cursor: none;
    max-height: fit-content;
    width: 98%;
    margin: 0px 1%;
    border-radius: 20px;
    /* margin: 5vw; */
    user-select: none;
}

/* Custom cursor */
.custom-cursor {
    position: fixed;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: difference;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: white;
    transition: transform 350ms ease;
    transform: translate(-50%, -50%) scale(0.3);
    z-index: 1000;
    cursor: none!important;
}
  
.custom-cursor--link {
    transform: translate(-50%, -50%) scale(1);
    cursor: none!important;
}

#VRButton{
    left: calc(50% - 80px)!important;
    right: 0.6rem!important;
    background: #b7b7b770!important;
    color: rgb(240, 240, 240)!important;
    border: 1px solid rgba(200, 200, 200, 0.857)!important;
}

.selected_room_on_list{
    background: rgb(255 255 255 / 80%);
}

.icon-tabler-square-rounded-x{
    position: absolute;
    top: 3.5%;
    right: 14.9%;
    z-index: 99999;
    mix-blend-mode: hard-light;
}

.close_icon_infos{
    top: -22px; 
    right: -20px;
    mix-blend-mode: unset;
    cursor: pointer;
}

.arrow{
    display: none; 
    opacity: 0;
}

.background_image_lost{
    background-image: url("https://catacombes.xyz/assets/images/plan_catacombes_interdites_grs.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 20px;
    filter: brightness(0.6);
    grid-area: 1 / 1 / 14 / 11;
}


.div_title_lost_page{
    grid-area: 5 / 4 / 8 / 8;
    background: rgba( 255, 255, 255, 0.2 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 6px );
    -webkit-backdrop-filter: blur( 6px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    border-radius: 20px;
    padding: 20px;
    user-select: none;
    transition: background .5s ease-out, box-shadow .5s ease-out;
}

.div_title_lost_page:hover{
    background: #FFF;
    box-shadow: 0 8px 10px 3px rgb(255 255 255 / 37%);
}

.div_title_lost_page p{font-size: 1.1vw;}

.link_paloma_sanchez{
    font-family: 'Alumni Sans Pinstripe', sans-serif;
    text-decoration: none;
    color: #000;
    font-size: 18px;
}

.link_paloma_sanchez:visited{
    color: #000;
}

.button_return_site{
    transition: box-shadow 0.5s ease-out, background-color 0.5s ease-out, border 0.5s ease-out; 
    border-radius: 20px;
    padding: 0 20px;
    width: fit-content;
    text-align: center;
    border: 1px solid #676767; 
}

.button_return_site:hover{
    background: #ffffff;
    /* backdrop-filter: blur( 10px );
    -webkit-backdrop-filter: blur( 10px ); */
    box-shadow: 0 0px 32px 0 rgba( 31, 38, 135, 0.5 );
    border: 1px solid #fff; 

}

.text_lost{
    font-size: 3vw;
}

.button_return_site{
    font-size: 2vw;
    text-align: center;
    margin: auto;
    margin-top: 20px;
}

.connect_computer{
    display: none;
}

#language_site{
    position: fixed; 
    top: 0.6rem; 
    right: 0.4rem; 
    z-index: 4;
    background: #f1f1f1; 
    border-radius: 10px;
    padding: 7px; 
    font-size: 0.85rem; 
    font-weight: 900;
    text-transform: uppercase; 
}

#language_site:hover{
    box-shadow: 0 0 10px #e8e8e8;
    background: #101010; 
    color: #FFF;
}

.div_infos_catacombes{
    background: #fff;
    position: fixed;
    z-index: 999;
    margin: 10%;
    width: 80%;
    height: 60%;
    font-size: 25px;
    border-radius: 10px;
    display: none; 
    opacity: 0;
    transition: opacity 0.5s ease-out, margin-top 1s ease-out;
}

.display_infos_button{
    top: 250px;
    border-radius: 10px 0 0 5px;
}

.link_twitter:visited, .link_facebook:visited, 
.link_twitter:link, .link_facebook:link
.div_sms_ios_share_link:link, .div_sms_ios_share_link:link{
    color: #FFF;
}

.text_en, .text_fr{
    max-height: -webkit-fill-available;
    overflow-y: scroll;
    display: none;
}

/* Mode paysage */
@media only screen and (min-device-width: 375px) and (max-device-width: 428px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
    .parentDivRoomInfo{
        width: 70%; 
    }

    .parentTextExplications{
        height: 14em;
    }

    #bigThanks{
        width: 26em;
        position: relative;
        left: -8em;
        margin: 1em;
    }

    body input ~ nav > ul > li > a{
        padding: 0.3rem 2.4rem;
    }

    body input ~ nav > ul{
        top: 17%;
    }

    .districtName{
        font-size: 0.5rem;
    }

    .montrougeDiv{
        margin-top: 0.5em;
        grid-column-gap: 10px;
        grid-row-gap: 8px;
    }

    .titleRoomSmallDiv{
        font-size: 0.7rem;
    }

    .parentDivPrezSecond{
        height: 1.6rem;
    }

    .imageRoomSmallDiv{
        width: 50%;
    }

    #WEBXRButton{
        top: 2.5%!important;
        bottom: none; 
        left: 76%!important;
        height: 10px;
		background: #97979770!important;
        color: rgb(75, 75, 75)!important;
        border: 1px solid rgb(75, 75, 75)!important;
        padding: 8px 6px 14px 6px!important;
    }

    .icon-tabler-chevron-left{
        left: 3%;
        z-index: 9999;
    }
    
    .icon-tabler-chevron-right{
        right: 3%;
        z-index: 9999;
    }

    .icon-tabler-square-rounded-x{
        top: 2.8%;
        right: 14.5%;
    }

    .icon-tabler-chevron-left, .icon-tabler-chevron-right{
        top: 30%;
    }

    .display_all_rooms_small, .display_all_rooms_button{
        display: none; 
    }

    .explication_text_card_second{
        display: none;
    }

    .explication_cards_video_div{
        display: none;
    }

    .connect_computer{
        display: block;
        font-size: 5vw!important;
        width: 40rem;
        margin: auto;
        margin-top: -5%;
        margin-left: 20%;
    }

    .display_infos_button{
        display: none;
    }

    .display_links_page{
        top: 30%; 
        text-align: center;
        border-radius: 5px 0px 0 5px;
        padding: 10px 4.5px ;
    }

    .div_share_link{
        display: none;
    }

    .loading-bar{
        position: absolute;
        top: 60px;
        left: 40.5%;
        width: fit-content;
        background: transparent;
        z-index: 2;
        opacity: 1;
        transition: opacity 2s ease-out;
    }

    #VRButton{
        display: none!important;
    }
}

/* Mode portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 428px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
    .parentDivRoomInfo{
        display: inline-grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(9, 1fr);
        width: 80%;
        height: 70%;
    }

    .titleRoom{
        grid-area: 1 / 1 / 2 / 6;
    }

    .textRoom{
        grid-area: 2 / 1 / 6 / 6;
        height: inherit;
    }

    .imgRoom{
        grid-area: 6 / 3 / 9 / 6;
        width: 70%;
        height: 90%;
        margin-right: auto;
        margin-left: auto;
    }

    .adressRoom{
        grid-area: 6 / 1 / 9 / 3;
    }

    .depthRoom{
        grid-area: 9 / 1 / 10 / 3;
    }

    .buttonVR{
        grid-area: 9 / 3 / 10 / 4;
    }

    .button3D{
        grid-area: 9 / 4 / 10 / 5;
    }

    .buttonAR{
        grid-area: 9 / 5 / 10 / 6;
    }

    .marginPageimages{
        height: 5em;
    }

    #bigThanks{
        width: 15em;
        position: relative;
        left: -6em;
        margin: 1em;
    }

    .parentTextExplications{
        height: 80em;
        grid-template-rows: repeat(5, 6em);
    }

    .image11, .image14, .image12{
        height: 11em;
    }

    body input:checked ~ nav{
        width: 25rem;
    }

    .iconeBurgerMenu{
        left: 4.3em!important;
    }

    .districtName{
        font-size: 0.7rem;
    }
    #VRButton{
        display: none;
    }

    .icon-tabler-chevron-left{
        left: -5%;
        z-index: 9999;
    }
    
    .icon-tabler-chevron-right{
        right: -5%;
        z-index: 9999;
    }

    .display_all_rooms_small, .display_all_rooms_button{
        display: none; 
    }

    /* Cards page */
    .card_page{
        overflow: scroll !important;
    }

    .parent_text_explications_cards{
        grid-template-rows: repeat(8, 1fr);
        height: max-content;
        overflow-y: scroll!important;
    }

    .explication_cards_text_div{
        grid-area: 1 / 1 / 4 / 11;
        margin: unset;
        padding: 10px;

    }

    .explication_text_card_second{
        width: 100%;
        padding: 20px 0; 
        height: 68vh;
        margin-left: unset;
    }

    .text_explication_card, .textCard{
        font-size: 4.5vw;
        /* padding-bottom: -4rem; */
    }

    .div_display_card_main{
        /* height: fit-content;
        margin-left: 1rem;
        margin-top: 0.6rem;
        margin-bottom: 0.8rem; */
        height: fit-content;
        /* display: inline-flex; */
        min-height: 5vh;
        margin: auto;
    }

    .div_display_card_main h3{
        font-size: 5vw;
    }

    .display_all_tracts_div{
        display: inline-flex;
        margin: -2vh 5vh 0 5vh;
    }

    .tract_card_V1{
        width: 3rem;
    }

    .tract_card_V1{
        padding-right: 0.5rem;
    }

    .explication_cards_video_div{
        grid-area: 3 / 1 / 8 / 11; 
    }

    .card-front_v1, .card-front_v2, 
    .card-front_v3{
        height: 50vh; 
        width: 300%;
        margin-top: 2rem;
        margin-left: 10px;
    }

    .close_card_viewer_v1, .close_card_viewer_v2, 
    .close_card_viewer_v3{
        right: 30px;
    }

    .explication_cards_video_div{
        display: none;
    }

    .connect_computer{
        display: none;
    }

    .display_infos_button{
        display: none;
    }

    .display_links_page{
        top: 95%; 
        right: 30%;
        display: block;
        text-align: center;
        border-radius: 5px 5px 0 0px;
        padding: 4.5px 10px ;
    }

    .div_facebook_share_links, .div_twitter_share_links, 
    .div_sms_ios_share_link, .div_whatsapp_share_link{
        padding: 0px 6px;
    }

    .div_share_link{
        display: none;
    }

    .loading-bar{
        position: absolute;
        top: 80px;
        left: 29.5%;
        width: fit-content;
        background: transparent;
        z-index: 2;
        opacity: 1;
        transition: opacity 2s ease-out;
    }

    #VRButton{
        display: none!important;
    }
}

@media screen and (max-width: 600px)
{
    .display_all_rooms_small{
        display: none; 
    }

    .display_infos_button{
        display: none;
    }

    .div_share_link{
        display: none;
    }
}

@media screen and (orientation: portrait){
    .display_links_page{
        top: 95%; 
        right: 30%;
        display: block;
        text-align: center;
        border-radius: 5px 5px 0 0px;
        padding: 4.5px 10px ;
    }

    .div_share_link{
        display: none;
    }

    #close_message_turn_mobile{
        position: absolute;
        top: 0;
        right: 0;
    }
}