/* Flexslider
------------------------------------- */
.flexslider,
.slides {
    
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    box-shadow:none;
    
    background: none;
}
.slides {
    @include transition( all .6s $ease-out-expo );
}
.fox-flexslider {
    
    .flex-direction-nav a {
        margin: 0;
        &:before {
            display: none;
        }
    }

}

/* NAVI STYLES
-------------------------------------------------------------------------------------- */
$slider-arrow : ".flex-direction-nav a";

.flex-disabled {
    display: none !important;
}

// hide the left arrow on mobile
a.flex-prev {
    @include media( mobile ) {
        display: none !important;
    }
}

.flex-direction-nav a {
    
    padding: 0;
    position: absolute;
    z-index: 20;
    top: 50%;
    @include transform( translate(0,-50%) );
    outline: none;
    text-align: center;
    transition: all .15s ease;
    
    &:before {
        display: none;
    }
    
    &:hover {
        border-color: #fff;
        background: none;
    }
    
    i {
        display: block;
        margin: 0;
        line-height: inherit;
        text-shadow: 1px 1px 4px rgba(0,0,0,.15);
    }
    
    @include media( mobile-small ) {
        width: 24px;
        height: 24px;
        line-height: 20px;
    }
    
}
.flex-direction-nav .flex-next,
.flexslider:hover .flex-direction-nav .flex-next {
    right: 20px;
    text-align: center !important;
}
.flex-direction-nav .flex-prev,
.flexslider:hover .flex-direction-nav .flex-prev {
    left: 20px;
    text-align: center;
}

/* CIRCLE 1
-------------------- */
.style--slider-nav-circle-1 {
    
    #{$slider-arrow} {
        margin: 0;
        box-shadow: none !important;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        border-width: 2px;
        
        background: none;
        border: 2px solid white;
        color: white;
        
        i {
            line-height: 28px;
            text-shadow: none;
        }
        
        opacity: 0;
        visibility: hidden;
        transition: all .3s ease-out;
        
        // on mobile devices, show it anyway
        @include media( tablet ) {
            opacity: 1;
            visibility: visible;
        }
        
    }
    
    &:hover {
        #{$slider-arrow} {
            opacity: 1;
            visibility: visible;
        }
    }
    
}

/* SQUARE 1 (3px thick + white + shadow)
-------------------- */
.style--slider-nav-square-1 {
    
    #{$slider-arrow} {
        
        width: 50px;
        height: 50px;
        border: 3px solid #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;

        border-color: rgba(255,255,255,.8);
        background: none;
        text-align: center;
        color: #fff;
        
        // removed since 5.1
        &:hover {
            // box-shadow: 5px 5px 0 black;
            // text-shadow: 5px 5px 0 black;
        }
        
        @include media( tablet ) {
            width: 40px;
            height: 40px;
            border: 2px solid #fff;
            font-size: 20px;
        }

        @include media( mobile ) {
            width: 32px;
            height: 32px;
        }
        
    }
    
}

/* SQUARE 2 (gray background + white arrow)
-------------------- */
.style--slider-nav-square-2 {
    
    #{$slider-arrow} {
        
        width: 40px;
        height: 80px;
        line-height: 80px;
        border: 0;
        color: white;
        background: rgba(0,0,0,.3);
        border-radius: 0;
        font-size: 20px;
        
        &:hover {
            background: rgba(0,0,0,.6);
        }
        
        @include media( tablet ) {
            width: 30px;
            height: 50px;
            line-height: 50px;
        }
        
    }
    
    .flex-direction-nav .flex-next,
    .flexslider:hover .flex-direction-nav .flex-next{
        right: 0;
    }
    .flex-direction-nav .flex-prev,
    .flexslider:hover .flex-direction-nav .flex-prev {
        left: 0;
    }
    
}

/* SQUARE 3 (white tall arrow)
-------------------- */
.style--slider-nav-square-3 {
    
    #{$slider-arrow} {
        
        width: 40px;
        height: 120px;
        line-height: 120px;
        border: 2px solid;
        color: white;
        background: none;
        border-radius: 0;
        font-size: 32px;
        
        opacity: 1;
        visibility: visible;
        
        text-shadow: none;
        
        &:hover {
            background: none;
        }
        
        @include media( tablet ) {
            width: 30px;
            height: 90px;
            line-height: 90px;
        }
        
    }
    
    .flex-direction-nav .flex-next,
    .flexslider:hover .flex-direction-nav .flex-next {
        right: 0;
        opacity: 1;
        visibility: visible;
    }
    .flex-direction-nav .flex-prev,
    .flexslider:hover .flex-direction-nav .flex-prev {
        left: 0;
        opacity: 1;
        visibility: visible;
    }
    
}

/* TEXT
-------------------- */
.style--slider-nav-text {
    
    #{$slider-arrow} {
        transform: none;
        top: 0;
        width: 100px;
        opacity: 1 !important;
        visibility: visible;
        
        text-shadow: none;
        box-shadow: none;
        color: #fff;
        background: black;
        
        // height: 28px;
        height: auto;
        line-height: 28px;
        padding: 0 10px;
        font-family: $heading;
        font-weight: normal;
        font-size: .75em;
        user-select: none;
        // letter-spacing: 2px;
        
        i {
            display: inline-block;
            vertical-align: middle;
            font-size: 10px;
        }
        
        &:hover {
            background: $accent;

            text-shadow: none;
            box-shadow: none;
        }
    }
    
    .flex-direction-nav .flex-next,
    .flexslider:hover .flex-direction-nav .flex-next {
        right: 0;
        
        i {
            margin-left: 6px;
        }
    }
    .flex-direction-nav .flex-prev,
    .flexslider:hover .flex-direction-nav .flex-prev {
        right: 100px;
        left: auto;
        
        i {
            margin-right: 6px;
        }
    }
    
}

/* DOTS
-------------------- */
.flex-control-nav {
    width: 100%;
    position: absolute;
    bottom: 30px;
    text-align: center;
    z-index: 999;
    margin: 0;
}
.flex-control-paging li a {
    color: white;
    background: none;
    border: 1px solid white;
    transition: all .15s ease;
    text-shadow: none;
    box-shadow: none !important;
    outline: 0 !important;
    
    width: 14px;
    height: 14px;
    border-radius: 50%;
    
    &:hover {
        background: white;
    }
    &.flex-active {
        background: white;
    }
}
.style--slider-dot-small {
    .flex-control-paging li a {
        border-radius: 50%;
    }
}

.style--slider-dot-square-small {
    .flex-control-paging li a {
        border-radius: 0;
    }
}

.style--slider-dot-big {
    .flex-control-paging li a {
        width: 20px;
        height: 20px;
    }
}

.style--slider-dot-square-big {
    .flex-control-paging li a {
        border-radius: 0;
        width: 20px;
        height: 20px;
    }
}



/* User Posts
 * since 5.4
---------------------------------------------------- */
.user-item-posts {
    display: block;
    margin: 10px 0 0;
    border-top: 1px solid;
    padding-top: 10px;
    
    ol {
        margin: 0;
        list-style: none;
        padding: 0;
    }
    li {
        // display: block;
    }
    a {
        color: inherit;
        outline: 0;
        display: block;
        &:hover {
            color: inherit;
            text-decoration: underline;
        }
    }
    li + li {
        // border-top: 1px solid;
        margin-top: 2px;
        // padding-top: 2px;
    }
}

/* IMAGEBOX
-------------------------------------------------------------------------------------- */
.elementor-image-box-title {
    margin-top: 0;
}