@charset "UTF-8";
@import "bootstrap.min.css";
@import "cookie-consent.min.css";

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

    /* gradients */
    --linear-gradient-old-browsers: #3D5D79;
    --linear-gradient-webkit: webkit-linear-gradient(to left, #3D5D79, #EF7F1A);
    --linear-gradient-modern-browsers: linear-gradient(to left, #3D5D79, #EF7F1A);

    /* Termoelektronika
    https://huetone.ardov.me/?palette=N4IgdghgtgpiBcIAOAbCBPA5gJwPYFcwATEAGhAAt8YBnBAbVElgRAGNcVdsz3Pu68eiADEMIgDMAbBIm8REIkQCMEgAzyAHFIgBONgHZ5U5ZoBMuueREBmIgFYiB3fOW6bAI3tT5atTYAWeyNrPzMPAJdQtTMzT181ZQgzOQBdAF9U8gAXXDBaBhB7DXJlP14zcvIbKpAA2uKSkClag1rNWt1yjKA
    https://huetone.ardov.me/?palette=N4IgdghgtgpiBcIAOAbCBPA5gJwPYFcwATEAGhAAt8YBnBAbVElgRAGNcVdsz3Pu68eiADEAMwkAmGBF7ixRNmwCsciSoCcccvIhsA7AGY1YjQEZDAIzkwx%2BsWdk62ANhfKADB7kAOIgBYXLzllF0kfYJ1JCDMvbwBdAF948gAXXDBaBhBPXljvcklIkENi-2LPApAgqv1iiKqNYKSgA
    */
    --color-blue-ultra-light:   #EDF6FF;
    --color-blue-light:         #ADD1F0;
    --color-blue:               #3D5D79;
    --color-blue-dark:          #193b56;
    --color-orange-ultra-light: #FFF2EA;
    --color-orange-light:       #FFDCC5;
    --color-orange:             #FF913B;
    --color-orange-dark:        #EF7F1A;
    --color-white:              #FFFFFF;
    --color-gray-light:         #E3E3E3;
    --color-gray-dark:          #D9D9D9;
    --color-black:              #D9D9D9;
}


@font-face {
    font-family: 'Georama';
    src: url('../fonts/Georama/Georama-VariableFont_wdth,wght.ttf') format('woff2-variations');
    font-weight: 400 900;
    font-stretch: 75% 125%;
    font-style: normal;
    font-display: swap;
}

/* #Accordion
=============================================== */
.accordion-button {
    color: var(--color-blue);
    font-size: 1.2rem;
}
.accordion-button:not(.collapsed) {
    color: #fff;
    background-color: var(--color-blue);
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}
.accordion-button:not(.collapsed) .background-image {
    fill: #fff;
}
body {
    background-color: #F5F5F5;
}
.text-muted {
    color: #636363 !important;
}
.small-text {
    font-size: 0.85rem;
}
.promo-box div{
    padding: 1rem;
}
.orange {
    color: var(--color-orange);
}

.orange-star {
    color: #DDA808;
    font-size: 2rem;
}
/* #Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: Georama, serif;
}
h1 {
    font-size: clamp(1.7rem, 1.3333rem + 0.9167vw, 2.8rem);
}
h2 {
    font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2.3rem);
}

h3 {
    font-size: clamp(1.3rem, 1rem + 0.6vw, 1.9rem);
}

h4 {
    font-size: clamp(1.15rem, 0.95rem + 0.4vw, 1.5rem);
}

h5 {
    font-size: clamp(1.05rem, 0.9rem + 0.25vw, 1.3rem);
}

h6 {
    font-size: clamp(1rem, 0.875rem + 0.15vw, 1.1rem);
}
body {
    font-size: 1.1rem;
}
@media (min-width: 1200px) {
    .extra-large-text {
        font-size: 4rem;
    }
}

.qr-code {
    max-width: 195px;
    background-color: transparent;
}
hr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    height: 0;
    margin: 20px auto;
    width: 100%;
}

@media (min-width: 1200px) {
    .overlap-text {
        padding-left: 20px;
    }
    .overlap-img {
        position: relative;
        float: right;
    }
    .overlap-img::before {
        content: "";
        position: absolute;
        width: 540px;
        height: 540px;
        background-color: var(--color-orange-dark);
        left: 0;
        top: 0;
        z-index: -1;
    }
    .overlap-img img {
        margin-left: 30px;
        margin-top: 30px;
    }
}
/*
.overlap-img img {
    border-radius: 50% 20% / 10% 40%;
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}
*/

ul.two-columns {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}
.inset-border-white-8 {
    outline: 1px solid rgba(237, 237, 237, 0.75);
    outline-offset: -8px;
}
.inset-border-gray-8 {
    outline: 1px solid rgba(150, 150, 150, 0.75);
    outline-offset: -8px;
}

 /* #External link svg icon
=============================================== */
.external-link-icon::after {
    content: url('../img/icons/external-link.svg');
    display:inline-block;
    vertical-align: -5px;
}

 /* #Top boxes
=============================================== */
#top-fluid-box {
    background-color: var(--color-blue);
    background-image: url('../img/common/gears-bg_3.webp');
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: -70px;
    min-height: 210px;
}
.top-fluid-box-content {
    margin-top: 100px;
}

