/* ----------------------------------------------------------------
   Responsive
-----------------------------------------------------------------*/

/* -------------------------------------------------------
                     phone & tablet
-------------------------------------------------------- */
@media (max-width: 480px) {

  .filtering { border: none !important; }

  .filtering  button {
    font-size: 14px;
    border-radius: 0 !important;
    letter-spacing: 0 !important;
    padding: 10px !important;
  }

}

@media (max-width: 766px) {

    .xs-mb-30{margin-bottom: 30px;}

    .xs-mb-50{margin-bottom: 50px;}

    .header .caption h5 {
      font-size: 16px;
    }

    .header .caption h1 {
      font-size: 22px;
      max-width: 100%;
    }

    .header .caption p {
      padding: 0 5px;
      font-size: 14px;
    }

    .content-title h5 ,.features-2 .box-content h3 ,.contact .contact-form h4 ,.contact .box-info h4 ,.skills .box-content h3 ,.about .box-content h3 {
      font-size: 22px;
      font-weight: 500;
    }

    .services .item .title-box h4 {
      font-size: 16px;
    }

    .testimonial .item-testimonial .box-text {
      padding-left: 15px;
      text-align: center;
      margin: auto;
    }

    .testimonial .item-testimonial .box-text .icon-box {
      display: none;
    }

    .team .part-photo, .team .content-info , .team .item-photo {
      padding: 5px 15px;
    }

    .portfolio .filtering {
      padding-left: 15px;
      padding-right: 15px;
    }

    .section-video h4 {
      font-size: 40px;
      margin-bottom: 50px;
    }

    .testimonial .content {
      padding: 100px 15px 90px 15px;
    }

    .about .box-content ,.contact .contact-form {
      padding: 50px 15px;
    }

    .skills .box-content {
      padding: 50px 15px 20px;
    }

    .services .service-box {
      padding: 80px 15px;
    }

    .facts .content ,.pricing .content {
      padding: 100px 15px 70px 15px;
    }

}

@media (max-width: 991px){

  .sm-mb-30{margin-bottom: 30px;}

  .sm-mb-50{margin-bottom: 50px;}

  .navbar .navbar-collapse{
      overflow: auto;
      background: #111;
      color: #fff !important;
      text-align: center;
      padding: 10px 0;
  }

  .nav-scroll .navbar-collapse{
      background: #fff;
      color: #fff !important;
  }

  .navbar .navbar-brand {
    padding-left: 15px;
  }

  .header .caption h3 {
    font-size: 28px;
    line-height: 1.6;
  }

  .header .caption h1 {
    font-size: 32px;
    line-height: 1.5;
  }

  .header .caption p {
    padding: 0 5px;
    font-size: 14px;
  }

  .container-wrapper {
    margin: 0 !important;
    width: 100% !important;
  }

  .services .content {
    padding-left: 0;
    padding-right: 0;
  }

  .features .features-box , .contact .contact-info .box {
    border-right: none;
    text-align: center;
  }

  .features .features-box .content ,.contact .contact-info .box .content {
    display: block;
    text-align: center;
  }

  .features .features-box .icon ,.contact .contact-info .box .icon {
    display: inline-block;
    padding-right: 0;
    margin-bottom: 10px;
  }

  .services .item {
    border: 0.5px solid #F2F2F2 !important;
  }

  .skills .content , .about .content {
    padding-left: 0;
    padding-right: 0;
  }

  .pricing .pricing-table {
    border: 1px solid #ffffff;
  }

  .pricing-bg {
    display: none;
  }

  .features-2 .box-content .item-cun {
    border: none;
  }

  .facts {
    background: #fff !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .about , .skills {
    background-color: #f8f8f8 !important;
    background-image: none !important;
  }

  .about .box-content , .skills .box-content {
    padding: 0;
    background-color: inherit;
  }

  .testimonial ,.contact .contact-bottom {
    margin-bottom: 0 !important;
  }

  .pricing ,.section-video.section-padding ,.portfolio {
    margin-bottom: 0 !important;
  }

  .contact {
    padding-top: 50px !important;
    padding-bottom: 0 !important;
  }
}

@media (max-width: 1024px) {
  .container-wrapper {
    margin: 0 30px 0 30px;
    width: calc(100% - 60px);
  }
}