@import url("styles2.css");

html,body {
margin:0;
padding:0;
}

body {
	font:20px/1.5em "futura-pt",sans-serif;
	font-style:normal;
	font-weight:400;
	text-align:center;
	color:#2a2a2a;
	background:#fff;
}

a {text-decoration:none;}
strong {font-weight:700;}
blockquote {margin:0;}
blockquote:before {content:open-quote;}
blockquote:after {content: close-quote;}

.container {
	width:1200px;
	margin:0 auto;
	text-align:left;
	position:relative;
	}

h2 {
	font-weight:400;
	font-size:48px;
	width:100%;
	text-align:center;
	margin:0 0 60px 0;
	padding:0;
}

.btn a {
	padding:10px 54px 10px 30px;
	color:#2a2a2a;
	border:1px solid #d2d2d2;
	background:url(img/btn-arrow.png) 100% 15px no-repeat;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.btn a:hover {
	background:#4ea867 url(img/btn-arrow.png) 100% -50px no-repeat;
	color:#fff;
	border:1px solid #4ea867;
}

.sep {
	display: inline-block;
	padding:0 10px;
	color:#ccc;
}

.clearfix:after {
	content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

input:focus, input:active {outline: none !important;}


/* Header */
header {
	background:#2a2a2a;
	height:60px;
	overflow:hidden;
}

header img {float:left;}

header ul {
	margin:0;
	padding:0;
	float:right;}
header li {
	margin:0 0 0 24px;
	padding:0;
	display:inline-block;
	line-height:60px;
}
header li a {
	font-weight:700;
	color:#c7c7c7;
	text-transform:uppercase;
	font-size:14px;
	letter-spacing:0.1em;
}
header li.current a,
header li a:hover {color:#fff;}



/* Hero */
#hero {
	background:#5a5a5a url(img/hero.jpg) no-repeat bottom;
	background-size:cover;
	height:540px;
	position:relative;
}

#hero p {
	margin:0 0 60px 0;
	color:#fff;
	font-size:48px;
	line-height:90px;
	font-weight:300;
	position:absolute;
	bottom:130px;
	width:100%;
}

#hero .trail {
	height:190px;
	width:100%;
	background:url(img/trail-hero.png) center bottom no-repeat;
	position:absolute;
	bottom:0;
}

/* Introduction */
#introduction {
	min-height:1225px;
	background:url(img/trail-intro.png) center top no-repeat;
}

#subhero p {
	position:absolute;
	top:95px;
	margin:0;
	width:100%;
	font-size:48px;
	font-weight:300;
	text-align:center;
}

#introtext {
	position:absolute;
	left:165px;
	top:302px;
	width:435px;
}

#introtext span:first-child {
	color:#555;
	font-size:14px;
	opacity:.8;
}

h1 {
	font-size:70px;
	color:#4d8f60;
	font-weight:300;
	margin:40px 0 25px;
}

h1 span {
	display:block;
	margin:16px 0 0 180px;
	text-transform:lowercase;
}

#introtext p {margin:0 0 12px 0;}

.poweredby {
	font-size:16px;
	color:#a8a8a8;
}

.poweredby span {
	margin-left:4px;
	display:inline-block;
	width:247px;
	height:26px;
	background:url(img/ws2016.png) left no-repeat;
	text-indent:-9999px;
}

#introtext .price {
	font-size:36px;
	color:#555;
	margin-bottom:30px;
	padding:10px 0;
	background:url(img/price-bg.png) bottom left no-repeat;
}

#introtext .price sup {font-size:18px;	}
#introtext .price span {
	display:block;
	float:left;
	margin:0 50px 0 0;
}

#introimg {
	position:absolute;
	right:0;
	top:325px;
}

#elevator {
	position:absolute;
	top:860px;
	width:100%;
}

#elevator h3 {
	text-align:center;
	font-size:16px;
	font-weight:700;
	color:#4ea867;
	text-transform:uppercase;
}

#elevator p {
	width:690px;
	margin:0 auto;
	text-align:center;
}



