@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Anonymous+Pro:400,400i,700,700i&display=swap');
@import url('https://fonts.googleapis.com/css?family=Indie+Flower&display=swap');


:root {
  --ACCENT: #0054A6;
  --GRAY: #555555;
  --LIGHTGRAY: #AAA;
  --MIDGRAY: #777777;
  --INLINECODE: #F04336;
  --DARKFONT: #333333;
  --FONTSIZE: 18px;
  --BASEFONT: 'Quicksand', 'Open Sans', 'Muli' !important;
  --CODEFONT: 'Anonymous Pro', 'Inconsolata', 'Lucida Console', Monaco, monospace !important;
  --FANCYFONT: 'Indie Flower' !important;
  --GRAY1: #EEE;
  --GRAY2: #BBB;
  --BLUE: #0274B4;
  --DARKBLUE: #241F55;
  --LIGHTBLUE: #5AC5C4;
  --LIGHTBLUE_BACK: #5AC5C411;
}

.inverse {
  text-shadow: 0.05em 0.05em 0.05em #333;
  background-image: radial-gradient(var(--GRAY1) 60%, var(--GRAY2) 100%);;
}


/* CUSTOM COVER PAGE */

#slide-cover .middle  .remark-inline-code  {
  color: black !important;
}

#slide-cover .top  .remark-inline-code {
  color: var(--INLINECODE) !important;
}

#slide-cover .top .fancy {
  font-family: Indie Flower;
  text-shadow: 0.0em 0.0em 0.0em !important;
  color: var(--ACCENT);
}

#slide-cover {
  display: grid;
  height: calc(681px);
  grid-template-rows: 1fr 2fr 1.5fr;
  grid-template-columns: 1fr;
  grid-template-areas:
    "top"
    "middle"
    "bottom" !important;
  align-items: center;
  justify-items: center;
  width: 100%;
  padding: 0;
}

#slide-cover .top .fancy {
  color: var(--ACCENT);
}

#slide-cover .middle {
font-size: 200%;
grid-area: middle;
display: grid;
align-items: center;
justify-items: center;
width: 100%;
text-shadow: none !important;
}

#slide-cover .middle .remark-inline-code, 
#slide-cover .middle code {
  color: black !important;
}

#slide-cover .middle div {
  width: auto;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: auto auto auto auto auto;
  align-items: center;
  text-shadow: inherit;
}

#slide-cover .middle img {
padding-left:0.5em;
}

#slide-cover .top {
  grid-area: top;
  text-align: center;
}

#slide-cover .subtitle {
  grid-area: subtitle;
}

#slide-cover .details {
  grid-area: details;
}

#slide-cover .corporate {
  grid-area: bottom;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  width: 100%;
  height: 100%;
  text-shadow: none !important;
  color: var(--ACCENT);
}

#slide-cover .corporate .logo img {
  width: 300px;
}

#slide-cover .corporate .contact {
  display: grid;
  grid-template-columns: auto 1fr;
  width: 100%;
  grid-template-areas:
    "avatar details" !important;
    grid-column-gap: 1em;
    align-items: center;
}

#slide-cover .corporate .contact .avatar {
  grid-area: avatar;
}

#slide-cover .corporate .contact .avatar img {
  border-radius: 50%;
  width: 120px;
}

#slide-cover .corporate * {
  color: var(--ACCENT);
  font-weight: 800;
  font-size: 100%;
  text-shadow: none !important;
  text-align: initial;
}



/* FONT DEFAULTS */
body{
    font-family: var(--BASEFONT);
    font-size: var(--FONTSIZE) !important;
    font-weight: 400 !important;
    color: var(--DARKFONT) !important;
}

