Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <div class="css_lab">
	<input type="radio" id="stop"name="action" checked="checked" />
	<input type="radio" id="run" name="action" />
	<input type="radio" id="walk"name="action" />

	<input type="radio" id="type1" name="color" />
	<input type="radio" id="type2" name="color" />
	<input type="radio" id="type3" name="color"checked="checked" />

	<input type="radio" id="slow" name="speed" />
	<input type="radio" id="normal" name="speed" checked="checked" />
	<input type="radio" id="fast" name="speed" />

	<label class="run" for="run">RUN</label>
	<label class="walk" for="walk">WALK</label>

	<div class="woman">
		<label for="stop"></label>
		<label for="run"></label>
		<div class="head">
			<p></p><p></p><p></p>
			<p></p><p></p><p></p>
		</div>
		<div class="body">
			<p></p><p></p><p></p>
		</div>
		<div class="r_arm">
			<p></p><p><span></span></p>
		</div>
		<div class="l_arm">
			<p></p><p><span></span></p>
		</div>
		<div class="r_foot">
			<p></p><p><span><strong></strong><em></em></span></p>
		</div>
		<div class="l_foot">
			<p></p><p><span><strong></strong><em></em></span></p>
		</div>
	</div>

	<div class="road">
		<p></p><p></p><p></p>
		<ul>
			<li><label for="type1">1</label></li>
			<li><label for="type2">2</label></li>
			<li><label for="type3">3</label></li>
			<li class="speed">
				<label for="slow">1</label>
				<label for="normal">2</label>
				<label for="fast">3</label>
			</li>
		</ul>
	</div>
</div>
!

CSS 

              
                @import url('https://fonts.googleapis.com/css?family=Share+Tech+Mono');
html,
body{
	width:100%;
	height:100%;
	overflow:hidden;
}
*{
	margin:0;
	padding:0;
}
.css_lab{
	width:100%;
	height:100%;
	overflow:hidden;
	background:#eee;
	-webkit-box-shadow:0 0 100px 0px rgba(0,0,0,0.2) inset;
        box-shadow:0 0 100px 0px rgba(0,0,0,0.2) inset;
}
.css_lab *,
.css_lab *:before,
.css_lab *:after{
	display:block;
	content:"";
	position:absolute;
	-webkit-transition: all .3s linear;
	-o-transition: all .3s linear;
	transition: all .3s linear;
}
.css_lab input{
	display:none;
}
label{
	font-family: 'Share Tech Mono', monospace;
}
.run,.walk{
	display:block;
	text-align:center;
	width:80px;
	height:80px;
	font-size:13pt;
	line-height:80px;
	top:50%;
	left:50%;
	margin-top:-250px;
	margin-left:-240px;
	cursor:pointer;
	background:rgba(250,250,250,0.5);
	-webkit-box-shadow:0 0 10px rgba(0,0,50,0.1) inset;
        box-shadow:0 0 10px rgba(0,0,50,0.1) inset;
	border:2px solid #333;
	z-index:10;
	border-radius:50%;
}
.run:hover,.walk:hover{
	background:rgba(255,255,255,0.9);
}
.run{
	margin-left:-240px;
}
.walk{
	margin-left:160px;
}
#run:checked~.run,
#walk:checked~.walk,
#type1:checked~.road label[for=type1],
#type2:checked~.road label[for=type2],
#type3:checked~.road label[for=type3]{
	color:#fff;
	-webkit-box-shadow:0 0 10px 80px rgba(60,60,60,1) inset;
        box-shadow:0 0 10px 80px rgba(60,60,60,1) inset;
}
#slow:checked~.woman,
#slow:checked~.road{
	--i:5s;
}
#normal:checked~.woman,
#normal:checked~.road{
	--i:.8s;
}

