/*
* 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 {
	background-color: #eee;
	color: #1E80A3;
	font-family: 'Raleway', sans-serif;
	line-height: 2;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Oswald', sans-serif;
	color: #09577A;
	font-weight: 700;
	letter-spacing: 0.2rem;
	text-transform: uppercase;
}

h3.underline:after {
	display: block;
	background-color: #EF8222;
	content: '';	
	width: 2rem;
	height: 0.8rem;
	border-radius: 0.2rem 0;
	margin: 0.8rem auto;
}

.main-icon {
	background-color: #EF8222;
	color: #fff;
	border-radius: 1.6rem 0;
	padding: 2rem;
	margin-bottom: 2rem;
}

.button, 
.button:focus,
input.button,
input.button:focus {
	height: 4rem;
	color: #fff;
	font-size: 1.6rem;
	line-height: 4rem;
	border: none;
	border-radius: 2rem 0;
	padding: 0 1.6rem;
	margin: 0.8rem 2rem 0.8rem 0;
}

.button:hover, 
.button:active,
input.button,
input.button:hover {
	color: #fff;
}

.button-blue, 
.button-blue:focus,
input.button-blue,
input.button-blue:focus {
	background-color: #09577A;
	border-bottom: solid 0.3rem #033752;
}

.button-blue:hover, 
.button-blue:active,
input.button-blue:hover,
input.button-blue:active {
	background-color: #0C6584;
	border-bottom: solid 0.1rem #033752;
}

.button-orange, 
.button-orange:focus,
input.button-orange,
input.button-orange:focus {
	background-color: #EF8222;
	border-bottom: solid 0.3rem #A54E14;
}

.button-orange:hover,
.button-orange:active,
input.button-orange:hover,
input.button-orange:active {
	background-color: #F48A3B;
	border-bottom: solid 0.1rem #A54E14;
}


.bx-wrapper {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	border: none;
	background: transparent;
}

.bx-wrapper .bx-pager.bx-default-pager a {
	background: #09577A;
	width: 1.6rem;
	height: 0.8rem;
	margin: 0 5px;
	-moz-border-radius: 0.8rem 0;
	-webkit-border-radius: 0.8rem 0;
	border-radius: 0.8rem 0;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #EF8222;
}

#scroll-to-top a {
	background: #EF8222;
	width: 4rem;
	height: 4rem;
	text-align: center;
	opacity: 0.8;
	text-decoration: none;
	border-radius: 1.2rem 0;
	z-index: 999;
}

#scroll-to-top a:after {
	content: '\f062';
	font-family: "FontAwesome";
	color: #eeeeee;
	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 {
	background: #fff;
	z-index: 9999;
}

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

.logo{
	display: inline-block;
	background:url(../img/logo-s.png) no-repeat 0 3.6rem;
    width: 66.1333333333%;
	padding: 0.4rem;
	float: left;
}

.logo a {	
    display : block;
	width: 18rem;
	height : 6.8rem;
}

.header-nav {
	display: inline-block;
	width: 32.2666666667%;
    text-align: right;
}

.header-nav {
    
}

.main-nav ul {
    list-style: none;
}

.main-nav ul li {
	
}

.main-nav ul li a {
	display: inline-block;
    background-color: #09577A;
	color: #F7F8F8;
	font-size: 1.6rem;
	font-weight: 700;
	text-transform: uppercase;
    text-decoration: none;
    text-align: center;
	border-radius: 1.2rem 0;
	padding: 0.8rem 2rem;
	margin: 2.8rem 0 0;
}

.main-nav ul li a:hover {
    background-color: #EF8222;
	color: #F7F8F8;
}


.menu-text {
    display: none;
}


/* Header Media Queries
末末末末末末末末末末末末末末末末末末末末末末末末末 */
@media (min-width: 550px) {
	.logo{
		display: inline-block;
		background:url(../img/logo.png) no-repeat 0 2.8rem;
		padding: 0.4rem;
		float: left;
	}

	.logo a {	
		display : block;
		width: 24rem;
		height : 6.8rem;
	}
    
}

@media (min-width: 580px) {
	.main-nav ul li a i {
        margin-right: 0.8rem;
    }

    .menu-text {
        display: inline-block;
    }

}



/* Slider
末末末末末末末末末末末末末末末末末末末末末末末末末 */
.slider-img {
    background: url(../img/home-bg.jpg);
	background: rgba(9,87,122,0.8);
	background-image: linear-gradient(rgba(9,87,122,0.6), rgba(9,87,122,0.8)), url(../img/home-bg.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0,0,0,.3);
	text-align: center;
	height: 60rem;
	padding: 4rem 0;
}


.slider-img .container {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
    max-width : 1200px;
}

.slider-img h2,
.inner-slider-img h2 {
	color: #fff;
	font-size: 2.8rem;
	line-height: 3.2rem;
}

.slider-img p,
.inner-slider-img p {
	font-size: 2rem;
	line-height: 1.5;
}

