@font-face {
    font-family: lato_bold;
    src: url(fonts/Lato-Bold.ttf);
}

@font-face {
    font-family: lato_regular;
    src: url(fonts/Lato-Regular.ttf);
}

body {
    background-color: #FDFDFC;
}

main {
    margin: 0 5% 0 5%;
}

#hamburger {
    z-index: 105;
    background-color: #FDFDFC;
    cursor: pointer;
    border:none;
    position: relative;
    margin-right: 50px;
}

header ul {
    width: 100%;
    height: 100%;
    z-index: 100;
    overflow: visible;
    padding: 0;
    
}


ul li {
    text-align: left;
    line-height: 220%;
}

#bannervid {
    width: 85%;
    text-align: center;
    margin-top: 3%;
}


#menu {
width: 150px;
height: 150px;
  z-index: 99;
  background:#FDFDFC;
  opacity: 80%;
  border: #95B79A solid 2px;
  border-radius: 2px; 
  list-style: none;
  padding: 60px;
  position: absolute;
  text-align: right;
  right: 1px;
  top: 20px;
  
}

#menuIcon {
    z-index: 102;
    position: absolute;
}

#closeIcon {
    position: absolute;
}

.hidden {
    visibility: hidden;
}


h1 {
    font-size: 100%;
}

ul {
    font-family: "lato_regular" , sans-serif;
    list-style-type: none;
}

li {
    line-height: 180%;
}


h2{
    font-family:"lato_bold", sans-serif;
   font-size: 150%;
   color: #95B79A;
   margin: 0%;
   padding: 0%;
}

p{
    font-family: "lato_regular" , sans-serif;
    font-size: 110%;
    color: black;
    line-height: 180%;
}

nav{
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 3%;
margin-right: 3%; 
position: relative;
}


#drawfridge {
    width: 80%;
    margin-left: 5%;
}

#videolorry {
    width: 90%;
}

.upperborder {
    border-width: 2px 0 0 0 ;
border-color: #95B79A;
border-style: solid none none none;

}

.picturefullfridge {
    grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 2;
grid-row-end: 3;

}

.picturefullfridge img {
    width: 90%;
}

.displaymaingridcontact{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-row-gap: 5%;
    grid-column-gap: 5%;
    align-items: center;
    margin-bottom: 20%;
}

.displaymaingridhome{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-row-gap: 5%;
    align-items: center;
    margin-bottom: 20%;
}



.displaymaingrid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-row-gap: 10%;
    grid-column-gap: 2%;
    align-items: center;

    /* align-self: unset; */
}

.about {
    grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 3;
grid-row-end: 4;
}

.about h2 {
    margin-top: 10%;
}

.cherry img {
    width: 40%;
    margin-top: 10%;
    margin-right: 5%;
}

.location img {
    width: 20%;
}



.cherry {
    display: grid;
    grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
justify-items: end;
align-self: start;
/* justify-self: start; */
}

.location {
    grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 4;
grid-row-end: 5;
}

.ourvision {
    grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 5;
grid-row-end: 6;
}

.kiwi {
    display: grid;
    grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 5;
grid-row-end: 6;
justify-items: end;
align-self: start;
}

.kiwi img {
    width: 50%;
    margin-top: 10%;
    margin-right: 5%;
}

.line {
    grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 6;
grid-row-end: 7;
}

/* VIDEO */
.videospan {
    grid-column-start: 1;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 3;
text-align: center;
}

#controls {
    margin-top: 0.5em;
    margin-left: 10%;
    display: flex;
justify-content: center;
height: 45px;
justify-items: center;
}

#controls div {
    height: 100%;
    cursor: pointer;
}

#myVideo {
    width: 100%;
}

#playBtn {
width: 20%;
height: 100%;
background-repeat: no-repeat;
}
#stopBtn {
width: 20%;
background-repeat: no-repeat;
}



.one{
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}

.onevid{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
    padding-top:5%;
    }



.two{
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 2;
    align-self: unset;
    padding: 15% 0 15% 0;
}

.twovid{
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 2;
    align-self: unset;
    margin: 15% 0 15% 0;
}

.two1{
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 2;
    align-self: unset;
    padding: 10% 0 18% 0;
}
.two2{
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 2;
    align-self: unset;
    padding: 10% 0 18% 0;
}

.three{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    align-self: unset;
}

.four{
    grid-column-start: 4;
    grid-column-end: -1;
    grid-row-start: 2;
    grid-row-end: 3;
    align-self: unset;
}

.bottomborder{
border-width: 0 0 2px 0 ;
border-color: #95B79A;
border-style: none none solid none;
} 

