#prodpreview {
    position: relative;
    width: 100%;
    -webkit-perspective: 2000px;
    perspective: 2000px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    font-weight: 300;
    -webkit-transition: opacity 250ms ease-in-out;
    transition: opacity 250ms ease-in-out;
    display: table;
	height: 100%;
}

.prodprwtitle {
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	padding: 10px 0 0;
}

#prodprwwrap {
    position: relative;
    transition: margin 500ms ease-in-out;
    -webkit-transition: margin 500ms ease-in-out;
    -moz-transition: margin 500ms ease-in-out;
    display: table-row;
}

#prvimgwrap_s, #prvimgwrap_d {
	position: relative;
	margin: 0 auto;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
}

#prvimgwrap_d.first {
	padding-top: 25%;
}

#prvimg_d1, #prvimg_d2 {
	position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#prvimg_d1 {
	margin-bottom: 1px;
}

#prvimg_d1.shadow, #prvimg_d2.shadow, #prvimgwrap_s.shadow {
	-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
	-ms-box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
}

#prodhrbatpng {
	position: absolute;
	left: 0;
	top: 0;
	width: 110%;
	height: 110%;
	background-position: left top;
	background-repeat: no-repeat;
	pointer-events: none;
}

#prevbackjpg {
	position: absolute;
	z-index: -1;
}

#prodprwwrap.prodclosed {
    margin-left: -205px;
}

.prednja, .zadnja, .korica0, .korica1, .korica2 {
    position: absolute;
    width: 400px;
    height: 400px;
    top: 12px;
    transition: transform 500ms ease-in-out;
    -webkit-transition: -webkit-transform 500ms ease-in-out;
    -moz-transition: -moz-transform 500ms ease-in-out;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-color: white;
    background-size: cover;
    box-shadow: 1px 0 1px rgba(0,0,0,0.3);
}

#prodprwwrap.book_rc .prednja, #prodprwwrap.book_rc .zadnja {
    width: 340px;
    height: 248px;
}

.korica0, .korica1, .korica2 {
    width: 410px;
    height: 423px;
    top: 0px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-shadow: 0 0 4px rgba(0,0,0,0.6);
}

#prodprwwrap.book_rc .korica0, #prodprwwrap.book_rc .korica1, #prodprwwrap.book_rc .korica2 {
    width: 350px;
    height: 268px;
}

.prednja, .korica0, .korica2 {
	left: 50%;
	transform-origin: left;
    -moz-transform-origin: left;
    -webkit-transform-origin: left;
}

.zadnja, .korica1 {
	right: 50%;
	transform-origin: right;
    -moz-transform-origin: right;
    -webkit-transform-origin: right;
}

.prednja.desno, .korica0.desno, .korica2.desno {
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
}

.prednja.lijevo, .korica0.lijevo, .korica2.lijevo {
	transform: rotateY(-180deg);
	-webkit-transform: rotateY(-180deg);
}

.zadnja.desno, .korica1.desno {
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}

.zadnja.lijevo, .korica1.lijevo {
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
}

.prodindicators {
	margin: 20px 0 5px;
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
}

.prodindicators li {
	display: inline-block;
	cursor: pointer;
	border-radius: 50%;
	height: 10px;
	width: 10px;
	margin: 0 4px;
	background-color: #ecebe4;
}

.prodindicators li.active {
	background-color: gray;
}

#prodprevplay {
	width: 33px;
	height: 33px;
	margin: 0 auto;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(/images/btn_play.png);
	cursor: pointer;
}

#prodprevplay.pause {
    background-image: url(/images/btn_pause.png);
}

.prodshare {
	text-align: center;
}

.prodshare > a {
	margin: 0 10px;
}

.prodsharebtn {
	width: 43px;
	height: 43px;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
}

.prodsharefb {
	background-image: url(/skin/bookagram/images/btn_fb.png);
}

.prodsharetw {
	background-image: url(/skin/bookagram/images/btn_twitter.png);
}

.prodshareem {
	background-image: url(/skin/bookagram/images/btn_email.png);
}

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
	.prodsharefb {
		background-image: url(/skin/bookagram/images/btn_fb@2x.png);
	}

	.prodsharetw {
		background-image: url(/skin/bookagram/images/btn_twitter@2x.png);
	}

	.prodshareem {
		background-image: url(/skin/bookagram/images/btn_email@2x.png);
	}
}

@media only screen and (max-width: 1000px) {
}

@media only screen and (max-width: 600px) {
}

@media only screen and (max-width: 400px) {
	.prodindicators li {
		height: 4px;
		width: 4px;
		margin: 0 2px 0 0;
	}
}