/*
 * ****************************************
 *>>> | 00. header |
 * ****************************************/

.header--top
    background-color: #181818
    color: #fff
    padding: 10px
    line-height: 30px

    ul
        margin: 0
        list-style: none

        li
            display: inline-block

            a
                color: #fff

                @extend .trns

                &:hover
                    @extend .c1
        &.header--left
            +mq(mobile)
                text-align: center
        &.header--left li a
            font-weight: 300
            margin-right: 30px
            &:last-child
                margin-right: 0
            +mq(mobile)
                margin-right: 5px
                margin-left: 5px
                font-size: 10px

        &.header--right
            text-align: right
            margin-right: -7px
            +mq(mobile)
                text-align: center

        &.header--right li a
            font-size: 14px
            padding: 0 7px
            line-height: 30px

.logo--area
    padding: 15px 0

.logo--column
    height: 90px
    @extend .flex_center
    +mq(mobile)
        height: auto
    a
        display: inline-block
        text-align: center
        img,
        span
            display: inline-block

.ads--column--1
    text-align: right
    height: 90px
    +mq(mobile)
        height: auto
        margin-top: 30px

.header--bottom
    border-top: 1px solid #efefef
    padding: 15px 0

.st--search--box
    text-align: right

    label
        margin: 0
        display: block
        position: relative

        input
            border: 1px solid #efefef
            border-radius: 30px
            overflow: hidden
            width: 100%
            height: 40px
            font-size: 11px
            font-weight: 300
            text-indent: 25px

            @extend .trns

            &:focus
                @extend .c1-bo

                & + button
                    @extend .c1

        button
            border: none
            background-color: transparent
            position: absolute
            height: 40px
            padding: 0 10px
            right: 10px
            font-size: 16px
            font-weight: 600
            top: 0

// st--header--2

.st--header--2
    padding: 15px 0

    .st--header--row > div
        @extend .flex_center

        height: 50px

        img
            max-height: 100%

        .st--haeder--icon
            font-size: 22px
            padding: 0 15px

.st--header--3
    position: absolute
    top: 0
    left: 0
    width: 100%
    z-index: 2
    margin-top: 15px
    +mq(maxTab)
        position: static
    +mq(mobile)
        position: static
        text-align: center
    .header--bottom
        border: none
    .container
        background-color: #fff
        padding: 25px 50px
        border-radius: 50px
        +mq(maxTab)
            padding: 0
            border-radius: 0                          
            div.menu--column
                display: none
        .menu--column
            text-align: right

            .main_menu
                text-align: left
                display: inline-block

                > ul > li > a
                    line-height: 35px

// header-4

.st--header-4
    text-align: right

    nav
        display: inline-block
        text-align: left
        +mq(maxTab)
            display: none

    .st--search--icon-wrap
        position: relative
        display: inline-block

        .st--search--icon--2
            cursor: pointer
            padding: 0 5px

            @extend .c4

            @extend .trns

            &:hover
                @extend .c1

        .st--search--close--2
            cursor: pointer
            font-size: 20px
            padding: 0 4px
            position: absolute
            right: -25px
            top: 50%
            transform: translateY(-50%)

            &:hover
                color: #ff0000

    .st--search--box--2
        position: absolute
        right: 0
        top: 50%
        transform: translateY(-50%)
        transition: .4s
        opacity: 0
        visibility: hidden

        &.active
            opacity: 1
            visibility: visible

        .st--inner
            width: 350px
            position: relative

            input
                width: 100%
                border: 1px solid
                height: 40px
                border-radius: 25px
                text-indent: 30px

                @extend .c5-bo

            button
                position: absolute
                right: 0
                top: 0
                height: 40px
                border: none
                background: transparent
                padding: 0 20px

                @extend .c5

    .menu--column
        padding: 5px 0

// header-5

