/************************************************************************************
Bigger screens
*************************************************************************************/

@media screen and (min-width: 1600px) {

	
}




/************************************************************************************
iPad (specific tunning)
*************************************************************************************/

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
  
  
}



/************************************************************************************
smaller than 1300
*************************************************************************************/
@media screen and (max-width: 1300px) {
  
	/*===== Turning OFF stuff =====*/
	
	
  	/*===== Turning ON stuff =====*/
	
	
	/*===== Headings N font sizes =====*/
		
	
	/*===== Header stuff =====*/

	
	/*===== Layout stuff =====*/
	
	
	/*===== Content stuff =====*/
	
	
	/*===== Footer stuff =====*/
	

	

}




/************************************************************************************
smaller than 1080
*************************************************************************************/
@media screen and (max-width: 1080px) {
  
	/*===== Turning OFF stuff =====*/
	
	
  	/*===== Turning ON stuff =====*/
	
	
	/*===== Headings N font sizes =====*/
		
	
	/*===== Header stuff =====*/

	
	/*===== Layout stuff =====*/
	
	
	
	/*===== Content stuff =====*/
	
	
	/*===== Footer stuff =====*/
	

	

}





/************************************************************************************
smaller than 960
*************************************************************************************/
@media screen and (max-width: 960px) {
  
	/*===== Turning OFF stuff =====*/
	#header { display: none;}
	
  	/*===== Turning ON stuff =====*/
	
	
	/*===== Headings N font sizes =====*/

	
	/*===== Layout stuff =====*/
	.theWrapper, .theSmallWrapper { width: 90%;}
	
	
	/*===== Header stuff =====*/
	
	
	/*===== Content stuff =====*/
	

	
	/*===== Footer stuff =====*/
	#footer .colX4 { width: 30%; margin: 0 1.5%;}
	

	

}



/************************************************************************************
smaller than 768
*************************************************************************************/
@media screen and (max-width: 780px) {
  
	/*===== Turning OFF stuff =====*/
	
	
  	/*===== Turning ON stuff =====*/
	
	
	/*===== Headings N font sizes =====*/
		
	
	/*===== Header stuff =====*/
	
	
	/*===== Content stuff =====*/
	
	
	/*===== Footer stuff =====*/

	

	

}




/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {

  	/*===== Turning OFF stuff =====*/
	#header { display: none;}
	
  
  	/*===== Turning ON stuff =====*/
	
	
	/*===== Layout stuff =====*/
	.colX2, .colX3, .colX4 { width: 100%; margin: 20px auto; float: none; clear: both; overflow: hidden;}
	
	
	/*===== Header stuff =====*/


	/*===== Headings N texts =====*/
	body { font-size: 18px;}
	#ContentBox h2 { margin: 40px 0;}
	#ContentBox .colX2 h2 { margin: 0 0 40px 0;}
	
	.titleBox { width: 90%;}
	.titleBox h2 { font-size: 24px;}

	
	
	/*===== Home stuff =====*/
	#HeroBox img { opacity: 0.75;}
	#HeroContent { top: 15%; left: 0; right: 0; margin: 0 auto;}
	#HeroContent h1 { font-size: 28px;}
	#HeroContent h4 { font-size: 14px;}
	
	#c2a-Tag, #c2a-BTN { width: 100%; margin: 20px auto; float: none; clear: both;}
	
	
	/*===== Content stuff =====*/
	
	
	/*===== Empresa stuff =====*/
	#team-Intro, #team-sidePic { width: 100%; margin: 20px auto; float: none; clear: both;}
	
	
	
	/*===== Projects stuff =====*/
	#ProjectFacts, #ProjectSlides { width: 100%; margin: 20px auto; float: none; clear: both;}
	.theProject { width: 100%; margin: 20px 0; float: none; clear: both;}
	
	
	/*===== Services stuff =====*/
	
	
	/*===== Footer stuff =====*/
	#footer .colX4 { width: 100%;}



	

}

/************************************************************************************
smaller than 560
*************************************************************************************/
@media screen and (max-width: 480px) {

  /* disable webkit text size adjust (for iPhone) */
  html {
    -webkit-text-size-adjust: none;
  }

}