* { color: #fff; margin: 0; font-family: sans-serif; }
html { height: 100%; }
body { padding: 0; margin: 0; background: #000; }
iframe { width: 100%; border: none; overflow: hidden; background: none; }

.bg { background: linear-gradient(170deg, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%), radial-gradient(rgba(218, 33, 40, 1) 50%, rgba(218, 33, 40, 0) 100%), linear-gradient(#7f1e20 0%, #7f1e20 100%); width: 100%; height: 100vh; position: fixed; z-index: -1; }
.hero { width: 100%; height: 80vh; margin-bottom: 30vh; display: flex; position: relative; justify-content: center; align-items: flex-end; background: url('hero.png') no-repeat center top; background-size: contain; }
.hero .col-nagrade { width: 50%; position: relative; }

.packshots { position: absolute; }
.packshots img:first-child { position: absolute; width: calc(1420vh / 34); height: auto; bottom: 52vh; right: 29vh; }
.packshots img:last-child { position: absolute; width: calc(1580vh / 38); height: auto; bottom: 57vh; left: 29vh; }

.dnevne-naslov, .tjedne-naslov, .glavna-naslov { position: absolute; text-transform: uppercase; text-align: center; line-height: 1; font-weight: 900; }
.dnevne-naslov {bottom: 47vh;left: 30vh;}
.tjedne-naslov {top: -52vh;right: 37vh;}
.dnevne-naslov, .tjedne-naslov {font-size: 3vh;}
.glavna-naslov {font-size: 3.5vh;bottom: 22vh;left: 16vh;}
.kolicina { display: inline-flex; align-items: center; justify-content: center; position: absolute; background: #fff; font-size: 4vh; color: #d51317; font-weight: 700; text-transform: uppercase; padding: 1vh; border-radius: 50%;  }
.opis { display: inline-block; position: absolute; font-size: 1.8vh; background: #fff; color: #d51317; font-weight: 700; padding: 4px 8px; border-radius: 20px; }

.nagrada h3 {font-size: 2.5vh;}
.nagrada h3 span { display: block; }

.nagrada-paket img {position: absolute;bottom: -17vh;right: 7vh;width: 34vh;height: auto;}
.nagrada-paket .kolicina {bottom: -8vh;right: 36vh;width: 7vh;height: 7vh;}
.nagrada-paket .opis {bottom: -14vh;right: 23vh;}

.nagrada-iphone img {position: absolute;bottom: 27vh;right: 30vh;width: 12vh;height: auto;filter: drop-shadow(5px 9px 9px rgba(0, 0, 0, .5));}
.nagrada-iphone h3 {position: absolute;bottom: 20vh;right: 25.5vh;text-align: center;}
.nagrada-iphone .kolicina {right: 41.3vh;bottom: 28vh;width: 5vh;height: 5vh;}
.nagrada-iphone .opis {right: 28vh;bottom: 16vh;}

.nagrada-dnevna img {position: absolute;bottom: 32vh;left: 42vh;width: 20vh;height: auto;transform: rotate(-10deg);filter: drop-shadow(5px 9px 9px rgba(0, 0, 0, .5));}
.nagrada-dnevna h3 { position: absolute; bottom: 11vh; left: 29vh; }
.nagrada-dnevna .kolicina {bottom: 44vh;left: 52vh;width: 7vh;height: 7vh;}
.nagrada-dnevna .opis {bottom: 35vh;left: 31vh;}

.nagrada-glavna img {position: absolute;bottom: -5vh;left: 14vh;width: 35vh;height: auto;transform: rotate(5deg);}
.nagrada-glavna h3 {position: absolute;bottom: -13vh;left: 15vh;}
.nagrada-glavna .kolicina {left: 3vh;bottom: -15vh;width: 8vh;height: 8vh;font-size: 6vh;}

.intro { position: relative; width: 90%; max-width: 700px; margin: 30px auto; text-align: center; }

.studenac { position: fixed; right: 20px; bottom: 0; }

.pravila-hero { display: flex; gap: 20px; width: 90%; max-width: 700px; margin: 0 auto; padding-top: 30px; }
.pravila-hero img { width: 178px; height: 195px; }
.pravila .intro { text-align: left; padding-bottom: 30px; }
.pravila .intro > * { margin: 20px 0; }
.pravila .intro ul li, .pravila .intro ul li { margin: 5px 0; }

@media screen and (min-aspect-ratio: 240/127) {

	.packshots img:first-child {position: absolute;width: calc(1420vh / 25);height: auto;bottom: 45vh;right: 29vh;}
	.packshots img:last-child {position: absolute;width: calc(1580vh / 30);height: auto;bottom: 52vh;left: 29vh;}
}



@media screen and (max-aspect-ratio: 181/127) {
	.hero { background: url('hero.png') no-repeat center 15vh; background-size: 60vh; height: 100vh; margin-bottom: 0; overflow: hidden; padding-bottom: 6vh; }
	.hero .col-nagrade { width: 100%; height: 100vh; }

	.packshots { top: 0; left: 50%; transform: translateX(-50%); }
	.packshots img:first-child { width: calc(1420vh / 38); bottom: auto; right: -5vh; }
	.packshots img:last-child { width: calc(1580vh / 46); bottom: auto; left: -3vh; }

	.dnevne-naslov {bottom: 72vh;left: 35vh;}
	.tjedne-naslov {top: 23vh;right: 35vh;}
	.glavna-naslov {bottom: 38vh;left: 16vh;}

	.nagrada-paket img {bottom: 6vh;right: 11vh;}
	.nagrada-paket .kolicina {bottom: 14vh;right: 40vh;}
	.nagrada-paket .opis {bottom: 9vh;right: 27vh;}

	.nagrada-iphone img {bottom: 51vh;right: 30vh;}
	.nagrada-iphone h3 {bottom: 44vh;right: 24.5vh;}
	.nagrada-iphone .kolicina {right: 41.3vh;bottom: 51vh;}
	.nagrada-iphone .opis {right: 27vh;bottom: 40vh;}

	.nagrada-dnevna img {bottom: 48vh;left: 35vh;width: 19vh;}
	.nagrada-dnevna h3 {  bottom: 11vh; left: 29vh; }
	.nagrada-dnevna .kolicina {bottom: 59vh;left: 44vh;}
	.nagrada-dnevna .opis {bottom: 50vh;left: 25vh;}

	.nagrada-glavna img {bottom: 12vh;left: 10vh;width: 34vh;}
	.nagrada-glavna h3 {bottom: 4vh;left: 6vh;}
	.nagrada-glavna .kolicina {left: -6vh;bottom: 2vh;}

	.intro { position: relative; width: 90%; max-width: 700px; margin: 30px auto; text-align: center; }

	.studenac { right: auto; left: 20px; width: 70px; height: 70px; }
}

@media screen and (max-aspect-ratio: 140/127) {

	.hero {background: url('hero.png') no-repeat center 12vh;background-size: 38vh;height: 100vh;margin-bottom: 0;overflow: hidden;padding-bottom: 6vh;}

	.packshots img:first-child { width: calc(1420vh / 46); bottom: auto; right: -4vh; }
	.packshots img:last-child { width: calc(1580vh / 57); bottom: auto; left: -2vh; }

	.dnevne-naslov, .tjedne-naslov {font-size: 2.8vh;}
	.dnevne-naslov {right: 3vh;left: auto;bottom: 72vh;}
	.tjedne-naslov {right: auto;left: 4vh;top: 26vh;}
	.glavna-naslov {left: auto;right: 8vh;bottom: 39vh;width: 27vw;}

	.nagrada h3 { font-size: 2.2vh; }
	.nagrada-paket img {right: auto;left: 9vh;width: 26vh;bottom: 13vh;}
	.nagrada-paket .kolicina {right: auto;left: 4vh;bottom: 19vh;}
	.nagrada-paket .opis {right: auto;left: 8vh;bottom: 15vh;}

	.nagrada-iphone img {bottom: 51vh;right: auto;left: 12vh;width: 10vh;}
	.nagrada-iphone h3 {bottom: 44.5vh;right: auto;left: 7vh;}
	.nagrada-iphone .kolicina {right: auto;left: 6vh;bottom: 51vh;}
	.nagrada-iphone .opis {right: auto;left: 10vh;bottom: 40vh;}

	.nagrada-dnevna img {right: 5vh;left: auto;bottom: 51vh;width: 17vh;}
	.nagrada-dnevna .kolicina {bottom: 60vh;right: 6vh;left: auto;}
	.nagrada-dnevna .opis {bottom: 54vh;right: 15vh;left: auto;}

	.nagrada-glavna img {bottom: 18vh;right: 5vh;left: auto;width: 27vh;}
	.nagrada-glavna h3 {right: 4vh;left: auto;bottom: 9vh;}
	.nagrada-glavna .kolicina {right: 26vh;left: auto;bottom: 7vh;}

	.intro { position: relative; width: 90%; max-width: 700px; margin: 30px auto; text-align: center; }

	.studenac { right: auto; left: 20px; width: 70px; height: 70px; }
}

@media screen and (max-aspect-ratio: 163/127) and (max-width: 600px) {

	.hero { background: url('hero.png') no-repeat center 12vh; background-size: 63%; padding-bottom: 0; }

	.dnevne-naslov, .tjedne-naslov { font-size: 4vw; }
	.dnevne-naslov {right: 2vh;bottom: 68vh;}
	.tjedne-naslov {left: 3vh;top: 32vh;}
	.glavna-naslov {font-size: 3vh;bottom: auto;top: 57vh;width: 40vw;right: 3vh;}

	.packshots { top: 0; left: 50%; transform: translateX(-50%); }
	.packshots img:first-child { width: calc(1420vh / 46); bottom: auto; right: -4vh; }
	.packshots img:last-child { width: calc(1580vh / 58); bottom: auto; left: -2vh; }

	.nagrada h3 { font-size: clamp(14px, 1.8vh, 18px); }
	.nagrada h3 span { display: block; }

	.nagrada-paket img { top: 41vh; left: 3vw; width: 39vw; }
	.nagrada-paket .kolicina {left: 7vh;top: 38vh;bottom: auto;width: 9vw;height: 9vw;}
	.nagrada-paket .opis {left: 3vh;bottom: auto;top: 57vh;}

	.nagrada-iphone h3 {left: 3vh;top: 76vh;bottom: auto;text-align: left;}
	.nagrada-iphone .kolicina {left: 3vh;top: 68vh;bottom: auto;width: 9vw;height: 9vw;}
	.nagrada-iphone img {top: 64vh;bottom: auto;left: 9vh;width: 9vh;}
	.nagrada-iphone .opis {left: 3vh;top: 82vh;bottom: auto;}

	.nagrada-dnevna img {top: 40vh;right: 4vh;bottom: auto;width: 17vh;}
	.nagrada-dnevna .kolicina {top: 34vh;bottom: auto;right: 5vh;width: 9vw;height: 9vw;}
	.nagrada-dnevna .opis {top: 51vh;bottom: auto;right: 5vh;}

	.nagrada-glavna img {bottom: auto;right: 3vh;width: 21vh;top: 65vh;}
	.nagrada-glavna .kolicina {top: 81vh;right: 34vw;bottom: auto;width: 10vw;height: 10vw;font-size: 4vh;}
	.nagrada-glavna h3 {top: 81vh;right: 2vw;bottom: auto;width: 29vw;} 

	.kolicina { font-size: 3vh; }

	.intro { position: relative; width: 90%; max-width: 700px; margin: 30px auto; text-align: center; padding-bottom: 15vh; }

	.pravila-hero { flex-direction: column; }
	.pravila-hero img { display: block; margin: 0 auto; width: 150px; height: auto;}
}