/*================================ 
    #RESPONSIVE CSS 
====================================*/

/* Tablet Layout: 768px.*/
@media only screen and (min-width: 768px) and (max-width: 991px) {

  /* About */
  .about-area .right-info {
    padding-left: 15px;
    margin-top: 30px;
  }

  .banner-area.navbar-transparent .content {
    margin-top: 60px;
  }

  /* Portfolio */
  .portfolio-area .portfolio-items .pf-item,
  .portfolio-area .portfolio-items.col-2 .pf-item,
  .portfolio-area .portfolio-items.col-3 .pf-item,
  .portfolio-area .portfolio-items.col-4 .pf-item,
  .portfolio-area .portfolio-items .pf-item.width {
    width: 50%;
  }

  .portfolio-details-area .right-info {
    margin-top: 30px;
    padding-left: 15px;
  }

  /* Contact */
  .contact-area .right-info {
    margin-top: 40px;
    padding-left: 15px;
  }


  /* Footer */
  footer {
    text-align: center;
    line-height: inherit;
  }

  footer .text-left, 
  footer .text-right {
    text-align: center;
  }

  footer .logo {
    margin-bottom: 20px;
  }

  footer.centerd .logo {
    margin-bottom: 20px;
  }

  footer.centerd .copyright {
    margin-top: 20px;
    padding-top: 20px;
  }

  footer .copyright.border {
    margin-top: 20px;
  }

  footer .menu {
    margin-bottom: 20px;
  }

  footer p {
    line-height: inherit;
  }

  footer.copyright-center .footer-social {
    margin-top: 20px;
  }

  footer.centerd .menu {
    margin-bottom: 0;
  }
}


