#project-container {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  /*
  display: flex;
  flex-direction: column;
  */
}

.project {
  background-color: #111;
  position:relative;
  margin: 0;
  float: left;
  clear: both;
  width: 100%;
  margin-top: 1px;
}

.project-content {
  color: #111;
  background-color: #f5f5f5;
  width: 70%;
  margin: 0 0;
  margin-left: 25%;
  margin-top: 1px;
  display: inline-block;
}

.project-data {
  width: 90%;
  margin: 0 auto;

  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.stripe {
  position: absolute;
  left: 10%;
  height: 100%;
  width: 5%;
}

.project .line {
  background-color: #111;
}

.project .images {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 40%;
  height: 100%;
}

.project .images div {
    margin: 10px 0;
}

.project .images img {
  box-sizing: border-box;
  border: 4px solid #888;
  padding: 4px;
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
  cursor: pointer;
}

.project .text {
  display: inline-block;
  padding: 0 10px;
  width: 40%;
  text-align: left;
  font-family: Arial;
  font-size: 12pt;
  background-color: white;
  box-shadow: 0 1px 4px #111;
}

.project .text p {
  font-family: consolas, monospace;
}

.demo {
  width: 80%;
  margin: 0 auto;
  text-align: left;
  font-family: Arial;
  font-size: 12pt;
}

.project h1 {
  text-align: center;
  font-family: consolas, monospace;
}

.project a {
  color: #111;
}

@-webkit-keyframes come-in {
  from {
    transform: translateY(150px); 
  }
  to { 
    transform: translateY(0); 
  }
}

@keyframes come-in {
  from {
    transform: translateY(150px); 
  }
  to { 
    transform: translateY(0); 
  }
}

.come-in {
  transform: translateY(150px);
  animation: come-in 0.8s ease forwards;
}

.come-in:nth-child(odd) {
  animation-duration: 0.6s;
}

.already-visible {
  transform: translateY(0);
  animation: none;
}

@media screen and (max-width: 1000px) {  
  .project-content {
    width: 80%;
    margin-left: 15%;
  }
  
  .project-data {
    flex-direction: column;
  }
  
  .stripe {
    left: 5%;
  }
  
  .project .images {
    float: initial;
    margin: 0 auto;
    width: 80%;
  }
  
  .project .images img {
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
    border: 4px solid grey;
    padding: 4px;
    width: 80%;
    height: auto;
  }
  
  .project .text {
    display: block;
    float: initial;
    clear: initial;
    margin: 0 auto;
    width: 80%;
    font-size: 12pt;
  }
    
  .project h1 {
    font-size: 34pt;
  }
  
  .demo {
    display: none;
  }
}

@media screen and (max-width: 500px) {  
  .project-content {
  }
  
  .project .images {
    display: none;
  }
  
  .project h1 {
    font-size: 24pt;
  }
}