/*
Theme Name: MVESI Design and Construction
Theme URI: http://www.mvesi.co.za/
Author: BLUEVINE SYSTEMS
Author URI: http://www.bluevinesystems.co.za/
*/

@charset "UTF-8";
/* CSS Document */

@font-face {
	font-family: 'HelveticaNeueLTStd-Bd';
	src: url('fonts/HelveticaNeueLTStd-Bd/HelveticaNeueLTStd-Bd.eot');
	src: local('☺'), url('fonts/HelveticaNeueLTStd-Bd/HelveticaNeueLTStd-Bd.woff') format('woff'), url('fonts/HelveticaNeueLTStd-Bd/HelveticaNeueLTStd-Bd.ttf') format('truetype'), url('fonts/HelveticaNeueLTStd-Bd/HelveticaNeueLTStd-Bd.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'HelveticaNeueCondensedBold';
	src: url('fonts/HelveticaNeueCondensedBold/HelveticaNeueCondensedBold.eot');
	src: local('☺'), url('fonts/HelveticaNeueCondensedBold/HelveticaNeueCondensedBold.woff') format('woff'), url('fonts/HelveticaNeueCondensedBold/HelveticaNeueCondensedBold.ttf') format('truetype'), url('fonts/HelveticaNeueCondensedBold/HelveticaNeueCondensedBold.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'HelveticaNeueLTStd-It';
	src: url('fonts/HelveticaNeueLTStd-It/HelveticaNeueLTStd-It.eot');
	src: local('☺'), url('fonts/HelveticaNeueLTStd-It/HelveticaNeueLTStd-It.woff') format('woff'), url('fonts/HelveticaNeueLTStd-It/HelveticaNeueLTStd-It.ttf') format('truetype'), url('fonts/HelveticaNeueLTStd-It/HelveticaNeueLTStd-It.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'HelveticaNeueLTStd-Md';
	src: url('fonts/HelveticaNeueLTStd-Md/HelveticaNeueLTStd-Md.eot');
	src: local('☺'), url('fonts/HelveticaNeueLTStd-Md/HelveticaNeueLTStd-Md.woff') format('woff'), url('fonts/HelveticaNeueLTStd-Md/HelveticaNeueLTStd-Md.ttf') format('truetype'), url('fonts/HelveticaNeueLTStd-Md/HelveticaNeueLTStd-Md.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'HelveticaNeueLTStd-MdIt';
	src: url('fonts/HelveticaNeueLTStd-MdIt/HelveticaNeueLTStd-MdIt.eot');
	src: local('☺'), url('fonts/HelveticaNeueLTStd-MdIt/HelveticaNeueLTStd-MdIt.woff') format('woff'), url('fonts/HelveticaNeueLTStd-MdIt/HelveticaNeueLTStd-MdIt.ttf') format('truetype'), url('fonts/HelveticaNeueLTStd-MdIt/HelveticaNeueLTStd-MdIt.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'HelveticaNeueLTStd-Roman';
	src: url('fonts/HelveticaNeueLTStd-Roman/HelveticaNeueLTStd-Roman.eot');
	src: local('☺'), url('fonts/HelveticaNeueLTStd-Roman/CenturyGotHelveticaNeueLTStd-Romanhic.woff') format('woff'), url('fonts/HelveticaNeueLTStd-Roman/HelveticaNeueLTStd-Roman.ttf') format('truetype'), url('fonts/HelveticaNeueLTStd-Roman/HelveticaNeueLTStd-Roman.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'HelveticaNeueLTStd-Th';
	src: url('fonts/HelveticaNeueLTStd-Th/HelveticaNeueLTStd-Th.eot');
	src: local('☺'), url('fonts/HelveticaNeueLTStd-Th/HelveticaNeueLTStd-Th.woff') format('woff'), url('fonts/HelveticaNeueLTStd-Th/HelveticaNeueLTStd-Th.ttf') format('truetype'), url('fonts/HelveticaNeueLTStd-Th/HelveticaNeueLTStd-Th.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'HelveticaNeueLTStd-ThIt';
	src: url('fonts/HelveticaNeueLTStd-ThIt/HelveticaNeueLTStd-ThIt.eot');
	src: local('☺'), url('fonts/HelveticaNeueLTStd-ThIt/HelveticaNeueLTStd-ThIt.woff') format('woff'), url('fonts/HelveticaNeueLTStd-ThIt/HelveticaNeueLTStd-ThIt.ttf') format('truetype'), url('fonts/HelveticaNeueLTStd-ThIt/HelveticaNeueLTStd-ThIt.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

html, body{ padding:0; margin:0; top:0; left:0; height:100%; background:#f5f5f5; font-family: Arial, Helvetica, sans-serif; font-size:14px; color:#000  }
h1{ font-size:48px;font-family: 'HelveticaNeueLTStd-Th',Arial, Helvetica, sans-serif; padding:30px 0 10px; margin:0; border-bottom:3px solid #fcc917;}
h1 strong{ font-family: 'HelveticaNeueLTStd-Bd',Arial, Helvetica, sans-serif;}
h2{ padding:0; margin:0; font-family: 'HelveticaNeueCondensedBold',Arial, Helvetica, sans-serif; font-weight:normal; font-size:18px}

p{ margin:10px 0 0}
a{ color:#1b83be }
a:hover{ color:#1b83be; text-decoration:underline}
.clearFix{ clear:both}

/* Header */

header{ width:100%; height: 196px; position:absolute; top:0   }
.carouselBannerShadow{ -webkit-box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.5);}
.innerHeader{-webkit-box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.5);}
.banner{ float:left; width:100%; position:relative }
.banner img{ width:100%; height:auto; margin:-20% 0 0 }
.innerBanner img{ margin:0 }
.headerTopWrap{ width:100%; padding:30px 0; background: rgba(255, 255, 255, 0.5);  }
.headerTopContainer{ width:960px; margin:auto }
.bannerCaption{ padding:250px 0 0; width:100%; top:0; font-family: 'HelveticaNeueLTStd-Th',Arial, Helvetica, sans-serif; color:#fff; text-align:center; text-shadow: 1px 1px 0px rgba(0, 0, 0, 1); position:absolute}
.bannerCaption h1{ border:none; padding:0; margin:0; font-size:60px}
.bannerCaption p{ margin:auto; padding:0; width:40%; font-size:16px;}
.bannerCaption a{ float:right; margin:20px 0 0; text-shadow:none}

.logo{ width:276px; height:80px; float:left }
.searchContact{ width:280px; float:right }
.search{ width:212px; border:10px solid #231f20; -webkit-border-radius: 5px; -moz-border-radius: 5px;border-radius: 5px; background:#fff; float:right;   }
.search input[type="text"]{ width:158px; float:left; font-size:12px; padding:8px; font-family:Arial, Helvetica, sans-serif; border:0 }
.search input[type="submit"]{ width:32px; height:30px; float:left; background:#fff url(images/btn-search.png) no-repeat 10px 5px; border:0; float:left; cursor:pointer }
.contact{ font-size:18px; color:#231f20; font-family: 'HelveticaNeueCondensedBold',Arial, Helvetica, sans-serif; float:right}
.contactNum{ width:220px; float:left;  margin: 6px 0 0; text-align:right}
.contact img{ float:left;  margin: 10px 0 0;}

/* Navigation */

nav{ width:100%; float: left;background:#fcc917 url(images/bg-nav.png) repeat-x;font-family: 'HelveticaNeueCondensedBold',Arial, Helvetica, sans-serif; }
nav ul, nav li{ list-style:none; padding:0; margin:0 }
nav ul{width:960px; margin:auto}
nav li{ float:left}
nav a{ color:#000; padding:19px; display:block; text-decoration:none; border-left:1px solid #fcc11d; border-right:1px solid #fee837;text-transform: uppercase; }
nav a:hover{ text-decoration:none; color:#000; background:url(images/nav-arrow.png) no-repeat 50% bottom; }
nav li:first-child a{ border-left:0 }
nav li:last-child a{ border-right:0 }
nav .current-menu-item a{background:url(images/nav-arrow.png) no-repeat 50% bottom;}

/* Content */

.container{width:960px; margin:auto }
.content{ padding:20px 0; line-height:20px }
.buttonBlue{ padding:12px 20px 10px 12px; color:#fff; font-size:14px; font-family: 'HelveticaNeueLTStd-Bd',Arial, Helvetica, sans-serif; background: #1b83be url(images/arrow-readmore.png) no-repeat 90% 48%;text-decoration:none}
.buttonBlue:hover{ color:#fff; text-decoration:none}
.articleWrap{ padding: 0 0 20px; margin:0 0 20px; border-bottom:1px dotted #000 }
.articleWrap .post-thumbnail img{ float: left; height: auto; margin: 0 20px 0 0;width: 20%;}

/* Home */

.homePanel{ width: 468px; background:#fff }
.homePanel h2{ background:#fcc917; padding:15px }
.homeLeftPanel{ position:relative; float:left; font-family: 'HelveticaNeueLTStd-Th',Arial, Helvetica, sans-serif; font-size:24px; }
.homeLeftPanel strong{ font-family: 'HelveticaNeueLTStd-Bd',Arial, Helvetica, sans-serif; }
.homeLeftPanel img{ float:left; margin:0 10px 0 0}
.homeLeftPanel .caption{ position:absolute; bottom:0; left:5px; font-size:10px; font-style:italic;text-shadow: 1px 1px 0px rgba(0, 0, 0, 1); color:#fff }
.homeRightPanel img{ float:left; margin:0 15px 0 0}
.homeLeftPanel p{ line-height:30px; margin:10px }
.homeRightPanel{ float:right }
.homeRightPanel p{ margin:15px}

/* Recent Work */

.recentWork{ background:#fcc917; padding:8px 0 }
.recentWork .leftBlock{ float:left; font-family: 'HelveticaNeueLTStd-Th',Arial, Helvetica, sans-serif; font-size:48px; width:230px; padding-top:10px }
.recentWork .leftBlock strong{ font-family: 'HelveticaNeueLTStd-Bd',Arial, Helvetica, sans-serif; }
.recentWork .leftBlock span{ float:left}
.recentWork .leftBlockNav{ width:140px}
.recentWork .rightBlock{ width:730px; float:right;  }

.recentWork .projectBlock{ width:240px; height:240px; float:left; margin-left:8px; position:relative;   }
.recentWork .projectBlock a{color:#fff;text-shadow: 1px 1px 0px rgba(0, 0, 0, 1); display:block;}
.recentWork .projectBlock img{ width:240px; height:auto}
.recentWork .projectBlock .projectBlockWrap{ position:absolute; height:100%; width:100%; top:0; left:0}
.recentWork .projectBlock .projectBlockWrap:hover{ background: rgba(0, 0, 0, 0.4); }
.recentWork .projectHeader{padding:10px; position:absolute; font-family: 'HelveticaNeueLTStd-Th',Arial, Helvetica, sans-serif; font-size:24px; top:0}
.recentWork .projectFooter{padding:10px; position:absolute; font-family: Arial, Helvetica, sans-serif; font-size:14px; bottom:0; }


#nextWork{ margin:0 10px 0 0; float:left}
#nextWork img {margin:0 0 0 5px;}
#prevWork{float:left}
#prevWork img {margin:0 5px 0 0;}
#nextWork,#prevWork,.recentWork .leftBlock span{font-family: Arial, Helvetica, sans-serif; font-size:14px; color:#000; text-decoration:none}
#nextWork:hover,#prevWork:hover{ text-decoration:underline}


/* Testimonials */

.testimonials{ padding:10px 0 0 }
.testimonials .leftBlock{ float:left; font-family: 'HelveticaNeueLTStd-Th',Arial, Helvetica, sans-serif; font-size:48px; width:335px; line-height:48px }
.testimonials .leftBlock strong{ font-family: 'HelveticaNeueLTStd-Bd',Arial, Helvetica, sans-serif; }
.testimonials .quotationMarks{ width:68px; float:left }
.testimonials .testimonialBlock{ width:517px; float:left; font-family: 'HelveticaNeueLTStd-Th',Arial, Helvetica, sans-serif; font-size:24px; padding:0 20px; line-height:22px }
.testimonials .testimonialFooter{ }
.testimonials .testimonialClient{font-family: 'HelveticaNeueCondensedBold',Arial, Helvetica, sans-serif; font-size:16px}
.testimonials .testimonialNav{ float:right;font-family:Arial, Helvetica, sans-serif; font-size:14px }
.testimonials .testimonialNav a{ color:#000; text-decoration:none }
.testimonials .testimonialNav a:hover{ color:#000; text-decoration:underline }
.testimonials .singleTestimonial{ float:left; width:500px; line-height: 24px; }

/* About */

.aboutPanel{ width: 100%;  background:#fff; float:left }
.aboutPanel h2{  position:relative; font-family: 'HelveticaNeueLTStd-Th',Arial, Helvetica, sans-serif; font-size:24px; padding: 20px 20px 0; line-height:26px }
.aboutPanel img{ float:left; margin:0 20px 0 0}
.aboutPanel p{ margin:10px 20px 18px}
.aboutPanelLeft{ float:left; width:400px}
.aboutPanelRight{ float:left; width:560px}
.aboutPanelRight .buttonBlue{float: left;}
.buttonBlue img{ float:none; margin:0 }
.buttonBlue{ padding-right:28px }

.missionVision{ background:#fcc917; padding:5px 0; font-family: 'HelveticaNeueLTStd-Th',Arial, Helvetica, sans-serif;}
.missionVision .leftBlock{ float:left;  font-size:48px; width:230px; padding-top:10px }
.missionVision .leftBlock strong{ font-family: 'HelveticaNeueLTStd-Bd',Arial, Helvetica, sans-serif; }
.missionVision .text{ width:730px; font-size:24px; float:left; padding:10px 0 0; line-height:26px}
.missionVision .text p{ margin:0 0 18px}

.aboutPanelSection{ padding:0 }
.aboutBottomPanel{ width: 468px; background:#fff; }
.aboutBottomPanel h2{padding:15px 15px 0; font-family: 'HelveticaNeueLTStd-Th',Arial, Helvetica, sans-serif; font-size:24px}
.aboutBottomPanel img{ float:left; margin:0 15px 0 0}
.aboutBottomPanel p{  margin: 5px 15px 15px; }
.aboutBottomPanelLeft{ float:left;}
.aboutBottomPanelRight{ float:right}

/* Work & expertise */

.workPanel{ width: 100%; float:left;background:#fff }
.workPanel h2{  position:relative; font-family: 'HelveticaNeueLTStd-Th',Arial, Helvetica, sans-serif; font-size:24px; padding:20px 0 0 20px; line-height:26px }
.workPanel img{ float:right; margin:0 0 0 20px }
.workPanel p{ margin:10px 20px 20px}
.workPanel .buttonBlue{ float:right }

.workPanelSection{ padding:0 }
.workBottomPanel{ width: 468px; background:#fff; margin:0 0 25px }
.workBottomPanel h2{padding:15px 15px 0; font-family: 'HelveticaNeueLTStd-Th',Arial, Helvetica, sans-serif; font-size:24px}
.workBottomPanel img{ float:left; margin:0 15px 0 0; border:0}
.workBottomPanel p{  margin: 5px 15px 15px; }
.workBottomPanelLeft{ float:left;}
.workBottomPanelRight{ float:right}

/* Services */

.servicesPanel{ width: 100%; float:left;  background:#fff }
.servicesPanel h2{  position:relative; font-family: 'HelveticaNeueLTStd-Th',Arial, Helvetica, sans-serif; font-size:24px; padding:20px 20px 0 0; line-height:26px }
.servicesPanel img{ float:left; margin:0 20px 0 0}
.servicesPanel p{ margin:10px 20px 20px}

.services{ background:#fff; padding:20px; margin:0 0 20px; line-height:20px }
.services h2{ font-family: 'HelveticaNeueLTStd-Th',Arial, Helvetica, sans-serif; font-size:24px}
.services img{ margin:0 0 20px}

.servicesBottomPanel{ width:410px }
.consulting{ float:left }
.construction{ float:right }

/* Jobs */

.jobsPanel{ width: 100%; background:#fff; float:left }
.jobsPanel h2{  position:relative; font-family: 'HelveticaNeueLTStd-Th',Arial, Helvetica, sans-serif; font-size:24px; padding:20px 20px 0 0; line-height:26px }
.jobsPanel img{ float:left; margin:0 20px 0 0}
.jobsPanel p{ margin:10px 20px 20px}
.jobs{ background:#fff; padding:20px; margin:0 0 20px; line-height:20px }
.jobs h2{ font-family: 'HelveticaNeueLTStd-Th',Arial, Helvetica, sans-serif; font-size:24px}

/* Contact */

.contactform{padding:20px; background:#fff }
.contactform h2{ font-family: 'HelveticaNeueLTStd-Th',Arial, Helvetica, sans-serif; font-size:24px}
.contactform label{ width:130px; float:left;padding: 8px 0 0; }
.contactDetails{ background:#fcc917; padding:5px 0; font-family: 'HelveticaNeueLTStd-Th',Arial, Helvetica, sans-serif;}

.contactformDiv{ width:410px; float:left; margin:20px 20px 0 0  }
.contactformDivRight{ width:325px; margin-right:0}
.contactform input[type="text"],.contactform input[type="email"], .contactform textarea, .contactform select{ border:1px solid #000; background:#fff; font-family:Arial, Helvetica, sans-serif; font-size:14px; padding:2%;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; float:left}

.contactform input[type="submit"]{ border:0; cursor:pointer}


.contactform input[name="cptch_number"]{ float:none}
.contactform input[type="text"],.contactform input[type="email"]{ width:50%;}
.contactform select{ width:55%;}
.contactform textarea{height: 75px; width: 90%;}

.contactform .buttonBlue{ float:right; padding-right:20px }

.contactDetails .leftBlock{ float:left; font-size:48px; width:230px; padding-top:10px }
.contactDetails .leftBlock strong{ font-family: 'HelveticaNeueLTStd-Bd',Arial, Helvetica, sans-serif; }
.contactDetails .text{ width:730px; font-size:24px; float:left; padding:10px 0 0; line-height:26px}
.contactDetails .text p{ margin:0 0 18px}
.contactDetails h2{ font-family: 'HelveticaNeueLTStd-Bd',Arial, Helvetica, sans-serif; font-size:24px; }

.contactform .errorMessage{ color:#C00; font-weight:bold }

/* Project */

.projectPanel{ width: 100%; float:left;background:#fff;}
.projectPanel strong{ font-family: 'HelveticaNeueCondensedBold',Arial, Helvetica, sans-serif; font-size:16px }
.projectPanel img{ float:left; margin:0 20px 0 0 ; width:210px; height:auto}
.projectPanel p{ margin:0 20px 20px}

.project{ background:#fff; padding:10px; margin:0 0 20px; line-height:20px }
.project h2{ float:left;font-family: 'HelveticaNeueLTStd-Th',Arial, Helvetica, sans-serif;font-size:24px; padding: 20px 0 10px 10px;}
.project .buttonBlue{ float:right; margin: 5px 17px 0 0; }
.projectGallaryPic{ float:left; width:210px; height:220px; margin:12px; background:#9F0 }

/* Footer */

footer{ background:#000; padding:20px 0; color:#fff; font-size:12px }
footer span{ float:left}
footer ul{ float:right; }
footer ul, footer li{ list-style:none; padding:0; margin:0}
footer li{ float:left; }
footer li a{ color:#fff; text-decoration:none; padding:0 5px; border-right:1px solid #fff}
footer li a:hover{color:#fff;}


/* Alignment */

.alignleft {
	float: left;
}

.alignright {
	float: right;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

blockquote.alignleft,
figure.wp-caption.alignleft,
img.alignleft {
	margin: 7px 24px 7px 0;
}

.wp-caption.alignleft {
	margin: 7px 14px 7px 0;
}

blockquote.alignright,
figure.wp-caption.alignright,
img.alignright {
	margin: 7px 0 7px 24px;
}

.wp-caption.alignright {
	margin: 7px 0 7px 14px;
}

blockquote.aligncenter,
img.aligncenter,
.wp-caption.aligncenter {
	margin-top: 7px;
	margin-bottom: 7px;
}

.site-content blockquote.alignleft,
.site-content blockquote.alignright {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	padding-top: 17px;
	width: 50%;
}

.site-content blockquote.alignleft p,
.site-content blockquote.alignright p {
	margin-bottom: 17px;
}

.wp-caption {
	margin-bottom: 24px;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin: 0;
}

.wp-caption {
	color: #767676;
}

.wp-caption-text {
	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	box-sizing:         border-box;
	font-size: 12px;
	font-style: italic;
	line-height: 1.5;
	margin: 9px 0;
}

div.wp-caption .wp-caption-text {
	padding-right: 10px;
}

div.wp-caption.alignright img[class*="wp-image-"],
div.wp-caption.alignright .wp-caption-text {
	padding-left: 10px;
	padding-right: 0;
}

.wp-smiley {
	border: 0;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* MOBILE */

@media screen and (max-width: 980px){
	.container, .headerTopContainer{ padding-left:2%; padding-right:2%; width:96%}
	nav ul { width:100% }
	h1{ font-size: 280%; }
	.homePanel{ width:49% }
	.homeLeftPanel p{ line-height: 26px; }
	.homeLeftPanel{ font-size: 20px; }
	.content{ font-size:13px; line-height:18px}
	.buttonBlue{ font-size:13px;padding: 10px 18px 8px 8px; }
	.testimonials .testimonialBlock{ width:48%; padding: 0 0 0 4%; }
	.recentWork .projectBlock{ width:200px; height:auto; }
	.recentWork .projectBlock img{ width:200px; height:auto}
	.recentWork .rightBlock{ width:75% }
	.recentWork .projectHeader{ font-size:18px }
	.recentWork .projectFooter{ font-size:12px }
	.recentWork .leftBlock{ width:180px}
	.bannerCaption h1{ font-size: 280%; }
	.banner img{ margin: -10% 0 0;}

	.aboutPanel{ font-size: 14px;}
	.aboutPanel img{ width:400px; height:auto; float:right; margin: 0 0 0 20px; }
	.missionVision .text{ width: 70%;}
	.aboutPanel .buttonBlue{ padding-right:25px}
	.missionVision .container{padding-left: 3%; padding-right: 3%; width: 94%;}
	.aboutBottomPanelLeft,.aboutBottomPanelRight,.workBottomPanel{ width: 49%;}
	.workBottomPanel img{ width:40%; height:auto}
	.servicesBottomPanel{ width:49%}
	.contactformDiv{ width:49% }
	.contactformDivRight{ width:40% }
	.contactDetails .text{ width:60%}
}

@media screen and (max-width: 880px){
	.content{ font-size:12px; line-height:16px}
	.buttonBlue{ font-size:12px }
	.homeLeftPanel p{ line-height: 24px; }
	.homeLeftPanel, .singleTestimonial{ font-size: 18px; }
	footer { font-size:11px}
	.testimonials .testimonialBlock{ width:40%;}
	.homeLeftPanel{ width:100% }
	.homeLeftPanel img, .homeLeftPanel .caption { display:none}
	.homeRightPanel{width: 49%; margin:15px 0 0 ; float:left}
	.homeRightPanel img{margin: 0 15px 0 0;}
	.recentWork .projectBlock{ width:180px; height:auto; }
	.recentWork .projectBlock img{ width:180px; height:auto}
	.homeRightPanel.mobilePanel{ float:right}
	/* About */
	.missionVision .text{ width: 65%; font-size: 20px;}
	
	.workPanel img,.servicesPanel img{ width:40%; height:auto; float:right; margin:0 0 0 20px}
	.servicesPanel h2{ padding: 20px 20px 0; }
}

@media screen and (max-width: 800px){
	.banner img{ margin: 0;}
	.recentWork .projectHeader{ font-size:16px }
	.recentWork .projectFooter{ font-size:10px }
	.buttonBlue{font-size: 11px;}
	.recentWork .leftBlock,.testimonials .leftBlock,.bannerCaption h1,h1{font-size: 250%;}
	.homeRightPanel img{ margin:0 0 0 10px; height:auto; float:right}
	h2{font-size: 16px;}
	.bannerCaption p{width: 60%;}
	.recentWork .leftBlock, .testimonials .leftBlock{line-height: 38px;}
	.testimonials .leftBlock{ width:200px}
	.testimonials .testimonialBlock{ width:55%;}
	footer .container{ text-align:center}
	footer span,footer ul{ float:none; width: 65%; margin:10px auto 0}
	.recentWork .leftBlock{ padding:20px 0}
	.testimonials .leftBlock{ padding: 0 0 10px}
	.contactformDiv{ width:80%}
	.contactform textarea{ width:95%}
	.contactformDivRight{ width:66%}
}


@media screen and (max-width: 770px){
	.recentWork .leftBlock,.testimonials .leftBlock{ width:100%; }
	.testimonials .testimonialBlock{width: 80%;}
	.mobileBr{ display:none}
	.recentWork .rightBlock{ width:100%; float:left}
	.recentWork .projectBlock{ width:200px; height:auto; }
	.recentWork .projectBlock img{ width:200px; height:auto}
	h1{ text-align:center}
	.recentWork .leftBlock{ width:50%; float:none; margin:auto; text-align:center}
	.recentWork .leftBlockNav{ margin:auto; text-align:center}
	.testimonials .leftBlock{ text-align:center}
	.testimonials .testimonialNav{ float:none}
	.testimonials .testimonialFooter{ margin:auto;width: 80px;}
	.testimonials .content{ padding-top:10px}
	.recentWork .projectHeader{ font-size:18px }
	.recentWork .projectFooter{ font-size:12px }
	footer ul{ width:70%; }
	.recentWork .leftBlock,.testimonials .leftBlock{ line-height:32px}
	.missionVision .text, .missionVision .leftBlock{ width:100%;}
	.missionVision .text{ font-size:18px}
	.aboutBottomPanelLeft,.aboutBottomPanelRight,.workBottomPanel{ width: 100%;}
	.aboutBottomPanelLeft{ margin-bottom:15px}
	.workBottomPanel img{ width:30%; height:auto}
	
}

@media screen and (max-width: 680px){
	.carouselBannerShadow{ background:#888 }
	.homeRightPanel{ width:100%}
	.homeRightPanel img{ float:left; margin:0 10px 0 0}
	.recentWork .leftBlock,.testimonials .leftBlock,.bannerCaption h1,h1,.missionVision .leftBlock,.contactDetails .leftBlock{ font-size:220% }
	.aboutPanel h2{ line-height:26px}
	.homeRightPanel p{ font-size:14px; line-height:20px}
	
	/* About */
	.aboutPanel{ font-size: 12px;}
	.aboutPanel img{ width:300px; height:auto; float:right; margin: 0 0 0 20px; }
	.missionVision .text{ font-size:16px; line-height:20px}
	.missionVision .text p{ margin: 0 0 10px;}
	.jobsPanel img{ float:right;margin: 0 0 0 20px; width:40%; height:auto }
	.jobsPanel h2{padding: 20px 20px 0;}
	.contactDetails .leftBlock{ width:100%}
	.contactDetails .text{ width:100%}
	.contactDetails .text,.contactDetails h2{ font-size:16px; line-height:24px}
	.projectPanel img{ width:40%; height:auto}
}

@media screen and (max-width: 650px){
	.recentWork .projectBlock{ width:180px; height:auto; }
	.recentWork .projectBlock img{ width:180px; height:auto}
	h1{ font-size:200% }
	.services img{ width: 100%; height:auto}
}

@media screen and (max-width: 620px){
	nav a{padding: 14px;font-size: 12px;}
	.searchContact{ display:none}
	.logo{ margin:auto; float:none}
	footer ul{ width:85%; }
	.recentWork .leftBlock{width: 35%;}
	.bannerCaption{padding: 240px 0 0;}
	.bannerCaption p{font-size: 12px;}
	header{ height:auto}
	.recentWork .leftBlock,.testimonials .leftBlock{ line-height:28px}
	.missionVision .text{ font-size:14px; line-height:18px}
	.jobs{ font-size:12px; line-height:18px}
	.contactDetails .text,.contactDetails h2{ font-size:14px; line-height:20px}
}

@media screen and (max-width: 580px){
	.testimonials .testimonialBlock{width: 80%;}
	footer ul{ width:90%; }
	.recentWork .projectBlock{ width:170px; height:auto; }
	.recentWork .projectBlock img{ width:170px; height:auto}
	.recentWork .projectFooter{ font-size:11px }
	.recentWork .leftBlock,.testimonials .leftBlock,.bannerCaption h1,h1,.aboutPanel h2,.missionVision .leftBlock,.content h2,.workPanelSection h2,.services h2,.contactDetails .leftBlock{ font-size:180% }
	.content h2{ line-height:20px}
	.workPanel p{margin: 10px 20px 10px;}
	.aboutPanel h2{ line-height:24px}
	.bannerCaption{padding: 220px 0 0;}
	.bannerCaption p{ margin-bottom:20px}
	.bannerCaption a{ float:none;}
	.missionVision .text{ font-size:12px; line-height:16px}
	.jobs{ font-size:12px;}
	.content p{line-height:18px}
	
	.contactformDiv{ width:100%}
	.contactform textarea{ width:95%}
	.contactformDivRight,.contactform select{ width:100%}
	.contactform input[type="text"], .contactform input[type="email"]{ width:96%}
	
}

@media screen and (max-width: 520px){
	footer ul{ width:100%; }
	.recentWork .projectBlock{ width:150px; height:auto; }
	.recentWork .projectBlock img{ width:150px; height:auto}
	.recentWork .projectHeader{ font-size:14px }
	.recentWork .projectFooter{ font-size:8px }
	.recentWork .leftBlock,.testimonials .leftBlock,.contactDetails .leftBlock,.bannerCaption h1,h1,.aboutPanel h2,.content h2,.workPanelSection h2,.services h2{ font-size:160% }
	.aboutPanel h2{ line-height:24px}
	footer ul{ display:none }
	.recentWork .leftBlock,.testimonials .leftBlock{ line-height:22px}
	/* About */
	.aboutPanel img{ width:40%; height:auto; float:right; margin: 0 0 0 20px; }
	.aboutBottomPanel p{ font-size:11px}
	.aboutBottomPanel img{ width:40%; height:auto; float:right; margin:0 0 0 10px}
}

@media screen and (max-width: 500px){
	nav a{font-size: 10px; padding: 10px;}
	.logo{ width:50%; height:auto }
	.logo img { width:100%; height:auto}
	.headerTopWrap{ padding:20px 0 }
	nav .current-menu-item a,nav a:hover{ background-size:10px auto}
	.bannerCaption{ padding: 170px 0 0;}
	.bannerCaption h1,h1{ font-size:140% }
	h1{ padding-top:20px}
	.testimonials .singleTestimonial,.homeLeftPanel p{ font-size:14px;line-height: 18px;}
	.homeRightPanel p{ font-size:12px;line-height: 16px; }
	h2{ font-size:16px}
	.testimonials .testimonialBlock{ width: 70%}
	.bannerCaption .buttonBlue{ padding:8px 20px 6px 15px  }
	.recentWork .projectBlock{ width:120px; height:auto; }
	.recentWork .projectBlock img{ width:120px; height:auto}
	.recentWork .projectHeader{ font-size:12px }
	.homeRightPanel p{ margin:10px}
	#nextWork, #prevWork, .recentWork .leftBlock span,.testimonials .testimonialNav{ font-size:12px}
	#prevWork img, #nextWork img,.testimonials .testimonialNav img{ width:4px; height:auto}
	.recentWork .leftBlockNav{ width:110px}
	.recentWork .leftBlock{width: 26%; padding:5px 0}
	.testimonials .testimonialClient{ font-size:12px}
	.recentWork .projectFooter{ font-size:8px; display:none }
	/* About */
	.workBottomPanel p{ font-size:11px}
	.aboutPanel p{ font-size:11px }
	.servicesBottomPanel.servicesBottomPanel{ width:100%; padding-bottom:20px; font-size:11px; line-height:16px}
	.contactDetails .text,.contactDetails h2{ font-size:12px; line-height:18px}
}

@media screen and (max-width: 400px){
	nav a{font-size: 8px; padding: 6px;}
	nav .current-menu-item a,nav a:hover{ background-size:8px auto}
	.headerTopWrap{ padding:10px 0}
	.recentWork .leftBlock,.testimonials .leftBlock,.bannerCaption h1,h1,.aboutPanel h2,.missionVision .leftBlock,.content h2,.workPanelSection h2,.services h2,.contactDetails .leftBlock{ font-size:120% }
	.aboutPanel h2{ line-height:18px}
	.bannerCaption{ padding: 120px 0 0;}
	.bannerCaption p { font-size:10px; line-height:10px}
	.buttonBlue{ padding:8px 20px 6px 15px; font-size:10px  }
	h2{ font-size:12px}
	.homeRightPanel p{ font-size:11px;}
	.homePanel h2{ padding:10px}
	.content{ padding:10px}
	.homeRightPanel img{ width:40%; height:auto}
	.testimonials .singleTestimonial, .homeLeftPanel p{font-size: 12px;line-height: 14px;}
	.recentWork .projectBlock{ width:100px; height:auto; }
	.recentWork .projectBlock img{ width:100px; height:auto}
	.recentWork .projectHeader{ font-size:12px }
	#nextWork, #prevWork, .recentWork .leftBlock span,.testimonials .testimonialNav{ font-size:10px}
	#prevWork img, #nextWork img,.testimonials .testimonialNav img{ width:3px; height:auto}
	.recentWork .projectHeader{ padding:5px}
	.recentWork .leftBlock, .testimonials .leftBlock{ line-height:16px}
	.testimonials .testimonialBlock{width: 70%;line-height: 10px;}
	.testimonials .testimonialClient{ font-size:8px; line-height:6px}

}

@media screen and (max-width: 320px){
	nav a{font-size: 7px; padding: 6px;}	
	nav .current-menu-item a,nav a:hover{ background-size:6px auto}
	.bannerCaption{ padding: 100px 0 0;}
	.recentWork .leftBlock,.testimonials .leftBlock,.bannerCaption h1,h1,.aboutPanel h2,.missionVision .leftBlock,.content h2,.workPanelSection h2,.contactDetails .leftBlock{ font-size:100% }
	.recentWork .projectBlock{ width:80px; height:auto; }
	.recentWork .projectHeader{ font-size:10px }
	.recentWork .projectBlock img{ width:80px; height:auto}
	.contactform h2{ line-height:16px}
	.contactformDiv{ margin-top:10px}
}