*{font-family:'Open Sans',sans-serif;margin:0px;}
.errmsg{color:red;font-size:14px;font-weight:bold;}
#header{padding:20px;overflow:hidden;}
#header h1{float:left;font-family:'Lato',sans-serif;color:#555;display:inline-block;background-image:url('../img/yayguy.png');background-repeat:no-repeat;background-position:left;background-size: 30px 30px;margin-left:50px;padding-left:35px;font-size:30px;}
#header #menu{float:right;margin-right:50px;}
#header #bars {display:none;float:right;margin-top:8px;letter-spacing:0.05em;color:#999;text-transform:uppercase;text-decoration:none;font-size:15px;}
#header #bars:hover {color:#555;}
#header #menu a{display:inline-block;margin-left:10px;font-size:14px;color:#555;text-decoration:none;padding-top:10px;letter-spacing:0.05em;border-top:3px solid white;}
#header #menu #vm{margin-right:25px;}
#header #menu #vm:hover {border-top:3px solid #e75d4a;}
#header #menu #tm {margin-right:25px;}
#header #menu #tm:hover {border-top:3px solid #009fc2;}
#header #menu a i{color:#999;}
#header #menu a i:hover {color:#555;}
#hero{height:340px;background-image:url('../img/abacus.jpg');background-size:100%;background-repeat:no-repeat;text-align:center;}
#hero h1{font-family:'Lato',sans-serif;color:white;text-align:center;font-size:48px;margin:50px 0px;font-weight:300;}
#hero h2{text-align:center;color:white;font-weight:300;letter-spacing:0.05em;}
#hero p{text-align:center;color:#c0c0c0;font-weight:300;letter-spacing:0.05em;margin-top:100px;}
#hero .overlay{background: rgba(39,62,84,0.82);overflow: hidden;height: 100%;z-index: 2;}
#hero a{margin-top:50px;background-color:#009fc2;color:white;padding:20px 40px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;display:inline-block;margin-left:auto;margin-right:auto;text-decoration:none;}
#hero a:hover {background-color:#0198b9;}
#clients{margin: 0 auto;padding:15px 0px 10px 0px;text-align:center;}
#clients-footer{text-align:center;font-size:16px;color:#333;letter-spacing:0.05em;padding-bottom:20px;border-bottom:1px solid #c0c0c0;}
#clients img{margin:20px 15px;height:55px;display:inline-block;}
#products{text-align:center;margin:25px 0px 50px;}
#products .product{padding:0px 25px 25px 25px;font-size:14px;text-align:center;width:300px;overflow:hidden;border:1px solid #c0c0c0;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;margin-top:40px;margin-bottom:25px;margin-left:auto;margin-right:auto;display:inline-block;height:235px;vertical-align: top;}
#products .product h1{font-size:16px;padding:15px 0px;}
#products .product p{padding-bottom:20px;line-height:1.5em;}
#products .product a{color:#4b8fbd;display:inline-block;font-weight:bold;text-decoration:none;padding:8px 20px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;}
#products .product a:hover {background-color:#4b8fbd;color:white;}
#products .vm{border-top:3px solid #e75d4a;margin-right:45px;}
#products .tm{border-top:3px solid #009fc2;margin-left:45px;}
#features{padding:50px 0px 65px 0px;text-align:center;background-image:url('../img/bg-blue1.jpg');color:white;}
#features h1{font-size:22px;text-align:center;margin-bottom:40px;font-weight:400;}
#features .feature{text-align:center;display:inline-block;margin-left:auto;margin-right:auto;width:200px;font-size:14px;line-height:1.5em;padding:0px 20px;}
#features .feature img{width:60px;display:block;margin-left:auto;margin-right:auto;margin-bottom:10px;}
#features .feature i{;display:block;margin-bottom:15px;color:#2dcaff;}
#contact {padding:50px 0px;text-align:center;color:#333;}
#contact h1{color:#333;font-size:24px;margin-bottom:10px;}
#contact h2{font-weight:normal;font-size:16px;width:500px;margin-left:auto;margin-right:auto;color:#555;line-height:1.5em;}
#contact form{margin:25px 0px;}
#contact input[type=text]{margin-left:auto;margin-right:auto;margin-bottom:25px;color:gray;border:1px solid #c0c0c0;padding:10px 10px;font-size:16px;width:500px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;letter-spacing:0.1em;display:block;}
#contact input[type=submit]{width:550px;font-size:18px;margin-top:15px;background-color:#009fc2;color:white;padding:20px 40px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;display:inline-block;margin-left:auto;margin-right:auto;text-decoration:none;border:0px;}
#contact input[type=radio]{margin-left:15px;margin-bottom:20px;}
#contact label{margin-left:5px;margin-right:20px;font-size:15px;}
#contact b{display:block;color:#555;margin-bottom:5px;}
#contact #name{background-image:url('../img/user.png');background-repeat:no-repeat;background-size:26px 26px;padding-left:44px;background-position:9px 7px;}
#contact #email{background-image:url('../img/email.png');background-repeat:no-repeat;background-size:26px 20px;padding-left:44px;background-position:9px 12px;}
#contact #phone{background-image:url('../img/phone.png');background-repeat:no-repeat;background-size:22px 22px;padding-left:44px;background-position:9px 9px;}
#contact textarea{margin-left:auto;margin-right:auto;margin-bottom:25px;margin-top:20px;color:gray;border:1px solid #c0c0c0;padding:10px 10px;font-size:16px;width:530px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;letter-spacing:0.1em;display:block;height:120px;}
#contact a{display:inline-block;margin:20px 0px;color:#4b8fbd;}
#contact img{width:100px;margin-bottom:25px;}
#contact .responsive-br{display:none;}
#footer{background-color:#efefef;border-top:1px solid #b0b0b0;color:#999;font-size:13px;overflow:hidden;padding:50px;}
#footer #about{float:left;border-right:1px solid #c0c0c0;width:60%;line-height:1.6em;letter-spacing:0.01em;padding-right:20px;}
#footer h1{color:#555;font-size:18px;padding-bottom:10px;}
#footer #soc-logo{float:right;margin-left:20px;height:100px;}
#footer #info{float:left;width:30%;line-height:1.6em;letter-spacing:0.01em;padding-left:20px;}
#footer #info a i{color:#999;display:inline-block;margin:5px 10px 10px 0px;}
#footer #info a i:hover {color:#555;}

