/*
 * Mi Thumb
 * 
 * Copyright 2017 Stuart Nicholls
 * http://www.cssplay.co.uk/
 * 
 * version v3.0.0
 */

.mi_thumb .mi_cont {position:absolute; left:0; top:0; width:100%; height:100%; transition-timing-function: linear; transform:translate3d(0,0,0); touch-action: pan-y; white-space:nowrap; font-size:0; cursor:grab; background-color: #000;}
.mi_thumb .mi_cont.grabbing {cursor:grabbing;}
.mi_pane {width:100%; height:100%; display:inline-block; overflow:hidden; position:relative; background-position:center; background-repeat:no-repeat; background-size:cover; background-color:#000;}

/* bullets styling
.mi_thumb .bullets {display:inline-block; text-align:center; height:8px; position:absolute; bottom:30px; left:50%; transform:translateX(-50%);}
.mi_thumb .bullets span {display:inline-block; width:30px; height:8px; background:#A5A475; margin:0 5px;}
.mi_thumb .bullets span.current {background-color:#fff;}
*/

/* thumbnail styling */ 
.mi_thumb .thumbs {display:block; position:absolute; left:0; top:100%; width:100%; height:64px; white-space:nowrap; font-size:0; overflow:hidden; background:#000; border-top:2px solid #000; border-bottom:2px solid #000;}
.mi_thumb .thumbs .thumbInner {position:absolute; height:100%; left:50%; margin-left:-90px;}
.mi_thumb .thumbs .thumbInner span {position:relative; width:100px; height:64px; display:inline-block; box-sizing:border-box; background-color:#000; opacity:0.6; transition:0.5s; background-position:center center; background-repeat:no-repeat; background-size:cover;}

/* black left/right borders on thumbnails */
.mi_thumb .thumbs .thumbInner span::before {content:""; display:block; width:1px; height:100%; background:#000; position:absolute; left:0; top:0;}
.mi_thumb .thumbs .thumbInner span::after {content:""; display:block; width:1px; height:100%; background:#000; position:absolute; right:0; top:0;}
.mi_thumb .thumbs .thumbInner span.current {opacity:1;}
.mi_thumb .thumbs .thumbInner span:hover {opacity:1; cursor:pointer;}
.mi_thumb .thumbs .thumbInner span.current:hover {opacity:1; cursor:default;}

/* main image left/right arrows */
.mi_thumb .imageArrows {display:block; width:32px; height:32px; border-radius:32px; background:#a5a475; position:absolute; top:50%; margin-top:-20px; cursor:pointer;}
.mi_thumb .imageArrows::before {content:""; display:block; width:12px; height:4px; position:absolute; left:11px; bottom:11px; background:#fff;}
.mi_thumb .imageArrows::after {content:""; display:block; width:4px; height:12px; position:absolute; left:11px; bottom:11px; background:#fff;}
.mi_thumb .imageArrows.imgprev {left:10px; transform:rotate(45deg);}
.mi_thumb .imageArrows.imgnext {right:10px; transform:rotate(-135deg);}

/* thumbnail left/right arrows */
.mi_thumb .thumbArrows {display:block; width:32px; height:32px; border-radius:32px; background:rgba(0,0,0,0.5); position:absolute; bottom:-45px; margin-bottom:-4px; cursor:pointer;}
.mi_thumb .thumbArrows::before {content:""; display:block; width:12px; height:4px; position:absolute; left:11px; bottom:11px; background:#fff;}
.mi_thumb .thumbArrows::after {content:""; display:block; width:4px; height:12px; position:absolute; left:11px; bottom:11px; background:#fff;}
.mi_thumb .thumbArrows.thbprev {left:10px; transform:rotate(45deg);}
.mi_thumb .thumbArrows.thbnext {right:10px; transform:rotate(-135deg);}

/* additional first image styling for loop */ 
.mi_thumb .firstImage {display:block; width:100%; height:100%; position:absolute; top:0; overflow:hidden; background-position:center center; background-repeat:no-repeat; background-size:cover;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
pointer-events: none;
}

/* additional last image styling for loop */ 
.mi_thumb .lastImage {display:block; width:100%; height:100%; position:absolute; top:0; overflow:hidden; background-position:center center; background-repeat:no-repeat; background-size:cover;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
pointer-events: none;
}

/* play/pause button styles */
.mi_thumb .playpause {display:block; width:40px; height:40px; border-radius:40px; background:rgba(0,0,0,0.5); position:absolute; top:10px; right:14px; cursor:pointer;}
.mi_thumb .play::before {content:""; display:block; width:0; height:0; position:absolute; left:14px; top:9px; border:16px solid transparent; border-left-color:#fff; border-width:10px 0 10px 16px; z-index:10;}
.mi_thumb .paused::before {content:""; display:block; width:4px; height:17px; background:#fff; position:absolute; left:14px; top:11px;z-index:10;}
.mi_thumb .paused::after {content:""; display:block; width:4px; height:17px; background:#fff; position:absolute; left:22px; top:11px;z-index:10;}

/* responsive action at width 760px */
@media only screen and (max-width: 640px) {
.mi_thumb .mi_wrap {width:100%; height:100%; padding-bottom:0;}
.mi_thumb .thumbs .thumbInner {margin-left:-50px;}
.mi_thumb .thumbs .thumbInner span {width:100px; height:64px; position:relative; overflow:hidden;}
}

/* responsive action at width 500px */
@media only screen and (max-width: 500px) {
/* main image left/right arrows */
.mi_thumb .imageArrows {display:block; width:23px; height:23px; border-radius:23px; background:#a5a475; position:absolute; top:50%; margin-top:-20px; cursor:pointer;}
.mi_thumb .imageArrows::before {content:""; display:block; width:10px; height:3px; position:absolute; left:8px; bottom:8px; background:#fff;}
.mi_thumb .imageArrows::after {content:""; display:block; width:3px; height:10px; position:absolute; left:8px; bottom:8px; background:#fff;}
.mi_thumb .imageArrows.imgprev {left:3px; transform:rotate(45deg);}
.mi_thumb .imageArrows.imgnext {right:3px; transform:rotate(-135deg);}

/* thumbnail left/right arrows */
.mi_thumb .thumbArrows {display:block; width:23px; height:23px; border-radius:23px; background:rgba(0,0,0,0.5); position:absolute; bottom:-41px; margin-bottom:-4px; cursor:pointer;}
.mi_thumb .thumbArrows::before {content:""; display:block; width:9px; height:3px; position:absolute; left:8px; bottom:8px; background:#fff;}
.mi_thumb .thumbArrows::after {content:""; display:block; width:3px; height:9px; position:absolute; left:8px; bottom:8px; background:#fff;}
.mi_thumb .thumbArrows.thbprev {left:10px; transform:rotate(45deg);}
.mi_thumb .thumbArrows.thbnext {right:10px; transform:rotate(-135deg);}
    
/* play/pause button styles */
.mi_thumb .playpause {display:block; width:30px; height:30px; border-radius:30px; background:rgba(0,0,0,0.5); position:absolute; top:10px; right:10px; cursor:pointer;}
.mi_thumb .play::before {content:""; display:block; width:0; height:0; position:absolute; left:11px; top:7px; border:10px solid transparent; border-left-color:#fff; border-width:8px 0 8px 13px; z-index:10;}
.mi_thumb .paused::before {content:""; display:block; width:3px; height:13px; background:#fff; position:absolute; left:10px; top:9px;z-index:10;}
.mi_thumb .paused::after {content:""; display:block; width:3px; height:13px; background:#fff; position:absolute; left:17px; top:9px;z-index:10;}
}