@media screen and (max-width: 480px){
	/*----- layout ----*/
  .parallax {
    background-attachment: scroll!important;
    background-position: top!important;
    -webkit-background-size: auto!important;
    -moz-background-size: auto!important;
    background-size: auto!important;
  }
	.grey-bg, .white-bg{
		padding: 40px 0; 
	}
  #work.white-bg {
    padding-bottom: 0;
  }
  .about-img {
    margin: 0;
  }
	/*---- hero -----*/
	.hero-content, .hero-content-video {
		min-width: 100%; 
		padding: 10px;
	}
  #home h1, #home-video h1 {
    font-size: 28px;
  }
  .menu, .menu-list {
    margin-top: 15px;
  }
  .menu-list a {
    width: 100%;
    padding: 1.4em 0;
  }
	.mouse-icon{
    bottom: 15px;
  }
  /*---- timeline -----*/
  .timeline-centered::before {
    margin-left: 50px;
  }
  .timeline-centered {
    margin: 15px;
  }
  .timeline-centered .timeline-entry .timeline-entry-inner {
    margin-left: 0;
  }
  /*---- services ----*/
  .services {
    margin-top: 0;
  }
  .box, .box-main {
    margin-bottom: 30px;
  }
	/*---- portfolio -----*/
	ul.portfolio-image li{
		width: 100%;
		padding-top: 95%;
	}
  /*---- interest ----*/
  .interest-box {
    margin-bottom: 20px;
  }
	/*---- blog -----*/
	.grid-item {
    width: 100% !important;
    padding: 0;
  }
  /*------- testimonial -------*/
  #testimonial{ 
    height: 700px;
  }
  .skillst {
    margin-top: 50px;
  }
  ul.social-network li {
    margin: 0 5px;
  }
  /*------ social ------*/
  .social-circle li a {
    font-size: 20px;
    width: 40px;
    height: 40px;
  }
  .social-circle li i {
    line-height: 40px;
  }
}

@media screen and (max-width: 768px){
	/*------- home ------*/
	#home p {
    width: 100%;
  }
	/*----- portfolio -----*/
	.portfolio-image > li{
		width: 50%;
	}
  /*------- about -------*/
  .bg-about{
    min-height: 520px;
  }
  .about-img {
    margin: 60px auto 0;
  }
  .wrap-about{
  	min-height: 520px;
  	padding-bottom: 10%;
  	padding-left: 30px;
    padding-right: 30px;
  }
  .wrap-about	.head-quote{
    padding-top: 10%;
  }
  .text-grey{
    margin-bottom: 45px;
  }
  .timeline-centered:before {
    margin-left: 50px!important;
  }
  .timeline-entry-inner {
    margin-left: 0!important;
  }
  .skillst{ 
    margin-top: 50px;
  }
  .filter-button {
    margin-right: 5px;
  }
	/*------ footer -----*/
  footer p{ text-align: center; }
  }