Pen Settings

HTML

CSS

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.

+ add another resource

JavaScript

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.

+ 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.

Behavior

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.

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

              
                <html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Text Input Effects</title>
		<meta name="description" content="Simple ideas for enhancing text input interactions" />
		<meta name="keywords" content="input, text, effect, focus, transition, interaction, inspiration, web design" />
		<meta name="author" content="Kabir Shah" />
	
		<!--[if IE]>
  		<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
		<div class="container">
			<section class="content bgcolor-3">
				<h2>Manami</h2>
				<span class="input input--manami">
					<input class="input__field input__field--manami" type="text" id="input-32" />
					<label class="input__label input__label--manami" for="input-32">
						<span class="input__label-content input__label-content--manami">Username</span>
					</label>
				</span>
				<span class="input input--manami">
					<input class="input__field input__field--manami" type="text" id="input-33" />
					<label class="input__label input__label--manami" for="input-33">
						<span class="input__label-content input__label-content--manami">Website</span>
					</label>
				</span>
				<span class="input input--manami">
					<input class="input__field input__field--manami" type="text" id="input-34" />
					<label class="input__label input__label--manami" for="input-34">
						<span class="input__label-content input__label-content--manami">Invitation Code</span>
					</label>
				</span>
			</section>
			<section class="content bgcolor-7">
				<h2>Nariko</h2>
				<span class="input input--nariko">
					<input class="input__field input__field--nariko" type="text" id="input-20" />
					<label class="input__label input__label--nariko" for="input-20">
						<span class="input__label-content input__label-content--nariko">Username</span>
					</label>
				</span>
				<span class="input input--nariko">
					<input class="input__field input__field--nariko" type="text" id="input-21" />
					<label class="input__label input__label--nariko" for="input-21">
						<span class="input__label-content input__label-content--nariko">Website</span>
					</label>
				</span>
				<span class="input input--nariko">
					<input class="input__field input__field--nariko" type="text" id="input-22" />
					<label class="input__label input__label--nariko" for="input-22">
						<span class="input__label-content input__label-content--nariko">Invitation Code</span>
					</label>
				</span>
			</section>
			<section class="content bgcolor-1">
				<h2>Nao</h2>
				<span class="input input--nao">
					<input class="input__field input__field--nao" type="text" id="input-1" />
					<label class="input__label input__label--nao" for="input-1">
						<span class="input__label-content input__label-content--nao">Username</span>
					</label>
					<svg class="graphic graphic--nao" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
						<path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"/>
					</svg>
				</span>
				<span class="input input--nao">
					<input class="input__field input__field--nao" type="text" id="input-2" />
					<label class="input__label input__label--nao" for="input-2">
						<span class="input__label-content input__label-content--nao">Email</span>
					</label>
					<svg class="graphic graphic--nao" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
						<path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"/>
					</svg>
				</span>
				<span class="input input--nao">
					<input class="input__field input__field--nao" type="text" id="input-3" />
					<label class="input__label input__label--nao" for="input-3">
						<span class="input__label-content input__label-content--nao">Invitation Code</span>
					</label>
					<svg class="graphic graphic--nao" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
						<path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"/>
					</svg>
				</span>
			</section>
			<section class="content">
				<h2>Yoshiko</h2>
				<span class="input input--yoshiko">
					<input class="input__field input__field--yoshiko" type="text" id="input-10" />
					<label class="input__label input__label--yoshiko" for="input-10">
						<span class="input__label-content input__label-content--yoshiko" data-content="Bird's Color">Bird's Color</span>
					</label>
				</span>
				<span class="input input--yoshiko">
					<input class="input__field input__field--yoshiko" type="text" id="input-11" />
					<label class="input__label input__label--yoshiko" for="input-11">
						<span class="input__label-content input__label-content--yoshiko" data-content="Wing Span">Wing Span</span>
					</label>
				</span>
				<span class="input input--yoshiko">
					<input class="input__field input__field--yoshiko" type="text" id="input-12" />
					<label class="input__label input__label--yoshiko" for="input-12">
						<span class="input__label-content input__label-content--yoshiko" data-content="Beak Length">Beak Length</span>
					</label>
				</span>
			</section>
			<section class="content bgcolor-10">
				<h2>Shoko</h2>
				<span class="input input--shoko">
					<input class="input__field input__field--shoko" type="text" id="input-4" />
					<label class="input__label input__label--shoko" for="input-4">
						<span class="input__label-content input__label-content--shoko">Player Name</span>
					</label>
					<svg class="graphic graphic--shoko" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
						<path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"/>
						<path d="M0,2.5c0,0,298.666,0,399.333,0C448.336,2.5,513.994,13,597,13c77.327,0,135-10.5,200.999-10.5c95.996,0,402.001,0,402.001,0"/>
					</svg>
				</span>
				<span class="input input--shoko">
					<input class="input__field input__field--shoko" type="text" id="input-5" />
					<label class="input__label input__label--shoko" for="input-5">
						<span class="input__label-content input__label-content--shoko">Village</span>
					</label>
					<svg class="graphic graphic--shoko" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
						<path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"/>
						<path d="M0,2.5c0,0,298.666,0,399.333,0C448.336,2.5,513.994,13,597,13c77.327,0,135-10.5,200.999-10.5c95.996,0,402.001,0,402.001,0"/>
					</svg>
				</span>
				<span class="input input--shoko">
					<input class="input__field input__field--shoko" type="text" id="input-6" />
					<label class="input__label input__label--shoko" for="input-6">
						<span class="input__label-content input__label-content--shoko">World</span>
					</label>
					<svg class="graphic graphic--shoko" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
						<path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"/>
						<path d="M0,2.5c0,0,298.666,0,399.333,0C448.336,2.5,513.994,13,597,13c77.327,0,135-10.5,200.999-10.5c95.996,0,402.001,0,402.001,0"/>
					</svg>
				</span>
			</section>
			<section class="content bgcolor-4">
				<h2>Chisato</h2>
				<span class="input input--chisato">
					<input class="input__field input__field--chisato" type="text" id="input-13" />
					<label class="input__label input__label--chisato" for="input-13">
						<span class="input__label-content input__label-content--chisato" data-content="First Name">First Name</span>
					</label>
				</span>
				<span class="input input--chisato">
					<input class="input__field input__field--chisato" type="text" id="input-14" />
					<label class="input__label input__label--chisato" for="input-14">
						<span class="input__label-content input__label-content--chisato" data-content="Middle Name">Middle Name</span>
					</label>
				</span>
				<span class="input input--chisato">
					<input class="input__field input__field--chisato" type="text" id="input-15" />
					<label class="input__label input__label--chisato" for="input-15">
						<span class="input__label-content input__label-content--chisato" data-content="Last Name">Last Name</span>
					</label>
				</span>
			</section>
			<section class="content bgcolor-3">
				<h2>Makiko</h2>
				<span class="input input--makiko">
					<input class="input__field input__field--makiko" type="text" id="input-16" />
					<label class="input__label input__label--makiko" for="input-16">
						<span class="input__label-content input__label-content--makiko">Search</span>
					</label>
				</span>
			</section>
			<section class="content bgcolor-9">
				<h2>Sae</h2>
				<span class="input input--sae">
					<input class="input__field input__field--sae" type="text" id="input-17" />
					<label class="input__label input__label--sae" for="input-17">
						<i class="fa fa-fw fa-pencil icon icon--sae"></i>
						<span class="input__label-content input__label-content--sae">Email Address</span>
					</label>
				</span>
				<span class="input input--sae">
					<input class="input__field input__field--sae" type="text" id="input-18" />
					<label class="input__label input__label--sae" for="input-18">
						<i class="fa fa-fw fa-pencil icon icon--sae"></i>
						<span class="input__label-content input__label-content--sae">Invitation Code</span>
					</label>
				</span>
				<span class="input input--sae">
					<input class="input__field input__field--sae" type="text" id="input-19" />
					<label class="input__label input__label--sae" for="input-19">
						<i class="fa fa-fw fa-pencil icon icon--sae"></i>
						<span class="input__label-content input__label-content--sae">Full Name</span>
					</label>
				</span>
			</section>
			<section class="content bgcolor-4">
				<h2>Kozakura</h2>
				<span class="input input--kozakura">
					<input class="input__field input__field--kozakura" type="text" id="input-7" />
					<label class="input__label input__label--kozakura" for="input-7">
						<span class="input__label-content input__label-content--kozakura" data-content="Name">Name</span>
					</label>
					<svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
						<path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
					</svg>
				</span>
				<span class="input input--kozakura">
					<input class="input__field input__field--kozakura" type="text" id="input-8" />
					<label class="input__label input__label--kozakura" for="input-8">
						<span class="input__label-content input__label-content--kozakura" data-content="Email">Email</span>
					</label>
					<svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
						<path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
					</svg>
				</span>
				<span class="input input--kozakura">
					<input class="input__field input__field--kozakura" type="text" id="input-9" />
					<label class="input__label input__label--kozakura" for="input-9">
						<span class="input__label-content input__label-content--kozakura" data-content="Website">Website</span>
					</label>
					<svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
						<path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
					</svg>
				</span>
			</section>
			<section class="content bgcolor-1">
				<h2>Fumi</h2>
				<span class="input input--fumi">
					<input class="input__field input__field--fumi" type="text" id="input-23" />
					<label class="input__label input__label--fumi" for="input-23">
						<i class="fa fa-fw fa-university icon icon--fumi"></i>
						<span class="input__label-content input__label-content--fumi">Course Name</span>
					</label>
				</span>
				<span class="input input--fumi">
					<input class="input__field input__field--fumi" type="text" id="input-24" />
					<label class="input__label input__label--fumi" for="input-24">
						<i class="fa fa-fw fa-graduation-cap icon icon--fumi"></i>
						<span class="input__label-content input__label-content--fumi">Degree</span>
					</label>
				</span>
				<span class="input input--fumi">
					<input class="input__field input__field--fumi" type="text" id="input-25" />
					<label class="input__label input__label--fumi" for="input-25">
						<i class="fa fa-fw fa-suitcase icon icon--fumi"></i>
						<span class="input__label-content input__label-content--fumi">Work Place</span>
					</label>
				</span>
			</section>
			<section class="content bgcolor-4">
				<h2>Ruri</h2>
				<span class="input input--ruri">
					<input class="input__field input__field--ruri" type="text" id="input-26" />
					<label class="input__label input__label--ruri" for="input-26">
						<span class="input__label-content input__label-content--ruri">Username</span>
					</label>
				</span>
				<span class="input input--ruri">
					<input class="input__field input__field--ruri" type="text" id="input-27" />
					<label class="input__label input__label--ruri" for="input-27">
						<span class="input__label-content input__label-content--ruri">Website</span>
					</label>
				</span>
				<span class="input input--ruri">
					<input class="input__field input__field--ruri" type="text" id="input-28" />
					<label class="input__label input__label--ruri" for="input-28">
						<span class="input__label-content input__label-content--ruri">Invitation Code</span>
					</label>
				</span>
			</section>
			<section class="content bgcolor-3">
				<h2>Kohana</h2>
				<span class="input input--kohana">
					<input class="input__field input__field--kohana" type="text" id="input-29" />
					<label class="input__label input__label--kohana" for="input-29">
						<i class="fa fa-fw fa-clock-o icon icon--kohana"></i>
						<span class="input__label-content input__label-content--kohana">Time</span>
					</label>
				</span>
				<span class="input input--kohana">
					<input class="input__field input__field--kohana" type="text" id="input-30" />
					<label class="input__label input__label--kohana" for="input-30">
						<i class="fa fa-fw fa-bus icon icon--kohana"></i>
						<span class="input__label-content input__label-content--kohana">Line</span>
					</label>
				</span>
				<span class="input input--kohana">
					<input class="input__field input__field--kohana" type="text" id="input-31" />
					<label class="input__label input__label--kohana" for="input-31">
						<i class="fa fa-fw fa-phone icon icon--kohana"></i>
						<span class="input__label-content input__label-content--kohana">Phone</span>
					</label>
				</span>
			</section>
		</div><!-- /container -->
	</body>
