body{
  position: absolute;
  width: 100vw;
  height: 100vh;

  padding: 0;
  margin: 0;
}

#slideshow{
  position: relative;
  background-color: lightgrey;

  height: 100%;

  *{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  &:hover{

    &::before{

      position: absolute;
      width: 100%;
      height: 100%;

      display: flex;
      justify-content: center;
      align-items: center;

      z-index: 10;

      content: "Click to expand";

      color: white;
      background-color: rgba(black, 0.5);

    }

  }

  &.fullscreen{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: none;

    &:before{
      display:none;
    }

    #slides{
      height: 100vh;
    }

  }

  #slides{
    position: relative;
    height: 100%;
    overflow: hidden;

    .slide{
      position: absolute;
      width: 100%;
      height: 100%;

      display: inline-flex;
      justify-content: center;

      top: 0px;

      background-color: grey;
      transition: left 1s ease-out;

      img{
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }
    }

    .slide.left{
      left: -100%;
    }

    .slide.center{
      left: 0px;
    }

    .slide.right{
      left: 100%;
      transition: none;
    }
  }


  #progress_bullets{
    position: absolute;
    bottom: 10px;
    width: 100%;
    height: 10px;

    display: flex;
    justify-content: center;

    margin-bottom: 10px;

    .bullet{
      height: 10px;
      width: 10px;

      margin-left: 5px;
      margin-right: 5px;

      border-radius: 50%;

      background-color: grey;

      &.active{
        background-color: #c99836;
      }
    }
  }

  #progress_bar{
    position: absolute;
    bottom: 0px;
    height: 10px;
    background-color: #304c83;

    &.init{
      width: 0px;
      transition: none;
    }

    &.progress{
      width: 100%;
      transition: width 10s linear;
    }
  }
}