/*slider css */
    #mcts1 {
	   background: url("loading.gif") no-repeat scroll 50% 50% #F7F7F7;
	    border: 1px solid #DDDDDD;
	    box-shadow: 0 1px 3px #CCCCCC;
	    font-size: 0;
	    height: 89px;
	    margin-top: 10px;
	    padding: 14px 20px;
	    position: relative;
	    width: 960px;
	}
	#mcts1>* {display:none;}
	  
	/*-------- div.item is each thumbnail's wrapper created by the javascript ------*/
	#mcts1 div.item 
	{
	    background-color: white;
	    border: 1px solid #DDDDDD;
	    margin: 0 7px 6px;
	    padding: 2px;
	    position: relative;
	    text-align: center;
	    width: 100px;
	}

	#mcts1 img 
	{
	    border:none;
	}
	       
	/*---------built-in navigation bullets--------*/
	/* Note: the navBullets won't be available when "scrollByEachThumb" was set to false in the Javascript.*/
	#mcts1 .navBullets
	{
	    display:none;
	}


	/*---------navigation buttons-------*/
	#mcts1 .navPrev, #mcts1 .navNext, #mcts1 .navPlay, #mcts1 .navPause 
	{
	    width:29px; height:29px;
	 top:240px;
	    background:url(navButtons.png); 
	    display:block; z-index:5; cursor:pointer;
	}
	 .navPrev {     background: url("images/scroll-right.gif") no-repeat scroll left center transparent;
	    border: 0px solid red;
	    right: 5px;
		display:inline;
	    position: absolute;
	    top: 40px;
	    width: 14px; }
	#mcts1 .navPrev:hover { }
	#mcts1 .navPrevDisabled, #mcts1 .navPrevDisabled:hover { display:none; cursor:default; }

	.navNext {
		  background: url("images/scroll-left.gif") no-repeat scroll right center transparent;
	    border: 0px solid red;
	    left:5px;
		display:inline;
	    position: absolute;
	    top: 40px;
	    width: 14px;
		 } 
	#mcts1 .navNext:hover {} 
	#mcts1 .navNextDisabled, #mcts1 .navNextDisabled:hover { cursor:default; display:none;} 

	#mcts1 .navPause, #mcts1 .navPlay {left:-350px;}
	#mcts1 .navPause {background-position:0 0;} 
	#mcts1 .navPause:hover {background-position:-29px 0;} 
	#mcts1 .navPlay {background-position:0 -29px;} 
	#mcts1 .navPlay:hover {background-position:-29px -29px;} 

	.navPrev, .navPlay, .navPause, .navNext 
	{
	   -moz-user-select: -moz-none;
	   -khtml-user-select: none;
	   -webkit-user-select: none;
	   -o-user-select: none;
	   user-select: none;
	}

	        
	/*---------navigation bullets--------*/

	/* Note: When "ScrollAllInView" was set to true in the Javascript, the navBullets won't be displayed.*/
	.navBullets
	{
	    /*display:none;*/ /*set it display:none when you want to hide it*/
		z-index:5;
		cursor:pointer;
		/*Specify the position of navigation buttons*/
		position:absolute;
		top:20px;
		left:220px;
		width:24px;
	}
	/*.navBullets div defines the style of each bullet*/
	.navBullets div 
	{
	    width:8px; height:8px;
	    background:transparent url(bullets.png) no-repeat 0 0;
	    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
	    margin-right:6px;/*margin-right determines the distance between each list item*/
	    _position:relative;/*IE6 hack*/
	}

	.navBullets div.focus {background-position:0 -8px;}



	/* --------- Others ------- */
	#mcts1
	{
		transform: translate3d(0,0,0);
	    -ms-transform:translate3d(0,0,0);
	    -moz-transform:translate3d(0,0,0);
	    -o-transform:translate3d(0,0,0);
	    -webkit-transform: translate3d(0,0,0);
	}

	@media only screen and (max-width: 820px) {
		#mcts1 { width:100%; }

	}

	 /*slider css end */	 
	 
	.floatLeft{
		float:left;
	}
	#sliderFrame {
		margin: 0px; width: 700px; position: relative;
	}
	#slider {
		background: url("loading.gif") no-repeat 50% 50% rgb(255, 255, 255); margin: 0px; width: 700px; height: 465px; position: relative; box-shadow: 0px 1px 7px #999999;
	}
	#slider img {
		border: currentColor; display: none; position: absolute;
	}
	#slider a.imgLink {
		margin: 0px; padding: 0px; border: 0px currentColor; left: 0px; top: 0px; width: 100%; height: 100%; display: none; position: absolute; z-index: 2;
	}
	div.mc-caption-bg {
		padding: 0px; left: 0px; top: 270px; width: 600px; height: auto; overflow: hidden; font-size: 0px; position: absolute; z-index: 3;
	}
	div.mc-caption-bg2 {
		padding: 0px; left: 0px; top: 270px; width: 600px; height: auto;  font-size: 0px;  z-index: 3;
	}
	div.mc-caption-bg {
		background-color: transparent;
	}
	div.mc-caption {
		font: 12px/16px Verdana;  width: 245px !important; left: 721px; position:absolute; padding: 10px 0px; text-align: left; color: rgb(51, 51, 51); z-index: 4; font-size-adjust: none; font-stretch: normal;
	}

	div.mc-caption h3
	{
		color: #333333;
	    font: 18px;
	    text-align: left;
		padding-bottom: 10px;
		font-weight:bold;
	}

	div.mc-caption a {
		color: rgb(0, 153, 255);
	}
	div.mc-caption a:hover {
		color: rgb(0, 102, 204);
	}
	div.navBulletsWrapper {
		display: none;
	}
	#slider {
		transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0);
	}

