/*
* spazyn Grid V1.0.0
* Copyright 2017, spazyn (Pty) Ltd
* www.spazyn.co.za
* 14/04/2017
*/


/* Table of contents
末末末末末末末末末末末末末末末末末末末末末末末末末
- General Style & Rewrite
- Site Main Style
*/





/* 
末末末末末末末末末末末末末末末末末末末末末末末末末
General Style & Rewrite
末末末末末末末末末末末末末末末末末末末末末末末末末
*/
body {
	color: #9BA2A5;
	font-family: 'Open Sans', sans-serif;
	line-height: 2;
}

h1, h2, h3, h4, h5, h6 {
	color: #20485B;
	font-family: 'Open Sans', sans-serif;
	line-height: 1.5;
	text-transform: uppercase;
}

.row img {
	border-radius: 0.4rem;
}

.button,
.button:focus {
	background: #183242;
	color: #fff;
	border: 0.1rem solid #10232D;
}

.button:hover,
.button:active {
	background: #2194C4;
	color: #fff;
	border: 0.1rem solid #1D81A5;
}

.breadcrumbs-bg {
	background: url(../img/breadcrumbs-img.jpg);
	background: rgba(29,129,165,0.8);
	background-image: linear-gradient(rgba(29,129,165,0.8), rgba(29,129,165,0.8)), url(../img/breadcrumbs-img.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 4rem 0;
}

.breadcrumbs-text h2 {
	display: inline-block;
	background: rgba(29,129,165,0.8);
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0,0,0,.3);
	font-weight: 700;
	text-transform: uppercase;
	border-radius: 0.4rem;
	padding: 2rem;
}


#scroll-to-top a {
	background: #2194C4;
	width: 4rem;
	height: 4rem;
	text-align: center;
	opacity: 0.8;
	text-decoration: none;
	border-radius: 50%;
	z-index: 100000;
}

#scroll-to-top a:after {
	content: '\f062';
	font-family: "FontAwesome";
	color: #fff;
	font-size: 2.4rem;
	line-height: 3.6rem;
}

#scroll-to-top a:hover,
#scroll-to-top a:active {
	opacity: 1;
}

.scrollToTop {
	text-align:center; 
	text-decoration: none;
	position:fixed;
	bottom: 6rem;
	right: 2%;
	display:none;
}

.scrollToTop:hover{
	text-decoration:none;
}

/* Header Style Rewrite
末末末末末末末末末末末末末末末末末末末末末末末末末 */


/* Header Style Rewrite Media Queries
末末末末末末末末末末末末末末末末末末末末末末末末末 */
@media (min-width: 400px) {


}



/* 
末末末末末末末末末末末末末末末末末末末末末末末末末
Site Main Style
末末末末末末末末末末末末末末末末末末末末末末末末末
*/


/* Header
末末末末末末末末末末末末末末末末末末末末末末末末末 */
/*--- Header ---*/
.header-bg {
	margin: 1.6rem 0;
}

.header-bg .row {
	
}

.logo h1{
	border: 0; 
	clip: rect(0 0 0 0); 
	height: 1px; 
	margin: -1px; 
	overflow: hidden; 
	padding: 0; 
	position: absolute; 
	width: 1px;	
}

.logo{
	background: url(../img/logo.png) no-repeat top left;
	width: 100%;
	padding: 0.4rem 0;
}

.logo a {	
	display : block;
	width: 20.6rem;
	height : 8rem;
	margin: 0;
}


.header-nav {
	display: inline-block;
	width: 100%;
	vertical-align: top;
	float: right;
	padding: 1.2rem 0;
}

#nav-trigger {
	display: block;
}

#nav-trigger span {
	display: inline-block;
	background-color: #2194C4;
	width: 100%;
	color: #ffffff;
	text-transform: uppercase;
	cursor: pointer;
	padding: 1.2rem 3.2rem;
}

#nav-trigger i {
	margin-right: 0.8rem;
}

#nav-trigger span:hover {
	background-color: #1D81A5;
}

 nav {
	font-size: 0;
}

nav#nav-mobile {
	position: relative;
	display: block;
	z-index: 999999;
}

nav#nav-mobile ul {
	display: none;
	background-color: #20485B;
	list-style-type: none;
	position: absolute;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	z-index: 999999;
}

nav#nav-mobile li {
	display: block;
	padding: 0;
	margin: 0;
	border-bottom: solid 1px #183242;
}

