@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;600;700;800;900&family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');


/*
MENU BUGER
 */

 body
 {
   margin: 0;
   padding: 0;
   
   /* make it look decent enough */
   background: #141414;
   color: #fff;
   font-family: 'Montserrat', sans-serif;
 }
 
 #menuToggle
 {
   display: block;
   position: relative;
   top: 0px;
   left: 50px;
   
   z-index: 1;
   
   -webkit-user-select: none;
   user-select: none;
 }
 
 #menuToggle a
 {
   text-decoration: none;
   color: #fff;
   
   transition: all 0.3s ease;
 }
 
 #menuToggle a:hover
 {
   font-weight: bold;
 }
 
 
 #menuToggle input
 {
   display: block;
   width: 40px;
   height: 32px;
   position: absolute;
   top: -7px;
   left: -5px;
   
   cursor: pointer;
   
   opacity: 0; /* hide this */
   z-index: 2; /* and place it over the hamburger */
   
   -webkit-touch-callout: none;
 }
 
 /*
  * Just a quick hamburger
  */
 #menuToggle span
 {
   display: block;
   width: 33px;
   height: 4px;
   margin-bottom: 5px;
   position: relative;
   background: #FFF;
   border-radius: 3px;
   
   z-index: 1;
   
   transform-origin: 4px 0px;
   
   transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
               background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
               opacity 0.55s ease;
 }
 
 #menuToggle span:first-child
 {
   transform-origin: 0% 0%;
 }
 
 #menuToggle span:nth-last-child(2)
 {
   transform-origin: 0% 100%;
 }
 
 /* 
  * Transform all the slices of hamburger
  * into a crossmark.
  */
 #menuToggle input:checked ~ span
 {
   opacity: 1;
   transform: rotate(45deg) translate(-2px, -1px);
   background: #fff;
 }
 
 /*
  * But let's hide the middle one.
  */
 #menuToggle input:checked ~ span:nth-last-child(3)
 {
   opacity: 0;
   transform: rotate(0deg) scale(0.2, 0.2);
 }
 
 /*
  * Ohyeah and the last one should go the other direction
  */
 #menuToggle input:checked ~ span:nth-last-child(2)
 {
   transform: rotate(-45deg) translate(0, -1px);
 }
 
 /*
  * Make this absolute positioned
  * at the top left of the screen
  */
 #menu
 {
   position: absolute;
   width: 300px;
   margin: -100px 0 0 -50px;
   padding: 50px;
   padding-top: 125px;
   
   background: #052C3D;
   list-style-type: none;
   -webkit-font-smoothing: antialiased;
   /* to stop flickering of text in safari */
   
   transform-origin: 0% 0%;
   transform: translate(-100%, 0);
   
   transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
 }
 
 #menu li
 {
   padding: 10px 0;
   font-size: 22px;
 }
 
 /*
  * And let's slide it in from the left
  */
 #menuToggle input:checked ~ ul
 {
   transform: none;
 }

/*######################## HEADER ##################### */

#header-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #141414;
}

#compagny-phone{
    display: flex;
    align-items: center;
    padding-right: 50px;
}

#compagny-name{
    padding-left: 8%;
    
}

#compagny-name > h1{
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    color: #fff;
    text-align: center;
    /* text-shadow:  0 0 7px #fff, 
               0 0 10px #fff, 
               0 0 42px rgb(106, 189, 69),   
               0 0 77px rgb(106, 189, 69), 
               0 0 100px rgb(106, 189, 69)  */
}

#compagny-phone > a{
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 18px;
    margin-bottom: 0px;
    color: #FFF;
    text-decoration: none;
}

#compagny-phone > span{
    color: #FFF;
}




/*######################## IFRAME VISITE VIRTUELLE ##################### */
#iframe-container{
    height: 85vh;
}

#loading-gui .icon-play-unicode{
    position: absolute;
    top: 100px;
}

#img-overlay{
    position: absolute;
    background-image: url('./assets/Artistic-Pole-Photo-5.jpg');
    background-color: #0000009e;
    background-blend-mode: color;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#play-icon{
    display: flex;
    flex-direction: column;
    align-items: center; 
    margin-top: 10%;
}

#play-icon > span{
    font-size: 200px;
    cursor: pointer;
}

#play-icon > h4{
    margin-top: 10%;
    font-size: 35px;
}

#play-icon > h4 > a{
    color: #FFF;
    text-decoration: none;
}

#play-icon > h4 > a:hover{
    color: #FFF;
}

#play-icon > a{
    display: flex;
    justify-content: center;
}

#play-icon > a > img{
    width: 20%;
    margin-top: 5%;   
}



#photographe-google > img{
    width: 15%;
    margin: 0px 5%;
}

#photographe-google > img:nth-child(1){
    width: 10%;
}

#photographe-google{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3% 0px;
}
/*######################## DUAL DIV ##################### */
#container-dual-div{
    display: flex;
    /* height: 60vh; */
}

/*######################## SLIDER REVIEWS ##################### */
#slider-reviews-container{
    width: 50%;
    padding: 5%;
    background: #141414;
}

#slider-reviews-container{
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-inner{
    overflow: initial;
}

.carousel-indicators {
    bottom: -90px;
}