</html>

              
            
!

CSS

              
                .input {
	position: relative;
	z-index: 1;
	display: inline-block;
	margin: 1em;
	max-width: 350px;
	width: calc(100% - 2em);
	vertical-align: top;
}

.input__field {
	position: relative;
	display: block;
	float: right;
	padding: 0.8em;
	width: 60%;
	border: none;
	border-radius: 0;
	background: #f0f0f0;
	color: #aaa;
	font-weight: 400;
	font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
	-webkit-appearance: none; /* for box shadows to show on iOS */
}

.input__field:focus {
	outline: none;
}

.input__label {
	display: inline-block;
	float: right;
	padding: 0 1em;
	width: 40%;
	color: #696969;
	font-weight: bold;
	font-size: 70.25%;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.input__label-content {
	position: relative;
	display: block;
	padding: 1.6em 0;
	width: 100%;
}

.graphic {
	position: absolute;
	top: 0;
	left: 0;
	fill: none;
}

.icon {
	color: #ddd;
	font-size: 150%;
}

/* Individual styles */

/* Manami */
.input--manami {
	overflow: hidden;
}

.input__field--manami {
	width: 100%;
	background: transparent;
	padding: 0.5em;
	margin-bottom: 2em;
	color: #f9f7f6;
	z-index: 100;
	opacity: 0;
}

.input__label--manami {
	width: 100%;
	position: absolute;
	text-align: left;
	padding: 0.5em 0;
	pointer-events: none;
	font-size: 1em;
}

.input__label--manami::before,
.input__label--manami::after {
	content: '';
	position: absolute;
	width: 100%;
	left: 0;
}

.input__label--manami::before {
	height: 100%;
	background: #A8A8A8;
	top: 0;
	-webkit-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);
	-webkit-transition: -webkit-transform 0.2s;
	transition: transform 0.2s;
}

