@charset "UTF-8";

/* CSS Document */

html, body {
	margin:0;
	scroll-behavior:smooth;
	overflow-x:hidden;
}
html {
	background-color:rgba(27,43,57,1.00);
}
body {
	background-color:#fff;
	padding-top:40px;
}

/*general css*/

a {
	text-decoration:none;
}
h1 {
	font-family:'Raleway',sans-serif;
	font-weight:800;
	letter-spacing:.1px;
	font-size:30px;
	color:rgba(29,46,60,1.00);
	margin-bottom:0px;
}
h2 {
	font-family:'Roboto',sans-serif;
	font-weight:600;
	font-size:15px;
	margin-bottom:-21px;
	color:rgba(29,46,60,1);
}
h3 {
	font-family:'Raleway',sans-serif;
	font-weight:400;
}
p {
	font-family:'Roboto', sans-serif;
	font-size:13px;
	color:rgba(29,45,59,.7);
	line-height:19px;
}
.numeral {
	font-family: 'Roboto', sans-serif;
	font-weight:700;
}
.lightblue {
	color:rgba(0,126,220,1.00);
}
.white {
	color:rgba(255,255,255,1.00);
}
.PHYellow {
	color:rgba(255,198,10,1.00);
}
.darkyellow {
	color:rgba(223,172,0,1.00);
}.bold {
	font-weight:700;
}
.inactive {
	height:200px;
	width:100px;
	color:rgba(25,139,222,1);
	position:absolute;
	z-index:10;
}
.register {
	font-size:10px;
	line-height:0px;
}
.nav {
	height:45px;
	width:100%;
	background-color:rgba(255,198,10,1.00);
	margin:0 auto;
	position:fixed;
	top:0;
	z-index:3;
}
#name2 {
	display:none;
}
.nav h1 {
	font-family:'Raleway',sans-serif;
	font-size:17px;
	font-weight:700;
	line-height:19px;
	margin:13px 0 0 30px;
	float:left;
	color:#000000;
}
.nav ul {
	width:220px;
	float:right;
	margin:8px 20px 0 0;
	padding:0;
}
.nav li {
	font-family:'Roboto',sans-serif;
	list-style-type:none;
	text-decoration:none;
	text-align:center;
	float:right;
	padding:6px 7px;
	color:#000000;
	font-size:13px;
	font-weight:700;
	transition:.15s ease-in;
}
.nav li:hover {
	opacity:.7;
}
.footer {
	height:60px;
	width:100%;
	background-color: rgba(255,198,10,1.00);
	color:rgba(0,0,0,1.00);
	bottom:0;
	
}
.footer p {
	color:rgba(0,0,0,1.00);
	font-size:12px;
	float:left;
	margin:21px 15px 0 0;
}
.footer img {
	width:16px;
	margin:0 10px -4px 0;
	opacity:.85;
}
.footer .wrapper {
	width:130px;
	float:right;
	padding-right:35px;
}
.footer .wrapper p {
	float:right;
	font-size:9px;
	line-height:12px;
	margin:18px 0 0 0;
}
.footer .wrapper img {
	width:30px;
	margin:15px 0 0 0;
	float:right;
	transition:.2s ease-in;
	opacity:.85;
}
.footer .wrapper img:hover {
	opacity:1;
}
.banner {
	position:relative;
	padding-bottom:40px;
	background-color:rgba(247,247,248,1.00);
}
.banner .text {
	max-width:750px;
	margin:0 auto;
	padding:25px 0 0 60px;
}
.banner .text h1 {
	font-size:25px;
	
}
.banner .text p {
	margin-top:10px;
	width:48%;
	max-width:320px;
	float:left;
}
.banner img {
	position:absolute;
	top:-23px;
	left:50%;
	margin:0;
	height:285px;
}
.button1 {
	font-family:'Raleway', sans-serif;
	font-size:14px;
	font-weight:800;
	color:#000000;
	display:inline-block;
	margin:0;
	padding:9px 11px;
	background-color:rgba(255,198,10,1.00);
	text-align:center;
	border-radius:5px;
	transition:.15s ease-in-out;
}
.button1:hover {
	background-color:rgba(255,198,10,0.5);
}
.title {
	position:relative;
	line-height:28px;
	height:auto;
	float:left;
	padding-bottom:6px;
	margin-top:30px;
	border-bottom:2px dashed rgba(255,198,10,1.0);
}
.clear {
	clear:both;
}
.genwrap {
	margin:0 auto;
	padding:0 35px;
}
.genwrapbox {
	margin:0 auto;
	padding:0 35px;
}

