/* --------------------------------------------------------------------------------
   *** THEME ***
-------------------------------------------------------------------------------- */
/**
 * Beige theme for reveal.js.
 *
 * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
 */
@import url(../fonts/league-gothic/league-gothic.css);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
/*********************************************
 * GLOBAL STYLES
 *********************************************/
body {
  background: #f7f2d3;
  background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3));
  background: -webkit-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
  background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
  background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
  background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
  background-color: #f7f3de; }

.reveal {
  font-family: "Lato", sans-serif;
  font-size: 36px;
  font-weight: normal;
  color: #333; }

::selection {
  color: #fff;
  background: rgba(79, 64, 28, 0.99);
  text-shadow: none; }

.reveal .slides > section,
.reveal .slides > section > section {
  line-height: 1.3;
  font-weight: inherit; }

/*********************************************
 * HEADERS
 *********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  margin: 0 0 20px 0;
  color: #333;
  font-family: "League Gothic", Impact, sans-serif;
  font-weight: normal;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: uppercase;
  text-shadow: none;
  word-wrap: break-word; }

.reveal h1 {
  font-size: 3.77em; }

.reveal h2 {
  font-size: 2.11em; }

.reveal h3 {
  font-size: 1.55em; }

.reveal h4 {
  font-size: 1em; }

.reveal h1 {
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); }

/*********************************************
 * OTHER
 *********************************************/
.reveal p {
  margin: 20px 0;
  line-height: 1.3; }

/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
  max-width: 95%;
  max-height: 95%; }

.reveal strong,
.reveal b {
  font-weight: bold; }

.reveal em {
  font-style: italic; }

.reveal ol,
.reveal dl,
.reveal ul {
  display: inline-block;
  text-align: left;
  margin: 0 0 0 1em; }

.reveal ol {
  list-style-type: decimal; }

.reveal ul {
  list-style-type: disc; }

.reveal ul ul {
  list-style-type: square; }

.reveal ul ul ul {
  list-style-type: circle; }

.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
  display: block;
  margin-left: 40px; }

.reveal dt {
  font-weight: bold; }

.reveal dd {
  margin-left: 40px; }

.reveal q,
.reveal blockquote {
  quotes: none; }

.reveal blockquote {
  display: block;
  position: relative;
  width: 70%;
  margin: 20px auto;
  padding: 5px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }

.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
  display: inline-block; }

.reveal q {
  font-style: italic; }

.reveal pre {
  display: block;
  position: relative;
  width: 90%;
  margin: 20px auto;
  text-align: left;
  font-size: 0.55em;
  font-family: monospace;
  line-height: 1.2em;
  word-wrap: break-word;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }

.reveal code {
  font-family: monospace; }

.reveal pre code {
  display: block;
  padding: 5px;
  overflow: auto;
  max-height: 400px;
  word-wrap: normal; }

.reveal table {
  margin: auto;
  border-collapse: collapse;
  border-spacing: 0; }

.reveal table th {
  font-weight: bold; }

.reveal table th,
.reveal table td {
  text-align: left;
  padding: 0.2em 0.5em 0.2em 0.5em;
  border-bottom: 1px solid; }

.reveal table th[align="center"],
.reveal table td[align="center"] {
  text-align: center; }

.reveal table th[align="right"],
.reveal table td[align="right"] {
  text-align: right; }

.reveal table tr:last-child td {
  border-bottom: none; }

.reveal sup {
  vertical-align: super; }

.reveal sub {
  vertical-align: sub; }

.reveal small {
  display: inline-block;
  font-size: 0.6em;
  line-height: 1.2em;
  vertical-align: top; }

.reveal small * {
  vertical-align: top; }

/*********************************************
 * LINKS
 *********************************************/
.reveal a {
  color: #8b743d;
  text-decoration: none;
  -webkit-transition: color .15s ease;
  -moz-transition: color .15s ease;
  transition: color .15s ease; }

.reveal a:hover {
  color: #c0a86e;
  text-shadow: none;
  border: none; }

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

/*********************************************
 * IMAGES
 *********************************************/
