@font-face {
	font-family: 'DinRounded';
	src: url('fonts/DINNextRoundedLTPro-Medium.eot');
	src: local('☺'), url('fonts/DINNextRoundedLTPro-Medium.woff') format('woff'), url('fonts/DINNextRoundedLTPro-Medium.ttf') format('truetype'), url('fonts/DINNextRoundedLTPro-Medium.svg') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'DinRounded';
	src: url('fonts/DINNextRoundedLTPro-Light.eot');
	src: local('☺'), url('fonts/DINNextRoundedLTPro-Light.woff') format('woff'), url('fonts/DINNextRoundedLTPro-Light.ttf') format('truetype'), url('fonts/DINNextRoundedLTPro-Light.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}


/* normalize.css - mostly taken from the HTML5 Boilerplate */
/* build WITHIN this stylesheet (changing some values, etc.) rather than BELOW it */

/* RESET - these don't need to be changed */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* correct IE font-size in ems, force vertical scrollbar in none-IE, prevent iOS text size adjust h5bp.com/g */
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
p, blockquote, q, pre, address, hr, code, samp, dl, ol, ul, form, table, fieldset, menu {
	margin: 0 0 1em 0; padding: 0; font-size: 16px; line-height: 1.75em; } /*change margins? */
li { margin-left: 1.5em; } /* change margins? */
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; *overflow: visible; }
table button, table input { *overflow: auto; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
body, div, object, iframe, header, footer, section, nav, aside, article, figure,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, li,
form, fieldset, textarea, input { 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; /* these settings work in FF, Webkit, and IE8+ */ }
/* end RESET section - below, contains some reset styles but work in this area */

/* body and general typography, general form, general table styles */
body { margin: 0; background: #fff; font-size: 16px; line-height: 1.75em; font-weight: 400; }
body, button, input, select, textarea { font-family: Roboto, Arial, sans-serif; color: #222; }

h1,h2,h3 { font-weight: bold; font-family: DinRounded, sans-serif; letter-spacing: -.025em; widows: 2; }
a { color: #0086C4; text-decoration: none; }
a:visited { color: #0086C4;}
a:hover { color: #0086C4;}
a:focus { outline: thin dotted; }
a:link { -webkit-tap-highlight-color: #FF5E99; }
/* improve readability when focused & hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; color: #0086C4;}
b, strong { font-weight: bold; color: #222; }
blockquote { margin: 0 24px 1.5em 24px; } /*aaron edited*/
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
ul, ol { }
nav ul, nav ol, nav li { list-style: none; list-style-image: none; margin: 0; padding: 0; }

/* typography styles I don't often use and can be deleted if I don't need them */
abbr[title] { border-bottom: 1px dotted; }
dfn { font-style: italic; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
dd { margin: 0 0 0 40px; }
/* end not often used typography */

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* selection styles */
::selection {background: #c80000; color: #ffffff; text-shadow: none; }
::-moz-selection {background: #c80000; color: #ffffff; text-shadow: none; }
img::selection {background: transparent;}
img::-moz-selection {background: transparent;}

/* LAYOUT, more specific styles */

/* default Wordpress classes added by the editor */
.alignright { float: right; display: inline; margin: 0 0 12px 12px; }
.alignleft { float: left; display: inline; margin: 0 12px 12px 0; }
.center { display: block; margin: 0 auto; }

/* "Grid" stuff - inspired by Less Framework and tweaked into oblivion
 * There are three media query layouts: 768px, 480px, 320px
 * Use these as desired, delete others
 * ------------------------------------- */

.clear { clear: both; }
.contain { width: 92%; max-width: 1200px; margin-left: auto; margin-right: auto; }

header { margin: 32px auto 0px; padding: 0; position: relative; }
#logo { font-size: 30px; }
a#logo { text-decoration: none; }
.icon-shareflow-logo-icon { color: #0086C4; }
.icon-shareflow-logo-word { color: #202023; position: relative; top: -3px;  }

nav { font-family: Arial, sans-serif; position: absolute; right:0; text-align: right; top: -2px; right: 1px; font-size: 17px; }
nav a { color: #aaa; }
nav a:hover { color: #0086C4 !important; }
nav a#signinbutt { background: #1f2d33; color: #fff !important; padding: 8px 10px 5px 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-left: 20px; }
nav a#signin:hover { background: #202023; }

nav ul { list-style: none; color: #999; margin: 0 0 0 0; padding: 0; }
nav li { display: inline-block; font-size: 17px; margin: 0 0 0 20px; padding: 0; }

nav.nav-help a { color: #0086C4; }

h1 { font-size: 3em; line-height: 1.1em; margin: 60px 0 .5em 0; color: #222; text-align: center; }
h2 { font-size: 1.5em; line-height: 1.2em; margin: 1em 0 .5em 0; text-align: left; }
h3 { font-size: 1.15em; line-height: 1.2em; margin: 0 .5em .5em 0; }
p { font-size: 1.15em; color: #666; line-height: 1.5em;  }


/* TERMS */
.nav-terms { list-style: none; }

#screenshot { width: 100%; margin: 0 auto; max-width: 1200px; }
#screenshot img { width: 100% !important; max-width: 1200px; }

/* #signup { width: 540px; background: #fff; padding: 40px 40px 30px 40px; font-size: 1em; margin: 40px auto 30px auto; border: 1px solid #ccc; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 2px 2px 2px #eee; -webkit-box-shadow: 2px 2px 2px #eee; box-shadow: 2px 2px 2px #eee;} */
#signup { width: auto; min-height: 420px; font-size: 1em; margin: 36px auto 60px auto; }
#signup h1 { display: block; width: auto; font-weight: bold; color: #222; text-align: center !important; font-size: 2.5em; line-height: 1.1em; margin: 0 0 .5em 0; }
#signup h2 { display: block; width: auto; font-weight: bold; color: #222; text-align: center !important; font-size: 2em; line-height: 1.1em; margin: 0 0 .5em 0; }
#signup h3 { font-weight: bold; color: #222; text-align: center; font-size: 1.5em; margin: 1em 0 0 0; }
#signup h4 { font-family: Arial, sans-serif; color: 222; margin: 1em 0 0 0; text-align: center; }
#signup form { margin: 25px 0 0 0; }
/* #signup label { font-size: 1.25em; color: #999; display: block; float: left; text-align: right; width: 100px; margin: 13px 0 0 0; font-weight: normal; } */
#signup label { display: none; }
#signup input[type='text'],#signup input[type='password'],#signup input[type='email'] { display: block; width: 250px; font-size: 1em; padding: 7px; margin: 10px auto 5px auto; text-align: left; border: 1px solid #ccc; -webkit-box-shadow: inset 2px 2px 2px 0px #f7fbfc; -moz-box-shadow: inset 2px 2px 2px 0px #f7fbfc; box-shadow: inset 2px 2px 2px 0px #f7fbfc; }
#signup select { width: 250px; display: block; font-size: 1em; height: 32px; padding: 7px; margin: 10px auto 5px auto; text-align: left; border: 1px solid #ccc; }
#signup span.tip { display: block; color: #999; font-size: .9em; }
#signup p { text-align: center; max-width: 400px; font-size: 1em; line-height: 1.5em; color: #666; margin: 0 auto 1em auto; }
#signup p.tip { text-align: left; width: 250px; font-size: .9em; color: #999; line-height: 1.5em; margin: 0em auto .25em auto; }
#signup a { color: #0086C4; text-decoration: none; }
#signup a:hover { text-decoration: underline; }
#signup input[type='submit'] { margin: 10px auto 0 auto; display: block; width: 250px; background: #0086C4; font-size: 1.2em; font-weight: normal; color: #fff; padding: 15px 25px 15px 25px; border: none; webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
#signup input[type='submit']:hover { background: #008bcc; }
#signup label.rememberme { width: 250px; font-size: .9em; display: block; color: #999; margin: 0 auto .25em auto; text-align: left; }
#signup input[type='checkbox'] { width: auto; position: relative; top: -1px; margin: 0px 3px 0 0; border: 1px solid #333; }

#signup p.error { width: 250px; text-align: left; display: block; font-size: .85em !important; color: #c00 !important; font-weight: normal; margin: 0 auto .25em auto !important; }

#signup p.intro { text-align: center; color: #0086C4; border-bottom: 1px solid #eee; width: 100% !important; padding: 0 20px 20px; margin-bottom: 20px; line-height: 24px; }
#signup.contain.home { padding-bottom: 20px; }

#signup-help { width: 400px; margin: 0px auto; }
#signup-help h3 { font-weight: bold; color: #333; text-align: center; font-size: 1.5em; margin: 1em 0 .1em 0; }
#signup-help p { text-align: center; font-size: 1em; color: #444; margin: 0 0 1em 0; }
#signup p.help { font-size: .9em; margin: 30px auto 2em auto; text-align: center; }
#signup-help a { color: #0086C4; text-decoration: none; }

.signup-button { text-align: center; margin: 40px 0 20px 0 }
.signup-button a { background: #0086C4; font-size: 1.2em; color: #fff; padding: 15px 25px 15px 25px; border: none; webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.signup-button a:hover { background: #008bcc; box-shadow: none; }

.share { width: 320px; margin: 0 auto 40px auto; }
div.tw-follow { display: inline-block; width: 225px; margin: 10px 0 0 0px; text-align: center; }
div.tw-share { display: inline-block; width: 90px; margin: 10px 0 0 0px; text-align: center; }

footer { border-top: 1px solid #eee; padding: 30px 0 0 0; margin: 0 auto 50px auto; }
footer .col-1 { width: 20%; float: left; }
footer h6 { font-family: Arial, sans-serif; font-size: .9em; margin: 0 0 0 0; color: #222; }
footer ul { list-style: none; font-size: .9em; padding: 0; margin: 0 0 2em 0; }
footer li { padding: 0; margin: 0; }
footer p { font-size: 1em; color: #444; margin: 0 0 2em 0; }

footer .supporters img { max-width: 120px; margin: 7px 0 0 0 }

form { }
form input[type='text'],form input[type='email'], form input[type='password'] { padding: 7px 6px 4px; border: 1px solid #DDD;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
form textarea { padding: 7px 6px 4px; border: 1px solid #DDD; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
form .input-group { display: inline-block; }

#top { height: 550px; border-bottom: 0px solid #eee; margin: 0 4%; padding-top: 0px; }
#top.f1 { background: url('../img/f1.jpg') 5% 0 no-repeat; }
#top.m1 { background: url('../img/m1.jpg') 5% 0 no-repeat; }
#top.m2 { background: url('../img/m2.jpg') 5% 0 no-repeat; }
#top p { text-align: center; color: #aaa; }
#top h1 { margin-top: 120px; }

#oops { height: 550px; }

.more { padding: 0 0 60px 0; margin: 0 4%; border-bottom: 0px solid #eee; }
.more h1 { margin: 60px 0 .25em 0; }
.more h2 { margin: 0 0 .25em 0; }
.more p { color: #888; }
.more p.lead { color: #aaa; }
.more img { width: 960px; margin: 0 auto; height: auto; }

.subs { height: 150px; margin: 90px auto 0 auto; text-align: center; }
.subs h2 { margin: 0 0 .25em 0; }
.subs p { color: #888; }
.subs label { display: none; }
.subs form { width: 536px; margin: 0 auto; }
.subs input { float: left; margin: 0 5px; }
.subs input[type='text'],.subs input[type='email'] { width: 200px; background: #fff; }
.subs input[type='submit'] { background: #0086C4; font-size: 1em; color: #fff; padding: 7px 15px 6px 15px; border: none; webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.subs input[type='submit']:hover { background: #008bcc; }

#quick-tour { margin-top: 50px; }
#quick-tour h3 { text-align: center; color: #999; font-weight: normal; }

.col-sidebar { width: 20%; float: left; }
.col-sidebar ul { list-style: none; font-size: .85em; margin: 0; padding: 0; }
.col-sidebar li { margin: 0 0 .5em 0; padding: 0; }
.col-sidebar li.sel a { font-weight: bold; color: #333; }
.col-main { width: 80%; float: right; }
.col-main h1 { font-size: 2.5em; line-height: 1.1em; font-weight: bold; text-align: left; margin: 0 0 .5em 0; color: #333; }
.col-main h2 { font-family: Arial, sans-serif; letter-spacing: 0; width: auto; font-size: 1.125em; line-height: 1.5em; font-weight: bold; text-align: left; margin: 1em 0 .5em 0; color: #333; }
.col-main h3 { font-family: Arial, sans-serif; letter-spacing: 0; width: auto; font-size: .85em; line-height: 1.5em; font-weight: bold; text-align: left; margin: 0 0 0 0; color: #333; }
.col-main h3 em { font-style: normal; color: #999; margin-left: .5em }
.col-main p { font-size: .85em; color: #666; line-height: 1.5em; }
.col-main ul { font-size: .85em; color: #666; line-height: 1.5em; }
.col-main li { margin: 0 0 0 1.25em; padding: 0; }
.col-main .question { margin: 1.5em 0; }
.col-main .question input[type='text'],.col-main .question textarea { width: 100%; }
.col-main .question input[type='text'],.col-main .question textarea,.col-main .question input[type='file'],.col-main .question select { margin-top: .5em; }
.col-main .question input[type='text'],.col-main .question textarea { font-size: 1em; padding-top: 4px; }
.col-main .question.submit { margin-top: 2em; }
.col-main .question.submit input[type='submit'] { background: #0086C4; font-size: 1em; color: #fff; padding: 7px 15px 6px 15px; border: none; webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.col-main .question.submit input[type='submit']:hover { background: #008bcc; }

.help-request { border: 1px solid #ddd; padding: 50px; margin-top: 50px; float: none; webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

.feature-block { width: 80%; max-width: 1200px; margin: 50px auto; }
.feature-text, .feature-image { width: 40%; margin: 0 5%; float: left; }
.feature-image { text-align: center; }
.feature-image i { font-size: 80px; color: #eee;  }
.alt .feature-text { float: right; }
.feature-block h4 { margin-bottom: 10px; font-size: 18px;  }


.message { max-width: 300px; text-align: center; margin: 0 auto 2em auto; }
.message ul { margin: 0; padding: 0; }
.message ul li { list-style: none; font-size: .9em; color: #666; line-height: 1.4em; margin: 0; padding: 0; }

.trans-ease {
	-webkit-transition: all .15s ease-in-out;
  -moz-transition: all .15s ease-in-out;
  -ms-transition: all .15s ease-in-out;
  -o-transition: all .15s ease-in-out;
  transition: all .15s ease-in-out;
}


/* Responsive */

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

 h2 { width: 90%; }
 form .input-group { display: block; text-align: center; }
 form .input-group label { display: block !important; padding-bottom: 0 !important; }
 form input { margin-bottom: 10px; width: 80%; }
 form input[type=submit] { margin-top: 5px; }
 
 
}

@media only screen and (max-width: 500px) {
	
	#logo { font-size: 25px; }
	nav { font-size: 15px; }
	header { margin-bottom: 30px; margin-top: 18px; }
	h1 { font-size: 30px; }
	h2 { font-size: 16px; }
	.feature-text, .feature-image, .col-footer { width: 100%; margin: 0; float: none; }
	
	#signin { border-left: none; border-right:none; border-bottom: none; -webkit-box-shadow: none; box-shadow: none; margin-top: 30px; }
	#signin a.help { border-top: none; }
	
	#signin p.intro { line-height: 20px; padding: 0 20px 20px;  }
	
	#top { margin: 0; }
	
	footer .col-1 { width: 100%; float: none; }

	.help-request { width: 100%; border: 0; padding: 0; }
}





/* end LAYOUT, more specific styles */

/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   Remember to delete the ones you're not using
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }