/* Slideshow container */
.slideshow-container {
  
  position: relative;
  margin:0 auto;
  margin-top:40px;
  width:400px;
  height:500px;
  background-color:  rgb(219,247,215);
  border:1px solid orange;
  border-radius:15px;
-webkit-box-shadow: 2px 2px 7px -1px rgba(72,76,77,1);
-moz-box-shadow: 2px 2px 7px -1px rgba(72,76,77,1);
box-shadow: 2px 2px 7px -1px rgba(72,76,77,1);
-webkit-transition: -webkit-transform 0.5s; /* Safari */
 /*   transition:  transform 0.2s;
     transform: rotate(-1deg);  */
}

/*
.slideshow-container:hover {
   -webkit-transform: rotate(0deg); /* Safari 
   


}

*/


#texte span {
  color:black;
  font-weight:bold;
  font-weight:26px;
}
.next:before {
  content: "";
  transition: border-width 0.5s ease-in-out;
  border-style:  solid;
  border-color:    orange rgb(219,247,215); /* #80d4ff */;
  position: absolute;
  bottom: 80px;
  right: 0px;
  border-width:  10;
  
}


.next:hover:before,
.next:focus:before,
.next:active:before {
  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  border-width: 45px 45px 0 0;
  border-radius: 0;

}



/* Hide the images by default */
.mySlides {
    display: none;
    margin-top:20px; 

}

#texte h1 {
 text-align: center;
  font-size:25px;  
  color:rgb(63,165,235);
  font-family:"Comic Sans Ms";
  margin-top:10px;
}

.mySlides img {
  width:300px;

  margin:30px;
  text-align:center;

}

#texte p {
  font-size:20px;
  padding-top:20px;
}


.container {
  display:flex;
  flex-wrap: wrap;
}

.element {
  width:250px;
}

.element p {
  width:200px;
  height:230px;
  background-color:white;
  padding:5px;
  margin:20px;
  border-radius:5px;
  text-align:center;
  border:2px solid lightgrey;

}




/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 480px;
  width: auto;
 
  padding: 50px;
  color: white;
  font-weight: bold;
  font-size: 30px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {

  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
/*.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
*/

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

/* Number text (1/3 etc) */
.numbertext {
  color: black;
  font-weight:bold; 
  font-size: 18px;
  padding: 8px 12px;
  position: absolute;
  top: 455px;
  left:170px;
}



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

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

@keyframes fade {
  from {opacity: 0} 
  to {opacity: 1}
}


/* Quoted speech  */

.quote {
  position: relative;
  width: 250px;
  height:140px;
  padding: 15px 20px 20px 15px;
  margin: 10px auto;
  margin-bottom:-200px;
  font: italic 26px/1.4 Georgia, serif;
  color: #fff;
  background: rgb(63,165,235);
  border-radius: 1rem;
  font-size:16px;
  top:-350px;
  left:20px;
     -webkit-animation: mymove 2s ; /* Safari 4.0 - 8.0 */
    animation: mymove 2s ;
    
    animation-fill-mode: forwards;
    opacity:0;
    
 
}

.quote:after {
  content: "";
  position: absolute;
  top: 20%;
  right:100%;
  border-width: 0 0 30px 30px;;
  border-style: solid;
  border-color: rgb(63,165,235) transparent;     
}


/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
     0%   {opacity:0;}    
    100% {opacity:1;}
}

/* Standard syntax */
@keyframes mymove {
       0%   {opacity:0;}    
    100% {opacity:1;}
}




.quote3 {
  position: relative;
  width: 250px;
  height:125px;
  padding: 10px 15px 10px 20px;
  margin: 1rem auto;
  font: italic 26px/1.4 Georgia, serif;
  color: #fff;
  background: rgb(249,134,7);
  border-radius: 1rem;
  font-size:17px;
  left:220px;
  top:-40px;
   -webkit-animation: mymove 1s; /* Safari 4.0 - 8.0 */
    animation: mymove 1s ;
    animation-delay:4s;
    animation-fill-mode: forwards;
    opacity:0;
}





.quote3:after {
  content: "";
  position: absolute;
  top:20%;
  left:-10%;
  border-width: 30px 0 0 30px;
  border-style: solid;
  border-color: rgb(249,134,7) transparent;
}


i {
  font-size:40px;
  position:absolute;
  top:455px;
  left:360px;
  color:black;
}