/* ###################################################### GENERAL ###################################################### */

	* { 
		outline: none;
		text-decoration: none;
		font-family: 'Montserrat', sans-serif;
	}

	body { 
		margin: 0;
		padding: 0;
		overflow-x: hidden;
		background-color: #004120;
	}

	#skrollr-body { 
		position: fixed;
	}

	.background {
		position: fixed;
		width: 100%;
		height: 100vh;
		top: 0vh;
		left: 0;
		background: #004120;
		background: radial-gradient(circle farthest-corner, rgba(160,200,75,1) 0%, rgba(160,200,75,0.45) 45%, rgba(160,200,75,0) 100%);
	}

	section { 
		position: fixed;
		width: 100%;
		height: 100vh;
		top: 100vh;
		left: 0;
	}

	section > * { 
		position: absolute;
	}

	section .text h2 {
		width: 65%;
		margin: 0 auto;
		font-size: 1.7vw;
		line-height: 1.9vw;
	}

	section .text p,
	section .text2 p {
		font-size: 1.2vw;
		line-height: 1.6vw;
	}

	.shadow { -webkit-filter: drop-shadow(20px 25px 12px #004120); }
	.shadow-small { -webkit-filter: drop-shadow(10px 15px 12px #004120); }
	.green-glow { -webkit-filter: drop-shadow(0 0 25px rgb(160,200,75)); }
	.white-glow { -webkit-filter: drop-shadow(0 0 15px #fff); }

	nav { position: fixed; top: 41.5vh; left: 1vh; }
	nav a { display: block; width: 1vh; height: 1vh; text-indent: -999999px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); background: rgba(255,255,255,.15); margin-bottom: 1vh; }

	@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-1.5vw); } 100% { transform: translateY(0px); } }

	.wrapper { position: absolute; width: 100vw; height: 1px; top: 50vh; left: 0; }

/* ###################################################### SLIDE 1 ###################################################### */

	.slide1 {
		top: 0vh;
		-skrollr-animation-name: slide1;
	}

	@-skrollr-keyframes slide1 {
		500 { top: 0vh; }
		1000 { top: -120vh; }
	}

	.slide1 .vocno-socno-mocno { 
		position: absolute;
		top: calc(-570 * 100vw / 2600);
		left: calc(950 * 100vw / 2600);
		-skrollr-animation-name: animation-vocno-socno-mocno;
	}

	.slide1 .vocno-socno-mocno .logo {
		position: absolute;
		top: calc(-50 * 100vw / 2600);
		left: calc(120 * 100vw / 2600);
		width: calc(968.5 * 30vw / 2600);
		height: calc(658 * 30vw / 2600);
		transform: rotate(-12deg);
	}

	.slide1 .vocno-socno-mocno .badge {
		position: absolute;
		top: 0;
		left: 0;
		width: calc(298.8 * 250vw / 2600);
		height: calc(300.6 * 250vw / 2600);
	}

	@-skrollr-keyframes animation-vocno-socno-mocno {
		0 { top: calc(-570 * 100vw / 2600); }
		500 { top: calc(-2200 * 100vw / 2600); }
	}

	.coolest-brands {
		position: absolute;
		top: calc(100 * 100vw / 2600);
		left: calc(1100 * 100vw / 2600);
		transform: translate(-5vw, 5vw) rotate(-24deg);
		-skrollr-animation-name: animation-coolest-brands;
	}

	.coolest-brands img {
		position: absolute;
		width: calc(210.2 * 250vw / 2600);
		height: calc(182.7 * 250vw / 2600);
	}

	@-skrollr-keyframes animation-coolest-brands {
		0 { top: calc(100 * 100vw / 2600); transform: translate(-5vw, 5vw) scale(1) rotate(-23deg); opacity: 1; }
		500 { top: calc(100 * 100vw / 2600); transform: translate(0vw, 0vw) scale(0.7) rotate(0deg); opacity: 1; }
		1000 { top: calc(100 * 100vw / 2600); transform: translate(0vw, 0vw) scale(0.7) rotate(0deg); opacity: 0; }
	}

	.slide1 .udaram-po-vocu {
		position: absolute;
		top: calc(32 * 100vw / 2600);
		left: calc(200 * 100vw / 2600);
		width: calc(552 * 80vw / 2600);
		height: calc(576 * 80vw / 2600);
	}

	.slide1 .i-danju-i-nocu {
		position: absolute;
		top: calc(-111 * 100vw / 2600);
		left: calc(1950 * 100vw / 2600);
		width: calc(526 * 80vw / 2600);
		height: calc(688 * 80vw / 2600);
	}

	.slide1 .udaram-po-vocu img,
	.slide1 .i-danju-i-nocu img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}

	.slide1 .text {
		position: absolute;
		width: calc(939 * 100vw / 2600);
		top: calc(250 * 100vw / 2600);
		left: calc(831 * 100vw / 2600);
		text-align: center;
		color: #fff;
		opacity: 0;
		-skrollr-animation-name: animation-text-1;
	}

	@-skrollr-keyframes animation-text-1 {
		0 { top: calc(250 * 100vw / 2600); opacity: 0; }
		500 { top: calc(-500 * 100vw / 2600); opacity: 1; }
		1000 { top: calc(-1200 * 100vw / 2600); opacity: 0; }
	}

	.slide1 .text h2 {
		width: 100%;
		margin: 0 auto;
		font-size: 2vw;
		line-height: 1;
		text-transform: uppercase;
	}

	.slide1 .text p {
		font-size: 1.2vw;
		line-height: 1.6vw;
	}

	.slide1 .packshot-breskva {
		position: absolute;
		top: calc(-550 * 100vw / 2600);
		left: calc(480 * 100vw / 2600);
		transform: rotate(-10deg);
		-skrollr-animation-name: animation-packshot-breskva;
	}

	.slide1 .packshot-breskva img {
		width: calc(314 * 100vw / 2600);
		height: auto;
		animation: float 10s ease-in-out 0s infinite;
	}

	@-skrollr-keyframes animation-packshot-breskva {
		300 { top: calc(-550 * 100vw / 2600); }
		500 { top: calc(-540 * 100vw / 2600); }
	}

	.slide1 .packshot-multivitamin {
		position: absolute;
		top: calc(-550 * 100vw / 2600);
		left: calc(1800 * 100vw / 2600);
		transform: rotate(10deg);
		-skrollr-animation-name: ani-packshot-multivitamin;
	}

	.slide1 .packshot-multivitamin img {
		width: calc(331 * 100vw / 2600);
		height: auto;
		animation: float 13s ease-in-out -5s infinite;
	}

	@-skrollr-keyframes ani-packshot-multivitamin {
		300 { top: calc(-550 * 100vw / 2600); }
		500 { top: calc(-540 * 100vw / 2600); }
	}

/* ###################################################### SLIDE 2 ###################################################### */

	.slide2 {
		-skrollr-animation-name: slide2;
	}

	@-skrollr-keyframes slide2 {
		500 { top: 120vh; }
		1000 { top: 0vh; }
		1500 { top: -120vh; }
	}

	.slide2 .packshot-limunada {
		position: absolute;
		top: calc(-480 * 100vw / 2600);
		left: calc(1000 * 100vw / 2600);
		transform: rotate(-10deg);
		-skrollr-animation-name: animation-limunada;
	}

	.slide2 .packshot-limunada img {
		position: absolute;
		width: calc(314 * 100vw / 2600);
		height: auto;
		animation: float 10s ease-in-out 0s infinite;
	}

	@-skrollr-keyframes animation-limunada {
		800 { left: calc(1000 * 100vw / 2600); }
		1000 { left: calc(600 * 100vw / 2600); }
	}

	.slide2 .packshot-zeleni-caj-limeta {
		position: absolute;
		top: calc(-580 * 100vw / 2600);
		left: calc(1250 * 100vw / 2600);
		transform: rotate(10deg);
		-skrollr-animation-name: animation-zeleni-caj-limeta;
	}

	.slide2 .packshot-zeleni-caj-limeta img {
		position: absolute;
		width: calc(314 * 100vw / 2600);
		height: auto;
		animation: float 10s ease-in-out 0s infinite;
	}

	@-skrollr-keyframes animation-zeleni-caj-limeta {
		800 { left: calc(1250 * 100vw / 2600); }
		1000 { left: calc(1700 * 100vw / 2600); }
	}

	.slide2 .prijedjimo-na-tea {
		position: absolute;
		width: calc(546 * 80vw / 2600);
		height: calc(768 * 80vw / 2600);
		top: calc(-25 * 100vw / 2600);
		left: calc(-500 * 100vw / 2600);
		-skrollr-animation-name: animation-prijedjimo-na-tea;
	}

	@-skrollr-keyframes animation-prijedjimo-na-tea {
		600 { left: calc(-500 * 100vw / 2600); }
		1000 { left: calc(280 * 100vw / 2600); }
	}

	.slide2 .bilo-je-i-vrijeme {
		position: absolute;
		width: calc(345 * 80vw / 2600);
		height: calc(636 * 80vw / 2600);
		top: calc(75 * 100vw / 2600);
		left: calc(2700 * 100vw / 2600);
		-skrollr-animation-name: animation-bilo-je-i-vrijeme;
	}

	@-skrollr-keyframes animation-bilo-je-i-vrijeme {
		600 { left: calc(2400 * 100vw / 2600); }
		1000 { left: calc(1920 * 100vw / 2600); }
	}

	.slide2 .prijedjimo-na-tea img,
	.slide2 .bilo-je-i-vrijeme img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}

	.slide2 .text {
		position: absolute;
		width: calc(550 * 100vw / 2600);
		top: calc(220 * 100vw / 2600);
		left: calc(1025 * 100vw / 2600);
		text-align: center;
		color: #fff;
		opacity: 0;
		-skrollr-animation-name: slide2text;
	}

	@-skrollr-keyframes slide2text {
		900 { top: calc(220 * 100vw / 2600); opacity: 0; }
		1000 { top: calc(-320 * 100vw / 2600); opacity: 1; }
	}

