body{
    overflow: hidden;
    height: 100%;
    width: 100%;
    display:flex;
    margin:0;
    padding:0;
    position: fixed;
}
@font-face {
    font-family: 'pt';
    src: url('typo/PTMono-Regular.ttf');
}
@font-face {
    font-family: 'faune';
    src: url('typo/Faune-TextRegular.otf');
}
@font-face {
    font-family: 'italicfaune';
    src: url('typo/Faune-TextItalic.otf');
}
@font-face {
    font-family: 'bt';
    src: url('typo/BT-BeauSans-Medium-BF64d4595383d81.ttf');
}
@font-face {
    font-family: 'italicbt';
    src: url('typo/BT-BeauSans-MediumItalic-BF64d459537767c.ttf');
}
@font-face {
    font-family: 'boldbt';
    src: url('typo/BT-BeauSans-Bold-BF64d45953acd04.ttf');
}
@font-face {
    font-family: 'btl';
    src: url('typo/BT-BeauSans-Light-BF64d4595396c6d.ttf');
}






.background{
    background-color:black;  
    width: 100%;
    z-index: 20;
}
.content{
    z-index: 100;
}


.infos{
    font-family: 'bt';
    font-size: 1.5vw;
    margin-left:35vw ;
    margin-top: 11.5vh;
}
.texteinfos{
    font-family: 'btl';
    margin-left: 35vw;
    margin-top: 1vw;
    font-size: .9vw;
}






#bleu{
    background-color:#E2D1B0;
    position:absolute;
    right:-65vw;
    width:100vw;
    top:20vh;
    height:80vh;
    transition-duration: 1s;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.5);
    cursor: pointer; 
    display: flex;
    
}

.titrer{
    background-color: #AD321B;
    width: 7vw;
    height: 100vh;
}
.projetr{
    width: 93vw;
    overflow: scroll;
     
}

.titrecine{
    font-family: 'bt';
    font-size: 2.8vw;
    margin-top: 2vh;
    margin-left: 2vw;
    
}
.trait{
    border-top: solid black 0.15vw;
    margin-top: -1.15vw;
    margin-left: 25vw;
    width: 56vw;
}
.groupetrait{
    margin-top: 10vh;
}
.petittitre{
 font-family: 'bt';
 font-size: 1.5vw;
 margin-top:5vh ;
 margin-left: 3vw;
}

.traita{
    border-top: solid black 0.15vw;
    width: 40vw;
    margin-left: 47vw;
    margin-top: -59vh;
    
}
.traitf{
    border-top: solid black 0.15vw;
    width: 80vw;
    margin-top:-2vh;
    margin-left: 11vw;
    
}
.depliantt{
    font-family: 'bt';
    font-size: 1.5vw;
    margin-left: 3vw;
    margin-top: 59vh;
}

.depliant{
    width: 60vw;
    margin-left: 2.6vw;
    margin-top: 1.3vh;
    border: solid black 0.1vw;
}









.formaabris{
    font-family: 'bt';
    font-size: 1.5vw;
    margin-left:47vw;
    
}

.afficheb{
    width: 20vw;
    margin: 3vw;
    margin-right: 0;
}
.kakemonob{
  width: 9.93vw;
  margin: 3vw;
}

.mock{
    width: 43vw;
    margin: 3vw;
}
.depl{
    width: 20vw;
    margin:3vw;
    margin-right: 0;
}
.deplp{
    width: 37.5vw;
    margin:3vw;
}










#jaune{
    background-color:#E2D1B0 ;
    position:absolute;
    width:100vw;
    height:90vh;
    right:-72vw;
    transition-duration: 1s;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.5);
    cursor: pointer; 
    display: flex;
}
.titrej{
    background-color: #CCA605;
    width: 7vw;
    height: 90vh;
}
.projetj{
    height: 90vh;
    width: 85vw;
    display: flex;
    overflow: scroll;
}
.titreosmi{
    font-family: 'bt';
    font-size: 3.5vw;
    margin-top: 2vh;
    margin-left: 8vw;  
}
.traitosmi{
    border-top: solid black 0.15vw;
    margin-top: -1.15vw;
    margin-left: 14vw;
    width: 56vw;
}
.kakem{
    font-family: 'bt';
    margin-left: 3vw;
    font-size: 1.5vw;

}
.traitk{
    border-top: solid black 0.15vw;
    margin-top: -58.5vw ;
    width: 20vw;
    margin-left: 3vw;
}
.traitke{
    border-top: solid black 0.15vw;
    width: 80vw;
    margin-top: 63vw;
    margin-left: 3vw;
}

