@media screen and (max-width: 1224px) {
	
	.navigation a {
    font-size: 16px;
    margin-left: 20px; }
	
}

@media screen and (max-width: 1024px) {
  #header .header-content {
    width: 90%; }
	
		#header h1 {
  font-size: 35px ;
    }


   #header h2 {
  font-size: 25px;
  margin-left: 280px;
   }
   
   #header .logo {
	padding-right: 10px; 
	}

  .nav-toggle {
    display: block; }

  .navigation {
    position: fixed;
    background-color: #000;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99999;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
    transition: opacity 0.5s, visibility 0s 0.5s; }
    .navigation .primary-nav {
      position: relative;
      top: 45%;
      -moz-transform: translateY(-45%);
      -ms-transform: translateY(-45%);
      -webkit-transform: translateY(-45%);
      transform: translateY(-45%); }
    .navigation li {
      display: block;
      margin-bottom: 20px; }
    
	
	.banner-text {
		width: 350px;
	}
  
  .banner-text h1 {
	font-size: 38px; }
	
  .banner-text p {
    font-size: 20px;
	}
	

  .person {
    margin: 0 auto 50px; }
    .person-content {
      text-align: center; }
    .person .social-icons li {
      display: inline-block;
      float: none;
      margin-bottom: 5px; }

  .flex-control-nav {
    bottom: 20px; } 
	
	}


@media screen and (max-width: 768px) {
  
  	#header h1 {
  font-size: 30px ;
   width: 85%;
    }

   #header h2 {
  font-size: 25px;
  margin-left: 10px;
   }
  
   
  .navigation a {
	 margin-left: 20px;
  }
  
  .banner {
  background-position: center top;
  min-height: 500px; }
  .banner-text {
     width: 300px; }
    .banner-text h1 {
      font-size: 30px; }
    .banner-text p {
      font-size: 18px; }
	  
	    .work .overlay {
    opacity: 1;
    }  
	
  .work-box .overlay h5, .work-box .overlay p {
    opacity: 1;
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
	
	.feature {
 width: 100%;}

  .flexslider {
    padding-bottom: 80px; }

  .flex-control-nav {
    width: 100%; }

  .footer .footer-col {
    margin-bottom: 50px; } 
    
    .grid-3-col {
    grid-template-columns: 1fr 1fr;}
	
	}


@media screen and (max-width: 640px) {
   #header h1 {
  font-size: 25px;
    width: 95%;
    }

   #header h2 {
  font-size: 20px;
  margin-left: 10px;
   }
   
  .banner {
  background-position: center top;
  min-height: 500px; }
  
  .banner-text {
    padding-top: 15%;
	 width: 320px; }
    .banner-text h1 {
      font-size: 30px; }
    .banner-text p {
      font-size: 18px;
	width: 280px;}
	  
	  .work .overlay {
    opacity: 1;
    }  
	
  .work-box .overlay h5, .work-box .overlay p {
    opacity: 1;
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }


    .grid-3-col {
    grid-template-columns: 1fr 1fr;}

}


@media screen and (max-width: 550px) {
	
	#header h1 {
  font-size: 25px ;
  width: 80%;
    }

   #header h2 {
  font-size: 20px;
  margin-left: 10px;
   }
    
   .grid-3-col {
    grid-template-columns: 1fr;}
    
    .grid-2-col {
    grid-template-columns: 1fr;}
	
}

@media screen and (max-width: 480px) {
	
	 #header h1 {
  font-size: 20px ;
   width: 85%;
    }

   #header h2 {
  font-size: 15px;
  margin-left: 10px;
   }
   
   .banner {
  background-position: center top;
  min-height: 320px; }
   
   .banner-text {
    padding-top: 12%;
	 width: 220px; }
    .banner-text h1 {
      font-size: 20px; }
    .banner-text p {
      font-size: 14px;
	width: 180px;}
	  
  .work .overlay {
    opacity: 1;
    }  
	
  .work-box .overlay h5, .work-box .overlay p {
    opacity: 1;
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
    
    .grid-3-col {
    grid-template-columns: 1fr;}
    
    .grid-2-col {
    grid-template-columns: 1fr;}
	  
}

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

 #header h1 {
  font-size: 20px;
    }
	
  #header h2 {
  font-size: 20px;
  margin-left: 10px;
   }
 
 	.banner-text h1 {
      font-size: 80px; } 
	  
	.banner-text p {
    font-size: 14px;
    margin-bottom: 80px;
	width: 150px;}


   .grid-3-col {
    grid-template-columns: 1fr;}
    
     .grid-2-col {
    grid-template-columns: 1fr;}
}

/*------ Make columns equal height ---------*/
@media only screen and (min-width : 481px) {
   .flex-row.row {
	 display: flex;
	 flex-wrap: wrap;
   }
   .flex-row.row > [class*='col-'] {
	 display: flex;
	 flex-direction: column;
   }
  .flex-row.row:after, 
  .flex-row.row:before {
	 display: flex;
  }
  
}