#line_middle {
  position: absolute;
  left: 50%;
  width: 0px;
  height: 100%;
  border-right: 1px solid;
}

.projects {
  position: relative;
  left: 0%;
  top: 0%;
  width: 100vw;
  height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

  .cell {
    position: relative;
    width: 25vw;
    height: 46vh;
    border-bottom: 1px solid;
  }

  .img-project {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 80%;
    max-height: 75%;
    height: auto;
  }
  
    #img-olivia {
      max-width: 60%;
    }
  


.footer {
  font-size: 18px;
  font-family: 'franklin-gothic-urw', sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: left;
  position: relative;
  width: auto;
  height: auto;
  background-color: default;
}

  .text {
    text-align: center;
    position: relative;
  }

#asterisk {
  font-size: 25px;
  text-align: left;
  left: 40%;
  width: 10px;
  height: 1px;
  margin-top: 20px;
}

#bio {
  left: 50%;
  transform: translate(-50%);
  width: 80%;
  padding-left: 20px;
  padding-right: 20px;
}

.face {
  position: relative;
  left: 50%;
  transform: translate(-50%);
  bottom: 0px;
  width: 20%;
  height: auto;
  z-index: 99;
}

.footer-links {
  font-family: 'Times New Roman', Times, serif;
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

  #email,#linkedin,#instagram {
    margin: 15px;
  }

#credit {
  position: relative;
  width: 100%;
  height: auto;
  padding-bottom: 20px;
}


@media screen and (min-width: 1024px) and (max-height: 700px){

  .cell {
    height: 400px;
  }
}

@media screen and (min-width: 1024px) {
  #line_left {
    position: absolute;
    left: 25%;
    width: 1px;
    height: 100%;
    border-right: 1px solid;
  }

  #line_right {
    position: absolute;
    left: 75%;
    width: 0px;
    height: 100%;
    border-right: 1px solid;
  }
}

@media screen and (max-width: 1023px) {
  
  .cell {
    position: relative;
    width: 50vw;
    height: 40vh;
    border-bottom: 1px solid;
  }

  #asterisk {
    left: 20%;
  }

  .face {
    width: 40%;
   }

  #bio {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
 
  #email,#linkedin,#instagram {
    margin: 0px;
    display: block;
  }
}

@media screen and (min-width: 681px) {

  #img-afrikanere-hover {
    display: none;
  }
  #afrikanere:hover #img-afrikanere-hover {
    display: block;
  }
  #afrikanere:hover #img-afrikanere {
    display: none;
  }

 
  #img-barnstorm-hover {
    display: none;
  }
  #barnstorm:hover #img-barnstorm-hover {
    display: block;
  }
  #barnstorm:hover #img-barnstorm {
    display: none;
  }

  #img-bhmn-hover {
    display: none;
  }
  #bhmn:hover #img-bhmn-hover {
    display: block;
  }
  #bhmn:hover #img-bhmn {
    display: none;
  }

  #img-cida-hover {
    display: none;
  }
  #cida:hover #img-cida-hover {
    display: block;
  }
  #cida:hover #img-cida {
    display: none;
  }

 #img-frank-hover {
    display: none;
  }
  #frank:hover #img-frank-hover {
    display: block;
  }
  #frank:hover #img-frank {
    display: none;
  }

  #img-kk-hover {
    display: none;
  }
  #kk:hover #img-kk-hover {
    display: block;
  }
  #kk:hover #img-kk {
    display: none;
  }

  #img-olivia-hover {
    display: none;
  }
  #olivia:hover #img-olivia-hover {
    display: block;
  }
  #olivia:hover #img-olivia {
    display: none;
  }

  #img-tz-hover  {
    display: none;
  }
  #tz:hover #img-tz-hover  {
    display: block;
  }
  #tz:hover #img-tz {
    display: none;
  }

  #img-ujamaa-hover {
    display: none;
  }
  #ujamaa:hover #img-ujamaa-hover {
    display: block;
  }
  #ujamaa:hover #img-ujamaa {
    display: none;
  }

  #img-zanele-hover {
    display: none;
  }
  #zanele:hover #img-zanele-hover {
    display: block;
  }
  #zanele:hover #img-zanele {
    display: none;
  }

}

@media screen and (max-width: 680px) {
  
  .face {
    width: 50%;
  }

  #img-afrikanere-hover, #img-barnstorm-hover, #img-cida-hover, #img-frank-hover, 
  #img-kk-hover, #img-olivia-hover, #img-tz-hover, #img-ujamaa-hover, #img-zanele-hover {
    display: none;

  }

  .footer {
    font-size: 15px;
  }
}
}


@media screen and (max-width: 480px) {
  .footer {
    font-size: 15px;
  }
}