/* ================================================================
	PAGE LAYOUT & STRUCTURE
   ================================================================ 
   
Media Queries:	
	
@media screen and (min-width: 769px), print {}
@media screen and (min-width: 1068px) {}
@media screen and (min-width: 1260px) {}
@media screen and (min-width: 1452px) {}	

Customisation Options:

Margins - 24px (Column content will use left/right of 12px).

*/


/* General  
   ===================================================== */
   
.is-left {
	float: left;
}

.is-right {
	float: right;
}

/* Centres variable number of columns in a row with text-align:centre */	
.not-floated {
    display: inline-block;
    float: none;
}

.text-left {
	text-align: left;
}
   
.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.is-screen-height {
	height: 100vh;
}

@media screen and (max-width: 899px) {
	.mobile-text-left {
		text-align: left;
	}
	   
	.mobile-text-center {
		text-align: center;
	}
	
	.mobile-text-right {
		text-align: right;
	}
}
   
/* Container 
   ===================================================== */

.container {
	position:relative;
    margin: 0 24px;
    width: auto;
}

@media screen and (min-width: 769px), print {
 	.container.is-restricted {
	 	max-width: 720px;
	 	margin: 0 auto;
 	}
}

@media screen and (min-width: 1068px) {
 	.container.is-restricted {
	 	max-width: 960px;
	 	margin: 0 auto;
 	}
}

@media screen and (min-width: 1260px) {
 	.container.is-restricted {
	 	max-width: 1152px;
	 	margin: 0 auto;
 	}
}

@media screen and (min-width: 1452px) {
 	.container.is-restricted {
	 	max-width: 1344px;
	 	margin: 0 auto;
 	}
}

.container.no-margin {
	margin: 0;
}
   
/* Rows 
   ===================================================== */

.row {
	margin-bottom: 24px;
}

.row.is-gapless, .row.no-margin, .row .column:last-child, .no-margin  {
	margin-bottom: 0 !important;
} 

.row.is-gapless .column {
	margin-bottom: 0;
}

.row.has-large-gap {
	margin-bottom: 50px;
}

   
/* Grid 
   ===================================================== */
   
.column {
	margin-bottom: 24px;
	position: relative;
	width: 100%;
}
.column.no-margin {
	margin-bottom: 0;
}

@media screen and (min-width: 900px), print {
	.column {
		margin-bottom: 0;
	}	
}

/* Default mobile column sizes */

.mobile-one-half {
	width: 50%;
}

.mobile-one-quarter {
	width: 25%;
}

.mobile-three-quarter, .mobile-three-quarters {
	width: 75%;
}

.mobile-one-third {
	width: 33.33333333%;
}

.mobile-two-third, .mobile-two-thirds {
	width: 66.6666666%
}

.show-on-mobile {
	display: block;
}
.hide-on-mobile {
	display: none;
}
.hide-on-tablet {
	display: none;
}

/* Default tablet column sizes */

@media screen and (min-width: 641px) {
	.tablet-one-half {
		width: 50%;
	}
	
	.tablet-one-quarter {
		width: 25%;
	}
	
	.tablet-three-quarter, .tablet-three-quarters {
		width: 75%;
	}
	
	.tablet-one-third {
		width: 33.33333333%;
	}
	
	.tablet-two-third, .tablet-two-thirds {
		width: 66.6666666%
	}
	
	.show-on-mobile {
		display: none;
	}
	
	.show-on-tablets {
		display: block;
	}
	.hide-on-mobile {
		display: inline-block;
	}
	.hide-on-tablet {
		display: none;
	}
	.show-on-mobile {
		display: none !important;
	}
	
}

/* Default small screen column sizes */

@media screen and (min-width: 900px) and (max-width: 1067px) {
	.small-screen-one-half {
		width: 50% !important;
		margin-bottom: 24px;
	}
	
	.small-screen-one-quarter {
		width: 25% !important;
		margin-bottom: 24px;
	}
	
	.small-screen-three-quarter, .small-screen-three-quarters {
		width: 75% !important;
		margin-bottom: 24px;
	}
	
	.small-screen-one-third {
		width: 33.33333333% !important;
		margin-bottom: 24px;
	}
	
	.small-screen-two-third, .small-screen-two-thirds {
		width: 66.6666666% !important;
		margin-bottom: 24px;
	}
	.hide-on-tablet {
		display: inline-block;
	}
}

/* Default desktop column sizes */

@media screen and (min-width: 900px), print {
	
	.hide-on-tablet {
		display: inline-block;
	}
	.show-on-tablets {
		display: none;
	}
	.one-half {
		width: 50%;
	}
	
	.one-quarter {
		width: 25%;
	}
	
	.three-quarter, .three-quarters {
		width: 75%;
	}
	
	.one-third {
		width: 33.33333333%;
	}
	
	.two-third, .two-thirds {
		width: 66.6666666%
	}
	
	.one-fifth {
		width: 20%;
	}
	
	.two-fifth, .two-fifths {
		width: 40%;
	}
	
	.three-fifth, .three-fifths {
		width: 60%;
	}
	
	.four-fifth, .four-fifths {
		width: 80%;
	}
	   
	.one-sixth {
		width: 16.6667%;
	}
	
	.two-sixth, .two-sixths {
		width: 33.3334%;
	}
	
	.three-sixth, .three-sixths {
		width: 50%;
	}
	
	.four-sixth, .four-sixths {
		width: 66.6668%;
	}
	
	.five-sixth, .five-sixths {
		width: 83.3335%;
	}
	
	.one-eighth {
		width: 12.5%;
	}

	/* Offsets for centering smaller comments */
	
	.one-quarter.is-centered {
		margin-left: 37.5%;
	}
	
	.one-third.is-centered {
		margin-left: 33.333%;
	}
	
	.one-half.is-centered {
		margin-left: 25%;
	}
	
	.two-thirds.is-centered {
		margin-left: 16.66665%;
	}
	.three-quarters.is-centered {
		margin-left: 12.5%;
	}
	.four-fifths.is-centered {
		margin-left: 10%;
	}
	.five-sixths.is-centered {
		margin-left: 8.33335%;
	}
	.seven-eigths.is-centered {
		margin-left: 6.25%;
	}
	
	.is-offset-5 {
		margin-left: 5%;
	}
	
	.is-offset-10 {
		margin-left: 10%;
	}
	
	.is-offset-25 {
		margin-left: 25%;
	}
	
	.is-offset-33 {
		margin-left: 33.3333%;
	}
	
	.is-offset-50 {
		margin-left: 50%;
	}
	
	.is-offset-66 {
		margin-left: 66.6667%;
	}
	
	.is-offset-75 {
		margin-left: 75%;
	}
	
	.is-max-75 {
		max-width: 75%;
	}
	
	.is-max-25 {
		max-width: 25%;
	}
	
	.column .content {
		margin: 0 12px;
		position: relative;
	}

}	
	.column .content {
		margin: 0 12px;
		position: relative;
	}
	.column .page-content {
		margin: 0 24px 0 0;
		position: relative;
	}
	


/* Clearing 
   ===================================================== */ 
   
.container:after {
	content:"\0020";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

.clearfix:before,.clearfix:after,.row:before,.row:after {
	content:'\0020';
	display:block;
	overflow:hidden;
	visibility:hidden;
	width:0;
	height:0;
}

.row:after,.clearfix:after {
	clear:both;
}

.row,.clearfix {
	zoom:1;
}

.clear {
	clear:both;
	display:block;
	overflow:hidden;
	visibility:hidden;
	width:0;
	height:0;
}