/*!
Theme Name: _DoTheThing
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: _dothething
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

_DoTheThing is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Normalize # Typography # Elements # Forms # Navigation ## Links ## Menus # Accessibility # Alignments # Clearings # Widgets # Content ## Posts and pages ## Comments # Infinite scroll # Media ## Captions ## Galleries --------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; }

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; }

audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }

audio:not([controls]) { display: none; height: 0; }

[hidden], template { display: none; }

a { background-color: transparent; }

a:active, a:hover { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

dfn { font-style: italic; }

h1 { font-size: 2em; }

mark { background: #ff0; color: #000; }

small { font-size: 80%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

img { border: 0; }

svg:not(:root) { overflow: hidden; }

hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; }

pre { overflow: auto; }

code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }

button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }

button { overflow: visible; }

button, select { text-transform: none; }

button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }

button[disabled], html input[disabled] { cursor: default; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

input { line-height: normal; }

input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; }

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

fieldset { border: 1px solid #c0c0c0; padding: 0.35em 0.625em 0.75em; }

legend { border: 0; padding: 0; }

textarea { overflow: auto; }

optgroup { font-weight: bold; }

table { border-collapse: collapse; border-spacing: 0; }

td, th { padding: 0; }

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body, button, input, select, optgroup, textarea { color: #404040; font-family: sans-serif; /* 	font-size: 16px; font-size: 1rem; */ line-height: 1.5; }

h1, h2, h3, h4, h5, h6 { clear: both; }

dfn, cite, em, i { font-style: italic; }

