* {
  box-sizing: border-box;
  margin: 0;
  padding:0;
}

.lightSlider_wrap {
  /*  background: black;*/
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
  background: rgb(238, 238, 238);
  /* Old browsers */
  background: -moz-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee', GradientType=0);
  /* IE6-9 */
}

.lightSlider_messageWrap {
  position: absolute;
    color: white;
    width: 100%;
    padding: 30px;
    bottom: 0;
    z-index: 6;
    text-align: center; 
    text-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
  }

.lightSlider_title {
font-family: 'Inter UI', serif;
font-size: 4em;
font-weight: 600;
text-transform: uppercase;
transform: translateY(-50px);
}

.lightSlider_blurb{
  font-family: 'Inter UI', sans-serif;
  font-size: 1.4em;
  transform: translateY(-50px)
}

.lightSlider_bottomShadow {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
  opacity: .5;
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000', GradientType=0);
  /* IE6-9 */
  z-index: 5;
}

#lightSlider_imgCurrent {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#lightSlider_imgCurrent img {
  width: 105%;
  will-change: transform;
  width: 100%;
  z-index: 3;
}

.zoomOriginLeft {
  transform-origin: left;
}

.zoomOriginRight {
  transform-origin: right;
}

.zoomOriginBottom {
  transform-origin: left;
}

.zoomOriginMiddle {
  transform-origin: middle;
}

.titleIn{
  animation: titleIn 1500ms ease forwards;
}

@keyframes titleIn {
 0%,10% { transform: translateY(0px) }
 0%,20% { opacity: 0 }
 100% { transform: translateY(-50px) }
 40% { opacity: 1 }
}

.blurbIn{
  animation: blurbIn 1500ms ease forwards;
}

@keyframes blurbIn {
0%,80% { opacity: 0 }
100% { opacity: 1 }
}

.titleOut{
  animation: titleOut 1500ms ease forwards;
}

@keyframes titleOut {
 0%,10% { transform: translate(0px,-50px) }
 0%,20% { opacity: 1 }
 100% { transform: translate(-600px,-50px) }
 80%,100% { opacity: 0 }
}

.blurbOut{
  animation: blurbOut 1500ms ease forwards;
}

@keyframes blurbOut {
 0%,10% { transform: translate(0px,-50px) }
 0%,20% { opacity: 1 }
 100% { transform: translate(600px,-50px) }
 80%,100% { opacity: 0 }
}

.slowZoom {
  animation: slowZoom 10000ms ease forwards;
}

@keyframes slowZoom {
  0% {
    transform: scale(1, 1)
  }
  100% {
    transform: scale(1.1, 1.1)
  }
  20%,
  90% {
    opacity: 1
  }
  0%,
  100% {
    opacity: 0
  }
}

.fadeIn {
  animation: fadeIn 1000ms ease forwards;
}

@keyframes fadeIn {
  0%, 30% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

.fadeOut {
  animation: fadeOut 500ms ease forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

.lightSlider_imgPrev {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}

.slideIn {
  animation: slideIn 700ms ease-in forwards;
}

@keyframes slideIn {
  0% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(-105%)
  }
}

.slideOut {
  animation: slideOut 700ms ease-out forwards;
}

@keyframes slideOut {
  0% {
    transform: translateX(-105%)
  }
  95% {
    transform: translateX(0)
  }
}

.hideLeft {
  transform: translateX(-105%);
}

.cssload-container {
  display: block;
  margin: auto;
  width: 97px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loading6 {
  width: 97px;
  height: 97px;
  background: rgba(194, 32, 56,.7);
  border-radius: 50%;
  display: flex;
  display: -o-flex;
  display: -ms-flex;
  display: -webkit-flex;
  display: -moz-flex;
}

.loading6:before {
  content: "";
  width: 0;
  height: 0;
  margin: auto;
  border: 19px solid rgb(255, 255, 255);
  border-radius: 50%;
  animation: loading6-ani1 1.6s infinite;
  -o-animation: loading6-ani1 1.6s infinite;
  -ms-animation: loading6-ani1 1.6s infinite;
  -webkit-animation: loading6-ani1 1.6s infinite;
  -moz-animation: loading6-ani1 1.6s infinite;
}

@keyframes loading6-ani1 {
  70% {
    width: 97px;
    height: 97px;
  }
  100% {
    width: 97px;
    height: 97px;
    border-width: 0;
  }
}

@-o-keyframes loading6-ani1 {
  70% {
    width: 97px;
    height: 97px;
  }
  100% {
    width: 97px;
    height: 97px;
    border-width: 0;
  }
}

@-ms-keyframes loading6-ani1 {
  70% {
    width: 97px;
    height: 97px;
  }
  100% {
    width: 97px;
    height: 97px;
    border-width: 0;
  }
}

@-webkit-keyframes loading6-ani1 {
  70% {
    width: 97px;
    height: 97px;
  }
  100% {
    width: 97px;
    height: 97px;
    border-width: 0;
  }
}

@-moz-keyframes loading6-ani1 {
  70% {
    width: 97px;
    height: 97px;
  }
  100% {
    width: 97px;
    height: 97px;
    border-width: 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1200px) {
  .lightSlider_wrap {
    height: 350px;
  }
  #lightSlider_whiteTitle,
  #lightSlider_redTitle {
    font-size: 40px;
  }
}

@media only screen and (min-width: 500px) and (max-width: 768px) {
  .lightSlider_wrap {
    height: 270px;
  }
  #lightSlider_whiteTitle,
  #lightSlider_redTitle {
    font-size: 25px;
    padding: 10px;
  }

  .lightSlider_title {
    font-size: 3em;
    }

    .lightSlider_blurb{
      font-size: 1em;
    }
}

@media only screen and (max-width: 499px) {
  .lightSlider_wrap {
    height: 185px;
  }
  #lightSlider_whiteTitle,
  #lightSlider_redTitle {
    font-size: 18px;
    padding: 7px;
  }
    .lightSlider_title {
    font-size: 2em;
    }

    .lightSlider_blurb{
      font-size: .7em;
    }
}