/* 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" /> */
/* line 17, ../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
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: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

/* line 22, ../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html {
  line-height: 1;
}

/* line 24, ../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
ol, ul {
  list-style: none;
}

/* line 26, ../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 28, ../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

/* line 30, ../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
  quotes: none;
}
/* line 103, ../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

/* line 32, ../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
a img {
  border: none;
}

/* line 116, ../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

@-webkit-keyframes rotate {
  /* line 3, ../sass/pres/_pres.scss */
  from {
    -webkit-transform: rotate(0deg);
  }

  /* line 6, ../sass/pres/_pres.scss */
  to {
    -webkit-transform: rotate(360deg);
  }
}

/* line 11, ../sass/pres/_pres.scss */
html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* line 17, ../sass/pres/_pres.scss */
body {
  position: relative;
  -webkit-perspective-origin: center center;
  -webkit-transform-style: preserve-3d;
}

/* line 23, ../sass/pres/_pres.scss */
aside {
  display: none;
}

/* line 27, ../sass/pres/_pres.scss */
#ground {
  position: fixed;
  pointer-events: none;
}

/* line 32, ../sass/pres/_pres.scss */
#deck {
  position: absolute;
  left: 50%;
  top: -50%;
  width: 100%;
  height: 100%;
  -webkit-perspective-origin: center center;
  -webkit-transform-style: preserve-3d;
}

/* line 42, ../sass/pres/_pres.scss */
#hud {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

/* line 50, ../sass/pres/_pres.scss */
#preloader {
  display: -webkit-flex;
  -webkit-flex-direction: column;
  -webkit-align-items: center;
  -webkit-justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #efefef;
}

/* line 61, ../sass/pres/_pres.scss */
#progressHolder {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 5px;
  width: 100%;
  background: #111;
}

/* line 70, ../sass/pres/_pres.scss */
#progressBar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 5px;
  background: #333;
}

/* line 78, ../sass/pres/_pres.scss */
.spinner {
  width: 50px;
  height: 50px;
  background: #333;
  border-radius: 50px;
  -webkit-animation: rotate 0.5s infinite linear;
}

/* line 86, ../sass/pres/_pres.scss */
.slide {
  display: -webkit-flex;
  -webkit-flex-direction: column;
  -webkit-align-items: center;
  -webkit-justify-content: center;
  position: absolute;
  top: -50%;
  left: -50%;
  width: 100%;
  height: 100%;
  opacity: 0;
}