nav#nav-mobile li:last-child {
	border-bottom: none;
}

nav#nav-mobile a {
	display: block;
	color: #ffffff;
	font-size: 1.2rem;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	padding: 1.2rem 3.2rem;
}

nav#nav-mobile a:hover,
nav#nav-mobile a:active,
nav#nav-mobile a.active {
	background-color: #2194C4;
	color: #fff;
}

nav#nav-main {
	display: none;
	background-color: none;
	padding: 0;
}

nav#nav-main ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	float: right;
}

nav#nav-main li {
	display: inline-block;
	font-size: 1.6rem;
	padding: 0;
	margin: 0 0 0 0.4rem;
}


nav#nav-main a {
	display: block;
	color: #183242;
	font-size: 1.6rem;
	text-decoration: none;
	text-transform: uppercase;
	border-radius: 0.4rem;
	padding: 1.2rem 1.6rem;
}

nav#nav-main a:hover,
nav#nav-main a:active,
nav#nav-main a.active {
	background-color: #2194C4;
	color: #fff;
}

/* Header Media Queries
末末末末末末末末末末末末末末末末末末末末末末末末末 */
@media all and (min-width: 750px) {
	.logo{
		width: 32.2666666667%;
	}
	
	.header-nav {
		width: 66.1333333333%;
	}

	#nav-trigger {
		display: none;
	}

	nav#nav-main {
		display: block;
	}

	nav#nav-mobile {
		display: none;
	}
}



/* Slider
末末末末末末末末末末末末末末末末末末末末末末末末末 */



/* Slider Media Queries
末末末末末末末末末末末末末末末末末末末末末末末末末 */
@media all and (min-width: 750px) {
	
}





/* Features
末末末末末末末末末末末末末末末末末末末末末末末末末 */
.features {
	background: #2194C4;
	color: #eee;
	text-align: center;
}

.features .row .column {
	padding: 4rem 2%;
}

.features .row .column:nth-child(n+3) {
	display: none;
}

.features .row .column:nth-child(even) {
	background: #1C81A5;
}

.features i {
	background: #183242;
	font-size: 2.8rem;
	border-radius: 0.8rem;
	padding: 2.4rem;
	margin: 0 0 2rem;
}



/* Feature Media Queries
末末末末末末末末末末末末末末末末末末末末末末末末末 */
@media all and (min-width: 550px) {
	.features .row .column {
		width: 49.2%;
	}
	
	.features .row .column:nth-child(even) {
		height: 44rem;
	}

}

@media all and (min-width: 750px) {
	.features .row .column {
		width: 32.2666666667%;
	}
	
	.features .row .column:nth-child(-n+3) {
		display: block;
	}
	
	.features .row .column:nth-child(even) {
		height: 52rem;
	}

}

@media all and (min-width: 850px) {
	.features .row .column:nth-child(even) {
		height: 48rem;
	}

}

@media all and (min-width: 960px) {
	.features .row .column:nth-child(even) {
		height: 44rem;
	}

}

@media all and (min-width: 1200px) {
	.features .row .column {
		width: 23.8%;
	}
	
	.features .row .column:nth-child(n+3) {
		display: block;
	}
	
	.features .row .column:nth-child(even) {
		height: 48rem;
	}

}

@media all and (min-width: 1300px) {
	.features .row .column:nth-child(even) {
		height: 44rem;
	}

}

@media all and (min-width: 1900px) {
	.features .row .column:nth-child(even) {
		height: auto;
	}

}


/* Intro
末末末末末末末末末末末末末末末末末末末末末末末末末 */
.intro {
	display: flex;
	padding: 8rem 0;
}

.intro .row {
	-ms-box-orient: vertical;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}



.intro .column + .column {
	margin-left: 0;
}

.intro-text {
	order: 2;
	width: 100%;
	margin-top: 2rem;
}

.intro h4 {
	color: #2194C4;
	text-transform: none;
}

.intro-img {
	display: block;
	order: 1;
	width: 100%;
}

.intro-img img {
	height: 40rem;
	object-fit: cover;
	object-position: 0% 0%;
}

/* Intro Media Queries
末末末末末末末末末末末末末末末末末末末末末末末末末 */
@media all and (min-width: 960px) {
	.intro .row {
		display: inline-block;
	}
	
	.intro .column + .column {
		margin-left: 1.6%;
	}

	.intro-text {
		order: 2;
		width: 66.1333333333%;
		margin-top: 0;
	}
	
	.intro-img {
		order: 1;
		width: 32.2666666667%;
	}
	
	.intro-img img {
		height: 40rem;
		object-fit: cover;
		object-position: 0% 0%;
	}
	
}






