/*
 * front-page-slide-show.css
 */

#front-page-slide-show {
  position:            absolute;
  top:                 0;
  left:                0;
  height:              100%;
  width:               100%;
  display:             block;
  z-index:             -1;
  background-color:    #000000;
  background-size:     cover;
  #opacity: 1;

  /* 
   * Transitions don't play well with background images
   * in conjuction with setting their positions. It looks
   * ok on smaller screens but not on bigger screens. I
   * need to do something with opacity as a fade-out/fade-in
   * type deal.
   * TODO do something with opacity
  #transition:          background-image 0.4s ease;

  /* 
   * background-image and
   * background-position get set by JavaScript in
   * front-page-slide-show.js
   */

  /* 
   * Anne 
   */
  #background-image:    url("../img/DSC_9871.jpg");
  #background-position: 65% bottom;

  /* 
   * Laura 
   */
  #background-image:    url("../img/DSC_2557.jpg");
  #background-position: 80% top;

  /* 
   * Tamara 
   */
  #background-image:    url("../img/DSC_6470.jpg");
  #background-position: 15% top;

  /*
   * Joost
   */
  #background-image:    url("../img/DSC_2809.jpg");
  #background-position: 74% top;
}

#front-page-slide-show.fade {
  opacity: 0;
}

#front-page-slide-show__button {
  width:            var(--button-size);
  height:           var(--button-size);
  border:           none;
  color:            #ffffff;
  border-radius:    4px;
  background-color: var(--button-background-color);
  font-size:        16px;
  position:         absolute;
  bottom:           var(--page-margin);
  right:            var(--page-margin);
  cursor:           pointer;
}
.front-page-slide-show--transition {
  transition: opacity 5s ease;
  opacity: 100;
}

.front-page-slide-show--fade-out {
  transition: opacity .5s ease;
  opacity: 0;
}

.front-page-slide-show--fade-in {
   opacity: 100;
}