@media screen and (max-width: 1530px){
    
    .tekstBGV{
    height: 280px;
}


#videoN h1{
    font-size: 72px;
    top: -15%;
}

#videoN p{
    font-size: 32px;
    width: 80%;
    line-height: 50px;
}
    
    
#m1{
    height: 180vh;
    }
#m2{
    height: 120vh;
    }
#m3{
    width: 100%;
    height: 500px;
    background-color: white;
    display: grid;
    grid-template-columns: 10% 40% 50%;
    grid-template-rows: 10% 80% 10%;
    grid-template-areas: 
        ". . ."
        ". slikaM5 desnitekstM3"
        ". . .";
}
    
#m4{
    width: 100%;
    height: 500px;
    background-color: white;
    display: grid;
    grid-template-columns: 50% 40% 10%;
    grid-template-rows: 10% 80% 10%;
    grid-template-areas: 
        ". . ."
        "lijevitekstM4 slikaM6 ."
        ". . .";
}
    
#m5{
    width: 100%;
    height: 500px;
    background-color: white;
    display: grid;
    grid-template-columns: 5% 40% 55%;
    grid-template-rows: 10% 80% 10%;
    grid-template-areas: 
        ". . ."
        ". slikaM7 desnitekstM4"
        ". . .";
}
    #m6{
    width: 100%;
    height: 700px;
    background-color: white;
    display: grid;
    grid-template-columns: 10% 40% 40% 10%;
    grid-template-rows: 10% 80% 10%;
    grid-template-areas: 
        ". . . ."
        ". tekstM6 slikaM8 ."
        ". . tekstMO .";
}
    
#m7{
    width: 100%;
    height: 180vh;
    background-color: black;
    color: white;
    display: grid;
    grid-template-rows: 10% 40% 50%;
    grid-template-columns: 10% 80% 10%;
    grid-template-areas: 
        ". . ."
        ". tekstM7 ."
        ". slikaM9 .";
}
    
#m8{
    width: 100%;
    height: 120vh;
    background-color: black;
    display: grid;
    grid-template-columns: 5% 45% 45% 5%;
    grid-template-rows: 10% 80% 10%;
    grid-template-areas: 
        ". . . ."
        ". tekstM8 slikaM10 ."
        ". . . .";
}
    
#m9{
    width: 100%;
    height: 130vh;
    background-color: black;
    color: white;
    display: grid;
    grid-template-columns: 10% 40% 40% 10%;
    grid-template-rows: 30% 70%;
    grid-template-areas: 
        "h1M9 h1M9 h1M9 h1M9"
        ". tekstM9 slikaM11 .";
}
}
@media screen and (max-width: 1400px){
    
    .tekstBGV{
    height: 200px;
}


#videoN h1{
    font-size: 52px;
    top: -15%;
}

#videoN p{
    font-size: 26px;
    width: 95%;
    line-height: 30px;
}
    
    
#m1{
    height: 180vh;
    }
#m2{
    height: 120vh;
    }
#m3{
    width: 100%;
    height: 500px;
    background-color: white;
    display: grid;
    grid-template-columns: 10% 40% 50%;
    grid-template-rows: 10% 80% 10%;
    grid-template-areas: 
        ". . ."
        ". slikaM5 desnitekstM3"
        ". . .";
}
    
#m4{
    width: 100%;
    height: 500px;
    background-color: white;
    display: grid;
    grid-template-columns: 50% 40% 10%;
    grid-template-rows: 10% 80% 10%;
    grid-template-areas: 
        ". . ."
        "lijevitekstM4 slikaM6 ."
        ". . .";
}
    
#m5{
    width: 100%;
    height: 500px;
    background-color: white;
    display: grid;
    grid-template-columns: 5% 40% 55%;
    grid-template-rows: 10% 80% 10%;
    grid-template-areas: 
        ". . ."
        ". slikaM7 desnitekstM4"
        ". . .";
}
    #m6{
    width: 100%;
    height: 700px;
    background-color: white;
    display: grid;
    grid-template-columns: 10% 40% 40% 10%;
    grid-template-rows: 10% 80% 10%;
    grid-template-areas: 
        ". . . ."
        ". tekstM6 slikaM8 ."
        ". . tekstMO .";
}
    
#m7{
    width: 100%;
    height: 180vh;
    background-color: black;
    color: white;
    display: grid;
    grid-template-rows: 10% 40% 50%;
    grid-template-columns: 10% 80% 10%;
    grid-template-areas: 
        ". . ."
        ". tekstM7 ."
        ". slikaM9 .";
}
    
#m8{
    width: 100%;
    height: 120vh;
    background-color: black;
    display: grid;
    grid-template-columns: 5% 45% 45% 5%;
    grid-template-rows: 10% 80% 10%;
    grid-template-areas: 
        ". . . ."
        ". tekstM8 slikaM10 ."
        ". . . .";
}
    
