/*
SgComponents v3.0.0-alpha.1
Base styling rules for Spurgate websites
CSS written to loosely fit the SMACSS specification and utilize BEM naming principles
Spurgate Ltd 2016-2018
*/

/*LOGO COLOUR: #263238 (BLUE-GREY VARIANT), #ff6d00 (ORANGE VARIANT)*?

/*------------------ BASE ------------------*/
/*default rules for the page*/

	html {
		font-family: 'Source Sans Pro', sans-serif;
		font-size: 62.5%;
	}

	html, body {
		height: 100%;
	}

	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	/*--------- typography ---------*/

	p {
		font-size: 1.6rem;
		line-height: 22px;
		margin: 0 0 10px;
	}

	small {
		font-size: 75%;
	}

	a {
		font-size: 1.6rem;
		color: #ff6d00;
	}

	a:hover {
		color: #263238;
	}

	ul, ol, dl {
		margin-top: 0;
		margin-bottom: 10px;
		padding-left: 40px;
		display: block;
	}

	ol {
		list-style-type: decimal;
	 }

	ul {
		list-style-type: disc;
	}

	ul ul, ol ul, ul ol {
		margin-bottom: 0;
		list-style-type: circle;
	}

	li {
		display: list-item;
		font-size: 1.6rem;
	}

	h1 {
		font-size: 5.6rem;
	}

	h2 {
		font-size: 4.8rem;
	}

	h3 {
		font-size: 4rem;
	}

	h4 {
		font-size: 3.2rem;
	}

	h5 {
		font-size: 2.4rem;
	}

	h6 {
		font-size: 1.6rem;
	}

	h1, h2, h3 {
		line-height: 60px;
		font-weight: 600;
		padding: 16px 0 8px 0;
	}

	h4, h5, h6 {
		line-height: 40px;
		font-weight: 600;
		padding: 8px 0 8px 0;
	}


	code {
		padding: 0 5px;
		font-family: 'Source Code Pro',Menlo,monospace;
		font-size: 1.6rem;
		background-color: #E9ECEF;
	}

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

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

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

	.sgc-text-justify {
		text-align: justify;
	}

	.sgc-text-lowercase {
		text-transform: lowercase;
	}

	.sgc-text-uppercase {
		text-transform: uppercase;
	}

	.sgc-text-capitalize {
		text-transform: capitalize;
	}

	.sgc-text-bold {
		font-weight: bold;
	}

/*------------------ LAYOUT ------------------*/
/*sgc-sections that hold one or more modules together*/

	.sgc-container {
		padding-right: .9375rem;
		padding-left: .9375rem;
		margin-right: auto;
		margin-left: auto;
	}

	.sgc-container:before,
	.sgc-container:after,
	.sgc-section:before,
	.sgc-section:after,
	.sgc-nav:before,
	.sgc-nav:after {
	  display: table;
	  content: " ";
	}

	.sgc-container:after,
	.sgc-section:after,
	.sgc-nav:after {
	  clear: both;
	}

	.sgc-section {
		margin: 6rem 0 0 0;
	}

	.sgc-padding-sides {
		padding-left: 4rem;
		padding-right:4rem;
	}

	.sgc-padding-top {
		padding-top:  4rem;
	}

	.sgc-padding-bottom {
		padding-bottom: 4rem;
	}

	/*--------- navigation ---------*/

	/*--------- sgc-menu ---------*/

		.sgc-menu {
			position: absolute;
			margin-right: 25px;
			width: 100%;
			/*overflow: hidden;*/ /*Safari will only respect height of first div, treat rest as overflow and hide*/
			z-index: 999;
		}

		.sgc-menu--label {
			position: relative;
			display: block;
			text-align: right;
			color: #96284a;
			font-size: 2rem;
			font-weight: 600;
			cursor: pointer;
		}

		.sgc-menu--content {
			max-height: 0;
			margin-bottom: 1px;
			background: #f9f9f9;
			overflow: hidden;
		}

		.sgc-menu--content ul {
			padding: 20px 20px 0 20px;
			list-style-type: none;
		}

		.sgc-menu--content li {
			margin: 10px 10px 20px 10px;
		}

		.sgc-menu--content a {
			color:#fff;
			text-decoration: none;
		}

		input:checked ~ .sgc-menu--content {
			position: fixed;
			width: 100%;
			top: 0;
			left: 0;
			height: 125%;
			max-height: 125%;
			padding: 100px 2.5% 2.5% 2.5%;
			margin-right: auto;
			margin-left: auto;
			z-index: -1;
			overflow: hidden;
			-webkit-transition: max-height .35s;
			-o-transition: max-height .35s;
			transition: max-height .35s;
			background: rgba(0, 0, 0,0.9);
			color: #fff;
		}

		input:checked ~ .sgc-menu--label {
			color: #fff;
		}
		