.st--header-5
    text-align: right
    position: absolute
    top: 0
    left: 0
    width: 100%
    z-index: 2
    border-bottom: 1px solid rgba(255, 255, 255, 0.3)
    +mq(maxTab)
        position: static
        background-color: #222
    nav
        display: inline-block
        text-align: left
        +mq(maxTab)
            display: none
        > ul
            > li
                > a
                    color: #ffffff
                    opacity: .9

                &:hover > a
                    color: #ffffff

    .st--search--icon-wrap
        position: relative
        display: inline-block

        .st--search--icon--2
            cursor: pointer
            padding: 0 5px
            color: #ffffff
            opacity: .9

            @extend .trns

            &:hover
                @extend .c1

        .st--search--close--2
            cursor: pointer
            font-size: 20px
            padding: 0 4px
            position: absolute
            right: -25px
            top: 50%
            transform: translateY(-50%)

            &:hover
                color: #ff0000

    .st--search--box--2
        position: absolute
        right: 0
        top: 50%
        transform: translateY(-50%)
        transition: .4s
        opacity: 0
        visibility: hidden

        &.active
            opacity: 1
            visibility: visible

        .st--inner
            width: 350px
            position: relative

            input
                width: 100%
                border: 1px solid
                height: 40px
                border-radius: 25px
                text-indent: 30px

                @extend .c5-bo

            button
                position: absolute
                right: 0
                top: 0
                height: 40px
                border: none
                background: transparent
                padding: 0 20px

                @extend .c5

    .menu--column
        padding: 5px 0

// header-6    
.news--ticker
    padding: 15px 0
    .st--inner
        overflow: hidden
        .st--tags
            float: left
        .st--header--ticker--wrap
            padding-left: 160px
            ul
                font-size: 13px !important
                font-weight: 300
                font-family: $font !important
                font-weight: 400 !important
                @extend .c4
                li
                    margin-right: 10px
    &.dark--ticker
        background-color: #222222
        ul li
            color: #ffffff
    
// breadcrumb css

.dh--breadcrumb--area
    min-height: 150px
    +flex_center
    position: relative
    z-index: 1
    border-top: 1px solid #efefef
    &::before
        content: ''
        height: 100%
        width: 100%
        background-color: #fff
        position: absolute
        z-index: -1
        opacity: .9
    h4
        font-size: 20px
        margin: 0



/*
 * ****************************************
 *>>> | 00. home--carousel |
 * ****************************************/

.home--carousel--1
    overflow: hidden

    .single--slide
        margin: 0 15px
        +mq(maxTab)
            margin: 0
        &:not(.slick-current) .st--inner
            padding-left: 30px
            padding-right: 30px
            @extend .trns

            h2
                font-size: 14px
                margin-bottom: 0

            .st--meta
                display: none

        &.slick-current
            max-width: 100% !important

        &.prevSlide
            text-align: right

    .slick-arrow
        background-color: transparent
        opacity: .5
        height: 100%
        position: absolute
        left: 0
        top: 0
        z-index: 2
        transform: translateX(-50%)
        cursor: url(../img/icon/slide-arrow-prev.svg), auto
        margin-left: -30px

        &.slick--next
            left: auto
            right: 0
            transform: translateX(50%)
            cursor: url(../img/icon/slide-arrow-next.svg), auto
            margin-left: 0
            margin-right: -30px

.st--slide--arrow--2
    overflow: hidden

    .slick-arrow
        position: absolute

        +top_50

        height: 45px
        width: 45px
        background-color: #fff
        text-align: center
        line-height: 45px
        z-index: 2
        border-radius: 3px

        @extend .c4

        @extend .trns

        cursor: pointer
        margin-left: -45px
        opacity: 0
        visibility: hidden

        &:hover
            @extend .c1

        &.slick--next
            left: auto
            right: 0
            margin-right: -45px

    &:hover
        .slick-arrow
            opacity: 1
            visibility: visible
            margin-left: 0

            &.slick--next
                margin-right: 0

.st--slide--arrow--3
    overflow: hidden

    .slick-arrow
        background: rgba(0, 0, 0, 0.4)
        border-radius: 50%
        color: #fff
        cursor: pointer
        font-size: 20px
        height: 50px
        left: -50px
        position: absolute
        text-align: center
        top: 50%
        width: 50px
        z-index: 2
        transform: translateY(-50%)
        opacity: 0

        @extend .trns

    .slick-arrow i
        line-height: 50px

    .slick-arrow.slick--next
        left: auto
        right: -50px

    &:hover .slick-arrow
        opacity: 1
        left: 50px

        &:hover
            background-color: #ffffff
            color: #000

        &.slick--next
            left: auto
            right: 50px

