html, body {
   height: 100%;
   background:url(images/bg.jpg) top center no-repeat #282828;
   border: 0px solid transparent;
   font-size: 1em; /* Ideal: 16px */
   margin: 0px 0px 0px 0px;
   min-height: 100%;
   padding: 0px 0px 0px 0px;
   width: 100%;
}
.bodypages {
 
   background:url(images/bg-pages.jpg) top center repeat-x #4e4e4e;
   
}
.img-haut { text-align:center;}
.rouge {
	color: #ebc1c4
}

a img {
border:0;
outline:none;
}

.tilt {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
 
.tilt:hover {
  -webkit-transform: rotate(-3deg);
     -moz-transform: rotate(-3deg);
       -o-transform: rotate(-3deg);
      -ms-transform: rotate(-3deg);
          transform: rotate(-3deg);
}

.pic {

	overflow:hidden;
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}



h1 {	font-family: 'Lato', sans-serif;
font-weight:300;
font-size:20px;}

   #apDiv1 {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: auto;
	z-index: 1;
	margin: 0 auto;
}
   #apDiv2 {
	z-index: 5000;
	position: absolute;
	left: 0px;
	top: 0;
	width: 100%;
	height: 420px;
}
.accroches {
	height:509px;
	width:995px;
	margin:0 auto}
	.accroches img{
	float: right;
	width: auto;
	height: auto;
	margin-left: 100%;
}

.vignettes {
	margin-right: 3%;
	float: left;
	width: 30%;
	text-align: center;
	font-family: 'Lato', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: #000000;
}
.vignettes img{
	max-width: 100%;
	height: auto;
	width: auto;
	margin-bottom: 10px;
}



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

.layout-main {
   height: 100%;
   margin: 0px auto 0px auto;
   min-height: 100%;
   width:100%; /* Ideal: 1024px -> 1024 / 1280 */
}
.header {
	width: 1200px;
	margin: 0 auto;
}

.main {
   height: 100%;
   min-height: 100%;
}

.layout-menu, .layout-adv {
   display: inline-block;
}

.logoresponsive {width:100%;
text-align:center;
display:none}
.logo {
	float: left;
	padding-top: 0px;
	display: inline-block;
}
.baseline {
	width: 524px;
	display: inline-block;
}
.layout-menu {
	color: #FFFFFF;
	width: 100%; /* Ideal: 214px -> 214 / 1024 */
	margin: 0 auto;
	text-align: center;
	font-family: 'Lato', sans-serif;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 14px;
	display: inline-block;
	vertical-align: top;
	padding-top: 300px;
	padding-left: 20px;
}

  .menunormal {
	   display:none;
	
}

  .menunormal ul {
	   display:none;
	
}





.menu1 ul {
	float: left;
	width: 380px;
	padding-left:60px;
	padding-top:25px;
}

.menu1 li {
   list-style: none;
   font-weight:300;
}


     .menu1 li {
	float: left;
	display: inline-block;
	margin-right: 8%; /* Ideal: 25px -> 25 / 960 */			
			
   
   }


.menu1 li a {
   color: #FFFFFF;
   text-decoration:none;
     font-weight:300;
	 font-size:11px;
}

/*.menu li a:before {
   content: no;
}*/

.menu1 li a:hover {
   color: #ccc;
}



.menu ul {
	float: left;
	width: 450px;
	padding-top: 20px;
}


     .menu li {
	float: left;
	display: inline-block;
	margin-right: 8%; /* Ideal: 25px -> 25 / 960 */			
			
   
   }
   
   
   
   




.layout-content {
	color: #fff;
	width: 1100px; /* Ideal: 596px -> 596 / 1024 */
	margin: 0 auto;
}

.layout-adv {
   color: #fff;
   background-color: #000;
   width: 20.8984375%; /* Ideal: 214px -> 214 / 1024 */
}

.menu, .content, .adv {
   padding: 5px 5px 5px 5px;
}

.menu h1 {
   font-size: 1.5em; /* Ideal: 24px */
}

.menu li {
   list-style: none;
   font-weight:300;
}

.menu li a {
   color: #FFFFFF;
   text-decoration:none;
     font-weight:300;
	 font-size:11px;
}

/*.menu li a:before {
   content: no;
}*/

.menu li a:hover {
   color: #ccc;
}

.content .content-item {
   border-top: 1px solid #36393D;
   clear: both;
   margin: 0px auto 0px auto;
   padding: 15px 0px 15px 0px;
   text-align: center;
   width: 90.939597315436241610738255033557%; /* Ideal: 542px -> 542 / 596 */
}

.content .content-item:first-child {
   border: 0px solid transparent;
}

.content .content-item h1 {
   font-size: 1.5em; /* Ideal: 24px */
}

.content .content-item p.description {
   font-size: 0.850em; /* Ideal: 12px */
   font-style: normal;
   font-family: 'Lato', sans-serif;
}
.texte-normal {
	font-size: 12px; /* Ideal: 12px */
	font-style: normal;
	font-family: 'Lato', sans-serif;
	text-align: left;
}

.content .content-item div.article {
   text-align: justify;
}

.content .content-item img.article-image {
   float: left;
   padding: 0px 25px 25px 0px;
   width: 16.107382550335570469798657718121%; /* Ideal: 96px -> 96 / 596 */
}