/* Mobile Layout: 320px. */
@media only screen and (max-width: 767px) {

  /* Heading */
  h1 {
    font-size: 36px;
  }

  h2 {
    font-size: 26px;
  }

  h3 {
    font-size: 20px;
  }

  h4 {
    font-size: 18px;
    line-height: 1.4;
  }

  h5 {
    font-size: 16px;
    line-height: 1.4;
  }

  h6 {
    font-size: 14px;
    line-height: 1.4;
  }

  .default-padding {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .padding-xl {
    padding-bottom: 50px;
    padding-top: 50px;
  }

  .default-padding.bottom-less {
    padding-bottom: 20px;
    padding-top: 50px;
  }

  .default-padding-bottom {
    padding-bottom: 50px;
  }

  .default-padding-top {
    padding-top: 50px;
  }

  .default-padding.bottom-30 {
    padding-bottom: 0;
    padding-top: 50px;
  }

  .default-padding.bottom-20 {
    padding-bottom: 20px;
    padding-top: 50px;
  }

  .page-heading {
    padding: 50px 0;
  }

  .site-heading {
    margin-bottom: 30px;
  }

  .site-heading.center-mobile {
    text-align: center;
  }

  .site-heading.center-mobile h2::before {
    left: 50%;
    margin-left: -10px;
  }

  .site-heading.center-mobile h2::after {
    left: 50%;
    margin-left: -40px;
  }

  .carousel-shadow .site-heading {
    margin-bottom: 15px;
  }

  /* Breadcrumb */
  .page-heading h1 {
    font-size: 36px;
  }

  /* Side Nav */
  .side {
    padding: 50px 30px;
    width: 320px;
  }

  /* Banner */

  .banner-area.navbar-transparent .content {
    margin-top: 60px;
  }

  .banner-area.content-shadow .content {
    padding: 30px;
  }

  .banner-area, .banner-area div {
    height: auto;
  }

  .banner-area .box-cell {
    padding: 100px 0 !important;
  }

  .banner-area.text-normal h1 {
    font-size: 36px;
    margin-bottom: 20px;
  }

  .banner-area.content-shadow h1 {
    font-size: 36px;
    line-height: 1.2;
  }

  .banner-area.content-shadow h2 {
    font-size: 26px;
  }

  .banner-area.heading-only h2 {
    font-weight: 400;
    line-height: 1.2;
  }

  .banner-area.typed-text h1 {
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 20px;
  }

  .banner-area.typed-text a {
    margin-top: 15px;
  }

  .banner-area.large-heading h1 {
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 20px;
  }

  .banner-area.large-heading a {
    margin-top: 15px;
  }

  .banner-area.content-shadow.text-normal h1 {
    font-size: 36px;
  }

  .banner-area.auto-height h1 {
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 20px;
  }


  /* About */
  .about-area .right-info {
    padding-left: 15px;
    margin-top: 30px;
  }

  .about-area.about-us .left-info .thumb {
    margin-bottom: 15px;
  }

  .about-area.about-us .left-info .thumb:last-child {
    margin-bottom: 0;
  }


  /* Services */
  .services-area .services-carousel .item {
    text-align: center;
  }

  .services-area .services-carousel.services-items .owl-nav {
    text-align: center;
  }


  /* Portfolio */
  .portfolio-area.default-padding {
    padding-bottom: 35px;
  }

  .portfolio-area .portfolio-items .pf-item,
  .portfolio-area .portfolio-items.col-2 .pf-item,
  .portfolio-area .portfolio-items.col-3 .pf-item,
  .portfolio-area .portfolio-items.col-4 .pf-item,
  .portfolio-area .portfolio-items .pf-item.width {
    width: 100%;
  }

  .mix-item-menu {
    text-align: center;
  }

  .mix-item-menu.text-left button {
    margin-right: 0;
    padding: 10px;
  }

  .mix-item-menu.active-border button.active::after {
    left: 50%;
    margin-left: -15px;
  }

  .mix-item-menu.category-count button.active::after {
    display: none;
  }

  .mix-item-menu.category-count button {
    margin-bottom: 0 !important;
  }

  .mix-item-menu.category-count button {
    padding: 10px 25px;
  }

  .portfolio-details-area .right-info {
    margin-top: 30px;
    padding-left: 15px;
  }

  .related-projects .owl-dots {
    margin-bottom: -15px;
  }

  .mix-item-menu.dots button::after {
    display: none;
  }

  .mix-item-menu.dots button {
    padding: 10px;
  }

  /* Team */
  .team-area .team-items .owl-dots {
    margin-bottom: -15px;
    margin-top: 10px !important;
  }

  /* Fun Factor */
  .fun-factor-area.bottom-less.default-padding {
    padding-bottom: 15px;
  }

  .fun-factor-area .item {
    margin-bottom: 35px;
  }

  /* Clients */
  .clients-area .clients-items.clients-carousel .owl-dots {
    margin-bottom: -15px;
    margin-top: 20px;
  }

  .clients-area .clients-items .owl-nav .owl-prev, 
  .clients-area .clients-items .owl-nav .owl-next {
    left: 0px;
  }

  .clients-area .clients-items .owl-nav .owl-next {
    left: auto;
    right: 0px;
  }


  /* Contact */
  .contact-area .right-info {
    margin-top: 40px;
    padding-left: 15px;
  }

  .google-maps-area iframe {
    height: 300px;
  }

  /* Error Page */
  .error-page-area h1 {
    font-size: 120px;
    line-height: 90px;
    margin-bottom: 30px;
  }


  /* Footer */
  footer {
    text-align: center;
    line-height: inherit;
  }

  footer .text-left, 
  footer .text-right {
    text-align: center;
  }

  footer .logo {
    margin-bottom: 20px;
  }

  footer.centerd .logo {
    margin-bottom: 20px;
  }

  footer.centerd .copyright {
    margin-top: 20px;
    padding-top: 20px;
  }

  footer .copyright.border {
    margin-top: 20px;
  }

  footer .menu li a::after {
    display: none;
  }

  footer .menu {
    margin-bottom: 20px;
  }

  footer .menu li a {
    padding: 0 8px;
  }

  footer p {
    line-height: inherit;
  }

  footer.copyright-center .footer-social {
    margin-top: 20px;
  }

  footer.centerd .menu {
    margin-bottom: 0;
  }
}

/* Wide Mobile Layout: 480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {
  /* Enter you required code here (if necessary)*/
}

/* Large Mobile Layout: 580px. */
@media only screen and (min-width: 580px) and (max-width: 767px) {

  .portfolio-area .portfolio-items .pf-item,
  .portfolio-area .portfolio-items.col-2 .pf-item,
  .portfolio-area .portfolio-items.col-3 .pf-item,
  .portfolio-area .portfolio-items.col-4 .pf-item,
  .portfolio-area .portfolio-items .pf-item.width {
    width: 50%;
  }
}