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

@font-face {
    font-family: 'interstateregular';
    src: url('fonts/interstate-webfont.eot');
    src: url('fonts/interstate-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/interstate-webfont.woff2') format('woff2'),
         url('fonts/interstate-webfont.woff') format('woff'),
         url('fonts/interstate-webfont.ttf') format('truetype'),
         url('fonts/interstate-webfont.svg#interstateregular') format('svg');
    font-weight: normal;
    font-style: normal;

}



/* GENERAL */
body{
	font-family: 'interstateregular', sans-serif;
}

header{
	position: relative;
	height: 121px;
}

strong{
	font-family: 'interstateregular', sans-serif;
	font-weight:bold
}

.orange{
	color:#ea620d;
}

a:link{
	text-decoration:none;	
}
a:hover{
	color:#ea620d;
}
/* /GENERAL */


/* NAVIGATION */
nav{
	position:absolute;
	bottom:0;
	right:0;
}
nav .actif{
	font-weight: bold;
}
nav li{
	display: inline;
	padding: 0 10px 0 10px;
	border-right: 1px solid #ea620d;
}
.select-menu {
	display: none !important;
	color: #9f3e02;
	border: 1px solid #ea620d;
	background: #fff !important;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	position: relative;
	float:left;
	width: 90%;
	margin: 0;
	margin: 30px 0 10px 0;
	margin-left:5%;
	height: 35px;
}
.select-menu option {
	padding: 4px 0 10px 4px;
}
/* /NAVIGATION */

/* PATCHWORK PAGE ACCUEIL */
#patchwork{
	margin-top: 50px;
	position: relative;
	height: 715px;
}

#patchwork img{
	  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;	
  position:absolute;
  left:0;
}

#patchwork .im1:hover{
	opacity: 0;
}

#patchwork #tb1{
	position: absolute;
	left:0;
	top:0;
	width:430px;
	height: 230px;
	overflow:hidden;
}

#patchwork #tb2{
	position: absolute;
	left:465px;
	top:0;
	width:230px;
	height: 230px;
	overflow:hidden;
}

#patchwork #tb3{
	position: absolute;
	right :0;
	top:0;
	width:230px;
	height: 615px;
	overflow:hidden;
}

#patchwork #tb4{
	position: absolute;
	left :0;
	top:265px;
	width:230px;
	height: 430px;
	overflow:hidden;
}

#patchwork #tb5{
	position: absolute;
	left :265px;
	top:265px;
	width:430px;
	height: 350px;	
	overflow:hidden;
}

#tb1 img, #tb2 img, #tb3 img, #tb4 img, #tb5 img{
	width: 100%;
} 


#patchwork .simpleIsBeautiful{
	position: absolute;
	right:0;
	top: 662px;
	width: 260px;
	height:53px;
}
/* /PATCHWORK PAGE ACCUEIL */


/* centre */
#centre{
	overflow:hidden;
	margin-top: 70px;
	font-family: 'interstateregular', sans-serif;	
}
.legende{
	font-family: 'interstateregular', sans-serif;
}
/* /centre */


/* a-propos */
.apropos{
	text-align:right;	
}

.apropos .btContact a{
	color: white;
	padding: 3px;
	background-color: #ea620d;
	width:80px;
	text-align:center;
	float:right;
	margin-top: 10px;
}

/* /a-propos */


/* formulaire contact */

.contact{
	font-family: 'interstateregular', sans-serif;
	margin-left:2px;
}
.contact input, .contact textarea{
	height: 40px;
	width: 400px;
	border: 1px solid #B1B1B1;
	margin-top: 5px;
	padding: 0 10px;
}
.contact textarea{
	height: 150px;
}

.contact input[type="submit"]{
	background:url(../images/mail.png) center no-repeat;
	background-color:#ea620d;
	border: none;
	color: white;
}
.contact input[type="submit"]:hover{
	background-color:#B1B1B1;
}

/* /formulaire contact */

/* message box */

#messageBox{
	
}

#messageBox.erreur{
	color: red;
}

#messageBox.valide{
	color: #059F3D;
}

/* /message box */

/* FOOTER */
footer{
	overflow:hidden;
	margin-top: 50px;
}
/* /FOOTER */


/* Responsive */
@media (min-width: 769px) and (max-width: 960px) {
}
@media (min-width: 481px) and (max-width: 768px) {
	#patchwork{
		height:auto !important;
		overflow:hidden;
		overflow:hidden;
	}
	
	#patchwork img{
		position:relative;
		float:none;
	}
	
	#patchwork .im1{
		display:none;
	}
	
	#tb1, #tb2, #tb3, #tb4, #tb5, .simpleIsBeautiful{
		position: relative !important;
		float:left !important;
		width: 48% !important;
		height: auto !important;
		margin-bottom: 2% !important;
		left: 0 !important;
		top: 0 !important;
		right: 0 !important;
		margin-right: 2% !important;
	}
	.simpleIsBeautiful{
		float:left;
		text-align:center;
		width: 100% !important;
		margin-top: 20px;
	}
		
	header{
		height:auto !important;
		overflow:hidden !important;
	}
	
	.aproposPhoto{
		display:none;	
	}
	
	.apropos{
		text-align:center;
		width: 100% !important;
	}
	
	/*nav{
		position: relative !important;
		float:left !important;
		width: 100%;
		clear:both !important;
		margin-top: 40px !important;
		text-align:center !important;
	}*/
	
	nav{
		display: none !important;
	}
	.select-menu {
		display: block !important;
	}
	
	#centre{
		padding: 0 10px 0 10px;
		margin-top: 10px;	
	}
	
	footer{
		float:none !important;	
	}

}
@media (max-width: 480px) {
			
	#logo, .communication{
		width: 100% !important;
		text-align:center;
	}
	.communication{
		margin-top: 10px;	
	}
		
	#patchwork{
		height:auto !important;
		overflow:hidden;
	}
	
	#patchwork img{
		position:relative;
	}
	
	#patchwork .im1{
		display:none;
	}
	
	#tb1, #tb2, #tb3, #tb4, #tb5, .simpleIsBeautiful{
		position: relative !important;
		float:left !important;
		width: 48% !important;
		height: auto !important;
		margin-bottom: 2% !important;
		left: 0 !important;
		top: 0 !important;
		right: 0 !important;
		margin-right: 2% !important;
	}
	.simpleIsBeautiful{
		float:left;
		text-align:center;
		width: 100% !important;
		margin-top: 20px;
	}

		
	header{
		height:auto !important;
		overflow:hidden !important;
	}
	
	/*nav{
		position: relative !important;
		float:left !important;
		width: 100%;
		clear:both !important;
		margin-top: 20px !important;
		text-align:center !important;
	}
	nav li{
		list-style:none;
		border:0;
		border-bottom: 1px solid #ea620d;
		height: 30px;
		display:block;
		padding-top: 5px;
		padding-left:0;
	}
	nav li a{
		display:block;
	}
	nav ul{
		padding:0 !important;
		margin-left:0;
		margin-bottom: 20px;	
	}*/
	nav{
		display: none !important;
	}
	.select-menu {
		display: block !important;
	}
	#centre{
		padding: 0 10px 0 10px;
		margin-top: 10px;	
	}
	
	footer{
		float:none !important;	
	}
	.tiny-w100{
		text-align:center !important;	
	}

}

/* /Responsive */