/* ================================================================================ *\
	normalize. HTML5BP
\* ================================================================================ */
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; }

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
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; }
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; }
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }

form { 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; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

/* ================================================================================ *\
	Main
\* ================================================================================ */
html, body {background:#f7f7f7; box-shadow:inset 0 1px 0 #fff; text-align:center; font-family:Tahoma, Helvetica, sans-serif; text-transform:lowercase; text-shadow:0 1px 0 #fff; cursor:default;}
#container {width:100%; max-width:900px; min-width:300px; margin:0 auto; position:relative;}
.misc #container {width:90%;}

.main {overflow:hidden;}
.main.no-header, .main.no-header body, .main.no-header #container {height:100%;}

#___plusone_0 {width:75px !important;}

.v-align:before, .main.no-header #container:before {content:''; display:inline-block; height:100%; vertical-align:middle; margin-right:-0.25em;}
.v-middle {display:inline-block; vertical-align:middle;}

html[lang=iw] .panel {text-align:right;}
.misc #container {text-align:left;}

a, a:hover, a:visited {color:inherit; font-weight:bolder; text-decoration:underline; transition:color 150ms linear;}
a:hover {text-decoration:none;}
a.a-fill {width:100%; height:100%; display:block;}

.person div, .main nav, div#thethoughtsflash {background:#262626; background:linear-gradient(top, #2e2e2e, #1f1f1f); border:1px solid #000; box-shadow:0 2px 10px -1px #000, inset 0 1px 0 rgba(255, 255, 255, 0.1); color:#e5e5e5; text-shadow:0 0 0 transparent, 0 1px #000; transition:all 1s linear;}

#yt-music, audio {position:absolute; left:-9999px;}

.no-touch .mobile, .touch .desktop {display:none; opacity:0; visibility:hidden; z-index:-1;}

.hellip:before, .hellip:after, .hellip-before:before, .hellip-after:after {content:'…';}

.clearfix:before, .clearfix:after {content:""; display:table;}
.clearfix:after {clear:both;}
.clearfix {zoom:1;}

::-webkit-scrollbar {width:10px; height:10px; background:#f7f7f7; box-shadow:inset 5px 0 5px -5px #808080;}
::-webkit-scrollbar-thumb {background:#bfbfbf; box-shadow:inset 5px 0 5px -5px #808080;}
::-webkit-scrollbar-thumb:hover {background:#b3b3b3;}

/* ================================================================================ *\
	Header
\* ================================================================================ */
.main header {background:#f7f7f7; width:90%; margin:0 auto; color:#808080; font-size:1.231em;}
.main header div {width:100%; height:177px; margin:7% auto 5%; padding:10px 0 0; text-align:left; overflow:hidden;}
.main header div img {display:block; float:left;}
.main header a {display:block;}

.main.no-header header {display:none;}

.misc header {width:90%; max-width:900px; margin:0 auto; padding:30px 0; position:relative;}
.misc header .message {display:none;}

a#home {transition:none;}
#home {width:100%; display:block; margin-bottom:10px; font-weight:normal; text-decoration:none;}
#home img {display:none;}

h1, h2, h3, h4, h5, h6 {margin:0; padding:0; color:#808080;}
h1 {width:70%; margin:102px 0 0 -26px; float:left; font-size:1.75em; font-weight:lighter; letter-spacing:1px;}
h2 {font-size:3.077em; font-weight:600;}
h3 {font-size:2.308em;}
h4 {color:#404040; font-size:1.077em; font-weight:bolder;}

hr {background:url('../img/hr.gif') left; width:100%; height:3px; border:none; margin:0;}

ol, ul {color:#808080; font-size:1.077em; line-height:2em;}
ul {list-style:circle;}

/* ================================================================================ *\
	Nav
\* ================================================================================ */
.main nav {width:90%; margin:30px auto; padding:5px 0; transition:all 1s linear, transform 1s linear;}
html body #container nav.hide {opacity:0; visibility:hidden;}

.main.no-header nav {position:absolute; bottom:5px; left:5%; padding-bottom:20px;}
.main.no-header nav > a, .main.no-header nav > span, .main.no-header nav div {display:none;}
.main.no-header nav .langs {display:block; line-height:40px; margin:0; height:auto;}

.main nav a {display:block; padding:5px 0;}
.main nav span {display:none;}
.main nav, .main nav a, .main nav a:hover {color:#b3b3b3; font-weight:normal; text-decoration:none;}
.main nav div, .main nav div a {color:#808080;}
.main nav a:hover {color:#fff;}
.main nav a[href="javascript:;"] {color:#4d4d4d;}

nav div {display:inline; margin-left:4px; padding-left:2px;}
	
.main nav .langs {display:block; margin:0 0 10px 5px; box-shadow:none;}
nav .langs .current-lang {margin-right:8px; padding-right:8px; color:#b3b3b3; top:0; box-shadow:1px 0 0 #404040, 2px 0 0 #0d0d0d; cursor:default;}
nav .langs .current-lang span {margin-right:8px; opacity:1;}
nav .langs span, nav .langs a {display:inline; padding:0;}
nav .langs a span {width:18px; height:12px; display:inline-block; margin:0 4px; box-shadow:0 1px 3px #000; opacity:0.6; transition:opacity 150ms linear;}
nav .langs a:hover span {opacity:1;}

/* ================================================================================ *\
	People
\* ================================================================================ */
#people .person {width:50px; display:inline-block; margin:5px; position:relative;}
#people img {width:50px; height:50px;}
#people a {text-decoration:underline;}
#people div {display:none;}

#people .people-row {display:none; opacity:1; transition:opacity 150ms linear;}
#people .people-row:nth-child(1), #people .people-row:nth-child(2) {display:inline;}

/* ================================================================================ *\
	Rows & columns
\* ================================================================================ */
.row {margin:50px auto;}
p {color:#808080; font-size:1.154em;}
.row .image {background:center no-repeat; background-size:contain; width:50px; height:50px; display:inline-block; margin:0 20px 0 0; float:right; vertical-align:middle;}
.row.buttons {margin:-30px 0 30px; vertical-align:top;}


.column {width:100%; margin:50px 0;}
.column.left {background:center no-repeat; background-size:contain; width:80px; height:80px; margin:50px 15px 5px 0; float:left;}

a.button {background:center no-repeat; width:100%; height:95px; display:block; margin:40px 0 -5px; transition:none;}
.button:active {position:relative; top:2px;}
a.button:not(:last-child) {margin-bottom:30px;}

.faq {margin:40px 0 40px 65px; position:relative;}
.faq .circle {width:58px; height:53px; position:absolute; top:0; left:-70px;}
.faq .circle .front {background:url('../img/faq.gif') top no-repeat; width:58px; height:53px;}

/* ================================================================================ *\
	Forms
\* ================================================================================ */
form {display:block; vertical-align:top;}
.misc.header form {display:block; margin:10px auto;}
.misc.header.csstransforms form {margin:0;}

input[type=image] {display:none;}
input[type=submit] {width:251px; height:86px; display:block; margin:0 auto; border:none; box-shadow:none;}
input[type=submit]:active {position:relative; top:2px;}

.donate99 {background:url('../img/donate.gif') top center no-repeat;}
.main .donate99, #thoughts .donate99 {margin-top:20px; transform:scale(0.6);}
.donatemore {background:url('../img/donate.gif') bottom center no-repeat;}
.or-img {background:url('../img/or.gif') center no-repeat; width:57px; height:75px; display:block; margin:0 auto;}

/* ================================================================================ *\
	Footer
\* ================================================================================ */
.share-button {display:none;}
footer {padding:30px 0; text-align:center;}
footer nav, .misc footer nav a {color:#808080; text-decoration:none; font-weight:normal;}
footer nav a:hover {color:#808080; text-decoration:underline; font-weight:normal;}
footer nav a.blue {color:#395080;}
footer nav span {margin:0 5px; position:relative; top:1px;}

/* ================================================================================ *\
	Panels
\* ================================================================================ */
.panel {width:100%; height:100px; position:absolute; top:50%; left:0; margin-top:-50px; opacity:0; color:#808080; font-size:1.385em; font-weight:bolder; text-align:center; transition:opacity 0.5s linear;}
.current, #final.current {opacity:1; z-index:1; transition:opacity 0.25s linear;}
.used {opacity:0;}
.sub {display:block; margin-top:1em; color:#a5a5a5; font-size:0.722em; font-weight:normal;}
#final {width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1; font-size:1em; color:#808080; font-weight:normal; text-align:center;}
.panel a {font-weight:bolder; text-decoration:underline;}
.panel a:hover {text-decoration:none;}

.panel form {display:block; margin-top:-15px;}

/* ================================================================================ *\
	Thoughts
\* ================================================================================ */
#thoughts, #thoughts body {background:#06061e; box-shadow:none;}
#thoughts header {height:75px; padding-bottom:0;}
#thoughts h2 {color:#65657d; text-shadow:0 0 10px #000;}
#thoughts #container:before {display:none !important;}
a#thoughts-home {color:#65657d; text-shadow:0 0 5px #000;}
#thoughts .panel {width:100%; margin:0; position:relative; opacity:1; z-index:1; color:#65657d; text-shadow:0 0 5px #000;}
#thethoughtsflash {margin:30px 0;}
div#thethoughtsflash {margin:100px 0; line-height:40px;}
#thethoughtsflash img {margin:-3px 10px 0;}
object#thethoughtsflash {position:relative; left:-30px;}
#thoughts #home div {color:#65657d; text-shadow:0 0 5px #000;}
#thoughts-done {width:100%; margin:0 0 600px; border-top:1px dashed #17171C; color:#65657d; text-shadow:0 0 5px #000; text-align:center;}
#thoughts-done span {background:#06061e; display:inline-block; margin-top:-0.75em; padding:0 20px;}
#thoughts #final {margin-bottom:300px;}
#thoughts .donate99 {background-image:url('../img/donate2.gif');}

#thoughts::-webkit-scrollbar {background:#06061e; box-shadow:none;}
#thoughts::-webkit-scrollbar-thumb {background:#4D4D60; box-shadow:none;}
#thoughts::-webkit-scrollbar-thumb:hover {background:#65657d;}

/* ================================================================================ *\
	Errors
\* ================================================================================ */
.error, .error body, .error .v-align {height:100%;}
.error .v-middle {background:url('../img/404.gif') top center no-repeat; padding-top:155px;}
.error h1 {width:100%; display:block; margin:0; float:none; font-size:2.154em; font-weight:bolder;}
.error p {display:block;}

.error-txt {color:#e63838 !important;}

/* ================================================================================ *\
	10things
\* ================================================================================ */
.ten_things, .ten_things body, .ten_things .v-align {height:100%;}
.ten_things .v-middle {width:760px;}
.ten_things h1 {width:100%; display:block; font-size: 30px; float:none; font-weight:bold;}
.ten_things h2 {width:100%; display:block; font-size:20px; float:none;}
.ten_things li {margin-bottom:40px;}
.ten_things ol {text-align:left;}
.ten_things p {display:block;}

.ten_things-txt {color:#e63838 !important;}

/* ================================================================================ *\
	Queries!
\* ================================================================================ */
@media all and (min-width:500px) {
	
	.main, .main body, .main #container {height:100%;}
	
	.main.no-header nav > a, .main.no-header nav > span, .main.no-header nav div {display:inline-block;}
	.main.no-header nav .langs {line-height:normal; width:80%;}
	.main.no-header nav .langs a {display:inline-block; margin-bottom:12px;}
	
	.main.no-header nav, .main nav {width:90%; margin:0; padding:0; position:absolute; bottom:25px; left:4.4%; text-align:left; line-height:40px; z-index:100;}
	.main nav a {display:inline; margin:0 2px; padding:0 3px;}
	.main nav a:first-child {margin-left:10px;}
	.main nav span {display:inline; position:relative; top:2px;}
	.main nav > span:last-of-type {display:none;}
	.main.no-header nav div, .main nav div {display:block; height:17px; margin-bottom:10px; line-height:normal;}
	.main nav div a:first-child {margin-left:5px;}
	.main nav .big {height:40px; margin-top:-10px; position:absolute; top:50%; right:10px; color:#b3b3b3; font-size:1.231em;}

	.main.no-header nav {display:block;}
	.main.no-header nav.hide {transform:translateY(150%);}

	.main header {width:100%; height:240px; position:absolute; top:180px; left:0; z-index:100; text-align:center;}
	.main header div {max-width:430px; margin:10px auto; text-align:left;}
	.main header a {display:inline;}
		
	.misc header {padding-bottom:90px;}
	.misc header .message {width:100%; height:50px; display:block; position:absolute; bottom:20px; left:0; opacity:0; color:#a6a6a6;}
	.misc header .message div {width:85%; display:inline-block; vertical-align:middle;}
	.misc header .message img {margin-right:10px;}
	.misc header .message em {display:inline; margin:0 10px 0 0; font-size:1.231em; font-family:Arial, sans-serif; font-weight:lighter; font-style:italic;}
	.misc header .message span {font-size:0.846em;}
	
	h1 {width:50%;}
	
	#people .person.empty {display:none;}
	
	#people .people-row {display:inline; opacity:0; transition:opacity 150ms linear;}
	
	#people .person div {width:357px; display:block; padding:7px; position:absolute; left:-162px; opacity:0; text-shadow:none; text-align:left; z-index:80; visibility:hidden; transform:scale(0.975); transition:all 250ms linear 0.175s;}
	#people .smaller div {width:270px; left:-118px;}
	#people .smallest div {width:153px; left:-59px;}
	#people .person:hover div {opacity:1; z-index:9999; visibility:visible; transform:scale(1);}
	
	#people .person:not(.top-rows) div {bottom:40px;}
	#people .person:not(.top-rows):hover div {bottom:47px;}
	
	#people .top-rows div {top:40px;}
	#people .top-rows:hover div {top:47px;}
	
	#people .person div:before, #people .person div:after {content:''; display:block; margin-left:-6px; position:absolute; left:50%; border:6px solid rgba(0, 0, 0, 0); border-top-color:#1f1f1f;}
	#people .person div:before {border-tocolumnor:#000;}
	
	#people .person:not(.top-rows) div:before {bottom:-13px;}
	#people .person:not(.top-rows) div:after {bottom:-12px;}
	
	#people .top-rows div:before {top:-12px; border-top-color:rgba(0, 0, 0, 0); border-bottom-color:#000;}
	#people .top-rows div:after {top:-11px; border-top-color:rgba(0, 0, 0, 0); border-bottom-color:#2d2d2d;}
	
	#people strong {display:block; margin-bottom:3px;}
	
	.row {margin-right:120px; position:relative;}
	.row .image {width:100px; height:100px; margin-top:-50px; position:absolute; top:50%; right:-150px;}
	.row.buttons {margin-right:0;}
	
	.column {float:left;}
	.column.left {background-position:center top; width:20%; height:400px;}
	.column.right {width:75%;}
	
	.button.left {background-position:center left;}
	.button.right {background-position:center right;}
	.button.join {width:80%;}
	
	.faq {margin-left:0;}
	
	footer {padding:30px 0;}
	footer nav {padding-top:20px;}
	.share-button {display:inline-block;}
	.share-button {width:100px; height:30px; display:inline-block; margin:0 10px 0 0; overflow:hidden; vertical-align:top;}
	.share-fb {width:75px; position:relative; top:1px;}
	.share-gplus {width:60px;}
	.share-tumblr {width:82px;}
	.share-stumble {position:relative; top:1px; left:-3px;}
	
	.panel {transition:margin-top 1s ease-out, opacity 1.5s cubic-bezier(0.455, 0.030, 0.515, 0.955);}
	.current, #final.current {transition:opacity 0.7s linear;}
	.used {margin-top:60px;}
	#final {width:500px; left:100px;}
	
	.error .v-middle {background-position:center left; padding:0 0 0 155px; text-align:left;}

}

@media all and (min-width:900px) {
	
	.main header {width:540px; left:180px;}
	.main header div {margin:7% auto 2.5%;}
	
	.misc header {width:100%; padding-bottom:80px;}
	.misc header .message {bottom:-1px;}
	
	
	#home {height:70px; width:130px; position:absolute; right:0; bottom:-5px; overflow:hidden;}
	#home:active {bottom:-7px;}
	#home img {display:block; float:left;}
	#home div {margin:37px 0 0 0; position:relative; left:-10px; color:#808080; z-index:9999;}
	
	.main.no-header nav div:first-of-type, .main nav div {display:inline-block; box-shadow:-1px 0 0 #404040, -2px 0 0 #0d0d0d;}
		
	hr {height:1px;}
	
	#people .person.empty {display:inline-block;}
	
	.row {width:100%; margin:50px 0;}
	.row p, .row h3 {width:50%; float:left;}
	.row .image, .row.left .image {background-position:center top; background-size:auto; width:50%; height:200px; margin:0; position:relative; top:0; left:0; float:left;}
	.row.right .image {float:right;}
	.row.buttons {margin:-50px 0 0 0; height:170px; text-align:center;}
	
	.faq {height:50px;}
	.faq p, .faq h4 {height:60px; width:100%; margin-top:-13px; position:absolute; top:50%; left:70px; transition:all 250ms ease-out;}
	.faq p {margin-top:-12px; opacity:0; font-size:0.933em;}
	.faq .circle {width:58px; height:53px; margin:0 30px 0 0; position:relative; top:0; left:0; float:left;}
	.faq .circle div {width:100%; height:100%; position:absolute; top:0; left:0;}
	.faq .circle .front {background:url('../img/faq.gif') top no-repeat; z-index:500;}
	.faq .circle .back {background:url('../img/faq.gif') bottom no-repeat; z-index:250;}
	.faq:hover p {opacity:1;}
	.faq:hover h4 {margin-top:-33px; color:#404040;}
	.faq:hover .circle .back {z-index:750; opacity:1;}
	.faq .circle .front, .faq .circle .back, .faq .answer, .faq .question {transition:all 250ms ease-out;}
	
	.csstransforms3d .faq .circle {perspective:600;}
	.csstransforms3d .faq .circle .front, .csstransforms3d .faq .circle .back {transform:rotateY(0deg); transform-style:preserve-3d; backface-visibility:hidden;}
	.csstransforms3d .faq .circle .back {transform:rotateY(180deg);}
	.csstransforms3d .faq:hover .circle .front {z-index:250; transform:rotateY(-180deg);}
	.csstransforms3d .faq:hover .circle .back {z-index:750; transform:rotateY(0deg);}

	form {display:inline-block;}
	.or-img {margin:0 35px;}
	
	footer {height:14px; padding-bottom:25px; text-align:left;}
	.share-button {float:left;}
	footer nav {padding:0; float:right;}
	
	.panel {width:700px; left:100px; text-align:left;}
	#final {width:700px;}

}