/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* http://meyerweb.com/eric/tools/css/reset/
 * v2.0 | 20110126
 * License: none (public domain) */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none; }

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

body {
  font-size: 100%; }

a, a:visited {
  color: rgba(240, 240, 240, 0.9);
  text-decoration: none; }

h3 {
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-size: 0.75em;
  font-weight: 300;
  line-height: 4.5em;
  letter-spacing: 0.1875em;
  text-transform: uppercase;
  color: rgba(240, 240, 240, 0.9); }

label {
  font-family: 'Roboto Slab', serif;
  font-size: 1em;
  letter-spacing: 3px;
  text-align: center;
  text-transform: uppercase;
  color: rgba(240, 240, 240, 0.9); }

input[type=text], select {
  font-family: 'Lato', sans-serif;
  font-size: 1em;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  color: rgba(240, 240, 240, 0.9); }

input[type=submit], input[type=button] {
  font-family: 'lato', serif;
  font-size: 0.75em;
  font-weight: 400;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
  color: rgba(240, 240, 240, 0.9); }

#effects-wrapper h1 {
  font-family: 'Lato', sans-serif;
  font-size: 8em;
  font-weight: 300;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  color: rgba(240, 240, 240, 0.9); }

.button, .button:visited {
  font-family: 'Lato', sans-serif;
  font-size: 0.875em;
  font-weight: 400;
  letter-spacing: 0.21875em;
  text-align: center;
  text-transform: uppercase; }

#content-wrapper, #text-no-webgl {
  color: rgba(240, 240, 240, 0.9); }
  #content-wrapper h1, #content-wrapper h2, #content-wrapper span.pre-title, #content-wrapper span.legal, #text-no-webgl h1, #text-no-webgl h2, #text-no-webgl span.pre-title, #text-no-webgl span.legal {
    margin: 0 auto;
    font-family: 'Roboto Slab', serif;
    text-transform: uppercase; }
  #content-wrapper span.sub-intro, #content-wrapper p, #text-no-webgl span.sub-intro, #text-no-webgl p {
    font-family: 'Lato', sans-serif;
    font-weight: 300; }
  #content-wrapper h1, #text-no-webgl h1 {
    font-size: 1.75em;
    font-weight: 400;
    line-height: 1.75em;
    letter-spacing: 0.25em; }
  #content-wrapper h2, #text-no-webgl h2 {
    font-size: 1em;
    font-weight: 300;
    line-height: 2em;
    letter-spacing: 0.25em;
    max-width: 15em; }
  #content-wrapper span.pre-title, #content-wrapper a.button, #content-wrapper a.button:visited, #text-no-webgl span.pre-title, #text-no-webgl a.button, #text-no-webgl a.button:visited {
    font-size: 0.875em;
    font-weight: 300;
    letter-spacing: 0.21875em; }
  #content-wrapper span.pre-title, #text-no-webgl span.pre-title {
    line-height: 1.75em; }
  #content-wrapper span.sub-intro, #text-no-webgl span.sub-intro {
    font-size: 0.625em;
    font-weight: 400;
    line-height: 3.125em;
    letter-spacing: 0.125em;
    text-transform: uppercase; }
  #content-wrapper a.button, #text-no-webgl a.button {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    margin: 16px auto;
    width: 6em;
    height: 6em;
    line-height: 6em;
    display: block;
    border-radius: 50%;
    border: 2px solid rgba(240, 240, 240, 0.9);
    transition: background 1s; }
  #content-wrapper a.button:hover, #text-no-webgl a.button:hover {
    background: rgba(67, 203, 187, 0.9); }
  #content-wrapper p, #text-no-webgl p {
    margin-bottom: 1em;
    font-size: 1em;
    font-weight: 300;
    line-height: 1.5em;
    letter-spacing: 0.0625em;
    word-spacing: 0.125em; }
    #content-wrapper p a, #content-wrapper p a:visited, #text-no-webgl p a, #text-no-webgl p a:visited {
      font-weight: 400;
      transition: color 1s; }
    #content-wrapper p a:hover, #text-no-webgl p a:hover {
      color: rgba(67, 203, 187, 0.9); }
  #content-wrapper span.legal, #text-no-webgl span.legal {
    font-size: 0.625em;
    font-weight: 300;
    line-height: 3.125em;
    letter-spacing: 0.25em; }

html {
  margin: 0;
  padding: 0;
  background: #2b3d42; }

body {
  margin: 0 auto;
  padding: 0;
  max-width: 1200px;
  background: #43cbbb url("../img/valley/sky.png") no-repeat;
  background-position: 50% 0%;
  background-attachment: fixed; }

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

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important; }

div.wrapper {
  position: relative;
  margin: 0 auto;
  padding: 0;
  max-width: 1200px;
  height: 1000px; }

.button {
  margin: 2em auto 0 auto;
  padding: 0em;
  width: 4.5em;
  height: 4.5em;
  line-height: 4.5em;
  display: block;
  border-radius: 50%;
  border: 2px solid rgba(240, 240, 240, 0.9);
  transition: background-color 1s; }

.button:hover {
  background-color: rgba(67, 203, 187, 0.9);
  opacity: 1; }

