@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');

@font-face {

    font-family:'Century-Gothic';

    src: url('../fonts/century-gothic.eot');

	src: url('../fonts/century-gothic.eot?#iefix') format('embedded-opentype'),

		url('../fonts/century-gothic.woff2') format('woff2'),

		url('../fonts/century-gothic.woff') format('woff'),

		url('../fonts/century-gothic.ttf') format('truetype'),

		url('../fonts/century-gothic.otf') format('opentype'),

		url('../fonts/century-gothic.svg#Century Gothic') format('svg');

    font-weight: 400;

    font-style: normal;

    font-stretch: normal;

    unicode-range: U+0020-F108;

}

@font-face {

    font-family:'CenturyGothicBold';

    src: url('../fonts/CenturyGothicBold.eot');

	src: url('../fonts/CenturyGothicBold.eot?#iefix') format('embedded-opentype'),

		url('../fonts/CenturyGothicBold.woff2') format('woff2'),

		url('../fonts/CenturyGothicBold.woff') format('woff'),

		url('../fonts/CenturyGothicBold.ttf') format('truetype'),

		url('../fonts/CenturyGothicBold.otf') format('opentype'),

		url('../fonts/CenturyGothicBold.svg#Century Gothic Bold') format('svg');

    font-weight: 700;

    font-style: normal;

    font-stretch: normal;

    unicode-range: U+0020-F108;

}

.top-contact {

    font: 18px/36px Century-Gothic;

	float: right;

	color: #000;

	text-align: right;

	padding: 12px 0;

}

.top-contact span {

	display: block

}

.banner-section {

	background: url(../img/top-banner-bg.jpg);

	background-size: cover;

	color: #fff

}

.banner-section .banner-inner > div {

	display: table-cell;

	vertical-align: top

}

.banner-section .banner-inner > div.app-img {

	text-align: center;

	padding: 30px 25px 30px 0

}

.banner-section .banner-inner > div.app-img h2 {

	font: 300 53px 'Roboto', sans-serif

}

.banner-section .banner-inner .app-icon > * {

	display: inline-block;

	vertical-align: middle

}

.banner-section .banner-inner .app-icon img {

	margin: 0 5px 0 0

}

.banner-section .banner-inner .app-icon span {

	font: bold 25px 'Roboto', sans-serif;

	padding: 0 10px

}

.banner-section .banner-inner .app-icon a {

	font: bold 21px 'Roboto', sans-serif;

	color: #fff;

	padding: 9px 16px 9px 30px;

	border-radius: 5px 0 0 5px;

	position: relative;

	border: 3px solid #fff;

	border-right: none;

	z-index: 1;

	-webkit-transition: all .5s ease;

		-moz-transition: all .5s ease;

			transition: all .5s ease;

}

.banner-section .banner-inner .app-icon a:after {

	content: '';

	position: absolute;

	left: 100%;

	z-index: -1;

	width: 35px;

	height: 35px;

	background-color: #00800000;

	border-right: 3px solid #fff;

	border-bottom: 3px solid #fff;

	-webkit-transition: all .5s ease;

		-moz-transition: all .5s ease;

			transition: all .5s ease;

	-webkit-transform: rotate(-45deg) translate(-9px,-15px);

		-moz-transform: rotate(-45deg) translate(-9px,-15px);

			transform: rotate(-45deg) translate(-9px,-15px);

}

.banner-section .banner-inner .app-features {

    width: 248px;

    float: left

}

.banner-section .banner-inner .app-features ul {

	list-style: none;

	margin: 0px;

	padding: 0px

}

.banner-section .banner-inner .app-features li {

	position: relative;

	padding: 20px 0px 20px 80px;

	font: 300 20px/24px 'Roboto', sans-serif;

	border-left: 5px solid transparent

}

.banner-section .banner-inner .app-features li:after {

	content: "";

	position: absolute;

	right: 0px;

	bottom: 0px;

	left: 0px;

	height: 1px;

	background: #35424A

}

.banner-section .banner-inner .app-features li:last-child:after {

	display: none

}

.banner-section .banner-inner .app-features li:nth-child(1) {

	border-left-color: #B27D21

}

