:root {
    --primary-color: #989189;
    --light-color: #fff;
    --dark-color: #1f1f1f;
}
html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}
body {
    overflow-x: hidden;
    background-color:#fff;
}
a,
a:hover {
    text-decoration: none;
}
::selection {
    color: var(--light-color);
    background: var(--primary-color);
}
::-moz-selection {
    color: var(--light-color);
    background: var(--primary-color);
}



/* INFO  **********************************************************/
#info {
    position: fixed;
    z-index: 1002;
    top: 90px;
    padding: 8px;
    background-color: #161616;
    box-shadow: 3px 3px 20px #292929;
    font-family: "Raleway", Arial,"Helvetica Neue", Helvetica, sans-serif;
    color: #fff;
    font-weight: 300;
    font-size: 9px;
    line-height: 10px;
    text-transform: uppercase;
    text-align: center;
}
            #info img {
                width: 36px;
                height: auto;
                margin-bottom: 8px;
            }
            #info p {
                margin-bottom: 0;
            }



/*********************************************************************************************************************/
nav .container-fluid {
    max-width: 1600px;
    padding-right: 10rem;
    padding-left: 10rem;
}
.navbar {
    position: fixed;
    background-color: var(--dark-color);
    width: 100%;
    z-index: 1002;
    box-shadow: 1px 1px 10px rgb(0, 0, 0);
    padding: 1rem 0;
}
        .navbar-collapse {
            margin: 1rem auto;
        }
.logo {
    width: 140px;
    height: 60px;
    transition: filter 0.3s;
}
        .logo:hover {
            filter: invert(40%);
        }
.nav-item a {
    color: var(--light-color);
    font-family: 'Lato', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3.5px;
    transition: color 0.3s;
}
        .nav-item a:hover,
        .nav-item .active {
            color: var(--primary-color);
        }


/* HEADER ********************************************************************************************************************/
header {
    height: 100vh;
    width: 100vw;
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    margin: 16px 0 50px 0;
}
        .parallax-img {
            position: fixed;
            width: 100%;
            height: auto;
            top: 82px;
            left: 0;
        }
.palete-naslov {
    position: absolute;
    top: 30%;
    left: 0%;
    width: 300px;
    left: 8%;
}
        .palete-naslov h1 {
            color: var(--light-color);
            font-family: 'Tangerine', cursive;
            font-weight: 700;    
            font-size: 65px;
            line-height: 60px;
            letter-spacing: -2px;
        }

/* blokovi ********************************************************************************************************************/
#blok-1 {
    margin-bottom: 50px;
    padding: 0 30px;
}
        #blok-1 p,
        .blok-text {
            color: var(--dark-color);
            font-family: 'Lato', sans-serif;
            font-size: 18px;
            line-height: 24px;
            font-weight: 300;
            text-align: center;
        }
                .opis {
                    color: var(--light-color);
                    margin-bottom: 20px;
                    text-transform: lowercase;
                }
                .opis p {
                    margin-bottom: 20px;
                }
                .opis-btn {
                    color: var(--light-color);
                    font-size: 14px;
                    line-height: 22px;
                    font-family: 'Barlow', sans-serif;
                    border: 0.5px solid var(--light-color);
                    border-radius: 0;
                    transition-duration: 0.2s;
                    padding: 8px 28px;
                }
                        .opis-btn:hover {
                            color: var(--light-color);
                            background-color: #2929292d;
                        }
.blok-text {
    position: relative;
    height: 100%;
    width: 100%;
    text-align: center;
}
        .boja-1 {
            background-color: #404855; 
        }
        .boja-2 {
            background-color: #989189;
        }
        .boja-3 {
            background-color: #98a8a7;
        }
        .opis {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .visina {
            height: 240px;
        }
#blok-2 img {
    transition: transform 0.4s, filter 1s;
}
        #blok-2 img:hover {
            transform: scale(1.05);
            filter: brightness(60%);
        }
        .slika, 
        .slika-horizontal {
            overflow: hidden;
            position: relative;
            height: 250px;
        }
                .slika-horizontal {
                    height: auto;
                    width: 100vw;
                }
        .slika img {
            width: auto;
            height: 100%;
        }
                .slika-horizontal img {
                    width: 100%;
                    height: auto;
                }



/* BTT ********************************************************************************************************************/
#btt {
    position: fixed;
    right: 14px;
    bottom: 60px;
    z-index: 1003;
}
.btt-a {
    color: var(--primary-color);
    font-size: 2rem;
    transition: color 0.6s;
}
        .btt-a:hover {
            color: rgb(82, 65, 47);
        }
.btt-hide {
    opacity: 0;
}
.btt-show {
    opacity: 1;
}


/*********************************************************************************************************************/
footer {
    background-color: #fff;
    font-family: "Raleway", Arial,"Helvetica Neue", Helvetica, sans-serif;
    color: #1f1f1f;
    font-weight: 500;
    box-shadow: 3px 3px 10px #828282;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 1px;
    text-align: center;
    padding: 20px 50px;
}
footer p {
    margin-bottom: 0;
}
.copy {
    margin-bottom: 0;
}



/* RESPONSIVE  *****************************************************************************************/
@media (min-width: 360px) {
    header {
        height: 81vh;
    }
            .parallax-img {
                top: 120px;
            }
    .palete-naslov {
        top: 30%;
    }
    .opis-btn {
        font-size: 18px;
        line-height: 24px;
    }
    footer {
        padding: 32px;
    }
}

