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

/* Responsive */
@-ms-viewport{
  width: device-width;
}
	

html {
	background-color: #000;

}



		/*Code concernant la partie text ACCUEIL*/

	#article_accueil {
			
			display: block;
			visibility: visible;
		}

#text-right {
	
	line-height:1.1em; 
	color: #fff; 
	font-size: 30pt;
	width: 800px;
	font-weight:500;
	padding: 0px;
}

#text-left {
	
	line-height:1.1em; 
	color: #fff; 
	font-size: 22pt;
	width: 700px;
	font-weight:500;
	padding: 0px 0px;
}


#right {
	position: absolute; 
	right:0; 
	padding-right:10%; 
	padding-left:40px; 
	border-left: 10px solid #fff; 
	border-top: 10px solid #fff; 
	border-bottom: 10px solid #fff;
	
}

#left {
	
	position: absolute; 
	left:0; 
	margin-top:270px; 
	padding-right: 30px;  
	padding-left:15%; 
	border-right: 10px solid #fff; 
	border-top: 10px solid #fff; 
	border-bottom: 10px solid #fff;
	
}
									
												/*Code concernant la galerie ACCUEIL*/

#imgACC1, #imgACC2, #imgACC3, #imgACC4, #imgACC5, #imgACC6 {
	
	animation-duration: 30s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

#imgACC1 {
	animation-name: imgACC1;
}

#imgACC2 {
	animation-name: imgACC2;
}

#imgACC3 {
	animation-name: imgACC3;
}

#imgACC4 {
	animation-name: imgACC4;
}

#imgACC5 {
	animation-name: imgACC5;
}

#imgACC6 {
	animation-name: imgACC6;
}

@keyframes imgACC1 {
 	0%, 3% { opacity: 0; }
 	3%, 13% { opacity: 1; }
 	13%, 13% { opacity: 1; }
 	16%, 100% { opacity: 0; }
}

@keyframes imgACC2 {
	0%, 16% { opacity: 0; }
	19%, 29% { opacity: 1; }
	29%, 29% { opacity: 1; }
 	32%, 100% { opacity: 0; }
}

 @keyframes imgACC3 {
	0%, 32% { opacity: 0; }
	35%, 45% { opacity: 1; }
	45%, 45% { opacity: 1; }
  	48%, 100% { opacity: 0; }
}

@keyframes imgACC4 {
	0%, 48% { opacity: 0; }
	51%, 61% { opacity: 1; }
	61%, 61% { opacity: 1; }
  	64%, 100% { opacity: 0; }
}

@keyframes imgACC5 {
	0%, 64% { opacity: 0; }
  	67%, 77% { opacity: 1; }
  	77%, 77% { opacity: 1; }
  	80%, 100% { opacity: 0; }
}

@keyframes imgACC6 {
	0%, 80% { opacity: 0; }
  	83%, 93% { opacity: 1; }
  	93%, 93% { opacity: 1; }
  	98%, 100% { opacity: 0; }
}







							/* code concernant les éléments de la GALERIE PAGE MAGASIN et ACCUEIL (une partie) */

/* galerie / mise en forme générale */
	
			


.slides {
	top: -18px;
	left: 0px;
    padding: 0;
	width:100%;
	height:100%;
	display: block;
    position: fixed;
}

/* boutons radio */

.slides input { 
	display: none; 
}

/* galerie contenant image */

.slide-container { 
	display: block;
	
	
}

/* image */

.slide {
    top: 0;
    display: block;
	/*right: -1000px;*/
	width: 100%;
	height:100%;
	opacity: 0;
    position: absolute;
	transform: scale(1);
	transition: all .7s ease-in-out;
	
}

.slide img {
    
	min-width: 100%;
	max-height: 130%;
	
   
}

/* navigation recht/links / mise en forme générale */

.nav label {
	top: 35%;
	padding: 50px;
    width: 50px;
    display: none;
    position: fixed;
	opacity: 0;
    z-index: 9;
    cursor: pointer;
	transition: opacity .2s;
	color: #FFF;
}

.slide:hover + .nav label { opacity: 0.5; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

/* galerie transition entre les images */

input:checked + .slide-container  .slide {
    opacity: 1;
	/*right: 0px;*/
    transform: scale(1);

    transition: opacity 1s ease-in-out;
}


/* apparition nouvelle image */

input:checked + .slide-container .nav label { display: block; }

/* contenant navigation points */

.nav-dots {
	width: 100%;
	bottom: 60px;
	height: 11px;
	display: block;
	position: fixed;
	text-align:center;
}

/*@media (max-width: 700px) {
	
.nav-dots {
	display: none;
}
}*/

/* points (détail) */

.nav-dots .nav-dot {
	
	width: 20px;
	height: 20px;
	margin: 0 6px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background-color: #fff;
	opacity: 0.5;
}

.nav-dots .nav-dot:hover {
	cursor: pointer;
	background-color: #ffffff;
	opacity: 1;
}

/* lien entre points et images/images checked*/

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6 {
	background-color: #ffffff;
	opacity: 1;
}





	@media (max-width: 900px) {
		


		
		
		#text-left {
			
			font-size: 14pt;
			line-height: 1.3em;
			padding-left:0%;
			
		}
		
		
		#text-right {
			
			font-size: 18pt;
			line-height: 1.3em;
			padding-right:10%;
		}
		
		#left {
			
padding-right:50px;
			padding-left:50px;
			
			
			   
				
			width:360px;
		}
		
		
	#right {

			 padding-left: 30px;  
				padding-right:0px;
		width:380px;
			
		}
}



	
@media (max-height: 340px) {
		
		


	
		#article_accueil {
			
			display: none;
			visibility: hidden;
		}
}

	

@media (max-width: 480px) {
	

	
		#text-left {
			
			font-size: 12px;
			line-height: 1.3em;
			padding-left:0%;
		}
		
		
		#text-right {
			
			font-size: 14px;
			line-height: 1.3em;
			padding-right:10%;
		}
		
		#left {
	margin-top:110px;		
	padding-right:40px;
	border-right: 5px solid #fff; 
	border-top: 5px solid #fff; 
	border-bottom: 5px solid #fff;
			
			   
		
				
			width:230px;
		}
		
	
		
	#right {

	border-left: 5px solid #fff; 
	border-top: 5px solid #fff; 
	border-bottom: 5px solid #fff;
			 padding-left: 20px;  
				padding-right:0px;
		width:280px;
			
		}
	
}
	

@media (max-width: 300px) {
		
		


	
		#article_accueil {
			
			display: none;
			visibility: hidden;
		}
}