.g-swiper {
    &.multislides {
        @include breakpoint(mobile-only) {
            .g-swiper-title, .g-swiper-text {
                font-size: $core-font-size !important;
            }
            .button {
                font-size: $core-font-size - 0.3 !important;
                padding: 0.4rem 0.75rem !important;
            }
            .swiper-navigation {
                > div {
                    font-size: 2rem !important;
                }
            }
        }
    }

    &.swiper-container-horizontal {
        > .swiper-pagination-bullets {
            @include display(flex);
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: auto;
        }

        > .swiper-pagination-progressbar {
            top: auto;
            bottom: 0;
            height: 10px;
        }        
    }

    &.swiper-container-vertical {
        .swiper-navigation {
            + .swiper-pagination-bullets {
                top: unset;
                bottom: 0;
                transform: none;
            }
        }

        > .swiper-pagination-bullets {

            @include breakpoint(mobile-only) {
                right: 0;
            }

            .dir-rtl & {
                right: auto;
                left: 10px;

                @include breakpoint(mobile-only) {
                   left: 0;
                }
            }
        }
    }

    &.swiper-container-vertical {
        &.swiper-container-coverflow {
            > .swiper-pagination-bullets {
                @include breakpoint(mobile-only) {
                    right: 10px;

                    .dir-rtl & {
                        right: auto;
                        left: 10px;
                    }
                }
            }
        }
    }

    div[class*="swiper-pagination-parent"] {
        position: absolute;
        text-align: center;
        transition: .3s opacity;
        z-index: 10;
    }

    &.swiper-container-horizontal, &.swiper-container-vertical {
        > .swiper-pagination-bullets {
            .swiper-pagination-bullet {
                margin: 2rem 1rem;
                background: transparent;
                border: 2px solid $white;
                opacity: 1;
                height: 22px;
                width: 22px;
                position: relative;
                @include display(flex);
                @include justify-content(center);
                @include align-items(center);
                outline: 0;

                @include breakpoint(mobile-only) {
                    width: 16px;
                    height: 16px;
                }

                &.focus,
                &.active {
                    outline: 0;
                    -moz-outline-style: none;
                }

                &::after {
                    content: '';
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                    background: $white;
                    position: absolute;

                    @include breakpoint(mobile-only) {
                        width: 4px;
                        height: 4px;
                    }
                }

                &-active {
                    background: $white;
                    opacity: 1;
                    border-color: $white;

                    &::after {
                        width: 8px;
                        height: 8px;
                        background: $black;

                        @include breakpoint(mobile-only) {
                            width: 6px;
                            height: 6px;
                        }
                    }
                }
            }
        }
    }

    .swiper-pagination-progressbar {
        .swiper-pagination-progressbar-fill {
            background: $accent-color-1;
        }
    }

    .g-swiper-slider {
        .swiper-slide {
            position: relative;

            .swiper-bg {
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              background-size: cover;
              background-repeat: no-repeat;
              background-position: center;
            }

            video {
                position: absolute;
                z-index: 10;
                width: 100%;

                @include breakpoint(tablet-range) {
                    height: 100%;
                }

                @include breakpoint(mobile-only) {
                    height: 100%;
                }
            }

            .swiper-link-overlay {
                position: absolute;
                z-index: 100;
                width: 100%;
                height: 100%;
            }

            .slide {
                position: absolute;
                margin: 0 auto;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                @include transform-style(preserve-3d);
                z-index: 20;

                .slide-content-wrapper {
                    @include display(flex);
                    @include align-items(center);
                    @include justify-content(center);
                    height: 100%;

                    .slide-content {
                        text-align: center;

                        .g-swiper-text {
                            @include responsive-font($responsive-font-size + 0.1, $core-font-size + 0.3, false, false);
                            font-weight: $font-weight-regular;
                            line-height: 1.3;
                            margin: 1rem 4rem;
                            max-width: 1200px;
                            color: $white;

                            @include breakpoint(mobile-only) {
                                font-size: $core-font-size; 
                            }
                        }

                        .g-swiper-title {
                            @include responsive-font($responsive-font-size + 0.5, $core-font-size + 0.8, false, false);
                            font-weight: $font-weight-medium;
                            line-height: 1.3;
                            margin: 1rem 3rem;
                            color: $white;

                            @include breakpoint(mobile-only) {
                                font-size: $core-font-size + 0.2; 
                            }
                        }

                        .button {
                            @include breakpoint(mobile-only) {
                                padding: 0.4rem 1rem;
                                font-size: 0.8rem;
                            }
                        }
                    }
                }
            }
        }
    }
}

