html, body{
	padding:0;
	margin:0;
	font-family: 'Montserrat', sans-serif;
}

h1{
	width:100%;
	float:left;
	text-align:center;
	text-transform:uppercase;
	color:#007cd6;
	font-weight:500;
	margin:0;
	padding:50px 0 30px 0;
}

h1 .line{
	width:50px;
	height:2px;
	background-color:#9aca3c;
	display:inline-block;
}

header{
	width:100%;
	float:left;
	border-bottom:2px solid #007cd6;
	background:#FFFFFF;
	position:fixed;
	top:0;
	z-index:100;
}

header .logo{
	width:20%;
	height:auto;
	margin:20px 0 20px 3%;
	float:left;
	
	transition:width 1s, margin 1s;
}

nav ul{
	margin:4% 0 0 3%;
	padding:0;
	list-style:none;
	float:left;
	
	transition:margin 1s;
}

nav ul li{
	float:left;
	margin:0;
	padding:0px 20px 0 20px;
	text-transform:uppercase;
	text-decoration:none;
	color:#65686c;
	font-weight:600;
	font-size:16px;
	
	transition:font-size 1s, padding 1s;
}

nav ul li a{
	padding-bottom:10px;
	border-bottom:2px solid #FFFFFF;
	
	transition:border 1s;
}

nav ul li a:hover{
	border-bottom:2px solid #007cd6;
}

nav ul li a{
	color:#65686c;
	text-decoration:none;
}

#mobile-menu{
	display:none;
}

.desktop{
	display:block;
}

section{
	width:100%;
	float:left;
}

#home{
	float:left;
	height:675px;
	margin-top:75px;
	position:relative;
	overflow:hidden;
	
	transition:height 1s;
}

#home h1{
	position:absolute;
	width:90%;
	left:5%;
	top:25%;
	text-align:center;
	font-weight:700;
	color:#FFFFFF;
	text-shadow:2px 2px 2px rgba(0, 0, 0, 1);
	font-size:48px;
	z-index:10;
	
	transition:top 1s, font-size 1s;
}

#home .more{
	width:20%;
	position:absolute;
	text-align:center;
	top:45%;
	left:40%;
	padding:10px 0 10px 0;
	text-transform:uppercase;
	z-index:10;
	color:#ffffff;
	background-color:#007cd6;
	cursor:pointer;
	
	transition:background-color 1s, top 1s;
}

#home .more:hover{
	background-color:#084b88;
}

#home .bg{
	width:100%;
	height:auto;
	z-index:0;
	bottom:0;
	left:0;
	position:absolute;
}

#what-we-do p, #our-services p{
	color:#65686c;
	width:90%;
	float:left;
	margin:0 0 50px 5%;
	font-size:22px;
	text-align:center;
	
	transition:font-size 1s;
}

#markets-we-serve h1{
	margin-bottom:5px;
	background-color:#007cd6;
	color:#ffffff;
}

#markets-we-serve ul{
	width:100%;
	float:left;
	margin:0;
	padding:0;
	list-style:none;
}

#markets-we-serve ul li{
	width:calc(33.3% - 3px);
	height:300px;
	margin:0 5px 5px 0;
	float:left;
	position:relative;
	background-size:100% auto;
	overflow:hidden;
	text-align:center;
	
	transition:height 1s;
}

#markets-we-serve ul li:nth-child(3), #markets-we-serve ul li:nth-child(6){
	margin-right:0;
}

#markets-we-serve ul li h3{
	width:90%;
	position:absolute;
	left:5%;
	top:40%;
	font-size:28px;
	text-align:center;
	color:#FFFFFF;
	font-weight:500;
	margin:0;
	padding:0;
	z-index:10;
	text-shadow:2px 2px 2px rgba(0, 0, 0, 1);
	
	transition:top 1s, text-shadow 0.5s, font-size 1s;
	
}