/* #IMAGE STYLES
============================================= */
.bordered-img {
    border: 1px solid var(--color-orange-dark);
    padding: 2px;
    background: #fff;
}
.inset-border-white-5 {
    outline: 1px solid rgba(255, 255, 255, 0.75);
    outline-offset: -5px;
}
.inset-border-white-20 {
    outline: 1px solid rgba(255, 255, 255, 0.75);
    outline-offset: -20px;
}

.border-green {
    border-color: #009966;
    border-top: 2px solid #009966;  ;
}

 /* #Products
=============================================== */
#product-cards .card-title {
    color: #000;
}
#product-cards .card-text {
    font-size: 0.85rem;
}

#products-container h2 {
    font-size: 1.4rem;
}
#products-container .product-spec-title {
    font-size: 1.2rem;
    margin-bottom: 0;
    font-weight: 350;
}
#products-container .kategorija {
    font-style: italic;
    font-size: 1rem;
    margin-bottom: 0.8rem;
}
#products-container p {
    font-size: 0.95rem;
    margin-bottom: 12px;
}
.products-divider {
    margin: -20px 15px 0 0;
    color: rgba(201, 201, 201, 1);
}

 /* #Blockquote
=============================================== */
.blockquote {
    background-color: #F0F0F0;
    font-size: 1rem;
    font-family: 'Playfair Display', "Georgia", "Times New Roman", "Times", serif;
    border-left: 0.5rem solid #687178;
    color: #212121;
    font-style: italic;
    line-height: 1.6;
    padding: 4.6875rem 1.875rem 1.875rem 4.6875rem;
    position: relative;
    width: 100%;
}
.blockquote:before {
    font-size: 6.875rem;
    color: #687178;
    font-family: "Noto Serif", "Georgia", "Times New Roman", "Times", serif;
    content: "“";
    font-size: 5.5rem;
    height: 3.75rem;
    left: 0.9375rem;
    line-height: 1;
    max-width: 3.75rem;
    position: absolute;
    text-align: inherit;
    top: 0.9375rem;
    width: 100%;
}
.blockquote:after {
    content: "";
}
.blockquote-footer {
    background-color: transparent;
    font-size: 90%;
    color: #343a40;
    display: block;
    font-style: normal;
    font-weight: 700;
    margin-top: 1rem;
    padding: 0;
}
.blockquote-footer:before {
    content: "— ";
}

 /* #Buttons
=============================================== */
.button-link:link {
    border: none;
    text-decoration: none;
}
.btn-custom {
    color: #fff;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.75);
    padding: 15px 35px;
    margin: auto 65px auto 0;
}
.btn-custom:hover,
.btn-custom:focus {
    color: #fff;
    background: var(--color-orange-dark);
}
.btn-gold {
    color: #fff;
    background: var(--color-orange-dark);
    border: 1px solid rgba(255, 255, 255, 0.75);
    padding: 1rem 3rem;
    margin-top: 2rem;
}
.btn-gold:hover,
.btn-gold:focus {
    color: #fff;
    background: var(--color-blue-dark);
}
.btn-blue {
    color: #fff;
    background: var(--color-blue-dark);
    border: 1px solid rgba(255, 255, 255, 0.75);
    padding: 1rem 3rem;
    margin-top: 2rem;
}
.btn-blue:hover,
.btn-blue:focus {
    color: #fff;
    background: var(--color-orange-dark);
}
.right-container,
.left-container {
    padding: 15px;
}

