/*
kenneth mukiria
www.mukiria.com
*/

* {
	margin: 0px;
	padding: 0px;
	outline:none;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
strong {font-weight: bold;}
em {font-style: italic;}
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800';
body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	overflow-x: hidden;
	font-family: 'Open Sans', sans-serif, Arial;
	font-size: small;
	color: #333333;
	line-height: 1.5em;
}
a, img, hr, li {
	text-decoration: none;
	border: none;
	color: #333;
-webkit-transition: background-color 0.5s ease-out;-moz-transition: background-color 0.5s ease-out;-o-transition: background-color 0.5s ease-out;transition: background-color 0.5s ease-out;
/*-webkit-transition: color 0.5s ease-out;-moz-transition: color 0.5s ease-out;-o-transition: color 0.5s ease-out;transition: color 0.5s ease-out;*/
	list-style:none;
	outline:none;
}
p{
	float: left;
	margin-bottom: 7px;
	width: 100%;
}
h1, h2, h3, h4, h5{
	width: 100%;
	margin-bottom: 15px;
	float: left; text-transform: uppercase; line-height: 1.2em; font-weight: 600; margin-bottom: 30px;
}
h1 {
	font-size: 28px;
}
h2 {
	font-size: 36px;
}
h3 {
	font-size: 24px; color:#393939;
}
h4 {
	font-size: 20px;
	font-weight: 300;
	line-height: 1.3em;
	text-transform: uppercase;
	color: #fff;
	background-color: #DBB027;
	padding: 20px;
	margin-top: 30px;
}
.all {
	float: left;
	width: 100%;
	position: relative;
}
img {
	float: left;
	height: auto;
	width: 100%;
}
img#bg {
	position: absolute;
	top: 80px;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 1;
}
 .mobile, .showlogo{ display:none;}
