#slideshow-wrap {
  width: 100%;
  
  background: #353535;
}
.is_computer #slideshow-wrap {
  height: calc(100vh - var(--headerH));
  max-height: 85vh;
}

/* List Slides */
ul#slideshow {
  
  /* overflow: hidden; */
  margin: 0;
  padding: 0;
  
}

#slideshow-list li {
  /* display: block; */
  /* width: 100%; */
  /* height: 100%; */
}

#slideshow-list li img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --- */

/* Slide Texts */
.slidetexts {
  position: absolute;
  z-index: 3;

  display: flex;
  flex-direction: column;
  width: auto;
  padding: 0 1rem;
}

/* Text Position Vertical */
.slidetexts.top {
  top: 10%;
}
.slidetexts.middle {
  top: 50%;
  margin-top: -40px;
}
.slidetexts.bottom {
  bottom: 10%;
}

/* Left position */
.slidetexts.left {
  text-align: left;
  justify-content: flex-start;
}
.slidetexts.left .slidedescript {
  padding-left: .5rem;
  padding-right: 1em;
}

/* Center position */
.slidetexts.center {
  text-align: center;
  justify-content: center;
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
}
.slidetexts.center .slidetitle,
.slidetexts.center .slidedescript {
  text-align: center;
  align-self: center;
  padding-left: .5em;
  padding-right: .5em;
}
.slidetexts.center .slidedescript {
  margin: 0 auto;
}

/* Right position */
.slidetexts.right {
  text-align: right;
  justify-content: flex-end;
}
.slidetexts.right .slidetitle span,
.slidetexts.right .slidedescript {
  padding-left: 1.5em;
  padding-right: 0.5%;
}
.slidetexts.right .slidedescript {
  float: right;
}

/* --- */

/* Slide Title */
.slidetexts .slidetitle {
  display: inline-flex;
  align-self: flex-start;
  width: auto;
  padding: .3em .6em .1em .5rem;

  font-family: Istok, OpenSans, "Trebuchet MS", "Lucida Grande", sans-serif;
  font-weight: bold;
  /* font-size: 2.5em; */
  font-size: 2.7vw;
  text-transform: uppercase;
  line-height: 1em;
  color: #353535;
  background-color: rgba(255, 255, 255, 0.6);

  margin: 0 0 5px 0;
}

/* Slide Description */
.slidetexts .slidedescript {
  display: inline-flex;
  max-width: 70%;
  padding: .3em 0 .1em .5rem;

  font-family: Istok;
  font-size: 1.5em;
  line-height: 1.3em;
  font-size: 1.3vw;
  color: #303030;
  background-color: rgba(255, 255, 255, 0.6);
}

/* --- */

/* Slide Link */
a.slidelink,
a.slidelink.youtube {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
}

/* YouTube Overlay and player */
div.player-overlay {
  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .6);
  transition: background .3s;
  /* opacity: .5; */
}
div.player-overlay:hover {
  background-color: rgba(0, 0, 0, .3);
}

/* SVG YT Button */
div.player-overlay svg {
  display: block;
  width: 75px;
}
div.player-overlay svg path {
  transition: fill .3s;
}
div.player-overlay svg path.fill-3 {
  /* fill: #555; */
}
div.player-overlay:hover svg path.fill-3 {
  /* fill: url(#red-gradient); */
}

iframe.youtube_iframe {
  width: 100%;
  text-align: center;
  background: #353535;
}

#vww {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.videowrapper {
  position: relative;
  /* 16:9 */
  padding-top: 0px;
  height: 100%;
  width: 100%;
  margin: 0;
}

.videowrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* .is_tablet .videowrapper {
  padding-bottom: 38%;
  padding-top: 0px;
  width: 70%;
  margin: .5% auto 0.5%;
} */

/* .is_phone .videowrapper {
  padding-bottom: 56.5%;
  padding-top: 0px;
  width: 100%;
  margin: .5% auto 0.5%;
} */

/* Slideshow Nav */
:root {
  --swiper-theme-color: #d1d1d1;
  --swiper-navigation-size: 44px;
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 10px;
  --swiper-navigation-color: var(--swiper-theme-color);

  --swiper-pagination-bullet-width: 1.2rem;
  --swiper-pagination-bullet-height: 1.2rem;
  --swiper-pagination-bullet-horizontal-gap: .6rem;

  --swiper-pagination-color: #fff;
  --swiper-pagination-bullet-inactive-color: #fff;
  --swiper-pagination-bullet-inactive-opacity: .4;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  color: #fff;
}

.swiper-horizontal > .swiper-pagination-bullets {
  width: auto;
  left: 50%;
  bottom: 3.2rem;
  transform: translateX(-50%);
}
.swiper-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: #fc0; */
}

.swiper-pagination-bullet {
  transition: opacity .3s;
}
.swiper-pagination-bullet:hover {
  opacity: 1;
}

/* --- */

/* Admin Link */
a.admin_edit_item {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 10;
  text-decoration: none !important;
}

a.admin_edit_item i {
  font-size: 20px;
  color: #fff;
}

a.admin_edit_item i:hover {
  color: #C00
}



/* MEDIA QUERIES -------------------------------------------*/


@media screen and (orientation: portrait) and (hover: none) {

  .is_computer #slideshow-wrap,
  #slideshow-wrap {
    max-height: 40vh;
  }
  .swiper-horizontal > .swiper-pagination-bullets {
    bottom: 2rem;
  }

  /* .is_tablet .videowrapper {
    padding-bottom: 38%;
    padding-top: 0px;
    width: 100%;
    margin: .5% auto 0.5%;
  } */

}

/* <= 800px
----------------------------------------------*/
@media only screen and (max-width: 800px) {

  :root {
    --swiper-navigation-size: 32px;
    --swiper-navigation-sides-offset: 3vw;
  }

  ul.slides .col3,
  p.image_row .col3 {
    display: none;
  }

  .slidetexts {
    display: none;
  }

  .swiper-pagination {
    display: none;
  }

  .swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 10px);
  }

}

/* <= 655px
----------------------------------------------*/
@media only screen and (max-width : 655px) {

  p.image_row .col2 {
    display: none;
  }
  #slideshow-wrap {
    max-height: 60vh;
  }
  
  div.player-overlay svg {
    width: 11vw;
    min-width: 42px;
  }

}

/* >= 420 and <= 485
----------------------------------------------*/
@media only screen and (max-width: 485px) {

  /*  */
  
}

/* --- */

@media only screen and (max-height : 740px) {

  .is_mobile #slideshow-wrap {
    height: 60vh;
  }

}

@media only screen and (max-width: 400px) and (min-height : 700px) {
  .is_computer #slideshow-wrap,
  #slideshow-wrap {
    height: 35vh;
  }
}