#markets-we-serve ul li p{
	width:90%;
	position:absolute;
	z-index:10;
	color:#FFFFFF;
	text-align:center;
	font-weight:400;
	font-size:22px;
	left:5%;
	top:40%;
	opacity:0;
	
	transition:opacity 1s, font-size 1s;
}

#markets-we-serve ul li .btn{
	display:inline-block;
	border:1px solid #FFFFFF;
	text-transform:uppercase;
	padding:5px 0 5px 0;
	color:#FFFFFF;
	text-decoration:none;
	z-index:10;
	position:absolute;
	bottom:10%;
	left:30%;
	width:40%;
	opacity:0;
	
	transition:opacity 1.5s;
}

#markets-we-serve ul li .bg{
	width:100%;
	height:auto;
	position:absolute;
	left:0;
	top:100%;
	z-index:1;
	
	transition:top 1s;
}

#markets-we-serve ul li:hover .bg, #markets-we-serve ul li.active .bg{
	top:0;
}

#markets-we-serve ul li:hover p, #markets-we-serve ul li.active p{
	opacity:1;
}

#markets-we-serve ul li:hover h3, #markets-we-serve ul li.active h3{
	top:20%;
	text-shadow:2px 2px 2px rgba(0, 0, 0, 0);
}

#markets-we-serve ul li:hover .btn, #markets-we-serve ul li.active .btn{
	opacity:1;
}

#our-services ul{
	width:100%;
	float:left;
	margin:0;
	padding:0;
	list-style:none;
}

#our-services ul li{
	width:calc(20% - 5px);
	height:525px;
	float:left;
	margin:0 6px 0 0;
	text-align:center;
	overflow:hidden;
	background-color:#f6f6f9;
	position:relative;
	
	transition:height 1s;
}

#our-services ul li h2.mobile{
	display:none;
}

#our-services ul li:nth-child(even){
	background-color:#f0f0f1;
}

#our-services ul li:nth-child(5){
	margin-right:0;
}

#our-services ul li img{
	width:100%;
	height:auto;
	position:absolute;
	top:0;
	left:0;
	z-index:0;
}

#our-services ul li h2{
	width:90%;
	position:absolute;
	z-index:10;
	top:55%;
	margin:30px 0 30px 5%;
	padding:0;
	color:#007cd6;
	font-weight:500;
	text-align:center;
	
	transition:font-size 1.5s, color 1.5s, top 1.5s;
}

#our-services ul li.active h2{
	color:#FFFFFF;
	top:5%;
}

#our-services ul li h3{
	width:90%;
	position:absolute;
	top:72%;
	z-index:0;
	margin:0 0 0 5%;
	padding:0;
	color:#65686c;
	font-weight:400;
	text-align:center;
	
	transition:font-size 1s;
}

#our-services ul li p{
	width:80%;
	padding:55% 10% 120% 10%;
	margin:0;
	position:absolute;
	z-index:5;
	top:100%;
	left:0;
	text-align:center;
	font-size:18px;
	color:#FFFFFF;
	background-color:#007cd6;
	
	transition:top 1s;
}

@media(max-width:1075px){
	#our-services ul li p{
		font-size:16px !important;
	}
}

#our-services ul li .line{
	width:40%;
	height:2px;
	background:#ffffff;
	position:absolute;
	z-index:50;
	top:25%;
	left:30%;
	margin:0 0 25px 0;
	opacity:0;
	
	transition:opacity 1.5s;
}

#our-services ul li.active .line{
	opacity:1;
}

#our-services ul li:nth-child(even) p{
	background-color:#99cc2d;
}

#our-services ul li.active p{
	top:0%;
}

#our-services ul li .mobile-strip{
	width:100%;
	position:absolute;
	top:0;
	left:0;
	height:5px;
	z-index:50;
	background-color:#99cc2d;
	text-align:center;
}
	
#our-services ul li .mobile-arrow{
	display:inline-block;
	width: 0;
	height: 0;
	opacity:0;
	border-style: solid;
	border-width: 25px 100px 0 100px;
	border-color: #99cc2d transparent transparent transparent;
	
	transition:opacity 1s;
}