/* Feature Cards
末末末末末末末末末末末末末末末末末末末末末末末末末 */
.feature-cards-bg {
	background: url(../img/feature-bg.jpg);
	background: rgba(29,129,165,0.8);
	background-image: linear-gradient(rgba(29,129,165,0.8), rgba(29,129,165,0.8)), url(../img/feature-bg.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 8rem 0;
}


.feature-cards {
	background: rgba(29,129,165,0.8);
	color: #fff;
	text-align: center;
	border: 0.1rem solid #1D81A5;
	padding: 1.6rem;
}

.feature-cards i {
	background: #183242;
	font-size: 2.4rem;
	border-radius: 0.8rem;
	padding: 1.6rem;
	margin: 0 0 2rem;
}

.feature-cards-bg .row .column:nth-child(n+2) {
	display: none;
}


/* Feature Cards Media Queries
末末末末末末末末末末末末末末末末末末末末末末末末末 */
@media all and (min-width: 550px) {
	.feature-cards-bg .row .column:nth-child(-n+2) {
		display: block;
		width: 49.2%;
		height: 32rem;
	}
}

@media all and (min-width: 960px) {
	.feature-cards-bg .row .column:nth-child(-n+2) {
		height: 28rem;
	}
}

@media all and (min-width: 1200px) {
	.feature-cards-bg .row .column:nth-child(n+1) {
		display: block;
		width: 23.8%;
		height: auto;
	}
}





/* Benefits
末末末末末末末末末末末末末末末末末末末末末末末末末 */
.benefits {
	padding: 8rem 0;
}

.benefits .row + .row {
	-ms-box-orient: vertical;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	margin-top: 6rem;
}

.benefits .column + .column {
	margin-left: 0;
}

.benefits-img,
.benefits-partnerships,
.benefits-choose-us {
	width: 100%;
}

.benefits h4 {
	margin-top: 2rem;
}



.benefits-choose-us {
	order: 2;
}

.benefits-choose-us-img {
	order: 1;
}

/* Benefits Media Queries
末末末末末末末末末末末末末末末末末末末末末末末末末 */
@media all and (min-width: 850px) {
	.benefits .row + .row {
		display: block;
		margin-top: 6rem;
	}
	.benefits .column + .column {
		margin-left: 1.6%;
	}
	
	.benefits-img,
	.benefits-partnerships,
	.benefits-choose-us {
		width: 49.2%;
	}
	
	.benefits h4 {
		margin-top: 0;
	}
	
	.benefits-img img {
		display: block;
		width: 100%;
	}
	
	.benefits-partnerships-img img {
		height: 48rem;
		object-fit: cover;
		object-position: 0% 0%;
	}
	
	.benefits-choose-us-img img {
		height: 40rem;
		object-fit: cover;
		object-position: 0% 0%;
	}
	
}


@media all and (min-width: 960px) {
	.benefits-partnerships-img img {
		height: 44rem;
		object-fit: cover;
		object-position: 0% 0%;
	}
	
	.benefits-choose-us-img img {
		height: 36rem;
		object-fit: cover;
		object-position: 0% 0%;
	}

}

@media all and (min-width: 1200px) {
	.benefits-partnerships-img img {
		height: 40rem;
		object-fit: cover;
		object-position: 0% 0%;
	}
	
	.benefits-choose-us-img img {
		height: 32rem;
		object-fit: cover;
		object-position: 0% 0%;
	}

}





/* Aim
末末末末末末末末末末末末末末末末末末末末末末末末末 */
.aim-bg {
	background: url(../img/aim-bg.jpg);
	background: rgba(29,129,165,0.8);
	background-image: linear-gradient(rgba(29,129,165,0.8), rgba(29,129,165,0.8)), url(../img/aim-bg.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 8rem 0;
	
}

.aim-bg .row {
	width: 60%;
	margin: 0 auto;
}

.aim-text {
	color: #fff;
	text-align: center;
}


/* Benefits Media Queries
末末末末末末末末末末末末末末末末末末末末末末末末末 */
@media all and (min-width: 550px) {
	
}





/* Partner
末末末末末末末末末末末末末末末末末末末末末末末末末 */
.partner-bg {
	padding: 6rem 0;
}

.partner-logo {
	text-align: center;
	padding: 1.2rem;
}

/* Partner Media Queries
末末末末末末末末末末末末末末末末末末末末末末末末末 */
@media all and (min-width: 550px) {
	.partner-logo {
		width: 49.2%;
	}
	
	.row .partner-logo:nth-child(3) {
		margin-left: 0;
	}
}

@media all and (min-width: 800px) {
	.partner-logo {
		width: 23.8%;
	}
	
	.row .partner-logo:nth-child(3) {
		margin-left: 1.6%;
	}
}





/* Footer
末末末末末末末末末末末末末末末末末末末末末末末末末 */
.footer {
	background: #183242;
	color: #fff;
	padding: 2rem 0;
}

.footer-logo h1{
	border: 0; 
	clip: rect(0 0 0 0); 
	height: 1px; 
	margin: -1px; 
	overflow: hidden; 
	padding: 0; 
	position: absolute; 
	width: 1px;	
}

.footer-logo{
	background: url(../img/logo-s.png) no-repeat top center;
	padding: 0.4rem 0;
}

.footer-logo a {	
	display : block;
	width: 15.4rem;
	height : 6.6rem;
	margin: 0 auto;
}

.footer-copyright {
	text-align: center;
	padding: 1.2rem 0;
}

.footer-copyright p {
	margin: 0;
	line-height: 1.5;
}

.footer-copyright a {
	color: #fff;
	text-decoration: none;
}

.footer-copyright a:hover,
.footer-copyright a:active {
	color: #2194C4;
}

/* Footer Media Queries
末末末末末末末末末末末末末末末末末末末末末末末末末 */
@media all and (min-width: 550px) {
	.footer-logo{
		background: url(../img/logo-s.png) no-repeat top left;
	}
	
	.footer-logo a {	
		margin: 0;
	}
	
	.footer-copyright {
		text-align: right;
	}

}


/* About Us
末末末末末末末末末末末末末末末末末末末末末末末末末 */
.about {
	padding: 8rem 0;
}

.about-text {
	margin-bottom: 2rem;
}

.about-text h4 {
	color: #2194C4;
	text-transform: none;
}

.team-text {
	margin-top: 2rem;
}

.mission-text {
	margin-top: 2rem;
}

/* About Us Media Queries
末末末末末末末末末末末末末末末末末末末末末末末末末 */
@media all and (min-width: 550px) {
	.team-img,
	.team-text {
		width: 100%;
	}
	
	.team .column + .column {
		margin-left: 0;
	}

}


@media all and (min-width: 800px) {
	.team-img,
	.team-text {
		width: 49.2%;
	}
	
	.team .column + .column {
		margin-left: 1.6%;
	}
	
	.team-img img {
		height: 60rem;
		object-fit: cover;
		object-position: 0% 0%;
	}
	
	.team-text {
		margin-top: 0;
	}

}


@media all and (min-width: 1000px) {
	.team-img img {
		height: 44rem;
		object-fit: cover;
		object-position: 0% 0%;
	}

}



/* Services
末末末末末末末末末末末末末末末末末末末末末末末末末 */
.services {
	padding: 8rem 0;
}

#service-nav-trigger {
	display: block;
}

#service-nav-trigger span {
	display: inline-block;
	background-color: #2194C4;
	width: 100%;
	color: #ffffff;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 0.4rem;
	padding: 1.2rem 3.2rem;
	margin: 0.8rem 0;
}

