/* 
	24 COLUMN - RESPONSIVE GRID SYSTEM
	DEVELOPED BY DENIS LEBLANC
	URL - http://responsive.gs
	VERSION - 2.0
	LICENSED UNDER GPL & MIT
*/


/* 	SET ALL ELEMENTS BOX-SIZING TO BORDER-BOX
	If you need support for IE7 and lower use polyfill: https://github.com/Schepp/box-sizing-polyfill */
* { -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; }


/* MAIN CONTAINER */
.container { 
	position:relative;
	margin:0 auto;
	width: 95%;
	max-width:1220px;
	padding:0;
}


/* SELF CLEARING FLOATS - CLEARFIX METHOD */
.row:after, .col:after, .clr:after, .group:after { 
	content: ""; 
	display: block; 
	height: 1px; 
	clear: both; 
	visibility: hidden; }


/* DEFAULT ROW STYLES */
.row { margin-bottom: 1.5em; } /* set according to preference*/

							  
/* DEFAULT COLUMN STYLES */
.col { 
	display: block;
	float:left;
	width: 100%;
}


@media ( min-width : 819px ) {
	.col {
		margin-left: 2%;
	}
}


/* RESET MARGINS */
.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */


/* COLUMN WIDTH ON DISPLAYS +768px */
@media ( min-width : 819px ) {
	.span_1 { width: 2.25%; }
	.span_2 { width: 6.5%; }
	.span_3 { width: 10.75%; }
	.span_4 { width: 15.0%; }
	.span_5 { width: 19.25%; }
	.span_6 { width: 23.5%; }
	.span_7 { width: 27.75%; }
	.span_8 { width: 32.0%; }
	.span_9 { width: 36.25%; }
	.span_10 { width: 40.5%; }
	.span_11 { width: 44.75%; }
	.span_12 { width: 49.0%; }
	.span_13 { width: 53.25%; }
	.span_14 { width: 57.5%; }
	.span_15 { width: 61.75%; }
	.span_16 { width: 66.0%; }
	.span_17 { width: 70.25%; }
	.span_18 { width: 74.5%; }
	.span_19 { width: 78.75%; }
	.span_20 { width: 83.0%; }
	.span_21 { width: 87.25%; }
	.span_22 { width: 91.5%; }
	.span_23 { width: 95.75%; }
	.span_24 { width: 100%; }
	#hero-image{
		background:url('../img/hero-img.jpg') no-repeat center center;	
		height:680px;
		padding-top:50px;
	}
	.hero-text{
		width:40%;
		float:right;
		padding-left:0px;	
	}
	.hero-text h2{
		margin:30px 0 20px 0;	
	}
	#callouts.row{
		margin:0;
		padding:0;	
	}
	#callouts .col{
		transition:all linear .1s;
		background:#FFF;	
		height:260px;
	}	
	#callouts .col:hover{
		box-shadow:0px 0px 4px rgba(0,0,0,0.4);
		margin-top:-50px;
		transition-duration:.1s;
	}
	#callouts .button{
		display:none;	
		transition:all linear .2s;
	}
	#callouts .col:hover .button{
		display:inline-block;	
		transition-duration:.2s;
	}

	.desktop{
		display:block;	
	}
	.mobile{
		display:none;	
	}
	.page-content{
		padding-right:40px;	
	}
	.home #associations ul li{
		float:left;
		width:140px;	
	}
	#association-logos{
		padding:0 160px;
	}
}
@media ( max-width : 1400px ) {
	.col{margin-bottom:20px;}
}
@media ( max-width : 819px ) {
	.col{margin-bottom:20px;}
	#hero-image{
		background:url('../img/hero-img-small.jpg') no-repeat center center;	
		height:650px;
		padding-top:70px;
	}
	.hero-text{
		padding-top:60px;
		margin-bottom:30px;	
	}
	.desktop{
		display:none;	
	}
	.mobile{
		display:block;	
	}
	
}