$font-size: 16px;
$line-height: 22px;

// Hover nav needs hover delay, show only one drop-down and hide it on click outside of the drop-down, make drop-downs of all positions accessible (current site hides one on the right), slider images aspect ratio, change input+label to just label absolutely-spanning all the li (parent), drop-down menu for touch, space bar doesn't scroll the page, solution for hiding a menu with radio checkbox: every checkbox has an invisible display: none reset button over it, but only the checked checkbox shows it – click on it and the form is reset, unchecking all checkboxes. forms for reset should be one for each level, no need for one per each sub nav, on touch, grey nav item bg remains forever, nav taps don't work under the slider, mobile nav: top-level items under opened items are not visible/accessible, mobile slider: too short

@font-face {
    font-family: 'wf_segoe-ui_light';
    src: url('latest-3.woff') format('woff');
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'wf_segoe-ui_normal';
    src: url('latest-2.woff') format('woff');
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'wf_segoe-ui_Semibold';
    src: url('latest.woff') format('woff');
    font-weight: normal;
    font-style: normal
}

@font-face {

    font-family: 'wf_icons_normal';
    src: url('icons.woff') format('woff');
    font-weight: normal;
    font-style: normal

}

@font-face {

    font-family: 'shell-icons';
    src: url('shell-icons.woff') format('woff');
    font-weight: normal;
    font-style: normal

}

body {
	
	background-color: #f2f2f2;
	font-family: wf_segoe-ui_normal, sans-serif;

}

.contain.wide {
	
	max-width: 100rem;

}

.button, button, a.button[href] {
	
	color: #000;
	background: transparent;
	font-family: 'wf_segoe-ui_normal', sans-serif;

}

h2 {
	
	font-family: wf_segoe-ui_light, sans-serif;
	font-weight: normal;
	
}

h3, h4 {
	
	font-family: wf_segoe-ui_Semibold, sans-serif;
	font-weight: normal;
	
}

header {
	
	z-index: 99999;
	background-color: #fff;
	margin-top: 0;
	margin-bottom: 0;
// 	padding-top: $line-height/2;
	border-bottom: 1px solid #e1e1e1;


}

header > .row, header > nav {
	
	padding: 0 1.4em;
	
}

.banner > .row {
	
	padding-top: 0;

}

.banner .slider {
	
	margin-bottom: 1.4rem;

}

.banner .slider-wrap {
	
	margin-bottom: 1.4rem;

}

.banner .slider-wrap .slider {
	
	margin-bottom: 0;

}

header form {
	
	position: relative;

}

header input {
	
	margin-bottom: 0;
	background: #fff;
	border-color: #969696;
	border-style: solid;
	padding-right: 2em;
	min-height: 2em;
	margin: .1em;

}

header input[type=submit], header input[type=submit]:hover {
	
	height: 100%;
	width: 2em;
	position: absolute;
	top: -.1em;
	right: 0;
	background: none;
	min-width: 0;
	border: none;
	min-height: 2em;
	font-family: 'shell-icons';
	text-align: center;
    bottom: 0;
    margin-bottom: 0;
    line-height: 1em;
	margin-right: .5em;

}

/*
nav input[type=reset] {
	
	position: absolute; 
	background: transparent;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border: 0;
	display: none;
    width: 100%;
    outline: none;
    height: 3rem;
    z-index: 2;
    padding: 0;
    cursor: pointer;
    		
}
*/

header .row > div, header a.logo, header form {
	
	vertical-align: middle;
	padding: 0;

}

header a.logo {
	
	margin-right: 3em;
	min-height: 0;

}

header a.logo img {
	
	display: block;

}

header a.shopping[href] {
	
	height: 1.5em; 
	line-height: 1.5em; 
	margin: 0 1.3em;
	width: 2em;
    font-family: 'shell-icons';
	color: #7f7f7f;
	text-align: center;
	
}

header a.shopping[href]:hover {

	text-decoration: none;
	
}

a[href] {
	
	text-decoration: none;
	
}

a[href]:hover {
	
	text-decoration: underline;
	color: #1570a6;
	
}

.slider-wrap:before {
	
	content: '';	
    display: inline-block;
    width: 0;
    padding-bottom: 35%;
	
}

.slider-wrap .slider {
	
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    
}

.slider div div {
	
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	
}

.slider a {
	
	text-shadow: 0 1px 1px #fff;
	display: inline-block;

}

