@charset "UTF-8";

/* 
* -----------------------------------
* Font-face + Typographies
* -----------------------------------
*/

  @font-face {
  font-family: 'Hermes';
  src: url('font/hermes/Hermes-Bold-Italic.eot');
  src: url('font/hermes/Hermes-Bold-Italic.eot?#iefix') format('embedded-opentype'),
       url('font/hermes/Hermes-Bold-Italic.woff2') format('woff2'),
       url('font/hermes/Hermes-Bold-Italic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
}


  @font-face {
  font-family: 'Hermes';
  src: url('font/hermes/Hermes-Bold.eot');
  src: url('font/hermes/Hermes-Bold.eot?#iefix') format('embedded-opentype'),
       url('font/hermes/Hermes-Bold.woff2') format('woff2'),
       url('font/hermes/Hermes-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}



#pierre{
	position: fixed;
	left: 50px;
	top: 20px;
    
}
#feuille{
	position: fixed;
	left: 250px;
	top: 20px;    
	transition: left 4s ease;
    -webkit-transition:  left 4s ease; /* Safari */  
}
#ciseau{
	top: 20px;    
    transition: left 2s, ease;
    -webkit-transition:  left 2s ease; /* Safari */  
}

h1, h2, h3, h4, h5, h6{
	margin:0;
	padding:0;
}
#pierre:link, #feuille:link, #ciseau:link {
    color:black;
    text-decoration: none;
}

#pierre:hover, #feuille:hover, #ciseau:hover, .liens:hover{
    color:#ff003c;
}

.liens:link, .liens:visited {
    color:dimgrey;
    text-decoration: none;
    font-style: italic;

}

h1 {
	font-family: 'Hermes';
	font-size: 25px;
	height: 100px;

}
h2 {
	font-family: 'Hermes';
	font-size: 20px;
	letter-spacing: 0.05em;
	font-variant-ligatures: contextual;   
	text-rendering : optimizeLegibility;
	-moz-font-feature-setting : "liga=1,clig=1,dlig=1,hlig=1,rlig=1";
	font-variant-ligatures: common-ligatures; 
}
 a:link,  a:visited, a:active{
     color: black;

	text-decoration: underline;
}
h3 {
	font-family: 'Hermes';
	font-size: 20px; 
	bottom: 0px;
	word-spacing: -0.05em;
	font-variant-ligatures: contextual;   
	text-rendering : optimizeLegibility;
	-moz-font-feature-setting : "liga=1,clig=1,dlig=1,hlig=1,rlig=1";
	font-variant-ligatures: common-ligatures; 
    color: #7e7f81;

}
h4{
	font-family: 'Hermes';
	font-size: 20px;
	letter-spacing: 0.05em;
	font-variant-ligatures: contextual;   
	text-rendering : optimizeLegibility;
	-moz-font-feature-setting : "liga=1,clig=1,dlig=1,hlig=1,rlig=1";
	font-variant-ligatures: common-ligatures; 
}

.btexte{
	left:760px;
	bottom: 0px;
	position: absolute;
	transition: left 1s, bottom 3s, top 2s ease;
    -webkit-transition:  left 1s, bottom 3s, top 2s ease; 
}
.mtexte{
	left:510px;
	width: 240px;
	bottom: 0px;
	position: absolute;
	transition: left 1s, bottom 3s, top 2s ease;
    -webkit-transition:  left 1s, bottom 3s, top 2s ease; 
}
.mhtexte{
	left:340px;
	width: 310px;
	bottom: 0px;
	position: absolute;
	transition: left 1s, bottom 3s, top 2s ease;
    -webkit-transition:  left 1s, bottom 3s, top 2s ease; 
}
.texte, h3.texte, h4.texte{
	left:-250px;
	width: 240px;
	bottom: 0px;
	text-align: right;
	position: absolute;
	transition: left 1s, bottom 3s, top 2s ease;
    -webkit-transition:  left 1s, bottom 3s, top 2s ease; 
}
/* 
* -----------------------------------
* Typograph
* -----------------------------------
*/




ul{
	padding-left:0;
	list-style-type:none;
}
.rubriqueActive{
	text-decoration: underline;
}
.bvisuels, .mvisuels, .visuels{
	position: relative;
	margin-bottom: 280px;
}
.bvisuels{
	left: 50px;
	transition: left 3s ease;
    -webkit-transition:  left 3s ease; /* Safari */  
        background-color: #f5feeb;
}
.mvisuels{
	left: 250px;
	transition: left 1s ease;
    -webkit-transition:  left 1s ease; /* Safari */  
}
.visuels{
	left: 550px;
	transition: left 5s ease;
    -webkit-transition:  left 5s ease; /* Safari */  
}
body.mobil{
	background-color: red;
}
body{
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
	margin-left: 0px;
    background-color: #f5feeb;

}
#un, #deux, #trois{
	float: left;
	position: relative;
	margin-top: 100px;


}
#un{
	left: 50px;
}
#un, #trois{
	width:500px;
}
#deux{
	width:400px;
	margin-bottom: 400px;
}