#our-services ul li.active .mobile-arrow{
	opacity:1;
}
	
#our-services ul li:nth-child(even) .mobile-strip{
	background-color:#007cd6;
}
	
#our-services ul li:nth-child(even) .mobile-arrow{
	border-color: #007cd6 transparent transparent transparent;
}

#our-services ul li .btn{
	border:1px solid #9aca3c;
	padding:5px 0px 5px 0px;
	text-transform:uppercase;
	color:#9aca3c;
	display:inline-block;
	text-decoration:none;
	font-size:12px;
	position:absolute;
	bottom:5%;
	width:40%;
	left:30%;
	
}

#our-services ul li .sweeper{
	position:absolute;
	bottom:10px;
	left:0;
	height:auto;
	z-index:999;
	width:100%;
	opacity:0;
	pointer-events:none;
	transition:opacity 1s;
	text-align:center;
}

#our-services ul li.active .sweeper, #our-services ul li.mob-active .sweeper{
	opacity:1;
}

#our-services ul li .sweeper .nite{
	position:relative;
	display:block;
	margin:0 auto;
	width:65px;
	margin-bottom:15px;
}

#our-services ul li .sweeper .napsa{
	position:relative;
	display:block;
	margin:0 auto;
	width:175px;
}

#our-services ul li .sweeper .other{
	position:relative;
	display:block;
	margin:0 auto;
	width:100px;
}

@media(max-width:1024px){
	#our-services ul li .sweeper .nite, #our-services ul li .sweeper .napsa, #our-services ul li .sweeper .other{
		float:right;
		margin:0 5px;
	}
}

@media(max-width:768px){
	#our-services ul li .sweeper .nite, #our-services ul li .sweeper .napsa, #our-services ul li .sweeper .other{
		display:inline-block;
		margin:0 5px;
		float:none;
	}
}

#our-clients ul{
	width:100%;
	float:left;
	margin:0;
	padding:0;
	list-style:none;
}

#our-clients li{
	width:33.3%;
	float:left;
	margin:0;
	padding:0;
}

#our-clients li img{
	width:70%;
	height:auto;
	margin:0 0 0 15%;
}

#contact{
	background-color:#f7f7f7;
	float:left;
	width:100%;
	padding:75px 0 75px 0;
	margin:75px 0 0 0;
	position:relative;
}

#contact h1{
	background-color:#9aca3c;
	width:auto;
	padding:10px 20px 10px 20px;
	color:#ffffff;
	font-size:14px;
	position:absolute;
	top:-25px;
	left:5%;
	
	transition:left 1s;
}

#contact h1 .left-triangle{
	position:absolute;
	left:-10px;
	top:0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 25px 10px;
	border-color: transparent transparent #2f2f2f transparent;
}

#contact .lft-frame{
	width:20%;
	margin:0 3% 0 5%;
	float:left;
	
	transition:width 1s, margin 1s;	
}

#contact .sweeper span{
	color:#65686c;
	font-size:1vw;
}

#contact .sweeper img{
	display:inline-block;
	height:3.5vw;
	margin-left:7px;
	transform:translate(0, 18px);
}

@media(max-width:768px){
	#contact .sweeper span{
		font-size:12px;
	}
	
	#contact .sweeper img{
		height:40px;
	}
	
	#contact .sweeper{
		text-align:center;
	}
	
}

#contact .logo{
	width:100%;
	float:left;
}

#online-pay{
	width:100%;
	float:left;
	color:#65686c;
	margin-top:30px;
}

#online-pay img{
	width:15%;
	float:left;
	margin:10px;
}

#online-pay p{
	width:calc(85% - 45px);
	float:left;
	font-size:14px;
}

#contact .col{
	width:calc(15% - 26px);
	padding:0 0 100px 25px;
	float:left;
	border-left:1px solid #d4d4d4;
	color:#65686c;
	font-size:14px;
}

