@charset "UTF-8";
@import "bootstrap-5.2.3.css";
@import "cookie-consent.min.css";
@import "../js/photoswipe/dist/photoswipe.css";

:root {
    --magic-number: 0.09719; /* tan(11°)/2 */
    --content-width: 100vw;
    --skew-padding: calc(var(--content-width) * var(--magic-number));

    --black-main-color: #1F1F1F;
    --gray-color: #b0b3b6;
    --color-gray-light: #F2F2F3;
    --orange-color: #FA5705;
    --brown-color: #704732;
    --brown-dark-color: #584D49;
    --brown-dark-color: #110808;
    --footer-color: #E3E3E3;
    --copyright-bg-color: #382D24;
}

/* #LINKS ALL styles
=============================================== */
a:link,
a:visited {
    color: var(--orange-color);
    border: none;
    text-decoration: none;
    border-bottom: 1px dotted var(--brown-dark-color);
}
a:hover,
a:active {
    color: var(--brown-dark-color);
    border: none;
    text-decoration: none;
    border-bottom: 1px solid var(--brown-dark-color);
}
/* #Navbar */
.navbar a:link,
.navbar a:visited,
.navbar a:hover,
.navbar a:focus {
    text-decoration: none;
    border: 0;
}
.nav-item a:link,
.nav-item a:visited {
    color: #ffffff;
    text-decoration: none;
    border: 0;
}
.nav-item a:hover,
.nav-item a:focus {
    color: var(--orange-color);
    text-decoration: none;
    border: 0;
}
.navbar-nav .nav-link {
    color: #ffffff;
}
.navbar-nav .nav-link.active {
    color: var(--orange-color);
}
/* #Footer */
footer a:link,
footer a:visited {
    color: var(--brown-dark-color);
    text-decoration: none;
    border: 0;
}
footer a:hover,
footer a:focus {
    color: var(--orange-color);
    border-bottom: 1px solid var(--orange-color);
}
a:link.logo {
    text-decoration: none;
    border: 0;
}

a:focus {
    outline: 1;
}
.mobile-apps-links a:link {
    text-decoration: none;
    border: 0;
}
a.btn-custom {
    color: #fff;
    text-decoration: none;
    border: none;
}
.link-sign::before {
    color: #1C1C1C;
    font-size: 1.2rem;
    margin-left: 0;
    opacity: 0.5;
    content:"» ";
}
.link-sign:hover {
    text-decoration: none;
}
.bg-dark-trans {
    background-color: rgba(0, 0, 0, 0.35);
}

/* #COMMON styles
=============================================== */
body {
    background-color: var(--brown-dark-color);
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-variation-settings: "wght" 700;
    font-weight: 700;
    color: var(--black-main-color);
    text-align: center;
}
.h1, h1 {
    font-size: calc(1.3rem + 1vw);
}
.h2, h2 {
    font-size: calc(1.1rem + 1.2vw);
}
.lead {
    font-weight: 350;
}
.text-smaller {
    font-size: 0.9rem;
}
.text-smaller li {
    font-size: 0.9rem;
}
.dropdown-menu {
    opacity: 0.85;
}
.bg-gray-light {
    background: var(--color-gray-light);
}
.bordered-brown {
    border: 1px solid var(--brown-dark-color);
    padding: 2px;
}

/* #Buttons
=============================================== */
.btn-custom {
    color: #fff;
    background-color: var(--brown-dark-color);
    padding: 10px 20px;
}
.btn-custom:hover {
    color: #fff;
    background-color: var(--brown-dark-color);
}

/* #Shadow divider
=============================================== */
.shadow-divider {
  margin: 0 auto;
  max-width: calc(50% + 1.5vw);
  position:relative;
}
.shadow-divider-mask {
    overflow:hidden;
    height:20px;
}
.shadow-divider-mask:after {
    content:'';
    display:block;
    margin:-25px auto 0;
    width:100%;
    height:25px;
    border-radius:125px / 12px;
    box-shadow:0 0 8px rgba(66, 66, 66, 0.75);
}
.shadow {
    width: 100px;
    margin: 0 auto;
    height: 100px;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shadow.top {
    box-shadow: 0px -15px 10px -15px #111;
}
.shadow.bottom {
    box-shadow: 0px 15px 10px -15px #111;
}
.shadow.left {
    box-shadow: -15px 0px 10px -15px #111;
}
.shadow.right {
    box-shadow: 15px 0px 10px -15px #111;
}

/* #Navbar
=============================================== */
#navbar-box {
    background-color: var(--brown-dark-color);
}
#navbar-brand {
    margin: 0;
    padding: 0;
}
.nav-link {
    color: #fff;
    font-size: 1.1rem;
}
/* Navbar smart scroll */
.autohide {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
}
.scrolled-down{
    transform:translateY(-100%); transition: all 0.3s ease-in-out;
}
.scrolled-up{
    transform:translateY(0); transition: all 0.3s ease-in-out;
}
.navbar-collapse {
    background-color: var(--brown-dark-color);
    margin-top: 7px;
    padding: 15px;
    border-radius: 0 0 8px 8px;
}
.navbar-toggler-icon {
    color: #fff;
}