/*------------------ MODULES ------------------*/
/*reusable parts of design, that sit inside layout components and other modules*/

	.hero {
		/*width: 100vw;*/
		height: 60vh;
		text-align: center;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		background-image: url(../images/hero.jpg);
		background-size: cover;
		background-position: 30% 60%;
		background-repeat: no-repeat;
		/*background-attachment: fixed;*/
	}

	.hero-content {
		flex: 1;
	}

	.sgc-accordian input, .sgc-menu input {
		position: absolute;
		opacity: 0;
		z-index: -1;
	}
		
	/*--------- sgc-box ---------*/

		.sgc-box {
			float: left;
			width: 100%;
		}

		.sgc-box--content {

			margin: 0;
			padding: 1rem;
			background: #f9f9f9;
		}

		.sgc-box--content ul {
		    padding: 20px 20px 0 20px;
			list-style-type: none;
		}
		
		.sgc-box--content li {		    
			padding-bottom: 20px;
			font-size: 1.6rem;
		}
		
		.sgc-box--label {
			margin: 0;
			padding: 1rem;
			background: #ececec;
		}
		
		.sgc-box p {
			line-height: 16px;
			margin: 0;
		}

		.footer-branding {
			max-width: 150px;
		}

		/*--------- sgc-accordian ---------*/

		.sgc-accordian {
			position: relative;
			margin-top: 2.5%;
			width: 100%;
			overflow: hidden;
		}

		.sgc-accordian ~ .sgc-accordian  {
			margin-top: 0;
		}

		.sgc-accordian--label {
			position: relative;
			display: block;
			padding: 0 0 0 1em;
			color: #96284a;
			font-size: 2rem;
			font-weight: 600;
			line-height: 3;
			cursor: pointer;
			background: #ececec;
		}

		.sgc-accordian--content {
			max-height: 0;
			margin-bottom: 1px;
			overflow: hidden;
			-webkit-transition: max-height .35s;
			-o-transition: max-height .35s;
			transition: max-height .35s;
			background: #f9f9f9;
		}

		.sgc-accordian--content ul {
			padding: 20px 20px 0 20px;
			list-style-type: none;
		}

		.sgc-accordian--content li {
			padding-bottom: 20px;
			font-size: 1.6rem;
		}

		.sgc-accordian label::after {
			position: absolute;
			right: 0;
			top: 0;
			display: block;
			width: 2.5em;
			/*height: 3em;
			line-height: 3;*/
			text-align: center;
			-webkit-transition: all .35s;
			-o-transition: all .35s;
			transition: all .35s;
		}
		
		input:checked ~ .sgc-accordian--content {
			max-height: 1000em;
		}

		input[type=checkbox] + .sgc-accordian--label::after {
			content: "\25BC";
		}

		input[type=checkbox]:checked + .sgc-accordian--label::after {
			transform: rotateX(180deg);
		}
		
		input[type=radio] + .sgc-accordian--label::after {
			content: "+";
		}

		input[type=radio]:checked + .sgc-accordian--label::after {
			transform: rotateX(180deg);
		}		
		
	/*--------- decoration ---------*/

	img	{
		max-width: 100%;
		height: auto;
		vertical-align: middle;
	}

	.brand img{
		width: 250px;
	}

	/*--------- backgrounds ---------*/

	/*--------- themes ---------*/

/*MEDIA QUERY < 47.999999em - widths now in px [em stated for reference] to cure display issues experienced with iPad Mini 4
/*@media (max-width: 47.999999em)*/

@media (max-width: 767.999999px) {
/*------------------ LAYOUT ------------------*/
/*sgc-sections that hold one or more modules together*/

	.sgc-container {
		max-width: 47.999999rem;
	}

	.sgc-col--xs-12 {
		width: 100%;
	}

	.sgc-col--xs-11 {
		width: 91.66666667%;
	}

	.sgc-col--xs-10 {
		width: 83.33333333%;
	}

	.sgc-col--xs-9 {
		width: 75%;
	}

	.sgc-col--xs-8 {
		width: 66.66666667%;
	}

	.sgc-col--xs-7 {
		width: 58.33333333%;
	}

	.sgc-col--xs-6 {
		width: 50%;
	}

	.sgc-col--xs-5 {
		width: 41.66666667%;
	}

	.sgc-col--xs-4 {
		width: 33.33333333%;
	}

	.sgc-col--xs-3 {
		width: 25%;
	}

	.sgc-col--xs-2 {
		width: 16.66666667%;
	}

	.sgc-col--xs-1 {
		width: 8.33333333%;
	}

	.sgc-grid--xs-12 {
		grid-template-columns: repeat(12, 1fr);
	}

	.sgc-grid--xs-11 {
		grid-template-columns: repeat(11, 1fr);
	}

	.sgc-grid--xs-10 {
		grid-template-columns: repeat(10, 1fr);
	}

	.sgc-grid--xs-9 {
		grid-template-columns: repeat(9, 1fr);
	}

	.sgc-grid--xs-8 {
		grid-template-columns: repeat(8, 1fr);
	}

	.sgc-grid--xs-7 {
		grid-template-columns: repeat(7, 1fr);
	}

	.sgc-grid--xs-6 {
		grid-template-columns: repeat(6, 1fr);
	}

	.sgc-grid--xs-5 {
		grid-template-columns: repeat(5, 1fr);
	}

	.sgc-grid--xs-4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.sgc-grid--xs-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.sgc-grid--xs-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.sgc-grid--xs-1 {
		grid-template-columns: repeat(1, 1fr);
	}

	/*--------- navigation ---------*/
	
		.sgc-menu--label {
			text-align: center;
			margin-top: -1rem;
		}
			
/*------------------ MODULES ------------------*/
/*reusable parts of design, that sit inside layout components and other modules*/

}

