/*
* Boiler plate
* Main CSS
* Version 1.0
* Last updated 10/12/20
*/

/* ==========================================================================
	Fonts
========================================================================== */

/* Lemonmilk regular */

@font-face {
	font-family: 'lemonmilk-regular';
	src: url('../font/lemonmilk-regular/lemonmilk-regular.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

/* Metropolis medium */

@font-face {
	font-family: 'metropolis-medium';
	src: url('../font/metropolis-medium/metropolis-medium.woff2') format('woff2'),
	url('../font/metropolis-medium/metropolis-medium.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/* ==========================================================================
	HTML
========================================================================== */

/* Force border box */

*, *::after, *::before {
	box-sizing: border-box;
}

/* Text selection colour */

::-moz-selection {
  background: #fb5a20;
  color: #ffffff;
  text-shadow: none;
}
::-webkit-selection {
  background: #fb5a20;
  color: #ffffff;
  text-shadow: none;
}
::selection {
  background: #fb5a20;
  color: #ffffff;
  text-shadow: none;
}
a::-moz-selection,
a::-webkit-selection,
a::selection {
  color: #ffffff;
}

/* Placeholder text colour */

::-webkit-input-placeholder {
  color: #7a8294;
}
:-ms-input-placeholder {
  color: #7a8294;
}
::placeholder {
  color: #7a8294;
}

/*
*
* Element defaults
*
*/

html {
	color: rgba(255,255,255,0.75);
	font-size: 22px;
	/*font-family: 'Font name goes here';*/
	font-weight: normal;
	line-height: 35px;
	background-color: #212121;
	font-family: 'metropolis-medium';
	overflow-x: hidden;
}
body {
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
h1 {
	font-family: 'lemonmilk-regular';
	font-weight: normal;
	font-size: 70px;
	color: #ffffff;
	margin: 0;
	padding: 0;
	line-height: 85px;
	letter-spacing: 3px;
}
h2 {
	font-family: 'lemonmilk-regular';
	font-weight: normal;
	font-size: 55px;
	color: #ffffff;
	margin: 0;
	padding: 0;
	text-align: center;
	margin-bottom: 50px;
	letter-spacing: 3px;
	line-height: 35px;
}
.who h2::after {
	content: '';
	display: none;
	margin-top: 35px;
	width: 150px;
	height: 5px;
	background-image: -moz-linear-gradient( 180deg, #fa311c 0%, #fb6821 100%);
	background-image: -webkit-linear-gradient( 180deg, #fa311c 0%, #fb6821 100%);
	background-image: -ms-linear-gradient( 180deg, #fa311c 0%, #fb6821 100%);
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
}
.who .booth h3::after {
	content: '';
	display: block;
	margin-top: 20px;
	width: 150px;
	height: 3px;
	background-image: -moz-linear-gradient( 180deg, #fa311c 0%, #fb6821 100%);
	background-image: -webkit-linear-gradient( 180deg, #fa311c 0%, #fb6821 100%);
	background-image: -ms-linear-gradient( 180deg, #fa311c 0%, #fb6821 100%);
	margin-bottom: 0;
	margin-right: auto;
}
h3 {
	color: #ffffff;
	font-family: 'lemonmilk-regular';
	font-weight: normal;
	font-size: 20px;
	margin: 0;
	padding: 0;
}
p {
	margin: 0;
	font-weight: normal;
}
a {
	color: #fb571f;
	text-decoration: none;
}
section {
	margin-bottom: 150px;
}

/* Misc */

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	margin: 15px 0;
	padding: 0;
}
audio,
canvas,
iframe,
img,
svg,
video {
	vertical-align: middle;
}
fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}
textarea {
	resize: vertical;
}

/* ==========================================================================
	Grids
========================================================================== */

/* Grid setup */

.grid {
	display: flex;
}
.grid-cell {
	flex: 1;
}

/* Grid alignment */

.grid-top {
	align-items: flex-start;
}
.grid-bottom {
	align-items: flex-end;
}
.grid-center {
	align-items: center;
}

/* Grid cell alignment */

.grid-cell-top {
	align-self: flex-start;
}
.grid-cell-center {
	align-self: center;
}
.grid-cell-bottom {
	align-self: flex-end;
}

/* ==========================================================================
	Modules
========================================================================== */

/* Button */

.button {
    padding: 7px 27px;
    border: none;
    border-radius: 5px;
    color: #ffffff;
    background-image: -moz-linear-gradient( 80deg, rgb(250,49,28) 0%, rgb(251,104,33) 100%);
    background-image: -webkit-linear-gradient( 80deg, rgb(250,49,28) 0%, rgb(251,104,33) 100%);
    background-image: -ms-linear-gradient( 80deg, rgb(250,49,28) 0%, rgb(251,104,33) 100%);
}

/* Text alignment */

.text-left {
	text-align: left;
}
.text-center {
	text-align: center;
}
.text-right {
	text-align: right;
}

.label {
	color: rgba(255,255,255,0.75);
	font-size: 16px;
}

.text-gradient {
	background: -webkit-linear-gradient(90deg, #fa311c 0%, #fb6821 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.hide {
	display: none;
}

/* ==========================================================================
	Home
========================================================================== */

html {
	background-image: url("../img/feature/hero.png");
	background-position: top center;
	background-position-y: -150px;
	background-repeat: no-repeat;
	background-size: 1800px;
}

.hero {
	margin-top: 100px;
	margin-bottom: 900px;
}
.hero h1 {
	margin-top: 15px;
	margin-bottom: 25px;
}
.hero .logo {
	max-width: 250px;
	margin-bottom: 100px;
}
.hero .button {
	display: inline-block;
	margin-top: 35px;
}
.hero p {
	max-width: 500px;
}
.day .grid {
	flex-direction: column;
}

/*
*
* Intro
*
*/

.intro {
	margin-bottom: 50px;
}
.intro p {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}
.intro-graphic {
	position: absolute;
	width: 150%;
	background-image: url("../img/feature/intro.png");
	background-position: top center;
	background-position-y: -150px;
	background-repeat: no-repeat;
	background-size: 1800px;
	height: 1500px;
	margin-top: -350px;
	margin-left: -25%;
	z-index: -1;
}

/*
*
* Intro: Gallery
*
*/

.gallery {
	margin-bottom: 250px;
	display: none;
}
.gallery ul {
	list-style: none;
	padding-left: 0;
	text-align: center;
}
.gallery ul li {
	display: inline-block;
	margin-right: 15px;
}
.gallery ul li:last-of-type {
	margin-right: 0;
}
.gallery ul li:nth-of-type(4),
.gallery ul li:nth-of-type(5) {
	margin-top: 15px;
}
.gallery ul li img {
	width: 375px;
	border-radius: 10px;
}

/* Who */

.who {
	margin-top: 250px;
}
.who .panel {
	background-color: #ffffff;
	color: #212121;
	border-radius: 12px;
}
.who h3 {
	font-size: 35px;
}
.who h4 {
	margin-top: 0;
	margin-bottom: 0;
}
.who .panel h3,
.who .panel p {
	color: #212121;
}

.who .coach-container:first-of-type {
	margin-top: 100px;
	margin-bottom: 100px;
}
.who .coach-container:last-of-type > .grid-cell {
	margin-right: 50px;
}
.who .coach-container:last-of-type .kody {
	margin-right: 0;
}

.who .panel h3::after {
	content: '';
	display: block;
	margin-top: 15px;
	width: 100px;
	height: 3px;
	background-image: -moz-linear-gradient( 180deg, #fa311c 0%, #fb6821 100%);
	background-image: -webkit-linear-gradient( 180deg, #fa311c 0%, #fb6821 100%);
	background-image: -ms-linear-gradient( 180deg, #fa311c 0%, #fb6821 100%);
	margin-bottom: 10px;
}

.who .panel .separator {
	display: block;
	width: 100%;
	height: 4px;	
	background-image: linear-gradient( 180deg, #fa311c 0%, #fb6821 100%);
}
.who .panel .content {
	padding: 25px 35px;
}

/*
*
* Who: Booth
*
*/

.who .booth h3 {
	margin-top: 20px;
	margin-bottom: 15px;
	letter-spacing: 3px;
}
.who .booth img {
	border-radius: 15px;
	width: 640px;
	margin-bottom: -235px;
	margin-left: 35px;
	box-shadow: 0px 10px 25px 0px rgba(1, 0, 42, 0.35);
}
.who .booth .content {
	background-color: #ffffff;
	color: #212121;
	border-radius: 15px;
	padding: 25px 35px;
	border-top: 3px solid #fb5b20;
}
.who .booth .content > .grid > .grid-cell:first-of-type {
	margin-top: 235px;
	margin-right: 50px;
}
.who .booth .metadata > .grid-cell:last-of-type {
	margin-left: 50px;
}

/*
*
* Who: Brooke
*
*/

.who .brooke img {
	position: relative;
	width: 605px;
	margin-left: auto;
	margin-right: auto;
	display: block;
	margin-bottom: -150px;
	border-radius: 15px;
	box-shadow: 0px 10px 25px 0px rgba(1, 0, 42, 0.35);
}

.who .brooke .panel {
	border-top: 3px solid #fb5b20;
}
.who .brooke .content {
	padding-top: 185px;
}

/*
*
* Who: Kody
*
*/

.who .kody img {
	position: relative;
	width: 605px;
	margin-left: auto;
	margin-right: auto;
	display: block;
	margin-bottom: -150px;
	border-radius: 15px;
	box-shadow: 0px 10px 25px 0px rgba(1, 0, 42, 0.35);
}

.who .kody .panel {
	border-top: 3px solid #fb5b20;
}
.who .kody .content {
	padding-top: 185px;
}

/*
*
* Pricing
*
*/

.pricing table {
	background-color: #ffffff;
	padding: 25px;
	margin-left: auto;
	margin-right: auto;
	border-collapse: collapse;
	border-radius: 15px;
}
.pricing table tbody tr:last-of-type {
	border-top: 1px solid #fb5a20;
}
.pricing table tr td:first-of-type {
	font-family: 'lemonmilk-regular';
	font-weight: normal;
	letter-spacing: 3px;
	font-size: 16px;
}
.pricing table tr td {
	padding: 25px 50px;
	border-right: 1px solid #fb5a20;
}
.pricing table tr td:last-of-type {
	border-right: none;
}

/*
*
* Timetable
*
*/

.timetable .event {
	background-color: #ffffff;
	margin: 15px;
	padding: 15px;
	border-radius: 5px;
	color: #212121;
	font-size: 20px;
	line-height: 1.4;
}
.timetable .event .grid .grid-cell:last-of-type {
	color: #777;
}
.timetable h3 {
	margin-left: 15px;
}
.timetable h4 {
	margin-top: 10px;
	margin-bottom: 10px;
}
.timetable .hidden {
	opacity: 0;
	visibility: none;
}

/*
*
* Testimonials
*
*/

.testimonials {
	position: relative;
	margin-bottom: 0;
}
.testimonials::before {
	content: '';
	display: block;
	width: 100%;
	height: 500px;
	background: linear-gradient(180deg, rgba(33,33,33,0) 0%, rgba(33,33,33,1) 50%, rgba(33,33,33,1) 100%);
	position: absolute;
	z-index: 2;
	bottom: 0;
}
.testimonials .feedback {
	background-color: #ffffff;
	border-radius: 15px;
	margin-right: 25px;
	padding: 25px;
	color: #212121;
	margin-bottom: 35px;
	position: relative;
	border-top: 3px solid #fb5b20;
}
.testimonials .feedback:after {
	border-left: 20px solid transparent;
  	border-right: 20px solid transparent;
  	border-top: 20px solid #ffffff;
	bottom: -15px;
	content: '';
	display: block;
	height: 0; 
	left: calc(50% - 20px);
	position: absolute;
	width: 0;
}
.testimonials .feedback:nth-of-type(3n) {
	margin-right: 0;
}
.testimonials .view-more {
	z-index: 3;
	position: relative;
	text-align: center;
}
.testimonials .view-more a {
	display: block;
	transform: translateY(-150px);
}
.testimonials .view-more a::after {
	content: url(../img/icon/arrow.svg);
	margin-left: 10px;
	margin-top: 2px;
	position: absolute;
	transition: margin 0.3s ease;
	width: 18px;
}

 /* Removes gradient overlay */
.testimonials.read-active::before {
  content: none;
}
.testimonials.read-active {
	margin-bottom: 150px;
}
/* In collapsed state you pull the link up into the gradient.
   When expanded, put it back in normal flow. */
.testimonials.read-active .view-more a {
  transform: none;
}

.testimonials .view-more a::after {
  transform: rotate(90deg);
}
.testimonials.read-active .view-more a::after {
  transform: rotate(270deg);
}


/*
*
* Where
*
*/

.where {
	text-align: center;
}
.where h2 {
	margin-bottom: 25px;
}
.where h2 + p {
	margin-bottom: 25px;
}
.where img {
	border-radius: 15px;
	margin-bottom: 35px;
}
.where iframe {
	width: 100%;
}

/* ==========================================================================
	Responsive styles
========================================================================== */


@media (max-width: 1800px) {

	html {
		font-size: 20px;
		line-height: 30px;
		background-size: 1500px;
		background-position-x: 250px;
	}
	body {
		max-width: 1200px;
	}
	p {
		font-size: 20px;
		line-height: 30px;
	}
	.hero {
		margin-top: 75px;
		margin-bottom: 700px;
	}
	.hero .logo {
		max-width: 200px;
		margin-bottom: 100px;
	}
	.hero h1 {
		font-size: 60px;
		line-height: 1.3;
	}
	h2 {
		font-size: 50px;
	}
	.intro p {
		max-width: 815px;
	}
	.who {
		margin-top: 200px;
	}
	.who,
	.who p {
		font-size: 18px;
	}
	.who .booth img {
		max-width: 570px;
		margin-bottom: -200px;
	}
	.who .booth .content > .grid > .grid-cell:first-of-type {
		margin-top: 195px;
		margin-right: 0;
	}
	.who .booth .content > .grid > .grid-cell:last-of-type {
		margin-left: 50px;
	}
	.who .brooke img,
	.who .kody img {
		width: 505px;
	}

	.testimonials .feedback p {
		font-size: 18px;
	}

}

@media (max-width: 1600px) {

	html {
		background-size: 1200px;
		background-position-x: 350px;
	}
	p {
		font-size: 18px;
	}
	h2 {
		font-size: 45px;
	}
	.hero {
		margin-top: 75px;
		margin-bottom: 450px;
	}
	.hero h1 {
		font-size: 55px;
		line-height: 1.3;
	}
	.intro-graphic {
		width: 100%;
		margin-left: 0;
	}
	.intro {
		margin-top: 300px;
	}
	.intro p {
		max-width: 725px;
	}
	#timetable,
	.where {
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}
	.hero > div:nth-child(1) > div:nth-child(1) > p:nth-child(3) {
		max-width: 450px;
	}
}

@media (max-width: 1400px) {

	html {
		background-size: 1200px;
		background-position-x: 350px;
	}
	body {
		max-width: 1000px;
	}
	.hero h1 {
		font-size: 50px;
		line-height: 1.3;
	}

}

@media (max-width: 1300px) {
	html {
		background-position-x: 300px;
	}
}

@media (max-width: 1200px) {

	html {
		background-position-x: 250px;
	}
	body {
		max-width: 900px;
	}

	.who .panel,
	.who .panel img {
		max-width: 350px;
	}
	.timetable .event {
		font-size: 14px;
	}
	#timetable,
	.where,
	.pricing {
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}
	.pricing table tr td {
		padding: 15px 35px
	}
}

@media (max-width: 1200px) {
	html {
		background-position-x: 200px;
	}
}

@media (max-width: 1100px) {
	html {
		background-position-x: 150px;
	}
}

@media (max-width: 1000px) {
	html {
		background-size: 900px;
		background-position-x: 250px;
		background-position-y: 0;
		overflow-x: hidden;
	}

	body {
		max-width: 800px;
	}
	.hero .logo {
		max-width: 175px;
		margin-bottom: 100px;
	}
	.hero h1 {
		font-size: 50px;
	}

	.who .panel {
		margin-right: 25px;
	}
	.who .panel,
	.who .panel img {
		max-width: 300px;
	}
	.pricing table tr td {
		padding: 10px 15px
	}
}

@media (max-width: 1000px) {
	html {
		background-size: 900px;
		background-position-x: 200px;
	}

}

@media (max-width: 800px) {

	body {
		max-width: 90%;
	}

	.who .panel {
		margin-right: 25px;
	}
	.who .panel,
	.who .panel img {
		max-width: 300px;
	}
	.grid.timetable-grid {
		flex-direction: column;
	}
}

@media (max-width: 600px) {
	.who > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) {
		flex-direction: column;
	}

	html {
		background-size: 700px;
		background-position-x: -100px;
		background-position-y: -50px;
		overflow-x: hidden;
	}
	body {
		overflow-x: hidden;
	}

	.hero .logo {
		margin-bottom: 350px;
		max-width: 150px;
	}
	.hero h1 {
		font-size: 40px;
		line-height: 1.3;
	}

	h2 {
		font-size: 35px;
		line-height: 1.4;
		margin-bottom: 35px;
		text-align: left;
	}
	section {
		max-width: 85% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		overflow-x: hidden;
	}
	.hero {
		margin-left: 0;
		margin-top: 50px;
		margin-left: 7.5%;
		margin-bottom: 350px;
	}
	.intro {
		margin-top: 0;
	}
	.intro-graphic {
		overflow-x: hidden;
	}
	.who .panel,
	.who .panel img,
	.who .panel.other {
		max-width: 100%;
		margin-right: 0;
		margin-left: 0;
	}
	.who .panel.other {
		margin-top: 50px;
	}
	.where .mobile {
		flex-direction: column-reverse;
	}
	.where .mobile h3 {
		text-align: left;
	}
	.where .mobile .grid-cell:nth-of-type(2) {
		margin-bottom: 25px;
		text-align: left;
	}
	.pricing {
		overflow-x: scroll;
	}
	.pricing h2 {
		text-align: left;
	}
	.pricing table {
		max-width: 100%;
		font-size: 16px;
	}
	.pricing table tr td {
		padding: 15px;
	}
	.pricing table tr td:first-of-type {
		font-size: 14px;
	}
	.pricing table tr td:first-of-type .label {
		font-size: 14px;
	}
}