html, body {
    height: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* disable webkit tap highlight */
    -webkit-overflow-scrolling: touch;
}

body {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #414f5a;
    background: #f3f4f6 url(../img/body-bg-circles.svg) no-repeat 50% 55%;

}

.wrapper {
    position: relative;
}

a { 
    color: #354451;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

a:hover {
    color: #000;
}

a, a:hover, a:active, a:focus, button:focus {
    outline: 0;
    border: 0;
    text-decoration: none;
}

#st-preloader {
    background: #FFF;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
}

p {
    line-height: 1.5;
    margin: 0 0 20px 0;
}

h1, h2, h3, h4, h5, h6{
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    color: #354451;
}

h1 {
    font-size: 40px;
}

input, textarea {
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

label{
    font-weight: 300;
}

.no-padding {
    padding: 0;
}

.img_responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

#pre-status,
.preload-placeholder {
    background-image: url(../img/preloader.gif);
    background-position: center;
    background-repeat: no-repeat;
    height: 40px;
    left: 50%;
    margin: -20px 0 0 -20px;
    position: absolute;
    top: 50%;
    width: 40px;
}

.preload-placeholder {
    background: none;
    left: 0;
    margin: 0;
    text-align: center;
    top: 65%;
}

.st-border{
    width: 34px;
    height: 1px;
    display: block;
    background-color: #000;
}

/* BUTTONS */

.btn-send{
    background-color: #383838;
    border-radius: 0;
    border: 0;
    color: #fff;
    padding: 8px 14px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.btn-send:hover{
    background-color: #000;
    color: #fff;
}

.btn-readmore{
    background-color: #383838;
    border-radius: 0;
    border: 0;
    color: #fff;
    padding: 10px 20px;
    margin-top: 20px;
    text-transform: uppercase;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.btn-readmore:hover{
    background-color: #000;
    color: #fff;	
}


/* HEADER */

header{
    position: relative;
    height: 750px;
    z-index: 3;
}

header .overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 70%;
    width: 100%;
    z-index: 1000;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+10,ffffff+60&1+0,0.95+10,0+60 */
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0.95) 10%, rgba(255,255,255,0) 60%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.95) 10%,rgba(255,255,255,0) 60%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.95) 10%,rgba(255,255,255,0) 60%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */

}

header .home-rotator {
    position: absolute;
    display: block;
    width: 100%;
    height: 750px;
}

header .home-rotator .slick-list {
    height: 750px;
}

header .home-rotator .slick-track {
    height: 750px;
}

header .home-rotator .slick-track > div {
    height: 750px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

header .navbar-header a.logo-zagreb,
header .navbar-header a.logo-euprojekt {
    display: block;
    float: left;
	margin-right: 30px;
}

header a.logo-zagreb {
    margin-right: 20px;
    margin-top: -2px;
    width: 113px;
    height: 36px;
    background: url(../img/grad-zagreb-logo-small.png) no-repeat 50% 50%;
    background-size: 113px auto;
}

header a.logo-zagreb img {
    width: 113px;
}



header a.logo-euprojekt img {
    width: auto;
    max-height: 33px;
}

header a.logo-zet {
    position: relative;
    display: inline-block;
}

header a.logo-zet img {
    width: 130px;
    height: 47px;
    z-index: 6;
}

.inner-page header a.logo-zet .hat {
    position: absolute;
    width: 47px;
    height: 51px;
    display: block;
    right: -9px;
    top: -39px;
    background: url(../img/hat.svg) no-repeat 50% 50%;
    z-index: 7;
    transform: rotate(33deg);
    -webkit-transform: rotate(33deg);
}

header a.logo-zet .hat {
    position: absolute;
    width: 47px;
    height: 51px;
    display: block;
    right: -9px;
    top: -21px;
    background: url(../img/hat.svg) no-repeat 50% 50%;
    z-index: 7;
    transform: rotate(33deg);
    -webkit-transform: rotate(33deg);
}

header .navigation {
    position: relative;
    z-index: 1003;
    margin-bottom: 40px;
}

header .topbar {
    min-height: 50px;
    margin-bottom: 0;
    border-radius: 0;
    /*background: #354451 url(../img/snijeg-bg.png) repeat 50% 50%;*/
    background: #354451;
}

.navbar-nav > li > .dropdown-menu {
    border-radius: 0;
    border: 0;
    text-transform: uppercase;
    padding: 0;
	max-height: 500px;
    overflow-y: auto;
}

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
    background-color: transparent;
}

.navbar-nav > li.active {
    border-bottom: 2px solid #1264ab;
}

header .dropdown-menu > li > a {
    font-size: 14px;
    color: #748695;
    font-weight: 600;
    padding: 13px 25px;
    min-width: 250px;
    white-space: normal;
}

header .dropdown-menu > li > a:hover {
    background-color: #f5f5f5;
}

header .dropdown .fa-caret-down {
    margin-left: 10px;
}

