/*
0px to 600px = Phone
600px to 900px = Tablet Portrait Mode
900px to 1200px = Tablet Landscape Mode
1200px to 1800px = Where our normal styles apply
1800px+ = Big Desktops

$BREAKPOINT ARGUMENT CHOICES:
- phone
- tab-portrait
- tab-landscape
- big-desktop

EMs:
em's are not effected by the root font size(_base.scss)
1em = 16px
Divide the px by 16 to get the em value
We use em in responsive design instead of px

ORDER OF MEDIA QUERY DEFINITIONS:
1. Typography
2. General Layout
3. Grid
4. Page Layout
5. Components
*/
*,
*::after,
*::before {
  /*Universal selector*/
  margin: 0;
  padding: 0;
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
  /*Sets the box-sizing property on every element on the page to inherit which forces every element to inherit the border-box value in the body rule(Good practice)*/
}

html {
  font-size: 62.5%;
  /*62.5% of 16px = 10px (We use a % to be more user friendly, 16px is default)*/
  /*Global font-size (Each rem unit is now 10px)*/
  scroll-behavior: smooth;
}
@media (min-width: 112.5em) {
  html {
    font-size: 75%;
  }
}
@media (max-width: 75em) {
  html {
    font-size: 56.25%;
  }
}
@media (max-width: 56.25em) {
  html {
    font-size: 50%;
  }
}

body {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /*Changes the box model so that borders/paddings are no longer added to the total width/height we specify for a box*/
}

body {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  line-height: 1.7;
  /*The line-height is 1.7 times bigger than default(depends on font-size)*/
}

.heading-primary {
  color: #fff;
  text-transform: uppercase;
}
.heading-primary--main {
  display: block;
  /*Block elements create linebreaks before and after them(what we want here)*/
  font-size: 6rem;
  font-weight: 300;
  letter-spacing: 0.5rem;
  white-space: nowrap;
  -webkit-animation-name: moveInTop;
  animation-name: moveInTop;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  /*Faster to start, slower to end*/
}
@media (max-width: 37.5em) {
  .heading-primary--main {
    font-size: 4rem;
  }
}
@media (max-width: 28.125em) {
  .heading-primary--main {
    font-size: 3rem;
  }
}
@media (max-width: 23.4375em) {
  .heading-primary--main {
    font-size: 2.5rem;
  }
}
@media (max-width: 18.75em) {
  .heading-primary--main {
    font-size: 2.3rem;
  }
}
.heading-primary--sub {
  display: block;
  /*Block elements take up 100% of the width of the viewport(not height)*/
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.3rem;
  margin-bottom: 2rem;
  white-space: nowrap;
  -webkit-animation-name: moveInBottom;
  animation-name: moveInBottom;
  -webkit-animation-duration: 2.6s;
  animation-duration: 2.6s;
}
@media (max-width: 28.125em) {
  .heading-primary--sub {
    font-size: 1.8rem;
  }
}
@media (max-width: 23.4375em) {
  .heading-primary--sub {
    font-size: 1.6rem;
  }
}
.heading-primary--title {
  display: block;
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: 1rem;
}

.heading-secondary {
  font-size: 3.5rem;
  font-weight: 200;
  color: #696969;
  text-transform: uppercase;
  word-spacing: 0.5rem;
  letter-spacing: 0.8rem;
}
.heading-secondary::after {
  display: block;
  height: 2px;
  background-color: #0ae8ca;
  content: " ";
  width: 10rem;
  margin: 0 auto;
  margin-top: 2rem;
}
@media (max-width: 37.5em) {
  .heading-secondary {
    font-size: 2.5rem;
  }
}

.heading-secondary-white {
  font-size: 3.5rem;
  font-weight: 200;
  color: #fff;
  text-transform: uppercase;
  word-spacing: 0.5rem;
  letter-spacing: 0.8rem;
}
.heading-secondary-white::after {
  display: block;
  height: 2px;
  background-color: #0ae8ca;
  content: " ";
  width: 10rem;
  margin: 0 auto;
  margin-top: 2rem;
}