.portfolio-grid {

	/*-- Slider--*/
	.cm-slider {
		position: relative;
	}
	/*--Window/Masking Styles--*/
	.cm-slider-window {
		width: 100%;
		overflow: hidden; /*--Hides anything outside of the set width/height--*/
		position: relative;
		border:3px solid #f9f9f9;
	}
	.cm-slide-page-reel {
		position: absolute;
		top: 0; left: 0;
	}
	.cm-slide-page-reel img {
		border: 0; padding: 0;
	}
	/*--Paging Styles--*/
	.cm-paging {
		position: absolute;
		bottom: 20px; 
		right: 25px;
		width: 200px; 
		height:20px;
		margin-bottom: 10px;
		color: #808080;
		text-align: right;
		line-height: 40px;
		display: none; /*--Hidden by default, will be later shown with jQuery--*/
	}
	.cm-paging a, .cm-paging a:visited, .cm-paging a:hover, .cm-paging a:active {
		display: inline-block;
		padding: 4px 2px !important;
		background: #dbdbdb;
		text-decoration: none;
		text-align: center;
		color: #808080;
		line-height: 100%;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
	}
	.cm-paging a.active {
		font-weight: bold;
		background: #4d4d4d;
		color: #fff;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
	}
	.cm-paging-dots a, .cm-paging-dots a:hover {
		width: 15px;
		padding: 0;
		background: url(../../images/paging_dots.png) 0 0 no-repeat;
	}
	.cm-paging-dots a.active {
		width: 15px;
		padding: 0;
		background: url(../../images/paging_dots.png) 0 -40px no-repeat;
	}
	.cm-slide-page {
		float: left;
		text-align: center;
		vertical-align: middle;
	}
	/*-- Arrows --*/
	.cm-slide-prev, .cm-slide-next {
		position: absolute;
		width: 18px;
		height: 36px;
		bottom: 50px;
		cursor: pointer;
		background-image: url(../../images/icons/prev_next_btn_sprite.png);
		background-repeat: no-repeat;
	}
	.cm-slide-prev {
		left: 20px;
		background-position: 0 0;
	}
	.cm-slide-next {
		right: 20px;
		background-position: 100% 0;
	}
	.cm-slide-prev:hover {
		background-position: 0 -60px;
	}
	.cm-slide-next:hover {
		background-position: 100% -60px;	
	}
/*-- /Slider--*/
}