/**
  * Structure
  *
  * Définir la largeur du diaporama dans son conteneur grâce à `width` de `.tript`.
  *
  * Le pseudo élément `.tript::before` sert à définir le ratio que doit respecter
  * le diaporama, il suffit de remplacer `padding-top` avec la valeur souhaitée.
  *
  * Exemples :
  *
  * Pour un ratio 2,5/1 : 1/2.5*100 = 40%
  * Pour un ratio 2/1 : 1/2*100 = 50%
  * Pour un ratio 16/9 : 3/4*100 = 56.25%
  * Pour un ratio 3/2 : 2/3*100 = 66.66%
  * Pour un ratio 4/3 : 3/4*100 = 75%
  */

.tript {
  display: none;
  width: 85%;
}
.tript:before {
  padding-top: 50%;
}
.tript-image-only:before {
  padding-top: 66.66%;
}
.tript-image-only.tript-ready {
  display: block;
}

.tript-middle {
  background: #000;
}

.tript-middle .tript-content {
  left: 0; /* Switch `left` to `right` to show content on the right */
  width: 38.37%;
}

.tript-middle .tript-items {
  right: 0; /* Switch `right` to `left` to show items on the left */
  width: 61.63%;
}

.tript-left:before,
.tript-right:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  background: rgba(0, 0, 0, .6);
}

.tript-left {
  margin-right: 20px; /* Space between left pane and middle pane */
}

.tript-right {
  margin-left: 20px; /* Space between right pane and middle pane */
}

@media (min-width:1024px) {

  .tript.tript-ready {
    display: block;
  }

}

@media (min-width:1440px) {

  .tript {
    width: 65%;
  }
  .tript:before {
    padding-top: 40%;
  }

  .tript-middle .tript-content {
    width: 28.92%;
  }

  .tript-middle .tript-items {
    width: 71.08%;
  }

}

@media (min-width:1440px) {

  .tript {
    width: 80%;
  }

}

@media (min-width:1920px) {

  .tript {
    width: 65%;
  }

}

@media (max-width:639px) {

  .tript-image-only {
    width: 100% !important;
  }

}

@media (max-width:1279px) {

  .tript-image-only {
    width: 80%;
  }

}

/**
  * Previous / next
  */

.tript-arrow {
  width: 33px;
  height: 107px;
  margin-top: -53px;
  overflow: hidden;
  text-indent: 35px;
  background: url(arrows.svg);
  background-position: -1px -1px;
  background-size: 80px 110px;
  border: none;
  opacity: .6;
  cursor: pointer;
  transition: .1s opacity ease-out;
}
.tript-arrow:hover {
  opacity: 1;
}

.tript-prev {
  position: absolute;
  top: 50%;
  left: -70px;
  z-index: 2;
}

.tript-next {
  position: absolute;
  top: 50%;
  right: -70px;
  z-index: 2;
  background-position: -41px -1px;
}

@media (max-width: 720px) {

  .tript-prev {
    left: -60px;
  }

  .tript-next {
    right: -60px;
  }

}