/**
 * A simple theme for reveal.js presentations, derived from serif.css and based on https://github.com/matze/mtheme
 *
 * This theme is Copyright (C) 2018-2019 Tobias Schröder <tobias.schroeder@metronom.com>
 */

@font-face {
     font-family: "Helvetica";
     font-style: normal;
     font-weight: 400;
     src: local("Helvetica LT Pro"), local("HelveticaLTPro-Roman"), url(../webfonts/helvetica-cyrillic.woff2) format("woff2");
     unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
     font-family: "Helvetica";
     font-style: normal;
     font-weight: 400;
     src: local("Helvetica LT Pro"), local("HelveticaLTPro-Roman"), url(../webfonts/helvetica-latin-ext.woff2) format("woff2");
     unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
     font-family: "Helvetica";
     font-style: normal;
     font-weight: 400;
     src: local("Helvetica LT Pro"), local("HelveticaLTPro-Roman"), url(../webfonts/helvetica-latin.woff2) format("woff2");
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
     font-family: "BebasNeue";
     font-style: normal;
     font-weight: 400;
     src: local("BebasNeue"), local("Bebas Neue"), url(../webfonts/BebasNeue-Regular.woff2) format("woff2");
}

@font-face {
     font-family: "Fira Code";
     src: url("../webfonts//FiraCode-Light.woff2") format("woff2"),
          url("../webfonts//FiraCode-Light.woff") format("woff");
     font-weight: 300;
     font-style: normal;
}

@font-face {
     font-family: "Fira Code";
     src: url("../webfonts//FiraCode-Regular.woff2") format("woff2"),
          url("../webfonts//FiraCode-Regular.woff") format("woff");
     font-weight: 400;
     font-style: normal;
}

@font-face {
     font-family: "Fira Code";
     src: url("../webfonts//FiraCode-Medium.woff2") format("woff2"),
          url("../webfonts//FiraCode-Medium.woff") format("woff");
     font-weight: 500;
     font-style: normal;
}

@font-face {
     font-family: "Fira Code";
     src: url("../webfonts/FiraCode-Bold.woff2") format("woff2"),
          url("../webfonts/FiraCode-Bold.woff") format("woff");
     font-weight: 700;
     font-style: normal;
}

@font-face {
     font-family: "Fira Code VF";
     src: url("../webfonts/FiraCode-VF.woff2") format("woff2-variations"),
          url("../webfonts/FiraCode-VF.woff") format("woff-variations");
     font-weight: 300 700;
     font-style: normal;
}

@font-face {
     font-family: "Fira Code";
     src: url("../webfonts/FiraCode-Medium.woff2") format("woff2"),
          url("../webfonts/FiraCode-Medium.woff") format("woff");
     font-weight: 500;
     font-style: normal;
}

@font-face {
     font-family: "Lato";
     src: url("../webfonts/Lato-Thin.ttf") format("ttf");
     font-weight: 100;
     font-style: normal;
}

@font-face {
     font-family: "Lato";
     src: url("../webfonts/Lato-ThinItalic.ttf") format("ttf");
     font-weight: 100;
     font-style: normal;
}

@font-face {
     font-family: "Lato";
     src: url("../webfonts/Lato-Light.ttf") format("ttf");
     font-weight: 300;
     font-style: normal;
}

@font-face {
     font-family: "Lato";
     src: url("../webfonts/Lato-LightItalic.ttf") format("ttf");
     font-weight: 300;
     font-style: normal;
}

@font-face {
     font-family: "Lato";
     src: url("../webfonts/Lato-Regular.ttf") format("ttf");
     font-weight: 400;
     font-style: normal;
}

@font-face {
     font-family: "Lato";
     src: url("../webfonts/Lato-RegularItalic.ttf") format("ttf");
     font-weight: 400;
     font-style: normal;
}

@font-face {
     font-family: "Lato";
     src: url("../webfonts/Lato-Bold.ttf") format("ttf");
     font-weight: 700;
     font-style: normal;
}

@font-face {
     font-family: "Lato";
     src: url("../webfonts/Lato-BoldItalic.ttf") format("ttf");
     font-weight: 700;
     font-style: normal;
}

@font-face {
     font-family: "Lato";
     src: url("../webfonts/Lato-Black.ttf") format("ttf");
     font-weight: 900;
     font-style: normal;
}

@font-face {
     font-family: "Lato";
     src: url("../webfonts/Lato-BlackItalic.ttf") format("ttf");
     font-weight: 900;
     font-style: normal;
}

