@import url(https://fonts.googleapis.com/css?family=Dosis:400,200,300,500,600,700,800);
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,200,700);

/*************************
*******Typography******
**************************/
body {
  background: #fff;
  font-family: 'Dosis', sans-serif;
  font-size: 17px;
  font-weight: 400;
  color: #929292;
  line-height: 26px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  font-family: 'Yanone Kaffeesatz', 'sans-serif';
  color: #272727;
}
p {
	letter-spacing: 1px;
	text-align: justify;
}	
a {
  color: #F26433;
  -webkit-transition: color 400ms, background-color 400ms;
  -moz-transition: color 400ms, background-color 400ms;
  -o-transition: color 400ms, background-color 400ms;
  transition: color 400ms, background-color 400ms;
}
a:hover,
a:focus {
  text-decoration: none;
  color: #2a95be;
}
hr {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #fff;
}
.gradiant {
  background-image: -moz-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
  background-image: -webkit-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
  background-image: -ms-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
}
.gradiant-horizontal {
  background-image: -moz-linear-gradient(4deg, #2caab3 0%, #2c8cb3 100%);
  background-image: -webkit-linear-gradient(4deg, #2caab3 0%, #2c8cb3 100%);
  background-image: -ms-linear-gradient(4deg, #2caab3 0%, #2c8cb3 100%);
}
.section-padding {
	padding: 80px 0;
}	
.section-header {
  margin-bottom: 50px;
}
.section-header .section-title {
  font-size: 44px;
  font-weight: 400;
  color: #272727;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 20px;
  margin: 0 0 20px;
}
.section-header .section-title:before {
  content: "";
  position: absolute;
  width: 200px;
  bottom: 0;
  left: 50%;
  margin-left: -100px;
  height: 3px;
  background: #ebebeb;
}
.section-header .section-title:after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  bottom: -11px;
  left: 50%;
  margin-left: -12px;
  border: 5px solid #fff;
  border-radius: 20px;
  background: #F26433;
}
.btn {
  border-width: 2px;
  border-radius: 3px;
}
.btn.btn-primary {
  background: #F26433;
  border-color: #CC3E0D;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus {
  background: #F28433;
}

.scaleIn {
  -webkit-animation-name: scaleIn;
  animation-name: scaleIn;
}
@-webkit-keyframes scaleIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes scaleIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
/*************************
*******Header******
**************************/
.header-top {
  display: block;
  overflow: hidden;
  padding: 25px;
}
.main-nav {
	position: absolute;
	width: 100%;
	z-index: 999;
}
.main-nav .container {
	width: 100%;
}

.fixed-menu {
  background-color: #FFF;
  position: fixed;
  top: 0;
}

.fixed-menu .navbar-right {
  padding: 0;
  background-color: #FFF;
}


.fixed-menu .navbar-right li a {
  font-size: 18px;
  padding: 25px 25px;
  text-shadow:inherit;
  color: #FA7037;
}

.fixed-menu .navbar-brand {
  height: 68px;
  margin-top: 0;
  padding: 0;
  margin-bottom: 0;
  width: 220px;
}

.fixed-menu .navbar-brand img {
  height:60px;
  top: 4px;
  left: 20px;
}

.fixed-menu .header-top {
  display: none;
}

.navbar-brand {
	background-color: #FFFFFF;
	opacity: 0.9;
	height: 90px;
	margin-bottom: 20px;
	position: relative;
	width: 297px;
}

.navbar-brand img {
	position: absolute;
	top: 10px;
}
.navbar-right {
  background-color: #E75D24;
  padding:0 95px 0 0;
  opacity: .9;
}
.navbar-right li a {
  padding: 35px 21px;
  font-size: 22px;
  color: #FFF;
  text-transform: uppercase;
  font-family: 'Yanone Kaffeesatz', 'sans-serif';
  font-weight: 400;
}


@media only screen and (min-width: 768px) {
	.navbar-right .nav li.active,
	.navbar-right .nav li:hover {
		outline: none;
		background-color: #fff;
		color: #16728f;
	}
	.navbar-right .nav li a {
		-webkit-transition: background .3s ease-in-out;
		-moz-transition: background .3s ease-in-out;
		transition: background .3s ease-in-out;
	}

	.navbar-right .nav li a:hover,
	.navbar-right .nav li a:focus,
	.navbar-right .nav li a.active {
		outline: 0;
		background-color: #fff;
		color: #1E758F;
	}
	
}

/*************************
*******Home CSS******
**************************/

#home {
  position: relative;
  overflow: hidden;
}

#main-slider img {
  width: 100%
  position: relative;
}

