* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;  background-color: #87CEFA }   /* LightSkyBlue */

.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 50%;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  top:2px;
}
.slideshow-container-welcome {
  max-width: 60%;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  top:2px;
}

.typetitre {
  color: #f2f2f2;
  font-size: 25px;
  padding: 8px 12px;
  position: absolute;
  top: 20px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) 
.typetitre { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; text-align: center; } */

/* Caption text */
.typetexte {
  color: #ffffff;
  font-size: 22px;
  padding: 8px 12px;
  position: absolute;
  bottom: 15px;
  width: 100%;
  text-align: center;
}

/* The dots/bullets/indicators */
.dot {
  height: 3px;
  width: 3px;
  margin: 0 2px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: yellow;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 4s;
  animation-name: fade;
  animation-duration: 4s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

.fade_stable {
  -webkit-animation-name: fade_stable;
  -webkit-animation-duration: 40s;
  animation-name: fade_stable;
  animation-duration: 40s;
  animation-timing-function: linear;
}

@-webkit-keyframes fade_stable {
  from {opacity: .8;  } /*transform: rotate(0deg)*/
  to {opacity: 1;} 
}

@keyframes fade_stable {
  from {opacity: .8;} 
  to {opacity: 1;}
}

/* On smaller screens, decrease text size     transition: all .1s .1s;    */
@media only screen and (max-width: 300px) {
  .typetexte {font-size: 11px}
}
/* @media screen and ( max-width: 639px)  { #finCarrousselbb {top : 140px;}} /*petit*/
/* @media screen and ( min-width: 640px)  { #finCarrousselbb {top : 50%;}}  /*grand*/
#finCarrousselbb {
text-align:center; 
cursor:pointer; 
line-height : 20px; 
font-weight: bold; 
right:20%; 
height :20px;
background: black ;
color:silver;
padding:0px; 
border:0px; 
position:absolute;
-webkit-animation : examplebb 4s infinite; /* Safari 4.0 - 8.0 */
animation: examplebb 4s infinite;
}
#finCarrousselbb1 {
text-align:center; 
cursor:pointer; 
line-height : 20px; 
font-weight: bold; 
right:40%; 
height :20px;
top : 70%;
background: black ;
color:silver;
padding:0px; 
border:0px; 
position:absolute;
-webkit-animation : examplebb 4s infinite; /* Safari 4.0 - 8.0 */
animation: examplebb 4s infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes examplebb {
  0% {background-color: white ;color: black;}
  50% {background-color: black;color: white;}
  100% {background-color: white;color: black;}
}

/* Standard syntax */
@keyframes examplebb {
  0% {background-color: white;color: black;}
  50% {background-color: black;color: white;}
  100% {background-color: white;color: black;}
}

#finCarrousselhh {
text-align:center; 
cursor:pointer; 
line-height : 20px;   
font-weight: bold; 
top:2px;
right:20%; 
height :20px;
  background: black ;
  color:silver;
  padding:0px; 
  border:0px; 
  position:absolute;
-webkit-animation : examplehh 4s infinite; /* Safari 4.0 - 8.0 */
animation: examplehh 4s infinite;
}
#finCarrousselhh1 {
text-align:center; 
cursor:pointer; 
line-height : 20px;   
font-weight: bold; 
top : 80%;
right:40%; 
height :20px;
  background: black ;
  color:silver;
  padding:0px; 
  border:0px; 
  position:absolute;
-webkit-animation : examplehh 4s infinite; /* Safari 4.0 - 8.0 */
animation: examplehh 4s infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes examplehh {
  0% {background-color: silver ;color: black;}
  50% {background-color: black;color: white;}
  100% {background-color: silver;color: black;}
}

/* Standard syntax */
@keyframes examplehh {
  0% {background-color: silver;color: black;}
  50% {background-color: black;color: silver;}
  100% {background-color: silver;color: black;}
}
