div.slide_show_container
{
  position: relative;
}

div.dot_container
{
  margin-top: 1.5em;
  text-align: center;
}

img.slide_image
{
  width: 100%;
}

a.slide_link
{
  user-select: none;
}

/* Next & previous buttons */
a.prev
, a.next
{
  cursor: pointer;
  position: absolute;
  top: 45%;
  width: auto;
  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;
  background-color:rgba(0, 0, 0, 0.05);
}

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

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

/* Caption text */
div.caption_text_container
{
  position: absolute;
  bottom: 4em;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

div.caption_text
{
  color: #f2f2f2;
  font-size: 15px;
  /*padding: 8px 12px;*/
  padding: 5px 12px;
  display: inline-block;

  background-color:rgba(0, 0, 0, 0.05);
}

/* Number text (1/3 etc) */
div.number_text
{
    /*color: #a2a2a2;*/
  color: #f2f2f2;
  font-size: 12px;
    /*padding: 8px 12px;*/
  padding: 5px 12px;
  position: absolute;
  top: 0;

  background-color:rgba(0, 0, 0, 0.05);
}

div.frame_1 div.number_text
, div.frame_6 div.number_text
, div.frame_2 div.caption_text
, div.frame_5 div.caption_text
{
  /*color: #a2a2a2;*/
  background-color:rgba(0, 0, 0, 0.3);
}

/* The dots/bullets/indicators */
span.dot
{
  cursor: pointer;
  height: 12px;
  width: 12px;
  margin: 0 2px;
  /*background-color: #bbb;*/
  background-color: white;
  border-radius: 50%;
  border: solid 2px #569acd;
  display: inline-block;
  transition: background-color 0.6s ease;
}

span.dot:hover
, div.slide_show_container.selected_frame_1 span.dot.frame_1
, div.slide_show_container.selected_frame_2 span.dot.frame_2
, div.slide_show_container.selected_frame_3 span.dot.frame_3
, div.slide_show_container.selected_frame_4 span.dot.frame_4
, div.slide_show_container.selected_frame_5 span.dot.frame_5
, div.slide_show_container.selected_frame_6 span.dot.frame_1
{
  /*background-color: #717171;*/
  background-color: #569acd;
}

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



/* from left animiation */
div.slide_show_container
{
  overflow: hidden;
  width: 100%;
}

div.slide_block_list
{
  display: flex;
  width: 600%;
  transition: transform 0.5s ease-in-out;
  transform: translateX(-0%);
}

div.slide_show_container.fast div.slide_block_list
{
  transition: all 0s ease 0s;
}

div.clsh_side
{
  width: 100%;
  /* in uncomment it kills everything */
  /*flex-shrink: 0;*/
}

div.slide_show_container.selected_frame_1 div.slide_block_list
{
  transform: translateX( 0%);
}
div.slide_show_container.selected_frame_2 div.slide_block_list
{
  transform: translateX( -16.6666%);
}
div.slide_show_container.selected_frame_3 div.slide_block_list
{
  transform: translateX( -33.3333%);
}
div.slide_show_container.selected_frame_4 div.slide_block_list
{
  transform: translateX( -50%);
}
div.slide_show_container.selected_frame_5 div.slide_block_list
{
  transform: translateX( -66.6666%);
}

div.slide_show_container.selected_frame_6 div.slide_block_list
{
  transform: translateX( -83.3333%);
}


/* Just appears/disappers */
/*div.clsh_side*/
/*{*/
  /*display: none;*/
/*}*/

/*div.slide_show_container.selected_frame_1 div.clsh_side.frame_1*/
/*, div.slide_show_container.selected_frame_2 div.clsh_side.frame_2*/
/*, div.slide_show_container.selected_frame_3 div.clsh_side.frame_3*/
/*, div.slide_show_container.selected_frame_4 div.clsh_side.frame_4*/
/*, div.slide_show_container.selected_frame_5 div.clsh_side.frame_5*/
/*{*/
  /*display: block;*/
/*}*/

/* Fading animation */
/*.fade*/
/*{*/
  /*animation-name: fade;*/
  /*animation-duration: 1.5s;*/
/*}*/

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