/* This is the css style sheet for the gallery slider. It does not style an entire webpage. It is compatible to work on any browser. If you need to add more photos, you must add the nav dots at the bottom of this file AND make sure to change the nav dot numbers in the html doc */

   /* Define slides class */
html
.slides {
    padding: 0;
    width: 600px;
    height: 400px;
    display: block;
    margin: 0 auto;
    position: relative;
}

   /* Compatibility */ 
.slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
   /* Slider stuff */
.slides input { display: none; }

   /* More slider stuff */
.slide-container { display: block; }

   /* Define slide class (different from slides) */
.slide {
    top: 0;
    opacity: 0;
    width: 600px;
    height: 400px;
    display: block;
    position: absolute;

    transform: scale(0);

    transition: all .7s ease-in-out;
}

   /* Image size in gallery */
.slide img {
    width: 100%;
    height: 100%;
}

   /* Nav dots (from here until the bottom) */
.nav label {
    width: 100px;
    height: 100%;
    display: none;
    position: absolute;

    opacity: 0;
    z-index: 9;
    cursor: pointer;

    transition: opacity .2s;

    color: #FFF;
    font-size: 120pt;
    text-align: center;
    line-height: 380px;
    font-family: "Varela Round", sans-serif;
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label { opacity: 0; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

input:checked + .slide-container  .slide {
    opacity: 1;

    transform: scale(1);

    transition: opacity 1s ease-in-out;
}

input:checked + .slide-container .nav label { display: block; }

.nav-dots {
  width: 100%;
  bottom: 10px;
  height: 15px;
  display: block;
  position: absolute;
  text-align: center;
}

.nav-dots .nav-dot {
  top: -5px;
  width: 15px;
  height: 15px;
  margin: 0 5px;
  position: relative;
  border-radius: 100%;
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.6);
}

.nav-dots .nav-dot:hover {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.9);
}

   /* Nav Dots - Add more here if needed */
input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6,
input#img-7:checked ~ .nav-dots label#img-dot-7,
input#img-8:checked ~ .nav-dots label#img-dot-8,
input#img-9:checked ~ .nav-dots label#img-dot-9,
input#img-10:checked ~ .nav-dots label#img-dot-10,
input#img-11:checked ~ .nav-dots label#img-dot-11,
input#img-12:checked ~ .nav-dots label#img-dot-12,
input#img-13:checked ~ .nav-dots label#img-dot-13,
input#img-14:checked ~ .nav-dots label#img-dot-14,
input#img-15:checked ~ .nav-dots label#img-dot-15,
input#img-16:checked ~ .nav-dots label#img-dot-16 {
  background: rgba(0, 0, 0, 0.8);
}