.glider-contain {
   width: 100%;
   margin: 0 auto;
   position: relative;
 }
 .glider {
   margin: 0 auto;
   position: relative;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: none;
   transform: translateZ(0);
 }
 .glider-track {
   transform: translateZ(0);
   width: 100%;
   margin: 0;
   padding: 0;
   display: flex;
   z-index: 1;
 }
 .glider.draggable {
   user-select: none;
   cursor: -webkit-grab;
   cursor: grab;
 }
 .glider.draggable .glider-slide img {
   user-select: none;
   pointer-events: none;
 }
 .glider.drag {
   cursor: -webkit-grabbing;
   cursor: grabbing;
 }
 .glider-slide {
   user-select: none;
   justify-content: center;
   align-content: center;
   width: 100%;
 }
 .glider-slide img {
   max-width: 100%;
 }
 .glider::-webkit-scrollbar {
   opacity: 0;
   height: 0;
 }
 .glider-prev,.glider-next {
   user-select: none;
   position: absolute;
   outline: none;
   background: none;
   padding: 0;
   z-index: 2;
   font-size: 40px;
   text-decoration: none;
   left: -12px;
   border: 0;
   top: 45%;
   cursor: pointer;
   color: #666;
   opacity: 1;
   line-height: 1;
   transition: opacity .3s cubic-bezier(.17,.67,.83,.67),
               color .3s cubic-bezier(.17,.67,.83,.67);
 }
 .glider-prev:hover,
 .glider-next:hover,
 .glider-prev:focus,
 .glider-next:focus {
   color: #a89cc8;
   outline-style:none;
   box-shadow:none;
   border-color:transparent;
 }
 .glider-next {
   right: -18px;
   left: auto;
 }
 .glider-prev {
   left: -16px;
   right: auto;
 }
 .glider-next.disabled,
 .glider-prev.disabled {
   opacity: .0;
   color: #666;
   cursor: default;
 }
 .glider-slide {
   min-width: 150px;
 }
 .glider-hide {
   opacity: 0;
 }
 .glider-dots {
   user-select: none;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   margin: 16px auto 0 auto;
   padding: 0;
 }
 .glider-dot {
   background: none;
   border: 0;
   padding: 0;
   user-select: none;
   outline: none;
   display: block;
   cursor: pointer;
   color: #ccc;
   border-radius: 999px;
   background: #ccc;
   width: 8px;
   height: 8px;
   margin: 4px;
 }
 .glider-dot:hover,
 .glider-dot:focus,
 .glider-dot.active {
   background: #a89cc8;
 }
 @media(max-width: 36em){
   .glider::-webkit-scrollbar {
     opacity: 1;
     -webkit-appearance: none;
     width: 7px;
     height: 3px;
   }
   .glider::-webkit-scrollbar-thumb {
     opacity: 1;
     border-radius: 99px;
     background-color: rgba(255, 255, 255,0);
     box-shadow: 0 0 1px rgba(255,255,255,0);
   }
 }