.bg-street-scene {
	background-repeat: no-repeat;
	background-color: #029ff1;
	background-position: 50% 100%;
	background-size: cover;
	background-image: url(/assets/img/qardl-scene.png);
	position: relative;
}

.q-logo {
	width: 100px;
}

.h-100vh {
	height: 100vh;
}

.dl-store {
	width: 105px;
}

.dl-play {
	width: 105px;
}

.hero {
	position: relative;
	z-index: 10;
}

.fella {
	background-repeat: no-repeat;
	background-position: 50% 100%;
	background-size: contain;
	background-image: url(/assets/img/Phatfella-thumbs-up.webp);
	width: 70vw;
	height: calc(70vw * 1.197);
	position: absolute;
	bottom: 0;
	right: 5vw;
	z-index: 1;
}


.fella-qr-code {
	position: absolute;
	background-repeat: no-repeat;
	bottom: -20px;
	z-index: 1;
	background-position: 23px 85px, 0 100%;
	background-size: 70px 70px, contain;
	width: 300px;
	height: calc(300px * 1.065);
	left: calc(50vw - 150px);
}

.qr-canvas {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}

@media (min-width: 576px) {
	.fella-qr-code {
		background-position: 35px 115px, 0 100%;
		background-size: 100px 100px, contain;
		width: 450px;
		height: calc(450px * 1.065);
		left: calc(50vw - 225px);
	}

	.bg-street-scene {
		min-height: 900px;
	}

}


@media (min-width: 768px) {

	.q-logo {
		width: 200px;
	}

	.dl-store {
		width: 175px;
	}

	.dl-play {
		width: 175px;
	}

	.fella {
		width: 40vw;
		height: calc(40vw * 1.197);
		max-height: 80vh;
	}

	.fella-qr-code {
		background-position: calc(50vw + 50px) 170px, 50vw 100%;
		background-size: 130px 130px, contain;
		height: calc(600px * 1.065);
		left: 0;
		width: 100%;
		bottom: 0;
	}

	.bg-street-scene {
		min-height: 1000px;
	}


}