#fast:checked~.woman,
#fast:checked~.road{
	--i:.5s;
}
#type1:checked~.woman{
	--bace:#eca;
	--hair:#633;
	--wear:#e47;
	--pants:#333;
	--shoes:#af6;
	--laces:#333;
}
#type2:checked~.woman{
	--bace:#fdc;
	--hair:#a96;
	--wear:#acf;
	--pants:#bf8;
	--shoes:#eee;
	--laces:#af6;
}
#type3:checked~.woman{
	--bace:#333;
	--hair:#333;
	--wear:#b89;
	--pants:#a78;
	--shoes:#fff;
	--laces:#aaa;
}
.woman {
	width:300px;
	height:470px;
	position:absolute;
	top:50%;
	left:50%;
	margin:-200px -150px;
	z-index:1;
}
.woman label{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	text-indent:-9999px;
	z-index:10;
	margin:0;
	cursor:pointer;
	border:none;
}
input:checked~.woman label{
	z-index:0;
}
#run:checked~.woman label[for=stop],
#walk:checked~.woman label[for=stop],
#stop:checked~.woman label[for=run]{
	z-index:10;
}
.head{
	width:60px;
	height:70px;
	background:#333;
	background:var(--bace);
	border-radius:55% 45% 80% 20%/30% 40% 60% 50%;
	top:5px;
	left:50%;
	margin-left:-30px;
}
.head p:nth-child(1){
	width:17px;
	height:35px;
	top:8px;
	left:-1px;
	background:#333;
	background:var(--bace);
	border-radius:70% 0 0 20%/50%;
	-webkit-transform:rotate(4deg);
	    -ms-transform:rotate(4deg);
	        transform:rotate(4deg);
}
.head p:nth-child(1):before{
	width:10px;
	height:23px;
	background:#333;
	background:var(--bace);
	border-radius:0 0 2px 4px/0 0 2px 2px;
	top:20px;
	left:0px;
	-webkit-transform:rotate(21deg) skewX(-10deg);
	    -ms-transform:rotate(21deg) skewX(-10deg);
	        transform:rotate(21deg) skewX(-10deg);
}
#type3:checked~.woman .head p:nth-child(1):after{
	width:6px;
	height:6px;
	border-radius:0 0 0 50%;
	border-bottom:0.5px solid #333;
	top:20px;
	left:-3px;
	-webkit-transform:rotate(10deg);
	    -ms-transform:rotate(10deg);
	        transform:rotate(10deg);
}
.head p:nth-child(2),
.head p:nth-child(2):before{
	width:10px;
	height:11px;
	background:#333;
	background:var(--bace);
	border-radius:0 0 2px 4px/0 0 2px 2px;
	top:46px;
	left:-1px;
	-webkit-transform:rotate(20deg) skewX(-10deg);
	    -ms-transform:rotate(20deg) skewX(-10deg);
	        transform:rotate(20deg) skewX(-10deg);
}
.head p:nth-child(2):before{
	top:5px;
	left:6px;
	-webkit-transform:rotate(6deg) skewX(-10deg);
	    -ms-transform:rotate(6deg) skewX(-10deg);
	        transform:rotate(6deg) skewX(-10deg);
}
.head p:nth-child(3){
	width:10px;
	height:10px;
	border-radius:30% 0 0 50%;
	background:#333;
	background:var(--bace);
	top:60px;
	left:3px;
	-webkit-transform:rotate(4deg) skewX(-10deg);
	    -ms-transform:rotate(4deg) skewX(-10deg);
	        transform:rotate(4deg) skewX(-10deg);
}
.head p:nth-child(3):before{
	width:20px;
	height:50px;
	top:-27px;
	left:40px;
	border-radius:50%;
	-webkit-box-shadow:-20px 2px 0 4px #333;
        box-shadow:-20px 2px 0 4px #333;
	-webkit-box-shadow:-20px 2px 0 4px var(--bace);
        box-shadow:-20px 2px 0 4px var(--bace);
	-webkit-transform:rotate(-30deg);
	    -ms-transform:rotate(-30deg);
	        transform:rotate(-30deg);
}
#type2:checked~.woman .head p:nth-child(3):after{
	width:34px;
	height:20px;
	top:8px;
	left:17px;
	background:var(--wear);
	-webkit-transform:rotate(-21deg);
	    -ms-transform:rotate(-21deg);
	        transform:rotate(-21deg);
	-webkit-box-shadow:0 2px #333 inset;
        box-shadow:0 2px #333 inset;
}
#run:checked~#type2:checked~.woman .head p:nth-child(3):after{
	width:35px;
	left:20px;
	-webkit-transform:rotate(-30deg);
	    -ms-transform:rotate(-30deg);
	        transform:rotate(-30deg);
}
.head p:nth-child(4){
	width:30px;
	height:35px;
	border-radius:20% 70% 30% 0;
	top:25px;
	left:50%;
	margin-left:10px;
	-webkit-transform-origin:15px -6px;
	    -ms-transform-origin:15px -6px;
	        transform-origin:15px -6px;
	-webkit-box-shadow:15px -5px #333,20px -4px #333;
        box-shadow:15px -5px #333,20px -4px #333;
	-webkit-box-shadow:15px -5px var(--hair),20px -4px var(--hair);
        box-shadow:15px -5px var(--hair),20px -4px var(--hair);
}
.head p:nth-child(4):before{
	width:30px;
	height:30px;
	border-radius:0 0 20% 70%;
	top:25px;
	left:45px;
	-webkit-transform:rotate(17deg);
	    -ms-transform:rotate(17deg);
	        transform:rotate(17deg);
	-webkit-box-shadow:-15px 1px 0 -2px #333,-22px 0px 0 -2px #333;
        box-shadow:-15px 1px 0 -2px #333,-22px 0px 0 -2px #333;
	-webkit-box-shadow:-15px 1px 0 -2px var(--hair),-22px 0px 0 -2px var(--hair);
        box-shadow:-15px 1px 0 -2px var(--hair),-22px 0px 0 -2px var(--hair);
}
.head p:nth-child(4):after{
	width:5px;
	height:11px;
	border-radius:70%;
	top:-6px;
	left:17px;
	-webkit-transform:rotate(-5deg);
	    -ms-transform:rotate(-5deg);
	        transform:rotate(-5deg);
	background:#333;
	background:var(--pants);
}
.head p:nth-child(5){
	width:60px;
	height:70px;
	top:0;
	left:0;
	overflow:hidden;
	-webkit-transform:translate3d(0,0,0);
	        transform:translate3d(0,0,0);
	-webkit-box-shadow:-25px 23px 0 -10px #333 inset;
        box-shadow:-25px 23px 0 -10px #333 inset;
	-webkit-box-shadow:-25px 23px 0 -10px var(--hair) inset;
        box-shadow:-25px 23px 0 -10px var(--hair) inset;
	border-radius:55% 45% 80% 20%/30% 40% 60% 50%;
}
.head p:nth-child(5):before{
	width:25px;
	height:40px;
	top:35px;
	left:20px;
	border-radius:55% 45% 0 50%;
}
#type1:checked~.woman .head p:nth-child(5):before{
	-webkit-box-shadow:
		5px -5px 0 -2px var(--hair),
		-33px -9px 0 12px var(--bace),
		-10px -45px 0 10px var(--hair)
	;
        box-shadow:
		5px -5px 0 -2px var(--hair),
		-33px -9px 0 12px var(--bace),
		-10px -45px 0 10px var(--hair)
	;
}
#type2:checked~.woman .head p:nth-child(5):before{
	-webkit-box-shadow:
		5px -5px 0 -2px var(--hair),
		-5px -45px 0 10px var(--hair)
	;
        box-shadow:
		5px -5px 0 -2px var(--hair),
		-5px -45px 0 10px var(--hair)
	;
}
#type1:checked~.woman .head p:nth-child(6){
	width:50px;
	height:15px;
	background:-webkit-gradient(linear,left top, left bottom,from(#eee),to(#bbb));
	background:-webkit-linear-gradient(top,#eee 0%,#bbb 100%);
	background:-o-linear-gradient(top,#eee 0%,#bbb 100%);
	background:linear-gradient(to bottom,#eee 0%,#bbb 100%);
	border-radius:0 60%/0 100%;
	top:20px;
	left:-25px;
}
#type1:checked~.woman .head p:nth-child(6):before{
	width:65px;
	height:12px;
	top:3px;
	left:21px;
	background:-webkit-linear-gradient(45deg,#eee 0%,#bbb 100%);
	background:-o-linear-gradient(45deg,#eee 0%,#bbb 100%);
	background:linear-gradient(45deg,#eee 0%,#bbb 100%);
	border-radius:5% 2% 0 0/100% 100% 0 0;
	-webkit-transform:rotate(28deg);
	    -ms-transform:rotate(28deg);
	        transform:rotate(28deg);
}
#type2:checked~.woman .head p:nth-child(6){
	width:28px;
	height:39px;
	-webkit-box-shadow:-14px -1px 0 -2px var(--hair);
        box-shadow:-14px -1px 0 -2px var(--hair);
	border-radius:60% 0 0 100%/30% 0 0 70%;
	top:5px;
	left:5px;
	-webkit-transform:rotate(3deg);
	    -ms-transform:rotate(3deg);
	        transform:rotate(3deg);
}
.body{
	width:45px;
	height:100px;
	border-radius:50% 50% 80% 0/40% 50% 80% 0;
	top:80px;
	left:50%;
	margin-left:-20px;
	-webkit-transform:rotate(10deg);
	    -ms-transform:rotate(10deg);
	        transform:rotate(10deg);
	-webkit-box-shadow:-20px -100px 0 -20px #1ebbee inset;
        box-shadow:-20px -100px 0 -20px #1ebbee inset;
	-webkit-box-shadow:-20px -100px 0 -20px var(--wear) inset;
        box-shadow:-20px -100px 0 -20px var(--wear) inset;
	z-index:1;
}
.body p:nth-child(1){
	width:31px;
	height:60px;
	background:#1ebbee;
	background:var(--wear);
	border-radius:0 80% 80% 0/0 70% 30% 0;
	top:81px;
	left:26px;
	-webkit-transform:rotate(-10deg);
	    -ms-transform:rotate(-10deg);
	        transform:rotate(-10deg);
}

.body p:nth-child(1):before{
	width:25px;
	height:35px;
	background:#1ebbee;
	background:var(--wear);
	border-radius:0 0 2px 20px/0 0 2px 20px;
	top:-63px;
	left:-25px;
	-webkit-transform:rotate(40deg) skewX(-10deg);
	    -ms-transform:rotate(40deg) skewX(-10deg);
	        transform:rotate(40deg) skewX(-10deg);
}
#type2:checked~.woman .body p:nth-child(1):before{
	-webkit-box-shadow:5px -2px 3px -2px rgba(255,255,255,0.2) inset;
        box-shadow:5px -2px 3px -2px rgba(255,255,255,0.2) inset;
}

.body p:nth-child(1):after{
	width:35px;
	height:105px;
	background:#1ebbee;
	background:var(--wear);
	border-radius:50px 0 0 50px/90px 0 0 75px;
	top:-44px;
	left:-28px;
	-webkit-box-shadow:-24px -65px 0 -30px #3177BC inset;
        box-shadow:-24px -65px 0 -30px #3177BC inset;
	-webkit-box-shadow:-24px -65px 0 -30px var(--pants) inset;
        box-shadow:-24px -65px 0 -30px var(--pants) inset;
	-webkit-transform:rotate(-2deg);
	    -ms-transform:rotate(-2deg);
	        transform:rotate(-2deg);
}

.body p:nth-child(2){
	width:15px;
	height:15px;
	top:77px;
	right:0;
	overflow:hidden;
	-webkit-transform:rotate(-10deg) translate3d(0,0,0);
	        transform:rotate(-10deg) translate3d(0,0,0);
}

.body p:nth-child(2):before{
	width:26px;
	height:26px;
	border:10px solid #1ebbee;
	border:10px solid var(--wear);
	border-radius:50%;
	top:-18px;
	left:-1px;
}
.body p:nth-child(3){
	width:45px;
	height:100px;
	border-radius:50% 50% 80% 0/40% 50% 80% 0;
	top:0px;
	left:0;
	overflow:hidden;
	z-index:1;
	-webkit-transform:translate3d(0,0,0);
	        transform:translate3d(0,0,0);
}
#type2:checked~.woman .body p:nth-child(3){
	-webkit-box-shadow:
		-9px 15px 0 -2px var(--wear) inset,
		-10px 15px 0 -2px #333 inset
	;
        box-shadow:
		-9px 15px 0 -2px var(--wear) inset,
		-10px 15px 0 -2px #333 inset
	;
}
.woman .body p:nth-child(3):before{
	width:20px;
	height:30px;
	top:-8px;
	left:-10px;
	border-radius:50%;
	background:#333;
	background:var(--bace);
}
.woman .body p:nth-child(3):after{
	width:30px;
	height:35px;
	top:5px;
	left:10px;
	border-radius:50%;
	background:#333;
	background:var(--bace);
	-webkit-box-shadow:-1px 0 0 3px #1ebbee,
		-1px -10px 0 3px #333
	;
        box-shadow:-1px 0 0 3px #1ebbee,
		-1px -10px 0 3px #333
	;
	-webkit-box-shadow:-1px 0 0 3px var(--wear),
		-1px -10px 0 3px var(--bace)
	;
        box-shadow:-1px 0 0 3px var(--wear),
		-1px -10px 0 3px var(--bace)
	;
}
.woman .body:after{
	width:55px;
	height:62px;
	top:84px;
	left:2px;
	background:var(--wear);
	border-radius:50%/40% 55% 45% 60%;
	-webkit-transform:rotate(-23deg);
	    -ms-transform:rotate(-23deg);
	        transform:rotate(-23deg);
	-webkit-box-shadow:
		-6px -75px 0 -33px var(--pants) inset
	;
        box-shadow:
		-6px -75px 0 -33px var(--pants) inset
	;
}
#type2:checked~.woman .body p:nth-child(3):after{
	background:var(--wear);
	-webkit-box-shadow:none;
        box-shadow:none;
}

#type2:checked~.woman .body p:nth-child(3):before{
	background:none;
}
#type3:checked~.woman .body p:nth-child(3):after{
	background:var(--wear);
}
.woman .r_arm,
.woman .l_arm{
	width:100px;
	height:100px;
	top:90px;
	left:50%;
	margin-left:-55px;
	-webkit-transform-origin:45px 10px;
	    -ms-transform-origin:45px 10px;
	        transform-origin:45px 10px;
	-webkit-transform:rotate(0deg);
	    -ms-transform:rotate(0deg);
	        transform:rotate(0deg);
}
.woman .l_arm{
	margin-left:-40px;
	-webkit-transform:rotate(-50deg);
	    -ms-transform:rotate(-50deg);
	        transform:rotate(-50deg);
	z-index:3;
}
.woman .r_arm p:nth-child(1),
.woman .l_arm p:nth-child(1){
	width:23px;
	height:80px;
	background:#333;
	background:var(--bace);
	border-radius:40% 60% 60% 40%/40% 40% 60% 60%;
	top:0px;
	left:50%;
	margin-left:-10px;
}
#type2:checked~.woman .l_arm p:nth-child(1){
	-webkit-box-shadow:5px -2px 3px -2px rgba(255,255,255,0.2) inset;
        box-shadow:5px -2px 3px -2px rgba(255,255,255,0.2) inset;
}
.woman .r_arm p:nth-child(1):before,
.woman .l_arm p:nth-child(1):before{
	width:10px;
	height:25px;
	top:55px;
	left:0px;
	background:#333;
	background:var(--bace);
	border-radius:40%;
	-webkit-transform:rotate(15deg);
	    -ms-transform:rotate(15deg);
	        transform:rotate(15deg);
}
.woman .r_arm p:nth-child(2),
.woman .l_arm p:nth-child(2){
	width:16px;
	height:80px;
	background:#333;
	background:var(--bace);
	border-radius:50% 50% 80% 20%/40% 40% 60% 60%;
	top:70px;
	left:50%;
	margin-left:-8px;
	-webkit-transform-origin:8px 5px;
	    -ms-transform-origin:8px 5px;
	        transform-origin:8px 5px;
	-webkit-transform:rotate(0deg);
	    -ms-transform:rotate(0deg);
	        transform:rotate(0deg);
}
.woman .l_arm p:nth-child(2){
	-webkit-transform:rotate(90deg);
	    -ms-transform:rotate(90deg);
	        transform:rotate(90deg);
}
.woman .r_arm p:nth-child(2):before,
.woman .l_arm p:nth-child(2):before{
	width:10px;
	height:60%;
	background:#333;
	background:var(--bace);
	border-radius:50% 0 0 80%/30% 0 0 70%;
	-webkit-transform:rotate(5deg);
	    -ms-transform:rotate(5deg);
	        transform:rotate(5deg);
	top:5px;
	left:-3px;
}
.woman .r_arm p:nth-child(2):after,
.woman .l_arm p:nth-child(2):after{
	width:18px;
	height:20px;
	left:50%;
	margin-left:-15px;
	bottom:-10px;
	background:#333;
	background:var(--bace);
	border-radius:60% 40% 30% 30%/60% 50% 50% 30%;
	-webkit-transform:rotate(10deg);
	    -ms-transform:rotate(10deg);
	        transform:rotate(10deg);
}
#type2:checked~.woman .r_arm p:nth-child(1),
#type2:checked~.woman .l_arm p:nth-child(1),
#type2:checked~.woman .r_arm p:nth-child(1):before,
#type2:checked~.woman .l_arm p:nth-child(1):before,
#type2:checked~.woman .r_arm p:nth-child(2):before,
#type2:checked~.woman .l_arm p:nth-child(2):before,
#type2:checked~.woman .r_arm p:nth-child(2),
#type2:checked~.woman .l_arm p:nth-child(2){
	background:var(--wear);
}
#type3:checked~.woman .r_arm p:nth-child(1),
#type3:checked~.woman .l_arm p:nth-child(1){
	-webkit-box-shadow:0 35px 0 -15px var(--wear) inset;
        box-shadow:0 35px 0 -15px var(--wear) inset;
}
.woman .l_arm p:nth-child(2) span,
.woman .r_arm p:nth-child(2) span{
	width:15px;
	height:5px;
	border-radius:0 5px 0 5px;
	bottom:3px;
	left:-13px;
	background:#333;
	background:var(--bace);
	-webkit-transform:rotate(-50deg);
	    -ms-transform:rotate(-50deg);
	        transform:rotate(-50deg);
}

.r_arm p:nth-child(2) span:before,
.l_arm p:nth-child(2) span:before{
	width:5px;
	height:19px;
	border-radius:4px;
	top:0;
	left:-4px;
	background:#333;
	background:var(--bace);
	-webkit-transform:rotate(56deg) perspective(30px) rotateX(40deg) rotateX(-6deg);
	        transform:rotate(56deg) perspective(30px) rotateX(40deg) rotateX(-6deg);
	-webkit-box-shadow:
		5px 0 0 #333,
		10px -2px 0 #333,
		15px -2px 0 #333
	;
        box-shadow:
		5px 0 0 #333,
		10px -2px 0 #333,
		15px -2px 0 #333
	;
	-webkit-box-shadow:
		5px -1px 0 var(--bace),
		10px -2px 0 var(--bace),
		15px -2px 0 var(--bace)
	;
        box-shadow:
		5px -1px 0 var(--bace),
		10px -2px 0 var(--bace),
		15px -2px 0 var(--bace)
	;
}
.r_foot,
.l_foot{
	width:100px;
	height:300px;
	top:190px;
	left:50%;
	margin-left:-50px;
	-webkit-transform:rotate(15deg);
	    -ms-transform:rotate(15deg);
	        transform:rotate(15deg);
	-webkit-transform-origin:50px 20px;
	    -ms-transform-origin:50px 20px;
	        transform-origin:50px 20px;
}
.l_foot{
	margin-left:-30px;
	-webkit-transform:rotate(0deg);
	    -ms-transform:rotate(0deg);
	        transform:rotate(0deg);
	z-index:2;
}
.r_foot p:nth-child(1),
.l_foot p:nth-child(1){
	width:50px;
	height:150px;
	top:0;
	left:50%;
	margin-left:-25px;
	border-radius:30% 70% 30% 70%/40% 40% 60% 60%;
	background:#333;
}
.r_foot p:nth-child(1):before,
.l_foot p:nth-child(1):before{
	width:30px;
	height:100px;
	bottom:-8px;
	left:10px;
	border-radius:45% 40% 30% 65%/60% 40%;
	background:#333;
	-webkit-transform:rotate(-5deg);
	    -ms-transform:rotate(-5deg);
	        transform:rotate(-5deg);
}
#type2:checked~.woman .r_foot p:nth-child(1),
#type2:checked~.woman .l_foot p:nth-child(1),
#type2:checked~.woman .r_foot p:nth-child(1):before,
#type2:checked~.woman .l_foot p:nth-child(1):before{
	background:var(--bace);
}

