@font-face {
font-family: 'Rubik';
font-display: auto;
font-style: normal;
font-weight: 300;
src: url('fonts/Rubik-Light.ttf') format('truetype');
}

@font-face {
font-family: 'Tungsten Bold';
font-display: auto;
font-style: normal;
font-weight: 300;
src: url('fonts/Tungsten-Bold.ttf') format('truetype');
}

body		{ margin: 0; padding: 0; overflow-x: hidden; background-color: white; color: black; font-family: 'Rubik'; font-size: 18px; line-height: 150%; }
A:link      	{ text-decoration: none; color: black; }
A:visited   	{ text-decoration: none; color: black; }
A:hover     	{ text-decoration: none; color: black; }
A:active    	{ text-decoration: none; color: black; }


.pl1 { width: 120px; height: 120px; border: 4px white solid; margin: 5px; display: inline-block; background-color: rgba(100, 100, 100, 0.5); overflow: hidden; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }
.slika1 { height: 120px; }
#organi1 { display: none; position: fixed; z-index: 100; }
.odmik1 { height: 50px; }
.dol1 { animation-name: dolx1; animation-iteration-count: 5; animation-duration: 2s; }
@keyframes dolx1 {
	  0% { opacity: 1; }
	 20% { opacity: 1; }
	 50% { opacity: 0; }
	 70% { opacity: 1; }
	100% { opacity: 1; }
}

.s1 { width: 130px; height: 200px; position: absolute; top: 0; left: 0; margin: -100px 0 0 -65px; -webkit-animation:spin 6s linear infinite; -moz-animation:spin 6s linear infinite; animation:spin 6s linear infinite; }
	@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
	@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
	@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }



.crka1 { font-size: 30px; font-weight: bold; width: 36px; height: 36px; background-color: white; color: black; display: inline-block; z-index: 501; position: relative; text-align: center; padding: 0 0 0 0; overflow: hidden; margin: 1px; }
.crka10 { width: 36px; height: 36px; display: inline-block; z-index: 501; position: relative; margin: 1px; }