/*mostly homepage*/ 

#head1 {
	height:420px;
	max-width:none;
	margin:0 auto;
	margin-top:5px;
	overflow:hidden;
}
#head1 img {
	position:relative;
	margin:-10px 0 0 0;
	max-height:430px;
	float:right;
}
#head1 .text {
	position:absolute;
	max-width:600px;
	padding:40px 40px 30px 60px;
	z-index:1;
}
#head1 .text h2 {
	font-family:'Raleway', sans-serif;
	color:#fff;
	font-size:15px;
}
#head1 .text h1 {
	display:inline-block;
	color:rgba(255,198,10,1.00);
	font-size:38px;
	background-color: rgba(0,0,0,.75);
	padding:5px 15px;
	border-radius:4px;
}
#head1 .text p {
	font-family:'Raleway', sans-serif;
	letter-spacing: .2px;
	color:rgba(245,245,246,1.00);
	font-size:21px;
	line-height:28px;
}
#head1 .button1 {
	margin-top:-5px;
	font-size:17px;
}
.homecont1 {
	background-color:rgba(245,245,246,1.00);
	height:auto;
}
.homecont1 .wrapper {
	max-width:850px;
	margin:0 auto;
	padding:0 35px 40px 35px;
}
.homecont1 img {
	max-width:550px;
	margin:18px 0 0 -23px;
	position:absolute;
	z-index:0;
}
.homecont1 .title {
	clear:both;
	margin:0 0 10px 0;
}
.homecont1 .text {
	max-width:290px;
	float:right;
	padding:50px 15px 30px 45px;
	background-color:rgba(245,245,246,.9);
	position:relative;
	z-index:1;
}
.homecont1 .text p {
	float:left;
	font-size:16px;
	line-height:23px;
}
.homecont2 {
	height:auto;
	min-height:250px;
	margin:0 auto;
}
.homecont2 .wrapper {
	max-width:580px;
	height:auto;
	margin:0 auto;
	padding:0 35px;
}
.homecont2 .title {
	margin:0 0 10px 0;
}
.homecont2 .text {
	padding:30px 20px 0 30px;
	max-width:580px;
	background-color:rgba(255,255,255,.9);
}
.homecont2 .text p {
	float:left;
	font-size:16px;
	line-height:23px;
}

/*products*/

.prodnav {
	margin:60px auto;
	max-width:680px;
	height:160px;
}
.prodnav ul {
	display:inline-block;
	width:100%;
}
.prodnav li {
	display:block;
	float:left;
	margin:0px 0px 0px 60px;
	max-width:70px;
	font-family:'Raleway', sans-serif;
	font-weight:900;
	font-size:13px;
	color:rgba(255,198,10,1.00);
	text-align:center;
}
.prodnav .text {
	display:table-cell;
	vertical-align:middle;
	width:70px;
	height:45px;
	padding-top:1px;
	padding-bottom:3px;
}
.prodnav li img {
	max-width:68px;
}
.prodnav .smalltxt {
	display:block;
	font-size:10px;
	line-height:11px;
}
.prodnav li:hover .navarrow {
	opacity:1;
	transform:translateY(0px);
}
.navarrow {
	opacity:0;
	transform:translateY(-3px);
	transition:.3s ease-in-out;
}
.contentbox1 {
	min-height:300px;
	max-width:620px;
	margin:0 auto 40px auto;
	border:1px #027FDD solid;
	border-radius:15px;
	overflow:hidden;
}
.contentbox1 .text {
	background: rgba(247,247,248,1.00);
	padding:15px 65px 30px 35px;
	min-height:255px;
	max-height:240px;
	max-width:250px;
	position:absolute;
	z-index:0;
	border-radius:15px 0 0 15px;
}
.contentbox1 .text h1 {
	display:inline-block;
	font-size:23px;
	font-weight:800;
	line-height:24px;
	border-bottom: 2px dashed rgba(255,198,10,1.0);
	margin-bottom:3px;
	padding-bottom:6px;
}
.contentbox1 .imgwrap {
	overflow:hidden;
	position:relative;
	float:right;
	max-height:300px;
}
.contentbox1 .imgwrap img {
	max-height:380px;
	margin-top:-18px;
	margin-right:-10px;
}
.contentbox1 .text p {
	font-size:14px;
	line-height:20px;
	max-width:330px;
	margin:15px 0 15px 0;
}
.contentbox1 .text .button1 {
	margin:5px 0;
	min-width:170px;
	
}