.r_foot p:nth-child(1):after,
.l_foot p:nth-child(1):after{
	width:60px;
	height:70px;
	top:-5px;
	left:-5px;
	border-radius:30% 70% 50% 50%/30% 70% 5% 5%;
	background:#3177BC;
	background: var(--pants);
	-webkit-transform:rotate(5deg);
	    -ms-transform:rotate(5deg);
	        transform:rotate(5deg);
}
#type1:checked~.woman .r_foot p:nth-child(1):after{
	-webkit-box-shadow:
		0 -5px 0 -2px var(--pants) inset,
		0 -8px 0 -2px #fff inset
	;
        box-shadow:
		0 -5px 0 -2px var(--pants) inset,
		0 -8px 0 -2px #fff inset
	;
}
#type1:checked~.woman .l_foot p:nth-child(1):after{
	-webkit-box-shadow:
		0 -5px 0 -2px var(--pants) inset,
		0 -8px 0 -2px #fff inset,

		-10px -2px 0 -2px var(--pants) inset,
		-12px -2px 0 -2px #fff inset,
		-14px -2px 0 -2px var(--pants) inset,
		-16px -2px 0 -2px #fff inset,
		-18px -2px 0 -2px var(--pants) inset,
		-20px -2px 0 -2px #fff inset
	;
        box-shadow:
		0 -5px 0 -2px var(--pants) inset,
		0 -8px 0 -2px #fff inset,

		-10px -2px 0 -2px var(--pants) inset,
		-12px -2px 0 -2px #fff inset,
		-14px -2px 0 -2px var(--pants) inset,
		-16px -2px 0 -2px #fff inset,
		-18px -2px 0 -2px var(--pants) inset,
		-20px -2px 0 -2px #fff inset
	;
}
#type2:checked~.woman .r_foot:after,
#type2:checked~.woman .l_foot:after{
	width:10px;
	height:25px;
	top:125px;
	left:42px;
	border-radius:50%;
	-webkit-box-shadow:0 0 0 1px var(--bace) inset,
		0 0 5px 2px  var(--bace) inset,
		0 0 5px 20px rgba(255,255,255,0.3) inset
	;
        box-shadow:0 0 0 1px var(--bace) inset,
		0 0 5px 2px  var(--bace) inset,
		0 0 5px 20px rgba(255,255,255,0.3) inset
	;
	-webkit-transform:rotate(-20deg);
	    -ms-transform:rotate(-20deg);
	        transform:rotate(-20deg);
}
#type2:checked~.woman .r_foot p:nth-child(1):after,
#type2:checked~.woman .l_foot p:nth-child(1):after{
	height:60px;
}
#type2:checked~.woman .l_foot p:nth-child(1):after{
	-webkit-box-shadow:
		-24px 2px 0 -15px var(--pants) inset,
		-26px 2px 0 -15px #333 inset
	;
        box-shadow:
		-24px 2px 0 -15px var(--pants) inset,
		-26px 2px 0 -15px #333 inset
	;
}

.r_foot p:nth-child(2),
.l_foot p:nth-child(2){
	width:30px;
	height:110px;
	top:125px;
	left:50%;
	margin-left:-3px;
	border-radius:50% 50% 70% 30%/30% 30% 70% 70%;
	background:#333;
	background:var(--bace);
	-webkit-transform-origin:20px 20px;
	    -ms-transform-origin:20px 20px;
	        transform-origin:20px 20px;
	-webkit-transform:rotate(-15deg);
	    -ms-transform:rotate(-15deg);
	        transform:rotate(-15deg);
}
#type1:checked~.woman .r_foot p:nth-child(2),
#type1:checked~.woman .l_foot p:nth-child(2){
	background:#333;
	-webkit-box-shadow:0 -140px 0 -100px var(--bace) inset;
        box-shadow:0 -140px 0 -100px var(--bace) inset;
}
.l_foot p:nth-child(2){
	-webkit-transform:rotate(-5deg);
	    -ms-transform:rotate(-5deg);
	        transform:rotate(-5deg);
}
.r_foot p:nth-child(2):before,
.l_foot p:nth-child(2):before{
	width:18px;
	height:55px;
	top:90px;
	left:3px;
	background:#333;
	background:var(--bace);
	border-radius:10% 10% 50% 50%/5%;
	-webkit-box-shadow:0 -20px #eee inset;
        box-shadow:0 -20px #eee inset;
}

.r_foot p:nth-child(2) span,
.l_foot p:nth-child(2) span{
	width:60px;
	height:35px;
	top:128px;
	left:-32px;
	border-radius:85% 15% 60% 40%/70% 50% 30% 20%;
	-webkit-transform-origin:33px 5px;
	    -ms-transform-origin:33px 5px;
	        transform-origin:33px 5px;
	overflow:hidden;
	-webkit-transform:translate3d(0,0,0);
	        transform:translate3d(0,0,0);
}
.r_foot p:nth-child(2) span:before,
.l_foot p:nth-child(2) span:before{
	width:19px;
	height:21px;
	top:-12px;
	right:7px;
	border-radius:40% 60%/40%;
	-webkit-box-shadow:3px 11px 0 5px #333;
        box-shadow:3px 11px 0 5px #333;
	-webkit-box-shadow:3px 11px 0 5px var(--shoes);
        box-shadow:3px 11px 0 5px var(--shoes);
}

#run:checked~.woman .r_foot p:nth-child(2) span:before,
#run:checked~.woman .l_foot p:nth-child(2) span:before{
	width:24px;
	right:2px;
}
#type2:checked~.woman .r_foot p:nth-child(2):before,
#type2:checked~.woman .l_foot p:nth-child(2):before{
	-webkit-box-shadow:none;
        box-shadow:none;
}
.l_foot p:nth-child(2) span:before{
	height:18px;
}
.r_foot p:nth-child(2) span:after,
.l_foot p:nth-child(2) span:after{
	width:33px;
	height:14px;
	top:-3px;
	left:2px;
	-webkit-transform:rotate(-34deg);
	    -ms-transform:rotate(-34deg);
	        transform:rotate(-34deg);
	border-radius:0 20% 0 70%/0 60% 0 70%;
	-webkit-box-shadow:
		-3px 4px #333,
		-2px 10px #333
	;
        box-shadow:
		-3px 4px #333,
		-2px 10px #333
	;
	-webkit-box-shadow:
		0 4px 0 -3px var(--shoes),
		-2px 10px 0 -1px var(--shoes)
	;
        box-shadow:
		0 4px 0 -3px var(--shoes),
		-2px 10px 0 -1px var(--shoes)
	;
}


.r_foot p:nth-child(2) span strong,
.l_foot p:nth-child(2) span strong{
	width:35px;
	height:15px;
	bottom:8px;
	left:3px;
	border-radius:50%/30% 0 40% 60%;
	z-index:1;
	background:#333;
	-webkit-box-shadow:
		15px -2px #333,
		15px 1px  #eee,
		1px 3px #eee;
        box-shadow:
		15px -2px #333,
		15px 1px  #eee,
		1px 3px #eee;
	background: var(--shoes);
	-webkit-box-shadow:
		21px -2px 0 1px  var(--shoes),
		21px 1px 0 1px  #eee,
		1px 3px #eee;
        box-shadow:
		21px -2px 0 1px  var(--shoes),
		21px 1px 0 1px  #eee,
		1px 3px #eee;
	-webkit-transform:rotate(0deg);
	    -ms-transform:rotate(0deg);
	        transform:rotate(0deg);
}
.l_foot p:nth-child(2) span strong{
	width:40px;
	-webkit-box-shadow:
		21px -3px var(--shoes),
		21px 2px  #eee,
		1px 3px #eee;
        box-shadow:
		21px -3px var(--shoes),
		21px 2px  #eee,
		1px 3px #eee;
}


.r_foot p:nth-child(2) span strong:before,
.l_foot p:nth-child(2) span strong:before{
	width:2px;
	height:4px;
	background:#333;
	background:var(--laces);
	top:-1px;
	left:12px;
	z-index:2;
	border-radius:2px;
	-webkit-transform:rotate(-40deg);
	    -ms-transform:rotate(-40deg);
	        transform:rotate(-40deg);
	-webkit-box-shadow:
		 4px 1px #333,
		 8px 2px #333,
		12px 3px #333,
		16px 4px #333
	;
        box-shadow:
		 4px 1px #333,
		 8px 2px #333,
		12px 3px #333,
		16px 4px #333
	;
	-webkit-box-shadow:
		 4px 1px var(--laces),
		 8px 2px var(--laces),
		12px 3px var(--laces),
		16px 4px var(--laces)
	;
        box-shadow:
		 4px 1px var(--laces),
		 8px 2px var(--laces),
		12px 3px var(--laces),
		16px 4px var(--laces)
	;
}

#type1:checked~.woman .r_foot p:nth-child(2) span strong,
#type1:checked~.woman .l_foot p:nth-child(2) span strong{
	-webkit-box-shadow:
		2px 0 0 -1px #333 inset,
		5px -3px #ef9 inset,
		2px 4px 0 -3px #df3,
		20px -4px 0 -1px var(--shoes),
		22px -3px 0 -1px var(--shoes),
		21px -2px 0 1px #df3,
		21px 1px 0 1px #eee,
		1px 3px #eee,
		1px 3.5px #333
	;
        box-shadow:
		2px 0 0 -1px #333 inset,
		5px -3px #ef9 inset,
		2px 4px 0 -3px #df3,
		20px -4px 0 -1px var(--shoes),
		22px -3px 0 -1px var(--shoes),
		21px -2px 0 1px #df3,
		21px 1px 0 1px #eee,
		1px 3px #eee,
		1px 3.5px #333
	;
}
#type1:checked~.woman .r_foot p:nth-child(2) em,
#type1:checked~.woman .l_foot p:nth-child(2) em{
	width:40px;
	height:13px;
	top:10px;
	left:25px;
	z-index:2;
	border-radius:80% 20%/100% 0;
	-webkit-transform: rotate(-5deg);
	    -ms-transform: rotate(-5deg);
	        transform: rotate(-5deg);
	-webkit-box-shadow:
		10px 3px 0 -1px #333 inset
	;
        box-shadow:
		10px 3px 0 -1px #333 inset
	;
}
#type2:checked~.woman .r_foot p:nth-child(2) span:before,
#type2:checked~.woman .l_foot p:nth-child(2) span:before{
	-webkit-box-shadow:
		0 -2px #fff inset,
		3px 11px 0 5px var(--shoes);
        box-shadow:
		0 -2px #fff inset,
		3px 11px 0 5px var(--shoes);
}

