@charset "utf-8";
/* CSS Document */

body, html{
	width: 100%;
	height: 100%;
	background-color: #FFFFFF;
	border: 0px solid transparent;
	font-family: Helvetica, Arial, sans-serif;
	color: #666;
	font-size: 1em; /* si aucune prise en charge des valeur vm */
	font-size: 2vmin; 
	font-size: 3vmax; 
	min-height: 100%;
	padding: 0;
	margin: 0;
}

h1{
	font-size: 1.3em;
}

.img, .object, .embed, .canvas, .video, .audio, .picture {
   width: 100%;
   max-width: 100%;
   height: auto;
   border: 0;
}

.container {
   height: 100%;
   margin: 0px auto 0px auto;
   min-height: 100%;
   width: 100%; /* 80% Ideal: 1024px -> 1024 / 1280 */
}

.largeur{
	width: 100%;
	display: inline-block;
	font-size: 18px; 
	position:relative;
}

.contenu{
	width: 80%;
	text-align: left;
	margin: 0px auto 0px auto;
	position:relative;
}

.hauteur
{
	min-height: 593px; /* 338px*/
}

.footer{
	width:100%;
	background-color: #324c81;
	box-shadow: 0px -7px 20px #aaa;
	position:relative;
	color: #FFF;
	margin: 15px 0 -4px 0;
}

.contenu_footer{
	width: 60%;
	height: 100%;
	text-align: left;
	margin: 0px auto 0px auto;
	min-height: 100%;
}

.plan{
	float: left;
	width: 15%;
	height: 100%;
	margin: 20px 0;
}

.plan_liens{
	font-size: 18px;
	margin: 0;
	padding: 0;
}

.plan_liens li {
    padding: 0 5px;
    position: relative;
	float:left;
	width: 100%;
}

.plan_liens a {
    font: bold 14px Arial, Helvetica;
	color:#FFF;
    text-decoration: none;
}

.plan_liens li:hover > a{
	border-bottom: 1px solid #e838fa;
	color: #e838fa;
    transition: all 200ms;
	-webkit-transition: all 200ms;	
}

.plan_liens li:hover > ul {
    display: block;
}

.footer_titre{
	color: #e838fa;
	margin: 5px 0;
	font-size: 18px;
	font-weight: normal;
}

.facebook{
	width: 25%;
	float:left;
	margin: 20px 0 20px 10%;
    font: bold 14px Arial, Helvetica;
}

.coordonnees{
	width: 40%;
	float:right;
	margin: 20px 0 20px 7%;
    font: bold 14px Arial, Helvetica;
}

.plan_liens a:hover {
	border-bottom: 1px solid #e838fa;
	color: #e838fa;
    transition: all 200ms;
	-webkit-transition: all 200ms;	
}

.bg_contenu {
	width: 80%;
	margin: 20px auto 45px auto;
	padding: 30px 50px;
	background-color: #FCF;
	z-index: 20;
	position:relative;
	-webkit-box-shadow: -1px 10px 39px 0px rgba(145,35,145,1);	
	-moz-box-shadow: -1px 10px 39px 0px rgba(145,35,145,1);
	box-shadow: -1px 10px 39px 0px rgba(145,35,145,1);
}


@media screen and (min-width: 1600px) 
{
    /* Tout ce qui est écrit plus haut */
}
/*@media screen and (min-width: 1024px) and (max-width: 1599px)*/
@media all and (min-width: 1024px) and (max-width: 1599px)
{
	.contenu{
		width: 95%;
	}
	.largeur{
		font-size: 22px; 
	}	
	.contenu_footer{
		width: 93%;
	}
	.facebook{
		width: 25%;
		margin: 20px 0 20px 8%;
		font: bold 14px Arial, Helvetica;
	}	
	.coordonnees{
		width: 45%;
		margin: 20px 0 20px 7%;
		font: bold 14px Arial, Helvetica;
	}		
}

@media screen and (min-width: 480px) and (max-width: 1023px)
{
	.contenu{
		width: 95%;
	}
	.largeur{
		font-size: 22px; 
	}	
	.contenu_footer{
		width: 93%;
	}
	.facebook{
		width: 25%;
		margin: 20px 0 20px 8%;
		font: bold 14px Arial, Helvetica;
	}	
	.coordonnees{
		width: 45%;
		margin: 20px 0 20px 7%;
		font: bold 14px Arial, Helvetica;
	}	
}

@media screen and (max-width: 479px)
{
    /* Rédigez vos propriétés CSS ici */
}