.remark-slide-content {
  font-size: var(--FONTSIZE);
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {  
  font-family: inherit;
  font-weight: 500;
  color: inherit;
  margin: 0.5em 0em;
}

.remark-slide-content.title-subtitle h1 {
  font-size:200%;
}

h4 {
  font-size: 125%;
}

.title-subtitle .subtitle {
  font-size: 125%;
  color: var(--MIDGRAY);
  margin-top: 0em;
  margin-bottom: 1em;
  display: inline-block;
}

.fancy {
  font-family: var(--FANCYFONT);
}

.fancy-title h1,
.fancy-title h2,
.fancy-title h3,
.fancy-title h4 {
  font-family: var(--FANCYFONT);
}

code {
    font-family: 'Anonymous Pro', 'Inconsolata', 'Lucida Console', Monaco, monospace !important;
}

.remark-code { 
  font-family: 'Anonymous Pro', 'Inconsolata', 'Lucida Console', Monaco, monospace !important;
}

.remark-inline-code { 
  font-family: 'Anonymous Pro', 'Inconsolata', 'Lucida Console', Monaco, monospace !important; 
  color: var(--INLINECODE) !important;
}

.remark-slide-number {
  position: inherit;
}

.accent {
  color: var(--ACCENT);
}

.nospace p {
  margin-bottom: 0em;
}

.nospace ul {
  margin-top: 0em;
}

.nospace pre {
  margin-top: 0em;
}

span.negspace {
  display: block;
  margin-top: 1em;
  margin-bottom: -1em;
}

.nocodegap {
  display:block;
  margin-bottom: -1.7em;
}

.pullup {
  margin-top: -1em !important;
}


.faded {
  color: var(--LIGHTGRAY);
}

.example {
  display: inline-block;
  width: 100%;
  text-align: center;
}

.explainer {
  margin-top: 1em;
  font-family: var(--CODEFONT);
  font-size: 90%;
  background: var(--LIGHTBLUE_BACK);
}

.explainer ul {
  padding-left: 0.6em;
  margin: .5em 0em;
  color: var(--MIDGRAY);
}

.explainer ul ul, .explainer ul ul ul {
  margin: .0em 0em;
}

.explainer ul li:before {
  content: "+";
  color: var(--ACCENT);
  display: inline-block;
  /* width: 0.4em; */
  margin-left: -0.6em;
}

/* TITLE */

.title {
  margin-bottom: 0em !important;
}

.subtitle {
  margin-top: 0em !important;
}

/* PARAGRAPHS */
.remark-slide-content p {
  text-align: justify;
  font-size: 100%;
}

.remark-slide-content {
  padding: 1em 4em 2.5em 4em;
}

/* CUSTOM HELP MENU */
.remark-container.remark-help-mode .remark-backdrop {
  background: var(--ACCENT);
  opacity: 0.7;
}

.remark-help .remark-help-content tr:nth-child(2n) {
  background: var(--ACCENT);
}

.remark-help .remark-help-content td:first-child {
  padding-left: 2em;
}


/* CUSTOM SLIDE FOOTER */

.remark-slide-number {
  opacity: 1;
}

.remark-slide-number .slide-footer {
  display: grid;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  grid-template-columns: repeat(auto-fit, minmax(200px, auto) );
  font-family: Quicksand;
  font-size: 70%;
  justify-items: center;
  width: 100%;
  color: white;
  background: var(--ACCENT);
  opacity: 1;
  padding: 0em 2em;
  margin-left: -2em;
}

.remark-slide-number .slide-footer div {
  padding: 0.3em 0;
  text-align: center;
}

.remark-slide-number .slide-footer div:first-child {
  width: 100%;
  text-align: left;
  padding-left: 3em;
}

.remark-slide-number .slide-footer div:last-child {
  width: 100%;
  text-align: right;
  padding-right: 3em;
}



/* make no-footer slides omit footer */
div.remark-slide-content.no-footer .remark-slide-number .slide-footer {
  display: none;
}

.slide-footer code {
  font-family: 'Anonymous Pro', 'Inconsolata', 'Lucida Console', Monaco, monospace;
}

/* add before pseudo elements */
.question::before {
  font-family: "FontAwesome";
  content: "\f059";
  margin-right: 0.3em;
  color: var(--INLINECODE);
  font-size: 180%;
  display: inline-block;
  vertical-align: middle;
}

.example::before {
  font-family: "FontAwesome";
  content: "\f13a";
  margin-right: 0.5em;
  font-size: 180%;
  display: inline-block;
  vertical-align: middle;
  color: inherit;
}


.contact.email::before {
  font-family: "FontAwesome";
  content: "\f0e0";
  font-weight: 900;
  margin-right: 0.5em;
}

.contact.twitter::before {
  font-family: "FontAwesome";
  content: "\f099";
  font-weight: 900;
  margin-right: 0.5em;
}


/* CUSTOM BLOCKQUOTES */

.quotation {
  display: grid;
  align-items: center;
  justify-items: center;
  width: 100%;
  padding-left: 1.5em;
}

.quotation blockquote {
  width: 90%;
  border-left: 2px solid #0054A6;
  color: var(--GRAY);
  font-family: var(--BASEFONT);
  font-size: 100%;
  line-height: initial;
  padding: 0.5em 1.5em;
  position: relative;
  transition: .2s border ease-in-out;
  z-index: 0;
  text-align: left;
  margin: 0;
}

.quotation blockquote p {
  font-style: italic;
  color: var(--MIDGRAY);
  margin: 0;
}


.quotation blockquote::after {
    content: "\f10d";
    position: absolute;
    top: 50%;
    left: -0.5em;
    color: #0054A6;
    background: white;
    font-family: "Fontawesome";
    font-style: normal;
    font-size: 90%;
    line-height: 1em;
    text-align: center;
    text-indent: -2px;
    width: 1em;
    margin-top: -1em;
    padding: 0.5em 0;
}

.definition blockquote {
  width: 90%;
  border-left: 2px solid var(--INLINECODE);
  color: var(--LIGHTGRAY);
  font-family: Quicksand;
  font-size: 100%;
  line-height: initial;
  padding: 0.5em 1.5em;
  position: relative;
  transition: .2s border ease-in-out;
  z-index: 0;
  text-align: left;
  margin: 0;
}

.definition blockquote::after {
    content: "\f05a";
    position: absolute;
    top: 50%;
    left: -0.5em;
    color: var(--INLINECODE);
    background: white;
    font-family: "Fontawesome";
    font-style: normal;
    font-size: 90%;
    line-height: 1em;
    text-align: center;
    text-indent: -2px;
    width: 1em;
    margin-top: -1em;
    padding: 0.5em 0;
}

.definition blockquote p {
  margin: 0;
}


/* CUSTOM FLOAT STYLES */
.float-right {
  float: right;
}



.title-subtitle > h1:first-child, 
.title-subtitle > h2:first-child,
.title-subtitle > h3:first-child, 
.title-subtitle > h4:first-child,
.title-subtitle > h5:first-child,
.title-subtitle > h6:first-child {
  color: var(--ACCENT);
  margin-bottom: 0em !important;
}

.title-subtitle > h1:nth-child(2), 
.title-subtitle > h2:nth-child(2),
.title-subtitle > h3:nth-child(2), 
.title-subtitle > h4:nth-child(2),
.title-subtitle > h5:nth-child(2),
.title-subtitle > h6:nth-child(2) {
  color: var(--LIGHTGRAY);
  margin-top: 0em !important;
  margin-bottom: 2em !important;
}


/* KEYSTROKES */
.keystroke {
padding: 0.5% 1%;
background: var(--LIGHTGRAY);
display: inline-block;
color: #aaa;
font-family: inherit;
font-weight: 600;
font-size: 80%;
text-decoration: none;
text-align: center;
margin: 5px;
background: #eff0f2;
-moz-border-radius: 4px;
border-radius: 4px;
border-top: 1px solid #f5f5f5;
-webkit-box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9, 0 2px 3px #333;
-moz-box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9, 0 2px 3px #333;
box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9, 0 2px 3px #333;
text-shadow: 0px 1px 0px #f5f5f5;
text-align: center;
top: 50%;
/* padding: 0.6% 1% 0.8% 1%; */
width: 3%;
}


/* LISTS */
ul {
  list-style: none; /* Remove default bullets */
}

ul li::before {
  content: "\2d";  
  color: var(--LIGHTGRAY);
  display: inline-block; 
  width: 1em; 
  margin-left: -1em; 
}


/* CUSTOM DIVS */
.strikeout {
  text-decoration: line-through;
}

/* CUSTOM GRID LAYOUTS */
.autogrid-left {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 1em;
  align-items: center;
}

.autogrid-right {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-column-gap: 1em;
  align-items: center;
}

.fitgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  grid-column-gap:1em;
}

