/* CSS Document */


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	background: transparent;
	}



body {
	font-size: 12px;
	line-height:14px;
	color:#000;
    background-color: #ffffff;
    margin: 0 auto;
	overflow:scroll;
	font-family: 'copperplate_fsbold';
	font-weight:normal;
	text-transform:uppercase;
    }

*::-moz-selection {
	background-color:#9bc3e2;
	background-position:initial initial;
	background-repeat:initial initial;
	color:#796b65;
	}

::selection {
	background-color:#9bc3e2;
	background-position:initial initial;
	background-repeat:initial initial;
	color:#796b65;
	}

a {
	text-decoration:none;
	color:#000;
	-webkit-transition:color .5s ease;
    -moz-transition: color .5s ease;
    -o-transition: color .5s ease;
    transition: color .5s ease;
    }

a:hover {
        color:#000;
    }

h1 { 
	font-size:2em;
	text-align:center;
	line-height:normal;
	}  

h2 { 
	font-size:1em;
	color:#858585;
	text-align:center;
	padding:10px 25px;
	text-transform:uppercase;
	line-height:2em;
	max-width:750px;
	margin:0 auto;
	font-weight:normal;
	
} 

h3 {

	font-size: 12px;
	line-height:14px;
	color:#000;
    background-color: #ffffff;
	font-family: 'copperplate_fsbold';
	font-weight:normal;
	text-transform:uppercase;
}

/* ---------------------------------------------------------------------- CONTAINER ---------------------------------------------------------------------- */

.main {
    margin: 0 auto;
	width:960px;
    }
	
.colonnetexte {
	height:30px;
	margin-top:30px;
	-moz-column-width: auto;
	-o-column-width: auto;
	-webkit-column-width: auto;
	column-width: auto;
	-moz-column-count: 3;
	-o-column-count: 3;
	-webkit-column-count: 3;
	column-count: 3;
	column-rule: 1px solid #df0b1c;
	-moz-column-rule: 1px solid #df0b1c;
	-op-column-rule: 1px solid #df0b1c;
	-webkit-column-rule: 1px solid #df0b1c;
	column-gap : 4rem;
	-moz-column-gap : 4rem;
	-webkit-column-gap : 4rem;
	-o-column-gap : 4rem;



	}

footer {
    
	background-color:#e00a1c;
	width:100%;
	text-align:center;
	margin-top:60px;
    padding: 20px;
	color:#FFFFFF;
	font-size:1em;
	text-transform:uppercase;
	}



/* ------------------------------------------------------------------------ HEADER ------------------------------------------------------------------------ */




.logo {
	margin:100px auto 60px auto;
	width:437px;
	}
	

.circle {
	border:none;
	width: 140px;
	height: 100px;
	opacity:1;
	background-color:#FFFFFF;
	text-align:center;
	cursor:pointer;
	margin:60px auto;
    -ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=25)"; /* Hack IE8 */
    filter: alpha(opacity = 50); /* Hack IE 5-7 */
    -webkit-transition: opacity 0.3s ease-in-out;/* transition pour Chrome et Safari */
    -moz-transition: opacity 0.3s ease-in-out;/* transition pour Firefox */
    -o-transition: opacity 0.3s ease-in-out;/* transition pour Opéra */
    transition: opacity 0.3s ease-in-out; /* on écrit cette ligne à la fin de façon à ce que ce soit elle qui soit prise en compte lorsque l'attribut transition sera pris en compte par tous les navigateurs */
}
 


.circle:hover{
    opacity: 0.5; /* opacite au survol */
    -ms-filter:"prodig:DXImageTransform.Microsoft.Alpha(Opacity=90)"; /* Hack IE 8 */
    filter: alpha(opacity = 100); /* Hack IE 5-7 */
}
	
	



/* ------------------------------------------------------------------ RESPONSIVE DESIGN ------------------------------------------------------------------ */

/*  ------------------------------------------ Mobile device ------------------------------------------ */

@media only screen and (min-width: 320px) and (max-width : 480px) {

.main {	
	width:96%;
		text-align:center;

	}
	

h2 { 
	text-align:center;
	padding:10px 25px;
	line-height:normal;
	}
	
h3 {
	margin-bottom:20px;
	
	}
.logo {
	width:80%;
	text-align:center;
	margin:50px auto;
	}	

.circle {
	margin:30px auto;
	text-align:center;
	}
	
.colonnetexte {
	height:auto;
	-moz-column-width: auto;
	-o-column-width: auto;
	-webkit-column-width: auto;
	column-width: auto;
	-moz-column-count: 1;
	-o-column-count: 1;
	-webkit-column-count: 1;
	column-count: 1;
	column-rule: 1px solid #df0b1c;
	-moz-column-rule: 1px solid #df0b1c;
	-op-column-rule: 1px solid #df0b1c;
	-webkit-column-rule: 1px solid #df0b1c;
	text-align:center;
}

		
footer {
	width:100%;	
	max-width:90%;
	border-top:none;
	}

}