.swiper-navigation {
    div[class*="button-next"],
    div[class*="button-prev"] {
        position: absolute;
        font-size: 4rem;
        color: $white;
        outline: none;
        z-index: 20;
        cursor: pointer;
        @include display(flex);
        @include justify-content(center);
        @include align-items(center);

        @include breakpoint(mobile-only) {
            font-size: 3rem;
        }
    }

    div[class*="button-next"] {
        right: 1rem;
        top: 50%;
        margin: 0;
        padding: 0;
        transform: translateY(-50%);
    }

    div[class*="button-prev"] {
        left: 1rem;
        top: 50%;
        margin: 0;
        padding: 0;
        transform: translateY(-50%);
    }

    &.rtl {
        div[class*="button-prev"] {
            right: 1rem;
            left: auto;
        }

        div[class*="button-next"] {
            right: auto;
            left: 1rem;
        }
    }
}

div[class*="g-swiper-thumbs"] {
    margin: 2rem 0;
    font-weight: $font-weight-bold;

    &.gallery-thumbs {
        box-sizing: border-box;
        cursor: pointer;
    }

    &.gallery-thumbs .swiper-slide {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 6px;
        position: relative;
        pointer-events: auto;

        .g-swiper-thumbs-title {
            @include display(flex);
            @include align-items(flex-end);
            @include justify-content(center);
            @include responsive-font($responsive-font-size - 0.1, $core-font-size, false, false);
            height: 100%;
            margin: -1rem 2rem 0;
            text-align: center;
            color: $white;

            span {
                z-index: 2;
            }
        }

        &:before {
            position: absolute;
            width: 100%;
            height: 100%;
            content: '';
            border-radius: 6px;
            transition: opacity 0.5s ease-in-out;
        }
    }

    &.gallery-thumbs .swiper-slide-thumb-active {
        &:before {
            opacity: 0.25;
        }
    }

    .swiper-navigation {
        div[class*="button-next"],
        div[class*="button-prev"] {
            font-size: 3rem;
            opacity: 1;
            z-index: 20;

            @include breakpoint(mobile-only) {
                font-size: 2rem;
            }
        }
    }
}

/*******************************************/
/* kenburns animation */
/*******************************************/
.swiper-slide-active .kenburns {
    @include animation(kenburns ease-out);
}

@-webkit-keyframes kenburns {
    0% {
        @include transform(scale(1.5) rotate(0.02deg));
    }
    100% {
        @include transform(scale(1) rotate(0.02deg));
    }
}

@keyframes kenburns {
    0% {
        @include transform(scale(1.5) rotate(0.02deg));
    }
    100% {
        @include transform(scale(1) rotate(0.02deg));
    }
}

/*******************************************/
/* kenburnsDownLeft animation */
/*******************************************/
.swiper-slide-active .kenburnsDownLeft {
    @include animation(kenburnsDownLeft ease-out);
}

@-webkit-keyframes kenburnsDownLeft {
    0% {
        @include transform(scale(1.5) translate(10%, -10%));
    }
    100% {
        @include transform(scale(1) translate(0, 0));
    }
}

@keyframes kenburnsDownLeft {
    0% {
        @include transform(scale(1.5) translate(10%, -10%));
    }
    100% {
        @include transform(scale(1) translate(0, 0));
    }
}

/*******************************************/
/* kenburnsDownRight animation */
/*******************************************/
.swiper-slide-active .kenburnsDownRight {
    -webkit-animation: kenburnsDownRight ease-out;
    animation: kenburnsDownRight ease-out;
}

