@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Edu+AU+VIC+WA+NT+Pre:wght@400..700&display=swap');
.cSlider-wrapper {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    perspective: 7000px;
    padding-top: 0;
}

.cSlide {
    width: 100%;
    position: absolute;
    border-radius: 5px;
    overflow: hidden;
    transition: transform 1s ease;
    background: white;
}
.cSlide-head {
    background: #fff;
    height: 20px;
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 10px;
}
.cSlide-head-circle {
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background: #666;
    margin-right: 6px;
}
.cSlide-body {
    width: 100%;
    display: block;
    position: relative;
}
.cSlide-body img {
    width: 100%;
}
.cSlide .cSlide-body img {
    opacity: 0.7;
}
.translate-object-0.cSlide {
    box-shadow: 5px 5px 5px rgba(0, 0, 0, .4);
}
.translate-object-0.cSlide .cSlide-body img {
    opacity: 1;
}
.hide-slide { animation: hideSlide 1s forwards;  }
.translate-object-0 { transform: translateZ(-500px ) translateY(0px ) translateX(0px  ) rotate(1deg) rotateY(-8deg) rotateX(5deg); z-index: 10 }
.translate-object-1 { transform: translateZ(-1250px) translateY(10px) translateX(45px ) rotate(1deg) rotateY(-8deg) rotateX(5deg); z-index: 9 }
.translate-object-2 { transform: translateZ(-2000px) translateY(20px) translateX(90px ) rotate(1deg) rotateY(-8deg) rotateX(5deg); z-index: 8 }
.translate-object-3 { transform: translateZ(-2750px) translateY(30px) translateX(135px) rotate(1deg) rotateY(-8deg) rotateX(5deg); z-index: 7 }
.translate-object-4 { transform: translateZ(-3500px) translateY(40px) translateX(180px) rotate(1deg) rotateY(-8deg) rotateX(5deg); z-index: 6 }
.translate-object-5 { transform: translateZ(-4250px) translateY(50px) translateX(225px) rotate(1deg) rotateY(-8deg) rotateX(5deg); z-index: 5 }
.translate-object-6 { transform: translateZ(-5000px) translateY(60px) translateX(270px) rotate(1deg) rotateY(-8deg) rotateX(5deg); z-index: 4 }
@keyframes hideSlide {
    0% {
        opacity: 1;
        left: 0;
        z-index: 11;
    }
    50% {
        opacity: 0;
        left: -50%;
        z-index: 11;
    }
    100% {
        opacity: 1;
        left: 0;
        z-index: 4;
    }
}
.chero-background {
    position: absolute;
    top: 90px;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    height: 600px;
    -webkit-transform: skewY(-10deg);
    transform: skewY(-10deg);
    -webkit-transform-origin: 0;
    transform-origin: 0;
    z-index: -1;
}

.chero-background__stripe {
    height: 150px;
    position: relative;
    opacity: 0;
    width: 100%;
    border-radius: 8px;
    animation: cstripeSlideIn .1s forwards;
}
.chero-background__stripe:first-child {
    left: 60%;
    right: auto;
    background: #b5e0d3;
}
.chero-background__stripe:nth-child(2) {
    left: 66%;
    bottom: auto;
    background: #b4cee9;
}
.chero-background__stripe:nth-child(3) {
    left: 43%;
    background: #c8b6d8;
}
.chero-background__stripe:nth-child(4) {
    left: 83%;
    bottom: 0;
    background: #8fb5de;
}
@keyframes cstripeSlideIn {
    0% {
        opacity:0;
        transform:translateX(150px) skew(0)
    }
    to {
        opacity:.7;
        transform:translateX(-150px) skew(-12deg)
    }
}
.chero {
    height: 100%;
    position: relative;
    z-index: 0;
}
@media screen and (max-width: 600px) {
.cSlider1{
margin-top:-100px;
}
}
.cSlider1{
padding-top:150px; 
padding-bottom:300px;
}
.bebas-neue-regular {
font-family: "Bebas Neue", sans-serif;
font-weight: 400;
font-style: normal;
}