@charset "UTF-8";
/* CSS Document */

    .iphone5SE{
        display:none;
        
    }
    .iphone6{
        display:none;
        
    }
    .iphone6plus{
         display:none;
        
    }
    .iphonex{
         display:none;
        
    }
    .iphonexplus{
         display:none;
        
    }
    .iphone{
         display:block;
        
    }
    .iphonemax{
         display:none;
        
    }
    .ipad{
         display:none;
        
    }
    .ipadmax{
         display:none;
        
    }
    .web{
         display:none;
        
    }

html, body{
	margin: 0;
    background-color: white;
    font-family: 'Nunito', sans-serif;
    color:#FF3824;
    font-size: 30px;
    height: 100vh;
    width: 100vw;
}

.scroll-marker{
	display: none;
}
    
.wrapper{
	transition: 2s ease;
}

.reseauxhorizontaux{
    padding-left: 6.6vw; 
    display: flex;
}

.reseauxhorizontaux a{
    display: flex;
    height: 0px;
}
    .reseauxhorizontaux a img{
    height: 3vh;
    margin: 20px 12px;
}

.buttonrouge a{
        position: absolute;
        z-index: 10000;
        color:#FF3824;
        text-decoration: none;  
    }

.buttonrouge a:hover{
        text-decoration: underline;
        padding: 0;
    }

.buttonbleu a{
        position: absolute;
        z-index: 10000;
        color:#0023FF;
        text-decoration: none;
    }

.buttonbleu a:hover{
        text-decoration: underline;
        padding: 0;
    }

.bottom{
        margin: 90vh 0 0 50vw;
    } 
    
.right{
        transform: rotate(90deg);
      position: relative;
         margin: 50vh 0 0% 89vw;
    }
    
.up{
         margin: 5vh 0 0 50vw;   
    }
    
.left{
        transform: rotate(-90deg);
      position: relative;
         margin: 50vh 0 0 0;
    }

.container img{
        height: 100vh;
        z-index: 0;
        margin-left: 5vw;
    }

.maison a{
    display: flex;
        position: absolute;
    height: 0px;

    padding: 2vh 0 0 83vw;
}
    
       .maison a img {
height: 5vh; 
    }

.houserouge img, .housebleu img{
    height: 6vh;
    margin: 10%;
    padding: 10px;
z-index: 100000;
}

.houserouge img:hover{
    border: solid 5px #0023FF;
    border-radius: 50px;
   padding: 5px;
}

.housebleu img:hover{
    border: solid 5px #FF3824;
    border-radius: 50px;
   padding: 5px;
}

.anais {
  opacity: 0;
    display: flex;
   z-index: 10000000;
}

.anais:hover {
  opacity: 1;
}

.travaux img{
    position: absolute;
    height: auto;
    width: 20%;
    padding: 25vh 13vw;
    
}

.overlayrouge .icon {
  color: #FF3824;
  font-size: 2.5em;
padding: 12% 10% 12% 30%;
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
    opacity: 1;
}

.overlayrouge .fa-eye:hover {
 color:  #FF3824;
 opacity: 1;
}

.overlaybleu .icon {
  color: #0023FF;
  font-size: 2.5em;
padding: 12% 10% 12% 30%;
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
    opacity: 1;
}

.overlaybleu .fa-eye:hover {
 color: #0023FF;
 opacity: 1;
}

.reseauxverticaux{
    position: absolute;
   height: 0px;
   padding-top: 33vh;
    margin-left: 3vw;
}

.reseauxverticaux a{
    display: flex;
    position: relative;
}

.reseauxverticaux a img{
    height: 4vh;
    margin: 20px 20px;
}


.download{
    background-color: transparent;
    border: none;
    padding: 0;
    position: absolute;
    z-index: 100000;

}

.download img {
    height: 5vh;
    padding: 0;
    margin: 80% 80%;
}

.download img:hover{
   border: solid 5px #FF3824;
    border-radius: 50px;
   padding: 8px;
    margin: 18% 80%;
}



/*IPHONE MAX VERSION*/
@media only screen and (min-width: 650px)
    
