/*Pisave:
        font-family: 'Dancing Script', cursive;
        font-family: 'Roboto Mono', monospace;
*/

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-decoration: none;
    font-family: 'Roboto Thin', 'Gill Sans', sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-image: url("/assets/slike/papyrus.png");
    cursor: default;
}

a {
    text-decoration: none;
    font-family: 'Roboto', 'Gill Sans', 'Trebuchet MS', sans-serif;
}


/*----------VRH----------*/
header {
    background-image: url(../slike/naslovna-slika.jpg);
    background-size: cover;
    background-position: center;
    display: grid;
    height: 33vw;
    min-height: 400px;
}

.grid_vrh {
    display: grid;
    grid-template-columns: 1fr 3fr;
}

#logo_top {
    grid-column: 1/3;
    grid-row: 1;
    padding: 3vw;
}

#logo_top img {
    height: 18vw;
    max-height: 250px;
    min-height: 120px;
}

#nav_hamb {
    display: none;
}

.povezava {
    text-decoration: none;
    font-weight: 600;
    color: rgba(226, 147, 50, 0.7);
    height: 20px;
    text-align: left;
}


/*----------VSEBINA ----------*/
.vsebina {
    padding: 0 15vw;
    display: grid;
    grid-gap: 15px;
}
#vsebina-1 {
    grid-template-columns: repeat(5, 1fr);
}

#vsebina-2 {
    grid-template-columns: repeat(5, 1fr);
}

#vsebina-3 {
    grid-template-columns: repeat(5, 1fr);
}

#vsebina-4 {
    grid-template-columns: repeat(5, 1fr);
}

.besedilo {
    line-height: 20pt;
    text-align: left;
    padding: 0 6vw 10px 6vw;
}

/*---Naslovi---*/
.naslov {
    grid-row: 1;
    grid-column: 1/6;
}

h1 {
    font-family: 'Great Vibes', cursive;
    font-size: 45pt;
    text-align: center;
    padding-bottom: 10px;
}

h2 {
    font-family: 'Great Vibes', cursive;
    font-size: 25pt;
    text-align: center;
    padding-top: 4vh;
}

/*---Črtice ---*/
hr {
    border: #000 1px solid;
}

.hr-naslov {
    max-width: 50%;
    margin: 10px auto;
}

.hr-podnaslov {
    max-width: 30%;
    margin: 10px auto 0 auto;
}

/*---Slike---*/
.slike  {
    overflow: hidden;
    width: 100%;
    height: 100% ;
}

.slike img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s;
}

.slike img:hover {
    transform: scale(1.1);
    cursor: pointer;
}

/*---Gumb ---*/
button.lokacija {
    height: 50px;
    width: 20vw;
    border: none;
    color: white;
    background-color: rgba(236, 173, 58, 0.9);
    border-radius: 4px;
    margin: 2vw 0;
    transition: all 0.3s;
    cursor: pointer;
}

button.lokacija:hover {
    background: rgba(236, 173, 58, 1);
    transform: scale(1.1);
}

/*---------- Vsebina 1----------*/
#opis-kmetije {
    grid-row: 2;
    grid-column: 1/6;
    text-align: center;
    padding: 0 10vw;
}

#hisa {
    grid-row: 3;
    grid-column: 1/3;
}

#okolica {
    grid-row: 3;
    grid-column: 3/6;
}

/*---------- Vsebina 2----------*/
#okusi {
    grid-row: 1;
    grid-column: 1/6;
}

#opis-ponudbe {
    grid-row: 2;
    grid-column: 1/6;
}

#opis-narocilo {
    grid-row: 3;
    grid-column: 1/6;
}

#testenine {
    grid-row: 4/6;
    grid-column: 1/3;
}

#med {
    grid-row: 4/6;
    grid-column: 3/5;
}

#jajca {
    grid-row: 4/5;
    grid-column: 5/6;
}

#testenine-2 {
    grid-row: 5/6;
    grid-column: 5/6;
}

#mesnine {
    grid-row: 6/8;
    grid-column: 1/3;
}

#olje {
    grid-row: 6/8;
    grid-column: 3/4;
}

#gibanica {
    grid-row: 6/8;
    grid-column: 4/6;
}

/*---------- Vsebina 3----------*/
#obcuti {
    grid-row: 1;
    grid-column: 1/6;
}

#opis-TK {
    grid-row: 2/3;
    grid-column: 1/6;
}

#dvorana {
    grid-row: 3/5;
    grid-column: 1/2;
}

#miza {
    grid-row: 3/5;
    grid-column: 3/5;
}

