/*----------------------------------------*/
/*  03. SLIDER CSS
/*----------------------------------------*/

.slider{
    &__area{
        & .slick-dots{
            position: absolute;
            bottom: 165px;
            left: 50%;
            z-index: 1;
            @include transform(translateX(-50%));
            & li{
                display: inline-block;
                & button{
                    font-size: 0;
                    width: 13px;
                    height: 13px;
                    background: #c2c2c2;
                    @include border-radius(50%);
                    margin: 0 7px;
                    border: 2px solid transparent;
                }
                &.slick-active{
                    & button{
                        border-color: #bc8247;
                        background: $white;
                    }
                }
            }
        }
        &-2{
            & .slick-dots{
                bottom: 40px;
            }
        }
        &-3{
            & .slick-dots{
                bottom: 40px;
                & li{
                    &.slick-active{
                        & button{
                            border-color: #bc8247;
                            background: transparent;
                        }
                    }
                }
            }
        }
        &-4{
            & .slick-dots{
                bottom: 40px;
            }   
        }
    }
    &__height{
        height: 925px;
        @media #{$laptop}{
            height: 750px;
        }
        @media #{$lg}{
            height: 700px;
        }
        @media #{$md}{
            height: 650px;
        }
        @media #{$sm}{
            height: 600px;
        }
        @media #{$xs}{
            height: 550px;
        }
        &-2{
            height: 830px;
            @media #{$laptop}{
                height: 750px;
            }
            @media #{$lg}{
                height: 700px;
            }
            @media #{$md}{
                height: 650px;
            }
            @media #{$sm}{
                height: 600px;
            }
            @media #{$xs}{
                height: 550px;
            }
        }
        &-4{
            height: 535px;
        }
        &-5{
            height: 950px;
            @media #{$laptop}{
                height: 900px;
            }
            @media #{$lg}{
                height: 850px;
            }
            @media #{$md}{
                height: 700px;
            }
            @media #{$sm}{
                height: 750px;
            }
            @media #{$xs}{
                height: 700px;
            }
        }
    }
    &__content{
        & h2{
            font-weight: 600;
            line-height: 1.2;
            color: $black-2;
            margin-bottom: 14px;
            @media #{$xs}{
                font-size: 30px;
            }
        }
        & p{
            margin-bottom: 45px;
            color: $black-2;
        }
        &-3{
            & p{
                padding-right: 105px;
                @media #{$laptop}{
                    padding-right: 0;
                }
                @media #{$md}{
                    padding-right: 40px;
                }
                @media #{$sm}{
                    padding-right: 20px;
                }
                @media #{$xs}{
                    padding-right: 0px;
                }
            }
        }
        &-black{
            h2{
                color: $white;
            }
            & p{
                color: #fff;
            }
        }
        &-4{
            padding-left: 95px;
            @media #{$lg}{
                padding-left: 60px;
            }
            @media #{$md}{
                padding-left: 40px;
            }
            @media #{$sm}{
                padding-left: 30px;
            }
            @media #{$xs}{
                padding-left: 20px;
            }
        }
    }
}

.single-slider{
    @include background();
    @media #{$md}{
        background-position: left;
    }
    @media #{$sm}{
        background-position: left;
    }
    @media #{$xs}{
        background-position: left;
    }
}