/*
 * CSS template for HTML5 Ubi.com carousel - isolated
 * Author: Adam Moore - adam.moore@ubisoft.com
 * Last Modified: 1/3/2013
 */
/* --Page Structure-- */
/*body{text-align: center; margin: 0; font-family: Arial, Helvetica, Sans-serif; font-size: 10pt;}*/
#header{width: 100%; background: url('gfx/ubi-header-bg.jpg') center top repeat-x;}
#mast-head{width: 970px; margin: 0 auto;}

#middle{
	width: 100%;
	height: 440px;
	border-top: solid 1px #232323;
	border-bottom: solid 5px #000000;
	background: url('gfx/ubi-carousel-bg.jpg') center top repeat-x;
	text-align: center; margin: 0; font-family: Arial, Helvetica, Sans-serif; font-size: 10pt;
}

#container{
	width: 400px;
	height: 300px;
	margin: 0 auto;
	padding-top: 50px;
	-webkit-perspective: 1000;
	-webkit-perspective-origin: 50% 50%;	
	-moz-perspective: 1000;
	-moz-perspective-origin: 50% 50%;
	perspective: 1000;
	perspective-origin: 50% 50%;
}

#carousel{
	width: 100%;
	height: 100%;
	position: absolute;
	-webkit-transition-duration: 350ms;
	-webkit-transform-style: preserve-3d;
	-webkit-perspective-origin: 50% 50%;
	-webkit-transform-origin: center center;
	-webkit-transform: translateZ(0px) rotateY(0deg);
	-moz-transition-duration: 350ms;
	-moz-transform-style: preserve-3d;
	-moz-perspective-origin: 50% 50%;
	-moz-transform: translateZ(0px) rotateY(0deg);
	transition-duration: 350ms;
	transform-style: preserve-3d;
	perspective-origin: 50% 50%;
	transform: translateZ(0px) rotateY(0deg);
}

/*#footer{width: 100%;}
#footer img{width: auto; margin: 0 auto;}*/

/* --Carousel Slides-- */
#carousel .slide{
	display: block;
	position: absolute;
	top: 10px;
	left: 10px;
	width: 375px;
	height: 250px;
	border: solid 10px #ffffff;
	cursor: pointer;
	overflow: hidden;
	background: #ffffff;
	/*opacity: 0.5;*/
	-webkit-backface-visibility: hidden;
	-webkit-transition-duration: 350ms;
	-moz-backface-visibility: hidden;
	-moz-transition-duration: 350ms;
	backface-visibility: hidden;
	transition-duration: 350ms;
	-webkit-box-shadow: 0px 0px 40px rgba(50, 50, 50, 1);
    -moz-box-shadow:    0px 0px 40px rgba(50, 50, 50, 1);
    box-shadow:         0px 0px 40px rgba(50, 50, 50, 1);
}

