html, body{
    background-color:var(--pozadinska);
    font-family: 'Titillium web', sans-serif;
}
.naslov{
    color: black;
    width: 25%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-bottom: 2.5rem;
    width: fit-content;
}
.usluge-naslov{
    font-size: 3.25rem;
    font-weight: 800;
}
.slika{
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
main{
    padding: 10px 15px;
}
.kont{
    border-bottom: 3px solid rgba(0,0,0,0.8);
    border-radius: 0px;
}
.kont > .tekst{
    font-size: 1.35rem;
}
.uvod{
    margin: 10px 5px;
    padding: 5px;
}
.drum{
    display: grid;
    grid-template-columns: 1fr 2fr;
}
.avio{
    display: grid;
    grid-template-columns: 2fr 1fr;
}
.brod{
    display: grid;
    grid-template-columns: 1fr 2fr;
}
.carina{
    display: grid;
    grid-template-columns: 2fr 1fr;
}
.skladiste{
    display: grid;
    grid-template-columns: 1fr 2fr;
}
.zbirni{
    display: grid;
    grid-template-columns: 2fr 1fr;
}

.tekst{
    display: grid;
    align-self: center;
    text-align: left;
    font-size: 1.75vw;
    padding: 0 10px;
}
.tekst>p{
    padding: 0 50px;
}
.uvod{
    font-size: 2vw;
    padding: 0 10px;
}
h3{
    font-size: 3vw;
    font-weight: 800;
    text-align: center;
}
main img{
    width: 100%;
    margin: 10px 0;
    border-radius: 7.5px;
}
.sd{
    display: grid;
    justify-self: end;
}

#drum-a{
    border-top: 3px solid rgba(0,0,0,0.8);
}
@media (width <=1200px){

    .slika{
        vertical-align: middle;
        /* justify-self: center; */
        padding-top: 17.5%;
        padding-bottom: 17.5%;
    }

}
@media (width <=900px){
    .slika{
        vertical-align: middle;
        justify-self: center;
        padding-top: 5%;
        padding-bottom:5%;
    }
    #naslovni{
        width: 210px;
    }
    .usluge-naslov{
        font-size: 2.5rem;
    }
    .naslov{
        width: fit-content;
    }
    main .tekst{
        font-size: 1.0rem;
    }
    main h3{
        font-size: 1.5rem;
    }
    .tekst>p{
        padding: 0 10px;
    }
   .drum{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
   }
   .avio{
    grid-template-areas: "slika"
    "tekst";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    }
    .avio .tekst{
        display: grid;
        grid-area: tekst;
    }
    .avio .slika{
        display: grid;
        grid-area: slika;
    }

    .brod{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
    }
    .carina{
        grid-template-areas: "slika"
        "tekst";
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
    }
    .carina .tekst{
        display: grid;
        grid-area: tekst;
    }
    .carina .slika{
        display: grid;
        grid-area: slika;
    }
    .skladiste{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
    }       
    .zbirni{
        grid-template-areas: "slika"
        "tekst";
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
    }
    .zbirni .tekst{
        display: grid;
        grid-area: tekst;
    }
    .zbirni .slika{
        display: grid;
        grid-area: slika;
    }
    .tekst{
        text-align: center;
        align-self: start;
        margin: 10px 5px;
    }
    .uvod{
        margin: 10px 5px;
        padding: 5px;
    }
}
@media screen and (min-width:750px) and (max-width:900px){
    
    .tekst>p{
        font-size: 1.35rem;
    }
    .tekst>h3{
        font-size: 1.75rem;
    }
    .slika{
        align-items: center;
    }
}
@media (width <= 700px){
    .tekst>h3{
        font-size: 1.75rem;
    }
}