header .search-form input {
    height: 50px;
    background-color: #262d33;
    border: 0;
    color: #ffffff;
    padding: 0 20px;
    font-size: 14px;
}

header .search-form #search {
    background: #1264ab;
    text-transform: uppercase;
    padding: 15px 25px;
    margin-left: -4px;
    border: 0;
    color: #ffffff;
    font-size: 14px;
    display: block;
    float: right;
}

header .search-form #search:hover {
    background: #125d9e;
}

.topbar ul li a {
    font-weight: 400;
    padding: 15px 17px;
    margin: 0;
    color: #ffffff;
    font-size: 14px;
}

.topbar ul li a:hover,
.topbar ul li a:focus {
    background: #1264ab;
    color: #ffffff;
}

.topbar .navbar-header{
    /* margin-top: 10px; */
    margin-top: 0px;
    height: 50px;
    padding: 10px 10px 0 10px;
}

.navbar-toggle .icon-bar {
    background-color: #000;
}

.navbar-toggle{
    margin-top: 7px;
    margin-right: 25px;
    padding: 0;
    border-radius: 0;
}

.navbar {
    border: 0;
}

.nav > li > a:hover,
.nav > li > a:focus,
.nav > li > a:active {
    background: transparent;
}

nav.main-nav {
    padding-top: 40px;
}

nav.main-nav a {
    font-size: 18px;
    font-weight: 600;
    color: #354451;
}

nav.main-nav a:hover,
nav.main-nav a:active,
nav.main-nav a:focus {
    color: #1264ab;
}

.navbar-nav > li > a {
    padding-left: 10px;
    padding-right: 10px;
}


/* MOBILE NAV */

.navbar-toggle {
    margin: 0;
    padding: 10px;
    border: 0;
}

.navbar-toggle:hover {
    cursor: pointer;
    border: 0;
}

.navbar-toggle .icon-bar {
    background-color: #354451;
    width: 25px;
    height: 4px;
    border-radius: 0;
}

.mobile-panel {
    position: fixed;
    right: -15.625em; /*or width of your navigation panel*/
    width: 15.625em;
    height: 100%;
    background: #1264ab;
    overflow-y: auto;
}

.mobile-panel a.logo-zet {
    background: #ffffff;
    display: block;
    text-align: center;
    padding: 15px 0;
}

.mobile-panel a.logo-zet img {
    width: 120px;
    display: block;
    margin: 0 auto;
}

.mobile-panel a {
    color: #ffffff;
    display: block;
}

.mobile-panel ul {
    list-style-type: none;
    padding: 0;
}

.mobile-panel ul li {
    padding: 0;
    border-bottom: 1px solid rgba(255,255,255,.2);
}

.mobile-panel ul li ul {
    background: #354451;
}

.mobile-panel ul li ul li {
    border-bottom: 1px solid rgba(255,255,255,.1);
    padding: 0;
}

.mobile-panel ul li a {
    text-transform: uppercase;
    padding: 15px 20px;
}

.mobile-panel ul li ul li a {
    padding: 10px 10px 10px 30px;
    font-size: 14px;
}

#mobile-menu .sub-menu {
    display: none;
}

#mobile-menu .item-has-children > a {
    position: relative;
}

#mobile-menu .item-has-children > a::after {
    content: '';
    display: block;
    height: 11px;
    width: 8px;
    position: absolute;
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 2em;
    background: url("../img/mobile-arrow.svg") no-repeat center center;
    background-size: 8px 11px;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    transition-property: transform;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
}
#mobile-menu .item-has-children > a.submenu-open::after {
    -webkit-transform: translateY(-50%) rotate(90deg);
    -moz-transform: translateY(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) rotate(90deg);
    -o-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
}

.mobile-panel .search-form {
    padding: 10px 20px;
    border-radius: 0;
}

.mobile-panel .search-form input {
    height: 40px;
    background-color: #262d33;
    border: 0;
    color: #fff;
    padding: 0 20px;
    font-size: 14px;
    width: 143px;
    -webkit-appearance: none;
    border-radius: 0;
}

.mobile-panel .search-form #search {
    background: #003c6f;
    text-transform: uppercase;
    padding: 10px 15px;
    margin-left: -4px;
    border: 0;
    color: #fff;
    font-size: 14px;
    height: 40px;
    display: block;
    float: right;
}

.langchooser {
    color: #ffffff;
    text-align: center;
}

.langchooser a {
    display: inline-block;
}


/* END MOBILE NAV */

header .header-content {
    z-index: 1002;
    position: relative;
}

header .header-content h1 {
    color: #fff;
    font-weight: 800;
    margin-bottom: 50px;
    opacity: 0.7;
}

.home-top-boxes {
    margin-top: 50px;
}

.tram-bus { 
    height: 343px;
}

.tram-linije,
.bus-linije {
    background: rgba(18,100,171,0.7);
    padding: 34px 56px 24px 56px;
    text-align: center;
    margin-bottom: 1px;
    -webkit-transition: background 0.2s ease-in-out;
    -moz-transition: background 0.2s ease-in-out;
    -ms-transition: background 0.2s ease-in-out;
    -o-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;
}