.slider-img .button {
	height: 5.2rem;
	font-size: 2rem;
	line-height: 5.2rem;
	border-radius: 2rem 0;
	margin: 3.2rem 0;
}

.slider-img .button-blue {
	display: none;
}

/* Slider
末末末末末末末末末末末末末末末末末末末末末末末末末 */
@media (min-width: 550px) {
	.slider-img h2,
	.inner-slider-img h2	{
		font-size: 3.6rem;
		line-height: 4rem;
	}

	.slider-img p,
	.inner-slider-img p{
		font-size: 2.4rem;
		line-height: 3.6rem;
	}
	
	.slider-img .button-blue {
		display: inline-block;
	}

}

@media (min-width: 750px) {
	.slider-img h2,
	.inner-slider-img h2{
		font-size: 5.2rem;
		line-height: 6.8rem;
	}
	
}




/* Portfolio
末末末末末末末末末末末末末末末末末末末末末末末末末 */
.portfolio-bg {
	
}

.portfolio {
	background-color: #fff;
    padding: 12rem 4%;
}

.portfolio-intro {
	margin-bottom: 4rem;
}

.portfolio-intro h3.underline:after {
	margin-left: 0;
}

.portfolio-group {
	font-size: 0
}

.portfolio-item {
	display: inline;
    border: 0.1rem solid #f5f5f5;
    box-shadow:         0 0 0.4rem 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow:    0 0 0.4rem 0 rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 0 0.4rem 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

.portfolio-logo {
	
}

.portfolio-group a:nth-child(n+5) .portfolio-item {
	display: none;
}


/* Portfolio Media Queries
末末末末末末末末末末末末末末末末末末末末末末末末末 */
@media (min-width: 550px) {
	.portfolio {
        background-color: #fff;
        padding: 12rem 1%;
    }
    
    .portfolio-intro {
		text-align: center;
		margin-bottom: 4rem;
	}
	
	.portfolio-intro h3.underline:after {
		margin-left: auto;
	}
	
	.portfolio-item {
		display: inline;
		width: 32.2666666667%;
        margin-bottom: 1.6%;
        margin-left: 1.6%;
	}
	
	.portfolio-group a:nth-child(3n+1) .portfolio-item {
		margin-left: 0;
	}
	
	.portfolio-group a:nth-child(n+5) .portfolio-item {
		display: inline;
	}

}




/* Contact Me
末末末末末末末末末末末末末末末末末末末末末末末末末 */
#contact {
	background: url(../img/contact-bg.jpg);
	background: rgba(9,87,122,0.6);
	background-image: linear-gradient(rgba(9,87,122,0.6), rgba(9,87,122,0.6)), url(../img/contact-bg.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
	padding-top: 12rem;
	padding-bottom: 12rem;
}

.contact-intro {
	margin-bottom: 4rem;
}

.contact-intro h3 {
	color: #fff;
}

.contact-intro h3.underline:after {
	margin-left: 0;
}

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

.contact-details {
	display: flex;
}

.contact-details i {
	display: inline-block;
	margin-right: 1.2rem;
}

.contact-details p {
	line-height: 1.5;
	margin: 0;
}

.contact-details p:first-child {
	font-weight: 700;
	text-transform: uppercase;
}

/*
.contact-login i,
.contact-details .button {
	display: none;
}
*/

.contact .column {
	margin-right: 1.6%;
}

.contact .column + .column {
	margin: 0;
}

.contact form, .contact fieldset {
	margin: 0;
}

.contact input {
	background: rgba(9,87,122,0.7);
	width: 100%;
	height: 6rem;
	border: 0.1rem solid #09577A;
	margin-bottom: 2.8rem;
}

.contact input:focus {
	border: 0.1rem solid #EF8222;
}

.contact input:last-child {
	margin-bottom: 0rem;
}

.contact textarea {
	background: rgba(9,87,122,0.7);
	width: 100%;
	height: 32.4rem;
	border: 0.1rem solid #09577A;
	margin-top: 3.2rem;
}

.contact textarea:focus {
	border: 0.1rem solid #EF8222;
}

.contact .send-form-btn {
	float: right;
	margin-right: 0;
}

.contact input.button {
	background: rgba(9,87,122,1);
	width: initial;
	min-height: 4rem;
	border: none;
}

.contact input.button-blue,
.contact input.button-blue:focus {
	background-color: #09577A;
	border-bottom: solid 0.3rem #033752;
}

.contact input.button-blue:hover,
.contact input.button-blue:active {
	background-color: #0C6584;
	border-bottom: solid 0.1rem #033752;
}

.contact ::placeholder {
	color: #fff;
}

/* Contact Me Icons Media Queries
末末末末末末末末末末末末末末末末末末末末末末末末末 */
@media (min-width: 550px) {
	.contact-details-group-bg,
    .contact-form-bg,
    .contact-form-fieldset {
        width: 100%;
    }

}

@media (min-width: 850px) {
    .contact-details-group-bg {
        width: 32.2666666667%;
    }
    
    .contact-form-bg {
        width: 66.1333333333%;
    }
    
    .contact-form-fieldset {
        width: 49.2%;
    }
    
    .contact textarea {
		margin-top: 0;
	}
    
    .contact-intro {
		text-align: center;
	}
	
	.contact-intro h3.underline:after {
		margin-left: auto;
	}
	
    /*
	.contact-login i,
	.contact-details .button {
		display: block;
	}
    */
	
}

/* Footer
末末末末末末末末末末末末末末末末末末末末末末末末末 */
#footer {
	background-color: #09577A;
	text-align: center;
	padding-top: 1.2rem;
	padding-bottom: 1.2rem;
}

