.AnimationWidgetWrapper * {
  box-sizing: unset;
}
#widgetContainer{
  opacity:0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter:alpha(opacity=0);
  -webkit-transition:opacity 2s;
  -moz-transition:opacity 2s;
  -o-transition:opacity 2s;
  -ms-transition:opacity 2s;
  transition:opacity 2s;
}
#widgetContainer.showElements{
  opacity:1;
  -ms-filter:none;
  filter:none;
}
.AnimationWidgetWrapper .widgetClear{
  clear:both;
}
.AnimationWidgetWrapper .widgetContainer{
  overflow:hidden;
  position:relative;
  /*border-top:1px solid #000;*/
  color:#000;
  font-family:'Gotham Book' Arial;
  text-transform:uppercase;
}
.AnimationWidgetWrapper .animationWindow{
  overflow:hidden;
  margin:0 auto;
  background-color: #fff;
}
.AnimationWidgetWrapper .animationContainer{
  z-index:1;
  position:relative;
}
.AnimationWidgetWrapper .animation{
  opacity:1;
  -ms-filter:none;
  filter:none;
  display:block;
  position:relative;
  float:left;
  padding:0 1px;
  color:#000;
  border:none;
  text-decoration:none;
  -webkit-transition:opacity 0.5s;
  -moz-transition:opacity 0.5s;
  -o-transition:opacity 0.5s;
  -ms-transition:opacity 0.5s;
  transition:opacity 0.5s;
}
.AnimationWidgetWrapper .hideEl{
  opacity:0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter:alpha(opacity=0);
  cursor:default;
  pointer-events:none;
}
.AnimationWidgetWrapper .imgWrap{
  overflow:hidden;
  position:relative;
}
.AnimationWidgetWrapper .imgSprite{
  position:relative;
}
.AnimationWidgetWrapper .animationHeader{
  display:table-cell;
  height:32px;
  padding:0 15px;
  font-size:10px;
  letter-spacing:2px;
  vertical-align:middle;
  text-align:center;
}
.AnimationWidgetWrapper .scrollBtnWrap{
  position:relative;
  margin:0 auto;
}
.AnimationWidgetWrapper .scrollBtnWrap .fadeEl .scrollBtn{
  opacity:.4;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  filter:alpha(opacity=40);
  cursor:default;
}
.AnimationWidgetWrapper .scrollBtnPadding{
  z-index:2;
  position:absolute;
}
.AnimationWidgetWrapper .scrollBtn{
  font-size:45px;
  padding:0 26px 5px 26px;
  -webkit-border-radius:30px;
  border-radius:50%;
  border:2px solid #000;
  color:#000;
  cursor:pointer;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-transition:opacity 1s;
  -moz-transition:opacity 1s;
  -o-transition:opacity 1s;
  -ms-transition:opacity 1s;
  transition:opacity 1s;
}
.AnimationWidgetWrapper .scrollLeftBtn{
  left:25px;
}
.AnimationWidgetWrapper .scrollRightBtn{
  right:25px;
}
.AnimationWidgetWrapper .previewWindow{
  position:relative;
  overflow:hidden;
  padding:6px 0;
  margin:10px auto;
  background-color: #fff;
}
.AnimationWidgetWrapper .previewWindow img{
  width:100%;
}
.AnimationWidgetWrapper .dragWindow{
  z-index:1;
  position:absolute;
  left:0;
  top:0;
  height:100%;
}
.AnimationWidgetWrapper .leftMask,.AnimationWidgetWrapper .rightMask{
  display:block;
  position:absolute;
  top:0;
  width:100%;
  height:100%;
  background-color:rgba(255,255,255,0.6);
  pointer-events:none;
}
.AnimationWidgetWrapper .leftMask{
  right:100%;
}
.AnimationWidgetWrapper .rightMask{
  left:100%;
}
.AnimationWidgetWrapper .previewSprite{
  float:left;
  overflow:hidden;
  padding:0 6px;
}
.AnimationWidgetWrapper .topBorders:before,
.AnimationWidgetWrapper .topBorders:after,
.AnimationWidgetWrapper .bottomBorders:before,
.AnimationWidgetWrapper .bottomBorders:after{
  display:block;
  position:absolute;
  content:"";
  width:10px;
  height:10px;
  border:3px solid #000;
}
.AnimationWidgetWrapper .topBorders:before{
  left:0;
  top:0;
  border-bottom:none;
  border-right:none;
}
.AnimationWidgetWrapper .topBorders:after{
  right:0;
  top:0;
  border-bottom:none;
  border-left:none;
}
.AnimationWidgetWrapper .bottomBorders:before{
  left:0;
  bottom:0;
  border-top:none;
  border-right:none;
}
.AnimationWidgetWrapper .bottomBorders:after{
  right:0;
  bottom:0;
  border-top:none;
  border-left:none;
}
.AnimationWidgetWrapper .animationWindow::-webkit-scrollbar{
  display:none;
}
.AnimationWidgetWrapper .scrollbar .animationWindow::-webkit-scrollbar{
  display:block;
  width:12px;
}
.AnimationWidgetWrapper .scrollbar .animationWindow::-webkit-scrollbar-track{
  background-color:#fff;
  background-color:rgba(255,255,255,0.5);
}
.AnimationWidgetWrapper .scrollbar .animationWindow::-webkit-scrollbar-thumb{
  background-color:#000;
}
.AnimationWidgetWrapper .showElements{
  opacity:1;
  -ms-filter:none;
  filter:none;
}
.AnimationWidgetWrapper .startMotion .animationWindow{
  overflow-x:scroll;
}
.AnimationWidgetWrapper .startMotion .bounce{
  -webkit-animation:bounce 4s ease-out infinite;
  -moz-animation:bounce 4s ease-out infinite;
  -o-animation:bounce 4s ease-out infinite;
  -ms-animation:bounce 4s ease-out infinite;
  animation:bounce 4s ease-out infinite;
}
.AnimationWidgetWrapper .startMotion .dragWindow,.AnimationWidgetWrapper .startMotion .previewWindow{
  cursor:pointer;
}
@-moz-keyframes bounce{
  0%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-o-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}
  20%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-o-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}
  40%{-webkit-transform:translateX(-25%);-moz-transform:translateX(-25%);-o-transform:translateX(-25%);-ms-transform:translateX(-25%);transform:translateX(-25%);}
  60%{-webkit-transform:translateX(25%);-moz-transform:translateX(25%);-o-transform:translateX(25%);-ms-transform:translateX(25%);transform:translateX(25%);}
  80%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-o-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}
  100%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-o-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);};  
}
@-webkit-keyframes bounce{
  0%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-o-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}
  20%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-o-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}
  40%{-webkit-transform:translateX(-25%);-moz-transform:translateX(-25%);-o-transform:translateX(-25%);-ms-transform:translateX(-25%);transform:translateX(-25%);}
  60%{-webkit-transform:translateX(25%);-moz-transform:translateX(25%);-o-transform:translateX(25%);-ms-transform:translateX(25%);transform:translateX(25%);}
  80%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-o-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}
  100%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-o-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);};
}@-o-keyframes bounce{
  0%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-o-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}
  20%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-o-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}
  40%{-webkit-transform:translateX(-25%);-moz-transform:translateX(-25%);-o-transform:translateX(-25%);-ms-transform:translateX(-25%);transform:translateX(-25%);}
  60%{-webkit-transform:translateX(25%);-moz-transform:translateX(25%);-o-transform:translateX(25%);-ms-transform:translateX(25%);transform:translateX(25%);}
  80%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-o-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}
  100%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-o-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);};
}
@keyframes bounce{
  0%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-o-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}
  20%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-o-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}
  40%{-webkit-transform:translateX(-25%);-moz-transform:translateX(-25%);-o-transform:translateX(-25%);-ms-transform:translateX(-25%);transform:translateX(-25%);}
  60%{-webkit-transform:translateX(25%);-moz-transform:translateX(25%);-o-transform:translateX(25%);-ms-transform:translateX(25%);transform:translateX(25%);}
  80%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-o-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}
  100%{-webkit-transform:translateX(0);-moz-transform:translateX(0);-o-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);};  
}
.AnimationWidgetWrapper .scrollBtn:hover{
  background-color:#fff;
}
.AnimationWidgetWrapper .fadeEl .scrollBtn:hover{
  background-color:transparent;
}
.AnimationWidgetWrapper .scrollBtnPadding{
  padding:10px;
}