A973C/Mini-Audio-Player.markdown

## index.html
<html>
	<head>
		<title>AudioPlayer</title>
        <link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'/>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <!--[if IE 9]>
		<style type="text/css">
			.slice-content:nth-child(4) {
				-ms-transform: scaleY(1);
			}
			.flip{
				-ms-transform-origin: center top;
				-ms-transform: scaleY(0.6) !important;
			}
		</style>
		<![endif]-->
	</head>

	<body>
		<div class="container">
			<div class="this-wrapper">
				<div class="this">
					<div class="wrapper">
						<div class="likescreen">
							<div class="likecounter"></div>
						</div>
						<div class="blackscreen"></div>
						<img src="" alt=""/>
					</div>
					<div class="sharescreen">
						<div class="sharetext">Share :</div>
						<div class="socialicons">
							<a href="http://www.facebook.com/share.php?u=http%3A%2F%2Fryanbishop.me%2Faudioplayer%2F&title=COLORBLIND mix player.">
							<div class="icon facebook"></div>
							</a>
							<a href="http://twitter.com/home?status=COLORBLIND mix player.+http%3A%2F%2Fryanbishop.me%2Faudioplayer%2F">
							<div class="icon twitter">
								<div class="lineone"></div>
								<div class="linetwo"></div>
							</div>
							</a>
							<a href="http://dribbble.com/RyanBishop" target="_blank">
							<div class="icon dribbble"></div>
							</a>
						</div>
					</div>
					<div class="menu">
						<div class="share"><span></span> </div>
						<ul>
							<li class="previous"><span></span></li>
							<li class="play pause"><span></span> </li>
							<li class="next"><span></span> </li>
						</ul>
						<div class="like"><span></span> </div>
					</div>
				</div>
			</div>
		</div>
    <img class="thumbnail" src="http://i.imgur.com/SkJg63Y.jpg" alt=""/>
		<audio >
			 <source src="http://ryanbishop.me/audioplayer/tracks/grayscale005.mp3" type="audio/mp3"/>
			  <source src="http://ryanbishop.me/audioplayer/tracks/grayscale005.ogg" type="audio/ogg"/>
        	Your browser does not support HTML5 audio.
		</audio>
      <img class="thumbnail" src="http://i.imgur.com/6cwiVtD.jpg" alt=""/>
		<audio >
			 <source src="http://ryanbishop.me/audioplayer/tracks/grayscale006.mp3" type="audio/mp3"/>
			 <source src="http://ryanbishop.me/audioplayer/tracks/grayscale006.ogg" type="audio/ogg"/>
        	Your browser does not support HTML5 audio.
		</audio>
      <img class="thumbnail" src="http://i.imgur.com/bUIkoni.png" alt=""/>
		<audio >
			 <source src="http://ryanbishop.me/audioplayer/tracks/grayscale007.mp3" type="audio/mp3"/>
			 <source src="http://ryanbishop.me/audioplayer/tracks/grayscale007.ogg" type="audio/ogg"/>
        	Your browser does not support HTML5 audio.
		</audio>
	</body>
</html>

## Mini-Audio-Player.markdown

      
    Raw
  

              Mini-Audio-Player.markdown
            
          
    Mini Audio Player

I've combined one of my shots on dribbble with a few mixes taken from my musical project GRAYSCALE to create this cool audio player.
A Pen by A973C on CodePen.
License.

  
## script.js
        /*////Created by Ryan Bishop./////
        --Check out more of my work at:---
        --http://dribbble.com/RyanBishop--
        ----------------OR----------------
        -------Follow me on twitter:------
        -------------@abletroner----------
        --------Find the music on:--------
        soundcloud.com/colorblind-official
        ////////////////////////////////*/


