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

[ 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: 992px) {
    
        .menu_hakkinda {
  padding-inline-start: 7px;
  z-index:1000 ;
  position:fixed;
  top:0;
  opacity: 0.8;
  background-color: #1a1b23;
  font-family: "Varela Round", sans-serif;    
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  height: 50px;
  list-style: none;
}

.menu_hakkinda li {
  padding: 8px;
  width: 25%;
  height: 50px;
  transition: background-position-x 0.9s linear;
  text-align: center;
}
.menu_hakkinda li a {
  font-size: 22px;
  color: #777;
  text-decoration: none;
  transition: all 0.45s;
}
.menu_hakkinda li:hover {
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEi%0D%0AIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhs%0D%0AaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0%0D%0AaD0iMzkwcHgiIGhlaWdodD0iNTBweCIgdmlld0JveD0iMCAwIDM5MCA1MCIgZW5hYmxlLWJhY2tn%0D%0Acm91bmQ9Im5ldyAwIDAgMzkwIDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggZmlsbD0i%0D%0Abm9uZSIgc3Ryb2tlPSIjZDk0ZjVjIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGlt%0D%0AaXQ9IjEwIiBkPSJNMCw0Ny41ODVjMCwwLDk3LjUsMCwxMzAsMAoJYzEzLjc1LDAsMjguNzQtMzgu%0D%0ANzc4LDQ2LjE2OC0xOS40MTZDMTkyLjY2OSw0Ni41LDI0My42MDMsNDcuNTg1LDI2MCw0Ny41ODVj%0D%0AMzEuODIxLDAsMTMwLDAsMTMwLDAiLz4KPC9zdmc+Cg==");
  -webkit-animation: line 1s;
          animation: line 1s;
}
.menu_hakkinda li:hover a {
  color: #d94f5c;
}



@-webkit-keyframes line {
  0% {
    background-position-x: 390px;
  }
}

@keyframes line {
  0% {
    background-position-x: 390px;
  }
}

    
    h1 {
        font-size: 45px;
    }
    
    h2 {
        font-size: 27px;
    }
    
    .close-btn {
    	width: 30px;
    	height: 30px;
        background: url(../images/icon/close_sm.png);
        background-size: cover;
    }
    
    .image-container {
        height: 500px;
        position: relative;
    }
    
    .content-container {
        left: 0;
    }
    
    .main-heading {
        top: 50%;
        transform: translateY(-50%);
    }
    
}

@media only screen and (max-width: 768px) {
    .menu_hakkinda {
  padding-inline-start: 7px;
  z-index:1000 ;
  position:fixed;
  top:0;
  opacity: 0.8;
  background-color: #1a1b23;
  font-family: "Varela Round", sans-serif;    
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  height: 50px;
  list-style: none;
}

.menu_hakkinda li {
  padding: 8px;
  width: 25%;
  height: 50px;
  transition: background-position-x 0.9s linear;
  text-align: center;
}
.menu_hakkinda li a {
  font-size: 22px;
  color: #777;
  text-decoration: none;
  transition: all 0.45s;
}
.menu_hakkinda li:hover {
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEi%0D%0AIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhs%0D%0AaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0%0D%0AaD0iMzkwcHgiIGhlaWdodD0iNTBweCIgdmlld0JveD0iMCAwIDM5MCA1MCIgZW5hYmxlLWJhY2tn%0D%0Acm91bmQ9Im5ldyAwIDAgMzkwIDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggZmlsbD0i%0D%0Abm9uZSIgc3Ryb2tlPSIjZDk0ZjVjIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGlt%0D%0AaXQ9IjEwIiBkPSJNMCw0Ny41ODVjMCwwLDk3LjUsMCwxMzAsMAoJYzEzLjc1LDAsMjguNzQtMzgu%0D%0ANzc4LDQ2LjE2OC0xOS40MTZDMTkyLjY2OSw0Ni41LDI0My42MDMsNDcuNTg1LDI2MCw0Ny41ODVj%0D%0AMzEuODIxLDAsMTMwLDAsMTMwLDAiLz4KPC9zdmc+Cg==");
  -webkit-animation: line 1s;
          animation: line 1s;
}
.menu_hakkinda li:hover a {
  color: #d94f5c;
}



@-webkit-keyframes line {
  0% {
    background-position-x: 390px;
  }
}

@keyframes line {
  0% {
    background-position-x: 390px;
  }
}
    
    
    
    
    
    
    
    
    
    
    
    

    
    h1 {
        font-size: 36px;
    }
    
    h2 {
        font-size: 18px;
    }

    .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;
    }
    
}

@media only screen and (max-width: 480px) {
    

    
    .intro-content h1 {
        font-size: 30px;
    }
    
    .intro-content h2 {
        font-size: 20px;
    }
    
    .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;
    }
    
}