//Reset
@import reset/mixins
@import reset/variables
@import reset/grid

.glider
    margin: 0 auto
    position: relative
    overflow: hidden
    transform: translateZ(0)
    visibility: hidden

    &.-is-loaded
        visibility: visible
    
    &-contain
        width: 100%
        margin: 0 auto
        position: relative

    &-track
        display: flex
        align-items: center
        width: 100%
        margin: 0
        padding: 0
        transform: translateZ(0)
        z-index: 1


    &.draggable
        user-select: none
        cursor: -webkit-grab
        cursor: grab

        .glider-slide
            img
                user-select: none
                pointer-events: none

    &.drag
        cursor: -webkit-grabbing
        cursor: grabbing

    &-slide
        display: flex
        user-select: none
        justify-content: center
        align-content: center
        width: 100%

        img
            max-width: 100%
            display: block
            margin: auto

    &-hide
        opacity: 0
    
    &-dots
        display: flex
        flex-wrap: wrap
        justify-content: center
        margin: 0 auto
        padding: 0
        user-select: none

    &-dot
        border: 1px solid #000
        padding: 0
        user-select: none
        outline: none
        display: block
        cursor: pointer
        color: #ccc
        border-radius: 999px
        background: #ccc
        width: 12px
        height: 12px
        margin: 7px
        
        &:hover,
        &:focus,
        &.active
            background: #000

    &-arrows
        width: 30px
        height: 40px
        padding: 0
        //margin-top: -20px
        border: none
        outline: none
        position: absolute
        top: calc( 50% - 13px )
        transform: translateY(-50%)
        color: #666
        background: none
        cursor: pointer
        will-change: opacity, color
        transition: opacity .5s cubic-bezier(.17,.67,.83,.67), color .5s cubic-bezier(.17,.67,.83,.67)

        &:hover,
        &:focus
            color: #000

        &.disabled
            opacity: 0.7
            color: #ccc
            cursor: default
        svg
            height: 40px

        img
            width: auto
            max-height: 40px

        &.prev
            left: 0px
            @media screen and ( min-width: 1200px)
                left: -30px

        &.next
            right: 0px
            @media screen and ( min-width: 1200px)
                right: -30px

    &__item,    
    &__link
        display: block
        width: 100%
        position: relative

    &__text
        display: flex
        align-items: center
        justfy-content: center
        width: 100%
        height: 100%
        position: absolute
        top: 0
        left: 0
        color: #fff
        text-shadow: 0 1px 2px #000
        background: rgba(0,0,0,0.5)
        
        a,
        p,
        h3,
        span,
            color: currentColor

        &-inner
            width: 100%
            padding: 10px 50px
            text-align: center
            color: currentColor

        &-txt
            @media screen and ( max-width: 767px)
                display: none
            @media screen and ( min-width: 768px)
                display: block


    &__text-title
        @media screen and ( max-width: 767px)
            font-size: 16px
            text-transform: uppercase

        @media screen and ( min-width: 768px)
            font-size: 25px

    &__read-more
        display: block
        max-width: 140px
        margin: 0 auto
        padding: 6px 10px
        height: auto
        border: 1px solid #000
        line-height: 1
        color: #fff
        background: #000
        cursor: pointer
        text-shadow: none
        will-change: background, color, border
        transition: opacity .5s cubic-bezier(.17,.67,.83,.67), color .5s cubic-bezier(.17,.67,.83,.67), border .5s cubic-bezier(.17,.67,.83,.67)

        @media screen and ( min-width: 768px)
            margin: 10px auto 0

        &:hover
            color: #000
            background: #fff
            border: 1px solid #000

    &__small
        &-thumb
            display: block
            width: 100%
            position: relative
            @media screen and ( min-width: 1024px)
                display: flex
                justify-content: space-between

        &-img
            width: 100%
            @media screen and ( min-width: 1024px)
                display: flex
                align-items: center

        &-img
            @media screen and ( min-width: 1024px)
                width: 41.66667%
                min-width: 410px
                padding: 10px 0
                order: 2

        &-text
            @media screen and ( min-width: 1024px)
                width: 58.33333%
                padding: 10px 0
                order: 1




.half-container
    .glider__text
        @media screen and ( min-width: 1024px)
            width: 45%
            min-width: 440px
            height: auto
            min-height: 70%
            max-height: 80%
            top: 50%
            left: 30px
            transform: translateY(-50%)

    .glider__text-inner
        @media screen and ( min-width: 1024px)
            padding: 10px 20px

    .glider__text-txt
        @media screen and ( min-width: 1024px)
            display: -webkit-box
            text-overflow: ellipsis
            -webkit-line-clamp: 3
            max-height: 75px
            overflow: hidden
            -webkit-box-orient: vertical

.only-text
    .glider__text
        position: relative
        background: transparent
        color: #000
        text-shadow: none

    .glider__read-more
        color: #fff
        border-color: #000
        &:hover
            color: #000
            background: #fff
            border: 1px solid #000

    .glider__text-inner
        padding: 10px 50px 20px
        @media screen and ( max-width: 767px)
            padding: 10px 30px 20px

    .glider__text-txt
        margin-bottom: 10px
        @media screen and ( max-width: 767px)
            display: block