.crna{color:#292929;}
.zelena{color:#314d2c;}
.siva{color:#d1cdbc;}
.bijela_lo{color:#f1edde;}
    .bijela_lo_bg{background-color: #f1edde;}
.bijela_hi{color:#f4f2ea;}
.narandasta_lo{color:#f7782b;}
.narandasta_hi{color:#ffa772;}
/*typography*/
body {font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 400; color: #292929;}
h1.site{font-size:30px; font-weight: 900; text-transform: uppercase;}
.navbar-brand h1.site {
    font-size:20px;
    color:#292929;
    float: left;
    margin: 3px 5px;
}
.navbar-brand>img {max-width: 30px; float: left;}
.navbar-toggle .icon-bar {background-color: #292929;}
h2{font-size:40px; font-weight: 900; text-transform: uppercase; padding:30px 0; text-align:center;}
h3{font-size:19px; font-weight: 700; text-transform: uppercase;}
a {color: #f7782b; text-decoration: none;}
a:hover, a:focus {color: #314d2c; text-decoration: underline;}

label {text-transform: uppercase; font-weight: 400; font-size: 14px}
.form-control {background: none; border-color: #d1cdbc}

.page-footer {font-size: 14px; text-align: center; min-height: 240px;}
.page-footer h3 {font-size: 17px; color: #f7782b; text-transform: uppercase;}
.page-footer a {color: #292929;}
.page-footer a:hover, a:focus {color: #f7782b;}
.page-footer .border-left {min-height: 120px;}

@media (min-width: 768px) {
    .page-footer .border-left {border-left: 1px solid #f7782b;}
}

.lead,
.heading
    {font-size: 19px;font-weight: bold;}


/*components*/
body{background: #f4f2ea; margin-top: 61px;}
footer ul {padding:0; margin:0; list-style: none;}
    footer li {margin:0 0 10px 0; list-style: none;}
hr {border:none; border 1px solid #f7782b;}

.navbar-custom {background: #f1edde; border-top: 10px solid #314d2c; text-align: center; margin: 0}
.navbar-custom .navbar-nav>li>a {
    font-family: 'Roboto Condensed', sans-serif;
    color:#292929;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 8px 24px;
}
.navbar-custom nav a.active,
.navbar-custom nav a:hover,
.navbar-custom .navbar-nav>li>a.active,
.navbar-custom .navbar-nav>li>a:hover,
.navbar-custom .navbar-nav>li>a:focus{
  color:#f7782b ; text-decoration: none; background: none; }
.navbar-custom .nav.navbar-nav.navbar-center {
    float: none; display: inline-block;
}

.navbar-custom, .subnav {box-shadow: 0px 2px 2px rgba(0,0,0,.15);}

.subnav {text-align:center;font-size: 15px; padding: 5px 0}
.subnav ul {margin:0; padding:0}
.subnav li {list-style: none; display:inline;}
.subnav li:nth-child(2) {padding-left:60px; padding-right:60px;}
.subnav a {
    display:inline-block;
    width: 59px;
    height: 59px;
    background-repeat: no-repeat;
    background-position: center center;
}

#link_projekti {background: url(images/slices/icon_usluge_novi_projekti.png)}
#link_projekti:hover, #link_projekti:active, #link_projekti.active
    {background: url(images/slices/icon_usluge_novi_projekti-over.png)}
#link_reparacije {background: url(images/slices/icon_usluge_reparacije.png)}
#link_reparacije:hover, #link_reparacije:active, #link_reparacije.active
    {background: url(images/slices/icon_usluge_reparacije-over.png)}
#link_odrzavanje {background: url(images/slices/icon_usluge_odrzavanje.png)}
#link_odrzavanje:hover, #link_odrzavanje:active, #link_odrzavanje.active
    {background: url(images/slices/icon_usluge_odrzavanje-over.png)}

.subnav a.projekti {}
.subnav a.projekti:hover {}
.subnav a.reparacije {}
.subnav a.reparacije:hover {}
.subnav a.odrzavanje {}
.subnav a.odrzavanje:hover {
    background: url();
}

.page-footer {background: #f1edde; border-top: 2px solid #f7782b;}

.panel {background: #f1edde;}
.panel-default {box-shadow: 1px 1px 2px rgba(0,0,0,.05); border-radius: 2px; margin-bottom: 30px; }
.panel-bg {background: url('images/slices/logo_transparent.png') center center no-repeat; min-height: 582px}
.panel-home {margin:30px 0 30px 0;}
.panel-home .lead {text-align: center; border-bottom: 1px solid #f7782b;}
.panel-body {
    text-align: justify;
}

.btn{}
.btn-primary {
  font-family: 'Roboto Condensed', sans-serif;
  color: #fff;
  background-color: #f7782b;
  border: none;
  border-top: 2px solid #ffa772;
  padding: 6px 24px;
  border-radius: 8px;
  text-transform: uppercase;
  font-weight: 700;
}
.btn-primary:hover {
  background-color: #ffa772;
  border-color: none;
  border-top: 2px solid #f7782b;
}

.back-to-top {
    position: fixed;
    width: 50px;
    height: 55px;
    bottom: 30px;
    right:30px;
    background: url('images/slices/btn_back-to-top.png') center center no-repeat;
    z-index: 1000;
}

.jumbotron {
    padding: 0px;
    margin: 0px;
    max-height: 940px;
    overflow: hidden;
    background:none;
}
.jumbotron img { max-width: 100%;}

.thumbnail {
    text-align: center;
    background: none; border:none;
    margin-bottom: 0; padding-bottom: 20px;
    min-height: 600px;
    position: relative;
}
.thumbnail img {
  /* border-radius: 50%; background-color: #f1edde; */
  margin-top: 30px;
}
.thumbnail:hover {
    background: url('images/slices/usluge_selected-state.jpg');
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.15);
}

.btn-container {
    position: absolute;
    width: 100%;
    bottom: 30px;
    text-align: center;
}
.btn-container .btn-primary {}

.divider {
    border-top:10px solid #f7782b;
    border-bottom:10px solid #314d2c;
    height: 30px;
}

.col-divider{
    border-left: 1px solid black;
    height: 200px;
    margin-top: 100px;
}

/* cycle-gallery */

.cycle-gallery {
    background-color: #292929;
    /*padding: 10px 0px;*/
}
.cycle-gallery .cycle-slideshow {
    /* 45:35 */
    min-width: 100%;
    /* min-width: 450px; */ min-height: 350px;
    max-width: 540px; max-height: 420px;
    overflow: hidden;
    margin: 0 auto;
}
.cycle-gallery img { max-width: 100%; }
.cycle-gallery .cycle-slide { width:100%; max-width: 100%; min-height: 350px;  min-width: 450px; height:100%; overflow: hidden;}
.cycle-gallery .cycle-slide .cycle-slide-inner {position: relative; overflow: hidden; height:100%; text-align: center;}
.cycle-gallery .cycle-slide-popup {
    position: absolute;
    top:0px; left:0px;
    width:100%;
    height:100%;
}
.cycle-gallery .cycle-slide-popup .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    color: rgba(255,255,255,1);
    border: 2px solid rgba(255,255,255,0.3);
    background-color: rgba(0,0,0,0.2);
    border-radius: 6px;
    visibility: hidden;
    width: 40px;
    height: 40px;
    padding-top: 9px;
    text-align: center;
    vertical-align: middle;
}
.cycle-gallery .cycle-slide-popup:hover .icon {visibility:visible;}
.cycle-gallery .cycle-prev,
.cycle-gallery .cycle-next {
    text-align: center;
    top: 0px;
    padding-top: 5px;
    width: 35px;
    height: 100%;
    color: #fff;
    position: absolute;
    z-index: 1000;
}
.cycle-gallery .cycle-prev { left: 0px; }
.cycle-gallery .cycle-next { right: 0px; }
.cycle-gallery .cycle-overlay {
    font-size: 14px;
    color:#fff;
    padding: 5px 35px;
    position: absolute;
    top: 0px;
    width: 100%;
    background-color: rgba(0,0,0,0.4);
    z-index: 1000;
}
/* .cycle-gallery .cycle-overlay .cycle-image-popup {
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 1000;
} */
.cycle-gallery .btn-toolbar{
    position: absolute;
    bottom: 5px;
    z-index: 1000;
    right: 5px;
}
.cycle-gallery .cycle-pager {
    position: absolute;
    display: none;
    z-index: 1000;
    bottom: 35px;
    background: rgba(0,0,0,0.2);
    max-width: 540px;
}
.cycle-gallery .cycle-pager-item {
    width: 43px;
    height: 40px;
    overflow: hidden;
    cursor: pointer;
}
.cycle-gallery .cycle-pager-item {
    max-height: 55px; max-width: 55px;
    padding: 1px;
    display: inline-block;
    box-shadow: 0 1px 2px #292929;
    background-color: #f4f2ea;
    margin: 3px;
}
.cycle-gallery .cycle-pager-item img{ width: auto; }
.cycle-gallery .cycle-pager.external {}


#map-canvas {height: 350px}
#kontakt {
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

/* media(min_width_768) */
@media (min-width: 768px) {
    body{margin-top: 53px;}
}

a[name],
.anchor {
  display: block;
  position: relative;
  top: -61px;
  visibility:hidden;
}
.anchor span {padding-top: 40px; margin-top: -40px;}

/* media(min_width_768) */
@media (min-width: 768px) {
    a[name], .anchor {top: -53px;}
}