.mukiria {
	position: relative;
	width: 70%;
	margin: 0 auto;
}
.mukiria.three {width: 30%;}
.mukiria.three p{font-size: 16px;}
.half, .thirty, .nusu, .sixty, .forty{position:relative; float:left;}
.half{width:50%;}
.nusu{
	width: 49%;
}
.thirty{width:33%;}
.forty{width:40%;}
.sixty{width:60%;}
.floatright{float:right;}
.floatleft{float:left;}
.logo {
	width: 16%;
	position:absolute;
	top:0; 
	left:42%;
	padding:12px 1%;
	background:white;
	z-index:10;
}
header{width:100%; float:left; position:relative; z-index:9997;}
.logotwo {
	width: 70%;
	float: left;
	margin-left: 15%;
	margin-bottom: 30px;
}
.hd{width:100%; float:left; position:relative;  color: white; padding: 100px 0;
background-image: url(../images/bg-header.jpg);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position:0 0;}
.hd h1{font-size:36px; line-height:1.4em; font-weight:800;}
.hd p{font-size:16px; width:70%; line-height:1.5em; }
.hd a{background-color: #DBB027; color: white; padding: 10px 20px; border:2px solid white; float: left; margin-top: 30px; transition: all 0.2s ease-in-out;}
.hd a:hover {transform:scale(1.05); background-color:#3860B0;}
.heados h1, .heados h2, .heados h3{font-weight:400; margin-bottom:10px;}
.heados h2{font-size:27px; }
.heados h3{font-size:21px; }
.heados hr, footer hr{border:none; width:150px; float:left; height:1px; background:#2052A6; margin-left:50%; transform:translateX(-50%); margin-bottom:30px;}
.socialmedia{position:relative;float:left; margin-left:50%; transform:translateX(-50%);}
.socialmedia a, .social-media a{
	width: 27px;
	height: 27px;
	background-image: url(../images/socialmedia.png);
	background-repeat: no-repeat;
	float: left;
	margin-right:10px;
}
.socialmedia a.twitter, .social-media a.twitter{
	background-position: 0px 0px;
}
.socialmedia a.twitter:hover, .social-media a.twitter:hover{
	background-position: 0px -32px;
}
.socialmedia a.facebook, .social-media a.facebook{
	background-position: -32px 0px;
}
.socialmedia a.facebook:hover, .social-media a.facebook:hover{
	background-position: -32px -32px;
}

.socialmedia a.linkedin{
	background-position: -63px 0px;
}
.socialmedia a.linkedin:hover{
	background-position: -63px -32px;
}
/*login pop up*/
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index:9998;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.login {
  margin: 70px auto;
  padding: 20px;
  background: #5ec1de;
  width: 300px;
  position: relative;
  transition: all 5s ease-in-out;
  z-index:9999;
}

.login h2 {
  margin-top: 0;
  color: white;
}
.login .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
}
.login .close:hover {
  color: #333;
}
.login .content {
  max-height: 30%;
  overflow: auto;
}
.centre{text-align:center;}

ul.list{}
ul.listone{float:left; margin-top:10px;}
ul.list li{
	width: 90%;
	float: left;
	color: white;
	padding-left: 20px;
	margin-bottom: 10px;
	background-image: url(../images/list.png);
	background-repeat: no-repeat;
	background-position: 0px 5px;
}
ul.listone li{
	width: 86%;
	float: left;
	color: white;
	padding-left: 40px;
	padding-bottom:10px;
	margin-bottom: 10px;
	background-image: url(../images/tick.png);
	background-repeat: no-repeat;
	background-position: 5px 2px;
}
.ac-container{
	width: 100%;
	float: left;
	position: relative;
	margin: 30px auto;
	text-align: left;
}
.ac-container label{
	padding: 7px 20px;
	position: relative;
	z-index: 20;
	display: block;
	cursor: pointer;
	line-height: 33px;
	font-size: 14px;
	font-weight:500;
	background: #fff;
	
	box-shadow: 
		0px 0px 0px 1px rgba(155,155,155,0.3), 
		1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
		0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover{
	background: #fff;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
	background: #0865A8;
	color: #fff;
	box-shadow: 
		0px 0px 0px 1px rgba(155,155,155,0.3), 
		0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:after,
.ac-container input:checked + label:after{
	content: '';
	position: absolute;
	width: 30px;
	height: 47px;
	right: 13px;
	top: 0px;
	background: transparent url(../images/arrow_down.png) no-repeat 10px center;
}
.ac-container input:checked + label:after{
	background-image: url(../images/arrow_up.png);
}
.ac-container input{
	display: none;
}
.ac-container article{
	background: rgba(255, 255, 255, 0.5);
	margin-top: -1px;
	overflow: hidden;
	height: 0px;
	position: relative;
	z-index: 10;
	-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container article p{
	line-height: 23px;
	padding: 20px;
}
.ac-container input:checked ~ article{
	-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container input:checked ~ article.ac-small{
	min-height: 140px;
}
form#contactus{
	width: 70%;
	float: left;
	padding: 30px;
	margin: 10px 15%;
	background-color: #f5f5f5;
}
form#contactus label{width:100%; float:left; margin-bottom:10px;}
form#contactus input, form#contactus select{width:99%; float:left; border:none; background:white; color:#666; padding:10px 20px;font-family: 'Open Sans', sans-serif, Arial; height:36px; border-left:3px solid #1367A6;}
form#contactus textarea{
	width: 100%; max-width: 100%;
	float: left;
	border: none;
	background: white;
	color: black;
	height: 82px; max-height: 82px;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
	font-family: 'Open Sans', sans-serif, Arial;
}

form#contactus .nusu:last-child{float:right;}
form#contactus p{color: #999; font-size: 12px;}
form#contactus p strong, form#contactus .checktxt{float:left; width:80%; font-weight: 300; margin-top: 9px; color:#999; margin-left:10px;}
form#contactus p span, form#contactus .check{float:left; width: 20px;}
.contacts{width:80%; float:left; position: relative; margin: 30px 10%; background-color:#DBB027 ; color: white; padding:5px 5px 1px 0;}
.maps{margin:0; padding: 0;}
.contacts .forty{padding: 30px;}
.contacts h3, footer h3{
	color: white;
	font-weight: 300;
	margin-bottom: 10px;
}
footer hr{ background:#fff; margin-bottom:15px;}
.bigfont p{
	font-size: 14px;
}
footer{
	width: 100%;
	float: left;
	background-color: #3B3B3B;
	color: white;
	padding-top: 40px;
	margin-top: 15px;
	text-align: left;
	background-image: url(../images/bg-footer.jpg);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: 0 0;
}
.copyright{
	width: 100%;
	float: left;
	padding: 10px;
	color: white;
	font-size: 12px;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 30px;
}
form.subscribe{width:100%; float:left;}
form.subscribe input{width:86%; float:left; background-color:#807E7E; border:none; color:white; padding:7px 20px;}
form.subscribe .submit, form#contactus .submit{width:100%; background-color:#1367A6; color:white; margin:10px 0 0 0; border:none;padding:20px; float:left; transition: all 0.2s ease-in-out; cursor:pointer;}
form.subscribe .submit:hover, form#contactus .submit:hover {transform:scale(0.95); background-color:#DBB027;}
.copyright a{
	float: none;
	margin: 0;
	width: auto;
	color: #fff;
}
.margintopfifty{margin-top:50px;}.margintopthirty{margin-top:30px;}.margintoptwenty{margin-top:10px;}.margintopzero{margin-top:0px;}.paddingtopfifty{padding-top:50px;}
.margintb{margin:50px 0px 35px 0;}.paddingtb{padding:50px 0 30px 0;}
.nobg{background-image:none;}
.bggry{background-color:#f5f5f5;}
.clrwht{color:white;}

@media only screen and (min-width : 1440px) {
	.consult .thirty{}
}
@media only screen and (max-width : 1280px) {
	.flex-caption h1{font-size:28px; line-height:1.4em;}
	.bgpcs .txt{width:40%; margin-left:30%; padding:30px 4%; }
	.topimage .copy h1, .aboutimage .copy h1{font-size:36px; font-weight:800;}
}
@media only screen and (max-width : 1024px) {
	.logo {width: 18%;left:41%;padding:10px 1%;}
	.flex-caption h1{font-size:24px; line-height:1.3em;}
	.home .txt img{width: 40px;	height: 40px; margin:0;}
	.home .txt h2{font-size:16px; margin-bottom:5px;}
	.home hr{margin-bottom:5px;}
	.strip img{width: 30%;margin-top: -210px;}
	.monitortabs .resp-tabs-list li {width:23.55%; min-height:275px;}
	.bgpcs .txt{width:50%; margin-left:25%; padding:30px 4%; }
	.fullwidth.consult .thirty{width:100%; margin:20px 0; border-bottom:1px solid #3961B0; padding-bottom:30px;}
	.fullwidth.consult .top, .fullwidth.consult .btm{width:50%; min-height:auto; background-color:transparent; color:#333;}
	.fullwidth.consult .top .txt{position:relative; float:left; transform:translate(0,0);}
	.fullwidth ul.list li{color:#333;}
	.hd p{width:100%; }
	.mukiria.three{width:50%;}
	.forty, .sixty{width:100%;}
	.contacts{width:100%; margin: 30px 0;padding:5px;}
	form#contactus{width: 100%; padding: 30px; margin: 10px 0;}




}
@media only screen and (max-width : 960px) {
	.logo {padding:13px 1%;}
	.flex-caption h1{font-size:18px; line-height:1.3em;}
	.home .thirty{width:80%; margin:0 10% 40px 10%;}
	.home .txt img{width: 75px;	height: 75px; margin-top:50px;}
	.home .txt h2{font-size:24px; margin-bottom:15px;}
	.home hr{margin-bottom:15px;}
	.hide{display:none;}
	footer .thirty{width:48%;}
}
@media only screen and (max-width: 800px) {
		.logo{position:relative; left:7%; top:auto; float:left; width:20%;}
		.flex-caption{width:50%;}
		.heading h2, .home h4{width:100%;transform:translateX(0); margin-left:0; padding:10px 0; }
		.mid .thirty{width:100%; margin:0 0 20px 0;}
		.nusu, .about .half, .about .half:last-child, .fleet .half, .fleet .half:last-child, .sixty, .thirty, .half{width:100%; border:none; padding:0;}
		.topimage .copy h1, .aboutimage .copy h1{font-size:24px; font-weight:800;}
		.hidden{display:none;}
		.monitortabs img{width:60%; margin-left:20%;}
		.monitortabs .about .half, .sixty{padding:20px;}
		h1{font-size:22px;}
		h2, .heading h2{font-size:16px;}
		h3{font-size:16px;}
		.midcard .nusu:last-child{margin-top:40px;}
		.secondtab .resp-tab-content .sixty {background-color:transparent;}
    ul.resp-tabs-list {
        display: none;
    }

    h2.resp-accordion {
        display: block;
    }

    .resp-vtabs .resp-tab-content {
        border: 1px solid #C1C1C1;
    }

    .resp-vtabs .resp-tabs-container {
        border: none;
        float: none;
        width: 100%;
        min-height: 100px;
        clear: none;
    }

    .resp-accordion-closed {
        display: none !important;
    }

    .resp-vtabs .resp-tab-content:last-child {
        border-bottom: 1px solid #c1c1c1 !important;
    }
	.half.margintopfifty{margin-top:20px;}
	.fullwidth.consult .top, .fullwidth.consult .btm{width:100%;}
}
@media only screen and (max-width : 720px) {
	.ylw img, .bgglobe img, .strip img{display:none;}
	.strip .txt{padding:20px 30px;}
	.flex-caption{width:90%; float:left; position:relative;}
	.flex-caption h1{font-weight:600;}
	a.consultation{position:absolute; left:7%; right:auto; top:20px;}
	.bgpcs .txt{width:100%; margin-left:0; padding:30px 4%; }
	.mukiria.three{width:80%;}
}
@media only screen and (max-width : 720px) {
	.aboutimage .txt, .aboutimage .copy{width:100%; position:relative; float:left; margin:0; left:auto; top:auto; height:auto; transform:translate(0,0);}
	.aboutimage .copy{padding:20px;}
	.topimage .copy h1, .aboutimage .copy h1{font-size:18px; font-weight:800;}
	.midlink{margin:40px 0; }
	.contacts .forty{width:100%;}
	.mukiria {width: 86%;}


}
@media only screen and (max-width : 480px) {
	.flexslider .slides img, a.consultation, .lines, .aboutimage img, #parentHorizontalTab img{display:none;}
	.home .thirty{width:100%; margin:0 0 40px 0;}
	.home .txt img{width: 60px;	height: 60px; margin-top:0px;}
	.home .txt h2{font-size:18px; margin-bottom:5px;}
	.home hr{margin-bottom:5px;}
	.strip{text-align:center;}
	footer .thirty{width:100%; margin-bottom:20px;}
	footer h3{font-size:16px; }
	.midlink{margin:25px 0 40px 0; }
	.thirty{border-bottom:1px solid #ccc; margin-bottom:30px;}
	footer .thirty, .home .thirty, .about .thirty, .mid .thirty{border:none;}
	.logo{width:35%;}
	.ylw .sixty{margin-top:0px;}
	.resp-tab-content .sixty {margin-top:0px;}
	.secondtab .resp-tab-content .sixty {padding:10px 50px;}
	.minusmargin{margin-top:-20px;}
	.midlink{width:100%; float:left; margin:20px 0; text-align:center; }
	.midlink a, a.learnmore, a.consultation{
		background-color: #3366FF;
		color: white;
		padding: 10px;
		background-image: none;
		background-repeat: no-repeat;
		background-position: right 10px center;
		line-height:1.5em;
		font-size:small;
		transition: none;
		width:100%;
		float:left;
	}
	.midlink a{float:left; margin-left:0; transform:translateX(0); width:100%;}
	a.learnmore{float:left; width:auto; margin-top:10px;}
	.midlink a:hover, a.learnmore:hover, a.consultation:hover{
		background-color: #3961B0;
		background-position: right 8px center;
		background-size:21px 21px;
		border:1px solid white;
		transform: none;
	}
	.midlink a:hover{border:none; transform:none; margin-left:0;}
}
@media only screen and (max-width : 320px) {
	.flexslider, .home img, .topimage, .half img, .heading img, .bgblu img, .half img, .nusu img, .bgmonitor img, .consult img, .mid img{display:none;}
	.home .txt{position:relative; float:left; width:100%; top:auto; left:auto; transform:translate(0,0); padding:20px 0;}
	.home .top .txt h2{margin-top:10px;}
	.logo{width:45%;}
}