#portfolio h1 {
  padding-bottom: 0;
  font-size: 50px;
  font-weight: 300;
  text-transform: none;
  line-height: normal;
  font-family: 'alga';
}

@media (min-width: 992px) {
  #portfolio h1 {
    font-size: 90px;
  }
}

#portfolio h2 {
  padding-bottom: 0;
  font-size: 20px;
  font-weight: 300;
  text-transform: none;
  line-height: normal;
  font-family: 'alga';
}

@media (min-width: 992px) {
  #portfolio h2 {
    font-size: 30px;
  }
}

#portfolio h3 {
  padding-bottom: 0;
  font-size: 30px;
  font-weight: 300;
  text-transform: none;
  line-height: normal;
  font-family: 'alga';
}

#portfolio h4 {
  font-size: 18px;
  font-weight: 300;
  text-transform: none;
  line-height: normal;
  font-family: 'peridot-pe-variable';
}

#portfolio .container-quotes {
  position: fixed;
  top: 0;
  height: 75vh;
  z-index: -1;
  max-width: 90vw;
}

@media (min-width: 992px) {
  #portfolio .container-quotes {
    /*top: 0;*/
    /*height: 75vh;*/
    max-width: 768px;
  }
}

#portfolio .container-portfolio {
  margin-top: 70vh;
  background: rgba(0,0,0);
}

.div-overlay {
  /*top: 0;*/
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  width: 100%;
  opacity: 0;
  transition: .2s linear;
  background-color: rgba(0,0,0,0.7);
  position: absolute;
  display: flex;
  align-content: center;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
}

.project:hover .div-overlay {
  opacity: 1;
  height: 100%;
}

.project {
  position: relative;
  width: 100%;
  height: 100%;
}