/*
--------------------------------------------------------

[ INSTA , Responsive Stylesheet ]

  Template Name : INSTA - Responsive Onepage Resume Template
  
  Version       :  1.0 
  
  Author        :  Pixel_Factory
  
  Author URI    :  http://themeforest.net/user/Pixel_Factory
  
  Author Email  : h.nafees.anwar@gmail.com

--------------------------------------------------------
*/
@media only screen and (max-width: 1199px) {
  .services {
    width: 50%;
  }

  .col-lg-6 {
    width: 50%;
  }
  .col-md-8 {
    width: 50%;
  }
  .col-sm-6 {
    width: 50%;
  }

  .home-page .image-container {
    width: 100vw;
    height: 100%;
  }
}

@media only screen and (max-width: 992px) {
  h1 {
    font-size: 130px;
  }

  .intro-content h2 {
    font-size: 26px;
    transform: translateY(-150%);
  }

  .close-btn {
    width: 30px;
    height: 30px;
    background: url(../images/icon/close_sm.png);
    background-size: cover;
  }

  .image-container {
    height: 500px;
    position: relative;
    background-size: cover;
  }

  .content-container {
    left: 0;
  }

  .main-heading {
    top: 90%;
    transform: translateY(-50%);
  }

  .home-page .image-container {
    width: 100vw;
    height: 100%;
  }

  .intro-content {
    top: 0%;
  }
}

@media only screen and (max-width: 768px) {
  .services {
    width: 49%;
    display: inline-block;
  }

  .col-lg-6 {
    width: 49%;
  }
  .col-md-8 {
    width: 49%;
  }
  .col-sm-6 {
    width: 49%;
  }

  .margin-bottom {
    margin-bottom: 40px;
  }

  h1 {
    font-size: 100px;
  }

  .intro-content h2 {
    font-size: 20px;
  }

  .heading h3 {
    font-size: 13px;
  }

  .main-heading h1:after {
    width: 250px;
  }

  .story-content div {
    margin-top: 20px;
  }

  .education-container:before,
  .experience-container:before {
    display: none;
  }

  .education-content,
  .experience-content {
    width: 100%;
    margin-left: 0;
  }

  .education-content h3,
  .experience-content h3 {
    text-align: center;
  }

  .education-content h3:before,
  .experience-content h3:before {
    display: none;
  }

  .google-map {
    height: 500px;
  }
  .intro-content {
    top: -50%;
  }
}

@media only screen and (max-width: 480px) {
  .services {
    width: 100%;
    display: block;
    padding-bottom: 20px;
  }

  .col-lg-6 {
    width: 100%;
    padding-bottom: 20px;
  }
  .col-md-8 {
    width: 100%;
    padding-bottom: 20px;
  }
  .col-sm-6 {
    width: 100%;
    padding-bottom: 20px;
  }

  .margin-bottom {
    margin-bottom: 40px;
  }

  .intro-content h1 {
    font-size: 90px;
  }

  .intro-content h2 {
    font-size: 18px;
    transform: translateY(-150%);
  }

  .main-heading {
    padding-left: 20px;
  }

  .main-heading h1:after {
    height: 3px;
  }

  .image-container {
    height: 300px;
  }

  .story-content div a {
    display: block;
    float: none;
    margin: 5px;
  }

  .contact-form button {
    width: 100%;
  }

  .project .buttons a {
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 0;
    font-size: 12px;
  }
}