.divide {
  margin: 0 auto;
  padding: 0.5em 0;
  width: 100%;
  height: 30px;
  background: url("../img/divide.png") no-repeat;
  background-position: 50% top; }

.divide:first-of-type {
  padding-bottom: 1.5em; }

.divide:last-of-type {
  padding-top: 1.5em;
  transform: scaleY(-1); }

hr {
  margin-top: 2em;
  width: 2.5em;
  height: 1px;
  border: 0;
  background: rgba(240, 240, 240, 0.9); }

.edit.button {
  opacity: 0; }

.edit.button:hover {
  opacity: 1; }

#edit-wrapper {
  display: none;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1000; }
  #edit-wrapper .edit-inner {
    margin: 10px auto;
    padding: 1em 2em;
    width: 300px;
    min-height: 460px;
    background: rgba(30, 30, 20, 0.95);
    border-radius: 0.5em;
    color: rgba(240, 240, 240, 0.9); }
    #edit-wrapper .edit-inner form .group {
      padding: 0.5em 0;
      width: 100%;
      text-align: center; }
    #edit-wrapper .edit-inner form label {
      margin: 0.5em 0;
      line-height: 2.5em;
      width: 100%;
      box-sizing: border-box; }
    #edit-wrapper .edit-inner form input[type=text], #edit-wrapper .edit-inner form select {
      margin: 0.5em 0;
      width: 100%;
      height: 2em;
      line-height: 2em;
      box-sizing: border-box;
      background: none;
      border-radius: 5px;
      border: 1px solid rgba(240, 240, 240, 0.9); }
    #edit-wrapper .edit-inner form select {
      padding: 0; }
      #edit-wrapper .edit-inner form select option {
        text-align: center;
        padding-top: 0.5em;
        height: 2em; }
    #edit-wrapper .edit-inner form input[type=submit], #edit-wrapper .edit-inner form input[type=button] {
      margin: 1.5em;
      width: 6.5em;
      height: 6.5em;
      line-height: 5.5em;
      text-align: center;
      border-radius: 50%;
      border: 2px solid rgba(240, 240, 240, 0.9);
      background: none;
      transition: background-color 1s; }
    #edit-wrapper .edit-inner form input[type=submit]:hover {
      cursor: pointer;
      background-color: rgba(67, 203, 187, 0.9); }
    #edit-wrapper .edit-inner form input[type=button]:hover {
      cursor: pointer;
      background-color: rgba(180, 109, 99, 0.9); }

#effects-wrapper {
  position: relative; }

#text-wrapper, #text-no-webgl {
  position: relative;
  margin: 0 auto;
  width: 100%;
  min-height: 480px; }

#text-no-webgl {
  display: none; }
  #text-no-webgl canvas {
    display: none; }
  #text-no-webgl p {
    margin: 0 auto;
    padding: 16px;
    max-width: 480px;
    text-align: justify; }

.text-inner {
  padding-top: 128px;
  text-align: center;
  max-width: 1200px;
  z-index: 999; }

#ThreeD-1, #ThreeD-2 {
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
  max-width: 1200px;
  max-height: 120px;
  text-align: center;
  z-index: 999; }

#ThreeD-1 {
  top: 0; }

#ThreeD-2 {
  top: 120px; }

#valley-wrapper {
  position: relative;
  display: block; }

.valley {
  margin: 0 auto;
  width: 100%;
  height: 480px;
  max-width: 1200px;
  max-height: 1025px; }

#valley-1 {
  background: url("../img/valley/valley-1f.png") no-repeat; }

#valley-2 {
  background: url("../img/valley/valley-2.png") no-repeat;
  opacity: 0.9; }

#valley-3 {
  background: url("../img/valley/valley-3.png") no-repeat;
  opacity: 0.85; }

#valley-4 {
  background: url("../img/valley/valley-4.png") no-repeat;
  opacity: 0.8; }

#valley-5 {
  background: url("../img/valley/valley-5.png") no-repeat;
  opacity: 0.75; }

#valley-6 {
  background: url("../img/valley/valley-6b.png") no-repeat;
  opacity: 0.8; }

#valley-1, #valley-2, #valley-3, #valley-4, #valley-5, #valley-6 {
  position: absolute;
  background-size: 100% 100%;
  transition: transform 0.25s; }

#content-wrapper {
  position: relative;
  background: #2b3d42; }
  #content-wrapper #content {
    position: absolute;
    width: 100%;
    background: #2b3d42; }
    #content-wrapper #content header, #content-wrapper #content main, #content-wrapper #content footer {
      margin: 0 auto;
      max-width: 540px;
      text-align: center;
      display: block;
      color: rgba(240, 240, 240, 0.9); }
    #content-wrapper #content header {
      text-align: center; }
    #content-wrapper #content main {
      padding: 1em;
      text-align: justify; }
    #content-wrapper #content main:hover p a {
      color: rgba(67, 203, 187, 0.9); }
    #content-wrapper #content footer {
      padding: 1em 0; }
      #content-wrapper #content footer ul {
        margin: 0 auto;
        padding: 1em 0 2em 0;
        list-style-type: none;
        text-align: center; }
        #content-wrapper #content footer ul li {
          display: inline;
          padding: 0 1em; }
