/*************************/
/*       RESPONSIVE      */
/*************************/
/* top right bottom left */


/**[ HEADER ]**/
#header_responsive{
	width: 50px; 
	height: 100%;	
	text-align:center; 
	line-height: 45px; 
	margin: auto; padding: 0;
	display: inline-block;
}

#header_responsive img{
	margin-left: 3px;
	vertical-align: middle;
	-webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
	-o-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
}



/**[ NAV ]**/
#nav_responsive{
	width: 325px;
	height: 100%;
	text-align: center;
	line-height: 45px;
	margin: auto; padding: 0;
	display: inline-block;
}

.nav_responsive{
	width: 50px;
	height: 47px;
	line-height: 45px;
	vertical-align: middle;
	background-color: #4F4F4F;
	display: inline-block;
	margin: auto; padding: 0;
	text-align: center;
	-webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
	-o-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
}

#nav_responsive li{
	list-style: none;
	display: inline;
}

#nav_responsive i{
	margin: auto;
	padding: 0;
	font-size: 2.1rem;
	color: #8F8F8F;
	vertical-align: middle;
	text-shadow: 3px 2px 3px #3C444C;
	text-align: center;
	-webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
	-o-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
}

#nav_responsive a{
	color: #8F8F8F;
	text-decoration: none;
	-webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
	-o-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
}

#nav_responsive a:hover .nav_responsive, #nav_responsive a:focus .nav_responsive{
	background: #6F6F6F;
}

#nav_responsive a:hover .nav_responsive i , #nav_responsive a:focus .nav_responsive i{
	color: white;
}



/**[ SOCIAL ]**/
#social_responsive{
	width: 85px;
	height: 100%;
	padding: 0;
	display: inline-block;
	text-align: center;
}

#social_responsive img {
	background-repeat: no-repeat;
	width: 25px;
	height: 25px;
	line-height: 25px;
	vertical-align: middle;
	-webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
	-o-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
	-webkit-background-size: 25px 25px;
	-moz-background-size: 25px 25px;
	-o-background-size: 25px 25px;
	background-size: 25px 25px;
}

#social_responsive img:hover {
	-webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
	-o-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
}



/**[ FOOTER ]**/
#footer_responsive{
	width: 100%;
	height: 100px;
	background-color: black;
	margin-top: -8px;
	text-align: center;
}

.footerimg_responsive{
	display: inline-block;
	text-align: center;
	color: white;
	width: 110px;
}

#footer_responsive p{
	background-color: black;
	color: grey;
	margin-top: -5px; margin-bottom: 0;
	padding-top: 40px;
	padding-bottom: 20px;
}
	
#footer_responsive a{
	text-decoration: none;
	color: white;
	font-size: 1rem;
}

#footer_responsive a:hover, #footer_responsive a:focus{
	color: #be2d1f;
}


/****************************************************************************************************/


