.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;
}

.brzina
{
   	-webkit-transform: translate3d(0, 0, 0);
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}



.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;
	} 
}

/* ------------------------- namig in njegova animacija ----------------------- */

.namigContainer {
	right: 130px;
	top: 350px;
	width: 500px;
	height: 500px;
	position:absolute;
	border-radius: 20px;
	opacity:0;
	z-index:0;
	transition: opacity 0.5s ease;
	transition-delay:1s;
}

.namigContainer.fadingOut
{
	transition-delay:0s !important;
}

.namigContainer.fadingIn
{
	transition-delay:1s !important;
}

.namigContainer.visible {
	opacity:1;
	z-index:100;
}

.namig {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	border-radius: 20px;
}


.namigBrisanje {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	border-radius: 20px;
}

@keyframes shake {
    0%, 100% {transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
    20%, 40%, 60%, 80% {transform: translateX(10px);}
}

.shake {
    animation-name: shake;
}

.animirajNamig
{
	animation: shake  3s infinite;
}

/* ------------------------ kviz je tuki, ostalo gor je samo animacija bgja in namiga --- */


.vprasalnikContainer
{
	position:absolute;
	width:1920px;
	height:1080px;
}

.vprasalnikOzadje
{
	position: absolute;
	text-align: center;
	background-color: white;
	transition: all 1.5s ease;
	/*border-top-left-radius:  86px;
	border-top-right-radius:  150px;
	border-bottom-left-radius:  170px;
	border-bottom-right-radius:  105px;
	box-shadow: 0px 0px 20px 0px #707070;*/
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	will-change:width, height, border-radius, box-shadow, transform;
}

.vprasalnikOzadje *
{
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	will-change:width, height, opacity, transform;
}

.vprasalnikOzadje.vprasanje1
{
	/*left: 170px;
	top: 250px;*/
	transform:translate3d(170px,250px,0);
	width: 1100px;
	height: 670px;
	z-index:10;
}

.vprasalnikOzadje.vprasanje2
{
	/*left: 170px;
	top:50px;*/
	transform:translate3d(170px,120px,0);
	width:1600px;
	height:800px;
	z-index:9;
}

.vprasalnikOzadje.vprasanje3
{
	/*left: 170px;
	top: 250px;*/
	transform:translate3d(170px,120px,0);
	width: 1600px;
	height: 800px;
	z-index:8;
}

.vprasalnikOzadje.vprasanje4
{
	/*left: 170px;
	top: 250px;*/
	transform:translate3d(140px,180px,0);
	width: 1000px;
	height: 800px;
		z-index:7;
}

.vprasalnikOzadje.vprasanje5
{
	/*left: 170px;
	top: 250px;*/
	transform:translate3d(170px,120px,0);
	width:1600px;
	height:800px;
	z-index:6;
}

.vprasalnikOzadje.vprasanje6
{
	/*left: 170px;
	top: 250px;*/
	transform:translate3d(170px,120px,0);
	width:1600px;
	height:800px;
	z-index:5;
}

.vprasalnikOzadje.vprasanje7
{
	/*left: 170px;
	top: 250px;*/
	transform:translate3d(170px,120px,0);
	width:1600px;
	height:800px;
	z-index:4;
}

.vprasalnikOzadje.vprasanje8
{
	/*left: 170px;
	top: 250px;*/
	transform:translate3d(140px,180px,0);
	width: 1000px;
	height: 800px;
		z-index:3;
}

.vprasalnikOzadje.vprasanje9
{
	/*left: 170px;
	top: 250px;*/
	transform:translate3d(140px,180px,0);
	width: 1000px;
	height: 800px;
		z-index:2;
}

.vprasalnikOzadje.vprasanje10
{
	/*left: 170px;
	top: 250px;*/
	transform:translate3d(170px,120px,0);
	width:1600px;
	height:800px;
	z-index:5;
}

.vprasalnikOzadje.vprasanje11
{
	/*left: 170px;
	top: 250px;*/
	transform:translate3d(170px,120px,0);
	width:1600px;
	height:800px;
	z-index:5;
}

.vprasanje
{
	width: 100%;
	height: 100%;
	position:absolute;
	display:block;
	opacity:0;
	z-index:0;
	transition: opacity 0.3s ease;
}

.vprasanje.fadingOut
{
	transition-delay:0s !important;
}

.vprasanje.fadingIn
{
	transition-delay:1s !important;
}

.vprasanje.block
{
	display:block;
}

.vprasanje.visible
{
	opacity: 1;
	z-index: 10;
}

.odgovori-vsi
{
	text-align: left;
	margin-left:200px;
	width:600px;
	height:300px;
	z-index:100;
}

/* odgovor kroglica */

.odgovor-container
{
	margin-bottom: 40px;
	width: 750px;
	height: 30px;
}

.checkBox
{
	width:50px;
	height:50px;
	background-color: #5e9a9d;
	border-radius: 50%;
	position:relative;
	float:left;
	top: 50%;
	transition: background 0.2s;
}

.odgovor-container.oznacen .checkBox
{
	background-color: #A6D057;
}

.odgovor-container.oznacen.nepravilen .checkBox
{
	background-color: #df815f;
}

/* naprej kviz */

#naslovnica
{
	margin: 300px 0 45px 0;
    font-size: 50px;
}

#naslov1
{
	margin: 75px 0 45px 0;
	font-size: 45px;
}

#naslov2
{
	margin: 75px 0 25px 0;
	font-size: 45px;
	text-align: center;
}

#naslov3
{
	margin: 75px 0 85px 0;
	font-size: 45px;
}


#naslov4
{
	margin: 75px 0 85px 0;
	font-size: 45px;
}

#naslov5
{
	margin: 75px 0 85px 0;
	font-size: 45px;
}

#naslov6
{
	margin: 75px 0 55px 0;
	font-size: 45px;
}

#naslov7
{
	margin: 75px 0 85px 0;
	font-size: 45px;
}

#naslov8
{
	 margin: 55px 0 55px 0;
    padding: 0 55px 0 55px;
	font-size: 25px;
}

#naslov9
{
	margin: 75px 0 85px 0;
	padding: 0 55px 0 55px;
	font-size: 35px;
}

#naslov10
{
	margin: 75px 0 50px 0;
    font-size: 35px;
    padding: 0 55px 0 55px;
}

#naslov11
{
	margin: 145px 0 50px 0;
    font-size: 105px;
    padding: 0 55px 0 55px;
}

.odgovor
{
	font-size:25px;
	position:absolute;
	float:right;
	color: black;
	margin-left: 90px;
	width:700px;
}

.enaVrstica
{
	padding-top: 22px;
}

.dveVrstice
{
	padding-top: 13px;
	line-height: 1.1;
}

.draggableOdgovor
{
	position: absolute;

	border-radius: 50px;
	transition: border-radius 0.2s;
}

.draggableOdgovor6
{
	position: absolute;

	border-radius: 50px;
	transition: border-radius 0.2s;
}


.draggableOdgovor8
{
	position: absolute;

	border-radius: 50px;
	transition: border-radius 0.2s;
}


.draggableOdgovor10
{
	position: absolute;
    border-radius: 110px;
    transition: border-radius 0.2s;
    width: 200px;
  	 height: 196px;
    text-align: center;
    background-color: #DFB65E;
    padding-top: 90px;
    color: white;
    font-size: 16px;
}


.droppable
{
	width: 250px;
    height: 250px;
    border: dotted 2px #DFB65E;
    text-align: center;
    margin-right: 50px;
    float:left;
    margin-bottom: 20px;
    margin-right: 30px;
}

.droppable6
{
	width: 250px;
    height: 250px;
    border: dotted 2px #DFB65E;
    text-align: center;
    margin-right: 50px;
    float:left;
    margin-bottom: 20px;
    margin-right: 30px;
}

.droppable8
{
	width: 250px;
    height: 250px;
    text-align: center;
    margin-right: 50px;
    float:left;
    margin-bottom: 20px;
    margin-right: 30px;
}
.droppable10
{
	width: 200px;
    height: 200px;

    border: dotted 2px #DFB65E;
    text-align: center;
    margin-right: 50px;
    float:left;
    margin-bottom: 20px;
    margin-right: 30px;
    position: absolute;
}

.droppable p
{
	margin-top: 35%;
    font-size: 50px;
}

.droppable6 p
{
	margin-top: 35%;
    font-size: 50px;
}

.droppable8 p
{
	margin-top: 35%;
    font-size: 50px;
}

.droppable10 p
{
	
}

#graf{
	opacity:0;
	visibility: hidden;
	transition: opacity 1s;
}

