@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
/**
 * Default theme for reveal.js.
 *
 * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
 */
@font-face {
  font-family: 'League Gothic';
  src: url("../../lib/font/league_gothic-webfont.eot");
  src: url("../../lib/font/league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../../lib/font/league_gothic-webfont.woff") format("woff"), url("../../lib/font/league_gothic-webfont.ttf") format("truetype"), url("../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular") format("svg");
  font-weight: normal;
  font-style: normal; }

/*********************************************
 * GLOBAL STYLES
 *********************************************/
body {
  background: #1c1e20;
  background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20));
  background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
  background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
  background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
  background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
  background-color: #2b2b2b; }

.reveal {
  font-family: "Lato", Helvetica, Arial, sans-serif;
  font-size: 36px;
  font-weight: 200;
  letter-spacing: -0.02em;
  color: #eeeeee; }

::selection {
  color: white;
  background: #ff5e99;
  text-shadow: none; }

/*********************************************
 * HEADERS
 *********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  margin: 0 0 20px 0;
  color: #eeeeee;
  font-family: lato, "League Gothic", Impact, sans-serif;
  line-height: 0.9em;
  letter-spacing: 0.02em;
  /*text-transform: uppercase;*/
  /*  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);*/ }

.reveal h2 {
  letter-spacing: 0.0em;
  word-spacing: 0.2em; 
  }

.reveal h1 + h2 {
  text-transform: none; }

.reveal pre {
  font-size: 0.85em; }