@media (max-width: 1020px) {
	#hero h1{font-size:40px;}
	#hero h2{font-size:22px;}
	#clients img{height:50px;}
	#features{background-size: 100% 100%;}
	#features .feature{display:block;margin-bottom:50px;}
	#features h1{font-size:20px;}
}

@media (max-width: 920px) {
	#hero h1{font-size:36px;}
	#hero h2{font-size:20px;}
	#clients img{height:40px;}
	#products .vm{margin-right:25px;}
	#products .tm{margin-left:25px;}
}

@media (max-width: 820px) {
	#header #bars{display:block;}
	#header #menu{display:none;}
	#header #menu{float:left;clear:both;margin-left:50px;margin-top:10px;}
	#header #menu #vm{display:block;border-bottom:1px solid #c0c0c0;padding-bottom:15px;}
	#header #menu #vm:hover {border-top:3px solid white;font-weight:bold;}
	#header #menu #tm{display:block;margin-top:5px;border-bottom:1px solid #c0c0c0;padding-bottom:15px;}
	#header #menu #tm:hover {border-top:3px solid white;color:black;font-weight:bold;}
	#products .vm{margin-right:0px;}
	#products .tm{margin-left:0px;}
}

@media (max-width: 720px) {
	#hero h1{font-size:30px;}
	#hero h2{font-size:18px;}
	#footer #about{border-right:none;width:90%;}
	#footer #info{clear:both;padding-left:0px;padding-top:20px;width:90%;}
}

@media (max-width: 620px) {
	#hero h1{margin:30px 0px;}
	#contact{padding-top:20px;}
	#contact h2{font-size:14px;}
	#contact input[type=text]{width:400px;}
	#contact input[type=submit]{width:450px;}
	#contact textarea{width:430px;}
	#hero{background-size: 100% 100%;}
}

@media (max-width: 520px) {
	#header h1{margin-left:10px;}
	#header #menu{margin-left:10px;}
	#contact h2{width:90%;}
	#contact input[type=text]{width:300px;}
	#contact input[type=submit]{width:350px;}
	#contact textarea{width:330px;}
	#contact .responsive-br{display:block;}
}

@media (max-width: 420px) {
	#header #menutxt{display:none;}
	#header #bars{font-size:20px;margin-top:4px;}
	#hero h2{padding:0px 10px;font-size:14px;}
	#products .product{width:250px;}
	#contact h1{font-size:20px;}
	#contact input[type=text]{width:250px;}
	#contact input[type=submit]{width:300px;}
	#contact textarea{width:280px;}
	#products .product{height:275px;}
}