.slider h2 {
	
	line-height: 1em;

}

.slider.dark h2, .slider.dark a[href] {
	
	color: #fff;
	text-shadow: 0 -1px 1px #000;

}

.slider > div {
	
	position: relative;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: auto 100%;
	text-align: center;

}

.slider-wrap .slider > div {
	
	padding: 2rem;

}

a.span-relative-parent:before {
	
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: '';
	z-index: 0;

}

a.span-relative-parent {
	
	z-index: 0;

}

a.span-relative-parent ~ a {
	
	z-index: 1;
	position: relative;
	padding: 0 .5em;

}

a.span-relative-parent ~ a:after {
	
	content: ' >';

}

.slider span.copy {
	
	position: absolute;
	bottom: 1.7em;
	display: block;
	left: 0;
	right: 0;
	text-align: center;

}

.slider > div:before {
	
	display: inline-block; 
	width: 0; 
	padding-bottom: 35%;
	content: '';
	
}

.slider-wrap .slider > div:before {

	padding: 0;
	height: 100%;
	vertical-align: bottom;

}

.slider-arrow {
	
	width: 1.3em;
	height: 2.8em;
	border-radius: .2rem;
	left: 0;
	padding: 0;
	line-height: 2.3em;
	text-align: center;
	background: rgba(0,0,0,.3);

}

.slider-arrow:hover {

	background: rgba(0,0,0,.5);
}

.slider-arrow:before {
	
	content: '<';
	font-size: 1.8em;

}

.slider-arrow.right {
	
	right: 0;
	
}

.slider-arrow.right:before {
	
	content: '>';
	
}

.slider-nav a {
	
	margin: .7rem .5rem;
	width: .5rem;
	height: .5rem;
	box-shadow: 0 0 .12rem #666;
	font-size: 0;

}

main .slider span.copy, main .slider span.copy h2, main .slider span.copy button {
	
	color: #fff;

}

.row.top-link-bar {
	
	background-color: #525252;
	margin: 0;
	padding: 0 8%;
	width: 100%;
	text-align: center;
	
}

.row.top-link-bar a[href] {

	color: #fff;
	padding-top: 1em;
	padding-bottom: .3em;
	transition: background-color .2s linear;
	margin-right: 0;
	text-align: center;

}

.row.top-link-bar a[href]:hover {

	background-color: #6b6b6b;
	text-decoration: none;

}

.row.top-link-bar img {
	

}

.mini-features {
	
	font-size: .75em;

}

.mini-features.row .row {
	
	margin-left: 0;
	width: 100%;
	padding-bottom: 0;
	margin: 0;
	
}

.aspect {
	
	padding-bottom: 0 !important;
	overflow: hidden;
	align-items: flex-end;
	
}

.mini-features h2 {
	
	background-color: #767676;
	margin: 0;
	color: #fff;
	text-align: center;
	padding: .7em 0;

}

.mini-features a {
	
	text-align: center;
	position: relative;
	padding: 0;
	background: rgba(0,0,0,.6);
	color: #fff;
	font-size: .8rem;
	z-index: 0;
	margin: 0;

}

.mini-features a:before {
	
	position: absolute;
	top: auto;
	display: block;
	left: 0;
	right: 0;
	bottom: 0;
	height: 700%;
	content: '';
	background: #fff;
	opacity: 0;
	transition: opacity .2s linear;

}

.mini-features a:after {
	
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: -9em;
	left: 0;
	background: rgba(0,0,0,.6);
	z-index: -1;

}

.mini-features a[href]:hover:before {
	
	opacity: .2;	

}

.mini-features a[href]:hover {
	
	text-decoration: none;
	color: #fff;

}

.mini-features a h3 {

	text-transform: uppercase;
	line-height: 1.5;
	margin-top: .5em;
	min-height: 0;

}

.mini-features a p {

	margin: 0 0 .7em 0;
	line-height: 1.2;
	padding: 0 1em;
	font-family: 'wf_segoe-ui_light', sans-serif;

}

.mini-features a img {
	
	padding-bottom: 0 !important;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	display: block;
	z-index: -1;

}

.recommended {
	
	background: #fff;
	padding: 1.8em 8%;
	
}

.recommended h2 {
	
	font-size: 1.4em;
	font-family: 'wf_segoe-ui_normal', sans-serif;
	
}

.recommended h2, .recommended a[href] {
	
	text-align: center;
	
}