#contact #contact-form{
	width:30%;
	margin:-10px 5% 0 0;
	float:right;
	
	transition:margin 1s, width 1s;
}

#contact #contact-form .lft{
	width:50%;
	float:left;
}

#contact #contact-form .rgt{
	width:50%;
	float:left;
}

#contact #contact-form h2{
	width:100%;
	float:left;
	color:#65686c;
	font-size:14px;
}

#contact #contact-form .form-group{
	width:100%;
	float:left;
}

#contact #contact-form input{
	width:calc(90% - 10px);
	float:left;
	font-size:12px;
	padding:5px;
	margin:0 0 10px 0;
	border:1px solid #efefef;
}

#contact #contact-form textarea{
	width:calc(90% - 10px);
	height:80px;
	float:left;
	font-size:12px;
	padding:5px;
	margin:0 0 10px 0;
	border:1px solid #efefef;
}

#contact #contact-form .submit{
	width:calc(95% - 10px);
	float:left;
	border:0;
	padding:10px 0 10px 0;
	background-color:#3c8eca;
	color:#FFFFFF;
	text-transform:uppercase;
	cursor:pointer;
	
	transition:background-color 1s;
}


#contact #contact-form .submit:hover{
	background-color:#084b88;
}


#contact #contact-form .has-error input{
	border:1px solid #f30000;
}

.help-block ul{
	list-style:none;
	font-size:12px;
	float:left;
	margin:0 0 10px 0;
	padding:0;
}

#paybtn{
	cursor:pointer;
	width:270px;
	float:right;
	margin:0 20px 0 0;
	transition:all 1s;
}

/*-------------------MEDIA QUERIES-------------------------------------*/
@media (max-width:1700px) {	
	#home{
		height:625px;
	}
	
	#our-services ul li h2{
		top:45%;
	}
	
	#our-services ul li h3{
		top:65%;
	}
}

@media (max-width:1530px) {	
	#home{
		height:575px;
	}
	
	#our-services ul li h2{
		top:42%;
		font-size:20px;
	}
	
	#our-services ul li h3{
		top:64%;
	}
	
	#our-services ul li.active h2{
		top:1%;
	}
}

@media (max-width:1400px) {	
	nav ul{
		margin:4% 0 0 5%;
	}
	
	nav ul li{
		padding:0 10px 0 10px;
	}
	
	#home{
		height:525px;
	}
	
	#home h1{
		top:20%;
	}
	
	#markets-we-serve ul li{
		height:275px;
	}
	
	#markets-we-serve ul li p{
		top:35%;
	}
	
	#our-services ul li h2{
		top:38%;
	}
	
	#our-services ul li h3{
		top:63%;
	}
}

@media (max-width:1305px) {
	header .logo{
		margin:20px 0 20px 2%;
	}
	
	nav ul{
		margin:4% 0 0 2%;
	}
	
	#home{
		height:475px;
	}
	
	#home h1{
		top:15%;
	}
	
	#markets-we-serve ul li{
		height:255px;
	}
	
	#markets-we-serve ul li p{
		top:32%;
		font-size:16px;
	}
	
	#our-services ul li{
		height:500px;
	}
	
	#our-services ul li .line{
		top:20%;
	}
	
	#our-services ul li h2{
		
	}
	
	#our-services ul li h3{
		font-size:16px;
	}
	
	#our-services ul li p{
		font-size:18px;
	}
	
	
	#contact .lft-frame{
		margin-left:2%;
	}
	
	#contact h1{
		left:2%;
	}
	
	#contact #contact-form{
		width:40%;
		margin-right:3%;
	}
}

@media (max-width:1236px) {	
	#paybtn{
		width:220px;
		margin-right:0;
	}
	
	#online-pay p{
		font-size:12px;
	}
	
	nav ul li{
		font-size:13px;
	}
}

