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

.hidden{display:none;}

img, object, embed, canvas, video, audio, picture {
       max-width: 100%;
       height: auto;
} 

body{background-color:#5b2d58;font-family: 'Roboto', sans-serif;}
#logo{display:block;margin:0 auto;}



.new{clear:both;}
.mascottes{background-color:#50b28a;}
.illustration{background-color:#0fa2cb;}
.marquages{background-color:#d8457a;}
.web{background-color:#d8733b;}


.mascottes, .illustration, .marquages, .web{background-color:#3e1f3c;}


.mascottes2{background-color:#9DE466;}
.illustration2{background-color:#09DB48;}
.marquages2{background-color:#CE86D6;}
.web2{background-color:#F29662}


.mascottes2, .illustration2, .marquages2, .web2{background-color:#78c652}


/* FORMULAIRE */
#TEST{display:none;}	

#hidden-content label{display:inline-block;width:15%;min-width:160px;vertical-align:top;font-size:1em;color:#3A3A3A;}

.btn {
  background: #1d8bf1;
  border: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-family: 'Roboto', sans-serif;
  color: #ffffff;
  font-size: 1em;
  font-weight: bold;	
  padding: 8px 16px 8px 16px;
  text-decoration: none;
  box-shadow: 2px 2px 5px #888888; 
}

.btn:hover{
	background: #1977ce;
}


.champ {
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding: 8px 12px;
  border: 2px solid #ceabbe;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  font: normal 16px/normal Arial, Helvetica, sans-serif;
  color: rgba(0,142,198,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: rgba(252,252,252,1);
  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) inset;
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) inset;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.66) ;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}

textarea{width:60%;}



#contenu ul{margin-left:3%;
list-style-type:square;
margin-right:3%;}

/* Vignettes en FLEX */
ul.vignettes{padding:0;border:0;margin:0 auto;}

.vignettes {
	width: 88%;
	max-width:880px;		
	background: #eee;
	margin: 0; padding: 0;			
	display: -webkit-flex; /* OK chrome 21 */
	display: flex;
	justify-content:space-between;
	flex-flow: row wrap;
	align-items:flex-start;
}
ul.vignettes li {list-style: none;margin-bottom:15px;width:18%;text-align: center}
.vignettes li img{width:100%;height:auto;}