.ozadje
{
	width:100%;
	height:100%;
	background:url(../imgs/index_bg.png) no-repeat;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}

#links
{
	width:950px;
	height:710px;
	position: absolute;
	left:485px;
	top:185px;
	background:url(../imgs/index_menu.png) no-repeat;
	animation: floatingIndex ease 20s infinite;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}

#handwriting
{
	position: absolute;
	left:0;
	right:0;
	animation: floatingIndex ease 20s infinite;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}

@keyframes floatingIndex { 
	/*20% 
	{ 
		transform: translate3d(0, 0, 0) rotateY(0deg) rotateX(0deg);
	} */
	20% 
	{ 
		transform: rotateY(5deg) rotateX(0deg);
	} 
	40% 
	{ 
		transform: rotateY(5deg) rotateX(5deg);
	} 
	60% 
	{ 
		transform: rotateY(-5deg) rotateX(5deg);
	} 
	80% 
	{ 
		transform: rotateY(-5deg) rotateX(-5deg);
	} 
	100% 
	{ 
		transform: rotateY(0deg) rotateX(0deg);
	}
}

#links .izborPodrocja
{
	position: absolute;
	display:block;
}

#links .p1
{
	bottom:0px;
	left:0px;
	width:470px;
	height:230px;
}

#links .p2
{
	top:0;
	left:0;
	width:230px;
	height:470px;
}

#links .p3
{
	top:0;
	left:240px;
	width:230px;
	height:230px;
}

#links .p4
{
	top:0px;
	left:480px;
	width:230px;
	height:230px;
}

#links .p5
{
	top:0px;
	right:0px;
	width:230px;
	height:230px;
}

#links .p6
{
	top:240px;
	right:0px;
	width:230px;
	height:230px;
}

#links .p7
{
	bottom:0px;
	right:0px;
	width:230px;
	height:230px;
}

#links .p8
{
	bottom: 0;
    left: 480px;
    width: 230px;
    height: 230px;
}

#links .p9
{
	top:240px;
	left:480px;
	width:230px;
	height:230px;
}

#links .p10
{
    top: 300px;
    left: 240px;
    width: 115px;
    height: 115px;
}

#links .p11
{
    top: 300px;
    left: 355px;
    width: 115px;
    height: 115px;
}

.parallax.e1
{
	top:0;
	left:0;
	animation: e1 ease 18s infinite;
}

@keyframes e1 { 
	0% 
	{ 
		transform: scale(1,1) translate(0px,0px);
		opacity:0.5;
	}
	50% 
	{ 
		transform: scale(0.5,0.5) translate(-1900px,-1000px);
		opacity:1;
	} 
 
	100% 
	{ 
		transform: scale(1,1) translate(0px,0px);
		opacity:0.5;
	} 
}

.parallax.e2
{
	top:0;
	left:-1000px;
	transform-origin:70% 0%;
	animation: e2 ease 23s infinite;
}

@keyframes e2 { 
	0% 
	{ 
		transform: scale(0.5,0.5);
		opacity:1;
	}
	50% 
	{ 
		transform: scale(1,1);
		opacity:0.5;
	} 
 
	100% 
	{ 
		transform: scale(0.5,0.5);
		opacity:1;
	} 
}

.parallax.e3
{
	top:0;
	transform-origin:50% 50%;
	left:0;
	animation: e3 ease 26s infinite;
}

@keyframes e3 { 
	0% 
	{ 
		transform: scale(1,1) rotateZ(180deg);
		opacity:1;
	}
	50% 
	{ 
		transform: scale(0.3,0.3) rotateZ(0deg);
		opacity:0.5;
	} 
 
	100% 
	{ 
		transform: scale(1,1) rotateZ(180deg);
		opacity:1;
	} 
}

.parallax.e4
{
	top:0;
	left:0;
	animation: e4 ease 21s infinite;
}

@keyframes e4 { 
	0% 
	{ 
		transform: translateY(-200px);
		opacity:0.8;
	}
	50% 
	{ 
		transform: translateY(200px);
		opacity:0.4;
	} 
 
	100% 
	{ 
		transform: translateY(-200px);
		opacity:0.8;
	} 
}


#overlay
{
	background:rgba(0,0,0,0.7);
	position: absolute;
	left:0;
	top:0;
	width:1920px;
	height:1080px;
	display:none;
	will-change:opacity;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	z-index:6667;
}

#overlay .modal
{
	position: absolute;
    top: 50%;
    left: 50%;
    padding:70px;
    margin-top: -200px;
    margin-left: -300px;
    width: 600px;
    height: 400px;
    background:#ededed;
    display:none;
}

#overlay .modal.modalbig
{
    margin-top: -500px;
    margin-left: -450px;
    width: 900px;
    height: 970px;
}

#overlay .modal .close
{
	position: absolute;
	right:0;
	top:0;
}

#logo
{
	position: absolute;
	right:40px;
	bottom:40px;
}