.kake{
    font-family: 'bt';
    margin-left: 3vw;
    font-size: 1.5vw;
}


.osmimock{
    width: 61vw;
    margin-left: 3vw;
    margin-top: 1vw;
    border: solid black 0.1vw;
    
}
.osmifiche{
    width: 18vw;
    margin-left: 3vw;
  margin-top: 3vw;
}
.osmifichee{
    width: 17.9vw;
    margin-left: 3vw;
  margin-top: 3vw;
}
.kakemonomock{
    width: 39vw;
    margin-left: 24.5vw;
    margin-top: 10vh;
}
.fleurjaune{
    width: 19.4vw;
   margin: 3vw;
}
.fleurorange{
    width: 18.2vw;
    margin-bottom: 1.8vw;
    transform: rotate(90deg);
}
.tulipe{
    width: 17vw;
    margin: 3vw;
}









#vert{
    background-color: #DECDAC;
    position:absolute;
    width:100vw;
    height:95vh;
    right:-79vw;
    transition-duration: 1s;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    display: flex;
}
.titrev{
    background-color: #377C4A;
    width: 7vw;
    height: 95vh;

}
.projetv{
    width: 85vw;
    overflow: scroll;
}
.titreillu{
    font-family: 'bt';
    font-size: 3.5vw;
    margin-left: 8vw;  
  
}
.illustration{
    width: 63vw;
    margin-top: 2vh;
    margin-left: 5.5vw;
    border: solid black .15vw;
}
.infosv{
    font-family: 'bt';
    font-size: 1.5vw;
    margin-left:45vw ;
    margin-top: 11.5vh;
}
.texteinfosv{
    font-family: 'btl';
    margin-left: 45vw;
    margin-top: 1vw;
    font-size: .9vw;
}
.pochoirs{
    width: 120vh;
    margin-left: 2.5vw;
    margin-top: 5vh;
}
.traitv{
 border: solid black 0.15vh;
 margin-top: 5vh;
 width: 80vw;
 margin-left: -26vw;
}
.modele{
    font-size: 1.5vw;
    font-family: 'bt';
    margin-left:55vw;
    margin-top: -2.5vh;
}
.grote{
    width: 30vw;
    margin:3vw;
}
.enfants{
    width: 40vw;
    margin-left: 29.5vw;
    margin-top: 8vh;
}
.traitvert{
    border:solid black 0.12vw;
    margin-top: -66.7vh;
    width: 28vw;
}
.illuenfants{
    font-family: 'bt';
    font-size: 1.5vw;
    margin-left: 6vw;
}
.imgtext{
    width: 32.7vw;
    margin-top: 75vh;
    margin-left: 3vw;
}
.imggrotte{
    width: 33.8vw;
    margin-top: 75vh;
    margin-left: -0.5vw;
}
.imgchute{
    width: 31vw;
    margin-top: 6vh;
    margin-left: 3vw;
    margin-bottom: 3vh;
}
.imgchemin{
    width: 32vw;
    margin-top: 6vh;
    margin-left: 3vw;
    margin-bottom: 3vh;
}








#rose{
    background-color:#DECDAC;
    position:absolute;
    top:10vh;
    width:100vw;
    height:90vh;
    right:-86vw;
    transition-duration: 1s;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.5);
    cursor: pointer; 
    display: flex;
}
.titrero{
    background-color: #C7928B;
    width: 7vw;
    height: 100vh;
}
.projetrose{
    width: 90vw;
    overflow: scroll;
}
.embossage{
    width: 60vw;
    margin-left: 8vw;
    margin-top: 2vh;
}
.trames{
    width: 63vw;
    margin-top: 5vh;
    margin-left: 7vw;
}
.traitaz{
    border-top:solid black 0.2vw;
    width: 55vw;
    margin-left: 3vw;
    margin-top: 5vh;
}
.embossages{
    font-family: 'bt';
    font-size: 1.5vw;
    margin-left: 60vw;
    margin-top: -2.5vh;
}
.emboaz{
    width: 36vw;
    margin-top: 4vh;
    margin-left:3vw;
    margin-bottom:3vh;
}
.af{
    transform: rotate(-90deg);
    width: 27vw;
    margin-top:4vh;
    margin-left:4vw;
    margin-bottom:3vh;

}




