/* normalize.css v2.0.1 | MIT License | git.io/normalize */
/* normalize.css v2.0.1 | HTML5 Display Definitions | MIT License | git.io/normalize */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }

audio, canvas, video { display: inline-block; }

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

[hidden] { display: none; }

/* normalize.css v2.0.1 | Base | MIT License | git.io/normalize */
html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; }

/* normalize.css v2.0.1 | Links | MIT License | git.io/normalize */
a:focus { outline: thin dotted; }

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

/* normalize.css v2.0.1 | Typography | MIT License | git.io/normalize */
h1 { font-size: 2em; }

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

b, strong { font-weight: bold; }

dfn { font-style: italic; }

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

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

pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: "\201C" "\201D" "\2018" "\2019"; }

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; }

/* normalize.css v2.0.1 | Embedded Content | MIT License | git.io/normalize */
img { border: 0; }

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

/* normalize.css v2.0.1 | Figures | MIT License | git.io/normalize */
figure { margin: 0; }

/* normalize.css v2.0.1 | Forms | MIT License | git.io/normalize */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

legend { border: 0; padding: 0; }

button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; }

button, input { line-height: normal; }

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

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

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

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-cancel-button, 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; }

/* normalize.css v2.0.1 | Tables | MIT License | git.io/normalize */
table { border-collapse: collapse; border-spacing: 0; }

a, p, h1, h2, h3, h4, h5, h6, ul, ol { padding: 0; margin: 0; }

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

* html { font-size: 93.75%; }

html { font-size: 15px; line-height: 20px; }

@-moz-keyframes fadeInH1 { 0% { opacity: 0; -moz-transform: translatex(-1em); transform: translatex(-1em); }
  100% { opacity: 1; } }

@-webkit-keyframes fadeInH1 { 0% { opacity: 0; -webkit-transform: translatex(-1em); transform: translatex(-1em); }
  100% { opacity: 1; } }

@-o-keyframes fadeInH1 { 0% { opacity: 0; -o-transform: translatex(-1em); transform: translatex(-1em); }
  100% { opacity: 1; } }

@-ms-keyframes fadeInH1 { 0% { opacity: 0; -ms-transform: translatex(-1em); transform: translatex(-1em); }
  100% { opacity: 1; } }

@keyframes fadeInH1 { 0% { opacity: 0; transform: translatex(-1em); }
  100% { opacity: 1; } }

@-moz-keyframes fadeInH2 { 0% { opacity: 0; -moz-transform: translatex(-0.6em); transform: translatex(-0.6em); }
  40% { opacity: 0; -moz-transform: translatex(-0.6em); transform: translatex(-0.6em); }
  100% { opacity: 1; } }

@-webkit-keyframes fadeInH2 { 0% { opacity: 0; -webkit-transform: translatex(-0.6em); transform: translatex(-0.6em); }
  40% { opacity: 0; -webkit-transform: translatex(-0.6em); transform: translatex(-0.6em); }
  100% { opacity: 1; } }

@-o-keyframes fadeInH2 { 0% { opacity: 0; -o-transform: translatex(-0.6em); transform: translatex(-0.6em); }
  40% { opacity: 0; -o-transform: translatex(-0.6em); transform: translatex(-0.6em); }
  100% { opacity: 1; } }

@-ms-keyframes fadeInH2 { 0% { opacity: 0; -ms-transform: translatex(-0.6em); transform: translatex(-0.6em); }
  40% { opacity: 0; -ms-transform: translatex(-0.6em); transform: translatex(-0.6em); }
  100% { opacity: 1; } }

@keyframes fadeInH2 { 0% { opacity: 0; transform: translatex(-0.6em); }
  40% { opacity: 0; transform: translatex(-0.6em); }
  100% { opacity: 1; } }