.carousel-indicators > button{
    width: 3px !important;
    height: 3px !important;
    padding: 3px !important;
    border: none !important;
    margin-left: 25px !important;
    margin-right: 25px !important;
    border-radius: 100px;
}

.carousel-control-prev{
    left: -100px;
}

.carousel-control-next{
    right: -100px;
}

#carouselExample > div > div > div.review.carousel-item > p.review-text{
    text-align: center;
}

#carouselExample > div > div > div.review.carousel-item > p.review-author{
    text-align: center;
    text-transform: uppercase;
    width: 74px;
    margin-left: 45%;
    background: #524DD3;
    color: #141414;
    font-size: 40px;
    font-weight: 500;
    border-radius: 80px;
    padding: 7px;
}

#carouselExample > div > div > div.review.carousel-item > p.class-review-rating > span{
    color: #F0C841;
    margin: 0px 5px;
    font-size: 30px;
}

#carouselExample > div > div > div.review.carousel-item > p.class-review-rating{
    color: #141414;
    display: flex;
    justify-content: center;
    margin-right: 15px;
}

/*######################## PRESENTATION COMPAGNY ##################### */
#container-presentation{
    width: 50%;
    padding: 5%;
    background: #052C3D;
    color: #FFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#container-presentation > h1{
    font-weight: bold;
}



/*######################## FOOTER ##################### */
footer{
    display: flex;
    justify-content: space-around;
    font-size: 15px;
    padding: 2%;
}

#second-nav > a{
    margin-bottom: 17px;
}

footer h4{
    font-weight: 700;
}

#adresse-container > p{
    margin-top: 22px;
}

#contact-section-container{
    width: 33%;
    display: flex;
    justify-content: center;
}

#mail-phone{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
}

#adresse-container{
    display: flex;
    align-items: center;
    padding: 10px;
}

#footer-nav-container{
    display: flex;
    width: 33%;
    justify-content: center;
}

.link-nav,#mail-phone > a{
    color: #FFF;
    text-decoration: none;
}

.link-nav:hover,#mail-phone > a:hover{
    color: #FFF;
}

#first-nav{
    display: flex;
    flex-direction: column;
    padding: 10px;
}

#second-nav{
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: 10px;
    margin-bottom: 9px;
}

#socials-container > a > img{
    width: 30px;
    margin: 15px 5px;
}

#img-google-trust > img:nth-child(1){
    width: 20%;
    padding: 0 5%;
    border-right: 1px solid rgba(255, 255, 255, 0.219);
}

#img-google-trust > img:nth-child(2){
    width: 40%;
    padding: 0 5%;
}

#img-google-trust{
    width: 33%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#footer-bottom{
    display: flex;
    justify-content: space-between;
    padding: 10px 5%;
    background: #FFF;
    color: #000;
}

#created-by > a > img{
    width: 50px;
    margin-left: 15px;
}

#created-by, #copyright{
    display: flex;
    align-items: center;
}

#copyright{
    font-weight: bold;
}

/*######################## RESPONSIVE TELEPHONE ##################### */

@media screen and (max-width: 768px) {
    #container-dual-div{
        flex-direction: column;
        height: auto;
    }

    #slider-reviews-container,#container-presentation{
        width: 100%;
    }

    .carousel-control-prev{
        left: 0px;
    }

    .carousel-control-next{
        right: 0px;
    }

    #carouselExample > div > div > div.review.carousel-item > p.review-author{
        margin-left: 38%;
        margin-top: 45px;
    }

    #carouselExample > div > div.reviews > div.review.carousel-item > p.review-text{
        width: 70%;
        margin-left: 15%;
    }

    footer{
        flex-direction: column;
    }

    footer h4,#adresse-container > p,.link-nav, #mail-phone > a{
        text-align: center;
    }

    #adresse-container > p{
        margin: 0px;
    }

    #contact-section-container,#footer-nav-container,#img-google-trust{
        width: 100%;
    }

    #img-google-trust > img:nth-child(1){
        width: 25%;
    }

    #img-google-trust > img:nth-child(2){
        width: 60%;
    }

    #contact-section-container,#footer-nav-container{
        flex-direction: column;
        align-items: center;
    }

    #footer-bottom{
        flex-direction: column;
    }

    #copyright{
        justify-content: center;
    }

    #created-by{
        flex-direction: column;
    }

    #header-container{
        flex-direction: column;
        height: 120px;
        justify-content: center;
        position: fixed;
        width: 100%;
        z-index: 25;
    }

    #menu-burger{
        height: 0;
    }

    #menu{
        right: -235px;
    }

    #menuToggle{
        left: -42vw;
        top: 0px;
    }

    #compagny-phone{
        padding: 0px;
    }

    #play-icon > span{
        font-size: 115px;
    }

    #play-icon > h4{
        font-size: 22px;
        text-align: center;
    }

    #footer-bottom > a{
        text-align: center;
    }

    #compagny-name > h1{
        font-size: 20px;
        margin-top: 19px;
        font-weight: 500;
    }

    #compagny-phone > a{
        font-size: 14px;
    }

    #first-nav,#mail-phone{
        padding-bottom: 0px;
    }

    #second-nav,#adresse-container{
        padding-top: 0px;
    }

    #adresse-container{
        padding-bottom: 25px;
    }

    #second-nav{
        margin-bottom: 25px;
    }



}