#type2:checked~.woman .r_foot p:nth-child(2) span strong,
#type2:checked~.woman .l_foot p:nth-child(2) span strong{
	-webkit-box-shadow:
		5px -1px 0 -1px #333 inset,
		-4px -10px 0 -5px #999 inset,
		-8px -15px 0 -5px #ccc inset,
		-12px -20px 0 -5px #ddd inset,
		24px -8px 0 -3px #ccc,
		25px -2px 0 -2px #999,
		10px 5px 0 -5px  #333,
		20px 2px 0 -5px  #333,
		18px 4px 0 -5px #af6,
		25px 1px 0 1px  #333,
		1px 3px #444
	;
        box-shadow:
		5px -1px 0 -1px #333 inset,
		-4px -10px 0 -5px #999 inset,
		-8px -15px 0 -5px #ccc inset,
		-12px -20px 0 -5px #ddd inset,
		24px -8px 0 -3px #ccc,
		25px -2px 0 -2px #999,
		10px 5px 0 -5px  #333,
		20px 2px 0 -5px  #333,
		18px 4px 0 -5px #af6,
		25px 1px 0 1px  #333,
		1px 3px #444
	;
}
#type2:checked~.woman .r_foot p:nth-child(2) span strong:after,
#type2:checked~.woman .l_foot p:nth-child(2) span strong:after{
	width:40px;
	height:5px;
	border-radius:50%;
	background:#eee;
	-webkit-transform: rotate(-13deg);
	    -ms-transform: rotate(-13deg);
	        transform: rotate(-13deg);
	top:-5px;
	left:10px;
	-webkit-box-shadow:1px 7px #ccc,5px 14px 0 -1px #999;
        box-shadow:1px 7px #ccc,5px 14px 0 -1px #999;
}
#type2:checked~.woman .r_foot p:nth-child(2) em,
#type2:checked~.woman .l_foot p:nth-child(2) em{
	width:13px;
	height:6px;
	border-radius: 60% 0 0 60%/60% 0 0 40%;
	top:5px;
	right:0px;
	z-index:2;
	overflow: hidden;
	-webkit-transform: rotate(-35deg) translate3d(0,0,0);
	        transform: rotate(-35deg) translate3d(0,0,0);
}
#type2:checked~.woman .r_foot p:nth-child(2) em:before,
#type2:checked~.woman .l_foot p:nth-child(2) em:before{
	width:10px;
	height:6px;
	left:2px;
	top:-1px;
	border-radius: 60% 0 0 60%/60% 0 0 40%;
	-webkit-box-shadow:-2px 2px #af6;
        box-shadow:-2px 2px #af6;
	-webkit-transform: rotate(6deg);
	    -ms-transform: rotate(6deg);
	        transform: rotate(6deg);
}

#type3:checked~.woman .r_foot p:nth-child(2) span strong,
#type3:checked~.woman .l_foot p:nth-child(2) span strong{
	-webkit-box-shadow:
		5px -1px 0 -1px #333 inset,
		7px -3px 10px -1px rgba(0,0,0,0.2) inset,
		22px -3px 0 -2px #fff,
		20px 1px 0 1px  #333,
		1px 3px #333
	;
        box-shadow:
		5px -1px 0 -1px #333 inset,
		7px -3px 10px -1px rgba(0,0,0,0.2) inset,
		22px -3px 0 -2px #fff,
		20px 1px 0 1px  #333,
		1px 3px #333
	;
}
#type3:checked~.woman .r_foot p:nth-child(2) span:before,
#type3:checked~.woman .l_foot p:nth-child(2) span:before{
	-webkit-box-shadow:
		0 -2px #333 inset,
		3px 11px 0 5px #fff;
        box-shadow:
		0 -2px #333 inset,
		3px 11px 0 5px #fff;
}
#type3:checked~.woman .r_foot p:nth-child(2) em,
#type3:checked~.woman .l_foot p:nth-child(2) em{
	width:45px;
	height:25px;
	top:0px;
	left:15px;
	border-radius:0 0 100% 60%;
	-webkit-box-shadow:15px 1px #333;
        box-shadow:15px 1px #333;
	z-index:2;
	-webkit-transform: rotate(-5deg);
	    -ms-transform: rotate(-5deg);
	        transform: rotate(-5deg);
}

#type3:checked~.woman .r_foot p:nth-child(2) em:before,
#type3:checked~.woman .l_foot p:nth-child(2) em:before{
	width:4px;
	height:14px;
	top:12px;
	left:14px;
	background:#e33;
	z-index:2;
	-webkit-transform: rotate(-48deg) skewY(30deg);
	    -ms-transform: rotate(-48deg) skewY(30deg);
	        transform: rotate(-48deg) skewY(30deg);
	-webkit-box-shadow:
		6px 0px #337;
        box-shadow:
		6px 0px #337
}
#stop:checked~.woman{
	-webkit-transform:rotate(0deg);
	    -ms-transform:rotate(0deg);
	        transform:rotate(0deg);
	margin-top:-250px;
}
#stop:checked~.woman .head{
	-webkit-transform:rotate(0deg);
	    -ms-transform:rotate(0deg);
	        transform:rotate(0deg);
	-webkit-animation:break0 15s 2s infinite;
	        animation:break0 15s 2s infinite;
}
@-webkit-keyframes break0{
	0%,40%{
		-webkit-transform:rotate(0deg) translate3d(0,0,0);
	}5%,30%{
		-webkit-transform:rotate(-12deg) translate3d(-10px,2px,0);
	}
}
@keyframes break0{
	0%,40%{
		transform:rotate(0deg) translate3d(0,0,0);
	}5%,30%{
		transform:rotate(-12deg) translate3d(-10px,2px,0);
	}
}
#stop:checked~.woman .r_arm{
	-webkit-animation:break1 15s 2s infinite;
	        animation:break1 15s 2s infinite;
	-webkit-transform:rotate(0deg);
	    -ms-transform:rotate(0deg);
	        transform:rotate(0deg);
}
@-webkit-keyframes break1{
	0%,40%{
		-webkit-transform:rotate(0deg);
	}5%,30%{
		-webkit-transform:rotate(30deg);
	}
}
@keyframes break1{
	0%,40%{
		transform:rotate(0deg);
	}5%,30%{
		transform:rotate(30deg);
	}
}
#stop:checked~.woman .r_arm p:nth-child(2){
	-webkit-animation:break2 15s 2s infinite;
	        animation:break2 15s 2s infinite;
	-webkit-transform:rotate(0deg);
	    -ms-transform:rotate(0deg);
	        transform:rotate(0deg);
}
@-webkit-keyframes break2{
	0%,40%{
		-webkit-transform:rotate(0deg);
	}5%,30%{
		height:40px;
		-webkit-transform:rotate(90deg);
	}
}
@keyframes break2{
	0%,40%{
		transform:rotate(0deg);
	}5%,30%{
		height:40px;
		transform:rotate(90deg);
	}
}
#stop:checked~.woman .l_arm p:nth-child(2) span{
	-webkit-transform:rotate(-20deg);
	    -ms-transform:rotate(-20deg);
	        transform:rotate(-20deg);
}

#stop:checked~.woman .l_arm p:nth-child(2) span:before{
	width:4px;
	height:19px;
	border-radius:4px;
	top:8px;
	left:1px;
	background:#333;
	background:var(--bace);
	-webkit-transform:perspective(30px) rotateX(40deg) rotateX(-6deg);
	        transform:perspective(30px) rotateX(40deg) rotateX(-6deg);
	-webkit-box-shadow:
		5px 0 0 #333,
		10px -2px 0 #333,
		15px -4px 0 #333
	;
        box-shadow:
		5px 0 0 #333,
		10px -2px 0 #333,
		15px -4px 0 #333
	;
	-webkit-box-shadow:
		5px 0 0 var(--bace),
		10px -2px 0 var(--bace),
		15px -4px 0 var(--bace)
	;
        box-shadow:
		5px 0 0 var(--bace),
		10px -2px 0 var(--bace),
		15px -4px 0 var(--bace)
	;
}

#stop:checked~.woman .r_arm p:nth-child(2):after{
	bottom:-10px;
	-webkit-transform:rotate(-51deg);
	    -ms-transform:rotate(-51deg);
	        transform:rotate(-51deg);
}
#stop:checked~.woman .r_arm p:nth-child(2) span{
	width:5px;
	height:13px;
	border-radius:0 5px 0 5px;
	bottom:1px;
	left:4px;
	background:#333;
	background:var(--bace);
	-webkit-animation:break4 15s 2s infinite;
	        animation:break4 15s 2s infinite;
}
@-webkit-keyframes break4{
	0%,60%{
		-webkit-transform:rotate(-50deg);
	}1%,50%{
		-webkit-transform:rotate(85deg);
	}
}
@keyframes break4{
	0%,60%{
		transform:rotate(-50deg);
	}1%,50%{
		transform:rotate(85deg);
	}
}
#stop:checked~.woman .r_arm p:nth-child(2) span:before{
	width:4px;
	height:15px;
	border-radius:4px;
	top:7px;
	left:4px;
	background:#333;
	background:var(--bace);
	-webkit-transform:rotate(-22deg);
	    -ms-transform:rotate(-22deg);
	        transform:rotate(-22deg);
	-webkit-box-shadow:
		 5px -1px 0 #333,
		 9px -2px 0 #333,
		14px -3px 0 #333
	;
        box-shadow:
		 5px -1px 0 #333,
		 9px -2px 0 #333,
		14px -3px 0 #333
	;
	-webkit-box-shadow:
		5px -1px 0 var(--bace),
		9px -2px 0 var(--bace),
		14px -3px 0 var(--bace)
	;
        box-shadow:
		5px -1px 0 var(--bace),
		9px -2px 0 var(--bace),
		14px -3px 0 var(--bace)
	;
	-webkit-animation:break5 15s 2s infinite;
	        animation:break5 15s 2s infinite;
}
@-webkit-keyframes break5{
	0%,60%{
		-webkit-transform:rotate(56deg);
	}1%,50%{
		-webkit-transform:rotate(-22deg);
	}
}
@keyframes break5{
	0%,60%{
		transform:rotate(56deg);
	}1%,50%{
		transform:rotate(-22deg);
	}
}


