body, html {
  overflow-x: hidden;
  }

  body {
    font: 1vw 'Helvetica Neue';
    font-weight: 300;
	text-align: center;
  }

  * {
    margin:0;
    padding:0;
  }

  .parallax {
    font-size: 1.5em;
  }

h1, p {
		font-family: 'Helvetica', 'Arial', sans-serif;
}
h1, h2, h3 { padding: 0 0 .5em 0; 
		font-family: "purista-web", sans-serif;
		text-transform: uppercase; 
		line-height: 1em;
		text-align: left;
		}
p { 
	padding: 0 0 1em 0;
	margin: 1em 3%;
	text-align: left;
	}
ul, ol, li {
	text-align: left;
	font-family: 'Helvetica', 'Arial', sans-serif;
}
.top, .right, .bottom, .left { position: absolute; text-align: left; }
.top { top: 0; }
.right { right: 0; }
.bottom { bottom: 0; }
.left { left: 0; }
.middle { top: 25%; bottom: 25%; }
.center { margin-left: auto; margin-right: auto; clear: both; text-align: center; }
.halfway_up {
	margin-top: -50vh;
	position: relative;
}

.box {
	background: #F08D1D; color: #F08D1D; border-radius: .25em;
}

.front { z-index: 1000; }

header {
	}
nav {
	top: 0;
	position: fixed;
	height: auto;
	width: 100%;
	z-index: 1000;
	
	margin: 0;
	padding: 2em 5%;
	width: 90%;
	height: 3em;
	background: rgba(255,150,0,.1);
	background: rgba(128,128,128,.5);
	background: rgba(255,255,255,.5);
	background: rgba(0,0,0,.25);
	line-height: 1em;
	display: flex;
	
	color: white;
}
.start {
	margin: 0 5em 0 0;
	padding: 0;
}
nav img {
left: 0;
margin: .25em 2% 0 0;
max-width: 20.75em;
/* max-width: 18%; */
height: 2.5em;
		flex: 1 0 0px;
		float: left;
		}
	nav ul {
/*
	margin-top: -1em;
		max-width: 80%;
*/
		float: right;
		}
	nav li {
		flex: 1 0 0px;
	}
	nav li a {
		padding: .5em 1em;
		margin: 0 .25em;
		min-width: 10%;
		height: 50%;
/* 		max-height: 1em; */
		display: block;
		background: rgba(0,0,0,.25);
		background: rgba(255,255,255,.5);
		background: rgba(0,0,0,.5);
		background: rgba(50,50,50,.75);
		background: transparent;
		border-radius: .25em;
		transition: .5s background ease;
		color: white;
		font-weight: bold;
		font-size: 1.5em;
		line-height: 1em;
		text-transform: uppercase;
		text-decoration: none;
		font-family: "purista-web", sans-serif;
		box-shadow: inset 0 0 0 1px rgba(255,255,255,.95);
		text-align: center;
		
	}
	nav li a:hover, nav li a.active {
		background: rgba(255,150,0,.95);
		color: white;
		box-shadow: inset 0 0 0 1px rgba(255,255,255,.95);
	}
	nav a.start {
		border: none;
		color: white;
		
	}
	
	nav.compact {
	padding: 1em 5%;
	font-size: .75em;
		background: rgba(50,50,50,.75);
	}
		nav.compact img {
			flex-grow: 1.5;
		}
		svg.logotype_color {
			fill: pink;
			color: pink;
			border: 1px solid currentColor;
		}
#content {
	min-height: 100vh;
	width: 100vw;
	overflow-x: hidden;
	padding-bottom: 3em;
	}
	#intro {
	transition: .25s all ease;
	}
	#intro img {
	margin: -1em 0 0 1em;
	width: 57%;
	transform: translate3d(0, -3em, 0) scale3d(.8,.8,1);
	filter: drop-shadow( 0 0 1em white );
	transition: 1s all ease;
/*  	-webkit-shape-outside: url(logo-swimrun_mask.png); */
	float: left;
	opacity: 1;
	}
	#intro h1, #intro h2, #intro h3 {
	display: block;
	margin: 0 3% 0 0;
		font-size: 1.5em;
		width: 27%;
		float: right;
		text-align: left;
	}
	#intro h2, #intro h3 {
		margin: 0 3% 0 0;
		line-height: 3em;
	}
	#intro p {
	margin: 0 3% 0 0;
		width: 27%;
		float: right;
	}
		#intro.fixate img {
		transform: translate3d(10%, -25vw, 0) scale3d(1,1,1);
		}