/*MEDIA QUERY > 48em - widths now in px [em stated for reference] to cure display issues experienced with iPad Mini 4
/*@media (min-width: 48em)*/

@media (min-width: 768px) {
/*------------------ LAYOUT ------------------*/
/*sgc-sections that hold one or more modules together*/

	.sgc-container {
		max-width: 45rem;
	}

	.sgc-col--sm-12 {
		width: 100%;
	}

	.sgc-col--sm-11 {
		width: 91.66666667%;
	}

	.sgc-col--sm-10 {
		width: 83.33333333%;
	}

	.sgc-col--sm-9 {
		width: 75%;
	}

	.sgc-col--sm-8 {
		width: 66.66666667%;
	}

	.sgc-col--sm-7 {
		width: 58.33333333%;
	}

	.sgc-col--sm-6 {
		width: 50%;
	}

	.sgc-col--sm-5 {
		width: 41.66666667%;
	}

	.sgc-col--sm-4 {
		width: 33.33333333%;
	}

	.sgc-col--sm-3 {
		width: 25%;
	}

	.sgc-col--sm-2 {
		width: 16.66666667%;
	}

	.sgc-col--sm-1 {
		width: 8.33333333%;
	}

	.sgc-grid--sm-12 {
		grid-template-columns: repeat(12, 1fr);
	}

	.sgc-grid--sm-11 {
		grid-template-columns: repeat(11, 1fr);
	}

	.sgc-grid--sm-10 {
		grid-template-columns: repeat(10, 1fr);
	}

	.sgc-grid--sm-9 {
		grid-template-columns: repeat(9, 1fr);
	}

	.sgc-grid--sm-8 {
		grid-template-columns: repeat(8, 1fr);
	}

	.sgc-grid--sm-7 {
		grid-template-columns: repeat(7, 1fr);
	}

	.sgc-grid--sm-6 {
		grid-template-columns: repeat(6, 1fr);
	}

	.sgc-grid--sm-5 {
		grid-template-columns: repeat(5, 1fr);
	}

	.sgc-grid--sm-4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.sgc-grid--sm-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.sgc-grid--sm-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.sgc-grid--sm-1 {
		grid-template-columns: repeat(1, 1fr);
	}

	/*--------- navigation ---------*/

		.sgc-menu--label {
			text-align: center;
		}
			
/*------------------ MODULES ------------------*/
/*reusable parts of design, that sit inside layout components and other modules*/

}

/*MEDIA QUERY > 62em - widths now in px [em stated for reference] to cure display issues experienced with iPad Mini 4
/*@media (min-width: 62em)*/

@media (min-width: 992px) {
/*------------------ LAYOUT ------------------*/
/*sgc-sections that hold one or more modules together*/

	.sgc-container {
		max-width: 60rem;
	}

	.sgc-col--md-12 {
		width: 100%;
	}

	.sgc-col--md-11 {
		width: 91.66666667%;
	}

	.sgc-col--md-10 {
		width: 83.33333333%;
	}

	.sgc-col--md-9 {
		width: 75%;
	}

	.sgc-col--md-8 {
		width: 66.66666667%;
	}

	.sgc-col--md-7 {
		width: 58.33333333%;
	}

	.sgc-col--md-6 {
		width: 50%;
	}

	.sgc-col--md-5 {
		width: 41.66666667%;
	}

	.sgc-col--md-4 {
		width: 33.33333333%;
	}

	.sgc-col--md-3 {
		width: 25%;
	}

	.sgc-col--md-2 {
		width: 16.66666667%;
	}

	.sgc-col--md-1 {
		width: 8.33333333%;
	}

	.sgc-grid--md-12 {
		grid-template-columns: repeat(12, 1fr);
	}

	.sgc-grid--md-11 {
		grid-template-columns: repeat(11, 1fr);
	}

	.sgc-grid--md-10 {
		grid-template-columns: repeat(10, 1fr);
	}

	.sgc-grid--md-9 {
		grid-template-columns: repeat(9, 1fr);
	}

	.sgc-grid--md-8 {
		grid-template-columns: repeat(8, 1fr);
	}

	.sgc-grid--md-7 {
		grid-template-columns: repeat(7, 1fr);
	}

	.sgc-grid--md-6 {
		grid-template-columns: repeat(6, 1fr);
	}

	.sgc-grid--md-5 {
		grid-template-columns: repeat(5, 1fr);
	}

	.sgc-grid--md-4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.sgc-grid--md-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.sgc-grid--md-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.sgc-grid--md-1 {
		grid-template-columns: repeat(1, 1fr);
	}

	/*--------- navigation ---------*/

		.sgc-menu--label {
			float: right;
			width: 100px;
		}
		
/*------------------ MODULES ------------------*/
/*reusable parts of design, that sit inside layout components and other modules*/

}

