:root {
		--main-spacing: 30px
	}
	body {
		background-color: #fff;
	}
	body.noscroll {
		overflow: hidden;
	}

	h1,h2,h3 {
		font-family: futura-pt-condensed, sans-serif;
		font-weight: 800;
	}
	h2,h3 {
		color: #F96224;
	}
	h2 {
		text-align: center;
	}

	@keyframes gradient {
		0% {
			background-position: 0% 50%;
		}
		50% {
			background-position: 100% 50%;
		}
		100% {
			background-position: 0% 50%;
		}
	}

	section, hr {
		margin-bottom: 30px;
		margin-bottom: var(--main-spacing, 30px);
	}

	#downloads .alternative-downloads {
		color: #F96224;
	}
	p a:only-child,
	.play-button,
	#downloads .alternative-downloads {
		display: inline-block;
		border: 1px solid currentColor;
		border-radius: 5px;
		padding: 0.3em 1.5em;
		margin-top: 1em;
		margin-bottom: .1em;
		font-family: futura-pt-condensed, sans-serif;
		font-size: 22px;
		font-weight: 500;
		letter-spacing: 3px;
		text-transform: uppercase;
		text-decoration: none;
		transition: all .2s ease-out;
	}
	p a:only-child:hover,
	#downloads .alternative-downloads:hover {
		letter-spacing: 5px;
		text-decoration: none;
		padding-top: .4em;
		padding-bottom: .4em;
		margin-bottom: 0;
		margin-top: .9em;
	}
	#hero p a:only-child, #videos-list p a:only-child {
		color: #fff;
	}
	#hero p a:only-child:active, #videos-list p a:only-child:active {
		background-color: #fff;
		color: #F96224;
		border-color: #fff;
	}
	#downloads .alternative-downloads:active, p a:only-child:active {
		background-color: #F96224;
		color: #fff;
		border-color: #F96224;
	}

	#hero {
		min-height: 100vh;
		padding: 30px 0 60px;
		padding: 30px 0 var(--main-spacing, 60px);
		background: linear-gradient(-45deg, #F4AF2D, #F96224, #D4342E);
		background-size: 300% 300%;
		animation: gradient 5s ease infinite;
		color: #fff;
	}
	#hero h1 {
		margin-top: 110px;
		margin-bottom: 70px;
		font-size: 84px;
		line-height: 1;
	}
	#hero h1.smaller {
		font-size: 68px;
		margin-top: 40px;
		margin-bottom: 30px;
	}
	#hero p {
		font-weight: 600;
		font-size: 18px;
	}
	#hero .home {
		text-align: right;
	}
	#hero .home-link {
		color: #fff;
		text-transform: uppercase;
		text-decoration: underline;
		font-size: 20px;
		font-family: futura-pt-condensed, sans-serif;
		letter-spacing: 3px;
	}

	#progress-bar {
		position: relative;
		border: 2px solid #fff;
		border-radius: 4px;
		font-size: 1.6em;
		text-align: center;
		padding: 4px;
		margin-top: 60px;
		margin-top: var(--main-spacing, 60px);
	}
	#progress-bar .placeholder {
		margin: 0;
		margin-left: -4px;
		font-size: inherit;
		line-height: 1.3em;
	}
	#progress-bar > .placeholder {
		position: absolute;
		top: 4px;
		bottom: 4px;
		left: 4px;
		right: 4px;
		z-index: 1;
	}
	#progress-bar .bar {
		overflow: hidden;
		position: relative;
		height: auto;
		border-radius: 3px;
		z-index: 2;
		margin: 0;
		background-color: #fff;
		/*background-color: transparent;
		background-image: linear-gradient(-45deg, rgba(255,255,255,.1) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.1) 75%,transparent 75%);
		background-size: 1.3em 100%;
		background-position: 0px 0%;
		animation: shine 3s linear infinite;
		background-repeat: repeat-x;
		box-shadow: none;*/
	}
	@keyframes shine {
		to {
			background-position: 1.3em 0;
		}
	}
	#progress-bar .bar .placeholder {
		color: #2C2C2C;
	}

	.play-button {
		color: #fff;
		text-transform: uppercase;
		padding: 0;
		border: none;
		background-color: transparent;
	}
	.play-button span {
		vertical-align: middle;
		text-decoration: underline;
	}
	.play-button svg {
		display: inline;
		vertical-align: middle;
		color: #F96224;
		transition: color .2s ease-out;
	}

	.video-placeholder {
		position: relative;
	}
	.video-placeholder .video-content {
		position: absolute;
		bottom: 60px;
		left: 60px;
		z-index: 1;
	}

  #main-video .video-content {
    margin-top: 15px;
  }
	#main-video h3 {
		margin-top: 15px;
	}
	#main-video .main-video-under {
		margin-top: 30px;
		margin-top: var(--main-spacing, 30px);
		font-size: 28px;
		color: #F96224;
	}

	#videos-list {
		background-color: #2C2C2C;
		color: #fff;
		padding: 30px 0;
		padding: var(--main-spacing, 30px) 0;
	}
	#videos-list h2 {
		color: inherit;
		margin-top: 0;
		margin-bottom: 30px;
	}
	#videos-list h3 {
		color: inherit;
		margin-top: 10px;
		text-transform: uppercase;
  }
  #videos-list .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }
	#videos-list img.has-xs-thumbnail {
		display: none;
	}
	#videos-list .video-placeholder {
		margin-top: 30px;
		border: none;
		padding: 0;
		position: relative;
		overflow: hidden;
	}
	#videos-list .video-placeholder::after {
		content: "";
		position: absolute;
		width: 50px;
		height: 50px;
		top: -50px;
		right: -50px;
		border-radius: 50%;
		box-shadow: 0 0 0 0 rgba(249,98,36,.68);
		transition: box-shadow .35s ease-out;
	}
	#videos-list .video-placeholder:hover::after {
		box-shadow: 0 0 65px 500px rgba(249,98,36,.68);
	}
	#videos-list .video-placeholder .video-content {
		left: auto;
		right: 10px;
		bottom: 10px;
	}
	#videos-list .play-button {
		margin-top: 0;
	}
	#videos-list .video-placeholder:hover .play-button svg {
		color: #fff;
	}
	#videos-list .under-videos {
		font-size: 28px;
	}
	#videos-list .under-videos h2 {
		margin-top: 30px;
		margin-top: var(--main-spacing, 30px);
	}

	#downloads {
		text-align: center;
		display: none;

	}
	#downloads h2 {
		margin-bottom: 60px;
	}
	#downloads + hr {
		display: none;
	}
	#fah-downloads {
		margin-bottom: 30px;
	}
	#fah-downloads .row {
		display: flex;
		align-items: stretch;
	}
	#fah-downloads .platform {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		flex-wrap: wrap;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, #F96224, #E2592D);
		color: #fff;
		text-align: center;
		border: none;
		min-height: 290px;
		padding: 20px 0;
		border-radius: 38px;
	}
	#fah-downloads .platform:hover {
		color: #fff;
		text-decoration: none;
	}
	#fah-downloads .platform.group-selected {
		align-items: center;
	}
	#fah-downloads .platform .group {
		border: none;
		position: relative;
		padding: 0;
		height: 50%;
		width: 100%;
		background-color: transparent;
	}
	#fah-downloads .platform .group:not(:last-child)::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 5%;
		width: 90%;
		border-top: 1px solid #fff;
	}
	#fah-downloads .platform.group-selected .group {
		height: auto;
	}
	#fah-downloads .platform span {
		display: block;
		width: 100%;
	}
	#fah-downloads .icon {
		position: relative;
		padding-bottom: 50%;
	}
	#fah-downloads .icon svg {
		max-width: 80%;
		max-height: 100%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%) scale(1);
		transition: transform .3s cubic-bezier(.34,1.25,.86,1.12);
	}
	#fah-downloads .platform:hover .icon svg {
		transform: translate(-50%, -50%) scale(1.2);
	}
	#fah-downloads .platform a, #fah-downloads .platform a:hover {
		color: inherit;
	}
	#fah-downloads .platform .title {
		font-family: futura-pt-condensed, sans-serif;
		font-size: 28px;
		font-weight: 500;
		text-decoration: underline;
		letter-spacing: 3px;
		transition: letter-spacing .2s ease-out;
	}
	#fah-downloads .platform:hover .title {
		letter-spacing: 5px;
	}
	#fah-downloads .platform ul {
		display: inline-block;
		list-style: none;
		padding: 0;
		margin-top: 15px;
	}
	#fah-downloads .platform li {
		text-align: left;
		margin-bottom: .5em;
	}
	#fah-downloads .platform li img {
		width: 1.2em;
		margin-right: .5em;
	}

	#partners h2 {
		margin-bottom: 30px;
	}
	#partners .row {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}
	#partners .logo {
		text-align: center;
		padding-left: 15px;
		padding-right: 15px;
		width: 33%;
	}

	#video-modal {
		position: fixed;
		z-index: 1000;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		box-shadow: 0px 0px 0px 5000px rgba(249,98,36,0), inset 0px 0px 0px 5000px rgba(249,98,36,0);
		opacity: 0;
		transition: box-shadow 300ms ease-in 150ms, opacity 200ms ease-in;
		display: none;
    padding: 15px;
	}
	#video-modal.active {
		display: block;
	}
	#video-modal.in {
		box-shadow: 0px 0px 0px 5000px rgba(249,98,36,0.68), inset 0px 0px 0px 5000px rgba(249,98,36,0.68);
		opacity: 1;
		transition: box-shadow 300ms ease-in, opacity 200ms ease-in 250ms;
  }
	#video-container {
		position: relative;
		padding-bottom: 56.25%;
		padding-left: 0;
    padding-right: 0;
	}
	#video-container iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
  }
  
  @media (max-width: 997px) and (orientation: landscape) {
    
    #videos-list .col-xs-6 {
      width: 33.3333333%;
    }

  }
  @media (max-width: 997px) {

    #main-video .video-placeholder .video-content {
      position: static;
    }
    #main-video .video-content .play-button {
      position: absolute;
      top: 10px;
      left: 10px;
      margin: 0;
		}
		#video-modal {
			width: 100%;
		}
    #video-container {
      width: 85%;
    }

  }
	@media (min-width: 998px) {

		:root {
			--main-spacing: 60px
		}
		h1 {
			font-size: 250px;
		}
		h2 {
			font-size: 100px;
		}

		#hero p a:only-child,
		.play-button,
		#downloads .alternative-downloads {
			font-size: 28px;
		}

		#hero {
			min-height: 0;
			min-height: none;
		}
		#hero h1 {
			margin-top: 110px;
			margin-bottom: 70px;
			font-size: 250px;
		}
		#hero h1.smaller {
			font-size: 170px;
			margin-top: 110px;
			margin-bottom: 70px;
		}
		#hero p {
			font-size: 30px;
		}
		#hero p.smaller {
			font-size: 24px;
		}
		#hero p b, #hero p strong {
			font-weight: 600;
		}

		#progress-bar {
			font-size: 2em;
		}

		#main-video .video-content {
      margin-top: 0;
			color: #fff;
    }
		#main-video p {
		}
		
		#videos-list img.has-xs-thumbnail {
			display: block;
		}
		#videos-list img.has-xs-thumbnail ~ img {
			display: none;
		}
		#videos-list .video-placeholder .video-content {
			bottom: auto;
			top: 15px;
      right: 15px;
		}
		#videos-list .under-videos h2 {
			font-size: 70px;
		}

		#downloads, #downloads + hr {
			display: block;
		}

		#partners {
			padding-left: 30px;
			padding-right: 30px;
		}
		#partners .logo {
			width: 20%;
		}

	}
	@media (min-width: 1200px) {

		:root {
			--main-spacing: 120px
		}

		#fah-downloads .platform {
			min-height: 360px;
		}

		#partners {
			padding-left: 60px;
			padding-right: 60px;
		}
		#partners .row {
			flex-wrap: nowrap;
		}
		#partners .logo {
			width: auto;
		}
		
	}
	
	@media (min-width: 1920px) {
		#partners {
			padding-left: 10%;
			padding-right: 10%;
		}
	}