/* 
    Created on : 15/04/2016, 8:26:06 AM
    Author     : damienbolger
*/


.curved-image-outer {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
/*    width: 220px;
    height: 180px;*/
    margin: 10px auto;
	background: rgba(82,82,82,0.53);
	background: -moz-radial-gradient(center, ellipse cover, rgba(82,82,82,0.53) 0%, rgba(94,94,94,0.01) 62%, rgba(93,93,93,0) 63%, rgba(76,76,76,0) 75%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(82,82,82,0.53)), color-stop(62%, rgba(94,94,94,0.01)), color-stop(63%, rgba(93,93,93,0)), color-stop(75%, rgba(76,76,76,0)));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(82,82,82,0.53) 0%, rgba(94,94,94,0.01) 62%, rgba(93,93,93,0) 63%, rgba(76,76,76,0) 75%);
	background: -o-radial-gradient(center, ellipse cover, rgba(82,82,82,0.53) 0%, rgba(94,94,94,0.01) 62%, rgba(93,93,93,0) 63%, rgba(76,76,76,0) 75%);
	background: -ms-radial-gradient(center, ellipse cover, rgba(82,82,82,0.53) 0%, rgba(94,94,94,0.01) 62%, rgba(93,93,93,0) 63%, rgba(76,76,76,0) 75%);
	background: radial-gradient(ellipse at center, rgba(82,82,82,0.53) 0%, rgba(94,94,94,0.01) 62%, rgba(93,93,93,0) 63%, rgba(76,76,76,0) 75%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#525252', endColorstr='#4c4c4c', GradientType=1 );
}

.curved-image-wrap {
	opacity: 0;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-perspective: 1800px;
	perspective: 1800px;
	height: 139px;
	-webkit-transform: perspective(1800px) translateZ(20px) rotateX(-15deg);
	transform: perspective(1800px) translateZ(20px) rotateX(-15deg);

	-webkit-animation: fade-in 3s 1 linear;
	animation: fade-in 3s 1 linear;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
}

.curved-image-inner {
	opacity: 0;
	position: relative;
	top: -20px;
	margin: 20px auto;
	width: 30px;
	height: 139px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: center center;
	transform-origin: center center;
	-webkit-animation: rotate 2s 1 linear;
	animation: rotate 2s 1 linear;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
}
/*width: 188px; height: 139px;*/

.curved-image-side {
	position: absolute;
	height: 139px;
	width: 6px;
}
.curved-image-side:nth-child(1) {
	-webkit-transform: rotateY(4deg) translateZ(70px);
	transform: rotateY(4deg) translateZ(70px);
	background-position: 182px 0;
}

.curved-image-side:nth-child(2) {
	-webkit-transform: rotateY(8deg) translateZ(70px);
	transform: rotateY(8deg) translateZ(70px);
	background-position: 176px 0;
}

.curved-image-side:nth-child(3) {
	-webkit-transform: rotateY(12deg) translateZ(70px);
	transform: rotateY(12deg) translateZ(70px);
	background-position: 170px 0;
}

.curved-image-side:nth-child(4) {
	-webkit-transform: rotateY(16deg) translateZ(70px);
	transform: rotateY(16deg) translateZ(70px);
	background-position: 164px 0;
}

.curved-image-side:nth-child(5) {
	-webkit-transform: rotateY(20deg) translateZ(70px);
	transform: rotateY(20deg) translateZ(70px);
	background-position: 158px 0;
}

.curved-image-side:nth-child(6) {
	-webkit-transform: rotateY(24deg) translateZ(70px);
	transform: rotateY(24deg) translateZ(70px);
	background-position: 152px 0;
}

.curved-image-side:nth-child(7) {
	-webkit-transform: rotateY(28deg) translateZ(70px);
	transform: rotateY(28deg) translateZ(70px);
	background-position: 146px 0;
}

.curved-image-side:nth-child(8) {
	-webkit-transform: rotateY(32deg) translateZ(70px);
	transform: rotateY(32deg) translateZ(70px);
	background-position: 140px 0;
}

.curved-image-side:nth-child(9) {
	-webkit-transform: rotateY(36deg) translateZ(70px);
	transform: rotateY(36deg) translateZ(70px);
	background-position: 134px 0;
}

.curved-image-side:nth-child(10) {
	-webkit-transform: rotateY(40deg) translateZ(70px);
	transform: rotateY(40deg) translateZ(70px);
	background-position: 128px 0;
}

.curved-image-side:nth-child(11) {
	-webkit-transform: rotateY(44deg) translateZ(70px);
	transform: rotateY(44deg) translateZ(70px);
	background-position: 122px 0;
}

.curved-image-side:nth-child(12) {
	-webkit-transform: rotateY(48deg) translateZ(70px);
	transform: rotateY(48deg) translateZ(70px);
	background-position: 116px 0;
}

