/*
 Theme Name: CISTOCA VZ
 Description: Tema za cistoca-vz.hr
 Author: Orbis d.o.o
 Author URI: www.orbis.hr
 */
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight: normal;
	vertical-align: baseline;
	background: transparent;
}

article, aside, figure, footer, header, nav, section, details, summary {display: block;}
html {
	box-sizing: border-box;
}
*,
*:before,
*:after {
	box-sizing: inherit;
}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {max-width: 100%;}
html {overflow-y: scroll;}
ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before,
blockquote:after,
q:before,
q:after {content: ''; content: none;}
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}
hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}
input, select {vertical-align: middle;}
pre {
    white-space: pre; /* CSS2 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
    word-wrap: break-word; /* IE */
}
input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}
.ie7 input[type="checkbox"] {vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}
select, input, textarea {font: 99% sans-serif;}
table {font-size: inherit; font: 100%;}
small {font-size: 85%;}
strong {font-weight: bold;}
td, td img {vertical-align: top;}
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
pre, code, kbd, samp {font-family: monospace, sans-serif;}
.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button {cursor: pointer;}
/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}
/* make buttons play nice in IE */
button,
input[type=button] {width: auto; overflow: visible;}
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}
/* prevent BG image flicker upon hover
   (commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
*/
/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/************************************END RESET*************************************************/


body, select, input, textarea {color: #5a5a5a;}
a {text-decoration: none;}


::-moz-selection{background: #328efe; color: #fff; text-shadow: none;}
::selection {background: #328efe; color: #fff; text-shadow: none;}

a:link {-webkit-tap-highlight-color: #328efe;}

ins {background-color: #328efe; color: #000; text-decoration: none;}
mark {background-color: #328efe; color: #000; font-style: italic; font-weight: bold;}


input:focus, textarea:focus {
    outline: none !important;
    border: 1px solid #328efe;
}
:-webkit-input-placeholder {/* WebKit browsers */
    color: #999;
}
:-moz-placeholder {/* Mozilla Firefox 4 to 18 */
    color: #999;
    opacity: 1;
}
::-moz-placeholder {/* Mozilla Firefox 19+ */
    color: #999;
    opacity: 1;
}
:-ms-input-placeholder {/* Internet Explorer 10+ */
    color: #999;
}

.alignleft {
    float: left;
    margin-right: 10px;
}
.alignright {
    float: right;
    margin-left: 10px;
}
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/*
 COLORS
 GREEN1: #c2ffe0
 GREEN2: #8ed0af
 */
body {
    background: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #777;
}
h1 {
    color: #fff;
    font-size: 48px;
    font-family: 'Trocchi', serif;
    line-height: 50px;
    padding-bottom: 25px;
    text-shadow: 3px 3px 3px rgba(0,0,0,0.11);
}
h5  {
    font-family: 'Roboto Slab', serif;
    color: #478b68;
    font-weight: 300;
    font-size: 30px;
     text-shadow: 1px 1px 5px #7bba9a
}
h2 {
    font-family: 'Roboto Slab', serif;
     color: #478b68;
     font-size: 24px;
}
footer h3 {
    color: #616161;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    padding-bottom: 15px;
}
a.but {
  background: -webkit-linear-gradient(#48cb87, #01a652); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#48cb87, #01a652); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#48cb87, #01a652); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#48cb87, #01a652); /* Standard syntax */
  color: #fff;
  font-weight: 600;
  text-shadow: 3px 3px 0px rgba(0,0,0,0.15);
  padding: 15px 18px;
  display: inline-block;
  box-shadow: 5px 5px 0px -1px #f0f0f0;
  margin-bottom: 10px;
}
#noveobavijesti h3 {
     font-family: 'Roboto Slab', serif;
     font-size: 18px;
     color: #989898;
     text-transform: uppercase;
     border-bottom: 1px solid #ddd;
     text-align: center;
     width: auto;
     padding-bottom: 10px;
     margin: 0px 100px 30px 100px;
}
#noveobavijesti h3 span {
    color: #00a651;
}
.container {
    width: 960px;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
  }
header {
  background: -webkit-linear-gradient(#c2ffe0, #8ed0af); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#c2ffe0, #8ed0af); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#c2ffe0, #8ed0af); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#c2ffe0, #8ed0af); /* Standard syntax */
}
header#big-header {
    width: 100%;
    overflow: hidden;
    height: 730px;
}
.header-top {
    width: 1160px;
    margin-top: 50px;
}
a#logo {
    float: left;
}
nav#main-nav {
    float: right;
}
nav#main-nav li {
    float: left;
    padding: 20px 35px;
}
nav#main-nav li a{
   display: block;
   color:#478b68;
   font-size: 20px;
   font-weight: 300;
    padding-bottom: 5px;
}
nav#main-nav li.current-menu-item a,  nav#main-nav li a:hover{
    border-bottom: 3px solid #93d5b4;
}
.pagetitle {
    text-align: center;
    padding: 180px 200px 0px;
}