.recommended a[href] {
	
	font-size: 1em;	
	font-family: 'wf_segoe-ui_Semibold', sans-serif;

}

.recommended a[href] img {
	
	padding-bottom: 0 !important;
	transition: opacity .2s linear;

}

.recommended a[href]:hover {
	
	text-decoration: none;
	color: inherit;

}

.recommended a[href]:hover img {
	
	opacity: .8;

}

.social {
	
	background-color: #767676;
	color: #fff;
	
}

.social h3 > * {
	
	display: inline-block;
	vertical-align: middle;
	line-height: .5;
	margin-left: .2em;

}

footer .columns.row, footer .columns.row + .row {
	
	padding: 0 1.4em;

} 

footer .columns.row {
	
	padding-top: 1.8em;
	
}

footer .columns a[href] {
	
	display: block;

}

footer .columns div:not(:first-child) > a[href], footer .footer-bottom a[href] {
	
	font-size: .9em;
	color: #1570a6;

}

footer .footer-bottom a[href] {
	
	margin: 0 .5em;
	
}

div.row.contain.footer-bottom {
	
	padding-top: 1em;
	
}

footer .footer-bottom span {
	
	font-size: .9em;
	
}

footer .footer-bottom nav {
	
	text-align: right;
	
}

footer .columns div:not(:first-child) > a[href]:hover, footer .footer-bottom a[href]:hover {
	
	color: #083047;

}

footer .columns h4 {
	
	margin-bottom: .3em;

}

footer .columns h4 ~ h4 {
	
	margin-top: .6em;

}

footer > div > div {
	
	padding-bottom: 0;
	margin-top: .8em;

}

.social h3 {
	
    font-family: 'wf_segoe-ui_normal';
	
}

footer .columns img {
	
	vertical-align: middle;
	display: inline-block;
	width: 1.5rem;
	margin: .25rem .7rem .25rem 0;

}

.backtotop[href] {
	
	display: none;

}

footer .footer-bottom span.icon-globe {
	
	font-family: wf_icons_normal;
	font-size: 1.6em;
	vertical-align: middle;
	margin-right: -.1em;
	display: inline-block;
	
}

.icon-globe:after {
	
	content:'●'
	
}

[for=nav-signin] + ul li {
	
	text-align: left;
	padding-top: 0;
	padding-bottom: 0;

}

[for=nav-signin] + ul {
	
	padding-right: 0 !important;

}

header nav a[href]:hover {
	
	color: inherit;
	
}

header nav {
	
	display: inline-block;
	
}

nav.drop {
	
	vertical-align: middle;

}

nav.drop ul li, nav.drop ul li b.sub {
	
	background: none;

}

@media screen and (max-width: 1024px) {

	header form {
		
		width: auto;

	}

}

@media screen and (max-width: 640px) {
	
	.row > * {
		
		padding-left: 0;
		padding-right: 0;

	}

	.mini-features a, .mini-features a:after {
		
		background: none;
		
	}

	.mini-features a > * {
		
		background: rgba(0,0,0,.6);
		
	}
	
	.mini-features a h3 {
		
		padding-top: 1rem;
		
	}

	.mini-features a p {
		
		padding-bottom: 0;
		margin: 0;
		
	}

	.mini-features a:before {
		
		content: '';
		display: inline-block;
		width: 0;
		padding-bottom: 88%;
		vertical-align: bottom;
		position: static;
		
	}
	
	.mini-features.row .row {
		
		padding: 0;
	
	}
	
	.mini-features a img {
		
		top: 0;
		bottom: auto;

	}
	
	.mini-features a h3 {
		
		margin: 0;

	}
	
	header {
		
		padding: 0;

	}
	
	header form {
		
		margin: 11px;

	}
	
	.contain {
		
		padding: 0;

	}
	
	.social {
		
		padding: 0 .5em;

	}

	header>.row:first-child div {
		
		text-align: left;
	
	}
	
/*
	header nav.contain {
		
		pointer-events: none;
		position: fixed;
		left: 11px;
		top: 11px;
		z-index: 9999;
		margin-left: -11px;
		margin-top: -11px;

	}
*/
	
	header > .row {
		
		padding: 0;
		
	}
	
	form input[type=submit] {
		
		margin-top: 0;
		
	}
	
	header a.logo[href] {
		
		text-align: right;
		display: block;
		margin: 11px;
		
	}

}