$(document).ready(function(){
	var cssStyle = { 'margin-top' : - $('.this').size.height / 2 + 'px'	};
	var imgx = $('thumbnail').length;
	var x = $('audio').length;
	var z=0;
	$('.wrapper > img').attr("src", function() { return $('.thumbnail')[z].src;
});
	$( ".wrapper" ).wrap($('<div class="slice-content"/>'))
	.parent()
	.clone()
	.appendTo( ".this" )
	.find( '.wrapper' )
	.css('margin-top','-111px');
	$('.slice-content').click(function(){
		$('.slice-content:nth-child(4)').toggleClass('flip');
	});

	$('.play').click(function(){
		$('audio')[z].play();
		$(this).toggleClass('pause');
		if($(this).hasClass('pause')){
		$('audio')[z].pause();
		}
	});
	$('.next').click(function(){
		$('audio')[z].pause();
		$('.play').removeClass('pause');
		$('audio')[z].currentTime=0;
		z++;
		if(z>=x){z=0}
		$('.wrapper > img').attr("src", function() { return $('.thumbnail')[z].src;
});
		$('audio')[z].play();
	});
	$('.previous').click(function(){
		$('audio')[z].pause();
		$('.play').removeClass('pause');
		$('audio')[z].currentTime=0;
		z--;
		if(z<0){z=x-1}
		$('.wrapper > img').attr("src", function() { return $('.thumbnail')[z].src;
});
		$('audio')[z].play();
	});
	$('audio').bind("ended",function(){
		z++;
		if(z>=x){z=0}
		$('.wrapper > img').attr("src", function() { return $('.thumbnail')[z].src;
});
		$('audio')[z].play();
	});
	// Like & Share screens fade
	$('.likescreen, .sharescreen, .blackscreen, .sharetext').hide();
	$('.like').click(function(){
		$('.slice-content:nth-child(4)').toggleClass('flip');
		$('.blackscreen').fadeIn(1000);
		$('.likescreen').fadeIn(500);
		$('.likecounter').addClass('dropdown');
	});
	$('.likescreen').click(function(){
		$('.likescreen, .blackscreen').fadeOut(300);
		$('.likecounter').removeClass('dropdown');
	});
	$('.share').click(function(){
		$('.slice-content:nth-child(4)').toggleClass('flip');
		$('.blackscreen').fadeIn(1000);
		$('.sharescreen').fadeIn(500);
		$('.socialicons').addClass('dropdown');
		setTimeout(function(){
			$('.sharetext').fadeIn(300);
			$('.facebook').css('right','130px').css('opacity','1');
			$('.dribbble').css('left','130px').css('opacity','1');
			setTimeout(function(){
				$('.lineone, .linetwo').css('width','19px');
			},300);
		},1000);
	});
	$('.sharescreen').click(function(){
		$('.slice-content:nth-child(4)').toggleClass('flip');
		$('.sharescreen, .blackscreen, .sharetext').fadeOut();
		$('.socialicons').removeClass('dropdown');
		$('.lineone, .linetwo').css('width','0px');
		$('.facebook').css('right','0').css('opacity','0');
		$('.dribbble').css('left','0').css('opacity','0');
	});


	$("ul > li, .share, .like").find('span').hide().end()
	.hover(function(){
		$(this).find('span').stop(true, true).fadeIn(200)
	}, function(){
		$(this).find('span').stop(true, true).fadeOut(200)
	});

});


