@media screen and (max-width: 768px) {
  .fh5co-nav {
    padding: 20px 0;
  }
  
  .fh5co-nav #fh5co-logo {
    margin-bottom: 0;
  }
  
  .fh5co-nav .menu-1 {
    display: none;
  }
  
  .fh5co-cover {
    height: 600px;
  }
  
  .fh5co-cover .display-t,
  .fh5co-cover .display-tc {
    height: 600px;
  }
  
  .fh5co-cover.fh5co-cover-sm {
    height: 400px;
  }
  
  .fh5co-cover.fh5co-cover-sm .display-t,
  .fh5co-cover.fh5co-cover-sm .display-tc {
    height: 400px;
  }
  
  #fh5co-header .display-tc h1,
  .fh5co-cover .display-tc h1 {
    font-size: 40px;
  }
  
  #fh5co-services,
  #fh5co-started,
  #fh5co-testimonial,
  #fh5co-blog,
  #fh5co-project,
  #fh5co-about,
  #fh5co-team,
  #fh5co-contact,
  #fh5co-footer {
    padding: 3em 0;
  }
  
  #fh5co-blog .fh5co-post:hover, #fh5co-blog .fh5co-post:focus {
    bottom: 0;
  }
  
  #fh5co-project .fh5co-project > a h3 {
    position: relative;
    visibility: visible;
    opacity: 1;
    bottom: 0;
    color: #000;
    padding: 20px;
    background: #fff;
  }

 #fh5co-project .fh5co-project > a:hover {
    bottom: 0;
  }

  #fh5co-project .fh5co-project > a:hover:after {
    opacity: 0;
    visibility: hidden;
  }
  
  #fh5co-project .fh5co-project > a:hover h3 {
    bottom: 0;
    padding: 20px;
    background: #fff;
  }
  
  #fh5co-project .fh5co-project > a:hover img {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  
  .feature-center {
    margin-bottom: 50px;
  }
  
  #fh5co-footer .fh5co-widget {
    text-align: left;
  }
  
  #fh5co-offcanvas {
    display: block;
  }
  
  .fh5co-nav-toggle {
    display: block;
  }
  
}