@charset "UTF-8";

body {
font: 400 16px/1.5 "Freight-Sans-Pro", "Helvetica Neue",  Helvetica, Arial,  sans-serif;}

body {
max-width: 1280px;
margin: 0 auto}

strong {
font-weight: 600}

em {
	font-style: italic
}

h1, h2, h3, h4, h5 {
	font-family: "freight-big-pro", "Big Caslon",  Palatino, Georgia, serif;
	font-weight: 300
}

h1, h2, h3, h4, h5, h6 {

}


a:link, a:visited {
	text-decoration: underline;
	color: inherit
}


body > header, nav#site, main {
	display: block
}

/*sections*/
nav#site {
	padding: .4em 0
}


nav#site ul li{
	display: none;
	width: auto;
	margin-right: 1em;
	font-weight: 500;
}


nav#site ul li:first-of-type {
display: inline-block;
width: 40%;
font-weight: 900;
background-image: url('../images/chrome/wdlogo.svg');
background-repeat: no-repeat;
background-size: 1em;
padding-left: 2.5em;
background-position: 1em 50%;
margin-left: 1em}

nav#site ul li:last-of-type {
display: none
}

nav#site ul li a:link, nav#site ul li a:visited {
	color: inherit;
	text-decoration: none;
}


.past {
color: #676767}

nav#site ul li.current {
color: #B73E19;
font-weight: 600;
position: relative
}

nav#site ul li.current:after {
	width: .8em;
	height: .8em;
	background-color: #fff;
	position: absolute;
	top: 100%;
	left: 2em;
	z-index: 10;
	left: 0;
	content: ' ';
	-webkit-transform: translateX(160%) rotate(45deg);
	transform: translateX(160%) rotate(45deg)
}


/*top level parts*/

main > section, body > header:first-of-type {
	widths: 80%;
	overflow: auto; /*expand vertically to contain floated descendents*/
	margin: 0 auto;
	outline: lime
}

/*header*/

body > header {
	background-color: rgb(204, 204, 204);	
	background-image: url('../images/opaque-dark-arrows.svg');
	background-repeat: repeat-x;
	background-size: 6.4em;
	background-position: 1em 1em;
	position: relative; /*creates positioning context*/

}

body > header h1 {
	margin-top: 2.8em;
	font-family: "Freight-Sans-Pro", "Helvetica Neue",  Helvetica, Arial,  sans-serif;
	font-size: .76em;
	font-weight: 500 
}

body > header h1 img {
display: block;
width: 90%;
margin: 0 auto .1em auto}

body > header > img {
	display: block;
	width: 100%;
	margin-bottom: 1em
}

body > header .event-tag {
display: inline-block;
font-size: 5vw;
width: 100%;
text-align: center}

body > header .description {
	background-color: rgb(187, 64, 76);
	width: 94%;
	color: #fff;
	padding: 1em 3%;
	line-height: 1.3;
	font-size: 1.5em
}

body > header .description h2 {
	font-size: 2em;
	padding: 0 15%;
	text-align: center;
	line-height: 1.05;
	margin-bottom: .3em
}

body > header .description a[href='#get'] {
	background-color: #79131F;
	border: solid 2px #fff;
	text-decoration: none;
	padding: .3em .7em;
	margin: 1em auto 0 auto;
	display: block;
	font-weight: 500;
	text-align: center;
	width: 80%
}

/*features*/

#features {
	background-color: rgb(48, 61, 70);
	color: #A0ADB7;
	text-align: center;
	padding-bottom: 2em
}

#features > ul.mocks li {
	width: 100%;
	text-align: center;
	display: inline-block;	
}

#features ul.mocks li img {
	width: 100%
}

#features h3 ul {
	width: 80%;
	margin: 1em auto
}

#features > ul.mocks li {display: none}

#features > ul.mocks li:nth-of-type(2) {display: inline-block;
width: 100%}

#features h3 li {
display: inline-block;
color:  #44D7CC;
padding: 0 .3em;
font-size: 1.5em;
	font-family: "freight-big-pro", "Big Caslon",  Palatino, Georgia, serif;
}


