body {
	margin-top: 10em;
	text-align: center;
	background: rgb(253,247,176);
}
	.button {
	display: inline-block;
	margin-right: 0.5em;
	box-shadow: inset 0px 1px 0px rgba(255,255,255,0.4),
						0px 0px 25px rgba(0,0,0,0.3);
	padding: 20px 20px;
	border: 1px solid #333399;
	font-size: 20px;
	font-weight: normal;
	color: #fff;
	text-shadow: 1px 1px 1px #17054c;
	border-radius: 3px;
	cursor: pointer;
	margin-bottom: 15px;
	background-color: rgb(51,51,204);
	}
		.button:hover {
	background-color: rgb(51,51,255);
	color: yellow;
		}
		.button:active {
			box-shadow: 0px 0px 25px rgba(0,0,0,0.3),
							inset 0px 0px 20px #17054c;
		}
	.overlay-container {
		display: none;
		content: " ";
		height: 100%;
		width: 100%;
		position: absolute;
		left: 0;
		top: 750px;
	}
	.window-container {
	display: block;
	background: #fcfcfc;
	width: 500px;
	padding: 10px;
	text-align: left;
	z-index: 3;
	border-radius: 3px;
	box-shadow: 0px 0px 30px rgba(0,0,0,0.2);
	-webkit-transition: 0.4s ease-out;
	-moz-transition: 0.4s ease-out;
	-ms-transition: 0.4s ease-out;
	-o-transition: 0.4s ease-out;
	transition: 0.4s ease-out;
	opacity: 0;
	margin-top: 8em;
	margin-right: auto;
	margin-bottom: 8em;
	margin-left: auto;
	}
	.zoomout {
		-webkit-transform:  scale(0.7);
		-moz-transform:  scale(0.7);
		-ms-transform:  scale(0.7);
		transform:  scale(0.7);
	}
	.window-container-visible {
		-webkit-transform:  scale(1);
		-moz-transform:  scale(1);
		-ms-transform:  scale(1);
		transform:  scale(1);
		opacity: 1;
	}
		.close {
		margin: 1em auto;
		display: block;
		width: 65px;
		background: #fafafa;
		border: 1px solid #aaa;
		padding: 5px 14px;
		color: #444;
		font-family: Helvetica, sans-serif;
		font-size: 12px;
		border-radius: 3px;
		box-shadow: 0 1px 3px #ddd;
		-webkit-transition: 0.2s linear;
		-moz-transition: 0.2s linear;
		-ms-transition: 0.2s linear;
		-o-transition: 0.2s linear;
		transition: 0.2s linear;
		cursor: pointer;
		}
			.close:hover {
				background: #fefefe;
				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
				border: 1px solid #aaa;
			}
			.close:active {
				background: #f4f4f4;
				box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
			}
@media screen and (max-width: 800px) {
	.overlay-container {
		top: 400px;
	}
	.window-container {
		width: 400px;
	}
}

@media screen and (max-width: 480px) {
	.button {
	padding: 10px 10px;
	border: 1px solid #333399;
	font-size: 16px;
	margin-bottom: 15px;
	}
	.overlay-container {
		top: 250px;
	}
	.window-container {
		width: 300px;
	}
}


