@font-face {
    font-family: 'CalibriRegular';
    src: url('../font/calibri.eot');
    src: url('../font/calibri.eot') format('embedded-opentype'), url('../font/calibri.woff') format('woff'), url('../font/calibri.ttf') format('truetype'), url('../font/calibri.svg#CalibriRegular') format('svg');
}

@font-face {
    font-family: 'CalibriBold';
    src: url('../font/calibrib.eot');
    src: url('../font/calibrib.eot') format('embedded-opentype'), url('../font/calibrib.woff') format('woff'), url('../font/calibrib.ttf') format('truetype'), url('../font/calibrib.svg#CalibriBold') format('svg');
}

@font-face {
    font-family: 'CalibriItalic';
    src: url('../font/calibrii.eot');
    src: url('../font/calibrii.eot') format('embedded-opentype'), url('../font/calibrii.woff') format('woff'), url('../font/calibrii.ttf') format('truetype'), url('../font/calibrii.svg#CalibriItalic') format('svg');
}

html {
    font-size: 16px;
}

body {
    background: #d7d7d7;
    margin: 0px;
    padding: 0px;
    font-family: CalibriRegular, Calibri, sans-serif;
    font-size: 1rem;
}

.duba_stonska {
    color: #58585A;
    font-size: 0.875rem;
}


.container {
    max-width: 1280px !important;
    padding: 0;
}

.duba_stonska .container {
    max-width: 1000px !important;
    padding: 0;
}



/* Top Header */



.top-header .logo {
    max-height: 110px;
}



nav.navbar {
    padding: 0;
}

nav.navbar a,
.navbar-light .navbar-nav .nav-link {
    color: #58585A;
    font-family: "CalibriRegular", Arial, Helvetica, sans-serif;
    font-size: 1.25rem;
    text-decoration: none;
}

.duba_stonska nav.navbar a {
    text-transform: uppercase;
    color: #58585A;
}

.duba_stonska .navbar-light .navbar-nav .show > .nav-link,
.duba_stonska .navbar-light .navbar-nav .active > .nav-link,
.duba_stonska .navbar-light .navbar-nav .nav-link.show,
.duba_stonska .navbar-light .navbar-nav .nav-link.active {
    color: #00b0e6;
}

.dropdown-toggle::after {
    display: none;
}

.dropdown-menu {
    margin: 0;
    padding: 0;
    border-radius: 0;
    border: 0;
    min-width: 226px;
}

nav.navbar a.dropdown-item {
    padding: 5px !important;
    height: auto;
    color: #ffffff;
    background: #00b0e6;
    font-size: 1rem;
}

    nav.navbar a.dropdown-item:hover,
    nav.navbar a.dropdown-item:active,
    nav.navbar a.dropdown-item:focus,
    nav.navbar a.dropdown-item.active {
        background: #444444 !important;
    }

li.nav-item:hover .dropdown-menu {
    display: block;
}

.dropdown-menu li {
    border-bottom: 1px solid #fff;
}

ul.navbar-nav {
    margin-left: auto;
}

.flags ul {
    display: flex;
    margin: 1rem 0 0 0;
    padding: 0;
    list-style: none;
    justify-content: flex-end;
}

    .flags ul li {
        flex: 0 0 auto;
        max-width: none;
        margin: 0px 5px 0px 0px;
        padding: 0;
        list-style: none;
    }

/* Styles */

h1, h2, h3, h4, h5, h6 {
    font-family: "CalibriBold", Arial, Helvetica, sans-serif;
}

h1 {
    color: #00b0e6;
    font-size: 2rem;
}

h2, h3, h4, h5, h6 {
    color: #444;
}

h2 {
    font-size: 1.6rem;
}

.duba_stonska h2 {
    font-size: 2.3125rem;
    margin: 0;
    padding: 0;
}

h3, .h3 {
    font-size: 1.2rem;
}

.duba_stonska h3 {
    color: #3E3D40;
    font-size: 1.625rem;
    font-family: CalibriRegular, Arial, Helvetica, sans-serif;
    margin: 0 0 20px;
}

.sadrzajProjektLijevo h3 {
    padding-right: 20px;
    color: #00B0E6;
}

