body {
    background-color: black;
    margin: 0;
    padding: 0;
}

strong {
    font-style: italic;
}

#small,
#history1,
#history2,
#history3,
#back,
#next,
#position,
#work1, 
#work2,
#work3 {
    font-size: 1.75vw;
}

#small {
    color: white;
}

#o_nas,
#zgodovina,
#glasba,
#kontakt {
    padding: 0;
    margin: 0;
    opacity: 0;
}

/* navbar */

.navbar {
    display: inline-flex;
    justify-content: flex-end;
    width: 99.9vw;
    background-color: black;
    border: 0.1vw solid orange;
    position: fixed;
    z-index: 2;
    padding: 0;
    margin: 0;
}

.menu {
    display: inline-flex;
    margin-left: 1vw;
    margin-right: 1vw;
    margin-top: 0.5vw;
    margin-bottom: 0.5vw;
}

#top-logo {
    position: absolute;
    height: 6vw;
    width: 6vw;
    margin-top: 0.8vw;
    margin-left: 0.5vw;
    position: fixed;
    z-index: 3;
}

h4 {
    color: white;
    font-size: 1.6vw;
    letter-spacing: 0.1vw;
}

a {
    text-decoration: none;
    color: white;
}

a:hover {
    color: orange;
}

h4:hover {
    color: orange;
}

#language {
    padding-right: 2vw;
}

/* /navbar */

/* vsebina 1 */

#intro {
    width: 95vw;
    padding-left: 1vw;
    padding-right: 1vw;
    padding-top: 5vw;
}


p {
    color: white;
    font-size: 2vw;
}

.intro {
    display: inline-flex;
}

#pro {
    width: 42vw;
    height: 50vw;
    padding-top: 8vw;
    padding-left: 3vw;
}

.uvod {
    padding-left: 5vw;
    width: 40vw;
    padding-top: 3vw;
}


/* /vsebina 1 */

/* gallery */

h2 {
    color: white;
    text-align: center;
    font-size: 3.5vw;
    border: 0.1vw solid orange;
    padding: 2vw;
}

#toSmoMi {
    text-align: center;
    padding-right: 10vw;
    padding-left: 10vw;
    padding-top: 0;
    font-size: 5vw;
    font-style: italic;
}

#besedilo {
    text-align: left;
    padding-right: 25vw;
    padding-left: 25vw;
    font-size: 2vw;
    letter-spacing: 0.1vw;
}

.gallery {
    display: inline-block;
    text-align: center;
}

.portret {
    display: inline-block;
    position: relative;
    width: 24%;
    padding: 0;
}

#filip,
#simon,
#andrej,
#jernej {
    width: 100%;
}


.hover {
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.6);
    color: white;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    cursor: pointer;
    border: 0.2vw solid black;
}

.hover:hover {
    opacity: 1;
}

.quote {
    text-align: left;
    font-size: 2.5vw;
    padding-left: 2.2vw;
    padding-right: 0.5vw;
}


/* /gallery */

/* zgodovina */

.zgo1 {
    display: inline-flex;
}

#prvi {
    width: 65vw;
    height: 60vw;
    padding-right: 4vw;
    padding-top: 0.2vw;
}

#z1 {
    width: 25vw;
    padding-right: 1vw;
    padding-top: 10vw;
}

#next:hover,
#back:hover,
#nazaj:hover,
#naprej:hover {
    cursor: pointer;
    color: orange;
}

#zgo2 {
    display: none;
}

#back {
    display: none;
}

/* /zgodovina */


/* delo */

.delo {
    display: inline-flex;
}

#park {
    width: 65vw;
    height: 40vw;
    padding-top: 12vw;
}

.work {
    width: 25vw;
    padding-left: 5vw;
    padding-top: 11vw;
}

#seznam:hover {
    color: orange;
}

#delo2 {
    display: none;
}

#nazaj {
    display: none;
}

/* /delo */

/* glasba */

.video {
    display: inline-block;
    position: relative;
    width: 30%;
    height: auto;
}

.posnetek {
    width: 100%;
    height: 18vw;
}
/* /glasba */

/* footer */

.footer {
    background-color: black;
    display: inline-flex;
    justify-content: center;
    width: 100%;
    padding-top: 15vw;
    padding-left: 3vw;
}

.f_item {
    margin-top: 5vw;
    margin-bottom: 15vw;
    margin-left: 7vw;
    margin-right: 7vw;
}


.contact {
    color: white;
    font-size: 2vw;
    text-align: center;
}

.contact:hover {
    color: white;
}

.profile {
    width: 9vw;
    height: 9vw;
    margin-right: 2vw;
    border-radius: 90%;
}

#fb, #yt {
    border: 0.5vw solid black;
}

#fb:hover {
    border: 0.5vw solid blue;
}

#yt:hover {
    border: 0.5vw solid red;
}

#footer_logo {
    margin-top: 5vw;
    width: 12vw;
    height: 12vw;
}

/* /footer */

/* media query */

@media screen and (min-device-width: 120px) and (max-device-width: 850px) {
    .portret {
        width: 38%;
    }

    p,
    li {
        font-size: 3vw;
    }

    .zgo1 {
        display: block;
    }

    #prvi {
        padding-top: 7vw;
        width: 90vw;
        padding-left: 5vw;
    }

    #z1 {
        width: 60vw;
        padding-left: 22vw;
        padding-top: 0;
    }

    #history1,
    #history2,
    #history3,
    #small,
    #back,
    #position,
    #next,
    #work1,
    #work2,
    #work3 {
        font-size: 3vw;
    }

    .delo {
        display: block;
    }

    #park {
        width: 100vw;
        height: 50vw;
        padding-left: 0;
        padding-right: 0;
        padding-top: 12vw;
    }

    .work {
        width: 60vw;
        padding-left: 22vw;
        padding-top: 0.5vw;
    }

    .posnetek {
        height: 45vw;
    }

    .video {
        width: 75%;
        padding-bottom: 2vw;
    }


    h4 {
        font-size: 2.7vw;
    }

    #top-logo {
        height: 9vw;
        width: 9vw;
        margin-top: 0.8vw;
        margin-left: 0.5vw;
    }

    h2 {
        font-size: 4.5vw;
        border: 0.1vw solid orange;
        padding-top: 4vw;
    }

    #back,
    #position,
    #next,
    #nazaj,
    #naprej {
        display: none;
    }

    #zgo2,
    #zgo3 {
        display: flex;
    }

    #delo2 {
        display: block;
    }

    
    .footer {
        display: block;
        text-align: center;
        padding-top: 12vw;
    }
    
    
    .contact {
        color: white;
        font-size: 4vw;
    }
    
    .profile {
        width: 30vw;
        height: 30vw;
    }
    
    #k1,
    #k2 {
        font-size: 4vw;
    }
    #footer_logo {
        display: none;
    }


.intro {
    display: block;
}

#pro {
    width: 80vw;
    height: auto;
    padding-left: 10vw;
}

.uvod {
    padding-left: 0.5vw;
    width: 60vw;
}

}

@media screen and (min-device-width: 851px) {
    .f_item {
        margin-top: 5vw;
        margin-bottom: 15vw;
        margin-left: 6vw;
        margin-right: 6vw;
    }
}