@font-face {
    font-family: 'avara';
    src: url('type/Avara-Bold_Italic_web.woff2') format('woff2'),
         url('type/Avara-Bold_Italic_web.woff') format('woff'),
         url('type/Avara-Bold_Italic_web.ttf') format('truetype'),
         url('type/Avara-Bold_Italic_web.svg') format('svg');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'avara';
    src: url('type/Avara-Bold_web.woff2') format('woff2'),
         url('type/Avara-Bold_web.woff') format('woff'),
         url('type/Avara-Bold_web.ttf') format('truetype'),
         url('type/Avara-Bold_web.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

.style1 {font-family: 'avara', cursive; color:#FFF ; margin-top: 0.5em;}
.style2 {font-family: 'avara', cursive; color:#FFF ; } 
.style3 {font-family: 'avara', cursive; color:#CCC ; }
.style4 {font-family: 'avara', cursive; color:#FFF ; }
.style5 {font-family: 'avara', cursive; color:#FFF ; }
.style6 {font-family: 'avara', cursive; color:#000 ; margin-bottom: 0.1em;}


.bigpic{width:100%;}
.smallpic{width:49%;}
.droite{float: right;}

details { 
    font-family: 'avara', cursive; 
    color:#FFF ; 
    font-size:20px; 
}

button {
  background-color: transparent;
  color: white;
  border: 0px solid ;
  font-family: 'avara';
  font-size: small;
  padding: 0px;
  padding-right: 2px;
  margin-left: 0px;
  margin-top: 0px;
}




@media screen and (min-width: 800px) and (orientation: landscape) {
.contenantdutableau{ 
    width: 80%;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;   
}
.petitscredits{width:70%;}
.style1 {font-size:30px; }
.style2 {font-size:24px; } 
.style3 {}
.style4 {font-size:14px; }
.style5 {font-size:14px; }
.style6 {font-size:65px; }
.mobileonly{display: none;}
.notonmobile{display: ;}
}
}

@media screen and (min-width: 500px) and (max-width: 800px) and (orientation: landscape) {
.contenantdutableau{width: 100%;}
.style1 {font-size:30px; }
.style2 {font-size:24px; margin-right: 5%; margin-left: 5%;} 
.style3 {}
.style4 {font-size:14px; }
.style5 {font-size:14px; }
.style6 {font-size:65px; }
.petitscredits{width:70%;}
.mobileonly{display: none;}
.notonmobile{display: ;}
}

@media screen and (min-width: 100px) and (max-width: 500px) and (orientation: landscape) {
.contenantdutableau{width: 100%;}
.style1 {font-size:35px; }
.style2 {font-size:30px; margin-right: 5%; margin-left: 5%;} 
.style3 {font-size:18px; }
.style4 {font-size:18px; }
.style5 {font-size:18px; }
.style6 {font-size:65px; }
.petitscredits{width:70%;}
.mobileonly{display: ;}
.notonmobile{display: none;}
}

@media screen and (min-width: 100px) and (max-width: 550px) and (orientation: portrait) {
.contenantdutableau{
    width: 98%;     
    margin-left: auto;    
    margin-right: auto;  
}
.style1 {font-size:30px; }
.style2 {font-size:25px; } 
.style3 {font-size:16px; }
.style4 {font-size:16px; }
.style5 {font-size:16px; }
.style6 {font-size:50px; }
.petitscredits{width:100%;}
.mobileonly{display: ;}
.notonmobile{display: none;}
.style60 {font-size:12vw;  
          line-height: 12vw;
          margin-top: 20vw;
        }
}
@media screen and (min-width: 550px) and (orientation: portrait) {
.contenantdutableau{
    width: 96%;     
    margin-left: auto;    
    margin-right: auto;  
}
.style1 {font-size:33px; }
.style2 {font-size:28px; margin-right: 5%; margin-left: 5%;} 
.style3 {font-size:18px; }
.style4 {font-size:18px; }
.style5 {font-size:18px; }
.style6 {font-size:50px; }
.petitscredits{width:70%;}
.mobileonly{display: ;}
.notonmobile{display: none;}
}