#doze{
	opacity:0;
	visibility: hidden;
	transition: opacity 1s;
    width: 300px;
    height: 400px;
    position: absolute;
    left: 70px;
    top: 60px;
}

#doze p
{
	font-weight: 700;
}

#zaporedje{
	opacity:0;
	visibility: hidden;
	transition: opacity 1s;
    width: 300px;
    height: 400px;
    position: absolute;
    left: 200px;
    top: 300px;
}

#zaporedje p
{
	font-weight: 700;
}

.spuscen
{
	position:absolute !important;
	left:0 !important;
	top:0 !important;
	border-radius:0px;
	text-align: center;
    width: 100%;
    z-index: -2;
}

.stevec
{
	bottom: 20px;
	position: absolute;
	left: 50%;
}

#ikona1
{
	position: absolute;
    left: 100px;
    top: 175px;
    width: 150px;
    height: 150px;
}

#ikona2
{
	position: absolute;
    left: 300px;
    top: 50px;
    width: 150px;
    height: 150px;
}

#ikona3
{
	position: absolute;
    left: 300px;
    top: 300px;
    width: 150px;
    height: 150px;
}

#ikona4
{
	position: absolute;
    left: 500px;
    top: 175px;
    width: 150px;
    height: 150px;
}

#ikona5
{
	position: absolute;
    left: 700px;
    top: 50px;
    width: 150px;
    height: 150px;
}

#ikona6
{
	position: absolute;
    left: 700px;
    top: 300px;
    width: 150px;
    height: 150px;
}

#ikona7
{
	position: absolute;
    left: 900px;
    top: 175px;
    width: 150px;
    height: 150px;
}

#ikona8
{
	position: absolute;
    left: 1100px;
    top: 50px;
    width: 150px;
    height: 150px;
}

#ikona9
{
	position: absolute;
    left: 1100px;
    top: 300px;
    width: 150px;
    height: 150px;
}

#ikona10
{
	position: absolute;
    left: 1300px;
    top: 175px;
    width: 150px;
    height: 150px;
}

.odgovor-container img
{
	width: 100%;
	height: 100%;
	border-radius:150px;
	border: solid 0px;
	background: #A6D057;
	transition: border-width 0.2s ease-in-out;
}


.odgovor-container.oznacen img
{
	border-width: 10px;
	border-color: #A6D057;
}

.odgovor-container.oznacen.nepravilen img
{
	border-width: 10px;
	border-color: #df815f;
}