body { color: #222222; }

p, ul, pre, code, td { font-size: 13px; line-height: 20px; margin-bottom: 20px; }
@media (min-width: 51.65625em) { p, ul, pre, code, td { font-size: 16px; line-height: 20px; }
  p.matty, ul.matty, pre.matty, code.matty, td.matty { margin-right: 0; float: right; } }
@media (min-width: 78.65625em) { p, ul, pre, code, td { font-size: 19px; line-height: 30px; } }

.kern-ty { letter-spacing: 0em; }

body { font-family: Unica SB, Helvetica Neue, Arial, sans-serif; }

#landing p { text-shadow: 0 0 1px rgba(0, 0, 0, 0.7); }
#landing p, #landing ul { color: #d9f5f8; }
#landing h1 { text-shadow: 0 0 7px rgba(255, 255, 255, 0.5); font-size: 75px; line-height: 80px; letter-spacing: -0.05em; font-weight: normal; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-name: fadeInH1; -moz-animation-name: fadeInH1; -ms-animation-name: fadeInH1; -o-animation-name: fadeInH1; animation-name: fadeInH1; }
@media (min-width: 51.65625em) { #landing h1 { width: 47.93926%; float: left; margin-right: 4.12148%; text-align: right; font-size: 95px; line-height: 100px; } }
@media (min-width: 78.65625em) { #landing h1 { width: 42.3231%; float: left; margin-right: 2.53672%; font-size: 160px; line-height: 170px; } }
#landing h2, #landing h3, #landing h4 { text-shadow: 0 0 4px rgba(0, 0, 0, 0.85); }
#landing h2 { font-size: 30px; line-height: 40px; color: #d9f5f8; -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; -ms-animation-duration: 1.5s; -o-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-name: fadeInH2; -moz-animation-name: fadeInH2; -ms-animation-name: fadeInH2; -o-animation-name: fadeInH2; animation-name: fadeInH2; }
@media (min-width: 51.65625em) { #landing h2 { width: 100%; padding-left: 52.06074%; font-size: 35px; line-height: 30px; position: absolute; bottom: 15%; } }
@media (min-width: 78.65625em) { #landing h2 { width: 100%; padding-left: 51.26836%; font-size: 55px; line-height: 50px; } }
@media (min-width: 51.65625em) { #landing h3 { width: 47.93926%; float: left; margin-right: 4.12148%; } }
@media (min-width: 78.65625em) { #landing h3 { width: 42.3231%; float: left; margin-right: 2.53672%; } }
@media (min-width: 51.65625em) { #landing h4 { width: 100%; text-align: right; padding-right: 52.06074%; } }
@media (min-width: 78.65625em) { #landing h4 { padding-right: 57.6769%; } }
#landing h3, #landing h4 { color: #d9f5f8; }
@media (min-width: 51.65625em) { #landing h3, #landing h4 { text-align: right; } }

h1 { letter-spacing: -0.05em; }
@media (min-width: 51.65625em) { h1 { width: 27.11497%; float: left; margin-right: 4.12148%; text-align: right; } }
@media (min-width: 78.65625em) { h1 { width: 29.50601%; float: left; margin-right: 2.53672%; } }

h2 { color: #d9f5f8; }

h2, header h3 { font-weight: 300; }
@media (min-width: 51.65625em) { h2, header h3 { width: 100%; padding-left: 31.23644%; } }
@media (min-width: 78.65625em) { h2, header h3 { width: 100%; padding-left: 32.04272%; } }

h3, h4 { display: block; }

h3, h4 { margin-bottom: 40px; }

h1, h2, h3 { font-size: 28px; line-height: 40px; }
@media (min-width: 51.65625em) { h1, h2, h3 { font-size: 32px; line-height: 40px; } }
@media (min-width: 78.65625em) { h1, h2, h3 { font-size: 35px; line-height: 40px; } }

h4, section > ul > li { font-size: 22px; line-height: 30px; }
@media (min-width: 51.65625em) { h4, section > ul > li { font-size: 24px; line-height: 30px; } }
@media (min-width: 78.65625em) { h4, section > ul > li { font-size: 30px; line-height: 40px; } }

a { text-shadow: 0 0 1px rgba(0, 0, 0, 0.1); text-decoration: none; color: #4db0c4; }
a:hover { color: #c0e3ea; text-decoration: underline; }

ul, ol { font-weight: bolder; }

li { margin-top: 10px; }

pre { font-family: "Courier New",Courier; display: block; font-size: 13px; line-height: 20px; background: #f8f8f8; padding: 0.5em; }

table { margin: 0 0 20px 0; font-size: 13px; line-height: 20px; background-color: #f8f8f8; border-collapse: collapse; }

tr { border-bottom: 1px dotted #894536; }

tr:first-child { border-top: 1px dotted #894536; }

tr:nth-child(even) { padding: 2em; background-color: #eeeeee; }

td { border: 0px solid #d9f5f8; padding: 1em 2em 1em 0.5em; }

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

img { vertical-align: bottom; }

html { height: 100%; background: url("../images/talking-all-that-noise.png") #c83422; min-width: 305px; position: relative; }

body { min-height: 100%; -ms-overflow-x: hidden; overflow-x: hidden; padding-left: 1.8em; padding-right: 1.8em; }
@media (min-width: 51.65625em) { body { width: auto; margin-left: auto; margin-right: auto; padding-left: 4.5em; padding-right: 4.5em; }
  body:after { content: ""; display: table; clear: both; } }

div, article#manual { margin-top: 0px; padding-top: 60px; padding-bottom: 40px; margin-bottom: 0px; }
@media (min-width: 51.65625em) { div, article#manual { margin-top: 0px; padding-top: 80px; padding-bottom: 100px; margin-bottom: 0px; } }
@media (min-width: 78.65625em) { div, article#manual { margin-top: 0px; padding-top: 140px; padding-bottom: 160px; margin-bottom: 0px; } }

@-moz-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }

@-webkit-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }

@-o-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }

@-ms-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }

@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }

img.overlay { padding: 0; position: absolute; right: 1.8em; top: 1em; width: 27%; max-width: 100%; -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; -ms-animation-duration: 1.5s; -o-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -ms-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; }
@media (min-width: 51.65625em) { img.overlay { top: 0; right: auto; left: -2em; } }

#landing header { position: relative; width: 100%; }
@media (min-width: 51.65625em) { #landing header { margin-top: 120px; padding-top: 0px; padding-bottom: 0px; margin-bottom: 140px; } }
@media (min-width: 65.15625em) { #landing header { margin-top: 150px; padding-top: 0px; padding-bottom: 0px; margin-bottom: 150px; } }
@media (min-width: 78.65625em) { #landing header { margin-top: 170px; padding-top: 0px; padding-bottom: 0px; margin-bottom: 160px; } }
@media (min-width: 105.65625em) { #landing header { margin-top: 260px; padding-top: 0px; padding-bottom: 0px; margin-bottom: 180px; } }

header { margin-top: 60px; padding-top: 0px; padding-bottom: 0px; margin-bottom: 60px; }

@-moz-keyframes fadeInDelay { 0% { opacity: 0; }
  66% { opacity: 0; }
  100% { opacity: 1; } }

@-webkit-keyframes fadeInDelay { 0% { opacity: 0; }
  66% { opacity: 0; }
  100% { opacity: 1; } }

@-o-keyframes fadeInDelay { 0% { opacity: 0; }
  66% { opacity: 0; }
  100% { opacity: 1; } }

@-ms-keyframes fadeInDelay { 0% { opacity: 0; }
  66% { opacity: 0; }
  100% { opacity: 1; } }

@keyframes fadeInDelay { 0% { opacity: 0; }
  66% { opacity: 0; }
  100% { opacity: 1; } }

#landing #content { -webkit-box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5), 0 0 100px rgba(255, 255, 255, 0.2); -moz-box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5), 0 0 100px rgba(255, 255, 255, 0.2); box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5), 0 0 100px rgba(255, 255, 255, 0.2); background: url("../images/talking-all-that-noise.png") #42110b; }
@media (min-width: 51.65625em) { #landing #content p { display: block; width: 47.93926%; float: left; margin-right: 4.12148%; }
  #landing #content p:nth-child(2) { text-align: right; }
  #landing #content p:nth-child(3) { margin-top: 30px; }
  #landing #content p:nth-child(1n+3) { float: right; margin-right: 0; }
  #landing #content p:nth-child(1n+4) { clear: both; } }
@media (min-width: 78.65625em) { #landing #content p { display: block; }
  #landing #content p:nth-child(2) { width: 42.3231%; }
  #landing #content p:nth-child(2) { text-align: right; }
  #landing #content p:nth-child(1n+3) { float: right; margin-right: 0; }
  #landing #content p:nth-child(1n+4) { clear: both; } }

#landing #features { -webkit-box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.3); -moz-box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.3); box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.3); position: relative; background: url("../images/talking-all-that-noise.png") #e24d3b; }
#landing #features li { list-style: none; }
#landing #features img { float: right; max-width: 33%; top: -7em; position: relative; }
@media (min-width: 51.65625em) { #landing #features img { position: absolute; right: auto; left: 4.5em; top: auto; bottom: 6em; } }

#landing #content *, #landing #features * { -webkit-animation-duration: 2.2s; -moz-animation-duration: 2.2s; -ms-animation-duration: 2.2s; -o-animation-duration: 2.2s; animation-duration: 2.2s; -webkit-animation-name: fadeInDelay; -moz-animation-name: fadeInDelay; -ms-animation-name: fadeInDelay; -o-animation-name: fadeInDelay; animation-name: fadeInDelay; }

@media (min-width: 51.65625em) { #landing #features ul, #landing #screenshots ul { width: 47.93926%; float: right; margin-right: 0; } }
@media (min-width: 78.65625em) { #landing #features ul, #landing #screenshots ul { width: 48.73164%; float: right; margin-right: 0; } }

#landing #content, #landing #features, #landing #screenshots, article#manual, footer { margin-left: -1.8em; padding-left: 1.8em; margin-right: -1.8em; padding-right: 1.8em; }
@media (min-width: 51.65625em) { #landing #content, #landing #features, #landing #screenshots, article#manual, footer { margin-left: -4.5em; padding-left: 4.5em; margin-right: -4.5em; padding-right: 4.5em; } }

#landing #screenshots { -webkit-box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3); }
#landing #screenshots ul { list-style: none; }
@media (min-width: 105.65625em) { #landing #screenshots li { width: 47.39726%; float: left; margin-right: 5.20548%; }
  #landing #screenshots li:nth-child(2n) { float: right; margin-right: 0; } }
#landing #screenshots a { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; min-height: 10em; border: 1em solid #0b0201; -webkit-box-shadow: 0 0 0.5em #c15145, 0 0 12em #1e464e inset; -moz-box-shadow: 0 0 0.5em #c15145, 0 0 12em #1e464e inset; box-shadow: 0 0 0.5em #c15145, 0 0 12em #1e464e inset; padding: 2em 1em; background-color: black; background: black; display: block; text-align: center; margin-bottom: 2em; }
#landing #screenshots a img { vertical-align: middle; max-width: 100%; height: auto; }

article#manual { background: url("../images/talking-all-that-noise.png") #eeeeee; -webkit-box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3); }
article#manual section { position: relative; }
@media (max-width: 51.65625em) { article#manual section { max-width: 35em; } }
article#manual section hr { border: 1px solid #894536; }
@media (min-width: 51.65625em) { article#manual section { margin-top: 40px; padding-top: 0px; padding-bottom: 0px; margin-bottom: 40px; padding-left: 31.23644%; }
  article#manual section h3 { position: absolute; margin-top: -0.05em; left: 0; width: 27.11497%; text-align: right; }
  article#manual section hr { width: 68.76356%; position: absolute; margin-top: -0.5em; } }
@media (min-width: 78.65625em) { article#manual section { padding-left: 32.04272%; }
  article#manual section h3 { width: 29.50601%; }
  article#manual section hr { width: 67.95728%; } }
article#manual ul, article#manual ol { list-style: none; }

#Zoomer { position: fixed; top: 0; z-index: 9; width: 100%; height: 100%; padding: 4em 2em; display: none; background: rgba(0, 0, 0, 0.5) url("../images/stripey-dark.png") repeat; margin-left: -1.8em; }
@media (min-width: 51.65625em) { #Zoomer { margin-left: -4.5em; } }
#Zoomer img { border: 2em solid black; margin: auto; display: block; max-width: 100%; width: auto; -webkit-box-shadow: 0em 1em 3em black; -moz-box-shadow: 0em 1em 3em black; box-shadow: 0em 1em 3em black; }
#Zoomer .control-icon { width: 5em; height: 5em; position: absolute; top: 2.5em; right: 10%; z-index: 30; background: url(../images/close-button.svg); -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; opacity: 0.8; }
#Zoomer .control-icon:hover { opacity: 1; }

footer { margin-top: 0px; padding-top: 80px; padding-bottom: 40px; margin-bottom: 0px; background: url("../images/talking-all-that-noise.png") #42110b; -webkit-box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5), -30px 0 70px rgba(255, 255, 255, 0.3); -moz-box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5), -30px 0 70px rgba(255, 255, 255, 0.3); box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5), -30px 0 70px rgba(255, 255, 255, 0.3); }
footer p { float: left; margin-right: 3em; }

#landing header, #landing #content, #landing #features, #landing #screenshots, article#manual, footer { *zoom: 1; }
#landing header:after, #landing #content:after, #landing #features:after, #landing #screenshots:after, article#manual:after, footer:after { content: ""; display: table; clear: both; }

#landing h1, #landing h2, img.overlay, #landing #content *, #landing #features * { -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; -ms-animation-fill-mode: backwards; -o-animation-fill-mode: backwards; animation-fill-mode: backwards; }

header a:link {
  color: #222222;
  text-decoration: none;
}

header a:visited {
  color: #222222;
  text-decoration: none;
}

header a:hover {
  color: #222222;
  text-decoration: none;
}

header a:active {
  color: #222222;
  text-decoration: none;
}
