.flex-container a:hover, .flex-slider a:hover, .flex-container a:focus, .flex-slider a:focus {
    outline: none;
}

.g-flexslider {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    > .g-flexslider-item-container {
        margin: 0;
        padding: 0;
        float: left;
    }
}

.g-flexslider-item-container:not(:first-child) {
    display: none;
}

.g-flexslider-carousel-item-container {
    display: none;
}

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

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

.g-flexslider {
    margin: 0;
    padding: 0;
    .g-flexslider-slideshow-slides {
        > .g-flexslider-item-container {
            display: none;
            -webkit-backface-visibility: hidden;
        }
        img {
            width: 100%;
            display: block;
        }
        &:after {
            content: "\0020";
            display: block;
            clear: both;
            visibility: hidden;
            line-height: 0;
            height: 0;
        }
    }
}

html[xmlns] .flexslider .g-flexslider-slideshow-slides {
    display: block;
}

* html .flexslider .g-flexslider-slideshow-slides {
    height: 1%;
}

.no-js .flexslider .g-flexslider-slideshow-slides > .g-flexslider-slideshow-item-container:first-child {
    display: block;
}

.flexslider {
    position: relative;
    zoom: 1;
    .g-flexslider-slideshow-slides {
        zoom: 1;
        img {
            height: auto;
        }
    }
}

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

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

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

.flex-direction-nav {
    *height: 0;
    position: relative;
    z-index: 10;
    .flex-nav-prev,
    .flex-nav-next {
        position: absolute;
        opacity: 0.75;
        margin-top: 10px;
        @include transition(opacity 0.25s);
        &:hover {
            opacity: 1;
        }
    }
    .flex-nav-prev {
        .dir-ltr & {
            left: 50%;
            margin-left: 1.5rem;
            @include breakpoint(tablet-range) {
                margin-left: -20rem;
            }
            @include breakpoint(large-mobile-range) {
                left: 75px;
                margin-left: 0;
            }
            @include breakpoint(small-mobile-range) {
                left: 25px;
                margin-left: 0;
            }
        }
        .dir-rtl & {
            right: 50%;
            margin-right: 1.5rem;
            @include breakpoint(tablet-range) {
                margin-right: -20rem;
            }
            @include breakpoint(large-mobile-range) {
                right: 75px;
                margin-right: 0;
            }
            @include breakpoint(small-mobile-range) {
                right: 25px;
                margin-right: 0;
            }
        }
    }
    .flex-nav-next {
        .dir-ltr & {
            right: 40%;
            margin-right: -20rem;
            @include breakpoint(tablet-range) {
                margin-right: -10rem;
            }
            @include breakpoint(large-mobile-range) {
                right: 120px;
                margin-right: 0
            }
            @include breakpoint(small-mobile-range) {
                right: 65px;
                margin-right: 0
            }
        }
        .dir-rtl & {
            left: 40%;
            margin-left: -20rem;
            @include breakpoint(tablet-range) {
                margin-left: -10rem;
            }
            @include breakpoint(large-mobile-range) {
                left: 120px;
                margin-left: 0
            }
            @include breakpoint(small-mobile-range) {
                left: 65px;
                margin-left: 0
            }
        }
    }
    a {
        text-decoration: none;
        display: block;
        margin: -45px 0 0;
        position: absolute;
        bottom: 7.5rem;
        z-index: 10;
        overflow: hidden;
        opacity: 1;
        cursor: pointer;
        width: auto;
        height: 50px;
        line-height: 50px;
        color: $white;
        @include transition(all 0.3s ease);
        &:before, &:after {
            font-family: FontAwesome;
            font-size: 1.5rem;
            margin: 0 6px;
            vertical-align: top;
        }
    }
    .flex-prev {
        &:before {
            content: "\f177";
            .dir-rtl & {
                content: "\f178";
            }
        }
    }
    .flex-next {
        &:after {
            content: "\f178";
            .dir-rtl & {
                content: "\f177";
            }
        }
    }
}

.flexslider:hover .flex-direction-nav {
    .flex-prev {
        opacity: 0.7;
        left: 1rem;
        &:hover {
            opacity: 1;
        }
    }
    .flex-next {
        opacity: 0.7;
        right: 1rem;
        &:hover {
            opacity: 1;
        }
    }
}

.flex-direction-nav .flex-disabled {
    opacity: 0 !important;
    filter: alpha(opacity=0);
    cursor: default;
}

.flex-pauseplay a {
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 5px;
    left: 10px;
    opacity: 0.8;
    z-index: 10;
    overflow: hidden;
    cursor: pointer;
    color: #000;
    &:before {
        font-size: 20px;
        display: inline-block;
        content: '\f004';
    }
    &:hover {
        opacity: 1;
    }
    &.flex-play:before {
        content: '\f003';
    }
}

.flex-control-nav {
    width: 100%;
    position: absolute;
    bottom: 7.65rem;
    text-align: center;
    li {
        margin: 0 15px;
        display: inline-block;
        zoom: 1;
        *display: inline;
        position: relative;
    }
}