.heading-tertiary {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: 0.2rem;
}
@media (max-width: 28.125em) {
  .heading-tertiary {
    font-size: 2rem;
  }
}

.text-link:link, .text-link:visited {
  color: #fff;
  text-decoration: none;
  display: inline-block;
}
.text-link:hover, .text-link:active {
  color: #0ae8ca;
}

.u-center-text {
  text-align: center !important;
}

.u-margin-bottom-none {
  margin-bottom: 0rem !important;
}

.u-margin-bottom-small {
  margin-bottom: 1.5rem !important;
}

.u-margin-bottom-medium {
  margin-bottom: 4rem !important;
}

.u-margin-bottom-big {
  margin-bottom: 8rem !important;
}

.u-margin-top-none {
  margin-bottom: 0rem !important;
}

.u-margin-top-small {
  margin-top: 1rem !important;
}

.u-margin-top-medium {
  margin-top: 6rem !important;
}

.u-margin-top-big {
  margin-top: 8rem !important;
}

.u-margin-top-huge {
  margin-top: 10rem !important;
}

.btn-main, .btn-main:link, .btn-main:visited {
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.4rem 3rem;
  /*14px top/bottom, 30px left/right*/
  display: inline-block;
  /*We define it as inline-block so that we can position it or add height/width/padding later. Each button now occupies its own space*/
  border-radius: 10rem;
  /*Rounds off buttons*/
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  /*All of the btns properties are enabled to be animated, 0.2s duration*/
  position: relative;
  /*To help position the effect behind the btn*/
  font-size: 1.6rem;
  border: none;
  cursor: pointer;
}
.btn-main:hover {
  -webkit-transform: translateY(-3px);
  -ms-transform: translateY(-3px);
  transform: translateY(-3px);
  /*Negative values go up, positive down on the y-axis*/
  -webkit-box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
  /*0 shadow x-axis, 10px shadow y-axis(down due to positive value), 20px blur, black shadow with 0.2 opacity*/
}
.btn-main:hover::after {
  /*When we hover the btn, we want styles for the after psuedo-element*/
  -webkit-transform: scaleX(1.4) scaleY(1.6);
  -ms-transform: scaleX(1.4) scaleY(1.6);
  transform: scaleX(1.4) scaleY(1.6);
  /*after pseudo-element appears 1.4x its normal size on the x-axis and 1.6X on the y-axis when hovered(Makes effect stand out more)*/
  opacity: 0;
  /*We want the effect to fade out on hover*/
}
.btn-main:active, .btn-main:focus {
  outline: none;
  -webkit-transform: translateY(-1px);
  -ms-transform: translateY(-1px);
  transform: translateY(-1px);
  /*Btn bounces up 1px when clicked*/
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
  /*When the button is active, we want the shadow to look smaller on the y-axis to make it look like the button is closer to the page, further from user; less blur as well*/
}
.btn-main__white {
  background-color: #fff;
  color: #696969;
}
.btn-main__white::after {
  background-color: #fff;
}
.btn-main__navy {
  background-color: #161d3b;
  color: #fff;
  white-space: nowrap;
}
.btn-main__navy::after {
  background-color: #161d3b;
}
.btn-main::after {
  /*We're adding an element that looks exactly like the btn we already have, but we put it behind the button, when hovered out this hidden psuedo element goes back behind the btn*/
  content: "";
  /*You must specify the content property for a pseudo element to appear on the page*/
  display: inline-block;
  /*You must also specify the display property, inline-block because we've already defined that our btns are all inline-block in the link/visited rule^*/
  height: 100%;
  width: 100%;
  /*Since this psuedo element is a child element to btn, 100% of the width and height of btn*/
  border-radius: 10rem;
  /*To match the btn*/
  position: absolute;
  /*We're positioning this element behind the btn*/
  top: 0;
  left: 0;
  z-index: -1;
  /*Makes certain the effect is behind the button*/
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
  /*To animate an element, we put the transition property in the initial state; in this case, the initial state is the after psuedo element*/
}
.btn-main__animated {
  -webkit-animation: moveInBottom 2.2s ease-out 0.75s;
  animation: moveInBottom 2.2s ease-out 0.75s;
  /*0.75s delay*/
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  /*Applys the 0% styles of moveInBottom before the animation starts*/
}

