/*** DO NOT MESS WITH CODE BETWEEN THESE COMMENTS ***/
.loading {
  background-color: rgba(0,0,0,0.7);
  height: 100%;
  position: absolute;
    top: 0px;
    left: 0px;
  text-align: center;
  width: 100%; }
.loading img {
  animation-name: loading;
  animation-duration: 1.6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  width: 50%;
  height: 100%; }

@keyframes loading {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


.navigator .i {
  cursor: pointer;
  position: absolute; }
.navigator .i .b {
  fill: #fff;
  fill-opacity: 0.5; }
.navigator .i:hover .b {
  fill-opacity: .7; }
.navigator .iav .b {
  fill-opacity: 1; }
.navigator .i.idn {
  opacity: .3; }


.arrow {
  cursor: pointer;
  display: block;
  position: absolute;
  height: 55px;
  width: 55px; }
.arrow .a {
  fill: none;
  stroke: #fff;
  stroke-width: 360;
  stroke-miterlimit: 10; }
.arrow:hover {
  opacity: .8; }
.arrow.arrowdn {
  opacity: .5; }
.arrow.arrowds {
  opacity: .3;
  pointer-events: none; }
/** DO NOT MESS WITH CODE ABOVE **/


#sliderContainer {
  height: 380px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
    top: 0px;
    left: 0px;
  width: 980px;
  visibility: hidden; }
  
.slides {
  cursor: default;
  height: 380px;
  width: 980px; }

.navigator {
  position: absolute;
    bottom: 12px;
    right: 12px; }
.navigator .i {
  height: 16px;
  width: 16px; }
.navigator svg {
  position: absolute;
    top: 0;
    left: 0;
  height: 100%;
  width: 100%; }

.arrowleft { left: 25px; }
.arrowright { right: 25px; }
.arrow svg {
  position: absolute;
    top: 0;
    left: 0;
  height: 100%;
  width: 100%; }