/* ###################################################### SLIDE 3 ###################################################### */

	.slide3 {
		-skrollr-animation-name: slide3;
	}

	@-skrollr-keyframes slide3 {
		1000 { top: 120vh; }
		1500 { top: 0vh; }
		2000 { top: -120vh; }
	}

	.slide3 .packshot-tresnja {
		position: absolute;
		top: calc(-480 * 100vw / 2600);
		left: calc(1000 * 100vw / 2600);
		transform: rotate(-10deg);
		-skrollr-animation-name: animation-tresnja;
	}

	.slide3 .packshot-tresnja img {
		position: absolute;
		width: calc(314 * 100vw / 2600);
		height: auto;
		animation: float 10s ease-in-out 0s infinite;
	}

	@-skrollr-keyframes animation-tresnja {
		1300 { left: calc(1000 * 100vw / 2600); }
		1500 { left: calc(600 * 100vw / 2600); }
	}

	.slide3 .packshot-sumsko-voce {
		position: absolute;
		top: calc(-580 * 100vw / 2600);
		left: calc(1250 * 100vw / 2600);
		transform: rotate(10deg);
		-skrollr-animation-name: animation-sumsko-voce;
	}

	.slide3 .packshot-sumsko-voce img {
		position: absolute;
		width: calc(314 * 100vw / 2600);
		height: auto;
		animation: float 10s ease-in-out 0s infinite;
	}

	@-skrollr-keyframes animation-sumsko-voce {
		1300 { left: calc(1250 * 100vw / 2600); }
		1500 { left: calc(1700 * 100vw / 2600); }
	}

	.slide3 .i-od-malog-voca {
		position: absolute;
		width: calc(386 * 80vw / 2600);
		height: calc(618 * 80vw / 2600);
		top: calc(75 * 100vw / 2600);
		left: calc(-500 * 100vw / 2600);
		-skrollr-animation-name: animation-i-od-malog-voca;
	}

	@-skrollr-keyframes animation-i-od-malog-voca {
		1100 { left: calc(-500 * 100vw / 2600); }
		1500 { left: calc(280 * 100vw / 2600); }
	}

	.slide3 .moze-nastati-veliki-sok {
		position: absolute;
		width: calc(442 * 80vw / 2600);
		height: calc(536 * 80vw / 2600);
		top: calc(145 * 100vw / 2600);
		left: calc(2700 * 100vw / 2600);
		-skrollr-animation-name: animation-moze-nastati-veliki-sok;
	}

	@-skrollr-keyframes animation-moze-nastati-veliki-sok {
		1100 { left: calc(2400 * 100vw / 2600); }
		1500 { left: calc(1920 * 100vw / 2600); }
	}

	.slide3 .i-od-malog-voca img,
	.slide3 .moze-nastati-veliki-sok img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}

	.slide3 .text {
		position: absolute;
		width: calc(550 * 100vw / 2600);
		top: calc(220 * 100vw / 2600);
		left: calc(1025 * 100vw / 2600);
		text-align: center;
		color: #fff;
		opacity: 0;
		-skrollr-animation-name: slide3text;
	}

	@-skrollr-keyframes slide3text {
		1400 { top: calc(220 * 100vw / 2600); opacity: 0; }
		1500 { top: calc(-320 * 100vw / 2600); opacity: 1; }
	}

