/* Fonts */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);

/* Global styles */
* {
  margin: 0;
  padding: 0;
}

body {
  background: #fff;
  font: 1em/1.5 "Roboto", sans-serif;
}

/* Rotating Slideshow styles */
.rotating-slideshow {
  width: 100%;
  height: auto;
  max-height: 590px;
  overflow: hidden;
  position: relative;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5)
    /*, inset 0 0 200px rgba(0,0,0,.5)*/;
  margin-bottom: 20px;
  background: #e0e0e6;
  z-index: 0;
}

.rotating-slideshow .back {
  height: 0;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  position: relative;
}
.rotating-slideshow .button {
  position: absolute;
  top: 22%;
  /*left: 1175px;*/
  width: 300px;
  height: 55%;
  /*background: #fff;*/
  z-index: 1990;
  opacity: 0.75;
  /* overflow: hidden;*/
}
.rotating-slideshow .button {
  -moz-transform: scaleX(1);
  -o-transform: scaleX(1);
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  /* left: 1175px; */
  left: initial;
  right: 10vw;
}
.rotating-slideshow .button a {
  display: block;
  position: absolute;
  width: 360px;
  height: 360px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  outline: none;
  z-index: 1990;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rotating-slideshow .button a.pos1 {
  top: 25%;
  top: calc(50% - 186px);
  left: -94%;
  display: none;
}
.rotating-slideshow .button a.pos2 {
  top: -117%;
  left: 50%;
  left: calc(50% - 224px);
  width: 450px;
  height: 450px;
}
.rotating-slideshow .button a.pos3 {
  top: 25%;
  top: calc(50% - 305px);
  left: 65%;
  left: calc(50% + 125px);
  width: 620px;
  height: 620px;
}
.rotating-slideshow .button a.pos4 {
  top: 80%;
  left: 50%;
  left: calc(50% - 226px);
  width: 450px;
  height: 450px;
}
.rotating-slideshow #slider-main {
  width: 100%;
  height: 590px;
  max-width: 1920px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.rotating-slideshow #slider-main img {
  max-width: none;
}
.rotating-slideshow #slider-main .spinner {
  position: absolute;
  top: -172%;
  top: -1030px;
  left: 0;
  right: initial;
  min-width: 100%;
  transition: all 0.5s ease, opacity 0.3s ease;
  opacity: 0.6;
  z-index: 99;
}
.rotating-slideshow #slider-main .spinner-btn {
  position: absolute;
  top: -172%;
  top: -1030px;
  left: 0;
  min-width: 100%;
  transition: all 0.5s ease, opacity 0.3s ease;
  /* z-index: 1000; */
  z-index: 500;
}
.rotating-slideshow #slider-main .slides {
  position: relative;
  margin: -590px auto;
  width: 100%;
  max-width: 1920px;
  height: 590px;
  display: none;
}
.rotating-slideshow #slider-main .slides img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1.5s ease-out;
  z-index: 9;
}
.rotating-slideshow #slider-main .slides img.active {
  opacity: 1;
}
.rotating-slideshow #slider-main .slider-overlay {
  width: 100%;
  /* max-width: 980px; */
  margin: 0 auto;
  height: 100%;
  position: relative;
}
.rotating-slideshow #slider-main .slider-overlay div {
  position: absolute;
  /* top: 30%; */
  left: 100%;
  /* opacity: 0; */
  transition: all 0.4s ease, opacity 0.4s ease;
  z-index: 999;
  color: #fff;
  padding: 0 20px;
  width: 60%;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
.rotating-slideshow #slider-main .slider-overlay div.active {
  left: 0;
  opacity: 1;
  background: transparent;
}
.rotating-slideshow #slider-main .slider-overlay div h3 {
  font-size: 4em;
}
.rotating-slideshow #slider-main .slider-overlay .iframe_video {
  width: 100%;
  height: 445px;
  object-fit: cover;
  position: relative;
  top: 0;
  left: 0;
  opacity: 0.8;
  box-shadow: 2px 0px 17px white;
  border-radius: 10px;
}
.rotating-slideshow #slider-main .slider-overlay div p {
  font-size: 12pt;
}
.rotating-slideshow #slider-sound {
  display: none;
}
@media only screen and (min-width: 941px) and (max-width: 1440px) {
  .rotating-slideshow .button {
    left: initial;
    right: 45px;
  }
}

@media only screen and (min-width: 300px) and (max-width: 940px) {
  .rotating-slideshow #slider-main .slider-overlay .iframe_video {
    /* width: 88vw;
    height: 60vh; */
    /* width: 150%; */
    width: 175%;
    /* height: 32vh; */
    height: 350px;
  }
  .rotating-slideshow #slider-main .slider-overlay div h3 {
    font-size: 3.5em;
    text-transform: capitalize;
    text-wrap: nowrap;
    font-variant: petite-caps;
  }
}