a:hover .tram-linije,
a:hover .bus-linije {
    background: #004c8d;
}

.tram-linije h4,
.bus-linije h4 {
    color: #ffffff;
    font-size: 16px;
    padding-top: 10px;
    line-height: 1.5em;
}

.tram-linije img {
    width: 88px;
    height: 42px;
    float: none;
    margin: 0 auto;
}

.bus-linije img {
    width: 79px;
    height: 28px;
    float: none;
    margin: 0 auto;
}

.planiranje-puta {
    height: 343px;
    background: rgba(18, 100, 171, .8);
    padding-top: 30px;
    position: relative;
}

#planiranjeputa {
    padding: 30px 60px 10px 60px;
}


.planiranje-puta h3 {
    text-align: center;
    color: #ffffff;
}

.pocetna-lokacija {
    margin-bottom: 55px;
}

.zeljeno-odrediste {
    margin-bottom: 30px;
}

.planiranje-puta input {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    color: #ffffff;
    height: 50px;
    border-top: 1px solid rgba(255,255,255,.45);
    border-bottom: 1px solid rgba(255,255,255,.45);
    box-shadow: none;
    width: 100%;
}

.planiranje-puta input.predlozi {
    background:#004c8d;
    position: absolute;
    display: block;
    color: #ffffff;
    text-transform: uppercase;
    border-radius: 0;
    font-weight: 600;
    font-size: 16px;
    left: 75px;
    right: 75px;
    bottom: -20px;
    border: 0;
    padding: 15px 0;
    width: 69%;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    outline: 0;
}


.planiranje-puta input.predlozi:hover,
.planiranje-puta input.predlozi:active,
.planiranje-puta input.predlozi:focus {
    border: 0;
    background: #354451;
    color: #ffffff;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #ffffff;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #ffffff;
    opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #ffffff;
    opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #ffffff;
}

.planiranje-puta .form-control {
    background: #ececec;
    border-radius: 0;
    border-top: 1px solid rgba(255,255,255,.45);
    border-bottom: 1px solid rgba(255,255,255,.45);
    border-right: 0;
    border-left: 0;
    color: #354451;
    height: 50px;
    line-height: 2em;
    box-shadow: inset 0 0px 6px rgba(0,0,0,.2) !important;
}

.planiranje-puta .dropdown-menu > .active > a,
.planiranje-puta .dropdown-menu > .active > a:hover,
.planiranje-puta .dropdown-menu > .active > a:focus {
    background-color: #354451;
}

.form-control:focus {
    box-shadow: none;
}

option:not(:checked),
option:checked {
    background: #ffffff;
}

select option {
    min-height: 1.5em;
}


/* BOOTSTRAP SELECT INDEX */

.planiranje-puta .bootstrap-select .fa-sort {
    display: none;
}


.planiranje-puta .bootstrap-select.btn-group .dropdown-toggle .filter-option {
    font-size: 16px;
    font-weight: 600;
}

.planiranje-puta .bootstrap-select .btn-default {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    color: #ffffff;
    height: 50px;
    border-top: 1px solid rgba(255,255,255,.45);
    border-bottom: 1px solid rgba(255,255,255,.45);
    box-shadow: none;
}


.planiranje-puta .bootstrap-select.btn-group .dropdown-menu {
    border-radius: 0;
    margin: 0;
    border: 0;
}

.planiranje-puta .bootstrap-select .dropdown-menu > li > a {
    padding: 10px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(0,0,0,.1);
}

.planiranje-puta .bootstrap-select .btn-default:active:hover,
.planiranje-puta .bootstrap-select .btn-default.active:hover,
.planiranje-puta .bootstrap-select .open > .dropdown-toggle.btn-default:hover,
.planiranje-puta .bootstrap-select .btn-default:active:focus,
.planiranje-puta .bootstrap-select .btn-default.active:focus,
.planiranje-puta .bootstrap-select .open > .dropdown-toggle.btn-default:focus,
.planiranje-puta .bootstrap-select .btn-default:active.focus,
.planiranje-puta .bootstrap-select .btn-default.active.focus,
.planiranje-puta .bootstrap-select .open > .dropdown-toggle.btn-default.focus {
    background: transparent;
    color: #ffffff;
}

.planiranje-puta .bootstrap-select .btn-default:active,
.planiranje-puta .bootstrap-select .btn-default.active,
.planiranje-puta .bootstrap-select .open > .dropdown-toggle.btn-default {
    background: transparent !important;
}

.planiranje-puta .bootstrap-select .dropdown-toggle:focus {
    outline: 0 !important;
    color: #ffffff;
}

.planiranje-puta .bootstrap-select .dropdown-menu {
    padding: 0;
}

.planiranje-puta .bootstrap-select > .dropdown-toggle.bs-placeholder,
.planiranje-puta .bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
.planiranje-puta .bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
.planiranje-puta .bootstrap-select > .dropdown-toggle.bs-placeholder:active {
    color: #ffffff;
    box-shadow: none;
}