/* ###################################################### SLIDE 4 ###################################################### */

	.slide4 {
		-skrollr-animation-name: slide4;
	}

	@-skrollr-keyframes slide4 {
		1500 { top: 120vh; }
		2000 { top: 0vh; }
		2500 { top: -120vh; }
	}

	.slide4 .packshot-crvena-naranca {
		position: absolute;
		top: calc(-480 * 100vw / 2600);
		left: calc(1000 * 100vw / 2600);
		transform: rotate(-10deg);
		-skrollr-animation-name: animation-crvena-naranca;
	}

	.slide4 .packshot-crvena-naranca img {
		position: absolute;
		width: calc(314 * 100vw / 2600);
		height: auto;
		animation: float 10s ease-in-out 0s infinite;
	}

	@-skrollr-keyframes animation-crvena-naranca {
		1800 { left: calc(1000 * 100vw / 2600); }
		2000 { left: calc(600 * 100vw / 2600); }
	}

	.slide4 .packshot-zelena-jabuka {
		position: absolute;
		top: calc(-580 * 100vw / 2600);
		left: calc(1250 * 100vw / 2600);
		transform: rotate(10deg);
		-skrollr-animation-name: animation-zelena-jabuka;
	}

	.slide4 .packshot-zelena-jabuka img {
		position: absolute;
		width: calc(314 * 100vw / 2600);
		height: auto;
		animation: float 10s ease-in-out 0s infinite;
	}

	@-skrollr-keyframes animation-zelena-jabuka {
		1800 { left: calc(1250 * 100vw / 2600); }
		2000 { left: calc(1700 * 100vw / 2600); }
	}

	.slide4 .tko-god-je-rekao {
		position: absolute;
		width: calc(556 * 80vw / 2600);
		height: calc(836 * 80vw / 2600);
		top: calc(-75 * 100vw / 2600);
		left: calc(-500 * 100vw / 2600);
		-skrollr-animation-name: animation-tko-god-je-rekao;
	}

	@-skrollr-keyframes animation-tko-god-je-rekao {
		1600 { left: calc(-500 * 100vw / 2600); }
		2000 { left: calc(280 * 100vw / 2600); }
	}

	.slide4 .nije-imao-ukusa {
		position: absolute;
		width: calc(410 * 80vw / 2600);
		height: calc(710 * 80vw / 2600);
		top: calc(20 * 100vw / 2600);
		left: calc(2700 * 100vw / 2600);
		-skrollr-animation-name: animation-nije-imao-ukusa;
	}

	@-skrollr-keyframes animation-nije-imao-ukusa {
		1600 { left: calc(2400 * 100vw / 2600); }
		2000 { left: calc(1920 * 100vw / 2600); }
	}

	.slide4 .tko-god-je-rekao img,
	.slide4 .nije-imao-ukusa img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}

	.slide4 .text {
		position: absolute;
		width: calc(550 * 100vw / 2600);
		top: calc(220 * 100vw / 2600);
		left: calc(1025 * 100vw / 2600);
		text-align: center;
		color: #fff;
		opacity: 0;
		-skrollr-animation-name: slide4text;
	}

	@-skrollr-keyframes slide4text {
		1900 { top: calc(220 * 100vw / 2600); opacity: 0; }
		2000 { top: calc(-320 * 100vw / 2600); opacity: 1; }
	}