h4, h5, h6 {
    font-size: 1rem;
}

a:link, a:visited {
    color: #000;
    text-decoration: underline;
}

a:hover,
a:active,
a:focus {
    color: #00b0e6;
}

.btn-primary {
    color: #fff;
    background-color: #00b0e6;
    border-color: #00b0e6;
}

    .btn-primary:hover {
        color: #fff;
        background-color: #444444;
        border-color: #444444
    }

.with-border {
    border: 1px solid #ccc
}

.bg-blue {
    background: #00B0E6;
}

.bg-green-trans {
    background: rgba(30,76,61,.8);
}

/* Duba Stonska */

.okvir_unutarnji {
    margin-top: 110px;
}

.text-white * {
    color: white !important;
}

.is-absolute.full-img {
    z-index: -1;
}

.footerProjektiPozadina {
    height: 425px;
}


.header-pozadina {
    height: 500px;
}

/* Carousel */


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

.carousel-inner {
    padding-left: 50px;
    padding-right: 50px;
}

/* Carousel base class */
.carousel {
    padding-top: 0;
    min-height: 350px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    bottom: 3rem;
    z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
    height: 100%;
    min-height: 350px;
}


.carousel-indicators {
    bottom: 0;
}

    .carousel-indicators li {
        background-color: #fff;
        cursor: pointer;
        border-radius: 10px;
        border: 1px solid #00B0E6;
        padding: 5px;
        width: 10px;
        height: 10px;
    }

        .carousel-indicators li::before {
            content: "";
            display: block;
            background: #00B0E6;
            width: 10px;
            height: 10px;
            border-radius: 10px;
        }

    .carousel-indicators .active {
        background-color: #ffffff;
    }

.carousel-control-prev, .carousel-control-next {
    width: 70px;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    height: 100px;
    width: 30px;
}

.carousel-control-prev-icon {
    background-image: url(../images/prev.png);
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: 100%;
}

.carousel-control-next-icon {
    background: url(../images/next.png);
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: 100%;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 1600px) {

    .carousel, .carousel-item {
        height: 100%;
    }
}

@media screen and (max-width: 1030px) {

    .carousel, .carousel-item {
        min-height: 50vh;
    }

}

@media screen and (max-width: 800px) {

    .carousel, .carousel-item {
        min-height: 50vh;
    }
}

@media screen and (max-width: 500px) {

    .carousel, .carousel-item {
        min-height: 30vh;
    }
}


/* Carousel */


