/* Z-Index ordering */
banner-ad #carousel #carousel-link, banner-ad #carousel > #carousel-nav {
  z-index: 1
}

/* TODO: Move this out into the JS for more complex animation, we're using GSAP anyway. Better to keep it all centralised */

/* Transitions */
@keyframes onMouseOver {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}
@keyframes onMouseOut {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

/* Rules */
banner-ad #carousel {
  height: 300px;
  margin: auto;
  overflow: hidden;
  position: absolute;
  width: 100%;
}
banner-ad #carousel .item {
  box-sizing: border-box;
  margin: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}
banner-ad #carousel .img, banner-ad #carousel .img > div, banner-ad #carousel .copy, banner-ad #carousel .copy > div {
  width: 100%;
  height: 100%;
  overflow: hidden;
  vertical-align: top;
}
banner-ad #carousel .img > div {
  position: relative;
  left: 0;
  top: 0;
}
banner-ad #carousel div {
  display: inline-block;
}
banner-ad #carousel img {
  left: 50%;
  max-height: 100%;
  max-width: 100%;
  position: relative;
  top: 50%;
}
banner-ad #carousel .copy p {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 600;
}

banner-ad #carousel h3,
banner-ad span.eek {
  font-size: 12px;
  line-height: 17px;
  color: #666666;
}

banner-ad span.eek {
  display: block;
}

banner-ad #carousel-nav {
  height: 15px;
  margin: 0;
  pointer-events: none;
  user-select: none;
  width: 100%;
  position: absolute;
  z-index: 3;
}

banner-ad #carousel-nav > svg {
  /*Enable the element to trigger pointer events  */
  pointer-events: all;
  cursor: pointer;
  display: inline-block;
  fill: none;
  position: relative;  /*We need to always define a width and a height for SVGs otherwise some browsers, IE..., will revert to a default size that will probably not be the size you want it to be*/
  height: 17px;
  width: 15px;
  margin: 10px;
  stroke-width: 2px;
}

banner-ad #carousel-nav > svg polyline{

}

/*banner-ad #carousel-nav > #prev, 
banner-ad #carousel-nav > #next {
  stroke: #430078;
}*/

/*banner-ad svg#prev polyline:hover, svg#next polyline:hover {
    stroke: #ff9266;
}*/
banner-ad #carousel-nav > #prev {
  float: left;
  animation-duration: 0.2s;
  animation-name: onMouseOut;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}
banner-ad #carousel-nav > #next {
  float: right;
  -webkit-animation-duration: 0.2s;
  -webkit-animation-name: onMouseOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-duration: 0.2s;
  animation-name: onMouseOut;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}
banner-ad #carousel-nav > #next:hover, banner-ad #carousel-nav > #prev:hover {
  -webkit-animation-duration: 0.2s;
  -webkit-animation-name: onMouseOver;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-duration: 0.2s;
  animation-name: onMouseOver;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}