#slider {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border-radius: 5vh;
  	transition: 1.5s;

  
}



#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 90%;
  list-style: none;
}

#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 45vw;
  height: 45vw;
  text-align: center;
  margin-bottom:2vh
  /*line-height: 300px;*/
}

@media screen and (orientation: portrait) and (max-width:500px) {
	
#slider {
height:35vh; 
}	
	
#slider ul li {

  width: 80vw;
  height: 80vw;

	
}
}

@media screen and (orientation: portrait) and (min-width:501px) {
#slider {
height:45vh; 
}
#slider ul li {

  width: 80vw;
  height: 80vw;

	
}
}



a.prev, a.next {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: transparent;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 2em;
  opacity: 0.8;
  cursor: pointer;
}

@media screen and (orientation: portrait) and (max-width:500px) {
a.prev, a.next {

  font-size: 1em;

	
}
}

a.prev:hover, a.next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
    color: gold;
}

a.prev {
  border-radius: 0 2px 2px 0;
}

a.next {
  right: 0;
  border-radius: 2px 0 0 2px;
}


#slider:hover {
filter : contrast(170%);
}




.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;
  
  display:block;
}

.TheSlide {
	width:100%;
}



.FiltreNoir
{
width: 100%;
    background-color: #0c0d0d59;
    height: 100%;
    display: flex;
    justify-content: center;
}

.letterA{
	
-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 25em;
    background-image: url(images/a.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100%;
    filter: brightness(1.5);	
	font-family: Arial, sans-serif;	
	width: 100%;
    display: flex;
    justify-content: center;

}

.letterB{
	
-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 25em;
    background-image: url(images/b.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100%;
    filter: brightness(1.5);	
	font-family: Arial, sans-serif;	
	width: 100%;
    display: flex;
    justify-content: center;

}

.letterC{
	
-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 25em;
    background-image: url(images/c.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100%;
    filter: brightness(1.5);	
	font-family: Arial, sans-serif;	
	width: 100%;
    display: flex;
    justify-content: center;

}



.letterD{
	
-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 25em;
    background-image: url(images/d.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100%;
    filter: brightness(1.5);	
	font-family: Arial, sans-serif;	
	width: 100%;
    display: flex;
    justify-content: center;

}

.letterE{
	
-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 25em;
    background-image: url(images/e.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100%;
    filter: brightness(1.5);	
	font-family: Arial, sans-serif;	
	width: 100%;
    display: flex;
    justify-content: center;

}



.punchline {
position: absolute;
    top: 50%;
    text-transform: uppercase;
    font-size: 4em;
    color: gold;
    letter-spacing: 5px;
    font-weight: 500;
}

.letterF{
	
-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 25em;
    background-image: url(images/f.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100%;
    filter: brightness(1.5);	
	font-family: Arial, sans-serif;	
	width: 100%;
    display: flex;
    justify-content: center;

}

@media screen and (orientation: portrait) {
	
.letter {

    font-size: 20em;

}


}





/*  Galaxy Fold*/

@media only screen and (max-width: 359px)
{
  
.letterA{
    font-size: 15em;
}

.letterB{
    font-size: 15em;
}

.letterC{
    font-size: 15em;
}
.letterD{
    font-size: 15em;
}

.letterE{
    font-size: 15em;
}

.letterF{
    font-size: 15em;
}



.punchline {
    font-size: 1em;
}


}

/* smartphone*/
@media only screen and (min-width: 360px) and (max-width:379px) 
{
  
.letterA{
    font-size: 15em;
}

.letterB{
    font-size: 15em;
}

.letterC{
    font-size: 15em;
}
.letterD{
    font-size: 15em;
}

.letterE{
    font-size: 15em;
}

.letterF{
    font-size: 15em;
}



.punchline {
    font-size: 1em;
}

}
/* smartphone*/
@media only screen and (min-width: 380px) and (max-width:480px) 
{

.letterA{
    font-size: 15em;
}

.letterB{
    font-size: 15em;
}

.letterC{
    font-size: 15em;
}
.letterD{
    font-size: 15em;
}

.letterE{
    font-size: 15em;
}

.letterF{
    font-size: 15em;
}



.punchline {
    font-size: 1em;
}

}



/* tablet*/
@media only screen and (min-width: 481px) and (max-width:767px) and (orientation: portrait)
{

.letterA{
    font-size: 15em;
}

.letterB{
    font-size: 15em;
}

.letterC{
    font-size: 15em;
}
.letterD{
    font-size: 15em;
}

.letterE{
    font-size: 15em;
}

.letterF{
    font-size: 15em;
}


.punchline {
    font-size: 1em;
}


}
/* tablet*/
@media only screen and (min-width: 481px) and (max-width:768px) and (orientation: landscape)
{

.letterA{
    font-size: 15em;
}

.letterB{
    font-size: 15em;
}

.letterC{
    font-size: 15em;
}
.letterD{
    font-size: 15em;
}

.letterE{
    font-size: 15em;
}

.letterF{
    font-size: 15em;
}


.punchline {
    font-size: 2em;
}



}



/* tablet */
@media only screen and (min-width: 768px)  and (max-width:1023px) and (orientation: portrait)
{



}


/* laptop or large smartphone landscape*/
@media only screen and (min-width: 769px)  and (max-width:1023px) and (orientation: landscape)
{

.letterA{
    font-size: 15em;
}

.letterB{
    font-size: 15em;
}

.letterC{
    font-size: 15em;
}
.letterD{
    font-size: 15em;
}

.letterE{
    font-size: 15em;
}

.letterF{
    font-size: 15em;
}


.punchline {
    font-size: 2.5em;
}

}

/* large tablet portrait*/
@media only screen and (min-width: 1024px)  and (max-width:1200px) and (orientation: portrait) 
{
	
.letterA{
    font-size: 25em;
}

.letterB{
    font-size: 25em;
}

.letterC{
    font-size: 25em;
}
.letterD{
    font-size: 25em;
}

.letterE{
    font-size: 25em;
}

.letterF{
    font-size: 25em;
}

.punchline {
    font-size: 2em;
}


}
/* desktop*/
@media only screen and (min-width: 1024px)  and (max-width:1200px) and (orientation: landscape)
{




}
/* XL screen*/

@media only screen and (min-width: 1201px) 
{


}