@media all and (max-width: 479px){
	body,html{ font-size: 14px;  margin: 0; padding: 0; font-family: calibri, sans serif; background-color: #2F2F2F;}
	h1{	position: relative; text-align: center;	color: white; font-size: 1.6rem; font-family: 'Anaheim', sans-serif; margin-top: -110px; background-color: black; opacity: 0.7!important;}
	h5{	font-size: 1.3rem; line-height: 1.7rem; vertical-align: middle;	font-family: 'Anaheim', sans-serif;	font-weight: normal; background-color: #2F2F2F;	color: rgba(255,255,255,0.7); margin: 15px auto 15px auto; text-align: center; padding: 5px 0;}
	#section_gauche{ Width: 100%; Height: 50px; display: inline-block; background-color: #2F2F2F; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; padding: 0; position: fixed;	z-index: 2;}
	.section_gauche{ width: 479px; margin: 0 auto;}
	#en-cours a, #en-cours i{ color: white;}
	#en-cours .nav_responsive{ border-bottom: 1px solid #be2d1f;}
	#header{ display: none;}
	#nav{ display: none;}
	#social{ display: none;}
	#social_responsive{ display: none;}
	#footer{ display: none;}
	#footer_responsive a{ font-size: 0.9rem;}
	#hdp{ display: none;}
	#section_centre{ width: 100%; margin:0; padding-top:30px; }
	#container{margin-top: -100px;}
	#title{ height: 150px; margin-top: 130px;}
	#title img{ display: none;}
	.blank{ display: none;}
	.story{ margin: 0; padding: 0;}
	.story blockquote{ width: 90%; color: #0F0F0F;}
	.story p{ width: 40%;}
	.story blockquote ul i{ color: #9F9F9F;}
	.td p{ width: 95%; color: #0F0F0F;}
	.td li{color: #0F0F0F;}
	.story i{ color: #9F9F9F;}
	.td{ width: 100%; height: 150px; margin: 0; padding: 0;	display: inline-block; vertical-align: middle; text-align: justify; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;}
	.td+.td{ margin: 20px 0 0 0; padding: 0;}
	.img{ padding-top: 15px;}
	.article{ padding-bottom: 35px;}
	.button p{margin-bottom: 5px;}
	button { width: 60%;}
	#footer_info{ height: 100px; line-height: 100px; margin-bottom: -7px;}
	#footer_info img{ line-height: 100px;}
}

@media all and (min-width: 480px) and (max-width: 959px){
	body,html{ font-size: 15px;  margin: 0; padding: 0; font-family: calibri, sans serif; background-color: #2F2F2F;}
	h1{	position: relative; text-align: center;	color: white; font-size: 1.8rem; font-family: 'Anaheim', sans-serif; margin-top: -110px; background-color: black; opacity: 0.7!important;}
	h5{	font-size: 1.4rem; line-height: 1.7rem; vertical-align: middle;	font-family: 'Anaheim', sans-serif;	font-weight: normal; background-color: #2F2F2F;	color: rgba(255,255,255,0.7); margin: 15px auto 15px auto; text-align: center; padding: 5px 0;}
	#section_gauche{ Width: 100%; Height: 50px; display: inline-block; background-color: #2F2F2F; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; padding: 0; position: fixed;	z-index: 2;}
	.section_gauche{ width: 480px; margin: 0 auto;}
	#en-cours a, #en-cours i{ color: white;}
	#en-cours .nav_responsive{ border-bottom: 1px solid #be2d1f;}
	#header{ display: none;}
	#nav{ display: none;}
	#social{ display: none;}
	#footer{ display: none;}
	#hdp{ display: none;}
	#section_centre{ width: 100%; margin:0; padding-top:30px; }
	#container{margin-top: -100px;}
	#title{ height: 150px; margin-top: 130px;}
	#title img{ display: none;}
	.blank{ display: none;}
	.story{ margin: 0; padding: 0;}
	.story blockquote{ width: 90%; color: #0F0F0F;}
	.story p{ width: 40%; color: #0F0F0F;}
	.story blockquote ul i{ color: #9F9F9F;}
	.td p{ width: 95%; }
	.td li{color: #0F0F0F;}
	.story i{ color: #9F9F9F;}
	.td{ width: 100%; height: 150px; margin: 0; padding: 0;	display: inline-block; vertical-align: middle; text-align: justify; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;}
	.td+.td{ margin: 20px 0 0 0; padding: 0;}
	.article{ padding-bottom: 35px;}
	.button p{margin-bottom: 5px;}
	button { width: 50%;}
	#footer_info{ height: 100px; line-height: 100px; margin-bottom: -7px;}
	#footer_info img{ line-height: 100px;}
}

@media all and (min-width: 960px) and (max-width: 1280px){
	body,html{ font-size: 15px; margin: 0; padding: 0; font-family: calibri, sans serif; background-color: #2F2F2F;}
	h1{ position: relative; text-align: center; color: white; font-size: 1.9rem; font-family: 'Anaheim', sans-serif; margin-top: -110px; background-color: black; opacity: 0.7!important;}
	h5{ font-size: 1.4rem; line-height: 1.7rem; vertical-align: middle; font-family: 'Anaheim', sans-serif; font-weight: normal; background-color: #2F2F2F; color: rgba(255,255,255,0.7); margin: 15px auto 15px auto; text-align: center; padding: 5px 0;}
	.td{ width: 100%; height: 150px; margin: 0; padding: 0;	display: inline-block; vertical-align: middle; text-align: justify; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;}
	.td+.td{ margin: 20px 0 0 0; padding: 0;}
	.story p{ width: 30%;}
	.td p{ width: 95%;}
	.button p{margin-bottom: 5px;}
	button { width: 40%;}
	#header_responsive{ display: none;}
	#nav_responsive{ display: none;}
	#social_responsive{ display: none;}
	#footer_responsive{ display: none;}
}

@media all and (min-width: 1281px) and (max-width: 1599px){
	body,html{ font-size: 15px; margin: 0; padding: 0; font-family: calibri, sans serif; background-color: #2F2F2F;}
	h1{ position: relative; text-align: center; color: white; font-size: 2.1rem; font-family: 'Anaheim', sans-serif; margin-top: -110px; background-color: black; opacity: 0.7!important;}
	h5{ font-size: 1.1rem; line-height: 1.7rem; vertical-align: middle; font-family: 'Anaheim', sans-serif; font-weight: normal; background-color: #2F2F2F; color: rgba(255,255,255,0.7); margin: 15px auto 15px auto; text-align: center; padding: 5px 0;}
	button { width: 40%;}
	#header_responsive{ display: none;}
	#nav_responsive{ display: none;}
	#social_responsive{ display: none;}
	#footer_responsive{ display: none;}
}

@media all and (min-width: 1600px){
	.button p{margin-bottom: 5px;}
	button { width: 40%;}
	#header_responsive{ display: none;}
	#nav_responsive{ display: none;}
	#social_responsive{ display: none;}
	#footer_responsive{ display: none;}
}