.swiper-container {
    --swiper-theme-color: #CC0000;

    --swiper-navigation-size: 26px;
    --swiper-navigation-color: var(--swiper-theme-color);
    --swiper-pagination-color: var(--swiper-theme-color);
    --swiper-pagination-bullet-horizontal-gap: 0px;
    --swiper-pagination-bullet-vertical-gap: 10px;
    --swiper-pagination-bullet-size: 14px;
    --swiper-pagination-bullet-width: 38px;
    --swiper-pagination-bullet-height: auto;
    --swiper-pagination-bullet-opacity: 1;
    --swiper-pagination-bullet-inactive-color: #f9edc6;
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-bullet-horizontal-gap: 4px;

    --swiper-preloader-color: var(--swiper-theme-color);
    --swiper-virtual-size: 80px;
}

.swiper-container {
    position: relative;
    display:inline-block;
    width: 100%;
    min-height:500px;
    padding-bottom:40px;
}

.myswiper{
        width: 100%;
        height: 70em;
        padding-right:10%;
        position:relative;
    }
    .myswiper img{
        width:100%;
    }

/* fix the buttons positions */
.swiper-button-prev { left: 0; }
.swiper-button-next { right: 0; }
.myswiper [class^=swiper-button]{
    transform:rotate(90deg);
    top: initial;
    left: initial;
    right: 10px;
    margin: 0;
}
.myswiper .swiper-button-prev{ position:absolute;top:9rem;right:3rem; }
.myswiper .swiper-button-next{ position:absolute;top:11rem;right:3rem; }
.swiper-button-next::after, .swiper-button-prev::after {
  font-family: swiper-icons;
  font-size: 20px;
}
.myswiper .swiper-pagination{ right:0px; margin-top:-15px; }
.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets { right: 0px; border-radius:2px; }
.swiper-pagination-bullet-active { color: #f9edc6; }

.swiper-slide.card { border:none; border-width:0; background:#f9edc6; border-radius: 5px; }
.swiper-slide.card:after { background: #555; }
.myswiper img { border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-left-radius: 0rem;border-bottom-right-radius: 0px; }

.myswiper .slide-content { padding:1em; font-size: 1em; }
.myswiper .slide-content h2 { font-size: 1.3em; font-weight: bold; color: #34020E; text-align:center; margin-bottom: 0.6em;}
.myswiper .slide-content p { color: #222; }
.myswiper .slide-content a:hover { color: #CC0000; }

.swiper-slide{
opacity: 0;
}
.swiper-slide-prev,
.swiper-slide-active,
.swiper-slide-next{
opacity: 1;
}

.swiper-slide-active { height:auto !important; width:100% !important; transform:scale(1) !important; }
.swiper-slide-prev { transform: translate3d(0px, 140px, -400px) rotateX(0deg) rotateY(0deg) scale(1) !important; }
.swiper-slide-next {  height:auto !important; transform: translate3d(0px, 20px, -400px) rotateX(0deg) rotateY(0deg) scale(1) !important; margin-top:-140px; }





.swiper-slide-prev, .swiper-slide-next { filter: grayscale(100%); opacity: .6; }
.swiper-pagination-bullet { border-radius: 0; font-size: 0.9em; }

@media (max-width: 576px) { 
.swiper-container { margin-top:0px;padding-bottom:0px; }
.myswiper { width: 100%; height: 69em; padding-right:15%; }
.myswiper img { width:100%; }
.swiper-slide-prev { transform: translate3d(0px, 130px, -400px) rotateX(0deg) rotateY(0deg) scale(1) !important; }
.swiper-slide-next { transform: translate3d(0px, 60px, -400px) rotateX(0deg) rotateY(0deg) scale(1) !important; margin-top:-140px; }
}


@media (min-width: 400px) { 
.myswiper .swiper-button-prev{ position:absolute;top:9rem;right:3.5rem; }
.myswiper .swiper-button-next{ position:absolute;top:11rem;right:3.5rem; }
.swiper-button-next::after, .swiper-button-prev::after {
  font-family: swiper-icons;
  font-size: 20px;
}
}

@media (min-width: 478px) { 
.myswiper .swiper-button-prev{ position:absolute;top:9rem;right:4rem; }
.myswiper .swiper-button-next{ position:absolute;top:11rem;right:4rem; }
.swiper-button-next::after, .swiper-button-prev::after {
  font-family: swiper-icons;
  font-size: 20px;
}
}

@media (min-width: 768px) { 
.myswiper .swiper-button-prev{ position:absolute;top:8rem;right:4.5rem; }
.myswiper .swiper-button-next{ position:absolute;top:10.5rem;right:4.5rem; }
.swiper-button-next::after, .swiper-button-prev::after {
  font-family: swiper-icons;
  font-size: 24px;
}
}


@media (min-width: 1200px) { 
.myswiper .swiper-button-prev{ position:absolute;top:8rem;right:5rem; }
.myswiper .swiper-button-next{ position:absolute;top:10.5rem;right:5rem; }
.swiper-button-next::after, .swiper-button-prev::after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
}
}