/*------------------------------------*\
    $SLIDER
\*------------------------------------*/


.container-slider{

	position: relative;

	width: 475px;

	height: 275px;

	margin: auto;

	-webkit-box-shadow: 0 0 5px #ccc;
    
    box-shadow: 0 0 5px #ccc;
    
    border: 5px solid #fff;

    margin-bottom: 15px;
}


.mySlides {

	display:none;

	height: 100%;

	width: 100%;

	position: relative;

	background-color: #252525;
}

  
.mySlides > div{
      
	position: absolute;    

	bottom: 0;

	left: 0;

	right: 0;

	padding: 5px 10px;

	background-color: rgba(0,0,0,0.7);

	color : #fff;

	font-size: 0.8em;

	text-overflow: ellipsis;

	font-family: "raleway-medium", sans-serif;

}


.mySlides > img{

    max-height: 100%;

    max-width: 100%;

    display: block;

    margin : auto;
}


.container-slider button{

	color: #000;

	background-color: rgba(255,255,255,0.6);

	border: none;
    
    display: inline-block;
    
    /*padding: 8px 16px;*/
    width: 32px;

    height: 32px;
    
    vertical-align: middle;
    
    overflow: hidden;
    
    text-decoration: none;
    
    text-align: center;
    
    cursor: pointer;
    
    white-space: nowrap;

    position: absolute;

    top: 50%;

    -webkit-transition: background-color .3s ease-in;
    
    -moz-transition: background-color .3s ease-in;
    
    -o-transition: background-color .3s ease-in;
    
    transition: background-color .3s ease-in;

}

.container-slider button.pos-left{

	left: 0%;

	transform:translate(0%, -50%);

	-ms-transform:translate(-0%, -50%);
}


.container-slider button.pos-right{
	
	right: 0%;

	transform:translate(0%, -50%);

	-ms-transform:translate(0%, -50%);
}


.container-slider button:hover{

	color: #000;

	background-color: #d8d8d8;

}



/*------------------------------------*\
    $INDICATEURS
\*------------------------------------*/


.slides-number{

	background-color: rgba(255,255,255,0.7);

	position: absolute;

	padding: 2px 5px;

	top: 0;

	right: 0;

	font-size : 0.85em;

	font-family: 'raleway-medium', sans-serif;

}



.slider-indicator{

	display: flex;

	display: -webkit-flex;

  	position: absolute;
  
  	bottom: 1.5em;
  	
  	left: 50%;
  	
  	-webkit-transform: translateX(-50%);
   	
   	transform: translateX(-50%);
}


.slider-indicator > a{

	display: block;
  	
  	margin: 0 0.5em;
  	
  	width: 1em;
  	
  	height: 1em;
  	
  	background: rgba(255, 255, 255, 0.5);
  	
  	border-radius: 100px;
}



/*------------------------------------*\
    $ANIMATIONS
\*------------------------------------*/


/*.animate-opacity{
    
    animation: opac 0.8s;
}


@keyframes opac{from{opacity:0} to{opacity:1}}*/







@media screen and (max-width: 39.9375em) {
	
	.container-slider{

		width: 95%;

		height: auto;
	}
	
}