#violet{
    background-color: #E2D1B0;
    position:absolute;
    width:100vw;
    height:100vh;
    right:-93vw;
    transition-duration: 1s;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.5);
    cursor: pointer; 
    display: flex;
}
.titreb{
    background-color: #3777A7;
    width: 7vw;
    height: 100vh;

}
.titregravure{
    font-family: 'bt';
    font-size: 3vw;
    margin-left: 4vw;  
}
.grav{
    width: 40vw;
    margin-left: 3vw;
    margin-top: 1vw;
}
.plaque{
    width: 36.5vw;
   position: absolute;
   left:54vw;
   top:9.5vh;
    
}
.infosb{
    font-family: 'bt';
    font-size: 1.5vw;
    margin-left:3vw ;
    margin-top: 2vh;
}
.texteinfosb{
    font-family: 'btl';
    margin-left: 3vw;
    margin-top: 1vh;
    font-size: .9vw;
}
.gravn{
    width: 14vw;
    margin-top: 3.5vh;
    margin-left: 5vw;
    
}










.portfolio{
    display:flex;
    position: absolute;
    top:48vh;
    left:4vw;
    font-size: 25vh;
    color: #E2D1B0;
}
.port{
    font-family: 'bt'; 
}
.folio{
    font-family: 'italicbt';  
}

.font{
    background-color:  #E2D1B0;;
    border-radius: 3vw;
    position:absolute;
    top:80vh;
    left:17vw;
    height: 5vh;
    width:20vw;
    padding:2vh;
    cursor: pointer; 
    z-index: 1000;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.5);
   
}
.cla{
    font-size: 2.5vw;
    font-family: 'pt';
    color:black;
}






.cine{
    font-family: 'bt';
    font-size: 3vw;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    position: absolute;
    top: 38vh;
    left: .5vw;
    padding:0.5vw;
}

.fleche{
    width: 6vw;
    margin-top: 27vh;
    margin-left: .8vw;
}

.osmi{
    font-family: 'bt';
    font-size: 3vw;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    position: absolute;
    top: 73vh;
    left: 1vw;  
}

.flechej{
    width: 6vw;
    margin-top: 61vh;
    margin-left: .4vw;
}
.gravure{
    font-family: 'bt';
    font-size: 3vw;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    position: absolute;
    top: 71vh;
    padding:1vw; 
}

.flecheb{  
    width: 6vw; 
    margin-top: 62vh;
    margin-left: .4vw;
}
.illu{
    font-family: 'bt';
    font-size: 3vw;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    position: absolute;
    top:63vh;
    left: 1vw;

}
.flechev{  
    width: 6vw; 
    margin-top: 51vh;
    margin-left: .4vw;
}
.az{
    font-family:'bt';
    font-size: 3vw;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    position: absolute;
    top:60vh;
    left:1vw;
    padding:0.5vw;  
}
.flecher{  
    width: 6vw; 
    margin-top: 51vh;
    margin-left: .4vw;
}









.aboutme{
    background-color:black ;
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: -400;
    opacity: 0;
    padding:1vw;
}

.me{
    z-index: 400;
    opacity: 1;

}

.croix{
    font-size: 6vw;
    position:absolute;
    top:0.2vh;
    left:4.5vw;
}
.what{
    font-family: 'pt';
    color: #E2D1B0;
    margin:2vw;
    margin-left: 7vw;
    margin-top: 5vw;
    font-size: 4vw;
}
.paragraph{
    font-family: 'btl';
    font-size: 1.5vw;
    color: #DECDAC;
    margin-top: 15vh;
    margin-left: 6.5vw;
}
.bouton1{
    background-color:  #E2D1B0 ;
    border: solid black 0.2vw;
    padding:1vw;
    width: 6vw;
    height: 3vh;
    margin: 1vw;
    border-radius:3vw;
    cursor: pointer; 
}
.pancart{
    border:solid #E2D1B0;
    width: 90vw;
    height: 70vh;
    margin-left:3vw;
    margin-top:4vw;
}






.contact{
   
    width: 40vh;  
    position: absolute;
    top:4vh;
    font-family: 'pt';
    padding:1.5vh;
    left: 4vw;
    z-index: -1;   
    color: #E2D1B0;
    
}
.cadrecontact{
    display: flex;
    padding-bottom: 1vh;
}
.adress{
    padding-left:.5vw;
}
.contentmail{
    display:flex;
    padding-bottom: 1vh;
}
.mail{
    padding-left:.5vw;
}
.contentnum{
    display:flex;
}
.num{
    padding-left: .5vw;
}













