@media only screen and (max-width : 992px) {
    header, main, footer {
      padding-left: 0;
    }



    #slide-out{
      width: 100%;
    }
    #menu-projects{
      margin-top: 30%;
    }

    .menu-item{
      font-size: 3em !important;
      padding-left: 16px !important;
    }

    .sidenav-trigger{
      position: fixed;
      right:16px;
      top:8px;
      font-size: 56px;
      z-index: 998;
    }
    .social-icon{
      height: 24px;
      width: 24px;
      margin: 0 8px;
      opacity: 0.7;
    }

    .modal{
      width: 100% !important;
      min-height: 100% !important;
      top: 0 !important;
    }

    
  }

  @media only screen and (min-width : 992px) {
    #slide-out{
        box-shadow: none;
        width: 400px;
        z-index: 0;
    }

    .white{
      margin-top: -32px;
    }

    .modal{
      max-height: 90%;
    }

    #header{
      height: 172px;
      background-color: white;
    }

    #portfolio{
      padding-top:0 !important;
    }

    .social-icon{
      height: 24px;
      width: 24px;
      margin: 0 8px;
    }

  }

  .gallery{
    margin: 0 !important;
  }

  .gallery-cover{
    outline: 1px solid #00000003;
  }

  .gallery-curve-wrapper{
    box-shadow: none !important;


  }

.detail-pic{
  border: 1px solid #00000055;
  margin-bottom: 16px;
}

.detail-desc{
  text-align: center;
  font-size: 1.0rem;
  margin-bottom: 64px;
}

.description{
  margin: 64px 10% !important;
}

.add{
  opacity: 0.1;
}

.gallery-cover:hover .add {
  opacity: 1.0;
  cursor: pointer;
}