/* external css: flickity.css */

* { box-sizing: border-box; }

body { font-family: sans-serif; }

.carousel {
  background: #Fff;
  margin-bottom:100px;
}
/* Sketch doesnt export pattern fills at this point */
.black{background: rgba(0,0,0,0.50);z-index: 2;position: absolute;width: 100%;height: 100%;}
.carousel-text{position:absolute;z-index:5;padding:20px;}
.carousel-fond{position:absolute;z-index:4;width: 100%;height: 100%;}
.carousel-fond-image{width: 100%;height: 100%;position:absolute;z-index:1;background-size:cover;background-repeat: no-repeat;}
.carousel-cell {
  width:43%;
  /*width: 28%;*/
  height: 370px;
  margin-right: 10px;
  background: #fff;
  border-radius: 5px;

  /*counter-increment: carousel-cell;*/
}

.carousel-cell.is-selected {
  background: #fff;
}

/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  /*content: counter(carousel-cell);*/
  line-height: 300px;
  font-size: 80px;
  color: white;
}

.flickity-prev-next-button {
  top: -76px;
}
.flickity-slider{margin-bottom:30px;}
.flickity-button, .flickity-button:hover{background: hsla(0, 0%, 100%, 0);}
.flickity-prev-next-button.previous {left:0px;}
.flickity-prev-next-button.next{right:0px;}
.flickity-button-icon {
fill: #4A75EA;
}
.carousel-cat .carousel-cell {  height: 240px;}
.flickity-page-dots{bottom: -45px;}



@media (min-width: 1200px) {
    .carousel-cell {width: 20%;}
    .carousel-cat .carousel-cell {  height: 240px;}
}
@media (min-width: 1500px) {
  .carousel-cat .carousel-cell {  height: 280px;}
}
@media (min-width: 1700px) {
  .carousel-cat .carousel-cell {  height: 340px;}
}
@media (max-width: 1200px) {
    .carousel-cat .carousel-cell {  height: 340px;}
}
@media (max-width: 870px) {
   .carousel-cat .carousel-cell {  height: 290px;}
}
@media (max-width: 760px) {
    .carousel-cell {width: 50%;}
    .carousel-cat .carousel-cell {  height: 300px;}
}
@media (max-width: 560px) {
    .carousel-cell {width: 100%;}
    .carousel-cat .carousel-cell {  height: 380px;}
}
@media (max-width: 400px) {
  .carousel-cell {width: 100%;}
  .carousel-cat .carousel-cell {  height: 300px;}
}