#projects img {
  margin-top: 30px;
  margin-bottom: 30px;
  max-height: 250px;
  margin-left: auto;
  margin-right: auto;
}

#projects-header {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../../assets/img/banners/projects-bg.jpg") center / cover no-repeat;
}

.project-card h1 {
  margin: 1rem;
}

.project-card p {
  margin: 0 1rem;
}

.project-card i {
  margin: 1rem;
  cursor: pointer;
}

.project-card .info i {
  margin: 1rem;
  cursor: pointer;
}

.project-img {
  background-repeat: no-repeat!important;
  background-position: center!important;
  background-size: cover!important;
}

.project-card {
  margin-bottom: 3rem;
  box-shadow: 5px 5px 9px 0px rgba(0,0,0,0.2);
  background-color: #f7f7f7;
  position: relative;
  overflow: hidden;
  height: calc(100% - 3rem);
}

.project-card .front {
  background-color: #f7f7f7;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 0px;
}

.project-card .back {
  position: relative;
  background: #555555;
  color: white;
  transition: all 1s, transform 1s, z-index 2s;
  display: flex;
  flex-direction: column;
  margin-left: -100%;
  transform: translateX(-100%);
  z-index: -1;
  flex: 1 1 0px;
}

.project-card .back.show {
  -webkit-transition: all 1s, -webkit-transform 1s;
  transition: all 1s, transform 1s, z-index 0s;
  z-index: 1;
  transform: translateX(0%);
}

.project-class {
  padding: 0.1rem 0.5rem;
  border: solid 2px;
  border-radius: 16px;
  margin: 1rem 0 0 1rem;
  font-weight: 800;
  white-space: nowrap!important;
}

.project-class.beginner {
  border-color: #0F7B6C;
  color: #0F7B6C;
  background-color: #DDEDEA;
}

.project-class.hard {
  border-color: #E03E3E;
  color: #E03E3E;
  background-color: #FBE4E4;
}

.project-class.ongoing {
  border-color: #0B6E99;
  color: #0B6E99;
  background-color: #DDEBF1;
}

.project-class.intermediate {
  border-color: #DFAB01;
  color: #DFAB01;
  background-color: #FBF3DB;
}

.project-class.not-started {
}

.project-class.open-to-join {
  border-color: #6940A5;
  color: #6940A5;
  background-color: #EAE4F2;
}

.project-class.not-open-to-join {
  border-color: #D9730D;
  color: #D9730D;
  background-color: #FAEBDD;
}

.project-card .back .btn {
  margin-left: 1rem;
}