@media (min-width: 992px) {
    .right-container {
        width: 50%;
        float: right;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    .left-container {
        width: 50%;
        float: left;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}
 /* #Colors
=============================================== */
.color-orange-dark {
    color: var(--color-orange-dark);
}
.color-white {
    color: var(--color-white);
}
.background-color-white {
    background-color: var(--color-white);
}
.background-color-gray-light {
    background-color: var(--color-gray-light);
}


/* #Navbar
=============================================== */
.navbar {
    background-color: rgba(18, 36, 49, 0.5);
    backdrop-filter: blur(5px);
}
.nav-link {
    font-size: 0.95rem!important;
}
.navbar-brand {
    font-size: 23px;
    margin-top: 5px;
    margin-right: 10px;
    font-family: Playfair Display, serif;
}
.navbar-brand img {
    margin-top: -7px;
}
.nav-link {
    font-size: .95rem
}
.nav-item svg {
    margin-top: -2px;
}
.svg-list svg {
    fill: var(--color-orange-dark);
    margin-right: 10px;
    margin-bottom: 10px;
}
.bulled::before {
    color: #fff;
    font-size: 0.8rem;
    content:"• ";
}
.link-sign::before {
    color: #fff;
    font-size: 1.2rem;
    opacity: 0.5;
    content:"» ";
}
.link-sign:hover {
    text-decoration: none;
}
.dropdown-menu {
    background-color: #595959;
}

/* #Carousel
=============================================== */
#mainCarousel {
    margin-top: -70px;
}
.carousel-caption {
    position: absolute;
    right: 1%;
    bottom: 10%;
    left: 1%;
}
@media (min-width: 992px) {
    .carousel-caption {
        bottom: 35%;
    }
}
#mainCarousel h2 {
    font-size: 2.8rem;
    line-height: 1.2;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
    margin-bottom: 2rem;
}
#mainCarousel p {
    font-size: 1.5rem;
    line-height: 1.3;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
    margin-bottom: 1.3rem;
}


/* #Jumbotron
=============================================== */
.jumbotron {
    color: white;
    background-color: #616A76;
    text-align: left;
}
.jumbotron ul li::marker {
    color: var(--color-orange);
}
.jumbotron-title {
    margin-top: 60px;
    line-height: 1.5;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.25);
    font-size: clamp(2.2rem, 1.6rem + 1.5vw, 4rem);
}
.jumbotron-slogan {
    font-weight: 300;
    padding-bottom: 10px;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.25);
    font-size: clamp(1.5rem, 1.2rem + 0.75vw, 2.4rem);
}

/* X-Small devices (portrait phones, less than 576px)
    No media query for `xs` since this is the default in Bootstrap */
.jumbo-img {
    background-image: url('../img/slider/termoelektronika-banner_768_3.webp');  /* 768 */
    height: 760px;
    margin-top: -95px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.jumbotron .mask {
    background-color: rgba(0, 0, 0, 0.45);
    margin: 0;
    height: 760px;
}
@media (min-width: 576px)  and (max-width: 768px) {
    .jumbo-img {
        background-image: url('../img/slider/termoelektronika-banner_768_3.webp');  /* 768 */
        height: 760px;
    }
    .jumbotron .mask {
        height: 760px;
    }
}
@media (min-width: 769px)  and (max-width: 1024px) {
    .jumbo-img {
        background-image: url('../img/slider/termoelektronika-banner_1024_3.webp');  /* 1024 */
        height: 760px;
    }
    .jumbotron .mask {
        height: 760px;
    }
}
@media (min-width: 1025px)  and (max-width: 1366px) {
    .jumbo-img {
        background-image: url('../img/slider/termoelektronika-banner_1366_3.webp');  /* 1366 */
        height: 840px;
    }
    .jumbotron .mask {
        height: 840px;
    }
}
@media (min-width: 1367px)  and (max-width: 1600px) {
    .jumbo-img {
        background-image: url('../img/slider/termoelektronika-banner_1600_3.webp');  /* 1600 */
        height: 840px;
    }
    .jumbotron .mask {
        height: 840px;
    }
}
@media (min-width: 1601px) and (max-width: 1920px) {
    .jumbo-img {
        background-image: url('../img/slider/termoelektronika-banner_1920_3.webp');  /* 1920 */
        height: 950px;
    }
    .jumbotron .mask {
        height: 950px;
    }
}
@media (min-width: 1921px) {
    .jumbo-img {
        background-image: url('../img/slider/termoelektronika-banner_2560_3.webp'); /* 2560 */
        height: 950px;
    }
    .jumbotron .mask {
        height: 950px;
    }
}

/* #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;
}
/* #Images styles
=============================================== */
.bordered {
    margin: 0;
    position:relative;
    border: 1px solid #FFFFFF;
    background-color: #FFFFFF;
}
figure.masonry-item img {
    margin: 0;
    position:relative;
    border: 5px solid #FFFFFF;
    background-color: #FFFFFF;
    -webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.8);
       -moz-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.8);
            box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.8);
}
.one-edge-shadow {
    -webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.8);
       -moz-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.8);
            box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.8);
}
.inner-shadow img {
   display:block;
}
.inner-shadow {
   display:block;
   position:relative;
}
.inner-shadow::before {
    display:block;
    content:'';
    position:absolute;
    width:100%;
    height:100%;
   -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.5) inset;
      -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.5) inset;
           box-shadow: 0 0 7px rgba(0, 0, 0, 0.5) inset;
}
.caption {
    position: absolute;
    padding: .2em;
    bottom: .5em;
    left: 0;
    right: 0;
    color: white;
    background-color: rgba(0, 0, 0, .4);
    text-align: center;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}