#m9{
    width: 100%;
    height: 130vh;
    background-color: black;
    color: white;
    display: grid;
    grid-template-columns: 10% 40% 40% 10%;
    grid-template-rows: 30% 70%;
    grid-template-areas: 
        "h1M9 h1M9 h1M9 h1M9"
        ". tekstM9 slikaM11 .";
}
}

@media screen and (max-width: 1000px){
    

.tekstBGV{
    height: 200px;
}


#videoN h1{
    font-size: 42px;
    top: -15%;
}

#videoN p{
    font-size: 26px;
    width: 95%;
    line-height: 30px;
}
    
#m1{
    width: 100%;
    height: 150vh;
    background-color: black;
    color: white;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: 40% 60%;
    grid-template-areas: 
        "slikaM1 slikaM2 slikaM3"
        "tekstM1 tekstM1 tekstM1";
}



.tekstM1{
    padding: 10px;
}

#m2{
    width: 100%;
    height: 210vh;
    background-color: white;
    color: black;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 50% 50%;
    grid-template-areas: 
        "tekstM2" 
        "slikaM4";
}

.tekstM2{
    padding: 10px;
}


#slikaPozFix{
    height: 400px;
}

#slikaPozFix h1{
    font-size: 2em;
    line-height: 50px;
}
    #m3{
    width: 100%;
    height: 1000px;
    background-color: white;
    display: grid;
    grid-template-columns: 5% 90% 5%;
    grid-template-rows: 5% 45% 45% 5%;
    grid-template-areas: 
        ". . ."
        ". slikaM5 ."
        ". desnitekstM3 .";
}
.slikaM5{
    background-position: center;
    
}
    #m4{
    width: 100%;
    height: 1000px;
    background-color: white;
    display: grid;
    grid-template-columns: 5% 90% 5%;
    grid-template-rows: 5% 45% 45% 5%;
    grid-template-areas: 
        ". . ."
        ". slikaM6 ."
        ". lijevitekstM4 .";
}
    #m5{
    width: 100%;
    height: 1100px;
    background-color: white;
    display: grid;
    grid-template-columns: 5% 90% 5%;
    grid-template-rows: 5% 45% 45% 5%;
    grid-template-areas: 
        ". . ."
        ". slikaM7 ."
        ". desnitekstM4 .";
}
#m6{
    width: 100%;
    height: 1000px;
    background-color: white;
    display: grid;
    grid-template-columns: 5% 90% 5%;
    grid-template-rows: 5% 45% 45% 5%;
    grid-template-areas: 
        ". . ."
        ". tekstM6 ."
        ". slikaM8 ."
        ". tekstMO .";
}

#m7{
    width: 100%;
    height: 250vh;
    background-color: black;
    color: white;
    display: grid;
    grid-template-columns: 5% 90% 5%;
    grid-template-rows: 5% 45% 45% 5%;
    grid-template-areas: 
        ". . ."
        ". tekstM7 ."
        ". slikaM9 ."
        ". . .";
}

#m8{
    width: 100%;
    height: 250vh;
    background-color: black;
    display: grid;
    grid-template-columns: 5% 90% 5%;
    grid-template-rows: 5% 45% 45% 5%;
    grid-template-areas: 
        ". . ."
        ". tekstM8 ."
        ". slikaM10 .";
}

#m9{
    width: 100%;
    height: 130vh;
    background-color: black;
    color: white;
    display: grid;
    grid-template-columns: 5% 90% 5%;
    grid-template-rows: 15% 45% 45% 0%;
    grid-template-areas: 
        "h1M9 h1M9 h1M9"
        ". tekstM9 ."
        ". . ."
        ". . .";
}

.tekstM9{
    width: 100%;
    height: 100%;
    grid-area: tekstM9;
}

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

.tekstM9 p{
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
}

.slikaM11{
    grid-area: slikaM11;
    background-image: url(slike/apollo11%20landing.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
    
#m10{
    width: 100%;
    height: 300vh;
    background-color: white;
    display: grid;
    grid-template-columns: 5% 90% 5%;
    grid-template-rows: 25% 5% 25% 5% 25% 5% 20%;
    grid-template-areas: 
        ". slikaM12 ."
        ". opisM12 ."
        ". slikaM13 ."
        ". opisM13 ."
        ". slikaM14 ."
        ". opisM14 .";
}

.slikaM12{
    background-image: url(slike/apollo11-neil2.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    grid-area: slikaM12;
}



.slikaM13{
    background-image: url(slike/apollo11-buzz2.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    grid-area: slikaM13;
}

.slikaM14{
    background-image: url(slike/apollo11-collins2.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    grid-area: slikaM14;
}

.opisM12{
    background-color: black;
    color: white;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
    text-align: center;
    grid-area: opisM12;
}
.opisM13{
    background-color: black;
    color: white;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
    text-align: center;
    grid-area: opisM13;
}
.opisM14{
    background-color: black;
    color: white;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
    text-align: center;
    grid-area: opisM14;
}
}

@media screen and (max-width: 720px){
    
    .logotip{
    width: 20%;
    padding: 15px;
}
    
    

.tekstBGV{
    height: 250px;
}


#videoN h1{
    font-size: 42px;
    top: -15%;
}

#videoN p{
    font-size: 18px;
    width: 95%;
    line-height: 30px;
}
    
#m1{
    width: 100%;
    height: 900px;
    background-color: black;
    color: white;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: 40% 60%;
    grid-template-areas: 
        "slikaM1 slikaM2 slikaM3"
        "tekstM1 tekstM1 tekstM1";
}



.tekstM1{
    padding: 10px;
}

#m2{
    width: 100%;
    height: 1300px;
    background-color: white;
    color: black;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 30% 70%;
    grid-template-areas: 
        "tekstM2" 
        "slikaM4";
}

