﻿/*!
* chiefSlider
*   site: https://itchief.ru/javascript/slider
*   github: https://github.com/itchief/ui-components
*
* Copyright 2018-2021 Alexander Maltsev
* Licensed under MIT (https://github.com/itchief/ui-components/blob/master/LICENSE)
*/



.slider3 {

  position: relative;

}


.slider__container {

  overflow: hidden;

}


.slider__wrapper {

  /*overflow: hidden;*/

}

.slider__items {

  display: flex;

  transition: transform 0.5s ease;

}


.slider_disable-transition {
  transition: none;
}


.slider__item {
  flex: 0 0 100%;
  max-width: 100%;
  user-select: none;
}



/* кнопки влево и вправо */



.slider__control {

  position: absolute;

  top: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 40px;

  color: #fff;

  text-align: center;

  height: 50px;

  transform: translateY(-50%);

  background: rgba(0, 0, 0, 0.2);

}

@media screen and (orientation: portrait) {

.slider__control {

  height: 100px;
  width: 80px;
}

}

.slider__control_hide {

  display: none;

}


.slider__control[data-slide='prev'] {

  left: 0;

}


.slider__control[data-slide='next'] {

  right: 0;

}


.slider__control:hover,
.slider__control:focus {

  color: #fff;

  text-decoration: none;

  outline: 0;

  background: rgba(0, 0, 0, 0.3);

}


.slider__control::before {

  content: '';

  display: inline-block;

  width: 40px;

  height: 50px;

  background: transparent no-repeat center center;

  background-size: 100% 100%;

}


@media screen and (orientation: portrait) {


.slider__control::before {

  width: 80px;

  height: 100px;
}

}
.slider__control[data-slide='prev']::before {

    background-image: url(../images/left.png);
}


.slider__control[data-slide='next']::before {

    background-image: url(../images/right.png);}



/* индикаторы */



.slider__indicators {

  position: absolute;

  right: 0;

  bottom: 0;

  left: 0;

  z-index: 15;

  display: flex;

  justify-content: center;

  padding-left: 0;

  margin-right: 15%;

  margin-left: 15%;

  list-style: none;

  margin-top: 0;

  margin-bottom: 0;

}


.slider__indicators li {

  box-sizing: content-box;

  flex: 0 1 auto;

  width: 30px;

  height: 5px;

  margin-right: 3px;
  margin-left: 3px;

  text-indent: -999px;
  cursor: pointer;

  background-color: rgba(255, 255, 255, 0.5);

  background-clip: padding-box;

  border-top: 15px solid transparent;

  border-bottom: 15px solid transparent;

}


.slider__indicators li.active {

  background-color: rgba(255, 255, 255, 0.9);

}







.slider__wrapper {

      overflow: hidden;

      width: 100%;

    }

    
.slider__items {

      width: 100%;

    }

    
.slider__item {

      flex: 0 0 33.33333%;

      max-width: 33.33333%;
      display: flex;

      justify-content: center;

      align-items: center;

      color: rgba(255, 255, 255, 0.8);

    }

    

@media screen and (orientation: portrait) {
    .slider__item {

      flex: 0 0 50%;

      max-width: 50%;
    }

    }
@media screen and (orientation: landscape) and (min-width: 1100px){
    .slider__item {

      max-width: 25%;
}
}
@media screen and (orientation: landscape) and (min-width: 1600px){
    .slider__item {

      max-width: 20%;
}
}

@media screen and (orientation: landscape) and (min-width: 1900px){
    .slider__item {

      max-width: 16.66%;
}
}