#service-nav-trigger i {
	margin-right: 0.8rem;
}

#service-nav-trigger span:hover {
	background-color: #1D81A5;
}

.service-nav {
	list-style: none;
	vertical-align: top;
}

.service-nav li {
	display: none;
	background: #2194C4;
	color: #fff;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 0.4rem;
	border: 0.1rem solid #1D81A5;
	padding: 1.6rem 1.2rem;
	margin-bottom: 1.2rem;
}

.service-nav li:hover,
.service-nav li:active,
.service-nav li.show-tab {
	background: #183242;
	border: 0.1rem solid #10232D;
}

.service-nav-item {
	
}

.tab-1 { display: none; }
.tab-2 { display: none; }
.tab-3 { display: none; }
.tab-4 { display: none; }
.tab-5 { display: none; }

.show-tab {
	display:block;
}

.tab-text h4 {
	margin-top: 2rem;
}

.tab-list li {
	
}

/* Services Media Queries
末末末末末末末末末末末末末末末末末末末末末末末末末 */
@media all and (min-width: 550px) {
	.service-nav,
	.tab-bg,
	.tab-text,
	.tab-list {
		width: 100%;
	}
	
	.services .column + .column {
		margin-left: 0;
	}
	
}


@media all and (min-width: 800px) {
	.tab-text {
		width: 74.6%;
	}
	
	.overview-text {
		width: 100%;
	}
	
	.tab-list {
		width: 23.8%;
	}
	
	.tabs .column + .column {
		margin-left: 1.6%;
	}
	
}

