@media screen and (max-width: 1530px){
    
   .appear {
  opacity: 0;
  transform: translateY(30%);
  transition: opacity 1s ease-in, transform 1.2s cubic-bezier(.3,0,.23,1.7);
}     
    
    #s1{
    width: 97%;
}

#s1 h1{
    font-size: 3em;
}

#s1 p{
    font-size: 2em;
    width: 50%;
    line-height: 35px;
}
    
#s2{
    grid-template-columns: 10% 40% 40% 10%;
    grid-template-rows: 100px 300px 100px;
    grid-template-areas: 
        ". . . ."
        ". slika1 tekst1 ."
        ". . . . ";
}


#tekst1{
    padding: 5px;
}

    #tekst1 p{
    font-size: 1.5em;
    line-height: 30px;
}
    #s3{
    height: 800px;
    grid-template-columns: 20% 60% 20%;
    grid-template-rows: 100px 400px 100px;
    grid-template-areas: 
        ". . ."
        ". tekst2 ."
        ". . .";
}


#tekst2 h1{
    font-size: 4em;
}

#tekst2 p{
    font-size: 1.7em;
    line-height: 35px;
}
   
    #video h1{
    font-size: 72px;
}

#video p{
    font-size: 38px;
    width: 80%;
    line-height: 50px;
}
    
#s4{
    position: relative;
    width: 100%;
    height: 80vh;
    background-color: black;
    display: grid;
    grid-template-columns: 10% 40% 40% 10%;
    grid-template-rows: 100px 400px 100px;
    grid-template-areas: 
        ". . . ."
        "scroller slika1 tekst1 ."
        ". . . . ";
}
.scroller{
    position: absolute;
    background-image: url(slike/Scroll.png);
    background-size: contain;
    background-position: bottom;
    width: 50px;
    height: 50px;
    bottom: 0;
    right: 10px;
    grid-area: scroller;
}
    

#tekst3 h1{
    font-size: 2.5em;
}

#tekst3 p{
    font-size: 1.5em;
    line-height: 30px;
}
    
#s5{
    height: 100vh;
    grid-template-columns: 10% 40% 40% 10%;
    grid-template-rows: 100px 400px 100px;
    grid-template-areas: 
        ". . . ."
        ". tekst1 slika1 ."
        ". . . . ";
}


#tekst4 p{
    font-size: 1.5em;
}
    #s6{
    width: 100%;
    height: 100vh;
    background-color: black;
    display: grid;
    grid-template-columns: 30% 30% 40%;
    grid-template-rows: 50% 50%;
    grid-template-areas: 
        "slikaK1 slikaK2 tekst5"
        "slikaK3 slikaK4 tekst5"
}

#slikaK1{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#slikaK2{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#slikaK3{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#slikaK4{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
   
}

#tekst5{
    width: 85%;
    padding: 10px 20px 100px 50px;
}

#tekst5 h1{
    font-size: 2.5em;
}

#tekst5 p{
    font-size: 1.5em;
    line-height: 30px;
}
   
    #naslov{
    font-size: 3em;
}

.tekst1{
    font-size: 1.5em;
}

.tekst2{
    font-size: 1.5em;
}

.tekst3{
    font-size: 1.5em;
}
    #navigacija{
    width: 100%;
    height: auto;
    background-color: black;
}
    
.tekstN{
    position: absolute;
    width: 50%;
    height: 250px;
    right: 0;
}