#stop:checked~.woman .r_foot p:nth-child(2) span{
	-webkit-animation:break3 15s 2s infinite;
	        animation:break3 15s 2s infinite;
	-webkit-transform-origin:90% 90%;
	    -ms-transform-origin:90% 90%;
	        transform-origin:90% 90%;
	-webkit-transform:rotate(0deg) translate3d(0,0,0);
	        transform:rotate(0deg) translate3d(0,0,0);
}
@-webkit-keyframes break3{
	0%,50%,53%,56%,59%{
		-webkit-transform:rotate(0deg) translate3d(0,0,0);
	}52%,55%,58%{
		-webkit-transform:rotate(15deg) translate3d(-8px,0,0);
	}
}
@keyframes break3{
	0%,50%,53%,56%,59%{
		transform:rotate(0deg) translate3d(0,0,0);
	}52%,55%,58%{
		transform:rotate(15deg) translate3d(-8px,0,0);
	}
}
#run:checked~.woman{
	-webkit-transform:rotate(-10deg) translate3d(0,0,0);
	        transform:rotate(-10deg) translate3d(0,0,0);
	-webkit-animation:ran1 .5s ease-in infinite;
	        animation:ran1 .5s ease-in infinite;
	-webkit-animation:ran1 calc( var(--i) / 2) ease-in infinite;
	        animation:ran1 calc( var(--i) / 2) ease-in infinite;
	margin-top:-245px;
}
@-webkit-keyframes ran1{
	0%,100%{
		margin-top:-240px;
	}40%,60%{
		margin-top:-250px;
	}
}
@keyframes ran1{
	0%,100%{
		margin-top:-240px;
	}40%,60%{
		margin-top:-250px;
	}
}
#run:checked~.woman .head{
	-webkit-transform:rotate(10deg);
	    -ms-transform:rotate(10deg);
	        transform:rotate(10deg);
}
#run:checked~.woman .head p:nth-child(3):before{
	top:-29px;
	left:42px;
	-webkit-transform:rotate(-36deg);
	    -ms-transform:rotate(-36deg);
	        transform:rotate(-36deg);
}
#run:checked~.woman .body{
	-webkit-transform:rotate(0deg);
	    -ms-transform:rotate(0deg);
	        transform:rotate(0deg);
}
#run:checked~.woman .head p:nth-child(4){
	-webkit-animation:ran2 .5s ease-in .2s infinite;
	        animation:ran2 .5s ease-in .2s infinite;
	-webkit-animation:ran2 calc( var(--i) / 2) ease-in calc( var(--i) / 5) infinite;
	        animation:ran2 calc( var(--i) / 2) ease-in calc( var(--i) / 5) infinite;
}
@-webkit-keyframes ran2{
	0%,90%{
		-webkit-transform:rotate(0deg) skewY(0deg) skewX(5deg) translate3d(0,0,0);
	}30%{
		-webkit-transform:rotate(-10deg) skewY(5deg) skewX(-30deg) translate3d(0,0,0);
	}60%{
		-webkit-transform:rotate(-15deg) skewY(-15deg) skewX(-10deg) translate3d(0,0,0);
	}
}
@keyframes ran2{
	0%,90%{
		transform:rotate(0deg) skewY(0deg) skewX(5deg) translate3d(0,0,0);
	}30%{
		transform:rotate(-10deg) skewY(5deg) skewX(-30deg) translate3d(0,0,0);
	}60%{
		transform:rotate(-15deg) skewY(-15deg) skewX(-10deg) translate3d(0,0,0);
	}
}
#run:checked~.woman .body p:nth-child(1):before{
	-webkit-animation:body1 calc( var(--i) / 2) ease-in calc( var(--i) / 5) infinite;
	        animation:body1 calc( var(--i) / 2) ease-in calc( var(--i) / 5) infinite;
	top:-63px;
	-webkit-transform:rotate(40deg) skewX(-10deg) translate3d(0,0,0);
	        transform:rotate(40deg) skewX(-10deg) translate3d(0,0,0);
}
@-webkit-keyframes body1{
	0%,100%{
		-webkit-transform:rotate(40deg) skewX(-10deg) translate3d(0,0,0);
	}50%{
		width:37px;
		-webkit-transform:rotate(40deg) skewX(-10deg) skewY(-10deg) translate3d(0,0,0);
	}
}
@keyframes body1{
	0%,100%{
		transform:rotate(40deg) skewX(-10deg) translate3d(0,0,0);
	}50%{
		width:37px;
		transform:rotate(40deg) skewX(-10deg) skewY(-10deg) translate3d(0,0,0);
	}
}
#run:checked~.woman .r_arm{
	-webkit-animation:arm1 1s ease-in infinite;
	        animation:arm1 1s ease-in infinite;
	-webkit-animation:arm1 var(--i) ease-in infinite;
	        animation:arm1 var(--i) ease-in infinite;
	-webkit-transform:rotate(-60deg);
	    -ms-transform:rotate(-60deg);
	        transform:rotate(-60deg);
}
#run:checked~.woman .l_arm{
	-webkit-animation:arm2 1s ease-in infinite;
	        animation:arm2 1s ease-in infinite;
	-webkit-animation:arm2 var(--i) ease-in infinite;
	        animation:arm2 var(--i) ease-in infinite;
	-webkit-transform:rotate(50deg);
	    -ms-transform:rotate(50deg);
	        transform:rotate(50deg);
}
@-webkit-keyframes arm1{
	0%,100%{
		-webkit-transform:rotate(-60deg);
	}50%{
		-webkit-transform:rotate(50deg);
	}
}
@keyframes arm1{
	0%,100%{
		transform:rotate(-60deg);
	}50%{
		transform:rotate(50deg);
	}
}
@-webkit-keyframes arm2{
	0%,100%{
		-webkit-transform:rotate(50deg);
	}50%{
		-webkit-transform:rotate(-60deg);
	}
}
@keyframes arm2{
	0%,100%{
		transform:rotate(50deg);
	}50%{
		transform:rotate(-60deg);
	}
}
#run:checked~.woman .r_arm p:nth-child(2){
	-webkit-animation:arm3 1s ease-in infinite;
	        animation:arm3 1s ease-in infinite;
	-webkit-animation:arm3 var(--i) ease-in infinite;
	        animation:arm3 var(--i) ease-in infinite;
	height:80px;
	-webkit-transform:rotate(80deg);
	    -ms-transform:rotate(80deg);
	        transform:rotate(80deg);
}
#run:checked~.woman .l_arm p:nth-child(2){
	-webkit-animation:arm4 1s ease-in infinite;
	        animation:arm4 1s ease-in infinite;
	-webkit-animation:arm4 var(--i) ease-in infinite;
	        animation:arm4 var(--i) ease-in infinite;
	height:60px;
	-webkit-transform:rotate(100deg);
	    -ms-transform:rotate(100deg);
	        transform:rotate(100deg);
}
@-webkit-keyframes arm3{
	0%,100%{
		height:80px;
		-webkit-transform:rotate(80deg);
	}50%{
		height:60px;
		-webkit-transform:rotate(110deg);
	}
}
@keyframes arm3{
	0%,100%{
		height:80px;
		transform:rotate(80deg);
	}50%{
		height:60px;
		transform:rotate(110deg);
	}
}
@-webkit-keyframes arm4{
	0%,100%{
		height:60px;
		-webkit-transform:rotate(100deg);
	}50%{
		height:80px;
		-webkit-transform:rotate(50deg);
	}
}
@keyframes arm4{
	0%,100%{
		height:60px;
		transform:rotate(100deg);
	}50%{
		height:80px;
		transform:rotate(50deg);
	}
}


#run:checked~.woman .r_foot{
	-webkit-animation:foot1 1s ease-in infinite;
	        animation:foot1 1s ease-in infinite;
	-webkit-animation:foot1 var(--i) ease-in infinite;
	        animation:foot1 var(--i) ease-in infinite;
	-webkit-transform:rotate(60deg);
	    -ms-transform:rotate(60deg);
	        transform:rotate(60deg);
}
#run:checked~.woman .l_foot{
	-webkit-animation:foot2 1s ease-in infinite;
	        animation:foot2 1s ease-in infinite;
	-webkit-animation:foot2 var(--i) ease-in infinite;
	        animation:foot2 var(--i) ease-in infinite;
	-webkit-transform:rotate(-20deg);
	    -ms-transform:rotate(-20deg);
	        transform:rotate(-20deg);
}
@-webkit-keyframes foot1{
	0%,100%{
		-webkit-transform:rotate(70deg);
	}50%{
		-webkit-transform:rotate(-20deg);
	}
}
@keyframes foot1{
	0%,100%{
		transform:rotate(70deg);
	}50%{
		transform:rotate(-20deg);
	}
}
@-webkit-keyframes foot2{
	0%,100%{
		-webkit-transform:rotate(-20deg);
	}50%{
		-webkit-transform:rotate(70deg);
	}
}
@keyframes foot2{
	0%,100%{
		transform:rotate(-20deg);
	}50%{
		transform:rotate(70deg);
	}
}
#run:checked~.woman .r_foot p:nth-child(2){
	-webkit-animation:foot3 1s ease-in infinite;
	        animation:foot3 1s ease-in infinite;
	-webkit-animation:foot3 var(--i) ease-in infinite;
	        animation:foot3 var(--i) ease-in infinite;
	-webkit-transform:rotate(-70deg);
	    -ms-transform:rotate(-70deg);
	        transform:rotate(-70deg);
}
#run:checked~.woman .l_foot p:nth-child(2){
	-webkit-animation:foot4 1s ease-in infinite;
	        animation:foot4 1s ease-in infinite;
	-webkit-animation:foot4 var(--i) ease-in infinite;
	        animation:foot4 var(--i) ease-in infinite;
	-webkit-transform:rotate(-50deg);
	    -ms-transform:rotate(-50deg);
	        transform:rotate(-50deg);
}
@-webkit-keyframes foot3{
	0%,100%{
		-webkit-transform:rotate(-70deg);
	}25%{
		-webkit-transform:rotate(-10deg);
	}50%{
		-webkit-transform:rotate(-50deg);
	}80%{
		-webkit-transform:rotate(-150deg);
	}
}
@keyframes foot3{
	0%,100%{
		transform:rotate(-70deg);
	}25%{
		transform:rotate(-10deg);
	}50%{
		transform:rotate(-50deg);
	}80%{
		transform:rotate(-150deg);
	}
}
@-webkit-keyframes foot4{
	0%,100%{
		-webkit-transform:rotate(-50deg);
	}30%{
		-webkit-transform:rotate(-150deg);
	}50%{
		-webkit-transform:rotate(-70deg);
	}75%{
		-webkit-transform:rotate(-10deg);
	}
}
@keyframes foot4{
	0%,100%{
		transform:rotate(-50deg);
	}30%{
		transform:rotate(-150deg);
	}50%{
		transform:rotate(-70deg);
	}75%{
		transform:rotate(-10deg);
	}
}
#run:checked~.woman .r_foot p:nth-child(2) span{
	-webkit-animation:foot5 1s ease-in .2s infinite;
	        animation:foot5 1s ease-in .2s infinite;
	-webkit-animation:foot5 var(--i) ease-in calc( var(--i) / 5) infinite;
	        animation:foot5 var(--i) ease-in calc( var(--i) / 5) infinite;
	-webkit-transform:rotate(10deg);
	    -ms-transform:rotate(10deg);
	        transform:rotate(10deg);
}
#run:checked~.woman .l_foot p:nth-child(2) span{
	-webkit-animation:foot6 1s ease-in .2s infinite;
	        animation:foot6 1s ease-in .2s infinite;
	-webkit-animation:foot6 var(--i) ease-in calc( var(--i) / 5) infinite;
	        animation:foot6 var(--i) ease-in calc( var(--i) / 5) infinite;
	-webkit-transform:rotate(-40deg);
	    -ms-transform:rotate(-40deg);
	        transform:rotate(-40deg);
}
@-webkit-keyframes foot5{
	0%,100%{
		-webkit-transform:rotate(10deg);
	}50%{
		-webkit-transform:rotate(-40deg);
	}
}
@keyframes foot5{
	0%,100%{
		transform:rotate(10deg);
	}50%{
		transform:rotate(-40deg);
	}
}
@-webkit-keyframes foot6{
	0%,100%{
		-webkit-transform:rotate(-40deg);
	}50%{
		-webkit-transform:rotate(10deg);
	}
}
@keyframes foot6{
	0%,100%{
		transform:rotate(-40deg);
	}50%{
		transform:rotate(10deg);
	}
}
#run:checked~.woman .r_foot p:nth-child(1):before{
	-webkit-animation:knee1 1s ease-in infinite;
	        animation:knee1 1s ease-in infinite;
	-webkit-animation:knee1 var(--i) ease-in infinite;
	        animation:knee1 var(--i) ease-in infinite;
}
#run:checked~.woman .l_foot p:nth-child(1):before{
	-webkit-animation:knee2 1s ease-in infinite;
	        animation:knee2 1s ease-in infinite;
	-webkit-animation:knee2 var(--i) ease-in infinite;
	        animation:knee2 var(--i) ease-in infinite;
}
@-webkit-keyframes knee1{
	75%{
		bottom:-15px;
		height:150px;
	}
}
@keyframes knee1{
	75%{
		bottom:-15px;
		height:150px;
	}
}
@-webkit-keyframes knee2{
	25%{
		bottom:-15px;
		height:150px;
	}
}
@keyframes knee2{
	25%{
		bottom:-15px;
		height:150px;
	}
}
#walk:checked~.woman{
	-webkit-animation:walk1 .7s ease-in infinite;
	        animation:walk1 .7s ease-in infinite;
	-webkit-animation:walk1 calc( var(--i) * 0.7) ease-in infinite;
	        animation:walk1 calc( var(--i) * 0.7) ease-in infinite;
	-webkit-transform:rotate(-2deg) translate3d(0,0,0);
	        transform:rotate(-2deg) translate3d(0,0,0);
	margin-top:-244px;
}
@-webkit-keyframes walk1{
	0%,100%{
		margin-top:-248px;
	}50%{
		margin-top:-252px;
	}
}
@keyframes walk1{
	0%,100%{
		margin-top:-248px;
	}50%{
		margin-top:-252px;
	}
}