/* Benefits */
#benefits {
	background:url(img/trail-benefits.jpg) top center no-repeat;
	padding-top:275px;
}

#benefits ul {
	width:880px;
	background:url(img/trail-benefits2.png) top no-repeat;
	margin:0 auto;
	padding:17px 0 0 0;
}

#benefits li {
	margin:0 0 55px 0;
	padding:0;
	font-size:20px;
	line-height:30px;
	list-style:none;
	width:365px;
	text-align:right;
	display:inline-block;
	vertical-align: middle;
}

#benefits li:nth-of-type(even) {
	margin-left:140px;
	text-align:left;
}

#benefits li.long {margin:-10px 0 50px 0;}



/* Calculator */
#calculator {
	background:url(img/calculator-bg.png) top repeat-x;
	padding:70px 0 40px;
}

#calculator h2 {margin-bottom:30px;}

#calculator p.arrow {
	background:url(img/calc-eyov.png) center top no-repeat;
	margin:0;
	padding:4px 0 20px;
	color:#fff;
	text-align:center;
}

#calculator .input {
	background:url(img/calcinput-bg.png) center top no-repeat;
	min-height:158px;
	padding-top:15px;
}

#calculator .input div {
	float:left;
	text-align:left;
}

#calculator .input .current {
	width:210px;
	margin:67px 30px 0 20px;
	display:block;
	float:left;
	text-align:right;
	line-height:1.25em;
	color:#4d8f60;
	font-weight:600;
}

.hardware {width:240px;}
.software {width:226px;}

#calculator .input label {
	font-size:16px;
	line-height:16px;
	font-weight:600;
	margin-left:40px;
}

#calculator .input label span {
	display:block;
	font-weight:300;
	margin-left:40px;
}

#calculator .input .hub {
	display:block;
	font-size:15px;
	color:#fff;
	margin:5px 0 0 33px
}

#calculator .input input {
	border:none;
	background:none;
	text-align:right;
	color:#4d8f60;
	font:30px/1.5em "futura-pt",sans-serif;
	padding-left:45px;
	width:100px;
	font-weight:600;
	margin:15px 0 0 0;
}

#calculator .input input:focus {color:#ea8400;}
#calculator .input .terminals input {
	width:150px;
	padding-left:40px;
}

#calculator .source {
	opacity:0.8;
	font-size:14px;
	text-align:center;
	margin:0;
}

.calculated {
	background:url(img/calc-vs.png) center bottom no-repeat;
	margin-top:20px;
}

.calculated input {
	border:none;
	background:none;
	text-align:center;
	font:60px/1.5em "futura-pt",sans-serif;
	width:460px;
}

.currentcost {
	float:left;
	width:460px;
	margin-left:85px;
}

.hubcost {
	float:right;
	width:460px;
	margin-right:85px;
}

.hubcost span {
	font-weight:600;
	color:#4d8f60;
}

.calculated label {
	text-align:center;
	margin-top:15px;
	display:block;
}

.saved {
	margin-top:40px;
	background:url(img/saved-bg.png) center top no-repeat;
	min-height:231px;
}

.saved input {
	border:none;
	background:none;
	width:100%;
	font:160px/231px "futura-pt",sans-serif;
	text-align:center;
	color:#fff;
	font-weight:600;
	margin-top:10px;
}

.saved label {
	color:#4d8f60;
	text-transform:uppercase;
	font-size:60px;
	font-weight:600;
	text-align:center;
	display:block;
	margin-top:35px;
}



/* Specs */
#specs {
	background:url(img/specs-bg.png) center top no-repeat;
	padding-top:160px;
}

#specs h2 {
	text-align:left;
	margin-left:40px;
}

#specs p {
	background:#eee;
	padding:4px 35px;
	margin:10px 0;
	display:table;
	-webkit-transform: skew(-20deg);
	-moz-transform: skew(-20deg);
	-o-transform: skew(-20deg);
	transform: skew(-20deg);
}

#specs p span {
	display:block;
	-webkit-transform: skew(20deg);
	-moz-transform: skew(20deg);
	-o-transform: skew(20deg);
	transform: skew(20deg);
}

