cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              		<div id="wrapper">
			<h1>South Park Soundboard</h1>

			<figure class="player kyle" id="kyle1">
				<div class="head">
					<div class="cap1"></div>
					<div class="cap2"></div>
				</div>
				<span class="playtoggle" id="playtoggle1">
					<span class="progress"></span>
				</span> 
				<audio id="kylesound1" preload="on">
					<source src="https://www.dropbox.com/s/rox0lik6xjor8o2/kyle1_arnaque.ogg" type="audio/ogg">
					<source src="https://www.dropbox.com/s/5a198o6cs0iwrgu/kyle1_arnaque.mp3" type="audio/mp3">
					<p>Votre navigateur ne supporte pas l'élément <code>audio</code>.</p>
					<p>Your browser does not support the <code>audio</code> tag.</p>
				</audio>
				<figcaption>Arnaque</figcaption>
			</figure>

			<figure class="player cartman" id="cartman1">
				<div class="head">
					<div class="face">
						<div class="cap"></div>
						<div class="chin"></div>
					</div>
				</div>
				<div class="pompom"></div>
				<span class="playtoggle">
					<span class="progress"></span>
				</span> 
				<audio id="cartmansound1" preload="auto">
					<source src="https://www.dropbox.com/s/z70oo5ea14sy1zk/cartman_maison.ogg" type="audio/ogg">
					<source src="https://www.dropbox.com/s/zcl47vcvhyvktt7/cartman_maison.mp3" type="audio/mp3">
					<p>Votre navigateur ne supporte pas l'élément <code>audio</code>.</p>
					<p>Your browser does not support the <code>audio</code> tag.</p>
				</audio>
				<figcaption>Maison</figcaption>
			</figure>

			<figure class="player stan" id="stan1">
				<div class="head">
					<div class="face">
						<div class="cap"></div>
					</div>
				</div>
				<div class="pompom">
					<div class="thread"></div>
					<div class="thread thread2"></div>
					<div class="thread thread3"></div>
				</div>
				<span class="playtoggle">
					<span class="progress"></span>
				</span> 
				<audio id="stansound1" preload="auto">
					<source src="https://www.dropbox.com/s/1ebsww3fn5dt7eq/stan_merde.ogg?" type="audio/ogg">
					<source src="https://www.dropbox.com/s/xxfsra8xaandj3u/stan_merde.mp3" type="audio/mp3">
					<p>Votre navigateur ne supporte pas l'élément <code>audio</code>.</p>
					<p>Your browser does not support the <code>audio</code> tag.</p>
				</audio>
				<figcaption>Merde</figcaption>
			</figure>

			<figure class="player kenny" id="kenny">
				<div class="head">
					<div class="face">
						<div class="hood2"></div>
					</div>
					<div class="hood1"></div>
					<div class="thread"></div>
				</div>
				<span class="playtoggle">
					<span class="progress"></span>
				</span> 
				<audio id="kennysound" preload="auto">
					<source src="https://www.dropbox.com/s/sy9pdcg03w1cjbt/kenny_rire.ogg" type="audio/ogg">
					<source src="https://www.dropbox.com/s/nqct0l7qagzz5x6/kenny_rire.mp3" type="audio/mp3">
					<p>Votre navigateur ne supporte pas l'élément <code>audio</code>.</p>
					<p>Your browser does not support the <code>audio</code> tag.</p>
				</audio>
				<figcaption>Huhuhu</figcaption>
			</figure>

			<figure class="player garrison" id="garrison1">
				<div class="head">
					<div class="black"></div>
					<div class="hair1"></div>
					<div class="hair2"></div>
					<div class="wrinkles"></div>
				</div>
				<span class="playtoggle">
					<span class="progress"></span>
				</span> 
				<audio id="garrisonsound1" preload="auto">
					<source src="https://www.dropbox.com/s/0q67a6qpg4l28u6/garrison_alerte.ogg" type="audio/ogg">
					<source src="https://www.dropbox.com/s/6px7rbcerjlqfok/garrison_alerte.mp3" type="audio/mp3">
					<p>Votre navigateur ne supporte pas l'élément <code>audio</code>.</p>
					<p>Your browser does not support the <code>audio</code> tag.</p>
				</audio>
				<figcaption>Alerte</figcaption>
			</figure>

			<figure class="player butters" id="butters1">
				<div class="head">
					<div class="hair"></div>
					<div class="hair2"></div>
				</div>
				<span class="playtoggle">
					<span class="progress"></span>
				</span> 
				<audio id="butterssound2" preload="auto">
					<source src="https://www.dropbox.com/s/9jx62hebo4w1o8x/butters_bonjour.ogg" type="audio/ogg">
					<source src="https://www.dropbox.com/s/obaygk7ctrf62rq/butters_bonjour.mp3" type="audio/mp3">
					<p>Votre navigateur ne supporte pas l'élément <code>audio</code>.</p>
					<p>Your browser does not support the <code>audio</code> tag.</p>
				</audio>
				<figcaption>Bonjour</figcaption>
			</figure>

			<figure class="player servietsky" id="servietsky1">
				<div class="topshadow"></div>
				<div class="body">
					<div class="stripes"></div>
					<div class="bottom"></div>
				</div>
				<span class="playtoggle">
					<span class="progress"></span>
				</span> 
				<audio id="servietsky1" preload="auto">
					<source src="https://www.dropbox.com/s/xmj3vz1ddben9th/servietsky_serviette.ogg" type="audio/ogg">
					<source src="https://www.dropbox.com/s/61h6k2xifxjv8k0/servietsky_serviette.mp3" type="audio/mp3">
					<p>Votre navigateur ne supporte pas l'élément <code>audio</code>.</p>
					<p>Your browser does not support the <code>audio</code> tag.</p>
				</audio>
				<figcaption>Serviette</figcaption>
			</figure>

			<figure class="player kyle" id="kyle2">
				<div class="head">
					<div class="cap1"></div>
					<div class="cap2"></div>
				</div>
				<span class="playtoggle">
					<span class="progress"></span>
				</span> 
				<audio id="kylesound2" preload="auto">
					<source src="https://www.dropbox.com/s/6as5q6anvek8k75/kyle2_poules.ogg" type="audio/ogg">
					<source src="https://www.dropbox.com/s/n6pjd10why74gya/kyle2_poules.mp3" type="audio/mp3">
					<p>Votre navigateur ne supporte pas l'élément <code>audio</code>.</p>
					<p>Your browser does not support the <code>audio</code> tag.</p>
				</audio>
				<figcaption>Poules</figcaption>
			</figure>

			<figure class="player cartman" id="cartman2">
				<div class="head">
					<div class="face">
						<div class="cap"></div>
						<div class="chin"></div>
					</div>
				</div>
				<div class="pompom"></div>
				<span class="playtoggle">
					<span class="progress"></span>
				</span> 
				<audio id="cartmansound2" preload="auto">
					<source src="https://www.dropbox.com/s/jrrph9afd18rfbl/cartman_aime.ogg" type="audio/ogg">
					<source src="https://www.dropbox.com/s/xgxtr5hwvowklwc/cartman_aime.mp3" type="audio/mp3">
					<p>Votre navigateur ne supporte pas l'élément <code>audio</code>.</p>
					<p>Your browser does not support the <code>audio</code> tag.</p>
				</audio>
				<figcaption>Je vous aime</figcaption>
			</figure>

			<figure class="player stan" id="stan2">
				<div class="head">
					<div class="face">
						<div class="cap"></div>
					</div>
				</div>
				<div class="pompom">
					<div class="thread"></div>
					<div class="thread thread2"></div>
					<div class="thread thread3"></div>
				</div>
				<span class="playtoggle">
					<span class="progress"></span>
				</span> 
				<audio id="stansound2" preload="auto">
					<source src="https://www.dropbox.com/s/ryw7sepc6hxxq47/stan_colle.ogg" type="audio/ogg">
					<source src="https://www.dropbox.com/s/24datkce89lo8px/stan_colle.mp3" type="audio/mp3">
					<p>Votre navigateur ne supporte pas l'élément <code>audio</code>.</p>
					<p>Your browser does not support the <code>audio</code> tag.</p>
				</audio>
				<figcaption>Colle</figcaption>
			</figure>

			<figure class="player garrison" id="garrison2">
				<div class="head">
					<div class="black"></div>
					<div class="hair1"></div>
					<div class="hair2"></div>
					<div class="wrinkles"></div>
				</div>
				<span class="playtoggle">
					<span class="progress"></span>
				</span> 
				<audio id="garrisonsound2" preload="auto">
					<source src="https://www.dropbox.com/s/0cg725jdl9nukqh/garrison_confiance.ogg" type="audio/ogg">
					<source src="https://www.dropbox.com/s/etrkkog29fkaa5k/garrison_confiance.mp3" type="audio/mp3">
					<p>Votre navigateur ne supporte pas l'élément <code>audio</code>.</p>
					<p>Your browser does not support the <code>audio</code> tag.</p>
				</audio>
				<figcaption>Confiance</figcaption>
			</figure>

			<figure class="player butters" id="butters2">
				<div class="head">
					<div class="hair"></div>
					<div class="hair2"></div>
				</div>
				<span class="playtoggle">
					<span class="progress"></span>
				</span> 
				<audio id="butterssound2" preload="auto">
					<source src="https://www.dropbox.com/s/bzi0ve5jbl9tpbu/butters_louloulou.ogg" type="audio/ogg">
					<source src="https://www.dropbox.com/s/z5k7eh5fiuc05hy/butters_louloulou.mp3" type="audio/mp3">
					<p>Votre navigateur ne supporte pas l'élément <code>audio</code>.</p>
					<p>Your browser does not support the <code>audio</code> tag.</p>
				</audio>
				<figcaption>Louloulou</figcaption>
			</figure>

			<figure class="player servietsky" id="servietsky2">
				<div class="topshadow"></div>
				<div class="body">
					<div class="stripes"></div>
					<div class="bottom"></div>
				</div>
				<span class="playtoggle">
					<span class="progress"></span>
				</span> 
				<audio id="servietsky2" preload="auto">
					<source src="https://www.dropbox.com/s/svsvv6a1h368965/servietsky_petard.ogg" type="audio/ogg">
					<source src="https://www.dropbox.com/s/e56oixi6x2d2bkf/servietsky_petard.mp3" type="audio/mp3">
					<p>Votre navigateur ne supporte pas l'élément <code>audio</code>.</p>
					<p>Your browser does not support the <code>audio</code> tag.</p>
				</audio>
				<figcaption>Pétard</figcaption>
			</figure>
		</div>
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Bangers);

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	font-size: 10px;
	background: #41505D;
	font-family: Bangers, sans-serif;
	color: #333;
}
h1 {
	font-size: 3em;
	padding: 0.2em 0 0;
	margin:0;
	display: none;
}
#wrapper {
	text-align: center;
	background: #41505D;
	/*background: #3E3E3E;*/
	margin-bottom: 5em;
	position: relative;
}
.player {
	width: 20em;
	height: 20em;
	display: inline-block;
	position: relative;
	margin: 4em;
	padding: 0;	
}
figcaption {
	font-size: 3em;
	position: absolute;
	text-transform: uppercase;
	bottom: -1.5em;
	letter-spacing: 0.1em;
	width: 100%;
	/*opacity: 0;*/
	text-shadow: 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.25);
	transition: all 0.5s ease-in-out;
}