@media (min-width: 375px) {
    .parallax-img {
        top: 80px;
    }
}

@media (min-width: 400px) {
    .parallax-img {
        width: 120%;
        top: 100px;
        left: -50px;
    }
            .palete-naslov {
                top: 25%;
                left: 16%;
            }
            .palete-naslov h1 {
                font-size: 70px;
                line-height: 65px;
            }
}

@media (min-width: 480px) {
    .parallax-img {
        top: 10px;
        left: -80px;
    }
}



@media (min-width: 768px) {
    #info {
        top: 154px;
        padding: 12px;
        font-size: 11.5px;
        line-height: 12px;
    }
    #info img {
        width: 48px;
        margin-bottom: 12px;
    }
    .navbar {
        padding: 0;
    }           
            nav .container-fluid {
                max-width: 85vw;
                padding: 1rem 0;
            }
            .nav-item {
                margin-right: 0.5rem;
            }
            .nav-item a {
                font-size: 0.7rem;
            }
            .parallax-img {
                top: -238px;
                left: -80px;
            }
                    .palete-naslov {
                        top: 24%;
                        width: 370px;
                    }
                    .palete-naslov h1 {
                        font-size: 100px;
                        line-height: 90px;
                        letter-spacing: -1px;
                    }
    .blok-text {
        font-size: 24px;
        line-height: 30px;
    }
            .slika {
                height: 300px;
            }
            .slika-horizontal {
                width: 25vw;
            }
            .slika img {
                width: 100%;
                height: auto;
            }
            .visina {
                height: 193px;
            }
    footer {
        font-size: 10px;
        line-height: 12px;
    }    
}

@media (min-width: 992px) {
    #info {
        top: 160px;
        padding: 12px;
        font-size: 10px;
        line-height: 12px;
    }
    #info img {
        width: 45px;
    }
    header {
        height: 80vh;
    }
            .parallax-img {
                width: 100%;
                left: 0px;
                top: -300px;
            }
            .palete-naslov {
                top: 26%;
                width: 410px;
            }
            .palete-naslov h1 {
                font-size: 120px;
                line-height: 100px;
            }
    #blok-1 {
        padding: 0 8rem;
    }
            .slika {
                height: 170px;
            }
            .blok-text {
                font-size: 26px;
                line-height: 26px;
            }
            .opis-btn {
                font-size: 18px;
                line-height: 24px;
                letter-spacing: 1px;
            }
            .visina {
                height: 257px;
            }
}




@media (min-width: 1200px) {
    header {
        height: 77vh;
    }
            .parallax-img {
                top: -544px;
            }
    .blok-text {
        font-size: 30px;
        line-height: 30px;
    }
            .opis-btn {
                font-size: 18px;
                line-height: 24px;
                padding: 10px 30px;
            }
            .opis p {
                margin-bottom: 30px;
            }
            .slika {
                height: 208px;
            }
            .visina {
                height: 320px;
            }
    footer {
        padding: 30px 0;
        font-size: 11px;
        line-height: 14px;
    }
    #btt {
        right: 30px;
        bottom: 40px;
    }
}  

@media (min-width: 1366px) {
    header {
        height: 100vh;
        margin: 16px 0 110px 0;
    }
            .parallax-img {
                top: -538px;
            }
    #blok-1 {
        margin-bottom: 110px;
        padding: 0 260px;
    }
    .palete-naslov {
        top: 24%;
        left: 12%;
        width: 510px;
    }
            .palete-naslov h1 {
                font-size: 148px;
                line-height: 122px;
            }
    .slika {
        height: 222px;
    }
    .visina {
        height: 342px;
    }
}

@media (min-width: 1440px) {
    .visina {
        height: 360px;
    }
}



@media (min-width: 1650px) {
    #info {
          top: 176px;
          padding: 12px;
          font-size: 11px;
          line-height: 10px;
    }
    #info img {
          width: 50px;
          margin-bottom: 12px;
    }
    header {
        height: 78vh;
    }
            .parallax-img {
                top: -680px;
            }
            .palete-naslov {
                width: 550px;
                top: 30%;
                left: 10%;
            }
            .palete-naslov h1 {
                font-size: 160px;
                line-height: 130px;
            }
    #blok-1 {
        padding: 0 355px;
    }
            #blok-1 p {
                font-size: 22px;
                line-height: 30px;
            }
            .slika {
                height: 350px;
            }
            .slika img {
                width: auto;
                height: 100%;
            }
            .visina {
                height: 413px;
            }
}

@media (min-width: 1920px) {
    nav .container-fluid {
        max-width: 50vw;
    }
    .nav-item a {
        font-size: 15px;
    }
    .parallax-img {
        top: -900px;
    }
            .palete-naslov {
                width: 1500px;
                top: 30%;
            }
    .visina {
        height: 481px;
    }
}

@media (min-width: 1921px) {
    #info {
          padding: 20px;
          font-size: 12px;
          line-height: 10px;
          top: 196px;
      }
            #info img {
                width: 60px;
                margin-bottom: 20px;
            }
    .parallax-img {
        top: -1330px;
    }
    .slika {
        height: 435px;
    }
    .visina {
        height: 641px;
    }
}