pre { background: #eee; font-family: "Courier 10 Pitch", Courier, monospace; font-size: 15px; font-size: 0.9375rem; line-height: 1.6; max-width: 100%; overflow: auto; padding: 1.6em; }

code, kbd, tt, var { font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; font-size: 15px; font-size: 0.9375rem; }

abbr, acronym { border-bottom: 1px dotted #666; cursor: help; }

mark, ins { background: #fff9c0; text-decoration: none; }

big { font-size: 125%; }

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html { -webkit-box-sizing: border-box; box-sizing: border-box; }

*, *:before, *:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ -webkit-box-sizing: inherit; box-sizing: inherit; }

hr { background-color: #ccc; border: 0; height: 1px; }

ul { list-style: disc; }

ol { list-style: decimal; }

dt { font-weight: bold; }

img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ }

figure { /* Extra wide images within figure tags don't overflow the content area. */ }

table { width: 100%; }

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button, input[type="button"], input[type="reset"], input[type="submit"] { border: 1px solid; border-color: #ccc #ccc #bbb; border-radius: 3px; background: #e6e6e6; color: rgba(0, 0, 0, 0.8); font-size: 12px; font-size: 0.75rem; line-height: 1; }

button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { border-color: #ccc #bbb #aaa; }

button:active, button:focus, input[type="button"]:active, input[type="button"]:focus, input[type="reset"]:active, input[type="reset"]:focus, input[type="submit"]:active, input[type="submit"]:focus { border-color: #aaa #bbb #bbb; }

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea { color: #666; border: 1px solid #ccc; border-radius: 3px; padding: 3px; }

input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus { color: #111; }

select { border: 1px solid #ccc; }

textarea { width: 100%; }

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a { color: royalblue; }

a:visited { color: purple; }

a:hover, a:focus, a:active { color: midnightblue; }

a:focus { outline: thin dotted; }

a:hover, a:active { outline: 0; }

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.main-navigation { display: block; }

.main-navigation ul { display: none; list-style: none; margin: 0; padding-left: 0; }

.main-navigation ul ul { -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); float: left; position: absolute; top: 100%; left: -999em; z-index: 99999; }

.main-navigation ul ul ul { left: -999em; top: 0; }

.main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul { left: 100%; }

.main-navigation ul ul a { width: 200px; }

.main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul { left: auto; }

.main-navigation li { float: left; position: relative; }

.main-navigation a { display: block; text-decoration: none; }

/* Small menu. */
.menu-toggle, .main-navigation.toggled ul { display: block; }

@media screen and (min-width: 37.5em) { .menu-toggle { display: none; }
  .main-navigation ul { display: block; } }

.site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation { overflow: hidden; }

.comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { float: left; width: 50%; }

.comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { float: right; text-align: right; width: 50%; }

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ }

.screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; -webkit-clip-path: none; clip-path: none; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ }

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus { outline: 0; }

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft { display: inline; float: left; margin-right: 1.5em; }

.alignright { display: inline; float: right; margin-left: 1.5em; }

.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; }

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before, .clear:after, .entry-content:before, .entry-content:after, .comment-content:before, .comment-content:after, .site-header:before, .site-header:after, .site-content:before, .site-content:after, .site-footer:before, .site-footer:after { content: ""; display: table; table-layout: fixed; }

.clear:after, .entry-content:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after { clear: both; }

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget { margin: 0 0 1.5em; /* Make sure select elements fit in widgets. */ }

.widget select { max-width: 100%; }

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky { display: block; }

.hentry { margin: 0 0 1.5em; }

.updated:not(.published) { display: none; }

.page-content, .entry-content, .entry-summary { margin: 1.5em 0 0; }

.page-links { clear: both; margin: 0 0 1.5em; }

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a { word-wrap: break-word; }

.bypostauthor { display: block; }

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation, .infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */ display: none; }

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer { display: block; }

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; }

/* Make sure embeds and iframes fit their containers. */
embed, iframe, object { max-width: 100%; }

/* Make sure logo link wraps around logo image. */
.custom-logo-link { display: inline-block; }

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption { margin-bottom: 1.5em; max-width: 100%; }

.wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; }

.wp-caption .wp-caption-text { margin: 0.8075em 0; }

.wp-caption-text { text-align: center; }

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery { margin-bottom: 1.5em; }

.gallery-item { display: inline-block; text-align: center; vertical-align: top; width: 100%; }

.gallery-columns-2 .gallery-item { max-width: 50%; }

.gallery-columns-3 .gallery-item { max-width: 33.33%; }

.gallery-columns-4 .gallery-item { max-width: 25%; }

.gallery-columns-5 .gallery-item { max-width: 20%; }

.gallery-columns-6 .gallery-item { max-width: 16.66%; }

.gallery-columns-7 .gallery-item { max-width: 14.28%; }

.gallery-columns-8 .gallery-item { max-width: 12.5%; }

.gallery-columns-9 .gallery-item { max-width: 11.11%; }

.gallery-caption { display: block; }

/** JILL'S STYLES HELLO **/
noscript { position: relative; z-index: 2000; font-size: 30px; background: #e93e47; width: 100%; display: block; padding: 60px 20px; }

@font-face { font-family: "Brandon_reg"; src: url("fonts/BrandonGrotesque-Regular.eot?#iefix") format("embedded-opentype"), url("fonts/BrandonGrotesque-Regular.woff") format("woff"), url("fonts/BrandonGrotesque-Regular.ttf") format("truetype"), url("fonts/BrandonGrotesque-Regular.svg#BrandonGrotesque-Regular") format("svg"); font-weight: normal; font-style: normal; }

@font-face { font-family: "Brandon_black"; src: url("fonts/BrandonGrotesque-Black.eot?#iefix") format("embedded-opentype"), url("fonts/BrandonGrotesque-Black.woff") format("woff"), url("fonts/BrandonGrotesque-Black.ttf") format("truetype"), url("fonts/BrandonGrotesque-Black.svg#BrandonGrotesque-Black") format("svg"); font-weight: normal; font-style: normal; }

@font-face { font-family: "Brandon_med"; src: url("fonts/BrandonGrotesque-Medium.eot?#iefix") format("embedded-opentype"), url("fonts/BrandonGrotesque-Medium.woff") format("woff"), url("fonts/BrandonGrotesque-Medium.ttf") format("truetype"), url("fonts/BrandonGrotesque-Medium.svg#BrandonGrotesque-Medium") format("svg"); font-weight: normal; font-style: normal; }

@font-face { font-family: "Brandon_ital"; src: url("fonts/BrandonGrotesque-RegularItalic.eot?#iefix") format("embedded-opentype"), url("fonts/BrandonGrotesque-RegularItalic.woff") format("woff"), url("fonts/BrandonGrotesque-RegularItalic.ttf") format("truetype"), url("fonts/BrandonGrotesque-RegularItalic.svg#BrandonGrotesque-RegularItalic") format("svg"); font-weight: normal; font-style: normal; }

@font-face { font-family: "Brandon_bold"; src: url("fonts/BrandonGrotesque-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/BrandonGrotesque-Bold.woff") format("woff"), url("fonts/BrandonGrotesque-Bold.ttf") format("truetype"), url("fonts/BrandonGrotesque-Bold.svg#BrandonGrotesque-Bold") format("svg"); font-weight: normal; font-style: normal; }

body, input, select, textarea, .extramsg, #signup input[type="text"] { font-family: "Brandon_reg"; font-weight: normal; }

.bran_ital, .turnoffdistractions-ital { font-family: "Brandon_ital"; font-weight: normal; }

.brand_medium, .question, .subtitle, .main-navigation ul > li > a, #pinkcircle .whitecircle, .lastpageheading, .radiotext, .money h3, #signup h3, #signup #fb button { font-family: "Brandon_med"; font-weight: normal; }

.brand_bold, .thisisthetask, #clock-startwith, #clock-expired, .site-footer h3, h4.introheading, #signup input[type=submit] { font-family: "Brandon_bold"; font-weight: normal; }

.brand_black, h1, h2, h3, h4, h5, h6, button, .footer-widgets .widget input[type="text"], input[type="submit"], #clocktime, .startbutton, #pinkcircle .whitecircle div { font-family: "Brandon_black"; font-weight: normal; }

html, body { height: 100%; width: 100%; }

*, h1, h2, h3, h4, h5, p { margin: 0; padding: 0; }

body { background: #4ebce8; color: white; /* 	background: url('/wp-content/themes/_dothething/images/Page10-768px-1.jpg') no-repeat; background-position: center top; opacity: 0.5; */ /*  	background: url('/wp-content/themes/_dothething/images/Page9-full-768.jpeg') no-repeat; background-position: center top; opacity: 0.5; */ /* 	background: url('/wp-content/themes/_dothething/images/5.jpg') no-repeat;
opacity: 0.5;
*/ /* 	background: url('/wp-content/themes/_dothething/images/goodfoot.png') no-repeat; background-position: -106px -39px; opacity: 0.5; background-size: cover; */ /*  background: url('/wp-content/themes/_dothething/images/Page10-768px-1.jpg') no-repeat; background-position: center top; opacity: 0.5; */ /*  background: url('/wp-content/themes/_dothething/images/explainer1.png') no-repeat; background-position: center 557px; opacity: 1; */ }

a, a:link, a:focus, a:visited, a:hover { color: white; }

a.nounderline { text-decoration: none; }

.clear { clear: both; }

@media screen and (min-width: 600px) { .mobile { display: none; } }

@media screen and (max-width: 599px) { .mobileclear { clear: both; } }

.uppercase { text-transform: uppercase; }

.center { text-align: center; }

button { border-radius: 20px; font-size: 16px; padding: 10px; border: 0 none; }

.cardycard button { margin: 10px; }

.utility-container { background: #c1509d; border-bottom: 2px solid #3d91b3; }

.utility-container a { color: white; font-size: 20px; padding: 10px; }

@media screen and (max-width: 599px) { .utility-container { text-align: center; } }

@media screen and (min-width: 600px) { .utility-container { height: 40px; text-align: right; padding-top: 6px; padding-right: 20px; }
  .utility-container .fa { font-size: 24px; }
  .utility-container a { margin: 5px 10px; font-size: 20px; } }

@media screen and (max-width: 599px) { a.custom-logo-link { width: 80%; display: block; margin: 10px auto 0; }
  a.custom-logo-link img.custom-logo { width: 100%; } }

@media screen and (min-width: 600px) { a.custom-logo-link { position: absolute; width: 199px; top: 50px; left: 25px; } }

@media screen and (min-width: 600px) { .site-branding { float: left; } }

@media screen and (max-width: 599px) { .main-navigation .menu-toggle { background: transparent; border: 0 none; color: white; font-size: 30px; margin: 0 auto 10px; }
  .main-navigation li { border: thin solid white; display: block; text-align: center; width: 100%; margin-top: -1px; padding: 5px; }
  .main-navigation li:hover { background: white; }
  .main-navigation li:hover a { color: #4ebce8; } }

@media screen and (min-width: 600px) { .main-navigation { position: absolute; top: 47px; float: right; right: 10px; }
  .main-navigation ul > li { margin-left: 5vh; padding: 1.2vh 0; font-size: 17px; }
  .main-navigation ul > li > a { text-transform: uppercase; letter-spacing: 1px; } }

.jilly1 { display: block; max-width: 600px; }

@media screen and (max-width: 599px) { .jilly1 { width: 75%; margin: 10px auto 20px; } }

@media screen and (min-width: 600px) { .jilly1 { width: 330px; left: 35%; margin: 30px auto 20px; } }

@media screen and (min-width: 600px) and (min-height: 646px) { .jilly1 { position: absolute; top: 92px; margin: 10px auto 20px; } }

@media screen and (min-width: 1300px) { .jilly1 { width: 31%; margin-left: auto; margin-right: auto; left: 0; right: 0; margin: 10px auto 20px; } }

@media screen and (min-height: 1500px) { .jilly1 { width: 580px; top: 300px; } }

.jilly2 { display: block; }

@media screen and (max-width: 599px) { .jilly2 { width: 75%; margin: 10px auto 20px; } }

@media screen and (min-width: 600px) { .jilly2 { position: absolute; top: 155px; left: 43%; width: 310px; } }

@media screen and (min-width: 1300px) { .jilly2 { width: 20%; margin-left: auto; margin-right: auto; left: 0; right: 0; margin-top: 40px; position: static; } }

h2.maintitle { margin: 0 5px 10px; }

@media screen and (min-width: 600px) { h2.maintitle { font-size: 34px; margin-bottom: 0; } }

@media screen and (min-width: 600px) and (min-height: 646px) { h2.maintitle { letter-spacing: 2.28px; top: 50.6%; position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; } }

@media screen and (min-width: 600px) and (max-width: 850px) { h2.maintitle { font-size: 4.1vw; letter-spacing: 0.9px; } }

@media screen and (min-height: 1500px) { h2.maintitle { top: 800px; } }

.subtitle { font-size: 18px; margin-bottom: 20px; }

@media screen and (min-width: 600px) { .subtitle { font-size: 24px; letter-spacing: 0px; }
  .subtitle .readmore { font-family: Brandon_ital; font-size: 20px; letter-spacing: 0.5px; } }

@media screen and (min-width: 600px) and (min-height: 646px) { .subtitle { position: absolute; top: 56.4%; line-height: 29px; margin-left: auto; margin-right: auto; left: 0; right: 0; } }

@media screen and (min-height: 1500px) { .subtitle { top: 864px; } }

.readmore { font-size: 14px; }

.question { margin-bottom: 10px; }

@media screen and (min-width: 600px) and (min-height: 646px) { .question { margin-left: auto; margin-right: auto; left: 0; right: 0; position: absolute; top: 64.4%; font-size: 22.5px; line-height: 1.205; letter-spacing: 0.05px; } }

@media screen and (min-height: 1500px) { .question { top: 980px; } }

@media screen and (min-width: 600px) { #card2 .question { top: 60.5%; } }

@media screen and (min-height: 1500px) { #card2 .question { top: 950px; } }

@media screen and (min-width: 600px) and (max-height: 645px) { #card3 .question, #card4 .question { margin-top: 34px; } }

@media screen and (min-height: 1500px) { #card3 .question, #card4 .question { top: 975px; } }

@media screen and (min-width: 600px) { #card6 .question { top: 24%; } }

@media screen and (max-width: 599px) { #card7 .question { font-size: 22px; margin-top: 15px; } }

@media screen and (min-width: 600px) { #card7 .question { position: static; } }

input[type="text"], input[type="email"] { border: 0 none; border-radius: 20px; width: 90%; margin: 0 auto; display: block; padding: 7px 13px; text-align: center; }

@media screen and (min-width: 600px) { input[type="text"], input[type="email"] { font-size: 20px; color: black; text-align: center; border-radius: 20px; padding: 7px 13px; width: 462px; } }

#payment-form input[data-stripe="cvc"] { border-radius: 20px; padding: 7px 13px; text-align: center; }

@media screen and (min-width: 600px) and (min-height: 646px) { #card1 input[type="text"], #card2 input[type="text"], #card3 input[type="text"], #card4 input[type="text"], #card5 input[type="text"] { position: absolute; top: 69.3%; margin-left: auto; margin-right: auto; left: 0; right: 0; } }

@media screen and (min-height: 1500px) { #card1 input[type="text"], #card2 input[type="text"], #card3 input[type="text"], #card4 input[type="text"], #card5 input[type="text"] { top: 1034px; } }

/* .action-section { @include heightsmall { position: relative; } } */
.usercontrols-section { text-align: center; }

@media screen and (max-width: 599px) { .usercontrols-section { margin-top: 15px; margin-bottom: 40px; } }

@media screen and (min-width: 600px) and (max-height: 645px) { .usercontrols-section { margin-top: 15px; margin-bottom: 60px; } }

@media screen and (min-width: 600px) and (min-height: 646px) { .usercontrols-section { position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; top: 74.5%; } }

@media screen and (min-height: 1500px) { .usercontrols-section { top: 1090px; } }

.progress-circles { display: inline-block; text-align: center; width: 184px; margin: 20px 0 auto; }

.progress-circles .step { background-size: 100%; border: 3px solid white; width: 15px; height: 15px; background-size: 100%; float: left; margin-left: 5.5px; margin-right: 5.5px; border-radius: 10px; }

.progress-circles .step.step-done { background: #c1509d; }

.progress-circles .step.step-blank { background: white; }

#card1 #floated { /* 	@include widescreen { position: absolute; top: 69.3%; //77%; @include absolute-center; left: 485px; } */ }

@media screen and (max-width: 599px) { #card1 #floated { text-align: center; margin-top: 15px; } }

@media screen and (min-width: 600px) and (max-height: 645px) { #card1 #floated { text-align: center; margin-top: 15px; } }

@media screen and (min-width: 600px) and (min-height: 646px) { #card1 #floated { position: absolute; top: 69.3%; margin-left: auto; margin-right: auto; left: 0; right: 0; left: 485px; } }

@media screen and (min-width: 600px) and (max-width: 800px) { #card1 #floated { top: 77%; left: 245px; } }

@media screen and (min-height: 1500px) { #card1 #floated { top: 1034px; } }

@media screen and (min-width: 600px) and (min-height: 646px) { #centerbit { width: auto; display: inline-block; }
  #floated { position: relative; display: inline-block; width: 0; height: 0; vertical-align: top; }
  #sidebitleft { display: inline-block; position: absolute; width: auto; left: -17vh; }
  #sidebitright { display: inline-block; position: absolute; width: auto; margin-left: 1vh; } }

.startbutton { cursor: pointer; }

@media screen and (max-width: 799px) { .startbutton { background: #4d3f37; border-radius: 10px; padding: 5px 7%; }
  .startbutton:hover { background: #07080a; } }

@media screen and (min-width: 600px) and (max-width: 800px) { .startbutton { padding: 10.5px 7%; font-size: 13px; letter-spacing: 1px; padding: 6px 7%; position: relative; z-index: 50; } }

@media screen and (min-width: 600px) and (max-height: 645px) { .startbutton { background: #4d3f37; border-radius: 10px; padding: 5px 7%; }
  .startbutton:hover { background: #07080a; } }

@media screen and (min-width: 800px) and (min-height: 645px) { .startbutton { background: url("/wp-content/themes/_dothething/images/Button-next-retina-hover.png") no-repeat transparent; background-position: 0 top; background-size: 100% auto; text-transform: uppercase; letter-spacing: 1px; height: 45px; width: 124px; display: block; line-height: 45px; padding: 0 0 0 9px !important; font-size: 14px; text-align: left; }
  .startbutton:hover { background-position: 0 bottom; } }

button, .page-id-92 input[type="submit"] { letter-spacing: 1px; color: white; text-transform: uppercase; line-height: 1; background: #4d3f37; position: relative; border-radius: 10px; }

button:hover, .page-id-92 input[type="submit"]:hover { background: #07080a; }

@media screen and (max-width: 499px) { button.backbtn, button.nextbtn, .page-id-92 input[type="submit"].backbtn, .page-id-92 input[type="submit"].nextbtn { font-size: 10px; line-height: 6px; padding: 12px 6px; margin: 0 0 20px 0; text-align: center; top: -4px; } }

@media screen and (min-width: 500px) { button.backbtn, button.nextbtn, .page-id-92 input[type="submit"].backbtn, .page-id-92 input[type="submit"].nextbtn { padding: 4px 25px; height: 26px; font-size: 20px; } }

@media screen and (max-width: 499px) { button.backbtn, .page-id-92 input[type="submit"].backbtn { right: 0; } }

@media screen and (min-width: 500px) { button.backbtn, .page-id-92 input[type="submit"].backbtn { right: 27px; } }

@media screen and (max-width: 499px) { button.nextbtn, .page-id-92 input[type="submit"].nextbtn { left: 0; } }

@media screen and (min-width: 500px) { button.nextbtn, .page-id-92 input[type="submit"].nextbtn { left: 27px; } }

button.nextbtn:disabled, .page-id-92 input[type="submit"].nextbtn:disabled { background: gray; color: lightgray; }

button.greenbutton, button.greenbutton:hover, .page-id-92 input[type="submit"].greenbutton, .page-id-92 input[type="submit"].greenbutton:hover { background: #acd036; }

button.redbutton, button.rebutton:hover, .page-id-92 input[type="submit"].redbutton, .page-id-92 input[type="submit"].rebutton:hover { background: #e93e47; white-space: nowrap; }

.page-id-92 input[type="submit"] { border: 0 none; padding: 10px 30px; }

.page-id-92 textarea { border-radius: 25px; }

.page-id-92 .contact-form label.name, .page-id-92 .contact-form label.email { float: left; }

.page-id-92 .contact-form label span { color: #4d3f37; }

#text1 { font-size: 18px; margin-top: 100px; /* 	#colouredsections { position: relative; #pinkcircle { position: absolute; z-index: 10; background: $mulberry-pink; width: 99%; border-radius: 10px; padding: 30px; margin-bottom: 20px; margin-left: auto; margin-right: auto; @include xs-phone { width: 97.5vw; min-height: 97.5vw; border-radius: 50%; padding: 30px 50px; } #orangerectangle { background: $sun-orange; position: absolute; z-index: 1; width: 100%; height: 70vw; left: 0; margin-top: 6vw; } .margtop { margin-top: 10px; } .whitecircles { margin: 20px auto; display: block; text-align: center; width: 100%; display: flex; justify-content: space-around; } .whitecircle { background: white; color: $picton-blue; padding: 10px; border-radius: 5px; width: 47%; font-size: 16px; line-height: 1.1; @include xs-phone { border-radius: 50%; width: 120px; height: 120px; } &.left { float: left; } &.right { float: right; } div { display: block; font-size: 36px; } } } } button.white { background: white; color: $picton-blue; margin-bottom: 40px; } */ }

@media screen and (min-width: 600px) and (min-height: 646px) { #text1 { margin-top: 100vh; } }

#text1 h4 { margin: 20px auto 10px; font-size: 22px; text-transform: uppercase; margin-left: 7px; margin-right: 7px; }

#text1 p.outsidecircle { margin-left: 7px; margin-right: 7px; }

#text1 #colouredsections { margin-bottom: 20px; position: relative; height: 120%; background: url("/wp-content/themes/_dothething/images/orangerectangle.png") repeat-x; /*  #orangerectangle { } */ /* 		#orangerectangle { position: absolute; background: $sun-orange; width: 100%; height: 70%; } */ }

#text1 #colouredsections h4, #text1 #colouredsections p { width: 90%; margin-left: auto !important; margin-right: auto !important; }

#text1 #colouredsections #pinkcircle { background: #c1509d; position: relative; z-index: 10; margin-left: auto; margin-right: auto; left: 0; right: 0; }

@media screen and (max-width: 599px) { #text1 #colouredsections #pinkcircle { border-radius: 20vw; padding: 2vw 2vw 4vw 2vw; width: 90%; } }

@media screen and (min-width: 600px) { #text1 #colouredsections #pinkcircle { border-radius: 50%; width: 531px; height: 531px; padding: 50px 30px 30px 30px; margin-bottom: 75px; }
  #text1 #colouredsections #pinkcircle p.min10exp { font-size: 22px !important; } }

#text1 #colouredsections #pinkcircle h4 { font-size: 22px; }

#text1 #colouredsections #pinkcircle p { line-height: 1.1; }

#text1 #colouredsections .whitecircles { margin: 10px auto; display: block; text-align: center; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; }

@media screen and (max-width: 599px) { #text1 #colouredsections .whitecircles { -ms-flex-pack: distribute; justify-content: space-around; } }

@media screen and (min-width: 600px) { #text1 #colouredsections .whitecircles { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } }

#text1 #colouredsections .whitecircle { background: white; color: #4ebce8; padding: 10px; border-radius: 50%; line-height: 1.1; margin-bottom: 20px; /* 			@include widescreen { width: 300px; height: 300px; } */ }

@media screen and (max-width: 599px) { #text1 #colouredsections .whitecircle { font-size: 4.5vw; } }

@media screen and (min-width: 600px) { #text1 #colouredsections .whitecircle { font-size: 20px; width: 120px; height: 120px; font-size: 15px; } }

#text1 #colouredsections .whitecircle.left { float: left; }

@media screen and (min-width: 600px) { #text1 #colouredsections .whitecircle.left { margin-right: 70px; } }

#text1 #colouredsections .whitecircle.right { float: right; }

#text1 #colouredsections .whitecircle div { display: block; }

@media screen and (max-width: 599px) { #text1 #colouredsections .whitecircle div.num { font-size: 17vw; } }

@media screen and (min-width: 600px) { #text1 #colouredsections .whitecircle div.num { font-size: 48px; } }

@media screen and (max-width: 599px) { #text1 #colouredsections .whitecircle { width: 40vw; height: 40vw; } }

#text1 #colouredsections p.expchoices { font-size: 22px; line-height: 3 !important; }

#text1 #colouredsections p.margtop { margin-top: 20px; font-size: 14px; }

button.white { background: white; color: #4ebce8; margin-bottom: 50px; }

#text1 button.white { margin-bottom: 100px; }

@media screen and (max-width: 599px) { .thisisthetask { text-align: center; font-size: 30px; margin-bottom: 10px; } }

@media screen and (min-width: 600px) and (max-height: 645px) { .thisisthetask { text-align: center; font-size: 30px; margin-top: 30px; margin-bottom: 10px; } }

@media screen and (min-width: 600px) and (min-height: 646px) { .thisisthetask { font-size: 46px; line-height: 0.806; position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; text-align: center; } }

@media screen and (min-width: 600px) and (max-height: 645px) { #card2 .thisisthetask, #card3 .thisisthetask, #card4 .thisisthetask { margin-top: 20vh; } }

@media screen and (min-width: 600px) and (min-height: 646px) { #card2 .thisisthetask, #card3 .thisisthetask, #card4 .thisisthetask { top: 39.5%; } }

@media screen and (min-height: 1500px) { #card2 .thisisthetask, #card3 .thisisthetask, #card4 .thisisthetask { top: 620px; } }

@media screen and (min-width: 600px) { #card5 .thisisthetask, #card6 .thisisthetask { top: 16.5%; } }

@media screen and (min-height: 1500px) { #card5 .thisisthetask, #card6 .thisisthetask { top: 250px; } }

@media screen and (max-width: 599px) { .turnoffdistractions { text-align: center; font-size: 22px; margin-bottom: 15px; } }

@media screen and (min-width: 600px) and (max-height: 645px) { .turnoffdistractions { text-align: center; font-size: 22px; margin-bottom: 15px; } }

@media screen and (min-width: 600px) and (min-height: 646px) { .turnoffdistractions { position: absolute; top: 23.7%; font-size: 24px; letter-spacing: -0.5px; margin-left: auto; margin-right: auto; left: 0; right: 0; text-align: center; } }

@media screen and (min-height: 1500px) { .turnoffdistractions { top: 450px; } }

@media screen and (max-width: 599px) { .turnoffdistractions-ital { text-align: center; font-size: 18px; margin-bottom: 30px; } }

@media screen and (min-width: 600px) and (max-height: 645px) { .turnoffdistractions-ital { text-align: center; font-size: 18px; margin-bottom: 30px; } }

@media screen and (min-width: 600px) and (min-height: 646px) { .turnoffdistractions-ital { position: absolute; top: 27.5%; font-size: 20px; margin-left: auto; margin-right: auto; left: 0; right: 0; text-align: center; } }

@media screen and (min-width: 600px) { .distractionscheckboxes { width: 600px; margin-left: auto; margin-right: auto; left: 0; right: 0; } }

@media screen and (min-width: 600px) and (min-height: 646px) { .distractionscheckboxes { position: absolute; width: 600px; top: 30%; font-size: 19px; line-height: 1.31; text-align: left; } }

@media screen and (min-height: 1500px) { .distractionscheckboxes { top: 570px; } }

input[type="checkbox"], input[type="radio"] { display: none; }

.checkbox, .radiobtn { display: -webkit-box; display: -ms-flexbox; display: flex; }

.checkboxgroup { margin-bottom: 9px; clear: both; /* 	@include phone { min-height: 60px; } @include widescreen { min-height: 28px; } */ }

@media screen and (min-height: 1500px) { .checkboxgroup { margin-bottom: 30px; } }

.starwrapper { float: left; clear: both; overflow: auto; width: 60px; }

@media screen and (max-width: 599px) { .starwrapper { margin-left: 10px; height: 80px; } }

@media screen and (min-width: 600px) { .starwrapper { margin-left: 20px; height: 40px; } }

@media screen and (max-width: 599px) { .starwrapper.notifications { height: 50px; } }

input[type="checkbox"].starbox + label.starbox, input[type="radio"].starbox + label.starbox { height: 28px; width: 28px; margin: 0 30px 0 0; background: url(/wp-content/themes/_dothething/images/checkbox.png) no-repeat; background-position: 0 0; background-size: 28px auto; cursor: pointer; display: block; }

input[type="checkbox"].starbox:checked + label.starbox, input[type="radio"].starbox:checked + label.starbox { background-position: 0 -31px; }

.checkboxtext { left: -10px; position: relative; }

#card7 .starwrapper { float: left; margin-left: 4px; clear: both; height: 30px; overflow: auto; width: 45px; }

#card7 .checkboxgroup { min-height: 30px; left: 10px; position: relative; top: 10px; letter-spacing: -0.1px; font-size: 19px; }

@media screen and (max-width: 599px) { #card7 .checkboxgroup { margin-bottom: 10px; } }

@media screen and (min-width: 600px) { #card7 .checkboxgroup { margin-bottom: 0; } }

#card7 .checkboxgroup .radiotext { display: block; }

#card7 input[type="checkbox"].starbox + label.starbox, #card7 input[type="radio"].starbox + label.starbox { height: 22px; width: 22px; background-size: 22px auto; top: 1px; position: relative; }

#card7 input[type="checkbox"].starbox:checked + label.starbox, #card7 input[type="radio"].starbox:checked + label.starbox { background-position: 0 -24px; }

@media screen and (max-width: 599px) { #card7 #lastchoices { margin-bottom: 20px; }
  #card7 #anotherstart { margin-top: -20px; } }

@media screen and (min-width: 600px) { #card7 #anotherstart { margin-bottom: -30px; } }

#card7 .usercontrols-section { position: static; margin-top: 30px; }

#card8 { margin: 0 auto; counter-reset: item; }

@media screen and (max-width: 599px) { #card8 { width: 80%; } }

@media screen and (min-width: 600px) { #card8 { width: 68%; } }

#card8 p { margin-bottom: 10px; }

@media screen and (max-width: 599px) { #card8 p { width: 90%; } }

@media screen and (min-width: 600px) { #card8 p { font-size: 18px; } }

#card8 img { text-align: center; margin: 0 auto; display: block; margin-bottom: 15px; }

@media screen and (min-width: 600px) { #card8 img { margin-top: 80px; } }

#card8 h3 { text-align: center; margin-bottom: 10px; }

@media screen and (min-width: 600px) { #card8 h3 { font-size: 23px; } }

#card8 ol { margin-bottom: 200px; }

#card8 ol li { margin-bottom: 15px; }

@media screen and (min-width: 600px) { #card8 ol li { font-size: 18px; } }

#card8 ol { list-style: none; }

#card8 li { counter-increment: item; }

#card8 li:before { margin-right: 10px; content: counter(item); /* 	   background: white; border-radius: 100%; */ color: #c1509d; background: url(/wp-content/themes/_dothething/images/checkbox.png) no-repeat; width: 25px; height: 25px; line-height: 27px; background-size: 25px auto; text-align: center; display: inline-block; font-family: "Brandon_black"; font-weight: normal; }

.thisisthetask { top: 16.5%; }

#card6 .question { top: 24%; }

@media screen and (min-width: 600px) and (max-width: 800px) { #card6 .question { font-size: 19.5px; } }

@media screen and (min-height: 1500px) { #card6 .question { top: 370px; } }

#clockdiv { margin: 0 auto; background: white; border-radius: 50%; margin-left: auto; margin-right: auto; left: 0; right: 0; }

@media screen and (max-width: 599px) { #clockdiv { width: 50vw; height: 50vw; } }

@media screen and (min-width: 600px) { #clockdiv { width: 42vh; height: 42vh; } }

@media screen and (min-width: 600px) and (min-height: 646px) { #clockdiv { position: absolute; top: 33%; } }

@media screen and (min-height: 1500px) { #clockdiv { width: 540px; height: 540px; top: 490px; } }

#clockdiv #clock-startwith { width: 100%; color: #4ebce8; line-height: 1.167; text-align: center; }

@media screen and (max-width: 599px) { #clockdiv #clock-startwith { font-size: 4vw; padding-top: 4vw; padding-left: 2vw; padding-right: 2vw; } }

@media screen and (min-width: 600px) { #clockdiv #clock-startwith { font-size: 4vh; padding-top: 8%; padding-left: 2vh; padding-right: 2vh; } }

@media screen and (min-height: 1500px) { #clockdiv #clock-startwith { font-size: 55px; } }

#clockdiv #clock-expired { width: 100%; color: #4ebce8; text-align: center; }

@media screen and (max-width: 599px) { #clockdiv #clock-expired { font-size: 6.5vw; line-height: 1.5; padding: 28% 4vw; } }

@media screen and (min-width: 600px) { #clockdiv #clock-expired { line-height: 1; position: absolute; top: 4%; font-size: 45px; padding: 28% 20px; } }

#clockdiv #clocktime { color: #c1509d; line-height: 1.65; width: 100%; text-align: center; }

@media screen and (max-width: 599px) { #clockdiv #clocktime { margin-top: 6vw; font-size: 12vw; } }

@media screen and (min-width: 600px) and (max-height: 645px) { #clockdiv #clocktime { margin-top: 0; font-size: 10vh; } }

@media screen and (min-width: 600px) and (min-height: 646px) { #clockdiv #clocktime { position: absolute; top: 43%; font-size: 10vh; } }

@media screen and (min-height: 1500px) { #clockdiv #clocktime { font-size: 140px; } }

.cardycard button.greenbutton, .cardycard button.redbutton { margin: 0; }

@media screen and (max-width: 599px) { .cardycard button.greenbutton, .cardycard button.redbutton { font-size: 10px; padding: 7px 8px; } }

@media screen and (min-width: 600px) and (max-height: 645px) { .cardycard button.greenbutton, .cardycard button.redbutton { font-size: 10px; padding: 7px 8px; } }

@media screen and (max-width: 599px) { .clockcontrols { margin-top: -13vw; } }

@media screen and (min-width: 600px) and (max-height: 645px) { .clockcontrols { margin-top: -9vh; } }

@media screen and (min-width: 600px) and (min-height: 646px) { .clockcontrols { position: absolute; top: 66%; margin-left: auto; margin-right: auto; left: 0; right: 0; } }

@media screen and (min-height: 1500px) { .clockcontrols { top: 945px; } }

@media screen and (max-width: 599px) { .lastpagelists { margin: 0 5px; } }

@media screen and (min-width: 600px) { .lastpagelists { margin: 0 auto; display: block; width: 520px; font-size: 21px; left: 49px; position: relative; top: 304px; } }

@media screen and (min-width: 1300px) { .lastpagelists { top: 60px; } }

@media screen and (max-width: 599px) { .lastpagelists .lastpageheading { text-align: center; font-size: 22px; } }

.lastpagelists .extramsg { display: block; position: relative; }

@media screen and (max-width: 599px) { .lastpagelists .extramsg { overflow: auto; margin-top: 5px; left: 0; margin-left: 50px; width: 80%; clear: both; } }

@media screen and (min-width: 600px) { .lastpagelists .extramsg { left: 28px; font-size: 16px; top: -7px; letter-spacing: -0.05px; } }

/**************************/
/** Footer **/
.site-footer button, #signup button, .site-footer input[type="submit"], #signup input[type="submit"] { background: #4ebce8; color: white; border-radius: 20px; border: 0 none; }

.site-footer input[type="submit"], #signup input[type="submit"] { text-transform: none; }

@media screen and (max-width: 599px) { .site-footer { padding-top: 10px; background: #c1509d; text-align: center; }
  .site-footer input[type="text"] { margin-top: 10px; margin-bottom: 10px; }
  .site-footer button, .site-footer input[type="submit"] { font-size: 16px; margin: 10px; padding: 10px; width: 90%; } }

@media screen and (min-width: 600px) { .site-footer { border-top: 3px solid #3d91b3; background: #c1509d; padding: 15px; height: 50px; position: fixed; z-index: 100; bottom: 0; width: 100%; }
  .site-footer .widget-area { position: relative; top: -0.3vw; }
  .site-footer .widget-area .widget { float: left; padding: 0; font-size: 1.1vw; /* 			  	&:first-child { min-width: 165px; } &:last-child { min-width: 600px; } */ }
  .site-footer .widget-area .widget:first-child { width: 29%; }
  .site-footer .widget-area .widget:last-child { width: 56%; }
  .site-footer .widget-area .widget h3 { float: left; font-size: 14px; /* margin-left: -76px; margin-top: 4px; */ }
  .site-footer .widget-area .widget button { background: #4ebce8; border-radius: 20px; border: 0 none; font-size: 14px !important; padding: 5px 15px !important; } }

@media screen and (min-width: 600px) and (min-width: 900px) { .site-footer .widget-area .widget button { margin-left: 20%; } }

@media screen and (min-width: 600px) { .site-footer .widget-area .widget input[type="submit"] { background: #4ebce8; border-radius: 20px; color: white; border: 0 none; padding: 6.5px 20px; margin-left: 10px; letter-spacing: 1px; font-size: 12px; } }

@media screen and (min-width: 600px) and (min-width: 600px) and (max-width: 800px) { .site-footer .widget-area .widget input[type="submit"] { padding: 6.5px 17px; } }

@media screen and (min-width: 600px) { .site-footer .widget-area .widget input[type="text"], .site-footer .widget-area .widget input[type="email"] { text-align: center; margin-left: auto; margin-right: auto; left: 0; right: 0; color: #81817d; border-radius: 20px; padding: 4px 5px; float: left; font-size: 11px; margin-left: 1%; border: 0 none; width: 22%; position: static; } }

@media screen and (min-width: 600px) and (min-width: 600px) and (max-width: 800px) { .site-footer .widget-area .widget input[type="text"], .site-footer .widget-area .widget input[type="email"] { width: 20%; } }

.money { color: #0196d8; padding: 15px; text-align: center; margin-bottom: 20px; letter-spacing: -0.5px; font-size: 19px; line-height: 1.3; }

@media screen and (max-width: 599px) { .money { background: white; border-radius: 10px; } }

@media screen and (min-width: 600px) { .money { margin-top: 90px; padding: 70px 50px 20px; width: 703px; height: 401px; background: url("/wp-content/themes/_dothething/images/SpeechBubble-retina.png") no-repeat; background-size: 703px 401px; background-position: center top; /* 		position: relative; left: -55px; */ margin-left: -130px; } }

.money h3 { margin-bottom: 10px; font-size: 29px; letter-spacing: 0.5px; }

.money button { background: #c1509d; margin-top: 15px; margin-left: auto; margin-right: auto; display: block; text-transform: none; width: 205px; height: 43px; font-size: 25px; text-align: center; line-height: 10px; margin-top: 27px; letter-spacing: 0px; text-decoration: none; /* 		@include widescreen { } */ }

#signup { margin-top: 100px; background: #c1509d; display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 400px; border-radius: 10px; text-align: center; }

@media screen and (max-width: 599px) { #signup { display: none; } }

@media screen and (min-width: 600px) { #signup { width: 658px; margin-bottom: 400px; padding: 30px; position: relative; left: -58px; /* #newsletter { text-align: right; } */ }
  #signup #fb { margin-right: 8%; }
  #signup #fb, #signup #newsletter { width: 45%; }
  #signup h3 { font-size: 18px; }
  #signup p { font-size: 15px; line-height: 1.4; margin-bottom: 10px; letter-spacing: 0.5px; }
  #signup button { margin: 0; letter-spacing: -0.1px; padding: 5px 10px; }
  #signup button, #signup input { width: 100%; }
  #signup button, #signup input[type=submit] { background: #4ebce8; border: 0 none; color: white; text-transform: uppercase; letter-spacing: -0.1px; padding: 5px 10px; }
  #signup input[type="text"], #signup input[type="email"] { text-align: center; margin-left: auto; margin-right: auto; left: 0; right: 0; color: #81817d; border-radius: 20px; padding: 4px 5px; float: left; margin-left: 1%; border: 0 none; font-size: 12px; margin-bottom: 10px; }
  #signup input[type=submit] { margin-top: 0; text-transform: none; font-size: 15px; height: 27px; } }

@media screen and (min-width: 600px) and (min-width: 600px) and (max-width: 800px) { #signup { width: auto; left: 0; } }

/* #signup { background: $mulberry-pink; border-radius: 10px; @include phone { display: none; } */
/* 	padding: 20px; text-align: center; button { margin-bottom: 25px; } input[type=text] { margin: 10px auto; } input[type="submit"] { font-size: 16px; margin: 10px; padding: 10px; width: 90%; } */
/* 	@include widescreen { //	margin-top: 100px; margin-top: 40px; background: pink; position: relative; display: block; width: 655px; border: thin solid red; left: -113px; padding: 28px 30px 20px; #fb, #newsletter { float: left; h3 { font-size: 18px; } } #fb button { margin: 0; letter-spacing: -0.1px; padding: 5px 10px; } } } */
/**************************/
/** Lean Modals **/
a#go { bottom: 0.17em; color: #efefef; font-size: 0.8em; position: relative; }

#lean_overlay { position: fixed; z-index: 100; top: 0; left: 0; height: 100%; width: 100%; background: #000; display: none; color: #333; }

.modalsyo { padding: 30px; display: none; background: white; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0 0px 4px rgba(0, 0, 0, 0.7); color: #333; text-align: center; }

@media screen and (max-width: 599px) { .modalsyo { width: 96%; } }

@media screen and (min-width: 600px) { .modalsyo { width: 600px; font-size: 18px; } }

.modalsyo h3 { text-align: center; margin-bottom: 10px; }

.modalsyo a { color: #333; }

.modalsyo p { margin-top: 10px; }

.modalsyo .small { margin-top: 20px; color: #666; }

@media screen and (min-width: 600px) { .modalsyo .small { font-size: 14px; } }

.modalsyo .modalclose { float: right; display: block; text-decoration: none; font-weight: bold; }

@media screen and (max-width: 599px) { #thing.modalsyo { width: 400px; max-width: 96%; } }

@media screen and (min-width: 600px) { #thing.modalsyo { width: 400px; } }

@media screen and (max-width: 599px) { #impact.modalsyo { width: 650px; max-width: 96%; } }

@media screen and (min-width: 600px) { #impact.modalsyo { width: 650px; } }

@media screen and (max-width: 599px) { #nothing.modalsyo { width: 800px; max-width: 96%; } }

@media screen and (min-width: 600px) { #nothing.modalsyo { width: 800px; max-width: 96%; font-size: inherit; } }

#nextaction.modalsyo { position: fixed !important; }

/* #hbl-live-chat-wrapper #olark-wrapper { font-size: 10px !important; line-height: 10px !important; height: 30px !important; } */
@media screen and (max-width: 599px) { #olark-wrapper .olark-launch-button { width: 60px !important; height: 45px !important; } }

@media screen and (min-width: 600px) and (max-width: 800px) { #olark-wrapper .olark-launch-button { width: 60px !important; height: 45px !important; } }

@incude widescreen { #olark-wrapper .olark-launch-button { height: 30px !important; } }

#olark-wrapper .olark-launch-button svg { width: 22px !important; }

.page:not(.home) #content { margin: 70px auto; }

@media screen and (max-width: 599px) { .page:not(.home) #content { width: 96%; } }

@media screen and (min-width: 600px) { .page:not(.home) #content { width: 65%; } }

.page:not(.home) #content p { margin-bottom: 10px; }

.page:not(.home) #content img { border-radius: 10px; }

@media screen and (max-width: 599px) { .page:not(.home) #content h1 { text-align: center; } }

#sharefinished, #sharepart { display: inline; margin-left: 7px; }

.not-active { cursor: not-allowed; }