/* #Modals
=============================================== */
h1.modal-title {
    font-size: 2rem;
}
.modal-body h2 {
    font-size: 1.4rem;
}

/* #List custom styles
============================================= */
.list-number {
    color: var(--gold-main-color);
    font-size: 3rem;
    text-align: right;
    font-weight: 500;
    min-width: 70px;
}
.list-title {
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    text-align: left;
}
.list-content {
   font-size: 1rem;
}

.list-style li {
    margin-bottom: 10px;
}

/* #BLOBS svg backgrounds
=============================================== */
.blob-green {
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: 55%;
    fill: #7AB53B;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><path fill='%23F5FAEF' d='M71,-20.5C79.1,1.7,63.7,34.1,39.3,51.1C14.9,68.1,-18.5,69.8,-35.8,55.7C-53,41.6,-54.2,11.8,-45.6,-11.2C-36.9,-34.3,-18.5,-50.5,6.5,-52.6C31.5,-54.8,63,-42.7,71,-20.5Z' transform='translate(100 100)'/></svg>");
}
    @media (min-width: 992px) {
        .blob-green {
            background-size: 80%;
        }
    }
.blob-blue {
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: 55%;
    fill: #0099CC;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><path fill='%23E5F9FF' d='M68.1,-19.3C75.7,1.1,60.5,31.8,37,48.2C13.5,64.7,-18.4,66.9,-40.3,51.8C-62.2,36.8,-74.2,4.4,-65.8,-17.2C-57.4,-38.7,-28.7,-49.4,0.8,-49.7C30.3,-49.9,60.6,-39.7,68.1,-19.3Z' transform='translate(100 100)'/></svg>");
}
    @media (min-width: 992px) {
        .blob-blue {
            background-size: 80%;
        }
    }
.blob-purple {
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: 55%;
    fill: #663399;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><path fill='%23F0E8F8' d='M69.7,-24.7C77.8,2.1,63,34.3,41.7,47.5C20.4,60.6,-7.5,54.6,-27.2,39.8C-47,24.9,-58.6,1,-52.7,-22.8C-46.8,-46.6,-23.4,-70.5,3.7,-71.7C30.8,-72.9,61.6,-51.5,69.7,-24.7Z' transform='translate(100 100)'/></svg>");
}
    @media (min-width: 992px) {
        .blob-purple {
            background-size: 75%;
        }
    }
.blob-orange {
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: 55%;
    fill: #EBB000;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><path fill='%23FFF7E0' d='M65.8,-13.6C75.4,8.1,66.5,43.6,45.4,57.8C24.3,72.1,-8.9,65,-31.8,47.5C-54.7,30,-67.3,2,-60.2,-16.1C-53.2,-34.2,-26.6,-42.6,0.8,-42.8C28.1,-43,56.3,-35.2,65.8,-13.6Z' transform='translate(100 100)'/></svg>");
}
    @media (min-width: 992px) {
        .blob-orange {
            background-size: 75%;
        }
    }
.blob-bordo {
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: 55%;
    fill: #CC0033;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><path fill='%23FFEBF0' d='M53.1,-16C60.2,4.3,51.1,31.2,33.2,43.7C15.3,56.3,-11.6,54.6,-33.7,40C-55.8,25.5,-73.2,-2,-66.8,-21.5C-60.4,-40.9,-30.2,-52.4,-3.6,-51.2C23.1,-50.1,46.1,-36.3,53.1,-16Z' transform='translate(100 100)'/></svg>");
}
    @media (min-width: 992px) {
        .blob-bordo {
            background-size: 75%;
        }
    }
.blob-olive {
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: 45%;
    fill: #666633;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><path fill='%23F0F0E0' d='M69.4,-42.3C81.6,-18.8,77.6,11.8,63.3,30.5C49,49.2,24.5,56,0.7,55.6C-23,55.1,-46.1,47.5,-53.9,32.5C-61.8,17.6,-54.4,-4.8,-42.9,-27.9C-31.4,-51,-15.7,-74.8,6.4,-78.5C28.5,-82.3,57.1,-65.9,69.4,-42.3Z' transform='translate(100 100)'/></svg>");
}
    @media (min-width: 992px) {
        .blob-olive {
            background-size: 75%;
        }
    }

/* #Tooltips
=============================================== */
.tooltip-inner {
    min-width: 100px;
    max-width: 300px;
    padding: 7px  10px;
}

/* SCROLL TO TOP
=============================================== */
.btn-gotop {
    position: fixed;
    width: 40px;
    height: 40px;
    bottom: 5px;
    right: 20px;
}

/* #Usluge
=============================================== */
#usluge .description {
    text-align: justify;
}

/* #Brendovi
=============================================== */
#brendovi img {
    border: 1px solid #949494;
    margin-bottom: 20px;
}

