@charset "UTF-8";

.limit, .site-footer .site-info, .site-footer .footer-wrap {
    max-width: 80em;
    width: 100%;
    margin: 0 auto;
}

/* Add responsive breakpoints for smaller screens */
@media screen and (max-width: 1366px) {
    .limit, .site-footer .site-info, .site-footer .footer-wrap {
        max-width: 95%;
    }
    
    .header-wrap {
        padding: 10px 20px;
    }
    
    .main-header {
        /*padding: 20px;*/
    }
    
    .content-area {
        padding: 20px;
    }
}

@media screen and (max-width: 1024px) {
    .module-banner-wrap .banner-module .banner-cards .one-banner.full {
        flex-direction: column;
    }
    
    .module-banner-wrap .banner-module .banner-cards .one-banner.full .box-flank,
    .module-banner-wrap .banner-module .banner-cards .one-banner.full .box-middle {
        width: 100%;
        padding: 15px;
    }
}

@media screen and (max-width: 768px) {
    .header-wrap {
        flex-direction: column;
        align-items: center;
    }
    
    .main-navigation {
        width: 100%;
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-menu {
        padding: 1em 0 7em 0 !important;
    }
}

.stripe_navy {
    background-color: #005a99;
}

.stripe_grey_light {
    background-color: #F9F9F9;
}

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/
/* Normalize
--------------------------------------------- */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
	 ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
    margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
    display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
    background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
    font-weight: bold;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
	 ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
    border-style: none;
}

/* Forms
	 ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
    text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
    -webkit-appearance: button;
}

    /**
 * Remove the inner border and padding in Firefox.
 */
    button::-moz-focus-inner,
    [type=button]::-moz-focus-inner,
    [type=reset]::-moz-focus-inner,
    [type=submit]::-moz-focus-inner {
        border-style: none;
        padding: 0;
    }

    /**
 * Restore the focus styles unset by the previous rule.
 */
    button:-moz-focusring,
    [type=button]:-moz-focusring,
    [type=reset]:-moz-focusring,
    [type=submit]:-moz-focusring {
        outline: 1px dotted ButtonText;
    }

/**
 * Correct the padding in Firefox.
 */
fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
    vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

    /**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
    [type=search]::-webkit-search-decoration {
        -webkit-appearance: none;
    }

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

/* Interactive
	 ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
    display: list-item;
}

/* Misc
	 ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
    display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
    display: none;
}

/* Box sizing
--------------------------------------------- */
/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
    color: #333;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
    font-family: "Inter", sans-serif;
    line-height: 32px;
}

.route-number {
    font-family: "Inter", sans-serif;
    font-weight: 700;
}

.main-header h1 {
    color: #FFFFFF;
    font-size: 5vw;
}

@media (max-width: 0.00375rem) {
    .main-header h1 {
        font-size: 1.875rem;
    }
}

@media (min-width: 0.00525rem) {
    .main-header h1 {
        font-size: 2rem;
    }
}

.route-header h3 {
    font-weight: 300;
    font-size: 1.5em;
    margin-bottom: 0;
}

h1.route-title {
    text-align: center;
    line-height: 0.9;
    margin: 0;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 25vw;
}

@media (max-width: 0.0007rem) {
    h1.route-title {
        font-size: 1.75rem;
    }
}

@media (min-width: 0.0048rem) {
    h1.route-title {
        font-size: 5rem;
    }
}

h1.route-title span {
    text-transform: uppercase;
    display: block;
    color: #FFFFFF;
    text-align: center;
    font-size: 1rem !important;
    font-style: normal;
    font-weight: 500;
    line-height: 2rem;
    letter-spacing: 3.2px;
}

@media (max-width: 0.003125rem) {
    h1.route-title span {
        font-size: 1.25rem;
    }
}

@media (min-width: 0.005625rem) {
    h1.route-title span {
        font-size: 2.25rem;
    }
}

h1.route-title span:after {
    content: "\a";
    white-space: pre;
}

h1.route-title.prigradske-title {
    color: #0f63a9 !important;
    font-size: 25vw;
    letter-spacing: 0;
}

@media (max-width: 0.0007rem) {
    h1.route-title.prigradske-title {
        font-size: 1.75rem;
    }
}

@media (min-width: 0.0016rem) {
    h1.route-title.prigradske-title {
        font-size: 4rem;
    }
}

h1.front-title {
    line-height: 1.2;
    margin: 1rem calc(1rem + 1vw);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 6vw;
}

@media (max-width: 0.0033333333rem) {
    h1.front-title {
        font-size: 1.8rem
    }
}

@media (min-width: 0.0041666667rem) {
    h1.front-title {
        font-size: 1.8rem;
    }
}

h1.front-title span {
    color: white;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 2vw;
    display: block;
    letter-spacing: 0;
}

@media (max-width: 0.004375rem) {
    h1.front-title span {
        font-size: 0.875rem;
    }
}

@media (min-width: 0.005rem) {
    h1.front-title span {
        font-size: 1rem;
    }
}

h1.front-title span:after {
    content: "\a";
    white-space: pre;
}

.timetable-head h3 {
    margin: 0;
}

@media screen and (max-width: 44.1em) {
    .timetable-head h3 {
        font-size: 1em;
    }
}

.timetable-head h3 span {
    margin-top: 0.125em;
    display: block;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 2vw;
    margin: 0;
}

@media (max-width: 0.0040625rem) {
    .timetable-head h3 span {
        font-size: 0.8125rem;
    }
}

@media (min-width: 0.004375rem) {
    .timetable-head span {
        font-size: 1em;
    }
}

h2.orange-large {
    color: #333333;
    font-size: 3vw;
}

@media (max-width: 0.005rem) {
    h2.orange-large {
        font-size: 1.5rem;
    }
}

@media (min-width: 0.0058333333rem) {
    h2.orange-large {
        font-size: 1.75rem;
    }
}

.off-notice {
    font-weight: 300;
    font-size: 1.5rem;
    text-align: center;
    margin: 0 auto;
    color: rgb(191.5, 191.5, 191.5);
}

@media screen and (min-width: 60.1em) {
    .off-notice {
        margin: 5em auto 0;
    }
}

.frontstyles h2.size-orange {
    color: #333;
    margin-bottom: 0;
    text-align: center;
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.72px;
}

.frontstyles h2.size-dark {
    color: #002D4D;
    margin-bottom: 0;
}

.frontstyles .one-banner h4 {
    font-size: 26px;
    margin: 0;
}

    .frontstyles .one-banner h4 span {
        /*margin: 0.125em 0;*/
        color: #1363A3;
        /*color: rgb(128, 128, 128);*/
        /*font-weight: 400;*/
        /*font-size: 0.875rem;*/
        display: block;
    }

        .frontstyles .one-banner h4 span:after {
            content: "\a";
            white-space: pre;
        }

.frontstyles p:first-of-type {
    margin-top: 1em;
    max-width: 26em;
    font-size: 1rem;
}

.frontstyles .tickets-module p:first-of-type {
    max-width: unset;
}

.frontstyles .one-route h3 {
    margin-top: 0.25em;
}

.one-news .newscat-subtitle {
    color: #333;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 228.571% */
}

.one-news h3 {
    margin-top: 0.25rem;
}

.archive .page-title {
    margin-bottom: 0;
}

.archive-description {
    color: rgba(255, 255, 255, 0.9);
}

    .archive-description p {
        margin-top: 0;
    }

p {
    margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
    font-style: italic;
}

blockquote {
    margin: 0 1.5em;
}

address {
    margin: 0 0 1.5em;
}

pre {
    background: #eee;
    font-family: "Courier 10 Pitch", courier, monospace;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
}

code,
kbd,
tt,
var {
    font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
    border-bottom: 1px dotted #666;
    cursor: help;
}

mark,
ins {
    background: #fff9c0;
    text-decoration: none;
}

big {
    font-size: 125%;
}

.line-status-notice {
    color: #0f63a9;
}

/*
* Site Footer
*/
.site-footer .site-info span {
    font-size: 0.75rem;
    color: #FFFFFF;
    font-weight: 300;
}

.big-tagline {
    font-family: "Inter", sans-serif;
    color: #FFFFFF;
    font-size: 4vw;
    font-weight: 500;
    line-height: 1.25;
    padding-right: 1em;
}

@media (max-width: 0.004375rem) {
    .big-tagline {
        font-size: 1.75rem;
    }
}

@media (min-width: 0.005rem) {
    .big-tagline {
        font-size: 2rem;
    }
}

/* Elements
--------------------------------------------- */
body {
    background: #fff;
}

hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin-bottom: 1.5em;
}

ul,
ol {
    margin: 0;
}

ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

li > ul,
li > ol {
    margin-bottom: 0;
    margin-left: 1.5em;
}

dt {
    font-weight: 700;
}

dd {
    margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
    max-width: 100%;
}

img {
    height: auto;
    max-width: 100%;
}

figure {
    margin: 1em 0;
}

table {
    margin: 0 0 1.5em;
    width: 100%;
}

.pricing-table {
    max-width: 24em;
    border-color: #003C66;
    background-color: #F9F9F9;
    border-collapse: collapse;
}

    .pricing-table tr {
        border-bottom: 2px solid #E3E3E3;
    }

    .pricing-table td {
        padding: 0.5em 1em;
    }

        .pricing-table td:nth-child(odd) {
            color: #0f63a9;
        }

/* Links
--------------------------------------------- */
a {
    color: #1363A3;
    text-decoration: none;
    /* border-bottom: 2px solid #0f63a9; */
}

    a:visited {
        color: #002D4D;
    }

    a:hover, a:focus, a:active {
        color: #0f63a9;
        border-color: #F0F0F0;
    }

    a:focus {
        outline: thin dotted;
    }

    a:hover, a:active {
        outline: 0;
    }

h1 a, h2 a, h3 a, h4 a, h5 a {
    border: none;
    border-bottom: 2px solid #F9F9F9;
}

    h1 a:hover, h1 a:focus, h1 a:active, h2 a:hover, h2 a:focus, h2 a:active, h3 a:hover, h3 a:focus, h3 a:active, h4 a:hover, h4 a:focus, h4 a:active, h5 a:hover, h5 a:focus, h5 a:active {
        color: #0f63a9;
        border-bottom: 2px solid #F0F0F0;
    }

a img {
    border: none !important;
}