@media (max-width:1125px) {	
	#home{
		height:415px;
	}
	
	#home h1{
		font-size:44px;
	}
	
	nav ul{
		margin-top:20px;
		width:70%;
	}
	
	nav ul li{
		padding:0px 20px 0 20px;
	}
	
	#what-we-do p, #our-services p{
		font-size:18px;
	}
	
	#markets-we-serve ul li{
		height:230px;
	}
	
	#markets-we-serve ul li:hover h3{
		top:15%;
	}
	
	#online-pay{
		margin-top:10px;
	}
	
	#online-pay p{
		font-size:12px;
	}
}

@media (max-width:1024px) {
	#home{
		height:400px;
	}
	
	#home h1{
		font-size:36px;
	}
	
	#home .more{
		font-size:14px;
	}
	
	#markets-we-serve ul li{
		height:210px;
		width:calc(33.3% - 4px);
	}
	
	#markets-we-serve ul li h3{
		font-size:22px;
	}
	
	#markets-we-serve ul li:hover h3{
		top:12%;
	}
	
	#markets-we-serve ul li p{
		top:20%;
	}
	
	#markets-we-serve ul li .btn{
		width:70%;
		left:15%;
	}
	
	#our-services ul li h2.desktop{
		display:none;
	}
	
	#our-services ul li h2.mobile{
		background-color:#007cd6;
		color:#ffffff;
		width:100%;
		margin:0 0 5px 0;
		padding:35px 0 35px 0;
		display:block;
		top:auto;
		position:relative;
	}
	
	#our-services ul li .mobile-strip{
		width:50%;
		float:left;
		height:5px;
		background-color:#007cd6;
		text-align:center;
		margin-bottom:50px;
		top:auto;
		position:relative;
	}
	
	#our-services ul li .line{
		display:none;
	}
	
	#our-services ul li.mob-active .mobile-frame{
		height:400px;
	}
		
	#our-services ul li .mobile-frame{
		height:0;
		float:left;
		overflow:hidden;
		
		transition:height 1s;
	}
	
	#our-services ul li .mobile-arrow{
		display:inline-block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 30px 150px 0 150px;
		border-color: #007cd6 transparent transparent transparent;
		opacity:1;
	}
	
	#our-services ul li:nth-child(even){
		border-top:0;
	}
	
	#our-services ul li:nth-child(even) h2.mobile{
		background-color:#99cc2d;
	}
	
	#our-services ul li:nth-child(even) .mobile-strip{
		background-color:#99cc2d;
	}
	
	#our-services ul li:nth-child(even) .mobile-arrow{
		border-color: #99cc2d transparent transparent transparent;
	}
	
	#our-services ul li img{
		margin-bottom:5px;
		width:50%;
		float:left;
		top:auto;
		position:relative;
	}
	
	#our-services ul li{
		width:100%;
		margin:0;
		height:auto;
		float:left;
	}
	
	#our-services ul li p{
		height:auto;
		width:40%;
		font-size:16px;
		line-height:24px;
		margin:20px 0 35px 5%;
		float:left;
		top:auto;
		position:relative;
		color:#65686c;
		background:none !important;
		padding:0;
	}
	
	#our-services ul li h3{
		width:40%;
		float:left;
		top:auto;
		position:relative;
	}
	
	#our-services ul li .btn{
		display:none;
	}
	
	#our-clients ul li{
		width:50%;
	}
}

@media (max-width:948px){
	#home{
		height:300px;
	}
	
	#home h1{
		top:10%;
		font-size:32px;
	}
	
	nav ul li{
		padding:0 10px 0px 10px;
		font-size:12px;
	}
	
	#online-pay p{
		font-size:10px;
	}
	
	#markets-we-serve ul li{
		height:170px;
	}
	
	#markets-we-serve ul li:hover h3{
		top:11%;
	}
	
	#markets-we-serve ul li .btn{
		font-size:14px;
	}
	
	#markets-we-serve ul li p{
		font-size:12px;
	}
}

