/* Created by Tivotal */

/* Google fonts(Poppins) */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
* {
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}


/*____________________________________guide___________________________________*/
#guides-list {
	padding: 0px 0px 0px 0px;  /* espacement HAUT BAS x GAUCHE */

	}
	
#inner-guides {
	/*max-width: 744px; */
   margin: 0;
   }
   
.menubouton {
 
	position: relative;
    float:left;
	width: 19.5%;
	height: 100%;
  	margin: 0% 0% 0% 0%;

    
    

    
   /*	width: 307px;
 	height:596px;
 	margin: 10px 0 0;
	margin-right: 3px; */
	}

figure.guide-image {
        /*font-family: 'Raleway', Arial, sans-serif;*/
	    position: relative;
        overflow: hidden;
		max-width: 240px;
		max-height: 325px; 
	    width: 100%;
	    color: #ffffff;
	    text-align: right;
	    font-size: 16px;
        font-weight: 50;
	    background-color: #000000;
	    text-transform: uppercase;
		border: 1px solid #03060a;
	    margin: 0;
		}
		
figure.guide-image:hover{
  border: 1px solid #ffffff;
  transition-duration: 150ms;
}

figure.guide-image img{
	filter: grayscale(25%); 
}		

figure.guide-image img:hover{
 	filter: grayscale(0%);
}

figure.guide-image * {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-transition: all 0.35s ease;
		transition: all 0.35s ease;
		}
		
figure.guide-image img {
		max-width: 100%;
		}
		
figure.guide-image figcaption {
			position: absolute;
			top: 0;
			right: 0; 
			z-index: 1;
			padding-top: 20px;
			padding-right: 10px;
			padding-left: 10px;
			width: -webkit-fill-available;
			}

figure.guide-image h3,figure.guide-image .sommaire { 
			width: 100%;
			margin: 0;
			padding: 0;
}

figure.guide-image h3 { 
			/*font-family: geosanslight, 'Raleway';*/
			letter-spacing:1px;
			background-color: rgba(0, 0, 0, 0.45); /*transparence du titre du bouton */
			font-weight: 50;
			font-size: 16px;
			text-align:center;
            border: 2px solid #1d1b31; }
			.confirme-h3{   
			position:relative; 
			left:15px;   
			font-size: 16px;
			float:left;  
			letter-spacing:5px;}
			
	/*	Cas où ecran inferieur à 1270 alors changement format titre du bouton:

@media (max-width: 1270px){
    .confirme-h3{   
			font-size:24px; 
} 
    figure.guide-image h3 { 

			letter-spacing:1px;
			background-color: rgba(0, 0, 0, 0.45);
			font-weight: 50;
			font-size: 16px;  
			text-align:center;
			border: 2px solid #d16928;}
}  

*/

			figure.guide-image .sommaire { 
			text-align:left; 
			line-height : 20px; 
			font-size: 1em;  
			letter-spacing: 2px; 
			font-weight: 300;  
			margin: 0;   
			padding: 0;}
			figure.guide-image .sommaire p { 
			-webkit-transform: translateX(40px);
			transform: translateX(40px);  
			opacity: 0; 
			list-style: none; 
			margin: 0;}
			
			figure.guide-image .sommaire h4 {
				-webkit-transform: translateX(40px);
				transform: translateX(40px);
				opacity: 0;  
				list-style: none; 
				padding-top:10px; 
				font-size: 1.2em;}
				
				figure.guide-image p { 
				padding: 2px 0;   
				display: block;  
				color: #ffffff;  
				text-decoration: none;}

				figure.guide-image:hover img{   
				zoom: 1;   
				filter: alpha(opacity=65);  
				-webkit-opacity: 0.65; 
				opacity: 0.45;          /* noircir le bouton au passage de la souris */
				}
				figure.guide-image:hover p { 
				opacity: 1;  
				-webkit-transform: translateX(0px);  
				transform: translateX(0px);}

				figure.guide-image:hover h4 { 
				opacity: 1;
				-webkit-transform: translateX(0px);  
				transform: translateX(0px);}
				
				figure.guide-image:hover p:first-child{ 
				-webkit-transition-delay: 0.1s; 
				transition-delay: 0.1s;}
				figure.guide-image:hover p:nth-child(2){  
				-webkit-transition-delay: 0.2s; 
				transition-delay: 0.2s;}
				figure.guide-image:hover p:nth-child(3){  
				-webkit-transition-delay: 0.3s;   
				transition-delay: 0.3s;}
				figure.guide-image:hover p:nth-child(4){  
				-webkit-transition-delay: 0.4s;  
				transition-delay: 0.4s;}
				figure.guide-image:hover p:nth-child(5){ 
				-webkit-transition-delay: 0.5s; 
				transition-delay: 0.5s;}
				figure.guide-image:hover p:nth-child(6){
				-webkit-transition-delay: 0.6s; 
				transition-delay: 0.6s;}
				figure.guide-image:hover p:nth-child(7){ 
				-webkit-transition-delay: 0.7s;  
				transition-delay: 0.7s;}
				figure.guide-image:hover p:nth-child(8){  
				-webkit-transition-delay: 0.8s; 
				transition-delay: 0.8s;}
				figure.guide-image:hover p:nth-child(9){  
				-webkit-transition-delay: 0.9s;  
				transition-delay: 0.9s;}


.bouton-guide{
    position:absolute;
    bottom:10px;
    text-align:center;
    z-index:999;
    left:50%;
    margin-left:-37.5px;
    padding:6px;
    padding-left:10px;
    padding-right:10px;
    font-size:14px;
    text-transform: uppercase;
    color: white; /* #e4e9f7; */
    font-weight: 100;
    border-radius:15px 15px 15px 15px;
    background-color: rgba(0, 0, 0, 0.5);
    border:2px solid #ffffff;
}   

.bouton-guide:hover{
    color:aquamarine;
    text-shadow: #e4e9f7 1px 0 10px; 

}

@media (min-width: 400px){
    .menubouton{
 	height:320px; 
	width:auto;
    margin: 0 auto;
	margin-left: 5px;
    margin-bottom: 5px;
    margin-top: 5px;
    }

}

@media (max-width: 1270px){
figure.guide-image { height:320px; width:auto; 
}

}