.slideshow{	
	width:900px;
	height:575px;
	background-color:#f7f7f7;
	-webkit-transition:background-color .2s ease-out;
	-moz-transition:background-color .2s ease-out;
	-o-transition:background-color .2s ease-out;
	transition:background-color .2s ease-out;
}

/*TABLET*/
.slideshow.tablet{	
	width:730px;
	height:467px;
}

.slideshow.mobile {
	background-color:#e4e4e4;
	/*border: 1px solid #d5d5d5;*/
}

.slideshow .moveswipe{		/* webkit transition swipe */
	-webkit-transition:left .5s ease-out;
	-moz-transition:left .5s ease-out;
	-o-transition:left .5s ease-out;
	transition:left .5s ease-out;
}

.slideshow .move{		/* webkit transition */
	-webkit-transition:left .7s ease-in-out;
	-moz-transition:left .7s ease-in-out;
	-o-transition:left .7s ease-in-out;
	transition:left .7s ease-in-out;
}


/* ------------------------------------ IMAGES */
.slideshow .images{
	position:relative;
	width:900px;		/* images W */
	height:575px;		/* images H */
}

.slideshow.pointer-events .images{
	pointer-events:none;
}

/*TABLET*/
.tablet.slideshow .images {	
	width:730px;
	height:467px;
}

.tablet.slideshow.pointer-events .images{
	pointer-events:auto;
}

.slideshow .images ul li{
	position:absolute;
	left:9000px; /* set out of view */
}

.slideshow .images ul li:first-child{
	left:0;
}

.slideshow .images ul li span {
	position:relative;
}

.slideshow .images ul li.video a.play {
	position:absolute;
	top:0px;
	left:0px;
	width:900px;
	height:575px;
	background-image:url('../../img/video_play.png');
	background-repeat:no-repeat;
	background-position:center;
	cursor:pointer;
}
.tablet.slideshow .images ul li a.play {
	width:730px;
	height:467px;
}

.slideshow .images ul li.site.video span img, 
.slideshow .images ul li.site.image span img, 
.slideshow .images ul li.mobile.video span img{
	width:900px;
	height:575px;
	background-color:#e4e4e4;
	outline: 1px solid #d5d5d5;
}

.tablet.slideshow .images ul li.site.video span img, 
.tablet.slideshow .images ul li.site.image span img, 
.tablet.slideshow .images ul li.mobile.video span img{
	width:730px;
	height:467px;
}

.slideshow .images ul li.mobile.image._2x3_vertical span img{
	position:absolute;
	top:82px;
	left:-32px;
}
.slideshow .images ul li.mobile.image._3x2_horizontal span img{
	position:absolute;
	top:101px;
	left:-61px;
}
.slideshow .images ul li.mobile.image._3x4_vertical span img{
	position:absolute;
	top:80px;
	left:-49px;
}
.slideshow .images ul li.mobile.image._4x3_horizontal span img{
	position:absolute;
	top:119px;
	left:-58px;
}

/*TABLET*/
.tablet.slideshow .images ul li.mobile.image._2x3_vertical span img{
	position:absolute;
	top:20px;
	left:150px;
	width:370px;
	height:auto;
}
.tablet.slideshow .images ul li.mobile.image._3x2_horizontal span img{
	position:absolute;
	top:15px;
	left:10px;
	width:660px;
	height:auto;
}
.tablet.slideshow .images ul li.mobile.image._3x4_vertical span img{
	position:absolute;
	top:15px;
	left:160px;
	width:370px;
	height:auto;
}
.tablet.slideshow .images ul li.mobile.image._4x3_horizontal span img{
	position:absolute;
	top:30px;
	left:0px;
	width:650px;
	height:auto;
}

.slideshow .blocker {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display:none;
}

/* ------------------------------------ VIDEO */
.slideshow > .video{
	position:relative;
	display:none;
	width:900px;
	height:575px;
	cursor:pointer;
	overflow:hidden;
}

.slideshow > .video .embed{
	position:absolute;
	top:0px;
	left:0px;	
	width:900px;
	height:575px;
	background-color:black;
}

/* ------------------------------------ MOBILE DETAILS */

.mobile_details {
	font-family:goodbook, arial, sans-serif;
	position:absolute;
	top:0px;
	left:545px;
	width:345px;
	height:575px;
	opacity:0;
	/*border:1px solid;*/
}

.mobile_details._2x3_vertical {
	left:385px;
}
.mobile_details._3x2_horizontal {
	left:530px;
}
.mobile_details._3x4_vertical {
	left:380px;
}
.mobile_details._4x3_horizontal {
	left:535px;
}

.mobile_details.active {
	-webkit-transition:opacity 0.5s ease-out;
	-moz-transition:opacity 0.5s ease-out;
	-o-transition:opacity 0.5s ease-out;
	transition:opacity 0.5s ease-out;
	opacity:.99;
}

.mobile_details > .container{
	display:table;
	width:345px;
	height:575px;
}

.mobile_details > .container > .align{
	display:table-cell;
	vertical-align:middle;
	/*border:1px solid red;*/
}

.mobile_details > .container > .align > .content{
	width:345px;				/* adjust content width */
	margin:0 auto 0 auto;
	/*border:1px solid green;*/
}

/* ie7/8 fallback */
html.ie7 .mobile_details > .container,
html.ie8 .mobile_details > .container{ overflow:hidden; position:relative; }
html.ie7 .mobile_details > .container .align,
html.ie8.mobile_details > .container .align{ position:absolute; top:50%; width:100%; }
html.ie7 .mobile_details > .container .align .content,
html.ie8 .mobile_details > .container .align .content{ position:relative; top:-50%; }

.mobile_details > .container > .align > .content > .title {
	margin-left:80px;
	font-size:14px;
	line-height:20px;
}

.mobile_details > .container > .align > .content > ul {
	-webkit-user-select: none;  
	-moz-user-select: none;   
	-ms-user-select: none;
}
.mobile_details > .container > .align > .content > ul > li {
	border-top: 1px solid #d1d1d1;
	padding-top:13px;
	padding-bottom:18px;
} 
.mobile_details > .container > .align > .content > ul > li:first-child {
	padding-top:0px;
	border-top:none;
} 
.mobile_details > .container > .align > .content > ul > li > div {
	color:#7D7D7D;
	margin-left:80px;
}
.mobile_details > .container > .align > .content > ul > li > div > p {
	font-size:10px;
	padding-bottom: 2px;
}
.mobile_details > .container > .align > .content > ul > li > div > a {
	-webkit-transition:color 0.1s linear;
	-moz-transition:color 0.1s linear;
	-o-transition:color 0.1s linear;
	transition:color 0.1s linear;
	color:#7D7D7D;
} 
.mobile_details > .container > .align > .content > ul > li > div > a:hover {
	color:#141212;
} 

.mobile_details > .container > .align > .content > ul > li > div > a > span.icon-arrow_right  {
	float:left;
	padding-top:4px;
	padding-left:0px;
	margin-left:-15px;
}
.mobile_details > .container > .align > .content > ul > li > div > a > span.link {
	font-size:14px;
	float:left;
	padding-top:4px;
	padding-left:2px;
}