#main-slider .carousel-caption {
  background: transparent;
  bottom: 14%;
  float: left;
  position: absolute;
  left: 0;
  top: 480px;
  padding: 0 60px;
  right: inherit;
  text-transform: uppercase;
  text-align: left;
}
.caption {
	background: rgba(208, 185, 155, 0.8);
	padding: 12px 20px 20px;
}
#main-slider .carousel-caption h1 {  
  font-size: 60px;
  letter-spacing: 2px;
  margin: 0;
}
#main-slider .carousel-caption h3 {
  font-size: 32px;
  letter-spacing: 3px;
  margin: 0;
}
#main-slider .caption-01 h1 {
	color: #FFFFFF;
}
#main-slider .caption-01 h1 > span {
	font-size: 84px;
	font-weight: 400;
	color: #FA8708;
}
#main-slider .caption-01 h3 {
	color: #F3F3F3;
}
#main-slider .caption-02 h1 {
	color: #FFFFFF;
}
#main-slider .caption-02 h1 > span {
	font-size: 84px;
	font-weight: 400;
	color: #FA8708;
}
#main-slider .caption-02 h3 {
	color: #F3F3F3;
}
#main-slider .caption-03 h1 {
	color: #FFFFFF;
}
#main-slider .caption-03 h1 > span {
	font-size: 84px;
	font-weight: 400;
	color: #FA8708;
}
#main-slider .caption-03 h3 {
	color: #F3F3F3;
}
#main-slider .carousel-caption a {
  font-size: 22px;
  color: #2da1c5;
}

#main-slider .carousel-caption a:hover {
  color: #2588a6;
}

#main-slider .carousel-caption a:hover i {
  margin-left: 35px;
}

#main-slider .carousel-caption a i {
  margin-left: 15px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#main-slider .carousel-indicators li {
  background-color: #FA8708;
  border: 2px solid #D75823;
}

#main-slider .carousel-indicators li.active {
  background-color:#fff;
  border: 2px solid #fff;
}


#services {
	background: #F5F5F5;
} 
#services .section-header .section-title {
	color: #F26433;
}
#services .section-header .section-title:before {
  content: "";
  position: absolute;
  width: 200px;
  bottom: 0;
  left: 50%;
  margin-left: -100px;
  height: 3px;
  background: #F26433;
}
#services .section-header .section-title:after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  bottom: -11px;
  left: 50%;
  margin-left: -12px;
  border: 5px solid #F26433;
  border-radius: 20px;
  background: #FFF;
}
.media.service-box {
  margin: 25px 0;
}
.media.service-box .pull-left {
  margin-right: 20px;
}
.media.service-box .pull-left > i {
  font-size: 24px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  width: 64px;
  border-radius: 100%;
  color: #F26433;
  box-shadow: inset 0 0 0 1px #d7d7d7;
  -webkit-box-shadow: inset 0 0 0 1px #d7d7d7;
  transition: background-color 400ms, background-color 400ms;
  position: relative;
}
.media.service-box .pull-left > i:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  margin-top: -10px;
  right: -10px;
  border: 4px solid #fff;
  border-radius: 20px;
  background: #F26433;
}
.media.service-box:hover .pull-left > i {
  background-image: -moz-linear-gradient(90deg, #F26433 0%, #F58863 100%);
  background-image: -webkit-linear-gradient(90deg, #F26433 0%, #F58863 100%);
  background-image: -ms-linear-gradient(90deg, #F26433 0%, #F58863 100%);
  color: #fff;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.8);
  -webkit-box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.8);
}
.media-heading {
	font-size: 24px;
}


#portfolio {
  background: #f5f5f5;  
}
#portfolio  .section-header .section-title {
	color: #F26433;
}
#portfolio .section-header .section-title:before {
  content: "";
  position: absolute;
  width: 200px;
  bottom: 0;
  left: 50%;
  margin-left: -100px;
  height: 3px;
  background: #F26433;
}
#portfolio .section-header .section-title:after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  bottom: -11px;
  left: 50%;
  margin-left: -12px;
  border: 5px solid #F26433;
  border-radius: 20px;
  background: #FFF;
}
#portfolio h3 {
	margin-top: 0;
	padding-top: 0;
}
#portfolio img {
	border: 10px solid #999;
}
.portfolio-link {
	clear: both;
	margin-top: 40px;
}