/*footer banner, primarily used in the products section*/

.footerCTA {
	background: rgba(247,247,248,1.00);
	height:240px;
	margin-top:55px;
	overflow:hidden;
	padding-left:38px;
}
.footerCTA .text {
	max-width:550px;
	margin:0 auto;
	padding-top:48px;
}
.footerCTA h3 {
	font-size:21px;
	max-width:300px;
}
.footerCTA h1 {
	display:inline-block;
	color:rgba(1,126,220,1.00);
	font-size:27px;
	margin-top:0px;
	padding-bottom:5px;
	border-bottom: 2px dashed rgba(255,198,10,1.0);
	transition:.2s ease all;
}
.footerCTA h1:hover {
	color:rgba(0,108,187,1.00);
}
#footerCTAleft img {
	position:absolute;
	left:43%;
	margin-left:-680px;
	max-height:240px;
}
#footerCTAright img {
	position:absolute;
	max-height:240px;
	left:65%;
}

/*contact*/

.contactwrap1 {
	max-width:620px;
	margin:20px auto 0 auto;
	padding:0 40px 0 70px;
	overflow:auto;
}
.contactwrap2 {
	max-width:620px;
	margin:40px auto 85px auto;
	padding:0 40px 0 70px;
	border-top:1px dashed rgba(255,198,10,1.0);
	overflow:auto;
}
.contactwrap1 .text, .contactwrap2 .text {
	float:left;
	max-width:178px;
	margin:20px 0 0 0;
}
.contactwrap1 .text h2, .contactwrap2 .text h2 {
	font-size:12px;
	margin-bottom:5px;
	margin-top:25px;
}
.contactwrap1 .text p, .contactwrap2 .text p {
	font-size:12px;
	font-family:'Roboto', sans-serif;
	margin:0px;
	line-height:15px;
}
.contactwrap1 .text img, .contactwrap2 .text img {
	width:25px;
	position:absolute;
	margin:-6px 0 0 -32px;
}
#map {
	height:300px;
	max-width:375px;
	float:right;
	margin:40px 0 0 0;
	overflow:hidden;
	border-radius:25px;
}

/*contact form styling*/

form {
	margin:40px 0 0 0;
	padding:20px 30px 20px 30px;
	max-width:318px;
	width:55%;
	float:right;
	background-color:rgba(245,245,246,1.00);
	border-radius:15px;
}
label {
	font-family:'Roboto', sans-serif;
	margin-left:3px;
	font-weight:600;
	font-size:12px;
	color:rgba(29,46,60,1);
}
input {
	font-family:'Roboto', sans-serif;
	font-size:12px;
	margin:5px 0 10px 0;
	width:100%;
	height:28px;
	border:1px solid rgba(255,198,10,1.00);
	border-radius:2px;
	padding:5px 8px;
}
::placeholder {
	color:rgba(120,120,120,1.00);
}
textarea {
	font-family:'Roboto', sans-serif;
	font-size:12px;
	width:100%;
	height:100px;
	margin:5px 0 10px 0;
	border:1px solid rgba(255,198,10,1.00);
	border-radius:2px;
	padding:7px 8px;
	resize:none;
}
input, textarea, select {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-transition:.2s ease-in-out;
	-moz-transition:.2s ease-in-out;
	transition:.3s ease-in-out;
}
input:focus, input:hover, textarea:focus, textarea:hover {
	-webkit-box-shadow:inset 0px 0px 4px rgba(0,126,220,.5);
	-moz-box-shadow:inset 0px 0px 4px rgba(0,126,220,.5);
	box-shadow:inset 0px 0px 4px rgba(0,126,220,.5);
}
#send input {
	width:110px;
	height:28px;
	padding-bottom:4px;
	margin-bottom:2px;
	background-color:rgba(255,198,10,1.00);
	color:#000000;
	border:none;
	font-family:'Raleway', sans-serif;
	font-size:12px;
}
#send input:hover {
	color:rgba(255,255,255,.8);
	background-color:rgba(255,198,10,0.5);
}
fieldset {
	border:none;
	padding:0;
}
.error {
	margin:1px 2px 0 0;
	color:rgba(255,47,51,1.00);
	font-family:'Roboto', sans-serif;
	font-size:11px;
	float:right;
}
.success {
	margin:-23px 4px 0 0;
	color:rgba(29,45,59,.7);
	font-family:'Raleway', sans-serif;
	font-size:11px;
	float:right;
}

/*The email variable in the html and the form processing php is used as bait to filter some bots. It's styled in this way to be shown off the page, hidden from normal users.*/