.kon1{
    position: relative;
    width: 100%;
    height: 300px;
    background-image: url(slike/space1.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

.kon1 h1{
    position: absolute;
    font-family: 'Fjalla One', sans-serif;
    font-size: 8em;
    color: white;
    left: 10%;
    line-height: 100px;
}

.kon1 p{
    position: absolute;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    color: white;
    font-size: 2em;
    left: 0;
    line-height: 60px;
}

.kon1 button{
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 20%;
    color: black;
    text-align: center;
    font-size: 1em;
    left: 0;
    bottom: 0;
    padding: 10px;
    cursor: pointer;
    font-family: 'Yanone Kaffeesatz', sans-serif;
}

.kon2{
    position: relative;
    width: 100%;
    height: 300px;
    background-image: url(slike/space2.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

.kon2 h1{
    position: absolute;
    font-family: 'Fjalla One', sans-serif;
    font-size: 8em;
    color: white;
    left: 10%;
    line-height: 100px;
}

.kon2 p{
    position: absolute;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    color: white;
    font-size: 2em;
    left: 0;
    line-height: 60px;
}

.kon2 button{
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 20%;
    color: black;
    text-align: center;
    font-size: 1em;
    left: 0;
    bottom: 0;
    padding: 10px;
    cursor: pointer;
    font-family: 'Yanone Kaffeesatz', sans-serif;
}

.kon3{
    position: relative;
    width: 100%;
    height: 300px;
    background-image: url(slike/space3.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

.kon3 h1{
    position: absolute;
    font-family: 'Fjalla One', sans-serif;
    font-size: 6em;
    color: white;
    left: 10%;
    top: -30px;
    line-height: 120px;
}

.kon3 p{
    position: absolute;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    color: white;
    font-size: 2em;
    left: 0;
    line-height: 60px;
}

.kon3 button{
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 20%;
    color: black;
    text-align: center;
    font-size: 1em;
    left: 0;
    bottom: 0;
    padding: 10px;
    cursor: pointer;
    font-family: 'Yanone Kaffeesatz', sans-serif;
}

.kon4{
    position: relative;
    width: 100%;
    height: 300px;
    background-image: url(slike/space4.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

.kon4 h1{
    position: absolute;
    font-family: 'Fjalla One', sans-serif;
    font-size: 5em;
    color: white;
    left: 10%;
    top: -20px;
    line-height: 120px;
}

.kon4 p{
    position: absolute;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    color: white;
    font-size: 2em;
    left: 0;
    line-height: 60px;
}

.kon4 button{
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 20%;
    color: black;
    text-align: center;
    font-size: 1em;
    left: 0;
    bottom: 0;
    padding: 10px;
    cursor: pointer;
    font-family: 'Yanone Kaffeesatz', sans-serif;
}

}

@media screen and (max-width: 1400px){
#s1{
    background-image: none;
    padding: 0px;
    display: grid;
    grid-template-columns: repeat(2,50%);
    grid-template-rows: 100;
    width: 100%;
    grid-template-areas: 
    "svTekst pravokutna";
}
    
    .svTekst{
        grid-area: svTekst;
        padding: 10px;
    }

    .pravokutna{
        background-image: url(slike/slika1.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
        grid-area: pravokutna;
    }
    
#s1 h1{
    font-size: 3em;
}

#s1 p{
    font-size: 2em;
    width: 100%;
    line-height: 35px;
}
    
#s2{
    height: 60vh;
    grid-template-columns: 5% 45% 45% 5%;
    grid-template-rows: 100px 250px 100px;
    grid-template-areas: 
        ". . . ."
        ". slika1 tekst1 ."
        ". . . . ";
}


#tekst1{
    padding: 5px;
}

    #tekst1 p{
    font-size: 1.5em;
    line-height: 30px;
}
    
#s3{
    height: 800px;
    grid-template-columns: 10% 80% 10%;
    grid-template-rows: 100px 400px 100px;
    grid-template-areas: 
        ". . ."
        ". tekst2 ."
        ". . .";
}


#tekst2 h1{
    font-size: 4em;
}

#tekst2 p{
    font-size: 1.7em;
    line-height: 35px;
}
   
    #video h1{
    font-size: 52px;
}

#video p{
    font-size: 28px;
    width: 80%;
    line-height: 40px;
}
    
#s4{
    grid-template-columns: 5% 45% 45% 5%;
    grid-template-rows: 100px 600px 100px;
    grid-template-areas: 
        ". . . ."
        ". slika1 tekst1 ."
        ". . . . ";
}


#tekst3 h1{
    font-size: 2.5em;
}

#tekst3 p{
    font-size: 1.3em;
    line-height: 25px;
}
    
#s5{
    height: 60vh;
    grid-template-columns: 5% 45% 45% 5%;
    grid-template-rows: 100px 300px 100px;
    grid-template-areas: 
        ". . . ."
        ". tekst1 slika1 ."
        ". . . . ";
}


#tekst4 p{
    font-size: 1.3em;
}
    #s6{
    height: 60vh;
    grid-template-columns: 25% 25% 50%;
    grid-template-rows: 40% 40%;
    grid-template-areas: 
        "slikaK1 slikaK2 tekst5"
        "slikaK3 slikaK4 tekst5"
}

    #tekst5{
    width: 65%;
    height: auto;
    color: white;
    font-size: 1em;
    grid-area: tekst5;
    padding: 30px 100px 100px 100px;
}

#tekst5 h1{
    color: white;
    font-family: 'Fjalla One', sans-serif;
    font-size: 3em;
}

