/*
    These are the style definitions needed by Slyde itself.
    
    Do not include your own definitions for styling the slides. Use user.css for that instead.
 */
html {
  height: 100%;
  font-size: 2vmin;
}
body {
  height: 100%;
  width: 100%;
  margin: auto;
  overflow: hidden;
}
section {
  box-sizing: border-box;
  overflow: hidden;
  visibility: hidden;
  position: absolute;
  bottom: 1em;
  top: 1em;
  left: 1em;
  right: 1em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
section:target {
  visibility: visible;
}
nav {
  position: absolute;
  bottom: 1em;
  right: 2em;
}
.increment {
  visibility: hidden;
}
.increment.show {
  visibility: visible;
}
/*****************************************************************
 * Speeds
 *****************************************************************/
section {
  transition-duration: 0.8s;
  transition-timing-function: ease;
}
.fast section,
section.fast {
  transition-duration: 0.5s;
}
.slow section,
section.slow {
  transition-duration: 1.2s;
}
/*****************************************************************
 * Effects
 *****************************************************************/
/* Fade effect */
.fade section {
  transition-property: opacity, visibility;
  opacity: 0;
}
.fade section:target {
  opacity: 1;
}
/* Slide from left effect */
.slide-from-left section {
  transition-property: visibility, -webkit-transform;
  transition-property: transform, visibility;
  transition-property: transform, visibility, -webkit-transform;
  -webkit-transform: translateX(-100vw);
          transform: translateX(-100vw);
}
.slide-from-left section:target {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
/* Slide from top effect */
.slide-from-top section {
  transition-property: visibility, -webkit-transform;
  transition-property: transform, visibility;
  transition-property: transform, visibility, -webkit-transform;
  -webkit-transform: translateY(-100vh);
          transform: translateY(-100vh);
}
.slide-from-top section:target {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
/* grow */
.grow section {
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transform: scale(0);
          transform: scale(0);
}
.grow section:target {
  transition-property: visibility, -webkit-transform;
  transition-property: transform, visibility;
  transition-property: transform, visibility, -webkit-transform;
  -webkit-transform: scale(1);
          transform: scale(1);
}