#features h2 {
	font-size: 1.6em;
	margin-top: .6em;
	width: 90%;
	margin: 1em auto;
	line-height: 1.1
}

#features h3 {
font-family: "Freight-Sans-Pro", "Helvetica Neue",  Helvetica, Arial,  sans-serif;
font-weight: 500;
font-size: 1.05em;
line-height: 1.2;
margin-top: .2em} 

#features ul {
	font-weight: 600;
	font-size: 1.1em;
	width: 70%;
	margin: 1em auto	
}

#features h3 + p {
	margin-top: 1em
}

.author-name {
	color:  #44D7CC;
	padding-right: .4em
}

.article-name {	
	font-weight: 400;
	color: #fff
}

#features p a:link, #features p a:visited {
	display: inline-block;
	border: solid 2px #fff;
	padding: .2em .5em;
	text-decoration: none;
	background-color: #151C21;
	font-weight: 500;
	color: #fff;
	font-size: 1.2em
} 

#features ul + p:last-child {
	margin: 2em 0;
}


/*get*/


#get {
	position: relative;
	overflow: hidden;
	background-color: #FFF1DE;
}

#get > img:first-of-type {
	width: 100%;
	margin-top: 0;
	display: block;
}

#get > h2:first-of-type {
	color: #242E36;
	font-size: 2em;
	margin-top: 1em;
	font-weight: 600;
	line-height: 1.1
}

#get > * {
	width: 80%;
	margin: 0 auto;
	font-weight: 200;
	text-align:center;
}

#get form {
	margin: 2em auto
}

#get > p, #get form {
	padding: 0 3%;
	line-height: 1.3;
	font-size: 1.3em
}

#get label {
	
  position: absolute !important;
  height: 1px; width: 1px; 
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

#get form input {
	width: 80%;
	padding: .6em 2.5%;
	font-size: .9em;
	margin-bottom: .5em
}

#get form input:first-of-type {
	
}

#get form div.sign {
	text-align: right;
	margin-right: 0%;
	margin-top: .5em;
	
}

#get form p {
}

#get form button, #get form input[type="submit"] {

	-webkit-appearance: none;
	appearance: none;
	border: none;
	color: #fff;
	background-color: #009A98;
	font-size: .9em;
	font-weight: 600;
	padding: .5em .8em;
	font-family: "Freight-Sans-Pro", "Helvetica Neue",  Helvetica, Arial,  sans-serif;
	width: 100%
}

#get form div{
	outlines: solid lime
}

#get form div.sign {
	/*text-align: left;
	margin-right: 0%;
	margin-top: .5em;
	width: 100%; */
	text-align: center
}


#get form button, #get form button[type="submit"] {

	-webkit-appearance: none;
	appearance: none;
	border: none;
	color: #fff;
	background-color: #8C0000;
	font-size: .9em;
	font-weight: 600;
	padding: .5em .8em;
	font-family: "Freight-Sans-Pro", "Helvetica Neue",  Helvetica, Arial,  sans-serif;
	width: 86%;
	padding: .6em 2.5%;
	font-size: .9em;
	margin-bottom: .5em
}

#get form button:disabled, #get form input[type="submit"]:disabled {
	opacity: .4;	
}

#get a:link, #signup a:visited {
	color: #8C0000
}

#get form button:enabled {
opacity: .9}

#get form button:enabled:hover {
opacity: 1}

#get > ul {
	margin-top: 2em;
	margin-bottom: 2em;
}

form br {
	display: none
}

/*footer*/

footer {
	font-size: 1.1em;
	color: #999;
	background-color: #202020;
	width: 84%;
	padding: 3em 8% 0 8%;
	overflow: hidden;
	display: block
}


footer > section {
	width: 66%;
	margin: 0 auto 2em auto 
}


footer h3 {
	font-variant: small-caps;
	text-transform: uppercase;
	font-size: inherit;
	font-weight: 500;
	color: #999;
	font-family: "Freight-Sans-Pro", "Helvetica Neue",  Helvetica, Arial,  sans-serif;
	
}

footer > p {
	clear: both;
	width: 100%;
	margin-bottom: 2em;
	text-align: center
}