.curved-image-side:nth-child(13) {
	-webkit-transform: rotateY(52deg) translateZ(70px);
	transform: rotateY(52deg) translateZ(70px);
	background-position: 110px 0;
}

.curved-image-side:nth-child(14) {
	-webkit-transform: rotateY(56deg) translateZ(70px);
	transform: rotateY(56deg) translateZ(70px);
	background-position: 104px 0;
}

.curved-image-side:nth-child(15) {
	-webkit-transform: rotateY(60deg) translateZ(70px);
	transform: rotateY(60deg) translateZ(70px);
	background-position: 98px 0;
}

.curved-image-side:nth-child(16) {
	-webkit-transform: rotateY(64deg) translateZ(70px);
	transform: rotateY(64deg) translateZ(70px);
	background-position: 92px 0;
}

.curved-image-side:nth-child(17) {
	-webkit-transform: rotateY(68deg) translateZ(70px);
	transform: rotateY(68deg) translateZ(70px);
	background-position: 86px 0;
}

.curved-image-side:nth-child(18) {
	-webkit-transform: rotateY(72deg) translateZ(70px);
	transform: rotateY(72deg) translateZ(70px);
	background-position: 80px 0;
}

.curved-image-side:nth-child(19) {
	-webkit-transform: rotateY(76deg) translateZ(70px);
	transform: rotateY(76deg) translateZ(70px);
	background-position: 74px 0;
}

.curved-image-side:nth-child(20) {
	-webkit-transform: rotateY(80deg) translateZ(70px);
	transform: rotateY(80deg) translateZ(70px);
	background-position: 68px 0;
}

.curved-image-side:nth-child(21) {
	-webkit-transform: rotateY(84deg) translateZ(70px);
	transform: rotateY(84deg) translateZ(70px);
	background-position: 62px 0;
}

.curved-image-side:nth-child(22) {
	-webkit-transform: rotateY(88deg) translateZ(70px);
	transform: rotateY(88deg) translateZ(70px);
	background-position: 56px 0;
}

.curved-image-side:nth-child(23) {
	-webkit-transform: rotateY(92deg) translateZ(70px);
	transform: rotateY(92deg) translateZ(70px);
	background-position: 50px 0;
}

.curved-image-side:nth-child(24) {
	-webkit-transform: rotateY(96deg) translateZ(70px);
	transform: rotateY(96deg) translateZ(70px);
	background-position: 44px 0;
}

.curved-image-side:nth-child(25) {
	-webkit-transform: rotateY(100deg) translateZ(70px);
	transform: rotateY(100deg) translateZ(70px);
	background-position: 38px 0;
}

.curved-image-side:nth-child(26) {
	-webkit-transform: rotateY(104deg) translateZ(70px);
	transform: rotateY(104deg) translateZ(70px);
	background-position: 32px 0;
}

.curved-image-side:nth-child(27) {
	-webkit-transform: rotateY(108deg) translateZ(70px);
	transform: rotateY(108deg) translateZ(70px);
	background-position: 26px 0;
}

.curved-image-side:nth-child(28) {
	-webkit-transform: rotateY(112deg) translateZ(70px);
	transform: rotateY(112deg) translateZ(70px);
	background-position: 20px 0;
}

.curved-image-side:nth-child(29) {
	-webkit-transform: rotateY(116deg) translateZ(70px);
	transform: rotateY(116deg) translateZ(70px);
	background-position: 14px 0;
}

.curved-image-side:nth-child(30) {
	-webkit-transform: rotateY(120deg) translateZ(70px);
	transform: rotateY(120deg) translateZ(70px);
	background-position: 8px 0;
}

@-webkit-keyframes rotate {
	0% {
		opacity: 0;
/*		-webkit-transform: rotateY(0deg);
		transform: rotateY(0deg);*/
	}
	
	50% {
		opacity: 1;
/*		-webkit-transform: rotateY(0deg);
		transform: rotateY(0deg);*/
	}
	
	100% {
		opacity: 1;
		-webkit-transform: rotateY(-60deg);
		transform: rotateY(-60deg);
	}
}

@keyframes rotate {
	0% {
		opacity: 0;
/*		-webkit-transform: rotateY(0deg);
		transform: rotateY(0deg);*/
	}
	
	50% {
		opacity: 1;
/*		-webkit-transform: rotateY(0deg);
		transform: rotateY(0deg);*/
	}
	
	100% {
		opacity: 1;
		-webkit-transform: rotateY(-60deg);
		transform: rotateY(-60deg);
	}
}

@-webkit-keyframes fade-in {
	0% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}


.normal-flat-image {
	display: none;
	text-align: center;
}


/**  with lower res screens fallback to flat image as the gradients could render terribly **/
@media (max-width: 620px) {
	.normal-flat-image {
		display: block;
	}
	.curved-image-wrap {
		display: none;
	}
}