#tekst5 p{
    color: white;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
    line-height: 30px;
    padding-top: 20px;
}
    
#slikaK1{
    background-repeat: no-repeat;
    background-position: center;
}

#slikaK2{
    background-repeat: no-repeat;
    background-position: center;
}

#slikaK3{
    background-repeat: no-repeat;
    background-position: center;
}

#slikaK4{
    background-repeat: no-repeat;
    background-position: center;
   
}
    
    
#s7{
    width: 100%;
    height: 100vh;
    background-color: white;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: 10% 30% 30% 30%;
    grid-template-areas: 
        "naslovD naslovD slikaD"
        "tekstD . slikaD"
        ". tekstD2 slikaD"
        "tekstD3 . slikaD";
}

#tekst5{
    width: 85%;
    font-size: 1em;
    padding: 10px 20px 100px 50px;
}

#tekst5 h1{
    font-size: 2em;
}

#tekst5 p{
    font-size: 1.2em;
    line-height: 25px;
}
   
    #naslov{
    font-size: 2.5em;
}

.tekst1{
    font-size: 1.5em;
}

.tekst2{
    font-size: 1.5em;
}

.tekst3{
    font-size: 1.5em;
}
    #navigacija{
    width: 100%;
    height: auto;
    background-color: black;
}
    
.tekstN{
    position: absolute;
    width: 50%;
    height: 130px;
    right: 0;
}

.kon1{
    position: relative;
    width: 100%;
    height: 150px;
    background-image: url(slike/space1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.kon1 h1{
    position: absolute;
    font-family: 'Fjalla One', sans-serif;
    font-size: 6em;
    color: white;
    top: -50%;
    left: 10%;
    line-height: 150px;
}

.kon1 p{
    position: absolute;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    color: white;
    font-size: 1.5em;
    left: 0;
    line-height: 40px;
}

.kon1 button{
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 20%;
    color: black;
    text-align: center;
    font-size: 1em;
    left: 0;
    bottom: 0;
    padding: 10px;
    cursor: pointer;
    font-family: 'Yanone Kaffeesatz', sans-serif;
}

.kon2{
    position: relative;
    width: 100%;
    height: 150px;
    background-image: url(slike/space2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.kon2 h1{
     position: absolute;
    font-family: 'Fjalla One', sans-serif;
    font-size: 6em;
    color: white;
    top: -60%;
    left: 10%;
    line-height: 200px;
}

.kon2 p{
   position: absolute;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    color: white;
    font-size: 1.5em;
    left: 0;
    line-height: 40px;
}

.kon2 button{
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 20%;
    color: black;
    text-align: center;
    font-size: 1em;
    left: 0;
    bottom: 0;
    padding: 10px;
    cursor: pointer;
    font-family: 'Yanone Kaffeesatz', sans-serif;
}

.kon3{
    position: relative;
    width: 100%;
    height: 150px;
    background-image: url(slike/space3.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.kon3 h1{
   position: absolute;
    font-family: 'Fjalla One', sans-serif;
    font-size: 3em;
    color: white;
    left: 10%;
    line-height: 60px;
}

.kon3 p{
    position: absolute;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    color: white;
    font-size: 1.5em;
    left: 0;
    line-height: 40px;
}

.kon3 button{
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 20%;
    color: black;
    text-align: center;
    font-size: 1em;
    left: 0;
    bottom: 0;
    padding: 10px;
    cursor: pointer;
    font-family: 'Yanone Kaffeesatz', sans-serif;
}

.kon4{
    position: relative;
    width: 100%;
    height: 150px;
    background-image: url(slike/space4.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.kon4 h1{
   position: absolute;
    font-family: 'Fjalla One', sans-serif;
    font-size: 3em;
    color: white;
    left: 10%;
    line-height: 60px;
}

.kon4 p{
    position: absolute;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    color: white;
    font-size: 1.5em;
    left: 0;
    line-height: 40px;
}

.kon4 button{
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 20%;
    color: black;
    text-align: center;
    font-size: 1em;
    left: 0;
    bottom: 0;
    padding: 10px;
    cursor: pointer;
    font-family: 'Yanone Kaffeesatz', sans-serif;
}

}
@media screen and (max-width: 1000px){
    #s1{
    background-image: none;
    padding: 0px;
    display: grid;
    grid-template-columns: repeat(2,50%);
    grid-template-rows: 100;
    width: 100%;
    grid-template-areas: 
    "svTekst pravokutna";
}
.svTekst{
        grid-area: svTekst;
        padding: 10px;
    }
    
.pravokutna{
        background-image: url(slike/slika1.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: right;
        grid-area: pravokutna;
    }

#s1 h1{
    font-size: 2em;
}

#s1 p{
    font-size: 1.5em;
    width: 100%;
    line-height: 30px;
}
    
#s2{
    height: 100vh;
    grid-template-columns: 100%;
    grid-template-rows: 60% 40%;
    grid-template-areas: 
        "slika1"
        "tekst1";
}

    #slika{
    background-image: url(slike/slika2.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    grid-area: slika1;
}

#tekst1{
    margin-top: 20px;
    padding: 5px;
}

    #tekst1 p{
    font-size: 1.5em;
    line-height: 25px;
}
    
#s3{
    height: 700px;
    grid-template-columns: 10% 80% 10%;
    grid-template-rows: 100px 400px 100px;
    grid-template-areas: 
        ". . ."
        ". tekst2 ."
        ". . .";
}


#tekst2 h1{
    font-size: 4em;
}

#tekst2 p{
    font-size: 1.5em;
    line-height: 30px;
}
    

