/*
Theme Name: Deep Blue Insight
Theme URI: Custom Theme
Description: Custom Theme
Version: 1.0
Author: Lilo
Author URI: www.virtualfusion.co.za
*/

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic);
@import url(css/normalize.css);
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

body,
html {
	margin:0;
	padding:0;
	color:#333;
	background-size:cover;
	font-family: 'muliregular';
	font-size:16px;
	line-height:1.8em;
	width: 100%;
	height: 100%;
}
body.page-id-71 {background:#f2f2f2}
.wrap {max-width:1100px;width:100%;margin:0 auto;padding:0 15px;box-sizing:border-box}
.accordion-content:after,.clearfix:after,.tab-content:after,.wrap:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}
* html .clearfix { height: 1%; }
.clearfix, .tab-content, .wrap { display: block; }
a {text-decoration:none;color:#87c424;}
a:hover {color:#828080;text-decoration:none !important;}

strong {font-weight:600}
h1,h2,h3,h4,h5,h6 {font-family: 'mulibold';font-weight:normal}
ul.social-icons {list-style:none;margin:0;padding:0}
ul.social-icons li {float:left;display:inline-block;padding:10px 8px}
ul.social-icons a {color:#fff;}
ul.social-icons a:hover {color:#87c424;}
iframe {margin:15px 0}
section {clear:both}


h2 {
    text-align: center;
    border-bottom: 1px solid #142949;
    line-height: 0;
    padding: 0;
	font-size:20px;
	color:#142949;
	margin-bottom:60px
}

h2 span {
    background: #fff;
    padding: 7px 20px;
	border: 1px solid #142949;
}

/* ======================================== 
SLIDER
========================================  */

#slider {width:100%;height:100%;text-align:center;background:#000;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;}
#slider ul {margin:0;padding:0;list-style:none}
.slidercontent {padding:0 10px;box-sizing:border-box;position:absolute; top: 50%;transform: translateY(-50%);width:100%;-webkit-font-smoothing: antialiased;}
.slidercontent h2 {color:#fff;font-size:60px;text-transform:uppercase;margin:0 0 20px 0;font-weight:600;line-height:60px;border:none}
.slidercontent h3 {color:#fff;font-size:25px;margin:0;font-family: 'muliextralight';line-height:30px}
#slider .overlay {background: rgba(0,0,0,0.3);width:100%;height:100%}

#slider .bx-viewport,#slider .bx-wrapper{position:relative;width:100%;height:100%!important;top:0;left:0}
#slider .bxslider,#slider .bxslider li{height:100%!important}
#slider .bxslider li{background-repeat:no-repeat;background-position:top center;background-size:cover}
#slider .bx-wrapper .bx-viewport{border:none!important}
#pageheader {width:100%;text-align:center;background: url(images/banner.jpg);background-size:100%;background-attachment:scroll;position:relative}
#pageheader .overlay {background: rgba(0,0,0,0);width:100%;height:100%;top:0;position:absolute}
#pageheader .wrap {position:relative;z-index:1;text-align:center;padding:110px 0 30px;color:#fff}
#pageheader p {max-width:800px;margin:15px auto 15px;font-size:15px;}

/* ======================================== 
GRID
========================================  */

.grids {list-style:none;width:calc(100% + 20px);display: -webkit-flex; -webkit-flex-wrap: wrap;display: flex;flex-wrap: wrap;padding:0;margin:0 -10px}
.grids .col4 {width:calc(25% - 20px);margin:10px;float:left;padding:25px 10px;box-sizing:border-box;position:relative;}
.grids .col2 {width:calc(50% - 20px);margin:10px;float:left;padding:25px 10px;box-sizing:border-box;position:relative;}
	
/* ======================================== 
NAV
========================================  */

header {height:65px;position: absolute; z-index: 999;width: 100%;padding:0 15px;box-sizing:border-box;background:#fff;transition:0.5s}
header.sticky {position:fixed;background:#fff;height:50px}
h1#logo {margin:0;float:left;display:inline-block;width:350px;transition:0.5s}
h1#logo img {height:auto;max-width:250px;margin-top:10px}
header.sticky h1#logo img {max-width:180px;}

.home h2.pagetitle {display:inline-block;}
.home h2.pagetitle .border {margin-bottom:10px}
h2.pagetitle a {color:#fff !important}
h2.pagetitle {border:none}

h1#logo a {color:#fff}
nav,nav a{display:block;text-decoration:none}
nav,nav ul li,nav ul ul{font-size:13px}
nav{float:right}
nav ul{list-style:none;margin:0;padding:0}
nav li{float:left;position:relative}
nav ul li{margin-left:1px;font-weight:400;text-transform:uppercase}
nav a{color:#333;line-height:65px;padding:0 10px;text-decoration:none;}
nav ul ul{display:none;position:absolute;top:50px;left:-2px;float:left;width:180px;z-index:99999}
nav ul ul li{min-width:180px}
nav ul ul ul{left:100%;top:0}
nav ul ul a{background:#434b53;line-height:1.3em;padding:10px 20px;width:160px;height:auto;color:#fff}
nav li:hover>a,nav ul ul :hover>a{color:#87c424}
nav ul li:hover>ul{display:block}
nav ul li.current-menu-ancestor>a,nav ul li.current-menu-item>a,nav ul li.current-menu-parent>a,nav ul li.current_page_item>a{color:#87c424}
header.sticky nav a{line-height:50px;}

.home main {background-size:100%;}
section#maincontent {padding:80px 0}
h2.pagetitle {font-size:27px;font-weight:600;line-height:1.1em;margin:0 0 10px;color:#fff;text-transform:uppercase}
section#extracontent {padding:60px 0}
section#maincontent ul {margin:15px 0 15px 18px;padding:0}
section#maincontent ul ul {margin:0 0 0 30px;padding:0}
section#maincontent h3 {font-size:16px;padding-bottom:10px;margin-top:20px}
h3.pagetitle {font-size:30px !important;font-weight:300;line-height:1.1em;margin:0 0 10px;color:#333}
section#maincontent #singlecontent {width:calc(100% - 270px);float:left;border-right:1px solid #E0E0E0;padding-right:30px;box-sizing:border-box}
section#maincontent #singlecontent img {width:100%;height:auto;margin:15px 0}
section#maincontent #singlecontent h3.pagetitle {margin-top:0 !important}
section#maincontent #singlecontent h2 {font-size:15px}
#sidebar {width:240px;float:right;box-sizing:border-box;}
#sidebar ul {margin:0 !important;list-style:none;padding:0 !important}
#sidebar .post-title {font-size:13px;line-height:20px;font-weight:400 !important}
#sidebar a {color:#333;display:block}
#sidebar a:hover {color:#999}
#sidebar .same-category-post-item, #sidebar li {padding:10px 0 !important;margin:0 !important;list-style:none}
#sidebar h2.widgettitle {margin:-10px 0 10px 0!important;padding:0 !important;font-size:12px;text-transform:uppercase;color:#87c424}

#portfolioinfo {background:#efeff0;padding:10px 15px;margin-bottom:30px}
#portfolioinfo .infoblock {}
#portfolioinfo .phd {text-transform:uppercase;font-size:12px;font-weight:600}
#portfolioinfo .infoblock.tags a {display:inline-block;color:#87c424}
#portfolioinfo .infoblock.tags a:hover {text-decoration:underline}


/* ======================================== 
TABS
========================================  */


.ui-tabs-selected::after{content:"";width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;position:absolute;left:50%;margin-left:-10px}


.servicetext {width:100%;float:left;text-align:center}
.servicetext h4 {text-transform:uppercase;font-weight:600;font-size:25px;margin:0 0 20px}

h4.accordion-toggle {cursor: pointer;background:#fff;color:#333;margin:0;border-bottom:1px solid #87c424;padding:7px 10px 12px;line-height:25px;font-weight:normal;font-size:14px}
.accordion-content {display: none;background:#fff;padding:20px 0;font-size:14px}
.accordion-content.default {display: block;}
h4.accordion-toggle .service-icon {height:22px;display:inline-block}
h4.accordion-toggle.active {background:#87c424;border-bottom:1px solid #87c424;color:#fff}

/* ======================================== 
HOME
========================================  */

#about {padding:120px 0;position:relative}
#services {padding:70px 0 20px;background:url(images/services.jpg) fixed;background-size:cover;color:#fff;font-size:14px;line-height:25px}
	#services h2 {border-bottom: 1px solid #fff;color:#fff;margin-bottom:30px}
	#services h2 span {background: #152136;border: 1px solid #fff;}
	#services h3 {font-family: 'mulibold';font-size:23px;line-height:25px;margin:0 0 20px;text-transform:uppercase}
	#services .col3 {width:33.33%;float:left;padding:40px 20px 60px;box-sizing:border-box;position:relative}
#whatwedo {padding:110px 0 40px}
#clients {padding:110px 0;clear:both}
#team {padding:110px 0;background:url(images/team.jpg) fixed;background-size:cover;min-height:300px}
	#team h2 {border-bottom: 1px solid #fff;color:#fff;margin-bottom:30px}
	#team h2 span {background: #152136;border: 1px solid #fff;}

.logooos_container {margin-top:40px !important}
#about::after{content:"";width:0;height:0;border-left:40px solid transparent;border-right:40px solid transparent;border-top:35px solid #fff;position:absolute;bottom:-35px;left:50%;margin-left:-40px}


.arrow1, .arrow2, .arrow3 {width:75px;height:auto}
.arrow1 {position:absolute;top:0;right:0}
.arrow2 {position:absolute;bottom:0;right:0}
.arrow3 {position:absolute;top:20px;right:20px}

/* ======================================== 
IMMERSION
========================================  */

#immersion {padding:120px 0 80px;background:#eaeae8;position:relative;text-align:center}
#immersion::after{content:"";width:0;height:0;border-left:40px solid transparent;border-right:40px solid transparent;border-top:35px solid #fff;position:absolute;top:0;left:50%;margin-left:-40px}
#immersion h2 span {background: #142949;color:#fff}

/* ======================================== 
IMMERSION
========================================  */

#imagesection {padding:150px 0;background:url(images/feet.jpg) fixed;background-size:cover;color:#132744;font-size:25px;line-height:33px;font-family: 'mulisemibold';}
#imagesection::after{content:"";width:0;height:0;border-left:40px solid transparent;border-right:40px solid transparent;border-top:35px solid #fff;position:absolute;top:0;left:50%;margin-left:-40px}
#imagesection h2 span {background: #142949;color:#fff}
#imagesection p {margin:0;width:65%;float:right}

/* ======================================== 
FORM
========================================  */

.validation_error {text-align:center;padding:6px 0;box-sizing:border-box;color:#87c424;font-size:14px}
.gfield_description.validation_message {font-size:12px;padding:0;color:#87c424}

.ccol {width:50%;float:left}
#field_1_1, #field_1_2 {width:50%;float:left;}
#field_1_1, #field_1_2, #field_1_3, #field_1_4{padding:5px;box-sizing:border-box}
#field_1_3, #field_1_4{clear:both}
#field_1_3 {width:100%}
.ccol ul {margin:0;list-style:none;padding:0}
input, textarea, select {font-size:14px;width:100%;padding:8px;box-sizing:border-box;border:none;background:#fff;color:#333;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.gfield_label {display:none !important}
#gform_submit_button_1{background:#87c424;border:none;color:#fff;display:inline-block;padding:8px 15px;width:auto}
.gform_footer.top_label {text-align:center}
#gform_fields_1,#gform_fields_2 {margin:0 !important;padding:0 !important}
*:focus {outline:none !important}

::-webkit-input-placeholder{color:#333;font-size:14px}
:-moz-placeholder{color:#333;font-size:14px}
::-moz-placeholder{color:#333;font-size:14px}
:-ms-input-placeholder{color:#333;font-size:14px}


table {width:100%}
td input {width:100% !important}
#wpgmaps_directions_edit_3,#wpgmaps_directions_edit_4 {background:#ebeaea;padding:15px;box-sizing:border-box}
.gform_wrapper ul {list-style:none !important}

#gform_fields_5 select {padding: 3px 5px}
li#gform_widget-2 {margin:10px 0 20px !important}
#gform_fields_5 li {padding:3px 0 !important}
#gform_fields_5 textarea {height:100px}
blockquote{
	font-size: 16px;
	border-top: solid 2px #dddddd;
	border-left: solid 2px #dddddd;
	border-right: solid 2px #dddddd;
	border-bottom: solid 2px #dddddd;
	margin: 2em 0px;
	padding: 1em 1em;
	font-family: Georgia, Times, "Times New Roman", serif;
	font-style: italic;
	min-height: 60px;
}
blockquote:before {
	display: block;
	float: left;
	content: "\201C";
	font-size: 100px;
	margin-right: 10px;
	color: #fff;
	background-color: #87c424;
	padding: 15px 12px 5px 8px;
	width: 50px;
	height: 50px;
	line-height: 90px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
blockquote cite {
	position: relative;
	display: block;
	text-align: right;
	margin-top: 5px;
	color: #999;
} 

/* ======================================== 
IMAGES
========================================  */

.attachment img,img.size-auto,img.size-full,img.size-large,img.size-medium{max-width:100%;height:auto}.alignleft,img.alignleft{display:inline;float:left;margin-right:24px;margin-top:4px}.alignright,img.alignright{display:inline;float:right;margin-left:24px;margin-top:4px}.aligncenter,img.aligncenter{clear:both;display:block;margin-left:auto;margin-right:auto}img.aligncenter,img.alignleft,img.alignright{margin-bottom:12px}

/* ======================================== 
FOOTER
========================================  */

footer {clear:both;background: url(images/footer.jpg) fixed;color:#fff;padding-top:90px;font-size:14px}
footer h2 {margin-bottom:30px}
footer h2 {border-bottom: 1px solid #fff;color:#fff;margin-bottom:30px}
footer h2 span {background: #152136;border: 1px solid #fff;}
footer h3 {font-size:25px;text-transform:uppercase}
footer img.logo {max-width:150px;height:auto}

footer .contactinfo {width:430px;float:left;padding:30px 50px 30px 0;box-sizing:border-box;position:relative;line-height:22px}
footer .contactinfo h3 {line-height:30px}
footer .form {width:calc(100% - 430px);float:left;padding:30px 0}
footer .copyright {background:#fff;color:#333;padding:15px 0;display:block;clear:both;font-size:13px;margin-top:30px}
footer .copyright .ft {display:inline-block;float:left;padding:5px 0}
footer .copyright .ft:last-child {float:right}
footer .copyright a {color:#4d4d4d;padding-right:10px}
footer .copyright a:hover {color:#5b5b5b;}

.totop {position:relative;top:3px;margin-left:10px}
.desktop {display:block}
.mobile {display:none}


.tslider li {overflow:auto;margin:0;left:0}
.tslider ul {margin:0;padding:0}
.teamslider:after {visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}
.teamslider { display: block;padding:30px 50px;box-sizing:border-box}
.teamslider {width:100%}
.teamimage {width:250px;float:left;padding-right:40px;box-sizing:border-box}
.teamcontent {width:calc(100% - 250px);float:left;color:#fff;box-sizing:border-box;font-size:14px;line-height:23px;padding-left:20px;}
.teamcontent h3 {font-size:25px;line-height:30px;margin-top:0}
.teamimage img {width:100%;max-width:250px !important;height:auto;border-radius: 50%;border:12px solid rgba(255,255,255,0.15);margin:0 auto 30px}



@media screen and (max-width: 900px) {
	nav {display:none}
	header ul.social-icons {display:none}
}
@media screen and (max-width: 960px) {
	ul#gallery li {width:33.33%}
	ul#services li {width:calc(33.33% - 10px);}
	footer .copyright .ft {display:block;text-align:center;width:100%}

}
@media screen and (max-width: 760px) {
	ul#gallery li {width:50%}
	.ccol {width:100%;float:left}
	.ccol.gform {margin:40px -5px;width:calc(100% + 10px)}
	.grids .col4 {width:calc(50% - 10px);}
	.item{width:calc(50% - 12px);}
	section#maincontent #singlecontent {width:100%;padding:0;border:none}
	#sidebar {width:100%;margin-top:30px;border-top:1px solid #ccc;padding-top:30px}
	#services .col3 {width:100%;float:left;padding:20px;}
	.arrow1, .arrow2, .arrow3 {display:none}
	footer .contactinfo {width:100%;float:left;padding:0 0 20px 0;text-align:center}
	footer .form {width:100%;float:left;padding:0}
	ul.social-icons {text-align:center}
	ul.social-icons li {float:none;display:inline-block;padding:10px 8px}
	.teamimage {width:100%;float:none;margin:0;padding:0;text-align:Center}
	.teamcontent {width:100%;}
	.teamcontent h3 {font-size:25px;line-height:30px;margin-top:0}
	.teamcontent h3 {text-align:Center}
	.teamslider {padding:30px 30px;}
	#imagesection p {width:100%;text-align:center}

}
@media screen and (max-width: 600px) {
	.desktop {display:none}
	.mobile {display:block}
}
@media screen and (max-width: 500px) {
	.grids .col4 {width:100%;margin:0}
	p.caption {width:100%;bottom:11px}
	.slidercontent h2 {font-size:40px;line-height:45px}
	.item{width:calc(100% - 12px);}
}
@font-face {
    font-family: 'muliregular';
    src: url(font/muli-webfont.eot);
    src: url(font/muli-webfont.eot?#iefix) format("embedded-opentype"),url(font/muli-webfont.woff2) format("woff2"),url(font/muli-webfont.woff) format("woff"),url(font/muli-webfont.ttf) format("truetype"),url(font/muli-webfont.svg#muliregular) format("svg");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'mulibold';
    src: url(font/muli-bold-webfont.eot);
    src: url(font/muli-bold-webfont.eot?#iefix) format("embedded-opentype"),url(font/muli-bold-webfont.woff2) format("woff2"),url(font/muli-bold-webfont.woff) format("woff"),url(font/muli-bold-webfont.ttf) format("truetype"),url(font/muli-bold-webfont.svg#mulibold) format("svg");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'mulibolditalic';
    src: url(font/muli-bolditalic-webfont.eot);
    src: url(font/muli-bolditalic-webfont.eot?#iefix) format("embedded-opentype"),url(font/muli-bolditalic-webfont.woff2) format("woff2"),url(font/muli-bolditalic-webfont.woff) format("woff"),url(font/muli-bolditalic-webfont.ttf) format("truetype"),url(font/muli-bolditalic-webfont.svg#mulibolditalic) format("svg");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'muliextralight';
    src: url(font/muli-extralight-webfont.eot);
    src: url(font/muli-extralight-webfont.eot?#iefix) format("embedded-opentype"),url(font/muli-extralight-webfont.woff2) format("woff2"),url(font/muli-extralight-webfont.woff) format("woff"),url(font/muli-extralight-webfont.ttf) format("truetype"),url(font/muli-extralight-webfont.svg#muliextralight) format("svg");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'muliextralightitalic';
    src: url(font/muli-extralightitalic-webfont.eot);
    src: url(font/muli-extralightitalic-webfont.eot?#iefix) format("embedded-opentype"),url(font/muli-extralightitalic-webfont.woff2) format("woff2"),url(font/muli-extralightitalic-webfont.woff) format("woff"),url(font/muli-extralightitalic-webfont.ttf) format("truetype"),url(font/muli-extralightitalic-webfont.svg#muliextralightitalic) format("svg");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'muliregularitalic';
    src: url(font/muli-italic-webfont.eot);
    src: url(font/muli-italic-webfont.eot?#iefix) format("embedded-opentype"),url(font/muli-italic-webfont.woff2) format("woff2"),url(font/muli-italic-webfont.woff) format("woff"),url(font/muli-italic-webfont.ttf) format("truetype"),url(font/muli-italic-webfont.svg#muliregularitalic) format("svg");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'mulilight';
    src: url(font/muli-light-webfont.eot);
    src: url(font/muli-light-webfont.eot?#iefix) format("embedded-opentype"),url(font/muli-light-webfont.woff2) format("woff2"),url(font/muli-light-webfont.woff) format("woff"),url(font/muli-light-webfont.ttf) format("truetype"),url(font/muli-light-webfont.svg#mulilight) format("svg");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'mulilightitalic';
    src: url(font/muli-lightitalic-webfont.eot);
    src: url(font/muli-lightitalic-webfont.eot?#iefix) format("embedded-opentype"),url(font/muli-lightitalic-webfont.woff2) format("woff2"),url(font/muli-lightitalic-webfont.woff) format("woff"),url(font/muli-lightitalic-webfont.ttf) format("truetype"),url(font/muli-lightitalic-webfont.svg#mulilightitalic) format("svg");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'mulisemibold';
    src: url(font/muli-semibold-webfont.eot);
    src: url(font/muli-semibold-webfont.eot?#iefix) format("embedded-opentype"),url(font/muli-semibold-webfont.woff2) format("woff2"),url(font/muli-semibold-webfont.woff) format("woff"),url(font/muli-semibold-webfont.ttf) format("truetype"),url(font/muli-semibold-webfont.svg#mulisemibold) format("svg");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'mulisemibolditalic';
    src: url(font/muli-semi-bolditalic-webfont.eot);
    src: url(font/muli-semi-bolditalic-webfont.eot?#iefix) format("embedded-opentype"),url(font/muli-semi-bolditalic-webfont.woff2) format("woff2"),url(font/muli-semi-bolditalic-webfont.woff) format("woff"),url(font/muli-semi-bolditalic-webfont.ttf) format("truetype"),url(font/muli-semi-bolditalic-webfont.svg#mulisemibolditalic) format("svg");
    font-weight: 400;
    font-style: normal;
}