/*-------------------------
	General Styles
--------------------------*/
* {
  margin: 0;
  padding:0;
}
html, body{
font-size:xx-small;
/*	font-family: 'Crimson Text', serif !important;*/
	font-family: 'Raleway', sans-serif  !important;
	width: 100%;
	color:#000;
	background-color:#fff;
	height:100%;

}

a {  color: #000;}
a:link {  color: #000;	text-decoration: none;}
a:visited {
  color: #000;
  -moz-transition: color 100ms;
  -webkit-transition: color 100ms;
  transition: color 100ms;
  text-decoration:none;

}

a:hover {
  color:#949494;
  transition: color 200ms;
  text-decoration: underline;

}

/*---------------------------------
	logo
-----------------------------------*/

.header{
	width:100%;
	background-color:#fff;
	text-align: center;
/*	border: 1px solid red; */
	padding-top: 40px;
	padding-bottom: 8px;
	font-weight: bold;
	margin-left: auto;
	margin-right: auto; 
/*	line-height: 2.5em;*/
	font-family: 'Crimson Text', serif !important;

	text-transform: uppercase;
	font-weight:300 !important; 
	letter-spacing:1px !important;
	font-size:24px !important;	
	line-height: 0.8;
	
}
.header2{
	font-family: 'Questrial', sans-serif  !important;
	font-size:14px !important;
	letter-spacing:6px !important;

}

.header a:hover {
  color:#000;
  text-decoration: none;

}

/*---------------------------------
	MENU Navigation
-----------------------------------*/
.zone {
	background-color:#fff;
	height:56px;
	width: 100%;

/*	border-bottom: 1px solid #d9d9d4;
	border-top: 1px solid #d9d9d4; */
}

.zonefixe{
	background-color:#fff;
	width: 100%;
	height:56px;
	top:0px;
	position: fixed;
	display: none;
	border-bottom: 1px solid #d9d9d4;
/*	border-top: 1px solid #d9d9d4;*/
	transition:padding 0.4s;
	z-index:777;
}

.zonemenu{
	width: 100%;
	text-align: center;
/*	border: 1px solid green;*/
	padding-top: 16px;
	padding-bottom: 8px;
	margin-left: auto;
	margin-right: auto; 
	line-height: 1.6em;
/*	font-family: 'Crimson Text', serif !important;*/
	font-family: 'Questrial', sans-serif  !important;
	text-transform: uppercase;
	font-weight:normal !important; 
	letter-spacing:2px !important;
	font-size:14px !important;	
}

.zonemenu a{

vertical-align: top;
display:inline-block;

margin-left:20px;
margin-right:20px;
}


.active  {
/*  color:#949494 !important;*/
}

/* ------ mini logo qui apparait lors du scrolling -----*/

.zonefixe img{
	height:20px;
	position:relative;
	left:10px;
	bottom:32px;
}




#superglobal{
	position : relative;
	min-height: 100%;
	width:100%;

}
#globalcover{
	position: relative;
	min-height: 100%;
	margin: 0 auto;
/*	padding-bottom: 30px;
			border: 1px solid red;*/

}
#global{
	position: relative;
	min-height: 100%;
	margin: 0 auto;
	padding-bottom: 30px;
/*			border: 1px solid red;*/

}
.page{
	width: 1422px;
	margin:  50px auto;
	background-color: #fff!important;
/*	border: 1px solid red;*/
}
.pageprojet{
	width: 1244px;
	margin:  50px auto;
	background-color: #fff !important;
/*	border: 1px solid red;*/
}


/*---------------------------------
	footer
-----------------------------------*/
.footer{
	width: 1422px;
	position:absolute;
    bottom: 0;
    height:30px;
	left: 50%;
	padding: 10px;
	border-top: 1px solid #e5e5e5;
	color: #757879;
	font-size: 16px;
	margin-left: -711px;
/*	background-color: #aaa;*/
	text-align:center;
}
	.back-to-top {
			opacity:0.6;
			position: fixed;
			bottom: -4px;
			right: 2em;
			display: none;
		}

	
		.back-to-top:hover {	
				opacity:1;
			}
			