{
     .iphone5SE{
        display: none;
        
    }
    .iphone6{
        display:none;
        
    }
    .iphone6plus{
         display:none;
        
    }
    .iphonex{
         display:none;
        
    }
    .iphonexplus{
         display:none;
        
    }
    .iphone{
         display:none;
        
    }
    .iphonemax{
         display:block;
        
    }
    .ipad{
         display:none;
        
    }
    .ipadmax{
         display:none;
        
    }
    .web{
         display:none;
        
    }
    
    body{
    font-size: 1.1em;
}
    
     .right{
         margin: 50vh 0 0 90vw;
    }
        .left{
         margin: 48vh 0 0 0;
    }

    .maison a{
    padding: 2% 0 0 88vw;
}
     .travaux img{
   height: auto;
    width: 30%;
    padding: 10vh 15vw;
}
    .overlayrouge .icon, .overlaybleu .icon  {
  top: 50%;
  left: 25%;
    padding: 10%;
}

        .reseauxhorizontaux a img{
    height: 4.5vh;
    margin: 25px 14px;
}

    .reseauxverticaux{

     padding-top: 33vh;
    margin-left: 3vw;
}


.reseauxverticaux a img{
    height: 5vh;
    margin: 20px 20px;
}


.download img {
    height: 6vh;
    padding: 0;
    margin: 70% 80%;
}


}

/*IPAD VERSION*/
@media only screen and (min-width: 1000px)

{
    .iphone5SE{
        display: none;
        
    }
    .iphone6{
        display:none;
        
    }
    .iphone6plus{
         display:none;
        
    }
    .iphonex{
         display:none;
        
    }
    .iphonexplus{
         display:none;
        
    }
    .iphone{
         display:none;
        
    }
    .iphonemax{
         display:none;
        
    }
    .ipad{
         display:block;
        
    }
    .ipadmax{
         display:none;
        
    }
    .web{
         display:none;
        
    }
    
        body{
    font-size: 1.5em;
}
    
     .travaux img{
  height: auto;
    width: 35%;
    padding: 0vh 22vw;
}
    .overlayrouge .icon, .overlaybleu .icon  {
  top: 48%;
  left: 35%;
        padding: 15%;
}

        .reseauxhorizontaux a img{
    height: 5.5vh;
    margin: 25px 14px;
}

    .reseauxverticaux{

     padding-top: 33vh;
    margin-left: 3vw;
}


.reseauxverticaux a img{
    height: 5vh;
    margin: 20px 20px;
}


.download img {
    height: 6vh;
    padding: 0;
    margin: 80% 80%;
}


    }


/*IPAD MAX VERSION*/
@media only screen and (min-width: 1350px)

{
    .iphone5SE{
        display: none;
        
    }
    .iphone6{
        display:none;
        
    }
    .iphone6plus{
         display:none;
        
    }
    .iphonex{
         display:none;
        
    }
    .iphonexplus{
         display:none;
        
    }
    .iphone{
         display:none;
        
    }
    .iphonemax{
         display:none;
        
    }
    .ipad{
         display:none;
        
    }
    .ipadmax{
         display:block;
        
    }
    .web{
         display:none;
        
    }

        .right{
         margin: 45vh 0 0 90vw;
    }
        .left{
         margin: 45vh 0 0 0;
    }

    
     .travaux img{
    height: auto;
    width: 38%;
    padding: 0vh 25vw;
}
    .overlayrouge .icon, .overlaybleu .icon  {
  top: 49%;
  left: 45%;
        padding: 20%;
}

        .reseauxhorizontaux a img{
    height: 6vh;
    margin: 30px 14px;
}

    
}
/*WEB 13" VERSION*/
@media only screen and (min-width: 1300px) and (max-height: 780px)