/*MEDIA QUERY > 75em - widths now in px [em stated for reference] to cure display issues experienced with iPad Mini 4
/*@media (min-width: 75em)*/

@media (min-width: 1200px) {
/*------------------ LAYOUT ------------------*/
/*sgc-sections that hold one or more modules together*/

	.sgc-container {
		max-width: 72.25rem;
	}

	.sgc-col--lg-12 {
		width: 100%;
	}

	.sgc-col--lg-11 {
		width: 91.66666667%;
	}

	.sgc-col--lg-10 {
		width: 83.33333333%;
	}

	.sgc-col--lg-9 {
		width: 75%;
	}

	.sgc-col--lg-8 {
		width: 66.66666667%;
	}

	.sgc-col--lg-7 {
		width: 58.33333333%;
	}

	.sgc-col--lg-6 {
		width: 50%;
	}

	.sgc-col--lg-5 {
		width: 41.66666667%;
	}

	.sgc-col--lg-4 {
		width: 33.33333333%;
	}

	.sgc-col--lg-3 {
		width: 25%;
	}

	.sgc-col--lg-2 {
		width: 16.66666667%;
	}

	.sgc-col--lg-1 {
		width: 8.33333333%;
	}

	.sgc-grid--lg-12 {
		grid-template-columns: repeat(12, 1fr);
	}

	.sgc-grid--lg-11 {
		grid-template-columns: repeat(11, 1fr);
	}

	.sgc-grid--lg-10 {
		grid-template-columns: repeat(10, 1fr);
	}

	.sgc-grid--lg-9 {
		grid-template-columns: repeat(9, 1fr);
	}

	.sgc-grid--lg-8 {
		grid-template-columns: repeat(8, 1fr);
	}

	.sgc-grid--lg-7 {
		grid-template-columns: repeat(7, 1fr);
	}

	.sgc-grid--lg-6 {
		grid-template-columns: repeat(6, 1fr);
	}

	.sgc-grid--lg-5 {
		grid-template-columns: repeat(5, 1fr);
	}

	.sgc-grid--lg-4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.sgc-grid--lg-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.sgc-grid--lg-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.sgc-grid--lg-1 {
		grid-template-columns: repeat(1, 1fr);
	}

/*------------------ MODULES ------------------*/
/*reusable parts of design, that sit inside layout components and other modules*/

}

/*------------------ DISPLAY CONTROL ------------------*/
/*additional responsive rules for selective display of elements*/

	.sgc-col {
		float: left;
		margin: auto;
		padding-left: 2.5%;
		padding-right: 2.5%;
	}

	.sgc-grid {
	  display: grid;
		/*grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		grid-template-rows: auto 1fr auto;*/
		grid-gap: 1rem;
		align-items: start;
		justify-items: center;
		/*border: 1px solid red;*/
		padding-left: 2.5%;
		padding-right: 2.5%;
	}

	/*.sgc-grid > div {
		border: 1px solid black;
	}*/

@media (max-width: 767.999999px){

	.sgc-show-xs {
		display: initial !important;
	}

	.sgc-show-sm, .sgc-show-md, .sgc-show-lg{
		display: none;
	}

}

@media (min-width: 768px) and (max-width: 991.999999px){

	.sgc-show-sm {
		display: initial !important;
	}

	.sgc-show-xs, .sgc-show-md, .sgc-show-lg {
		display: none;
	}

}

@media (min-width: 992px) and (max-width: 1199.999999px) {

	.sgc-show-md {
		display: initial !important;
	}

	.sgc-show-xs, .sgc-show-sm, .sgc-show-lg {
		display: none;
	}

}

@media (min-width: 1200px) {

	.sgc-show-lg {
		display: initial !important;
	}

	.sgc-show-xs, .sgc-show-sm, .sgc-show-md {
		display: none;
	}

}