@green: #04dbb0;
html, body {
    scroll-behavior: smooth;
}
.general-header  {
    background-color: white;
}
/* slider */
    .slick-prev:before, .slick-next:before {
        font-family: 'FontAwesome';
        font-size: 37px;
        color: rgba(0,0,0,0.5);
    }
    .slick-prev {
        z-index: 1;
        left: -35px;
        &::before {
            content: '\f053';
        }
    }
    .slick-next {
        right: -26px;
        &::before {
            content: '\f054';
        }
    }
    .slick-dots {
        bottom: -60px;
        li {
            position: relative;
            width: 26px;
            height: 26px;
            cursor: pointer;
            margin-left: 5px;
            margin-bottom: 12px;
            button {
                font-size: 0;
                line-height: 0;
                display: block;
                cursor: pointer;
                color: transparent;
                border: 0;
                outline: none;
                background: transparent;
                &:hover, &:focus {
                    outline: none;
                }
                &::before {
                    font-family: 'FontAwesome';
                    font-size: 26px;
                    line-height: 26px;

                    position: absolute;
                    top: 0;
                    left: 0;

                    width: 20px;
                    height: 20px;

                    content: '\f10c';
                    text-align: center;
                    color: white;
                    opacity: 1;

                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                }
            }
            &.slick-active button:before {
                content: '\f111';
                color: white;
                opacity: 1;
            }
        }
    }
    @media only screen and (max-width:767px) {
        .slick-dots li {
            width: 16px;
            height: 16px;
            button {
                &::before {
                    font-size: 16px;
                    line-height: 16px;
                }
            }
        }
    }
/* banner */
    #banners {
        .slick-track {
/*            height: 500px;*/
        }
        .slick-prev:before, .slick-next:before {
            font-size: 50px;
            color: rgba(255,255,255,0.25);
        }
        .slick-prev {
            left: 30px;
        }
        .slick-next {
            right: 37px;
        }
        .slick-dots {
            bottom: 0;
        }
        .slick-dotted.slick-slider {
            margin-bottom: 0;
        }
        .banner {
            .title {
                font-size: 2.5em;
                color: white;
            }
            .content {
                font-size: 1.5em;
                color: white;
            }
            .btn {
                width: max-content;
                padding: 32px;
                &:hover {
                    background-color: white;
                }
            }
        }
    }
    @media only screen and (min-width:1200px) {
        #banners .banner {
            .container-wrapper {
                padding-right: 600px;
            }
        }
    }
    @media only screen and (max-width:1199px) {
        #banners {
            .slick-track {
                height: 390px;
            }
            .banner {
                .title {
                    font-size: 2em;
                }
                .content {
                    font-size: 1.2em;
                }
                .btn {
                    padding: 16px;
                }
            }
        }
    }
    @media only screen and (max-width:991px) {
        #banners .banner {
            .title {
                font-size: 1.5em;
            }
            .content {
                font-size: 1.1em;
            }
        }
    }
    @media only screen and (max-width:767px) {
        #banners {
            .slick-track {
                height: 300px;
            }
            .banner {
                .title, .content p {
                    margin-bottom: 0.5rem;
                }
                .title {
                    font-size: 1.3em;
                }
                .content {
                    font-size: 1em;
                }
                .btn {
                    padding: 4px 16px;
                }
            }
        }
    }
    
.paginate-clean {
    margin-bottom: 40px;
    .left-options, .right-options {
        display: none;
    }
    table {
        width: 100%;
    }
    .links {
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        span, a {
            margin-left: 8px;
            margin-right: 8px;
        }
        .prevLink, .nextLink {
            &::after {
                font-family: 'FontAwesome';
                font-weight: 700;
            }
        }
        .prevLink::after {
            content: '\f137';
        }
        .nextLink::after {
            content: '\f138';
        }
    }
}
/* post */
#home {
    .post-image {
        img {
            height: 300px;
            object-fit: cover;
        }
        &:hover img {
            cursor: unset;
        }
    }
    .post-link .btn {
        margin-bottom: 1rem;
        text-transform: uppercase;
        font-size: 18px;
        background-color: @green;
        font-weight:bold;
    }
}

/* side bar */
.swiper-slide {
    height: 180px;
    img {
        height: 180px;
        max-width: 100%;
        object-fit: cover;
    }
    /*.slide-content {
        top: 50%;
        transform: translateY(-50%);
    }*/
}
@dot-size: 16px;
.recent-wrapper {
    .slick-dots {
        bottom: 0;
        li {
            margin-bottom: 0;
            button::before {
                font-size: @dot-size;
                line-height: @dot-size;
                width: @dot-size;
                height: @dot-size;
            }
        }
    }
}
@media only screen and (max-width:991px) {
    #banners .slick-track {
        height: 240px;
    }
    .general-banner .featured-post-image {
        height: 100%;
        img {
            object-fit: cover;
            height: 100%;
        }
    }
}
@media only screen and (max-width:450px) {
    h1.logo {
        max-width: 200px;
    }
    #banners .slick-track {
        height: 100px;
    }
    .banner-style-two-container .featured-content-holder {
        bottom: inherit;
    }
    .slick-dots li {
        margin-bottom: 3px;
    }
    .slick-prev, .slick-next {
        display: none !important;
    }
}

/* Recent posts on side bar */
.widget-recent-posts .widget-recent-posts .slide-content {
  top: 3%;
  bottom: unset;
}