/* New Map */
/* Image map styles */
.imageMap {
    width: 100%;
    height: auto;
    position: relative;
    margin-bottom: 200px;
}

    .imageMap img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 0;
    }

    .imageMap .hotspots {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        visibility: hidden;
    }

    .imageMap a.Map-Link {
        display: block;
        position: absolute;
        background: url(../images/map-point.png) no-repeat 50% 50%;
        z-index: 1;
        opacity: 1;
        filter: alpha(opacity=100);
        border: 1px solid transparent;
        border-radius: 30px;
        width: 34px;
        height: 34px;
    }
    /* Africa */
    .imageMap a.p1 {
        top: 62.5%;
        left: 53.5%;
    }
    /* America */
    .imageMap a.p2 {
        top: 37.5%;
        left: 30.4%;
    }
    /* Australasia */
    .imageMap a.p3 {
        top: 75%;
        left: 87%;
    }
    /* Europe */
    .imageMap a.p4 {
        top: 43%;
        left: 26%;
    }
    /* MiddleEast */
    .imageMap a.p5 {
        top: 65.5%;
        left: 59.5%;
    }
    /* Russia */
    .imageMap a.p6 {
        top: 14%;
        left: 55%;
    }
    /* SouthEastAsia */
    .imageMap a.p7 {
        top: 58%;
        left: 76%;
    }

    /* Slovenia */
    .imageMap a.p8 {
        top: 61%;
        left: 50.5%;
    }

    .imageMap div.Content-Map-Outer {
        position: absolute;
    }

    .imageMap div.Croatia-Map {
        top: 62.5%;
        left: 53.5%;
    }


    .imageMap div.UK-Map {
        top: 37.5%;
        left: 30.4%;
    }

    .imageMap div.Australasia-Map {
        top: 75%;
        left: 87%;
    }

    .imageMap div.Channel-Map {
        top: 43%;
        left: 26%;
    }

    .imageMap div.Serbia-Map {
        top: 65.5%;
        left: 59.5%;
    }

    .imageMap div.Russia-Map {
        top: 14%;
        left: 55%;
    }

    .imageMap div.SE-Asia-Map {
        top: 58%;
        left: 76%;
    }

    .imageMap div.Slovenia-Map {
        top: 61%;
        left: 50.5%;
    }

    .imageMap a.Map-Link + div.Content-Map {
        position: absolute;
        left: 0;
        top: 0;
        margin-top: 1em;
        width: 300px;
        color: #444;
        display: none;
        background: #fff;
        z-index: 9
    }

    .imageMap div.Croatia-Map div.Content-Map {
        margin-left: -20em
    }


   

    .imageMap div.Australasia-Map div.Content-Map {
        margin-left: -20em
    }

    .imageMap div.Channel-Map div.Content-Map {
        margin-left: -20em
    }

    .imageMap div.Serbia-Map div.Content-Map {
        margin-left: -20em
    }

    .imageMap div.Russia-Map div.Content-Map {
        margin-left: -20em
    }

    .imageMap div.SE-Asia-Map div.Content-Map {
        margin-left: -20em
    }

    .imageMap .hotspots {
        visibility: visible;
    }

    .imageMap p strong {
        display: block;
        padding: 0;
        margin: 0;
        color: #000;
    }

    .imageMap p {
        color: #444;
    }

    .imageMap b {
        display: block;
        position: absolute;
        background: url(../images/map-point.png) no-repeat 50% 50%;
        z-index: 2;
        opacity: 0;
        filter: alpha(opacity=0);
        padding: 1px;
        width: 34px;
        height: 34px;
    }
        /* Africa */
        .imageMap b.b1 {
            top: 67%;
            left: 53.5%;
        }
        /* America */
        .imageMap b.b2 {
            top: 26%;
            left: 21%;
        }
        /* Australasia */
        .imageMap b.b3 {
            top: 75%;
            left: 87%;
        }
        /* Europe */
        .imageMap b.b4 {
            top: 14%;
            left: 44.5%;
        }
        /* MiddleEast */
        .imageMap b.b5 {
            top: 35%;
            left: 60%;
        }
        /* Russia */
        .imageMap b.b6 {
            top: 14%;
            left: 55%;
        }
        /* SouthEastAsia */
        .imageMap b.b7 {
            top: 58%;
            left: 76%;
        }

    .imageMap .hotspots div:hover b {
        width: 34px;
        padding: 0;
    }

    .imageMap .hotspots div:hover div.Content-Map {
        display: block;
    }

    .imageMap .hotspots div:hover a.Map-Link {
        background: url(../images/map-point.png) no-repeat 50% 50%;
        z-index: 3;
        opacity: 0.5;
        filter: alpha(opacity=50);
        border: 3px solid #212121;
    }


/* New Map */

/* Media */

@media (min-width: 1100px) {
    

    .show-mobile {
        display: none
    }
}
@media (max-width: 1099px) {
    .show-desktop {
        display: none
    }

    
}

    @media (max-width: 768px) {
        .navigation-links {
            position: absolute;
            top: 0;
            right: 0;
        }

        .navbar-light .navbar-toggler {
            position: absolute;
            top: 10px;
            right: 0;
            background: #00b0e6;
            color: #fff;
        }

        nav.navbar {
            padding-top: 60px;
        }

        .navbar-collapse, ul.navbar-nav {
            background: #444444;
            text-align: center;
        }

            ul.navbar-nav li {
                border-bottom: 1px solid #fff;
            }

        .navbar-nav .nav-link {
            padding: .5rem 1rem;
            color: #fff;
        }

        nav.navbar a, .navbar-light .navbar-nav .nav-link {
            color: #fff !important;
        }

        .navbar-nav .dropdown-menu {
            display: block;
            background: #00b0e6 !important;
        }

        nav.navbar a.dropdown-item {
            font-size: 1.25rem;
            padding: .5rem 1rem !important;
            text-align: center;
            background: none !important;
        }
    }