#portfolio .carousel-controls {
    position: absolute;
    right: 0;
    top: -30px;
}
#portfolio .portfolio-content {
	background: #f5f5f5 none repeat scroll 0 0;
    padding: 15px 5px;
}
#portfolio h3.title {
    font-size: 24px;
    font-weight: 500;
    margin-top: 0;
    color: #1B4697;
}
#portfolio .portfolio-item {
    margin-bottom: 0;
    position: relative;
}
#portfolio .portfolio-item ul {
	margin: 0 16px;
	padding: 0;
}
#portfolio .portfolio-item p {
	text-align: left;
}

.carousel-controls a .fa {
    color: #FA7137;
    display: inline-block;
    font-size: 32px;
    height: 32px;
    margin-right: 0;
    text-align: center;
    transition: all 0.4s ease-in-out 0s;
    width: 32px;
}
.carousel-controls a.next .fa {
    padding: 0;
}
.carousel-controls a.prev .fa {
    padding: 0;
}
.carousel-controls a:hover .fa {
}

.external-link {
    display: block;
    font-size: 14px;
    position: absolute;
    bottom: -48px;
    transition: all 0.4s ease-in-out 0s;
}
.external-link .fa {
    margin-left: 5px;
    position: relative;
    top: 1px;
}
.external-link:hover {
    text-decoration: none;
}


#how-to-help {
	background-attachment: fixed;
	background-image: url("../images/how-to-help/bg.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding-top:60px;
}
#how-to-help .section-title {
	color: #FFFFFF;
}	
.how-to-help button {
	height: 60px;
	width: 240px;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.how-to-help p {
	font-size: 18px;
	text-align: center;
	color: #FFFFFF;
}

#careers {
	background: #f5f5f5;  	
}	
#careers  .section-header .section-title {
	color: #F26433;
}
#careers .section-header .section-title:before {
  content: "";
  position: absolute;
  width: 200px;
  bottom: 0;
  left: 50%;
  margin-left: -100px;
  height: 3px;
  background: #F26433;
}
#careers .section-header .section-title:after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  bottom: -11px;
  left: 50%;
  margin-left: -12px;
  border: 5px solid #F26433;
  border-radius: 20px;
  background: #FFF;
}


#about {
	background-color: #6C7C11;
}
#about .section-title, #about h3 {
	color: #FFFFFF;
}	
#about h3 {
	font-weight: 300;
}
#about p {
	color: #F2F2F2;
}	

#work-process {
  padding: 100px 0 50px;
  background: #F26433 url(../images/work-process/bg.jpg) no-repeat 0 0;
  background-size: cover;
  color: #fff;
}
#work-process h2 {
  color: #fff;
}
#work-process h3 {
  color: #fff;
  margin-bottom: 0;
}
#work-process .icon-circle {
  display: inline-block;
  width: 80px;
  height: 80px;
  line-height: 80px;
  border: 4px solid #F26433;
  border-radius: 100px;
  position: relative;
}
#work-process .icon-circle > span {
  border-style: solid;
  border-width: 2px;
  border-color: #F26433;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  width: 24px;
  height: 24px;
  line-height: 20px;
  top: -12px;
  color: #64686d;
}
#work-process h3 {
  margin-bottom: 50px;
}

#get-in-touch {
  padding: 80px 0 30px;
  background-image: -moz-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
  background-image: -webkit-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
  background-image: -ms-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
  color: #fff;
}
#get-in-touch h1,
#get-in-touch h2 {
  color: #fff;
}
.contact-form h3 {
  margin-top: 0;
  color: #F5F5F5;
}

.danger {
	color: #a94442;
}
.success {
	color: #3c763d;
}

/***********************
*********MARGIN*********
************************/
.top-mrgn-lg {
	margin-top: 80px;
}
.top-mrgn-md {
	margin-top: 60px;
}
.top-mrgn-sm {
	margin-top: 40px;
}
.top-mrgn-xs {
	margin-top: 20px;
}

.btm-mrgn-lg {
	margin-bottom: 80px;
}
.btm-mrgn-md {
	margin-bottom: 60px;
}
.btm-mrgn-sm {
	margin-bottom: 40px;
}
.btm-mrgn-xs {
	margin-bottom: 20px;
}

