@charset "UTF-8";
/* CSS Document */
nav.header {
	width: 100%; /* 880px / 1180px (1200-20px margin) */
	height: 65px;
	float: right;
	text-align: left;
	position:absolute;
	right: 0;
	top: 26px;
	
}
.header ul {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	width: auto;
	float: right;
	
}
.header li a {
	display: block;
	padding: 0;
	text-decoration: none;
	color: #FFF;
	text-transform: uppercase;
	font-size: .95em;
	
}
.header li a:hover {
	/*background-color: #B5B5B5;*/
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #c62127;
}
/*NEW*/
.header li {
	padding: 1em;
	
}
.header li:last-child {
/*	padding-right: 0;*/
}
/*END NEW*/
header.home a.home, header.products a.products, header.support a.support, header.wtob a.wtob, header.webstore a.webstore, header.contact a.contact {
	/*color: #8D8D8D; dark gray*/
	/*color: #c62127; dark red*/
	border-bottom-width: 2px;
	border-bottom-style: solid;
}
.header .menu {
	clear: both;
	max-height: 0;
	transition: max-height .2s ease-out;
}
.header .menu-icon {
	cursor: pointer;
	display: inline-block;
	float: right;
	padding: 28px 20px;
	position: relative;
	user-select: none;
}
.header .menu-icon .navicon {
	background: #FFF;
	display: block;
	height: 2px;
	position: relative;
	transition: background .2s ease-out;
	width: 30px;
	margin: 0 -10px 0 0;
}
.header .menu-icon .navicon:before, .header .menu-icon .navicon:after {
	background: #FFF;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	transition: all .2s ease-out;
	width: 100%;
}
.header .menu-icon .navicon:before {
	top: 5px;
}
.header .menu-icon .navicon:after {
	top: -5px;
}
.header .menu-btn {
	display: none;
}
.header .menu-btn:checked ~ .menu {
	max-height: 450px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
	background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
	transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
	transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
	top: 0;
}

/*Change from 750px to your breakpoint to show hamburger icon*/
@media only screen and (min-width: 750px) {
.header li {
	float: left;
}
.header .menu {
	clear: none;
	float: right;
	max-height: none;
}
.header .menu-icon {
	display: none;
}
}

@media only screen and (max-width: 750px) {
nav.header {
	width: 100%;
}
header.home a.home, header.products a.products, header.support a.support, header.wtob a.wtob, header.webstore a.webstore, header.contact a.contact {
	/*color: #8D8D8D; dark gray*/
	/*color: #c62127; dark red*/
	border-bottom-width: 0px;
	background-color: #171717;
}
.header li a {
	background-color: #000;
	opacity: 0.95;
}
.header li a {
	padding: 20px 30px;
}
.header li a:hover {
	background-color: #171717;
	border-bottom-width: 0px;
	border-bottom-style: solid;
}
.header li {
	padding: 0;
	border-bottom: 1px solid #FFF;
}
.header li:last-child {
	border-bottom: 0px solid #FFF;
}
.header ul li {
	color: #000;
}
.header ul {
	width: 100%;
}
}

@media only screen and (max-width: 480px) {
nav.header {
	width: 100%;
}
}