.reveal pre code {
  padding: 0 0.5em 0 0;
  background: #111; }

section:nth-child(1) h1 {
  font-size: 7rem; }
section:nth-child(1) h2 {
  text-transform: uppercase;
  font-size: 3rem;
  margin: 1em 0 2em;
  color: rgba(255, 255, 255, 0.4); }

.no-break {
  white-space: nowrap; }

/*********************************************
 * LINKS
 *********************************************/
.reveal a:not(.image) {
  color: #ffb900;
  text-decoration: none;
  -webkit-transition: color .15s ease;
  -moz-transition: color .15s ease;
  -ms-transition: color .15s ease;
  -o-transition: color .15s ease;
  transition: color .15s ease; }

.reveal a:not(.image):hover {
  color: #71e9f4;
  text-shadow: none;
  border: none; }

.reveal .roll span:after {
  color: #fff;
  background: #0d99a5; }

/*********************************************
 * IMAGES
 *********************************************/
.reveal section img {
  margin: 15px;
  -webkit-transition: all .2s linear;
  -moz-transition: all .2s linear;
  -ms-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear; }

.reveal a:hover img {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }

/*********************************************
 * NAVIGATION CONTROLS
 *********************************************/
.reveal .controls div.navigate-left,
.reveal .controls div.navigate-left.enabled {
  border-right-color: #13daec; }

.reveal .controls div.navigate-right,
.reveal .controls div.navigate-right.enabled {
  border-left-color: #13daec; }

.reveal .controls div.navigate-up,
.reveal .controls div.navigate-up.enabled {
  border-bottom-color: #13daec; }

.reveal .controls div.navigate-down,
.reveal .controls div.navigate-down.enabled {
  border-top-color: #13daec; }

.reveal .controls div.navigate-left.enabled:hover {
  border-right-color: #71e9f4; }

.reveal .controls div.navigate-right.enabled:hover {
  border-left-color: #71e9f4; }

.reveal .controls div.navigate-up.enabled:hover {
  border-bottom-color: #71e9f4; }

.reveal .controls div.navigate-down.enabled:hover {
  border-top-color: #71e9f4; }

/*********************************************
 * PROGRESS BAR
 *********************************************/
.reveal .progress {
  background: rgba(0, 0, 0, 0.2); }

.reveal .progress span {
  background: #ffb900;
  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

/*********************************************
 * Slides BG
 *********************************************/
#logo {
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s ease-out;
  top: 0;
  right: 7%;
  z-index: 1; }

#logo img {
  width: 2em; }

.intro #logo {
  opacity: 1; }

.reveal .state-background {
  background: #384042 center top no-repeat;
  }

.blendingbg .reveal .state-background {
  background: #4ba1b7 top center no-repeat;
  }

.maskingbg .reveal .state-background {
  background: #1D6872 top center no-repeat;
  }

@supports (background-blend-mode: multiply) {
  .reveal .state-background {
    background: #384042 center top no-repeat;
    background-size: cover;
    background-blend-mode: multiply; }

  .blendingbg .reveal .state-background {
    background-size: cover; }

  .maskingbg .reveal .state-background {
    background: #1D6872 top center no-repeat;
    background-size: cover; } }
.photo .reveal section img {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.15); }

.safety .reveal h1 {
  font-size: 3.2em; }

.resources .reveal section {
  text-align: left; }

.resources .reveal ul {
  margin-left: 0;
  padding-left: 0;
  margin-bottom: 1em; }

.resources .reveal li {
  list-style: none;
  padding: 0.2em 0 0 0; }

p.desc {
  font-size: 2em;
  margin: 0 0 1em; }

.toc li {
  list-style: none;
  padding: 0.3em 0; }

.toc li.past {
  opacity: 0.5; }

.side-by-side {
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  box-sizing: border-box; }
  .side-by-side .side {
    -webkit-flex: 1 0 0;
    -moz-flex: 1 0 0;
    flex: 1 0 0; }
  .side-by-side .side.fix-w3c {
    display: flex; }
  .side-by-side .side + .side {
    margin-left: 2rem; }

#recap .side-by-side {
  margin-bottom: 2rem; }
  #recap .side-by-side img {
    max-width: auto;
    max-height: auto; }

img.partial {
  -webkit-mask: -webkit-linear-gradient(25deg, black 50%, rgba(252, 252, 252, 0.3) 50%);
  -moz-mask: -moz-linear-gradient(25deg, black 50%, rgba(252, 252, 252, 0.3) 50%);
  mask: linear-gradient(25deg, black 50%, rgba(252, 252, 252, 0.3) 50%); }

/* ------ Blending */
@keyframes blending-slide-over {
  to {
    -webkit-transform: rotatex(0);
    -moz-transform: rotatex(0);
    transform: rotatex(0); } }

input[type="color"] {
  position: absolute;
  top: 1em;
  left: 1em;
  width: 3em;
  height: 3em; }

.reveal .support-warning {
  padding: 1rem;
  background: #fc5;
  font-size: 1rem;
  color: #333;
  letter-spacing: 0;
  line-height: 1.5rem; }
  .reveal .support-warning a {
    color: navy;
    text-decoration: underline; }
  .reveal .support-warning a:hover {
    color: navy;
    text-decoration: none; }

#blending-comparison figure {
  width: 100%;
  height: 9em;
  padding: 0;
  margin: 3rem 0 0;
  position: relative;
  -webkit-perspective: 400;
  -moz-perspective: 400;
  perspective: 400; }
#blending-comparison .gradient {
  background: -webkit-linear-gradient(top, rgba(211, 19, 173, 0.78), rgba(255, 213, 0, 0.8)), url("../../resources/blending-source.jpg") top left no-repeat;
  background: -moz-linear-gradient(top, rgba(211, 19, 173, 0.78), rgba(255, 213, 0, 0.8)), url("../../resources/blending-source.jpg") top left no-repeat;
  background: linear-gradient(top, rgba(211, 19, 173, 0.78), rgba(255, 213, 0, 0.8)), url("../../resources/blending-source.jpg") top left no-repeat;
  background-size: cover, cover; }
#blending-comparison .solid {
  background: url("../../resources/blending-source.jpg") top left no-repeat;
  background-color: rgba(214, 121, 23, 0.7);
  background-size: cover; }
#blending-comparison .mock-overlay {
  width: 100%;
  height: 100%;
  background-color: inherit;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateX(-90deg);
  transform-origin: center center;
  animation: blending-slide-over 1.5s;
  animation-play-state: paused;
  animation-fill-mode: forwards; }
#blending-comparison .mock-overlay.visible {
  animation-play-state: running; }

/* turn off warnings if there is support */
@supports (background-blend-mode: overlay) {
  .reveal .support-warning.blending {
    display: none; }

  #blending-comparison figure.blended {
    background-blend-mode: overlay; } }
@supports (-webkit-clip-path: circle(25% at 50% 50%)) {
  .reveal .support-warning.clipping {
    display: none; } }
@supports (-webkit-clip-path: circle(25% at 50% 50%)) and (background-blend-mode: overlay) and (mix-blend-mode: overlay) {
  .reveal .support-warning.intro {
    display: none; } }
.reveal ul {
  list-style: none; }

