/* oswald-200 - latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200;
  src: local(''),
       url('/css/oswald-v40-latin-ext-200.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/css/oswald-v40-latin-ext-200.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* oswald-regular - latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('/css/oswald-v40-latin-ext-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/css/oswald-v40-latin-ext-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* oswald-700 - latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('/css/oswald-v40-latin-ext-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/css/oswald-v40-latin-ext-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
  font-family: 'Cochin';
  font-style: normal;
  font-weight: 400;
  src: local('Cochin'),
       url('/css/cochin.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/css/cochin.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

body {margin:0;padding:0}
a:hover {color:#ffe100;text-decoration: underline}
a {text-decoration: none}

h2, h3 {font-family: oswald,sans-serif;margin:0;padding:0}
h2 {font-size: 28px}
h3 {font-size: 22px;font-style: italic;font-weight: 100;margin-bottom: 20px}

p {font-family: Cochin,serif;font-size:18px}

div.container {width:1200px;margin:0 auto}
div.top {overflow:auto}

div.main {width: 100%}
div.main .box {float: left;margin-right: 80px}
div.main .livo {width:250px;float: left;overflow-y: hidden;}
div.main .livo a {font-family: Oswald;font-size:15px;color:#999}
div.main .desno {width:650px;float: right;overflow-y: hidden}

div.yt {clear:both;margin:25px auto 0;overflow:auto;width: 960px}
div.nav {clear: both;overflow: auto;margin:0;padding:0;width:100%}
div.nav a {color:#fff;font-size:20px}
div.nav .livo, div.nav .desno {width:43%;padding:8px 10px;background-color: #005496;overflow: hidden;color:#fff;font-family: Oswald;color:#fff}
div.nav .livo {float:left;text-align: left}
div.nav .desno {float: right;text-align: right}

div.osm {clear: both;margin:50px 0;overflow: auto}

div.logo img {height:60px;margin-left: 13px;margin-top:10px}
div.logo {float: left;width:150px}
div.naslov {float:right;margin-right:110px}
div.jezik {float:right;width:35px;background-color: #005496;padding:2px 8px;text-align: right}
div.jezik a {color:#FFF;;font-weight: bold;font-family: Oswald}
h1 {font-family: Oswald; font-size:36px;font-weight:700;margin:20px auto 0;text-align:center;width:650px}

div.plan {clear:both;background: no-repeat url(../kipi/karta_susevo_longitolj.png) center center;width:1200px;height: 620px;position:relative}

div.tocka {border:3px solid #005496;width:16px;height:16px;border-radius: 10px;background-color: #FFC200;position:absolute}
a.tocka_akt div.tocka {background-color: #D4ECF5}
div.plan a.tocka {position: absolute}


div.kolo {border:2px solid #005496;width:200px;height:200px;border-radius: 100px;background-color: #D4ECF5;position:absolute;top:30px;text-align: center;display: none; opacity: 0; transition: opacity 900ms;cursor: pointer}
div.kolo:hover {border-color: #FFC200}

div.kolotabela {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

div.kolomid {
  display: table-cell;
  vertical-align: middle;
}

div.koloinner {
  margin-left: auto;
  margin-right: auto;
  width: 200px;
  /* Whatever width you want */
}


div.kolo * {margin:0;padding:0}
div.kolo h2 {font-family: Oswald; font-size: 30px; font-style: normal; font-variant: normal; font-weight: normal;line-height:32px;margin:10px 0 6px 0;letter-spacing: -0.05em;color:#005496}
div.kolo p, div.kolo a {font-family: Cochin;font-size:18px;}
div.kolo p.broj {font-family: Oswald; font-size: 30px; font-style: normal; font-variant: normal; font-weight: bold;color:#fff9f2;}
div.kolo p {color:#7E7E7E}
div.kolo p.selo {margin:5px 0 18px 0}
div.kolo a {color:#005496;margin-top:10px;font-weight:bold}
.kol_visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}
.kol_hidden {
  visibility: hidden;
  opacity: 0;
  transition: opacity 2s linear;
}

div.sponzori {clear:both;height:2px;width:1000px;margin:60px auto 10px;border-top:solid 1px #999;border-bottom:solid 1px #999}
div.sponzori ul {display:none;list-style: none;margin:0;padding:0}
div.sponzori li {float:left;min-width:130px; padding:0 12px;text-align: center}
div.sponzori img {height:45px;margin-top:10px}

div.footer {width:900px;margin:0px auto 15px;text-align: center}
div.footer p {font-size:11px;font-family: Oswald;color:#999}
div.planmobile, div.kolomobile {display: none}

@media only screen and (max-width: 600px) {
	div.planmobile {display: block}
	div.planmobile img {width: 100%}
	div.plan {display:none}
	div.container {width:100%}
	div.naslov {width:auto;text-align: center;margin:0 0 0 20px;float:left}
	div.naslov h1 {width:auto;font-size:30px}
	div.sponzori, div.footer {width:100%;height:auto;margin:auto}
	div.sponzori {margin-top: 100px}
	div.sponzori img {height:18px}
	div.kolomobile {display: block;margin: 0 20px}
	div.kolomobile div.kolo {display: block;position: relative}
	div.strelica, div.strelicadesno {width:40px;height:150px;background-color: #c21515;color:#fff;font-size: 80px;font-family: Oswald;font-weight:bold;float:left}
	div.strelicadesno {float:right}
}