#walk:checked~.woman .head p:nth-child(4){
	-webkit-animation:walk2 1.4s ease-in infinite;
	        animation:walk2 1.4s ease-in infinite;
	-webkit-animation:walk2 calc( var(--i) * .7) ease-in infinite;
	        animation:walk2 calc( var(--i) * .7) ease-in infinite;
	-webkit-transform:rotate(0deg);
	    -ms-transform:rotate(0deg);
	        transform:rotate(0deg);
}
@-webkit-keyframes walk2{
	0%{
		-webkit-transform:skewY(0deg) translate3d(0,0,0);
	}50%{
		-webkit-transform:skewY(-15deg) translate3d(0,0,0);
	}
}
@keyframes walk2{
	0%{
		transform:skewY(0deg) translate3d(0,0,0);
	}50%{
		transform:skewY(-15deg) translate3d(0,0,0);
	}
}
#walk:checked~.woman .r_arm{
	-webkit-animation:arm5 1.4s ease-in infinite;
	        animation:arm5 1.4s ease-in infinite;
	-webkit-animation:arm5 calc( var(--i) * 1.4) ease-in infinite;
	        animation:arm5 calc( var(--i) * 1.4) ease-in infinite;
		-webkit-transform:rotate(30deg);
		    -ms-transform:rotate(30deg);
		        transform:rotate(30deg);
}
#walk:checked~.woman .l_arm{
	-webkit-animation:arm6 1.4s ease-in infinite;
	        animation:arm6 1.4s ease-in infinite;
	-webkit-animation:arm6 calc( var(--i) * 1.4) ease-in infinite;
	        animation:arm6 calc( var(--i) * 1.4) ease-in infinite;
		-webkit-transform:rotate(-40deg);
		    -ms-transform:rotate(-40deg);
		        transform:rotate(-40deg);
}
@-webkit-keyframes arm5{
	0%,100%{
		-webkit-transform:rotate(30deg);
	}50%{
		-webkit-transform:rotate(-40deg);
	}
}
@keyframes arm5{
	0%,100%{
		transform:rotate(30deg);
	}50%{
		transform:rotate(-40deg);
	}
}

@-webkit-keyframes arm6{
	0%,100%{
		-webkit-transform:rotate(-40deg);
	}50%{
		-webkit-transform:rotate(30deg);
	}
}

@keyframes arm6{
	0%,100%{
		transform:rotate(-40deg);
	}50%{
		transform:rotate(30deg);
	}
}
#walk:checked~.woman .r_arm p:nth-child(2){
	-webkit-animation:arm7 1.4s ease-in .2s infinite;
	        animation:arm7 1.4s ease-in .2s infinite;
	-webkit-animation:arm7 calc( var(--i) * 1.4) ease-in calc( var(--i) * 0.2) infinite;
	        animation:arm7 calc( var(--i) * 1.4) ease-in calc( var(--i) * 0.2) infinite;
		-webkit-transform:rotate(50deg);
		    -ms-transform:rotate(50deg);
		        transform:rotate(50deg);
}
#walk:checked~.woman .l_arm p:nth-child(2){
	-webkit-animation:arm8 1.4s ease-in .2s infinite;
	        animation:arm8 1.4s ease-in .2s infinite;
	-webkit-animation:arm8 calc( var(--i) * 1.4) ease-in calc( var(--i) * 0.2) infinite;
	        animation:arm8 calc( var(--i) * 1.4) ease-in calc( var(--i) * 0.2) infinite;
		-webkit-transform:rotate(10deg);
		    -ms-transform:rotate(10deg);
		        transform:rotate(10deg);
}
@-webkit-keyframes arm7{
	0%,100%{
		-webkit-transform:rotate(50deg);
	}50%{
		-webkit-transform:rotate(10deg);
	}
}
@keyframes arm7{
	0%,100%{
		transform:rotate(50deg);
	}50%{
		transform:rotate(10deg);
	}
}
@-webkit-keyframes arm8{
	0%,100%{
		-webkit-transform:rotate(10deg);
	}50%{
		-webkit-transform:rotate(50deg);
	}
}
@keyframes arm8{
	0%,100%{
		transform:rotate(10deg);
	}50%{
		transform:rotate(50deg);
	}
}
#walk:checked~.woman .r_foot{
	-webkit-animation:foot7 1.4s ease-in infinite;
	        animation:foot7 1.4s ease-in infinite;
	-webkit-animation:foot7 calc( var(--i) * 1.4) ease-in infinite;
	        animation:foot7 calc( var(--i) * 1.4) ease-in infinite;
	-webkit-transform:rotate(-12deg);
	    -ms-transform:rotate(-12deg);
	        transform:rotate(-12deg);
	margin-top:0px;
}
#walk:checked~.woman .l_foot{
	-webkit-animation:foot8 1.4s ease-in infinite;
	        animation:foot8 1.4s ease-in infinite;
	-webkit-animation:foot8 calc( var(--i) * 1.4) ease-in infinite;
	        animation:foot8 calc( var(--i) * 1.4) ease-in infinite;
	-webkit-transform:rotate(40deg);
	    -ms-transform:rotate(40deg);
	        transform:rotate(40deg);
	margin-top:0px;
}

#walk:checked~.woman .r_foot p:nth-child(2){
	-webkit-animation:foot9 1.4s ease-in .5s infinite;
	        animation:foot9 1.4s ease-in .5s infinite;
	-webkit-animation:foot9 calc( var(--i) * 1.4) ease-in calc( var(--i) * 0.5) infinite;
	        animation:foot9 calc( var(--i) * 1.4) ease-in calc( var(--i) * 0.5) infinite;
	-webkit-transform:rotate(-80deg) scale(1,0.9);
	    -ms-transform:rotate(-80deg) scale(1,0.9);
	        transform:rotate(-80deg) scale(1,0.9);
}
#walk:checked~.woman .l_foot p:nth-child(2){
	-webkit-animation:foot10 1.4s ease-in infinite;
	        animation:foot10 1.4s ease-in infinite;
	-webkit-animation:foot10 calc( var(--i) * 1.4) ease-in calc( var(--i) * 0.2) infinite;
	        animation:foot10 calc( var(--i) * 1.4) ease-in calc( var(--i) * 0.2) infinite;
	-webkit-transform:rotate(-10deg);
	    -ms-transform:rotate(-10deg);
	        transform:rotate(-10deg);
}
#walk:checked~.woman .r_foot p:nth-child(2) span{
	-webkit-animation:foot11 1.4s ease-in .5s infinite;
	        animation:foot11 1.4s ease-in .5s infinite;
	-webkit-animation:foot11 calc( var(--i) * 1.4) ease-in calc( var(--i) * 0.5) infinite;
	        animation:foot11 calc( var(--i) * 1.4) ease-in calc( var(--i) * 0.5) infinite;
	-webkit-transform:rotate(-20deg);
	    -ms-transform:rotate(-20deg);
	        transform:rotate(-20deg);
}
#walk:checked~.woman .l_foot p:nth-child(2) span{
	-webkit-animation:foot12 1.4s ease-in .2s infinite;
	        animation:foot12 1.4s ease-in .2s infinite;
	-webkit-animation:foot12 calc( var(--i) * 1.4) ease-in calc( var(--i) * 0.2) infinite;
	        animation:foot12 calc( var(--i) * 1.4) ease-in calc( var(--i) * 0.2) infinite;
	-webkit-transform:rotate(5deg);
	    -ms-transform:rotate(5deg);
	        transform:rotate(5deg);
}
@-webkit-keyframes foot7{
	0%,100%{
		margin-top:0px;
		-webkit-transform:rotate(-20deg) translate3d(0,0,0);
	}50%{
		margin-top:-3px;
		-webkit-transform:rotate(40deg) translate3d(0,0,0);
	}75%{
		margin-top:3px;
	}
}
@keyframes foot7{
	0%,100%{
		margin-top:0px;
		transform:rotate(-20deg) translate3d(0,0,0);
	}50%{
		margin-top:-3px;
		transform:rotate(40deg) translate3d(0,0,0);
	}75%{
		margin-top:3px;
	}
}
@-webkit-keyframes foot9{
	0%,100%{
		-webkit-transform:rotate(-80deg) scale(1,0.9) translate3d(0,0,0);
	}30%{
		-webkit-transform:rotate(-10deg) translate3d(0,0,0);
	}60%{
		-webkit-transform:rotate(0deg) scale(1) translate3d(0,0,0);
	}
}
@keyframes foot9{
	0%,100%{
		transform:rotate(-80deg) scale(1,0.9) translate3d(0,0,0);
	}30%{
		transform:rotate(-10deg) translate3d(0,0,0);
	}60%{
		transform:rotate(0deg) scale(1) translate3d(0,0,0);
	}
}
@-webkit-keyframes foot11{
	0%,100%{
		-webkit-transform:rotate(-20deg) translate3d(0,0,0);
	}40%{
		-webkit-transform:rotate(5deg) translate3d(0,0,0);
	}80%{
		-webkit-transform:rotate(10deg) translate3d(0,0,0);
	}
}
@keyframes foot11{
	0%,100%{
		transform:rotate(-20deg) translate3d(0,0,0);
	}40%{
		transform:rotate(5deg) translate3d(0,0,0);
	}80%{
		transform:rotate(10deg) translate3d(0,0,0);
	}
}

@-webkit-keyframes foot8{
	0%,100%{
		margin-top:0px;
		-webkit-transform:rotate(40deg) translate3d(0,0,0);
	}25%{
		margin-top:3px;

	}50%{
		margin-top:-3px;
		-webkit-transform:rotate(-20deg) translate3d(0,0,0);
	}
}

