@media screen and (max-width: 1023px) {

  .navbar-collapse {
    /*background: rgba(255, 255, 255, 0.8);*/
    background: #2f2f2f;
  }
  #home {
    min-height: 400px;
  } 
  .wrap-hello-content {
    top: 90px;
  }
  
  .hello-content {
    min-width: 280px;
    padding: 25px;
  }

  .hello-content p {
    font-size: 13px;
  }
  .w-content {
    max-width: 100%;
    font-size: 12px;
    white-space: nowrap;
  }
  
  #about {
    margin-bottom: 140px;
  }
  #about > div {
    width: 100%;
    height: auto;
  }

  .bg-about {
    min-height: 335px;
  }

  .grey-bg {
    padding: 25px 0;
  }
  
  .white-bg {
    padding: 25px 0;
  }
  .content-detail {
    margin-top: 30px;
    letter-spacing: 0.2em;
    font-size: 13px;
    line-height: 20px;
  }

  .content-right {
    padding: 0;
  }

  .portfolio-image li {
    min-height: 220px;
    margin-bottom: 30px;
  }

  .text-detail {
    font-size: 13px;
  }

  .grid-item .title {
    font-size: 14px;
  }

  .content-blog {
    font-size: 12px;
  }

  .skillst {
    margin: 30px auto;
    width: 80%;
  }

  #contact {
    padding: 0;
  }

  #contact .group, #contact input[type=submit] {
    width: 80%;
    margin: auto;
  }
  #contact input[type=submit] {
    margin-top: 50px;
  }
  label {
    margin-top: 10px;
  }

  textarea {
    bottom: 1px solid;
  }

  form {
    margin-bottom: 50px;
  }
  
  .title, .content-detail {
    text-align: center;
    margin-bottom: 30px;
  }

  .wrap-article .content-blog {
    text-align: center;
  }

}