/* #MASONRY
=============================================== */
.grid-item {
    margin-bottom: 15px;
}
@media (min-width: 576px) {
    .grid-item {
        width: 24%;
    }
}
@media (min-width: 768px) {
    .grid-item {
        width: 48%;
    }
}
@media (min-width: 992px) {
    .grid-item {
        width: 24%;
    }
}

/* GOOGLE MAP
=============================================== */
.map {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    min-height: 420px;
    padding: 3px;
    width: 100%;
    border: 4px solid #363636;
    transition: border-color .2s linear;
    -moz-transition: border-color .2s linear;
    -webkit-transition: border-color .2s linear;
    -ms-transition: border-color .2s linear;
    -o-transition: border-color .2s linear;
}
.map:hover,
.map:active {
    border-color: #B5B5B5;
}
.gMap-popup{
    background-color: #EAEAEA;
    height: 80px;
    padding:5px;
}

.map_canvas img, .google-maps img, .map img {
    max-width: none;
}

/* #Virtualna setnja
=============================================== */
#virtualna-setnja iframe {
    border: 4px solid #EBEBEB;
}
/* #FOOTER styles
=============================================== */
#podijeli a:link {
    border: none;
    margin-right: 5px;
}
#podijeli .share-title {
    font-size: 1.1rem;
}
@media (min-width: 768px) {
    #podijeli a:link {
        margin-right: 15px;
    }
    #podijeli .share-title {
        font-size: 1.3rem;
    }
}
.sharing-svg svg:hover {
    fill: var(--orange-color);
}


/* #FOOTER styles
=============================================== */
footer {
    color: var(--brown-dark-color);
    background-color: var(--footer-color);
    text-align: left;
    line-height: 1.8;
}
.footer-links {
    line-height: 3;
}

#copyright {
    color: #fff;
    background-color: var(--brown-dark-color);
    font-size: 0.9rem;
}

/* JSSOR slider
=====================================================================  */
.jssor-container {
    position:relative;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
}
#jssor,
#jssor-slides {
    width:1920px;
    height:1080px;
    position:relative;
    top:0px;
    left:0px;
    overflow:hidden;
}
#jssor {
    visibility:hidden;
    margin:0 auto;
}
#jssor-slides {
    cursor:default;
}
.slide-brightness {
    filter: brightness(50%);
}
/* jssor slider loading skin spin css */
.jssorl-009-spin img {
    animation-name: jssorl-009-spin;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes jssorl-009-spin {
    from { transform: rotate(0deg); }

    to { transform: rotate(360deg); }
}
/* jssor Bullet Navigator */
.jssorb064 {position:absolute;bottom:12px;right:24px;}
.jssorb064 .i {position:absolute;cursor:pointer;width:36px;height:36px;}
.jssorb064 .i .b {fill:#000;fill-opacity:.5;stroke:#fff;stroke-width:400;stroke-miterlimit:10;stroke-opacity:0.5;}
.jssorb064 .i:hover .b {fill-opacity:.8;}
.jssorb064 .iav .b {fill:#fff;fill-opacity:1;stroke:#fff;stroke-opacity:.7;stroke-width:2000;}
.jssorb064 .iav:hover .b {fill-opacity:.6;}
.jssorb064 .i.idn {opacity:.3;}
.jssorb064 svg  {position:absolute;top:0;left:0;width:100%;height:100%;}
/* jssor Arrow Navigator */
.jssora051 {display:block;position:absolute;cursor:pointer;}
.jssora051 .a {fill:none;stroke:#fff;stroke-width:360;stroke-miterlimit:10;}
.jssora051:hover {opacity:.8;}
.jssora051.jssora051dn {opacity:.5;}
.jssora051.jssora051ds {opacity:.3;pointer-events:none;}
.jssora051.left {width:55px;height:55px;top:0px;left:25px;}
.jssora051.right {width:55px;height:55px;top:0px;right:25px;}
.jssora051 svg {position:absolute;top:0;left:0;width:100%;height:100%;}
/* jssor slider text captions */
.jssor-caption { /* first mobile styles */
    position: relative;
    margin: 0 auto;
    word-wrap: normal;
    top: 25%;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
    color: #fff;
    text-align: center;
    line-height: 1.5;
    font-weight: 700;
    font-size: clamp(3rem, 1.818rem + 1.818vw, 4rem);
    width: 95vw;
}
    /* Large devices (desktops, 992px and up) */
    @media (min-width: 992px) {
        .jssor-caption {
            margin: 0 auto;
            word-wrap: normal;
            width: 65vw;
        }
    }
.center-caption {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* #PARALLAX
============================================= */
#kontakt h2,
#kontakt p {
    color: #fff;
}
#kontakt .parallax-box {
    z-index: 10;
    padding-top: 40px;
    padding-bottom: 50px;
    overflow: hidden;
    position: relative;
    width: 100%;
    background-image: url('../img/parallax/marrh-nekretnine-parallax-1.webp');
    background-attachment: fixed;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
#kontakt a:link,
#kontakt a:visited {
    color: var(--orange-color);
}
#kontakt a:hover,
#kontakta:focus {
    color: #fff;
}