a.orange-link {
    color: #0f63a9;
    border-bottom: 2px solid transparent;
}

    a.orange-link:visited {
        color: rgb(233.0357142857, 72.5, 13.4642857143);
    }

    a.orange-link:hover, a.orange-link:focus, a.orange-link:active {
        color: #0D5085;
        border-bottom: 2px solid #F0F0F0;
    }

.post-thumbnail {
    border: none !important;
}

.timetable-download a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    border-bottom: none;
}

    .timetable-download a:visited {
        color: rgba(255, 255, 255, 0.9);
    }

    .timetable-download a:hover, .timetable-download a:focus, .timetable-download a:active {
        color: #0f63a9;
        border-color: #F0F0F0;
    }

    .timetable-download a:focus {
        outline: thin dotted;
    }

    .timetable-download a:hover, .timetable-download a:active {
        outline: 0;
    }

.timetable-download .tt-previous a {
    color: rgba(255, 255, 255, 0.4);
}

    .timetable-download .tt-previous a:hover, .timetable-download .tt-previous a:focus, .timetable-download .tt-previous a:active {
        color: #0f63a9;
    }

[class^=tooltip] {
    position: relative;
    font-size: 0.75em;
}

    [class^=tooltip]:after {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        content: attr(data-tooltip);
        padding: 5px 8px;
        top: 4em;
        left: 50%;
        transform: translateX(-50%) translateY(-2px);
        background: #0f63a9;
        color: rgba(255, 255, 255, 0.9);
        white-space: nowrap;
        z-index: 2;
        border-radius: 7px;
        transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
    }

    [class^=tooltip]:hover:after {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

.tooltip--left:after {
    top: -4px;
    left: 0;
    transform: translateX(-112%) translateY(0);
}

.tooltip--left:hover:after {
    transform: translateX(-110%) translateY(0);
}

.tooltip--right:after {
    top: -4px;
    left: 100%;
    transform: translateX(12%) translateY(0);
}

.tooltip--right:hover:after {
    transform: translateX(10%) translateY(0);
}

.tooltip--triangle:before {
    content: "";
    width: 0;
    height: 0;
    border-left: solid 5px transparent;
    border-right: solid 5px transparent;
    border-bottom: solid 5px grey;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    transform: translateX(-50%) translateY(-2px);
    top: 1.1em;
    left: 50%;
    transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
    z-index: 3;
}

.tooltip--triangle:hover:before {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.follow {
    width: 42px;
    height: 42px;
    border-radius: 50px;
    background: #03A9F4;
    display: inline-block;
    margin: 50px calc(50% - 19px);
    white-space: nowrap;
    padding: 13px;
    box-sizing: border-box;
    color: white;
    transition: all 0.2s ease;
    font-family: Roboto, sans-serif;
    text-decoration: none;
    box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.2);
}

    .follow i {
        margin-right: 20px;
        transition: margin-right 0.2s ease;
        color: white;
    }

    .follow:hover {
        width: 134px;
        transform: translateX(-50px);
    }

        .follow:hover i {
            margin-right: 10px;
        }

.wp-block-file a[id^=wp-block-file] {
    font-size: 1rem;
}

/* Forms
--------------------------------------------- */
button,
input[type=button],
input[type=reset],
input[type=submit] {
    border: 1px solid;
    border-color: #ccc #ccc #bbb;
    border-radius: 3px;
    background: #e6e6e6;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1;
    padding: 0.6em 1em 0.4em;
}

    button:hover,
    input[type=button]:hover,
    input[type=reset]:hover,
    input[type=submit]:hover {
        border-color: #ccc #bbb #aaa;
    }

    button:active, button:focus,
    input[type=button]:active,
    input[type=button]:focus,
    input[type=reset]:active,
    input[type=reset]:focus,
    input[type=submit]:active,
    input[type=submit]:focus {
        border-color: #aaa #bbb #bbb;
    }

input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=search],
input[type=number],
input[type=tel],
input[type=range],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime],
input[type=datetime-local],
input[type=color],
textarea {
    color: #666;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 3px;
}

    input[type=text]:focus,
    input[type=email]:focus,
    input[type=url]:focus,
    input[type=password]:focus,
    input[type=search]:focus,
    input[type=number]:focus,
    input[type=tel]:focus,
    input[type=range]:focus,
    input[type=date]:focus,
    input[type=month]:focus,
    input[type=week]:focus,
    input[type=time]:focus,
    input[type=datetime]:focus,
    input[type=datetime-local]:focus,
    input[type=color]:focus,
    textarea:focus {
        color: #111;
    }

select {
    border: 1px solid #ccc;
}

textarea {
    width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/
/* Navigation
--------------------------------------------- */
.main-navigation {
    display: block;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
}

    .main-navigation ul {
        display: none;
        list-style: none;
        margin: 0;
        padding-left: 0;
    }

        .main-navigation ul ul {
            box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
            float: left;
            position: absolute;
            top: 100%;
            left: -999em;
            z-index: 99999;
        }

            .main-navigation ul ul ul {
                left: -999em;
                top: 0;
            }

            .main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul {
                display: block;
                left: auto;
            }

            .main-navigation ul ul a {
                width: 200px;
            }

        .main-navigation ul li:hover > ul,
        .main-navigation ul li.focus > ul {
            left: auto;
        }

    .main-navigation li {
        position: relative;
    }

    .main-navigation a {
        display: block;
        color: #FFFFFF;
        text-decoration: none;
    }
    /* Small menu. */
    .menu-toggle,
    .main-navigation.toggled ul {
        display: block;
    }

@media screen and (min-width: 37.5em) {
    .menu-toggle {
        display: none;
    }

    .main-navigation ul {
        display: flex;
    }
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
    margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
    display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
    flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
    text-align: end;
    flex: 1 0 50%;
}

button.main-burger {
    width: 59px;
    height: 52px;
    z-index: 100;
    border: none;
    background-color: #07223940;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
}

    button.main-burger .hamburger-box {
        transition: 0.25s ease-in-out all;
    }

        button.main-burger .hamburger-box:hover {
            padding-left: 0.25em;
        }

#featured-menu {
    font-size: 0.875rem;
}

@media screen and (max-width: 44.1em) {
    #featured-menu {
        visibility: hidden;
        display: none;
    }
}

#featured-menu a {
    border-bottom: none;
}

#featured-menu li {
    margin-right: 1em;
    padding: 16px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    background: #07223940;
}

.footer-menu {
    color: white;
    font-weight: 700;
    font-size: 1rem;
    padding: 7em 0 7em 0;
}

    .footer-menu > ul {
        display: grid;
    }