.splash {
	z-index: 100;
	right: 7%;
	bottom: 14%;
	width: 20%;
}

.c_6>h1, .c_6>h2, .c_6>h3, .c_6>p, .c_6>ul, .c_6>ol, .c_6>img, .c_6>iframe, .c_6>div, .c_6>svg {
	width: 10.6666667%;
	float: left;
	margin: 1em 2.5% 1em 3.5%;
	border: none;
	z-index: 10;
}

.c_5>h1, .c_5>h2, .c_5>h3, .c_5>p, .c_5>ul, .c_5>ol, .c_5>img, .c_5>iframe, .c_5>div, .c_5>svg {
	width: 14%;
	float: left;
	margin: 1em 2.5% 1em 3.5%;
	border: none;
	z-index: 10;
}

.c_4>h1, .c_4>h2, .c_4>h3, .c_4>p, .c_4>ul, .c_4>ol, .c_4>img, .c_4>iframe, .c_4>div, .c_4>svg {
	width: 19%;
	float: left;
	margin: 1em 2.5% 1em 3.5%;
	border: none;
	z-index: 10;
	}

.c_3>h1, .c_3>h2, .c_3>h3, .c_3>p, .c_3>ul, .c_3>ol, .c_3>img, .c_3>iframe, .c_3>div, .c_3>svg, .c_3>a {
	width: 27%;
	float: left;
	margin: 1em 2.5% 1em 3.5%;
	border: none;
	z-index: 10;
	}
	.c_3x>h1, .c_3x>h2, .c_3x>h3, .c_3x>p, .c_3x>ul, .c_3x>ol, .c_3x>img, .c_3x>iframe, .c_3x>div, .c_3x>svg, .c_3x>a {
		width: 33%;
		float: left;
		margin: 1em 0 1em 0;
		border: none;
		z-index: 10;
		}
		.c_3x>div {
			width: 31%;
			}
			.c_3x>div:nth-child(1) {
				margin-left: 3.5%;
				}
.c_2>h1, .c_2>h2, .c_2>h3, .c_2>p, .c_2>ul, .c_2>ol, .c_2>img, .c_2>iframe, .c_2>div, .c_2>svg {
	width: 44%;
	float: left;
	margin: 1em 2.5% 1em 3.5%;
/* 	border-radius: .25em; */
	border: none;
	z-index: 10;
	}
.c_1>h1, .c_1>h2, .c_1>h3, .c_1>p, .c_1>ul, .c_1>ol, .c_1>img, .c_1>iframe, .c_1>div, .c_1>svg {
	width: 94%;
	float: left;
	margin: 1em 2.5% 1em 3.5%;
/* 	border-radius: .25em; */
	border: none;
	z-index: 10;
}
.c_4 h1, .c_4 h2, .c_4 h3, .c_4 p, .c_4 ul, .c_4 ol, 
.c_3 h1, .c_3 h2, .c_3 h3, .c_3 p, .c_3 ul, .c_3 ol, 
.c_2 h1, .c_2 h2, .c_2 h3, .c_2 p, .c_2 ul, .c_2 ol, 
.c_1 h1, .c_1 h2, .c_1 h3, .c_1 p, .c_1 ul, .c_1 ol {
	margin: .5em 2.5% 0 3.5%;
}
.c_3 .media img, .c_3 .media iframe, .c_3x .media img, .c_3x .media iframe { 
	width: 100%;
	float: left;
}

hr {
	clear: both;
	border: none;
}
nav ul {
	float: left;
	display: flex;
		font-family: "purista-web", sans-serif;
		text-transform: uppercase;
		width: 100%;
	}
nav ul li {
	display: block;
	flex-grow: 1;
    flex-direction: column;
    height: auto;
}
nav ul li:hover ul {
	opacity: 1;
	min-height: 100%;
	height: auto;
}
nav ul li ul {
	opacity: 1;
	height: 0;
	overflow: hidden;
	display: block;
	background: white;
	margin: 0 5%;
	width: 90%;
		border-radius: 0 0 .5em .5em;
	box-shadow: 0 1em 1em rgba(0,0,0,.1);
	}
