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

/* Start of Desktop resolution */
@media screen and (max-width:1199px) and (min-width:1001px){
.wrapper{ width:100%;}
.maincontainer{ margin:0 auto; clear:both; width:90%;}
header .row {width: 90%;}
.main-navigation li a {display: block;padding: 16px 18px 10px 18px ;}
header .logo {width:28%;}
#intro {width: 100%;height: 550px;min-height: auto;}


/* -- strat of service */
.column{ width:31.4%; float:left; z-index:99; margin:-0px 0 0 0; text-align:center; padding:0px 15px 20px 0px;border-right:#376fb4 1px solid;}
.column +.column{ margin: -0px 0 0 24px;text-align:center;padding:0px 15px 20px 0px; z-index:99;}

.column h3{ font-size:20px;padding: 0 0 5px 0px;}
.column p{ font-size:14px;line-height:20px;}

/* Start of about us */
#about {padding-top: 6rem;padding-bottom: 4rem;}
.aboutheading h1{ text-align: center; font-size:27px; }
#about p{ font-size:16px; line-height:24px;padding: 0 100px;}

.readmore{padding:11px 30px;font-size:18px;}
.viewmore{padding:11px 35px;font-size:16px;}


/* Start of what */
#what {padding-top: 6rem;padding-bottom: 4rem;}
.lefttext{ width:55%; float:left; padding:25px 0 0 0px;}
.lefttext h2{ font-size:27px; padding: 0 0 10px 0px;}
.lefttext h5{font-size:22px; padding: 0 0 8px 0px; line-height:30px;}
.lefttext p{line-height:24px; font-size:16px;}
.rightimage{width:40%; float:right;}
.rightimage img{ width:100%;}

/* why section */
#why {padding-top: 6rem;padding-bottom: 4rem;}
.whyleftimage{ width:40%; float:left; padding:25px 0 0 0px;}
.whyleftimage img{ width:100%;}
.righttext{ padding:0px; margin:0px; width:55%; float:right;}
.righttext h2{ font-size:27px;padding: 0 0 10px 0px;}
.righttext h5{font-size:22px;padding: 0 0 8px 0px; line-height:30px;}
.righttext p{line-height:24px; font-size:16px;}
.greybg{ padding:15px; text-align:center;}
.greybg h2{ font-size:20px;padding: 0 0 10px 0px;}



/* numberbg */
.three_columnbox{ width:86%; padding:130px 0px; margin:0px auto; clear:both;}
.fieldbox{ width:31%; float:left; text-align:center; margin: 0 0 60px 0px;}
.fieldbox +.fieldbox{ margin: 0 0 60px 25px; border-left:#3c73b6 1px solid;text-align:center;}
.fieldbox h2{font-size:70px; color:#fff; padding: 0 0 30px 0px;}
.fieldbox p{ font-size:18px;line-height:27px;}


/* Start of contact */
#contact {padding-top: 6rem;padding-bottom: 4rem;}
.formrow{ width:100%; margin:10px 0 0 0px; clear:both;}
.box2{ width:10%; margin:18px auto 0 auto; clear:both;}
#contact p{ font-size:16px; line-height:24px;padding: 0 120px; text-align:center; }
.contactheading h1{ text-align: center; font-size:27px; }

#contactform{ width:100%; margin:20px 0 0 0px;}
.leftcontact{ width:46.6%; float:left;}
.rightcontact{ width:48.6%; float:right;}

.contact-form-row-input{width:100%; border:2px solid #e5e5e5; padding:15px; margin:5px 0 0 0;background:#ffffff !important;font-family:"OpenSans-Regular"; font-size:15px; color:#a9a9a9;}
.contact-form-row-textarea{width:100%; border:2px solid #e5e5e5; border-radius:3px; height:172px; font-size:15px; color:#a9a9a9; padding:10px; margin:5px 0 0 0;}

.contact-form-row-btn{font-size:18px; display: inline-table; border-radius:3px; padding:12px 32px; color:#fff; font-family:"OpenSans-Semibold";background:#e5601f;border:none; -webkit-transition:.5s; -khtml-transition:.5s; -moz-transition:.5s; -o-transition:.5s;float:left;}
.contact-form-row-btn:hover{background:#1b4b84; cursor:pointer;}


}


/* Start of Desktop resolution */
@media screen and (max-width:1000px) and (min-width:801px){
.wrapper{ width:100%;}
.maincontainer{ margin:0 auto; clear:both; width:90%;}
header .row {width: 90%;}
#main-nav-wrap {font-size: 15px;}
.main-navigation li a {padding: 16px 10px 10px 10px  !important;}
.main-navigation li a.active {font-size:15px;padding:5px 20px !important;}
header .logo {width:24%;}
.sticky .logo a {width: 150px;background-size: 150px 50px;}

#intro {width: 100%;height: 550px;min-height: auto;}
.slogan{padding:2em 0 0 0px; margin:1em auto 0 auto; width:95%; z-index:999; text-align:center;}
.slogan h1{font-size:36px;padding: 0 0 25px 0px;}
.slogan p{font-size:18px; color:#fff;}
.dash{ width:100%; margin:20px 0 0 0px;}
.dash img{ width:auto;}


/* -- strat of service */
.column{ width:31%; float:left; z-index:99; margin:0px 0 0 0; text-align:center; padding:0px 10px 20px 0px;border-right:#376fb4 1px solid;}
.column +.column{ margin: -0px 0 0 24px;text-align:center;padding:0px 15px 20px 0px; z-index:99;}

.column h3{ font-size:16px;padding: 0 0 5px 0px;}
.column p{ font-size:13px;line-height:20px;}

/* Start of about us */
#about {padding-top: 8rem;padding-bottom: 4rem;}
.aboutheading h1{ text-align: center; font-size:27px; }
#about p{ font-size:16px; line-height:24px; padding:0 50px;}

.readmore{padding:11px 30px;font-size:18px;}
.viewmore{padding:11px 35px;font-size:16px;}


/* Start of what */
#what {padding-top: 6rem;padding-bottom: 4rem;}
.lefttext{ width:55%; float:left; padding:25px 0 0 0px;}
.lefttext h2{ font-size:27px; padding: 0 0 10px 0px;}
.lefttext h5{font-size:22px; padding: 0 0 8px 0px; line-height:30px;}
.lefttext p{line-height:24px; font-size:16px;}
.rightimage{width:40%; float:right;}
.rightimage img{ width:100%;}

/* why section */
#why {padding-top: 6rem;padding-bottom: 4rem;}
.whyleftimage{ width:40%; float:left; padding:25px 0 0 0px;}
.whyleftimage img{ width:100%;}
.righttext{ padding:0px; margin:0px; width:55%; float:right;}
.righttext h2{ font-size:27px;padding: 0 0 10px 0px;}
.righttext h5{font-size:22px;padding: 0 0 8px 0px; line-height:30px;}
.righttext p{line-height:24px; font-size:16px;}
.greybg{ padding:15px; text-align:center;}
.greybg h2{ font-size:20px;padding: 0 0 10px 0px;}



/* numberbg */
.three_columnbox{ width:100%; padding:130px 0px; margin:0px auto; clear:both;}
.fieldbox{ width:30%; float:left; text-align:center; margin: 0 0 60px 0px;}
.fieldbox +.fieldbox{ margin: 0 0 60px 22px; border-left:#3c73b6 1px solid;text-align:center;}
.fieldbox h2{font-size:60px; color:#fff; padding: 0 0 30px 0px;}
.fieldbox p{ font-size:16px;line-height:22px;}


/* Start of contact */
#contact {padding-top: 6rem;padding-bottom: 4rem;}
.formrow{ width:100%; margin:10px 0 0 0px; clear:both;}
.box2{ width:10%; margin:18px auto 0 auto; clear:both;}
#contact p{ font-size:16px; line-height:24px;padding: 0 50px; text-align:center; }
.contactheading h1{ text-align: center; font-size:27px; }

#contactform{ width:100%; margin:20px 0 0 0px;}
.leftcontact{ width:46.6%; float:left;}
.rightcontact{ width:48.6%; float:right;}

.contact-form-row-input{width:100%; border:2px solid #e5e5e5; padding:15px; margin:5px 0 0 0;background:#ffffff !important;font-family:"OpenSans-Regular"; font-size:15px; color:#a9a9a9;}
.contact-form-row-textarea{width:100%; border:2px solid #e5e5e5; border-radius:3px; height:172px; font-size:15px; color:#a9a9a9; padding:10px; margin:5px 0 0 0;}

.contact-form-row-btn{font-size:18px; display: inline-table; border-radius:3px; padding:12px 32px; color:#fff; font-family:"OpenSans-Semibold";background:#e5601f;border:none; -webkit-transition:.5s; -khtml-transition:.5s; -moz-transition:.5s; -o-transition:.5s;float:left;}
.contact-form-row-btn:hover{background:#1b4b84; cursor:pointer;}

/* start of footer */
.socialmedia{ width:45%; text-align:center; margin:10px auto; clear:both;}

}

/* Start of Tablet resolution */
@media screen and (max-width:800px) and (min-width:651px){
wrapper{ width:100%;}
.maincontainer{ margin:0 auto; clear:both; width:90%;}
header .row {width: 90%;}
#main-nav-wrap {font-size: 15px;}
.main-navigation li a {padding: 16px 7px 10px 7px  !important;}
.main-navigation li a.active {font-size:15px;padding:5px 15px !important;}
header .logo {width:24%;}
.sticky .logo a {width: 150px;background-size: 150px 50px;}

#intro {width: 100%;height: 550px;min-height: auto;}
.slogan{padding:2em 0 0 0px; margin:1em auto 0 auto; width:95%; z-index:999; text-align:center;}
.slogan h1{font-size:30px;padding: 0 0 20px 0px;}
.slogan p{font-size:16px; color:#fff;}
.dash{ width:100%; margin:20px 0 0 0px;}
.dash img{ width:auto;}


/* -- strat of service */
.column{ width:30.2%; float:left; z-index:99; margin:0px 0 0 0; text-align:center; padding:0px 10px 20px 0px;border-right:#376fb4 1px solid;}
.column +.column{ margin: -0px 0 0 24px;text-align:center;padding:0px 10px 20px 0px; z-index:99;}

.column h3{ font-size:15px;padding: 0 0 5px 0px;}
.column p{ font-size:13px;line-height:20px;}

/* Start of about us */
#about {padding-top: 8rem;padding-bottom: 4rem;}
.aboutheading h1{ text-align: center; font-size:25px; }
#about p{ font-size:15px; line-height:22px; padding:0 0px;}

.readmore{padding:11px 30px;font-size:15px;}
.viewmore{padding:11px 35px;font-size:15px;}


/* Start of what */
#what {padding-top: 6rem;padding-bottom: 4rem;}
.lefttext{ width:55%; float:left; padding:25px 0 0 0px;}
.lefttext h2{ font-size:25px; padding: 0 0 10px 0px;}
.lefttext h5{font-size:19px; padding: 0 0 8px 0px; line-height:26px;}
.lefttext p{line-height:22px; font-size:15px;}
.rightimage{width:40%; float:right;}
.rightimage img{ width:100%;}

/* why section */
#why {padding-top: 6rem;padding-bottom: 4rem;}
.whyleftimage{ width:40%; float:left; padding:25px 0 0 0px;}
.whyleftimage img{ width:100%;}
.righttext{ padding:0px; margin:0px; width:55%; float:right;}
.righttext h2{ font-size:25px;padding: 0 0 10px 0px;}
.righttext h5{font-size:19px;padding: 0 0 8px 0px; line-height:26px;}
.righttext p{line-height:22px; font-size:15px;}
.greybg{ padding:12px; text-align:center;}
.greybg h2{ font-size:18px;padding: 0 0 10px 0px;}



/* numberbg */
.three_columnbox{ width:100%; padding:130px 0px; margin:0px auto; clear:both;}
.fieldbox{ width:30%; float:left; text-align:center; margin: 0 0 60px 0px;}
.fieldbox +.fieldbox{ margin: 0 0 60px 20px; border-left:#3c73b6 1px solid;text-align:center;}
.fieldbox h2{font-size:50px; color:#fff; padding: 0 0 24px 0px;}
.fieldbox p{ font-size:15px;line-height:22px;}


/* Start of contact */
#contact {padding-top: 6rem;padding-bottom: 4rem;}
.formrow{ width:100%; margin:10px 0 0 0px; clear:both;}
.box2{ width:10%; margin:18px auto 0 auto; clear:both;}
.contact h1{ text-align: center; font-size:25px; }
#contact p{ font-size:15px; line-height:22px; padding:0 0px;}

#contactform{ width:100%; margin:20px 0 0 0px;}
.leftcontact{ width:46.6%; float:left;}
.rightcontact{ width:48.6%; float:right;}

.contact-form-row-input{width:100%; border:2px solid #e5e5e5; padding:15px; margin:5px 0 0 0;background:#ffffff !important;font-family:"OpenSans-Regular"; font-size:15px; color:#a9a9a9;}
.contact-form-row-textarea{width:100%; border:2px solid #e5e5e5; border-radius:3px; height:172px; font-size:15px; color:#a9a9a9; padding:10px; margin:5px 0 0 0;}

.contact-form-row-btn{font-size:18px; display: inline-table; border-radius:3px; padding:12px 32px; color:#fff; font-family:"OpenSans-Semibold";background:#e5601f;border:none; -webkit-transition:.5s; -khtml-transition:.5s; -moz-transition:.5s; -o-transition:.5s;float:left;}
.contact-form-row-btn:hover{background:#1b4b84; cursor:pointer;}

/* start of footer */
.socialmedia{ width:55%; text-align:center; margin:10px auto; clear:both;}

}

/* Start of Iphone / Android resolution */
@media screen and (max-width:650px) and (min-width:481px){
.wrapper{ width:100%;}
.maincontainer{ margin:0 auto; clear:both; width:90%;}



.slogan{width:100%; text-align:center;padding:0em 0 0 0px; margin:0em auto 0 auto;}
.slogan h1{font-size:25px;padding: 0 0 15px 0px; line-height:28px;}
.slogan p{font-size:16px;}
.dash{ width:100%; margin:15px 0 0 0px;}
#intro {
	background-size:none ;
	width: 100%;
	height:auto; padding:150px 0 150px 0;
	min-height: 500px;
}
.intro-content {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	-webkit-transform: translateY(0rem);
	-ms-transform: translateY(0rem);
	transform: translateY(0rem);
}



/* Start of servicesection */
.services{ background:#295a96;margin:10px 0 0 0px;  }
.column{ width:100%; float:none; z-index:99; margin:0px 0 0 0; text-align:center; padding:20px 0px 20px 0px;border-right:0;border-bottom:#376fb4 1px solid;}
.column +.column{ margin:0px 0 0 0px;text-align:center;padding:20px 0px 20px 0px; z-index:99;}

.column h3{ font-size:20px;}
.column p{ font-size:14px;line-height:20px;}


/* start of about section */
.aboutheading{ text-align:center; padding: 0 0 30px 0px; margin: 0 0 20px 0px;width:100%; background:url(../images/dashabout.png) no-repeat center bottom;line-height:35px;}
.aboutheading h1{ font-size:24px; line-height:30px;}
#about p{ font-size:18px; color:#666; line-height:25px;font-family:"OpenSans-Light"; padding: 0 0px;}

/*-- what section --*/
#what {padding-top: 6rem;padding-bottom: 4rem;}
.whatbg{ width:100%; background-color: whitesmoke; height:auto;}
.lefttext{ width:100%; float:none; padding:25px 0 0 0px; text-align:center;}
.lefttext h2{ font-size:25px;}
.lefttext h5{font-size:22px; padding:0 0 15px 0px; line-height:25px; text-transform:none; font-weight:normal; }
.lefttext p{line-height:24px; font-size:18px; padding:0px;}


.rightimage{ padding:0px; margin:25px 0 0 0px; width:100%; float:none;}
.rightimage img{ width:100%;}

/* start of why */
#why {padding-top: 6rem;padding-bottom:4rem;}
.whybg{ width:100%; height:auto; padding: 0 0 25px 0}
.whyleftimage{ width:100%; float:none; padding:15px 0 0 0px;}
.whyleftimage img{ width:100%;}

.righttext{ padding:0px; margin:0px; width:100%; float:none; text-align:center;}
.righttext h2{ font-size:25px; color:#2a2a2a;}
.righttext h5{font-size:22px; padding:0 0 15px 0px; line-height:25px; text-transform:none; font-weight:normal;}
.righttext p{line-height:24px; font-size:18px;}

.box{ width:100%; margin:10px 0 0 0px; clear:both;}
.greybg{ width:92%; background:#f5f5f5;}
.greybg h2{ font-size:24px;padding: 0 0 0px 0px;}

/* Start of numberbg */
.numberbg{ width:100%;min-height:386px;}
.three_columnbox{ width:90%; padding:30px 0px; margin:0px auto; clear:both;}
.fieldbox{ width:100%; float:none; text-align:center; margin: 0 0 20px 0px; padding:30px 0 0 0px;}
.fieldbox +.fieldbox{ margin: 0 0 20px 0px; border-top:#3c73b6 1px solid;border-left:0;text-align:center;padding:30px 0 0 0px;}
.fieldbox h2{font-size:60px; padding: 0 0 15px 0px;}
.fieldbox p{ font-size:18px;line-height:23px; text-transform:none;}

/* Start of numberbg */
.leftcontact{ width:100%; float:none;}
.rightcontact{ width:100%; float:none;}

/* start of contact */
#contact {background: #f5f5f5;padding-top: 6rem;padding-bottom: 4rem;}
#contact p{ font-size:16px;line-height:24px;padding: 0 0px;}
.contactheading{ text-align:center;width:100%;}
.contactheading h1{ text-align: center; font-size:24px;}
.contact-form-row-btn{font-size:16px; display: inline-block; color:#fff; float:left; border-radius:3px; padding:10px 30px; border:0px; border-radius:5px;}
.box2 {width: auto;margin: 18px auto 0 auto;clear: both;}



/* Start of footer */
.flogo{ width:auto; text-align:center;}
.flogo img{ width:auto;  margin: 0 0 20px 0px;}
.footer{ background:#3b3e4f; padding:50px 0 0 0px; text-align:center;}
.footer ul li{ display:inline; padding:0 15px; margin:0px;font-size:16px; border-left:0px; line-height:24px;}

.socialmedia{ width:100%; text-align:center; margin:10px auto; clear:both;}
.socialmedia ul li{padding:0px; margin:0px;border-left:0px !important; }
.socialmedia ul li a{padding:7px 12px; margin: 0 0 0 5px; color:#3b3e4f; background:#7b848f; border-radius:50%;}

.copyright p{ color:#fff;font-family:"OpenSans-Regular"; font-size:15px;}

}

/* Start of iphone /android resolution */
@media screen and (max-width:480px) and (min-width:300px){
.wrapper{ width:100%;}
.maincontainer{ margin:0 auto; clear:both; width:90%;}

.slogan{width:100%; text-align:center;padding:0em 0 0 0px; margin:0em auto 0 auto;}
.slogan h1{font-size:30px;padding: 0 0 20px 0px; line-height:36px;}
.slogan p{font-size:20px;}
.dash{ width:100%; margin:20px 0 0 0px;}
.dash img{ width:auto;}

#intro {
	background-size:none ;
	width: 100%;
	height:auto; padding:150px 0 150px 0;
	min-height: 500px;
}
.intro-content {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	-webkit-transform: translateY(0rem);
	-ms-transform: translateY(0rem);
	transform: translateY(0rem);
}



/* Start of servicesection */
.services{ background:#295a96;margin:10px 0 0 0px;  }
.column{ width:100%; float:none; z-index:99; margin:0px 0 0 0; text-align:center; padding:20px 0px 20px 0px;border-right:0;border-bottom:#376fb4 1px solid;}
.column +.column{ margin:0px 0 0 0px;text-align:center;padding:20px 0px 20px 0px; z-index:99;}

.column h3{ font-size:20px;}
.column p{ font-size:14px;line-height:20px;}


/* start of about section */
.aboutheading{ text-align:center; padding: 0 0 30px 0px; margin: 0 0 20px 0px;width:100%; background:url(../images/dashabout.png) no-repeat center bottom;line-height:35px;}
.aboutheading h1{ font-size:24px; line-height:30px;}
#about p{ font-size:18px; color:#666; line-height:25px;font-family:"OpenSans-Light"; padding: 0 0px;}


/* start of what */
#what {padding-top: 6rem;padding-bottom: 4rem;}
.whatbg{ width:100%; background-color: whitesmoke; height:auto;}
.lefttext{ width:100%; float:none; padding:25px 0 0 0px; text-align:center;}
.lefttext h2{ font-size:24px;}
.lefttext h5{font-size:19px; padding:0 0 15px 0px; line-height:25px; text-transform:none; font-weight:normal; }
.lefttext p{line-height:22px; font-size:16px; padding:0px;}


.rightimage{ padding:0px; margin:25px 0 0 0px; width:100%; float:none;}
.rightimage img{ width:100%;}

/* start of why */
#why {padding-top: 6rem;padding-bottom:4rem;}
.whybg{ width:100%; height:1200px; padding: 0 0 25px 0}

.whyleftimage{ width:100%; float:none; padding:15px 0 0 0px;}
.whyleftimage img{ width:100%;}

.righttext{ padding:0px; margin:0px; width:100%; float:none; text-align:center;}
.righttext h2{ font-size:24px; color:#2a2a2a;}
.righttext h5{font-size:19px; padding:0 0 15px 0px; line-height:25px; text-transform:none; font-weight:normal;}
.righttext p{line-height:22px; font-size:16px;}

.box{ width:100%; margin:10px 0 0 0px; clear:both;}
.greybg{ width:92%; background:#f5f5f5;}
.greybg h2{ font-size:20px;padding: 0 0 0px 0px;}

.ocarousel_window_slides * {margin: 0 25px 0 50px;}

/* Start of numberbg */
.numberbg{ width:100%;min-height:386px;}
.three_columnbox{ width:90%; padding:30px 0px; margin:0px auto; clear:both;}
.fieldbox{ width:100%; float:none; text-align:center; margin: 0 0 20px 0px; padding:30px 0 0 0px;}
.fieldbox +.fieldbox{ margin: 0 0 20px 0px; border-top:#3c73b6 1px solid;border-left:0;text-align:center;padding:30px 0 0 0px;}
.fieldbox h2{font-size:60px; padding: 0 0 15px 0px;}
.fieldbox p{ font-size:18px;line-height:23px; text-transform:none;}

/* Start of numberbg */
.leftcontact{ width:100%; float:none;}
.rightcontact{ width:100%; float:none;}
#contact {background: #f5f5f5;padding-top: 6rem;padding-bottom: 4rem;}
#contact p{ font-size:16px;line-height:24px;padding: 0 0px;}
.contact-form-row-btn{font-size:16px; display: inline-block; float:left; border-radius:3px; padding:10px 30px;background: #e5601f; border:0px; border-radius:5px; color:#fff;}
.box2 {width: auto;margin: 18px auto 0 auto;clear: both;}


/* Start of footer */
.flogo{ width:auto; text-align:center;}
.flogo img{ width:100%;  margin: 0 0 20px 0px;}
.footer{ background:#3b3e4f; padding:50px 0 0 0px; text-align:center;}
.footer ul li{ display:inline; padding:0 15px; margin:0px;font-size:16px; border-left:0px; line-height:24px;}

.socialmedia{ width:100%; text-align:center; margin:10px auto; clear:both;}
.socialmedia ul li{padding:0px; margin:0px;border-left:0px !important; }
.socialmedia ul li a{padding:7px 12px; margin: 0 0 0 5px; color:#3b3e4f; background:#7b848f; border-radius:50%;}

.copyright p{ color:#fff;font-family:"OpenSans-Regular"; font-size:15px;}

}