.reveal section img {
  margin: 15px 0px;
  background: rgba(255, 255, 255, 0.12);
  border: 4px solid #333;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }

.reveal section img.plain {
  border: 0;
  box-shadow: none; }

.reveal a img {
  -webkit-transition: all .15s linear;
  -moz-transition: all .15s linear;
  transition: all .15s linear; }

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

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

.reveal .controls .navigate-right,
.reveal .controls .navigate-right.enabled {
  border-left-color: #8b743d; }

.reveal .controls .navigate-up,
.reveal .controls .navigate-up.enabled {
  border-bottom-color: #8b743d; }

.reveal .controls .navigate-down,
.reveal .controls .navigate-down.enabled {
  border-top-color: #8b743d; }

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

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

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

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

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

.reveal .progress span {
  background: #8b743d;
  -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);
  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

.reveal mark {
  display: inline-block;
  padding: 0 .5rem;
  background-color: rgba(236, 236, 121, 0.65); }

.reveal p,
.reveal blockquote {
  text-align: left;
  box-shadow: none; }

.reveal blockquote {
  font-size: .9em;
  width: 90%; }
  .reveal blockquote footer {
    border-top: 2px dotted rgba(0, 0, 0, 0.3);
    margin-top: 1rem;
    padding-top: 1rem;
    text-align: right;
    font-style: italic;
    font-size: 1.1em;
    font-weight: 100; }

.reveal section img {
  border: 0; }

.reveal ul {
  display: block; }

.reveal pre {
  width: 100%; }

.reveal .small {
  font-size: .8em;
  opacity: .7; }

.reveal a {
  text-decoration: underline; }

.reveal .h7,
.reveal .fz-m {
  margin-top: 0; }

.reveal .h7 {
  font-family: inherit;
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: 0;
  margin-top: 2rem;
  margin-bottom: .25rem;
  text-transform: none;
  text-align: left; }

.reveal .fz-m {
  font-size: 1.75rem; }

.reveal .fz-s {
  font-size: 1.5rem; }

.reveal .specificity {
  color: #333;
  font-family: 'League Gothic', Impact, sans-serif;
  font-size: 8rem;
  line-height: 1.2;
  margin-top: 10rem;
  text-align: center; }
  .reveal .specificity span {
    background: rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    display: inline-block;
    margin: 0 1rem;
    padding: 2rem 3rem;
    position: relative; }
    .reveal .specificity span:after {
      font-family: "Open sans", sans-serif;
      font-size: 2rem;
      font-weight: 600;
      line-height: 1;
      position: absolute;
      top: -3rem;
      left: 0;
      right: 0;
      text-align: center; }

.reveal .social {
  margin-top: 3rem;
  padding-top: 1rem;
  list-style: none;
  text-align: center; }
  .reveal .social li {
    display: inline-block;
    font-size: 1.5rem;
    padding: 0 .5rem; }
  .reveal .social a {
    background-repeat: no-repeat;
    display: block; }
    .reveal .social a:before {
      background-size: contain;
      content: '';
      display: block;
      margin: 0 auto .25rem;
      width: 3rem;
      height: 3rem; }
    .reveal .social a.is--github:before {
      background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2278%22%20height%3D%2278%22%20viewBox%3D%220%200%2078%2078%22%3E%3Cpath%20fill%3D%22%230E7983%22%20d%3D%22M77%2038.9c0%2020.9-17%2038.1-38%2038.1s-38-17.2-38-38.1c0-20.9%2017-37.9%2038-37.9s38%2017%2038%2037.9zm-28.5%2031c13.1-4.6%2022.6-16.6%2022.6-31%200-17.7-14.3-32-32.1-32-17.7%200-32.1%2014.3-32.1%2032%200%2014.5%209.7%2026.6%2023%2031v-6.1c0-3.7%201.5-5.5%203.1-6.6-8.2-.9-17.1-3.8-17.1-18.1%200-4%201.4-7.3%203.8-9.8-.4-1-1.6-4.6.4-9.7%200%200%203.1-1%2010.1%203.8%202.9-.8%206-1.2%209.1-1.2%203.2%200%206.2.4%209.2%201.2%207-4.7%2010.1-3.8%2010.1-3.8%202%205%20.8%208.7.4%209.7%202.4%202.6%203.8%205.8%203.8%209.8%200%2014.2-8.8%2017.2-17.1%2018.1%201.5%201.1%203.1%203%203.1%206.6v6.1h-.3z%22%2F%3E%3C%2Fsvg%3E"); }
    .reveal .social a.is--linkedin:before {
      background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2278%22%20height%3D%2278%22%20viewBox%3D%220%200%2078%2078%22%3E%3Cpath%20fill%3D%22%230E7983%22%20d%3D%22M71.4%201h-64.8c-3.1%200-5.6%202.5-5.6%205.5v65c0%203%202.5%205.5%205.6%205.5h64.8c3.1%200%205.6-2.5%205.6-5.5v-65c0-3-2.5-5.5-5.6-5.5z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M12.3%2029.5h11.3v36.3h-11.3v-36.3zm5.6-18c3.6%200%206.5%202.9%206.5%206.5s-2.9%206.5-6.5%206.5-6.5-2.9-6.5-6.5%202.9-6.5%206.5-6.5%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M30.6%2029.5h10.8v5h.2c1.5-2.9%205.2-5.9%2010.7-5.9%2011.4%200%2013.5%207.5%2013.5%2017.3v19.9h-11.3v-17.7c0-4.2-.1-9.6-5.9-9.6-5.9%200-6.8%204.6-6.8%209.3v17.9h-11.2v-36.2z%22%2F%3E%3C%2Fsvg%3E"); }
    .reveal .social a.is--twitter:before {
      background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2278%22%20height%3D%2278%22%20viewBox%3D%220%200%2078%2078%22%3E%3Cpath%20fill%3D%22%230E7983%22%20d%3D%22M77%2015.2c-2.7%201.2-5.9%202.1-9%202.5%203.1-1.9%205.7-5%206.9-8.5-2.9%201.9-6.3%203.1-9.8%203.7-2.9-3.1-6.9-5-11.3-5-8.6%200-15.5%206.8-15.5%2015.3%200%201.2.2%202.3.4%203.5-13.2-.5-24.5-6.7-32.3-16-1.3%202.3-2.1%205-2.1%207.6%200%205.4%202.7%2010.1%206.9%2012.8-2.5%200-5-.8-7.1-1.9v.2c0%207.4%205.4%2013.7%2012.6%2015.1-1.3.4-2.7.6-4.2.6-1%200-1.9%200-2.9-.2%201.9%206.2%207.7%2010.5%2014.5%2010.7-5.2%204.1-12.2%206.6-19.3%206.6-1.3%200-2.5%200-3.8-.2%206.9%204.5%2015.1%207%2023.9%207%2028.7%200%2044.4-23.4%2044.4-43.8v-2.1c3.1-2.1%205.6-4.8%207.7-7.9z%22%2F%3E%3C%2Fsvg%3E"); }

.reveal .specificity__inline {
  color: #b82e2e; }

.reveal .specificity__id {
  color: #b8952e; }

.reveal .specificity__class {
  color: #73b82e; }

.reveal .specificity__element {
  color: #2eacb8; }

.reveal .specificity .specificity__inline:after {
  content: 'Style attribute';
  top: -5rem; }

.reveal .specificity .specificity__id:after {
  content: 'IDs'; }

.reveal .specificity .specificity__class:after {
  content: 'Class, \00000apseudo-class,\00000a attribute';
  font-size: 1.5rem;
  top: -5.5rem;
  white-space: pre; }

.reveal .specificity .specificity__element:after {
  content: 'Elements'; }

.reveal .specificity__example {
  box-shadow: none;
  margin: 1rem 0 3rem;
  font-size: 3rem; }

.reveal .specificity--important {
  margin-top: 1rem; }
  .reveal .specificity--important span {
    font-size: 4rem;
    margin: 0 1rem;
    padding: 0 1rem;
    position: relative; }
    .reveal .specificity--important span:after {
      display: none; }

.reveal .specificity .specificity__important-wrap {
  background: transparent;
  box-shadow: none;
  margin: 0;
  padding: 1rem 0; }
  .reveal .specificity .specificity__important-wrap:first-of-type {
    outline: 1px solid red; }

.reveal .related-links li {
  font-size: 2rem;
  margin-bottom: 1.5rem; }

.reveal .related-links i {
  display: block; }

/*
Zenburn style from voldmar.ru (c) Vladimir Epifanov <voldmar@voldmar.ru>
based on dark.css by Ivan Sagalaev
*/
.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #3f3f3f;
  color: #dcdcdc;
  -webkit-text-size-adjust: none; }

.hljs-keyword,
.hljs-tag,
.css .hljs-class,
.css .hljs-id,
.lisp .hljs-title,
.nginx .hljs-title,
.hljs-request,
.hljs-status,
.clojure .hljs-attribute {
  color: #e3ceab; }

.django .hljs-template_tag,
.django .hljs-variable,
.django .hljs-filter .hljs-argument {
  color: #dcdcdc; }

.hljs-number,
.hljs-date {
  color: #8cd0d3; }

.dos .hljs-envvar,
.dos .hljs-stream,
.hljs-variable,
.apache .hljs-sqbracket,
.hljs-name {
  color: #efdcbc; }

.dos .hljs-flow,
.diff .hljs-change,
.python .exception,
.python .hljs-built_in,
.hljs-literal,
.tex .hljs-special {
  color: #efefaf; }

.diff .hljs-chunk,
.hljs-subst {
  color: #8f8f8f; }

.dos .hljs-keyword,
.hljs-decorator,
.hljs-title,
.hljs-type,
.diff .hljs-header,
.ruby .hljs-class .hljs-parent,
.apache .hljs-tag,
.nginx .hljs-built_in,
.tex .hljs-command,
.hljs-prompt {
  color: #efef8f; }

.dos .hljs-winutils,
.ruby .hljs-symbol,
.ruby .hljs-symbol .hljs-string,
.ruby .hljs-string {
  color: #dca3a3; }

.diff .hljs-deletion,
.hljs-string,
.hljs-tag .hljs-value,
.hljs-preprocessor,
.hljs-pragma,
.hljs-built_in,
.smalltalk .hljs-class,
.smalltalk .hljs-localvars,
.smalltalk .hljs-array,
.css .hljs-rule .hljs-value,
.hljs-attr_selector,
.hljs-pseudo,
.apache .hljs-cbracket,
.tex .hljs-formula,
.coffeescript .hljs-attribute {
  color: #cc9393; }

.hljs-shebang,
.diff .hljs-addition,
.hljs-comment,
.hljs-annotation,
.hljs-pi,
.hljs-doctype {
  color: #7f9f7f; }

.coffeescript .javascript,
.javascript .xml,
.tex .hljs-formula,
.xml .javascript,
.xml .vbscript,
.xml .css,
.xml .hljs-cdata {
  opacity: 0.5; }

[class^=culo-] {
  outline: 1px solid red; }