.st--home--style--1,
.st--home--style--2,
.st--home--style--3
    .single--slide
        height: 530px
        @extend .trns
        box-sizing: border-box
        background-position: center
        background-size: cover
        position: relative
        +mq(tab)
            height: 460px
        +mq(mobile)
            height: 460px
        &.slick-active:first-child
            text-align: right
        .st--inner
            position: absolute
            width: 100%
            height: auto
            bottom: 0
            left: 0
            padding: 120px 70px 30px
            z-index: 1
            +mq(maxTab)
                padding: 120px 20px 30px
            @extend .trns
            @extend .post--overlay--1
            a
                color: #ffffff
                @extend .trns
                &:hover
                    opacity: .7
            h2
                font-size: 28px
                line-height: 35px
                margin: 20px 0
                +mq(tab)
                    font-size: 20px
                    line-height: 28px
                    margin: 15px 0
                +mq(mobile)
                    font-size: 20px
                    line-height: 28px
                    margin: 15px 0
            .st--meta
                @extend .trns

                > div
                    margin-right: 20px

                .st--post--date:before
                    content: '\f337'
                    font-family: $zm
                    margin-right: 9px

                .st--author--info
                    display: inline-block

                    .author--img
                        height: 35px
                        width: 35px
                        overflow: hidden
                        border-radius: 50%

                    .st--author
                        padding-left: 15px
                        padding-top: 4px

.st--home--style--1.st--video--carousel--3
    .single--slide
        height: 400px
        .st--inner h2
            font-size: 18px
            margin-top: 15px
            margin-bottom: 0
    
.home--carousel--8
    .single--slide
        height: 670px
        +mq(maxTab)
            height: 450px

.st--home--carousel--height--2 .single--slide
    height: 480px

.home--carousel--9 .single--slide
    height: 600px
    +mq(maxTab)
        height: 400px
    .st--inner
        width: 1170px
        padding: 120px 15px 60px
        left: 50%
        transform: translateX(-50%)
        +mq(maxTab)
            width: 100%
            padding: 50px 25px 40px

.st--big--block,
.st--small--block
    position: relative
    overflow: hidden
    background-size: cover
    background-position: center

.st--home--style--1 .single--slide .st--small--block .st--inner
    padding-left: 30px
    padding-right: 30px

    @extend .trns

    h2
        font-size: 14px
        margin-bottom: 0
        line-height: 24px
        margin-top: 10px

    .st--meta
        display: none

.st--home--style--2
    .single--slide
        height: 700px
        background-size: cover
        background-position: center
        +mq(maxTab)
            height: 400px
        +mq(mobileSm)
            height: 490px

    .st--center--middle
        position: absolute
        top: 50%
        left: 50%
    .single--slide .st--inner
        background-color: #ffffff
        width: 730px
        padding: 50px
        text-align: center
        position: static
        +mq(mobile)
            padding: 40px 25px
        +mq(mobileSm)
            padding: 20px 15px
        &:after
            display: none
        a
            color: $c4
        .st--tags a
            color: #fff
        h2
            color: $c4
            margin: 0 0 15px
        .st--tags
            margin-top: 20px

    a.st--vdo--btn
        position: static
        transform: translate(0)
        color: #ffffff !important
        margin-bottom: 20px

        &:hover
            background-color: $c2 !important
            opacity: 1 !important

.home--area--4 .single--slide .st--inner
    position: absolute
    left: 50%
    top: auto
    bottom: 50%
    transform: translateX(-50%) translateY(50%)
    +mq(maxTab)
        width: 85%
    


.home--area--4 .container-fluid
    padding-right: 30px
    padding-left: 30px

.st--home--style--3
    .st--single--slide
        height: 750px
        background-size: cover
        background-position: center
        +mq(maxTab)
            height: 430px
        @extend .flex_center

        display: -webkit-box !important
        display: -ms-flexbox !important
        display: flex !important

        .st--inner
            color: #fff
            text-align: center

            h1
                margin: 0 0 15px
                font-size: 46px
                line-height: 54px
                color: #ffffff
                +mq(mobile)
                    font-size: 26px
                    line-height: 36px

            p
                opacity: .8

    .slick-arrow
        position: absolute
        top: 50%
        left: 50%
        color: #ffffff
        font-size: 22px
        z-index: 2
        margin-left: -600px
        transform: translateY(-50%)
        cursor: pointer
        padding: 10px
        +mq(mobile)
            left: 0
            margin-left: 0
        &.slick--next
            margin-left: 0
            margin-right: -600px
            left: auto
            right: 50%
            +mq(mobile)
                right: 0
                margin-right: 0

//.home--carousel--6

.home--carousel--6,
.post--carousel--4
    .st--single--slide
        background-size: cover
        background-position: center

        .st--inner
            height: 550px
            position: relative
            +mq(maxTab)
                height: 400px
            .st--content
                position: absolute
                padding: 30px
                left: 0
                bottom: 0

                @extend .post--overlay--1

                .st--tags a
                    color: #fff

                h5
                    font-size: 14px
                    line-height: 24px

                    a
                        color: #fff
                        opacity: .8

                        &:hover
                            opacity: 1

.post--carousel--4
    margin: 0 -15px
    .st--single--slide
        margin: 0 15px
// st--home--style--4

.st--home--style--4
    .single--slide
        background-size: cover
        background-position: center
        .st--inner--wrap
            position: relative
            height: 800px
            display: table
            width: 100%
            +mq(maxTab)
                height: 430px
            .st--inner
                display: table-cell
                vertical-align: bottom
                padding-bottom: 170px
                +mq(maxTab)
                    padding-bottom: 50px    
                a
                    color: #ffffff

                    @extend .trns

                    &:hover
                        opacity: .7

                h2
                    font-size: 28px
                    line-height: 35px
                    margin: 20px 0

                .st--meta
                    @extend .trns

                    > div
                        margin-right: 20px

                    .st--post--date:before
                        content: '\f337'
                        font-family: $zm
                        margin-right: 9px

                    .st--author--info
                        display: inline-block

                        .author--img
                            height: 35px
                            width: 35px
                            overflow: hidden
                            border-radius: 50%

                        .st--author
                            padding-left: 15px
                            padding-top: 4px

                .st--home--btn
                    margin-top: 20px

    .slick-dots
        position: absolute
        left: 50%
        bottom: 70px
        transform: translateX(-590px)

        li
            display: inline-block
            height: 12px
            width: 12px
            background-color: #ffffff
            border-radius: 50%
            margin: 4px
            cursor: pointer

            &.slick-active
                @extend .c1-bg

                cursor: default

            > *
                display: none

/*
 * ****************************************
 *>>> | 00. Carousel |
 * ****************************************/

// st--cat--carousel--1

.st--cat--carousel--1
    overflow: hidden
    .slick-list
        margin: 0 -15px
    .st--single
        position: relative
        margin: 0 15px
        .st--inner
            @extend .post--overlay--2
            display: block
            &:after
                z-index: 2
            img
                position: relative
                z-index: 1
                width: 100%
            .st--tags
                position: absolute
                +left_50
                bottom: 30px
                z-index: 3

.st--arrow--style-3
    position: relative
    overflow: hidden
    .slick-arrow
        position: absolute
        top: 0
        height: 100%
        width: 60px
        background: rgba(0, 0, 0, 0.4)
        left: 0
        position: absolute
        color: #fff
        font-size: 40px
        z-index: 4
        cursor: pointer
        margin-left: -60px
        opacity: 0
        visibility: hidden
        @extend .trns
        i
            position: absolute
            top: 50%
            width: 60px
            text-align: center
            transform: translateY(-50%)
        &.slick--next
            left: auto
            right: 0
            margin-left: 0
            margin-right: -60px
    &:hover
        .slick-arrow
            margin-left: 0
            opacity: 1
            visibility: visible
            @extend .trns
            &.slick--next
                margin-right: 0
.st--cat--carousel--1 .st--tags span
    white-space: nowrap
// st post carousel 1

.st--post--column
    +mq(maxTab)
        margin-bottom: 30px
.st--carousel--single--post .st--post--img
    height: 230px
    width: 100%
    background-size: cover
    background-position: center
    +mq(maxTab)
        height: 140px
.st--carousel--single--post
    margin: 15px
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.15)
    border-radius: 6px
    overflow: hidden

    .st--post--content
        padding: 25px

        a
            color: #8b8b8b
            font-size: 13px

            &:hover
                @extend .c1

        h5
            font-size: 16px
            margin: 10px 0

.st--post--carousel--1
    &.mt--90
        margin-top: -120px
        +mq(maxTab)
            margin-top: 15px

    .slick-list
        padding: 0 !important

    .slick-active:not(.slick-center)
        cursor: url(../img/icon/slide-arrow-prev.svg), auto

    .slick-center + .slick-active
        cursor: url(../img/icon/slide-arrow-next.svg), auto

// st--feature--carousel--1