@keyframes foot8{
	0%,100%{
		margin-top:0px;
		transform:rotate(40deg) translate3d(0,0,0);
	}25%{
		margin-top:3px;

	}50%{
		margin-top:-3px;
		transform:rotate(-20deg) translate3d(0,0,0);
	}
}
@-webkit-keyframes foot10{
	0%,100%{
		-webkit-transform:rotate(-10deg) translate3d(0,0,0);
	}30%{
		-webkit-transform:rotate(0deg) translate3d(0,0,0);
	}70%{
		-webkit-transform:rotate(-80deg) scale(1,0.9) translate3d(0,0,0);
	}
}
@keyframes foot10{
	0%,100%{
		transform:rotate(-10deg) translate3d(0,0,0);
	}30%{
		transform:rotate(0deg) translate3d(0,0,0);
	}70%{
		transform:rotate(-80deg) scale(1,0.9) translate3d(0,0,0);
	}
}
@-webkit-keyframes foot12{
	0%,100%{
		-webkit-transform:rotate(5deg) translate3d(0,0,0);
	}30%{
		-webkit-transform:rotate(10deg) translate3d(0,0,0);
	}60%{
		-webkit-transform:rotate(-20deg) translate3d(0,0,0);
	}
}
@keyframes foot12{
	0%,100%{
		transform:rotate(5deg) translate3d(0,0,0);
	}30%{
		transform:rotate(10deg) translate3d(0,0,0);
	}60%{
		transform:rotate(-20deg) translate3d(0,0,0);
	}
}
.road{
	width:100%;
	height:100%;
	z-index:0;
	display:block;
	position:absolute;
  overflow:hidden;
	left:0;
	top:0;
	transform:translate3d(0,0,0);
}
#type1:checked~.road{
	background: -webkit-gradient(linear,left top, left bottom,from(#a1dbff),color-stop(45%, #f8f8ff),color-stop(45%, #90D1ED),color-stop(70%, #89c3eb));
	background: -webkit-linear-gradient(top,#a1dbff 0%,#f8f8ff 45%,#90D1ED 45%,#89c3eb 70%);
	background: -o-linear-gradient(top,#a1dbff 0%,#f8f8ff 45%,#90D1ED 45%,#89c3eb 70%);
	background: linear-gradient(to bottom,#a1dbff 0%,#f8f8ff 45%,#90D1ED 45%,#89c3eb 70%);
}
.road:before{
	width:100%;
	height:50%;
	top:50%;
	left:0;
	margin-top:210px;
}

#type1:checked~.road:before{
	width:180%;
	height:90px;
	left:-40%;
	margin-top:0;
	-webkit-transform:translate3d(0,-195px,0);
	        transform:translate3d(0,-195px,0);
	border-radius:0 0 50% 50%/0 0 100% 100%;
	-webkit-box-shadow:
		0 -70px 10px rgba(137,195,235,0.2) inset,
		0 -30px 10px rgba(137,195,235,0.8) inset,
		0 10px 10px rgba(137,195,235,0.8),
		0 20px 5px rgba(255,255,255,0.9),
		0 80px 0 20px #eda;
        box-shadow:
		0 -70px 10px rgba(137,195,235,0.2) inset,
		0 -30px 10px rgba(137,195,235,0.8) inset,
		0 10px 10px rgba(137,195,235,0.8),
		0 20px 5px rgba(255,255,255,0.9),
		0 80px 0 20px #eda;
	-webkit-animation:wave 6s ease infinite alternate;
	        animation:wave 6s ease infinite alternate;
}

@-webkit-keyframes wave{
	0%,10%{
		width:180%;
		height:90px;
		-webkit-transform:translate3d(0,25px,0);
	}
	90%,100%{
		width:200%;
		height:50px;
		-webkit-transform:translate3d(0,50px,0);
	}
}

@keyframes wave{
	0%,10%{
		width:180%;
		height:90px;
		transform:translate3d(0,25px,0);
	}
	90%,100%{
		width:200%;
		height:50px;
		transform:translate3d(0,50px,0);
	}
}
#type1:checked~.road p:nth-child(1){
	width:320px;
	height:8px;
	border-radius:30% 60%/100% 100% 0 0;
	top:45%;
	left:60%;
	margin-top:-9px;
	background:#cdd;
}
#type1:checked~.road p:nth-child(1):before{
	width:800px;
	height:18px;
	background:#677;
	top:20px;
	left:-1300px;
	border-radius:40% 60% 0 0/ 90% 100% 0 0;
	-webkit-box-shadow:1600px -5px 0 -3px #899;
        box-shadow:1600px -5px 0 -3px #899;
}

#type1:checked~.road p:nth-child(2){
	width:200px;
	height:900px;
	top:50%;
	margin-top:-700px;
	left:-800px;
	border-radius:80% 0/100% 0;
	-webkit-box-shadow:-75px 90px 0 -5px #a97;
        box-shadow:-75px 90px 0 -5px #a97;
}
#type1:checked~.road p:nth-child(2):before,
#type1:checked~.road p:nth-child(2):after{
	width:800px;
	height:500px;
	top:100px;
	left:50%;
	margin-left:-430px;
	border-radius:50%;
	-webkit-box-shadow:-90px -90px 0 -40px #6a6,
		80px -80px 0 -40px #6a6
	;
        box-shadow:-90px -90px 0 -40px #6a6,
		80px -80px 0 -40px #6a6
	;
}
#type1:checked~.road p:nth-child(2):after{
	width:500px;
	height:600px;
	top:90px;
	margin-left:-280px;
}
#walk:checked~#type1:checked~.road p:nth-child(2){
	-webkit-animation:ran_road1 40s linear infinite;
	        animation:ran_road1 40s linear infinite;
	-webkit-animation:ran_road1 calc( var(--i) * 45 ) linear infinite;
	        animation:ran_road1 calc( var(--i) * 45 ) linear infinite;
}
#run:checked~#type1:checked~.road p:nth-child(2){
	-webkit-animation:ran_road1 10s linear infinite;
	        animation:ran_road1 10s linear infinite;
	-webkit-animation:ran_road1 calc( var(--i) * 11 ) linear infinite;
	        animation:ran_road1 calc( var(--i) * 11 ) linear infinite;
}

@-webkit-keyframes ran_road1{
	to{
		-webkit-transform:translate3d(2500px,0,0);
	}
}

@keyframes ran_road1{
	to{
		transform:translate3d(2500px,0,0);
	}
}
#type1:checked~.road p:nth-child(3){
	width:100%;
	height:50%;
	top:50%;
	left:0;
	margin-top:210px;
	background: -webkit-gradient(linear,left top, left bottom,from(#bbb),to(#888));
	background: -webkit-linear-gradient(top,#bbb 0%,#888 100%);
	background: -o-linear-gradient(top,#bbb 0%,#888 100%);
	background: linear-gradient(to bottom,#bbb 0%,#888 100%);
	-webkit-box-shadow:
		0 -50px #bbb,
		0 20px #bbb inset,
		0 30px #eee inset
	;
        box-shadow:
		0 -50px #bbb,
		0 20px #bbb inset,
		0 30px #eee inset
	;
}
#type1:checked~.road p:nth-child(3):before{
	width:100%;
	height:1px;
	right:0;
	top:-160px;
	background:#999;
	-webkit-box-shadow:0 1px #888,
		0 20px #999,
		0 21px #888,
		0 40px #999,
		0 41px #888,
		0 60px #999,
		0 61px #888;
        box-shadow:0 1px #888,
		0 20px #999,
		0 21px #888,
		0 40px #999,
		0 41px #888,
		0 60px #999,
		0 61px #888
}
#type1:checked~.road p:nth-child(3):after{
	width:20px;
	height:130px;
	background:#666;
	top:-170px;
	right:20px;
	border-radius:10px/3px;
	-webkit-box-shadow:
		 -500px 0 #666,
		-1000px 0 #666,
		-1500px 0 #666,
		-2000px 0 #666,
		-2500px 0 #666,
		-3000px 0 #666,
		-3500px 0 #666,
		-4000px 0 #666,
		-4500px 0 #666,
		-5000px 0 #666,
		-5500px 0 #666,
		-6000px 0 #666,
		-6500px 0 #666,
		-7000px 0 #666,
		-7500px 0 #666,
		-8000px 0 #666,
		-8500px 0 #666,
		-9000px 0 #666
	;
        box-shadow:
		 -500px 0 #666,
		-1000px 0 #666,
		-1500px 0 #666,
		-2000px 0 #666,
		-2500px 0 #666,
		-3000px 0 #666,
		-3500px 0 #666,
		-4000px 0 #666,
		-4500px 0 #666,
		-5000px 0 #666,
		-5500px 0 #666,
		-6000px 0 #666,
		-6500px 0 #666,
		-7000px 0 #666,
		-7500px 0 #666,
		-8000px 0 #666,
		-8500px 0 #666,
		-9000px 0 #666
	;
}
#walk:checked~#type1:checked~.road p:nth-child(3):after{
	-webkit-animation:ran_road 60s linear infinite;
	        animation:ran_road 60s linear infinite;
	-webkit-animation:ran_road calc( var(--i) * 60 ) linear infinite;
	        animation:ran_road calc( var(--i) * 60 ) linear infinite;
}
#run:checked~#type1:checked~.road p:nth-child(3):after{
	-webkit-animation:ran_road 15s linear infinite;
	        animation:ran_road 15s linear infinite;
	-webkit-animation:ran_road calc( var(--i) * 15 ) linear infinite;
	        animation:ran_road calc( var(--i) * 15 ) linear infinite;
}
@-webkit-keyframes ran_road{
	to{
		-webkit-transform:translate3d(5000px,0,0);
	}
}
@keyframes ran_road{
	to{
		transform:translate3d(5000px,0,0);
	}
}
#type2:checked~.road{
	background:-webkit-gradient(linear,left top, left bottom,from(#cce),color-stop(60%, #fca));
	background:-webkit-linear-gradient(top,#cce 0%,#fca 60%);
	background:-o-linear-gradient(top,#cce 0%,#fca 60%);
	background:linear-gradient(to bottom,#cce 0%,#fca 60%);
}

#type2:checked~.road:after{
	top:50%;
	left:-10%;
	width:150%;
	height:100%;
	margin-top:180px;
	background:#669;
	background: -webkit-gradient(linear,left top, left bottom,from(#9bc),color-stop(30%, #89a));
	background: -webkit-linear-gradient(top,#9bc 0%,#89a 30%);
	background: -o-linear-gradient(top,#9bc 0%,#89a 30%);
	background: linear-gradient(to bottom,#9bc 0%,#89a 30%);
	-webkit-transform:rotate(5deg);
	    -ms-transform:rotate(5deg);
	        transform:rotate(5deg);
}
#run:checked~#type2:checked~.road:after{
	-webkit-animation:ran_road2 60s linear infinite;
	        animation:ran_road2 60s linear infinite;
	-webkit-animation:ran_road2 calc( var(--i) * 60 ) linear infinite alternate;
	        animation:ran_road2 calc( var(--i) * 60 ) linear infinite alternate;
}
#walk:checked~#type2:checked~.road:after{
	-webkit-animation:ran_road2 120s linear infinite;
	        animation:ran_road2 120s linear infinite;
	-webkit-animation:ran_road2 calc( var(--i) * 120 ) linear infinite alternate;
	        animation:ran_road2 calc( var(--i) * 120 ) linear infinite alternate;
}
@-webkit-keyframes ran_road2{
	to{
		-webkit-transform:rotate(-5deg) translate3d(0,0,0);
	}
}
@keyframes ran_road2{
	to{
		transform:rotate(-5deg) translate3d(0,0,0);
	}
}
#type2:checked~.road p:nth-child(1){
	width:100%;
	height:50%;
	top:50%;
	right:0;
	margin-top:200px;
	background:#bbc;
}

#type2:checked~.road p:nth-child(1):before,
#type2:checked~.road p:nth-child(1):after{
	width:800px;
	height:800px;
	border-radius:5%;
	background:#aab;
	right:-1500px;
	top:-250px;
	-webkit-transform:rotate(27deg) skewX(-40deg);
	    -ms-transform:rotate(27deg) skewX(-40deg);
	        transform:rotate(27deg) skewX(-40deg);
	-webkit-box-shadow:
		 -300px  200px 100px -20px rgba(255,255,255,0.1),
		 -500px  450px 100px -20px rgba(255,255,255,0.1),
		 -850px  780px 100px -20px rgba(255,255,255,0.1),
		-1500px 1400px 100px -20px rgba(255,255,255,0.1),
		-1650px 1480px 100px -20px rgba(255,255,255,0.1),
		-1850px 1900px 100px -20px rgba(255,255,255,0.1),
		-2100px 2100px 100px -20px rgba(255,255,255,0.1),
		-2200px 2300px 100px -20px rgba(255,255,255,0.1),
		-3300px 3200px 100px -20px rgba(255,255,255,0.1),
		-3800px 3700px 100px -20px rgba(255,255,255,0.1),
		-4500px 4400px 100px -20px rgba(255,255,255,0.1),

		 -300px  200px #aab,
		 -500px  450px #aab,
		 -850px  780px #aab,
		-1500px 1400px #aab,
		-1650px 1480px #aab,
		-1850px 1900px #aab,
		-2100px 2100px #aab,
		-2200px 2300px #aab,
		-3300px 3200px #aab,
		-3800px 3700px #aab,
		-4500px 4400px #aab,
		-4700px 4700px #aab
	;
        box-shadow:
		 -300px  200px 100px -20px rgba(255,255,255,0.1),
		 -500px  450px 100px -20px rgba(255,255,255,0.1),
		 -850px  780px 100px -20px rgba(255,255,255,0.1),
		-1500px 1400px 100px -20px rgba(255,255,255,0.1),
		-1650px 1480px 100px -20px rgba(255,255,255,0.1),
		-1850px 1900px 100px -20px rgba(255,255,255,0.1),
		-2100px 2100px 100px -20px rgba(255,255,255,0.1),
		-2200px 2300px 100px -20px rgba(255,255,255,0.1),
		-3300px 3200px 100px -20px rgba(255,255,255,0.1),
		-3800px 3700px 100px -20px rgba(255,255,255,0.1),
		-4500px 4400px 100px -20px rgba(255,255,255,0.1),

		 -300px  200px #aab,
		 -500px  450px #aab,
		 -850px  780px #aab,
		-1500px 1400px #aab,
		-1650px 1480px #aab,
		-1850px 1900px #aab,
		-2100px 2100px #aab,
		-2200px 2300px #aab,
		-3300px 3200px #aab,
		-3800px 3700px #aab,
		-4500px 4400px #aab,
		-4700px 4700px #aab
	;
}
#type2:checked~.road p:nth-child(1):after{
	background:#889;
	right:0px;
	-webkit-box-shadow:
		 -400px  500px 90px -30px rgba(255,255,255,0.1),
		 -800px  650px 90px -30px rgba(255,255,255,0.1),
		-1400px 1300px 90px -30px rgba(255,255,255,0.1),
		-1500px 1700px 90px -30px rgba(255,255,255,0.1),
		-1850px 1900px 90px -30px rgba(255,255,255,0.1),
		-2500px 2600px 90px -30px rgba(255,255,255,0.1),
		-2900px 2900px 90px -30px rgba(255,255,255,0.1),
		-3500px 3300px 90px -30px rgba(255,255,255,0.1),
		-3700px 3500px 90px -30px rgba(255,255,255,0.1),
		-4400px 4500px 90px -30px rgba(255,255,255,0.1),
		-4800px 4650px 90px -30px rgba(255,255,255,0.1),
		-5400px 5300px 90px -30px rgba(255,255,255,0.1),

		 -400px  500px #889,
		 -800px  650px #889,
		-1400px 1300px #889,
		-1500px 1700px #889,
		-1850px 1900px #889,
		-2500px 2600px #889,
		-2900px 2900px #889,
		-3500px 3300px #889,
		-3700px 3500px #889,
		-4000px 4000px #889,
		-4400px 4500px #889,
		-4800px 4650px #889,
		-5400px 5300px #889
	;
        box-shadow:
		 -400px  500px 90px -30px rgba(255,255,255,0.1),
		 -800px  650px 90px -30px rgba(255,255,255,0.1),
		-1400px 1300px 90px -30px rgba(255,255,255,0.1),
		-1500px 1700px 90px -30px rgba(255,255,255,0.1),
		-1850px 1900px 90px -30px rgba(255,255,255,0.1),
		-2500px 2600px 90px -30px rgba(255,255,255,0.1),
		-2900px 2900px 90px -30px rgba(255,255,255,0.1),
		-3500px 3300px 90px -30px rgba(255,255,255,0.1),
		-3700px 3500px 90px -30px rgba(255,255,255,0.1),
		-4400px 4500px 90px -30px rgba(255,255,255,0.1),
		-4800px 4650px 90px -30px rgba(255,255,255,0.1),
		-5400px 5300px 90px -30px rgba(255,255,255,0.1),

		 -400px  500px #889,
		 -800px  650px #889,
		-1400px 1300px #889,
		-1500px 1700px #889,
		-1850px 1900px #889,
		-2500px 2600px #889,
		-2900px 2900px #889,
		-3500px 3300px #889,
		-3700px 3500px #889,
		-4000px 4000px #889,
		-4400px 4500px #889,
		-4800px 4650px #889,
		-5400px 5300px #889
	;
}
#run:checked~#type2:checked~.road p:nth-child(1):before{
	-webkit-animation:ran_road4 140s linear infinite;
	        animation:ran_road4 140s linear infinite;
	-webkit-animation:ran_road4 calc( var(--i) * 140 ) linear infinite;
	        animation:ran_road4 calc( var(--i) * 140 ) linear infinite;
}
#walk:checked~#type2:checked~.road p:nth-child(1):before{
	-webkit-animation:ran_road4 280s linear infinite;
	        animation:ran_road4 280s linear infinite;
	-webkit-animation:ran_road4 calc( var(--i) * 280 ) linear infinite;
	        animation:ran_road4 calc( var(--i) * 280 ) linear infinite;
}
#run:checked~#type2:checked~.road p:nth-child(1):after{
	-webkit-animation:ran_road4 100s linear infinite;
	        animation:ran_road4 100s linear infinite;
	-webkit-animation:ran_road4 calc( var(--i) * 100 ) linear infinite;
	        animation:ran_road4 calc( var(--i) * 100 ) linear infinite;
}
#walk:checked~#type2:checked~.road p:nth-child(1):after{
	-webkit-animation:ran_road4 200s linear infinite;
	        animation:ran_road4 200s linear infinite;
	-webkit-animation:ran_road4 calc( var(--i) * 200 ) linear infinite;
	        animation:ran_road4 calc( var(--i) * 200 ) linear infinite;
}
@-webkit-keyframes ran_road4{
	0%{
		-webkit-transform:rotate(28deg) skewX(-41deg) translate3d(0,0,0);
	}100%{
		-webkit-transform:rotate(28deg) skewX(-41deg) translate3d(4000px,-4000px,0);
	}
}
@keyframes ran_road4{
	0%{
		transform:rotate(28deg) skewX(-41deg) translate3d(0,0,0);
	}100%{
		transform:rotate(28deg) skewX(-41deg) translate3d(4000px,-4000px,0);
	}
}
#type3:checked~.road:before{
	border-top:2px solid #333;
	background:rgba(210,210,200,0.5);
	-webkit-box-shadow:0 -100px 100px rgba(255,255,255,0.5);
        box-shadow:0 -100px 100px rgba(255,255,255,0.5);
}
#type3:checked~.road p:nth-child(1){
	width:100%;
	height:209px;
	top:50%;
	left:0px;
	overflow:hidden;
}
#type3:checked~.road p:nth-child(1):before{
	width:90px;
	height:209px;
	bottom:0;
	left:20px;
	background:#eee;
	-webkit-box-shadow:
		 -120px   0 	    #eee,
		 -200px -10px 0 10px #eee,
		 -350px 10px 0 -10px #eee,
		 -600px 10px 0 -10px #eee,
		 -500px 20px 0 -20px #eee,
		 -700px 20px 0 -20px #eee,
		 -820px  5px 0  -5px #eee,
		 -900px  5px 0  -5px #eee,
		 -950px 10px 0 -10px #eee,

		 120px   0 	    #eee,
		 200px -10px 0 10px #eee,
		 350px 10px 0 -10px #eee,
		 600px 10px 0 -10px #eee,
		 500px 20px 0 -20px #eee,
		 700px 20px 0 -20px #eee,
		 820px  5px 0  -5px #eee,
		 900px  5px 0  -5px #eee,
		 950px 10px 0 -10px #eee,
		1000px 10px 0 -10px #eee,
		1100px  5px 0  -5px #eee,
		1200px  0 	    #eee
	;
        box-shadow:
		 -120px   0 	    #eee,
		 -200px -10px 0 10px #eee,
		 -350px 10px 0 -10px #eee,
		 -600px 10px 0 -10px #eee,
		 -500px 20px 0 -20px #eee,
		 -700px 20px 0 -20px #eee,
		 -820px  5px 0  -5px #eee,
		 -900px  5px 0  -5px #eee,
		 -950px 10px 0 -10px #eee,

		 120px   0 	    #eee,
		 200px -10px 0 10px #eee,
		 350px 10px 0 -10px #eee,
		 600px 10px 0 -10px #eee,
		 500px 20px 0 -20px #eee,
		 700px 20px 0 -20px #eee,
		 820px  5px 0  -5px #eee,
		 900px  5px 0  -5px #eee,
		 950px 10px 0 -10px #eee,
		1000px 10px 0 -10px #eee,
		1100px  5px 0  -5px #eee,
		1200px  0 	    #eee
	;
}
#type3:checked~.road p:nth-child(1):after{
	width:90px;
	height:209px;
	bottom:-20px;
	left:50px;
	background:#eee;
	-webkit-transform:skewY(10deg);
	    -ms-transform:skewY(10deg);
	        transform:skewY(10deg);
	-webkit-box-shadow:
		 -350px 70px 0 -10px #eee,
		 -480px 80px 0 -20px #eee,
		 -600px 100px 0 -10px #eee,
		 -700px 160px 0 -20px #eee,
		-900px 170px 0 -10px #eee,


		 350px -50px 0 -10px #eee,
		 600px -60px 0 -10px #eee,
		 500px -70px 0 -20px #eee,
		 700px -100px 0 -20px #eee,
		1000px -170px 0 -10px #eee,
		1100px -200px 0 -5px #eee,
		1200px -230px 	    #eee
	;
	box-shadow:
		 -350px 70px 0 -10px #eee,
		 -480px 80px 0 -20px #eee,
		 -600px 100px 0 -10px #eee,
		 -700px 160px 0 -20px #eee,
		-900px 170px 0 -10px #eee,


		 350px -50px 0 -10px #eee,
		 600px -60px 0 -10px #eee,
		 500px -70px 0 -20px #eee,
		 700px -100px 0 -20px #eee,
		1000px -170px 0 -10px #eee,
		1100px -200px 0 -5px #eee,
		1200px -230px 	    #eee
	;
}