input[name=email] {
	position:absolute;
	left:-3000px;
}

/*placeholder page*/

#mobilecover {
	display:inherit;
	position:fixed;
	top:0;
	z-index:0;
	width:100%;
	height:100%;
	background:rgba(247,247,248,1.00);
}
#mobilebox {
	position:relative;
	overflow:hidden;
	height:auto;
	max-width:320px;
	width:65%;
	margin:0 auto;
	padding:25px;
	background-color:#fff;
	border:2px dashed rgba(255,198,10,1.0);
	border-radius:15px;
	top:52%;
	transform:translateY(-50%) perspective(1px);
}
#mobilebox img {
	position:absolute;
	opacity:.2;
	width:380px;
	top:20px;
	left:24%;
	transform:rotate(110deg);
}
#mobilebox h1 {
	font-size:18px;
	margin:30px 0 0 0;
	line-height:20px;
}
#mobilebox h2 {
	font-family:'Raleway', sans-serif;
	font-size:15px;
	margin:0 15px 0 0;
	width:140px;
}
#mobilebox h3 {
	font-family:'Raleway', sans-serif;
	font-size:30px;
	color:rgba(255,198,10,1.00);
	margin:0;
	height:55px;
}
@media only screen and (min-width:1025px) {
	
	/*gen CSS*/
	
	.banner {
		padding-bottom:35px;
	}
	.banner .text {
		max-width:700px;
		padding:25px 0 0 40px;
	}
	.banner .text h1 {
		font-size:28px;
	}
	.banner .text p {
		font-size:14px;
		max-width:500px;
	}
	
	/*homepage*/
	
	#head1 {
		max-width:1000px;
		height:480px;
		border:1px #027FDD solid;
		border-radius:15px;
		margin:40px auto 43px auto;
	}
	#head1 img {
		max-width:none;
		max-height:490px;
	}
	#head1 .text {
		max-width:600px;
	}
	#head1 .text h2 {
		font-family:'Raleway', sans-serif;
		color:#fff;
		font-size:18px;
	}
	#head1 .text h1 {
		display:inline-block;
		color:rgba(255,198,10,1.00);
		font-size:45px;
		background:rgba(0,0,0,.75);
		padding:5px 15px;
		border-radius:4px;
	}
	#head1 .text p {
		font-family:'Raleway', sans-serif;
		letter-spacing: .2px;
		color:rgba(245,245,246,1.00);
		font-size:25px;
		line-height:28px;
	}
	#head1 .button1 {
		font-size:18px;
	}
	
	/*product pages*/
	
	.contentbox1 {
		max-width:1000px;
		height:340px;
		border:1px solid rgba(1,124,214,1.00);
	}
	.contentbox1 .text {
		max-width:450px;
		min-height:295px;
		max-height:none;
		height:280px;
		border-radius:15px;
		border:1px solid rgba(247,247,248,1.00);
		margin-top:-1px;
		margin-left:-1px;
	}
	.contentbox1 .text h1 {
		font-size:30px;
		line-height:29px;
	}
	.contentbox1 .text p {
		font-size:16.5px;
		line-height:25px;
		max-width:400px;
	}
	.contentbox1 .imgwrap {
		max-height:400px;
	}
	.contentbox1 .imgwrap img {
		max-height:420px;
		margin-right:25px;
		margin-top:-25px;
	}
	.contentbox1 .button1 {
		postion:absolute;
		font-size:15px;
		width:180px;
		float:left;
		clear:left;
	}

}
@media only screen and (max-width:700px){
	
	/*contact & form */
	
	.contactwrap1, .contactwrap2 {
		overflow-x:hidden;
	}
	form {
		border-radius:15px 0 0 15px;
		margin-right:-40px;
	}
	#map {
		border-radius:15px 0 0 15px;
		margin-right:-40px;
		max-width:376px;
		width:67%;
	}
	.success {
		float:left;
		margin:-30px 0 0 128px;
		width:100px;
	}
	
	/* header banners */
	
	.banner img {
		opacity:.1;
		left:50%;
	}
	.banner .text {
		padding-right:45px;
	}
	.banner .text h1 {
		font-size:24px;
		line-height:23px;
	}
	.banner .text p {
		width:100%;
	}
	
	/*homepage*/
	
	.homecont1 {
		height:auto;
	}
	.homecont1 .wrapper {
		padding:0 35px 0px 35px;
		max-width:580px;
	}
	.homecont1 .text {
		max-width:580px;
		min-height:280px;
		padding:70px 30px 40px 30px;
	}
	.homecont1 img {
		max-width:none;
		width:80%;
		margin:50px 0 0 40px;
	}
	
	/* product pages */
	
	.prodnav {
		max-width:700px;
		margin:7% 0 7% 0;
	}
	.prodnav li {
		width:10%;
		margin:10px 3.6%;
	}
	.prodnav li img {
		width:100%;
	}
	.prodnav .text {
		height:40px;
	}
	.contentbox1 .text {
		padding:15px 25px 30px 25px;
		width:38%;
	}
	.contentbox1 .text h1 {
		font-size:22px;
		line-height:22px;
	}
	.contentbox1 .text p {
		max-width:240px;
	}
	.contentbox1 .imgwrap img {
		margin-right:-70px;
	}
}

