.hero-cup,
.hero-birds,
.hero-sun-and-cloud,
.hero-flowers,
.hero-grass,
.hero-clouds,
.hero-flying-elements {
	height: 70vh;
	position: absolute;
    top: 10%;
	left: 50%;
    pointer-events: none;
}

.hero-clouds {
    z-index: 7;
	-webkit-transform: translateZ(400px) translateX(-50%);
	transform: translateZ(400px) translateX(-50%);
}

.hero-flying-elements {
    z-index: 6;
	-webkit-transform: translateZ(420px) translateX(-50%);
	transform: translateZ(420px) translateX(-50%);
}

.hero-cup {
    z-index: 5;
	-webkit-transform: translateZ(320px) translateX(-50%);
	transform: translateZ(320px) translateX(-50%);
}

.hero-birds {
    z-index: 6;
	-webkit-transform: translateZ(380px) translateX(-50%);
	transform: translateZ(380px) translateX(-50%);
}

.hero-sun-and-cloud {
    z-index: 4;
	-webkit-transform: translateZ(260px) translateX(-50%);
	transform: translateZ(260px) translateX(-50%);
}

.hero-flowers {
    z-index: 3;
	-webkit-transform: translateZ(240px) translateX(-50%);
	transform: translateZ(240px) translateX(-50%);
}

.hero-grass {
    z-index: 2;
	-webkit-transform: translateZ(200px) translateX(-50%);
	transform: translateZ(200px) translateX(-50%);
}
		
.tilt {
	width: 100%;
	height: 95%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
    pointer-events: none;
}

.hero-parallax {
    z-index: 20;
}

@media (max-width: 767px) {
    .hero-headline {
        width: 100%;
    }
    
    .hero-cup,
    .hero-birds,
    .hero-sun-and-cloud,
    .hero-flowers,
    .hero-grass,
    .hero-clouds,
    .hero-flying-elements {
        height: 50vh;
        top: 20%;
    }
}