## style.css
body{
	margin: 0;
	padding: 0;
	background: url(http://i.imgur.com/SbiFOLW.png);
}
audio{
	position: relative;
	display: block;
	margin: 0 auto;
	width:500px;
	height: 40px;
}
.container{
	position: relative;
	width:100%;
	height: 304px;
}
.this-wrapper{
	position: absolute;
	height: 222px;
	width: 222px;
	margin:auto;
	top:0;bottom:0;left:0;right:0;
}
.this{
	border-radius: 8px;
	box-shadow:
		0 1px 6px rgba(0,0,0,0.4),
		0 1px rgba(55,55,55,1)
	;
	position: absolute;
	height: 222px;
	width: 220px;
	-webkit-perspective: 650px;
	-moz-perspective: 650px;
	-ms-perspective: 650px;
	-o-perspective: 650px;
	perspective: 650px;

}
.sharescreen{
	width: 222px;
	height: 222px;
	z-index: 997;
	position: absolute;
	top: 0px;
}
.likescreen,
.blackscreen{
	border-radius: 8px;
	position: absolute;
	top:-1px;
	height: 224px;
	width: 222px;
	z-index: 997;
}
.blackscreen{
	background-color: rgba(0,0,0,0.8);
	z-index: 996;
}
.likecounter{
	width: 52px;
	height: 52px;
	margin: auto;
	position: absolute;
	z-index: 999;
	top:0;left:0;right:0;bottom: 0;
	background: url(http://i.imgur.com/wNPFrma.png);
}

.socialicons{
	width: 100%;
	position: absolute;
	margin: auto;
	height: 46px;
	top:0;left:0;right:0;bottom: 0;
}
.dropdown{
	bottom:auto;
	-o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
	transform: translateY(87px);
	-webkit-transform: translateY(87px);
	-moz-transform: translateY(87px);
	-ms-transform: translateY(87px);
	-o-transform: translateY(87px);
}
.sharetext{
	position: absolute;
	color:#fff;
	font-family: 'Oswald';
	font-weight: 300;
	text-align: center;
	width: 100%;
	top:46px;
	text-transform: uppercase;
	font-size: 1em;
}
.facebook,
.twitter,
.dribbble{
	border-radius: 23px;
	cursor: pointer;
	width: 46px;
	height: 46px;
	margin: 0 auto;
	right: 0; left: 0;
	position:absolute;
	box-shadow: 0 0 0 1px #fff;
	-o-transition: right 0.5s ease-in-out, left 0.5s ease-in-out, opacity 0.4s ease-in-out 0.1s;
    -ms-transition: right 0.5s ease-in-out, left 0.5s ease-in-out, opacity 0.4s ease-in-out 0.1s;
    -moz-transition: right 0.5s ease-in-out, left 0.5s ease-in-out, opacity 0.4s ease-in-out 0.1s;
    -webkit-transition: right 0.5s ease-in-out, left 0.5s ease-in-out, opacity 0.4s ease-in-out 0.1s;
    transition: right 0.5s ease-in-out, left 0.5s ease-in-out, opacity 0.4s ease-in-out 0.1s;
}

.icon:after {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 24px;
	content: '';
	top: -1px;
	left: -1px;
	padding: 1px;
	z-index: -1;
	opacity: 0;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	-ms-box-sizing: content-box;
	-o-box-sizing: content-box;
	box-sizing: content-box;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s ease-out;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s ease-out;
	transition: transform 0.3s, opacity 0.3s ease-out;
	-webkit-transform: scale(1.3);
	-moz-transform: scale(1.3);
	-ms-transform: scale(1.3);
	transform: scale(1.3);
}
.icon:hover:after {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}
.facebook{
	opacity: 0;
	background: url(http://i.imgur.com/3AzFfdn.png) no-repeat center center;
}
.twitter{
	background: url(http://i.imgur.com/zCUAFPE.png) no-repeat center center;
}
.twitter .lineone{
	content: ' ';
	position: absolute;
	margin: auto;
	bottom: 0; top: 0; right: 46px;
	width: 0px;
	height: 1px;
	background-color: #fff;
	-o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.twitter .linetwo{
	content: ' ';
	position: absolute;
	margin: auto;
	bottom: 0; top: 0; left: 46px;
	width: 0px;
	height: 1px;
	background-color: #fff;
	-o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.dribbble{
	opacity: 0;
	background: url(http://i.imgur.com/pASuBLd.png) no-repeat center center;
}
.facebook:after{
	background: #3b5998;
}
.twitter:after{
	background: #00acee;
}
.dribbble:after{
	background: #ea4c89;
}
.wrapper{
	position: absolute;
	height: 222px;
	width: 222px;
}
.thumbnail{
	display: none;
}
img{
	border-radius: 8px;
	width: 100%;
	height: 100%;
}
.slice-content{
	overflow: hidden;
	position: absolute;
	opacity: 1;
   cursor:pointer;
	-webkit-transform-origin: center top;
	-moz-transform-origin: center top;
	-ms-transform-origin: center top;
	-o-transform-origin: center top;
	transform-origin: center top;
  -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
	width: 222px;
	height:111px;
}
.slice-content:first-child {
	border-top: 1px solid #161616;
	border-left: 1px solid #161616;
	border-right: 1px solid #000;
	border-radius: 8px 8px 0 0;
	top: 0px;
}

.slice-content:nth-child(4) {
	border-bottom: 1px solid #161616;
	border-left: 1px solid #161616;
	border-right: 1px solid #000;
	top: 112px;
	z-index: 100;
	border-radius: 0 0 8px 8px;
	-o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
  	transform-style: preserve-3d;

}
.flip {
    -webkit-transform: rotateX(62deg) !important;
    -moz-transform: rotateX(62deg) !important;
    -ms-transform: rotateX(62deg) !important;
    transform: rotateX(62deg) !important;
    border-bottom: 2px solid #161616 !important;

  }

 .menu{
 	position: absolute;
 	z-index: 2;
 	height:52px;
 	-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #151616;
 	padding:11px;
 	width: 222px;
 	bottom: 0;
 	margin: 0 auto;
 	border-radius: 0 0 8px 8px;
 	left:0;right:0;
 	background-color: #1e1e1e;
 }
 .menu ul{
 	float: left;
 	box-shadow:
		inset 0 1px 2px rgba(0,0,0,0.6),
		0 1px rgba(50,50,50,0.5)
	;
 	margin:0 0 0 10px;
 	padding: 0;
 	list-style: none;
 	height:30px;
 	width:120px;
 	display: block;
 	border-radius: 15px;
 	background-color: #171717;
 }
 .menu li{
 	float: left;
 	position: relative;
 	cursor: pointer;
 	width: 40px;
 	height: 30px;
 	-o-transition: background-color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out;
 }
 .menu span{
	position: absolute;
 	top:0;bottom:0;right:0;left:0;
 }
 .menu li:hover,
 .menu .share:hover,
 .menu .like:hover{
 	background-color: rgba(0,0,0,0.4);
 }
 .menu .previous{
 	border-radius:15px 0 0 15px;
 	background: url(http://i.imgur.com/n2ER0Dd.png) no-repeat center center;
 }
 .previous span{
 	background: url(http://i.imgur.com/vDIdKpi.png) no-repeat center center;
 }
 .menu .play{
 	background: url(http://i.imgur.com/dU17ZRl.png) no-repeat center center;
 }
 .play span{
	background: url(http://i.imgur.com/hyUlL2r.png) no-repeat center center;
 }
 .menu .pause{
 	background: url(http://i.imgur.com/D1iTyjp.png) no-repeat center center;
 }
 .pause span{
	background: url(http://i.imgur.com/dBQOlg1.png) no-repeat center center;
 }
  .menu .next{
  	border-radius:0 15px 15px 0;
 	background: url(http://i.imgur.com/d4yYfGs.png) no-repeat center center;
 }
 .next span{
	background: url(http://i.imgur.com/JyDNjL9.png) no-repeat center center;
 }
 .menu .share,
 .menu .like{
 	position: relative;
 	height: 30px;
 	width: 30px;
 	cursor: pointer;
 	border-radius: 15px;
 	box-shadow:
		inset 0 1px 2px rgba(0,0,0,0.6),
		0 1px rgba(50,50,50,0.5)
		;
	-o-transition: background-color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out;
 }
 .menu .like{
 	float: right;
 	background: #171717 url(http://i.imgur.com/APpk31d.png) no-repeat center center;
 }
 .like span{
 	background: url(http://i.imgur.com/BUoeur6.png) no-repeat center center;
 }
 .menu .share{
 	float: left;
 	background: #171717 url(http://i.imgur.com/aGosymG.png) no-repeat center center;
 }
 .share span{
 	background: url(http://i.imgur.com/sVrgiY0.png) no-repeat center center;
 }
	<html>
	<head>
	<title>AudioPlayer</title>
	<link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'/>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<!--[if IE 9]>
	<style type="text/css">
	.slice-content:nth-child(4) {
	-ms-transform: scaleY(1);
	}
	.flip{
	-ms-transform-origin: center top;
	-ms-transform: scaleY(0.6) !important;
	}
	</style>
	<![endif]-->
	</head>

	<body>
	<div class="container">
	<div class="this-wrapper">
	<div class="this">
	<div class="wrapper">
	<div class="likescreen">
	<div class="likecounter"></div>
	</div>
	<div class="blackscreen"></div>
	<img src="" alt=""/>
	</div>
	<div class="sharescreen">
	<div class="sharetext">Share :</div>
	<div class="socialicons">
	<a href="http://www.facebook.com/share.php?u=http%3A%2F%2Fryanbishop.me%2Faudioplayer%2F&title=COLORBLIND mix player.">
	<div class="icon facebook"></div>
	</a>
	<a href="http://twitter.com/home?status=COLORBLIND mix player.+http%3A%2F%2Fryanbishop.me%2Faudioplayer%2F">
	<div class="icon twitter">
	<div class="lineone"></div>
	<div class="linetwo"></div>
	</div>
	</a>
	<a href="http://dribbble.com/RyanBishop" target="_blank">
	<div class="icon dribbble"></div>
	</a>
	</div>
	</div>
	<div class="menu">
	<div class="share"><span></span> </div>
	<ul>
	<li class="previous"><span></span></li>
	<li class="play pause"><span></span> </li>
	<li class="next"><span></span> </li>
	</ul>
	<div class="like"><span></span> </div>
	</div>
	</div>
	</div>
	</div>
	<img class="thumbnail" src="http://i.imgur.com/SkJg63Y.jpg" alt=""/>
	<audio >
	<source src="http://ryanbishop.me/audioplayer/tracks/grayscale005.mp3" type="audio/mp3"/>
	<source src="http://ryanbishop.me/audioplayer/tracks/grayscale005.ogg" type="audio/ogg"/>
	Your browser does not support HTML5 audio.
	</audio>
	<img class="thumbnail" src="http://i.imgur.com/6cwiVtD.jpg" alt=""/>
	<audio >
	<source src="http://ryanbishop.me/audioplayer/tracks/grayscale006.mp3" type="audio/mp3"/>
	<source src="http://ryanbishop.me/audioplayer/tracks/grayscale006.ogg" type="audio/ogg"/>
	Your browser does not support HTML5 audio.
	</audio>
	<img class="thumbnail" src="http://i.imgur.com/bUIkoni.png" alt=""/>
	<audio >
	<source src="http://ryanbishop.me/audioplayer/tracks/grayscale007.mp3" type="audio/mp3"/>
	<source src="http://ryanbishop.me/audioplayer/tracks/grayscale007.ogg" type="audio/ogg"/>
	Your browser does not support HTML5 audio.
	</audio>
	</body>
	</html>
	/*////Created by Ryan Bishop./////
	--Check out more of my work at:---
	--http://dribbble.com/RyanBishop--
	----------------OR----------------
	-------Follow me on twitter:------
	-------------@abletroner----------
	--------Find the music on:--------
	soundcloud.com/colorblind-official
	////////////////////////////////*/



	$(document).ready(function(){
	var cssStyle = { 'margin-top' : - $('.this').size.height / 2 + 'px' };
	var imgx = $('thumbnail').length;
	var x = $('audio').length;
	var z=0;
	$('.wrapper > img').attr("src", function() { return $('.thumbnail')[z].src;
	});
	$( ".wrapper" ).wrap($('<div class="slice-content"/>'))
	.parent()
	.clone()
	.appendTo( ".this" )
	.find( '.wrapper' )
	.css('margin-top','-111px');
	$('.slice-content').click(function(){
	$('.slice-content:nth-child(4)').toggleClass('flip');
	});

	$('.play').click(function(){
	$('audio')[z].play();
	$(this).toggleClass('pause');
	if($(this).hasClass('pause')){
	$('audio')[z].pause();
	}
	});
	$('.next').click(function(){
	$('audio')[z].pause();
	$('.play').removeClass('pause');
	$('audio')[z].currentTime=0;
	z++;
	if(z>=x){z=0}
	$('.wrapper > img').attr("src", function() { return $('.thumbnail')[z].src;
	});
	$('audio')[z].play();
	});
	$('.previous').click(function(){
	$('audio')[z].pause();
	$('.play').removeClass('pause');
	$('audio')[z].currentTime=0;
	z--;
	if(z<0){z=x-1}
	$('.wrapper > img').attr("src", function() { return $('.thumbnail')[z].src;
	});
	$('audio')[z].play();
	});
	$('audio').bind("ended",function(){
	z++;
	if(z>=x){z=0}
	$('.wrapper > img').attr("src", function() { return $('.thumbnail')[z].src;
	});
	$('audio')[z].play();
	});
	// Like & Share screens fade
	$('.likescreen, .sharescreen, .blackscreen, .sharetext').hide();
	$('.like').click(function(){
	$('.slice-content:nth-child(4)').toggleClass('flip');
	$('.blackscreen').fadeIn(1000);
	$('.likescreen').fadeIn(500);
	$('.likecounter').addClass('dropdown');
	});
	$('.likescreen').click(function(){
	$('.likescreen, .blackscreen').fadeOut(300);
	$('.likecounter').removeClass('dropdown');
	});
	$('.share').click(function(){
	$('.slice-content:nth-child(4)').toggleClass('flip');
	$('.blackscreen').fadeIn(1000);
	$('.sharescreen').fadeIn(500);
	$('.socialicons').addClass('dropdown');
	setTimeout(function(){
	$('.sharetext').fadeIn(300);
	$('.facebook').css('right','130px').css('opacity','1');
	$('.dribbble').css('left','130px').css('opacity','1');
	setTimeout(function(){
	$('.lineone, .linetwo').css('width','19px');
	},300);
	},1000);
	});
	$('.sharescreen').click(function(){
	$('.slice-content:nth-child(4)').toggleClass('flip');
	$('.sharescreen, .blackscreen, .sharetext').fadeOut();
	$('.socialicons').removeClass('dropdown');
	$('.lineone, .linetwo').css('width','0px');
	$('.facebook').css('right','0').css('opacity','0');
	$('.dribbble').css('left','0').css('opacity','0');
	});



	$("ul > li, .share, .like").find('span').hide().end()
	.hover(function(){
	$(this).find('span').stop(true, true).fadeIn(200)
	}, function(){
	$(this).find('span').stop(true, true).fadeOut(200)
	});

	});
	body{
	margin: 0;
	padding: 0;
	background: url(http://i.imgur.com/SbiFOLW.png);
	}
	audio{
	position: relative;
	display: block;
	margin: 0 auto;
	width:500px;
	height: 40px;
	}
	.container{
	position: relative;
	width:100%;
	height: 304px;
	}
	.this-wrapper{
	position: absolute;
	height: 222px;
	width: 222px;
	margin:auto;
	top:0;bottom:0;left:0;right:0;
	}
	.this{
	border-radius: 8px;
	box-shadow:
	0 1px 6px rgba(0,0,0,0.4),
	0 1px rgba(55,55,55,1)
	;
	position: absolute;
	height: 222px;
	width: 220px;
	-webkit-perspective: 650px;
	-moz-perspective: 650px;
	-ms-perspective: 650px;
	-o-perspective: 650px;
	perspective: 650px;

	}
	.sharescreen{
	width: 222px;
	height: 222px;
	z-index: 997;
	position: absolute;
	top: 0px;
	}
	.likescreen,
	.blackscreen{
	border-radius: 8px;
	position: absolute;
	top:-1px;
	height: 224px;
	width: 222px;
	z-index: 997;
	}
	.blackscreen{
	background-color: rgba(0,0,0,0.8);
	z-index: 996;
	}
	.likecounter{
	width: 52px;
	height: 52px;
	margin: auto;
	position: absolute;
	z-index: 999;
	top:0;left:0;right:0;bottom: 0;
	background: url(http://i.imgur.com/wNPFrma.png);
	}

	.socialicons{
	width: 100%;
	position: absolute;
	margin: auto;
	height: 46px;
	top:0;left:0;right:0;bottom: 0;
	}
	.dropdown{
	bottom:auto;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	transform: translateY(87px);
	-webkit-transform: translateY(87px);
	-moz-transform: translateY(87px);
	-ms-transform: translateY(87px);
	-o-transform: translateY(87px);
	}
	.sharetext{
	position: absolute;
	color:#fff;
	font-family: 'Oswald';
	font-weight: 300;
	text-align: center;
	width: 100%;
	top:46px;
	text-transform: uppercase;
	font-size: 1em;
	}
	.facebook,
	.twitter,
	.dribbble{
	border-radius: 23px;
	cursor: pointer;
	width: 46px;
	height: 46px;
	margin: 0 auto;
	right: 0; left: 0;
	position:absolute;
	box-shadow: 0 0 0 1px #fff;
	-o-transition: right 0.5s ease-in-out, left 0.5s ease-in-out, opacity 0.4s ease-in-out 0.1s;
	-ms-transition: right 0.5s ease-in-out, left 0.5s ease-in-out, opacity 0.4s ease-in-out 0.1s;
	-moz-transition: right 0.5s ease-in-out, left 0.5s ease-in-out, opacity 0.4s ease-in-out 0.1s;
	-webkit-transition: right 0.5s ease-in-out, left 0.5s ease-in-out, opacity 0.4s ease-in-out 0.1s;
	transition: right 0.5s ease-in-out, left 0.5s ease-in-out, opacity 0.4s ease-in-out 0.1s;
	}

	.icon:after {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 24px;
	content: '';
	top: -1px;
	left: -1px;
	padding: 1px;
	z-index: -1;
	opacity: 0;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	-ms-box-sizing: content-box;
	-o-box-sizing: content-box;
	box-sizing: content-box;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s ease-out;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s ease-out;
	transition: transform 0.3s, opacity 0.3s ease-out;
	-webkit-transform: scale(1.3);
	-moz-transform: scale(1.3);
	-ms-transform: scale(1.3);
	transform: scale(1.3);
	}
	.icon:hover:after {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
	}
	.facebook{
	opacity: 0;
	background: url(http://i.imgur.com/3AzFfdn.png) no-repeat center center;
	}
	.twitter{
	background: url(http://i.imgur.com/zCUAFPE.png) no-repeat center center;
	}
	.twitter .lineone{
	content: ' ';
	position: absolute;
	margin: auto;
	bottom: 0; top: 0; right: 46px;
	width: 0px;
	height: 1px;
	background-color: #fff;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	}
	.twitter .linetwo{
	content: ' ';
	position: absolute;
	margin: auto;
	bottom: 0; top: 0; left: 46px;
	width: 0px;
	height: 1px;
	background-color: #fff;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	}
	.dribbble{
	opacity: 0;
	background: url(http://i.imgur.com/pASuBLd.png) no-repeat center center;
	}
	.facebook:after{
	background: #3b5998;
	}
	.twitter:after{
	background: #00acee;
	}
	.dribbble:after{
	background: #ea4c89;
	}
	.wrapper{
	position: absolute;
	height: 222px;
	width: 222px;
	}
	.thumbnail{
	display: none;
	}
	img{
	border-radius: 8px;
	width: 100%;
	height: 100%;
	}
	.slice-content{
	overflow: hidden;
	position: absolute;
	opacity: 1;
	cursor:pointer;
	-webkit-transform-origin: center top;
	-moz-transform-origin: center top;
	-ms-transform-origin: center top;
	-o-transform-origin: center top;
	transform-origin: center top;
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	-ms-transform: rotateX(0deg);
	transform: rotateX(0deg);
	width: 222px;
	height:111px;
	}
	.slice-content:first-child {
	border-top: 1px solid #161616;
	border-left: 1px solid #161616;
	border-right: 1px solid #000;
	border-radius: 8px 8px 0 0;
	top: 0px;
	}

	.slice-content:nth-child(4) {
	border-bottom: 1px solid #161616;
	border-left: 1px solid #161616;
	border-right: 1px solid #000;
	top: 112px;
	z-index: 100;
	border-radius: 0 0 8px 8px;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;

	}
	.flip {
	-webkit-transform: rotateX(62deg) !important;
	-moz-transform: rotateX(62deg) !important;
	-ms-transform: rotateX(62deg) !important;
	transform: rotateX(62deg) !important;
	border-bottom: 2px solid #161616 !important;

	}

	.menu{
	position: absolute;
	z-index: 2;
	height:52px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #151616;
	padding:11px;
	width: 222px;
	bottom: 0;
	margin: 0 auto;
	border-radius: 0 0 8px 8px;
	left:0;right:0;
	background-color: #1e1e1e;
	}
	.menu ul{
	float: left;
	box-shadow:
	inset 0 1px 2px rgba(0,0,0,0.6),
	0 1px rgba(50,50,50,0.5)
	;
	margin:0 0 0 10px;
	padding: 0;
	list-style: none;
	height:30px;
	width:120px;
	display: block;
	border-radius: 15px;
	background-color: #171717;
	}
	.menu li{
	float: left;
	position: relative;
	cursor: pointer;
	width: 40px;
	height: 30px;
	-o-transition: background-color 0.2s ease-in-out;
	-ms-transition: background-color 0.2s ease-in-out;
	-moz-transition: background-color 0.2s ease-in-out;
	-webkit-transition: background-color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out;
	}
	.menu span{
	position: absolute;
	top:0;bottom:0;right:0;left:0;
	}
	.menu li:hover,
	.menu .share:hover,
	.menu .like:hover{
	background-color: rgba(0,0,0,0.4);
	}
	.menu .previous{
	border-radius:15px 0 0 15px;
	background: url(http://i.imgur.com/n2ER0Dd.png) no-repeat center center;
	}
	.previous span{
	background: url(http://i.imgur.com/vDIdKpi.png) no-repeat center center;
	}
	.menu .play{
	background: url(http://i.imgur.com/dU17ZRl.png) no-repeat center center;
	}
	.play span{
	background: url(http://i.imgur.com/hyUlL2r.png) no-repeat center center;
	}
	.menu .pause{
	background: url(http://i.imgur.com/D1iTyjp.png) no-repeat center center;
	}
	.pause span{
	background: url(http://i.imgur.com/dBQOlg1.png) no-repeat center center;
	}
	.menu .next{
	border-radius:0 15px 15px 0;
	background: url(http://i.imgur.com/d4yYfGs.png) no-repeat center center;
	}
	.next span{
	background: url(http://i.imgur.com/JyDNjL9.png) no-repeat center center;
	}
	.menu .share,
	.menu .like{
	position: relative;
	height: 30px;
	width: 30px;
	cursor: pointer;
	border-radius: 15px;
	box-shadow:
	inset 0 1px 2px rgba(0,0,0,0.6),
	0 1px rgba(50,50,50,0.5)
	;
	-o-transition: background-color 0.2s ease-in-out;
	-ms-transition: background-color 0.2s ease-in-out;
	-moz-transition: background-color 0.2s ease-in-out;
	-webkit-transition: background-color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out;
	}
	.menu .like{
	float: right;
	background: #171717 url(http://i.imgur.com/APpk31d.png) no-repeat center center;
	}
	.like span{
	background: url(http://i.imgur.com/BUoeur6.png) no-repeat center center;
	}
	.menu .share{
	float: left;
	background: #171717 url(http://i.imgur.com/aGosymG.png) no-repeat center center;
	}
	.share span{
	background: url(http://i.imgur.com/sVrgiY0.png) no-repeat center center;
	}