nav ul li ul li {
margin-top: -1px;
	width: 100%;
	padding: 0;
}
nav ul li ul li a {
margin: 0;
border-radius: 0;
	line-height: 1em;
	height: 1em;
	background: white;
	color: black;
	transition: .25s all ease;
	font-size: 1.5em;
}
	nav ul li ul li:last-child a {
		border-radius: 0 0 .3em .3em;
	}
	nav ul li ul li:hover, li:hover>a {
	background: rgba(255,150,0,.95);
		color: white;
	}
	
footer.hidden {
	opacity: 0;
}
.c_3 .full {
	width: 100%;
}
.c_3 .two_thirds {
	width: 60%;
}
.c_3 .half, .c_2 .half {
	width: 44%;
}
.video {
	height: 32vw;
}

footer {
float: left;
	position: relative;
	margin-top: 0;
	padding: 1em 0;
	width: 100%;
	min-height: 3em;
	background: rgba(0,0,0,.75);
	color: white;
	font-size: 150%;
	font-family: 'purista-web', 'Helvetica', 'Arial';
	transition: .25s all ease;
}
.large_vh {
	height: 100vw;
}
.group {
	width: 94%;
	padding: 0 3%;
}
#group1 { height: 100vh; width: 100%; padding: 0; }
#group1 .page_description {
width: 100%;
	bottom: 0;
	padding-bottom: 4em;
	left: 0;
	position: absolute;
	background: rgba(255,255,255,1);
	box-shadow: 0 7em 10em 3em rgba(255,255,255,1);
}
#group1 h1 {
	font-size: 5em;
	padding-bottom: .5em;
	text-align: left;
}



.image_background {
  position: relative;
  overflow: hidden;
  /* Width and height can be anything. */
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  box-shadow: inset 0 -10em 5em -5em white, 0 1em 1em white;
}

.image_background img {
  position: absolute;
  /* Position the image in the middle of its container. */
  top: -9999px;
  right: -9999px;
  bottom: -9999px;
  left: -9999px;
  margin: auto;
  /* The following values determine the exact image behaviour. */
  /* You can simulate background-size: cover/contain/etc.
     by changing between min/max/standard width/height values.
     These values simulate background-size: cover
  */
  min-width: 100%;
  min-height: 100%;
}
#parallax_overlay {
	position: absolute;
	width: inherit;
	height: inherit;
	top: 0;
	z-index: 10;
	box-shadow: inset 0 -25vh 15vh -10vh white, 0 0 20vh 20vh white;
	opacity: .75;
}
#parallax_background {
	z-index: 0;
}
.grain { 
  position: absolute;
  top: 0;
	background: url("assets/grain.png"); 
	width: 100%; 
	height: 100%;
	box-shadow: inset 0 -10em 5em -5em white;
	}
	
div.media {
	position: relative;
	overflow: hidden;
	box-shadow: 0 0 3em rgba(0,0,0,.25);
	}
	div.media img {
		margin: 0;
	}
.byline {
	position: absolute;
	bottom: 0;
	padding: 1% 3%;
	width: 96%;
	opacity: .2;
	background: rgba(0,0,0,.1);
	box-shadow: inset 15em 0 10em -5em rgba(0,0,0,.25);
	color: white;
	font-family: 'purista-web', 'Helvetica', 'Arial';
	text-transform: uppercase;
	font-size: .75em;
	z-index: 100000;
	}
	.byline:before {
		content: "By: ";
		}
	.byline:after {
		content: " © 2016";
		}
	.byline>a:link, .byline a:visited, .byline a:hover, .byline a:active {
		color: white;
		text-decoration: none;
		font-weight: bold;
		padding: .25em .5em;
	transition: .25s background ease;
	}
	.byline a:hover {
		background: rgba(0,0,0,.5);
	}
div.media:hover .byline, .image_background:hover .byline {
	opacity: 1;
	}
	.media .byline {
		transform: rotate(-90deg);
		bottom: 64%;
		bottom: 70%;
		left: -51%;
		box-shadow: inset 10em 0 5em -5em rgba(0,0,0,.5);
		}
		.media.half .byline {
			left: -52%;
			}
		.two_thirds > .media .byline {
			left: -52.5%;
			}
	.image_background .byline {
	position: absolute;
		z-index: 1000;
		bottom: 50vw;
		left: -55vw;
		transform: rotate(-90deg);
		height: 1vw;
		width: 100vw;
		text-align: left;
	background: transparent;
	box-shadow: none;
	color: black;
	}
	.image_background .byline:before {
		content: "Cover photo by: ";
		}
	.image_background:hover .byline { 
		box-shadow: inset 20em 0 5em -5em rgba(255,255,255,1);
	}
	.image_background .byline>a:link, .image_background .byline a:visited, .image_background .byline a:hover, .image_background .byline a:active {
	background: transparent;
	color: black; 
	}
	.image_background .byline a:hover {
		background: rgba(0,0,0,.75);
		color: white;
		border-radius: .25em;
	}
