/*A Design by W3layouts
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
*/
/* reset */
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,dl,dt,dd,ol,nav ul,nav 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;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;padding:0px;margin:0px;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* start editing from here */
a{text-decoration:none;}
.txt-rt{text-align:right;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{	vertical-align:baseline;}/* vertical align baseline */
.vertical-top{	vertical-align:top;}/* vertical align top */
.underline{	padding-bottom:5px;	border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add 5px bottom padding and a underline */
nav.vertical ul li{	display:block;}/* vertical menu */
nav.horizontal ul li{	display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/
body{
	font-family: Arial, Helvetica, sans-serif;
	background: url('../images/header-bg.png') repeat-x;
}
.wrap{
	width:80%;
	margin:0 auto;
}
.logo{
	float:left;
	margin-top: 43px;
}
.top-nav{
	float:right;
}
.top-nav li{
	display:inline-block;
	margin-top: 42px;
}
.top-nav li a{
	color: #747474;
	font-family: "Agency FB", Helvetica, sans-serif;
	font-size: 18px;
	text-transform: uppercase;
	margin: 0px 51px 0px 0px;
}
.active a,.top-nav ul li a:hover,.top-nav ul li.active a{
	color:#fff;
}
.solution-grid{
	padding: 5px 0px 42px 0px;
}
.solution-grid img{
	float:left;
	
	opacity:0.9;	
}
.solution-grid img:hover{
	opacity:0.8;
	cursor:pointer;
}
.solution-grid p{
	float:right;
	color:#fff;
}
.solution-grid h1,.solution-grid span{
	float:left;
	padding-left: 20px;
}
.solution-grid h1{
	color:#fff;
}
.solution-grid h1{
	font-size: 53px;
	font-family: "Agency FB", Helvetica, sans-serif;
	padding: 42px 0px 0px 15px;
	
}
.solution-grid span{
	color:#3A3A3A;
	font-family: "Agency FB", Helvetica, sans-serif;
	font-size: 29px;
	width: 73%;
}
/*---grids----*/
.maanda p{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.8em;
	color: rgb(192, 192, 192);
	padding-left: 45px;
}
.grids{
	background: url('../images/grids-bg.png') repeat-x;
	padding: 15px 0px 61px 0px;
	margin-bottom: 20px;
	
}
.left-grid{
	width:30%;
	float:left;
	padding: 44px 0px 0px 0px;

}
.left-grid h4{
	font-family: "Agency FB", Helvetica, sans-serif;
	font-size: 37px;
	color:#fff;
}
.left-grid h5{
	font-size:22px;
	color:#fff;
	padding: 10px 0px;
}
.left-grid p{
	font-size: 14px;
	color: #fff;
	font-weight: bold;
	line-height: 1.8em;
}
.right-grid{
	float:right;
	width: 68%;
}
.grid1{
	width: 44%;
	float:left;
	padding: 0px 18px 18px 8px;
}

.grid1 p{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.8em;
	color: rgb(192, 192, 192);
	padding-left: 45px;
}
.grid1 h6:before {
	content: url('../images/top_marker.png') 10px 0px;
	vertical-align: -webkit-baseline-middle;
	padding: 10px 10px 0px 0px;

}
.grid1 h6{
	font-family: "Agency FB", Helvetica, sans-serif;
	font-size:22px;
	color:#fff;
	text-transform: uppercase;
	margin-bottom: 10px;
	cursor:pointer;
}
.hr{
	text-align:right;
	padding-top:10px;
	width:90%;
	border-top:1px solid silver;
	
}
.hr a{
	color:#fff;
	font-family: "Agency FB", Helvetica, sans-serif;
	font-size:18px;
}
.hr a:hover{
	color: rgb(192, 192, 192);
}
/*---sub-grid---*/
.sub-grid{
	background: url('../images/sub-grid-bg.png') repeat-x;
	padding:50px 0px;
}
.sub-grid h5{
	font-family: "Agency FB", Helvetica, sans-serif;
	font-size: 48px;
	color: #184A7B;
}
.sub-grid{
	text-align:center;
}
.sub-grid span{
	color:#343434;
}
.sub-grid p{
	font-family: "Agency FB", Helvetica, sans-serif;
	font-size:22px;
	color:#343434;
	line-height: 1.8em;
}
.box1{
	width: 45%;
	float:left;
	
}
.box1 p{
	width:90%;
}
.box1 h4,.box2 h4,.box3 h4{
	color: #343434;
	font-family: "Agency FB", Helvetica, sans-serif;
	font-size:30px;
}
.box1 p{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.8em;
	color: rgb(121, 116, 116);
}
.box1 a{
	color: #666;
	font-family: "Agency FB", Helvetica, sans-serif;
	font-size:20px;
	float:right;	
	padding-right:67px;
}
.box1 a:hover{
	color:#555;
}
.box2{
	width: 27%;
	float:left;
	padding-left:20px;
}

.box2 li{
	display:inline-block;
}
.box2 li img{
	padding-top:10px;
}
.box2 li p{
	float:right;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.8em;
	color: rgb(121, 116, 116);
	
}
.box3{
	width: 26%;
	float:left;
}
.box3 span,.box3 p{
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
		line-height: 1.8em;
		color: rgb(121, 116, 116);
	}

.box3 a{
	color: #343434;
}
.box3 a:hover{
	color:#666;
}
/*---footer---*/
.footer-links{
	float:left;
}
.footer-links li{
	display: inline-block;
}
.footer-links li a{
	color: #747474;
	font-family: "Agency FB", Helvetica, sans-serif;
	font-size: 18px;
	text-transform: uppercase;
	margin: 0px 20px 0px 0px;
}
.active a,.footer-links ul li a:hover,.footer-links ul li.active a{
	color:#000;
}
.social{
	float: right;
	border-left: 1px solid silver;
	height: 30px;
	padding-left: 25px;
}
.social li{
	display:inline-block;
}
.social li h4{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.8em;
	color: rgb(121, 116, 116);
}
.social li img{
	vertical-align:middle;
}
.social li img:hover{
	opacity:0.9;
}
.footer-nav{
	margin-top: 16px;
	border:1px solid silver;
	height:29px;
	padding: 13px 0px 10px 0px;
	border-left:none;
	border-right:none;
}
.copy-right{
	text-align:center;
	color: #747474;
	font-family: "Agency FB", Helvetica, sans-serif;
	font-size: 18px;
	padding: 6px 0px;
}
.copy-right a{
	color: #747474;
	padding-right:3px;
}
.copy-right a:hover{
	color:#444;
}
/*---services----*/
.services-sidebar{
	float:left;
	width:19%;
	padding-top:50px;
	height: 700px;
}
.services-sidebar h4{
	font-family: "Agency FB", Helvetica, sans-serif;
	font-size: 22px;
	color: #17497A;
	text-transform: uppercase;
	margin-bottom: 10px;
	cursor: pointer;
	margin-top: 20px;
}
.services-sidebar li{
	padding:5px 0px;
}
.services-sidebar li a{
	color: #747474;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	
}
.services-sidebar li a:hover{
	color: #17497A;
}
.services-grid{
	float:right;
	width:80%;
	margin-top: 50px;
	
}
.services-grid img{
	float:left;
	margin-right: 20px;	
	background:#fff;
	padding: 10px;
	box-shadow: 0px 0px 1px #999;
	cursor:pointer;
}
.services-grid img:hover{
	box-shadow: 0px 0px 1.5px #444;
}
.services-grid h4{
	color:#17497A;
	font-family: "Agency FB", Helvetica, sans-serif;
	font-size: 30px;
	cursor:pointer;
	
}
.services-grid span,.services-grid p{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.6em;
	color: rgb(121, 116, 116);
	width: 71%;
	float:right;
}
.services-grid h5{
	color: #17497A;
}
.services-grid h5:hover{
	color:#666;
	cursor: pointer;
}
.services-grid a{
	color: #17497A;
	font-family: "Agency FB", Helvetica, sans-serif;
	font-size: 20px;
	padding:5px 0px;
	float:right;
	padding-right:50px;
	
}
.services-grid a:before {
	content: url('../images/button_marker.png') 10px 0px;
	vertical-align:top;
	padding: 0px 10px 0px 0px;

}
.services-grid a:hover{
	color:#666;
}
.services-grid h4{
	font-family: "Agency FB", Helvetica, sans-serif;
	font-size: 22px;
	color: #17497A;
	text-transform: uppercase;
	margin-bottom: 18px;
	cursor: pointer;
	margin-top: 20px;
}
/*---woks---*/
/*---products---*/
.products h3{
	color: #17497A;
	font-size:22px;
	text-transform: uppercase;
	padding-bottom:10px;
	font-family:"Agency FB" Helvetica, sans-serif;
	padding-top: 71px;
}
.product-grid h4,.last1 h4{
	color: #585252;
	font-size:18px;
	text-transform: uppercase;
	padding:5px 0px;
	font-weight:bold;
	font-family:"Agency FB" Helvetica, sans-serif;	
}
.product-grid,.last1{
	width: 280px;
	float: left;
	border: 1px solid #F1F1F1;
	padding: 15px;
	margin: 16px 12px 33px 0px;
}
.product-grid:hover,.last1:hover{
	box-shadow:0px 0px 10px #F1F1F1;
}


.product-grid p{
	float: right;
	color:#666;
	font-size: 12px;
	text-align: justify;
	line-height: 2.2;
	font-family: Arial, Helvetica, sans-serif;
	
}
.product-grid img{
	cursor:pointer;
}
.product-grid img:hover{
	opacity:0.9;
}
/*----contact----*/
.blocks p {
	margin-bottom:15px;
	position:relative;
}

.btn {
	display:block;
	float:left;
	height:31px;
	line-height:31px;
	padding:0 10px;
	background:url(../gfx/bgbtn.jpg) repeat-x;
	color:#565e62;
	font-weight:bold;
	font-size:11px;
	border:1px solid #e1e0df;
	outline:none;
}

.text,
.textarea {
	padding:5px 10px;
	height:27px;
	border:1px solid #ddd;
	color:#333;
	background:url(../gfx/bginput.jpg) repeat-x bottom #fff;
	position:relative;
	z-index:2;
}

.text {
	width:220px;
}

.textarea {
	height:150px;
	width:350px;
}

.blocks label {
	float:left;
	width: 131px;
	line-height:37px;
	text-align:right;
	margin-right:15px;

color:#666;
}

.blocks label.error,
.blocks label.ok {
	position:absolute;
	z-index:1;
	top:-4px;
	left:110px;
	padding:5px 15px 5px 280px;
	/*reset label*/
	width:auto;
	text-align:left;
	margin:0;
	background-repeat:no-repeat;
	background-position:257px 16px;
}

.blocks label.ok {
	background-image:url(../gfx/icook.gif);
	background-color:#deefca;
	color:#577530;
}

.blocks label.error {
	background-image:url(../gfx/icofail.gif);
	background-color:#f5d6d7;
	color:#c81925;
}

.area label.ok,
.area label.error {
	height:163px;
	padding-left:410px;
	background-position:387px 16px;
}

/* CSS3 */

.text,
.textarea,
.blocks label.error,
.blocks label.ok { 
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	
	outline: none;
	color: #17497A;
}
.btn{
	cursor:pointer;
	border-radius: 0.5em;
}
a {
color: #CCCCCC;
	display: inline-block;
}

a img {
border:none;
}
/*----contact----*/
.contact{
	float:left;
	margin-top: 50px;	
	border-left:1px solid silver;
	padding-left:50px;	
}
.contact h4{
	font-family: "Agency FB", Helvetica, sans-serif;
	font-size: 22px;
	color: #17497A;
	text-transform: uppercase;
	margin-bottom: 10px;
	cursor: pointer;
	margin-top: 20px;
}
 /*-- responsive design --*/
 @media(max-width:1440px){
 .services-grid span, .services-grid p {
    width: 68%;
}
}
 @media(max-width:1366px){
 .services-grid span, .services-grid p {
    width: 66%;
}
}
 @media(max-width:1366px){
 .services-grid span, .services-grid p {
    width: 63%;
}
}
@media(max-width:1080px){
.wrap {
    width: 90%;
}
.solution-grid span {
    font-size: 23px;
    width: 64%;
}
.box1 {
    width: 43%;
}
.logo {
    margin-top: 29px;
}
.services-grid span, .services-grid p {
    width: 57%;
}
.services-grid h4 {
    font-size: 20px;
}
.product-grid, .last1 {
    width: 22%;
}
}
@media(max-width:991px){
.product-grid, .last1 {
    width: 22%;
}
}
@media(max-width:800px){
.top-nav li a {
    margin: 0px 20px 0px 0px;
}
.solution-grid img {
    width: 25%;
}
.solution-grid span {
    font-size: 19px;
    width: 69%;
}
.left-grid {
    width: 100%;
    float: none;
    padding: 0px 0px 0px 0px;
}
.right-grid {
    float: none;
    width: 100%;
    margin-top: 2em;
}
.grids {
    background-size: cover;
}
.services-sidebar {
    width: 100%;
    height: 510px;
}
.services-grid {
    width: 100%;
    margin-top: 0px;
}
.product-grid, .last1 {
    width: 26%;
}
.contact {
    margin-top: 0;
    border-left: none;
    padding-left: 0px;
    width: 100%;
}
}
@media(max-width:768px){
.solution-grid h1 {
    font-size: 39px;
    padding: 24px 0px 0px 18px;
}
}
@media(max-width:736px){
.box1 {
    width: 100%;
}
.box3 {
    width: 44%;
    margin-top: 2em;
}
.box2 {
    width: 50%;
    margin-top: 2em;
    margin-right: 2em;
}
.footer-links li a {
    margin: 0px 12px 0px 0px;
}
.services-grid span, .services-grid p {
    width: 55%;
}
}
@media(max-width:667px){
.top-nav li a {
    margin: 0px 7px 0px 0px;
}
.footer-links {
    float: none;
    text-align: center;
    margin-bottom: 1em;
}
.social {
    float: none;
    border-left: none;
    height: 30px;
    padding-left: 0;
    text-align: center;
}
.box2 {
    width: 47%;
}
.footer-nav {
    height: 69px;
}
.services-grid span, .services-grid p {
    width: 49%;
}
.product-grid, .last1 {
    width: 25%;
}
}
@media(max-width:640px){
.box2 {
    width: 46%;
}
.services-grid img {
    float: none;
}
.services-grid span, .services-grid p {
    width: 100%;
}
.services-grid {
    margin-bottom: 1.5em;
}
}
@media(max-width:600px){
.logo {
    margin-top: 29px;
    text-align: center;
    float: none;
}
.top-nav li {
    margin-top: 26px;
}
.top-nav {
    float: none;
    text-align: center;
}
.solution-grid img {
    width: 23%;
}
.solution-grid {
    padding: 100px 0px 92px 0px;
}
.product-grid, .last1 {
    width: 24%;
}
}
@media(max-width:568px){
.box3 {
    width: 43%;
}
.solution-grid img {
    width: 20%;
}
.solution-grid h1 {
    font-size: 32px;
    padding: 0px 0px 0px 18px;
}
.textarea {
    width: 60%;
}
.text {
    width: 46%;
}
}
@media(max-width:480px){
.left-grid h4 {
    font-size: 30px;
}
.grids {
    padding: 31px 0px 31px 0px;
}
.grid1 {
    width: 100%;
    padding: 0px 0px 18px 0px;
}
.box2 {
    width: 44%;
}
.product-grid, .last1 {
    width: 39%;
}
.textarea {
    width: 58%;
}
}
@media(max-width:414px){
	.top-nav li a {
    margin: 0px 5px 0px 0px;
}
.solution-grid {
    padding: 100px 0px 92px 0px;
    text-align: center;
}
.solution-grid img {
    width: 30%;
    margin: 0 119px 20px;
}
.solution-grid h1 {
    font-size: 32px;
    padding: 0px 0px 0px 0px;
}
.solution-grid span {
    width: 100%;
}
.solution-grid h1, .solution-grid span {
    float: none;
    padding-left: 0;
}
.solution-grid {
    padding: 57px 0px 70px 0px;
    text-align: center;
}
.box2 {
    width: 100%;
    margin-right: 0;
    padding: 0;
	margin-top:1.5em;
}
.box3 {
    width: 100%;
	margin-top:1.5em;
}
.footer-links li a {
    margin: 0px 5px 0px 0px;
}
.product-grid, .last1 {
    width: 90%;
	margin: 16px 0px 0px 0px;
}
.blocks label {
    width: 100%;
    text-align: left;
    margin-right: 0;
}
.text {
    width: 85%;
}
.textarea {
    width: 85%;
}
}
@media(max-width:384px){
.top-nav li a {
    font-size: 16px;
}
.footer-links li a {
    font-size: 15px;
}
}
@media(max-width:320px){
.top-nav li a {
    font-size: 13px;
}
.solution-grid img {
    width: 40%;
    margin: 0 82px 20px;
}
.solution-grid h1 {
    font-size: 26px;
}
.solution-grid span {
    font-size: 17px;
}
.solution-grid {
    padding: 50px 0px 50px 0px;
}
.left-grid h5 {
    font-size: 19px;
}
.grid1 p {
    font-size: 13px;
}
.footer-links li a {
    font-size: 13px;
}
.services-sidebar h4 {
    margin-top: 0px;
}
.services-sidebar {
    height: 460px;
}
.services-grid img {
    margin-right: 0px;
}
.services-grid a {
    padding: 12px 0px 0;
    padding-right: 0;
}
.top-nav li a {
    margin: 0px 5px 0px 0px;
}
.product-grid, .last1 {
    width: 88%;
}
}