@font-face {
font-family: "Arvin"; src: url("arvin_Regular.ttf");
font-weight: normal;
    font-style: normal;

}

#font-face {
font-family: "Nyala"; src: url("nyala.ttf");
font-weight: normal;
font-style: normal;
}

h1,h2,h3,h4 {font-family: "Arvin", Times;}
a {text-decoration:none; color:#825c38; font-family: "Nyala",Times New Roman, serif;}
a:hover,a:hover h2 {text-decoration:underline; color:rgba(0,0,0,1);}

h2 {color:#8a7068; margin: 0px; padding:0px; font-weight:normal;}
h3 {margin: 40px auto; text-align:center; font-weight:normal;}
h3 span {font-style:italic;} p span {font-style:italic;}
h4 {text-align:center;}
p,ul{margin:0px; padding:0px; font-family:Arvin, Times;}





header,footer {  background-color: #97FFFC; }
header {/*height: 140px;*/ padding-bottom:5px;}


/*banniere */
#banner { margin:auto; max-width: 1200px; min-width: 300px;/*margin-bottom:20px;*/}

#banner img { margin:auto; display:block; padding-right:10px; }
#banner #logotext  {}
#banner #logotext h1 {margin-bottom:0px;text-align:center; font-size:1em; padding-left:20px; padding-top : 2px; margin-top : 0px;}
#banner #logotext p {text-align:center; -webkit-margin-before: 0;min-width:320px; padding-left:20px;
    -webkit-margin-after: 0; display:none;}
p#nouveautes {text-align:center;font-style:italic; float:right;}
#nouveautes {visibility : hidden;} /*on vire les nouveautés */
.menu {  padding-top:10px; margin:auto; display:none; width: 600px;}
.menu h2 {float:left; font-size:18px; color: #8a7068; padding-right: 30px; padding-top;5px;}
.menu img {float: left; padding-right:5px;}
.menu p {float:left; font-size:24px; color: #8a7068; padding-left: 30px;}

.menu a:hover img, #icons-menu a:hover img { -webkit-transform: rotateX(20deg); transform: rotateX(20deg); 
                                             -webkit-transform: rotateY(20deg); transform: rotateY(20deg);
 																	 }

#icons-menu {margin: auto; display:flex; display: -webkit-flex; justify-content: space-around; -webkit-justify-content: space around;  padding-top:5px; }

.icons {display:none;  }


.back {text-align : right; font-size: .9em;}
footer {}
p#name,p#contact { text-align:right;}
p#contact { padding-top: 2px; padding-right: 30px;}
/**p.contact img {padding-right:2px;}**/
p#contact img:hover {transform: scale(1.2,1.2); webkit-transform: scale(1.2,1.2);}
#flashContent {margin-left:100px;}
#name a {color:rgba(0,0,0,1);}


@media screen and (min-width : 436px) {
	
#banner #logotext h1 {font-size:1.5em; }
#banner #logotext p {text-align:center; -webkit-margin-before: 0; display:block;font-size:.8em;}
}

@media screen and (min-width : 530px) {
   .menu {display:block; padding-left : 95px;}
   
   #icons-menu {  display:none;   }
	
}

@media screen and (min-width : 680px) {
	
	#banner { display:flex; display: -webkit-flex;}
	#banner #logotext  {/*align-self:flex-end; -webkit-align-self:flex-end; */
	                    -webkit-flex-grow:2; flex-grow:2; -webkit-order:3 ; order:3 }
    #banner p { -webkit-order:2  ; order:2;  }
	#banner #logotext h1 {font-size:2em;padding-left:0; }
	#banner #logotext p {font-size:1.2em;padding-left:0;}
	.menu { padding-left:200px;}

}

@media screen and (min-width : 896px) {
 
    #logotext h1 {font-size:2.5em;}  #logotext p {font-size:1.5em;}
	header .menu {/*padding-top:30px;*/}
	.back {font-size: 1em;}
	
 }

@media screen and (min-width : 942px) {
	
	.menu {width: 850px;padding-left:300px;}
	.menu h2 {font-size:24px; color: #8a7068; padding-left: 30px;padding-top:10px;}
	.icons {display: block;}
	.tinyicons {display:none;}
}