/* line 99, ../sass/pres/_pres.scss */
.hud-input {
  position: absolute;
  top: 0;
  height: 5rem;
  width: 100%;
  padding: .5rem;
  font-size: 4rem;
  font-weight: 800;
  line-height: 5rem;
  color: #333;
  background-color: #efefef;
  z-index: 20;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  -webkit-transform: translateZ(0) rotateX(-90deg);
  -moz-transform: translateZ(0) rotateX(-90deg);
  -ms-transform: translateZ(0) rotateX(-90deg);
  -o-transform: translateZ(0) rotateX(-90deg);
  transform: translateZ(0) rotateX(-90deg);
  -webkit-transform-origin: top center;
  -moz-transform-origin: top center;
  -ms-transform-origin: top center;
  -o-transform-origin: top center;
  transform-origin: top center;
}
/* line 115, ../sass/pres/_pres.scss */
.hud-input.in {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

/* line 120, ../sass/pres/_pres.scss */
.hud-list {
  position: relative;
  -webkit-perspective: 10000;
  z-index: 0;
}

/* line 126, ../sass/pres/_pres.scss */
.hud-list-item {
  position: relative;
  padding: 1rem;
  text-transform: uppercase;
  text-align: center;
  font-size: 4rem;
  font-weight: 100;
  color: white;
  font-family: 'open-sans-condensed', sans-serif;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  z-index: 1;
}
/* line 142, ../sass/pres/_pres.scss */
.hud-list-item.prev {
  -webkit-transform: scale(1) rotateX(60deg);
  -moz-transform: scale(1) rotateX(60deg);
  -ms-transform: scale(1) rotateX(60deg);
  -o-transform: scale(1) rotateX(60deg);
  transform: scale(1) rotateX(60deg);
}
/* line 146, ../sass/pres/_pres.scss */
.hud-list-item.next {
  -webkit-transform: scale(1) rotateX(-60deg);
  -moz-transform: scale(1) rotateX(-60deg);
  -ms-transform: scale(1) rotateX(-60deg);
  -o-transform: scale(1) rotateX(-60deg);
  transform: scale(1) rotateX(-60deg);
}
/* line 150, ../sass/pres/_pres.scss */
.hud-list-item.primed {
  background-color: rgba(155, 0, 0, 0.5);
  z-index: 5;
}
/* line 155, ../sass/pres/_pres.scss */
.hud-list-item.selected {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
  background-color: rgba(255, 0, 0, 0.6);
  z-index: 10;
}

/* line 16, ../sass/screen.scss */
body {
  font-family: 'open-sans', sans-serif;
  font-size: 1.5rem;
}

/* line 21, ../sass/screen.scss */
h2 {
  font-family: 'open-sans-condensed', sans-serif;
  /*font-family: 'voltaire', sans-serif;*/
  font-weight: 800;
  font-size: 7rem;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 1rem;
  max-width: 80%;
}

/* line 32, ../sass/screen.scss */
h3 {
  font-size: 3rem;
  font-weight: 600;
}

/* line 37, ../sass/screen.scss */
h5 {
  font-family: 'open-sans-condensed', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* line 44, ../sass/screen.scss */
iframe {
  background: white;
}

/* line 48, ../sass/screen.scss */
.title--thin {
  font-weight: 100;
}

/* line 52, ../sass/screen.scss */
a {
  color: #209dc2;
  text-decoration: none;
  font-weight: 800;
  text-shadow: 0px 0px 20px black;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
/* line 59, ../sass/screen.scss */
a:hover {
  color: #2a94dd;
  text-shadow: 0px 0px 5px black;
}

/* line 65, ../sass/screen.scss */
code {
  font-family: courier;
  color: #333;
  padding: 1.5rem;
  margin: 1rem;
  border-radius: .5rem;
  background: rgba(255, 255, 255, 0.8);
  text-shadow: none;
}

/* line 75, ../sass/screen.scss */
li {
  margin: 1rem;
}

/* line 79, ../sass/screen.scss */
.slide {
  color: #efefef;
  text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

/* line 85, ../sass/screen.scss */
.slide--white {
  background-color: #efefef;
  color: #333;
  border-radius: 3px;
}

/* line 91, ../sass/screen.scss */
.slide--blue {
  background-color: rgba(32, 157, 194, 0.5);
  color: #efefef;
  border-radius: 3px;
}

/* line 97, ../sass/screen.scss */
.slide--black {
  background-color: rgba(49, 48, 51, 0.9);
  color: #efefef;
  border-radius: 3px;
}

/* line 103, ../sass/screen.scss */
.slide--gray {
  background-color: rgba(225, 103, 23, 0.5);
  color: #efefef;
  border-radius: 3px;
}

/* line 109, ../sass/screen.scss */
.status:before {
  position: absolute;
  content: "";
  top: 0;
  left: -50%;
  width: 100%;
  height: 100px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: top center;
  -moz-transform-origin: top center;
  -ms-transform-origin: top center;
  -o-transform-origin: top center;
  transform-origin: top center;
}

/* line 120, ../sass/screen.scss */
.status--blue:before {
  background-color: #209dc2;
}

/* line 124, ../sass/screen.scss */
.status--gray:before {
  background-color: #e16717;
}

/* line 128, ../sass/screen.scss */
.status-bar {
  position: absolute;
  top: 0;
  left: -50%;
  width: 100%;
  height: 100px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: top center;
  -moz-transform-origin: top center;
  -ms-transform-origin: top center;
  -o-transform-origin: top center;
  transform-origin: top center;
}

/* line 138, ../sass/screen.scss */
.demo-vp-label {
  text-align: left;
  font-size: 3rem;
  font-weight: 100;
  line-height: 1.5;
  margin: 0 auto;
  width: 25vw;
  min-width: 7em;
}

/* line 148, ../sass/screen.scss */
.demo-rem-label {
  display: -webkit-flex;
  -webkit-flex-direction: row;
  width: 80vw;
  font-size: 5rem;
  font-weight: 100;
}
/* line 155, ../sass/screen.scss */
.demo-rem-label * {
  -webkit-flex: 1;
  text-align: center;
}

/* line 161, ../sass/screen.scss */
.text--orange {
  color: #e16717;
  font-weight: bold;
}

/* line 166, ../sass/screen.scss */
.text--blue {
  color: #209dc2;
  font-weight: bold;
}

/* line 171, ../sass/screen.scss */
.chart-labels {
  position: absolute;
  margin: 0 20vw;
  bottom: 7rem;
  display: -webkit-flex;
  -webkit-flex-direction: row;
  width: 60vw;
  opacity: 0;
}
/* line 180, ../sass/screen.scss */
.chart-labels * {
  -webkit-flex: 1;
  text-align: center;
  width: 100px;
}

/* line 187, ../sass/screen.scss */
.chart-data {
  position: absolute;
  margin: 0 20vw;
  bottom: 3rem;
  display: -webkit-flex;
  -webkit-flex-direction: row;
  width: 60vw;
  font-weight: 600;
  font-size: 2rem;
  opacity: 0;
}
/* line 199, ../sass/screen.scss */
.chart-data * {
  -webkit-flex: 1;
  text-align: center;
  width: 100px;
}

/* line 206, ../sass/screen.scss */
.chart-title {
  position: absolute;
  top: 2rem;
  width: 100vw;
  text-align: center;
}
/* line 212, ../sass/screen.scss */
.chart-title h3 {
  margin-bottom: 2rem;
}

/* line 217, ../sass/screen.scss */
.byline {
  font-size: 1.5rem;
}

/* line 221, ../sass/screen.scss */
.filter-demo-container {
  position: relative;
}
/* line 224, ../sass/screen.scss */
.filter-demo-container .frame-iphone {
  position: relative;
  pointer-events: none;
}
/* line 229, ../sass/screen.scss */
.filter-demo-container iframe {
  position: absolute;
  top: 150px;
  left: 95px;
}

/* line 236, ../sass/screen.scss */
.canvas-demo-container {
  position: relative;
}
/* line 239, ../sass/screen.scss */
.canvas-demo-container .frame-nexus10 {
  position: relative;
  pointer-events: none;
}
/* line 244, ../sass/screen.scss */
.canvas-demo-container iframe {
  position: absolute;
  top: 83px;
  left: 73px;
  -webkit-transform: scale(0.7);
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  transform-origin: left top;
  background: white;
}

/* line 254, ../sass/screen.scss */
#about {
  background-image: url(../assets/images/president.jpg);
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
}

/*FLEX*/
/* line 263, ../sass/screen.scss */
#flex-demo-container {
  display: -webkit-flex;
  width: 50vw;
  height: 50vh;
  background: #e17f40;
  -webkit-flex-direction: column;
  text-align: center;
}

/* line 272, ../sass/screen.scss */
.flex-demo-section {
  background: #e17f40;
  margin: 1rem;
}

/* line 277, ../sass/screen.scss */
#flex-demo-section-1 {
  width: 100px;
}

/* line 281, ../sass/screen.scss */
#flex-demo-section-2 {
  -webkit-flex: 1;
}

/* line 285, ../sass/screen.scss */
#flex-demo-section-3 {
  -webkit-flex: 2;
}

/* line 289, ../sass/screen.scss */
#flex-demo-header {
  -webkit-flex: 2;
}

/* line 293, ../sass/screen.scss */
#flex-demo-footer {
  -webkit-flex: 1;
}

/* line 297, ../sass/screen.scss */
#flex-demo-body {
  display: -webkit-flex;
  background: white;
  -webkit-flex: 5;
  -webkit-flex-direction: row;
}
/* line 302, ../sass/screen.scss */
#flex-demo-body * {
  background: gray;
}

/* line 307, ../sass/screen.scss */
.flex-demo-box {
  display: -webkit-flex;
  -webkit-flex-direction: column;
  -webkit-align-items: center;
  -webkit-justify-content: center;
}

/*GRID*/
/* line 316, ../sass/screen.scss */
#grid-demo-container {
  background: white;
  display: -ms-grid;
  -ms-grid-columns: 100px 1fr 100px;
  -ms-grid-rows: 100px 1fr 100px;
  width: 500px;
  height: 400px;
}
/* line 324, ../sass/screen.scss */
#grid-demo-container * {
  background: #e16717;
}

/*REGION*/
/* line 331, ../sass/screen.scss */
#region-demo-content {
  -webkit-flow-into: region-demo;
  flow-into: region-demo;
}