.st--feature--carousel--1
    .slick-active:not(.slick-center)
        cursor: url(../img/icon/slide-arrow-prev.svg), auto

    .slick-center + .slick-active
        cursor: url(../img/icon/slide-arrow-next.svg), auto

    .slick-list
        padding: 0 !important
        margin: -13px 0

    .slick-current .st--left
        position: relative

        &:before
            content: ''
            position: absolute
            z-index: 3
            background: transparent
            border-width: 10px
            border-color: transparent white white transparent
            border-style: solid
            transform: rotate(-45deg) translateY(-50%)
            top: 50%
            left: -4px

    .st--single--slide
        margin: 13px 0

        .st--left
            .st--img
                height: 140px
                width: 140px
                background-size: cover
                background-position: center
                background-color: gainsboro

        .st--right
            padding-left: 20px
            height: 140px

            @extend .flex_center

            .st--category a
                font-size: 13px
                color: #181818

                &:hover
                    @extend .c1

            h5
                font-size: 14px
                line-height: 20px
                margin: 5px 0

            .st--date
                font-size: 13px
                color: #8b8b8b

                &:before
                    content: '\f337'
                    font-family: $zm
                    margin-right: 5px

                &:hover
                    @extend .c1

// st--video--carousel--1
.st--video--carousel--1
    margin: 0 -15px
.st--single--video--1
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.15)
    margin: 15px
    border-radius: 5px
    overflow: hidden
    .st--video--bg
        position: relative
        height: 245px
        width: 100%
        background-size: cover
        background-position: center
    .st--content
        padding: 15px
        text-align: center
        @extend .trns
        a
            display: block
            line-height: 20px
            &.st--category
                font-size: 12px
                @extend .c1
                @extend .trns
            &.st--title
                @extend .c4
                @extend .trns
                font-family: $font2
                font-weight: 600
                margin-top: 5px
    &:hover .st--content
        @extend .c1-bg
        a.st--category,
        a.st--title
            color: #fff
.st--video--carousel--2,
.st--video--carousel--3
    .st--single--video--2
        position: relative
        height: 400px
        background-color: #eeeeee

.st--single--section
    margin-bottom: 60px


/*
 * ****************************************
 *>>> | 00. st--post--box |
 * ****************************************/

// st--single--post

.st--single--post
    margin-bottom: 50px
    +mq(mobileLg)
        width: 50%
    .st--inner
        @extend .shadowLg
        border-radius: 5px
        .st--post--top
            .st--post--img
                border-radius: 5px
                overflow: hidden
        .st--post--content
            padding: 45px 25px
            h4
                margin: 0 0 10px
                a
                    @extend .c4
                    &:hover
                        @extend .c1
            .st--post--meta
                margin-bottom: 20px
                > span
                    a
                        @extend .c5
                        &:hover
                            @extend .c1
                    &:not(:last-child):after
                        content: '|'
                        @extend .c5
                        margin: 0 2px
            .st--button
                margin-top: 20px
    &.st--style--2
        margin-bottom: 0
        .st--inner
            box-shadow: none
            .st--post--content
                padding: 35px 25px 30px
                .st--post--meta
                    margin-bottom: 15px
                .st--button
                    margin-top: 5px
.st--post--carousel--3
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07)
    border-radius: 5px
    

// st--single--post--2

.st--single--post--2
    margin-bottom: 50px
    +mq(mobile)
        max-width: 400px
        margin-right: auto
        margin-left: auto
    
    .st--inner
        position: relative
        h4
            margin: 0 0 10px
            a
                @extend .c4
                &:hover
                    @extend .c1
        .st--post--meta
            margin-bottom: 10px
            > span
                a
                    @extend .c5
                    &:hover
                        @extend .c1
                &:not(:last-child):after
                    content: '|'
                    @extend .c5
                    margin: 0 2px
        .st--button
            margin-top: 5px
        &.st--content--box
            border-radius: 5px
            box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.1)
            margin-left: -30px
            padding: 30px 45px
    &.no--shadow .st--content--box
        box-shadow: 0 0 0 #ffffff

// st--single--post--3

.st--single--post--3
    margin-bottom: 30px
    .st--inner
        box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.15)
        position: relative
        border-radius: 5px
        overflow: hidden
        .st--content
            position: absolute
            left: 0
            bottom: 0
            z-index: 2
            width: 100%
            padding: 60px 30px 30px
            @extend .post--overlay--1
            &:after
                opacity: .9
            h5
                margin: 15px 0 0
                line-height: 24px
                a:hover
                    opacity: .9
            a
                color: #fff