/*  ------------------------------------------ Tablette device ------------------------------------------ */

@media only screen and (min-width: 481px) and (max-width : 768px) {
		
.main {
		max-width:700px;
		text-align:center;
	}

		
h2 { 
	padding:10px 25px 0 25px;
	} 

ul.navigation1 {
	right:6%;
	z-index:1000;
	}

	
.liens-projet {
	margin-top:15px;
	}	
	
.header {
	max-width:95%;
	margin:0px auto 35px auto;
	}
.images-projet {
	margin:5px auto;
	}	
	
.vignette {
	width:265px;
	height:176px;
	}
	

.vignette2 {
	width:265px;
	height:265px;
	}	

.vignette3 {
	width:265px;
	height:353px;
	}			
		
	
.rw-sentence { 
	font-size: 5em;
	padding:15px;
	}
	
.footer {
	width:100%;	
	max-width:96%;
	}	
	

.images-about {
	width:95%;
	}
	
	
.about-titre{
	text-align:center;
	padding:0;
	}	
	
.about-txt{
	text-align:center;
	width:95%;
	margin:0 auto 20px auto;
	line-height:2em;
	}	
	
.blocks label {
	margin:0 25px;
}
	
	
.textarea {
	height:150px;
	max-width:90%;
	max-height:150px;
	margin:0 20px;
}

.text{
	height:30px;
	width:90%;
	margin:0 20px;
	}

 	
.btn {
	width:92%;
	margin:80px 20px;
}	

.blocks label.error,
.blocks label.ok {
	position:absolute;
	z-index:2;
	top:37px;
	right:4%;
	padding:10px;
}	
	
.scrollToTop{
	position:fixed;
	right:0px;
	bottom:0px;
    cursor:pointer;
    width:30px;
    height:30px;
	}

.img-scroll{
    width:30px;
    height:30px;
	}
	
}


/*  ------------------------------------------ Laptop device ------------------------------------------ */

@media only screen and (min-width: 769px) and (max-width : 1024px) {
		
.main {
	max-width:96%;
	text-align:center;
	}
		
h2 { 
	padding:10px 25px 0 25px;
	} 
	
	
footer {
	width:100%;	
	max-width:96%;
	}	
	
.vignette {
	width:300px;
	height:200px;
	}
	
.vignette2 {
	width:300px;
	height:300px;
	}	

.vignette3 {
	width:300px;
	height:400px;
	}	
	

.scrollToTop{
	position:fixed;
	right:0px;
	bottom:0px;
    cursor:pointer;
    width:30px;
    height:30px;
	}

.img-scroll{
    width:30px;
    height:30px;
	}

.images-projet {
	margin:5px auto;
	width:95%;
	text-align:center;
	}
	
.images-about {
	width:97%;
	}
	
	
.about-titre{
	text-align:center;
	padding:0;
	}	
	
.about-txt{
	text-align:center;
	width:95%;
	margin:0 auto 40px auto;
	line-height:2em;
	}	
	
.blocks label {
	margin:0 45px;
}
	
.textarea {
	height:150px;
	max-width:90%;
	max-height:150px;
	margin:0 20px;
}

.text{
	height:30px;
	width:90%;
	margin:0 20px;
	}

 	
.btn {
	width:92%;
	margin:80px 20px;
}	

.blocks label.error,
.blocks label.ok {
	position:absolute;
	z-index:2;
	top:37px;
	right:4%;
	padding:10px;
}
	
	
}


/*  ------------------------------------------ Desktop device ------------------------------------------ */

@media only screen and (min-width : 1025px) and (max-width : 1200px) {

.main {
	max-width:90%;
	text-align:center;
	}

.header {
	max-width:1140px;
	}
	
ul.navigation1 {
	right:5%;
	z-index:1000;
	}
	
.vignette {
	width:265px;
	height:176px;
	}
	

.vignette2 {
	width:265px;
	height:265px;
	}	

.vignette3 {
	width:265px;
	height:353px;
	}	
		
.images-projet {
	margin:10px auto;
	}	
	
.footer {
	max-width:940px;
	}	
}

/*  ------------------------------------------ Desktop device ------------------------------------------ */

@media screen and (min-width : 1201px) {

.main {
	max-width:1140px;
	text-align:center;
	}

.header {
	max-width:1140px;
	}
	
.vignette {
	width:265px;
	height:176px;
	}
	

.vignette2 {
	width:265px;
	height:265px;
	}	

.vignette3 {
	width:265px;
	height:353px;
	}	
		
.images-projet {
	margin:10px auto;
	}	
	
.footer {
	max-width:940px;
	}	
}


#design-award {position:absolute; right:0; top:0; z-index:100;}
#design-award a {background: url(../images/design-award-red.png) no-repeat; display:block; height: 140px; width: 140px; text-indent: -9000px;}