.cardslider {
     width: 100%;
     height: 100%;
     position: relative;
     overflow: hidden;
}
 .cardslider__cards, .cardslider__dots-nav {
     margin: 0;
     padding: 0;
     list-style: none;
}
 .cardslider__cards {
     width: 100%;
     height: 80%;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     transform-style: preserve-3d;
}
 .cardslider__dots-nav {
     position: absolute;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
}
 .cardslider__dot {
     display: inline-block;
     margin-right: 8px;
}
 .cardslider__dot-btn {
     position: relative;
     border-radius: 50%;
     border: 2px solid white;
     width: 10px;
     height: 10px;
     display: block;
     appearance: none;
     background: none;
     padding: 0;
}
 .cardslider__dot-btn::before {
     content: ' ';
     position: absolute;
     display: block;
     background: white;
     width: 6px;
     height: 6px;
     border-radius: 50%;
     left: 50%;
     top: 50%;
     transition: all .5s;
     transform: translate(-50%, -50%) scale(0);
}
 .cardslider__dot--active .cardslider__dot-btn::before {
     transform: translate(-50%, -50%) scale(1.1);
}
 .cardslider__card {
     background: #d7d7d7;
     display: block;
     border-radius: 10px;
     width: 90%;
     height: 100%;
     position: absolute;
     will-change: transform, opacity, background;
     transition: background 0.5s ease-out, opacity 0.5s;
/*     right: 0;*/
     box-shadow: 3px 2px 20px -1px rgb(0 0 0 / 5%);
/*    padding: 0px !important;
    margin: 0px !important;*/
}
 .cardslider__card--transitions {
     transition: background 0.5s ease-out, transform 0.5s ease-out, opacity 0.5s;
}
 .cardslider__card--invisible {
     opacity: 0;
}
 .cardslider--direction-up .cardslider__card {
     transform: scale(0.8) translate3d(0, 17.25%, 0);
}
 .cardslider--direction-up .cardslider__card--index-0 {
     transform: translate3d(0, 0, 4px);
}
 .cardslider--direction-up .cardslider__card--index-1 {
     transform: scale(0.95) translate3d(0, 4.31%, 3px);
}
 .cardslider--direction-up .cardslider__card--index-2 {
     transform: scale(0.9) translate3d(0, 8.61%, 2px);
}
 .cardslider--direction-up .cardslider__card--index-3 {
     transform: scale(0.85) translate3d(0, 12.91%, 1px);
}
 .cardslider--direction-up .cardslider__card--out {
     transform: translate3d(0, 150%, 4px);
}
 .cardslider--sortback-up {
     animation: sortback-up 0.67s;
}
 .cardslider--sortfront-up {
     animation: sortfront-up 0.67s;
}
 .cardslider--direction-down .cardslider__card {
     transform: scale(0.8) translate3d(0, -17.25%, 0);
}
 .cardslider--direction-down .cardslider__card--index-0 {
     transform: translate3d(0, 15px, 4px);
}
 .cardslider--direction-down .cardslider__card--index-1 {
     transform: scale(0.95) translate3d(0, -4.31%, 3px);
}
 .cardslider--direction-down .cardslider__card--index-2 {
     transform: scale(0.9) translate3d(0, -15.61%, 2px);
}
 .cardslider--direction-down .cardslider__card--index-3 {
     transform: scale(0.85) translate3d(0, -12.91%, 1px);
}
 .cardslider--direction-down .cardslider__card--out {
     transform: translate3d(0, 150%, 4px);
}
 .cardslider--sortback-down {
     animation: sortback-down 0.67s;
}
 .cardslider--sortfront-down {
     animation: sortfront-down 0.67s;
}
 .cardslider--direction-right .cardslider__card {
     transform: scale(0.8) translate3d(-17.25%, 0, 0);
}
 .cardslider--direction-right .cardslider__card--index-0 {
     transform: translate3d(0, 0, 4px);
}
 .cardslider--direction-right .cardslider__card--index-1 {
     transform: scale(0.95) translate3d(-4.31%, 0, 3px);
}
 .cardslider--direction-right .cardslider__card--index-2 {
     transform: scale(0.9) translate3d(-8.61%, 0, 2px);
}
 .cardslider--direction-right .cardslider__card--index-3 {
     transform: scale(0.85) translate3d(-12.91%, 0, 1px);
}
 .cardslider--direction-right .cardslider__card--out {
     transform: translate3d(150%, 0, 4px);
}
 .cardslider--sortback-right {
     animation: sortback-right 0.67s;
}
 .cardslider--sortfront-right {
     animation: sortfront-right 0.67s;
}
 .cardslider--direction-left .cardslider__card {
     transform: scale(0.8) translate3d(17.25%, 0, 0);
}
 .cardslider--direction-left .cardslider__card--index-0 {
     transform: translate3d(0, 0, 4px);
}
 .cardslider--direction-left .cardslider__card--index-1 {
     transform: scale(0.95) translate3d(4.31%, 0, 3px);
}
 .cardslider--direction-left .cardslider__card--index-2 {
     transform: scale(0.9) translate3d(8.61%, 0, 2px);
}
 .cardslider--direction-left .cardslider__card--index-3 {
     transform: scale(0.85) translate3d(12.91%, 0, 1px);
}
 .cardslider--direction-left .cardslider__card--out {
     transform: translate3d(150%, 0, 4px);
}
 .cardslider--sortback-left {
     animation: sortback-left 0.67s;
}
 .cardslider--sortfront-left {
     animation: sortfront-left 0.67s;
}
/* .cardslider__direction-nav {
     position: absolute;
}*/
.cardslider__direction-nav button {
    position: absolute;
    top: 50%;
}
 .cardslider__nav-next, .cardslider__nav-prev {
     display: block;
     background: none;
     border: none;
     width: 40px;
     height: 40px;
     text-indent: -9999px;
     outline: none;
     transition: all .3s;
/*     border: 2px solid white;
     border-radius: 50%;*/
     background-repeat: no-repeat;
     background-position: center center;
     background-size: 20px 20px;
     padding: 0;
     cursor: pointer;
}
 .cardslider__nav-next:active, .cardslider__nav-prev:active {
     transform: scale(0.8);
}
 .cardslider__nav-next {
     margin-bottom: 10px;
     background-image: url("../img/card_slider_right_arrow.svg");
     right: 7px;
    /*position: relative;
    bottom: 80px;*/
}
 .cardslider__nav-prev {
     background-image: url("../img/card_slider_left_arrow.svg");
     position: relative;
    /*top: 105px;*/
    left: 7px;
}
 @keyframes sortback-down {
     0% {
         transform: translate3d(0, 0, 4px) scale(1);
    }
     50% {
         transform: translate3d(0, 150%, 4px) scale(1);
    }
     60% {
         transform: translate3d(0, 150%, 0) scale(0.8);
    }
     100% {
         transform: translate3d(0, 0, 0) scale(0.8);
    }
}
 @keyframes sortfront-down {
     0% {
         transform: translate3d(0, 0, 0) scale(0.8);
    }
     50% {
         transform: translate3d(0, 150%, 0) scale(0.8);
    }
     60% {
         transform: translate3d(0, 150%, 4px) scale(1);
    }
     100% {
         transform: translate3d(0, 0, 4px) scale(1);
    }
}
 @keyframes sortback-up {
     0% {
         transform: translate3d(0, 0, 4px) scale(1);
    }
     50% {
         transform: translate3d(0, -150%, 4px) scale(1);
    }
     60% {
         transform: translate3d(0, -150%, 0) scale(0.8);
    }
     100% {
         transform: translate3d(0, 0, 0) scale(0.8);
    }
}
 @keyframes sortfront-up {
     0% {
         transform: translate3d(0, 0, 0) scale(0.8);
    }
     50% {
         transform: translate3d(0, -150%, 0) scale(0.8);
    }
     60% {
         transform: translate3d(0, -150%, 4px) scale(1);
    }
     100% {
         transform: translate3d(0, 0, 4px) scale(1);
    }
}
 @keyframes sortback-left {
     0% {
         transform: translate3d(0, 0, 4px) scale(1);
    }
     50% {
         transform: translate3d(-150%, 0, 4px) scale(1);
    }
     60% {
         transform: translate3d(-150%, 0, 0) scale(0.8);
    }
     100% {
         transform: translate3d(0, 0, 0) scale(0.8);
    }
}
 @keyframes sortfront-left {
     0% {
         transform: translate3d(0, 0, 0) scale(0.8);
    }
     50% {
         transform: translate3d(-150%, 0, 0) scale(0.8);
    }
     60% {
         transform: translate3d(-150%, 0, 4px) scale(1);
    }
     100% {
         transform: translate3d(0, 0, 4px) scale(1);
    }
}
 @keyframes sortback-right {
     0% {
         transform: translate3d(0, 0, 4px) scale(1);
    }
     50% {
         transform: translate3d(150%, 0, 4px) scale(1);
    }
     60% {
         transform: translate3d(150%, 0, 0) scale(0.8);
    }
     100% {
         transform: translate3d(0, 0, 0) scale(0.8);
    }
}
 @keyframes sortfront-right {
     0% {
         transform: translate3d(0, 0, 0) scale(0.8);
    }
     50% {
         transform: translate3d(150%, 0, 0) scale(0.8);
    }
     60% {
         transform: translate3d(150%, 0, 4px) scale(1);
    }
     100% {
         transform: translate3d(0, 0, 4px) scale(1);
    }
}