@media screen and (max-width: 500px){



    #bleu{
        height:100vh;
        width: 100vw;
        position:absolute;
        top:60vh;
        left:0vw;
        display: block;
    }
    #jaune{
        height:100vh;
        left:0;
        width: 100vw;
        position:absolute;
        top:68vh;
        left:0vw;
        display: block;
    }
    #vert{
        height:100vh;
        left:0;
        width: 100vw;
        position:absolute;
        top:76vh;
        left:0vw;
        display: block;
    }
    #rose{
        height:100vh;
        left:0;
        width: 100vw;
        position:absolute;
        top:84vh;
        left:0vw;
        display: block;
    }
    #violet{
        height:100vh;
        left:0;
        width: 100vw;
        position:absolute;
        top:92vh;
        left:0vw;
        display: block;
    }
    .portfolio{
    font-size: 10vh;
    margin-top: -40%;
    }
    .font{
        margin-top: -66%;
        margin-left:4vw ;
        height: 2%;
        border-radius: 6vw;
        width: 40vw;
        background-color: black;
        border:solid #E2D1B0 0.4vw;
    }
    .cla{
        font-size: 5vw;
        color:#E2D1B0;
        margin-top: -2%;
        
    }

    .contact{
        font-size: 4vw;
    }
    .titrer{
        width: 100vw;
        height: 8vh;
        margin:0vw;
    }
    .titrej{
        width: 100vw;
        height: 8vh;
        margin:0vw;
    }
    .titrev{
        width: 100vw;
        height: 8vh;
        margin:0vw;
    }
    .titre{
        width: 100vw;
        height: 8vh;
        margin:0vw;
    }
    .titrero{
        width: 100vw;
        height: 8vh;
        margin:0vw;
    }
    .titreb{
        width: 100vw;
        height: 8vh;
        margin:0vw;
    }
    .cine{
        z-index: -1000;
    }
    .fleche{
     opacity: 0;
    }
    .depliant{
        width:98vw;
        margin-left: 6vw;
        border:none;
    }

    .titrecine{
        font-size: 4vw;
        margin-left: 4vw;
    }
    .infos{
        font-size: 4vw;
        margin-top: 15%;
        margin-left: 6vw;
    }
    .texteinfos{
        font-size: 3vw;
        margin-left: 6vw;
    }
   
    
   
    
    
    
    
      
}
@media screen and (max-width: 900px) and (min-width:500px){



    #bleu{
        height:100vh;
        width: 100vw;
        position:absolute;
        top:65vh;
        left:0vw;
        display: block;
    }
    #jaune{
        height:100vh;
        left:0;
        width: 100vw;
        position:absolute;
        top:72vh;
        display: block;
    }
    #vert{
        height:100vh;
        left:0;
        width: 100vw;
        position:absolute;
        top:79vh;
        display: block;
    }
    #rose{
        height:100vh;
        left:0;
        width: 100vw;
        position:absolute;
        top:86vh;
        display: block;
    }
    #violet{
        height:100vh;
        left:0;
        width: 100vw;
        position:absolute;
        top:93vh;
        display: block;
    }
    .portfolio{
    font-size: 20vh;
    margin-top: -24%;
    }
    .font{
        margin-top: -25%;
        margin-left:7vw ;
        height: 3.5%;
        border-radius: 6vw;
        width: 40vw;
        background-color: black;
        border:solid #E2D1B0 0.4vw;
    }
    .cla{
        font-size: 5vw;
        color:#E2D1B0;
        margin-top: -3%;
        
    }

    .contact{
        font-size: 2.5vw;
        width: 50vw; 
    }
    .titrer{
        width: 100vw;
        height: 8vh;
        margin:0vw;

    }.titrev{
        width: 100vw;
        height: 8vh;
        margin:0vw;
    }

    .titrej{
        width: 100vw;
        height: 8vh;
        margin:0vw;
    }
    .titre{
        width: 100vw;
        height: 8vh;
        margin:0vw;
    }
    .titrero{
        width: 100vw;
        height: 8vh;
        margin:0vw;
    }
    .titreb{
        width: 100vw;
        height: 8vh;
        margin:0vw;
    }   
    .cine{
        font-size: 2vw;
        margin:0;
        transform: rotate(90deg);
        position: absolute;
        top:1vh;
        left:20vw;
        
    }

}