#infos{
	margin-top: 750px;
	margin-bottom: 1800px;

}

.infos{
position:fixed; 
right:10px; 
top:-20px;
transition: top 1s ease;
-webkit-transition:  top 1s ease; /* Safari */  
}
a.infos:hover{
top: -2px;
}
   


/* 
* -----------------------------------
* Informations de début & fixeds
* -----------------------------------
*/


/* 
* -----------------------------------
* Projets
* -----------------------------------
*/


#Blanc,#Craies,#Eau,#Viale, #Lendemains,#Mediatheque-Mons, #Venise, #EnsAD-jpo, 
#Dacappo-ed, #TAM, #No-Puedo-Olvidar, #Diplome, #Viale,
#Hoax, #Pierre, #Ustamk, #Strates, #evenements, #Daccapo, #Decris1, #Decris2, #Decris3,  #20ans,
#Classifications, #Isitituto-IC, #Segni, #laroute, #bigtime, #Ensad-edition, #spectaculaires, #initiative, #titreLibre, #camarde, #surprise, #UnViolent, #Jeux, #Revoir, #Regards, , #Hopital,#Communs, #64 , #fdl, fdlretraite {	
	background-repeat: no-repeat;
	background-size: 750px 500px ;
	width: 750px;
	height: 500px;
}

/* 
* -----------------------------------
* écrans
* -----------------------------------
*/

/* Média Queries */


/* 1:  */
@media screen and (min-width: 0px) and (max-width: 1399px) {
#un{
	width: 800px;
}
#deux{
	left: 250px;

}
#trois{
	left: 350px;

}

.bvisuels, .mvisuels, .visuels{
	width: 770px;
	height: 500px;
	margin-bottom: 500px;

}
.btexte{
	left:0px;
	top: 510px;
    width: 500px;
}
.mtexte{
	left:0px;
	top: 342px;
    
}
.mhtexte{
	left:0px;
	top: 510px;
}
.texte, h3.texte, h4.texte{
	left:0px;
	top: 510px;
	text-align: left;
}
#ciseau{
	left: 500px;
	position: fixed;
}
#feuille{
	left: 300px;
	position: fixed;
}
.bvisuels, .mvisuels, .visuels{
	left: 50px;
 }
}
/* 7 */
@media screen and (min-width: 1400px) and (max-width: 1800px) {

#un{
	left: 300px;
    width: 800px;
}
#deux{
	left: 400px;
}
#trois{
	left: 600px;
	width: 300px;
}
#pierre{
	left: 300px;
}

#feuille{
	left: 800px;
}
#ciseau{
	left: 1300px;
	position: fixed;
}
.bvisuels{
	left: 300px;
	width: 770px;
	height: 500px;
}
.mvisuels{
	left: 800px;
}
.btexte{
	left:760px;
    width: 200px;
    margin-left: 10px;
}
.visuels{
	left: 1300px;
}

}

/* 8 */
@media screen and (min-width: 1800px) and (max-width: 30000px) {

#un{
	left: 300px;
    width: 800px;
}
#deux{
	left: 400px;
}
#trois{
	left: 600px;
	width: 300px;
}
#pierre{
	left: 300px;
}

#feuille{
	left: 800px;
}
#ciseau {
	left: 1300px;
	position: fixed;
}
.bvisuels{
	left: 300px;
	width:1000px;
	height:664px;
}
.btexte{
	left: 1020px;
    width: 400px;
}
#Blanc,#Craies,#Eau,#Viale, #Lendemains,#Mediatheque-Mons, #Venise, #EnsAD-jpo, 
#Dacappo-ed, #TAM, #No-Puedo-Olvidar, #Diplome, #Viale,
#Hoax, #Pierre, #Ustamk, #Strates, #evenements, #Daccapo, #Decris1, #Decris2, #Decris3, #20ans,
#Classifications, #Isitituto-IC, #Segni, #laroute, #bigtime, #Ensad-edition, #spectaculaires, #initiative, #titreLibre, #camarde, #surprise, #UnViolent; #Jeux, #Revoir, #Regards, #Communs, #Hopital, #64, #fdl, fdlretraite   {	
	width:1000px;
	height:664px;
}
.mvisuels{
	left: 800px;

}
.visuels{
	left: 1300px;
}

}