/**
 * EDS - Fichier CSS dédié au CAROUSEL SLICK BAND TWICE.
 * Chargé dans le template.tpl.php
 *
 * @file
 */

.slick-band-twice .slick { position: relative; }
.slick-band-twice .slick-slide { width: 375px !important; outline: none; }
.slick-band-twice .slick-slide > div { height: 226px; }
.slick-band-twice .slide { position: relative; height: 226px; }
.slick-band-twice .group-text-overlay {
  display: none;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, 0.4) url('../../images/common/plus.png') 280px 125px no-repeat;
  background: rgba(0, 0, 0, 0.4) url('../../images/common/plus.svg') 280px 125px no-repeat;
  z-index: 10;
}
.slick-band-twice .group-text {
  display: none;
  position: absolute;
  left: 0; bottom: 0;
  /* padding-top ou bottom provoquent un lag dans le slide jQuery */
  padding-right: 100px;
  padding-left: 20px;
  margin-bottom: 20px;
  color: #fff;
  z-index: 20;
}
.slick-band-twice .categorie-contenu { margin-bottom: 5px; }
.slick-band-twice .views-field-title {
  line-height: 1.1;
  font-family: 'Trebuchet bold', Helvetica, Arial, sans-serif;
  font-size: 1.5em;
}
.slick-band-twice .views-field-view-node a {
  display: none;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 30;
}
.slick-band-twice .slick-arrow {
  position: absolute;
  top: 175px;
  width: 101px; height: 101px;
  background-position: left top;
  background-repeat: no-repeat;
  z-index: 50;
}
.slick-band-twice .slick-arrow:hover { cursor: pointer; }
.slick-band-twice .slick-prev { left: 0; }
.slick-band-twice .slick-next { right: 0; }

/**
 * RESPONSIVE
 */

/*--------- <= 475px ---------*/

@media only screen and (max-width: 475px) {  /* equ. 380px */

  .slick-band-twice .slick-arrow { display: none !important; }

}

/*--------- <= 420px ---------*/

@media only screen and (max-width: 420px) { /* equ. 336px */

  .slick-band-twice .slick-slide { width: 300px !important; outline: none; }
  .slick-band-twice .slick-slide > div { height: 180px; }
  .slick-band-twice .slide { height: 180px; }
  .slick-band-twice .slide img { width: 300px !important; height: 180px !important; }
  .slick-band-twice .group-text-overlay { background-position: 240px 110px; }

}