@charset "utf-8";

/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Archivo+Narrow:400,400italic,700,700italic);

@import url(http://fonts.googleapis.com/css?family=Archivo+Black);

body { background: #fff; color: #000; font: 100%/1.4; padding: 0; -webkit-text-size-adjust: none; }



img, object, video { max-width: 100%; }

a { color: #333; text-decoration: none; }

a:hover,a:focus, li.petit a:hover { color: #e51837; }

a.menu-link { float: right; display: block; padding: 1em; font: 100%/1.4 "Archivo Black", sans-serif; }

ol,ul { list-style: none; margin: 0; padding: 0; }

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

html,body,div,object,iframe,fieldset { margin: 0; padding: 0; border: 0; }


li { 
	font: "Archivo Black", sans-serif; 
	color:#666; 
}

li.petit a { 
	font:"Archivo Narrow", sans-serif; 
	color:#666; 
}

.g { padding: 0.25em; overflow: hidden; }

.g li { float: left; width: 100%; padding: 0.25em; }

.g img { display: block; }

.g li:nth-child(odd) { clear: left;}

nav[role=navigation] { 
	clear: both; 
	-webkit-transition: all 0.3s ease-out; 
	-moz-transition: all 0.3s ease-out; 
	-ms-transition: all 0.3s ease-out; 
	-o-transition: all 0.3s ease-out; 
	transition: all 0.3s ease-out; 
}

.js nav[role=navigation] { overflow: hidden; max-height: 0; }

nav[role=navigation].active { max-height: 15em; }

nav[role=navigation] ul { margin: 0; padding: 0; border-top: 1px solid #808080; }

nav[role=navigation] li a { display: block; padding: 0.8em; border-bottom: 1px solid #808080; }

.container {
	margin: 0 auto; 
	padding: 0 1em; 
	overflow: hidden; 
}

#freetile-demo { margin: 50px auto; color:#333; font-family: "Archivo Narrow", sans-serif; font-size: 100%; line-height: 1.4; }

#freetile-text { margin: 50px auto; max-width: 600px; color:#333; font-family: "Archivo Narrow", sans-serif; font-size: 100%; line-height: 1.4; }


.ladate { font: 80%/1.4 "Archivo Narrow", sans-serif; color:#666; }

.landscape { display: block; max-width: 100%; height: auto; }

.menu_mobile {display:flex;}
.menu_mobile > a {padding-top:5px;}
.menu_mobile > a > img {
	width:50px;
}

.mod { padding: 1em; }

.pattern { background: #fff; margin-bottom: 1em; overflow: hidden; }

.pattern-description h1 { font-size: 3.4em; margin-bottom: 0.5em; }

.pattern-description { max-width: 40em; margin: 0 auto; background-color:#0F6 }

.pattern-description ul,

.pattern-description ol { margin-bottom: 2em; }

.pattern-description li { margin-bottom: 1em; }

 @media screen and (min-width: 48.25em) {

 	a.menu-link,
 	.menu_mobile {
 		display: none;
 	}
 	
 	.js nav[role=navigation] {max-height: none;}

 	nav[role=navigation] ul {
		margin: 0 0 0 -0.25em;
		border: 0;
	}

 	nav[role=navigation] li {
		display: inline-block;
		margin: 0 0.25em;
	}

 	nav[role=navigation] li a { border: 0;}

 	.titre_mobile{display: none;}

}

 @media screen and (max-width: 48.24em) {
 	
 	.container { padding: 0!important;}

 	.container > p {padding:5px;}

 	#freetile-demo { margin: 10px 0 0 0; }

 	.menu_mobile {
 		display: flex;
 		justify-content:center;
 	}
	
 	.pattern { margin-bottom: 0; }	

 	.titre_mobile {padding:10px; font-size:1.2em; font-family: "Archivo Narrow"}

 }



 @media screen and (min-width: 40em) {

 .g li {

 width: 50%;

}

 .g li:nth-child(3n+1) {

 clear: left;

}

 .g li:nth-child(odd) {

 clear: none;

}

}

 @media screen and (min-width: 55em) {

 .g li {

 width: 33.3333333333333333%;

}

 .g li:nth-child(4n+1) {

 clear: left;

}

 .g li:nth-child(3n+1) {

 clear: none;

}

}

 @media screen and (min-width: 72em) {

 .g li {

 width: 25%;

}

 .g li:nth-child(5n+1) {

 clear: left;

}

 .g li:nth-child(4n+1) {

 clear: none;

}

}

 @media screen and (min-width: 90em) {

 .g li {

width: 20%;

}

 .g li:nth-child(6n+1) {

 clear: left;

}

 .g li:nth-child(5n+1) {

 clear: none;

}

}