@charset "UTF-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
}
body {
	background-color: #111111;
}
p, a, h1 {
	color: #ffffff;
	font-family: Helvetica, Arial, "sans-serif";
	line-height: 24px;
	font-size: .8rem;
	letter-spacing: 0.1em;
	margin-bottom: 20px;
	font-weight: 300;
	text-decoration: none;
	animation-name: fade;
	animation-duration: 1s;
	animation-delay: 2s;
	animation-fill-mode: backwards;
}
h1 {
	margin-bottom: 0;
	font-weight: bold;
}
footer {
	position: fixed;
	width: 100%;
	height: 100px;
	bottom: 0;
	background-image: -webkit-linear-gradient(rgba(17, 17, 17, 0), rgba(17, 17, 17, 1));
	background-image: -o-linear-gradient(rgba(17, 17, 17, 0), rgba(17, 17, 17, 1));
	background-image: linear-gradient(rgba(17, 17, 17, 0), rgba(17, 17, 17, 1));
	z-index: 1;
}
.hero-container {
	perspective: 1000px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -250px);
	width: 100%;
	max-width: 880px;
	opacity: 0;
	animation-name: hero;
	animation-duration: 1.2s;
	animation-delay: 1.5s;
	animation-fill-mode: forwards;
}
.hero {
	padding: 40px;
	animation-name: graphic;
	animation-duration: 1.2s;
	animation-delay: 1.5s;
	animation-fill-mode: forwards;
}
.tm-logo {
	width: 25%;
	min-width: 160px;
	margin-bottom: 40px;
}
.tm-graphic {
	height: 100%;
	width: 100%;
}
main {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(0, 180px);
	width: 30%;
	max-width: 400px;
	z-index: 1;
	padding-bottom: 150px;
}
.crossfit-logo img {
	position: fixed;
	width: 125px;
	bottom: 40px;
	right: 40px;
	margin: 0;
	padding: 0;
	z-index: 2;
}
.image1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 200px;
	height: 25%;
	max-height: 200px;
	background-image: url("images/image1@2x.jpg");
	background-size: cover;
	z-index: -1;
	opacity: .8;
	animation-name: image1;
	animation-duration: 1s;
	animation-delay: .5s;
	animation-fill-mode: backwards;
}
.image2 {
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 50vh;
	background-color: #222222;
	background-image: url("images/image2@2x.jpg");
	background-size: cover;
	background-position: center;
	z-index: -1;
	opacity: .8;
	animation-name: image2;
	animation-duration: 1s;
	animation-delay: .8s;
	animation-fill-mode: backwards;
}
.image3 {
	position: absolute;
	bottom: -10%;
	left: 150px;
	width: 30%;
	height: 60vh;
	background-color: #222222;
	background-image: url("images/image3@2x.jpg");
	background-size: cover;
	background-position: center;
	opacity: .8;
	z-index: -1;
	animation-name: image3;
	animation-duration: 1s;
	animation-delay: 1.2s;
	animation-fill-mode: backwards;
}
a:hover {
	opacity: 0.5;
	transition: 0.3s;
}
.contact {
	position: fixed;
	bottom: 40px;
	left: 40px;
	color: #ffffff;
	z-index: 2;
	width: 600px;
	font-size: .7rem;
}
.contact a, .contact p {
	display: inline-block;
	margin-right: 30px;
	font-size: .7rem;
	margin-bottom: 0;
}
.contact p {
	color: #aaaaaa;
}

.insta {
	position: relative;
	top: 2px;
}

.address p, .address a {
	font-size: .7rem;
	color: #aaaaaa;
	line-height: 20px;
	margin-top: 50px;
}

.address a {
	color: #ffffff;
}

.address span {
	display: block;
}

::selection {
	background: #ffffff;
	color: #000000;
}
::-moz-selection {
	background: #ffffff;
	color: #000000;
}
@keyframes hero {
	from {
		opacity: 0;
		top: 60%;
	}
	to {
		opacity: 1;
		top: 50%;
	}
}
@keyframes graphic {
	from {
		transform: rotateX(-30deg);
	}
	to {
		transform: rotateX(0deg);
	}
}
@keyframes hero-m {
	from {
		opacity: 0;
		margin-top: 25vh;
	}
	to {
		opacity: 1;
		margin-top: 15vh;
	}
}
@keyframes image1 {
	from {
		opacity: 0;
		left: -50px;
	}
	to {
		opacity: 0.8;
	}
}
@keyframes image2 {
	from {
		opacity: 0;
		top: -50px;
	}
	to {
		opacity: 0.8;
	}
}
@keyframes image3 {
	from {
		opacity: 0;
		left: 200px;
	}
	to {
		opacity: 0.8;
	}
}
@keyframes image3-m {
	from {
		opacity: 0;
		left: 40px;
	}
	to {
		opacity: 0.8;
	}
}
@keyframes fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@media only screen and (max-width: 940px) {
	.crossfit-logo img {
		width: 100px;
	}
	.hero {
		padding-left: 12%;
		padding-right: 12%;
	}
	.contact p {
		margin-top: 4px;
	}
	.hero-container {
		position: relative;
		margin-top: 15vh;
		left: 0;
		transform: translate(0, 0);
		animation-name: hero-m;
	}
	main {
		position: relative;
		transform: translate(0, 0);
		left: 35%;
		width: 55%;
		max-width: none;
	}
	.intro {
		padding-left: 12%;
		padding-right: 12%;
		padding-top: 20px;
	}
	footer {
		position: fixed;
		width: 100%;
		height: 180px;
		bottom: 0;
		background-image: -webkit-linear-gradient(rgba(17, 17, 17, 0), rgba(17, 17, 17, 1), rgba(17, 17, 17, 1));
		background-image: -o-linear-gradient(rgba(17, 17, 17, 0), rgba(17, 17, 17, 1), rgba(17, 17, 17, 1));
		background-image: linear-gradient(rgba(17, 17, 17, 0), rgba(17, 17, 17, 1), rgba(17, 17, 17, 1));
	}
	.image3 {
		top: 50vh;
		left: 0;
		width: 35%;
		height: 40vh;
		animation-name: image3-m;
	}
	.image2 {
		height: 40vh;
	}
}
@media only screen and (max-width: 600px) {
	.hero {
		padding-left: 10%;
		padding-right: 10%;
	}
	.intro {
		padding-left: 10%;
		padding-right: 10%;
	}
	.image1 {
		width: 100px;
		height: 100px;
	}
	.image2 {
		width: 50%;
		height: 200px;
	}
	.image3 {
		top: 40vh;
		height: 200px;
	}
	.contact {
		width: 300px;
		left: 10%;
	}
	.divider {
		visibility: hidden;
	}
	.crossfit-logo img {
		right: 10%;
	}
	main {
		left: 0%;
		width: 100%;
	}
}

@media only screen and (max-width: 400px) {
	.crossfit-logo img {
	width: 80px;
	}
	footer {
		height: 200px;
	}
	.contact {
		width: 230px;
	}
	.insta {
		top: 0px;
}
	main {
		padding-bottom: 200px;
	}
}