#run:checked~#type3:checked~.road:before,
#walk:checked~#type3:checked~.road:before{
	-webkit-box-shadow:0 -200px 100px rgba(255,255,255,0.8);
        box-shadow:0 -200px 100px rgba(255,255,255,0.8);
}
#run:checked~#type3:checked~.road p:nth-child(1):before,
#run:checked~#type3:checked~.road p:nth-child(1):after{
	-webkit-animation:ran_road 140s linear infinite;
	        animation:ran_road 140s linear infinite;
	-webkit-animation:ran_road calc( var(--i) * 140 ) linear infinite;
	        animation:ran_road calc( var(--i) * 140 ) linear infinite;
}
#walk:checked~#type3:checked~.road p:nth-child(1):before,
#walk:checked~#type3:checked~.road p:nth-child(1):after{
	-webkit-animation:ran_road 280s linear infinite;
	        animation:ran_road 280s linear infinite;
	-webkit-animation:ran_road calc( var(--i) * 280 ) linear infinite;
	        animation:ran_road calc( var(--i) * 280 ) linear infinite;
}
.road ul{
	position:absolute;
	top:50%;
	left:50%;
	z-index:10;
	margin:240px -250px;
	width:500px;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap:wrap;
	    flex-wrap:wrap;
}
.road li{
	position:relative;
	width:70px;
}
.road li label{
	position:relative;
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	margin:10px auto;
	background:rgba(250,250,250,0.5);
	border-radius:50%;
	cursor:pointer;
	color:#333;
	-webkit-box-shadow:0 0 10px rgba(0,0,100,0.1) inset;
        box-shadow:0 0 10px rgba(0,0,100,0.1) inset;
	border:2px solid #333;
	-webkit-transition: all .3s linear;
	-o-transition: all .3s linear;
	transition: all .3s linear;
}
.road li label:hover{
	background:rgba(250,250,250,0.9);
}
.road .speed{
	width:210px;
	height:10px;
	margin:30px 20px;
	-webkit-box-shadow:0 0 10px #333 inset,-1px -1px #666,1px 1px #ccc;
        box-shadow:0 0 10px #333 inset,-1px -1px #666,1px 1px #ccc;
	background:#555;
	border-radius:10px;
}
.road .speed:before{
	width:70px;
	height:20px;
	border-radius:5px/10px;
	top:-5px;
	background:#eee;
	color:#666;
	font-size:9pt;
	line-height:20px;
	text-align:center;
	-webkit-box-shadow:0 0 10px 0 #333,
	2px 2px 5px 0 #fff inset,
	-2px -2px 5px 0 #aaa inset;
        box-shadow:0 0 10px 0 #333,
	2px 2px 5px 0 #fff inset,
	-2px -2px 5px 0 #aaa inset;
	-webkit-transition: all .2s linear;
	-o-transition: all .2s linear;
	transition: all .2s linear;
}
#slow:checked~.road .speed:before{
	content:"slow";
	left:0;
}
#normal:checked~.road .speed:before{
	content:"normal";
	left:70px;
}
#fast:checked~.road .speed:before{
	content:"fast";
	left:140px;
}
.road .speed label,
.road .speed label:hover{
	width:70px;
	margin:0;
	background:none;
	text-indent:-9999px;
	height:20px;
	border-radius:0;
	border:none;
	-webkit-box-shadow:none;
        box-shadow:none;
	float:left;
}
.css_lab:after{
	content:"Created by WhitePallet";
	display:block;
	width:250px;
	position:absolute;
	bottom:10px;
	left:50%;
	margin-left:-125px;
	text-align:center;
	font-size:10pt;
	color:#666;
}
!

JS 

              
                //http://web.whitepallet.com/css_lab-run_walk.html
!
999px

Console