.bottomborder1{
    border-width: 0 0 2px 0 ;
    border-color: #95B79A;
    border-style: none none solid none;
    padding-bottom: 10%;
    } 



.navtext{
font-size: 135%;
}

.logo{
    width: 7%;
    margin: 2% 0 2% 0;
}


.menuicon{
width: 3.5%;
}

#CC {
    width: 30%;
}



.cc {
    display: grid;
    grid-template-columns: 30% auto 30%;
    align-items: center;
    justify-items: end;
    margin: 5% 5% 3% 5%; 
}

.center{
    text-align: center;
    margin: 20% 20% 0 20%;
}
.centerhome{
    text-align: center;
    margin: 25% 20% 0 20%;
}


.placereport {
    display: grid;
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
    text-align: right;
}

.imagecontact img{
    width: 100%;
}

.imagecontact {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
    margin-top: 5%;
}

#LORRY {
    height: 35vw;
    width: 100%;
}

.report {
    width: 35%;
    
}

#donation {
    width: 90%;
}

#HOWTO {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;
}
.accepted {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 5;
    justify-items: end;
align-self: start;


}

.notaccepted {
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 4;
    grid-row-end: 5;
}


.WHATDONATE {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;
}

.partners {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    grid-gap: 5%;
    margin-left: 10%;
}

.folketshus img {
    width: 40%;
}

.madbroen img {
width: 35%;
}

.foodsharing img {
    width: 35%;
}

.mellow img {
    width: 40%;
}

.eatgrim img {
    width: 30%;
}

.landbageriet img {
    width: 30%;
}

.spidsroden img {
    width: 40%;
}

.rema1000 img {
    width: 30%;
}

.elongate img {
    width: 30%;;
}


.svgfooter{
    width: 5%;
}


footer p {
    font-size: 80%;
}

footer h2 {
    margin-bottom: 5%;
}

footer {
    margin: 0 8% 0 8%;
}



/* FOR THE FLYER */

.backbutton {
    text-align: center;
    margin: 5% 0 5% 0;
}

.ourflyer {
    display: flex;
}

.flyer {
    width: 50%;
}

/* unvisited link */
a:link {
    color:black;
    text-decoration: none;
  }
  
  /* visited link */
  a:visited {
    color:black;
  }
  
  /* mouse over link */
  a:hover {
    color: #95B79A;
  }
  
  /* selected link */
  a:active {
    color: black;
  }


  /* MEDIA QUARY */
  @media screen and (max-width: 1000px) {
    .displaymaingridhome {
        display: flex;
        flex-wrap: wrap;
    }
    #donation {
        width: 60%;
    }
    .cherry {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 3;
        grid-row-end: 4;
  }
  .about {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 4;
}

.location {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 4;
    grid-row-end: 5;
}

.kiwi {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 5;
    grid-row-end: 6;
}
.ourvision {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 5;
    grid-row-end: 6;
    padding-bottom: 20%;
}

.svgfooter {
    width: 30px;
}

.report {
    width: 50%;
}

}

@media screen and (max-width: 900px) {
    .displaymaingridcontact {
        display: flex;
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 800px) {
 .displaymaingrid {
     display: flex;
     flex-wrap: wrap;
 }
 #LORRY {
     width: 550px;
     height: 300px;
 }
.picturefullfridge {
    margin-top: 10%;
}


}


@media screen and (max-width: 750px) {
    
#logo {
    width: 50px;
}
#menuIcon {
    width: 30px;
}
#closeIcon {
    width: 30px;
}

#menu {
    margin: 0;
}

    .cherry {
        grid-column-start: 2;
        grid-column-end: 6;
        grid-row-start: 3;
        grid-row-end: 4;
        
        
    }
    .cherry img {
        
        display: none;
        
    }
    .about {
        grid-column-start: 1;
        grid-column-end: 6;
        grid-row-start: 3;
        grid-row-end: 4;
    }
    .location {
        grid-column-start: 1;
        grid-column-end: 6;
        grid-row-start: 4;
        grid-row-end: 5;
    }
    .location img {
        display: none;
    }
    .ourvision {
        grid-column-start: 1;
        grid-column-end: 6;
        grid-row-start: 5;
        grid-row-end: 6;
        padding-bottom: 20%;
    }
    .kiwi {
        display: none;
    }
footer {
    margin: 50% 0 0 0;
}
.cc {
    display: flex;
    flex-wrap: wrap;
}

.report {
    width: 20%;
}

}

@media screen and (max-width: 600px) {
    #LORRY {
        width: 300px;
        height: 150px;
    }

    .partners {
        display: flex;
        flex-wrap: wrap;
        row-gap: 20px;
       
    }
}