.btn-text:link, .btn-text:visited {
  font-size: 1.6rem;
  color: #161d3b;
  display: inline-block;
  text-decoration: none;
  border-bottom: 1px solid #161d3b;
  padding: 3px;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.btn-text:hover {
  background-color: #161d3b;
  color: #fff;
  -webkit-box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
  -webkit-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
}
.btn-text:active {
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.card {
  -webkit-perspective: 150rem;
  perspective: 150rem;
  -moz-perspective: 150rem;
  position: relative;
  height: 51rem;
}
.card__side {
  height: 51rem;
  -webkit-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  transition: all 0.8s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 0.3rem;
  overflow: hidden;
  -webkit-box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
}
.card__side--front {
  background-color: #fff;
}
.card__side--back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.card__side--back-1 {
  background-image: -o-linear-gradient(left top, #313755, #161d3b);
  background-image: -webkit-gradient(linear, left top, right bottom, from(#313755), to(#161d3b));
  background-image: linear-gradient(to right bottom, #313755, #161d3b);
}
.card__side--back-2 {
  background-image: -o-linear-gradient(left top, #0ae8ca, #32cfba);
  background-image: -webkit-gradient(linear, left top, right bottom, from(#0ae8ca), to(#32cfba));
  background-image: linear-gradient(to right bottom, #0ae8ca, #32cfba);
}
.card__side--back-3 {
  background-image: -o-linear-gradient(left top, #313755, #161d3b);
  background-image: -webkit-gradient(linear, left top, right bottom, from(#313755), to(#161d3b));
  background-image: linear-gradient(to right bottom, #313755, #161d3b);
}
.card:hover .card__side--front {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}
.card:hover .card__side--back {
  -webkit-transform: rotateY(0);
  transform: rotateY(0);
}
.card__picture {
  background-size: cover;
  height: 28rem;
  background-blend-mode: screen;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}
.card__picture--1 {
  background-image: -o-linear-gradient(right top, #313755, #161d3b), url(../img/dumbbell-min.webp);
  background-image: -webkit-gradient(linear, right top, left bottom, from(#313755), to(#161d3b)), url(../img/dumbbell-min.webp);
  background-image: linear-gradient(to left bottom, #313755, #161d3b), url(../img/dumbbell-min.webp);
}
.card__picture--2 {
  background-image: -o-linear-gradient(left top, #0ae8ca, #32cfba), url(../img/jog2-min.webp);
  background-image: -webkit-gradient(linear, left top, right bottom, from(#0ae8ca), to(#32cfba)), url(../img/jog2-min.webp);
  background-image: linear-gradient(to right bottom, #0ae8ca, #32cfba), url(../img/jog2-min.webp);
}
.card__picture--3 {
  background-image: -o-linear-gradient(left top, #161d3b, #313755), url(../img/heroedit-min-card.webp);
  background-image: -webkit-gradient(linear, left top, right bottom, from(#161d3b), to(#313755)), url(../img/heroedit-min-card.webp);
  background-image: linear-gradient(to right bottom, #161d3b, #313755), url(../img/heroedit-min-card.webp);
}
.card__heading {
  font-size: 2.8rem;
  font-weight: 300;
  text-transform: uppercase;
  text-align: right;
  color: #fff;
  position: absolute;
  top: 12rem;
  right: 2rem;
  width: 75%;
}
@media (max-width: 75em) {
  .card__heading {
    right: 3.8rem;
  }
}
@media (max-width: 56.25em) {
  .card__heading {
    right: 2rem;
  }
}
.card__heading-span {
  padding: 1rem 1.5rem;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.card__heading-span--1 {
  background-image: -o-linear-gradient(left top, rgba(22, 29, 59, 0.85), rgba(22, 29, 59, 0.85));
  background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(22, 29, 59, 0.85)), to(rgba(22, 29, 59, 0.85)));
  background-image: linear-gradient(to right bottom, rgba(22, 29, 59, 0.85), rgba(22, 29, 59, 0.85));
}
.card__heading-span--2 {
  background-image: -o-linear-gradient(left top, rgba(50, 207, 186, 0.85), rgba(50, 207, 186, 0.85));
  background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(50, 207, 186, 0.85)), to(rgba(50, 207, 186, 0.85)));
  background-image: linear-gradient(to right bottom, rgba(50, 207, 186, 0.85), rgba(50, 207, 186, 0.85));
}
.card__heading-span--3 {
  background-image: -o-linear-gradient(left top, rgba(22, 29, 59, 0.85), rgba(49, 55, 85, 0.85));
  background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(22, 29, 59, 0.85)), to(rgba(49, 55, 85, 0.85)));
  background-image: linear-gradient(to right bottom, rgba(22, 29, 59, 0.85), rgba(49, 55, 85, 0.85));
}
.card__details {
  padding: 3rem;
}
.card__details p {
  font-size: 1.6rem;
  padding: 0 2rem;
}
.card__videolist ul {
  list-style: none;
  width: 80%;
  color: #fff;
  margin: 0 auto;
  font-size: 1.8rem;
  padding-top: 3rem;
}
.card__videolist li {
  text-align: center;
  font-weight: 550;
  white-space: nowrap;
  padding-top: 2rem;
}
.card__videolist li:not(:last-child) {
  border-bottom: 1px solid #f4f4f4;
}
.card__cta {
  position: absolute;
  left: 25%;
  width: 50%;
  text-align: center;
  margin-top: 4.5rem;
}

.form {
  display: inline-block;
}
.form__group:not(:last-child) {
  margin-bottom: 2rem;
}
.form__input {
  font-size: 1.5rem;
  font-family: inherit;
  color: inherit;
  padding: 1.5rem 2rem;
  border-radius: 2px;
  background-color: #f4f4f4;
  border: none;
  border-bottom: 3px solid transparent;
  width: 90%;
  display: block;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  margin: 0 auto;
}
@media (max-width: 37.5em) {
  .form__input {
    margin-right: 5rem;
  }
}
@media (max-width: 28.125em) {
  .form__input {
    width: 100%;
    float: left;
  }
}
.form__input:focus {
  outline: none;
  -webkit-box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
  border-bottom: 3px solid #4bb543;
}
.form__input:focus:invalid {
  border-bottom: 3px solid #ff0000;
}
.form__input::-webkit-input-placeholder {
  color: #808080;
}
.form__input::-moz-placeholder {
  color: #808080;
}
.form__input:-ms-input-placeholder {
  color: #808080;
}
.form__input::-ms-input-placeholder {
  color: #808080;
}
.form__input::placeholder {
  color: #808080;
}
.form__input::-webkit-input-placeholder {
  color: #808080;
}
.form input[type=number]::-webkit-inner-spin-button,
.form input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.form__label {
  font-size: 1.2rem;
  font-weight: 700;
  margin-right: 5.5rem;
  margin-top: 0.7rem;
  display: block;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
@media (max-width: 75em) {
  .form__label {
    margin-left: 3rem;
  }
}
.form__input:placeholder-shown + .form__label {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(-4rem);
  -ms-transform: translateY(-4rem);
  transform: translateY(-4rem);
}
.form__textarea {
  font-size: 1.5rem;
  font-family: inherit;
  color: inherit;
  border-radius: 2px;
  background-color: #f4f4f4;
  border: none;
  resize: none;
  padding: 1rem;
}
@media (max-width: 28.125em) {
  .form__textarea {
    width: 95%;
  }
}
.form__textarea-label {
  font-size: 1.6rem;
  font-weight: bold;
}
@media (max-width: 28.125em) {
  .form__textarea-label-label:first-child {
    display: block;
    margin-top: 2rem;
  }
}
@media (max-width: 75em) {
  .form__textarea-label {
    display: block;
  }
}
@media (max-width: 56.25em) {
  .form__textarea-label {
    display: block;
  }
}
@media (max-width: 37.5em) {
  .form__textarea-label {
    display: block;
  }
}
@media (max-width: 28.125em) {
  .form__textarea-label {
    display: block;
    margin-top: 5rem;
  }
}
.form-p {
  font-size: 1.6rem;
  font-weight: bold;
}
@media (max-width: 28.125em) {
  .form-p {
    display: inline-block;
    margin-top: 5rem;
  }
}
.form__radio-label {
  font-size: 1.6rem;
}
.form__radio-btn {
  display: inline-block;
}

.form-invalid {
  outline: 2px solid #ff0000;
}

.img-container {
  display: block;
}
.img-container__img1 {
  border-radius: 0.3rem;
  -webkit-box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.35);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.35);
}
@media (max-width: 56.25em) {
  .img-container__img1 {
    width: 100%;
  }
}
.img-container__meals {
  border-radius: 0.3rem;
  -webkit-box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.35);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.35);
}
@media (max-width: 23.4375em) {
  .img-container__meals {
    width: 75%;
  }
}

.certs {
  width: 40%;
  color: #fff;
  background-color: #161d3b;
  padding: 2rem 2rem;
  border-radius: 0.3rem;
  -webkit-box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.35);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.35);
  display: block;
}
@media (max-width: 56.25em) {
  .certs {
    width: 90%;
  }
}
.certs ul {
  list-style: none;
  font-size: 1.6rem;
  margin-top: 1rem;
  padding: 0 2rem;
}
.certs p {
  font-size: 1.6rem;
  margin-top: 2rem;
  padding: 0 2rem;
}
.certs blockquote {
  font-size: 1.6rem;
  font-style: italic;
  padding: 0 2rem;
}
.certs figcaption {
  margin-left: 25rem;
  font-size: 1.5rem;
  white-space: nowrap;
}
@media (max-width: 23.4375em) {
  .certs figcaption {
    margin-left: 15rem;
  }
}
@media (max-width: 18.75em) {
  .certs figcaption {
    margin-left: 10rem;
  }
}

.mealplan-textbox {
  width: 60%;
  margin: 0 auto;
  -webkit-box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
  box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 0.3rem;
  color: #000;
  font-size: 1.6rem;
  padding: 6rem;
}
@media (max-width: 28.125em) {
  .mealplan-textbox {
    width: 80%;
  }
}
@media (max-width: 23.4375em) {
  .mealplan-textbox {
    width: 100%;
  }
}

.flex-container__yourtrainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 6rem;
}
@media (max-width: 75em) {
  .flex-container__yourtrainer {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 6rem;
  }
}
@media (max-width: 56.25em) {
  .flex-container__yourtrainer {
    gap: 3rem;
  }
}
.flex-container__meals {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  gap: 1rem;
}
@media (max-width: 75em) {
  .flex-container__meals {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2rem;
  }
}
.flex-container__footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
@media (max-width: 75em) {
  .flex-container__footer {
    -ms-flex-pack: distribute;
    justify-content: space-around;
    gap: 8rem;
  }
}
@media (max-width: 56.25em) {
  .flex-container__footer {
    gap: 8rem;
  }
}
@media (max-width: 37.5em) {
  .flex-container__footer {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
  }
}
@media (max-width: 28.125em) {
  .flex-container__footer {
    margin-left: 2rem;
    margin-right: 2rem;
  }
}
@media (max-width: 23.4375em) {
  .flex-container__footer {
    margin-left: 3rem;
    margin-right: 3rem;
  }
}
.flex-container__footer--item:first-child {
  margin-bottom: 2rem;
}
.flex-container__form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.footer {
  background-color: #161d3b;
  padding: 5rem 0;
  font-size: 1.6rem;
  color: #fff;
}
.footer__navigation {
  border-top: 1px solid #fff;
  padding-top: 2rem;
  display: inline-block;
  white-space: nowrap;
}
.footer__list {
  list-style: none;
}
.footer__item {
  display: inline-block;
}
.footer__item:not(:last-child) {
  margin-right: 1.5rem;
}
@media (max-width: 28.125em) {
  .footer__item:not(:last-child) {
    margin-right: 1rem;
  }
}
@media (max-width: 23.4375em) {
  .footer__item:not(:last-child) {
    margin-right: 0.5rem;
  }
}
.footer__link:link, .footer__link:visited {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
}
.footer__link:hover, .footer__link:active {
  color: #0ae8ca;
}
.footer__copyright {
  border-top: 1px solid #fff;
  padding-top: 2rem;
  display: inline-block;
  white-space: nowrap;
}
@media (max-width: 56.25em) {
  .footer__copyright {
    margin-right: 2rem;
  }
}
@media (max-width: 37.5em) {
  .footer__copyright {
    text-align: center;
    white-space: normal;
    margin-right: none;
  }
}

.social__navigation {
  white-space: nowrap;
  float: right;
}
@media (max-width: 75em) {
  .social__navigation {
    margin-right: 2rem;
  }
}
@media (max-width: 56.25em) {
  .social__navigation {
    margin-right: -20rem;
  }
}
@media (max-width: 37.5em) {
  .social__navigation {
    margin-right: 1rem;
  }
}
.social__list {
  list-style: none;
}
@media (max-width: 37.5em) {
  .social__list {
    font-size: 3rem;
  }
}
.social__item {
  display: inline-block;
  font-size: 2.5rem;
}
.social__item:not(:last-child) {
  margin-right: 1.5rem;
}
.social__link:link, .social__link:visited {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
}
.social__link:hover, .social__link:active {
  color: #0ae8ca;
}

.row {
  max-width: 114rem;
  margin: 0 auto;
}
.row:not(:last-child) {
  margin-bottom: 8rem;
}
@media (max-width: 56.25em) {
  .row:not(:last-child) {
    margin-bottom: 6rem;
  }
}
@media (max-width: 56.25em) {
  .row {
    max-width: 50rem;
    padding: 0 3rem;
  }
}
.row::after {
  content: "";
  display: table;
  clear: both;
}
.row [class^=col-] {
  float: left;
}
.row [class^=col-]:not(:last-child) {
  margin-right: 10rem;
}
@media (max-width: 56.25em) {
  .row [class^=col-]:not(:last-child) {
    margin-right: 0;
    margin-bottom: 6rem;
  }
}
@media (max-width: 56.25em) {
  .row [class^=col-] {
    width: 100% !important;
  }
}
.row .col-1-of-2 {
  width: calc((100% - 10rem) / 2);
}
.row .col-1-of-3 {
  width: calc((100% - 2 * 10rem) / 3);
}
.row .col-2-of-3 {
  width: calc( 2 * ((100% - 2 * 10rem) / 3) + 10rem );
}
.row .col-1-of-4 {
  width: calc((100% - 3 * 10rem) / 4);
}
.row .col-2-of-4 {
  width: calc( 2 * ((100% - 3 * 10rem) / 4) + 10rem );
}
.row .col-3-of-4 {
  width: calc( 3 * ((100% - 3 * 10rem) / 4) + 2 * 10rem );
}

.header {
  height: 100vh;
  -webkit-background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(22, 29, 59, 0.4)), to(rgba(22, 29, 59, 0.4))), url("../img/heroedit-min.webp");
  -webkit-background-image: linear-gradient(to right bottom, rgba(22, 29, 59, 0.4), rgba(22, 29, 59, 0.4)), url("../img/heroedit-min.webp");
  background-image: -o-linear-gradient(left top, rgba(22, 29, 59, 0.4), rgba(22, 29, 59, 0.4)), url("../img/heroedit-min.webp");
  background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(22, 29, 59, 0.4)), to(rgba(22, 29, 59, 0.4))), url("../img/heroedit-min.webp");
  background-image: linear-gradient(to right bottom, rgba(22, 29, 59, 0.4), rgba(22, 29, 59, 0.4)), url("../img/heroedit-min.webp");
  background-size: cover;
  -webkit-background-position: top;
  background-position: top;
  -webkit-background-attachment: fixed;
  background-attachment: fixed;
  position: relative;
}
@media (max-width: 37.5em) {
  .header {
    background-attachment: scroll;
  }
}
.header__logo-box {
  /*The container for our logo*/
  position: absolute;
  top: -3rem;
  left: -2rem;
}
.header__logo {
  height: 23rem;
  /*When we specify height, width is scaled accordingly(vice versa)*/
  width: 23rem;
}
.header__text-box {
  position: absolute;
  top: 50%;
  /*40% from the top and 50% from the left of the header(parent element)*/
  left: 50%;
  /*Measurement starts at the top left of the .text-box element(Therefore its off center)*/
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /*Shifts 50% of the element's(text-box) width to the left and 50% of the element's height to the top(centers text-box)*/
  text-align: center;
  /*Centers call to action button under the h1*/
}

.main-nav {
  float: right;
  list-style: none;
  margin-top: 5.5rem;
  margin-right: 2rem;
  white-space: nowrap;
}
@media (max-width: 56.25em) {
  .main-nav {
    float: none;
    text-align: center;
    margin-top: 0;
  }
}
@media (max-width: 37.5em) {
  .main-nav {
    float: none;
    text-align: center;
    margin-top: 0;
  }
}
@media (max-width: 28.125em) {
  .main-nav {
    float: none;
    text-align: center;
    margin-top: 0;
  }
}

.main-nav li {
  display: inline-block;
  font-size: 2rem;
  margin-left: 3rem;
}
@media (max-width: 28.125em) {
  .main-nav li {
    margin-left: 1.2rem;
  }
}
@media (max-width: 18.75em) {
  .main-nav li {
    font-size: 1.7rem;
  }
}

.main-nav li a:link,
.main-nav li a:visited {
  padding-top: 0.8rem;
  padding-bottom: 0.5rem;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 90%;
  border-bottom: 2px solid transparent;
  -webkit-transition: border-bottom 0.2s;
  -o-transition: border-bottom 0.2s;
  transition: border-bottom 0.2s;
}

.main-nav li a:hover,
.main-nav li a:active {
  border-bottom: 2px solid #0ae8ca;
}

.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.98);
  -webkit-box-shadow: 0 2px 2px #efefef;
  box-shadow: 0 2px 2px #efefef;
  z-index: 9999;
}

.sticky .main-nav {
  margin-top: 1.8rem;
  padding-bottom: 1.5rem;
}

.sticky .main-nav li a:link,
.sticky .main-nav li a:visited {
  padding: 0.5rem 0;
  color: #555;
}

.main-nav-other {
  float: right;
  list-style: none;
  margin-top: 5.5rem;
  margin-right: 2rem;
  white-space: nowrap;
}
@media (max-width: 56.25em) {
  .main-nav-other {
    float: none;
    text-align: center;
    margin-top: 0;
  }
}
@media (max-width: 37.5em) {
  .main-nav-other {
    float: none;
    text-align: center;
    margin-top: 0;
  }
}
@media (max-width: 28.125em) {
  .main-nav-other {
    float: none;
    text-align: center;
    margin-top: 0;
  }
}

.main-nav-other li {
  display: inline-block;
  font-size: 2rem;
  margin-left: 3rem;
}
@media (max-width: 28.125em) {
  .main-nav-other li {
    margin-left: 1.2rem;
  }
}
@media (max-width: 18.75em) {
  .main-nav-other li {
    font-size: 1.7rem;
  }
}

.main-nav-other li a:link,
.main-nav-other li a:visited {
  padding-top: 0.8rem;
  padding-bottom: 0.5rem;
  color: #555;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 90%;
  border-bottom: 2px solid transparent;
  -webkit-transition: border-bottom 0.2s;
  -o-transition: border-bottom 0.2s;
  transition: border-bottom 0.2s;
}

.main-nav-other li a:hover,
.main-nav-other li a:active {
  border-bottom: 2px solid #0ae8ca;
}

.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.98);
  -webkit-box-shadow: 0 2px 2px #efefef;
  box-shadow: 0 2px 2px #efefef;
  z-index: 9999;
}

.sticky .main-nav-other {
  margin-top: 1.8rem;
  padding-bottom: 1.5rem;
}

.sticky .main-nav-other li a:link,
.sticky .main-nav-other li a:visited {
  padding: 0.5rem 0;
  color: #555;
}

.heading-primary-contact {
  font-size: 3.5rem;
  font-weight: 200;
  color: #696969;
  text-transform: uppercase;
  word-spacing: 0.5rem;
  letter-spacing: 0.8rem;
}
.heading-primary-contact::after {
  display: block;
  height: 2px;
  background-color: #0ae8ca;
  content: " ";
  width: 10rem;
  margin: 0 auto;
  margin-top: 2rem;
}

.heading-secondary-contact {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: 0.2rem;
}

.heading-tertiary-contact {
  font-size: 2rem;
  font-weight: 550;
  letter-spacing: 0.2rem;
}

.contact-p {
  font-size: 1.6rem;
  padding: 0 25rem;
}
@media (max-width: 75em) {
  .contact-p {
    padding: 0;
  }
}
@media (max-width: 37.5em) {
  .contact-p {
    padding: 0;
  }
}

.contact-form-section {
  padding: 8rem 0;
  background-color: #f4f4f4;
}

.contact-form-intro {
  width: 75%;
  margin: 0 auto;
  -webkit-box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.2);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 0.3rem;
  color: #000;
  font-size: 1.6rem;
  padding: 5rem;
  text-align: center;
}

.contact-form-container {
  width: 50%;
  border-radius: 0.3rem;
  -webkit-box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.2);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.2);
  background-color: #fff;
  margin: 0 auto;
  padding: 5rem;
  display: block;
  text-align: center;
}
@media (max-width: 75em) {
  .contact-form-container {
    width: 100%;
  }
}

.section-yourtrainer {
  padding: 8rem 0;
  background-color: #f4f4f4;
}
@media (max-width: 75em) {
  .section-yourtrainer {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
@media (max-width: 56.25em) {
  .section-yourtrainer {
    padding-left: 0;
    padding-right: 0;
  }
}

.section-workouts {
  padding: 8rem 0;
}
@media (max-width: 75em) {
  .section-workouts {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
@media (max-width: 56.25em) {
  .section-workouts {
    padding-left: 0;
    padding-right: 0;
  }
}

.section-mealplan {
  padding: 8rem 0;
  background-color: #f4f4f4;
}
@media (max-width: 75em) {
  .section-mealplan {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
@media (max-width: 56.25em) {
  .section-mealplan {
    padding-left: 0;
    padding-right: 0;
  }
}

.heading-primary-faq {
  font-size: 3.5rem;
  font-weight: 200;
  color: #696969;
  text-transform: uppercase;
  word-spacing: 0.5rem;
  letter-spacing: 0.8rem;
}
@media (max-width: 56.25em) {
  .heading-primary-faq {
    padding: 0 4rem;
  }
}
.heading-primary-faq::after {
  display: block;
  height: 2px;
  background-color: #0ae8ca;
  content: " ";
  width: 10rem;
  margin: 0 auto;
  margin-top: 2rem;
}

.heading-secondary-faq {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: 0.2rem;
}

.heading-tertiary-faq {
  font-size: 2rem;
  font-weight: 550;
  letter-spacing: 0.2rem;
}

.faq-p {
  font-size: 1.6rem;
  padding: 0 25rem;
}
@media (max-width: 75em) {
  .faq-p {
    padding: 0 4rem;
  }
}
@media (max-width: 37.5em) {
  .faq-p {
    padding: 0 5rem;
  }
}

/*# sourceMappingURL=style.css.map */