/**
* This is an individual banner css template
**/
/* NOTE: Make all your rules, at least, children of your parent element to avoid CSS rules cross-contamination */
banner-ad #hero-image-click {
  right: 0;
  bottom: 0;
  height: 300px;
  width: 50%;
}
banner-ad #hero-image {
  height:248px;
}
banner-ad #logo{
  left: 20px;
}

banner-ad section#frame-1,
banner-ad section#frame-2{
  height: 248px;
  width: 150px;
}

banner-ad #headline-2-container {
  height: 250px;
  width: 100%;
}

banner-ad #frame-1,
banner-ad #headline-1-container,
banner-ad #headline-2-container {
  height: 248px;
}

banner-ad #headline-1-container{
  padding-top: 44px;
}

banner-ad #headline-2-container {
  padding-top: 45px;
  padding-bottom: 70px;
}

banner-ad #headline-1,
banner-ad #headline-2 {
  padding: 0 15px 0 20px;
}

banner-ad .title,
banner-ad .title-2 {
  font-size: 23px;
  line-height: 28px;
  padding: 0 15px 0 20px;
}

banner-ad .lower-bg {
  left: 0;
  height: 300px;
}

banner-ad #carousel{
  height: 100%;
  top: 0;
  right: 0;
  width: 50%;
}

banner-ad #carousel .img {
  height: 90px;
}

banner-ad #carousel .copy {
  margin-top: 40px;
  height: auto;
}

banner-ad #carousel .item {
  padding: 10px 20px 0 20px;
}

banner-ad #carousel #carousel-nav {
  padding: 0 20px;
  top:60%;
}

banner-ad #carousel-nav{
  top: 40%;
  right: 10px;
  width: 130px;
}

banner-ad #carousel h3{
    font-size: 12px;
    line-height: 15px;
    height: 30px;
    max-width: 110px;
    text-overflow: ellipsis; 
    overflow: hidden;
}

banner-ad #carousel .copy p.original-price {
  font-size: 11px;
  line-height: 16px;
  text-decoration: line-through;
}

banner-ad #carousel p.price {
  font-size: 15px;
}

banner-ad #carousel .copy p.price-discount {
  font-size: 12px;
  line-height: 21px;
}

banner-ad #cta {
  top: 180px;
  left: 20px;
}

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;
}