/*

PushIn.js
=========

CSS document for working sample.

PushIn.js is a plugin which can be attached to any
div element to simulate a dolly-in or push-in effect.

*/


/* CONSOLE FOR DEBUGING */




/* LAYOUT */


html {
	height: 100%;
	font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
	background: black;
}

body {
}

* {
	box-sizing: border-box;
	margin: 0;
	}

#wrapper {
	position: fixed;
	top: 0px;
	bottom: 0px;
	display: block;
	width: 100%;
	overflow: auto;
}

#scroller, .layer {
	display: block;
	width: 100%;
}

#scroller {
	position: absolute;
	height: 100%;
}

.layer {
	position: fixed;
	text-align: center;
	height: 100vh;
	opacity: 1.0;
	vertical-align: middle;
	font-size: 10em;
	color: #fdffb6;
}




/* LAYER 1 STYLING */

#layer1 {
	transform:scale(.5, .5);
}

.dot {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 20%;            /* Effects height and width together */
	margin: -20% 5%;
	top: 50%;
	border-radius: 50%;
}

/*
	Pseudo-class keeps aspect ratio when resizing
	http://www.mademyday.de/css-height-equals-width-with-pure-css.html
*/
.dot:before {
	content: '';
	display: inline-block;
	padding-top: 100%;      /* 1:1 aspect ratio */
}

.content {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	padding-top: 20%;
}


/* LAYER 2 STYLING */

h4 { position: relative; }

#layer2 h4,
#layer3 h4 {
	top: 50%;
	margin-top: -.75em;
}



/* FUNCTIONAL */


.layer {
	transition: opacity 1000ms ease;
}

.hide {
	width: 0px !important;
	height: 0px !important;
	color: transparent !important;
	opacity: 0 !important;
}



/* COLORS */

.yellow { background: rgb(255, 255, 230); }

.green  { background: rgb(200, 230, 200); }

.blue { background: rgb(200, 215, 230); }