.dg-container{width: 100%; height: 450px; position: relative; } .dg-wrapper{width: 481px; height: 316px; margin: 0 auto; position: relative; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 1000px; -moz-perspective: 1000px; -o-perspective: 1000px; -ms-perspective: 1000px; perspective: 1000px; } .dg-wrapper a{width: 482px; /*height: 316px;*/ display: block; position: absolute; left: 0; top: 0; background: transparent url(../images/browser.png) no-repeat top left; box-shadow: 0px 10px 20px rgba(0,0,0,0.3); } .dg-wrapper a.dg-transition{-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .dg-wrapper a img{display: block; } .dg-wrapper a div{font-style: italic; text-align: center; line-height: 50px; text-shadow: 1px 1px 1px rgba(255,255,255,0.5); color: #333; font-size: 16px; width: 100%; bottom: -55px; display: none; position: absolute; } .dg-wrapper a.dg-center div{display: block; border:20px solid red; } .dg-wrapper a.dg-center{background:img(img/portfoliop-bg.png) no-repeat; background-position:center; min-height:380px; border:20px solid #EE0548; } .dg-container nav{width: 58px; position: absolute; z-index: 1000; bottom: 40px; left: 50%; margin-left: -29px; } .dg-container nav span{text-indent: -9000px; float: left; cursor:pointer; width: 24px; height: 25px; opacity: 0.8; background: transparent url(../images/arrows.png) no-repeat top left; } .dg-container nav span:hover{opacity: 1; } .dg-container nav span.dg-next{background-position: top right; margin-left: 10px; }