/* CSS for Image Slider */

  @import url(https://fonts.googleapis.com/css?family=Varela+Round);

.slshow { 
  display:block;
  top:0;
  padding:15px 10px 25px 0px;
  width:390px;
  height:100%;
  border: solid 1px  #2ba6cb;
  border-radius: 15px;
  margin:auto auto;
  box-shadow: 8px 8px 4px #eee;
}

.slides {
    padding: 0;
    width: 370px;
    height: 635px;
    display: block;
    margin: auto auto;
    position: relative;
    padding-bottom:15px;
}

.slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.slides input { display: none; }

.slide-container { display: block; }

.slide {
    top: 0;
    opacity: 0;
    width: 370px;
    height: 635px;
    display: block;
    position: absolute;
    margin: auto auto;

    transform: scale(0);

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

.slide img {
    top:0;
    display: block;
    width: 320px;
    height: 100%;
    margin: auto auto;
    padding-bottom: 10px;
    z-index:10;
}

.slnav label {
    width: 38px;
    height: 100%;
    display: none;
    position: absolute;
    opacity: 0;
    z-index: 9;
    cursor: pointer;

    transition: opacity .2s;

    color: #eee;
    font-size: 28pt;
    text-align: center;
    line-height: 380px;
    font-family: sans-serif;
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 10px rgb(119, 119, 119);
/*"Varela Round", */}

.slide:hover + .slnav label { opacity: 0.05; 
/*color:#000;*/}

.slnav label:hover { opacity: 1;
color:#000; }

.slnav .next { right: 0; }

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

    transform: scale(1);

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

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

.slnav-dots {
  width: 100%;
  bottom: 0px;
  height: 11px;
  display: block;
  position: absolute;
  text-align: center;
}

.slnav-dots .slnav-dot {
  top: 4px;
  width: 11px;
  height: 11px;
  margin: 0 4px;
  position: relative;
  border-radius: 100%;
  display: inline-block;
  background-color: rgba(153, 153, 153, 0.5);
}

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

.slnav-dots:active, .slnav-dot:active, .slnav-dots:focus, .slnav-dot:focus, {
  background-color: rgba(153, 153, 153, 0.9);
}

/*input:checked + .slnav-dots .slnav-dot:active{
background-color:#999;
}*/

input#img-1:checked ~ .slnav-dots label#img-dot-1,
input#img-2:checked ~ .slnav-dots label#img-dot-2,
input#img-3:checked ~ .slnav-dots label#img-dot-3,
input#img-4:checked ~ .slnav-dots label#img-dot-4, {
  background: rgba(153, 153, 153, 0.9);
}

.slcaption{
  display: block;
  position:relative;
  top:1.05em;
  height:16px;
  text-align:center;
  margin-bottom: 20px;
  padding-bottom:34px;
}