#frame
{
	background:#e7f1d4;
}

/* banane ki letijo */

.hidden
{
	visibility: hidden !important;
}

.bg1
{
	position:absolute;
	left:-100px;
	top:-100px;
	animation: banana1 linear 38s infinite;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}

@keyframes banana1 { 
	0% 
	{ 
		transform: translate3d(0,0,0) rotate(0deg);
	} 
	50% 
	{ 
		transform: translate3d(2200px,1500px,0) rotate(720deg);
	} 
	51% 
	{ 
		transform: translate3d(2200px,-500px,0) rotate(360deg);
	} 
	100% 
	{ 
		transform: translate3d(0px,1500px,0) rotate(0deg);
	}
}

.bg2
{
	position:absolute;
	left:300px;
	top:-500px;
	animation: banana2 linear 33s infinite;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}

@keyframes banana2 { 
	0% 
	{ 
		transform: translate3d(0,0,0) rotate(0deg);
	} 
	50% 
	{ 
		transform: translate3d(2700px,1500px,0) rotate(360deg);
	} 
	51% 
	{ 
		transform: translate3d(2800px,-800px,0) rotate(360deg);
	} 
	100% 
	{ 
		transform: translate3d(0px,1900px,0) rotate(0deg);
	}
}

.bg3
{
	position:absolute;
	left:2000px;
	top:200px;
	animation: banana3 linear 30s infinite;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}

@keyframes banana3 { 
	0% 
	{ 
		transform: translate3d(0,0,0) rotate(0deg);
	} 
	50% 
	{ 
		transform: translate3d(-2200px,1500px,0) rotate(720deg);
	} 
	51% 
	{ 
		transform: translate3d(-2200px,-500px,0) rotate(360deg);
	} 
	100% 
	{ 
		transform: translate3d(0px,1500px,0) rotate(0deg);
	}
}

.bg4
{
	position:absolute;
	left:2200px;
	top:-500px;
	animation: banana4 linear 35s infinite;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}

@keyframes banana4 { 
	0% 
	{ 
		transform: translate3d(0,0,0) rotate(0deg);;
	} 
	50% 
	{ 
		transform: translate3d(-2600px,1000px,0) rotate(360deg);
	} 
	51% 
	{ 
		transform: translate3d(-2800px,800px,0) rotate(360deg);
	} 
	100% 
	{ 
		transform: translate3d(300px,190px,0) rotate(0deg);
	}
}

.bg5
{
	position:absolute;
	left:2000px;
	top:1500px;
	animation: banana5 linear 15s infinite;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	z-index:6;
	visibility: visible;
}

@keyframes banana5 { 
	0% 
	{ 
		transform: translate3d(0,0,0);
	} 
	50% 
	{ 
		transform: translate3d(-2500px,-2000px,0);
	} 
	51% 
	{ 
		transform: translate3d(-2500px,0px,0);
	} 
	52% 
	{ 
		transform: translate3d(-500px,0px,0);
	}
	100% 
	{ 
		transform: translate3d(-1700px,0px,0);
	}
}

.bg6
{
	position:absolute;
	left:-500px;
	top:1500px;
	animation: banana6 linear 25s infinite;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}

@keyframes banana6 { 
	0% 
	{ 
		transform: translate3d(0,0,0);
	} 
	50% 
	{ 
		transform: translate3d(2500px,-2000px,0);
	} 
	51% 
	{ 
		transform: translate3d(2500px,0px,0);
	} 
	52% 
	{ 
		transform: translate3d(-2500px,0px,0);
	}
	100% 
	{ 
		transform: translate3d(1700px,-2000px,0);
	}
}

.textbox
{
	position: absolute;
	left:100px;
	top:100px;
	width:400px;
	padding:50px;
	background: rgba(255, 255, 255, 0.5);
	text-align: justify;
	border-top-right-radius: 60px;
	border-bottom-left-radius: 60px;
	border-bottom-right-radius: 60px;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}

.textbox2
{
	position: absolute;
	right:100px;
	bottom:0px;
	height:200px;
	width:600px;
	padding:50px;
	background: rgba(255, 255, 255, 0.5);
	text-align: justify;
	border-top-left-radius: 60px;
	border-top-right-radius: 60px;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}

.krog
{
	width:300px;
	height:300px;
	border-radius: 150px;
	background:#a6d056;
	position: absolute;
	box-shadow: 0 0 10px white;
	transition:box-shadow 1s,width 1s, height 1s, border-radius 1s, left 1s, top 1s ease;
	transform-origin:50% 50%;
	z-index:5;
	overflow:hidden;
}

.krog.big
{
	width:500px;
	height:500px;
	border-radius: 250px;
	z-index: 7;
	box-shadow: 0 0 30px white;
}

.krog .besedilo
{
	width:500px;
	position: absolute;
	background:#f6f6f6;
	padding: 500px 70px 20px 70px;
	border-radius:80px;
	left:-100px;
	bottom:300px;
	text-align: center;
	transition:transform 1s,bottom 1s, left 1s, ease;
}

.krog.big .besedilo
{
	width:500px;
	left:0px;
	bottom:180px;
}

.krog img.ikona
{
	position: absolute;
	bottom:0;
	left:0;
	transition:transform 1s, left 1s ease;
	transform-origin:50% 100%;
}

.krog.big img.ikona
{
	left:100px;
	transform: scale(0.6);
}



.k1
{
    left: 202px;
    top: 705px;
}

.k1.big
{
    left: 102px;
    top: 625px;
}

.k2
{
    left: 610px;
    top: 505px;	
}

.k2.big
{
    left: 510px;
    top: 405px;	
}

.k3
{
    left: 605px;
    top: 105px;	
}

.k3.big
{
    left: 505px;
    top: 5px;	
}

.k4
{
    left: 1003px;
    top: 541px;	
}

.k4.big
{
    left: 903px;
    top: 441px;	
}

.k5
{
    left: 1058px;
    top: 148px;	
}

.k5.big
{
    left: 958px;
    top: 48px;	
}

.k6
{
    left: 1455px;
    top: 456px;	
}

.k6.big
{
    left: 1355px;
    top: 356px;	
}

.k7
{
    left: 1459px;
    top: 129px;	
}

.k7.big
{
    left: 1359px;
    top: 29px;	
}