html, body {
	margin: 0px  !important;
	padding: 0px  !important;
	height: 100%;
	overflow-x: hidden;
	color:#473B27;
	font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
	}
	
.couleur0 {color:#A68961}
.couleur1 {color:#473B27}
.couleur2 {color:#516D7D}
.couleur3 {color:#473B27}
.couleur4 {color:#473B27}

.motif1 {	
	background-color: #6d695c;
	background-image:
	repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
	repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
	linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
	linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
	background-size: 70px 120px;
	}
	
.motif2 {	
	background-color: #6d695c;
	background-image:
	repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 30px),
	repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 30px),
	linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
	linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
	background-size: 35px 60px;
	}
	
.motif3 {	
	background-color:#6d695d;
	background-image: linear-gradient(30deg, #615f52 12%, transparent 12.5%, transparent 87%, #615f52 87.5%, #615f52),
	linear-gradient(150deg, #615f52 12%, transparent 12.5%, transparent 87%, #615f52 87.5%, #615f52),
	linear-gradient(30deg, #615f52 12%, transparent 12.5%, transparent 87%, #615f52 87.5%, #615f52),
	linear-gradient(150deg, #615f52 12%, transparent 12.5%, transparent 87%, #615f52 87.5%, #615f52),
	linear-gradient(60deg, #545247 25%, transparent 25.5%, transparent 75%, #545247 75%, #545247), 
	linear-gradient(60deg, #545247 25%, transparent 25.5%, transparent 75%, #545247 75%, #545247);
	background-size:20px 35px;
	background-position: 0 0, 0 0, 10px 17.5px, 10px 17.5px, 0 0, 10px 17.5px;
	}

.motif4 {	
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#473b27+0,473b27+0,634f36+85,473b27+100 */
	background: rgb(71,59,39); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(71,59,39,1) 0%, rgba(71,59,39,1) 0%, rgba(99,79,54,1) 85%, rgba(71,59,39,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(71,59,39,1) 0%,rgba(71,59,39,1) 0%,rgba(99,79,54,1) 85%,rgba(71,59,39,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(71,59,39,1) 0%,rgba(71,59,39,1) 0%,rgba(99,79,54,1) 85%,rgba(71,59,39,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#473b27', endColorstr='#473b27',GradientType=0 ); /* IE6-9 */
	}
	
.container-fluid {
	height: 100%;
	max-width:1500px !important;
	margin: 0 auto;
	background: #eeefeb;
	-webkit-box-shadow: 0px 0px 81px 46px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 81px 46px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 81px 46px rgba(0,0,0,0.5);
	}
	
.container-fluid-background {
	min-height: 100%; 
	width: 50%;
	max-width: 700px; 
	background: url(img/background.jpg) no-repeat left bottom; 
	background-size: 100% auto; 
	position: absolute;
	}	
	
.row.nav {
	position: absolute;
	top: 0px;
	width: 100%;
	max-width: 1500px;
	color:#EEEFEB;
	}
	
.row.nav a {
	color:#EEEFEB;
	}

.nav ul.menu-liste.menu-items li.menu-entree.item a {
	display: block;
	padding: 10px;
	}
	
.row.content {
	padding-top: 100px;
	}
		
.edito-ep16 {
	text-align: center;
	}
	
.edito-ep16 h1	{
	font-family: 'Homemade Apple', cursive;
	font-size: 34px;
	text-align: left !important
	}
	
.edito-ep16 h2	{
	font-family: 'Homemade Apple', cursive;
	font-size: 56px;
	color:#A68961
	}

.edito-ep16 .phrase1 { 
	font-size: 13.5px; 
	margin-top: 30px
	}
	
.edito-ep16 .date {	
	font-size: 60px;
	font-family: Haettenschweiler, Conv_Haettenschweiler; 
	line-height: 90%; 
	margin-bottom: 30px
	}

.edito-ep16 .lieu {	
	font-size: 23px;
	}

.edito-ep16 article {
	width: 350px !important;
	max-width: 100% !important;
	}	

.edito-ep16 .groupe, .edito-ep16 .infos {
	font-size: 12px
	}

#macaron-1 {
	position: fixed;
	z-index: 99999999;
	top: 30px;
	right: 30px;
	color: #EEEFEB
	}
	
#macaron-1:hover {
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
	}
	
#macaron-1 .link-site {
	font-family: 'Homemade Apple', cursive;
	position: absolute;
	text-align: center;
	line-height: 20px; 
	top: 20px;
	-webkit-transform: rotate(15deg);
	-moz-transform: rotate(15deg);
	-o-transform: rotate(15deg);
	transform: rotate(15deg);
	}
	
.macaron-12 {
	background: #473B27;
	width: 80px;
	height: 80px;
	position: relative;
	text-align: center;
	}
	
.macaron-12:before, .macaron-12:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 80px;
	width: 80px;
	background:  #473B27;
	}
	
.macaron-12:before {
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	-o-transform: rotate(30deg);
	transform: rotate(30deg);
	}
	
.macaron-12:after {
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
	-o-transform: rotate(60deg);
	transform: rotate(60deg);
	}
	

@media (min-width:1200px){
	
.container-fluid-background {
	height: 100%; 
	width: 80%;
	max-width: 930px; 
	background: url(img/background.jpg) no-repeat left bottom; 
	background-size: 100% auto; 
	position: absolute;
	}	
	
}


@media (min-width:800px) and (max-width:1199px) {
	
	.row.content {
		padding-top: 70px !important;
		}
	
	.container-fluid-background {
		height: 100%; 
		width: 60%;
		max-width: 700px; 
		background: url(img/background.jpg) no-repeat left bottom; 
		background-size: 100% auto; 
		position: absolute;
		}		
}


@media (min-width:600px) and (max-width:799px){

	.row.content {
		padding-top: 70px !important;
		}
	
	.container-fluid-background {
		height: 100%; 
		width: 60%;
		max-width: 700px; 
		background: url(img/background.jpg) no-repeat left bottom; 
		background-size: 100% auto; 
		position: absolute;
		}		
}

@media (min-width:400px) and (max-width:599px){
	
	.row.content {
		padding-top: 40px !important;
		}
	
	.container-fluid-background {
		height: 100%; 
		width: 60%;
		max-width: 700px; 
		min-width: 350px; 
		background: url(img/background.jpg) no-repeat left bottom; 
		background-size: 100% auto; 
		position: absolute;
		}

	#macaron-1 .link-site {
		font-size: 10px;
		line-height: 15px; 
		top: 15px;
		}
		
	.macaron-12 {
		width: 60px;
		height: 60px;
		}
		
	.macaron-12:before, .macaron-12:after {
		height: 60px;
		width: 60px;
		}
	
}


@media (max-width:399px){
	
	.row.content {
		padding-top: 30px !important;
		}
	
	.container-fluid-background {
		height: 100%; 
		width: 60%;
		max-width: 700px; 
		min-width: 350px; 
		background: url(img/background.jpg) no-repeat left bottom; 
		background-size: 100% auto; 
		position: absolute;
		}
		
	.edito-ep16 h1	{
		font-size: 34px;
		line-height: 90%
		}
		
	.edito-ep16 h2	{
		font-size: 49px;
		line-height: 90%
		}
	
	.edito-ep16 .phrase1 { 
		font-size: 12px; 
		margin-top: 30px
		}
		
	.edito-ep16 .date {	
		font-size: 52px;
		font-family: Haettenschweiler; 
		line-height: 90%; 
		margin-bottom: 30px
		}
	
	.edito-ep16 .lieu {	
		font-size: 20px;
		}
	
	.edito-ep16 article {
		width: 350px !important;
		max-width: 100% !important;
		}	
	
	.edito-ep16 .groupe, .edito-ep16 .infos {
		font-size: 12px
		}
		
	#macaron-1 .link-site {
		font-size: 10px;
		line-height: 15px; 
		top: 15px;
		}
		
	.macaron-12 {
		width: 60px;
		height: 60px;
		}
		
	.macaron-12:before, .macaron-12:after {
		height: 60px;
		width: 60px;
		}
	
}

@media (min-height:100px) and (max-height:600px){
	
	.row.content {
		padding-top: 30px !important;
		max-height: 100%;
		overflow-y: auto
		}
			
	.container-fluid-background {
		background-size: 90% auto; 
		}		
}

@media (min-width:100px) and (max-width:599px){
	@media (max-height:670px){
		
		.row.content {
			max-height: 350px;
			overflow-y: auto
			}
				
		.container-fluid-background {
			background-size: 90% auto; 
			}		
	}
	
	@media (max-height:550px){
		
				
		.container-fluid-background {
			background-size: 50% auto; 
			}		
	}
	
	@media (max-height:450px){
			
		.row.content {
			max-height: 100%;
			overflow-y: auto
			}
								
		.container-fluid-background {
			opacity: 0.3; 
			}
					
		}


}