/*//////////
font-family: 'Lato', sans-serif, font-weight: 300/400/700/900;

#1abc9c : vert bleu 1
#16a085 : vert bleu 2
#2ecc71 : vert 1 
#27ae60 : vert 2
#3498db : bleu 1
#2980b9 : bleu 2
#9b59b6 : violet 1 
#8e44ad : violet 2
#34495e : gris bleu 1 
#2c3e50 : gris bleu 2
#f1c40f : orange jaune 1
#f39c12 : orange jaune 2
#e67e22 : orange 3
#d35400 : orange 4
#e74c3c : rouge 1
#c0392b : rouge 2
#ecf0f1 : gris 1
#bdc3c7 : gris 2
#95a5a6 : gris 3 
#7f8c8d : gris 4

div, header, body, article, section, nav{
	border: 1px red dotted;
}
///////////*/



*{
	margin:0;
	padding:0;
}

a, a:visited{
	color:#2c3e50;
}

@font-face{ 
	font-family: 'flex';
	src: url('flexdisplay-thin-webfont.eot');
	src: url('flexdisplay-thin-webfont.eot?#iefix') format('embedded-opentype'),
		 url('flexdisplay-thin-webfont.woff') format('woff'),
		 url('flexdisplay-thin-webfont.ttf') format('truetype'),
		 url('flexdisplay-thin-webfont.svg#webfont') format('svg');
}

/*////////////////////////////
/////////////BODY/////////////
////////////////////////////*/

body{
  font-family: 'Lato', Arial, sans-serif; 
  font-weight: 400;
  font-size : 13px;
  background: white;
  color: #333;
}

/*////////////////////////////
////////////HEADER////////////
////////////////////////////*/

header{
	height:200px;
	text-align: center;
	position: relative;
	z-index: 2;
}

#s-menu{
	background-color:#f39c12;
	height: 100px;
}

nav#menu{
	background-color:#3498db ;
	height: 50px;
	padding-left: 80px;
}

nav#menu.bouge.stuck{
	position: fixed;
	top:0;
	width: 100%;
	left:-40px;
	box-shadow:0 2px 4px rgba(0, 0, 0, .3);
}

#logo .bouge.stuck{
	position: fixed;
	top:0;
}

img.logo{
	width : 80px;
	height: 80px;
}


nav#menu .lien-menu{
	font-size:16px;
	font-weight: 700;
	line-height: 50px;
	margin:20px;
	color:white;
	padding:15.5px;
}

a.lien-menu:hover{
	background-color: #2980b9;
	text-decoration: none;
}
a.lien-menu:active{
	background-color: #f39c12;
}

h1#logo{
	position: absolute;
	top:-10px;
	left:50%;
	margin-left: -40px;
}



/*////////////////////////////
////////////SECTION///////////
////////////////////////////*/

article.principal, article.secondaire{
	background: #ecf0f1;
	overflow: hidden;
	margin-bottom: 20px;
	padding: 100px 0;
	text-align: center;
	font-size: 23px;
}


article.principal:hover, article.secondaire:hover{
	box-shadow:0 2px 4px rgba(0, 0, 0, .3);
}


article.principal:active, article.secondaire:active{
	background: #bdc3c7;
}

.grid-container a:hover{
	text-decoration: none;
}

/*////////////////////////////
//////////SECONDAIRE//////////
////////////////////////////*/

article.secondaire{
	border: 3px white solid;
	transition:all .4s;
	position: relative;
	max-height: 20px;
	padding: 0 0 200px 0;
}



article.secondaire:hover{
	border: 3px #f39c12 solid;
}

article.secondaire.ext:hover{
	border: 3px #3498db solid;
}

article.secondaire:hover img{
	transition:all .4s;
	opacity:0.5;
}


article.secondaire span{
	color: #FFF;
	position: absolute;
	top: 70px;
	left: -450px;
	background: #f39c12;
	padding : 2px 15px 2px 15px;
	transition: all .3s;
}

article.secondaire.ext span{
	background: #3498db;
}

article.secondaire .nom{
	color: #FFF;
	font-size: 20px;
	padding-top: 10px;
	padding-bottom: -5px;
	margin: auto;
	font-family: "flex", "Lato" sans-serif;
	text-transform: lowercase;
	font-weight: 600;
	text-align: center;
}

article.secondaire .sousnom{
	color: black;
	font-size: 15px;
	font-family: "Lato", sans-serif;
	text-align: center;
}

article.secondaire:hover span{
	left:0;
	
}

/*////////////////////////////
/////////////MEDIA////////////
////////////////////////////*/

@media screen and (max-width: 767px) {
	header{
		height:70px;
	}
	
	article.principal{
		padding: 50px 0;
	}
	
	article.secondaire span{
		left:0;
	}
	article.secondaire{
		border: 3px #f39c12 solid;
	}
	article.secondaire.ext{
		border: 3px #3498db solid;
	}
	article.secondaire .nom{
		font-size:15px;
	}
	
	article.secondaire .sousnom{
		font-size: 12px;
	}
	
	h1#logo{
		position: absolute;
		left:60px;
	}
	
	nav#menu.bouge.stuck h1#logo{
		left:100px;
	}
	
	nav#menu.bouge.stuck{
		box-shadow: none;
	}
	
	nav#menu a.lien-menu{
		font-size:13px;
		font-weight: 400;
		margin:5px;
		padding:17px;
	}
	
	nav#menu{
		text-align: right;
		padding-left: 40px;
	}
	
	img.logo{
		width : 50px;
		height: 50px;
	}
}

@media screen and (max-width: 430px) {
	.mobile-grid-50 {
	  clear: both;
	  width: 100% !important;
	}
	nav#menu a.lien-menu{
		font-size:13px;
		font-weight: 400;
		margin:0px;
		padding:5px;
	}
}