#video h1{
    font-size: 52px;
}

#video p{
    font-size: 32px;
    width: 80%;
    line-height: 40px;
}
    
#s4{
    height: 100vh;
    grid-template-columns: 100%;
    grid-template-rows: 0% 40% 60% 0%;
    grid-template-areas: 
        "."
        "slika1"
        "tekst1"
        ".";
}

#slika1{
    background-image: url(slike/slika3.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    grid-area: slika1;
}
    

    .scroller{
        display: none;
    }
    
#tekst3 h1{
    font-size: 2em;
}

#tekst3 p{
    font-size: 1.5em;
    line-height: 30px;
}
    
#s5{
    height: 60vh;
    grid-template-columns: 100%;
    grid-template-rows: 0% 60% 40% 0%;
    grid-template-areas: 
        "."
        "slika1"
        "tekst1"
        ".";
}
    
#slika2{
    background-image: url(slike/slika4.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    grid-area: slika1;
}


#tekst4 p{
    font-size: 1.5em;
}
    
#s6{
    height: 1600px;
    grid-template-columns: 50% 50%;
    grid-template-rows: 30% 30% 40%;
    grid-template-areas: 
        "slikaK1 slikaK2"
        "slikaK3 slikaK4"
        "tekst5 tekst5";
}

#slikaK1{
    background-repeat: no-repeat;
}

#slikaK2{
    background-repeat: no-repeat;
}

#slikaK3{
    background-repeat: no-repeat;
}

#slikaK4{
    background-repeat: no-repeat;
   
}

#tekst5{
    width: 85%;
    font-size: 1.5em;
    padding: 10px 20px 100px 50px;
}

#tekst5 h1{
    font-size: 2em;
}

#tekst5 p{
    font-size: 1.2em;
    line-height: 30px;
}
    
#s7{
    width: 100%;
    height: 100vh;
    padding: 10px;
    background-color: white;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: 10% 30% 30% 30%;
    grid-template-areas: 
        "naslovD naslovD"
        "tekstD ."
        ". tekstD2"
        "tekstD3 .";
}

#naslov{
    font-size: 2em;
}

.tekst1{
    font-size: 1.5em;
}

.tekst2{
    font-size: 1.5em;
}

.tekst3{
    margin-top: -20px;
    font-size: 1.5em;
}
    
#navigacija{
    width: 100%;
    height: auto;
    background-color: black;
}
    
.tekstN{
    position: absolute;
    width: 50%;
    height: 130px;
    right: 0;
}

