.swiper-container {
    z-index: 1;
}

.mySwiper {
    width: 100%;
    height: 400px;
    margin-top: 48px;
}

@media (min-width:640px){
    .mySwiper {
        height: 480px;
    }
}


.mySwiper .swiper-slide {
    flex-shrink: 0;
    position: relative;
    transition-property: transform;
    background-repeat: no-repeat;
    width: 260px !important;
    height: 260px !important;
    background-size: 100%;
    border-radius: 10px;
}

@media (min-width: 640px) {
    .mySwiper .swiper-slide {
        width: 350px !important;
        height: 350px !important;
    }
}

.mySwiper .swiper-slide small {
    font-size: 12px;
    color: #fff;
}

/*
.swiper-slide p {
    font-family: 'myfont';
    font-size: 20   px;
    text-transform: uppercase;
    color: white;
    letter-spacing: 2px;
    text-align: center;
    margin-top: 5px;
}
*/
.mySwiper .swiper-slide img {
    border-radius: 10px;
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: -5px !important;
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1) !important;
    background: #8dc442 !important;
    width: 11px !important;
    height: 11px !important;
}

.swiper-pagination-bullet {
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .3);
    width: 11px !important;
    height: 11px !important;
    background: #8dc442 !important;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after,
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    content: 'prev';
    color: #8dc442;
}

/*Unrelated*/
.mySwiper .swiper-slide p {
    color: #8dc442;
    font-weight: 400;
    font-style: italic;
    margin-top: 10px;
    text-align: center;
    font-size: 21px;
    letter-spacing: 1px;
}

/*Under Swiper Carousel*/

.swiper-auto-slide .swiper-slide span {
    opacity: 0;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

.swiper-auto-slide .swiper-slide.swiper-slide-active span {
    opacity: 1;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

/* slider navigation */
.swiper-next.swiper-button-disabled,
.swiper-prev.swiper-button-disabled {
    opacity: 0.6;
}

.swiper-button-next,
.swiper-button-prev {
    height: 30px;
    width: 30px;
    line-height: 30px;
    border-radius: 3px;
    margin: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    outline: none;
}

.swiper-button-next.large,
.swiper-button-prev.large {
    height: 62px;
    width: 62px;
    line-height: 62px;
    font-size: 18px;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    display: none;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -ms-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}

.swiper-button-next {
    right: 20px;
}

.swiper-button-prev {
    left: 20px;
}