.video-area {
    float: left;
    width: 100%;
    margin-top: 40px;
}

.video-col {
    float: left;
    width: 49.7%;
    text-align: center;
}

.video-col .item {
    width: 90%;
    margin: 0 auto;
	background-image: url(video1.webp);
    background-position: center;
    background-size: cover;
}

.video-col .item.item_2 {
	background-image: url(../../video2.webp);
}

@media screen and (min-width: 1024px) {
    .m-top {
        margin-top: 80px;
    }
}


/***********---CSS--***********/
.header-top-title {
    font-size: 4rem;
    letter-spacing: 4px;
    font-weight: 400;
    color: #4d4d4d;
}

section h1 {
    font-size: 10rem;
}

@media only screen and (max-width: 768px) {
    section h1 {
        font-size: 7rem;
    }
}

section h1.title-cropped-2 {
    margin-right: 3rem;
}

section h1.title-cropped-3 {
    margin-right: 16rem;
}

.section-1 h1 {
    color: #4d4d4d;
}

.section-2 h1 {
    color: #808080;
}

.section-2 .content-sub-title {
    color: #808080;
    font-size: 4.5rem;
    letter-spacing: 3px;
    margin-right: 4rem;
}

.content-description {
    font-size: 2rem;
    line-height: 54px;
    color: #4e4e4e;
    font-weight: 500;
}

.images-2 {
    position: relative;
    top: -26rem;
    left: 11rem;
}

@media only screen and (max-width: 768px) {
    .images-2 {
        top: -6rem;
        left: 0;
    }
}

@media only screen and (max-width: 1000px) {
    .images-2 {
        top: -6rem;
        left: 0;
    }
}

.section-7 {
    position: relative;
    top: -21rem;
}

@media only screen and (max-width: 768px) {
    .section-7 {
        top: -12rem;
    }
}

@media only screen and (max-width: 1000px) {
    .section-7 {
        top: -2rem;
    }
}

.footer-event {
    top: 23rem;
}

@media only screen and (max-width: 1000px) {
    .footer-event {
        top: 7rem;
    }
}

.footer-event h3 {
    font-size: 2.3rem;
    letter-spacing: 4px;
    font-weight: 400;
}
.event-1 {
    color: #4d4d4d;
}
.event-2, .event-3 {
    color: #808080;
}

.section-7-img {
    margin-top: 11rem;   
}