// st--single--post--4

.st--single--post--4
    margin-bottom: 30px
    .st--inner
        box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.15)
        .st--content
            padding: 30px
            h5
                margin: 15px 0 0
                line-height: 24px
                a
                    @extend .c4
                    &:hover
                        @extend .c1
.st--post--block--with--small
    .st--single--post--4
        .st--inner
            box-shadow: none
            .st--content
                padding: 30px 20px 0 0
                h5
                    margin: 15px 0 15px
                    font-size: 18px
            
// st--single--post--5
.st--single--post--5
    margin-bottom: 70px
    .st--single--image
        position: relative
    .st--post--content
        padding: 30px
        text-align: center
        box-shadow: 0 1px 15px rgba(0,0,0,.1)
        border-radius: 5px
        .st--meta
            display: inline-block
            margin-bottom: 15px
            a
                @extend .c5
                &:hover
                    @extend .c1
            > *
                display: inline-block
                &:not(:first-child)
                    &:before
                        content: '|'
                        padding-left: 10px
                        padding-right: 10px
                        @extend .c5
        h4
            margin: 25px 0 10px
            a
                @extend .c4
        .st--button
            position: absolute
            bottom: -20px
            left: 50%
            transform: translateX(-50%)
            text-transform: capitalize
    

// st--slide--arrow--4
.st--slide--arrow--4
    .slick-arrow
        height: 35px
        width: 35px
        position: absolute
        border-radius: 50%
        background-color: #f7f7f7
        right: 15px
        top: -50px
        text-align: center
        line-height: 35px
        @extend .trns
        cursor: pointer
        z-index: 1
        &:hover
            @extend .c1-bg
            color: #ffffff
        &.slick--prev
            transform: translateX(-40px)
            
// st--slide--arrow--5
.st--slide--arrow--6
    .slick-arrow
        height: 35px
        width: 35px
        position: absolute
        border-radius: 50%
        background-color: #f7f7f7
        right: 0px
        top: -80px
        text-align: center
        line-height: 35px
        @extend .trns
        cursor: pointer
        z-index: 1
        &:hover
            @extend .c1-bg
            color: #ffffff
        &.slick--prev
            transform: translateX(-40px)
            
// st--single--post--6
.st--slide--arrow--5
    .slick-arrow
        height: 35px
        width: 35px
        position: absolute
        border-radius: 50%
        background-color: #f7f7f7
        right: 15px
        top: 20px
        text-align: center
        line-height: 35px
        @extend .trns
        cursor: pointer
        z-index: 1
        &:hover
            @extend .c1-bg
            color: #ffffff
        &.slick--prev
            transform: translateX(-40px)
    
.st--single--post--6
    margin: 15px -15px 30px
    .st--inner
        position: relative
        h4
            margin: 0 0 10px
            a
                @extend .c4
                &:hover
                    @extend .c1
        .st--post--meta
            margin-bottom: 10px
            > span
                a
                    @extend .c5
                    &:hover
                        @extend .c1
                &:not(:last-child):after
                    content: '|'
                    @extend .c5
                    margin: 0 2px
        .st--button
            margin-top: 5px
        .st--post--img
            height: 280px
            border-radius: 5px 0 0 5px
    .st--post--content
        height: 280px
        border-radius: 0 5px 5px 0
        border: 1px solid #ddd
        margin-left: -15px
        padding: 15px 45px
        +flex_center    




.st--single--small--post
    overflow: hidden
    margin-bottom: 15px
    .st--post--img
        height: 120px
        width: 120px
        float: left
        border-radius: 4px
        overflow: hidden
    .st--post--content
        padding-left: 25px
        height: 120px
        @extend .flex_center
        .st--date
            font-size: 12px
            margin-bottom: 5px
            @extend .c5
            @extend .trns
            line-height: 22px
            &:hover
                @extend .c1
            &:before
                content: '\f017'
                font-family: $fa
                margin-right: 6px
        h5
            margin: 0
            font-size: 14px
            line-height: 20px
            a
                @extend .c4
                @extend .trns
                &:hover
                    @extend .c1
    
    
/*
 * ****************************************
 *>>> | 00. st--widget--carousel--1 |
 * ****************************************/
.st--widget--carousel--1
    img
        width: 100%
    +mq(mobileLg)
        max-width: 350px
.st--widget
    margin-bottom: 50px

