/**
   Файл:    <шаблон>/css/main/main.css
   Раздел:  Стили содержания главной страницы
   Автор:   BVP
   -----------------------------------------------------------
 */

/*  Заголовок и предисловие */
#main-content .m-content {
    margin:     5% 10% 2%;
    text-align: center;
}
#main-content h2 {
    margin-bottom: 3%;
}

/*  Структура блока инфраструктуры */
#main-infra {
    padding: 2.5% 0 5%;
}

/* слайдер */
#slider-div {
   display:    block;
   position:   relative;
   text-align: center;
}
#slick-slider {
    width:      860px;
    margin:     0 auto;
    z-index:    1;
}
#slick-slider > div .hsl {
   cursor: pointer;
}
#slick-slider .slide {
    background-size: cover;
}

/* навигационные иконки (стрелки) слайдера */
.slick-arrow {
    position: absolute;
    top:      0;
    bottom:   0;
    width:    15%;
    height:   700px;
    cursor:   pointer;
    z-index:  15;
    -webkit-transition: height ease-in-out .3s;
    -moz-transition:    height ease-in-out .3s;
    -o-transition:      height ease-in-out .3s;
    transition:         height ease-in-out .3s;    
}
#slar-prev.slick-arrow {
    left: -10%;
}
#slar-next.slick-arrow {
    right: -10%;
}
.slar-circle {
    position:      absolute;
    display:       inline-block;
    top:           50%;
    width:         40px;
    height:        40px;
    border-radius: 100px;
    background-color:   rgba(232,232,232,1);  /* #e8e8e8 */
    -webkit-transition: background-color ease-in-out .2s,border-color ease-in-out .2s;
    -moz-transition:    background-color ease-in-out .2s,border-color ease-in-out .2s;
    -o-transition:      background-color ease-in-out .2s,border-color ease-in-out .2s;
    transition:         background-color ease-in-out .2s,border-color ease-in-out .2s;
    -moz-transform:     translateY(-50%);
    -ms-transform:      translateY(-50%);
    -webkit-transform:  translateY(-50%);
    -o-transform:       translateY(-50%);
    transform:          translateY(-50%);
}
#slar-prev .slar-circle {
    left: 30px;
}
#slar-next .slar-circle {
    right: 30px;
}
.slar-arrow {
    position: absolute;
    top:      50%;
    left:     50%;
    width:    9px;
}
#slar-prev .slar-arrow {
    -webkit-transform: translate(-55%,-50%) rotate(180deg);
    -moz-transform:    translate(-55%,-50%) rotate(180deg);
    -o-transform:      translate(-55%,-50%) rotate(180deg);
    transform:         translate(-55%,-50%) rotate(180deg);
}
#slar-next .slar-arrow {
    -webkit-transform: translate(-45%,-50%);
    -moz-transform:    translate(-45%,-50%);
    -o-transform:      translate(-45%,-50%);
    transform:         translate(-45%,-50%);
}

/* навигационные иконки (dots) слайдера */
#slick-dots {
}
#slick-dots ul {
    position:   absolute;
    display:    block;
    width:      100%;
    bottom:     -50px;
    margin:     0;
    padding:    0;
    list-style: outside none none;
    text-align: center;
}
#slick-dots li {
    cursor:   pointer;
    display:  inline-block;
    position: relative;
    padding:  10px;
}
#slick-dots li:before {
    display: none;
}
#slick-dots li button {
    background-color: #c7c7c7;
    width:  8px;
    height: 8px;
    border: none;
    border-radius: 100px;
    -webkit-transition: all ease-in-out .2s;
    -moz-transition:    all ease-in-out .2s;
    -o-transition:      all ease-in-out .2s;
    transition:         all ease-in-out .2s;
}
#slick-dots li.slick-active button {
    background-color: #222;
}

/* цветовая палитра */

.slick-arrow {
    opacity: .8;
}
.slide-block .sb-small-caption {
    color: #666;
}


@media only screen and (max-width : 900px)
{
    #main-content .m-content {
        margin: 5% 5% 2%;
    }
    #main-infra {
        padding: 4% 0 6%;
    }
    #slar-prev .slar-circle {
        left: 15%;
    }
    #slar-next .slar-circle {
        right: 15%;
    }
}

@media only screen and (max-width : 800px)
{
    #main-content .m-content {
        margin: 5% 2% 2%;
    }
    #main-infra {
        padding: 6% 0 8%;
    }
    #slar-prev .slar-circle {
        left: 12%;
    }
    #slar-next .slar-circle {
        right: 12%;
    }
}

@media only screen and (max-width : 650px)
{
    #main-content .m-content {
        margin: 6% 0 2%;
    }
    #main-infra {
        padding: 8% 0;
    }

    /*  Убираем стрелки */
    #slar-prev,
    #slar-next {
        display: none !important;
    }
    #slick-dots ul {
        bottom: -40px;
    }
}

@media only screen and (max-width : 450px)
{
    #main-infra {
        padding: 10% 0;
    }
}

@media only screen and (max-width : 360px)
{
    #main-infra {
        padding: 12% 0;
    }
}