.footer-credits a {
	color: #1E80A3;
	text-decoration: none;
}

.footer-credits a:hover, .footer-credits a:active {
	color: #EF8222;
}

/* Footer Media Queries
末末末末末末末末末末末末末末末末末末末末末末末末末 */
@media (min-width: 550px) {
	#footer {
		text-align: left;
	}
	
	.footer-credits a {
		float: right;
	}
}



/* 
末末末末末末末末末末末末末末末末末末末末末末末末末
 IE 10+ Styles
末末末末末末末末末末末末末末末末末末末末末末末末末
*/
	
	/* 
	末末末末末末末末末末末末末末末末末末末末末末末末末
	General Style
	末末末末末末末末末末末末末末末末末末末末末末末末末
	*/
	
	@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
		#scroll-to-top a {
		width: 40px;
		height: 40px;
		border-radius: 12px 0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
		filter: alpha(opacity=80);
	}

	#scroll-to-top a:after {
		font-size: 24px;
		line-height: 36px;
	}

	#scroll-to-top a:hover,
	#scroll-to-top a:active {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		filter: alpha(opacity=100);
	}

	.scrollToTop {
		bottom: 60px;
		right: 2%;
	}
	
	/* Contact Me
	末末末末末末末末末末末末末末末末末末末末末末末末末 */
	.contact-details {
		display: inline-block;
		width: 100%;
		margin-bottom: 4px;
	}

	.contact-items {
		float: left;
	}

	.contact-details i {
		display: inline-block;
		margin-right: 12px;
		float: left;
	}

	.contact input.button {
		background: rgb(9,87,122);
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		filter: alpha(opacity=100);
		width: auto;
		min-height: 40px;
		border: none;
	}

	.contact input.button-blue,
	.contact input.button-blue:focus {
		background-color: #09577A;
		border-bottom: solid 3px #033752;
	}

	.contact input.button-blue:hover,
	.contact input.button-blue:active {
		background-color: #0C6584;
		border-bottom: solid 1px #033752;
	}


}




/* 
末末末末末末末末末末末末末末末末末末末末末末末末末
 Hire Me Page Styles
末末末末末末末末末末末末末末末末末末末末末末末末末
*/


/* Questionnaire
末末末末末末末末末末末末末末末末末末末末末末末末末 */
.questionnaire {
	background-color: #fff;
	text-align: center;
	padding-top: 12rem;
	padding-bottom: 12rem;
}

.questionnaire-heading {
	text-align: center;
	margin-bottom: 2.8rem;
}

.questionnaire .form-row {
	width: 50%;
	margin: 0 auto;
}

.questionnaire fieldset h4 {
	background: #eee;
	border-radius: 2rem 0;
	padding: 1.2rem;
	margin: 1.2rem 0 3.2rem;
}

.questionnaire input,
.questionnaire textarea,
.questionnaire select {
	display: block;
	background: #fff;
	width: 100%;
	height: 6rem;
	border: 0.1rem solid #09577A;
	margin-bottom: 2.8rem;
}

.questionnaire input:focus,
.questionnaire textarea:focus,
.questionnaire select:focus {
	border: 0.1rem solid #EF8222;
}

.questionnaire textarea {
	height: 12rem;
}

.questionnaire fieldset p {
	line-height: 2rem;
	text-align: left;
}

.questionnaire input[type="checkbox"],
.questionnaire input[type="radio"] {
	display: inline;
	width: auto;
	height: auto;
	text-align: left;
	margin: 0 1.2rem 0 0;
}

.questionnaire input[type="radio"] + input[type="radio"] {
	margin-left: 1.2rem;
}

.questionnaire input[type="file"] {
	
}

.questionnaire .send-form-btn,
.questionnaire .send-form-btn:focus {
	background-color: #09577A;
	
	height: 4rem;
	color: #fff;
	font-size: 1.6rem;
	line-height: 4rem;
	font-weight: 700;
	border: none;
	border-radius: 2rem 0;
	border-bottom: solid 0.3rem #033752;
	cursor: pointer;
	padding: 0 1.6rem;
	margin: 0.8rem 0.8rem;
}

.questionnaire .send-form-btn:hover,
.questionnaire .send-form-btn:active {
	background-color: #0C6584;
	border-bottom: solid 0.1rem #033752;
}