.crka2 { border: 0; padding: 7px 0 0 0; font-size: 19px; font-weight: bold; width: 8%; height: 28px; color: black; display: inline-block; z-index: 502; position: relative; text-align: center; overflow: hidden; margin: 1px; background-color: #e2e2e2; vertical-align: top; }

.uur { width: 20px; overflow: hidden; text-align: center; padding: 2px 5px 2px 5px; font-size: 16px; display: inline-block; margin: 2px; background-color: red }
.uuo { width: 20px; overflow: hidden; text-align: center; padding: 2px 5px 2px 5px; font-size: 16px; display: inline-block; margin: 2px; background-color: orange }
.uug { width: 20px; overflow: hidden; text-align: center; padding: 2px 5px 2px 5px; font-size: 16px; display: inline-block; margin: 2px; background-color: green }


.utrip {-webkit-animation: utrip1 .7s linear infinite; -moz-animation: utrip1 .7s linear infinite; animation: utrip1 .7s linear infinite; }
@keyframes utrip1 {
	  0% { color: #000000; }
	 60% { color: #000000; }
	 75% { color: #ffffff; }
	 85% { color: #ffffff; }
	100% { color: #000000; }
}

.fokus { border: 2px red solid; -webkit-animation: fokus1 1s linear infinite; -moz-animation: fokus1 1s linear infinite; animation: fokus1 1s linear infinite; }
@keyframes fokus1 {
	  0% { border: 4px red solid; margin: 0 0 -4px 0; }
	 80% { border: 4px black solid; margin: 0 0 -4px 0; }
	100% { border: 4px red solid; margin: 0 0 -4px 0; }
}


.gumb1 { font-weight: bold; color: white; background-color: red; padding: 10px 20px 10px 20px; display: inline-block; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border: 3px white solid; }




#bravo { display: none; position: fixed; left: 0; bottom: 0; color: white; width: 100%; z-index: 9999; text-align: center; overflow: hidden; height: 600px; -webkit-animation: bravo2 2s linear 1; -moz-animation: bravo2 2s linear 1; animation: bravo2 2s linear 1; }

#bravo2 { -webkit-animation: bravo2 .3s linear 1; -moz-animation: bravo2 .3s linear 1; animation: bravo2 .3s linear 1; }
@keyframes bravo2 {
	  0% { bottom: -600px; }
	 60% { bottom: 0; }
	 80% { bottom: -30px; }
	100% { bottom: 0; }
}


.bravo1 {
	display: inline-block;
	left: 50%;
	margin: 100px 0 0 -200px;
	width: 800px;
	height: 739px;
	background: transparent url(igra-ugani_besedo/b1.png) no-repeat center center; 
	background-size: 800px 739px;
	-webkit-animation-name: rotate;
	-webkit-animation-duration: 5s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
	-moz-animation-name: rotate;
	-moz-animation-duration:5s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function:linear;
}

@-webkit-keyframes rotate {
  from {-webkit-transform:rotate(0deg);}
  to {  -webkit-transform:rotate(360deg);}
}

@-moz-keyframes rotate {
  from {-moz-transform:rotate(0deg);}
  to {  -moz-transform:rotate(360deg);}
}



.ank1 { font-weight: bold; color: white; background-color: black; padding: 3px 7px 3px 7px; font-size: 12px; margin: 0 0 3px 0; }



.f1 { font-size: 16px; font-weight: bold; padding: 15px; width: 400px; }
.f2 { font-size: 16px; font-weight: bold; padding: 15px; }
.f3 { font-size: 24px; font-weight: bold; padding: 15px 40px 15px 40px; background-color: red; color: white; border: 0; margin: 30px 0 0 0; }
.f4 { width: 400px; height: 150px; }

.m1 { width: 150px; position: absolute; top: 270px; right: 310px; }
.m2 { width: 180px; position: absolute; top: 60px; right: 600px; }
.m3 { width: 180px; position: absolute; top: 390px; right: 660px; }
.m4 { width: 150px; position: absolute; top: 90px; right: 410px; }

.aniM1 { -webkit-animation: m1 3s linear infinite; -moz-animation: m1 3s linear infinite; animation: m1 3s linear infinite; }
@keyframes m1 {
	  0% { margin-top: 0; }
	 70% { margin-top: 5px; }
	100% { margin-top: 0; }
}

.aniM2 { -webkit-animation: m2 4s linear infinite; -moz-animation: m2 4s linear infinite; animation: m2 4s linear infinite; }
@keyframes m2 {
	  0% { margin-top: 0; }
	 30% { margin-top: -5px; }
	100% { margin-top: 0; }
}



.dd1 { background-color: #F1C000; overflow: hidden; height: 600px; }
.dd2 { background: transparent url(slike/s2.png) no-repeat right center; width: 800px; height: 635px; font-size: 80px; background-size: 800px 635px; font-family: "Tungsten Bold"; line-height: 80%; letter-spacing: -1px; display: inline-block; margin: 0 -400px 0 0; }
.dd3 { width: 640px; border: 25px #F1C000 solid; }
.dd4 { width: 690px; text-align: left; }
.dd5 { display: inline-block; width: 400px; margin: 20px; text-align: left; vertical-align: top; background-color: #e8e8e8; }
.dd6 { text-align: left; font-size: 14px; width: 690px; line-height: 130%; margin: 30px 0 0 0; }
.dd7 { width: 250px; margin: 60px 0 0 0; vertical-align: top; left: 0; font-size: 80px; font-family: "Tungsten Bold"; line-height: 80%; letter-spacing: -1px; display: inline-block; color: white; text-align: left; }

.nar1 { width: 300px; overflow: hidden; height:120px; background: url(slike/skodelica-1.png) transparent top left; background-size: 300px 150px; }
.cena1 { font-family: "Tungsten Bold"; font-size: 50px; margin: 20px 0 0 0; }

@media screen and (max-width: 500px){

	.dd1 { background-color: #F1C000; overflow: hidden; height: 900px; }
	.dd2 { background: transparent url(slike/s2.png) no-repeat right center; width: 550px; height: 436px; background-size: 550px 436px; display: inline-block; margin: 0 -100px 0 0; }

	.m1 { width: 90px; position: absolute; top: 640px; right: 15px; }
	.m2 { width: 120px; position: absolute; top: 490px; right: 180px; }
	.m3 { width: 120px; position: absolute; top: 720px; right: 160px; }
	.m4 { width: 120px; position: absolute; top: 500px; right: 20px; }

	.dd3 { width: 90%; border: 5px #F1C000 solid; }
	.dd4 { width: 90%; text-align: left; }
	.dd5 { width: 90%; text-align: left; vertical-align: top; }

	.f1 { font-size: 16px; font-weight: bold; padding: 10px; width: 90%; }
	.f2 { font-size: 16px; font-weight: bold; padding: 10px; }
	.f3 { font-size: 24px; font-weight: bold; padding: 15px 40px 15px 40px; background-color: red; color: white; border: 0; margin: 30px 0 0 0; }
	.f4 { width: 90%; height: 100px; }

	.dd6 { text-align: left; font-size: 14px; width: 90%; line-height: 130%; margin: 30px 0 0 0; }

	.nar1 { width: 240px; overflow: hidden; height:120px; background: url(slike/skodelica-1.png) transparent top left; background-size: 300px 150px; }
	.cena1 { font-family: "Tungsten Bold"; font-size: 44px; margin: 12px 0 0 0; }

}