#carousel .slide.active{
	opacity: 1;
}
/* translateX(-20px) translateZ(-50px) rotateX(20deg)*/
/*#carousel .slide:nth-child(1) { -webkit-transform: rotateY(0deg) translateZ(900px); -moz-transform: rotateY(0deg) translateZ(900px); transform: rotateY(0deg) translateZ(900px); }
#carousel .slide:nth-child(2) { -webkit-transform: rotateY(24deg) translateZ(900px); -moz-transform: rotateY(24deg) translateZ(900px); transform: rotateY(24deg) translateZ(900px); }
#carousel .slide:nth-child(3) { -webkit-transform: rotateY(48deg) translateZ(900px); -moz-transform: rotateY(48deg) translateZ(900px); transform: rotateY(48deg) translateZ(900px); }
#carousel .slide:nth-child(4) { -webkit-transform: rotateY(72deg) translateZ(900px); -moz-transform: rotateY(72deg) translateZ(900px); transform: rotateY(72deg) translateZ(900px); }
#carousel .slide:nth-child(5) { -webkit-transform: rotateY(96deg) translateZ(900px); -moz-transform: rotateY(96deg) translateZ(900px); transform: rotateY(96deg) translateZ(900px); }
#carousel .slide:nth-child(6) { -webkit-transform: rotateY(120deg) translateZ(900px); -moz-transform: rotateY(120deg) translateZ(900px); transform: rotateY(120deg) translateZ(900px); }
#carousel .slide:nth-child(7) { -webkit-transform: rotateY(144deg) translateZ(900px); -moz-transform: rotateY(144deg) translateZ(900px); transform: rotateY(144deg) translateZ(900px); }
#carousel .slide:nth-child(8) { -webkit-transform: rotateY(168deg) translateZ(900px); -moz-transform: rotateY(168deg) translateZ(900px); transform: rotateY(168deg) translateZ(900px); }
#carousel .slide:nth-child(9) { -webkit-transform: rotateY(192deg) translateZ(900px); -moz-transform: rotateY(192deg) translateZ(900px); transform: rotateY(192deg) translateZ(900px);}
#carousel .slide:nth-child(10) { -webkit-transform: rotateY(216deg) translateZ(900px); -moz-transform: rotateY(216deg) translateZ(900px); transform: rotateY(216deg) translateZ(900px); }
#carousel .slide:nth-child(11) { -webkit-transform: rotateY(240deg) translateZ(900px); -moz-transform: rotateY(240deg) translateZ(900px); transform: rotateY(240deg) translateZ(900px); }
#carousel .slide:nth-child(12) { -webkit-transform: rotateY(264deg) translateZ(900px); -moz-transform: rotateY(264deg) translateZ(900px); transform: rotateY(264deg) translateZ(900px); }
#carousel .slide:nth-child(13) { -webkit-transform: rotateY(288deg) translateZ(900px); -moz-transform: rotateY(288deg) translateZ(900px); transform: rotateY(288deg) translateZ(900px); }
#carousel .slide:nth-child(14) { -webkit-transform: rotateY(312deg) translateZ(900px); -moz-transform: rotateY(312deg) translateZ(900px); transform: rotateY(312deg) translateZ(900px); }
#carousel .slide:nth-child(15) { -webkit-transform: rotateY(336deg) translateZ(900px); -moz-transform: rotateY(336deg) translateZ(900px); transform: rotateY(336deg) translateZ(900px); }

#carousel .slide:nth-child(1) { -webkit-transform: rotateY(0deg) translateZ(900px) rotateX(0deg) translateZ(0px); -moz-transform: rotateY(0deg) translateZ(900px); transform: rotateY(0deg) translateZ(900px); }
#carousel .slide:nth-child(2) { -webkit-transform: rotateY(24deg) translateZ(900px) rotateX(10deg) translateZ(-10px); -moz-transform: rotateY(24deg) translateZ(900px); transform: rotateY(24deg) translateZ(900px); }
#carousel .slide:nth-child(3) { -webkit-transform: rotateY(48deg) translateZ(900px) rotateX(20deg) translateZ(-20px); -moz-transform: rotateY(48deg) translateZ(900px); transform: rotateY(48deg) translateZ(900px); }
#carousel .slide:nth-child(4) { -webkit-transform: rotateY(72deg) translateZ(900px) rotateX(30deg) translateZ(-30px); -moz-transform: rotateY(72deg) translateZ(900px); transform: rotateY(72deg) translateZ(900px); }
#carousel .slide:nth-child(5) { -webkit-transform: rotateY(96deg) translateZ(900px) rotateX(40deg) translateZ(-40px); -moz-transform: rotateY(96deg) translateZ(900px); transform: rotateY(96deg) translateZ(900px); }
#carousel .slide:nth-child(6) { -webkit-transform: rotateY(120deg) translateZ(900px) rotateX(50deg) translateZ(-60px); -moz-transform: rotateY(120deg) translateZ(900px); transform: rotateY(120deg) translateZ(900px); }
#carousel .slide:nth-child(7) { -webkit-transform: rotateY(144deg) translateZ(900px) rotateX(60deg) translateZ(-70px); -moz-transform: rotateY(144deg) translateZ(900px); transform: rotateY(144deg) translateZ(900px); }
#carousel .slide:nth-child(8) { -webkit-transform: rotateY(168deg) translateZ(900px) rotateX(70deg) translateZ(-80px); -moz-transform: rotateY(168deg) translateZ(900px); transform: rotateY(168deg) translateZ(900px); }
#carousel .slide:nth-child(9) { -webkit-transform: rotateY(192deg) translateZ(900px) rotateX(80deg) translateZ(-90px); -moz-transform: rotateY(192deg) translateZ(900px); transform: rotateY(192deg) translateZ(900px);}
#carousel .slide:nth-child(10) { -webkit-transform: rotateY(216deg) translateZ(900px) rotateX(90deg) translateZ(-100px); -moz-transform: rotateY(216deg) translateZ(900px); transform: rotateY(216deg) translateZ(900px); }
#carousel .slide:nth-child(11) { -webkit-transform: rotateY(240deg) translateZ(900px) rotateX(100deg) translateZ(-110px); -moz-transform: rotateY(240deg) translateZ(900px); transform: rotateY(240deg) translateZ(900px); }
#carousel .slide:nth-child(12) { -webkit-transform: rotateY(264deg) translateZ(900px) rotateX(110deg) translateZ(-120px); -moz-transform: rotateY(264deg) translateZ(900px); transform: rotateY(264deg) translateZ(900px); }
#carousel .slide:nth-child(13) { -webkit-transform: rotateY(288deg) translateZ(900px) rotateX(120deg) translateZ(-130px); -moz-transform: rotateY(288deg) translateZ(900px); transform: rotateY(288deg) translateZ(900px); }
#carousel .slide:nth-child(14) { -webkit-transform: rotateY(312deg) translateZ(900px) rotateX(130deg) translateZ(-140px); -moz-transform: rotateY(312deg) translateZ(900px); transform: rotateY(312deg) translateZ(900px); }
#carousel .slide:nth-child(15) { -webkit-transform: rotateY(336deg) translateZ(900px) rotateX(140deg) translateZ(-150px); -moz-transform: rotateY(336deg) translateZ(900px); transform: rotateY(336deg) translateZ(900px); }
*/
/*#carousel .slide.active{z-index: 5; -webkit-transform: rotateY(0deg) rotateX(0deg);}*/
#carousel .slide img{padding: 0; margin: 0; width: 100%; height: 100%;}
#carousel .slide .text-overlay{
	position: relative;
	top: -65px; 
	width: 375px; 
	height: auto; 
	text-align: left; 
	background: rgba(0,0,0,0.9); 
	color: #ffffff; 
	padding: 0; 
	margin: 0;
}

#carousel .slide .text-overlay p{font-size: 8pt; line-height: 9pt; color: #a0a0a0; margin: 5px 0;}
#carousel .slide .text-overlay .text-overlay-top{padding: 20px 5px 5px 5px; margin: 0;}
#carousel .slide .text-overlay .text-overlay-top h2{font-size: 20pt; font-weight: normal; text-transform: uppercase; padding: 0; margin: 0; line-height: 15pt;}
#carousel .slide .text-overlay .text-overlay-bottom{border-top: solid 1px #232323; padding: 5px; margin: 0;}
#carousel .slide .text-overlay .text-overlay-bottom .bottom-link{color: #ffffff; text-transform: uppercase; text-decoration: none;}
.arrow{width: auto!important; height: auto!important;}