{
    .iphone5SE{
        display: none;
        
    }
    .iphone6{
        display:none;
        
    }
    .iphone6plus{
         display:none;
        
    }
    .iphonex{
         display:none;
        
    }
    .iphonexplus{
         display:none;
        
    }
   .iphone{
         display:none;
        
    }
    .iphonemax{
         display:none;
        
    }
    .ipad{
         display:none;
        
    }
    .ipadmax{
         display:none;
        
    }
    .web{
         display:block;
        
    }
    
    .reseauxhorizontaux{
    padding-left: 6.6vw; 
}

.reseauxhorizontaux a img{
    height: 6vh;
    margin: 40px 20px;
}

.bottom{
        margin: 90vh 0 0 40vw;
    } 
    
.right{
      position: relative;
         margin: 20% 0 0% 92vw;
    }
    
.up{
         margin: 5vh 0 0 50vw;   
    }
    
.left{
        margin: 20% 0% 0% 0%;
    }

.container img{
        height: 100vh;
        margin-left: 5vw;
    }

.maison a{
    padding-left: 91vw;
}

.houserouge img, .housebleu img{
    height: 6vh;
    margin: 10%;
    padding: 10px;
}

.houserouge img:hover{
    border: solid 5px #0023FF;
    border-radius: 50px;
   padding: 5px;
}

.housebleu img:hover{
    border: solid 5px #FF3824;
    border-radius: 50px;
   padding: 5px;
}
.travaux img{
    height: auto;
    width: 30%;
    padding:0vh 30vw;
    
}

.overlayrouge .icon {
  font-size: 100px;
padding:15%;
  top: 50%;
  left: 40%;
}

.overlaybleu .icon {
  font-size: 100px;
padding: 15%;
  position: absolute;
  top: 50%;
  left: 40%;
}


.reseauxverticaux{
     padding-top: 30vh;
    margin-left: 3vw;    

}

.reseauxverticaux a img{
    height: 6vh;
    margin: 20px 20px;
}

.download img {
    height: 6vh;
    padding: 0;
    margin: 50% 140%;
}

.download img:hover{
   border: solid 5px #FF3824;
    border-radius: 50px;
   padding: 8px;
    margin: 18% 80%;
}

}


/*WEB 16" VERSION*/
@media only screen and (min-width: 1700px)

{
    .iphone5SE{
        display: none;
        
    }
    .iphone6{
        display:none;
        
    }
    .iphone6plus{
         display:none;
        
    }
    .iphonex{
         display:none;
        
    }
    .iphonexplus{
         display:none;
        
    }
   .iphone{
         display:none;
        
    }
    .iphonemax{
         display:none;
        
    }
    .ipad{
         display:none;
        
    }
    .ipadmax{
         display:none;
        
    }
    .web{
         display:block;
        
    }
    
    .reseauxhorizontaux{
    padding-left: 6.6vw; 
}

.reseauxhorizontaux a img{
    height: 6vh;
    margin: 40px 20px;
}

.bottom{
        margin: 90vh 0 0 50vw;
    } 
    
.right{
      position: relative;
         margin: 25% 0 0% 92vw;
    }
    
.up{
         margin: 5vh 0 0 50vw;   
    }
    
.left{
        margin: 25% 0% 0% 0%;
    }

.container img{
        height: 100vh;
        margin-left: 5vw;
    }

.maison a{
    padding-left: 91vw;
}

.houserouge img, .housebleu img{
    height: 6vh;
    margin: 10%;
    padding: 10px;
}

.houserouge img:hover{
    border: solid 5px #0023FF;
    border-radius: 50px;
   padding: 5px;
}

.housebleu img:hover{
    border: solid 5px #FF3824;
    border-radius: 50px;
   padding: 5px;
}
.travaux img{
    height: auto;
    width: 38%;
    padding: 0vh 30vw;
    
}

.overlayrouge .icon {
  font-size: 100px;
padding: 12% 10% 12% 10%;
  top: 50%;
  left: 52%;
}

.overlaybleu .icon {
  font-size: 100px;
padding: 12% 10% 12% 10%;
  position: absolute;
  top: 50%;
  left: 52%;
}


.reseauxverticaux{
     padding-top: 30vh;
    margin-left: 3vw;    

}

.reseauxverticaux a img{
    height: 6vh;
    margin: 20px 20px;
}

.download img {
    height: 6vh;
    padding: 0;
    margin: 50% 140%;
}

.download img:hover{
   border: solid 5px #FF3824;
    border-radius: 50px;
   padding: 8px;
    margin: 18% 80%;
}

}