/* line 336, ../sass/screen.scss */
#region-demo-container {
  position: relative;
  width: 70vw;
  height: 50vh;
}

/* line 342, ../sass/screen.scss */
.region-demo-region {
  display: inline-block;
  width: 22vw;
  height: 50vh;
  padding: .5vw;
  background: #e16717;
  -webkit-flow-from: region-demo;
  flow-from: region-demo;
}
/* line 351, ../sass/screen.scss */
.region-demo-region:first-child {
  position: absolute;
  top: 0;
  left: 0;
}
/* line 357, ../sass/screen.scss */
.region-demo-region:last-child {
  position: absolute;
  top: 0;
  right: 0;
}

/*FILTER*/
/* line 366, ../sass/screen.scss */
#filter-list-container {
  margin: auto;
  max-width: 70vw;
  text-align: center;
}
/* line 371, ../sass/screen.scss */
#filter-list-container .filter-list-item {
  display: inline-block;
  margin: 1rem .5rem;
  cursor: pointer;
  color: white;
  text-align: center;
}
/* line 378, ../sass/screen.scss */
#filter-list-container .filter-list-item img {
  display: block;
  margin: .5rem auto;
}

/* line 385, ../sass/screen.scss */
.filter-list {
  border-radius: .5rem;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  border: 2px solid transparent;
}
/* line 390, ../sass/screen.scss */
.filter-list.active, .filter-list:hover {
  border: 2px solid white;
}

/* line 396, ../sass/screen.scss */
#filter-list-saturate.active, #filter-list-saturate:hover {
  -webkit-filter: saturate(10);
}

/* line 402, ../sass/screen.scss */
#filter-list-contrast.active, #filter-list-contrast:hover {
  -webkit-filter: contrast(10);
}

/* line 408, ../sass/screen.scss */
#filter-list-grayscale.active, #filter-list-grayscale:hover {
  -webkit-filter: grayscale(1);
}

/* line 414, ../sass/screen.scss */
#filter-list-brightness.active, #filter-list-brightness:hover {
  -webkit-filter: brightness(2);
}

/* line 420, ../sass/screen.scss */
#filter-list-hue.active, #filter-list-hue:hover {
  -webkit-filter: hue-rotate(180deg);
}

/* line 426, ../sass/screen.scss */
#filter-list-blur.active, #filter-list-blur:hover {
  -webkit-filter: blur(5px);
}

/* line 432, ../sass/screen.scss */
#filter-list-sepia.active, #filter-list-sepia:hover {
  -webkit-filter: sepia(1);
}

/* line 438, ../sass/screen.scss */
#filter-list-invert.active, #filter-list-invert:hover {
  -webkit-filter: invert(1);
}

/* line 444, ../sass/screen.scss */
#filter-list-shadow.active, #filter-list-shadow:hover {
  -webkit-filter: drop-shadow(10px 10px 20px black);
}

/* line 450, ../sass/screen.scss */
#filter-list-opacity.active, #filter-list-opacity:hover {
  -webkit-filter: opacity(0);
}

/* line 456, ../sass/screen.scss */
#blend-demo video {
  position: absolute;
  visibility: hidden;
}

/* line 463, ../sass/screen.scss */
#end .byline {
  font-size: 3rem;
}

@media screen and (min-width: 1200px) {
  /* line 469, ../sass/screen.scss */
  .chart-data, .chart-labels {
    margin: 0 10vw;
    width: 80vw;
  }
}