@import "http://fonts.googleapis.com/css?family=Gabriela|Dosis:200";







.overlay {
	pointer-events: none;
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0
}



.container2 {
	position: absolute;
	height: 100%;
	width: 100%
}



.big-font{
	font-size:50px;
}

.wrapper {
	transition: opacity .4s ease-out;
	margin: -21.5% -180px;
	text-align: center;
	position: absolute;
	height: 560px;
	width: 360px;
	left: 50%;
	top: 50%;
	color:#fff
}

.header2 {
	margin-bottom: 80px
}

.information {
	margin-bottom: 60px
}

.footer {
	font-family: Baskerville,sans-serif;
	font-size: 30px
}

.footer a {
	text-transform: uppercase;
	font-size: 11px
}

.footer .handle {
	font-style: italic
}

.controls {
	font-smoothing: subpixel-antialiased;
	position: absolute;
	right: 20px;
	top: 0
}

.vignette {
	background-image: -webkit-radial-gradient(50% 50%,ellipse,rgba(0,0,0,0) 40%,rgba(0,0,0,1) 100%);
	background-image: radial-gradient(50% 50%,ellipse,rgba(0,0,0,0) 40%,rgba(0,0,0,1) 100%)
}

.noise {
	background-image: url(../graphics/noise.png);
	opacity: .075
}

.hide {
	opacity: 0
}

@media screen and (min-width: 801px) and (max-width: 1024px) {
.wrapper {

    margin: -45.5% -260px;

}
}

@media screen and (max-width: 768px) {

.wrapper {
    margin: -35% -380px;
}
}

@media screen and (max-width: 600px) {
.wrapper {

    margin: -55% -180px;

}

}

@media screen and (max-width: 400px) {
	.wrapper {
    margin: -115% -180px;
}
}