.input__label--manami::after {
	height: 2px;
	background: #A8A8A8;
	top: 100%;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
}

.input__label-content--manami {
	padding: 0;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transition: -webkit-transform 0.2s, color 0.2s;
	transition: transform 0.2s, color 0.2s;
}

.input__field--manami:focus,
.input--filled .input__field--manami {
	opacity: 1;
	-webkit-transition: opacity 0s 0.2s;
	transition: opacity 0s 0.2s;
}

.input__label--manami::before,
.input__label--manami::after,
.input__label-content--manami,
.input__field--manami:focus,
.input--filled .input__field--manami {
	-webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
	transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
}

.input__field--manami:focus + .input__label--manami::before,
.input--filled .input__label--manami::before {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.input__field--manami:focus + .input__label--manami::after,
.input--filled .input__label--manami::after {
	opacity: 0;
}

.input__field--manami:focus + .input__label--manami .input__label-content--manami,
.input--filled .input__label--manami .input__label-content--manami {
	color: #cbc4c6;
	-webkit-transform: translate3d(0, 2.1em, 0) scale3d(0.65, 0.65, 1);
	transform: translate3d(0, 2.1em, 0) scale3d(0.65, 0.65, 1);
}

/* Nariko */
.input--nariko {
	overflow: hidden;
	padding-top: 2em;
}

.input__field--nariko {
	width: 100%;
	background: transparent;
	opacity: 0;
	padding: 0.35em;
	z-index: 100;
	color: #f18292;
}

.input__label--nariko {
	width: 100%;
	bottom: 0;
	position: absolute;
	pointer-events: none;
	text-align: left;
	color: #8E9191;
	padding: 0 0.5em;
}

.input__label--nariko::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 4em;
	top: 100%;
	left: 0;
	background: #fff;
	border-top: 4px solid #9B9F9F;
	-webkit-transform: translate3d(0, -3px, 0);
	transform: translate3d(0, -3px, 0);
	-webkit-transition: -webkit-transform 0.4s;
	transition: transform 0.4s;
	-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.input__label-content--nariko {
	padding: 0.5em 0;
	-webkit-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
	-webkit-transition: -webkit-transform 0.4s, color 0.4s;
	transition: transform 0.4s, color 0.4s;
	-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.input__field--nariko:focus,
.input--filled .input__field--nariko {
	cursor: text;
	opacity: 1;
	-webkit-transition: opacity 0s 0.4s;
	transition: opacity 0s 0.4s;
} 

.input__field--nariko:focus + .input__label--nariko::before,
.input--filled .input__label--nariko::before {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
	-webkit-transform: translate3d(0, -3.3em, 0);
	transform: translate3d(0, -3.3em, 0);
}

.input__field--nariko:focus + .input__label--nariko .input__label-content--nariko,
.input--filled .input__label-content--nariko {
	color: #6B6E6E;
	-webkit-transform: translate3d(0, -3.3em, 0) scale3d(0.81, 0.81, 1);
	transform: translate3d(0, -3.3em, 0) scale3d(0.81, 0.81, 1);
}

/* Nao */
.input--nao {
	overflow: hidden;
	padding-top: 1em;
}

.input__field--nao {
	padding: 0.5em 0em 0.25em;
	width: 100%;
	background: transparent;
	color: #9da8b2;
	font-size: 1.25em;
}

.input__label--nao {
	position: absolute;
	top: 0.95em;
	font-size: 0.85em;
	left: 0;
	display: block;
	width: 100%;
	text-align: left;
	padding: 0em;
	pointer-events: none;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transition: -webkit-transform 0.2s 0.15s, color 1s;
	transition: transform 0.2s 0.15s, color 1s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.graphic--nao {
	stroke: #92989e;
	pointer-events: none;
	-webkit-transition: -webkit-transform 0.7s, stroke 0.7s;
	transition: transform 0.7s, stroke 0.7s;
	-webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
	transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
} 

.input__field--nao:focus + .input__label--nao,
.input--filled .input__label--nao {
	color: #333;
	-webkit-transform: translate3d(0, -1.25em, 0) scale3d(0.75, 0.75, 1);
	transform: translate3d(0, -1.25em, 0) scale3d(0.75, 0.75, 1);
}

.input__field--nao:focus ~ .graphic--nao,
.input--filled .graphic--nao {
	stroke: #333;
	-webkit-transform: translate3d(-66.6%, 0, 0);
	transform: translate3d(-66.6%, 0, 0);
}

/* Shoko */
.input--shoko {
	overflow: hidden;
	padding-bottom: 2.5em;
}

.input__field--shoko {
	padding: 0;
	margin-top: 1.2em;
	width: 100%;
	background: transparent;
	color: #fff;
	font-size: 1.55em;
}

.input__label--shoko {
	position: absolute;
	top: 2em;
	left: 0;
	display: block;
	width: 100%;
	text-align: left;
	padding: 0em;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #A09C9C;
	pointer-events: none;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transition: -webkit-transform 0.2s 0.1s, color 0.3s;
	transition: transform 0.2s 0.1s, color 0.3s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}

.graphic--shoko {
	stroke: #A09C9C;
	pointer-events: none;
	stroke-width: 2px;
	top: 1.25em;
	bottom: 0px;
	height: 3.275em;
	-webkit-transition: -webkit-transform 0.7s, stroke 0.7s;
	transition: transform 0.7s, stroke 0.7s;
	-webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
	transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
} 

.input__field--shoko:focus + .input__label--shoko,
.input--filled .input__label--shoko {
	color: #A58282;
	-webkit-transform: translate3d(0, 3.5em, 0) scale3d(0.85, 0.85, 1);
	transform: translate3d(0, 3.5em, 0) scale3d(0.85, 0.85, 1);
}

.input__field--shoko:focus ~ .graphic--shoko,
.input--filled .graphic--shoko {
	stroke: #A58282;
	-webkit-transform: translate3d(-66.6%, 0, 0);
	transform: translate3d(-66.6%, 0, 0);
}

/* Yoshiko */
.input__field--yoshiko {
	width: 100%;
	background-color: #d0d1d0;
	border: 2px solid transparent;
	-webkit-transition: background-color 0.25s, border-color 0.25s;
	transition: background-color 0.25s, border-color 0.25s;
}

.input__label--yoshiko {
	width: 100%;
	text-align: left;
	position: absolute;
	bottom: 100%;
	pointer-events: none;
	overflow: hidden;
	padding: 0 1.25em;
	-webkit-transform: translate3d(0, 3em, 0);
	transform: translate3d(0, 3em, 0);
	-webkit-transition: -webkit-transform 0.25s;
	transition: transform 0.25s ;
	-webkit-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}

.input__label-content--yoshiko {
	color: #8B8C8B;
	padding: 0.25em 0;
	-webkit-transition: -webkit-transform 0.25s;
	transition: transform 0.25s;
	-webkit-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}

.input__label-content--yoshiko::after {
	content: attr(data-content);
	position: absolute;
	font-weight: 800;
	bottom: 100%;
	left: 0;
	height: 100%;
	width: 100%;
	color: #a3d39c;
	padding: 0.25em 0;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 0.85em;
}

.input__field--yoshiko:focus + .input__label--yoshiko,
.input--filled .input__label--yoshiko {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.input__field--yoshiko:focus + .input__label--yoshiko .input__label-content--yoshiko,
.input--filled .input__label-content--yoshiko {
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
}

.input__field--yoshiko:focus + .input__field--yoshiko,
.input--filled .input__field--yoshiko {
	background-color: transparent;
	border-color: #a3d39c;
}

/* Chisato */

.input--chisato {
	padding-top: 1em;
}

.input__field--chisato {
	width: 100%;
	padding: 0.8em 0.5em;
	background: transparent;
	border: 2px solid;
	color: #b5b5b5;
	-webkit-transition: border-color 0.25s;
	transition: border-color 0.25s;
}

.input__label--chisato {
	width: 100%;
	position: absolute;
	top: 0;
	text-align: left;
	overflow: hidden;
	padding: 0;
	pointer-events: none;
	-webkit-transform: translate3d(0, 3em, 0);
	transform: translate3d(0, 3em, 0);
}

.input__label-content--chisato {
	padding: 0 1em;
	font-weight: 400;
	color: #b5b5b5;
}

.input__label-content--chisato::after {
	content: attr(data-content);
	position: absolute;
	top: -200%;
	left: 0;
	color: #da6484;
	font-weight: 800;
}

.input__field--chisato:focus,
.input--filled .input__field--chisato {
	border-color: #da6484;
}

.input__field--chisato:focus + .input__label--chisato,
.input--filled .input__label--chisato {
	-webkit-animation: anim-chisato-1 0.25s forwards;
	animation: anim-chisato-1 0.25s forwards;
}

.input__field--chisato:focus + .input__label--chisato .input__label-content--chisato,
.input--filled .input__label-content--chisato {
	-webkit-animation: anim-chisato-2 0.25s forwards ease-in;
	animation: anim-chisato-2 0.25s forwards ease-in;
}

@-webkit-keyframes anim-chisato-1 {
	0%, 70% {
		-webkit-transform: translate3d(0, 3em, 0);
		transform: translate3d(0, 3em, 0);
	}
	71%, 100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes anim-chisato-2 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	70%, 71% {
		-webkit-transform: translate3d(0, 125%, 0);
		transform: translate3d(0, 125%, 0);
		opacity: 0;
		-webkit-animation-timing-function: ease-out;
	}
	100% {
		color: transparent;
		-webkit-transform: translate3d(0, 200%, 0);
		transform: translate3d(0, 200%, 0);
	}
}

@keyframes anim-chisato-1 {
	0%, 70% {
		-webkit-transform: translate3d(0, 3em, 0);
		transform: translate3d(0, 3em, 0);
	}
	71%, 100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes anim-chisato-2 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	70%, 71% {
		-webkit-transform: translate3d(0, 125%, 0);
		transform: translate3d(0, 125%, 0);
		opacity: 0;
		-webkit-animation-timing-function: ease-out;
	}
	100% {
		color: transparent;
		-webkit-transform: translate3d(0, 200%, 0);
		transform: translate3d(0, 200%, 0);
	}
}

/* Kozakura */
.input--kozakura {
	overflow: hidden;
	padding-bottom: 1em;
}

.input__field--kozakura {
	padding: 0.25em 0.5em;
	margin-top: 1.25em;
	width: 100%;
	background: transparent;
	color: #2F3238;
	font-size: 1.55em;
	opacity: 0;
}

.input__label--kozakura {
	width: 100%;
	text-align: left;
	position: absolute;
	top: 1em;
	pointer-events: none;
	overflow: hidden;
	padding: 0 0.25em;
	-webkit-transform: translate3d(1em, 2.75em, 0);
	transform: translate3d(1em, 2.75em, 0);
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.input__label-content--kozakura {
	color: #A4A5A6;
	padding: 0.4em 0 0.25em;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.input__label-content--kozakura::after {
	content: attr(data-content);
	position: absolute;
	font-weight: 800;
	top: 100%;
	left: 0;
	height: 100%;
	width: 100%;
	color: #fff;
	padding: 0.25em 0;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 0.85em;
}

.graphic--kozakura {
	fill: #494E57;
	pointer-events: none;
	top: 1em;
	bottom: 0px;
	height: 4.5em;
	z-index: -1;
	-webkit-transition: -webkit-transform 0.7s, fill 0.7s;
	transition: transform 0.7s, fill 0.7s;
	-webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
	transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
} 

.input__field--kozakura:focus,
.input--filled .input__field--kozakura {
	-webkit-transition: opacity 0s 0.35s;
	transition: opacity 0s 0.35s;
	opacity: 1;
}

.input__field--kozakura:focus + .input__label--kozakura,
.input--filled .input__label--kozakura {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.input__field--kozakura:focus + .input__label--kozakura .input__label-content--kozakura,
.input--filled .input__label-content--kozakura {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
	-webkit-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);
}

.input__field--kozakura:focus ~ .graphic--kozakura,
.input--filled .graphic--kozakura {
	fill: #fff;
	-webkit-transform: translate3d(-66.6%, 0, 0);
	transform: translate3d(-66.6%, 0, 0);
}

/* Makiko */
.input--makiko {
	overflow: hidden;
	background: #CBCBCB;
}

.input__field--makiko {
	width: 100%;
	background: transparent;
	color: #797693;
	z-index: 10;
	font-weight: 500;
}

.input__label--makiko {
	position: absolute;
	width: 100%;
	text-align: left;
	pointer-events: none;
	color: #fff;
}

.input__label--makiko::before {
	content: '';
	position: absolute;
	width: 30px;
	height: 30px;
	top: 45%;
	left: 20px;
	background: url(../img/search.svg) no-repeat center center;
	background-size: 100%;
	-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.7,0,0.3,1);
	transition: transform 0.4s cubic-bezier(0.7,0,0.3,1);
}

.input__label-content--makiko {
	display: block;
	padding: 1.5em 0 0 2.75em;
	-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.7,0,0.3,1);
	transition: transform 0.4s cubic-bezier(0.7,0,0.3,1);
}

.input__field--makiko:focus + .input__label--makiko::before,
.input--filled .input__label--makiko::before {
	-webkit-transform: scale3d(38, 38, 1);
	transform: scale3d(38, 38, 1);
}

/* Sae */
.input--sae {
	overflow: hidden;
	width: 200px;
	margin: 0 2em 2em;
}

.input__field--sae {
	background: transparent;
	width: 100%;
	color: #fff;
	padding: 1em 0 0.5em;
	font-weight: 500;
}

.input__label--sae {
	position: absolute;
	width: 100%;
	text-align: left;
	color: #7771ab;
	padding: 0;
	height: 100%;
	pointer-events: none;
}

.input__label--sae::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 2px;
	background: #fff;
	bottom: 0;
	-webkit-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0);
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.icon--sae {
	position: absolute;
	bottom: 0;
	font-size: 1em;
	opacity: 0.5;
	left: -30px;
	color: #fff;
	pointer-events: none;
	-webkit-transform: translate3d(205px, 0, 0);
	transform: translate3d(205px, 0, 0);
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.input__label-content--sae {
	padding: 0;
	font-size: 18px;
	display: inline-block;
	vertical-align: bottom;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: translate3d(0, 50px, 0);
	transform: translate3d(0, 50px, 0);
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.input__field--sae:focus + .input__label--sae .input__label-content--sae,
.input--filled .input__label-content--sae {
	-webkit-transform: translate3d(0, 0, 0) scale3d(0.7, 0.7, 1);
	transform: translate3d(0, 0, 0) scale3d(0.7, 0.7, 1);
}

.input__field--sae:focus + .input__label--sae::after,
.input--filled .input__label--sae::after {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.input__field--sae:focus + .input__label--sae .icon--sae,
.input--filled .icon--sae {
	-webkit-transition-delay: 0.01s;
	transition-delay: 0.01s;
	-webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, -90deg);
	transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, -90deg);
}

/* Fumi */
.input--fumi {
	background: #fff;
	overflow: hidden;
	padding: 0.25em 0;
}

.input--fumi::after {
	content: '';
	width: 1px;
	position: absolute;
	top: 0.5em;
	bottom: 0.5em;
	left: 2.5em;
	background: #f0f0f0;
	z-index: 100;
}

.input__field--fumi {
	background: transparent;
	padding: 1.5em 1em 0.25em 3.15em;
	width: 100%;
	color: #00aeef;
}

.input__label--fumi {
	position: absolute;
	width: 100%;
	text-align: left;
	padding-left: 4.5em;
	pointer-events: none;
}

.icon--fumi {
	width: 2em;
	position: absolute;
	top: 0;
	left: 0;
	padding: 1em 0 0 0.5em;
}

.input__label-content--fumi {
	padding: 1.7em 0;
	display: inline-block;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}

.input__label-content--fumi span {
	display: inline-block;
}

.input__field--fumi:focus + .input__label--fumi .input__label-content--fumi,
.input--filled .input__label-content--fumi {
	-webkit-animation: anim-fumi-1 0.3s forwards;
	animation: anim-fumi-1 0.3s forwards;
}

@-webkit-keyframes anim-fumi-1 {
	50% {
		-webkit-transform: translate3d(0, 3em, 0);
		transform: translate3d(0, 3em, 0);
	}
	51% {
		-webkit-transform: translate3d(0, -3em, 0) scale3d(0.85, 0.85, 1);
		transform: translate3d(0, -3em, 0) scale3d(0.85, 0.85, 1);
	}
	100% {
		color: #a3a3a3;
		-webkit-transform: translate3d(0, -1.1em, 0) scale3d(0.85, 0.85, 1);
		transform: translate3d(0, -1.1em, 0) scale3d(0.85, 0.85, 1);
	}
}

@keyframes anim-fumi-1 {
	50% {
		-webkit-transform: translate3d(0, 3em, 0);
		transform: translate3d(0, 3em, 0);
	}
	51% {
		-webkit-transform: translate3d(0, -3em, 0) scale3d(0.85, 0.85, 1);
		transform: translate3d(0, -3em, 0) scale3d(0.85, 0.85, 1);
	}
	100% {
		color: #a3a3a3;
		-webkit-transform: translate3d(0, -1.1em, 0) scale3d(0.85, 0.85, 1);
		transform: translate3d(0, -1.1em, 0) scale3d(0.85, 0.85, 1);
	}
}


.input__field--fumi:focus + .input__label--fumi .icon--fumi,
.input--filled .icon--fumi {
	-webkit-animation: anim-fumi-2 0.3s forwards;
	animation: anim-fumi-2 0.3s forwards;
}

@-webkit-keyframes anim-fumi-2 {
	50% {
		opacity: 1;
		-webkit-transform: translate3d(0, -3em, 0);
		transform: translate3d(0, -3em, 0);
	}
	50.25% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3em, 0);
		transform: translate3d(0, -3em, 0);
	}
	50.75% {
		opacity: 0;
		-webkit-transform: translate3d(0, 3em, 0);
		transform: translate3d(0, 3em, 0);
	}
	51% {
		opacity: 1;
		-webkit-transform: translate3d(0, 3em, 0);
		transform: translate3d(0, 3em, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		color: #00aeef;
	}
}

@keyframes anim-fumi-2 {
	50% {
		opacity: 1;
		-webkit-transform: translate3d(0, -3em, 0);
		transform: translate3d(0, -3em, 0);
	}
	50.25% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3em, 0);
		transform: translate3d(0, -3em, 0);
	}
	50.75% {
		opacity: 0;
		-webkit-transform: translate3d(0, 3em, 0);
		transform: translate3d(0, 3em, 0);
	}
	51% {
		opacity: 1;
		-webkit-transform: translate3d(0, 3em, 0);
		transform: translate3d(0, 3em, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		color: #00aeef;
	}
}


/* Ruri */
.input__field--ruri {
	width: 100%;
	background: transparent;
	padding: 0.5em 0;
	margin-bottom: 2em;
	color: #fff;
}

.input__label--ruri {
	width: 100%;
	position: absolute;
	text-align: left;
	font-size: 1em;
	padding: 10px 0 5px;
	pointer-events: none;
}

.input__label--ruri::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 7px;
	background: #B7C3AC;
	left: 0;
	top: 100%;
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
	transition: transform 0.3s, background-color 0.3s;
}

.input__label-content--ruri {
	padding: 0;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transition: -webkit-transform 0.3s, color 0.3s;
	transition: transform 0.3s, color 0.3s;
}

.input__field--ruri:focus + .input__label--ruri::after,
.input--filled .input__label--ruri::after {
	background: #a3d39c;
	-webkit-transform: scale3d(1, 0.25, 1);
	transform: scale3d(1, 0.25, 1);
}

.input__field--ruri:focus + .input__label--ruri .input__label-content--ruri,
.input--filled .input__label--ruri .input__label-content--ruri {
	color: #a3d39c;
	-webkit-transform: translate3d(0, 2em, 0) scale3d(0.655, 0.655, 1);
	transform: translate3d(0, 2em, 0) scale3d(0.655, 0.655, 1);
}

/* Kohana */
.input--kohana {
	overflow: hidden;
	background: #fff;
}

.input__field--kohana {
	width: 100%;
	background: transparent;
	padding-left: 2.75em;
	color: #6a7989;
}

.input__label--kohana {
	position: absolute;
	width: 100%;
	text-align: left;
	pointer-events: none;
	color: #D2D2D2;
}

.input__label-content--kohana {
	display: inline-block;
	width: auto;
	-webkit-transform: translate3d(-1.75em, 0, 0);
	transform: translate3d(-1.75em, 0, 0);
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
}

.icon--kohana {
	display: inline-block;
	margin-top: 0.9em;
	-webkit-transform: translate3d(-2em, 0, 0);
	transform: translate3d(-2em, 0, 0);
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.input__field--kohana:focus + .input__label--kohana .input__label-content--kohana,
.input--filled .input__label-content--kohana {
	opacity: 0;
	-webkit-transform: translate3d(100px, 0, 0);
	transform: translate3d(100px, 0, 0);
}

.input__label-content--kohana,
.icon--kohana,
.input__field--kohana:focus + .input__label--kohana .input__label-content--kohana,
.input--filled .input__label-content--kohana {
	-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.input__field--kohana:focus + .input__label--kohana .icon--kohana,
.input--filled  .icon--kohana {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
@import url(https://fonts.googleapis.com/css?family=Raleway:200,500,700,800);

@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'codropsicons';
	src:url('../fonts/codropsicons/codropsicons.eot');
	src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
		url('../fonts/codropsicons/codropsicons.woff') format('woff'),
		url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
		url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }

body {
	background: #f9f7f6;
	color: #404d5b;
	font-weight: 500;
	font-size: 1.05em;
	font-family: 'Raleway', Arial, sans-serif;
}

a {
	color: #2fa0ec;
	text-decoration: none;
	outline: none;
}

a:hover, a:focus {
	color: #404d5b;
}

.container {
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
}

.content {
	font-size: 150%;
	padding: 3em 0;
}

.content h2 {
	margin: 0 0 2em;
	opacity: 0.1;
}

.content p {
	margin: 1em 0;
	padding: 5em 0 0 0;
	font-size: 0.65em;
}

.bgcolor-1 { background: #f0efee; }
.bgcolor-2 { background: #f9f9f9; }
.bgcolor-3 { background: #e8e8e8; }
.bgcolor-4 { background: #2f3238; color: #fff; }
.bgcolor-5 { background: #df6659; color: #521e18; }
.bgcolor-6 { background: #2fa8ec; color: #fff;}
.bgcolor-7 { background: #d0d6d6; }
.bgcolor-8 { background: #3d4444; color: #fff; }
.bgcolor-9 { background: #8781bd; color: #fff; }
.bgcolor-10 { background: #6C6C6C; }

body .nomargin-bottom {
	margin-bottom: 0;
}

/* Header */
.codrops-header {
	padding: 3em 190px 4em;
	letter-spacing: -1px;
}

.codrops-header h1 {
	font-weight: 800;
	font-size: 4em;
	line-height: 1;
	margin: 0.25em 0 0;
}

.codrops-header h1 span {
	display: block;
	font-size: 50%;
	font-weight: 400;
	padding: 0.325em 0 1em 0;
	color: #c3c8cd;
}

/* Demos nav */
.codrops-demos a {
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 0.85em;
	display: inline-block;
	margin: 0 1em;
	font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.codrops-demos a.current-demo {
	border-bottom: 2px solid;
	color: #404d5b;
}

/* Top Navigation Style */
.codrops-links {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	font-size: 1.25em;
	text-align: center;
}

.codrops-links::after {
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -1px;
	width: 2px;
	height: 100%;
	background: #dbdbdb;
	content: '';
	-webkit-transform: rotate3d(0,0,1,22.5deg);
	transform: rotate3d(0,0,1,22.5deg);
}

.codrops-icon {
	display: inline-block;
	margin: 0.5em;
	padding: 0em 0;
	width: 1.5em;
	text-decoration: none;
}

.codrops-icon span {
	display: none;
}

.codrops-icon:before {
	margin: 0 5px;
	text-transform: none;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-family: 'codropsicons';
	line-height: 1;
	speak: none;
	-webkit-font-smoothing: antialiased;
}

.codrops-icon--drop:before {
	content: "\e001";
}

.codrops-icon--prev:before {
	content: "\e004";
}

/* Related demos */
.content--related {
	text-align: center;
	color: #D8DADB;
	font-weight: bold;
}

.media-item {
	display: inline-block;
	padding: 1em;
	vertical-align: top;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
}

.media-item__img {
	opacity: 0.8;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.media-item:hover .media-item__img,
.media-item:focus .media-item__img {
	opacity: 1;
}

.media-item__title {
	font-size: 0.75em;
	margin: 0;
	padding: 0.5em;
}

@media screen and (max-width: 50em) {
	.codrops-header {
		padding: 3em 10% 4em;
	}
}

@media screen and (max-width: 40em) {
	.codrops-header h1 {
		font-size: 2.8em;
	}
}

              
            
!

JS

              
                
              
            
!
999px

Console