@media only screen and (max-width: 1440px) {
  .blog-section-sidebar {
    display: none;
  }
  .blog-section-content {
    flex-basis: 100%;
  }
  .service-section {
    padding: 0;
  }

}
@media only screen and (max-width: 1024px) {
  .service-card-container {
    flex-basis: 45%;
  }
  .clients-carousel {
    width: 80%;
    flex-wrap: wrap;
  }
  .client-card {
    flex-basis: 24%;
  }
  .mini-portfolio-section.portfolio-section > .mini-portfolio-container > .mini-portfolio-card {
  	height: 300px;
  }
  .hero-section-content {
    width: 95%;
    margin-left:auto;
    margin-right:auto;
  }
  .blog-overview-card-image {
    height: 200px;
  }
  .blog-overview-card {
    margin-bottom: 60px;
  }
  .contact-section {
    flex-direction: column;
    margin-bottom: -51px;
  }
  .map-section {
    order: 2;
    height: 300px;
  }
  .service-info-container {
    width: 90%;
  }
  .blog-view-container {
    width: 70%;
  }
  .recommended-blog-image {
    height: 120px;
  }
  .recommended-blog-card h3 {
    font-size: 1em;
  }
  .project-info-container {
    width: 80%;
  }
}
@media only screen and (max-width: 768px) {
  .main-menu {
    display: none;
  }
  .mobile-menu {
    display: block;
    margin-top: -15px;
  }
  .logo img {
    height: 30px;
  }
  .hero-section-content h3 {
    font-size: 3em;
  }
  .hero-section-content p {
    font-size: 1em;
  }
  .service-title p {
    font-size: 1em;
  }
  .services-section-container {
    width: 90%;
  }
  .mini-portfolio-container {
    height: 75vh;
  }
  .client-card {
    height: 80px;
    width: 80px;
  }
  .clients-carousel {
    padding-bottom: 20px;
  }
  .mini-portfolio-section.portfolio-section > .mini-portfolio-container > .mini-portfolio-card {
  	height: 250px;
  }
  .about-us-content {
    width: 80%;
  }
  .about-us-container {
    width: 80%;
   }
   .blog-overview-card {
     flex-basis: 90%;
   }
   .blog-overview-card-image {
     height: 250px;
   }
  .blog-view-container {
    padding-top: 0;
    width: 80%;
  }
  .blog-header-image {
    height: 400px;
  }
}
@media only screen and (max-width: 425px) {
  .hero-section-content h3 {
     font-size: 2em;
  }
  .hero-section-content p {
    font-size: 0.8em;
    line-height: 1.3;
  }
  .services-section-container {
    padding-top: 40px;
  }
  .service-card-container {
    flex-basis: 95%;
    margin-bottom: 40px;
  }
  .mini-portfolio-container {
    height: 100vh;
    flex-direction: column;
  }
  .mini-portfolio-card {
    flex-basis: 25%;
  }
  .clients-carousel {
    margin-top: 20px;
  }
  .clients-carousel {
    width: 95%;
  }
  .client-card {
    height: 50px;
    width: 50px;
    margin-bottom: 40px;
  }
  .call-to-action-box h3 {
    font-size: 1.2em;
  }
  .footer-section-container {
    width: 90%;
    flex-direction: column;
  }
  .footer-section-container > div {
    margin-bottom: 10px;
  }
  .footer-links-menu p {
    font-size: 0.9em;
  }
  .logo img {
    height: 25px;
  }
  .hero-section {
    height: 80vh;
  }
  .blog-section-container {
    width: 90%;
  }
  .blog-overview-card {
    flex-basis: 100%;
  }
  .contact-section {
    margin-bottom: 0;
  }
  .contact-details {
    text-align: center;
  }
  .get-in-touch {
    justify-content: center;
  }
  .get-in-touch > div {
    margin-bottom: 15px;
  }
  .get-in-touch h3:after {
    right:0;
    margin-left:auto;
    margin-right: auto;
  }
  .service-info-container {
    width: auto;
  }
  .sub-services {
    flex-direction: column;
  }
  .blog-title-header > h3 {
    font-size: 1.5em;
  }
  .blog-header-image {
    height: 200px;
  }
  .blog-view-content p {
    font-size: 0.9em;
  }
  .recommended-container {
    flex-wrap: wrap;
  }
  .recommended-blog-card {
    flex-basis: 49%;
    margin-bottom: 20px;
  }
  .recommended-blog-image {
    height: 100px;
  }
  .project-info-container {
    width: 90%;
  }
  .project-info-nav {
    padding: 20px;
  }
}
@media only screen and (max-width: 375px) {
  .blog-overview-card-image {
    height: 200px;
  }
  .blog-overview-card {
    margin-bottom: 40px;
  }
  .project-info-client {
    flex-direction: column;
    text-align: center;
  }
  .project-info-nav {
    padding: 20px 0 20px 0;
  }
}
@media only screen and (max-width: 325px) {
  .mini-portfolio-section.portfolio-section > .mini-portfolio-container > .mini-portfolio-card {
  	height: 200px;
  }
  .recommended-container {
    flex-direction: column;
  }
  .recommended-blog-image {
    height: 150px;
  }
  .client-card {
    flex-basis: 50%;
  }
}