.tekstM2{
    padding: 10px;
}


#slikaPozFix{
    height: 400px;
}

#slikaPozFix h1{
    font-size: 2em;
    line-height: 50px;
    padding: 10px;
}
#m3{
    width: 100%;
    height: 1000px;
    background-color: white;
    display: grid;
    grid-template-columns: 5% 90% 5%;
    grid-template-rows: 40% 60%;
    grid-template-areas: 
        ". slikaM5 ."
        ". desnitekstM3 .";
}
.slikaM5{
    background-position: center bottom;
    
}
    #m4{
    width: 100%;
    height: 1200px;
    margin-top: -100px;
    background-color: white;
    display: grid;
    grid-template-columns: 5% 90% 5%;
    grid-template-rows: 5% 40% 50% 5%;
    grid-template-areas: 
        ". . ."
        ". slikaM6 ."
        ". lijevitekstM4 ."
        ". . .";
}
    
.slikaM6{
    background-position: center bottom;
    
}
    #m5{
    width: 100%;
    height: 1300px;
    margin-top: -200px;
    background-color: white;
    display: grid;
    grid-template-columns: 5% 90% 5%;
    grid-template-rows: 5% 40% 55%;
    grid-template-areas: 
        ". . ."
        ". slikaM7 ."
        ". desnitekstM4 .";
}
    
.slikaM7{
    background-position: center bottom;
    
}
#m6{
    width: 100%;
    height: 1200px;
    background-color: white;
    display: grid;
    grid-template-columns: 5% 90% 5%;
    grid-template-rows: 5% 45% 45% 5%;
    grid-template-areas: 
        ". . ."
        ". tekstM6 ."
        ". slikaM8 ."
        ". tekstMO .";
}

#m7{
    width: 100%;
    height: 1100px;
    background-color: black;
    color: white;
    display: grid;
    grid-template-columns: 5% 90% 5%;
    grid-template-rows: 5% 50% 40% 5%;
    grid-template-areas: 
        ". . ."
        ". tekstM7 ."
        ". slikaM9 ."
        ". . .";
}
    
.slikaM9{
       background-position: center bottom;
    }

#m8{
    width: 100%;
    height: 1100px;
    background-color: black;
    display: grid;
    grid-template-columns: 5% 90% 5%;
    grid-template-rows: 5% 45% 45% 5%;
    grid-template-areas: 
        ". . ."
        ". tekstM8 ."
        ". slikaM10 .";
}
    
.slikaM10{
        background-position: center bottom;
    }

#m9{
    width: 100%;
    height: 700px;
    background-color: black;
    color: white;
    display: grid;
    grid-template-columns: 5% 90% 5%;
    grid-template-rows: 30% 70%;
    grid-template-areas: 
        "h1M9 h1M9 h1M9"
        ". tekstM9 .";
}

.tekstM9{
    width: 100%;
    height: 200px;
    grid-area: tekstM9;
}

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

.tekstM9 p{
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
}

.slikaM11{
    display: none;
    grid-area: slikaM11;
    background-image: url(slike/apollo11%20landing.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
    
#m10{
    width: 100%;
    height: 300vh;
    background-color: white;
    display: grid;
    grid-template-columns: 5% 90% 5%;
    grid-template-rows: 25% 5% 25% 5% 25% 5% 20%;
    grid-template-areas: 
        ". slikaM12 ."
        ". opisM12 ."
        ". slikaM13 ."
        ". opisM13 ."
        ". slikaM14 ."
        ". opisM14 .";
}

.slikaM12{
    background-image: url(slike/apollo11-neil2.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    grid-area: slikaM12;
}



.slikaM13{
    background-image: url(slike/apollo11-buzz2.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    grid-area: slikaM13;
}

.slikaM14{
    background-image: url(slike/apollo11-collins2.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    grid-area: slikaM14;
}

.opisM12{
    background-color: black;
    color: white;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
    text-align: center;
    grid-area: opisM12;
}
.opisM13{
    background-color: black;
    color: white;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
    text-align: center;
    grid-area: opisM13;
}
.opisM14{
    background-color: black;
    color: white;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
    text-align: center;
    grid-area: opisM14;
}
}