/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
	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,
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		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, 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;
	}

/* #Basic Styles
================================================== */

	/* NOTE
	html is set to 62.5% so that all the REM measurements throughout Skeleton
	are based on 10px sizing. So basically 1.5rem = 15px :) */
	html { font-size: 62.5%; }
	body { font-size: 1.5em;font-weight: 400; font-family: 'DINPro-Regular', Helvetica, Arial, sans-serif; color: #222;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: 100%;}

/* #Typography
================================================== */

h1,
h2,
h3,
h4,
h5,
h6 { margin-top: 0; margin-bottom: 2rem; font-family:'DINPro-Bold', Helvetica, Arial, sans-serif;font-weight: 400; }
h1 { font-size: 3.5rem; line-height: 1.2;}
h2 { font-size: 3.0rem; line-height: 1.25;}
h3 { font-size: 2.5rem; line-height: 1.3;}
h4 { font-size: 2.0rem; line-height: 1.35; }
h5 { font-size: 1.8rem; line-height: 1.5; }
h6 { font-size: 1.5rem; line-height: 1.6; }

@media (min-width: 550px) {
	h1 { font-size: 5.0rem; }
	h2 { font-size: 3.5rem; }
	h3 { font-size: 3.3rem; }
	h4 { font-size: 2.2rem; }
	h5 { font-size: 2.0rem; }
	h6 { font-size: 1.8rem; }
}

	p {line-height:1.6;margin-bottom:20px;}
	
	em {font-style:italic;}
	strong {font-weight:600;}

	.entry ul,
	.entry ol {margin:0 0 20px 10px;}
	.entry ul {list-style:disc  inside;}
	.entry ol {list-style:decimal  inside;}
	.entry li {line-height:1.6;margin-bottom:1rem;}

	code { padding: .2rem .5rem; margin: 0 .2rem; font-size: 90%; white-space: nowrap; background: #F1F1F1; border: 1px solid #E1E1E1; border-radius: 4px; }
	pre > code { display: block; padding: 1rem 1.5rem; white-space: pre; }
	
	hr { margin-top: 3rem; margin-bottom: 3.5rem; border-width: 0; border-top: 1px solid #E1E1E1; }

/* #Forms
================================================== */

	input[type="email"],
	input[type="number"],
	input[type="search"],
	input[type="text"],
	input[type="tel"],
	input[type="url"],
	input[type="password"],
	textarea,
	select { height: 38px; padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ background-color: #fff; border: 1px solid #D1D1D1; border-radius: 4px; box-shadow: none; box-sizing: border-box; }

	/* Removes awkward default styles on some inputs for iOS */
	input[type="email"],
	input[type="number"],
	input[type="search"],
	input[type="text"],
	input[type="tel"],
	input[type="url"],
	input[type="password"],
	textarea,
	button,
	.button,
	input[type=button]
	input[type=submit] { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
	textarea { min-height: 65px; padding-top: 6px; padding-bottom: 6px; }
	input[type="email"]:focus,
	input[type="number"]:focus,
	input[type="search"]:focus,
	input[type="text"]:focus,
	input[type="tel"]:focus,
	input[type="url"]:focus,
	input[type="password"]:focus,
	textarea:focus,
	select:focus { border: 1px solid #222; outline: 0; }


/* #Images
================================================== */
	img {max-width: 100%;height: auto; }

/* #Misc
================================================== */
	a {color:#00adef;text-decoration:none;}
	a:hover {color:#342561;}
	a:focus {color:inherit;}
	a,
	a:focus {outline:none;}
			
	.add-bottom { margin-bottom: 20px; }
	.half-bottom { margin-bottom: 10px; }
	.double-bottom { margin-bottom: 40px; }
	.spacer {padding-top:60px;padding-bottom:60px;}

	.mt30 {margin-top:30px;}
	.mb30 {margin-bottom:30px;}
	.mt60 {margin-top:60px;}
	.mb60 {margin-bottom:60px;}

	.left {float:left;}
	.right {float:right;}
	.alignleft {display: inline;float: left;margin-right: 15px;}
	.alignright {display: inline;float: right;margin-left: 15px;}
	.aligncenter {clear: both;display: block;margin-left: auto;margin-right: auto;}
	.nofloat {float:none !important;}

	.white {color:#fff;}
	.blue {color:#00adef;}

	.bggrey {background:#F0F1F1;}
	.bgpurple {background:#342561;}

	.tal {text-align:left;}
	.tar {text-align:right;}
	.tac {text-align:center;}
	.cap {text-transform:uppercase;}

	.f-light {font-family:'DINPro-Regular', Helvetica, Arial, sans-serif;}

	.seperator {position:relative;padding-bottom:5px;}
	.seperator:after {content:"";position:absolute;bottom:-10px;left:0;width:30px;height:3px;background:#222;}
	.tac.seperator:after {left:50%;margin-left:-15px;}

	.frame-container {position: relative;padding-bottom: 56.25%;padding-top: 30px; height: 0; overflow: hidden;}
	.frame-container iframe,
	.frame-container object,
	.frame-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
	#typeform-cta { margin-bottom: 40px; font-size:20px; font-weight: 600;}