.flex-control-nav,
.flex-control-paging {
    > li {
        a {
            &:before {
                content: "";
                border: 2px solid;
                border-radius: 100%;
                width: 16px;
                height: 16px;
                display: block;
                position: absolute;
                left: -4px;
                top: -4px;
                z-index: 1;
            }
            &.flex-active {
                background: $accent-color-1 !important;
                width: 5px;
                height: 5px;
                &:before {
                    color: $accent-color-1;
                    width: 30px;
                    height: 30px;
                    left: -12px;
                    top: -12px;
                }
            }
        }
    }
}

.flex-control-paging li a {
    width: 8px;
    height: 8px;
    margin: 2px;
    display: block;
    background: transparent;
    cursor: pointer;
    text-indent: 999999px;
    border-radius: 100%;
    position: relative;
    z-index: 2;
    &:hover {
        background: $accent-color-1;
    }
    &.flex-active {
        background: $accent-color-1;
        cursor: default;
    }
}

.flex-control-thumbs {
    margin: 5px 0 0;
    position: static;
    overflow: hidden;
    li {
        width: 25%;
        float: left;
        margin: 0;
    }
    img {
        width: 100%;
        height: auto;
        display: block;
        opacity: .7;
        cursor: pointer;
        @include transition(all 1s ease);
        &:hover {
            opacity: 1;
        }
    }
    .flex-active {
        opacity: 1;
        cursor: default;
    }
}

.g-flexslider-slideshow {
    position: relative;
    .g-flexslider-slideshow-item {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top center;
    }
    .g-flexslider-slideshow-item-content {
        text-align: center;
        margin: auto;
        padding: 13rem 2rem 10rem 2rem;
        @include breakpoint(desktop-range) {
            padding: 9.5rem 2rem;
        }
        @include breakpoint(tablet-range) {
            padding: 8.5rem 1.5rem;
        }
        @include breakpoint(mobile-only) {
            padding: 8rem 1rem;
        }
    }
    .g-flexslider-slideshow-item-subtitle {
        font-family: get-font-family($font-family-title);
        text-transform: uppercase;
        font-size: $core-font-size + 0.5;
        letter-spacing: 0.5rem;
        @include breakpoint(desktop-range) {
            font-size: $core-font-size + 0.4;
            letter-spacing: 0.4rem;
        }
        @include breakpoint(tablet-range) {
            font-size: $core-font-size + 0.3;
            letter-spacing: 0.3rem;
        }
        @include breakpoint(large-mobile-range) {
            font-size: $core-font-size + 0.2;
            letter-spacing: 0.2rem;
        }
        @include breakpoint(small-mobile-range) {
            font-size: $core-font-size - 0.1;
            letter-spacing: 0.1rem;
        }
    }
    .g-flexslider-slideshow-item-title {
        font-family: get-font-family($font-family-default);
        font-weight: $font-weight-thin;
        font-size: $core-font-size + 4;
        line-height: $core-line-height - 0.5;
        margin: 1rem auto;
        span {
            font-weight: bold;
            color: $accent-color-1;
            @include breakpoint(small-mobile-range) {
                display: block;
            }
        }
        @include breakpoint(desktop-range) {
            font-size: $core-font-size + 4;
        }
        @include breakpoint(tablet-range) {
            font-size: $core-font-size + 3;
        }
        @include breakpoint(large-mobile-range) {
            font-size: $core-font-size + 2;
        }
        @include breakpoint(small-mobile-range) {
            font-size: $core-font-size + 1;
            line-height: $core-line-height - 0.35;
        }
    }
    .g-flexslider-slideshow-item-desc {
        margin-bottom: 1.5rem;
        @include breakpoint(mobile-only) {
            font-size: $core-font-size - 0.1;
        }
    }
    .g-flexslider-slideshow-item-overlay {
        @include breakpoint(mobile-only) {
            background-position: top center !important;
        }
        html.touch & {
            background-position: top center !important;
        }
    }
    .g-flexslider-slideshow-item-link {
        margin: 3rem auto;
    }

    .flex-direction-nav a {
        color: $white;
        opacity: 0.75;
        &:hover {
            opacity: 1;
        }
    }
    .flex-control-paging li a.flex-active {
        background: $white;
    }
}

