/*
 * ****************************************
 *>>> | 00 Browser Reset & Common CSS|
 * ****************************************/

*
    margin: 0
    padding: 0

a
    @extend .trns

body
    font-family: $font
    font-size: 14px
    font-weight: 400
    @extend .c5
    line-height: 28px

.bg-cover
    background-size: cover
    background-position: center

.static
    position: static !important

.relative
    position: relative !important

.absolute
    position: absolute !important

.st--info
    font-size: 12px

.mt--90
    margin-top: -90px

.sp
    padding-top: 100px
    padding-bottom: 100px
    +mq(mobile)
        padding-top: 50px
        padding-bottom: 50px

.spt
    padding-top: 100px
    +mq(mobile)
        padding-top: 50px

.spb
    padding-bottom: 100px
    +mq(mobile)
        padding-bottom: 50px

.st--sp--65
    padding-top: 65px
    padding-bottom: 65px

.st--spt--65
    padding-top: 65px

.st--spb--65
    padding-bottom: 65px

.slick-initialized .slick-slide:active,
.slick-initialized .slick-slide:focus
    outline: none

.st--dark--bg--1,
.st--dark--bg--2,
.st--dark--bg--3
    background-color: #313131
    color: #fff
    h1, h2, h3, h4, h5,
    .h1, .h2, .h3, .h4, .h5
        color: #fff

.st--dark--bg--2
    background-color: #262626

.st--dark--bg--3
    background-color: #181818

.st--tags
    @extend .c1-bg
    @extend .trns
    display: inline-block
    line-height: 30px
    border-radius: 30px
    padding: 0 20px
    font-size: 11px
    color: #fff
    &.bg-1
        @extend .bg-1
    &.bg-2
        @extend .bg-2
    &.bg-3
        @extend .bg-3
    &.bg-4
        @extend .bg-4
    &.bg-5
        @extend .bg-5
    a:after
        content: ','
    a:last-child:after
        content: ''
    &:hover
        opacity: .8

.st--vdo--btn
    @extend .bg-1
    border-radius: 50%
    font-size: 20px
    height: 50px
    left: 50%
    line-height: 50px
    position: absolute
    text-align: center
    top: 50%
    transform: translateX(-50%) translateY(-50%)
    width: 50px
    z-index: 2
    @extend .trns
    color: #ffffff
    &.st--big
        height: 70px
        line-height: 70px
        width: 70px
        +mq(maxTab)
            height: 50px
            width: 50px
            line-height: 50px
    &:hover
        background-color: #fff
        @extend .c1

.st--sticky--cat--1
    position: absolute
    bottom: 20px
    left: 20px

.st--button,
.st--button--2,
.st--button--3
    line-height: 40px
    padding: 0 25px
    @extend .c1-bg
    color: #fff
    border-radius: 30px
    font-family: $font2
    i
        margin-left: 5px
    &:hover
        opacity: .8

.st--button--2,
.st--button--3
    text-align: center
    i
        margin-left: 0
        margin-right: 10px

.st--button--3
    background-color: #fff
    color: $c4
    &.sm
        line-height: 30px
        padding: 0 20px
    &:hover
        @extend .c1-bg
        color: #fff
        opacity: 1

.st--block--title--1
    position: relative
    padding-bottom: 15px
    margin-bottom: 50px
    &:before
        content: ''
        position: absolute
        height: 2px
        width: 50px
        @extend .c1-bg
        bottom: 0
        left: 0
    h3
        font-size: 22px
        font-weight: 700
        margin: 0

.st--pagination--1
    ul
        list-style: none
        margin: 0
        li
            display: inline-block
            a,
            span
                height: 40px
                width: 40px
                border: 1px solid
                @extend .c4
                text-align: center
                line-height: 38px
                border-radius: 50%
                margin-right: 6px
            span,
            a:hover,
            span:hover
                @extend .c1-bg
                @extend .c1-bo
                color: #ffffff

.st--grey--bg--1
    background-color: #f1f1f1
    
.st--nav--style--1
    display: block
    list-style: none
    border: none !important
    margin-bottom: 62px
    font-family: $font2
    font-size: 14px
    font-weight: 700
    li
        &:not(:last-child)
            margin-right: 30px
        a,
        &.active a,
        a:hover,
        a:focus
            border: none !important
        a
            @extend .c5
            position: relative
            &::before
                content: ''
                height: 2px
                position: absolute
                width: 0
                @extend .c1-bg
                left: 0
                bottom: -10px
                @extend .trns
        &.active a
            @extend .c4
            &::before
                width: 30px

.st--post--arrow--1
    .slick-arrow
        position: absolute
        z-index: 2
        @extend .c1-bg
        @extend .trns
        right: 25px
        top: 200px
        height: 30px
        line-height: 30px
        width: 30px
        text-align: center
        color: #ffffff
        border-radius: 50%
        cursor: pointer
        color: #ffffff
        opacity: 0
        &.slick--prev
            right: 60px
    &:hover .slick-arrow
        opacity: 1