.planiranje-puta .btn-default:active:hover,
.planiranje-puta .btn-default.active:hover,
.planiranje-puta .btn-default:active:focus,
.planiranje-puta .btn-default.active:focus,
.planiranje-puta .btn-default:active.focus,
.planiranje-puta .btn-default.active.focus {
    background: transparent;
    border-top: 1px solid rgba(255,255,255,.45);
    border-bottom: 1px solid rgba(255,255,255,.45);

}

.planiranje-puta .open > .dropdown-toggle.btn-default:hover,
.planiranje-puta .open > .dropdown-toggle.btn-default:focus,
.planiranje-puta .open > .dropdown-toggle.btn-default.focus {
    color: #ffffff;
    background: transparent;
    border-top: 1px solid rgba(255,255,255,.45);
    border-bottom: 1px solid rgba(255,255,255,.45);
}

a.predlozi {
    background: #1264ab;
    position: absolute;
    display: block;
    color: #ffffff;
    text-transform: uppercase;
    border-radius: 0;
    font-weight: 600;
    font-size: 16px;
    left: 75px;
    right: 75px;
    bottom: -20px;
    border: 0;
    padding: 15px 0;
}

a.predlozi:hover,
a.predlozi:active,
a.predlozi:focus {
    border: 0;
    background: #354451;
    color: #ffffff;
}


/* NOVOSTI i AKTUALNO */
.news-list {
    position: relative;
    background: rgba(255,255,255, .8);
    height: 343px;
    overflow: hidden;
}

.news-list a {
    text-decoration: none;
    display: block;
    outline: none;
    color: #354451;
    font-size: 14px;
}

.news-item {
    padding: 22px 20px;
    -webkit-transition: background 0.4s ease;
    transition: background 0.4s ease;
    background: #ffffff;
}

.news-item:hover,
.news-item.even:hover
{
    background: #354451;
}

.news-item:hover a,
.news-item.even:hover a
{
    color: #ffffff;
}

.news-item.even {
    background: rgba(255,255,255, 0);
}


/* slick arrows */
.arrow-bg {
    position: absolute;
    z-index: 3;
    width: 46px;
    height: 160px;
    background: url(../img/news-arrow-bg.png) no-repeat 50% 50%;
    top: 31%;
    right: 15px;
}

.arrow-up-slick, .arrow-down-slick {
    z-index: 5;
    position: absolute;
    right:0;
    width: 30px;
    height: 30px;
    text-align: center;
    opacity: 1;
}

.arrow-up-slick {
    top: 50%;
}

.arrow-down-slick {
    top: 58%;
}

.slick-disabled .arrow-up-slick,
.slick-disabled .arrow-down-slick {
    opacity: .6;
}

.pregled-svih {
    text-align: right;
}

.sml-bnr-position {
    margin-top: 30px;
}

.view-all {
    text-align: right;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 14px;
    opacity: 1;
}

.view-all:hover,
.view-all:focus,
.view-all:active {
    color: #ffffff;
    opacity: .7;
}


/* NAPOMENA */
/*#napomena {
display:none;

}*/

.warning {
    z-index: 4;
    margin-top: 105px;
}

.warning .warning-content {
    background: #1264ab;
    color: #e7d329;
    padding: 30px;
    box-shadow: 0 12px 15px rgba(0,0,0,.2);
    min-height: 90px;
}
.warning .warning-content .v-middle {
    display: table;
    height: 100%;
    width: 100%;
}

.warning .warning-sign {
    height: 90px;
    vertical-align: middle;
    text-align: center;
}

.warning .warning-text {
    display: table-cell;
    vertical-align: middle;
    height: 90px;
    color: #fff;

}

.warning img {
    position: relative;
    top: 28px;
}

.warning p {
    font-size: 16px;
    margin: 0;
}

.warning a,
.warning a:focus { 
    color: #fff; 
    text-decoration: underline;
}

.warning a:hover {
    color: #00bee0; 
}


/* modal napomena */

#napomena button.close {
    background: #354451;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    right: -24px;
    top: -21px;
    line-height: 25px;
    font-size: 35px;
    opacity: 1;
    z-index: 10;
    text-shadow: none;
    color: #ffffff;
}

#napomena .modal-content {
    border-radius: 0;
    background: transparent;
}

#napomena .modal-title {
    line-height: 1.2em;
}

/*
#napomena .modal-dialog {
    width: 650px;
    margin: 11% auto 0 auto;
}
*/

/* napomena karte */
#napomena .modal-dialog {
    width: 502px;
    margin: 11% auto 0 auto;
}

#napomena .modal-body {
/*
    min-height: 380px;
    max-height: calc(100vh - 210px);
*/
/*    padding: 20px 50px;*/
    padding: 10px;
    font-size: 16px;
    color: #707f92;
    background: #ffffff;
    line-height: 1.6;
}

