.swiper-wrapper {
    box-sizing: border-box;
}


.swiper-container .swiper-pagination {
    position: relative;
    opacity: 0;
    transition: opacity .5s linear;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.swiper-pagination-bullet {
    background: transparent;
    opacity: 1;
    border: 1px solid #000;
}

.swiper-pagination-bullet-active {
    background: #000;
    border: 1px solid #000;
}

/* Hero */
.hero .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 6em;
}

.hero .swiper-pagination-bullet {
    background: transparent;
    opacity: 1;
    border: 1px solid #fff;
}

.hero .swiper-pagination-bullet-active{
	background: #fff;
	border: 1px solid #fff;
}

.swiper-container.swiper-container-initialized .swiper-pagination {
    opacity: 1;
    margin-top: 2em;
}

.swiper-container .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    margin-right: 1em;
}

body .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 8px;
}

/* arrow */
.swiper-button-next,
.swiper-button-prev {
    outline: 0;
    top: 30%;
    display: none;
}

.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after,
.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {
    color: #fff;
    outline: none;
    font-size: 1.8em;
}

.swiper-button-next,
.swiper-button-prev {
    z-index: 3;
    border: 0;
    width: 3.5rem;
    height: 3.5rem;
    background: rgba(225, 225, 225, .1);
    border-radius: 100%;
    display: none;
    align-items: center;
    top: 50%;
    margin-top: -1.75em;
    font-size: .6rem;
}


/* ===================================== Responsive  ===================================== */

/*  Tablet Portrait  */
@media screen and (min-width: 768px) {

    .hero-swiper .swiper-pagination {
        float: right;
        text-align: right;
    }

    .hero-swiper .swiper-pagination-bullet {
        margin-left: 1em;
        margin-right: 0;
    }

    .swiper-button-next,
    .swiper-button-prev {
        display: flex;
    }

    .swiper-button-prev {
        left: 2em;
    }

    .swiper-button-next {
        right: 2em;
    }


}

/*  Desktop  */
@media screen and (min-width: 1024px) {

    .swiper-container .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
    }

    body .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 6px;
    }

    .hero .swiper-container .swiper-pagination {
        width: 30%;
    }

    .swiper-button-prev {
        left: 8em;
    }

    .swiper-button-next {
        right: 8em;
    }

}