.st--widget--inner--box
    background-color: #f7f7f7
    padding: 30px

.st--widget
    font-size: 13px

    ul
        margin-bottom: 0
        list-style: none

        li
            a
                @extend .c4

                &:hover
                    @extend .c1

                &:before
                    content: '\f301'
                    font-family: $zm
                    margin-right: 15px

.st--widget--title
    position: relative
    padding-bottom: 15px
    margin-bottom: 30px

    h4
        font-size: 16px
        margin: 0

    &:before
        content: ''
        position: absolute
        height: 2px
        width: 50px

        @extend .c1-bg

        bottom: 0
        left: 0

.st--widget--carousel--1
    +mq(tab)
        max-width: 370px
    .slick-arrow
        position: absolute
        height: 35px
        width: 35px
        text-align: center
        line-height: 35px

        @extend .c1-bg

        @extend .trns

        border-radius: 50%
        color: #fff
        top: 25px
        right: 25px
        z-index: 2
        cursor: pointer

        &.slick--prev
            right: 70px

        &:hover
            background-color: #fff

            @extend .c4

    .st--inner
        position: relative

        .st--content
            position: absolute
            left: 0
            bottom: 0
            z-index: 2
            width: 100%
            padding: 60px 30px 30px

            @extend .post--overlay--1

            &:after
                opacity: .9

            h5
                margin: 15px 0 0

            a
                color: #fff

.st--social-follow
    .st--button--2
        min-width: 170px
        margin: 5px 3px

.st--tw--feed
    .tw--icon
        font-size: 24px
        color: $twitter-c
        margin-bottom: 20px

    .dtc
        margin-bottom: 15px

    .dtc
        > a
            @extend .c4

            margin-right: 10px

            &:hover
                @extend .c1

    .dt--btm
        a
            margin-right: 10px

            &:not(.st--button)
                @extend .c4

                &:hover
                    @extend .c1

/*
 * ****************************************
 *>>> | 00. st--instagram--1 |
 * ****************************************/

.st--instagram--1
    overflow: hidden

    .st--single--insta
        width: 16.666%
        float: left
        background-size: cover
        height: 200px
        position: relative
        +mq(maxTab)
            width: 33.3333%
        +mq(mobileSm)
            width: 50%
        .st--inner
            position: absolute
            background-color: rgba(0, 0, 0, 0.6)
            top: 0
            left: 0
            height: 100%
            width: 100%
            text-align: center

            @extend .flex_center

            opacity: 0
            visibility: hidden

            @extend .trns

        &:hover .st--inner
            opacity: 1
            visibility: visible

/*
 * ****************************************
 *>>> | 00. st--cta & st--newsletter |
 * ****************************************/

.st--cta--1
    .st--cta--inner
        h3
            margin: 0 0 10px
            font-size: 22px

    .st--newsletter--1
        .st--inner
            text-align: right
            position: relative
            input
                width: 100%
                min-width: 470px
                text-align: left
                border: 1px solid $c5
                height: 50px
                border-radius: 30px
                text-indent: 40px
                background-color: #fff
                color: $c4
                +mq(mobile)
                    min-width: 100%

            button
                position: absolute
                right: 0
                top: 0
                height: 50px
                padding: 0 25px
                border-radius: 0 30px 30px 0
                border: none

                @extend .c1-bg

                color: #fff

/*
 * ****************************************
 *>>> | 00. st--footer |
 * ****************************************/

.st--footer--1
    .st--footer--widget
        .footer--logo
            margin-bottom: 25px

        .st--footer--social
            margin-top: 20px
            margin-left: -8px

            a
                color: #fff
                font-size: 16px
                padding: 8px

                &:hover
                    @extend .c1

    .st--footer--btm
        padding: 15px 0
        font-size: 12px
        +mq(maxTab)
            text-align: center
            div.st--footer--link
                text-align: center
                border-top: 1px solid rgba(255, 255, 255, 0.07)
                margin-top: 10px
                padding-top: 10px
        .st--footer--link
            text-align: right
            a
                color: #fff
                margin-left: 15px
                &:first-child
                    margin-left: 0
                &:hover
                    @extend .c1

.st--widget--title--2
    h4
        font-size: 16px
        margin: 0 0 50px