#noveobavijesti {
    width: 730px;
    margin: 0 auto;
    margin-bottom: 120px
}
.pojedinanovaobabijest {
    clear: both;
    width: 100%;
    overflow: hidden;
    position: relative;
}
.pojedinanovaobabijest img {
    float: left;
    margin-right: 20px;
}
.pojedinanovaobabijest h2 {
    text-align: center;
    padding-bottom: 5px;
}
.objavljeno {
    text-align:center;
    color: #ccc;
    font-size: 12px;
    font-weight: 600;
    padding-bottom: 20px;
}
.pojedinanovaobabijest p {
   color: #989898;
   font-weight: 600;
   line-height: 20px;
  }
.pojedinanovaobabijest a.but {
    position: absolute;
    bottom: 0px;
    margin-left: 160px;
}
footer {
    overflow: hidden;
    background: #424242;
}

.fleft {
    padding-top: 25px;
    float: left;
    width: 580px;
    margin-right: 30px;
}
.fright {
    padding-top: 25px;
    float: left;
    width: 350px;
}
.fleft  li {
    float: left;
    width: 33%;
    line-height: 19px;
}
.fleft  li a {
    color: #989898;
    font-weight: 600;
    font-size: 14px;
  }
.fleft ul {
    overflow: hidden;
    padding-bottom: 30px;
  }
a.sico {
    margin-right: 10px;
  }
.fright p {
        color: #989898;
    font-weight: 600;
    line-height: 19px;
    padding-bottom: 5px;
}
.fright p strong {
    color: #ddd;
}
.potpis {
    text-align: center;
    padding: 15px 0px 5px;
}
.potpis p {
    font-weight: 600;
    font-size: 11px;
    color: #989898;
  }
.potpis p span {
    display: block;
    font-size: 10px;
     font-weight: 600;
     line-height: 12px;
}
.potpis a {
color: #989898;
  }
#karta {
 width: 950px;
margin-left: auto;
margin-right: auto;
margin-top: -240px;
padding-bottom: 160px;
}
#karta svg {
  height: auto;
  width: 960px;
  margin: 0 auto;
  display: block;
 -webkit-filter: drop-shadow(7px 7px 0px rgba(240,240,240,0.5) );
  filter: drop-shadow( -5px -5px 5px #000 ); /* Same syntax as box-shadow */

}

#karta g {
  fill: #f3f3f4;
  stroke: #e5e6e6;
  stroke-width: 1;
}
#karta text {
fill:#bebebe;
font-size: 12px;
text-transform: uppercase;
pointer-events: none;
}
#karta text.cistoca-true {
    fill:#076136;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
}

g.cistoca-true  {
      fill: #00a651 !important;
      stroke: #10984b!important;
  stroke-width: 1;
    cursor: pointer;
}
g.cistoca-true:hover {
  fill: #48cb87 !important;
}
.qtip-default {
   background: #424242;
   border: 0px;
}
.qtiptitle {
  background: -webkit-linear-gradient(#48cb87, #02a752); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#48cb87, #02a752); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#48cb87, #02a752); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#48cb87, #02a752); /* Standard syntax */
 padding: 12px;
}

.qtip-titlebar, .qtip-content {
    width: 250px;
}
.qtip-content {
    padding: 0px;
}
.qtip {
  box-shadow: 5px 5px 0px -1px rgba(240,240,240, 0.5);
}
.qtip-content li {
    padding-left: 20px;
    line-height: 38px;
    color: #989898;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}
.qtip-content li.usluga-true {
    color: #fff;
    background: #323232;
}
.qtip-content span {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #016833;
    padding-bottom: 5px;
}
.qtip-content h3 {
    color: #fff;
    font-size: 30px;
    font-weight: 300;
    font-style: italic;
    line-height: 30px;
}