.kon1{
    position: relative;
    width: 100%;
    height: 150px;
    background-image: url(slike/space1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.kon1 h1{
    position: absolute;
    font-family: 'Fjalla One', sans-serif;
    font-size: 4em;
    color: white;
    left: 10%;
    line-height: 150px;
}

.kon1 p{
    position: absolute;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    color: white;
    font-size: 1.3em;
    left: 0;
    line-height: 30px;
}

.kon1 button{
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 20%;
    color: black;
    text-align: center;
    font-size: 1em;
    left: 0;
    bottom: 0;
    padding: 10px;
    cursor: pointer;
    font-family: 'Yanone Kaffeesatz', sans-serif;
}

.kon2{
    position: relative;
    width: 100%;
    height: 150px;
    background-image: url(slike/space2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.kon2 h1{
     position: absolute;
    font-family: 'Fjalla One', sans-serif;
    font-size: 4em;
    color: white;
    left: 10%;
    line-height: 150px;
}

.kon2 p{
   position: absolute;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    color: white;
    font-size: 1.3em;
    left: 0;
    line-height: 30px;
}

.kon2 button{
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 20%;
    color: black;
    text-align: center;
    font-size: 1em;
    left: 0;
    bottom: 0;
    padding: 10px;
    cursor: pointer;
    font-family: 'Yanone Kaffeesatz', sans-serif;
}

.kon3{
    position: relative;
    width: 100%;
    height: 150px;
    background-image: url(slike/space3.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.kon3 h1{
   position: absolute;
    font-family: 'Fjalla One', sans-serif;
    font-size: 2em;
    color: white;
    left: 10%;
    line-height: 50px;
}

.kon3 p{
    position: absolute;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    color: white;
    font-size: 1.3em;
    left: 0;
    line-height: 30px;
}

.kon3 button{
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 20%;
    color: black;
    text-align: center;
    font-size: 1em;
    left: 0;
    bottom: 0;
    padding: 10px;
    cursor: pointer;
    font-family: 'Yanone Kaffeesatz', sans-serif;
}

.kon4{
    position: relative;
    width: 100%;
    height: 150px;
    background-image: url(slike/space4.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.kon4 h1{
    position: absolute;
    font-family: 'Fjalla One', sans-serif;
    font-size: 2em;
    color: white;
    left: 10%;
    line-height: 50px;
}

.kon4 p{
    position: absolute;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    color: white;
    font-size: 1.3em;
    left: 0;
    line-height: 30px;
}

.kon4 button{
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 20%;
    color: black;
    text-align: center;
    font-size: 1em;
    left: 0;
    bottom: 0;
    padding: 10px;
    cursor: pointer;
    font-family: 'Yanone Kaffeesatz', sans-serif;
}





}


@media screen and (max-width: 720px){
    
    .logotip{
    width: 20%;
    padding: 10px;
}
    
    #s1{
    background-image: none;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 100%;
    padding: 0px;
}
    
    .pravokutna{
        display: none;
    }
    .svTekst{
        width: 100%;
        padding: 10px;
    }

#s1 h1{
    font-size: 3em;
    color: white;
    text-align: center;
}

#s1 p{
    font-size: 1.5em;
    width: 100%;
    line-height: 25px;
}

    #s2{
    height:auto;
    grid-template-columns: 100%;
    grid-template-rows: 320px 320px;
    grid-template-areas: 
        "slika1"
        "tekst1"
        ".";
}
    .naslov1{
        margin-top: 100px;
    width: 100%;
    height: 120px;
    background-image: url(slike/poz-naslov.jpg);
    background-size: contain;
    text-align: left;
    color: white;
    line-height: 120px;
    font-size: 92px;
    font-family: 'Fjalla One', sans-serif;
    overflow: hidden;
}

#slika{
    background-color: #242424;
    background-position: center;
}
#tekst1{
    grid-area: tekst1;
    background-color: white;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    padding: 5px;
}

#tekst1 p{
    font-size: 1.5em;
    line-height: 30px;
}
   .naslov1{
    font-size: 40px;
} 
    #s3{
    height: 800px;
    grid-template-columns: 100%;
    grid-template-rows: 50px 400px 100px;
    grid-template-areas: 
        "."
        "tekst2"
        ".";
}

#tekst2{
    padding: 10px;
}


#tekst2 p{
    font-size: 1.5em;
    line-height: 30px;
}

#video { 
  height: 600px;
}

#video h1{
    font-size: 52px;
    top: 5%;
}

#video p{
    font-size: 28px;
    top: 25%;
    width: 90%;
    line-height: 30px;
}
    
#s4{
    height: 1100px;
    grid-template-columns: 100%;
    grid-template-rows: 10px 400px 400px 50px;
    grid-template-areas: 
        "."
        "slika1"
        "tekst1"
        "."
        ;
}
    

#tekst3{
    margin-top: -50px;
    padding: 5px;
    width: 90%;
}
 #tekst3 p{
    font-family: 'Yanone Kaffeesatz', sans-serif;
    color: white;
    font-size: 1.5em;
    padding-top: 20px;
    line-height: 30px;
}   


#s5{
    width: 100%;
    height: auto;
    background-color: black;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 20px 120px 350px 20px;
    grid-template-areas: 
        "."
        "tekst1"
        "slika1"
        ".";
}
    
#tekst4{
    grid-area: tekst1;
    padding: 5px;
    width: 90%;
}
    #tekst4 p{
        font-size: 1.5em;
    } 
    