.fitgrid div {
  width: 100%;
}

.top {
  align-items: initial;
}

/* CODE BLOCKS */
pre .remark-code {
  font-size: 90%;
  white-space: pre-wrap;
}

.code-compact pre {
  margin: 0;
}

.code-nospace pre {
  margin: 0;
}

.code-compact pre code.r.hljs.remark-code,
.code-nospace pre code.r.hljs.remark-code {
  margin-top: 1em;
}

.code-nospace pre code.r.hljs.remark-code:nth-child(n+1) {
  margin-top: 0.2em;
}


/* TABLES */
table.flat-table {
  width: 100%;
  border: none;
  font-weight: inherit;
  font-size: 100%;

}

.remark-slide tr:nth-child(2n) {
  background: none;
}

table.flat-table thead {
  color: white;
  background: var(--ACCENT);
}

table.flat-table thead tr th {

  font-weight: 500;
}




/* ROTATING ELEMENTS */
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rotating {
  animation: rotating 15s linear infinite;
}

/* FONTAWESOME PSEUDOELEMENTS */
.presentation-title:before {
  font-family: "FontAwesome";
  content: "\f0a1";
  color: inherit;
}

.email:before {
  font-family: "FontAwesome";
  content: "\f0e0";
  color: inherit;
}

.twitter:before {
  font-family: "FontAwesome";
  content: "\f099";
  color: inherit;
}

.date:before {
  font-family: "FontAwesome";
  content: "\f073";
  color: inherit;
}

.website:before {
  font-family: "FontAwesome";
  content: "\f0ac";
  color: inherit;
}

.job-title:before {
  font-family: "FontAwesome";
  content: "\f0b1";
  color: inherit;
}

.presenter:before {
  font-family: "FontAwesome";
  content: "\f007";
  color: inherit;
}

.affiliation:before {
  font-family: "FontAwesome";
  content: "\f1ad";
  color: inherit;
}
.corporate *:before {
  color: var(--INLINECODE) !important;
  font-weight: 400;
  margin-right: 0.5em;
}

.slide-footer *:before {
  margin-right: 0.5em;
}