body {
	font-family: "brandon-grotesque";
	background: #f9f9f9;
	color: #333339;
}

#logo {
	text-align: center;
	margin: auto;
    padding: 20px;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	height: 230px;
	max-width: 430px;
}

p {
	margin-top: 20px;
	margin-bottom: 10px;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 40px;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 20%, 0);
        transform: translate3d(0, 20%, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 20%, 0)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 20%, 0);
        transform: translate3d(0, 20%, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

a {
	text-decoration: none;
	font-weight: 500;
	border: 2px solid #333339;
	line-height: 1;
	padding: 16px 22px 14px;
	border-radius: 2px;
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-top: 32px;
	color: #333339;
	text-align: center;
}

a:hover {
	border-color: #ccc;
    color: #999;
}