.banner-section .banner-inner .app-features li:nth-child(2) {

	border-left-color: #B4A120

}

.banner-section .banner-inner .app-features li:nth-child(3) {

	border-left-color: #6B840C

}

.banner-section .banner-inner .app-features li:nth-child(4) {

	border-left-color: #27573D

}

.banner-section .banner-inner .app-features li:nth-child(5) {

	border-left-color: #153216

}

.banner-section .banner-inner .app-features li:nth-child(6) {

	border-left-color: #143314

}

.banner-section .banner-inner .app-features img {

	position: absolute;

	top: 0px;

	bottom: 0px;

	left: 10px;

	margin: auto

}

.banner-section .form-section {

    width: 359px;

	text-align: center

}

.banner-section .form-section .form-inner {

    background: url(../img/top-from-bg.png) no-repeat center top;

    height: 570px;

    margin-top: 30px;

	overflow: hidden

}

.banner-section .form-section .form-inner #eror {

    font: 14px "Open Sans";

    margin-top: 15px;

}

.banner-section .form-section span {

	font: 300 48px 'Roboto', sans-serif;

	display: block;

	margin: 120px 0 0 0;

	text-transform: uppercase

}

.banner-section .form-section small {

	font: 300 24px 'Roboto', sans-serif;

	display: block;

	margin-top: 10px;

}

.banner-section .form-section form {

	width: 270px;

	margin: 25px auto 0

}

.banner-section .form-section form {

	

}

.banner-section .form-section form .form-group {

	margin-bottom: 10px

}

.banner-section .form-section form .form-control {

	background: #EDEDED;

	height: 42px;

	box-shadow: none;

	font: 300 18px 'Roboto', sans-serif;

	color: #000;

}

.banner-section .form-section form button {

    background: #45893E;

    border-color: #45893E;

    color: #fff;

    font: 400 17px 'Roboto', sans-serif;

    width: 100%;

    height: 45px;

    box-shadow: 0 4px 0px 0px #356C32;

}

.banner-section .form-section form button:active:hover {

	height: 49px;

    box-shadow: 0 0px 0px 0px #356C32;

	background: #45893E;

	box-shadow: none;

	border-color: #45893E;

	color: #fff

}

.box-shadow {

	background: #fff;

	box-shadow: 0 3px 2px #0003;

	margin: 15px 0;

	padding-top: 10px;

	padding-bottom: 10px

}

.box-shadow h3 {

	font: 300 36px 'Roboto', sans-serif;

	text-align: center;

	color: #000;

	margin-top: 8px

}

.our-expertise ul {

	list-style: none;

	margin: 0px 0px 20px 0px;

	padding: 0px;

}

.our-expertise ul li {

	display: table-cell;

	vertical-align: middle;

	width: 1%;

	padding: 0 0 0 45px;

}

.our-expertise ul li span {

	font: bold 51px CenturyGothicBold;

	display: inline-block;

	vertical-align: middle;

	color: #45893E

}

.our-expertise ul li span.plus:after {

	content: "+";

	position: relative

}

.our-expertise ul li b {

	

	display: inline-block;

	vertical-align: middle;

	color: #000;

	margin-left: 5px

}

.gallery-section ul {

	list-style: none;

	margin:0px;

	padding: 0px;

	text-align: center

}

.gallery-section ul li {

	display: inline-block;

	/* width: 50%; */

	padding: 5px

}

.our-customers .customers-list {

	margin: 0px auto;

	width: 90%

}

.our-customers .customers-list {

	margin-top: 20px;

	padding-bottom: 35px

}

.our-customers .customers-list > img {

	margin: 15px 0 20px

}

.our-customers .list {

	width: 100%;

	position: relative;

	padding: 20px 0px 17px 110px;

	font: 300 19px 'Roboto', sans-serif;

	color: #000;

}

.our-customers .list img {

	position: absolute;

	left: 0px;

}

.our-customers .list strong {

	display: block;

	font-size: 17px;

	margin-top: 5px

}