#kvasenica {
    grid-row: 4/5;
    grid-column: 5/6;
}

#narezki {
    grid-row: 3/5;
    grid-column: 2/3;
}

#soba {
    grid-row: 3/4;
    grid-column: 5/6;
}

/*---------- Panorama  ----------*/
#panorama {
    background-image: url('/assets/slike/o-nas/panorama.jpg');
    width: 100%;
    height: 0;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 20.14%; /* (img-height / img-width * container-width) */
    /* (600 / 2978 * 100) */
    margin-top: 30px;
}

/*---------- Vsebina 4----------*/
#spoznaj {
    grid-row: 1;
    grid-column: 1/6;
}

#opis-druzina {
    grid-row: 2/3;
    grid-column: 1/6;
}

#opis-poki {
    grid-row: 3/4;
    grid-column: 1/6;
}

#bik {
    grid-row: 4/6;
    grid-column: 3/4;
}

#poki {
    grid-row: 4/6;
    grid-column: 4/6;
}

#cebele {
    grid-row: 4/6;
    grid-column: 1/3;
}


/*----------MEDIA NASTAVITVE ZA MANJŠE ZASLONE ----------*/
@media screen and (max-width: 800px) {
    h1 {
        font-size: 35pt;
    }

    h2 {
        font-size: 25pt;
    }

    .besedilo {
        padding: 0 5px 5px 5px;
    }

    #opis-kmetije {
        grid-row: 2;
        grid-column: 1/6;
    }

    #hisa {
        grid-row: 3;
        grid-column: 1/6;
    }

    #okolica {
        grid-row: 4;
        grid-column: 1/6;
    }

    #okusi {
        grid-row: 1;
        grid-column: 1/6;
    }

    #opis-ponudbe {
        grid-row: 2;
        grid-column: 1/6;
    }

    #opis-narocilo {
        grid-row: 3;
        grid-column: 1/6;
    }

    #testenine {
        grid-row: 4;
        grid-column: 1/4;
    }

    #med {
        grid-row: 4;
        grid-column: 4/6;
    }

    #jajca {
        grid-row: 5/6;
        grid-column: 1/3;
    }

    #testenine-2 {
        grid-row: 5/6;
        grid-column: 3/6;
    }

    #mesnine {
        grid-row: 6;
        grid-column: 1/6;
    }

    #olje {
        grid-row: 7;
        grid-column: 1/3;
    }

    #gibanica {
        grid-row: 7;
        grid-column: 3/6;
    }

    #obcuti {
        grid-row: 1;
        grid-column: 1/6;
    }

    #opis-TK {
        grid-row: 2/3;
        grid-column: 1/6;
    }

    #miza {
        grid-row: 3;
        grid-column: 1/6;
    }

    #dvorana {
        grid-row: 4;
        grid-column: 1/3;
    }

    #kvasenica {
        grid-row: 4;
        grid-column: 3/6;
    }

    #narezki {
        grid-row: 5;
        grid-column: 4/6;
    }

    #soba {
        grid-row: 5;
        grid-column: 1/4;
    }

    #panorama {
        background-image: url('/assets/slike/o-nas/panorama-2.jpg');
        padding-top: 23.56%; /* (img-height / img-width * container-width) */
        /* (500 / 2122 * 100) */
    }

    #spoznaj {
        grid-row: 1;
        grid-column: 1/6;
    }

    #opis-druzina {
        grid-row: 2/3;
        grid-column: 1/6;
    }

    #opis-poki {
        grid-row: 3/4;
        grid-column: 1/6;
    }

    #poki {
        grid-row: 5;
        grid-column: 3/6;
    }

    #bik {
        grid-row: 5;
        grid-column: 1/3;
    }

    #cebele {
        grid-row: 4;
        grid-column: 1/6;
    }


}@media screen and (max-width: 700px) {
    header {
        background-image: url(../slike/naslovna-slika-majhna.jpg);
    }

    #navigacija {
        display: none;
    }

    #nav_hamb {
        display: block;
    }

    .naslov {
        padding-top: 30px;
    }

    h2 {
        font-size: 20pt;
    }

    h1 {
        font-size: 25pt;
        padding-top: 0;
    }
}


@media screen and (max-width: 550px) {
    .vsebina {
        padding: 0 7vw;
    }
    button.lokacija {
        width: 120px;
    }
    #panorama {
        background-image: url('/assets/slike/o-nas/panorama-3.jpg');
        padding-top: 28.80%; /* (img-height / img-width * container-width) */
        /* (400 / 1389 * 100) */
    }
}
@media screen and (max-width: 500px) {
    button.lokacija {
        font-size: 10pt;
    }
}