/*--------------------------------------------------------------
12. Featured slider
--------------------------------------------------------------*/

#content {
    .hero{
        padding-top:0;
        // max-width: 1120px;
        margin:0 auto;
    }
    .main-slider{
        overflow: hidden;
        .bg-image{
            @include cover(center);
            position: relative;
            &.min-height{
                min-height: 700px;
            }
        }
        .caption{
            bottom:0;
            height: auto;
            left:0;
            right:0;
            top:0;
            position: absolute;
            z-index: 999;
            
            .slider-caption{
                @include display-flex(flex);
                @include justify-content-center;
                @include flex-direction-column(column);
                max-width: 800px;
                width:100%;
                margin:0 auto;
                span{
                    &.herocat{
                        position: absolute;
                        top: -30px;
                        left: 0;
                        right: 0;
                    }
                }
                .caption-content{
                    padding:2rem;
                    position: relative;
                    background-color: rgba($white-color,.9);
                    h2 {
                        font-size: 2rem;
                        line-height: 1.2;
                        font-weight: 700;
                        margin:1rem 0;
                        @media #{$breakpoint-ls}{
                            font-size: 1.5rem;
                        }
                    }
                    .text{
                      margin: 25px auto 35px auto;
                    }
                    .readMore{
                        text-align: center;
                        a.common-button{
                            @include justify-content-center;
                        }
                    }
                  }
                
                h6 {
                    font-style: italic;
                    letter-spacing: 1px;
                    text-transform: uppercase;
                    margin-bottom: 1.5rem;
                }
                p {
                    font-size: 1rem;
                    font-weight: 500;
                    color:$white-color;
                    margin-top:1rem;
                    @include clear;
                }
                .buttons{
                    margin-top:1.5rem;
                    a{
                        &.is-clear{
                            color:$white-color;
                            margin-left: 1rem;
                            font-size: 1.125rem;
                        }

                    }
                }
                &.is-left {
                    @include align-items-start;
                }
                &.is-center {
                    @include align-items-center;
                    text-align:center;
                }
                &.is-right {
                    @include align-items-end;
                   text-align: right;
                }
                &.min-height{
                    min-height: 700px;
                }
            }
            
            
            
        }
        /*Slider cycle next / previous*/
        .slick-prev,.slick-next{
            background:$white-color;
            visibility: hidden;
            &:hover{
                background-color: $pink-color;
                border-color: $pink-color;
                &::before{
                    color:$white-color;
                }
            }
        }
        .slick-prev{
            left:-2%;
        }
        .slick-next{
            right:-2%;
        }
        &.overlay-enabled{
            .bg-image{
                &::after{
                    content: "";
                    display: block;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    width: 100%;
                    z-index: 888;
                    background-color:rgba($heading-color,.7);
                }
                h6 {
                    color: $white-color;
                }
                h2 a {
                    color: $white-color;
                }
            }
        }
        &:hover{
            .slick-prev,
            .slick-next{
                opacity: 1;
                visibility: visible;
            }
            .slick-prev {
                left:2%;
            }
            .slick-next {
                right:2%;
            }
        }
    }
}
// body{
//     &.home-2{
//         .hero{
//             max-width: 1118px;

//         }
//     }
// }
.slick-prev,.slick-next{
    width: 55px;
    z-index: 999;
    height: 55px;
    @include display-flex(flex);
    @include justify-content-center;
    @include align-items-center;
    @include flex-direction-column(column);
    z-index: 1000;
    line-height: 2.2;
    background:$white-color;
    @include transition(all .2s ease-in-out 0s);
    @include radius(100%);
    border:1.5px solid $grey-light;
    &::before{
        font-family: "Font Awesome 5 Pro";
        opacity: .75;
        color: $body-color;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    &:hover{
        background-color: $pink-color;
        border-color: $pink-color;
        &::before{
            color:$white-color;
        }
    }
}
.slick-prev{
    left:-2%;
    &::before{
        font-family: "Font Awesome 5 Free";
        content:'\f104';
        font-weight: 900;
    }
}
.slick-next{
    right:-2%;
    &::before{
        font-family: "Font Awesome 5 Free";
        content:'\f105';
        font-weight: 900;
    }
}

.popular-slider{
    .slick-prev,.slick-next{
        width:40px;
        height: 40px;
        opacity: 0;
        visibility: hidden;
    }
    &:hover{
        .slick-prev,.slick-next{
            opacity: 1;
            visibility: visible;
        }
    }
}