: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: 195%;
            height: auto;
            top: 16%;
            left: -62%;
        }
.inspiracija-naslov {
    position: absolute;
    top: 74%;
    left: 0%;
    width: 300px;
    left: 8%;
}
        .inspiracija-naslov h1 {
            color: var(--light-color);
            font-family: 'Tangerine', cursive;
            font-weight: 700;    
            font-size: 65px;
            line-height: 60px;
            letter-spacing: -2px;
        }


/* BLOK 1 ********************************************************************************************************************/
.block {
    margin-bottom: 100px;
}

.subtitle {
    color: var(--primary-color);
    font-family: 'Tangerine', cursive;
    font-weight: 400;
    font-size: 56px;
    line-height: 46px;
    letter-spacing: 3.5px;
    margin-bottom: 32px;
    padding: 0 32px;
}
        .text {
            color: var(--dark-color);
            font-family: 'Lato', sans-serif;
            font-weight: 300;
            font-size: 16px;
            line-height: 22px;
            margin-bottom: 32px;
            padding: 0 32px;
        }
        .citat {
            font-style: italic;
            margin-top: 30px;
        }
.block img {
    transition: transform 0.3s;
}
        .block img:hover {
            transform: scale(1.05);
        }

.image-big,
.video-wrap,
.image-small {
    position: relative;
    z-index: 1;
    overflow: hidden;
    height: 300px;
    width: 200px;
}
        .image-small {
            height: 150px;
        }
        .video-wrap {
            height: 200px;
            width: 90vw;
        }
                .wrap1 {
                    margin: -20px 0 -20px 0;
                }
                .wrap2 {
                    margin: 0 auto;
                }
                .img-solo {
                    margin: 0 0 0 60px;
                }
                .img-left {
                    margin: -20px 0 0 20px;
                }
                        .image-small.img-left {
                                margin: 20px 0 0 -60px;
                        }
                        .img-center {
                            margin: 0 auto;
                        }
                        .image-small.img-right {
                            margin: -110px 0 60px 120px;
                        }

                .image-big img,
                .video-wrap video,
                .image-small img {
                    height: auto;
                    width: 100%;
                }

.grid-img {
    margin-bottom: 20px;
}
                

/* BLOK intermission ********************************************************************************************************************/
.section-wide {
    position: relative;
    overflow: hidden;
}

.section-wide .subtitle-wide,
.section-wide .subtitle-wide2 {
    color: var(--light-color);
    font-family: 'Lato', sans-serif;
    font-size: 40px;
    line-height: 45px;
    font-weight: 300;
    position: absolute;
    top: 10%;
    left: 10%;
}
        .section-wide .subtitle-wide2 {
            top: 70%;
            left: 30%;
        }



/* BTT ********************************************************************************************************************/
#btt {
    position: fixed;
    right: 2rem;
    bottom: 6rem;
    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: 76vh; 
    }
    footer {
        padding: 32px;
    }
}

@media (min-width: 375px) {
    .image-small.img-left {
        margin: 20px 0 0 -25px;
    }
    .image-small.img-right {
        margin: -110px 0 60px 140px;
    }
}

@media (min-width: 400px) {
    header {
        height: 80vh;
    }
            .parallax-img {
                width: 260%;
                top: 6%;
                left: -88%;
            }
    .block {
        margin-bottom: 80px;
    }
            .image-big, .image-small {
                height: 430px;
                width: 260px
            }
            .img-left {
                margin: -18px 0 0 10px;
            }
            .image-small {
                width: 265px;
                height: 268px;
            }
                    .image-small.img-left {
                        margin: -60px 0 0 -15px;
                    }
                    .image-small.img-right {
                        margin: -105px 0 60px 105px;
                    }
            .video-wrap {
                height: 280px;
                width: 380px;
            }
            .wrap1 {
                margin: -70px 0 0 45px;
            }
    .section-wide .subtitle-wide2 {
        top: 70%;
        left: 48%;
    }
}

@media (min-width: 480px) {
    .block {
        margin-bottom: 100px;
    }
    .block .container {
        width: 90vw;
    }
    .image-big {
        height: 400px;
        width: 280px;
    }
            .image-small {
                width: 300px;
                height: 210px;
            }
    .video-wrap {
        width: 82vw;
    }
            .wrap1 {
                margin: 10px 0 0 90px;
            }
    .image-small.img-left {
        margin: -25px 0 0 -32px;
    }
    .image-small.img-right {
        margin: -25px 0 60px 105px;
    }
}