.footer-banner {

	background: url(../img/footer-banner-bg.jpg);

	background-size: cover;

	background-attachment: fixed;

	margin: 15px 0;

	padding: 7.7rem 0;

	text-align: center;

}

.footer-banner .btn-green {

	display: inline-block;

	padding: 10px 45px;

	font: 300 24px/44px 'Roboto', sans-serif;

	color: #fff;

	border: 3px solid #fff;

	text-align: center;

	background: #45893E;

	height: 70px;

	border-radius: 5px;

	cursor: pointer;

	-webkit-transition: all .5s ease;

		-moz-transition: all .5s ease;

			transition: all .5s ease;

}

.footer-banner .btn-green:hover {

	background: #296223;

	text-decoration: none

}

.footer-boxes > div {

	display: table-cell;

	width: 1%;

	vertical-align: middle;

	padding: 20px 0

}

.footer-boxes ul {

	list-style: none;

	margin: 0px;

	padding: 0px;

}

.footer-boxes div:last-child ul {

	width: 81%;

	float: right;

}

.footer-boxes ul li {

	font: 500 15px/25px 'Roboto', sans-serif;

	color: #000;

	position: relative;

}

.footer-boxes ul li a {

	color: #00a089

}

.footer-boxes ul li a:hover {

	text-decoration: none

}

footer {

	padding: 18px 0px;

	border-top: 1px solid #DDDEE2

}

footer p {

	float: left;

	margin: 0px;

	font: 500 16px/26px 'Roboto', sans-serif

}

footer a {

	float: right

}



@media (max-width: 480px) {

	.navbar-header {

		text-align: center

	}

	.navbar-brand {

		float: none;

		display: inline-block;

		padding-bottom: 8px

	}

	.navbar-brand > img {

		height: 40px

	}

	.top-contact {

		font: 17px/32px Century-Gothic;

		float: none;

		padding: 0px 0 12px 0;

		display: block;

		text-align: center;

	}

	

	.banner-section .banner-inner > div {

		display: block

	}

	.banner-section .banner-inner > div.app-img {

		padding: 10px 0

	}

	.banner-section .banner-inner > div.app-img h2 {

		font: 300 30px 'Roboto', sans-serif

	}

	.banner-section .banner-inner > div.app-img > img {

		max-width: 100%

	}

	.banner-section .banner-inner .app-icon > * {

		margin-bottom: 8px;

		margin-top: 8px

	}

	.banner-section .banner-inner .app-icon img {

		margin: 0 10px 0 0;

		height: 39px;

	}

	.banner-section .banner-inner .app-icon span {

		font: bold 16px 'Roboto', sans-serif;

	}

	.banner-section .banner-inner .app-features {

		width: 100%

	}

	.banner-section .form-section {

		width: 100%;

		float: left

	}

	.banner-section .form-section form {

		width: 250px;

	}

	.banner-section .form-section .form-inner {

		height: auto;

		overflow: hidden;

		background-size: 100% auto;

		padding-bottom: 30px;

	}

	.banner-section .form-section span {

		margin: 90px 0 0 0;

		font: 300 30px 'Roboto', sans-serif

	}

	.banner-section .form-section span br {

		display: none

	}

	.box-shadow h3 {

		font: 300 21px 'Roboto', sans-serif;

	}

	.our-expertise ul li span {

		font: bold 18px CenturyGothicBold

	}

	.our-expertise ul li {

		padding: 0 5px;

		vertical-align: top;

		text-align: center

	}

	.our-expertise ul {

		margin: 0px 0px 10px 0px

	}

	.our-expertise ul li b {

		display: block;

		vertical-align: top;

		margin: 0;

		font: 12px Century-Gothic

	}

	.gallery-section ul li {

		width: 44%

	}

	.gallery-section ul li > a > img {

		max-width: 100%;

	}

	.our-customers .list img {

		height: 50px

	}

	.our-customers .list {

		padding: 0px 0px 0px 65px;

		font: 300 15px 'Roboto', sans-serif;

	}

	.our-customers .list strong {

		margin-top: 5px

	}

	.our-customers .customers-list > img {

		max-width: 100%;

	}

	.our-customers .customers-list {

		padding-bottom: 15px

	}

	.footer-banner {

		padding: 3.7rem 0;

		background-size: 100%;

	}

	.footer-banner .btn-green {

		padding: 8px 25px;

		font: 300 20px/30px 'Roboto', sans-serif;

		height: 55px

	}

	.footer-boxes > div {

		display: block;

		width: 100%;

		padding: 0;

	}

	.footer-boxes ul li {

		font: 500 15px/30px 'Roboto', sans-serif

	}

	.footer-boxes div:last-child ul {

		width: 100%

	}

	footer {

		padding: 10px 0px;

		text-align: center;

		margin: 15px 0 0;

	}

	footer p {

		margin: 0px;

		font: 500 14px/26px 'Roboto', sans-serif

	}

	footer a {

		float: none;

		display: inline-block;

		margin-top: 6px;

	}

}

 

