@font-face {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-style: normal; }
html, body {
  height: 100%;
  -webkit-font-smoothing: antialiased; }

/* haxx */
.typekit-badge {
  display: none !important; }

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

a {
  outline: 0; }

@-webkit-keyframes reveal {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }
@keyframes reveal {
  from {
    opacity: 1;
    transform: scale(1); }
  to {
    opacity: 0;
    transform: scale(10); } }
@keyframes reveal {
  from {
    opacity: 1;
    transform: scale(1); }
  to {
    opacity: 0;
    transform: scale(10); } }
@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    transform: perspective(200px) translate(0px, 10px) rotateX(-2deg); }
  to {
    opacity: 1;
    transform: perspective(200px) translate(0px, 0px) rotateX(0deg); } }
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: perspective(200px) translate(0px, 15px) rotateX(-10deg); }
  to {
    opacity: 1;
    transform: perspective(200px) translate(0px, 0px) rotateX(0deg); } }
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: perspective(200px) translate(0px, 15px) rotateX(-10deg); }
  to {
    opacity: 1;
    -webkit-transform: perspective(200px) translate(0px, 0px) rotateX(0deg); } }
.page {
  color: #000;
  position: relative; }

.page#hero {
  height: 100%;
  overflow: hidden; }

/* hero */
.pane#reveal {
  background-image: radial-gradient(transparent, black);
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 5;
  top: 0; }
.pane#reveal.animate-in {
  -webkit-animation: reveal 2s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: .2s;
  animation: reveal 2s;
  animation-fill-mode: forwards;
  animation-delay: .2s; }

.pane#background {
  height: 100%;
  width: 100%;
  background-color: #000;
  overflow: hidden;
  position: relative; }
.pane#background:after {
  display: block;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  content: "";
  z-index: 1;
  position: absolute; }
.pane#background div {
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: 0;
  background-image: url("/static/meet-maxx.jpg");
  background-size: cover;
  background-position: 50% 50%;
  height: 100%;
  width: 100%;
  opacity: 100%; }
.pane#background div.animate-in {
  -webkit-animation: zoomIn 0.4s cubic-bezier(0.04, 0.73, 0.36, 0.98);
  -webkit-animation-fill-mode: forwards;
  animation: zoomIn 0.4s cubic-bezier(0.04, 0.73, 0.36, 0.98);
  animation-fill-mode: forwards; }

.pane#overlay {
  z-index: 10;
  color: #fff;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 10%;
  right: 10%;
  left: 10%;
  bottom: 10%; }
.pane#overlay header {
    position: absolute;
    top: 40%; }
@media (max-width: 767px) {
  .pane#overlay header {
        top: 20%; } }
    .pane#overlay header h1 {
      margin: 5px 0px;
      text-shadow: 3px 2px 3px rgba(0, 0, 0, 0.5);
      font-weight: 700; }
    .pane#overlay header h3 {
      margin: 0;
      text-transform: lowercase;
      text-shadow: 3px 2px 3px rgba(0, 0, 0, 0.5);
      font-weight: 300;
      -webkit-animation-delay: .5s;
      animation-delay: .5s; }
  .pane#overlay footer {
    opacity: 0;
    position: absolute;
    bottom: 0%;
    width: 100%; }
    .pane#overlay footer.animate-in {
      -webkit-animation: fadeIn .5s;
      animation: fadeIn .5s;
      -webkit-animation-delay: .8s;
      animation-delay: .8s;
      -webkit-animation-fill-mode: forwards;
      animation-fill-mode: forwards; }
  .pane#overlay footer ul {
    list-style: none;
    width: 100%;
    margin: 0px;
    padding: 0px; }
  .pane#overlay footer ul li {
    display: inline-block;
    margin-right: 10%; }
  @media (max-width: 767px) {
    .pane#overlay footer ul li {
      display: block;
      margin-top: 10px; } }
  .pane#overlay a:hover, .pane#overlay a:active {
    border-bottom: 1px dotted #fff; }
  .pane#overlay a {
    color: #fff;
    text-decoration: none;
    text-shadow: -1px 1px 2px rgba(0, 0, 0, 1); }
  .pane#overlay .pane-content {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-style: normal;
    position: relative;
    height: 100%; }
  .pane#overlay header h3, .pane#overlay header h1 {
    opacity: 0; }
    .pane#overlay header h3.animate-in, .pane#overlay header h1.animate-in {
      -webkit-animation: fadeIn .4s;
      animation: fadeIn .4s;
      -webkit-animation-delay: .5s;
      animation-delay: .5s;
      -webkit-animation-fill-mode: forwards;
      animation-fill-mode: forwards; }
  .pane#overlay header h3.animate-in {
    -webkit-animation-delay: .6s;
    animation-delay: 1s; }

@-webkit-keyframes slideUp {
  from {
    opacity: 0;
    -webkit-transform: perspective(200px) translate(0px, 100px) rotateX(-2deg); }
  to {
    opacity: 1;
    -webkit-transform: translate(0px, 0px); } }
@keyframes slideUp {
  from {
    opacity: 0;
    transform: perspective(200px) translate(0px, 100px) rotateX(-2deg); }
  to {
    opacity: 1;
    transform: translate(0px, 0px); } }
.page#scraps .pane {
  position: absolute;
  right: 10%;
  left: 10%;
  top: 5%;
  margin: 30px 0px; }
.page#scraps article {
  padding: 1em 0px;
  opacity: 0; }
  .page#scraps article.animate-in {
    -webkit-animation: slideUp .4s;
    animation: slideUp .4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards; }
    .page#scraps article.animate-in:nth-child(1) {
      -webkit-animation-delay: 0.2s;
      animation-delay: 0.2s; }
    .page#scraps article.animate-in:nth-child(2) {
      -webkit-animation-delay: 0.4s;
      animation-delay: 0.4s; }
    .page#scraps article.animate-in:nth-child(3) {
      -webkit-animation-delay: 0.6s;
      animation-delay: 0.6s; }
  .page#scraps article h3 {
    text-transform: lowercase; }
  .page#scraps article p {
    max-width: 520px;
    line-height: 200%; }