@charset "utf-8";
/* CSS Document */
  /* MISE EN FORME */ 
  #site {margin-top: 0;}
  #first img{margin:auto; }
  #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:5px;float: left;margin-bottom: 40px;clear: both; width:100%}
  #third .serie img:nth-child(3) {float:right; display: none}
  #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-color: #000000;}
  #first  {background-image: url(https://cdn.static.nexway.com/i/i19/Gamesload/CSSCO-213-LP-auto/Editeurs/GoodShepherd/bg-produit.jpg); background-position:top center; background-size:cover; margin-top:38px}
  #first img:nth-child(2){padding-top:85px;}
  #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; } 


  /* 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; /* Safari */
  -webkit-transition-duration: 1s; /* Safari */
  transition-property:  width, height, opacity;
  transition-duration: 1s; 
  z-index:15;
  }
  #viewMenu li{white-space: nowrap; padding:2px 0 } 
  .viewMenuOpen{  cursor: pointer; padding:5px 0} 
  #viewMenu:hover {     width: 250px;   height:290px; opacity:0.9;  }

@media (min-width: 480px) {
	
	#second .listing {column-count: 2; width:auto} 
	#third .serie > h2{ font-size:26px; } 
	/*#third .serie img:nth-child(4){ display: block}*/
}
@media (min-width: 560px) {
	#second .filtre p{width:auto}
	#second .filtre  { padding:10px 0; height:80px;}

}
@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:26px; } 
}