.no-gutter {
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}
/***********************
********* Footer ******
************************/
#footer {
  padding-top: 30px;
  padding-bottom: 30px;
  color: #fff;
  background: #1B4596;
}
#footer a {
  color: #fff;
}
#footer a:hover {
  color: #F26433;
}
#footer ul {
  list-style: none;
  padding: 0;
  margin: 0 -7.5px;
}
#footer ul > li {
  display: inline-block;
  margin: 0 7.5px;
}

.form-control {
  box-shadow: none;
  -webkit-box-shadow: none;
}

.modal-header {
    border-bottom: none;
}   
.modal-footer {
    border-top: none;
}

/***********************
********* popup ******
************************/

#fade {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: #000;filter: alpha(opacity=70);-moz-opacity: 0.8;
	-khtml-opacity: 0.8;opacity: 0.8;z-index: 1000;display: none;opacity: 0.5;}
.popup1 {width: 100%;margin: 0 auto;display: none;z-index: 101;}
.newsletter-sign-box {border-radius: 0;left: 25%;margin: auto;min-height: 150px;position: absolute;top: 10%;
	width: 650px;z-index: 10000;border: #fff double;}
.popup1 .newsletter {width: auto;background: #fff;padding: 25px;padding: 10px 25px 10px 25px;}
.quick-view-box{border-radius: 0;left: 50%;margin: auto;min-height: 150px;position: fixed;top: 20%;width: 720px;z-index: 10000;
	margin-left:-360px;border:#fff double}
.popup1 .x {position: absolute;right: -15px;top: -15px;z-index: 10000;}
.popup1 .x:hover {cursor: pointer;}
.newsletter_img {width:100%; overflow:hidden}
.email-form {width:100%; overflow:hidden}	
.newsletter-sign-box h3 {color: #F26433;font-family: 'Yanone Kaffeesatz', 'sans-serif';	font-size: 35px;font-weight: normal;
	margin-bottom: 10px;text-align: center;text-transform: uppercase;margin-top:20px;border-bottom:#ececec double;
	padding-bottom:10px;}
.newsletter-sign-box h4 {font-size: 22px;font-weight: normal;margin-bottom: 25px;text-align: center;color: #666;
	text-transform: none;line-height:1.5em}
.newsletter-sign-box h4 span{color: #F26433;font-weight: bold;font-family: Arial,Helvetica Neue,sans-serif;}	
.online_demo{width: 100%;text-align: center;}
.online_demo a {display: inline-block;border: 0;background: #F26433;border-color: #CC3E0D;padding: 8px 15px;font-size: 16px;
    text-align: center;white-space: nowrap;font-weight: normal;border: 2px solid #eee;-webkit-transition: all 0.4s cubic-bezier(0.8, 0, 0, 1);
    -o-transition: all 0.4s cubic-bezier(0.8, 0, 0, 1);transition: all 0.4s cubic-bezier(0.8, 0, 0, 1);
    box-shadow: inset 0 0 0 0 #fff;color:#fff;text-transform:uppercase;margin: 0 auto;text-align: center;width: 150px;}
.online_demo a:hover{text-decoration:none;background: #F28433;}
.newsletter_img img{margin: 0 auto; text-align: center;}
.newsletter-sign-box .input-box {margin-bottom: 15px;}

/***********************
********* popup end ******
************************/

@media only screen and (min-width: 768px) {
  #footer .social-icons {float: right;}
}

@media only screen and (max-width: 768px) {
	.header-top {display: none;}
	.carousel-indicators {bottom: -10px;}
	.navbar-nav {margin: 0;}
	.fixed-menu .navbar-right li a {padding: 6px 22px;}
	.section-padding {padding: 68px 0;}
	#main-slider {position:absolute;top: 60px;}
	.portfolio-item {margin: 0;padding: 0;}	
}	

     @media only screen and (min-width: 320px) and (max-width: 767px) {
		    .newsletter-sign-box {left: 8%;top: 5%;width: 400px;}
	}

    @media only screen and (min-width: 768px) and (max-width: 990px) {
		   .newsletter-sign-box {left: 15%;top: 5%;width: 500px;}
	}

   
	@media only screen and (min-width: 320px) and (max-width: 480px) {
		   .newsletter-sign-box {left: 5%;top: 5%;width: 280px;}
		   .newsletter-sign-box h3{font-size: 25px;}
		   .newsletter-sign-box h4 {font-size: 17px;}
	}