Psyduck - 可達鴨 之 鴨力山大 v0.1

@media only screen and (max-width: 980px) {
  #top-bar .box {
    padding: 5px 25px 8px 15px;
    margin-right: 3px; }
    #top-bar .box .box-i {
      margin-left: 5px; }

  .search-box {
    width: 100%; }

  .grid-item {
    width: 50%;
    padding: 7.5px; }

  .portfolio-page.colum-2 .grid-item {
    width: 50%; }

  .portfolio-page.colum-3 .grid-item {
    width: 50%;
    padding: 10px; }

  .portfolio-page.colum-4 .grid-item {
    width: 50%;
    padding: 7px; } }
@media only screen and (max-width: 800px) {
  .start-bg {
    height: 200px; }

  .bg-head {
    height: 450px; }
    .bg-head .box-test {
      width: 100%;
      padding: 0 45px; }
      .bg-head .box-test h1 {
        font-size: 48px; }

  #top-bar .box-info {
    display: none; }

  #bar {
    padding: 5px 0; }
    #bar .menu-mobile {
      display: inline-block; }
    #bar .main-menu {
      visibility: hidden;
      overflow: auto;
      position: fixed;
      top: 0;
      left: -250px;
      width: 250px;
      height: 100%;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      z-index: 999; }
      #bar .main-menu nav ul li {
        display: block; }
        #bar .main-menu nav ul li a {
          display: block;
          width: 100%;
          padding: 20px; }
        #bar .main-menu nav ul li ul {
          display: none;
          position: relative;
          border-bottom: 1px solid #cccccc; }
          #bar .main-menu nav ul li ul li {
            display: block; }
            #bar .main-menu nav ul li ul li a {
              width: 250px;
              padding: 17px;
              background-color: #fff; }
        #bar .main-menu nav ul li:hover ul {
          display: block; }
      #bar .main-menu nav .sub {
        -moz-pointer-events: none;
        -webkit-pointer-events: none;
        pointer-events: none; }

  .services {
    margin-bottom: 0; }
    .services .col-md-4 {
      margin-bottom: 50px; }

  .process {
    padding-bottom: 0; }
    .process .line {
      display: none; }
    .process .step {
      width: 50%;
      margin-bottom: 80px; }

  .characters {
    margin: 15px; }
    .characters .box {
      margin: 35px 0; }
      .characters .box i {
        display: block;
        margin-bottom: 10px; }

  .citation .container {
    padding: 50px 15px; }

  .prices .price {
    width: 100%;
    margin-right: 0;
    margin-bottom: 30px;
    margin-top: 25px;
    transform: skew(0); }
    .prices .price .price-header i {
      transform: skew(0); }
    .prices .price .price-body {
      transform: skew(0); }
    .prices .price .price-footer strong {
      transform: skew(0); }

  .footer {
    padding-top: 0; }
    .footer h4 {
      margin-top: 40px; }
    .footer p {
      padding-right: 0; } }
@media only screen and (max-width: 480px) {
  .bg-head {
    height: 400px; }
    .bg-head .box-test {
      padding: 0 15px; }
      .bg-head .box-test h1 {
        font-size: 40px; }

  .title-section {
    font-size: 27px; }

  .button {
    padding: 14px 24px;
    font-size: 14px; }

  .search-box span {
    font-size: 20px;
    margin-bottom: 20px; }
  .search-box .input-box input {
    width: 200px;
    height: 50px;
    font-size: 16px;
    padding: 0 15px; }
  .search-box button {
    width: 60px;
    height: 54px; }
    .search-box button i {
      display: block;
      transform: skew(25deg);
      font-size: 20px; }

  .email-form .input-email input {
    width: 190px;
    font-size: 14px; }

  .process .step {
    width: 100%; }

  .portfolio .filter-item li {
    padding: 5px 9px; }

  .grid-item {
    width: 100%; }

  .portfolio-page.colum-2 .grid-item {
    width: 100%; }

  .portfolio-page.colum-3 .grid-item {
    width: 100%; }

  .portfolio-page.colum-4 .grid-item {
    width: 100%; }

  .contact .contact-list ul {
    margin-bottom: 30px; }
    .contact .contact-list ul li i {
      font-size: 30px;
      margin-right: 15px; }
    .contact .contact-list ul li span {
      font-size: 14px; }

  .nf strong {
    font-size: 150px; }

  .bot-bar {
    text-align: center; }
    .bot-bar p {
      width: 100%;
      padding: 0; }
    .bot-bar .social {
      width: 100%;
      margin-top: 15px;
      padding: 0; } }