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

body		{ margin: 0; padding: 0; overflow-x: hidden; background-color: #000000; color: #ffffff; font-family: 'Rubik'; }
A:link      	{ text-decoration: none; }
A:visited   	{ text-decoration: none; }
A:hover     	{ text-decoration: none; }
A:active    	{ text-decoration: none; }


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