/**
   Файл:    <шаблон>/css/services/ritual-lift.css
   Раздел:  Стили страницы "Ритуальный лифт"
   Автор:   BVP
   -----------------------------------------------------------
 */

/* слайдер */
#slider-div {
   display:    block;
   position:   relative;
   text-align: center;
   padding-bottom: 45px;
}
#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;
}

/*  Стоимость */
#lift-price > div {
    margin:        2% auto ;
    padding:       1% 10% 3%;
    text-align:    center;
    border-top:    solid 1px;
    border-bottom: solid 1px;
}
#price-content {
    display: table;
    width:   100%;
}
.price-tariff {
    display: table-row;
}
.price-tariff > * {
    display: table-cell;
    padding: 30px 0;
    border-bottom: solid 1px;
}
.price-tariff:last-of-type > * {
    border-bottom: none;
}
.tariff-name {
    padding-right: 8%;
    font-size:     1.2em;
    font-weight:   bold;
    text-align:    left;
    -webkit-hyphens: auto;
    -moz-hyphens:    auto;
    -ms-hyphens:     auto;
    hyphens:         auto;
    -ms-word-break:  break-all;
    word-break:      break-all;
    word-break:      break-word;
}
.tariff-cost {
    text-align: right;
}
.tariff-price {
    font-size:   1.3em;
    font-weight: bold;
}


@media only screen and (max-width : 1100px)
{
    #lift-price > div {
        margin:  2% auto 3%;
        padding: 2% 10% 4%;
    }
    .price-tariff > * {
        padding: 25px 0;
    }
    .tariff-name {
        padding-right: 6%;
    }
}

@media only screen and (max-width : 900px)
{
    #slar-prev .slar-circle {
        left: 15%;
    }
    #slar-next .slar-circle {
        right: 15%;
    }
    #lift-price > div {
        margin-bottom: 4%;
        padding: 2% 8% 4%;
    }
    .price-tariff > * {
        padding: 22px 0;
    }
    .tariff-name {
        padding-right: 5%;
    }
}

@media only screen and (max-width : 800px)
{
    #slar-prev .slar-circle {
        left: 12%;
    }
    #slar-next .slar-circle {
        right: 12%;
    }
}

@media only screen and (max-width : 700px)
{
    #lift-price > div {
        margin-bottom: 6%;
        padding: 2% 6% 4%;
    }
    .price-tariff > * {
        padding: 20px 0;
    }
    .tariff-name {
        padding-right: 4%;
    }
}

@media only screen and (max-width : 650px)
{
    /*  Убираем стрелки */
    #slar-prev,
    #slar-next {
        display: none !important;
    }
    #slick-dots ul {
        bottom: -40px;
    }
}

@media only screen and (max-width : 600px)
{
    #lift-price > div {
        margin-bottom: 8%;
        padding: 2% 4% 4%;
    }
    .price-tariff > * {
        padding: 18px 0;
    }
    .tariff-name {
        padding-right: 3%;
    }
}


@media only screen and (max-width : 450px)
{
    #lift-price > div {
        margin-bottom: 10%;
        padding: 2% 3% 4%;
    }
    .price-tariff > * {
        padding: 16px 0;
    }
    .tariff-name {
        padding-right: 2%;
    }
    .tariff-name {
        font-size: 1.1em;
    }
    .tariff-price {
        font-size: 1.2em;
    }
}


@media only screen and (max-width : 360px)
{
    .tariff-name {
        font-size: 1em;
    }
    .tariff-price {
        font-size: 1.1em;
    }
}