/* Generated by less 2.5.1 */
/*param BAN : modifier la hauteur du pavé*/
/******************************************************************/
/*Choix de l'animation*/
@keyframes slide1 {
  0% {
    transform: translateY(0);
    transform: translateX(250px);
    opacity: 0;
  }
  1% {
    transform: translateX(250px);
    opacity: 1;
  }
  6%,
  93% {
    transform: translateX(0px);
    opacity: 1;
  }
  99% {
    transform: translateX(-250px);
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translateY(-1000px);
  }
}
@keyframes slide2 {
  0% {
    transform: translateY(0);
    transform: translateX(250px);
    opacity: 0;
  }
  1% {
    transform: translateX(250px);
    opacity: 1;
  }
  6%,
  93% {
    transform: translateX(0px);
    opacity: 1;
  }
  99% {
    transform: translateX(-250px);
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translateY(-1000px);
  }
}
@keyframes slide3 {
  0% {
    transform: translateY(0);
    transform: translateX(250px);
    opacity: 0;
  }
  1% {
    transform: translateX(250px);
    opacity: 1;
  }
  6%,
  93% {
    transform: translateX(0px);
    opacity: 1;
  }
  99% {
    transform: translateX(-250px);
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translateY(-1000px);
  }
}
@keyframes slide4 {
  0% {
    transform: translateY(0);
    transform: translateX(250px);
    opacity: 0;
  }
  1% {
    transform: translateX(250px);
    opacity: 1;
  }
  6%,
  93% {
    transform: translateX(0px);
    opacity: 1;
  }
  99% {
    transform: translateX(-250px);
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translateY(-1000px);
  }
}
@keyframes slide5 {
  0% {
    transform: translateY(0);
    transform: translateX(250px);
    opacity: 0;
  }
  1% {
    transform: translateX(250px);
    opacity: 1;
  }
  6%,
  93% {
    transform: translateX(0px);
    opacity: 1;
  }
  99% {
    transform: translateX(-250px);
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translateY(-1000px);
  }
}
/*
flip-vertical.less
flip-horizontal.less
flip-alternate.less
slider-left.less
slider-right.less
slider-alternate.less
zoom-out.less
zoom-in.less
*/
/******************************************************************/
/*param .bloc-fade ou .txt
bords arrondis : modifier les bloc textes couleur et bordures , position à venir :) */
/*8px 8px 8px 8px;*/
/*position bottom des blocs textes*/
/*PARAM AUTO ne pas modifier*/
/******************************************************************/
/*couleurs : modifier les couleurs du pavé et du logo (couleur de fond uniquement)*/
/******************************************************************/
/*Text : Modifier le texte des slides, taille du texte à venir :) */
/*taille texte*/
/*T1*/
/*T2*/
/*CTA - Button : Text Bouton*/
/******************************************************************/
/*Durée : modifier la durée de la bannière par slide*/
/******************************************************************/
/*Style*/
.duree_pave_3_slides {
  animation-delay: 12.96s;
}
.duree_pave_4_slides {
  animation-delay: 17.19s;
}
.duree_pave_5_slides {
  animation-delay: 21.42s;
}
body {
  padding: 0;
  margin: 0;
  font-family: arial, helvetica, sans-serif;
}
.pave,
.div-logo,
.contener,
.slide5 {
  box-sizing: border-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
  justify-content: center;
}
.pave,
.hover-the-box,
.contener,
.slide,
.slide1,
.slide2,
.slide3,
.slide4,
.slide5 {
  height: 250px;
}
.pave {
  background-color: #efefef;
  width: 300px;
  box-shadow: inset 1px 1px 1px 1px grey;
  z-index: 100;
  position: absolute;
}
.pave {
  overflow: hidden;
}
.hover-the-box {
  box-shadow: inset 0px 0px 0px 1px #f0f0f0;
  width: 300px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: ease-in-out 300ms;
}
.hover-the-box:hover {
  box-shadow: inset 0px 0px 40px 150px rgba(240, 240, 240, 0.3);
}
.bouton2:hover ~ .hover-the-box {
  box-shadow: inset 0px 0px 40px 150px rgba(240, 240, 240, 0.6);
}
.div-logo {
  background: #efefef;
  width: 300px;
  height: 50px;
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
}
.logo {
  max-height: 40px;
}
.contener {
  width: 300px;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  backface-visibility: hidden;
}
.slide {
  max-width: 300px;
  position: relative;
  z-index: 1;
}
.slide1,
.slide2,
.slide3,
.slide4,
.slide5 {
  width: 300px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateY(-500px);
}
.slide1,
.slide2,
.slide3,
.slide4 {
  position: absolute;
}
.slide5 {
  position: relative;
}
.txt1,
.txt2,
.txt3,
.txt4,
.txt5,
.txt6 {
  background: #efefef;
  bottom: 0;
  width: 100%;
  opacity: 1;
  border-radius: 0;
  left: -2.5%;
  box-shadow: 5px 6px 7px 0px rgba(10, 10, 10, 0.4);
  position: absolute;
  min-height: 0;
  padding: 2.5%;
  display: block;
  z-index: 5;
  text-align: center;
}
.txt1 div:first-child::after {
  content: "TRILLICK TRACTORES   ";
  font-size: 1em;
  color: #003974;
}
.txt1 div:last-child::after {
  content: "";
  font-size: 1em;
  color: #003974;
}
.txt2 div:first-child::after {
  content: "TRILLICK TRACTORES   ";
  font-size: 1em;
  color: #003974;
}
.txt2 div:last-child::after {
  content: "";
  font-size: 1em;
  color: #003974;
}
.txt3 div:first-child::after {
  content: "TRILLICK TRACTORES   ";
  font-size: 1em;
  color: #003974;
}
.txt3 div:last-child::after {
  content: "";
  font-size: 1em;
  color: #003974;
}
.txt4 div:first-child::after {
  content: "TRILLICK TRACTORES   ";
  font-size: 1em;
  color: #003974;
}
.txt4 div:last-child::after {
  content: "";
  font-size: 1em;
  color: #003974;
}
.txt5 div:first-child::after {
  content: "TRILLICK TRACTORES   ";
  font-size: 1em;
  color: #003974;
}
.txt5 div:last-child::after {
  content: "";
  font-size: 1em;
  color: #003974;
}
.txt6 div:first-child::after {
  content: "TRILLICK TRACTORES   ";
  font-size: 1em;
  color: #003974;
}
.txt6 div:last-child::after {
  content: "";
  font-size: 1em;
  color: #003974;
}
.bouton {
  color: white;
  background: #003974;
}
.bouton:after {
  content: "Clic aquí ! ";
}
.hover-the-box:hover ~ .photos .slide .slide5 .bouton::after {
  background: #000000;
}
.slide1 {
  background-image: url('../img/img01.jpg');
  animation: slide1 4.5s ease;
  -webkit-animation: slide1 4.5s ease;
}
.slide2 {
  background-image: url('../img/img02.jpg');
  animation: slide2 4.5s ease;
  -webkit-animation: slide2 4.5s ease;
  animation-delay: 4.23s;
}
.slide3 {
  background-image: url('../img/img03.jpg');
  animation: slide3 4.5s ease;
  -webkit-animation: slide3 4.5s ease;
  animation-delay: 8.46s;
}
.slide4 {
  background-image: url('../img/img04.jpg');
  animation: slide4 4.5s ease;
  -webkit-animation: slide4 4.5s ease;
  animation-delay: 12.69s;
}
.slide5 {
  background-image: url('../img/img05.jpg');
  animation: slide5 4.5s ease;
  -webkit-animation: slide5 4.5s ease;
  animation-delay: 16.92s;
}
.bouton {
  display: block;
  height: 8%;
  padding: 5%;
  text-align: center;
  width: 50%;
  z-index: 15;
  border-radius: 10px;
}
.bouton2 {
  position: absolute;
  opacity: 0;
  transform: translate(-90px, 145px);
  display: block;
  padding: 5%;
  text-align: center;
  width: 50%;
  z-index: 2000;
  border-radius: 10px;
  background-color: #003974;
  color: #fff;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2);
  transition: ease-in-out 300ms;
}
.bouton2::after {
  content: "Clic aquí !";
}
a:hover .bouton2 {
  opacity: 1;
  transform: translate(-90px, -25px);
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.7);
}