#specs p a {color:#4d8f60;}

#specimg {
	background:url(img/specimg.jpg) top no-repeat;
	min-height:547px;
	position:relative;
	margin:-10px 0 60px;
}

#specimg ul {
	margin:0;
	padding:0;
}

#specimg li {
	padding:0;
	list-style:none;
	font-size:16px;
	line-height:20px;
	position:absolute;
	opacity:0.8;
}

#specimg li span {display:block;	}

#spec-usb {top:435px;left:108px;}
#spec-io {top:571px;left:287px;}
#spec-power {top:522px;left:519px;}
#spec-usbhost {top:469px;left:616px;}
#spec-reset {top:412px;left:726px;}
#spec-ethernet {top:358px;left:821px;}
#spec-vga {top:307px;left:912px;}

#specimgmobile {display:none;}


/* MREC */
#mrec {
	height:375px;
	background:url(img/mrec_bg2.png) repeat-x;
	color:#fff;
}

#mrec-inner {
	height:375px;
	background:url(img/mrec_bg.jpg) center no-repeat;
}

#mrec img {
	position:absolute;
	top:155px;
	left:40px;
}

#mrec blockquote {
	position:absolute;
	top:125px;
	right:0;
	text-align:right;
	font-size:36px;
	font-weight:300;
}

#mrec .source {
	position:absolute;
	top:165px;
	right:16px;
	text-align:right;
	font-size:18px;
}


/* Demo Video */
#demovid {padding:80px 0 0 0;}
.embed-container {position:relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto;}
.embed-container iframe, .embed-container object, .embed-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#demovid .container {text-align:center;}
#demovid p a {color:#4d8f60;}

/* Happy Customers */
#customers {
	padding:80px 0;
	background:url(img/trail-customers.png) center bottom no-repeat;
}

#customers h2 {margin-bottom:90px;}
#customers .col {
	float:left;
	width:410px;
	margin-left:110px;
}

#customers .col:last-child {
	float:right;
	margin:0 110px 0 0;
}

#customers blockquote {margin-bottom:20px;}
#customers .source {
	margin-bottom:60px;
	font-size:16px;
	line-height:1.5em;
	display:block;
}

#customers .source strong {
	display:block;
	color:#4d8f60;
}



/* Our Story */
#ourstory {
	padding-top:100px;
	background:url(img/ourstory-bg.png) top center no-repeat;
}

#ourstory .colhold {
	width:880px;
	margin:0 auto;
	column-count:2;
	column-gap: 80px;
}

#ourstory .colhold p:first-of-type {margin-top:0;}

#education {
	font-size:16px;
	line-height:26px;
	min-height:191px;
	background:url(img/education-bg.png) center top no-repeat;
	width:750px;
	padding:30px 142px 0;
	margin:60px auto 0;
	text-align:center;
}

#education a {
	font-weight:600;
	color:#4d8f60;
}

#gbc {
	text-align:center;
	margin:50px 0 130px;
}



/* Contact */
#contact {
	color:#fff;
	padding-bottom:100px;
	background: rgb(71,72,72);
	background: -moz-radial-gradient(center, ellipse cover,  rgba(71,72,72,1) 0%, rgba(42,42,42,1) 99%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(71,72,72,1)), color-stop(99%,rgba(42,42,42,1)));
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(71,72,72,1) 0%,rgba(42,42,42,1) 99%);
	background: -o-radial-gradient(center, ellipse cover,  rgba(71,72,72,1) 0%,rgba(42,42,42,1) 99%);
	background: -ms-radial-gradient(center, ellipse cover,  rgba(71,72,72,1) 0%,rgba(42,42,42,1) 99%);
	background: radial-gradient(ellipse at center,  rgba(71,72,72,1) 0%,rgba(42,42,42,1) 99%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#474848', endColorstr='#2a2a2a',GradientType=1 );
}

#contact .wave {
	height:92px;
	background:url(img/contact-bg.png) center top no-repeat;
}