@media (max-width:767px){
	header{
		position:relative;
		top:auto;
	}
	header .logo{
		width:70%;
		margin:35px 0 35px 15%;
	}
	
	nav{
		display:none;
	}
	
	#mobile-menu{
		display:block;
		width:100%;
		float:left;
		cursor:pointer;
	}
	
	#mobile-menu .mobileNav{
		width:90%;
		padding:10px 5% 10px 5%;
		border-bottom:1px solid #65686c;
		text-transform:uppercase;
		text-decoration:none;
		color:#65686c;
		font-weight:600;
		font-size:16px;
	}
	
	
	#mobile-menu ul{
		width:100%;
		margin:0;
		padding:0;
		display:none;
	}
	
	#mobile-menu ul li{
		width:90%;
		padding:10px 5% 10px 5%;
		float:left;
		font-size:14px;
		border-bottom:1px solid #65686c;
	}
	
	#mobile-menu ul li a{
		width:100%;
		border-bottom:none;
	}
	
	#paybtn{
		width:95%;
		float:left;
	}
	
	#online-pay{
		font-size:12px;
		margin-top:0;
	}
	
	.desktop{
		display:none;
	}
	
	#home{
		height:200px;
		margin-top:0;
	}
	
	#home h1{
		top:10%;
		padding:0;
		font-size:24px;
	}
	
	#home .more{
		top:55%;
		width:50%;
		left:25%;
	}
	
	#home .bg{
		width:150%;
		left:-25%;
	}
	
	#markets-we-serve ul li{
		width:100%;
		height:250px;
		margin:0 0 5px 0;
	}
	
	#markets-we-serve ul li h3{
		left:5%;
		top:40%;
		font-size:28px;
	}
	
	#markets-we-serve ul li p{
		width:90%;
		font-size:18px;
		left:5%;
		top:30%;
	}
	
	#markets-we-serve ul li .btn{
		bottom:10%;
		left:30%;
		width:40%;
	}
	
	#markets-we-serve ul li:hover .bg{
		top:0;
	}
	
	#markets-we-serve ul li:hover p{
		opacity:1;
	}
	
	#markets-we-serve ul li:hover h3{
		top:15%;
	}
	
	#markets-we-serve ul li:hover .btn{
		opacity:1;
	}
		
	#our-services ul li.mob-active .mobile-frame{
		height:675px;
	}
	
	#our-services ul li img{
		width:100%;
	}
	
	#our-services ul li .mobile-strip{
		width:100%;
	}
	
	#our-services ul li img{
		margin-bottom:5px;
	}
	
	#our-services ul li{
		width:100%;
		margin:0;
		height:auto;
		border-top:0;
	}
	
	#our-services ul li p{
		height:auto;
		width:90%;
		font-size:16px;
		line-height:24px;
		margin:20px 0 35px 5%;
	}
	
	#our-services ul li h3{
		width:90%;
	}
	
	#our-clients ul li{
		width:50%;
	}
	
	#contact{
		padding:30px 0 75px 0;
	}
	
	#contact h1{
		left:10%;
	}
	
	
	#contact .lft-frame{
		width:70%;
		margin-left:15%;
		margin-bottom:35px;
	}
	
	#contact .col{
		border-left:0;
		width:90%;
		margin:0 0 30px 5%;
		padding:0;
	}
	
	#contact #contact-form{
		width:100%;
		float:left;
		margin-left:0;
		margin-bottom:35px;
	}
	
	#contact #contact-form input, #contact #contact-form textarea{
		width:calc(100% - 10px);
	}
	
	#contact #contact-form .submit{
		width:calc(103% - 10px);
	}
	
	#contact #contact-form h2{
		width:90%;
		margin:20px 0 20px 5%;
	}
	
	#contact #contact-form .lft{
		width:90%;
		margin:0 0 0 5%;
	}
	
	#contact #contact-form .rgt{
		width:90%;
		margin:0 0 0 5%;
	}
}