.player:hover figcaption {	
	opacity: 1;
}

.kyle figcaption {color:#4EC313;}
.stan figcaption {color:#ED2F4F;}
.cartman figcaption {color:#00BBC3;}
.kenny figcaption {color:#FF6200;}
.garrison figcaption {color:#9EADC9;}
.butters figcaption {color:#FFD400;}
.servietsky figcaption {color:#8B96BB;}

/* KYLE 
-------------------------------------------------*/
.kyle .head {
	border-radius: 50%;
	position: absolute;
	top: 5.2em;
	left: 2.4em;
	width: 15em;
	height: 13.2em;
	background: #F8D5B1;
	z-index: 4;
	box-shadow: 0 0 5em rgba(0,0,0,0.25);
	box-shadow: 0px 0px 1em rgba(0, 0, 0, 0.5);
}
.kyle .head .cap1 {
	border-radius: 2em 2em 0 0;
	position: absolute;
	top: -3em;
	left: 0;
	width: 15.1em;
	height: 6.9em;
	background: #4EC313;
	box-shadow: 0 0 0.5em rgba(0,0,0,0.25);
}
.kyle .head .cap1:before {
	content:"";
	position: absolute;
	width: 2.8em;
	height: 7.5em;
	left: -1.5em;
	top: 5.3em;
	border-radius: 100% 100%;
	box-shadow: 0 -0.1em 0 rgba(0,0,0,0.25);
	background: #4EC313;
	-webkit-transform: rotate(20.30deg);
	transform: rotate(20.30deg);
	box-shadow: 0 0 0.5em rgba(0,0,0,0.25);

}
.kyle .head .cap1:after {
	content:"";
	position: absolute;
	width: 2.8em;
	height: 7.5em;
	right: -1.5em;
	top: 5.3em;
	border-radius: 100% 100%;
	box-shadow: 0 -1em 0 rgba(0,0,0,0.25);
	background: #4EC313;
	-webkit-transform: rotate(-20.3deg);
	transform: rotate(-20.3deg);
	box-shadow: 0 0 0.5em rgba(0,0,0,0.25);
}
.kyle .head .cap2 {
	z-index: 5;
	position: absolute;
	top: -0.2em;
	left: 1.1em;
	width: 12.9em;
	height: 4.2em;
	background: #1C9432;
	box-shadow: 0 0 0.5em rgba(0,0,0,0.25);
}

/* CARTMAN 
-------------------------------------------------*/
.cartman .head {
	border-radius: 50%;
	position: absolute;
	top: 3em;
	left: 0.5em;
	width: 19.1em;
	height: 15.5em;
	z-index: 4;
	box-shadow: 0 0 0.5em rgba(0,0,0,0.25);
	box-shadow: 0px 0px 1em rgba(0, 0, 0, 0.5);
	background: none;
	overflow: hidden;
}
.cartman .face {
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0.1em;
	width: 18.9em;
	height: 15.5em;
	background: #F8D5B1;
}
.cartman .chin {
	border-radius: 50%;
	position: absolute;
	top: 4.4em;
	left: 1.4em;
	width: 16.2em;
	height: 10.3em;
	background: none;
	border-top: 0;
	border-left: 0.1em solid transparent;
	border-bottom: 0.2em solid #A58D77;
	border-right: 0.1em solid transparent;
}
.cartman .cap {
	border-radius: 50%;
	position: absolute;
	top: 0em;
	left: 0em;
	width: 18.9em;
	height: 15.5em;
	background: none;
	border-bottom:0;
	border-left:0;
	border-right:0;
	border-top: 4.4em solid #00BBC3;
}
.cartman .cap:after {
	content: "";
	border-radius: 50%;
	position: absolute;
	top: -0.2em;
	left: -3.6em;
	width: 24em;
	height: 13em;

	background: -webkit-radial-gradient(ellipse , transparent 67%, rgba(0, 0, 0, 0.5) 100%);
	background: -moz-radial-gradient(ellipse , transparent 67%, rgba(0, 0, 0, 0.5) 100%);
	background: radial-gradient(ellipse , transparent 67%, rgba(0, 0, 0, 0.5) 100%);

	border-bottom:0;
	border-left: 1em solid transparent;
	border-top: 1em solid #FFE600;
	border-right: 1em solid transparent;
}
.cartman .pompom {
	position: absolute;
	top: 2.2em;
	width: 19.4em;
	height: 1.7em;
	border-radius: 50%;
	background-color: ;
	z-index: 10;
}
.cartman .pompom:after, .cartman .pompom:before {display: block; border-radius: 50%;}

.cartman .pompom:after {
	content: "";
	width:1.9em;
	height: 1.7em;
	box-shadow: 10em -1.1em 0px #FFE600, 10em -1.1em 0.1em rgba(0,0,0,0.25), 8.8em -1em 0px #FFE600, 8.8em -1em 0.1em rgba(0,0,0,0.25);
	box-shadow: 10em -1.1em 0px #FFE600, 8.8em -1em 0px #FFE600;
}
.cartman .pompom:before {
	content: "";
	width:1.5em;
	height: 1.1em;
	box-shadow: 7.7em 0.5em 0px #FFE600, 7.7em 0.5em 0.1em rgba(0,0,0,0.5), 11.5em 0.5em 0px #FFE600, 11.5em 0.5em 0.1em rgba(0,0,0,0.5);
}
/* STAN
-------------------------------------------------*/
.stan .head {
	position: absolute;
	top: 2.5em;
	left: 2em;
	width: 16em;
	height: 16.9em;
	height:  15.8em;
	border-radius: 0%;
	overflow: hidden;
	border-radius: 50%;
	box-shadow: 0 0.1em 1em rgba(0,0,0,0.25);
	z-index: 0;
}
.stan .face {
	position: relative;
	top: 0.9em;
	top: 0.2em;
	left: 0.2em;
	width: 15.6em;
	height: 15.6em;
	background: #F8D5B1;
	border-radius: 50%;
	box-shadow: 0 0 1em rgba(0,0,0,0.5);
}
.stan .cap {
	position: relative;
	top: -0.2em;
	left: 0em;
	width: 15.6em;
	height: 15.7em;
	background: none;
	border-radius: 50%;
	border-bottom:0;
	border-left:0;
	border-right:0;
	border-top: 5.4em solid #406FAD;
}
.stan .cap:after {
	content: "";
	border-radius: 50%;
	position: absolute;
	top: -0.8em;
	left: -3.7em;
	width: 20em;
	height: 9.6em;

	background: -moz-radial-gradient(ellipse , transparent 67%, rgba(0, 0, 0, 0.5) 100%);
	background: -webkit-radial-gradient(ellipse , transparent 67%, rgba(0, 0, 0, 0.5) 100%);
	background: radial-gradient(ellipse , transparent 67%, rgba(0, 0, 0, 0.5) 100%);

	border-bottom:0;
	border-left: 1.5em solid transparent;
	border-top: 1.5em solid #ED2F4F;
	border-right: 1.5em solid transparent;
}
.stan .pompom {
	position: absolute;
	left: 7.5em;
	top: 0.7em;
	width: 3.7em;
	height: 3.7em;
	border-radius: 50%;
}
.stan .thread {
	position: absolute;
	width: 3.7em;
	height: 0.4em;
	top: 1.6em;
	background: #ED2F4F;
	border-radius: 0.2em;
	box-shadow: 0 0 0.1em rgba(0,0,0,0.25);
}
.stan .thread2 {
	-webkit-transform: rotate(65deg);
	transform: rotate(65deg);
}
.stan .thread3 {
	-webkit-transform: rotate(112deg);
	transform: rotate(112deg);
}
.stan .thread:before, .stan .thread:after {
	content: "";
	position: absolute;
	width: 3.7em;
	height: 0.4em;
	top: 0;
	left: 0;
	background: #ED2F4F;
	border-radius: 0.2em;
	box-shadow: 0 0 0.1em rgba(0,0,0,0.25);
}
.stan .thread:after {
	-webkit-transform: rotate(20deg);
	transform: rotate(20deg);
}
.stan .thread:before {
	-webkit-transform: rotate(-20deg);
	transform: rotate(-20deg);
}
.stan .thread3:before {
	display: none;
}
/* KENNY
-------------------------------------------------*/
.kenny .head {
	position: absolute;
	top: 2.5em;
	left: 1.8em;
	width: 16.4em;
	height: 16.4em;
	overflow: hidden;
	border-radius: 50%;
	box-shadow: 0 0.1em 1em rgba(0,0,0,0.25);
	z-index: 0;
	background: #FF6200;
}
.kenny .hood1 {
	position: absolute;
	top: 3.6em;
	left: 2.4em;
	width: 11.7em;
	height: 10.3em;
	overflow: hidden;
	border-radius: 50%;
	border: 0.1em solid black;
}
.kenny .face {
	position: absolute;
	top: 3.6em;
	left: 3em;
	width: 10.5em;
	height: 9.1em;
	overflow: hidden;
	border-radius: 50%;
	background: #F8D5B1;
}
.kenny .hood2 {
	position: absolute;
	top: 0em;
	left: -0.1em;
	width: 10.5em;
	height: 9.1em;
	border-radius: 50%;
}
.kenny .hood2:before {
	content: "";
	position: absolute;
	top: -0.1em;
	left: -0.1em;
	width: 9.9em;
	height: 9.3em;
	border-radius: 50%;
	border-top: 0 solid transparent;
	border-left: 2em solid #724024;
	border-bottom: 0 solid transparent;
	border-right: 0 solid transparent;
}
.kenny .hood2:after {
	content: "";
	position: absolute;
	top: -0.1em;
	right: -0.3em;
	width: 9.9em;
	height: 9.3em;
	border-radius: 50%;
	border-top: 0 solid transparent;
	border-left:  0 solid transparent;
	border-bottom: 0 solid transparent;
	border-right:  2em solid #724024;
}
.kenny .thread {
	position: absolute;
	width: 0.15em;
	height: 2.8em;
	top: 13.1em;
	left: 8.6em;
	background: black;
	border-radius: 0.1em;
	transform: rotate(-8deg);
}
.kenny .thread:after {
	content: "";
	position: absolute;
	width: 0.15em;
	height: 2.1em;
	top: -0.1em;
	left: -0.5em;
	background: black;
	border-radius: 0.1em;
	transform: rotate(26deg);
}
/* GARRISON 
-------------------------------------------------*/
.garrison .head {
	border-radius: 50%;
	position: absolute;
	top: 1.8em;
	left: 2.3em;
	width: 15.5em;
	height: 16.9em;
	background: #F8D5B1;
	z-index: 2;
	box-shadow: 0 0.2em 0.3em rgba(0, 0, 0, 0.25);
	box-shadow: 0px 0px 1em rgba(0, 0, 0, 0.5);
}
.garrison .head:before, .garrison .head:after {
	content: "";
	width: 7.5em;
	height: 1.8em;
	position: absolute;
	background: #F8D5B1;
	border-radius: 0.9em;
	z-index: -1;
	top: 8.4em;
}
.garrison .head:before {
	right: -3.3em;
	-webkit-transform: rotate(-75deg);
	transform: rotate(-75deg);
}
.garrison .head:after {
	left: -3.3em;
	-webkit-transform: rotate(75deg);
	transform: rotate(75deg);
}
.garrison .black {
	z-index:1;
}
.garrison .black:before, .garrison .black:after {
	content: "";
	border-radius: 50%;
	position: absolute;
	top: -0.2em;
	left: 0em;
	width: 15.4em;
	height: 16.9em;
	background: none;
	z-index:1;
}
.garrison .black:before {
	border-width: 0.2em 0 0.2em 0.1em;
	border-style: solid;
	border-color: transparent transparent transparent #000;
}
.garrison .black:after {
	border-width: 0.2em 0.1em 0.2em 0;
	border-style: solid;
	border-color: transparent #000 transparent transparent;
}
.garrison .hair1:before, .garrison .hair1:after {
	content: "";
	position: absolute;
	background: #9EADC9;
	width:4.6em;
	height: 1.8em;
	border-radius: 0.9em;
	z-index: -1;
	top:3.2em;
	box-shadow: 0 0 0.5em rgba(0,0,0,0.25);
}
.garrison .hair1:before{
	left:-1em;
	-webkit-transform: rotate(-60deg);
	transform: rotate(-60deg);
}
.garrison .hair1:after {
	right: -1em;
	z-index: -2;
	-webkit-transform: rotate(60deg);
	transform: rotate(60deg);
}
.garrison .hair2:before, .garrison .hair2:after {
	content: "";
	position: absolute;
	background: #9EADC9;
	width:4.4em;
	height: 1em;
	border-radius: 0.5em;
	z-index: 2;
	top:3.7em;
}
.garrison .hair2:before {
	-webkit-transform: rotate(-60deg);
	transform: rotate(-60deg);
	left: -0.7em;
}
.garrison .hair2:after {
	right: -0.7em;
	-webkit-transform: rotate(60deg);
	transform: rotate(60deg);
}
.garrison .wrinkles {
	position: absolute;
	top: 2.5em;
	left: 6.7em;
	width: 2.3em;
	height: 0.2em;
	background: #000;
	-webkit-transform: skewY(5deg);
	transform: skewY(5deg);
}
.garrison .wrinkles:before {
	content: "";
	position: absolute;
	top: 1.2em;
	left: -1em;
	width: 4.2em;
	height: 0.2em;
	background: #000;
	-webkit-transform: skewY(-7deg);
	transform: skewY(-7deg);
}
.garrison .wrinkles:after {
	content: "";
	position: absolute;
	top: 2.4em;
	left: -2.7em;
	width: 7.6em;
	height: 0.2em;
	background: #000;
	-webkit-transform: skewY(-6deg);
	transform: skewY(-6deg);
}
/* BUTTERS
-------------------------------------------------*/
.butters .head {
	border-radius: 50%;
	position: absolute;
	top: 3em;
	left: 2.3em;
	width: 15.4em;
	height: 15.4em;
	background: #F8D5B1;
	box-shadow: 0 0.2em 0.3em rgba(0, 0, 0, 0.25);
	box-shadow: 0px 0px 1em rgba(0, 0, 0, 0.5);
}
.butters .hair, .butters .hair2 {
	width: 0; 
	height: 0;
	position: absolute;
}
.butters .hair{ 
	top: 0.2em;
	left: 0em;
	border-top: 1.5em solid transparent;
	border-right: 7em solid #F2F45A;
	border-bottom: 1em solid transparent;
	-webkit-transform: rotate(-20deg);
	transform: rotate(-20deg);
}
.butters .hair2{
    top: -0.1em;
    left: 7.5em;
    border-top: 1.5em solid transparent;
    border-left: 7em solid #F2F45A;
    border-bottom: 1em solid transparent;
    -webkit-transform: rotate(13deg);
    transform: rotate(13deg);
}
.butters .hair:before, .butters .hair:after, .butters .hair2:before, .butters .hair2:after{ 
	content:"";
	width: 0; 
	height: 0;
	position: absolute;
}
.butters .hair:before{ 
	top: 0.2em;
	left: 1em;
	border-top: 1.5em solid transparent;
	border-right: 7em solid #F2F45A;
	border-bottom: 1em solid transparent;
	-webkit-transform: rotate(-30deg);
	transform: rotate(-30deg);
}
.butters .hair:after{ 
	top: -2.9em;
	left: 2.9em;
	border-top: 1em solid transparent;
	border-right: 5em solid #F2F45A;
	border-bottom: 1.5em solid transparent;
	-webkit-transform: rotate(46deg);
	transform: rotate(46deg);
}
.butters .hair2:before{ 
	top: 0.2em;
	left: -8em;
	border-top: 1.5em solid transparent;
	border-left: 7em solid #F2F45A;
	border-bottom: 1em solid transparent;
	-webkit-transform: rotate(25deg);
	transform: rotate(25deg);
}
.butters .hair2:after{ 
	top: -3em;
	left: -7.7em;
	border-top: 1em solid transparent;
	border-left: 5em solid #F2F45A;
	border-bottom: 1.5em solid transparent;
	-webkit-transform: rotate(-41deg);
	transform: rotate(-41deg);
}
/* SERVIETSKY
-------------------------------------------------*/
.servietsky .body {
	position: relative;
	top: 2em;
	left: 4.7em;
	width: 10.6em;
	height: 16.5em;
	background: #8B96BB;
	box-shadow: 0px 0px 1em rgba(0, 0, 0, 0.5); 
	border-radius: 2em 0 0 0;

background-size: 30px 30px;
background-position: 0px 0px, 15px 45px;
background-color: #8B96BB;
background-image: radial-gradient(rgb(93, 100, 134) 5%, transparent 16%), radial-gradient(rgb(93, 100, 134) 5%, transparent 16%);

}
.servietsky .topshadow {
	position: absolute;
	top: 2em;
	left: 15.2em;
	width: 2.4em;
	height: 2.8em;
	background: none;
	border-radius: 0 2em 0 0;
	box-shadow: 0px 0px 1em rgba(0, 0, 0, 0.5); 
}
.servietsky .body:before { 
	content: "";
	position: absolute;
	top: 0em;
	left: 2.3em;
	width: 10.6em;
	height: 2.8em;
	background: #8B96BB;
	border-radius: 2em 2em 0 0;
background-image: radial-gradient(rgb(93, 100, 134) 5%, transparent 16%), radial-gradient(rgb(93, 100, 134) 5%, transparent 16%);
background-position: 7px 0, 22px 45px;
background-size: 30px 30px;
}
.servietsky .body:after { 
	content: "";
	position: absolute;
	top: 0.9em;
	left: 10.6em;
	width: 2em;
	height: 1.9em;
	background: #767C97;
	background: #5D6486;
	border-radius: 4.7em 5.9em 0px 0px;
}
.servietsky .bottom { 
	position: absolute;
	top: 15.7em;
	left: 0px;
	width: 10.6em;
	height: 1.5em;
	background: #8B96BB;
	border-radius: 0px 0px 50% 50%;
background-image: radial-gradient(rgb(93, 100, 134) 5%, transparent 16%), radial-gradient(rgb(93, 100, 134) 5%, transparent 16%);
background-position: 0px -6px, 15px 41px;
background-size: 30px 30px;
}
.servietsky .stripes {
	position: absolute;
	top: 2em;
	left: 0em;
	width: 10.6em;
	height: 16.5em;
	overflow: hidden;
}
.servietsky .stripes:before {
	content: "";
	position: absolute;
	top: 0em;
	left: -9.3em;
	width: 28.8em;
	height: 13em;
	border-radius: 50%;
	background: none;
	border: 3px solid #FFF;
}
.servietsky .stripes:after {
	content: "";
	position: absolute;
	top: 0.9em;
	left: -7.1em;
	width: 24.3em;
	height: 11.1em;
	border-radius: 50%;
	background: none;
	border: 3px solid #FFF;
}
/* PLAY BUTTON 
-------------------------------------------------*/
.playtoggle {
	position: absolute;
	z-index: 5;
	width:8em;
	height:8em;
	top:7.5em;
	left:6em; 
	background: #FFF;
	border: 0.5em solid rgba(0,0,0,0.4);
	border: none;
	border-radius: 50%;
	cursor: pointer;
}
.playtoggle:before { 
	content: "";
	position: absolute;
	z-index: 5;
	top: 0.5em;
	left: 0.5em;
	width: 7em;
	height: 7em;
	border-radius: 50%;
	background: white;
	box-shadow: 0px 0px 0.5em rgba(0, 0, 0, 0.6) inset;
}
.playtoggle:after { 
	content:"";
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
	width: 0; 
	height: 0;
	position: absolute;
	z-index: 5;
	top:2em;
	left:2.8em; 
	border-top: 2em solid transparent; 
	border-left: 3.5em solid rgba(78, 195, 19, 1);
	border-bottom: 2em solid transparent; 
}
.cartman .playtoggle:after { border-left: 3.5em solid rgba(0, 187, 195, 1); }
.stan .playtoggle:after { border-left: 3.5em solid #406FAD; }
.garrison .playtoggle:after { border-left: 3.5em solid #9EADC9; }
.butters .playtoggle:after { border-left: 3.5em solid #FFD400; }
.kenny .playtoggle:after { border-left: 3.5em solid #FF6200; }
.servietsky .playtoggle:after { border-left: 3.5em solid #8B96BB; }

.playtoggle.playing:after {
	content:"";
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
	position: absolute;
	z-index: 5;
	top:2em;
	left:2.2em; 
	width: 1.2em;
	height: 4em;
	border-style: solid;
	border-color: rgba(78, 195, 19, 1);
	border-width: 0 1.2em;
	background: transparent none repeat scroll 0% 0%;
}
.cartman .playtoggle.playing:after { border-color: rgba(0, 187, 195, 1); }
.stan .playtoggle.playing:after { border-color: #406FAD; }
.garrison .playtoggle.playing:after { border-color: #9EADC9; }
.butters .playtoggle.playing:after { border-color: #FFD400; }
.kenny .playtoggle.playing:after { border-color: #FF6200; }
.servietsky .playtoggle.playing:after { border-color: #8B96BB; }



/* PROGRESS ANIMATION
-------------------------------------------------*/
.playtoggle .progress {
	position: absolute;
	top: 0em;
	left: 0em;
	width: 8em;
	height: 8em;
	border-radius: 50%;
	color: #CCC;
	background: #CCC linear-gradient(to right, white 50%, #CCC 0px);
}
.playtoggle .progress:before { 
	content: "";
	display: block;
	height: 100%;
	border-radius: 0px 100% 100% 0px / 50%;
	background: #FFF;
	margin-left: 50%;
	transform-origin: left center 0px;
}
.playtoggle.playing .progress:before { 
	animation: spin 1.5s linear 2, bg 3s step-end ;
	animation-delay: 0;
/*	animation-play-state: paused;*/
}
#stan1 .playtoggle.playing .progress:before, #stan2 .playtoggle.playing .progress:before, #kenny .playtoggle.playing .progress:before, 
#servietsky1 .playtoggle.playing .progress:before, #kyle2 .playtoggle.playing .progress:before { animation: spin 0.9s linear 2, bg 1.8s step-end ; }
#kyle1 .playtoggle.playing .progress:before, #cartman1 .playtoggle.playing .progress:before { animation: spin 1.5s linear 2, bg 3s step-end ;}
#cartman2 .playtoggle.playing .progress:before { animation: spin 2s linear 2, bg 4s step-end ; }
#garrison1 .playtoggle.playing .progress:before { animation: spin 4s linear 2, bg 8s step-end ; }
#butters1 .playtoggle.playing .progress:before { animation: spin 2.8s linear 2, bg 5.6s step-end ; }
#garrison2 .playtoggle.playing .progress:before { animation: spin 2.4s linear 2, bg 4.8s step-end ; }
#butters2 .playtoggle.playing .progress:before { animation: spin 3s linear 2, bg 6s step-end ; }
#servietsky2 .playtoggle.playing .progress:before { animation: spin 0.7s linear 2, bg 1.4s step-end ; }

/* KEYFRAMES 
-------------------------------------------------*/
@keyframes spin {
  to {
	transform: rotate(0.5turn);
  }
}
@keyframes bg {
  50% {
    background: currentColor;
  }
}
            
          
!
            
              /*   !!!! not working !!!!   */
/*
jQuery(document).ready(function() {
  var playing = false;

	jQuery('.player').each(function(){	
		var container = jQuery(this);
		
		var audio = container.find('audio').get(0);

		container.find('.playtoggle').click(function() {
			if (audio.paused) { audio.play();   } 
			else { audio.pause(); }
		});
		
		container.find('.stoptoggle').click(function() {
			if (audio.play) {   audio.pause();  } 
			audio.currentTime = 0;
		});
		
		jQuery(audio).bind('play',function(){
			container.find('.playtoggle').addClass('playing');
		});
		
		jQuery(audio).bind('pause ended', function() {
			container.find('.playtoggle').removeClass('playing');
		});
		
	});
});
*/



            
          
!
999px
Loading ..................

Console