@charset "utf-8";
/* CSS Document */
  /* MISE EN FORME */ 
  #site {margin-top: 0;}
body > .container .page-content, body > .container:not(.home) .page-content{ background-color: transparent}
  #first img{margin:auto; padding-top:15px;  width: 100%; max-width:1429px; display:block }
  #first img:nth-child(2){ width:95%; max-width:422px; margin:auto;}  
  #first p{ width:100%; padding-top:45px; }

  #second {padding:0 15px 0 15px; margin-top:45px;}
  #second .filtre  { padding:10px 0; height:95px;}
  #second .filtre > div{ float:left}
  #second .filtre p{width:100%}
  #second .filtre p, #second .filtre img, #second .reset{padding-top:5px; float:left; padding-right:8px;}
  #second .filtre input{text-align:center; width:50px; font-size:13px; font-weight:normal; color:#000000}
  #second .btn {text-decoration: none; padding: 7px; margin-left:15px; border-radius: 24px; -webkit-border-radius: 24px; -moz-border-radius: 24px;}
  #second .reset{width:100%; cursor: pointer;}
  
  #third .listeproduct{width:100%;     float: left}
  #third .serie{margin-top:45px;float: left; margin-bottom: 40px;clear: both; width:100%}
  #third .serie img:nth-child(3) {float:right; display: none}
  #third .serie img:nth-child(2) {float: left;}
  #third .serie img:nth-child(1){float:left}
  #third .serie > h2{ float:left;padding: 0; margin: 0;}
  #third .ancre {clear: both;padding-bottom: 25px;}


  
  /* PERSONALISATION */
  body { background-image: url(https://cdn.static.nexway.com/i/i19/Focus/LP-auto/Event/bg-event.jpg);
    background-size: auto;margin-top: 38px;}

  #first img:nth-child(2){padding-top:0; width: 100%;}
  #first p{color:#ffffff; font-size:17px; }
  
  #second{background-color:#1a1a1a}
  #second .filtre{font-size:13px; color:#c3c3c3; font-weight:bold}
  #second .listing {column-count: 1; max-width: 1000px; border-top:2px solid #000000;  width:100%; padding-bottom: 10px;}
  #second li a {color:#ffffff; font-size:14px; text-decoration:none}
  #second .listing li {background-image: url(https://cdn.static.nexway.com/i/i19/Gamesload/CSSCO-213-LP-auto/flecheListe.png); background-repeat: no-repeat; background-position: left 15px;list-style-type: none;padding-left: 15px; padding-top: 8px;}	   
  #second .listing li a:hover {  color:#b56fc6;   text-decoration:underline;  background-position: left -7px;}
  #second .listing li:hover {   background-position: left -17px;}
  #second .btn { border:1px solid #575151; font-family: arial; font-size: 0.8em; color: #FFFFFF; background-color: #454545; }
  #second .btn:hover { font-size: 0.8em; background-color: #575151; border:1px solid #ffffff;  }
  #second .reset{font-size:13px; color:#1f9ec1; font-weight:bold} 
  
  #third .serie > h2{color:#ffffff; font-size:21px; height: 28px;background-color: #09627e; padding-right: 50px;} 


  /* ViewMenu - menu deroulant
  #viewMenu{ display: none; width: 165px; height: 40px; overflow: hidden; background-color: #ccc;opacity: 0.5;  padding: 10px 25px;border-radius: 5px;text-align:left; position:fixed;top:48px;
  -webkit-transition-property: width,  height, opacity; 
  -webkit-transition-duration: 1s;
  transition-property:  width, height, opacity;
  transition-duration: 1s; 
  z-index:15;
  } */
  #viewMenu{ display: none; width: 170px; height: 40px; overflow: hidden; background-color: #ccc;opacity: 0.9;  padding: 10px 25px;border-radius: 5px;text-align:left; position:fixed;top:48px;
  -webkit-transition-property: width,  height, opacity;/* Safari */
  -webkit-transition-duration: 1s; /* Safari */
  transition-property:  width, height, opacity;
  transition-duration: 1s; 
  z-index:15; right:-10px;
  }
  
  #viewMenu li{white-space: nowrap; padding:2px 0 } 
  .viewMenuOpen{  cursor: pointer; padding:5px 0} 
  #viewMenu:hover {      height:auto; opacity:0.9;  }

@media (min-width: 480px) {

	#second .listing {column-count: 2; width:auto} 
	#third .serie > h2{ font-size:25px; } 
	/*#third .serie img:nth-child(4){ display: block}*/
}

@media (min-width: 560px) {
	#second .filtre p{width:auto}
	#second .filtre  { padding:10px 0; height:80px;}
	#viewMenu{  left:7%;width: 180px; 	}
}
@media (min-width: 620px) {
	#second .filtre .reset{float:right; width:auto} 
	#second .listing {column-count: 3; } 
	#second .filtre  { padding:10px 0; height:45px;}
	#third .serie > h2{ font-size:25px; } 
	body {  background-position: center 50px;
    background-size: 100%;}

	
}
@media (min-width: 750px) {
	#first img{padding-top:0;  }
	#second .filtre p{width:auto}
}