@-webkit-keyframes kenburnsDownRight {
    0% {
        @include transform(scale(1.5) translate(-10%, -10%));
    }
    100% {
        @include transform(scale(1) translate(0, 0));
    }
}

@keyframes kenburnsDownRight {
    0% {
        @include transform(scale(1.5) translate(-10%, -10%));
    }
    100% {
        @include transform(scale(1) translate(0, 0));
    }
}

/*******************************************/
/* kenburnsDown animation */
/*******************************************/
.swiper-slide-active .kenburnsDown {
    -webkit-animation: kenburnsDown ease-out;
    animation: kenburnsDown ease-out;
}

@-webkit-keyframes kenburnsDown {
    0% {
        @include transform(scale(1.5) translate(0, -10%));
    }
    100% {
        @include transform(scale(1) translate(0, 0));
    }
}

@keyframes kenburnsDown {
    0% {
        @include transform(scale(1.5) translate(0, -10%));
    }
    100% {
        @include transform(scale(1) translate(0, 0));
    }
}

/*******************************************/
/* kenburnsLeft animation */
/*******************************************/
.swiper-slide-active .kenburnsLeft {
    -webkit-animation: kenburnsLeft ease-out;
    animation: kenburnsLeft ease-out;
}

@-webkit-keyframes kenburnsLeft {
    0% {
        @include transform(scale(1.5) translate(10%, 0));
    }
    100% {
        @include transform(scale(1) translate(0, 0));
    }
}

@keyframes kenburnsLeft {
    0% {
        @include transform(scale(1.5) translate(10%, 0));
    }
    100% {
        @include transform(scale(1) translate(0, 0));
    }
}

/*******************************************/
/* kenburnsRight animation */
/*******************************************/
.swiper-slide-active .kenburnsRight {
    -webkit-animation: kenburnsRight ease-out;
    animation: kenburnsRight ease-out;
}

@-webkit-keyframes kenburnsRight {
    0% {
        @include transform(scale(1.5) translate(-10%, 0));
    }
    100% {
        @include transform(scale(1) translate(0, 0));
    }
}

@keyframes kenburnsRight {
    0% {
        @include transform(scale(1.5) translate(-10%, 0));
    }
    100% {
        @include transform(scale(1) translate(0, 0));
    }
}

/*******************************************/
/* kenburnsUpLeft animation */
/*******************************************/
.swiper-slide-active .kenburnsUpLeft {
    -webkit-animation: kenburnsUpLeft ease-out;
    animation: kenburnsUpLeft ease-out;
}

@-webkit-keyframes kenburnsUpLeft {
    0% {
        @include transform(scale(1.5) translate(10%, 10%));
    }
    100% {
        @include transform(scale(1) translate(0, 0));
    }
}

@keyframes kenburnsUpLeft {
    0% {
        @include transform(scale(1.5) translate(10%, 10%));
    }
    100% {
        @include transform(scale(1) translate(0, 0));
    }
}

/*******************************************/
/* kenburnsUpRight animation */
/*******************************************/
.swiper-slide-active .kenburnsUpRight {
    -webkit-animation: kenburnsUpRight ease-out;
    animation: kenburnsUpRight ease-out;
}

@-webkit-keyframes kenburnsUpRight {
    0% {
        @include transform(scale(1.5) translate(-10%, 10%));
    }
    100% {
        @include transform(scale(1) translate(0, 0));
    }
}

@keyframes kenburnsUpRight {
    0% {
        @include transform(scale(1.5) translate(-10%, 10%));
    }
    100% {
        @include transform(scale(1) translate(0, 0));
    }
}

/*******************************************/
/* kenburnsUp animation */
/*******************************************/
.swiper-slide-active .kenburnsUp {
    -webkit-animation: kenburnsUp ease-out;
    animation: kenburnsUp ease-out;
}

@-webkit-keyframes kenburnsUp {
    0% {
        @include transform(scale(1.5) translate(0, 10%));
    }
    100% {
        @include transform(scale(1) translate(0, 0));
    }
}

@keyframes kenburnsUp {
    0% {
        @include transform(scale(1.5) translate(0, 10%));
    }
    100% {
        @include transform(scale(1) translate(0, 0));
    }
}