.col-portfolio {
  padding-left: 0;
  padding-right: 0;
}

.portfolio .portfolio-item {
  position: relative;
}

.portfolio-link {
  font-size: 20px;
  font-weight: 600;
}

.portfolio-item:hover + .portfolio-item-active {
  display: block;
}

.portfolio-item-active:hover p {
  opacity: 1;
  top: 35%;
}

.portfolio-item-active:hover h1 {
  opacity: 1;
  top: calc(50% - 35px);
}

.portfolio-item-active {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.35s;
  width: 100%;
  height: 100%;
}

.portfolio-item-active h1 {
  color: #ffffff;
  opacity: 0.8;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  transition: transform 0.35s, color 0.35s, top 0.35s;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

@media (min-width: 768px) and (max-width:991px) {
  .portfolio-item-active h1 {
    font-size: 1.2rem;
  }
}

@media (min-width: 768px) and (max-width:991px) {
  .portfolio-item-active:hover p {
    top: 25%;
  }
}

@media (max-width: 576px) {
  .portfolio-item-active h1 {
    font-size: 1.2rem;
  }
}

@media (min-width: 576px) and (max-width: 400px) {
  .portfolio-item-active:hover p {
    top: 35%;
  }
}

@media (max-width: 399px) {
  .portfolio-item-active:hover p {
    top: 25%;
  }
}

.portfolio-item-active p {
  font-size: 1rem;
  font-family: "din-condensed-web", sans-serif;
  color: #ffffff;
  transition: opacity 0.35s, transform 0.35s, top 0.35s;
  position: relative;
  opacity: 0;
  top: 75%;
}

.portfolio-item-active .play-container {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
  transition: opacity 0.3s;
  display: none;
}

.portfolio a:hover {
  color: #42dca3;
}

.portfolio-item:hover .portfolio-item-active {
  opacity: 1;
  background-color: rgba(0,0,0,0.5);
}

.fa-play-circle {
  color: #ffffff;
  font-size: 50px;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-45%, -50%);
}

.portfolio-item-active:hover .play-container {
  display: block;
  opacity: 1;
}

.fa-beat {
  animation: 1.5s ease 0s infinite beat;
}

@keyframes beat {
  0%, 50%, 100% {
    transform: scale(1, 1);
  }
  30%, 80% {
    transform: scale(0.92, 0.95);
  }
}