@media (min-width: 768px) {
    header {
        margin-bottom: 75px;
    }
            .parallax-img {
                width: 200%;
                top: 0%;
                left: -68%;
            }
    #info {
        top: 154px;
        padding: 12px;
        font-size: 11.5px;
        line-height: 12px;
    }
            #info img {
                width: 48px;
                margin-bottom: 12px;
            }            
    nav .container-fluid {
        max-width: 85vw;
        padding: 1rem 0;
    }
            .nav-item {
                margin-right: 0.5rem;
            }
            .nav-item a {
                font-size: 0.7rem;
            }
    .image-big {
        height: 508px;
        width: 300px;
    }
            .img-solo {
                margin: 130px 0 0 0px;
            }
            .img-left {
                margin: -220px 0 0 10px;
            }
            .video-wrap {
                width: 862px;
                height: 468px;
            }
                    .wrap1 {
                        margin: -210px 0 0 90px;
                    }
}

@media (min-width: 992px) {
    header {
        height: 80vh;
    }
            .parallax-img {
                width: 140%;
                top: -3%;
                left: -30%;
            }
    .block {
        margin-bottom: 150px;
    }
            .img-left {
                margin: -220px 0 0 100px;
            }
            .wrap1 {
                width: 710px;
                height: 400px;
                margin: -232px 0 0 195px;
            }
            .image-small.img-left {
                margin: -90px 0 0 -32px;
            }
}

@media (min-width: 1200px) {
    nav .container-fluid {
        max-width: 1600px;
        padding-right: 10rem;
        padding-left: 10rem
    }
            .logo {
                width: 140px;
                height: 60px;
                transition: filter 0.3s;
            }
            .nav-item a {
                font-size: 0.9rem;
                font-weight: 700;
            }
    header {
        height: 93vh;
    }
            .parallax-img {
                top: -9%;
                left: -34%;
            }
    .block .container {
        width: 70vw;
    }
    .img-left {
        margin: -220px 0 0 78px;
    }
    .section-wide .subtitle-wide, .section-wide .subtitle-wide2 {
        font-size: 50px;
        line-height: 50px;
    }
            .section-wide .subtitle-wide2 {
                top: 80%;
                left: 50%;
            }
    #btt {
        right: 5rem;
        bottom: 10rem;
    }
    footer {
        padding: 30px 0;
        font-size: 11px;
        line-height: 14px;
    }
}

@media (min-width: 1366px) {
    .image-big {
        height: 560px;
        width: 350px;
    }
            .img-left {
                margin: -286px 0 0 78px;
            }
            .wrap1 {
                width: 740px;
                height: 420px;
                margin: -200px 0 0 245px;
            }
            .wrap2 {
                width: 920px;
                height: 490px;
            }

            .image-small.img-left {
                margin: -10px 0 0 -84px;
            }
            .image-small.img-right {
                margin: -150px 0 60px 190px;
            }
}




@media (min-width: 1650px) {
    #info {
          top: 176px;
          padding: 12px;
          font-size: 11px;
          line-height: 10px;
    }
            #info img {
                width: 50px;
                margin-bottom: 12px;
            }
    header {
        margin-bottom: 150px;
    }
    .block {
        margin-bottom: 240px;
    }
    .image-big {
        height: 630px;
        width: 410px;
    }
            .wrap1 {
                width: 860px;
                height: 500px;
                margin: -255px 0 0 355px;
            }
            .wrap2 {
                width: 1105px;
                height: 610px;
            }
            .image-small.img-left {
                margin: -48px 0 0 -84px;
            }
            .image-small.img-right {
                margin: -150px 0 120px 190px;
            }
}

@media (min-width: 1920px) {
    header {
        height: 85vh;
        margin-bottom: 72px;
    }
            .parallax-img {
                width: 125%;
                top: -13%;
                left: -20%;
            }
    .block {
        margin-bottom: 210px;
    }
            .img-left {
                margin: -294px 0 0 78px;
            }
            .img-solo {
                margin: 90px 0 0 0px;
            }
            .wrap1 {
                margin: -258px 0 0 355px;
            }
            .subtitle {
                font-size: 80px;
                line-height: 70px;
            }
            .text {
                font-size: 18px;
                line-height: 28px;
            }
        
}

@media (min-width: 1921px) {
    #info {
          padding: 20px;
          font-size: 12px;
          line-height: 10px;
          top: 196px;
    }
            #info img {
                width: 60px;
                margin-bottom: 20px;
            }
    header {
        margin-bottom: 72px;
    }
            .parallax-img {
                top: -30%;
            }
    .image-small.img-right {
        margin: -150px 0 170px 190px;
    }
    .section-wide .subtitle-wide, .section-wide .subtitle-wide2 {
        font-size: 76px;
        line-height: 80px;
    }

}