#napomena .modal-dialog .modal-header {
    display: table;
    width: 100%;
    min-height: 100px;
    background: #f3f4f6;
    border-bottom: 0;
    line-height: 2.4em;
}

#napomena .modal-dialog .warning-sign .fa-exclamation-triangle {
    font-size: 2.5em;
    color: #e7d329;
    text-align: center;
    padding-left: 30px;
    line-height: 1.5em;
}

#napomena .modal-dialog .modal-header .warning-sign,
#napomena .modal-dialog .modal-header .warning-text {
    display: table-cell;
    vertical-align: middle;
    height: 100px;
}

body.modal-open .wrapper {
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
    filter: url("https://gist.githubusercontent.com/amitabhaghosh197/b7865b409e835b5a43b5/raw/1a255b551091924971e7dee8935fd38a7fdf7311/blur;.svg#blur");
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='4');
}

/* end modal napomena */


/* featured */

.featured-news {
    padding-top: 130px;
    margin-bottom: 20px;
}

.featured-news .featured {
    background: #ffffff;
}

.featured-news .featured .title-date {
    padding: 25px;
}

.featured-news .featured .date {
    font-size: 18px;
}

.featured-news .featured h3 {
    color: #354451;
    margin-top: 5px;
}

.featured-news .featured h3 a:hover {
    color: #1264ab;
}

.featured-news h1 {
    color: #d0d6dc;
    padding-bottom: 30px;
}

.featured-news .featured {
    background: #ffffff;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.featured-news .featured img {
    border-left: 8px solid #1264ab;
}

.featured-news .item h5 {
    line-height: 1.4em;
    font-size: 17px;
}

.featured-news .item h5 a {
    color: #414f5a;
}

.featured-news .item h5 a:hover {
    color: #1264ab;
}

.featured-news .item .date {
    font-size: 14px;
}

.featured-news .item {
    background-color: #fff;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    margin-bottom: 20px;
    padding: 20px 30px;
}

.featured-news .item.margin-bottom-0 {
    margin-bottom: 0 !important;
}

.featured-news .item p {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
}