/*---------------------------------
	page de projet
-----------------------------------*/
.contenutexte {
	max-width:800px;
	text-align: justify;
/*	border: 1px solid green; */
	padding-top: 8px;
	padding-bottom: 8px;
	margin-left: auto;
	margin-right: auto; 
/*	font-family: 'Crimson Text', serif !important; 
	font-family: 'Questrial', sans-serif  !important;*/
	font-family: 'Raleway', sans-serif;
	line-height: 16px;
	font-weight:normal !important; 
	font-size:14px !important;
}
.rubrique{
    color: #7c7c7c;
/*	max-width:800px;
	border: 1px solid green; */
	text-align: left;

	padding-top: 100px;
	padding-bottom: 8px;
	margin-left: auto;
	margin-right: auto; 
/*	font-family: 'Crimson Text', serif !important; */
	font-family: 'Raleway', sans-serif  !important;
	line-height: 32.6333px;
	font-weight:normal !important; 
	font-size:12px !important;
}
.contenu{
/*	background-color: #eee;*/ 

}
.square{
	display: block; 
	width: 800px;

	margin:50px auto 50px auto;
	overflow: hidden;
}
.square img{
	width: 100%;
}
.photo{
	display: block; 
	width: 1200px;

	margin:50px auto 50px auto;
	overflow: hidden;
}
.portrait{
	display: block; 
	width: 533px;

	margin:50px auto 50px auto;
	overflow: hidden;
}
.cinema{
	display: block; 
	width: 1422px;

	margin:50px auto 50px auto;
	overflow: hidden;
}
.duo {
 /*background-color: #eee;*/
  display: -webkit-flex; /* Safari */
  -webkit-justify-content: space-between; /* Safari 6.1+ */
  display: flex;
  justify-content: space-between;
	margin:50px auto 50px auto;
}
.duo img{
	width: 100%;
	object-fit: contain;
	margin:auto 0px 0px 0px;

	width: 690px;
}
.verticale{
/* background-color: #eee; */
  display: -webkit-flex; /* Safari */
  -webkit-justify-content: space-between; /* Safari 6.1+ */
  display: flex;
  justify-content: space-between;
	margin:50px auto 50px auto;
	width: 1200px;
}
.verticale img{
	width: 48%;
}
.portrait img{
	width: 100%;
}
.cinema img{
	width: 100%;
}
.square img{
	width: 100%;
}
.photo img{
	max-width: 100%;
}
.legende{	

	text-align: right;
/*	border: 1px solid green;
	padding-top: 8px;*/
	padding-bottom: 8px;
	margin-left: auto;
	margin-right: auto; 

	font-weight:normal !important; 
	color: #9b928d;
	font-size:18px;
/*	font-family: 'Crimson Text', serif !important;*/
	font-family: 'Raleway', sans-serif  !important;
	font-style:italic;
}


/*---------------------------------
	cover
-----------------------------------*/


.over {	width:800px;
		height:800px; 
		
/*		float:center;
		margin-left:0px;	
		border: 1px solid red;*/	
		overflow:hidden; 
		margin:  50px auto;}

			}*/
.sl {position: relative;	width:800px; height:800px;overflow:hidden;float:left;

	}
.sl img {position: absolute; width:800px; height:800px;	margin: 0px;}
/*.sl span {font-family: arial;font-size:15px;color:#FFF;text-shadow: 1px 1px #000;padding:5px;}
span {font-family: arial;font-size:15px;color:#000;padding: 0 15px;}*/
/*#first div {position: relative;width:120px; height:160px;overflow:hidden;}*/
/*.slide img {width:600px; height:600px;	
/*#first {width:120px; height:180px; float:left;margin-left:30px;}*/

/*---------------------------------
	projects panel
-----------------------------------*/


.projet{
	vertical-align: top;
	width: 512px;
	height: 550px;
	margin: 50px 50px;
	background-color:#fff;
	display:inline-block;

}
.projet a:hover img{
	opacity: .9;
/*	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);*/

	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;

}



/* ---- gros titre et sous titre -----*/
.titreprojet{
	padding-top: 8px;
	padding-bottom: 8px;
	margin-left: auto;
	margin-right: auto; 
	line-height: 1.6em;
/*	font-family: 'Crimson Text', serif !important;*/
	font-family: 'Questrial', sans-serif  !important;
	font-weight:normal !important; 
	letter-spacing:0px !important;
	font-size:16px !important;	
}



	


/*-----------------------------------
	Media querries
------------------------------------*/



/* On middle screens medium RED */


@media (min-width: 651px) and (max-width: 1480px) {
.page{
	width: 612px;
/*	border: 1px solid red;*/
}
.pageprojet{
	width: 612px;

}
.projet{
/*	background-color: red; */
	height:auto;
	margin: 10px 10px;
	width: 45%;
}
.projet img{
	width: 100%;

}
.square{
	width: 612px;
}
.duo {
	margin:10px auto 10px auto;
	width: 612px;
	display: block; 
	overflow: hidden;
}
.duo img{
	width: 100%;
	object-fit: contain;
	margin:40px auto 0px auto;
}
.photo{
	width: 612px;
}
.portrait{
	width: 612px;
}
.verticale{
	width: 612px;
}
.cinema{
	width: 612px;
}
.portrait img{
	width: 100%;
}
.verticale img{
	width: 100%;
}
.cinema img{
	width: 100%;
}
.square img{
	width: 100%;
}
.photo img{
	max-width: 100%;
}

.about{
	width: 844px;
}


.footer{
	width: 612px;
	margin-left: -412px;
}
.over {	width:512px;
		height:512px; 
		
/*		float:center;
		margin-left:0px;	
		border: 1px solid red;*/
		overflow:hidden; 
		margin: 0px  auto;}

			
.sl {position: relative;	width:512px; height:512px;overflow:hidden;float:left;

	}
.sl img {position: absolute; width:512px; height:512px;	margin: 0px;}

}

