/* Minimal CSS reset and niceties */
/*************************************************/

html, body, ul {
margin: 0;
padding: 0;
}

ul {
list-style: none;
}


nav {
width: 100%;
margin: 0 auto;
text-align: center;
padding: 0.5em;
position:absolute;

}

nav li {
display: inline;
margin: 0 0.5em;
}

/* Carousel */
/*************************************************/

#web_carousel {
width: 340px;
height: 190px;
margin: 0 auto;
/*border: 1px solid #ccc;*/
overflow: ;
}

.csstransforms3d #web_carousel {
-webkit-perspective: 5800;
}

#web_carousel .container {
width: 340px; 
}

#web_carousel .panels,
#web_carousel .panels > li {
width: 340px;
height:190px;
display: block;
position: absolute;
margin-left:0px;
}

#web_carousel .container,
#web_carousel .panels > li {
width:340px;
height: 190px;
}
#web_carousel .panels > li > .mainshot{
height:175px;
}
#web_carousel .panels > li > div {
background: #fff;
background: -webkit-gradient(linear, right bottom, right top, color-stop(1, rgb(225,225,225)), color-stop(0.57, rgb(230,230,230)));
height: 190px;
width: 340px;
padding: 0px;
text-shadow: 0 1px 0 #fff;
overflow:hidden;
}

#web_carousel .panels > li > div > img{
width:340px;
}
#web_carousel .panels > li > div.mainshot > img{
margin-top:-25px;

}
.csstransforms3d #web_carousel .container {
-webkit-transform: translateZ(1024px);
-webkit-transition: -webkit-transform 200ms linear;
-webkit-transform-style: preserve-3d;
}

.csstransforms3d #web_carousel .panels {

-webkit-transition: -webkit-transform 500ms ease-in-out;
-webkit-transform-style: preserve-3d;
}

.csstransforms3d #web_carousel li:nth-child(1) { -webkit-transform: rotateY(30deg) translateZ(-674px);}
.csstransforms3d #web_carousel li:nth-child(2) { -webkit-transform: rotateY(-0deg) translateZ(-674px); }
.csstransforms3d #web_carousel li:nth-child(3) { -webkit-transform: rotateY(-30deg) translateZ(-674px); }
.csstransforms3d #web_carousel li:nth-child(4) { -webkit-transform: rotateY(-60deg) translateZ(-674px); }
.csstransforms3d #web_carousel li:nth-child(5) { -webkit-transform: rotateY(-90deg) translateZ(-674px); }
.csstransforms3d #web_carousel li:nth-child(6) { -webkit-transform: rotateY(-120deg) translateZ(-674px); }
.csstransforms3d #web_carousel li:nth-child(7) { -webkit-transform: rotateY(-150deg) translateZ(-674px); }
.csstransforms3d #web_carousel li:nth-child(8) { -webkit-transform: rotateY(-180deg) translateZ(-674px); }
.csstransforms3d #web_carousel li:nth-child(9) { -webkit-transform: rotateY(-210deg) translateZ(-674px); }
.csstransforms3d #web_carousel li:nth-child(10) { -webkit-transform: rotateY(-240deg) translateZ(-674px); }
.csstransforms3d #web_carousel li:nth-child(11) { -webkit-transform: rotateY(-270deg) translateZ(-674px); }
.csstransforms3d #web_carousel li:nth-child(12) { -webkit-transform: rotateY(-300deg) translateZ(-674px); }