/*  Scrolling Banners */



.scrolling__banner__outer { position: relative; display: block; width: 100%; height: 246px; border: 0px solid red;  z-index: 10; margin-top: -62px; margin-bottom: -62px;  }
.scrolling__banner__inner { position: relative; display: block; width: 100%; height: 100%; overflow: hidden;   }
.content__inner--scrolling_banner { max-width: 100% !important;  padding: 0px 0px !important;  }

.sb__track { position: relative; display: block; height: 100%; border: 0px solid blue; min-width: 100%;  text-align: left; width: 45000px;  margin-left: -4px;   }

.sb__each__outer { position: relative; display: inline-block; height: 100%; border: 0px solid green;    }
.sb__image { position: absolute; top: 4px; left: 4px; bottom: 4px; right: 4px;  overflow: hidden; background-repeat: no-repeat; background-position: 50% 50%; background-attachment: scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.unshown__image { position: relative; display: inline-block; height: 100%;  visibility: hidden;  }
.sb__caption { position: absolute; bottom: 4px; left: 4px; right: 4px; height: auto; background-color: rgba(10,19,39,0.5); border: 0px solid red; font-size: 14px; line-height: 15px;  font-family: 'VAGRoundedNext-Light';   padding: 6px 16px; z-index: 20;  }

.sb__left__arrow { position: absolute; left: -64px; top: 91px; width: 64px; height: 64px; background-image: url('../img/Left-Arrow-Wrong.png'); background-size: 64px; background-repeat: no-repeat;  z-index: 30; opacity: 0; transition: all 0.5s ease-out; cursor: pointer;  }
.sb__right__arrow { position: absolute; right: -64px; top: 91px; width: 64px; height: 64px; background-image: url('../img/Right-Arrow-Wrong.png'); background-size: 64px; background-repeat: no-repeat;  z-index: 30; opacity: 0; transition: all 0.5s ease-out; cursor: pointer;  }
.scrolling__banner__outer:hover .sb__left__arrow {  left: 80px; opacity: 0.6; }
.scrolling__banner__outer:hover .sb__right__arrow {  right: 80px; opacity: 0.6; }



@media only screen and (max-width: 500px) {
  
    /* Scrolling Banner */
    .scrolling__banner__outer { margin-top: -40px; margin-bottom: -40px; height: 180px;  }
    .sb__each__outer { max-width: 100vw;  }
    .sb__caption { font-size: 12px; line-height: 13px; padding: 3px 8px;   }
    .sb__left__arrow {  left: -32px; top: 74px; width: 32px; height: 32px;  background-size: 32px;  }
    .sb__right__arrow {  right: -32px; top: 74px; width: 32px; height: 32px;  background-size: 32px;   }
    .scrolling__banner__outer:hover .sb__left__arrow {  left: 16px; opacity: 0.6; }
    .scrolling__banner__outer:hover .sb__right__arrow {  right: 16px; opacity: 0.6; }
    .sb__image { top: 2px; left: 2px; bottom: 2px; right: 2px; }
    .sb__caption {  bottom: 2px; left: 2px; right: 2px; }
    .sb__track { margin-left: -2px; }
  
}

@media only screen and (min-width: 501px) and (max-width: 767px) {
  
    /* Scrolling Banner */
    .scrolling__banner__outer { margin-top: -40px; margin-bottom: -40px; height: 180px;  }
    .sb__each__outer { max-width: 100vw;  }
    .sb__caption { font-size: 12px; line-height: 13px; padding: 3px 8px;   }
    .sb__left__arrow {  left: -32px; top: 74px; width: 32px; height: 32px;  background-size: 32px;  }
    .sb__right__arrow {  right: -32px; top: 74px; width: 32px; height: 32px;  background-size: 32px;   }
    .scrolling__banner__outer:hover .sb__left__arrow {  left: 16px; opacity: 0.6; }
    .scrolling__banner__outer:hover .sb__right__arrow {  right: 16px; opacity: 0.6; }
    .sb__image { top: 2px; left: 2px; bottom: 2px; right: 2px; }
    .sb__caption {  bottom: 2px; left: 2px; right: 2px; }
    .sb__track { margin-left: -2px; }
  
}

@media only screen and (min-width:  768px) and (max-width: 840px)   {
  
    /* Scrolling Banner */
    .scrolling__banner__outer { margin-top: -40px; margin-bottom: -40px; height: 180px;  }
    .sb__each__outer { max-width: 100vw;  }
    .sb__caption { font-size: 12px; line-height: 13px; padding: 3px 8px;   }
    .sb__left__arrow {  left: -32px; top: 74px; width: 32px; height: 32px;  background-size: 32px;  }
    .sb__right__arrow {  right: -32px; top: 74px; width: 32px; height: 32px;  background-size: 32px;   }
    .scrolling__banner__outer:hover .sb__left__arrow {  left: 16px; opacity: 0.6; }
    .scrolling__banner__outer:hover .sb__right__arrow {  right: 16px; opacity: 0.6; }
    .sb__image { top: 2px; left: 2px; bottom: 2px; right: 2px; }
    .sb__caption {  bottom: 2px; left: 2px; right: 2px; }
    .sb__track { margin-left: -2px; }
  
  
}