/* ###################################################### SLIDE 5 ###################################################### */

	.slide5 {
		-skrollr-animation-name: slide5;
	}

	@-skrollr-keyframes slide5 {
		2000 { top: 120vh; }
		2500 { top: 0vh; }
	}

	.slide5 .packshots {
		position: absolute;
		width: 90vw;
		height: auto;
		top: calc(100 * 100vw / 2600);
		left: 5vw;
	}

	.slide5 .vise-voca {
		position: absolute;
		width: calc(304 * 100vw / 2600);
		height: calc(520 * 100vw / 2600);
		top: calc(-480 * 100vw / 2600);
		left: calc(530 * 100vw / 2600);
		-skrollr-animation-name: animation-vise-voca;
	}

	@-skrollr-keyframes animation-vise-voca {
		2100 { left: calc(580 * 100vw / 2600); }
		2500 { left: calc(280 * 100vw / 2600); }
	}

	.slide5 .manje-secera {
		position: absolute;
		width: calc(374 * 100vw / 2600);
		height: calc(488 * 100vw / 2600);
		top: calc(-440 * 100vw / 2600);
		left: calc(530 * 100vw / 2600);
		-skrollr-animation-name: animation-manje-secera;
	}

	@-skrollr-keyframes animation-manje-secera {
		2100 { left: calc(1700 * 100vw / 2600); }
		2500 { left: calc(1980 * 100vw / 2600); }
	}

	.slide5 .vise-voca img,
	.slide5 .manje-secera img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}

	.slide5 .text {
		position: absolute;
		width: 100vw;
		top: calc(-600 * 100vw / 2600);
		left: 0;
		text-align: center;
		color: #fff;
		opacity: 0;
		-skrollr-animation-name: slide5text;
	}

	@-skrollr-keyframes slide5text {
		2400 { top: calc(-600 * 100vw / 2600); opacity: 0; }
		2500 { top: calc(-200 * 100vw / 2600); opacity: 1; }
	}

	.social img {
		width: 2.5vw;
		height: 2.5vw;
		margin: 0 0.3vw;
	}


	.slide5 .footer-logo {
		position: absolute;
		top: calc(600 * 100vw / 2600);
		left: calc(1100 * 100vw / 2600);
		width: calc(968.5 * 40vw / 2600);
		height: calc(658 * 40vw / 2600);
		-skrollr-animation-name: animation-footer-logo;
	}

	@-skrollr-keyframes animation-footer-logo {
		2100 { top: calc(-2500 * 100vw / 2600); opacity: 0; }
		2500 { top: calc(-600 * 100vw / 2600); opacity: 1; }
	}