/* #Law services boxes
=============================================== */
.law-service-box {
    text-align: center;
    min-height: 310px;
    border: 1px solid fff;
    color: #fff;
    background: var(--color-blue);
    padding: 30px 15px 15px 15px;
    margin-bottom: 15px;
}
.law-service-box h2 {
    font-size: 1rem;
    line-height: 1.7;
    margin-top: 20px;
}
.law-service-box-svg {
    min-height: 60px;
}

.law-service-box svg {
    fill: var(--color-orange-dark);
}

.qr-code {
    background: #fff;
}

/* Featurettes
=============================================== */
.featurette-divider {
    margin: 20px 0; /* Space out the Bootstrap <hr> more */
}
/* Thin out the marketing headings */
.featurette-heading {
    font-weight: 300;
    line-height: 1;
    letter-spacing: -1px;
}
/* Local video
=============================================== */
.video-container {
    border: 5px solid #FFFFFF;
    background-color: #000;
    line-height: 0;
}
.video-container video{
    border: none;
    width: 100%;
    height: auto;
}
.caption {
    position: absolute;
    padding: 0.2em;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
    background-color: rgba(0, 0, 0, 0.4);
    text-align: center;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
/* Google map
=============================================== */
.map {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    min-height: 550px;
    padding: 3px;
    width: 100%;
    border: 4px solid #EBEBEB;
    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 {
    border-color: #C1C1C1;
}
.gMap-popup{
    background-color: #EAEAEA;
    height: 80px;
    padding:5px;
}

.map_canvas img, .google-maps img, .map img {
    max-width: none;
}
/* EU visibility elements
=============================================== */
#eu-visibility {
    background-color: #fff;
}


/* Footer
=============================================== */
footer {
    position: relative;
    width: 100%;
    height: auto;
    line-height: 2.2;
    margin-top: 0;
    color: #FFF;
    background-color: var(--color-blue);
    background-image: url('../img/common/gears-bg_6.webp');
    background-repeat: no-repeat;
    background-size: cover;
}
footer ul {
    margin-bottom: 0;
}
footer li {
    font-size: 0.9rem;
}
.footer-top-belt {
    padding-top: 15px;
    padding-bottom: 10px;
}
.footer-menu {
    margin: 10px 0;
}
.footer-menu svg {
    margin-bottom: 5px;
}
.footer-menu a {
    width: 40px;
    margin-right: 25px;
}
.footer-bottom-belt {
    font-size: 0.95rem;
    padding-top: 10px;
    background-color: rgba(0, 0, 0, 0.25);
}

@media only screen and (max-width: 600px) {
    .footer-third-col {
        margin-top: -15px;
    }
}

#scrollup {
    background: #B1B1B1;
    width:35px;
    height:35px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    padding: 1px 0 0 9px;
    border: 2px solid #202020;
}
/* #Links
=============================================== */
a:link,
a:visited {
    color: var(--color-orange-dark);
    border: none;
    text-decoration: none;
    border-bottom: 1px dotted var(--color-orange-dark);
    transition: 0.3s;
}
a:hover,
a:active {
    color: var(--color-blue);
    border: none;
    text-decoration: none;
    border-bottom: 1px solid var(--color-blue);
}
/* #Navbar */
.navbar a:link,
.navbar a:visited,
.navbar a:hover,
.navbar a:focus {
    text-decoration: none;
    border: 0;
    transition: 0.3s;
}
.nav-item a:link,
.nav-item a:visited {
    color: #FFF;
    text-decoration: none;
    border: 0;
}
.nav-item a:hover,
.nav-item a:focus {
    color: var(--color-orange-dark) !important;
    text-decoration: none;
    border: 0;
}
.navbar-nav .nav-link {
    color: #FFF !important;
}
.navbar-nav .nav-link.active {
    color: var(--color-orange-dark)!important;
}
/* #Headings */
h2 a:link,
h2 a:visited {
    border-bottom: 1px dotted var(--color-orange-dark);
    transition: 0.3s;
}
h2 a:hover,
h2 a:focus {
    border-bottom: 1px solid var(--color-blue);
}
/* #Footer */
footer a:link,
footer a:visited {
    color: #F2F2F2;
    text-decoration: none;
    border: 0;
    transition: 0.3s;
}
footer a:hover,
footer a:focus {
    color: #FFF;
    border-bottom: 1px solid #FFF;
}
a:focus {
    outline: 1;
}
.one-edge-shadow a {
    border: none;
}