/*  MAKE LAYOUT RESPONSIVE at 480px FOR IPHONE LANDSCAPE ============================================ */


	@media only screen and (max-width: 480px) {
		
		.ccm-image-block {
			max-width:100%;
			height:auto
		}
		
		.sidebars h1 {
			display:none;
		}
		.right {
			padding-top:0;
		}
		
		.col { 
			margin: 1% 0 1% 0%;
		}
		.header-desktop {
			display:none !important;
		}
		.header-mobile {
			display:block !important;
			padding:20px;
			background: #F5F3E1;
		}
		
		.header-mobile h1 {
		font-size:3.4em;	
		text-align:center;
		}
		
		header {
			display:none !important;
		}
		
		ul.nav {
		display:none;
		}

		.slicknav_menu {
			display:block;
		}
	
	.col { 
		margin: 1% 0 1% 0%;
	}
	
	.desktop {
		display:none;
	}
	
	.mobile {
		display:block !important;
	}

  /* For landscape layouts only */
	
		header {
			width: 100%; /* 450px / 480px */
		}


		#maincontent{
			width: 100%; /* 450px / 480px */
		}
		
	
		.maincontent{
			width: 100%; /* 450px / 480px */
		}
		
		
		footer {
			width: 100%; /* 450px / 480px */
		}
		
		
/* MOBILE COLUMN ADJUSTMENTS */

.span_1_of_4, .span_2_of_4 {
	margin-top:0;
	padding:0;
	width: 100%; 
	margin-left: 0;
}

.section {
	padding:0 20px;
	background: #F5F3E1;
	background-image:none;
}

.header-desktop {
	display:none;
}

	.span_4_of_4 {
		width: 100%; 
	}
	.span_3_of_4 {
		width: 100%; 
	}
	.span_2_of_4 {
		width: 100%; 
	}
	.span_1_of_4 {
		width: 100%; 
	}
		
}