#group1.slim, .slim .image_background {
	height: 20vh;
}

#group1.half_height, .half_height .image_background {
	height: 50vh;
}
#group2 {
	z-index: 10;
	position: relative;
	
}

div.article {
	display: block;
	background: white;
	box-shadow: 0 1em 2em -1em rgba(0,0,0,.25);
	border-radius: 0 0 .25em .25em;
	overflow: hidden;
}
.news {
	padding-bottom: 3em;
}
div.social {
	padding-top: 3em;
}
a.social {
	margin-top: 0;
	transition: .25s all ease;
	padding: 1.15em 0;
	border-radius: .25em;
	box-shadow: inset 0 0 0 1px white;
	}
a.social svg.social {
	fill: white;
	width: 50%;
}
a.social:hover {
	background: rgb(255,150,0);
}
a.social:hover svg.social {
}
.rounded {
	border-radius: 1em;
	}
.splash_button {
	display: flex;
	width: 105%;
	height: 105%;
	position: absolute;
	top: -.5em;
	left: -.6em;
	margin: 0;
	padding: 0;
	transition: .25s background ease;
	}
	.splash_button a {
		width: 100%;
		height: 35%;
		text-align: center;
		padding: 0;
		padding: 20% 0 45% 0;
		flex: 1 0 0px;
		font-size: 2.75em;
		text-decoration: none;
		text-transform: uppercase;
		font-weight: bold;
		font-family: "purista-web", sans-serif;
		color: inherit;
		}
	.splash_button.black {
		background: rgba(0,0,0,.5);
		color: white;
		box-shadow: inset 0 0 3em 1em rgba(0,0,0,.5);
		}
		.splash_button.black:hover {
			background: rgba(0,0,0,.75);
			}
		.splash_button.black:hover a {
/* 			border-bottom: 1em double rgba(255,255,255,1); */
			}
	.splash_button.orange {
		background: rgba(255,150,0,.65);
		color: white;
		box-shadow: inset 0 0 3em 1em rgb(255,150,0);
		}
		.splash_button.orange:hover {
			background: rgba(255,150,0,.9);
			}
		.splash_button.orange:hover a {
/* 			border-bottom: 1em double rgba(255,255,255,1); */
			}
	.splash_button.white {
		background: rgba(255,255,255,.75);
		color: rgb(255,150,0);
		color: black;
		text-shadow: 0 0 .5em white;
		box-shadow: inset 0 0 3em 1em rgb(255,255,255);
		}
		.splash_button.white:hover {
			background: rgba(255,255,255,.9);
			}
		.splash_button.white:hover a {
/* 			border-bottom: 1em double rgba(255,150,0,1); */
			}
			
.up_half {
	margin-top: -38vh;
	background: rgba(255,255,255,.75);
	box-shadow: 0 -3em 3em 3em rgba(255,255,255,.75);
	}
	
	

.results {
	width: 100%;
	}
.results h2 {
	margin-top: 2em;
}
.result {
	width: 100%;
	display: table;
	border-bottom: 1px solid rgba(0,0,0,.1);
	padding: .2em 0;
	float: left;
	}
	.result.header p{
		font-family: "purista-web", sans-serif;
		font-weight: bold;
		}
	.result p {
		display: table-cell;
		min-width: 3em;
		width: 12%;
		margin: 0;
		padding: .25em 1%;
		float: left;
		}
	.result p:nth-child(1) {
		width: 5%;
		text-align: right;
		}
	.result p:nth-child(2) {
		width: 5%;
		}
	.result p:nth-child(3) {
		width: 42%;
		}
	.result p:nth-child(4) {
		width: 8%;
		text-align: center;
		}
	.result p:nth-child(5) {
		width: 14%;
		text-align: right;
		}
	.result p:nth-child(6) {
		width: 13%;
		text-align: right;
		}
		
		.first, .second, .third { color: white; font-weight: bold; border-radius: 0 1em 1em 0; }
		.first { box-shadow:inset -3em 0 1em -1em gold; }
		.second { box-shadow:inset -3em 0 1em -1em silver; }
		.third { box-shadow:inset -3em 0 1em -1em rgb(200,100,0); }
		
	iframe.register {
	border: none;
	width: 100%;
		height: 112em;
		overflow: hidden;
	}
	
