@font-face {
    font-family: 'Minimal';
    src: url('../type/minimal_v3-black-webfont.woff2') format('woff2'),
         url('../type/minimal_v3-black-webfont.woff') format('woff'),
         url('../type/minimal_v3-black-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'Minimal2';
    src: url('../type/minimal_v3-medium-webfont.woff2') format('woff2'),
         url('../type/minimal_v3-medium-webfont.woff') format('woff'),
         url('../type/minimal_v3-medium-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}




body {
	margin: 0px;
	padding: 0px;
	font-family: 'Minimal', "Arial Black", sans-serif;
	/**overflow: hidden;**/
	font-weight: normal;
  font-style: normal;
}


#mainpage {
  width: 100%;
  height: 100%;
  display: inline block;
  overflow: auto;
  position: relative;
  font-weight: normal;

}


a 		{ color:#000; }
a:hover {color:#fff; }


/************************************** Loader **************************************/


#preloader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:rgba(255, 255, 255, 1);
	z-index:100;
	cursor: url(../images/loading.png) 10 10, wait;
}

#status {
	width:300px;
	height:200px;
	position:absolute;
	left:50%;
	top:50%;
	/*background:url(http://simonrenaud.fr/images/loader/loader.gif) no-repeat center center;*/
	margin:-100px 0 0 -100px;
	font-size: 27px;
	color:#000;
}




/************************************** menu **************************************/


#menu 					{ margin: 0px 0px 0px 0px; font-size: 50px;	line-height: 55px; height: 120px; }
#menu1, #menu2 			{ margin: 0px 0px 0px 0px; font-size: 40px;	line-height: 50px;}


#menu li, #menu1 li, #menu2 li 						{ float:left; list-style:none; z-index: 10; }
#menu li a,#menu1 li a, #menu2 li a 				{ display:block; width:auto; text-decoration:none;}
#menu li a:active, #menu1 li a:active, #menu2 li a:active,	{ text-decoration:none; }


#btn_up{display:none;z-index:10; }


.col1 { width:1000px; position:fixed; left:15px; top:10px; }
.col2 { width:auto; position:fixed; right:15px; top:10px; }
.col3 { width:200px; position:fixed; left:710px; top:10px;  }
.col4 { position:fixed; left:10px; bottom:10px; cursor:pointer; }





.bouton { cursor:pointer; }




/****************************** informations & contact *****************************/

#contenu1, #contenu2  {
	z-index: 100;
  	height: 100%;
  	width: 100%;
  	overflow-y: auto;
  	position: fixed;
  	cursor: url(../images/btn_close.png) 10 10, pointer;
	background-color: rgba(255, 255, 255, 1);
}

.infos {
	position: relative;
	margin-top: 0px;
	margin-left: 0px;
	color: #000;
}

.infos .text1 {width: auto; position:relative; height:auto;}
.infos .text1  p {margin: 0; padding:0;}

h1 {font-size: 16px; font-weight: 400; margin: 0; padding:0; font-family: 'Minimal2', "Arial ", sans-serif;}

.text1 {
	float:left;
	margin: 0px;
	font-size: 40px;
	line-height: 50px;
	padding-left:10px;
	padding-bottom:10px;
	font-weight: normal;
  font-style: normal;
	}


.text1 a {border-bottom: 2px solid #000; text-decoration:none; color:#000; }
.text1 a:hover { border: none;color:#000; }


.text2 {

	width:620px;
	margin: 0px;
	font-size: 15px;
	line-height: 21px;
	padding-left:10px;
	font-weight: normal;
    font-style: normal;
	}

.text2 a {border-bottom: 2px solid #000; text-decoration:none; color:#000;}
.text2 a:hover { border: none; color:#0000ff;}

.text3 {
	float:left;
	}


.back1 {
	position: relative;
	margin-top: 10px;
	margin-left: 0px;
	padding-left:10px;
	padding-bottom:0px;
	font-size: 15px;
	color: #000;
	list-style: none;
	}

.back1 a {border-bottom: 2px solid #000;text-decoration: none; color:#000;}
.back1 a:hover { border:none; cursor:pointer; }



/************************************** gallery **************************************/

#gallery{
	float: left;
	width: 100%;
	margin-bottom:100px;
}


/************ gallery menu Categories ************/

#gallery-header {
	display: block;
	width: 260px;
	padding-top: 0px;
	position: fixed;
	top: 0;
	right: -260px;
	height: 100%;
 	list-style: none;
	background: rgba(255, 255, 255, 0);

}

#gallery-header-center{
	margin-right: auto;
	margin-left: auto;
	padding-top: 0px;
}


#gallery-header-center-right{}

.gallery-header-center-right-links {
	color: black;
	font-size: 27px;
	line-height: 35px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin-left: -30px;
	list-style:none;
}


.gallery-header-center-right-links:hover { color: #0000ff;	cursor: pointer;}
.gallery-header-center-right-links-current { color: #0000ff;}
.gallery-header-center-right-links-current:hover { color: #0000ff;}


/************ gallery images ************/


#gallery-content{
	width: 100%;
	min-width: 1020px;
	position:relative;
}


#gallery-content-center a {
	/***-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;***/
	display:block;
	position:relative;
	text-decoration:none;
	cursor: url(../images/btn_open.png) 10 10, pointer;

}


#gallery-content-center a img{
	width: 1200px;
	height:auto;
	margin-bottom: 10px;
	margin-left: 0px;
	background-color: white;
}

#gallery-content-center a span		 { position:absolute; display:none; }
#gallery-content-center a:hover span { display:block;}
#gallery-content-center span.titre	 { color:#000; font-size:1.8em; z-index:3; top:10px; left:10px; line-height: 1.1em;   }
#gallery-content-center span.descr	 { 	display: none !important;
										color:#000;
										font-size:1.8em;
										z-index:3;
										top:35px;
										left:415px;
										transform:rotate(-90deg);
										-ms-transform:rotate(-90deg); /* Internet Explorer */
										-moz-transform:rotate(-90deg); /* Firefox */
										-webkit-transform:rotate(-90deg); /* Safari et Chrome */ }


#gallery-content-center span.bg {
		top:0;
		left:0;
		height:98.5%;
		width:470px;
		z-index:2;
		margin-left: 10px;
		margin-bottom: 10px;
	background-color: rgba(255, 255, 255, 1);
/***********************
background: -moz-linear-gradient(top,  rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.9)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top,  rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top,  rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom,  rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6000000', endColorstr='#00000000',GradientType=0 );
***********/
}



.soon{cursor: url(../images/btn-soon2.png) 10 10, wait;}


/************************************** works **************************************/

#contenu3,#contenu4,#contenu5,#contenu6,#contenu7,#contenu8,#contenu9,#contenu10,#contenu11,#contenu12,#contenu13,#contenu14,#contenu15,#contenu16,#contenu17,#contenu18,#contenu19,#contenu20,#contenu21,#contenu22,#contenu23,#contenu24,#contenu25,#contenu26,#contenu27,#contenu28,#contenu29,#contenu30,#contenu31,#contenu32,#contenu33,#contenu34,#contenu35,#contenu36,#contenu37,#contenu38,#contenu39,#contenu40,#contenu41,#contenu42,#contenu43,#contenu44,#contenu45,#contenu46,#contenu47,#contenu48,#contenu49,#contenu50,#contenu51,#contenu52,#contenu53,#contenu54,#contenu55,#contenu56,#contenu57,#contenu58,#contenu59,#contenu60,#contenu61,#contenu62,#contenu63,#contenu64,#contenu65,#contenu66,#contenu67,#contenu68,#contenu69,#contenu70
	{
	z-index: 50;
  	height: 100%;
  	width: 100%;
  	overflow-y: auto;
  	position: fixed;
  	cursor: url(../images/btn_close.png) 10 10, pointer;
	background-color: rgba(255, 255, 255, 1);
}

.work-gallery{
min-width: 830px;
max-width: 1500px;
padding-right: 10px;
margin:auto;
}

/**************** btn retour ***************/

.back {
	position: relative;
	margin-top: 10px;
	margin-left: 0px;
	padding-left:20px;
	padding-bottom:20px;
	font-size: 15px;
	color: #000;
	list-style: none;
	}

.back a {border-bottom: 2px solid #000;text-decoration: none; color:#000;}
.back a:hover { border:none; cursor:pointer; }

/**************** works infos ***************/

.work {
	position: relative;
	display: inline-block;
	margin-top: 10px;
	margin-left: 10px;
	color: #000;

}

.text3, .text4  {float:left;width: 400px; margin-left: 10px;line-height: 21px;}
.text3 a, .text4 a , .text5 a {border-bottom: 2px solid #000;text-decoration: none; color:#000;}
.text3 a:hover, .text4 a:hover , .text5 a:hover { border:none; }

.text4 p {margin-top: 0px;padding-top: 0px;}
.text5  {min-width: 200px;max-width: 800px; margin-left: 10px;line-height: 21px;font-size: 15px; }
.text6  {margin-bottom: 30px;margin-left: 10px;font-size: 10px;}

.work1, .work2, .work3, .work4 {
	float:left;
	margin: 0px;
	padding-left:0px;
	list-style: none;
	}

.work1, .work2 {font-size: 27px;line-height: 30px;  margin-bottom:5px;font-weight: normal;font-style: normal;}
.work3, .work4 {font-size: 15px; margin-top:0px; margin-bottom:20px;font-weight: normal;font-style: normal;}

.work1, .work3 {width: 125px;}
.work2, .work4 {width: 265px;}



/**************** works images ***************/

.work-gallery-content{
	display: inline-block;
	margin-right: 0px;
}


.work-gallery-content img{
	width: 100%;
	height: auto;
	padding-left: 0px;
	padding-top: 10px;
	display:block;

	margin-left: auto;
    margin-right: auto;
}

.work-gallery-content iframe{
	width: 100%;
	padding-left: 0px;
	padding-top: 10px;

}


.hori{
	min-width: 830px;
	max-width: 1500px;
}


.verti{
	min-width: 350px;
	max-width: 500px;
}




/********************************************************************************* media queries *********************************************************************************/


/********************************************************************************* <1000 *********************************************************************************/


@media screen and (max-width: 1200px) and (max-height:1200px)
{

#mainpage {overflow-x: hidden;}

/*******menu********/
#menu, #menu1, #menu2 	{ font-size: 17px;	line-height: 20px; float:left;}
#menu1 				{ margin: 0px 0px 0px 0px; }
#menu1 li 			{ list-style:none; z-index: 10; }
#menu1 li a 		{ display:inline; width:auto; text-decoration:none;}
.col1 { width:200px;}
.col2 { width:100px; right:15px; top:10px; }
.col3 { width:100px; left:240px; top:90px;  }



.col2 a, .col3 a {border-bottom: 3px solid #000; text-decoration: none; color:#000;}

#status { font-size: 16px; }
/*******gallery********/

.work-gallery{
min-width: 300px;
max-width: 900px;
padding-right: 10px;
margin:auto;
}

#gallery-header {
	width: 150px;
	right: -150px;
}

#gallery-content{
	padding-top:50px;
	min-width: 800px;
	max-width: 1000px;
}

.gallery-header-center-right-links {
	font-size: 16px;
	line-height: 21px;
}

#gallery-content-center span.bg {background-color: rgba(255, 255, 255, 0); }
#gallery-content-center span.titre	 { font-size:15px; line-height: 21px;   }
#gallery-content-center span.descr	 { font-size:15px; left:435px; color:transparent;}
#gallery-content-center span.titre	 {color:transparent;}

/*******info********/
.text1 {font-size: 17px;line-height: 21px;padding-bottom:10px;	}
.text1 a {border-bottom: 2px solid #000;}

h1 {font-size: 11.5px; }



/*******work********/
.text4  {width: 100%; min-width: 300px; max-width: 800px; margin-left: 10px;margin-right: 50px;line-height: 18px;}
.work1, .work2 {font-size: 15px;line-height: 21px;  margin-bottom:5px;}

}






/********************************************************************************* mobiles *********************************************************************************/


@media only screen and (max-device-width:800px), only screen and (max-width:800px)
{

/*******all********/

#mainpage {
  width: auto;
   margin: auto;
   padding: 200px;
}

#contenu1, #contenu2  {overflow-x: hidden;}

.mobile {display: none !important;}

/*******menu********/



/*******gallery********/
#gallery-content{
	padding-top:50px;
	min-width: 300px;
	max-width: 500px;
}

#gallery-content-center a img{
	width: 90%;
	max-height: auto;
	margin-bottom: 10px;
	margin-left: 10px;
	}
#gallery-content-center span.bg {width: 90%; }
#gallery-content-center span.descr {left:80%; }



/*******work********/
.work-gallery, .text3, .text4, .text5, .text6, .work-gallery-content img, .work {
	width: 100%;
min-width: 300px;
max-width: 500px;
}


/*******info********/
.infos .text1 {width: 95%; }
.text2 {width: 90%; }


}