.reveal a {
     line-height: 1.3em;
}

/*********************************************
* GLOBAL STYLES
*********************************************/
body {
     background: #f1f1f1;
     background-color: #f1f1f1;
}

body.dark {
     background: #222222;
     background-color: #222222;
}

body.dark .reveal {
     color: #f1f1f1;
}

body.dark .reveal h1,
body.dark .reveal h2,
body.dark .reveal h3,
body.dark .reveal h4,
body.dark .reveal h5,
body.dark .reveal h6 {
     color: #f1f1f1;
}

.bebas {
     font-family: "BebasNeue" !important;
}

.fira {
     font-family: "Fira Code" !important;
}

.lato {
     font-family: "Lato" !important;
}

.reveal {
     font-family: "Helvetica";
     font-size: 32px;
     font-weight: normal;
     color: #333333;
}

::selection {
     color: #fff;
     background: #26351C;
     text-shadow: none;
}

.reveal .slides {
     text-align: left;
}

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

/*********************************************
  * HEADERS
  *********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
     margin: 0 0 20px 0;
     color: #333333;
     font-weight: normal;
     line-height: 1;
     letter-spacing: normal;
     text-transform: none;
     text-shadow: none;
     word-wrap: break-word;
}

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

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

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

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

.reveal h1 {
     text-shadow: none;
}

h1.subtitle {
     font-size: 1em;
     padding-bottom: 15px;
     border-bottom: 2px solid #FAAD00;
}

h2.author,
h3.date {
     font-size: .6em;
}

h1.title {
     font-variant: small-caps;
}

body.dark .reveal h3 {
     color: #5EC299 !important
}

.level2 h1 {
     font-size: 1.57em;
     font-variant: small-caps;
     text-transform: lowercase;
}

.titleslide h1 {
     font-variant: small-caps;
     font-size: 1.67em;
     margin-left: 25px;
     margin-right: 25px;
     padding-bottom: 10px;
     border-bottom: 2px solid #F9EA29;
}

/*********************************************
  * COLORS
  *********************************************/
.metronom-yellow {
     color: #F9EA29 !important
}

.metronom-anthracite {
     color: #333333 !important
}

.metronom-logo-yellow {
     color: #FAAD00 !important
}

.metronom-green {
     color: #5EC299 !important
}

.metronom-red {
     color: #E34229 !important
}

.metronom-blue {
     color: #6694CF !important
}

.reveal .slides section .fragment.highlight-metronom-yellow,
.reveal .slides section .fragment.highlight-metronom-logo-yellow,
.reveal .slides section .fragment.highlight-metronom-green,
.reveal .slides section .fragment.highlight-metronom-red,
.reveal .slides section .fragment.highlight-metronom-blue {
     opacity: 1;
     visibility: inherit;
}

.reveal .slides section .fragment.highlight-metronom-yellow.visible {
     color: #F9EA29
}

.reveal .slides section .fragment.highlight-metronom-logo-yellow.visible {
     color: #FAAD00
}

.reveal .slides section .fragment.highlight-metronom-green.visible {
     color: #5EC299
}

.reveal .slides section .fragment.highlight-metronom-red.visible {
     color: #E34229
}

.reveal .slides section .fragment.highlight-metronom-blue.visible {
     color: #6694CF
}

/*********************************************
  * 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: #51483D;
     text-decoration: none;
     -webkit-transition: color 0.15s ease;
     -moz-transition: color 0.15s ease;
     transition: color 0.15s ease;
}

body.dark .reveal a {
     color: #6694CF;
}

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

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

/*********************************************
  * IMAGES
  *********************************************/
/*.reveal section img {*/
/*     margin: 15px 0px;*/
/*     background: rgba(255, 255, 255, 0.12);*/
/*     border: 4px solid #000;*/
/*     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 0.15s linear;
     -moz-transition: all 0.15s linear;
     transition: all 0.15s linear;
}

.reveal a:hover img {
     /*background: rgba(255, 255, 255, 0.2);*/
     border-color: #51483D;
     border: 2px solid #6694CF !important;
     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: #51483D;
}

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

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

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

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

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

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

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

/*********************************************
  * PROGRESS BAR
  *********************************************/
.reveal .progress {
     background: rgba(235, 129, 27, .4);
}

.reveal .progress span {
     background: rgba(250, 173, 0, 1);
     -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);
}