#contact .form {
	width:440px;
	float:left;
	margin-left:140px;
}

.g-recaptcha {display:none;}

/*
#contact .col {
	width:540px;
	float:right;
}*/

#contact .col {
	width:100%;
	text-align:center;
}

#contact p span {
	display:block;
	color:#787878;
	font-size:16px;
	text-transform:uppercase;
	font-weight:600;
}
#contact p a {
	color:#fff;
	text-decoration:none;
}
#contact p a:hover {opacity:0.7;}
#contact ul {
	margin:40px 0 0 0;
	padding:0;
}

#contact li {
	list-style:none;
	display:inline-block;
	margin-right:10px;
}

#contact li a {
	background:url(img/social.png);
	opacity:0.5;
	width:32px;
	height:32px;
	text-indent:-9999px;
	overflow:hidden;
	float:left;
}
#contact li.twitter a {background-position:73px 0;}
#contact li.linkedin a {background-position:147px 0;}
#contact li a:hover {opacity:1;}

#contact .skew {
	margin-bottom:24px;
	border:1px solid #565656;
	-webkit-transform: skew(-20deg);
	-moz-transform: skew(-20deg);
	-o-transform: skew(-20deg);
	transform: skew(-20deg);
}
#contact .skew input,
#contact .skew select {
	-webkit-transform: skew(20deg);
	-moz-transform: skew(20deg);
	-o-transform: skew(20deg);
	transform: skew(20deg);
}

#contact input,
#contact select,
#contact textarea {
	font:20px/1.5em "futura-pt",sans-serif;
	font-style:normal;
	font-weight:400;
	color:#8b8b8b;
	border:none;
	background:none;
	padding:6px 14px;
	width:392px;
	margin-left:10px;
}

#contact textarea {
	border:1px solid #565656;
	margin:0 0 24px 0;
	padding:6px 20px 6px 30px;
}
#contact textarea, #contact select {width:90%;}
#contact .skew:hover,
#contact textarea:focus{
	border-color:#fff;
}

#contact input[type="submit"] {
	width:133px;
	color:#fff;
	background:url(img/submit.png) center no-repeat;
	opacity:0.8;
	font-weight:600;
	text-transform:uppercase;
	font-size:16px;
}

#contact input[type="submit"]:hover {
	cursor:pointer;
	opacity:0.9;
}
#contact input[type="submit"]:active {opacity:1;}
#contact .mailer {display:none;}


@media only screen and (min-width:1199px) {
	#heroln1 {width:1200px;height:540px;position:relative;margin:0 auto;}
}

@media only screen
and (max-width: 1199px) {
.container {
	width:90%;
	margin-left:auto;
	margin-right:auto;
}
.trail,.skrollable {display:none;}
#hero {height:400px;}
#hero p {
	margin:0;
	bottom:25%;
}
#introduction {background:none;}
#subhero p, #introtext, #introimg, #elevator {
	position:relative;
	top:auto;
	left:auto;
	width:75%;
	padding-bottom:10px;
	margin:40px auto;
}
#introtext {text-align:center;}
#introtext li {list-style:none;}
h1 {margin-top:0;line-height:1em;}
h1 span {
	margin:0;
	line-height:1.5em;
}
h2 {line-height:1.25em;margin-bottom:30px;}
#introtext .price {background:none}
#introtext .price span {
	float:none;
	display:inline-block;
	margin-right:10px;
}
#introimg img {width:100%;height:auto;}
#elevator p {width:auto;}
#elevator p br {display:none;}
#benefits {background:none;padding:30px 0;}
#benefits ul {
	width:100%;
	background:none;
}
#benefits li, #benefits li:nth-of-type(2n), #benefits li.long {
	float:none;
	width:75%;
	text-align:left;
	margin:0 auto 20px;
}
#calculator .input {
	background:none;
	width:50%;
	margin:0 auto;
	}
#calculator .input .current, #calculator .input div {float:none;}
#calculator .input .current {margin:0 auto 30px;text-align:center;}
#calculator .input div {text-align:center;}
#calculator .input .current, .hardware, .software {width:auto;}
#calculator .input label {
	margin:10px 0 0;
	float:left;
	width:60%;
	text-align:left;
	}
