/* RESET */

*
{
	padding:0;
	margin:0;
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-size:15px;
	box-sizing: border-box;
	color:#2c2c2c;
	-webkit-touch-callout:none;
    -webkit-user-select:none;
/*	-webkit-transform: translate3d(0, 0, 0);
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;*/
}

.f14
{
	font-size: 14px;
}

.f18
{
	font-size: 18px;
}

.f20
{
	font-size: 20px;
}

.f22
{
	font-size: 22px;
}

.f26
{
	font-size: 26px;
}

.b6
{
	font-weight: 600;
}

.b8
{
	font-weight: 800;
}

.italic
{
	font-style: italic;
}

.smallcaps
{
	font-variant: small-caps;
}

.nomargin
{
	margin:0 !important;
}

.white
{
	color:white !important;
}

html
{
	background:url(../imgs/bg_grid.jpg) no-repeat;
	width:1920px;
	height:1080px;
	overflow:hidden;
}

body
{
	height:20px;
	top:0;
	bottom:0;
	position: absolute;
	margin:auto;
	width:0%;
	overflow:hidden;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	box-shadow: -30px 0px 45px 2px #242121;
	will-change: height, width, scaleY;
}

/*body.loadingAnim
{
	animation: loadingAnim ease 1.5s;
	animation-fill-mode:forwards;
}

@keyframes loadingAnim { 
	25% 
	{ 
		width:20%;
		height:20px;
	} 
	50% 
	{ 
		width:50%;
		height:20px;
	} 
	75% 
	{ 
		width:100%;
		height:20px;
	} 
	100%
	{
		width:100%;
		height:1080px;
	}
}*/

#frame
{
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:#ccc;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	will-change: opacity;
}

#loading
{
	position: absolute;
	top:0;
	left:0;
	width:1920px;
	height:1080px;
	background: #525252;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}

/*#loading.loadingAnim
{
	animation: loadingAnimGrey ease 2s normal forwards;
}

@keyframes loadingAnimGrey { 
	75% 
	{ 
		opacity:1;
		width:1920px;
		height:1080px;
	} 
	99%
	{
		opacity:0;
		width:1920px;
		height:1080px;
	}
	100%
	{
		opacity:0;
		height:0;
		width:0;
	}
}*/
/* CSS */

/* navigacija */

.hotspot
{
	width:70px;
	height:70px;
	left:200px;
	display:block;
	position:absolute;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	z-index:6666;	
	border-radius: 35px;
	box-shadow: 0px 0px 10px #fff;
	transform-orgin:50% 50%;
	will-change: scale;
	-webkit-animation: hotspotScale 1.5s infinite ease;
}

@keyframes hotspotScale {
    0% { transform: scale(1,1); }
    50%   { transform: scale(0.7,0.7); }
    100%   { transform: scale(1,1); }

}

.nav
{
	width:100px;
	height:100px;
	display:block;
	position:absolute;
	bottom:200px;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	z-index:6666;
}

.nav#prev
{
	left:0;
}

.nav.rounded#prev
{
	border-bottom-right-radius: 4px;
	border-top-right-radius: 4px;
}

.nav#next
{
	right:0;
}

.nav.rounded#next
{
	border-bottom-left-radius: 4px;
	border-top-left-radius: 4px;
}

.nav#super
{
	top:0;
	left:0;
}

.nav.disabled
{
	display: none;
}

.nav.blue#super
{
	background-image: url(../imgs/menu_blue.png);
	background-position: top left;
}

.nav.blue#super.pressed
{
	background-position: bottom left;
}

.nav.blue#next
{
	background-image: url(../imgs/next_blue.png);
	background-position: top left;
}

.nav.blue#next.pressed
{
	background-position: bottom left;
}

.nav.blue#prev
{
	background-image: url(../imgs/prev_blue.png);
	background-position: top left;
}

.nav.blue#prev.pressed
{
	background-position: bottom left;
}

.nav.green#super
{
	background-image: url(../imgs/menu_green.png);
	background-position: top left;
}

.nav.green#super.pressed
{
	background-position: bottom left;
}

.nav.green#next
{
	background-image: url(../imgs/next_green.png);
	background-position: top left;
}

.nav.green#next.pressed
{
	background-position: bottom left;
}

.nav.green#prev
{
	background-image: url(../imgs/prev_green.png);
	background-position: top left;
}

.nav.green#prev.pressed
{
	background-position: bottom left;
}

.nav.red#super
{
	background-image: url(../imgs/menu_red.png);
	background-position: top left;
}

.nav.red#super.pressed
{
	background-position: bottom left;
}

.nav.red#next
{
	background-image: url(../imgs/next_red.png);
	background-position: top left;
}

.nav.red#next.pressed
{
	background-position: bottom left;
}

.nav.red#prev
{
	background-image: url(../imgs/prev_red.png);
	background-position: top left;
}

.nav.red#prev.pressed
{
	background-position: bottom left;
}

.nav.yellow#super
{
	background-image: url(../imgs/menu_yellow.png);
	background-position: top left;
}

.nav.yellow#super.pressed
{
	background-position: bottom left;
}

.nav.yellow#next
{
	background-image: url(../imgs/next_yellow.png);
	background-position: top left;
}

.nav.yellow#next.pressed
{
	background-position: bottom left;
}

.nav.yellow#prev
{
	background-image: url(../imgs/prev_yellow.png);
	background-position: top left;
}

.nav.yellow#prev.pressed
{
	background-position: bottom left;
}

/* paralaksa */

.parallax, .parallax img, .parallax div
{
	position:absolute;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	will-change: transform, opacity;
}