@media only screen and (max-width:550px){
	
	.nav #name {
		display:none;
	}
	.nav #name2 {
		display:block;
	}
	.nav #name2 h1 {
		font-size:16px;
	}
	.nav #name2 p {
		color:rgba(27,43,58,1.00);
	}
	.footerCTA {
		margin:0;
		border-top:1px dashed rgba(255,198,10,1.0);
	}
	.footerCTA .text h3 {
		font-size:18px;
	}
	.footer {
		height:150px;
	}
	.footer p {
		height:12px;
	}
	.footer .wrapper {
		width:124px;
		float:left;
		margin:4px 0 0 38px;
	}
	.footer .genwrap {
		width:53%;
		float:left;
	}
	
	/* home mobile */
	
	#head1 {
		height:auto;
	}
	#head1 .text {
		padding-left:40px;
		max-width:365px;
	}
	#head1 .text h1 {
		font-size:25px;
		margin-top:28px;
	}
	#head1 .text h2 {
		font-size:14px;
	}
	#head1 .text p {
		font-size:17px;
		line-height:24px;
	}
	#head1 .button1 {
		font-size:15px;
	}
	.homecont1 .wrapper {
		margin-bottom:-20px;
	}
	.homecont1 .text {
		padding:30px 5px 0px 5px;
	}
	.homecont1 img {
		visibility: collapse;
	}
	.homecont2 .wrapper {
		min-height: 300px;
		padding:20px 20px 90px 10px;
	}
	
	/* content pages */
	
	.prodnav {
		max-width:550px;
		width:100%;
		height:220px;
		margin-top:-40px;
		margin-bottom:0;
		background-color:rgba(255,255,255,1.00);
	}
	.prodnav ul {
		width:100%;
		padding:0px;
		margin-top:32px;
	}
	.prodnav li {
		color:rgba(27,43,57,1.00);
		max-height:20px;
		max-width:100%;
		margin:0 auto;
		width:100%;
		padding:8px 0px 8px 25px;
		border-top: 1px dashed rgba(255,198,10,1.0);
		float:none;
		position:relative;
		background:#fff;
	}
	.prodnav li a {
		color:rgba(2,127,221,1.00);
	}
	.prodnav .text {
		width:100%;
		height:20px;
		font-family:'Raleway',sans-serif;
		text-align: left;
		font-size:13px;
		font-weight:600;
	}
	.prodnav img {
		display:none;
	}
	.prodnav .smalltxt {
		font-size:13px;
		height:10px;
	}
	.contentbox1 {
		margin:0;
		border-radius:0;
		border-bottom:none;
		border-top:1px solid rgba(1,127,220,1.00);
	}
	.contentbox1 .text {
		width:60%;
		padding-top:15px;
		background:rgba(247,247,248,.8);
		z-index: 2;
	}
	.contentbox1 .imgwrap img {
		opacity:.4;
		margin-right:-130px;
	}
	.genwrapbox {
		padding:0;
	}
	
	/* contact & form */
	
	form {
		max-width:none;
		width:100%;
		padding:18px 50px 40px 50px;
		margin:0 -50px 0 0;
		border-radius:0;
	}
	input {
		height:32px;
		padding:5px 10px;
	}
	textarea {
		height:110px;
		padding:7px 10px;
	}
	#map {
		position:absolute;
		overflow-x:hidden;
		max-width:none;
		width:100%;
		border-radius:0px;
		bottom:0;
		left:0;
	}
	.contactwrap1 {
		margin-top:-20px;
		padding:0 47px;
	}
	.contactwrap1 .text {
		padding:0 23px;
	}
	.contactwrap2 {
		position:relative;
		height:625px;
		margin-bottom:0;
	}
	
}