@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: inline-block;
	width: auto;
	margin-right: 1em;
	font-weight: 500;
}

nav#site ul li:first-of-type {
width: 20%;
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 a:link, nav#site ul li a:visited {
	color: inherit;
	text-decoration: none;
}


.past {
color: #676767}

nav#site ul li.current {
color: #50347d;
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(90%) rotate(45deg);
	transform: translateX(90%) 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;
	margin-left: 6.4em;
	font-family: "Freight-Sans-Pro", "Helvetica Neue",  Helvetica, Arial,  sans-serif;
	font-size: .76em;
	font-weight: 500 
}

body > header h1 img {
display: block;
margin-bottom: .33em
}

body > header > img {
	display: block;
	width: 55%;
	margin-left: 7%;
	margin-top: 2%;
	margin-bottom: 4%
}

body > header .description {
	background-color: rgb(187, 64, 76);
	width: 34%;
	position: absolute;
	top: 34%;
	right: 0; 
	color: #fff;
	padding: 1em 3%;
	line-height: 1.5;
	font-size: .9em
}

body > header .description h2 {
	font-size: 2em;
	padding: 0 10%;
	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-top: 1em;
	display: inline-block;
	font-weight: 500
}

/*features*/

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

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


#features ul.mocks {
width: 90%
}

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

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

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


#features h2 {
	font-size: 1.8em;
	margin-top: .6em;
}

#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
} 

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


/*get*/

#gets {
	background-color: #fff;
	background-image: url('../images/scroll2-cover.svg');
	background-size: 100%;
	background-positions: 0% -45%;
	background-repeat: no-repeat; 
}

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

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

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

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

#get form {
	margin: 2em auto;
	width: 60%
}



#get form > div {
	width: 30%;
	display: inline-block
}

#get form input {
	width: 100%;
	padding: .4em .2em;
	font-size: 1em
}


#get form > div:first-of-type {
	margin-right: 3%
}

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

#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: .6em .8em .5em .8em;
	font-family: "Freight-Sans-Pro", "Helvetica Neue",  Helvetica, Arial,  sans-serif;
	width: 90%;

}

form label {
  position: absolute;
  clip: rect(0px 0px 0px 0px);
}

#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: .9em;
	color: #999;
	background-color: #202020;
	width: 84%;
	padding: 3em 8% 0 8%;
	overflow: hidden;
	display: block
}


footer > section {
	width: 16%;
	float: left

}

footer > section:first-of-type {
	float: left;
	margin-left: 8%
}

footer > section:last-of-type {
	float: right;
	margin-right: 0%;
	margin-bottom: 3em
}

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: 50%;
	padding: 0 25%;
	margin-bottom: 2em;
	text-align: center
}