body {
	margin:0;
	width:100%;
	font-size:1.2vw;
	background:#fff;}
	
.header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 50px 10px;
}
	
.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

.header a:hover {
  background-color: #ddd;
  color: black;
}
.header-right {
  float: right;
}
	
nav{
    font-family: 'Calibri', 'Helvetica',sans-serif;
    width: 100%;
    background-color: #000;
}
nav > ul{
    margin: 0px;
    padding: 0px;
}
nav > ul::after{
    content: "";
    display: block;
    clear: both;
}
nav li{
    list-style-type: none;
}
nav > ul > li{
    float: left;
    position: relative;
}
nav a{
    display: inline-block;
    text-decoration: none;
    font-size:1.5vw;
}
nav > ul > li > a{
    padding: 20px 20px;
    color: #FFF;
}
.submenu{
    display: none;
    background-color:#000; 
}
nav li:hover .submenu{
    display: inline-block;
    position: absolute;
    top: 100%;
    left: 0px;
    padding: 0px;
    z-index: 100000;
}
.submenu li{
    border-bottom : 1px solid #fff;
}
.submenu li a{
    padding: 15px 30px;
    font-size: 1.2vw;
    color:#fff;
    width: 270px;
}
nav > ul > li:hover a{
    padding: 15px 20px 20px 20px;
}
.accueil:hover{
    border-top: 5px solid #e44d26;
    background-color: #000;
}

.submenu li:hover a{
    color:#fff;
    font-weight: bold;
}

.menu-mobile{
	color: #fff;
    background-color:#000;
	text-align: center;
	padding: 12px 0;
	display: none;
}
nav input[type=checkbox]{
    display: none;
}
nav input[type=checkbox]:checked ~ ul{
    display: block;
}
@media screen and (max-width : 970px){
    .menu-mobile {
	display:block;
	font-size:2vw;
    }
    nav ul{
	display: none;
    }
    nav ul li, nav ul li a {
	width: 100%;
    text-align: center;
    }
    nav ul li a, nav ul li:hover a{
        padding: 10px 0px 10px 0px;
    }
    nav li:hover .submenu{
        display: block;
        position: static;
    }
}

@media screen and (max-width : 400px){
    .menu-mobile {
	display:block;
	font-size:4vw;
    }
    nav ul li, nav ul li a {
	width: 100%;
    text-align: center;
    font-size:2.5vw;
    }
    nav ul li a, nav ul li:hover a{
    padding: 10px 0px 10px 0px;
    font-size:2.5vw;
    } 
   .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }   
}

section{
	max-width:14OOpx;
	height:auto;
	clear:both;
	}
	
section #wrapper{
	text-align:center;
}
	
section p {
	color:#fff;
	margin:1.8em;}
		
#content_01{
    float:left;
	width:50%;
	display:block;
	position: relative;}
	
@media screen and (max-width : 970px){
	#content_01{
		width:100%;}
}

#content_02{
	width:40%;
	float:right;
	position:relative;
	display:block;}
	
#content_02 h1{
	background-color:#000;
	color:#fff;
	font-size:1.5vw;
	margin:1.5em;}
	
#content_02 p{
	background-color:#000;
	color:#fff;
	font-size:1.2vw;
	margin:1.5em;}

@media screen and (max-width : 970px){
		#content_02{
		width:100%;
		}
		#content_02 h1{
			font-size:2vw;}
		#content_02 p{
			font-size:1.5vw;}
}
	
@media screen and (max-width : 400px){
		#content_02{
		width:100%;
		}
		#content_02 h1{
			font-size:3vw;}
		#content_02 p{
			font-size:2.5vw;}
}

div.gallery {
    border: 1px solid #ccc;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
    margin-top:1.5em;
}

@media only screen and (max-width: 970px) {
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 400px) {
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

#picto{
	width:30%;
    text-align:left;
    float:left;
    color:#fff;
    margin:1.5em;
    position:relative;
    padding:1em;}
    
. pict{
	overflow:auto;
	display:inline-block;
	font-size:1vw;}
	
.pict img{
	float:left;
	width:6%;
	margin-right:1em;}
	
#info{
	width:60%;
	float:right;
	position:relative;
	display:block;
	color:#fff;
	margin:1.5em;}

@media screen and (max-width : 970px){
	#picto{
		width:100%;
		font-size:2vw;}
	.pict{
	    float:left;
	    margin-right: 3em;
	    text-align: center;
		width:6%;
		height:3em;
		padding:3em;}
		
	.pict img{
		margin-right:3em;}
}	

@media screen and (max-width : 970px){
	#info{
		width:100%;
		font-size:2vw;
		padding:1.5em;
	    text-align:center;}
	    
@media screen and (max-width : 400px){
	#picto{
		width:100%;
		font-size:3vw;}
	.pict{
	    float:left;
	    margin-right: 3em;
	    text-align: center;
		width:5%;
		height:3em;
		padding:3em;}
		
	.pict img{
		margin-right:2.5em;}
}	
}	

@media screen and (max-width : 400px){
	#info{
		width:100%;
		font-size:3vw;
		padding:1.5em;
	    text-align:center;}
	    
#wrapper
{
 margin-left:auto;
 margin-right:auto;
 padding:0px;
 text-align:center;
 width:100%;	
}
#wrapper h1
{
 margin-top:50px;
 font-size:45px;
 color:#1B4F72;
}
#wrapper h1 p
{
 font-size:18px;
}



@media only screen and (min-width:700px) and (max-width:995px)
{
 #wrapper
 {
  width:100%;
 }
 #wrapper h1
 {
  font-size:30px;
 }

}
@media only screen and (min-width:400px) and (max-width:699px)
{
 #wrapper
 {
  width:100%;
 }
 #wrapper h1
 {
  font-size:30px;
 }


@media only screen and (min-width:100px) and (max-width:399px)
{
 #wrapper
 {
  width:100%;
 }
 #wrapper h1
 {
  font-size:25px;
 }

}