body {
  font-family: 'Playfair Display', serif;
  text-decoration: none;
}

/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
    .row.content {height: auto}
    
/* Set gray background color and 100% height */
    .sidenav {
      background-color: white;
      min-height: 90vh;
      word-wrap: break-word;
      padding-left: 50px;
      padding-top: 40px;
    }

    .on-hover:hover {
      text-decoration: none;
    }

    .main-title {
        background-color: #f1f1f1;
        color: #337ab7;
        padding-top: 70px;
        padding-right: 30px;
        padding-left: 30px;
        padding-bottom: 50px;
        text-align: center;
    }

    .main-title p{
      word-wrap: break-word;
    }

    .img-container {
      width: 400px;
      height: 300px;
      overflow: hidden;
    }
    
    .img-edit {
      width: 100%;
      height: auto;
    }

    .row {
      padding-bottom: 20px;
    }
    
    .portfolio-box-caption {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 95%;
      height: 100%;
      position: absolute;
      bottom: 0;
      text-align: center;
      opacity: 0;
      color: #fff;
      background: #337ab7;
      transition: opacity 0.25s ease;
      text-align: center;
    }

    .portfolio-box-caption-2 {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 96%;
      height: 100%;
      position: absolute;
      bottom: 0;
      text-align: center;
      color: #fff;
      background: #337ab7;
      transition: opacity 0.25s ease;
      text-align: center;
    }

    .project-name {
      font-size: 2rem;
      font-weight: 600;
      text-transform: uppercase;
    }
    
    .hover-image:hover .portfolio-box-caption {
      opacity: 0.7;
    }

/* Set black background color, white text and some padding */
    footer {
      background-color: #555;
      text-align: center;
      color: white;
      position: absolute;
      width: 100%;
      padding: 15px;
    }
    
/* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .row.content {height: auto;} 
    }

   