@media all and (min-width: 960px) {
	#service-nav-trigger {
		display: none;
	}
	.service-nav {
		width: 23.8%;
	}
	
	.service-nav li {
		display: block
	}

	.tab-bg{
		width: 74.6%;
	}
	
	.services .column + .column {
		margin-left: 1.6%;
	}
	
}



/* Contact Us
末末末末末末末末末末末末末末末末末末末末末末末末末 */
.contact {
	padding: 8rem 0;
}

.contact img {
	margin-bottom: 2rem;
}

.contact-details p {
	background: #2194C4;
	color: #fff;
	font-size: 1.6rem;
	border-radius: 0.4rem;
	border: 0.1rem solid #1D81A5;
	padding: 0.8rem 1.2rem;
	margin: 0 0 2rem;
}

.contact-details i {
	color: #fff;
	border-right: 0.1rem solid #183242;
	padding-right: 0.8rem;
	margin-right: 0.8rem;
}

.contact form {
	
}

.contact fieldset {
	margin-bottom: 0;
}

.contact input {
	width: 100%;
	height: 6rem;
}

.contact textarea {
	width: 100%;
	height: 14rem;
	resize: none;
	overflow:hidden;
}

.contact form input:focus, .contact form textarea:focus {
	border: 0.1rem solid #2194C4;
}

form input.button {
	background: #183242;
	width: auto;
	color: #fff;
	float: right;
	border: 0.1rem solid #10232D;
}

form input.button:hover,
form input.button:active {
	background: #2194C4;
	color: #fff;
	border: 0.1rem solid #1D81A5;
}

/* Contact Us Media Queries
末末末末末末末末末末末末末末末末末末末末末末末末末 */
@media all and (min-width: 550px) {
	.contact-details,
	.contact-form	{
		width: 100%;
	}
	
	.contact-details p {
		display: inline-block;
		width: 49.2%;
	}
	
	.contact-details p:nth-of-type(even) {
		margin-left: 0.8%;
	}
	
	.contact .column + .column {
		margin-left: 0;
	}
	
	.contact h4 {
		font-size: 2rem;
	}
}


@media all and (min-width: 750px) {
	.contact-details {
		width: 23.8%;
	}
	
	.contact-details p {
		font-size: 1.6rem;
		width: 100%;
		padding: 0.8rem 0.4rem;
	}
	
	.contact-form {
		width: 74.6%;
	}
	
	.contact .column + .column {
		margin-left: 1.6%;
	}
	
	.form-input input {
		width: 49.2%;
	}
	
	.form-input input:nth-child(even) {
		margin-left: 0.8%;
	}
}

@media all and (min-width: 1020px) {
	.contact h4 {
		font-size: 2.4rem;
	}
	
	.contact-details p {
		font-size: 2rem;
		padding: 0.8rem 1.2rem;
	}

}



/* 
末末末末末末末末末末末末末末末末末末末末末末末末末
 IE 10+ Styles
末末末末末末末末末末末末末末末末末末末末末末末末末
*/
	
/* 
末末末末末末末末末末末末末末末末末末末末末末末末末
General Style
末末末末末末末末末末末末末末末末末末末末末末末末末
*/

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	
	/* 
	末末末末末末末末末末末末末末末末末末末末末末末末末
	General Style
	末末末末末末末末末末末末末末末末末末末末末末末末末
	*/
	
	#scroll-to-top a:after {
		font-size: 24px;
		line-height: 40px;
	}

	/* Intro
	末末末末末末末末末末末末末末末末末末末末末末末末末 */
	.intro-img img {
		height: 24rem;
		object-fit: cover;
		object-position: 0% 0%;
	}
	
	/* Benefits
	末末末末末末末末末末末末末末末末末末末末末末末末末 */
	.benefits-partnerships-img img {
		height: 32rem;
		object-fit: cover;
		object-position: 0% 0%;
	}


}