.section-active {
    display: block;
  }
  
  .section-hide {
    display: none;
  }
  
.img-container{
    display: block;
    position: absolute;
    top: 7%;
    width: 170px;
    margin: 22px;
}  
.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
  }
  
  .column {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
  }

ul.nav-list{
  position: absolute;
  top: 30%;

}
.nav-close{
  color: white;
}
li .nav-item{
  padding-left: 30px;
}
.home-img{
  width: 200px;
  height:200px;
  margin-bottom: 40%;
}
  
ul li img{
  width: 40px;
  height: 40px;
  display: inline-block;
}
  .topnav {
    overflow: hidden;
    background-color: #333;
    position: relative;
  }
  
  .topnav #myLinks {
    display: none;
  }
  
  .topnav a {
    float: left;
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  .topnav a.icon {
    float: right;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  .card{
    padding: 60px 10px 10px 10px;
  }

  .show-menu {
    display: block;
  }
  .nav-menu{
    left: 0px;  
  }
  .nav-menu.show-menu{
    display: block;
  }

  .section {
    display: none;
    padding-top: 0px;
  }
  
  .section.active {
    display: block;
  }
  
  @media (max-width: 800px) {
    .column {
      flex: 50%;
      max-width: 50%;
    }
    ul{
      position: relative;
      top: 25%;
      left: 25%;
    }

  @media (max-width: 600px) {
    .column {
      flex: 100%;
      max-width: 100%;
    }
    ul{
      position: relative;
      top: 25%;
      left: 25%;
    }
    .nav-menu{
     
      display: none;
    }
    
  }

}