/* CSS Document */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}
html{overflow-x:hidden}
body{margin:0}
h1,h2,h3,h4,h5,h6{font-family:"Open Sans",Arial,sans-serif;font-weight:400;margin:10px 0}
.naslov{font-family:"Open Sans",Arial,sans-serif;font-size:50px;margin:10px 0; color:#ffffff; max-width:100%; text-align:center;}
a {  color:#FF6600; text-decoration:none;}
a:hover{  color:#FF6600; text-decoration:underline;}
.izbornik { width:100%;}
.image{max-width:100%;height:auto; vertical-align:middle;}
.header{max-width:1564px; margin:auto; padding:0px;}
.content{max-width:1564px;margin:auto; padding:4px 8px;}
.content-left{ width:45%; padding: 0px 0px; margin:8px; text-align:left; float:left; background-color:#009900;}
.content-text { background-color:#055856!important; padding: 38px 36px; margin:0px; color:#E9FEFE;}
.content-text2 { padding: 38px 36px; text-align:left; margin:0px; color:#000;}
.container { padding-top:35px; padding-left:15px;}
.container-prikaz { text-align:center; width:100%; padding: 0px;}
.border-bottom{ border-color:#ff9800!important; border-bottom:1px solid; text-align:center; padding-bottom:16px; color:#696969;}
.border-bottom2{ border-color:#696969!important; border-bottom:1px solid; text-align:center; padding-bottom:8px; color:#696969;}
.border-bottomSiva{ border-color:#607d8b!important; border-bottom:2px solid; text-align:center; padding-bottom:8px; color:#607d8b;}
.border-bottomSvjetloSiva{ border-color:#f1f1f1!important; border-bottom:2px solid; text-align:center; padding-bottom:8px; color:#696969;}
.border-bottomNarandjasti{ border-color:#696969!important; border-bottom:2px solid; text-align:center; padding-bottom:8px; color:#696969;}
.border-bottomZeleni{ border-color:#009688!important; border-bottom:2px solid; text-align:center; padding-bottom:8px; color:#696969;}
.button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:#fff;background-color:#696969;text-align:center;cursor:pointer;white-space:nowrap; width:100%;-webkit-transition-duration: 0.8s; /* Safari */
  transition-duration: 0.4s;}
.button:hover{text-decoration:none;box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} 
.button:hover{color:#000!important;background-color:#fff!important; width:100%;}
.button2{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none; color:#CCC; background-color:#18720C;text-align:center;cursor:pointer;white-space:nowrap; width:100%;-webkit-transition-duration: 0.8s; /* Safari */
  transition-duration: 0.4s;}
.button2:hover{text-decoration:none;box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.button2{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} 
.button2:hover{color:#D7FAD1!important; background-color:#55D51E!important; width:100%;}
.frame{  width:100%; margin-bottom:15px;  text-align:center;  border:1px solid;}@media only screen and (max-width: 600px) {.frame { width:100%; height:100%; }}
nav                { position:fixed; width:100%; z-index:99; height:40px; padding-top: 0px; font-family:Arial, Helvetica, sans-serif;  text-align:center; }
nav a              {  color:#CCCCCC; text-decoration:none; background-color:#FFFFFF; padding:10px;font-size:18px;}
nav a:hover        {  color:#333333; text-decoration:none; background-color:#FFFFFF; padding:10px;font-size:18px; }

#nav, #nav ul {  margin: 0; padding: 0; list-style: none; }
#nav { width: 100%;  margin: 0px; background-color: #FFF; }
#nav:before,
#nav:after { content: ""; display: table; }
#nav:after { clear: both; }
#nav { zoom:1; }
#nav li { float: left; position: relative; }
#nav a { float: left; padding: 12px 30px; color: #CCCCCC; text-transform: uppercase; font-family:"Times New Roman", Times, serif; text-decoration: none;}
#nav li:hover > a { color: #333333; }
*html #nav li a:hover { /* IE6 only */ color: #333333; }
#nav ul { margin: 20px 0 0 0;  _margin: 0; /*IE6 only*/  opacity: 0; visibility: hidden; position: absolute; top: 38px; left: 0; z-index: 1; background: #FFFFFF;  background: linear-gradient(#FFF, #CCC); box-shadow: 0 -1px 0 rgba(255,255,255,.3); border-radius: 3px; transition: all .2s ease-in-out; }
#nav li:hover > ul { opacity: 1; visibility: visible; margin: 0; }
#nav ul ul { top: 0; left: 150px; margin: 0 0 0 20px;  _margin: 0; /*IE6 only*/ box-shadow: -1px 0 0 rgba(255,255,255,.3); }
#nav ul li { float: none; display: block; border: 0; _line-height: 0; /*IE6 only*/ box-shadow: 0 1px 0 #FFF, 0 2px 0 #FFF; }
#nav ul li:last-child { box-shadow: none; }
#nav ul a { padding: 10px; width: 170px; _height: 10px; /*IE6 only*/ display: block; white-space: nowrap; float: none; text-transform: none; color:#333333; }
#nav ul a:hover { background-color: #FFFFFF; background-image: linear-gradient(#04acec, #0186ba); }
.komentar { max-width:1024px; width:100%; margin:5px;background-color:#055856; color:#E9FEFE; text-align:center; -webkit-tranzition:0.3s; tranzition:0.3s;}
@media only screen and (max-width: 800px) {.komentar  { width:100%;}}
.komentar:hover { background-color:#fff; color:#000;  box-shadow: 0 16px 24px 0 rgba(0,0,0,0.4);}
.prikaz-naslov-prvi {text-align:center; background-color:#607d8b!important; padding:10px; color:#FFF;}
.prikaz-naslov-drugi {text-align:center; background-color:#f1f1f1!important; padding:10px; color:#000;}
.prikaz-naslov-treci {text-align:center; background-color:#ff5722!important; padding:10px; color:#FFF;}
.prikaz-naslov-cetvrti {text-align:center; background-color:#009688!important; padding:10px; color:#FFF;}
.prikaz-naslov-peti {text-align:center; background-color:#9e9e9e!important; padding:10px; color:#fff;}
.prikaz-naslov-sesti {text-align:center; background-color:#f44336!important; padding:10px; color:#fff;}

.prikaz-middle{position:absolute;top:65%;left:25%;transform:translate(-65%,-25%);-ms-transform:translate(-65%,-25%)}
.prikaz-top{position:absolute;top:25%;left:40%;transform:translate(-25%,-40%);-ms-transform:translate(-25%,-40%)}
.prikaz-najava { text-align:center; background-color:#FFF; border:2px solid; padding: 36px 46px; opacity:0.80;}
.prikaz-najava-top { text-align:center; padding: 36px 46px; opacity:0.80; color:#fff; font-size:36px; border:1px solid;display:block;width:100%!important}
.prikaz-najava-top-crni { text-align:center; padding: 36px 46px; opacity:0.80; color:#000; font-size:36px; border:1px solid;}
.prikaz-button { padding: 4px 8px; margin:0; float:left; width:50%;}
.opacity,.hover-opacity:hover{opacity:0.60}.opacity-off,.hover-opacity-off:hover{opacity:1;}
.pola-lijevi { float:left; width:48%; padding:4px 8px;}
.pola-desni { float:right; width:48%; padding:4px 8px;}
.prikaz-container {position:relative;}
.prikaz-centar-prvi {padding:2px;}
.prikaz-centar-drugi { padding:2px;}
.prikaz-centar-treci {padding:2px;}
.prikaz-centar-cetvrti { padding:2px; }
.row { padding:16px; margin:8px 0px; width:100%; height:70%; }
.row:after{ content:""; display:table; clear:both;}
.row-centar { padding:0px; margin:0px 0px; width:100%; text-align:center; background-color:none; }
.row-centar:after{ content:""; display:table; clear:both;}
.clear { clear:both;}
.footer { text-align:center; background-color:#696969; padding:16px;}

.sestina{ max-width:980px; width:14%; margin-right:8px; margin-top:15px; float:left; border:1px solid;}@media only screen and (max-width: 600px) {.cetvrtina { width:100%;}}
.petina{ max-width:980px; width:18%; margin-right:10px; margin-top:15px; float:left; border:1px solid;}@media only screen and (max-width: 600px) {.cetvrtina { width:100%;}}
.cetvrtina{ max-width:980px; width:22%; margin-right:15px; margin-top:15px; float:left; border:1px solid;}@media only screen and (max-width: 600px) {.cetvrtina { width:100%;}}
.cetvrtina:hover { box-shadow: 0 16px 24px 0 rgba(0,0,0,0.4);}
.trecina { max-width:980px; width:30%; margin:8px 16px; text-align:center; float:left;
}
@media screen and (max-width: 800px) {.trecina { width:100%;}}
.polovina { max-width:1024px; width:48%; margin:5px; text-align:left; float:left; -webkit-tranzition:0.3s; tranzition:0.3s;}
@media only screen and (max-width: 800px) {.polovina { width:100%;}}
.polovina:hover { box-shadow: 0 16px 24px 0 rgba(0,0,0,0.4);}
.polovina:after{ content:""; display:table; clear:both;}
.polovina-border { max-width:1024px; width:48%; margin:5px; text-align:left; float:left; border:1px solid #333; padding:16px 32px; -webkit-tranzition:0.3s; tranzition:0.3s;}@media only screen and (max-width: 600px) {.polovina-border { width:100%;}}
.polovina-centar { max-width:1024px; width:48%; margin:5px; text-align:center; float:left; -webkit-tranzition:0.3s; tranzition:0.3s;}
@media only screen and (max-width: 800px) {.polovina-centar { width:100%;}}
.polovina-centar:hover { box-shadow: 0 16px 24px 0 rgba(0,0,0,0.4);}
.polovina-centar:after{ content:""; display:table; clear:both;}
.cijeli { max-width:1024px; width:100%; margin:5px; text-align:center; -webkit-tranzition:0.3s; tranzition:0.3s;}
@media only screen and (max-width: 800px) {.cijeli  { width:100%;}}
.cijeli:hover { box-shadow: 0 16px 24px 0 rgba(0,0,0,0.4);}
.dvijetrecine { max-width:1024px; width:72%; margin:5px; text-align:left; float:left;}@media only screen and (max-width: 600px) {.dvijetrecine { width:100%;}}
*{ box-sizing:border-box;}
.price{ list-style:none; font-size:medium; text-align:center; border:1px solid #eee; margin:0; padding:0; -webkit-tranzition:0.3s; tranzition:0.3s;}
.price:hover { box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2);}
.price .header { background-color:#696969; color:#fff; font-size:24px;}
.price li { border-bottom:1px solid #eee; padding:20px;}
.price .grey { background-color:#eee;}
.input[type=text],textarea{padding:12px;display:block;border:none; border-left:2px solid #999; width:80%; font-family:Ariel; font-size:16px; resize:vertical;}
.input[type=text]:focus, input[type=password]:focus {background-color: #ddd;  outline: none;}
input[type=text],textarea { width: 100%; padding: 15px; margin: 5px 0 22px 0; display: inline-block; border: none;border-left:2px solid #669696; background: #ddd; resize:vertical; font-size:16px; color:#000; }
input[type=text]:focus, input[type=password]:focus {background-color: #ddd;  outline: none;}
.mail{ list-style:none; font-size:medium; border:1px solid #eee; margin:0; padding:16px 32px; -webkit-tranzition:0.3s; tranzition:0.3s;}
.mail:hover { box-shadow: 0 8px 12px 0 rgba(0,0,0,0.4);}
.modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%;  height: 100%; overflow: auto; background-color: #474e5d; padding-top: 50px;}
.modal-content { background-color: #fefefe; margin: 5% auto 15% auto;  border: 1px solid #888; width: 70%;}
.close {position: absolute; right: 35px; top: 45px; font-size: 40px; font-weight: bold; color: #f1f1f1;}
.close:hover,.close:focus { color: #f44336; cursor: pointer;}
.video{ list-style:none; margin:0; -webkit-tranzition:0.3s; tranzition:0.3s;}
.video:hover { box-shadow: 0 16px 24px 0 rgba(0,0,0,0.4);}
.videoyou{ list-style:none; margin:0; -webkit-tranzition:0.3s; tranzition:0.3s; padding-top:20px; padding-bottom:36px;}
.videoyou:hover { box-shadow: 0 16px 24px 0 rgba(0,0,0,0.4);}
.topnav {overflow: hidden; background-color: #009688; position: fixed;   top: 0;  width: 100%;   z-index:100;}
.topnav a { float: left; display: block; color: #fff; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px;}
.active { background-color: #4CAF50; color: white;}
.topnav .icon { display: none;}
.dropdown { float: left; overflow: hidden;}
.dropdown .dropbtn { font-size: 17px;  border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit;  font-family: inherit; margin: 0;}
.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 100; position: fixed; }
.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left;}
.topnav a:hover, .dropdown:hover .dropbtn { background-color:#fff; color:#009688;}
.dropdown-content a:hover { background-color: #ddd; color: black;}
.dropdown:hover .dropdown-content { display: block;}
@media screen and (max-width: 600px) { .topnav a:not(:first-child), .dropdown .dropbtn { display: none; } .topnav a.icon { float: right;  display: block;}}
@media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0;  top: 0; }.topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown {float: none;}.topnav.responsive .dropdown-content {position: relative;}.topnav.responsive .dropdown .dropbtn {display: block; width: 100%;    text-align: left;}}
.topnav-right { float: right;}



/* Style the label to display next to the inputs */
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
  background-color:#18720C;
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}