@media  (min-width: 481px) and  (max-width: 767px) {

	.navbar-header {

		text-align: center

	}

	.navbar-brand > img {

		height: 40px

	}

	.top-contact {

		font: 16px/30px Century-Gothic;

		padding: 0 20px 0 0;

		text-align: right;

		margin: 7px 0;

	}

	

	.banner-section .banner-inner > div {

		display: block

	}

	.banner-section .banner-inner > div.app-img {

		padding: 10px 0

	}

	.banner-section .banner-inner > div.app-img h2 {

		font: 300 40px 'Roboto', sans-serif

	}

	.banner-section .banner-inner > div.app-img > img {

		max-width: 100%

	}

	.banner-section .banner-inner .app-icon > * {

		margin-bottom: 8px;

		margin-top: 8px

	}

	.banner-section .banner-inner .app-icon img {

		margin: 0 10px 0 0;

		height: 39px;

	}

	.banner-section .banner-inner .app-icon span {

		font: bold 16px 'Roboto', sans-serif;

	}

	.banner-section .banner-inner .app-features {

		width: 100%

	}

	.banner-section .form-section {

		float: none;

		clear: both;

		margin: 30px auto 0 auto;

		overflow: hidden;

	}

	.banner-section .form-section form {

		width: 250px;

	}

	.banner-section .form-section .form-inner {

		height: auto;

		overflow: hidden;

		background-size: 100% auto;

		padding-bottom: 30px;

	}

	.banner-section .form-section span {

		margin: 90px 0 0 0;

		font: 300 30px 'Roboto', sans-serif

	}

	.banner-section .form-section span br {

		display: none

	}

	.app-features li {

		padding: 25px 0px 25px 80px;

		font: 300 19px/24px 'Roboto', sans-serif

	}

	.our-expertise ul {

		margin: 0px 0px 10px 0px

	}

	.our-expertise ul li {

		vertical-align: top;

		padding: 0 10px;

		text-align: center;

	}

	.our-expertise ul li span {

		font: bold 24px CenturyGothicBold

	}

	.our-expertise ul li b {

		margin: 0;

	}

	.box-shadow h3 {

		font: 300 26px 'Roboto', sans-serif

	}

	.gallery-section ul li {

		width: 46%

	}

	.gallery-section ul li img {

		max-width: 100%

	}

	.our-customers .list img {

		height: 70px

	}

	.our-customers .list {

		padding: 10px 0px 0px 85px;

		font: 300 16px 'Roboto', sans-serif;

	}

	.our-customers .list strong {

		font-size: 15px

	}

	.our-customers .customers-list > img {

		margin: 20px 0 10px;

		max-width: 100%

	}

	.footer-banner {

		padding: 5rem 0

	}

	.footer-banner .btn-green {

		padding: 10px 35px;

		font: 300 22px/33px 'Roboto', sans-serif;

		height: 60px;

	}

	.footer-boxes > div {

		display: inline-block;

		width: 49%;

		vertical-align: top;

		padding: 0;

	}

	.footer-boxes ul li {

		font: 300 14px/25px 'Roboto', sans-serif

	}

	.footer-boxes div:last-child ul {

		width: 100%;

		float: left

	}

	footer {

		padding: 12px 0px;

		margin-top: 15px

	}

	footer p {

		font: 500 15px/26px 'Roboto', sans-serif

	}

}

 

