@viewport { width: device-width; zoom: 1; }
* { margin: 0px; padding: 0px;}
body {
	width:100%;
    font-family: 'Red Hat Display', sans-serif;
	font-size: 13px;
	line-height: 1.4;
	color: #000;
	background-color: #fff;
}
h1 { text-decoration: none; font-size: 1.5em; font-weight: 400; margin-top: 20px; margin-bottom: 4px; }
h2 { text-decoration: none; font-size: 1.3em; font-weight: 400; margin-top: 10px; margin-bottom: 4px; }
h3 { text-decoration: none; font-size: 1.1em; font-weight: normal; margin-top: 10px; margin-bottom: 4px; }
h4 { text-decoration: none; font-size: 1.1em; font-weight: normal; margin-top: 10px; margin-bottom: 2px; }
p {
	padding-bottom: 2px;
	/*max-width: 768px;*/
	}
ul,
li {
	list-style: none;
	/*line-height: 1.5;*/
	}	
hr {
    padding: 0px;
    margin: 5px 0;
    width: 100%;
    border: 0px solid #000;    
}
table, th, td {
    border-collapse: collapse;
    padding: 5px 0px;
    margin: 0;
    border: 0px solid #000;
}
pre {
    margin: 10px 0 10px 10px ;
}
.space {
    padding: 0 0 0 20px;
    }
i { margin: 0px 5px;}
section i  { font-size: 14px; }

#footnote {
	font-size: 11px;
    }
/* Marges générales */
.container {
	/*clear: left;
	float: left;*/
	clear: both;
	display: block;
	margin: 0px;
	padding: 10px;
	} 	
/* pour obtenir des images responsives */
img {
	max-width: 100%;
	height: auto;
	outline:0;
	border:0;
	margin:0;
	padding:0;
	}



/* ENTER PAGE */
.enter {
	position: absolute;	
	width: 180px;
	left: 50%;
	top: 50%;
	margin-left: -80px;
	margin-top: -20px;
	z-index: 2;
	}
.name {
	cursor: pointer;
	text-decoration: none;
	/*width: 120px;*/
	font-size: 24px;
	margin: 0 0 5px 0;
	}

	
	
/* 1 HEADER */
.logo img {
	padding-top: 20px;
	padding-bottom: 10px;
	}
#title {
	margin: 20px 0 0 0;
	}
	
	
	
/* 2 DESCRIPTION */
#menutext {
	width: 100px;
	}



/* NEWS FEED */
#news {
	clear: left;
	float: left;
	margin: 0;
	padding: 0;
	min-width: 300px;
	}


/* 2 NAVIGATION */
#navigation {}	
[id="toggle-nav"] {display: none}
[id="burger"] {display: none}
nav > input:not(:checked) ~ ul { max-height: 100%;}
#accordion div {
	cursor:pointer;
	line-height: 16px;
	padding: 2px 0;
	}
#accordion ul li {
	padding: 0 0 0 5px;
	}
/* Règle le comportement des éléments du menu */
nav {
	clear: left;
	float: left;
	width: 15%;
	margin:0;
	padding:0;
	}
.separator {
	clear: left;
	float: left;
    margin-left: 10px;
    width: 5px;
    }
#navigation i {
	padding-left: 5px;
	}	
nav .button,
nav button {
	cursor: pointer;
	height: 23px;
	vertical-align: middle;
	text-align:center;
	background: transparent;
	margin: 10px 0;
	padding: 0 5px;
	border: 1px solid black;
	border-radius: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	}	
nav input,
nav .input {
	cursor: pointer;
	background: transparent;
	border: 1px solid black;
	margin: 10px 0 0 0;	
	height:23px;
	vertical-align: middle;
	padding-left: 5px;
	}	



/* 3 : CONTENT */
/* Position "section" on right */
section {
	position: absolute;
	right: 0px;
	margin: 0 0 0 0;
	padding: 20px 0 0 20px;
	width: 80%;
	min-height: 100%;
	}
section.large {
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	}
/* Define the width of the content in the section */
article {
	/*max-width: 768px;*/
	padding: 0px;
	margin: 0;
	/*min-height: 100%;*/
	}
/* Option for the width option */	
#slideshow { }
.item { 
	margin: 0; 
	padding: 0; 
	line-height: 0; 
	}
.small #slideshow,
.small article { 
 	max-width: 768px;
    }
.small img { 
   	max-height: 512px;
   	width: auto;
    }
.medium #slideshow,
.large article { 
 	max-width: 1024px;
    }
.medium img { 
	max-height: 768px;
    }
.large #slideshow,
.large article { 
	mix-width: 100%;
    vertical-align: middle;
    }

/* Slideshow */
#status ul,
#status li  {
	display: inline-block;
	margin: 0 10px 0 0;
	cursor: pointer;	
	}
#status span {
	padding-right: 5px;
	}

/* Grid Items */
.grid {
	display: block;
	height: auto;
	overflow: hidden;
	padding: 0px;
	margin: 0px;
	}
