/* TM CMS page */

div.product-images {
  padding: 0px 0px 0px 0px;
  font-family: Rubik;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0em;
  overflow-y: hidden;
  height: 100%;
}

.product-images .navigatory {
  height: 35px; display: flex; justify-content: space-between; align-items: center; padding: 0px 15px;
}

.product-images .image-area {
  height: 100%;
}

.product-images .image-area img {
    display: none;
}
.product-images .image-area img.landscape.on {
  width: 60%;
  left: 20%;
  position: absolute;
  top: 50%;
  display: block;
}
.product-images .image-area img.portrait.on {
  height: 90%;
  top: 5%;
  position: absolute;
  left: 50%;
  display: block;
}
div#gallery-bg {
  position: fixed;
  top: 0px;
  left: 0px;
  display: block;
  background-color: rgba(0,0,0,0.8);
  width: 100%;
  height: 100%;
  z-index: 20000;
}
.product-images a#close-gallery {
  display: block;
  position: fixed;
}
.product-images a#close-gallery svg {
  height: 2vw;
  width: 2vw;
  position: fixed; 
  top: 20px;
  right: 20px;
  opacity: .5;
}

.product-images a#close-gallery:hover svg {
  opacity: 1;
}

.product-images a#close-gallery svg * {
  fill: #ffffff;
}
.product-images .image-nav {
  display: block;
    position: fixed;
    top: 50%;
    padding: 0px 20px;
    width: 100%;
    z-index: 10000;
}

.product-images .image-nav a#prev {  }
.product-images .image-nav a#next { float: right; }

.product-images .image-nav a#prev svg,
.product-images .image-nav a#next svg { width: 4vw; height: 4vw; opacity: .5; }

.product-images .image-nav a#prev:hover svg,
.product-images .image-nav a#next:hover svg { opacity: 1; }

.product-images .image-nav a svg * { fill: #ffffff; }

@media screen and (max-width: 841px) { 
  .product-images a#close-gallery svg {
    height: 8vw;
    width: 8vw;
  }
  .product-images .image-nav a#prev svg,
  .product-images .image-nav a#next svg { width: 10vw; height: 10vw; }
}