/*GLOBAL*/
*, *::before, *::after {box-sizing: border-box;}
body {font-family: 'Cause', Arial, sans-serif; line-height: 1.7; color:rgb(77,77,77);}

/*BADGE*/
.top {width:100%; min-height:17vw; overflow:hidden; position:relative;}
	.boja_kontakt_container {width:100%; height:1.7vw; background-color: rgb(250,124,224);}
	.badge-div {
		width:100%;
		position: absolute;
		display: grid;
		place-items: center;
		user-select: none;
		z-index: 10;
	}
		.badge-back, .badge-logo {width:47%; height:auto; grid-area: 1 / 1;}

/*---------------------------------------------------------------------------------------------------------*/
	/*NAVBAR*/
	.hamburger {
		width: 7vw;
		height: 3vw;
		position: relative;
		top: 3.7vw;
		left:3.7vw;
		cursor: pointer;
		z-index: 101;
	}
		.hamburger span {
			position: absolute;
			left: 0;
			width: 100%;
			height: 0.7vw;
			background-color: rgb(77,77,77);
			transition: transform 0.37s ease, opacity 0.17s ease;
			transform-origin: center;
		}
		/*početna pozicija crtica*/
		.hamburger span:nth-child(1) {top: 0;}
		.hamburger span:nth-child(2) {top: 50%;	transform: translateY(-50%);}
		.hamburger span:nth-child(3) {bottom: 0;}
		/*aktivna pozicija*/
		.hamburger.toggle span:nth-child(1) {top: 50%; transform: translateY(-50%)rotate(45deg);}
		.hamburger.toggle span:nth-child(2) {opacity: 0;}
		.hamburger.toggle span:nth-child(3) {top: 50%; transform: translateY(-50%)rotate(-45deg);	}

	/* Izbornik preko cijelog ekrana */
	.nav-menu {
		position: fixed;
		top: 0;
		right: -100%; /* Početno je skriven desno, izvan ekrana */
		width: 100%;
		height: 100vh;
		background-color: rgb(255,214,214);
		display: grid;
		place-items: center;
		transition: 0.7s ease-in-out;
		overflow-y: auto;
		z-index: 100;
	}

	/* Klasa koju ćemo dodati preko JS-a */
	.nav-menu.active {
		right: 0; /* Pomiče izbornik na ekran */
	}

		/* Stil za linkove */
		.nav-menu ul { list-style: none; text-align: center; padding:0; margin:0;}
		.nav-menu a { font-size: 1.7rem; text-decoration: none; color: rgb(77,77,77); display: block; padding-bottom: 2vw; }

/*---------------------------------------------------------------------------------------------------------------*/
	
	.naslovna_slika 
	{
		position:absolute; z-index:-3; width:100%; height:auto; display: block;
		opacity: 0; /* početno stanje - nevidljivo */
		transition: opacity 2s ease-in, transform 2s ease; /* trajanje i način prelaza */
		transform: translateY(-15vw);
		user-select:none;
	}
	
	/*TEKST*/
	.ulazni_tekst_container
	{
		display:flex; flex-direction:column; justify-content:center; align-items:center;
		margin-top:7vw;
		font-family: 'Dancing Script', cursive; color:black;
		opacity: 0; /* početno stanje - nevidljivo */
		transition: opacity 2s ease-in, transform 2s ease; /* trajanje i način prelaza */
		transform: translateY(-10vw);
	}
		.ulazni_tekst_one{font-size: 7vw;}
		.ulazni_tekst_two{font-size: 3vw;}


/*OVO MORA BIT NA DNU*/
.efekt_promjena {opacity:1; transform: translateY(0vw);}



@media (max-width: 700px) {
	.top {min-height:24vw;}
	.boja_kontakt_container {height:1.7vh;}
	.badge-back, .badge-logo {width:70%;}
	
		.hamburger {width: 9.8vw; height: 4.2vw;	top: 3.7vw;	left:3.7vw;}
		.hamburger span {left: 0; height: 0.99vw;}
	
	.ulazni_tekst_container{margin-top:12vw;}

}