/* On small screens smartphone BLUE*/


@media (max-width: 650px) {

.page{
	width: 424px;
}
.pageprojet{
	width: 424px;
}
.projet{
/*	background-color: blue; */
	height:auto;
	margin: 5px 5px;
	width: 200px;

}

.projet img{
	width: 100%;

}

.square{
	width: 100%;
}
.duo {
	margin:10px auto 10px auto;
	width: 424px;
	display: block; 
	overflow: hidden;
}
.duo img{
	width: 100%;
	margin:20px auto 20px auto;
}
.photo{
	width: 424px;
}
.portrait{
	width: 424px;
}
.verticale{
	width: 424px;
}
.cinema{
	width: 424px;
}
.portrait img{
	width: 100%;
}
.verticale img{
	width: 100%;
}
.cinema img{
	width: 100%;
}
.square img{
	width: 100%;
}
.photo img{
	max-width: 100%;
}

.about{
	width: 424px;
}
.footer{
	width: 424px;
	margin-left: -212px;
}

.over {	width:400px;
		height:400px; 
		
/*		float:center;
		margin-left:0px;	
		border: 1px solid red;*/
		overflow:hidden; 
		margin:  0px auto;}

			
.sl {position: relative;	width:400px; height:400px;overflow:hidden;float:left;

	}
.sl img {position: absolute; width:400px; height:400px;	margin: 0px;}


.bandeau {
width: 304px;
height: 304px;
overflow:hidden;
margin:10px;
}
.bandeau  img{
width: 943px;
margin:0;
position:relative;
left:-314px; /* choix de l'image 1=0 , 2= -314, 3= -628*/
	z-index:1;
}
.clients img{
width: 304px;
overflow:hidden;
margin:10px;
}
.col1{
width:304px;
padding: 10px;
float:none;
}

.col2{
width:304px;
padding: 10px;
float:none;
}

.colcentre{
width:304px;
padding: 10px;
float:none;
}

}

/* On SMARTPHONE sur une seule colonne GREEN */ 


@media (max-width: 430px) {

.page{
	width: 300px;
}
.pageprojet{
	width: 300px;
}


.square{
	width: 300px;
}
.duo {
	margin:10px auto 10px auto;
	width: 300px;
	display: block; 
	overflow: hidden;
}
.duo img{
	width: 100%;
	margin:20px auto 20px auto;
}
.photo{
	width: 300px;
}
.portrait{
	width: 300px;
}
.verticale{
	width: 300px;
}
.cinema{
	width: 300px;
}
.portrait img{
	width: 100%;
}
.verticale img{
	width: 100%;
}
.cinema img{
	width: 100%;
}
.square img{
	width: 100%;
}
.photo img{
	max-width: 100%;
}

.over {	width:300px;
		height:300px; 
		
/*		float:center;
		margin-left:0px;	
		border: 1px solid red;*/
		overflow:hidden; 
		margin:  0px auto;}

			
.sl {position: relative;	width:300px; height:300px;overflow:hidden;float:left;

	}
.sl img {position: absolute; width:300px; height:300px;	margin: 0px;}

.projet{
/*	background-color: green; */
	height:auto;
	margin:5px 2px 0px 2px;
	width: 48%;

}

.projet img{
	width: 100%;

}

.titreprojet{
/*		visibility: hidden;*/
		display:none;
}
.about{
	width: 280px;
}
.footer{
	width: 280px;
	margin-left: -150px;
}
.zonefixe img{
display:none;
}
.logo {
width: 320px;
}


.bandeau {
width: 304px;
height: 304px;
overflow:hidden;
margin:10px;
}
.bandeau  img{
width: 943px;
margin:0;
position:relative;
left:-314px; /* choix de l'image 1=0 , 2= -314, 3= -628*/
	z-index:1;
}
.clients img{
width: 304px;
overflow:hidden;
margin:10px;
}
.col1{
width:304px;
padding: 10px;
float:none;
}

.col2{
width:304px;
padding: 10px;
float:none;
}

.colcentre{
width:304px;
padding: 10px;
float:none;
}

}