/*
== jquery thumbnail/image scroller ==
Plugin URI: http://manos.malihu.gr/jquery-thumbnail-scroller/
*/
/* 
------------------------------------------------------------------------------------------------------------------------
1. BASIC STYLE  
------------------------------------------------------------------------------------------------------------------------
*/
	.mThumbnailScroller{ -ms-touch-action: none; touch-action: none; /* MSPointer events - direct all pointer events to js */ }
	.mThumbnailScroller.mTS_no_scroll{ -ms-touch-action: auto; touch-action: auto; }

	.mTSWrapper{ position: relative; overflow: hidden; height: 100%; max-width: 100%; outline: none; direction: ltr; }

	.mTSContainer{ margin: 0; padding: 0; overflow: hidden;	}

	ul.mTSContainer, ol.mTSContainer{ list-style: none; }

	.mTSThumb, ul.mTSContainer > li img{ vertical-align: bottom; }

	.mTS_vertical .mTSContainer{ margin-top: 0 !important; margin-bottom: 0 !important; }

	.mTS_horizontal .mTSContainer{ margin-left: 0 !important; margin-right: 0 !important; }

/* 
------------------------------------------------------------------------------------------------------------------------
2. SCROLLING BUTTONS STYLE  
------------------------------------------------------------------------------------------------------------------------
*/

	.mTSButton{ width: 20px; height: 20px; line-height: 20px; padding: 14px; overflow: hidden; text-align: center; background-color: #000; color: #fff; display: inline-block; position: absolute; top: 0; left: 0; opacity: 1; -webkit-transition: height 0s ease-out 0s, width 0s ease-out 0s, padding 0s ease-out 0s, opacity .2s ease-out 0s; -moz-transition: height 0s ease-out 0s, width 0s ease-out 0s, padding 0s ease-out 0s, opacity .2s ease-out 0s; -o-transition: height 0s ease-out 0s, width 0s ease-out 0s, padding 0s ease-out 0s, opacity .2s ease-out 0s; -ms-transition: height 0s ease-out 0s, width 0s ease-out 0s, padding 0s ease-out 0s, opacity .2s ease-out 0s; transition: height 0s ease-out 0s, width 0s ease-out 0s, padding 0s ease-out 0s, opacity .2s ease-out 0s; }

	/* buttons positioning */
	
	.mTSButtonDown{ top: auto; bottom: 0; }

	.mTSButtonRight{ left: auto; right: 0; }

	.mTSButtonUp, .mTSButtonDown{ left: 50%; margin-left: -24px; }

	.mTSButtonLeft, .mTSButtonRight{ top: 50%; margin-top: -24px; }

	.mTSButtonIconContainer{ display: inline-block;	position: relative; width: 100%; padding-bottom: 100%; overflow: hidden; }

	.mTSButtonIcon{ display: inline-block; fill: #fff; position: absolute; top: 0; left: 0;	}

	.mTSButton.mTS-hidden, .mThumbnailScroller.mTS_no_scroll .mTSButton{ opacity: 0; height: 0; width: 0; padding: 0; -webkit-transition: height 0s ease-out .2s, width 0s ease-out .2s, padding 0s ease-out .2s, opacity .2s ease-out; -moz-transition: height 0s ease-out .2s, width 0s ease-out .2s, padding 0s ease-out .2s, opacity .2s ease-out; -o-transition: height 0s ease-out .2s, width 0s ease-out .2s, padding 0s ease-out .2s, opacity .2s ease-out;	-ms-transition: height 0s ease-out .2s, width 0s ease-out .2s, padding 0s ease-out .2s, opacity .2s ease-out; transition: height 0s ease-out .2s, width 0s ease-out .2s, padding 0s ease-out .2s, opacity .2s ease-out; }

/* 
------------------------------------------------------------------------------------------------------------------------
3. THUMBNAILS STYLE  
------------------------------------------------------------------------------------------------------------------------
*/

	/* thumbnail container (default: li) */
	
	.mTS_horizontal .mTSThumbContainer, .mTS_horizontal ul.mTSContainer > li{ float: left; }

/* 
------------------------------------------------------------------------------------------------------------------------
4. THEMES 
------------------------------------------------------------------------------------------------------------------------
*/

	/* theme: "buttons-in" */

	.mTS-buttons-in{ padding: 14px;	background-color: #000; }

	.mTS-buttons-in .mTSButtonIcon{ fill: #fff; }

	.mTS-buttons-in .mTSWrapper, .mTS-buttons-in .mTSButton{ background-color: inherit; }

	.mTS-buttons-in .mTSButtonLeft, .mTS-buttons-in .mTSButtonRight{ width: 24px; height: 48px; padding: 24px 4px 0 4px; margin-top: -36px;	}

	.mTS-buttons-in .mTSButtonUp, .mTS-buttons-in .mTSButtonDown{ width: 24px; height: 24px; padding: 4px 24px; margin-left: -36px; }
	
	.mTS-buttons-in .mTSButton.mTS-hidden{ height: 0; width: 0; padding: 0; }

	.mTS-buttons-in .mTSButton:not(.mTS-hidden){ opacity: .4; }

	.mTS-buttons-in:hover .mTSButton:not(.mTS-hidden){ opacity: 1; }

	.mTS-buttons-in .mTS_vertical .mTSThumbContainer{ margin: 14px 0; }

	.mTS-buttons-in .mTS_vertical .mTSThumbContainer:first-child{ margin-top: 0; }

	.mTS-buttons-in .mTS_vertical .mTSThumbContainer:last-child{ margin-bottom: 0; }

	.mTS-buttons-in .mTS_horizontal .mTSThumbContainer{ margin: 0 7px; }

	.mTS-buttons-in .mTS_horizontal .mTSThumbContainer:first-child{ margin-left: 0; }

	.mTS-buttons-in .mTS_horizontal .mTSThumbContainer:last-child{ margin-right: 0; }

	/* ---------------------------------------- */



	/* theme: "buttons-out" */

	.mTS-buttons-out{ padding: 6px; background: #000; }

	.mTS-buttons-out .mTSButtonIcon{ fill: #000; }

	.mTS-buttons-out .mTSButton { background-color: transparent; width: 36px; height: 36px; line-height: 42px; padding: 6px; }
	
	.mTS-buttons-out .mTSButton.mTS-hidden { height: 0; width: 0; padding: 0; }

	.mTS-buttons-out .mTS_vertical .mTSThumbContainer{ margin: 6px 0; }

	.mTS-buttons-out .mTS_vertical .mTSThumbContainer:first-child{ margin-top: 0; }

	.mTS-buttons-out .mTS_vertical .mTSThumbContainer:last-child{ margin-bottom: 0; }

	.mTS-buttons-out .mTS_horizontal .mTSThumbContainer{ margin: 0 3px; }

	.mTS-buttons-out .mTS_horizontal .mTSThumbContainer:first-child{ margin-left: 0; }

	.mTS-buttons-out .mTS_horizontal .mTSThumbContainer:last-child{ margin-right: 0; }

	/* ---------------------------------------- */



	/* theme: "hover-full" */

	.mTS-hover-full .mTS_vertical .mTSThumbContainer{ margin: 8px 0; }

	.mTS-hover-full .mTS_vertical .mTSThumbContainer:first-child{ margin-top: 40px; }

	.mTS-hover-full .mTS_vertical .mTSThumbContainer:last-child{ margin-bottom: 40px; }

	.mTS-hover-full .mTS_horizontal .mTSThumbContainer{ margin: 0 5px; position: relative; width: 300px; }

	/* ---------------------------------------- */

        .mTS_horizontal ul.mTSContainer > li {padding-bottom: 60px;}
        .mTS_horizontal ul.mTSContainer > li .slider_img {position: relative;   }
        .touchEnabled .mTS_horizontal ul.mTSContainer > li {padding-bottom: 0px;}
        .mTS_horizontal ul.mTSContainer > li .scroller_template_nav {position:absolute; opacity:0; bottom:100%; left:0%; width:100%; padding: 0.5em 1em 0; z-index:1; transition:bottom .2s, opacity .5s;}        
        .touchEnabled .mTS_horizontal ul.mTSContainer > li .scroller_template_nav {position:static; opacity:1;}
        .mTS_horizontal ul.mTSContainer > li:hover .scroller_template_nav {opacity:1; bottom:0%;}
        .mTS_horizontal ul.mTSContainer > li span {display: block;}        
        .mTS_horizontal ul.mTSContainer > li span.temp_title { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100%;}
        .mTS_horizontal ul.mTSContainer > li span.customer_name {font-size: 13px; color: #48ff8a; margin: 5px 0; float: left; width: 59%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
        .mTS_horizontal ul.mTSContainer > li span.customer_date {font-size: 13px; margin: 5px 0 10px; opacity: 0.8; float: right; width: 40%; text-align: right;}
        .mTS_horizontal ul.mTSContainer > li .used_temp_play {position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 3.5rem; height: 3.5rem; border-radius: 100%; background: #fff; box-shadow: 0 0 16px 0 rgba(0,0,0,.5); transition: all .2s ease-out; padding-top: 8px; text-align: center;}
        .mTS_horizontal ul.mTSContainer > li:hover .used_temp_play {box-shadow: 0 0 1.5rem 0 #000; height: 5rem; width: 5rem; padding-top: 15px;}