#s6{
    width: 100%;
    height: 1550px;
    background-color: black;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 300px 300px 400px;
    grid-template-areas: 
        "slikaK1 slikaK2"
        "slikaK3 slikaK4"
        "tekst5 tekst5"
}

#slikaK1{
    background-repeat: no-repeat;
}

#slikaK2{
    background-repeat: no-repeat;
}

#slikaK3{
    background-repeat: no-repeat;
}

#slikaK4{
    background-repeat: no-repeat;
}

#tekst5{
    width: 90%;
    height: auto;
    padding: 0px 20px 20px 20px;
}


#tekst5 p{
    font-size: 1.2em;
    line-height: 30px;
}

    #s7{
    width: 100%;
    height: 1500px;
    background-color: white;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 130px 320px 350px 300px 600px;
    grid-template-areas: 
        "naslovD"
        "tekstD"
        "tekstD2"
        "tekstD3"
        "slikaD";
}

#slikaD{
    background-image: url(slike/rocket3.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    grid-area: slikaD;
}

#naslov{
    font-family: 'Fjalla One', sans-serif;
    text-align: center;
    font-size: 3em;
    grid-area: naslovD;
}

.tekst1{
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
    text-align: left;
    grid-area: tekstD;
}

.tekst2{
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
    text-align: left;
    grid-area: tekstD2;
}

.tekst3{
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
    text-align: left;
    grid-area: tekstD3;
}

#navigacija{
    width: 100%;
    height: auto;
    background-color: black;
}
    
    .tekstN{
    position: absolute;
    width: 50%;
        top: 70px;
    height: 120px;
    right: 10px;
}

.kon1{
    position: relative;
    width: 100%;
    height: 200px;
    background-image: url(slike/space1-big.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.kon1 h1{
    position: absolute;
    font-family: 'Fjalla One', sans-serif;
    font-size: 4em;
    color: white;
    top: 15%;
    left: 5%;
    line-height: 50px;
}

.kon1 p{
    position: absolute;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    color: white;
    font-size: 1em;
    left: 0;
    line-height: 20px;
}

.kon1 button{
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 20%;
    color: black;
    text-align: center;
    font-size: 1em;
    left: 0;
    bottom: 10px;
    padding: 5px;
    cursor: pointer;
    font-family: 'Yanone Kaffeesatz', sans-serif;
}

    .kon2{
    position: relative;
    width: 100%;
    height: 200px;
    background-image: url(slike/space2-big.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.kon2 h1{
     position: absolute;
    font-family: 'Fjalla One', sans-serif;
    font-size: 4em;
    color: white;
    top: 5%;
    left: 5%;
    line-height: 150px;
}

.kon2 p{
    position: absolute;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    color: white;
    font-size: 1em;
    left: 0;
    line-height: 20px;
}

.kon2 button{
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 20%;
    color: black;
    text-align: center;
    font-size: 1em;
    left: 0;
    bottom: 10px;
    padding: 5px;
    cursor: pointer;
    font-family: 'Yanone Kaffeesatz', sans-serif;
}
    
.kon3{
    position: relative;
    width: 100%;
    height: 200px;
    background-image: url(slike/space3-big.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.kon3 h1{
    position: absolute;
    font-family: 'Fjalla One', sans-serif;
    font-size: 2em;
    color: white;
    top: 30px;
    left: 10%;
    line-height: 50px;
}

.kon3 p{
    position: absolute;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    color: white;
    font-size: 1em;
    left: 0;
    line-height: 20px;
}

.kon3 button{
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 20%;
    color: black;
    text-align: center;
    font-size: 1em;
    left: 0;
    bottom: 10px;
    padding: 5px;
    cursor: pointer;
    font-family: 'Yanone Kaffeesatz', sans-serif;
}
    
.kon4{
    position: relative;
    width: 100%;
    height: 200px;
    background-image: url(slike/space4-big.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.kon4 h1{
    position: absolute;
    font-family: 'Fjalla One', sans-serif;
    font-size: 2em;
    color: white;
    left: 10%;
    top: 0px;
    line-height: 70px;
}

.kon4 p{
     position: absolute;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    color: white;
    font-size: 1em;
    left: 0;
    line-height: 20px;
}

.kon4 button{
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 20%;
    color: black;
    text-align: center;
    font-size: 1em;
    left: 0;
    bottom: 10px;
    padding: 10px;
    cursor: pointer;
    font-family: 'Yanone Kaffeesatz', sans-serif;
}
   
}