.bg-bird {
    position: relative;
}
.bg-cloud-1 {
    position: relative;
    width: 100%;
    padding-top: 45%;
    margin-top: -27%;
}
.bg-cloud-1:after {
    content: '';
    /*background: url(../images/cloud_1_bg.svg) no-repeat;*/
    background: linear-gradient(#ffffff, #BCF6FA);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% auto;
    z-index: -1;
}
.bg-road {
    position: relative;
    width: 100%;
    padding-top: 62%;
    margin-top: -15%;
}
.bg-road > .content {
    position: absolute;
    top: 24%;
    width: 100%;
    left: 0;
}
.bg-road:after {
    content: '';
    background: url(../images/road_bg.svg) no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% auto;
    z-index: -1;
}
.biker {
    position: absolute;
    bottom: 20%;
    right: 20%;
    width: 20%;
}
.coins {
    position: absolute;
    bottom: 35%;
    right: 0;
    height: 7%;
}
.coin {
    height: 100%;
    padding-left: 16px;
    padding-right: 16px;
}
.bg-city {
    position: relative;
    width: 100%;
    padding-top: 73.5%;
    margin-top: -30%;
}
.bg-city:after {
    content: '';
    background: url(../images/bg_city.svg) no-repeat;
    position: absolute;
    top: 27%;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% auto;
    z-index: -1;
}
.flowers {
    position: absolute;
    top: 7%;
    left: 3%;
    width: 97%;
    background-size: 100% auto;
}
.bg-city > .content {
    position: absolute;
    top: 45%;
    width: 100%;
    left: 0;
}
.main {
    position: relative;
}
.people-talking {
    position: absolute;
    width: 20%;
    top: -8%;
    right: 15%;
}
.category {
    padding-top: 225px;
    padding-bottom: 125px;
    background: url(../images/wave_bg.svg) no-repeat right 50px;
    background-size: 50% auto;
}
.photographer {
    width: 160px;
}
.category-icon {
    width: 65px;
}
.text-dark-gray {
    color: #666;
}
.contribution {
    background: url(../images/wave_bg.svg) no-repeat left 50px;
    background-size: 33% auto;
    padding-bottom: 100px;
}
.rewards {
    background: url(../images/wave_bg.svg) no-repeat right 50px;
    background-size: 33% auto;
    padding-bottom: 150px;
}
.bg-light-blue {
    background: rgba(228, 255, 248, 0.5);
    background-image: url(../images/wave_bg.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 33% auto;
}
.bg-dark-green {
    position: relative;
    background: #0C6A4F;
}
.plant1 {
    position: absolute;
    top: -100px;
    width: 100px;
    left: 0;
}
.plant2 {
    position: absolute;
    top: -75px;
    width: 100px;
    right: 0px;
}
.bg-dark-green > .container > .row {
    background-image: url(../images/wave_bg.svg);
    background-repeat: no-repeat;
    background-position: center right;
    position: relative;
}
.clip {
    position: relative;
    z-index: 2;
}
.vali {
    width: 100%;
    max-width: 650px;
}
.sumic-frame > img {
    height: 300px;
}
@media (min-width: 1024px) {
    .px-lg-10 {
        padding-left: 96px!important;
        padding-right: 96px!important;
    }
    .bg-bird:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../images/bg_bird.svg) no-repeat;
        background-size: 100% auto;
        z-index: -1;
    }
}
@media (max-width: 768px) {
    .bg-road > .content {
        top: 15%;
    }
    .contribution, .rewards {
        background-size: 50% auto;
    }
    .rewards {
        padding-bottom: 100px;
    }
    .people-talking {
        top: -5%;
    }
    .category {
        padding-top: 145px;
        padding-bottom: 75px;
    }
    .bg-city > .content {
        top: 40%;
    }

}
@media (max-width: 767px) {
    .bg-road:after {
        background-image: none;
    }
    .bg-city {
        background: #4CBD9C;
        padding-top: 105%!important;
        margin-top: -1%;
    }
    .bg-city:after {
        top: 0;
        background-position-x: center;
        background-size: 188% auto;
        z-index: 1;
    }
    .coins {
        bottom: auto;
        top: 35%;
    }
    .biker {
        bottom: auto;
        right: auto;
        width: 50%;
        top: 33%;
        left: 5%;
    }
    .bg-cloud-1 {
        padding-top: 70%;
    }
    .bg-road {
        padding-top: 0;
        margin-top: -40%;
    }
    .bg-road > .content {
        position: relative;
        top: 0;
        padding: 2rem;
        background: #4CBD9C;
    }
    .bg-city .content {
        padding: 2rem 1rem 5rem;
        position: relative;
        top: 0;
    }
    .people-talking {
        width: 33%;
    }
    .category {
        padding-top: 6rem;
        background-size: 100% auto;
        background-position-y: top;
        padding-bottom: 5rem;
    }
    .contribution {
        background: none;
        padding-bottom: 4rem;
    }
    .rewards {
        background: none;
        padding-bottom: 2rem;
    }
    .bg-light-blue {
        background-image: none;
    }
    .sumic-frame {
        position: absolute;
        right: 0;
        top: 35%;
        width: 50%;
    }
    .sumic-frame > img {
        height: auto;
        width: 100%;
    }
}
@media (max-width: 767px) and (min-width: 501px) {

    .people-talking {
        width: 20%;
    }
}