.slid 
{
    _background : green; 
    position   : absolute;
    text-align : center;
    left       : 3em;
    right      : 3em;
    top        : 3em;
    bottom     : 3em;
    display    : none;
}
.slid-panel
{
    _background : red; 
    position   : relative;
    display    : flex;    
    position   : relative;
    height     : 100%;
    max-height : 40vw;
    width      : 100%;
    margin     : auto;
}
.slid-image
{
    position      : relative;
    margin        : auto;
    border-radius : 1.0vw; 
    box-shadow    : 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
/*
.slideshow-container 
{
  max-width : 90vw;
  position  : relative;
  margin    : auto;
}
*/
/* Slideshow container */

/* Next & previous buttons */
.prev, .next 
{
  display :none;
  cursor        : pointer;
  position      : absolute;
  top           : 50%;
  width         : 2.5em;
  padding       : 16px;
  margin-top    : -22px;
  color         : white;
  font-weight   : bold;
  font-size     : 18px;
  transition    : 0.6s ease;
  border-radius : 0 3px 3px 0;
  user-select   : none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
/*
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
*/
/* Number text (1/3 etc) */
.slide-numb, .slide-text
{
    display: inline;
    /*color: #f2f2f2;*/
    color       : #FFFFFF;
    font-weight : 700;
    font-size   : 1em;
    padding-top: 0;
    margin: 0;
    position    : absolute;
    top         : -2.0em;    
    text-align  : left;
    position    : absolute; 
    left        : 0px; 
    height      : 1em; 
    border      : none;   
}
.slide-text
{
    width       : 100%; 
    padding-left : 5vw;
    padding-right: 5vw;    
    text-align  : center;    
}
.slide-numb
{
    left        : -1.5em;
    text-align  : left; 
    user-select : none;

}



/* The dots/bullets/indicators */
.dot 
{
  width         : 1em;
  height        : 1em;
  display       : inline-block;
  border        : solid 2px white;
  border-radius : 50%;
  cursor        : pointer;
  transition       : background-color 0.6s ease;
  user-select      : none;
}

/*.active,*/ 
.dot:hover 
{
   background-color : rgba(255, 255, 255, 0.4); 
}

.slider-bottom
{ 
    position : absolute; 
    left     : 0px; 
    bottom   : 0em; 
    height   : 2em; 
    width     : 100%; 
    border    : none;
}

.slider-navigator 
{
    text-align : center;
    user-select      : none;
}
/* Fading animation */
.fade 
{
  -webkit-animation-name     : fade;
  -webkit-animation-duration : 1.5s;
  animation-name             : fade;
  animation-duration         : 1.5s;
}

@-webkit-keyframes fade 
{
  from {opacity: .4} 
  to   {opacity: 1 }
}

@keyframes fade 
{
  from {opacity: .4} 
  to   {opacity: 1 }
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) 
{
  .prev, .next, .slide-numb, .slide-text  
  { 
      font-size: 11px
  }
}