/*!==========================================================================
   FlexSlider
   ========================================================================== */
            .flexslider {
                background-color: transparent;
                position: relative;
                zoom: 1;
                margin: 0;
                padding: 0;
                &:hover{
                    .flex-next{
                        opacity: 0.8;
                        right: 0px;
                        &:hover{
                            opacity: 1;
                        }
                    }
                    .flex-prev{
                        opacity: 0.8;
                        left: 0px;
                        &:hover{
                            opacity: 1;
                        }
                    }
                }
                .slides{
                    zoom: 1;
                    margin: 0;
                    padding: 0;
                    list-style: none;
                    z-index: 1000;
                    overflow: hidden;
                    &::after{
                        content: ".";
                        display: block;
                        clear: both;
                        visibility: hidden;
                        line-height: 0;
                        height: 0;
                    }
                    li{
                        display: none;
                        -webkit-backface-visibility: hidden;
                    }
                }
            }

            .flex-viewport {
                max-height: 2000px;
                @include transition(all 1s ease);
            }

            .loading {
                .flex-viewport{
                    max-height: 300px;
                }
            }


            .carousel li {
                li{
                    margin-right: 5px;
                }
            }

            .flex-container a:active,
            .flexslider a:active,
            .flex-container a:focus,
            .flexslider a:focus {
                outline: none;
            }


            .flex-control-nav,
            .flex-direction-nav {
                margin: 0;
                padding: 0;
                list-style: none;
                z-index: 1000;
            }










/* ==========================================================================
   Clearfix For The Slides Element
   ========================================================================== */
            html[xmlns] .flexslider .slides {
                display: block;
            }
            * html .flexslider .slides {
                height: 1%;
            }
            .flexslider .slides,
            .flex-control-nav,
            .flex-direction-nav {
                z-index: 100;
            }










/* ==========================================================================
   Direction Navigation
   ========================================================================== */
            .flex-direction-nav {
                height: 0;
                a{
                    z-index: 100;
                    position: absolute;
                    top: 50%;
                    cursor: pointer;
                    opacity: 0;
                    @include transition(all .3s ease);
                }
            }

            .no-opacity {
                .flex-direction-nav{
                    a{
                        display: none;
                    }
                }
                .flexslider{
                    &:hover{
                        .flex-direction-nav{
                            a{
                                display: block;
                            }
                        }
                    }
                }
            }

            .flex-direction-nav {
                .flex-prev{
                    left: 0;
                    @include border-radius(0 3px 3px 0);
                    &::before{
                        margin-top: -20px;
                        position: absolute;
                        width: 40px;
                        height: 40px;
                        left: 0px;
                        top: 50%;
                        z-index: 90;
                        line-height: 40px;
                        font-size: 20px;
                        background: #636363;
                        background: rgba(0, 0, 0, 0.6);
                        color: $full-white-color;
                        font-family: IcoMoon;
                        content: '\e918';
                        text-align: center;
                    }
                }
                .flex-next{
                    right: 0;
                    &::before{
                        margin-top: -20px;
                        position: absolute;
                        width: 40px;
                        height: 40px;
                        top: 50%;
                        z-index: 90;
                        line-height: 40px;
                        font-size: 20px;
                        background: #636363;
                        background: rgba(0, 0, 0, 0.6);
                        color: $full-white-color;
                        font-family: IcoMoon;
                        text-align: center;
                        // content: '\e918';
                        // left: 0px;
                        content: '\e919';
                        right: 0;
                        left: auto;
                    }
                }
                .flex-disabled{
                    opacity: 0;
                    filter: alpha(opacity=0);
                    cursor: default;
                    display: none;  
                }
            }

            .no-rgba .flex-direction-nav .flex-next,
            .no-rgba .flex-direction-nav .flex-prev {
                background-color: #000;
            }










/* ==========================================================================
   Control Navigation
   ========================================================================== */
            .flex-control-nav {
                width: 100%;
                position: absolute;
                bottom: 0px;
                text-align: center;
                li{
                    margin: 0 3px;
                    display: inline-block;
                    zoom: 1;
                    a{
                        width: 11px;
                        height: 11px;
                        display: block;
                        background: #666;
                        background: rgba(0, 0, 0, 0.05);
                        cursor: pointer;
                        text-indent: -9999px;
                        @include border-radius(20px);
                        box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3);
                        &:hover{
                            background: $full-dark-color;
                            background: rgba(0, 0, 0, 0.7);
                        }
                    }
                    a.flex-active{
                        background: #000;
                        background: rgba(0, 0, 0, 0.4);
                        cursor: default;
                    }
                }
            }

            .flex-control-thumbs {
                margin: 5px 0 0;
                position: static;
                overflow: hidden;
                li{
                    width: 25%;
                    float: left;
                    margin: 0;    
                }
                img{
                    width: 100%;
                    display: block;
                    opacity: 0.7;
                    cursor: pointer;
                    &:hover{
                        opacity: 1;
                    }
                }
                .flex-active{
                    opacity: 1;
                    cursor: default;
                }
            }

            .flex-caption {
                position: absolute;
                background: rgba(0, 0, 0, 0.6);
                width: 96%;
                padding: 2%;
                color: $full-dark-color;
                left: 0;
                bottom: 0;
                margin: 0;
            }

            .no-rgba {
                .flex-caption{
                    background-color: #000;
                }
            }

            .main-flex {
                margin-bottom: 0;
            }










/* ==========================================================================
   Avoids Image Jumping
   ========================================================================== */
            .flexslider {
                .slides{
                    img{
                        width: 100%;
                        max-width: 100%;
                        display: block;
                    }
                }
            }

            .flex-pauseplay {
                span{
                    text-transform: capitalize;
                }
            }










/* ==========================================================================
   Responsive
   ========================================================================== */
            @media screen and (max-width: 860px) {
                .flex-direction-nav {
                    .flex-prev{
                        opacity: 1;
                        left: 0;
                    }
                    .flex-next{
                        opacity: 1;
                        right: 0;    
                    }
                }
            }