.grid li {
	display: inline/*-block*/;
	float: left;
	vertical-align: top;
	width: 180px;
	margin: 0px /*5px 10px 0px*/;
	padding: 0px;
	position: relative;
	}
.grid .imagecontainer { 
	width: 180px;
	height: 120px /*180px*/;
	line-height: 120px /*180px*/;
	margin: 0px;
	padding: 0px;
    background-color: rgba(0,0,0,1);
    text-align: center;
    }
.grid img {
	margin-left: auto;
	margin-right: auto;
    vertical-align: middle;
   	opacity: 0.9;
    filter: alpha(opacity=90);
   	}
.grid figcaption {
	position: absolute;
	/*top: 45%;*/
	bottom: 0px;
	left:5px;
	width: 100%;
	text-align: left/*center*/;
	color: #fff;
	font-weight: 500;
	}
   	
/* List Items */
#list,
.list {
	margin-bottom: 40px;
	}

/* masonry Items
li.masonry {
	display: inline-block;
	position: relative;
	float: left;
	vertical-align: top;
	width: 320px;
	margin: 0px;
	padding: 0px;
	line-height: 0;
	}
li.masonry a	{
    color: #2bb5ee;  
	}	
.masonry figure {
	overflow: hidden;
	position: relative;
	}
.masonry figcaption {
	line-height: 1.2;
	display: block;
	width: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	right: 0;
	top: -20px;
	padding: 10px;
	-webkit-transition: all 300ms;
	-moz-transition: all 300ms;
	transition: all 300ms;
	-webkit-transition-delay: 100ms;
	-moz-transition-delay: 100ms;
	transition-delay: 100ms;
	z-index: 100;
	}
.masonry figcaption p {
	display: block;
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	transition: all 300ms ease-out;
	color: #2bb5ee;
	}
.masonry li:hover figcaption {
opacity: 1;
-moz-transform: translateY(20px);
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
@media screen and (min-width: 1920px) {
	li.masonry {
		width: 20%;
		}
}
@media screen and (min-width: 1680px) {
	li.masonry {
		width: 25%;
		}
}
@media screen and (min-width: 1024px) {
	li.masonry {
		width: 33%;
		}
}
@media screen and (max-width: 1024px) {
	li.masonry {
		width: 33%;
		}		
}
@media screen and (max-width: 768px) {
	li.masonry {
		width: 50%;
		}		
}
@media screen and (max-width: 480px) {
	li.masonry {
		width: 100%;
		}		
} */







/* 4 FOOTER */
.footer {}
#social {}
#social i { 
	padding-right: 5px; 
	}
#copyright {}







/* MEDIA QUIERIES */
@media screen and (max-width: 768px) {
	#menutext {
		display: none;
		}
	.separator {
		display: none;
		}
	.news {
		clear: both;
		display: block;
		width: 60%;
		margin:0;
		padding:0;
	}
	#navigation,
	#accordion,
	.contextuel,
	section,
	article,
	.footer {
		clear: both;
		display: block;
		width: 100%;
		margin:0;
		padding:0;
		}
	#title {
		float: left;
		padding: 10px 10px 0 10px;
		margin: 0px;
		min-height: 30px;
   		font-size: 16px;
		width: 80%;
		}
	.logo img {
		height: 20px;
		padding-top: 0px;
		padding-bottom: 0px;
	}
	#news {
		clear: both;
		display: block;
		width: 60%;
		margin:0;
		padding:0;
		}
	.contextuel,
	section,
	.footer {
		border-top: 1px solid #000;
		}
	section {
		position: relative;
		min-height: 480px;
		}		
	.container {
		padding: 10px;
		margin: 0px;
		}
	article {
		max-width: 100%;	
		}
	/*.footer { 
		position: fixed;
	    bottom: 0; 
	    }*/
	#social	{
		clear: left;
		float: left;	
		}
	#copyright	{
		clear: right;
		float: right;	
		}
/* Menu */
[id="toggle-nav"] {display:none}
[id="burger"] {display: block}		
	#burger {
		float: right;
		position: absolute;
		top:6px;
		right:10px;
		cursor:pointer;
	    text-transform:uppercase;
		font-size: 18px;
		}
	/* Theming closed nav */	
	nav > input:not(:checked) ~ ul {
		max-height:0;
		overflow: hidden;
		}
	/* Theming opened nav */
	nav > input:checked ~ ul {
		max-height: 100%;
		overflow: hidden;
		}
	#accordion div {
		cursor:pointer;
	    /*text-transform:uppercase;*/
		margin:0;
		padding: 10px 0 10px 10px;		    
		font-size: 14px;
		}
	#accordion ul li {
		cursor:pointer;
	    font-weight:normal;
		text-transform:none;
		margin:0;
		padding: 10px 0 10px 20px;
		font-size: 13px;
		/*text-transform:uppercase;*/
		}
}