@media screen and (min-width: 32.1em) {
    .footer-menu > ul {
        justify-items: start;
        justify-content: center;
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (min-width: 44.1em) {
    .footer-menu > ul {
        justify-items: start;
        justify-content: center;
        grid-template-columns: 1fr;
    }
}

@media screen and (min-width: 60.1em) {
    .footer-menu > ul {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

.footer-menu > ul > li {
    padding-left: 2em !important;
}

.footer-menu ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

    .footer-menu ul li {
        padding: 1rem 0;
    }

        .footer-menu ul li a {
            color: #FFFFFF;
            padding-bottom: 0.125em;
            /* border-bottom: 2px solid #0D5085; */
        }

            .footer-menu ul li a:hover, .footer-menu ul li a:focus, .footer-menu ul li a:active {
                color: #FFFFFF;
                border-color: rgba(255, 255, 255, 0.9);
            }

            .footer-menu ul li a:focus {
                outline: thin dotted;
            }

            .footer-menu ul li a:hover, .footer-menu ul li a:active {
                outline: 0;
            }

        .footer-menu ul li ul {
            margin-left: 0;
        }

            .footer-menu ul li ul li {
                text-transform: none;
                font-weight: 300;
                padding: 0.25rem 0;
            }

                .footer-menu ul li ul li a {
                    color: #61B3F5;
                }

                    .footer-menu ul li ul li a:hover, .footer-menu ul li ul li a:focus, .footer-menu ul li ul li a:active {
                        color: #FFFFFF;
                        /* border-color: #0f63a9; */
                    }

                    .footer-menu ul li ul li a:focus {
                        outline: thin dotted;
                    }

                    .footer-menu ul li ul li a:hover, .footer-menu ul li ul li a:active {
                        outline: 0;
                    }

.big-menu {
    color: white;
    font-weight: 300;
    font-size: 1rem;
    padding-left: 0.75em;
}

    .big-menu > ul {
        display: grid;
    }

@media screen and (min-width: 32.1em) {
    .big-menu > ul {
        justify-items: start;
        justify-content: center;
        grid-template-columns: 1fr;
    }
}

@media screen and (min-width: 44.1em) {
    .big-menu > ul {
        justify-items: start;
        justify-content: center;
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (min-width: 60.1em) {
    .big-menu > ul {
        grid-template-columns: 1fr;
    }
}

.big-menu > ul > li {
    padding-left: 2em !important;
}

.big-menu ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

    .big-menu ul li {
        font-weight: 500;
        text-transform: uppercase;
        padding: 1rem 0;
        padding-left: 0.5rem;
    }

        .big-menu ul li a {
            color: #FFFFFF;
            padding-bottom: 0.125em;
            /*border-bottom: 2px solid #0D5085;*/
        }

            .big-menu ul li a:hover, .big-menu ul li a:focus, .big-menu ul li a:active {
                color: #FFFFFF;
                border-color: rgba(255, 255, 255, 0.9);
            }

            .big-menu ul li a:focus {
                outline: thin dotted;
            }

            .big-menu ul li a:hover, .big-menu ul li a:active {
                outline: 0;
            }

        .big-menu ul li.company {
            width: 100%;
            border-top: 2px solid #002D4D;
            padding-top: 1.5em;
        }

@media screen and (min-width: 44.1em) {
    .big-menu ul li.company {
        grid-column: 1/span 2;
    }
}

.big-menu ul li.company > a {
    color: #0f63a9;
}

@media screen and (min-width: 44.1em) {
    .big-menu ul li.company > ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-items: start;
        justify-content: center;
    }

        .big-menu ul li.company > ul li:nth-child(even) {
            padding-left: 1em;
        }
}

.big-menu ul li ul {
    margin-left: 2.5em;
    margin-top: 0.25em;
}

    .big-menu ul li ul li {
        text-transform: none;
        font-weight: 300;
        padding: 0.25rem 0;
    }

        .big-menu ul li ul li a {
            color: #74C1FF;
        }

            .big-menu ul li ul li a:hover, .big-menu ul li ul li a:focus, .big-menu ul li ul li a:active {
                color: rgba(255, 255, 255, 0.9);
                border-color: #0f63a9;
            }

            .big-menu ul li ul li a:focus {
                outline: thin dotted;
            }

            .big-menu ul li ul li a:hover, .big-menu ul li ul li a:active {
                outline: 0;
            }

/* Main navigation overlay */
.menu-overlay {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
    z-index: 99;
    opacity: 0;
    transition: 0.2s ease-in-out;
    display: grid;
    grid-template-columns: minmax(auto, 40em);
    justify-content: end;
}

.menu-overlay {
    justify-content: end; /* keeps it aligned right */
    padding-right: 29vw;  /* adjusts how far from the right */
}

@media screen and (max-width: 600px) {
    .menu-overlay {
        padding-right: 0vw;
    }
}

.admin-bar .menu-overlay {
    top: 46px;
}

@media screen and (min-width: 783px) {
    .admin-bar .menu-overlay {
        top: 32px;
    }
}

.menu-overlay.is-active {
    opacity: 1;
    visibility: visible;
    background: #0D5085 url(/assets/images/navigation-vector.png) no-repeat;
    /*background-position: calc(56% + 10%) 0px;*/
    background-size: cover;
}

.menu-overlay .main-wrap {
    padding: 11em 4em;
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
}

@media screen and (max-width: 600px) {
    .menu-overlay .main-wrap {
        padding: 11em 0em;
    }
}

@media screen and (min-width: 60.1em) {
    .menu-overlay .main-wrap {
        grid-template-columns: 1fr;
    }
}

.menu-overlay .main-wrap .banner-area {
    text-align: center;
}

@media screen and (max-width: 60.1em) {
    .menu-overlay .main-wrap .banner-area {
        margin-top: 2em;
    }
}

.menu-overlay .main-wrap .banner-area a {
    border-bottom: none;
}

.menu-overlay .main-wrap .banner-area img {
    padding: 0 1em 1em;
}

.noscroll {
    overflow: hidden;
}

li.wpml-ls-menu-item ul li a {
    width: auto;
}

.wpml-ls-legacy-dropdown {
    width: unset !important;
    max-width: 100%;
}

    .wpml-ls-legacy-dropdown ul {
        font-weight: 500;
        color: #0D5085;
    }

    .wpml-ls-legacy-dropdown a:link, .wpml-ls-legacy-dropdown a:visited {
        color: #003C66 !important;
    }

    .wpml-ls-legacy-dropdown a:hover, .wpml-ls-legacy-dropdown a:active {
        color: #0f63a9 !important;
        background-color: white !important;
    }

.big-lang {
    color: #003C66;
    padding: 1em;
    font-size: 0.875rem;
}

    .big-lang a:link, .big-lang a:visited {
        color: #0f63a9;
    }

    .big-lang a:active, .big-lang a:hover {
        color: white;
    }

    .big-lang span {
        border-right: 1px solid #003C66;
        padding: 0.15em 0.5em;
    }

        .big-lang span:last-child {
            border: none;
        }

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
    padding: 28px 28px;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
}

    .hamburger:hover {
        opacity: 0.7;
    }

    .hamburger.is-active:hover {
        opacity: 0.7;
    }

    .hamburger.is-active .hamburger-inner,
    .hamburger.is-active .hamburger-inner::before,
    .hamburger.is-active .hamburger-inner::after {
        background-color: #0f63a9;
    }

.hamburger-box {
    width: 28px;
    height: 12px;
    display: inline-block;
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px;
}

    .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
        width: 27px;
        height: 4px;
        background-color: #FFFFFF;
        /*border-radius: 4px;*/
        position: absolute;
        transition-property: transform;
        transition-duration: 0.15s;
        transition-timing-function: ease;
    }

        .hamburger-inner::before, .hamburger-inner::after {
            content: "";
            display: block;
        }

        .hamburger-inner::before {
            top: -8px;
        }

        .hamburger-inner::after {
            bottom: -8px;
        }

.is-active .hamburger-inner::after {
    width: 28px;
    margin-left: 0;
}

/* @import "types/3dx";
@import "types/3dx-r";
@import "types/3dy";
@import "types/3dy-r";
@import "types/3dxy";
@import "types/3dxy-r";
@import "types/arrow";
@import "types/arrow-r";
@import "types/arrowalt";
@import "types/arrowalt-r";
@import "types/arrowturn";
@import "types/arrowturn-r";
@import "types/boring";
@import "types/collapse";
@import "types/collapse-r";
@import "types/elastic";
@import "types/elastic-r";
@import "types/emphatic";
@import "types/emphatic-r";
@import "types/minus";
@import "types/slider";
@import "types/slider-r";
@import "types/spin";
@import "types/spin-r";
@import "types/spring-r";
@import "types/stand";
@import "types/stand-r"; */
/*
 * Squeeze
 */
.hamburger--squeeze .hamburger-inner {
    transition-duration: 0.075s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

    .hamburger--squeeze .hamburger-inner::before {
        transition: top 0.075s 0.12s ease, opacity 0.075s ease;
    }

    .hamburger--squeeze .hamburger-inner::after {
        transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

.hamburger--squeeze.is-active .hamburger-inner {
    transform: rotate(45deg);
    transition-delay: 0.12s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

    .hamburger--squeeze.is-active .hamburger-inner::before {
        top: 0;
        opacity: 1;
        transition: top 0.075s ease, opacity 0.075s 0.12s ease;
    }

    .hamburger--squeeze.is-active .hamburger-inner::after {
        bottom: 0;
        transform: rotate(-90deg);
        transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
    }

/* @import "types/vortex";
@import "types/vortex-r"; */
/* Posts and pages
--------------------------------------------- */
.sticky {
    display: block;
}

.post,
.page {
    margin: 0;
}

.updated:not(.published) {
    display: none;
}

.page-content,
.entry-content,
.entry-summary {
    margin: 1.5em 0 0;
}

.category-linije .page-content,
.category-linije .entry-content,
.category-linije .entry-summary {
    margin: 0 0 2em;
}

.single .entry-content {
    max-width: 52em;
}

.page-links {
    clear: both;
    margin: 0 0 1.5em;
}

/*
.entry-content {
	//border: 1px solid red;
	margin-left: auto;
	max-width: 960px;
	//padding: 4vh 2em;
}
*/
.content-area {
    margin: 0 auto;
    max-width: 80em;
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 60.1em) {
    .content-area {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.content-area-bus-stops
{
    margin-top: -17em;
}

.content-area main.site-main {
    flex: 1 1 70%;
    padding: 1.5vh 2em;
}

.content-area aside#secondary {
    flex: 1 1 30%;
    padding: 2vh 1em;
}

.content-area .main-header {
    flex: 0 0 100%;
    border-radius: 20px;
    margin-top: 50px;
}

/* Routes category archive */
.linije-archive-wrap {
    /*display: flex;*/
    flex-direction: column;
    padding: 4em 1em;
}

@media screen and (min-width: 60.1em) {
    .linije-archive-wrap {
        flex-direction: row;
    }
}

.linije-archive-wrap .routes-description {
    flex: 0 1 70%;
    margin-bottom: 2em;
    padding: 1em;
}

@media screen and (min-width: 33.1em) {
    .linije-archive-wrap .routes-description {
        flex: 1 1 30%;
    }
}

.linije-archive-wrap .routes-description h2 {
    margin-top: 0.5rem;
}

.linije-archive-wrap .routes-list {
    flex: 0 1 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: column;
}

@media screen and (min-width: 44.1em) {
    .linije-archive-wrap .routes-list {
        flex-direction: row;
        align-items: flex-start;
        flex: 1 1 30%;
    }
}

@media screen and (min-width: 33.1em) {
    .linije-archive-wrap .routes-list {
        flex: 0 1 70%;
        padding: 1em;
    }
}

.linije-archive-wrap .routes-list a {
    flex: 0 1 50%;
    display: block;
    border: none;
    margin: 0.5em 0;
}

.linije-archive-wrap .routes-list .boxed {
    flex: 0 1 50%;
    margin: 0.5em 0;
}

    .linije-archive-wrap .routes-list .boxed a {
        padding: 0.5em 1em;
        border-color: #E3E3E3;
    }

.linije-archive-wrap .routes-list .one-route {
    margin: 0 1em;
    border-radius: 0.5em;
    /*background-color: #F9F9F9;
    overflow: hidden;*/
    display: flex;
    padding: 10px;
    align-items: center;
    gap: 18px;
    align-self: stretch;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.08);
}

    .linije-archive-wrap .routes-list .one-route .route-number {
        display: flex;
        width: 48px;
        height: 48px;
        padding: 8px 15px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        aspect-ratio: 1/1;
        border-radius: 80px;
        border: 2px solid #1363A3;
        background: #1363A3;
        box-shadow: 0px 0px 0px 4px #2578BA inset;
    }

    .linije-archive-wrap .routes-list .one-route .route-endpoints {
        padding: 0.5em;
        line-height: 1.2;
    }

.local-routes .one-route .route-number {
    background-color: #0f63a9;
    color: white;
    padding: 0.25em 0.5em;
}

.route-number {
    background-color: #0f63a9;
    color: white;
    font-size: 1.625em;
    padding: 0.25em 0.5em;
}

.route-number-small {
    font-size: 0.9em; /* Adjust as needed */
}

@media screen and (min-width: 32.1em) {
    .local-routes .one-route .route-number {
        /*flex: 0 1 25%;*/
    }
}

@media screen and (min-width: 80.1em) {
    .local-routes .one-route .route-number {
        /*flex: 0 1 21%;*/
    }
}

.local-routes .one-route .route-endpoints {
    flex: 1 1;
    display: flex;
    align-items: center;
    font-weight: 600;
}

    .local-routes .one-route .route-endpoints:hover {
        background-color: #F0F0F0;
    }

.out-routes .routes-list {
    padding-right: 1em;
}

    .out-routes .routes-list a {
        border: none;
    }

        .out-routes .routes-list a:hover {
            border: none;
            background-color: white;
        }

    .out-routes .routes-list .one-route {
        display: block;
        margin: 0 1em;
        border-radius: 0.5em;
        background-color: #F9F9F9;
        overflow: hidden;
    }

        .out-routes .routes-list .one-route .route-number {
            background-color: #0f63a9;
            border-bottom: 2px solid rgb(184.8214285714, 57.5, 10.6785714286);
            color: white;
            font-size: 1.625em;
            padding: 0.25em 0.5em;
        }

        .out-routes .routes-list .one-route .route-endpoints {
            color: #E3E3E3;
            padding: 0.5em;
            line-height: 1.2;
        }

.night-routes .routes-list {
    padding-right: 1em;
}

    .night-routes .routes-list a {
        border: none;
    }

        .night-routes .routes-list a:hover {
            border: none;
        }

    .night-routes .routes-list .one-route .route-number {
        flex: 0 1 25%;
        background-color: #002D4D;
        color: #0f63a9;
        font-size: 1.625em;
        padding: 0.25em 0.5em;
        display: flex;
        align-items: center;
    }

    .night-routes .routes-list .one-route .route-endpoints {
        flex: 1 1;
        padding: 0.5em;
        line-height: 2;
        font-weight: 600;
        background-color: #E3E3E3;
    }

.timetable-download {
    color: white;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    color: white;
    font-size: 0.875rem;
    justify-content: center;
}

    .timetable-download img {
        float: left;
        margin-right: 0.5rem;
    }

    .timetable-download > div {
        padding: 1em;
    }

    .timetable-download .tt-contingency {
        flex: 0 1 380px;
        display: flex;
        align-items: center;
        gap: 0.5em;
        justify-content: center;
    }

@media screen and (min-width: 44.1em) {
    .timetable-download .tt-contingency {
        justify-content: flex-start;
    }
}

.timetable-download .tt-previous,
.timetable-download .tt-current {
    flex: 0 0 260px;
}

@media screen and (min-width: 44.1em) {
    .timetable-download {
        justify-content: flex-end;
    }

        .timetable-download .tt-current {
            flex: 0 0 260px;
        }

        .timetable-download .tt-previous {
            flex: 0 0 260px;
        }
}

/*
 * News
 */
.news-module {
    /*padding: 2vh 2em 4vh;*/
}

    .news-module .news-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-gap: 30px;
        grid-auto-flow: dense;
        margin-top: 3em;
    }

        .news-module .news-cards .one-news {
            /*border: 1px solid #D9D9D9;*/
            border-radius: 20px;
            box-shadow: 0px 0px 15px 10px rgba(220, 220, 220, 0.4);
        }

    .news-module .news-meta {
        background-color: #D9D9D9;
        margin: 0 1em 1em;
        padding: 0.25rem 1em;
        font-size: 0.875em;
        display: flex;
        align-items: center;
    }

@media screen and (min-width: 44.1em) {
    .news-module .news-meta {
        margin: 0 2em;
    }
}

.news-module .news-meta img {
    margin-right: 0.75em;
}

.news-module .news-meta.vozni-red-linije {
    background-color: #0f63a9;
}

    .news-module .news-meta.vozni-red-linije span {
        color: white;
    }

.news-module .news-meta.obavijesti {
    background-color: #0f63a9 !important;
}

    .news-module .news-meta.obavijesti span {
        color: white;
    }

.news-module .news-meta.promjene {
    background-color: #0f63a9 !important;
}

    .news-module .news-meta.promjene span {
        color: white;
    }

.news-module .news-content {
    padding: 1em;
}

@media screen and (min-width: 44.1em) {
    .news-module .news-content {
        padding: 1em 2em;
    }
}

.news-module .archive-link {
    border-radius: 2em;
    background-color: #0f63a9;
    margin: 2em auto;
    padding: 0.5em 2em;
    display: table;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.875em;
}

    .news-module .archive-link a {
        border: none;
        color: white;
    }

        .news-module .archive-link a:hover, .news-module .archive-link a:focus, .news-module .archive-link a:active {
            color: #0f63a9;
        }

    .news-module .archive-link:hover, .news-module .archive-link:focus, .news-module .archive-link:active {
        background-color: #000F1A;
    }

.news-module .additional-info {
    padding: 0.75em 1.5em;
    background-color: #F0F0F0;
    border-radius: 0.75em;
    text-align: left;
    width: fit-content;
    margin: 0 auto;
    overflow: auto;
    display: flex;
    align-items: center;
}

    .news-module .additional-info img {
        margin-right: calc(1em + 1vw);
    }

/*
 * Karte
 */
.tickets-module {
    padding: 1vh 2em 2vh;
    text-align: center;
}

    .tickets-module .ticket-cards {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        grid-gap: 32px;
    }

        .tickets-module .ticket-cards > article {
            flex: 0 1 200px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            border-radius: 20px;
            overflow: hidden;
            background-color: #0f63a9;
            color: white;
        }

    .tickets-module .ticket-top {
        padding: 1em 2em 0;
        background-color: #E3E3E3;
        color: #002D4D;
        background-image: url(./assets/images/bg-halfcrc.svg);
        background-repeat: no-repeat;
        background-position: bottom center;
    }

        .tickets-module .ticket-top a {
            border-bottom: none;
        }

    .tickets-module .ticket-content {
        flex: 1 1 100%;
        padding: 1em;
        font-size: 0.8125em;
    }

@media screen and (min-width: 44.1em) {
    .tickets-module .ticket-content {
        padding: 1em 2em;
    }
}

.tickets-module .turist .ticket-top {
    background-image: url(./assets/images/bg-halfcrc-navy.svg);
}

.tickets-module .turist .ticket-content {
    background-color: #003C66;
}

.tickets-module .ticket-links {
    border-radius: 2em;
    border: 1px solid #D9D9D9;
    margin: 2em auto;
    padding: 0.5em 2em;
    display: table;
    text-align: center;
    font-size: 0.875em;
}

    .tickets-module .ticket-links a {
        border: none;
        color: #003C66;
    }

        .tickets-module .ticket-links a:hover, .tickets-module .ticket-links a:focus, .tickets-module .ticket-links a:active {
            color: #0f63a9;
        }

    .tickets-module .ticket-links:hover, .tickets-module .ticket-links:focus, .tickets-module .ticket-links:active {
        background-color: #F0F0F0;[]
    }

/*
 * Routes / Timetables
 */
.route-content-wrap {
    display: grid;
    grid-template-columns: 1fr minmax(auto, 80em) 1fr;
}

    .route-content-wrap .flank .routes-graphic {
        width: 100%;
        background-image: url(./assets/images/graphic-routes.svg);
        background-repeat: no-repeat;
        background-position: top right;
        background-size: cover;
        display: none;
    }

@media screen and (min-width: 80.1em) {
    .route-content-wrap .flank .routes-graphic {
        display: block;
        min-height: 28vw;
    }
}

.route-content-wrap .route-content {
    display: grid;
    grid-template-columns: 1fr;
    padding: 1.5vh 1em;
}

@media screen and (min-width: 44.1em) {
    .route-content-wrap .route-content {
        grid-template-columns: 4fr 2fr;
        padding: 1.5vh 0;
    }
}

@media screen and (min-width: 60.1em) {
    .route-content-wrap .route-content {
        grid-template-columns: 3fr 1fr;
    }
}

@media screen and (min-width: 44.1em) {
    .route-content-wrap .route-content .route-info {
        padding-right: 1em;
    }
}

@media screen and (min-width: 44.1em) {
    .route-content-wrap .route-content .route-side {
        padding-left: 1em;
    }
}

.route-content-wrap .route-content .entry-content {
    max-width: unset;
}

.route-content-wrap .timetable-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-bottom: 1em;
}

@media screen and (min-width: 44.1em) {
    .route-content-wrap .timetable-wrap {
        padding-bottom: 2em;
    }
}

.route-content-wrap .timetable-wrap .timetable-head {
    padding: 0.25em 1vw 0.25em 2vw;
    display: grid;
    grid-template-columns: 1fr;
}

@media screen and (min-width: 44.1em) {
    .route-content-wrap .timetable-wrap .timetable-head {
        /*grid-template-columns: minmax(46px, 52px) 1fr;*/
        padding: 1em 1.5em;
        align-items: center;
    }
}

@media screen and (min-width: 44.1em) {
    .route-content-wrap .timetable-wrap .timetable-head .direction-icon {
        aspect-ratio: 1/1;
    }
}

.route-content-wrap .timetable-wrap .timetable-head .direction-icon img {
    height: 100%;
    width: auto;
}

.route-content-wrap .timetable-wrap .timetable-head .direction-title {
    padding-left: 0.25em;
    z-index: 1;
}

.route-content-wrap .timetable-wrap .timetable-head img {
    display: block;
}

.route-content-wrap .timetable-wrap .timetable-head.smjer-a {
    position: relative;
    width: 95%;
    height: 110px;
    background: #1363A3;
    color: white;
    /*padding: 1em 1.5em;*/
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    font-size: 1em;
    font-weight: 500;
    overflow: hidden;
    margin: 0 auto;
}

.route-content-wrap .timetable-wrap .timetable-head.smjer-a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 8em; /* Adjust based on arrow size */
    width: 0;
    height: 0;
    border-top: 53px solid transparent;  /* Half of the height */
    border-bottom: 60px solid transparent;
    border-left: 50px solid #0D5085;
}

.route-content-wrap .timetable-wrap .timetable-head.smjer-a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 8em;
    height: 100%;
    background-color: #0D5085; /* Left margin color */
}

.timetable-green-a::before {
    background-color: #257118 !important;
}

.timetable-green-a::after {
    background-color: #358122 !important;
    border-left: 50px solid #257118 !important;
}

.timetable-green-b::before {
    background-color: #257118 !important;
}

.timetable-green-b::after {
    background-color: #358122 !important;
    border-right: 50px solid #257118 !important;
}

.timetable-red-a::before {
    background-color: #922024 !important;
}

.timetable-red-a::after {
    background-color: #AC282D !important;
    border-left: 50px solid #922024 !important;
}

.timetable-red-b::before {
    background-color: #922024 !important;
}

.timetable-red-b::after {
    background-color: #AC282D !important;
    border-right: 50px solid #922024 !important;
}

.route-content-wrap .timetable-wrap .timetable-head.smjer-b {
    position: relative;
    width: 95%;
    height: 110px;
    color: white;
    background: #1363A3;
    /*padding: 1em 1.5em;*/
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    font-size: 1em;
    font-weight: 500;
    overflow: hidden;
    margin: 0 auto;
}

.route-content-wrap .timetable-wrap .timetable-head.smjer-b::after {
    content: "";
    position: absolute;
    top: 0;
    right: 16em; /* Adjust based on arrow size */
    width: 0;
    height: 0;
    border-top: 53px solid transparent;  /* Half of the height */
    border-bottom: 60px solid transparent;
    border-right: 50px solid #0D5085;
}

.route-content-wrap .timetable-wrap .timetable-head.smjer-b::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 16em;
    height: 100%;
    background-color: #0D5085; /* Left margin color */
}

.route-content-wrap .timetable-wrap .timetable-column {
    padding-left: 0.5vw;
}

.route-content-wrap .timetable-wrap .timetableGaraza {
    display: inline-block;
    color: white;
    font-weight: 500;
    font-size: 0.875em;
    line-height: 1;
    background-color: black;
    padding: 0.25em 0.35em;
    border-radius: 20% 50% 50% 20%;
}

.site-header {
    background: #1363A3;
    height: 240px;
    grid-area: header;
    display: grid;
    grid-template-columns: 1fr minmax(auto, 80em) 1fr;
}

    .site-header .header-wrap {
        max-width: 80em;
        display: block;
        /*grid-template-columns: 1fr 2fr 1fr;*/
        /*grid-template-rows: 8rem;*/
        margin-top: 3em;
        align-items: center;
    }

        .site-header .header-wrap .site-branding {
            grid-column: 1;
            justify-items: left;
            text-align: left;
            min-width: 11em;
        }

            .site-header .header-wrap .site-branding a {
                border: none;
                display: grid;
                align-items: center;
                justify-content: center;
            }

            .site-header .header-wrap .site-branding p,
            .site-header .header-wrap .site-branding h1 {
                margin: 0;
                line-height: 0;
            }

        .site-header .header-wrap .main-navigation {
            /*grid-column: 4;*/
            justify-content: flex-end;
            margin-top: -3em;
        }

@media screen and (max-width: 32.1em) {
    .site-header .header-wrap .helper-navigation {
        display: none;
        visibility: hidden;
    }
}

.site-header .header-wrap .helper-navigation a {
    border: none;
    display: grid;
    align-items: center;
    justify-content: center;
}

.site-header .header-wrap .helper-navigation img {
    margin: 0.25em;
    border: 2px solid white;
    border-radius: 36px;
}

    .site-header .header-wrap .helper-navigation img:hover {
        border: 2px solid #0f63a9;
    }

.main-header {
    background-color: #0D5085;
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 20px;
}

@media screen and (min-width: 44.1em) {
    .main-header {
        grid-template-columns: 1fr 1fr;
        height: 300px;
    }
}

@media screen and (min-width: 60.1em) {
    .main-header {
        grid-template-columns: 2fr 2fr;
    }
}

.main-header .title-area {
    display: grid;
    align-items: center;
    padding: 1em 1em;
    justify-items: start;
}

    .main-header .title-area .title-linker {
        display: inline-flex;
        margin: 1.5rem 2vw;
        border: 1px solid #0f63a9;
        color: white;
        border-radius: 1em;
        padding: 0.5em 1.25em;
        line-height: 1;
    }

        .main-header .title-area .title-linker .title-link-block {
            display: flex;
            align-items: center;
        }

            .main-header .title-area .title-linker .title-link-block .link-icon {
                align-content: center;
                text-align: center;
                padding-right: 1em;
            }

        .main-header .title-area .title-linker a {
            color: white;
            text-decoration: none;
            border-width: 0;
            border-bottom: 0;
            border-collapse: collapse;
        }

            .main-header .title-area .title-linker a:hover {
                color: #0f63a9;
            }

        .main-header .title-area .title-linker h3 {
            margin: 0;
            padding: 0;
            font-weight: 700;
            font-size: 1rem;
        }

        .main-header .title-area .title-linker span {
            font-size: 0.75rem;
            line-height: 0.8;
        }

.main-header .graphics-area {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

    .main-header .graphics-area.has-cover {
        aspect-ratio: 3/1;
    }

@media screen and (min-width: 44.1em) {
    .main-header .graphics-area.has-cover {
        aspect-ratio: initial;
    }
}

@media screen and (min-width: 80.1em) {
    .main-header .graphics-area.has-cover {
        aspect-ratio: 3/1;
    }
}

.main-header .graphics-area .cover-image {
    position: relative;
    z-index: 0;
    grid-row: 1/1;
    grid-column: 1/1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.main-header .graphics-area .cover-grid {
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(12, 28px);
    grid-template-rows: repeat(4, 28px);
    justify-content: end;
    height: 100%;
}

@media screen and (min-width: 32.1em) {
    .main-header .graphics-area .cover-grid {
        grid-template-columns: repeat(12, 34px);
        grid-template-rows: repeat(4, 34px);
    }
}

@media screen and (min-width: 44.1em) {
    .main-header .graphics-area .cover-grid {
        grid-template-columns: repeat(12, 40px);
        grid-template-rows: repeat(4, 40px);
    }
}

@media screen and (min-width: 80.1em) {
    .main-header .graphics-area .cover-grid {
        grid-template-columns: repeat(12, 48px);
        grid-template-rows: repeat(4, 48px);
    }
}

.main-header .graphics-area .cover-grid .item-orange-2 {
    grid-column: -13/span 1;
    grid-row: 1/-4;
    background: #0f63a9;
    justify-content: end;
}

.main-header .graphics-area .cover-grid .item-azure-1 {
    grid-column: -10/span 1;
    grid-row: 4/-1;
    background: #0f63a9;
    justify-content: end;
}

.main-header .graphics-area .cover-grid .item-orange-1 {
    grid-column: -3/span 1;
    grid-row: 3/-2;
    background: #0f63a9;
    justify-content: end;
}

.main-header .graphics-area .cover-grid .item-white-1 {
    grid-column: -9/span 1;
    grid-row: 4/-1;
    background: white;
    justify-content: end;
}

.main-header .graphics-area .cover-grid .item-white-2 {
    grid-column: -2/span 1;
    grid-row: 3/-2;
    background: white;
    justify-content: end;
}

.main-header .graphics-area .cover-grid .item-white-3 {
    grid-column: -3/span 1;
    grid-row: 4/-1;
    background: white;
    justify-content: end;
}

.main-header .graphics-area .cover-grid .item-white-last {
    grid-column: -2/span 1;
    grid-row: 4/-1;
    background: white;
    justify-content: end;
}

.main-header .bottom-square-wrap {
    background-color: white;
}

@media screen and (min-width: 44.1em) {
    .main-header .bottom-square-wrap {
        grid-column: 1/span 2;
    }
}

.main-header .bottom-square {
    justify-content: end;
    display: grid;
    height: 28px;
    grid-template-columns: repeat(auto-fill, 28px);
    grid-template-rows: repeat(auto-fill, 28px);
}

@media screen and (min-width: 32.1em) {
    .main-header .bottom-square {
        height: 34px;
        grid-template-columns: repeat(auto-fill, 34px);
        grid-template-rows: repeat(auto-fill, 34px);
    }
}

@media screen and (min-width: 44.1em) {
    .main-header .bottom-square {
        height: 40px;
        grid-template-columns: repeat(auto-fill, 40px);
        grid-template-rows: repeat(auto-fill, 40px);
    }
}

@media screen and (min-width: 80.1em) {
    .main-header .bottom-square {
        height: 48px;
        grid-template-columns: repeat(auto-fill, 48px);
        grid-template-rows: repeat(auto-fill, 48px);
    }
}

.main-header .bottom-square .item-orange1 {
    grid-column: 10/span 1;
    grid-row: 1/1;
    background: #0f63a9;
    justify-content: end;
}

.hero-header .graphics-area.has-cover {
    aspect-ratio: 3/1;
}

@media screen and (min-width: 44.1em) {
    .hero-header .graphics-area.has-cover {
        aspect-ratio: initial;
    }
}

@media screen and (min-width: 80.1em) {
    .hero-header .graphics-area.has-cover {
        aspect-ratio: 2/1;
    }
}

.route-header .title-area {
    display: flex;
    flex-direction: row;
    color: white;
    justify-content: flex-start;
}

    .route-header .title-area .route-number {
        /*padding: 1em 2em 0 1em;*/
        display: flex;
        width: 240px;
        height: 240px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
        border-radius: 300px;
        background: #1363A3;
        border: 10px solid #1363A3;
        box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05), 0px 0px 0px 20px #1B6AA9 inset;
    }

    @media screen and (max-width: 1024px) {
        .route-header .title-area .route-number {
            width: 210px;
            height: 210px;
        }
    }

    @media screen and (max-width: 600px) {
        .route-header .title-area .route-number {
            width: 210px;
            height: 210px;
        }
    }

@media screen and (max-width: 430px) {
    .route-header .title-area .route-number {
        width: 120px;
        height: 120px;
    }
}

@media screen and (max-width: 430px) {
    .route-header .title-area .route-short {
        padding: 1em;
        margin-top: -2em;
        height: 100px !important;
        align-content: center;
    }
}

@media only screen and (device-width: 430px) and (orientation: portrait) {
    .route-header .title-area .route-number {
        width: 130px;
        height: 130px;
    }
}

@media screen and (max-width: 430px) {
    h1.route-title {
        font-size: 2rem;
    }
}


    .route-header .title-area .route-short {
        padding: 1em;
        margin-top: -2em;
        height: 300px;
        align-content: center;
    }

.route-header .graphics-area {
    aspect-ratio: auto;
}

    .route-header .graphics-area .cover-image {
        /*display: flex;*/
        /*flex-direction: column-reverse;*/
        margin: 5em 8em;
    }

@media screen and (max-width: 1024px) {
    .route-header .graphics-area .cover-image {
        margin: 3em 4em;
    }
}

@media screen and (max-width: 600px) {
    .route-header .graphics-area .cover-image {
        margin: 0em 0em;
    }
}

    .route-header .graphics-area .cover-grid {
        grid-template-columns: repeat(6, 28px);
        grid-template-rows: repeat(2, 28px);
    }

@media screen and (min-width: 32.1em) {
    .route-header .graphics-area .cover-grid {
        grid-template-columns: repeat(6, 34px);
        grid-template-rows: repeat(2, 34px);
    }
}

@media screen and (min-width: 44.1em) {
    .route-header .graphics-area .cover-grid {
        grid-template-columns: repeat(6, 40px);
        grid-template-rows: repeat(2, 40px);
    }
}

@media screen and (min-width: 80.1em) {
    .route-header .graphics-area .cover-grid {
        grid-template-columns: repeat(6, 48px);
        grid-template-rows: repeat(2, 48px);
    }
}

.route-header .graphics-area .cover-grid .item-white-3 {
    grid-column: -2/span 1;
    grid-row: 1/-1;
    background: white;
    justify-content: end;
}

.route-header .graphics-area .cover-grid .item-white-last {
    grid-column: -2/span 1;
    grid-row: 2/-1;
    background: white;
    justify-content: end;
}

.site-footer {
    background-color: #072239;
    border-top: 1px solid #072239;
    /**/
}

    .site-footer .footer-wrap {
        padding: 1em;
    }

.footer-menu img {
    max-width: 40%;
    padding-top: 3em;
}

.site-footer .bottom-stripe {
    background-color: #072239;
    /*border-top: 1px solid #E9EAEB;*/
    width: 100%;
}

.site-footer .site-info {
    padding: 0.75em 1em;
}

@media screen and (min-width: 44.1em) {
    .site-footer .footer-content {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media screen and (min-width: 60.1em) {
    .site-footer .footer-content {
        grid-template-columns: 1fr;
    }
}

.site-footer .footer-content .foot-tagline {
    display: grid;
    /*place-items: center;*/
    padding: 8em 0;
}

    .site-footer .footer-content .foot-tagline img {
        margin-top: 1em;
    }

@media screen and (max-width: 44.1em) {
    .site-footer .footer-content .foot-menu {
        border-top: 1px solid #002D4D;
    }
}

/*@media screen and (min-width: 44.1em) {
    .site-footer .footer-content .foot-menu {
        border-left: 1px solid #002D4D;
    }
}*/

.site-footer .colourful {
    width: 100%;
    color: white;
    background: linear-gradient(0deg, #0D5085 50%, white 50%);
    max-width: 100vw;
    overflow: hidden;
}

    .site-footer .colourful .square-grid {
        display: grid;
        grid-template-columns: repeat(18, 28px);
        grid-template-rows: repeat(2, 28px);
    }

@media screen and (min-width: 32.1em) {
    .site-footer .colourful .square-grid {
        grid-template-columns: repeat(18, 34px);
        grid-template-rows: repeat(2, 34px);
    }
}

@media screen and (min-width: 44.1em) {
    .site-footer .colourful .square-grid {
        grid-template-columns: repeat(24, 40px);
        grid-template-rows: repeat(2, 40px);
    }
}

@media screen and (min-width: 80.1em) {
    .site-footer .colourful .square-grid {
        grid-template-columns: repeat(24, 48px);
        grid-template-rows: repeat(2, 48px);
    }
}

.site-footer .colourful .square-grid .item-navy1 {
    grid-column: 1/span 1;
    grid-row: 1/1;
    background: #0D5085;
}

.site-footer .colourful .square-grid .item-orange1 {
    grid-column: 2/span 1;
    grid-row: 1/1;
    background: #0f63a9;
}

.site-footer .colourful .square-grid .item-orange2 {
    grid-column: 16/span 1;
    grid-row: 1/1;
    background: #0f63a9;
}

.site-footer .colourful .square-grid .item-azure1 {
    grid-column: 9/span 1;
    grid-row: 1/1;
    background: #0f63a9;
}

.site-footer .colourful .square-grid .item-azure2 {
    grid-column: 11/span 1;
    grid-row: 2/2;
    background: #0f63a9;
}

.site-footer .colourful .square-grid .item-white {
    grid-column: 10/span 1;
    grid-row: 2/2;
    background: white;
}

/* Custom block styling and blocks
--------------------------------------------- */
/* Comments
--------------------------------------------- */
.comment-content a {
    word-wrap: break-word;
}

.bypostauthor {
    display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
    margin: 0 0 1.5em;
}

    .widget select {
        max-width: 100%;
    }

.sec-nav {
    background: #FFFFFF;
    box-shadow: 0px 0px 50px 10px rgba(220, 220, 220, 0.6);
    border-radius: 14px;
    font-size: 0.875rem;
    overflow: hidden;
    margin-bottom: 2em;
}

    .sec-nav h2 {
        border-left: 1.55em solid #0f63a9;
        padding-left: 0.4em;
        margin-top: 0;
        line-height: 1.8;
        font-size: 1.45rem;
        text-transform: uppercase;
    }

    .sec-nav ul {
        color: #0f63a9;
        padding: 0 2em 1em 3.1em;
        font-weight: 500;
        list-style-type: "—  ";
    }

        .sec-nav ul a, .sec-nav ul a:visited {
            color: #0D5085;
            text-decoration: none;
            border-color: transparent;
        }

            .sec-nav ul a:hover, .sec-nav ul a:visited:hover {
                color: #0f63a9;
            }

        .sec-nav ul li {
            margin-bottom: 0.4em;
        }

            .sec-nav ul li.current_page_item {
                background: #F0F0F0;
                padding: 0.25em 0.75em;
                border-radius: 0.75em;
            }

        .sec-nav ul ul {
            color: #E3E3E3;
            padding: 0.25em 0 0;
            list-style-type: "- ";
            margin-left: 0.75em;
        }

.sec-docs {
    background: #FFFFFF;
    box-shadow: 0px 0px 50px 10px rgba(220, 220, 220, 0.6);
    border-radius: 14px;
    font-size: 0.875rem;
    overflow: hidden;
    margin-bottom: 2em;
    padding-bottom: 1em;
}

    .sec-docs h2 {
        margin: 0.5em 0 0 1em;
        line-height: 1.7;
        font-size: 1.25rem;
    }

    .sec-docs .one-doc {
        overflow: hidden;
        padding: 1em 0 1em 5em;
        position: relative;
    }

    .sec-docs img {
        position: absolute;
        top: 0.75em;
        left: 1.5em;
    }

.documents-wrap ul.document-list {
    display: flex;
    flex-direction: column;
    color: red;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

@media screen and (min-width: 44.1em) {
    .documents-wrap ul.document-list {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.documents-wrap ul.document-list li {
    flex: 0 0 50%;
    padding: 0.5em;
    margin-bottom: 1em;
}

    .documents-wrap ul.document-list li img {
        float: left;
        margin-right: 0.5em;
    }

/* Tickets price list */
.ticket-group,
.ticket-outlets-wrap {
    border: 1px solid #E3E3E3;
    padding: 0 1em;
    margin-bottom: 1em;
}

    .ticket-group h3 {
        color: #0f63a9;
        font-size: 1.5rem;
    }

.ticket-outlets-wrap {
    display: flex;
    flex-direction: column;
    padding: 1em;
}

@media screen and (min-width: 44.1em) {
    .ticket-outlets-wrap {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.ticket-outlets-wrap img {
    vertical-align: bottom;
}

.ticket-outlets-wrap h2 {
    margin-top: 0;
    margin-bottom: 0.6em;
    flex: 0 1 100%;
    color: #0f63a9;
}

.ticket-outlets-wrap .ticket-description {
    flex: 1 1 50%;
}

    .ticket-outlets-wrap .ticket-description h3 {
        margin-top: 0;
    }

.ticket-outlets-wrap .outlet-authorization {
    margin-top: 1em;
    flex: 1 1 50%;
    margin-bottom: 1em;
}

@media screen and (min-width: 44.1em) {
    .ticket-outlets-wrap .outlet-authorization {
        margin-top: 2.5em;
    }
}

/* Godišnja izvješća */
.one-report {
    border: 1px solid #efefef;
    padding: 1em;
    margin-bottom: 1em;
}

    .one-report .one-doc-reports {
        padding: 0.5em;
        margin-top: 0.5em;
    }

        .one-report .one-doc-reports img {
            vertical-align: middle;
            margin-right: 0.25em;
        }

/* #Godišnja izvješća */
.error-404 {
    margin: 3em;
    text-align: center;
}

    .error-404 .search-submit {
        padding: 0 1em;
        font-size: 1em;
        text-transform: uppercase;
        border-radius: 0;
        line-height: 2em;
    }

.voznatablica {
    max-width: 920px;
    margin: 0 auto;
}

    .voznatablica td {
        vertical-align: top;
        padding: 0 5px 0 5px;
        width: 50%;
    }

    .voznatablica ul {
        list-style-type: none;
        margin: 0;
    }

.voznatablica ul::before {
    content: '';
    position: absolute;
    top: 2em;
    bottom: 3em;
    left: 0.66em;
    width: 3px;
    background-color: #0f63a9;
}

        .voznatablica ul li {
            display: block;
            margin-top: 0.875em;
            /*background-image: url(../icons/ic-stop-circle-blue.svg);*/
            /*background-repeat: no-repeat;*/
            /*background-position: left 3px;*/
            padding-left: 1.75em;
            padding-top: 0;
        }

            .voznatablica ul li:first-child {
                background-position: left top;
            }

/*
 * Front page modules
 */
.module-banner-wrap {
    display: grid;
    grid-template-columns: minmax(auto, 80em);
    justify-content: center;
}

    .module-banner-wrap .banner-module {
        padding: 2vh 2em;
    }

@media screen and (min-width: 44.1em) {
    .module-banner-wrap .banner-module {
        padding: 2vh 0 4vh;
        /*padding: 2vh 2em 4vh;*/
    }
}

.module-banner-wrap .banner-module .banner-cards {
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 44.1em) {
    .module-banner-wrap .banner-module .banner-cards {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

.module-banner-wrap .banner-module .banner-cards .one-banner {
    position: relative;
    flex: 0 1 32%;
    margin-top: 1vw;
    background: #FFFFFF;
    box-shadow: 0px 0px 15px 10px rgba(220, 220, 220, 0.4);
    border-radius: 20px;
    padding: 1.5em 0 1.5em 0;
    transition: all ease-in-out 0.2s;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .module-banner-wrap .banner-module .banner-cards .one-banner.full {
        flex: 0 1 96%;
        padding: 1.5em 1em;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1em 0.25em;
        justify-content: space-around;
    }

        .module-banner-wrap .banner-module .banner-cards .one-banner.full.bk-azure {
            background-color: #0f63a9;
        }

            .module-banner-wrap .banner-module .banner-cards .one-banner.full.bk-azure.pulse {
                animation: pulse-animation-or 2s infinite;
            }

@keyframes pulse-animation-or {
    0% {
        box-shadow: 0 0 0 0px rgba(51, 204, 255, 0.6);
    }

    100% {
        box-shadow: 0 0 0 20px rgba(51, 204, 255, 0);
    }
}

.module-banner-wrap .banner-module .banner-cards .one-banner.full.bk-orange {
    background-color: #0f63a9;
}

    .module-banner-wrap .banner-module .banner-cards .one-banner.full.bk-orange.pulse {
        animation: pulse-animation-az 2s infinite;
    }

@keyframes pulse-animation-az {
    0% {
        box-shadow: 0 0 0 0px rgba(242, 87, 30, 0.6);
    }

    100% {
        box-shadow: 0 0 0 20px rgba(242, 87, 30, 0);
    }
}

.module-banner-wrap .banner-module .banner-cards .one-banner.full .box-flank {
    flex: 0 1 16%;
}

@media screen and (min-width: 60.1em) {
    .module-banner-wrap .banner-module .banner-cards .one-banner.full .box-flank {
        flex: 0 1 9%;
    }
}

.module-banner-wrap .banner-module .banner-cards .one-banner.full .box-flank a:link {
    text-decoration: none;
    border-bottom: none;
}

.module-banner-wrap .banner-module .banner-cards .one-banner.full .box-middle {
    flex: 0 1 75%;
}

@media screen and (min-width: 60.1em) {
    .module-banner-wrap .banner-module .banner-cards .one-banner.full .box-middle {
        flex: 0 1 36%;
    }
}

.module-banner-wrap .banner-module .banner-cards .one-banner.full .box-middle ul, .module-banner-wrap .banner-module .banner-cards .one-banner.full .box-middle ol {
    padding: 1em;
    font-size: 1rem;
}

.module-banner-wrap .banner-module .banner-cards .one-banner.full .box-middle p {
    font-size: 1rem;
}

    .module-banner-wrap .banner-module .banner-cards .one-banner.full .box-middle p a:link,
    .module-banner-wrap .banner-module .banner-cards .one-banner.full .box-middle p a:visited {
        color: #000F1A;
        border-bottom: 2px solid white;
    }

    .module-banner-wrap .banner-module .banner-cards .one-banner.full .box-middle p a:hover {
        color: #000F1A;
    }

.module-banner-wrap .banner-module .banner-cards .one-banner.full h4 {
    font-size: 1.75rem;
    color: white;
}

    .module-banner-wrap .banner-module .banner-cards .one-banner.full h4 span.overtitle {
        font-size: 1.25rem;
        font-weight: 700;
        color: #002D4D;
    }

    .module-banner-wrap .banner-module .banner-cards .one-banner.full h4 a:link,
    .module-banner-wrap .banner-module .banner-cards .one-banner.full h4 a:visited {
        color: white;
        border: none;
    }

    .module-banner-wrap .banner-module .banner-cards .one-banner.full h4 a:hover {
        color: #000F1A;
    }

.module-banner-wrap .banner-module .banner-cards .one-banner.full .readmorelink {
    margin: 0;
    margin-top: 1em;
    line-height: 1.875;
}

    .module-banner-wrap .banner-module .banner-cards .one-banner.full .readmorelink img {
        vertical-align: top;
    }

    .module-banner-wrap .banner-module .banner-cards .one-banner.full .readmorelink a:link,
    .module-banner-wrap .banner-module .banner-cards .one-banner.full .readmorelink a:visited {
        border: none !important;
    }

    .module-banner-wrap .banner-module .banner-cards .one-banner.full .readmorelink a:hover {
        color: white;
        border: none;
    }

.module-banner-wrap .banner-module .banner-cards .one-banner.full .last-switch {
    order: 3;
}

@media screen and (min-width: 60.1em) {
    .module-banner-wrap .banner-module .banner-cards .one-banner.full .last-switch {
        order: 4;
    }
}

.module-banner-wrap .banner-module .banner-cards .one-banner.full .switch-last {
    order: 4;
}

@media screen and (min-width: 60.1em) {
    .module-banner-wrap .banner-module .banner-cards .one-banner.full .switch-last {
        order: 3;
    }
}

.module-banner-wrap .banner-module .banner-cards .one-banner .orange {
    background-color: #0f63a9;
    flex: 0 0 6px;
    height: 4em;
}

.module-banner-wrap .banner-module .banner-cards .one-banner .navy {
    background-color: #003C66;
    flex: 0 0 6px;
    height: 4em;
}

.module-banner-wrap .banner-module .banner-cards .one-banner .azure {
    background-color: #0f63a9;
    flex: 0 0 6px;
    height: 4em;
}

.module-banner-wrap .banner-module .banner-cards .one-banner .text {
    padding: 1em;
    flex: 1 1 auto;
}

@media screen and (min-width: 44.1em) {
    .module-banner-wrap .banner-module .banner-cards .one-banner .text {
        padding: 2.5em 2em;
    }
}

.module-banner-wrap .banner-module .banner-cards .one-banner .icon {
    aspect-ratio: 1 / 1;
    width: 140px;
    display: grid;
    align-content: center;
    flex-shrink: 0;
    padding: 30px;
    border-radius: 70px;
    background: #F6F6F6;
    margin-right: 1em;
}

.module-banner-wrap .banner-module .banner-cards .one-banner:hover {
    box-shadow: 0px 0px 20px 15px rgba(220, 220, 220, 0.6);
}

.module-banner-wrap .banner-module .banner-cards .one-banner .card-link::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.module-routes-wrap {
    display: grid;
    grid-template-columns: 1fr minmax(auto, 60.1em) 1fr;
}

    .module-routes-wrap .flank.routes-graphic {
        background-image: url(./assets/images/graphic-routes.svg);
        background-repeat: no-repeat;
        background-position: top right;
        background-size: cover;
    }

@media screen and (min-width: 1800px) {
    .module-routes-wrap .flank.routes-graphic {
        background-position: top left;
        background-size: contain;
    }
}

.module-routes-wrap .routes-module {
    padding: 2vh 2em 4vh;
}

    .module-routes-wrap .routes-module .route-cards {
        display: flex;
        flex-direction: column;
    }

@media screen and (min-width: 44.1em) {
    .module-routes-wrap .routes-module .route-cards {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media screen and (min-width: 80.1em) {
    .module-routes-wrap .routes-module .route-cards {
        flex-wrap: nowrap;
    }
}

.module-routes-wrap .routes-module .route-cards .one-route {
    position: relative;
    flex: 0 1 26%;
    margin: 1vw 1.5vw;
    background: #FFFFFF;
    box-shadow: 0px 0px 20px 10px rgba(220, 220, 220, 0.5);
    border-radius: 20px;
    padding: 2em 2em 0;
    transition: all ease-in-out 0.2s;
}

    .module-routes-wrap .routes-module .route-cards .one-route:hover {
        box-shadow: 2px 2px 20px 20px rgba(220, 220, 220, 0.7);
    }

    .module-routes-wrap .routes-module .route-cards .one-route .card-link::before {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/*
 * All route links
 */
@media screen and (max-width: 44.1em) {
    .ostale-linije {
        border-top: 1px solid #F0F0F0;
    }
}

.ostale-linije h2 {
    font-size: 1em;
}

.ostale-linije ul.routes-small-nav {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    grid-gap: 0.5rem;
    font-weight: 600;
    list-style: none;
    font-size: 0.875em;
    padding: 0;
}

    .ostale-linije ul.routes-small-nav .one-route-number {
        color: #FFFFFF;
        display: flex;
        width: 48px;
        height: 48px;
        padding: 8px 15px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 80px;
        border: 2px solid rgba(19, 99, 163, 0.15);
        background: #1363A3;
        box-shadow: 0px 0px 0px 4px #FFF inset;
    }

    .ostale-linije ul.routes-small-nav .current-route .one-route-number {
        background-color: #0f63a9;
        color: rgba(255, 255, 255, 0.9);
    }

    .ostale-linije ul.routes-small-nav.prigradske-small-nav {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }

        .ostale-linije ul.routes-small-nav.prigradske-small-nav .current-route .one-route-number {
            background-color: #0f63a9;
            color: rgba(255, 255, 255, 0.9);
        }

.module-contact-wrap {
    display: grid;
    grid-template-columns: minmax(auto, 80em);
    justify-content: center;
    padding: 4em 0 4em 0;
}

    .module-contact-wrap h2 {
        margin-bottom: 1em !important;
    }

    .module-contact-wrap .halves {
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
    }

@media screen and (min-width: 44.1em) {
    .module-contact-wrap .halves {
        grid-template-columns: 2fr 3fr;
    }
}

.module-contact-wrap .contact-list-wrap .one-contact {
    display: grid;
    grid-template-columns: minmax(52px, 64px) minmax(200px, 100%);
    padding: 1em 0;
    align-items: center;
    justify-items: start;
    gap: 0.75em;
}

    .module-contact-wrap .contact-list-wrap .one-contact .c-icon {
        border-radius: 40px;
        background: #F6F6F6;
        align-content: center;
        display: flex;
        width: 40px;
        height: 40px;
        padding: 4px 2px;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .module-contact-wrap .contact-list-wrap .one-contact .c-content {
        font-weight: 600;
    }

        .module-contact-wrap .contact-list-wrap .one-contact .c-content .label {
            font-weight: 400;
        }

.module-contact-wrap .faq-list-wrap {
    background: #FFFFFF;
    /*box-shadow: 0 0 55px 11px rgba(220, 220, 220, 0.5);*/
    /*border-radius: 14px;*/
    /*padding: 2em;*/
    margin-left: 6em;
}

@media screen and (min-width: 44.1em) {
    .module-contact-wrap .faq-list-wrap {
        /*margin-top: unset;*/
        /*padding: 2em 3em;*/
    }
}

.module-contact-wrap .faq-list-wrap h3 {
    font-size: 1.375rem;
    margin-top: 0;
}

.module-contact-wrap .faq-list-wrap .faq-list {
    padding-left: 0;
}

    .module-contact-wrap .faq-list-wrap .faq-list li {
        margin: 0.75em 0;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
        padding-bottom: 16px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        align-self: stretch;
        border-bottom: 1px solid #EEE;
    }

        .module-contact-wrap .faq-list-wrap .faq-list li::marker {
            color: #1363A3;
        }

    .module-contact-wrap .faq-list-wrap .faq-list a {
        border: none;
        color: #1363A3 !important;
    }

.izvanredniVozniWrap {
    background-color: #F0F0F0;
    border-radius: 1em;
    padding: calc(1em + 2svh) calc(0.5em + 2svw);
}

    .izvanredniVozniWrap li {
        margin: 1em;
    }

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
    display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
    margin-bottom: 1.5em;
    max-width: 100%;
}

    .wp-caption img[class*=wp-image-] {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .wp-caption .wp-caption-text {
        margin: 0.8075em 0;
    }

.wp-caption-text {
    text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
    margin-bottom: 1.5em;
    display: grid;
    grid-gap: 1.5em;
}

.gallery-item {
    display: inline-block;
    text-align: center;
    width: 100%;
}

.gallery-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
    grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
    grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
    grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
    grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
    grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
    display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/
/* Jetpack infinite scroll
--------------------------------------------- */
/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
    display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
    display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/
/* Accessibility
--------------------------------------------- */
/* Text meant only for screen readers. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

    .screen-reader-text:focus {
        background-color: #f1f1f1;
        border-radius: 3px;
        box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
        clip: auto !important;
        clip-path: none;
        color: #0D5085;
        display: block;
        font-size: 0.875rem;
        font-weight: 700;
        height: auto;
        left: 5px;
        line-height: normal;
        padding: 15px 23px 14px;
        text-decoration: none;
        top: 5px;
        width: auto;
        z-index: 100000;
    }

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
    outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {
    /*rtl:ignore*/
    float: left;
    /*rtl:ignore*/
    margin-right: 1.5em;
    margin-bottom: 1.5em;
}

.alignright {
    /*rtl:ignore*/
    float: right;
    /*rtl:ignore*/
    margin-left: 1.5em;
    margin-bottom: 1.5em;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5em;
}

@media (max-width: 704px) {
    .responsive-hidden-sm {
        display: none !important;
    }
}

html, body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
}

.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

.site-footer {
    flex-shrink: 0;
}

.rectangle-32 {
    width: 100%;
    background: #F6F6F6;
    padding: 5em 5em 0;
    display: flex;
    justify-content: center; /* horizontal centering */
    align-items: center; /* vertical centering */
    text-align: center; /* center multiline text */
}

.rectangle-32-bus-stops {
    width: 100%;
    padding: 5em 5em 0;
    display: flex;
    justify-content: center; /* horizontal centering */
    align-items: center; /* vertical centering */
    text-align: center; /* center multiline text */
}

.header-margin-top-80 {
    margin-top: -80px;
}

.entry-title {
    color: #FFFFFF;
}

.content-title-area {
    grid-column: 2;
    justify-items: center;
    text-align: center;
}

.header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

/*.header-background {
    flex: 1;
    height: 100%;
    background-image: url('/assets/images/symbol.png');*/ /* Path to your image */
    /*background-size: contain;*/ /* Adjust to fit the image */
    /*background-repeat: no-repeat;
    background-position: right center;*/ /* Position the image on the right */
/*}*/


.site-header {
    background: #1363A3;
    height: 240px;
    grid-area: header;
    display: grid;
    grid-template-columns: 1fr minmax(auto, 80em) 1fr;
}

@media screen and (min-width: 1024px) {
    .site-header {
        background: #1363A3 url(/assets/images/symbol.png) no-repeat;
        background-position: calc(56% + 10%) 0px;
        background-size: contain;
    }
}

.module-news-wrap {
    background: #F6F6F6;
    padding: 3em 0 3em 0;
}

.button-link {
    margin-top: 3em;
}

.button-link a {
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 40px;
    background: #F4F5F6;
}

@media screen and (max-width: 600px) {
    .graphics-area.has-cover {
        display: none !important;
    }
}
.hero-section {
    text-align: center;
    padding: 5em 1em;
    z-index: 1;
    /*background-color: #f5f7fa;*/
}

.hero-section h1 {
    color: #0f63a9;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1em;
}

.hero-section .hero-icon {
    margin: -13em auto 1em;
    width: 86px;
    height: 86px;
    border-radius: 43px;
    background: #f5f7fa url('../icons/gradske-linije-content-icon.png') no-repeat center center;
}

.hero-section p {
    font-size: 1.125rem;
    color: #333;
    margin: 0 auto 1.5em;
    max-width: 40em;
}

.hero-section .hero-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}

.hero-section .hero-buttons a {
    background-color: white;
    color: #0f63a9;
    border: 1px solid #0f63a9;
    padding: 0.75em 1.5em;
    border-radius: 2em;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.hero-section .hero-buttons a:hover {
    background-color: #0f63a9;
    color: white;
}

@media screen and (min-width: 600px) {
    .hero-section .hero-buttons {
        flex-direction: row;
        justify-content: center;
    }

    .hero-section h1 {
        font-size: 2.5rem;
    }
}

.route-buttons {
    display: flex;
    justify-content: center;
    gap: 1em;
    margin-top: 2em;
    flex-wrap: wrap;
}

.route-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 16px 24px 16px 16px;
    background-color: white;
    color: #000000 !important;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08);
}

.route-button img {
    width: 1.25em;
    height: 1.25em;
}

.route-button:hover {
    background-color: #0f63a9;
    color: white;
}

.route-button:hover img {
    filter: brightness(0) invert(1); /* makes icon white on hover */
}

@media (max-width: 600px) {
    .footer-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* menu left */
        text-align: left;
    }
    .foot-tagline {
        width: 100%;
        display: flex;
        justify-content: center; /* logo center */
        margin-bottom: 1em;
        padding: 1em 0 1em 0 !important;
    }
    .foot-tagline img {
        margin: 0 auto;
        display: block;
    }
    .footer-menu {
        width: 100%;
    }
}

.bus-stop-number-green
{
    border-radius: 300px;
    border: 10px solid #4D9A31 !important;
    background: #4D9A31 !important;
    box-shadow: 0px 0px 0px 20px #54A038 inset !important;
}

.bus-stop-page-header-green
{
    background: #257118 !important;
}

.bus-stop-header-green
{
    background: #358122 !important;
}

.one-route-number-green
{
    border-radius: 80px;
    border: 2px solid rgba(77, 154, 49, 0.15) !important;
    background: #4D9A31 !important;
    box-shadow: 0px 0px 0px 4px #FFF inset !important;
}

.bus-stop-number-red
{
    border-radius: 300px;
    border: 10px solid #D3343A !important;
    background: #D3343A !important;
    box-shadow: 0px 0px 0px 20px rgba(255, 117, 122, 0.18) inset !important;
}

.one-route-number-red
{
    border-radius: 80px;
    border: 2px solid rgba(211, 52, 58, 0.10) !important;
    background: #D3343A !important;
    box-shadow: 0px 0px 0px 4px #FFF inset; !important
}

.bus-stop-page-header-red
{
    background: #922024 !important;
}

.bus-stop-header-red
{
    background: #AC282D !important;
}

.homepage-header
{
    height: 400px !important;
}

.umb-block-grid__area-container
{
    border-bottom: 1px solid #E9E9E9;
}

.green-line::before {
    background-color: #257118 !important;
}

.red-line::before {
    background-color: #922024 !important;
}

.bus-timeline-red li::before {
    border: 1px solid #922024 !important;
    box-shadow: 0 0 0 2px #922024 !important;
}

.bus-timeline-green li::before {
    border: 1px solid #257118 !important;
    box-shadow: 0 0 0 2px #257118 !important;
}

.bus-timeline-red li:first-child::before, .bus-timeline-red li:last-child::before {
    background-color: #922024 !important;
}

.bus-timeline-green li:first-child::before, .bus-timeline-green li:last-child::before {
    background-color: #257118 !important;
}

.responsive-footer-image {
    display: block;
    max-width: 110em;
    width: 100%;
    height: auto;
    margin: 0 auto;
    object-fit: cover;
}

.bus-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    padding-left: 1em;
}

.bus-timeline li {
    position: relative;
    padding: 1em 1em 2em 0;
    margin-bottom: 0.5em;
}

.bus-timeline li:first-child::before,
.bus-timeline li:last-child::before {
    background-color: #0f63a9;
}

.bus-timeline li::before {
    content: '';
    position: absolute;
    top: 1.2em; /* adjust to vertically center dot */
    left: -10px; /* adjust based on border position */
    width: 12px;
    height: 12px;
    background-color: #ffffff;
    border: 1px solid #0f63a9;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #0f63a9;
}

.bus-timeline li:nth-child(even) {
    background-color: #F6F8FA;
}

#primary-menu > li {
    border-bottom: 1px solid #61B3F5;
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
}

#primary-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

#primary-menu > li {
    width: 100%;
    display: block;
}

.menu-item-has-children > a {
    position: relative;
    padding-left: 2.5em;
}

.footer-menu .menu-item-has-children > a {
    position: relative;
    padding-left: 0em;
}

.nav-linije > a::before {
    background-image: url('/assets/icons/swap_calls_24dp_5F6368_FILL0_wght400_GRAD0_opsz24.png');
}
.nav-karte > a::before {
    background-image: url('/assets/icons/confirmation_number_24dp_5F6368_FILL0_wght400_GRAD0_opsz24.png');
}
.nav-usluge > a::before {
    background-image: url('/assets/icons/znak.png');
}
.nav-kontakt > a::before {
    background-image: url('/assets/icons/contact.png');
}

.menu-item-has-children > a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
}

.pdf-download {
    display: inline-flex;
    align-items: center;
    border: 2px solid #0f63a9;
    border-radius: 8px;
    padding: 1em 1.5em;
    text-decoration: none;
    color: #222;
    font-weight: 500;
    gap: 0.75em;
    transition: background-color 0.2s, border-color 0.2s;
    max-width: 80em;
    width: 100%;
    background-color: #fff;
}

.pdf-download::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('/assets/icons/description_16dp_1765A7_FILL0_wght400_GRAD0_opsz20 1.png') no-repeat center center;
    background-size: contain;
}

.pdf-download:hover {
    background-color: #f0f8ff;
    border-color: #0d5085;
}

.footer-logo-bg {
    background-image: url('/assets/images/footer-atsk-bg.png');
    background-repeat: no-repeat;
    background-position: center left;
    background-size: cover;

    width: 35%; /* Adjust to control how much of the footer is covered */
    min-height: 100%;
}

.site-footer {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
}

.footer-wrap {
    flex: 1;
    padding: 3em;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

@media (max-width: 962px) {
    .footer-logo-bg {
        display: none;
    }
}

.stop-marker {
    font-weight: bold;
    color: #1363A3;
    display: inline-block;
    text-align: left;
    position: relative;
    top: 0.8em;
    left: -3.5em;
}

.z2 {
    color: #f5be51 !important;
}

.z3 {
    color: #4da35f !important;
}

.z4 {
    color: #cb4428 !important;
}

.z5 {
    color: #be5ca9 !important;
}

.z6 {
    color: #989899 !important;
}

.z7 {
    color: #151616 !important;
}

.county-lines {
    background: #f5f7fa url(../icons/zupanijske-linije-content-icon.png) no-repeat center center !important;
}

.inter-county-lines {
    background: #f5f7fa url(../icons/medugradske-linije-content-icon.png) no-repeat center center !important;
}