.st--recent--postbox--1
    .st--single
        overflow: hidden
        margin-bottom: 20px

        &:last-child
            margin-bottom: 0

        .st--recent--img
            height: 80px
            width: 80px
            background-size: cover
            background-position: center

        .st--recent--content
            padding-left: 20px
            height: 80px

            @extend .flex_center

            a
                color: #fff

                &:hover
                    opacity: .7

            h5
                margin: 0 0 6px

            .st--date
                font-size: 12px

.st--tag--group--1
    a
        margin-bottom: 10px
        margin-right: 4px

// footer btm


//

//feature slider


.st--home--style--5
    .single--slide
        height: 595px
        @extend .trns
        box-sizing: border-box
        background-position: center
        background-size: cover
        position: relative
        .st--inner
            position: absolute
            width: 100%
            height: auto
            bottom: 0
            left: 0
            padding: 120px 30px 40px
            z-index: 1
            @extend .trns
            @extend .post--overlay--1
            a
                color: #ffffff
                @extend .trns
                &:hover
                    opacity: .7
            h2
                font-size: 18px
                line-height: 25px
                margin: 10px 0 0

                
// about page

.about--col > div
    margin-right: -30px
.about_img
    margin-bottom: 30px
.post--content--single
    margin-bottom: 80px
// team

.st--single--team
    margin-bottom: 30px
.st--single--team  .st--inner
    background-color: #fbfbfb
    padding: 40px 30px
    line-height: 24px
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1)
    .st--top
        overflow: hidden
        margin-bottom: 20px
        .st--team--img
            float: left
            height: 60px
            width: 60px
            img
                border-radius: 4px
            & + div
                padding-left: 20px
                min-height: 60px
                +flex_center
                h5
                    margin: 0
    .st--team--social
        margin-top: 15px
        margin-left: -6px
        a
            color: #373737
            font-size: 14px
            padding: 6px
            transition: .4s
            &:hover
                @extend .c1

.st--get--touch
    overflow: hidden
    .single--touch
        width: 33.3333%
        float: left
        .touch--left
            float: left
            background-color: #eee
            height: 40px
            width: 40px
            text-align: center
            line-height: 40px
            border-radius: 50%
        .toucn--righ
            padding-left: 60px
            a, span
                line-height: 20px
                margin: 0
                display: block
                @extend .c4
                opacity: .8
                transition: .4s
            a:hover
                @extend .c1
                opacity: 1
.st--contact
    input,
    textarea
        border: 1px solid #e1e1e1
        height: 50px
        width: 100%
        border-radius: 4px
        margin-bottom: 30px
        text-indent: 20px
        transition: .4s
        outline: none
        display: block
        &[type="submit"]
            @extend .c1-bg
            color: #ffffff
            text-indent: 0
            width: auto
            padding: 0 30px
        &:focus
            @extend .c1-bo
    textarea
        height: 140px
        padding-top: 10px

// error page

.st--error--content
    text-align: center
    h1
        font-size: 100px
        margin-top: 0
    h4
        margin: 0 0 15px
    a.st--button
        margin-top: 20px

        
// single post

.post--content--single
    .tag--list
        margin-top: 30px    
    .post_img
        margin-bottom: 30px
        img
            width: 100%
    @extend .trns
    a
        color: #222
        @extend .trns
        &:hover
            opacity: .7
    .st--tags
        a
            color: #fff
    h2
        font-size: 28px
        line-height: 35px
        margin: 10px 0
    .st--meta
        @extend .trns
        margin-bottom: 20px
        > div
            margin-right: 20px
        .st--post--date:before
            content: '\f337'
            font-family: $zm
            margin-right: 9px
        .st--author--info
            display: inline-block
            .author--img
                height: 35px
                width: 35px
                overflow: hidden
                border-radius: 50%
            .st--author
                padding-left: 15px
                padding-top: 4px
.post--image--wrap
    overflow: hidden
    margin-bottom: 30px
    margin-top: 30px
    .single--img
        width: 33.33%
        float: left
        padding: 0 5px
        img
            width: 100%
            border-radius: 5px

// comments

.st--comments
    .single--comment
        overflow: hidden
        padding: 30px
        position: relative
        background-color: #f5f5f5
        margin-bottom: 30px
        .comment--left
            float: left
            img
                width: 60px
                height: 60px
                border-radius: 50%
        .comment--right
            padding-left: 80px
            h5
                font-size: 14px
                margin: 0 0 5px
            span
                margin-bottom: 15px
        .reply
            position: absolute
            right: 30px
            top: 30px
            color: #373737