#calculator .input label span {display:inline-block;margin-left:0;}
#calculator .input input {
	padding-left:0;
	width:30%;
	float:right;
	margin:0;
	border-bottom:1px dashed #888;
	}
#calculator .input .terminals input {padding-left:0;width:30%;}
#calculator .input .hub {
	clear:both;
	text-align:left;
	color:#777;
	margin:0 0 20px;
}
#calculator .source {margin-top:15px;}
.calculated {background:none;}
.currentcost, .hubcost {
	float:none;
	width:auto;
	margin:0;
}
.calculated label {margin:0 auto 15px;}
.saved {
	background-size:contain;
	min-height:inherit;
}
#saved-new {font-size:110px;line-height:1.5em;height:auto;}
.saved label {margin-top:55px;font-size:55px;}
#specs {
	background:none;
	padding-top:5%;
}
#specs .container {width:75%;}
#specimg {
	background:none;
	min-height:inherit;
	margin-bottom:0;
	}
#specimgmobile {display:block;}
#specimgmobile img {width:100%;height:auto;}
#specimg ul {margin-top:1em;}
#specimg ul li {
	position:relative;
	display:block !important;
	left:auto !important;
	top:auto !important;
	line-height:2em;
	padding-left:2.5em;
}
#demovid {padding-top:25px;}
#customers {
	background:none;
	padding-top:40px;
}
#customers h2 {margin-bottom:50px;}
#ourstory .colhold,
#customers .col, #customers .col:last-child,
#contact .form, #contact .col {
	width:75%;
	margin:0 auto;
	float:none;
}
#ourstory .colhold {column-count:1;}
#education {
	background:none;
	width:75%;
	margin:40px auto 0;
	padding:0;
	min-height:inherit;
	text-align:left;
	font-style:italic;
}
#gbc {margin-bottom:70px;}
#contact .col {text-align:center;}

} @media only screen
and (max-width: 1050px) {
header li a span {display:none;}

} @media only screen
and (max-width: 959px) {
#hero p, #subhero p {
	font-size:44px;
	line-height:1.5em;
}
#saved-new {font-size:85px;}
.saved label {margin-top:42px;font-size:42px;}
#mrec .container {padding-top:40px;}
#mrec blockquote, #mrec .source {
	position:relative;
	top:auto;
	left:auto;
	right:auto;
	text-align:center;
	width:100%;
	display:block;
	line-height:1em;
}
#mrec, #mrec-inner {height:250px;}
#mrec blockquote {
	font-size:24px;
	padding-bottom:10px;
}
#mrec .source {
	font-size:16px;
}
#mrec img {
	left:20px;
	top:120px;
}

} @media only screen
and (max-width: 900px) {
header li.secondary {display:none;}

} @media only screen
and (max-width: 759px) {
header .container {text-align:center;}
header img {float:none;}
header ul {display:none;}
#hero {height:250px;}
#hero p, #subhero p {
	font-size:30px;
	line-height:1.5em;
}
#calculator .input {width:75%;}
#saved-new {font-size:58px;}
.saved label {margin-top:28px;font-size:28px;}
#mrec blockquote {font-size:18px;}
#mrec .source {font-size:14px;}
#gbc img {width:75%;height:auto;}
#subhero p, #introtext, #introimg, #elevator, #benefits li, #benefits li:nth-of-type(2n), #benefits li.long, #specs .container, #ourstory .col, #ourstory .col:nth-child(2), #customers .col, #customers .col:last-child, #contact .form, #contact .col, #education {width:90%;}

} @media only screen
and (max-width: 519px) {
#hero {background-position:bottom right;}
#introtext {width:90%;}
.btn a {
	background:none;
	padding:10px 20px;
}
#calculator .input {width:90%;}
#currentcost, #hubcost {font-size:42px;}
#saved-new {font-size:36px;}
.saved label {margin-top:18px;font-size:18px;}
#mrec img {top:130px;}
}