.adv .adv-item {
   border-top: 1px solid #36393D;
   margin: 0px auto 0px auto;
   padding: 15px 0px 15px 0px;
   text-align: center;
   width: 85.046728971962616822429906542056%; /* Ideal: 182px -> 182 / 214 */
}

.adv .adv-item:first-child {
   border: 0px solid transparent;
}

.adv .adv-item a {
   color: #000000;
   font-style: italic;
}

@media screen and (min-width: 421px) {
   .menu select {
      display: none;
   }
}

@media screen and (max-width: 1024px) {
   .layout-main {
      width: 95%;
   }
     .layout-menu {
      display: block;
  margin:0 auto;
      width: 100%;
	  text-align:center;
	  padding-top:85px;;
	
   }
   .menunormal {display:inherit;
   padding-top:35px;}
   
   .menunormal ul {
	   display:inherit;
	float: left;
	width: 100%;
	padding-left:60px;
	padding-top:25px;
}

.menunormal li {
   list-style: none;
   font-weight:300;
   float: left;
	display: inline-block;
	margin-right: 4%;
}

.menunormal li a {
   color: #FFFFFF;
   text-decoration:none;
     font-weight:300;
	 font-size:11px;
}
.menunormal li a:hover {
   color: #ccc;
}
   
   
   
   
   
   .menu1 ul {
	display:none;
}

.logo {display:none}
.logoresponsive {width:100%;
text-align:center;
display:inherit}

   
   
   
   
   
   
   
   
   
  .menu ul {
	display:none;
}


   
   
   
   
   
      .header { width:100%; margin:0 auto;}
   .logo {width:100%;
   height:auto;
   text-align:center;
 
   margin:0 auto;

/*   padding-left:300px;*/}

     #apDiv2 {
	z-index: 5000;
	position: absolute;
	left: 0px;
	top: 160px;
	max-width: 100%;
	height: auto;	


}


}

@media screen and (max-width: 960px) {
  
     #apDiv2 {
	z-index: 5000;
	position: absolute;
	left: 0px;
	top: 160px;
	max-width: 100%;
	height: auto;	


}
.accroches {
	max-height:509px;
	width:100%;
	height:auto;
	margin:0 auto}
	.accroches img{
	 float: right;
    height: auto;
    margin-left: 100%;
    max-width: 30%;
}
  
  
  
   .layout-menu {
      display: block;
  margin:0 auto;
      width: 100%;
	  text-align:left;
	  font-size:12px;
	
   }
   
   .layout-content {
      width: 100%;
   }
   .header { width:100%; margin:0 auto;}
   .logo {width:100%;
   height:auto;
   text-align:center;
 
   margin:0 auto;

/*   padding-left:300px;*/}
   
  .menunormal {display:inherit;
   padding-top:35px;}
   
   .menunormal ul {
	   display:inherit;
	float: left;
	width: 100%;
	
	padding-top:25px;
}

.menunormal li {
   list-style: none;
   font-weight:300;
   float: left;
	display: inline-block;
	margin-right: 5%;
}

.menunormal li a {
   color: #FFFFFF;
   text-decoration:none;
     font-weight:300;
	 font-size:11px;
}
.menunormal li a:hover {
   color: #ccc;
}
.logoresponsive {width:100%;
text-align:center;
display:inherit}
   
}

@media screen and (max-width: 760px) {
  
      .menu select {
      display: inherit;
      width: 96%;
   }
  
    .menunormal {display:none;
   padding-top:35px;}
  
   .layout-main {
      margin: 0px 0px 0px 0px;
      width: 100%;
   }
     .header { width:100%; margin:0 auto;}
	 .logo {width:100%;
   height:auto;
   text-align:center;
 
   margin:0 auto;
   
   
/*   padding-left:300px;*/}

        #apDiv2 {
	z-index: 5000;
	position: absolute;
	left: 0px;
	top: 170px;
	max-width: 100%;
	height: auto;	


}
.logoresponsive {width:100%;
text-align:center;
display:inherit}

}

@media screen and (max-width: 640px) {   
   
     .menunormal {display:none;
   padding-top:35px;}
   .layout-content {
      display: block;
      height: auto;
      min-height: auto;
      width: 100%;
   }
   
   .layout-adv {
      display: block;
      height: auto;
      min-height: auto;
      vertical-align: top;
      width: 100%;
   }
   
     .menu select {
      display: inherit;
      width: 96%;
   }
   
   .adv {
      text-align: center;
   }
   
   .adv .adv-item {
      display: inline-block;
   }
   
   .logoresponsive {width:100%;
text-align:center;
display:inherit}
}

@media screen and (max-width: 610px) {
  
       .menunormal {display:none;
   padding-top:35px;}
   .menu ul {
      display: none;
   }
   
   .menu select {
      display: inherit;
      width: 96%;
   }
   
   .layout-adv {
      display: none;
   }
   
        #apDiv2 {
	z-index: 5000;
	position: absolute;
	left: 0px;
	top: 160px;
	max-width: 100%;
	height: auto;	


}

.vignettes {
	float:none;
	text-align:center;

width:100%;
margin:0 auto;
padding-top:10px;
background:#f7f7f7;
}
.vignettes img{
	max-width:90%;
height:auto;
width:100%;

}

.logoresponsive {width:100%;
text-align:center;
display:inherit}



}

@media screen and (max-width: 320px) {
   .content .content-item img.article-image {
      display: none;
	  
	  
   }
   
     .menunormal {
	   display:none;
	
}
}