@charset "utf-8";
@media only screen and (max-width: 412px), only screen and (width: 414px), only screen and (width: 428px), only screen and (width: 480px), only screen and (width: 600px), only screen and (width: 640px), only screen and (width: 667px) {
   .display-flex {
      display: inline !important;
   }
   #header {
      height: 50px !important;
      padding: 0px !important;
   }

   #logo, #nav {
      display: none;
      height: 0px;
      visibility: hidden;
      width: 0px;
   }

   #logo-mobile {
      display: block !important;
      height: 20px !important;
      margin: 0px;
      padding: 0px;
      position: absolute;
      text-align: center;
      width: 100% !important;
      visibility: visible !important;
   }
   #logo-mobile img {
      margin: 15px;
      max-width: 130px;
   }
   #logo-mobile img {
      max-width: 130px;
   }

   #nav-mobile {
      display: block !important;
      position: fixed;
      top: 10px;
      visibility: visible !important;
      width: 100% !important;
      z-index: 9997;
   }  
   #nav-mobile ul {
      background: rgba(16, 17, 22, 0.85) none repeat scroll 0% 0%;
      display: none;
      height: auto;
      margin: 40px 0px;
      padding: 0;
   }
   #nav-mobile li {
      display: block;
      width: 100%;
      border-bottom: 1px solid transparent;
      padding-left: 15px;
      padding-right: 15px;
   }
   #nav-mobile li a {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #fff;
      font-family: var(--body-font-family);  
      font-size: 14px;
      letter-spacing: 1px;
      text-transform: uppercase;
   }
   #nav-mobile li a:hover {
      color: #45464B;
      transition: all 1.218s ease 0s;
   }
   #nav-mobile ul a.active {
      text-shadow: 0px 0px 0px transparent;
   }
   #nav-mobile a {
      line-height: 40px;
      width: 100%;
   }

   #slide-toggle {
      background: none;
      display: block !important;
      position: relative;
      visibility: visible !important;
      width: 100%;
   }
   #slide-toggle:after {
      background: url('../img/toggle.png') no-repeat;
      content: " ";
      display: block !important;
      float: left;
      height: 20px;
      margin: 5px 0px 15px 15px;
      padding: 0px;
      position: absolute;
      width: 20px;
   }

   .about-page h1 {
      font-size: 2.8em !important;
   }
   .about-page p {
      font-size: var(--body-font-size) !important;
   }
   .about-page, .services-page, .contact-warp {
      padding: 15% 10% 15% 10% !important;
   }

   .partner .thumbnail {
      float: left !important;
      min-width: 100% !important;
      width: 100% !important;
   }
   .partner .img-preview img {
      width: auto !important;
   }

   .contact-page h1, .contact-page .caption,  .contact-page .email, .contact-page .phone, .copyright {
      text-align: center !important;
   }
   .copyright-warp {
      padding: 0px !important;
   }
}

@media only screen and (min-width: 915px) {
   .partner .img-preview {
      height: 250px !important;
   }
}

@media only screen and (min-width: 883px) {
   .partner .img-preview {
      height: 250px !important;
   }
}

@media only screen and (min-width: 760px) {
   .partner .img-preview {
      height: 200px !important;
   }
}

@media only screen and (min-width: 800px) {
   .partner .img-preview {
      height: 210px !important;
   }
}

@media only screen and (min-width: 915px) {
   .partner .img-preview {
      height: 240px !important;
   }
}

@media only screen and (min-width: 854px) {
   .partner .img-preview {
      height: 230px !important;
   }
}

@media only screen and (min-width: 1024px) {
   .partner .img-preview {
      height: 280px !important;
   }
}

@media only screen and (min-width: 1080px) {
   .partner .img-preview {
      height: 300px !important;
   }
}