@media (min-width: 768px) and (max-width: 991px) {

	.banner-section .banner-inner {

		text-align: center

	}

	.banner-section .banner-inner > div {

		display: inline-block

	}

	.banner-section .banner-inner > div.app-img {

		display: block;

	}

	.banner-section .banner-inner > div.app-img h2 {

		font: 300 44px 'Roboto', sans-serif;

	}

	.banner-section .banner-inner > div.app-img h2 br {

		display: none

	}

	.banner-section .banner-inner .app-features li {

		font: 300 18px/24px 'Roboto', sans-serif;

		text-align: left;

	}

	.banner-section .form-section .form-inner {

		height: 570px;

		margin-top: 6px;

		overflow: hidden;

	}

	.our-expertise ul {

		margin: 0px 0px 5px 0px

	}

	.our-expertise ul li {

		padding: 0 5px

	}

	.our-expertise ul li span {

		font: bold 30px CenturyGothicBold

	}

	.our-expertise ul li b {

		font: 14px Century-Gothic

	}

	.box-shadow h3 {

		font: 300 22px 'Roboto', sans-serif

	}

	.gallery-section ul li {

		width: 45%

	}

	.gallery-section ul li img {

		max-width: 100%

	}

	.our-customers .customers-list {

		margin-top: 15px;

		padding-bottom: 10px

	}

	.our-customers .list img {

		height: 50px

	}

	.our-customers .list {

		padding: 0px 0px 0px 60px;

		font: 300 15px 'Roboto', sans-serif

	}

	.our-customers .customers-list > img {

		margin: 10px 0 15px;

		max-width: 100%;

	}

	.footer-banner .btn-green {

		padding: 10px 30px;

		font: 300 20px/34px 'Roboto', sans-serif;

		height: 60px;

	}

	.footer-boxes > div {

		display: inline-block;

		width: 47%;

		vertical-align: top;

		padding: 0;

	}

	.footer-boxes div:last-child ul {

		width: auto;

		float: none;

	}

	footer {

		padding: 15px 0px;

		margin-top: 15px;

	}

}



@media (min-width: 992px) and (max-width: 1199px) {

	.banner-section .banner-inner > div.app-img h2 {

		font: 300 35px 'Roboto', sans-serif

	}

	.banner-section .banner-inner > div.app-img > img {

		height: 200px

	}

	.banner-section .banner-inner .app-icon > * {

		margin-top: 10px;

		margin-bottom: 10px

	}

	.banner-section .banner-inner .app-features li {

		padding: 16px 10px 16px 80px;

		font: 300 17px/24px 'Roboto', sans-serif;

	}

	.banner-section .form-section .form-inner {

		height: 498px;

		background-size: 100% 100%

	}

	.banner-section .form-section small {

		font: 300 20px 'Roboto', sans-serif

	}

	.banner-section .form-section span {

		font: 300 40px 'Roboto', sans-serif;

		margin: 100px 0 0 0

	}

	.banner-section .form-section form {

		width: 210px;

	}

	.gallery-section ul li {

		width: 45%

	}

	.gallery-section ul li img {

		max-width: 100%

	}

	.box-shadow h3 {

		font: 300 28px 'Roboto', sans-serif

	}

	.our-customers .list img {

		height: 70px

	}

	.our-customers .list {

		padding: 0px 0px 0px 85px;

		font: 300 16px 'Roboto', sans-serif

	}

	.our-customers .customers-list > img {

		max-width: 100%;

	}

	.our-customers .customers-list {

		padding-bottom: 32px

	}

	.footer-boxes > div:first-child {

		padding-left: 0px

	}

	.footer-boxes > div {

		display: inline-block;

		width: auto;

		padding: 5px 0 20px 12px

	}

	.footer-boxes ul li {

		font: 500 14px/25px 'Roboto', sans-serif

	}

	.footer-boxes div:last-child ul {

		width: 100%

	}

	footer {

		padding: 14px 0px

	}

	footer p {

		font: 500 15px/26px 'Roboto', sans-serif

	}

}



@media (min-width: 1200px) {

	

}