/* main ad style */

/* reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, picture {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* layout */

body {
	/*text-align: justify */
	}

.part {
	width: 98%;
	padding: 2% 1% 0 1%;
	display: inline-block;
	vertical-align: top;
	text-align: left;
	float: left;
/*	height: 300px;*/
	overflow: hidden;
	position: relative
}


/* wd */

#directions {
	background-color: #45b9ad;
	color: #fff;
	background-image: url('wd/arrow-repeating-aqua.svg');
	background-size: 100%;
/*	box-sizing: border-box;*/
	background-position: .5em 0;
	background-repeat: repeat-y

}

#directions h1 {

}

#directions h1 {
	font-family: "freight-big-pro", "Times New Roman",  Helvetica, Arial,  sans-serif;
	text-align: right;
	font-size: 2em;
	font-size: 15vw;
	line-height: .6;
	margin: .6em auto 0 auto;
	width: 96%;
	font-weight: 900
}

#directions h1 span {
	font-size: .7em 
}

#directions h2 {
	font-family: "Freight-Sans-Pro", "Helvetica Neue",  Helvetica, Arial,  sans-serif;
	width: 75%;
	margin-left: 0%;
	margin-right: 0;
	margin-top: -.8em;
	font-size: 4.6vw;
	font-weight: 400;
	text-align: right	
}

#directions p {
		font-family: "Freight-Sans-Pro", "Helvetica Neue",  Helvetica, Arial,  sans-serif;
		width: 80%;
	text-align: center;
	font-size: 8vw;
	line-height: 1;
	margin: 3em auto 1.5em auto
}


/* code */

#code {
	background-image: url('code/header-gradient.jpg');
	background-repeat: no-repeat;
	color: #fff;
	background-position: center center
}

#code h1 {
	margin: .1em auto 0 auto;
	font-size: 9vw;
	background: transparent;
	color: #fff;
	font-family: "Freight-Micro-Pro", "Helvetica Neue",  Helvetica, Arial,  sans-serif;
	text-transform: lowercase;
	text-align: center;
	font-weight: 100
}

#code h1:after {
content: " ";
width: 5px;
height: 5px;
width: .5vw;
height: .5vw;
display: inline-block;
background-color: #DF003F;
margin-top: .5%;
margin-left: .5%}

#code h2 {
	font-size: 1.8vw;
	font-family:  "Freight-Sans-Pro", "Helvetica Neue",  Helvetica, Arial,  sans-serif;
		text-align: center
}

#code h3 {
	font-size: 1.5vw;
		font-family:  "Freight-Sans-Pro", "Helvetica Neue",  Helvetica, Arial,  sans-serif;
		text-align: center;
		font-weight: 900
}

#code p  {
width: 80%;
margin: 1em auto;
font-size: 1.6vw;
		font-family:  "Freight-Sans-Pro", "Helvetica Neue",  Helvetica, Arial,  sans-serif;
		text-align: center}

/* other */

.overlaylink {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;}

a:link, a:visited {
	display: inline-block;
	background: transparent;
	border: solid white 1px;
	border-radius: .5em;
	font-size: 4.6vw;
	font-family:  "Freight-Sans-Pro", "Helvetica Neue",  Helvetica, Arial,  sans-serif;
	text-align: center;
	color: white;
	text-decoration: none;
	padding: .5em .7em;
	transition: background .3s
}

a:hover {
	background-color: rgba(255, 255, 255, .2)
}

p > a:first-of-type {
float: left;}

p > a:last-of-type {
float: right;}

#directions p:last-of-type {
	margin: 1em auto 2em auto;
	padding-bottom: .5em
}