.g-flexslider-testimonial {
    position: relative;
    .g-flexslider-testimonial-item {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top center;
    }
    .g-flexslider-testimonial-item-content {
        text-align: center;
        margin: auto;
        padding: 13rem 2rem 10rem 2rem;
        @include breakpoint(desktop-range) {
            padding: 9.5rem 2rem;
        }
        @include breakpoint(tablet-range) {
            padding: 8.5rem 1.5rem;
        }
        @include breakpoint(mobile-only) {
            padding: 8rem 1rem;
        }
    }
    .g-flexslider-testimonial-item-title {
        font-family: get-font-family($font-family-default);
        font-weight: $font-weight-thin;
        font-size: $core-font-size + 2;
        line-height: $core-line-height - 0.5;
        margin: 1rem auto;
        span {
            font-weight: bold;
            color: $accent-color-1;
            @include breakpoint(small-mobile-range) {
                display: block;
            }
        }
        @include breakpoint(desktop-range) {
            font-size: $core-font-size + 4;
        }
        @include breakpoint(tablet-range) {
            font-size: $core-font-size + 3;
        }
        @include breakpoint(large-mobile-range) {
            font-size: $core-font-size + 2;
        }
        @include breakpoint(small-mobile-range) {
            font-size: $core-font-size + 1;
            line-height: $core-line-height - 0.35;
        }
    }
    .g-flexslider-testimonial-item {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top center;
    }
    .g-flexslider-testimonial-item-testimonial-image img {
        border-radius: 100%;
        margin-bottom: 1rem;
    }
    .g-flexslider-testimonial-item-testimonial-name {
        font-weight: $font-weight-bold;
    }
    .g-flexslider-testimonial-item-testimonial-position {
        font-style: italic;
        font-size: $core-font-size - 0.1;
        opacity: 0.7;
    }
}

.g-flexslider-showcase {
    position: relative;
    .g-flexslider-showcase-item-content {
        padding: 0 2rem 0 2rem;
        @include breakpoint(desktop-range) {
            padding: 9.5rem 2rem;
        }
        @include breakpoint(tablet-range) {
            padding: 8.5rem 1.5rem;
        }
        @include breakpoint(mobile-only) {
            padding: 8rem 1rem;
        }
    }
    .g-flexslider-showcase-item-content-container {
        @include display(flex);
        @include flex-flow(row wrap);
        @include flex-wrap(wrap);
        @include align-items(center);
        @include justify-content(center);
    }
    .g-flexslider-showcase-item-image, .g-flexslider-showcase-item-content {
        @include flex(0 0 auto);
        width: 50%;
        @include breakpoint(mobile-only) {
            width: 100%;
        }
    }
    .g-flexslider-showcase-item-image {
        overflow: hidden;
        img {
            @include transform(scale(1.1));
            @include transition(transform 0.3s);
        }
        &:hover {
            img {
                @include transform(scale(1));
            }
        }
    }
    .g-flexslider-showcase-item-title {
        font-family: get-font-family($font-family-default);
        font-weight: $font-weight-thin;
        font-size: $core-font-size + 4;
        line-height: $core-line-height - 0.5;
        margin: 1rem auto;
        span {
            font-weight: bold;
            color: $accent-color-1;
            @include breakpoint(small-mobile-range) {
                display: block;
            }
        }
        @include breakpoint(desktop-range) {
            font-size: $core-font-size + 3;
        }
        @include breakpoint(tablet-range) {
            font-size: $core-font-size + 2;
        }
        @include breakpoint(large-mobile-range) {
            font-size: $core-font-size + 1;
        }
        @include breakpoint(small-mobile-range) {
            font-size: $core-font-size + 0.75;
            line-height: $core-line-height - 0.35;
        }
    }
    .g-flexslider-showcase-item-desc {
        font-size: $core-font-size + 0.25;
        margin-bottom: 1.5rem;
        @include breakpoint(desktop-range) {
            font-size: $core-font-size + 0.2;
        }
        @include breakpoint(tablet-range) {
            font-size: $core-font-size + 0.15;
        }
        @include breakpoint(mobile-only) {
            font-size: $core-font-size + 0.1;
        }
    }
}

.g-flexslider-carousel-container {
    position: relative;
    .g-flexslider-carousel-item-image {
        background: $white;
        position: relative;
        cursor: pointer;
        @include transition(background 0.3s);
        * {
            -moz-user-select: -moz-none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        img {
            cursor: pointer;
            opacity: 0.35;
            @include transition(opacity 0.3s);
        }
        &:hover {
            background: $accent-color-1;
            .g-flexslider-carousel-item-image-preview-icon {
                opacity: 1;
            }
        }
    }
    .flex-active-slide {
        img {
            opacity: 1;
        }
        .g-flexslider-carousel-item-image {
            cursor: default;
            &:hover {
                .g-flexslider-carousel-item-image-preview-icon {
                    display: none;
                }
            }
        }
    }
    .g-flexslider-carousel-item-image-preview-icon {
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        opacity: 0;
        z-index: 10;
        @include transition (opacity 0.3s);
        span {
            color: $white;
            font-size: 2rem;
            position: absolute;
            left: 50%;
            top: 50%;
            @include transform(translate3d(-50%, -50%, 0px));
        }
    }
}

.dir-rtl {
    .flexslider {
        direction: rtl;
    }

    .carousel li {
        margin-right: 0;
        margin-left: 5px;
    }
    .flex-direction-nav {
        *height: 0;
    }

    .flex-pauseplay a {
        left: auto;
        right: 10px;
    }

    .flex-control-thumbs li {
        float: right;
    }

}