#blending-illustration .layer {
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  align-items: flex-start;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  perspective: 1000;
  -webkit-perspective-origin: left bottom;
  -moz-perspective-origin: left bottom;
  perspective-origin: left bottom; }
  #blending-illustration .layer p {
    text-align: left;
    -webkit-flex: 1 1 auto;
    -moz-flex: 1 1 auto;
    flex: 1 1 auto;
    border-bottom: 0.1em solid rgba(255, 255, 255, 0.4); }
  #blending-illustration .layer img {
    margin: 0;
    padding: 0; }
  #blending-illustration .layer figure {
    width: 10em;
    height: 6em;
    -webkit-transform-origin: right top;
    -moz-transform-origin: right top;
    transform-origin: right top;
    -webkit-transform: rotatex(35deg) translate(-100px, -50px);
    -moz-transform: rotatex(35deg) translate(-100px, -50px);
    transform: rotatex(35deg) translate(-100px, -50px);
    -webkit-filter: drop-shadow(0 1em 0.5em rgba(0, 0, 0, 0.5));
    -moz-filter: drop-shadow(0 1em 0.5em rgba(0, 0, 0, 0.5));
    filter: drop-shadow(0 1em 0.5em rgba(0, 0, 0, 0.5));
    background-image: url("../../resources/blending-source.jpg");
    background-repeat: none;
    background-size: cover;
    background-color: #d67917;
    background-blend-mode: overlay; }
  #blending-illustration .layer.source figure {
    background-color: transparent; }
  #blending-illustration .layer.destination figure {
    background-image: none; }
  #blending-illustration .layer.result p {
    border-style: dashed; }

.surface {
  height: 700px;
  display: flex;
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  transform: scale(2); }

.surface ::selection {
  background: none; }

.scratch {
  background: #111111 url(../../resources/scratch-texture.jpg); }

.scratch h2 {
  margin: auto;
  font-size: 4em;
  width: 100%;
  outline: none;
  font-family: bangers, sans-serif;
  color: white;
  opacity: 1;
  mix-blend-mode: difference; }

/* Toggle to default state */
.scratch h2:active {
  opacity: 0.7;
  mix-blend-mode: normal; }

@keyframes hola-join {
  from {
    letter-spacing: 0em; }

  90%,100% {
    letter-spacing: -0.15em; } }

.hola {
  background: #fff; }

.hola h2 {
  margin: auto;
  font-size: 7em;
  animation: hola-join 1.6s ease-in-out infinite;
  animation-direction: alternate;
  animation-play-state: paused; }
  .hola h2 span {
    mix-blend-mode: multiply;
    font-family: 'Passion One', sans-serif; }
  .hola h2 span:nth-child(1) {
    color: #fb3f2d; }
  .hola h2 span:nth-child(2) {
    color: #1b8bcc; }
  .hola h2 span:nth-child(3) {
    color: #fa3a7a; }
  .hola h2 span:nth-child(4) {
    color: #1b958f; }
  .hola h2 span:nth-child(5) {
    color: #fbc839; }

.hola h2.texture {
  -webkit-mask-image: url(../../resources/grunge-alpha-1.png);
  mask-image: url(../../resources/grunge-alpha-1.png);
  -webkit-mask-size: 400px 100%;
  mask-size: 400px 100%; }

.hola h2:hover {
  animation-play-state: running; }

/* Toggle to default state */
.hola h2:active span {
  opacity: 0.7;
  mix-blend-mode: normal; }

#shapes-illustration div {
  background: #ffb900;
  float: left;
  margin: 0 1em 1em 0; }
  #shapes-illustration div:nth-child(1) {
    width: 6em;
    height: 4em; }
  #shapes-illustration div:nth-child(2) {
    width: 4em;
    height: 6em; }
  #shapes-illustration div:nth-child(3) {
    width: 6em;
    height: 6em; }
  #shapes-illustration div:nth-child(4) {
    width: 3em;
    height: 3em; }
  #shapes-illustration div:nth-child(5) {
    width: 1em;
    height: 1em; }
  #shapes-illustration div:nth-child(6) {
    width: 6em;
    height: 4em;
    border-radius: 1em;
    clear: left; }
  #shapes-illustration div:nth-child(7) {
    width: 4em;
    height: 6em;
    border-radius: 1em; }
  #shapes-illustration div:nth-child(8) {
    width: 6em;
    height: 6em;
    border-radius: 50%; }

.clip-surface {
  background: url("../../resources/road.jpg") center bottom no-repeat;
  height: 500px; }

#clip-target-circle {
  -webkit-clip-path: circle(25% at 50% 50%);
  -moz-clip-path: circle(25% at 50% 50%);
  /* FIXME (13 April, 2014): Un-prefixed clip-path still applies to SVG only. To replace when parity is achieved. */ }

#clip-target-ellipse {
  -webkit-clip-path: ellipse(50% 40% at 50% 50%);
  -moz-clip-path: ellipse(50% 40% at 50% 50%); }

#clip-target-polygon {
  -webkit-clip-path: polygon(nonzero, 955px 405px, 483px 212px, 1px 400px, 0px 500px, 956px 500px);
  -moz-clip-path: polygon(nonzero, 955px 405px, 483px 212px, 1px 400px, 0px 500px, 956px 500px); }