.section-race {
    background-image: url(../img/race/bg-flag-up.svg), url(../img/race/bg-flag-down.svg);
    background-size: 60%, 56%;
    background-position: top left, bottom right;
    background-repeat: no-repeat;
}

.section-race_in {
    padding: calc(var(--sectionper) * 7) var(--sectionper);
    padding-bottom: 0;
}

@media screen and (min-width: 576px) {
    .section-race_in {
        padding: calc(var(--sectionper) * 3.5) var(--sectionper);
        padding-bottom: 0;
    }
}

@media screen and (min-width: 1280px) {
    .section-race_in {
        padding: calc(var(--sectionper) * 1.5) var(--sectionper);
        padding-bottom: 0;
    }
}

.site-paragraph {
    padding: 0;
}


.section-race_in2 {
    margin-top: -5%;
    margin-bottom: -5%;
    padding-top: 0;
}

.site-title-vertical {
    max-height: 550px;
}

@media screen and (min-width: 1024px) {
    .site-title-vertical {
        position: relative;
        left: -3%;
    }
}

.container-race {
    margin-top: 0%;
}

@media screen and (min-width: 768px) {
    .container-race {
        margin-top: -30%;
        padding-left: 10%;
    }
}

@media screen and (min-width: 1024px) {
    .race-video {
        margin-right: -17.5%;
    }

    .race-video2 {
        margin-right: 0;
        margin-left: -17.5%;
    }
}

@media screen and (min-width: 1280px) {
    .container-race {
        margin-top: -20%;
        padding-left: 5%;
    }
}

.container-race2 {
    padding-left: 0;
}

.race-text {
    text-align: justify;
    overflow-wrap: break-word;
}

@media screen and (min-width: 1024px) {
    .race-text {
        padding-right: 3%;
    }
    .race-text2 {
        padding-right: 0;
        padding-left: 3%;
    }
}

.race-carousel-container {
    position: relative;
    z-index: 10;
    margin: 3% 0;
    transition: transform 0.3s ease, margin 0.3s ease;
    transform: skew(-15deg);
}

.race-carousel-container2 {
    /*     background-image: url(../img/event/bg-black-smile.svg);
    background-size: 56%;
    background-position: top 15px center; */
}

.race-carousel {
    position: relative;
    overflow: visible;
    padding: 0 1%;
}

.race-carousel-item {
    position: relative;
    overflow: visible;
    z-index: 1;
    max-width: 600px;
    margin: 0 -1%;
}

@media screen and (min-width: 576px) {
    .race-carousel-item {
        left: 0;
    }
}

@media screen and (min-width: 1024px) {}

.img-wrapper {
    position: relative;
    overflow: visible;
    transition: all 0.3s ease;
    z-index: 2;
    padding: 0 10%;
}

@media screen and (min-width: 1024px) {
    .img-wrapper {
        padding: 0 5%;
    }
}

.img-wrapper-in {
    position: relative;
    object-fit: contain;
}

.img-wrapper-in img {
    width: 100%;
    height: auto;
    object-fit: fill;
}

.race-carousel-item:not(:hover) .img-wrapper-in img {
    transform: scale(0.8);
    transition: all 0.3s ease;
}

.img-wrapper-in img:hover {
    position: relative;
    transform: scale(1);
    z-index: 10;
    transition: all 0.3s ease;
}

.img-caption {
    position: relative;
    z-index: 2;
    color: white;
    text-align: start;
    overflow-wrap: break-word;
    transform: translate(10%, 50%);
    transition: all 0.3s ease, opacity 0.3s ease;
    font-size: 0.9rem;
    opacity: 0;
    margin-bottom: var(--rowpd);
    min-height: 100px;
}

@media screen and (min-width: 1024px) {
    .img-caption {
        padding-right: 0;
    }
}

.img-wrapper:hover .img-caption {
    opacity: 1;
    margin-bottom: 2rem;
    transform: translate(0, 0);
    transition: all 0.5s ease;
}


.race-carousel-shape {
    position: absolute;
    bottom: 12%;
    left: 11%;
    clip-path: polygon(45px 0, 100% 0, calc(100% - 35px) 100%, 0 100%);
    background-color: #000;
    width: 70%;
    height: 13%;
}

.race-carousel-shape2 {
    bottom: 13%;
    left: 15%;
    clip-path: polygon(40px 0, 100% 0, calc(100% - 40px) 100%, 0 100%);
}

@media screen and (min-width: 480px) {
    .race-carousel-shape {
        height: 15%;
        clip-path: polygon(50px 0, 100% 0, calc(100% - 50px) 100%, 0 100%);
    }

    .race-carousel-shape2 {
        height: 18%;
        clip-path: polygon(55px 0, 100% 0, calc(100% - 55px) 100%, 0 100%);
    }
}

@media screen and (min-width: 576px) {
    .race-carousel-shape {
        left: 9%;
        bottom: 13%;
        width: 80%;
        height: 12%;
        clip-path: polygon(36px 0, 100% 0, calc(100% - 35px) 100%, 0 100%);
    }

    .race-carousel-shape2 {
        left: 11%;
        bottom: 14%;
        width: 76%;
        clip-path: polygon(32px 0, 100% 0, calc(100% - 32px) 100%, 0 100%);
    }
}

@media screen and (min-width: 768px) {
    .race-carousel-shape {
        left: 10%;
        width: 80%;
        bottom: 13%;
        clip-path: polygon(45px 0, 100% 0, calc(100% - 35px) 100%, 0 100%);
    }

    .race-carousel-shape2 {
        bottom: 16%;
        clip-path: polygon(40px 0, 100% 0, calc(100% - 40px) 100%, 0 100%);
    }
}

@media screen and (min-width: 992px) {
    .race-carousel-shape {
        height: 10%;
        bottom: 13%;
        left: 9%;
        width: 82%;
        clip-path: polygon(35px 0, 100% 0, calc(100% - 35px) 100%, 0 100%);
    }

    .race-carousel-shape2 {
        left: 9%;
        bottom: 16%;

    }

}

@media screen and (min-width: 1024px) {
    .race-carousel-shape {
        left: 7%;
        width: 86%;
        height: 12%;
        clip-path: polygon(45px 0, 100% 0, calc(100% - 45px) 100%, 0 100%);
    }

    .race-carousel-shape2 {
        height: 14%;
        left: 7%;
        bottom: 18%;
    }
}

@media screen and (min-width: 1280px) {
    .race-carousel-shape {
        left: 7%;
        bottom: 12%;
        height: 12%;
        clip-path: polygon(50px 0, 100% 0, calc(100% - 50px) 100%, 0 100%);
    }

    .race-carousel-shape2 {
        height: 15%;
        bottom: 17%;
        left: 7%;
    }
}

@media screen and (min-width: 1440px) {
    .race-carousel-shape {
        height: 14%;
        bottom: 11%;
        clip-path: polygon(55px 0, 100% 0, calc(100% - 55px) 100%, 0 100%);
    }

    .race-carousel-shape2 {
        bottom: 15%;
        height: 19%;
        clip-path: polygon(65px 0, 100% 0, calc(100% - 65px) 100%, 0 100%);
    }
}

@media screen and (min-width: 1800px) {
    .race-carousel-shape {
        bottom: 11%;
        height: 11%;
        left: 6.5%;
        clip-path: polygon(50px 0, 100% 0, calc(100% - 35px) 100%, 0 100%);
    }

    .race-carousel-shape2 {
        left: 24%;
        width: 51%;
        bottom: 14%;
        height: 13%;
        clip-path: polygon(50px 0, 100% 0, calc(100% - 50px) 100%, 0 100%);
    }
}