.skracenitekst {
    height: 155px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

.featured-news .item:hover,
.featured-news .featured:hover {
    box-shadow: 0px 0px 18px #ddd;
}

.featured-news .date {
    text-transform: uppercase;
    color: #1264ab;
    font-weight: 600;
}

.featured-news a.more {
    font-weight: 700;
    color: #1264ab;
}

.featured-news a.more:hover {
    color: #354451;
    text-decoration: underline;
}

.featured-news .pregled-svih {
    margin-top: 20px;
}

.featured-news .pregled-svih a.view-all {
    color: #354451;
}

.featured-news .pregled-svih a.view-all:hover {
    color: #1264ab;
}

/* END IZDVAJAMO */


/* FAQ */

.faq p {
    font-size: 16px;
}

.faq ul li a {
    text-transform: uppercase;
    font-weight: 700;
    padding: 60px 0;
    text-align: center;
    font-size: 18px;
    color: #2a3742;
}

.faq ul.faq-ul-list {
    list-style-type: none;
    padding-left: 0;
    list-style-position: inside;
    display:table-row;
}

.faq ul.faq-ul-list li:before {
    font-family: 'FontAwesome';
    content: "\f140";
    float: left;
    width: 1.4em;
    line-height: 29px;
    font-size: 18px;
    color: #1264ab;
    padding-bottom: 28px;
}

.faq ul.faq-ul-list li {
    padding-bottom: 15px;
    padding-top: 15px;
}

.tabs-left>li.vrste-karata>a:hover,
.tabs-left>li.vrste-karata>a:focus {
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: cover;
    color: #ffffff;
    background-image: url(../img/vrste-karata.jpg);
}

.tabs-left>li.active.vrste-karata>a {
    background-image: url(../img/vrste-karata.jpg);
}


.tabs-left>li.cijene-placanje>a:hover,
.tabs-left>li.cijene-placanje>a:focus {
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: cover;
    color: #ffffff;
    background-image: url(../img/cijene-prodaja-placanje.jpg);
}

.tabs-left>li.active.cijene-placanje>a {
    background-image: url(../img/cijene-prodaja-placanje.jpg);
}

.tabs-left>li.prijevoz>a:hover,
.tabs-left>li.prijevoz>a:focus {
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: cover;
    color: #ffffff;
    background-image: url(../img/besplatan-prijevoz.jpg);
}

.tabs-left>li.active.prijevoz>a {
    background-image: url(../img/besplatan-prijevoz.jpg);
}

.tabs-left>li.zona-podrucja>a:hover,
.tabs-left>li.zona-podrucja>a:focus {
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: cover;
    color: #ffffff;
    background-image: url(../img/zone-tarifna-podrucja.jpg);
}

.tabs-left>li.active.zona-podrucja>a {
    background-image: url(../img/zone-tarifna-podrucja.jpg);
}


.faq ul.faq-ul-list li a {
    font-weight: 300;
    font-size: 16px;
    padding: 0 0 3px 0;
    border-bottom: 1px dotted #ccc;
    line-height: 1.7em;

}

.faq ul.faq-ul-list li a:hover {
    color: #1264ab;
    text-decoration: none;
    border-bottom: 1px dotted #ccc;
}

.tabs-left {
    border-right: 0;
    padding-top: 0;
}

.tabs-left>li, .tabs-right>li {
    border-top: 1px solid #d3d7e0;
    margin-bottom: 0;
}


.tabs-left>li.active>a,
.tabs-left>li.active>a:hover,
.tabs-left>li.active>a:focus {
    border: 0;
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: cover;
    color: #ffffff;

}

.tabs-left>li>a {
    border-radius: 0;
    z-index: 3;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

.faq .nav-tabs > li > a{
    border: 0;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

.faq-content {
    background: #ffffff url(../img/faq-bg.svg) no-repeat 100% 100%;
    box-shadow: 0 10px 25px rgba(0,0,0,.2);
}

.faq .tab-content {
    padding: 30px;
}

.faq .fa-bullseye {
    color: #1264ab;
}

.faq .details {
    text-transform: uppercase;
}

.faq .details-text {
    padding-left: 35px;
}

.faq .vertical-divider {
    position: absolute;
    top: 6%;
    bottom: 6%;
    left: 42%;
    border-left: 1px solid #c2c3c5;
}

.faq .panel-default > .panel-heading {
    color: #ffffff;
    background-color: #1264ab;
    padding: 0;
    border-radius: 0;
    border: 0;
}

.faq .panel-default > .panel-heading a {
    color: #ffffff;
    display: block;
    padding: 20px;
    background-color: #354451;
}

.faq .panel-default > .panel-heading a.collapsed {
    background-color: #1264ab;
}

.panel-group .panel {
    border-radius: 0;
    border: 0;
}

.faq .tabovivise {
    text-transform: uppercase;
    background: #1264ab;
    color: #ffffff;
    padding: 5px 20px;
    font-size: 13px;
}

.faq .tabovivise:hover {
    background: #354451;
}


/* END FAQ */


/* FOOTER */

footer{
    background: url(../img/footer-bg.jpg) no-repeat 50% 50%;
    background-size: cover;
    padding-top: 80px;
    padding-bottom: 40px;
}

footer img.logo {
    width: 100px;
}

footer a{
    color: rgba(255, 255, 255, 1);
}

footer a:hover{
    color: rgba(255, 255, 255, 0.4);
}

footer ul.links li {
    list-style-type: none;
    padding-bottom: 10px;
}

footer ul.links a,
footer ul.links a:hover,
footer ul.links a:focus {
    color: #fff;
}

footer ul.links a:hover {
    opacity: 0.5;
    color: #ffffff;
}

footer .interno-gumb a {
    padding: 5px 10px;
    border: 1px solid #fff;
}

footer ul.links .interno-gumb a:hover,
footer ul.links .interno-gumb a:focus,
footer ul.links .interno-gumb a:active {
    background: #ffffff;
    color: #000000;
    opacity: 1;
}

footer .social {
    display: block;
    margin-bottom: 20px;
}

footer .social a:hover {
    color: #ffffff;
}

footer .social img {
    width: 55px;
    height: 55px;
    float: left;
    margin-right: 15px;
    opacity: 1;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

footer .social img:hover {
    opacity: .8;
}

footer .social a {
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 700;
    line-height: 55px;
    color: #fff;
}

footer .social a .youtube {
    color: #dd2b2d;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

footer .social a .rss {
    color: #e98417;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

footer .social a:hover .youtube,
footer .social a:hover .rss {
    color: rgba(255, 255, 255, 1);
}

/* BACK TO TOP */

.top {
    display: inline-block;
    height: 40px;
    width: 40px;
    position: fixed;
    bottom: 40px;
    right: 15px;
    z-index: 5;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    /* image replacement properties */
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: rgba(18, 100, 171, .8) url(../img/top-arrow.svg) no-repeat center 50%;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .3s 0s, visibility 0s .3s;
    -moz-transition: opacity .3s 0s, visibility 0s .3s;
    transition: opacity .3s 0s, visibility 0s .3s;
}
.top.is-visible, .top.fade-out, .no-touch .top:hover {
    -webkit-transition: opacity .3s 0s, visibility 0s 0s;
    -moz-transition: opacity .3s 0s, visibility 0s 0s;
    transition: opacity .3s 0s, visibility 0s 0s;
}
.top.is-visible {
    /* the button becomes visible */
    visibility: visible;
    opacity: 1;
}
.top.fade-out {
    /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
    opacity: .5;
}

.top.fade-out:hover,
.no-touch .top:hover {
    background-color: rgb(18, 100, 171);
    opacity: 1;
}

.four-cols-display .container {
    margin-top: -30px;
}

.fcd-col {
    margin-top: 30px;
}

.fcd-col > a {
    display: block;
}

.fcd-col > a > img {
    display: block;
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .top {
        right: 20px;
        bottom: 20px;
    }
}
@media only screen and (min-width: 1024px) {
    .top {
        height: 60px;
        width: 60px;
        right: 30px;
        bottom: 30px;
    }
}


/* NEWS BLOCK */
.section_title {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 20px;
}

.expandable_list { margin-top: 50px; margin-bottom: 40px; border-bottom: 1px solid #a7b6bf; list-style-type: none; padding: 0;}
.expandable_list .expandable_list_head { display: table; width: 100%; padding: 0; background: none; border-top: 1px solid #a7b6bf; border-bottom: 0; cursor: pointer; }
.expandable_list li {
    padding-bottom: 0 !important;
}

.expandable_list .expandable_list_head > div { display: table-cell; vertical-align: middle; transition: all 0.3s ease; }
.expandable_list .expandable_list_head .icon { width: 80px; height: 80px; background: #cdd5dc; color: #1264ab; text-align: center; }
.expandable_list .expandable_list_head .icon span { display: block; width: 80px; height: 80px; background: url(../img/plus.svg) no-repeat center center; background-size: 74px auto; }
.expandable_list .expandable_list_head .icon span.arrow_down { background: url(../img/arrow_down.svg) no-repeat center center; background-size: 74px auto; }
.expandable_list .expandable_list_head .title { padding: 0 36px; font-size: 16px; font-weight: 700; line-height: 24px; }
.expandable_list .expandable_list_head .date { width: 70px; }
.expandable_list .expandable_list_head .date > div { display: inline-block; width: 50px; height: 50px; text-align: center; background: #cdd5dc; border-radius: 3px; vertical-align: middle; padding-top: 10px; }
.expandable_list .expandable_list_head .date .day { display: block; font-size: 20px; font-weight: 700; line-height: 17px; }
.expandable_list .expandable_list_head .date .month { display: block; font-size: 13px; line-height: 18px; text-transform: uppercase; padding: 0; margin: 0; }
.expandable_list .collapsible-body { padding-left: 80px; border-bottom: 0; }
.expandable_list .collapsible-body .text { background: #fff; padding: 32px 36px; font-weight: 200; }

.expandable_list .active .collapsible-header { border-top: 0; }
.expandable_list .active .collapsible-header > div { background: #3094b5; color: #fff; }
.expandable_list .active .collapsible-header .icon { background: #1a7e9f; }
.expandable_list .active .collapsible-header .icon span { background: url(../img/close.svg) no-repeat center center; background-size: 74px auto; }
.expandable_list .active .collapsible-header .date > div { color: #fff; background: #246e86; }

.expandable_list .expandable_list_head:hover .title, .expandable_list .expandable_list_head:hover .date { background: #ebeff2; }
.expandable_list .active .collapsible-header:hover .title, .expandable_list .active .collapsible-header:hover .date { background: #3094b5; }


.tramunutra {
    margin-bottom:20px;

}

.fixme {
    width: 300px;
    height: 180px;
    padding: 25px;
    background: url(../img/logo_akcija.jpg) no-repeat bottom left #fff;
    overflow:hidden;
    font-family: 'hind_regularregular', Arial, Sans-serif;
    font-size: 14px;
    position:relative;
}

a.naslov_akcija {
    font-size: 18px;
    line-height: 22px;
    color: #393939;
    font-family: 'hindbold', Arial, Sans-serif;	
    font-weight:bold;
}

a.naslov_akcija:hover {
    color: #0f69b7;
}

.akcija_txt {
    font-size: 14px;
    line-height: 18px;
    color: #393939;
    margin-top: 15px;
    font-family: 'hindmedium', Arial, Sans-serif;	
    height: 75px;
    overflow: hidden;
    position: relative;	
}

a.more_link {
    text-transform:uppercase;
    color: #0f69b7;
    font-family: 'hindbold', Arial, Sans-serif;
    display: block;
    position: absolute;
    /*bottom: 5px;*/
    right: 30px;
    background: url(../img/arrow-blue.png) no-repeat center right;
    padding-right: 18px;
    font-weight: bold;
}


a.more_link2 {
    text-transform:uppercase;
    color: #0f69b7;
    font-family: 'hindbold', Arial, Sans-serif;
    display: block;
    position: absolute;
    bottom: 5px;
    right: 30px;
    background: url(../img/arrow-blue.png) no-repeat center right;
    padding-right: 18px;
    font-weight: bold;
}


.fixme.slika {
    width:300px;
    height:250px;
    padding: 0;
    /*background: url(UserDocsImages/naslovna/akcija_slika.jpg) no-repeat top center #fff;*/
    overflow:hidden;
    font-family: 'hind_regularregular', Arial, Sans-serif;
    font-size: 14px;
    position: relative;
}

.fixme.slika a.naslov_akcija {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,.9);
}

.fixme.slika a.naslov_akcija:hover {
    color: #eee;
}

.fixme.slika .akcija_txt {
    color: #fff;
    position: relative;
    text-shadow: 0 1px 2px rgba(0,0,0,.9);
}

.fixme.slika a.more_link {
    color: #fff;
    background: url(../img/arrow-white.png) no-repeat center right;
}	

.overlay {
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#cc000000',GradientType=0 ); /* IE6-9 */
    padding: 0px;	
    width: 250px;
    height: 130px;
}

.banner_holder_main {
    width:300px;
    height:360px;
    overflow:hidden;
    z-index:9999;
    position: fixed;	
    bottom:0;
    right:0;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.45);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.45);	
    display:none;
}


.fixme.slika .overlay {
    padding: 25px;
}

.tab-content .details-text {
    text-align: justify;
}

.two-cols-display,
.four-cols-display { 
    padding: 40px 0 80px 0; 
}

.two-cols-display a {
    display: block;
}

/* datepicker */
span.flatpickr-weekday {
    color: #ffffff;
}

.flatpickr-prev-month.flatpickr-prev-month {
    position: absolute;
    left: 10px;
    top: 10px;
}

.flatpickr-next-month.flatpickr-next-month {
    position: absolute;
    right: 10px;
    top: 10px;
}

.flatpickr-next-month:hover svg,
.flatpickr-prev-month:hover svg {
    fill: #ffffff;
}
.tram-ikona img {
    margin-top: 15px;
    margin-bottom: 15px;
}

.box-napomena {
    border: 1px solid #1479d0;
    background-color: #bed6ea;
    text-align: center;
    font-weight: bold;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 15px;
}

.gd-logo {
    display: block;
    margin: 20px 0 0 0;
}


.gd-logo img {
    width: 70px;
    float: none;
    display: block;
    margin: 0 auto;
    opacity: .7;
}

.gd-logo img:hover {
    opacity: 1;
}

/*
.logo-fondovi {
text-align: center;
}
*/

.logo-fondovi a {
    display: inline-block;
    margin: 40px 30px 10px 0;
}

.napomena-linija {
    margin-bottom: 20px;
    font-weight: 700;
}

.smjerovi {
    display: none;
}

.smjerovi span {
    display: block;
    margin-bottom: 5px;
}

.smjerovi .smjer1,
.smjerovi .smjer2 {
    display: block;
    float: left;
    width: 100%;
}

.smjerovi .btns-wrapper a {
    display: block;
    position: relative;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-weight: 700;
    background: #1264ab;
    padding: 10px;
    color: #ffffff;
}

.smjerovi .btns-wrapper a:hover {
    color: #ffffff;
}

.smjerovi .btns-wrapper a:after {
    content: '';
    background: url(../img/top-arrow.svg) no-repeat 50% 50%;
    background-size: 10px auto;
    display: block;
    position: absolute;
    width: 15px;
    height: 10px;
    right: 10px;
    top: 15px;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

.smjerovi .btns-wrapper table a {
    background: transparent;
    color: #1264ab;
    margin-bottom: 0;
    padding: 0;
}

.smjerovi .btns-wrapper table a:after {
    display: none;
}

.christmas-wrapper {
    background: #ffffff;
    padding: 20px;
}

.christmas-wrapper p {
    margin: 15px 0 15px 0;
    text-align: center;
}

.christmas-wrapper img {
    margin: 0 auto;
    display: block;
    float: none;
}

.ispricnica-opis {
    margin-top:30px;
    display: inline-block;
}

.saznajte-visebtn {
    margin: 20px 0 0 0;
}

.saznajte-visebtn a {
    color: #ffffff;
    background: #1264ab;
    padding: 10px 15px;
    display: inline-block;
}

.nedostupno {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.8);
    width: 100%;
    height: 100%;
    display: block;
}

.nedostupno span {
    display: block;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
    font-weight: 700;
    text-transform: uppercase;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

/*.planiranje-puta input.predlozi {
    display: none;
}*/

.eu-naslov {
    font-size: 17px;
    font-weight: 800;
    color: #354451;
    margin-bottom: 10px;
    display: inline-block;
}
.eu-opsirnije-btn {
    font-weight: 700;
    color: #1264ab;
    margin-top: 10px;
    display: inline-block;
}
.eu-slide h4 {font-size: 12px !important;}
.potpis-eu {color:#1264ab; display: inline-block; margin-top: 10px;}

.zet-modernizacija-wrap {
    background-color: #fff;
    padding-top: 5px;
}

.zet-modernizacija {
	text-align: center;
    display: flex;
    justify-content: center;
    background: #fff;
    padding: 15px;
    max-width: 440px;
    margin: 30px auto 0;

}
.zet-modernizacija img {
	margin-right: 20px;
	max-height: 70px;
    width: 130px;
}

.eu-quote {
    margin: 35px 0 15px;
}

.eq-cols {
    display: flex;
    align-items: center;
}

.eq-col:first-child {
    flex: 0 0 90px;
}

.eq-col:last-child {
    padding-left: 15px;
    font-size: 14px;
}

.eq-col > img {
    display: block;
    width: 100%;
}