.inverted_text {
	color: white;
	text-shadow: 0 0 .5em black;
	}
	.inverted_text:hover {
		background: rgba(0,0,0,.5);
		}
		
form.contact {
	width: 100%;
	}
	form.contact input, form.contact label, form.contact textarea {
		width: 100%;
		padding: .25em;
		margin: 1em 0 0 0;
		font-size: 1em;
		border: 1px solid rgba(0,0,0,.25);
		-webkit-appearance: none;
		border-radius: .25em;
		float: left;
		}
		form.contact label {
			display: block;
			width: 5%;
			border: none;
			text-align: left;
			font-family: "purista-web", sans-serif;
			}
		form.contact input, form.contact textarea {
			width: 90%;
			float: right;
			}
		form.contact input[type="submit"] {
			background: transparent;
			width: 100%;
			float: left;
			font-size: 2em;
			color: black;
			text-transform: uppercase;
			font-family: "purista-web", sans-serif;
			font-weight: bold;
			transition: .25s all ease;
			}
		form.contact input[type="submit"]:hover {
			background: rgb(255,150,0);
			color: white;
			border: 1px solid white;
			}
hr.black {
	border-top: 1px solid rgba(0,0,0,.75);
	margin-bottom: 2em;
	}
	


/*				 	------------------------------------------------------------ */
/*	iPhone 5" or lower (portrait)		 ---------------------------------------------- */
/*				 	------------------------------------------------------------ */
		
@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 667px) 
and (orientation: portrait)
	{
	body {
		font-size: 3vw;
		width: 100vw;
		min-height: 100vh;
		}
		nav {
			display: block;
			height: 13em;
			width: 96vw;
			padding: 0 2vw;
			box-shadow: inset 0 -12em 6em -6em rgba(0,0,0,.25);
			}
			nav > a img {
				height: 5em;
				max-width: 86vw;
				padding: 0 5vw;
				}
			nav > ul {
				width: 96vw;
				display: flex;
				margin-top: 1em;
				}
			nav ul li a, nav ul ul li a {
				padding: 1em;
				line-height: 1.2em;
				height: inherit;
				min-height: 2.5em;
				flex: 1px 0 0;
				padding: .25em;
				}
				nav > ul > li:nth-child(2) a, nav > ul > li:nth-child(3) a {
					padding: .75em 0 0 0;
					min-height: 2.25em;
					}
				nav ul li ul {
					margin-left: 1em;
					max-width: 9em;
					overflow-x: hidden;
				}
				nav ul li ul li, nav ul li ul li a {
					width: 100%;
					}
				nav ul li ul li a, nav ul li:nth-child(2) ul li a {
					padding: .25em 0;
					min-height: 1.2em;
					}
	div.c_1 *, div.c_2 *, div.c_3 *, .two_thirds {
		min-width: 94%;
		max-width: 94%;
		width: 94%;
		padding: 0;
		}
		div.c_3x * {
			font-size: 1em;
			}
			div.c_3x a {
				padding-left: 1em;
				}
		img.media {
			min-width: 100%;
			}
		iframe.media {
			min-height: 60vw;
		}
	.image_background img {
		max-height: 20em;
		}
		.splash {
			width: 40vw;
			margin-bottom: -3em;
		}
	#group1 {
		padding-bottom: 2em;
	}
	footer {
		text-align: center;
		}
	footer div:nth-child(2) a {
		min-width: 23%;
		max-width: 23%;
		float: left;
		margin: 1em 2.5% 1em 3.5%;
		padding: 4.5% 2% 3.5% 2%;
		border: none;
		z-index: 10;
		}
		footer div:nth-child(2) a svg {
			min-width: 80%;
			max-width: 80%;
			}
		.result.header {
			margin-top: 1em;
			}
	.result p {
		font-size: .5em;
		min-width: 3em;
		padding: .2em;
	}
	.partners > .c_2 img {
		min-width: 3em;
		max-width: 44%;
		}
	.partners > .c_3 img {
	min-width: 3em;
		max-width: 27%;
		}
}
@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 667px) 
and (orientation: landscape) 
	{
	.image_background img {
	max-height: 60em;
		}
}