/* 
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
------------------------------- TYPOGRAPHY -----------------------------------------
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
*/

@font-face {
  font-family: "Montserrat";
  src: url("./Assets/fonts/montserrat-black-webfont.woff2") format("woff2"),
    url("./Assets/fonts/montserrat-black-webfont.woff") format("woff");
  font-weight: 900;
  font-style: black;
}

@font-face {
  font-family: "Montserrat";
  src: url("./Assets/fonts/montserrat-bold-webfont.woff2") format("woff2"),
    url("./Assets/fonts/montserrat-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: bold;
}

@font-face {
  font-family: "Montserrat";
  src: url("./Assets/fonts/montserrat-medium-webfont.woff2") format("woff2"),
    url("./Assets/fonts/montserrat-medium-webfont.woff") format("woff");
  font-weight: 500;
  font-style: medium;
}

@font-face {
  font-family: "Montserrat";
  src: url("./Assets/fonts/montserrat-regular-webfont.woff2") format("woff2"),
    url("./Assets/fonts/montserrat-regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: regular;
}

html {
  font-size: 1em;
  scroll-behavior: smooth;
}

body {
  font-family: "Montserrat", sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  font-family: "Montserrat";
  font-weight: 900;
  font-size: 28px;
  color: #000000;
  text-align: center;
  line-height: 36px;
  margin-bottom: 40px;
  margin-top: 40px;
}

@media (min-width: 768px) {
  h1 {
    font-size: 36px;
    line-height: 42px;
  }
}

h2 {
  font-family: "Montserrat";
  font-weight: 700;
  font-size: 18px;
  color: #ffffff;
  text-align: center;
  line-height: 32px;
}

@media (min-width: 768px) {
  h2 {
    font-size: 24px;
    line-height: 32px;
  }
}

h3 {
  font-family: "Montserrat";
  font-weight: 700;
  font-size: 18px;
  color: #000000;
  text-align: center;
  line-height: 28px;
}

h4 {
  font-family: "Montserrat";
  font-weight: 700;
  font-size: 16px;
  color: #000000;
  text-align: center;
  line-height: 26px;
}

h5 {
  font-family: "Montserrat";
  font-weight: 700;
  text-align: left;
  font-size: 12px;
  color: #000000;
  letter-spacing: 1.4px;
  line-height: 18px;
}

h6 {
  font-family: "Montserrat";
  font-weight: 400;
  text-transform: uppercase;
  font-size: 12px;
  color: #000000;
  letter-spacing: 1.2px;
  line-height: 18px;
}

p {
  font-family: "Montserrat";
  font-weight: 400;
  font-size: 16px;
  color: #000000;
  line-height: 26px;
  margin-bottom: 40px;
}

button {
  font-family: "Montserrat";
  font-weight: 700;
  font-size: 18px;
  color: #ffffff;
  line-height: 26px;
  text-align: center;
  width: 80%;
  height: 58px;
  border-radius: 6.25rem;
  background-color: #fb515e;
  border: none;
  display: inline-block;
  padding: 0px;
  cursor: pointer;
  outline: none;
  margin-bottom: 40px;
}

.whiteButton {
  background-color: #ffffff;
  color: #fb515e;
}

@media (min-width: 401px) {
  button {
    width: 60%;
  }
}

@media (min-width: 501px) {
  button {
    width: 50%;
  }
}

@media (min-width: 560px) {
  button {
    width: 40%;
  }

  #section10inputButton {
    width: 60%;
  }
}

@media (min-width: 768px) {
  button {
    width: 60%;
    height: 48px;
  }
}

@media (min-width: 1024px) {
  button {
    width: 40%;
    height: 58px;
  }

  .s8buttons {
    width: 70%;
  }
}
a {
  font-family: "Montserrat";
  font-weight: 500;
  font-size: 16px;
  color: #000000;
  text-align: right;
  line-height: 26px;
  text-decoration: none;
  cursor: pointer;
}

a:active {
  color: #0077ff;
  text-decoration: underline;
}

@media (min-width: 768px) {
  a {
    font-size: 14px;
  }
}

.footera {
  font-weight: 400;
}

@media (min-width: 1440px) {
  .footera {
    font-size: 16px;
    font-weight: 500;
  }
}

input {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid #f1f1f1;
  border-radius: 50px;

  font-family: "Montserrat";
  font-weight: 400;
  font-size: 14px;
  color: #909090;
  letter-spacing: 0.3px;
  text-align: left;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* 
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
----------------------------------- Margins ----------------------------------------
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
*/

.defaultMarigns {
  padding: 7% 5%;
}

@media (min-width: 1124px) {
  .defaultMarigns {
    padding: 7% 10%;
  }
}

@media (min-width: 1024px) {
  .defaultMarigns {
    padding: 5% 10%;
  }
}

.buttonMargins {
  margin-top: 10%;
}

@media (min-width: 560px) {
  .buttonMargins {
    margin-top: 10%;
    margin-bottom: 10%;
  }
}

@media (min-width: 768px) {
  .buttonMargins {
    margin-top: 17px;
    margin-bottom: 0;
  }
}

@media (min-width: 1024px) {
  .buttonMargins {
    margin-top: 40px;
  }
}

/* 
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
----------------------------------- Animations ----------------------------------------
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
*/

.buttonHoverAnim {
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.buttonHoverAnim:hover {
  border-radius: 0px;
}

.lds-dual-ring {
  display: inline-block;
  width: 25px;
  height: 25px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 25px;
  height: 25px;
  margin: 1px;
  border-radius: 50%;
  border: 4px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
----------------------------------- Anchor Optimisations ---------------------------
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
*/

.anchor {
  display: block;
  padding-top: 80px;
  margin-top: -80px;
}

@media (min-width: 560px) {
  .anchor {
    display: block;
    padding-top: 100px;
    margin-top: -100px;
  }
}

/* 
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
----------------------------------- Landing Page ----------------------------------------
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
*/

.LandingPage {
  overflow: hidden;
  display: grid;
}

.centerText {
  text-align: center;
}

.leftText {
  text-align: left;
}

.whiteText {
  color: white;
}

.blackText {
  color: black;
}

.upperText {
  text-transform: uppercase;
}

.normalText {
  text-transform: capitalize;
}

.underline {
  text-decoration: underline;
}

.odd {
  background-color: white;
}
.even {
  background-color: #eef3f8;
}

#LPsection1Background {
  grid-area: one;
}

#LPsection2Background {
  grid-area: two;
}

#LPsection3Background {
  grid-area: three;
}

#LPsection4Background {
  grid-area: four;
}

#LPsection5Background {
  grid-area: five;
}

#LPsection6Background {
  grid-area: six;
}

#LPsection7Background {
  grid-area: seven;
}

#LPsection8Background {
  grid-area: eight;
}

#LPsection9Background {
  grid-area: nine;
}

#LPsection10Background {
  grid-area: ten;
}

#LPsection11Background {
  grid-area: eleven;
}

.LandingPage {
  grid-template-columns: 100%;
  grid-template-areas:
    "one"
    "two"
    "three"
    "seven"
    "four"
    "five"
    "six"
    "eight"
    "nine"
    "ten"
    "eleven";
}

/* 
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
----------------------------------- Section 1 ----------------------------------------
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
*/

.LPsection1 {
  margin: 0px;
  padding: 0px;
}

.LPsection1 {
  display: grid;
  grid-template-areas:
    "header"
    "illustration1"
    "title"
    "button"
    "body";
}

#HeaderLogo {
  cursor: pointer;
}

#section1Button {
  grid-area: button;
  align-self: center;
  justify-self: center;
}
#section1Title {
  grid-area: title;
}
#section1Body {
  grid-area: body;
  text-align: center;
  padding: 0% 2%;
}
#section1SubTitle {
  grid-area: subtitle;
  display: none;
}

#illustration1 {
  grid-area: illustration1;
  width: 100%;
}

#LPSection1HighlightColor {
  display: none;
}

#headerRedHighlight {
  display: none;
}

.Header {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-areas:
    "logo burger"
    "links links";
  grid-area: header;
  z-index: 1;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  padding-top: 4%;
  background-color: #fb515e;
  padding-bottom: 4%;
}

.headerLinks {
  display: grid;
  padding: 5% 0%;
  color: white;
  padding-bottom: 0.5%;
}

.headerLinkContainer {
  grid-area: links;
  padding: 0% 5%;
}

.headerLinkGroup {
  display: none;
  align-items: center;
  justify-items: center;
  background-color: #fb515e;
  padding-top: 5%;
}

@media (min-width: 768px) {
  .Header {
    box-sizing: border-box;
  }

  .headerLinkContainer {
    box-sizing: border-box;
    border-bottom: 1px solid #f1f1f1;
  }
}
/*
.headerLinkLine {
  width: 60%;
  border: 0;
  height: 1px;
  background: white;
}
*/
#HeaderLogo {
  grid-area: logo;
  width: 50%;
  align-self: center;
  justify-self: left;
  padding-left: 20%;
}

#HeaderHamburger {
  grid-area: burger;
  align-self: center;
  justify-self: end;
  padding-right: 20%;
  width: 25%;
}

@media (min-width: 460px) {
  #HeaderHamburger {
    width: 20%;
  }
}

@media (min-width: 600px) {
  #HeaderHamburger {
    width: 15%;
  }
}

@media (min-width: 501px) {
  #HeaderLogo {
    width: 40%;
  }

  #section1Body {
    padding: 0% 4%;
  }

  .Header {
    padding-top: 3%;
    padding-bottom: 3%;
  }
}

@media (min-width: 768px) {
  .LPsection1 {
    grid-template-columns: 25% 35% 40%;
    grid-template-areas:
      "header header header"
      "illustration1 illustration1 subtitle"
      "illustration1 illustration1 title"
      "illustration1 illustration1 body"
      "illustration1 illustration1 button";
  }

  #section1Title {
    padding-top: 30%;
    padding-right: 10%;
    align-self: end;
    margin-bottom: 5%;
  }

  #LPSection1HighlightColor {
    background-color: #fb515e;
    grid-row-start: 1;
    grid-row-end: 6;
    grid-column-start: 1;
    grid-column-end: 2;
    display: grid;
    padding: 0;
    margin: 0;
    z-index: 0;
  }

  #illustration1 {
    width: 70%;
    justify-self: end;
    align-self: center;
    padding-right: 10%;
    z-index: 1;
  }

  #section1Title {
    text-align: left;
  }

  #section1Body {
    text-align: left;
    padding-right: 10%;
  }

  #section1Button {
    justify-self: left;
  }

  #HeaderHamburger {
    display: none;
  }

  #headerLink1 {
    grid-area: link1;
  }

  #headerLink2 {
    grid-area: link2;
  }

  #headerLink3 {
    grid-area: link3;
  }

  #headerLink4 {
    grid-area: link4;
  }

  #headerLink5 {
    grid-area: link5;
  }

  #headerLink6 {
    grid-area: link6;
  }

  #HeaderLogo {
    width: 35%;
    align-self: center;
    justify-self: center;
  }

  .headerLinkGroup {
    display: grid;
    grid-template-columns: 24% 15.2% 15.2% 15.2% 15.2% 15.2%;
    grid-template-areas: "link1 link2 link3 link4 link5 link6";
    background: white;
    align-self: center;
    justify-self: center;
    padding-bottom: 5%;
    width: 100%;
  }

  .headerLinkLine {
    display: none;
  }

  .headerLinks {
    color: black;
    margin: 0% 5%;
    padding: 0%;
  }

  #headerRedHighlight {
    display: grid;
    grid-area: colour;

    background-color: #fb515e;
    grid-row-start: 1;
    grid-row-end: 6;
    grid-column-start: 1;
    grid-column-end: 2;
  }

  .Header {
    display: grid;
    grid-template-columns: 25% 75%;
    grid-template-areas: "logo links";
    grid-area: header;
    z-index: 2;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background-color: white;
    padding: 0%;
  }
}

@media (min-width: 950px) {
  #HeaderLogo {
    width: 30%;
  }
}

@media (min-width: 1024px) {
  .LPsection1 {
    grid-template-columns: 25% 25% 50%;
  }
  #illustration1 {
    width: 65%;
    padding-right: 15%;
  }

  #section1SubTitle {
    display: grid;
    padding-top: 15%;
    margin-bottom: 5%;
  }

  #section1Title {
    padding-top: 0%;
    padding-right: 20%;
    margin-bottom: 5%;
    margin-top: 2%;
  }

  #section1Body {
    padding-right: 20%;
    margin-bottom: 5%;
    padding-left: 0%;
  }

  #section1Button {
    margin-bottom: 10%;
    width: 45%;
    height: 58px;
  }

  .headerLinkGroup {
    grid-template-columns: 20% 16% 16% 16% 16% 16%;
    grid-template-areas: "link1 link2 link3 link4 link5 link6";
  }
}

@media (min-width: 1100px) {
  #section1Button {
    margin-bottom: 12%;
  }

  #section1Title {
    padding-right: 25%;
  }

  #section1Body {
    padding-right: 25%;
  }
}

@media (min-width: 1200px) {
  #section1Button {
    margin-bottom: 14%;
  }
}

@media (min-width: 1300px) {
  #section1Button {
    margin-bottom: 16%;
  }

  #section1Title {
    padding-right: 40%;
  }

  #section1Body {
    padding-right: 40%;
  }
}

@media (min-width: 1440px) {
  #HeaderLogo {
    width: 25%;
  }

  #illustration1 {
    margin-top: 10%;
  }

  .headerLinkGroup {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas: "link1 link2 link3 link4 link5 link6";
  }
}

/* 
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
----------------------------------- Section 2 ----------------------------------------
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
*/

#illustration2 {
  width: 100%;
  grid-area: illustration2;
}

#section2Body {
  text-align: center;
  grid-area: s2body;
}

#section2Title {
  grid-area: s2title;
}

.LPsection2 {
  display: grid;
  grid-template-columns: 100%;
  grid-template-areas: "illustration2" "s2title" "s2body";
}

@media (min-width: 560px) {
  #illustration2 {
    width: 80%;
    align-self: center;
    justify-self: center;
  }
}
@media (min-width: 768px) {
  .LPsection2 {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas:
      "illustration2 s2title"
      "illustration2 s2body";
  }

  #illustration2 {
    padding-right: 10%;
    justify-self: center;
    align-self: center;
    width: 90%;
  }

  #section2Body {
    text-align: left;
    margin-top: 0;
    align-self: start;
  }

  #section2Title {
    text-align: left;
    align-self: end;
    justify-self: center;
  }
}

@media (min-width: 850px) {
  #illustration2 {
    width: 100%;
  }
}

@media (min-width: 900px) {
  #section2Title {
    padding-right: 10%;
  }
  #section2Body {
    padding-right: 10%;
  }
}

@media (min-width: 1024px) {
  #section2Body {
    margin-right: 0%;
    padding-right: 10%;
  }
  #section2Title {
    margin-right: 0%;
    padding-right: 10%;
  }
}

/* 
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
----------------------------------- Section 3 ----------------------------------------
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
*/

#illustration3 {
  width: 100%;
  margin-top: 5%;
  margin-bottom: 5%;
}

#section3Title {
  margin-top: 40px;
}

@media (min-width: 768px) {
  #illustration3 {
    grid-area: illustration3;
  }

  #section3Title {
    grid-area: section3Title;
    text-align: left;
    padding-right: 20%;
  }

  #s3Blurb1 {
    grid-area: s3Blurb1;
  }

  #s3Blurb2 {
    grid-area: s3Blurb2;
  }

  .s3Blurb {
    display: grid;
  }

  #section3SubTitle1 {
    text-align: left;
    margin-bottom: 2%;
  }

  #section3Body1 {
    text-align: left;
    padding-right: 10%;
  }

  #section3SubTitle2 {
    text-align: left;
    margin-bottom: 2%;
  }

  #section3Body2 {
    text-align: left;
    padding-right: 10%;
  }

  .LPsection3 {
    display: grid;
    grid-template-columns: 40% 30% 30%;
    grid-template-areas:
      "section3Title s3Blurb1 s3Blurb2"
      "illustration3 illustration3 illustration3";
  }
}
/* 
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
----------------------------------- Section 4 ----------------------------------------
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
*/

.LPsection4 {
  display: grid;
}

#illustration4 {
  width: 100%;
}

#section4Button {
  align-self: center;
  justify-self: center;
}

.s4Blurb {
  display: grid;
  padding: 0% 10%;
}

@media (min-width: 500px) {
  #illustration4 {
    width: 60%;
    align-self: center;
    justify-self: center;
  }
}

@media (min-width: 768px) {
  #illustration4 {
    grid-area: illustration4;
    width: 100%;
  }

  #section4Title {
    grid-area: section4Title;
    text-align: left;
    padding-right: 5%;
    align-self: end;
    justify-self: start;
  }

  #section4Body1 {
    grid-area: section4Body1;
    text-align: left;
    margin: 0;
    padding: 0;
    padding-right: 5%;
  }

  #section4Button {
    grid-area: section4Button;
    align-self: start;
    justify-self: start;
    margin-top: 24px;
  }

  #s4Blurb1 {
    grid-area: s4Blurb1;
  }

  #s4Blurb2 {
    grid-area: s4Blurb2;
  }

  #s4Blurb3 {
    grid-area: s4Blurb3;
  }

  #section4SubTitle1 {
    text-align: left;
  }

  #section4Body2 {
    text-align: left;
    margin-bottom: 3%;
  }

  #section4SubTitle2 {
    text-align: left;
  }

  #section4Body3 {
    text-align: left;
    margin-bottom: 3%;
  }

  .s4Blurb {
    padding-top: 10%;
    padding-bottom: 4%;
  }

  .LPsection4 {
    grid-template-columns: 50% 50%;
    grid-template-areas:
      "section4Title illustration4"
      "section4Body1 illustration4"
      "section4Button illustration4"
      "s4Blurb1 s4Blurb2"
      "s4Blurb3 s4Blurb3";
  }

  #s4Blurb3 {
    grid-area: s4Blurb3;
    justify-self: center;
    align-self: center;
    padding: 0% 30%;
  }
}

@media (min-width: 1200px) {
  .LPsection4 {
    grid-template-columns: 30% 40% 30%;
    grid-template-areas:
      "section4Title illustration4 s4Blurb1"
      "section4Body1 illustration4 s4Blurb2"
      "section4Button illustration4 s4Blurb3";
  }

  #section4Body1 {
    margin: 15% 0%;
    margin-top: 10%;
  }
  .s4Blurb {
    padding: 0% 5% 0% 15%;
  }

  #illustration4 {
    align-self: center;
  }

  #s4Blurb3 {
    padding: 0% 5% 0% 15%;
  }

  #section4SubTitle3 {
    text-align: left;
  }

  #section4Body4 {
    text-align: left;
  }

  #section4SubTitle1 {
    align-self: center;
  }
  #section4SubTitle2 {
    align-self: center;
  }
  #section4SubTitle3 {
    align-self: center;
  }

  #section4Button {
    width: 70%;
    margin-top: 0px;
  }

  #section4Title {
    margin-bottom: 5%;
  }
}

@media (min-width: 1250px) {
  #section4Body2 {
    display: grid;
  }

  #section4Body3 {
    display: grid;
  }
  #section4Body4 {
    display: grid;
  }
}
/* 
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
----------------------------------- Section 5 ----------------------------------------
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
*/
#LPsection5FBvideo {
  display: block;
  margin: 0 auto;
}

@media (min-width: 768px) {
  #LPsection5FBvideo {
    padding: 5% 15%;
    padding-bottom: 2%;
  }
}

/* 
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
----------------------------------- Section 6 ----------------------------------------
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
*/

#section6Title {
  display: none;
}

#section6Body4 {
  display: none;
}

#section6Body5 {
  display: none;
}

@media (min-width: 768px) {
  #section6SubTitle1 {
    text-align: left;
  }

  #section6Body1 {
    text-align: left;
    padding-right: 7%;
  }

  #section6SubTitle2 {
    text-align: left;
  }

  #section6Body2 {
    text-align: left;
    padding-right: 7%;
  }

  #section6SubTitle3 {
    text-align: left;
  }

  #section6Body3 {
    text-align: left;
    padding-right: 7%;
  }

  #section6Title {
    display: grid;
    grid-area: section6Title;
    text-align: left;
    padding-bottom: 5%;
  }

  #section6Body4 {
    display: grid;
    grid-area: section6Body1;
    text-align: left;
    padding-right: 15%;
  }

  #section6Body5 {
    display: grid;
    grid-area: section6Body2;
    text-align: left;
    padding-right: 15%;
  }

  #s6Blurb1 {
    grid-area: s6Blurb1;
    text-align: left;
  }

  #s6Blurb2 {
    grid-area: s6Blurb2;
  }

  #s6Blurb3 {
    grid-area: s6Blurb3;
  }

  .LPsection6 {
    display: grid;
    grid-template-columns: 33.333% 16.6665% 16.6665% 33.333%;
    grid-template-areas:
      "s6Blurb1 s6Blurb2 s6Blurb2 s6Blurb3"
      "section6Title section6Title section6Title section6Title"
      "section6Body1 section6Body1 section6Body2 section6Body2";
  }
}
/* 
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
----------------------------------- Section 7 ----------------------------------------
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
*/

.s7image {
  width: 100%;
}
.section7Feature {
  margin-top: 20%;
  display: grid;
  align-items: center;
  justify-items: center;
}

@media (min-width: 500px) {
  .section7Feature {
    margin-top: 10%;
  }
}
@media (min-width: 560px) {
  .s7image {
    width: 90%;
  }

  .section7Feature {
    margin-top: 10%;
  }

  #section7Title1 {
    grid-area: section7Title1;
    margin: 2%;
  }

  #section7Body1 {
    grid-area: section7Body1;
    margin-bottom: 2%;
  }

  #section7Feature1 {
    grid-area: section7Feature1;
  }

  #section7Feature2 {
    grid-area: section7Feature2;
  }

  #section7Feature3 {
    grid-area: section7Feature3;
  }

  #section7Feature4 {
    grid-area: section7Feature4;
  }

  #section7Feature5 {
    grid-area: section7Feature5;
  }

  #section7Feature6 {
    grid-area: section7Feature6;
  }
  .LPsection7 {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas:
      "section7Title1 section7Title1"
      "section7Body1 section7Body1"
      "section7Feature1 section7Feature2"
      "section7Feature3 section7Feature4"
      "section7Feature5 section7Feature6";
  }
}

@media (min-width: 900px) {
  #section7Body1 {
    padding: 0% 10%;
  }
}
@media (min-width: 1024px) {
  .LPsection7 {
    grid-template-columns: 33.33% 33.33% 33.33%;
    grid-template-areas:
      "section7Title1 section7Title1 section7Title1"
      "section7Body1 section7Body1 section7Body1"
      "section7Feature1 section7Feature2 section7Feature3"
      " section7Feature4 section7Feature5 section7Feature6";
  }
}

/* 
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
----------------------------------- Section 8 ----------------------------------------
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
*/

.LPsection8 {
  display: grid;
}

.s8image {
  width: 100%;
  margin-bottom: 5%;
}

.s8blurb {
  display: grid;
  align-items: center;
  justify-items: center;
  margin: 10% 0%;
}

#section8image3 {
  cursor: pointer;
}

#section8image2 {
  cursor: pointer;
}

#youarehere {
  color: #fb515e;
  margin: 0;
}

#section8Button1 {
  background-color: #eef3f8;
  color: #fb515e;
  cursor: default;
}

@media (min-width: 560px) {
  .s8image {
    width: 70%;
    margin-bottom: 5%;
  }
}

#s8Title {
  grid-area: s8Title;
}

#s8blurb1 {
  grid-area: s8blurb1;
}

#s8blurb2 {
  grid-area: s8blurb2;
}

#s8blurb3 {
  grid-area: s8blurb3;
}

.LPsection8 {
  grid-template-columns: 100%;
  grid-template-areas:
    "s8Title"
    "s8blurb3"
    "s8blurb2"
    "s8blurb1";
}

@media (min-width: 768px) {
  .LPsection8 {
    grid-template-columns: 50% 50%;
    grid-template-areas:
      "s8Title s8Title"
      "s8blurb3 s8blurb2"
      "s8blurb1 s8blurb1";
  }

  #s8blurb1 {
    margin: 0% 25%;
    margin-top: 10%;
  }

  .s8blurbbodies {
    padding: 0% 5%;
  }
}

@media (min-width: 1024px) {
  .LPsection8 {
    grid-template-columns: 33.33% 33.33% 33.33%;
    grid-template-areas:
      "s8Title s8Title s8Title"
      "s8blurb3 s8blurb2 s8blurb1";
  }

  #s8blurb1 {
    margin: 10% 0%;
  }
}

@media (min-width: 1440px) {
  .s8blurbbodies {
    padding: 0% 8%;
  }
}
/* 
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
----------------------------------- Section 9 ----------------------------------------
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
*/

#LPsection9Background {
  background-color: #fb515e;
  padding: 7% 0%;
}

#section7Body {
  text-align: center;
}

@media (min-width: 768px) {
  #LPsection9Background {
    padding: 0.5% 0%;
  }
}

@media (min-width: 900px) {
  #section9Body {
    padding: 0% 10%;
  }
}

/* 
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
----------------------------------- Section 10 ----------------------------------------
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
*/

#section10getInputFormGroup {
  display: grid;
}
.LPsection10inputTextElement {
  margin-bottom: 0%;
  padding-left: 5%;
}

#section10inputButton {
  align-self: center;
  justify-self: center;
}

#input4Element {
  height: 150px;
  border-radius: 25px;
}
@media (min-width: 560px) {
  #section10InputFormContainer {
    margin: 0% 15%;
  }
}
@media (min-width: 768px) {
  #input3TextElement {
    padding-left: 2.5%;
  }

  #input4TextElement {
    padding-left: 2.5%;
  }
  #section10inputTitle {
    grid-area: section10inputTitle;
  }

  #section10inputBody {
    grid-area: section10inputBody;
  }

  #input1 {
    grid-area: input1;
  }
  #input2 {
    grid-area: input2;
  }
  #input3 {
    grid-area: input3;
  }
  #input4 {
    grid-area: input4;
  }
  #section10inputButton {
    grid-area: section10inputButton;
    height: 58px;
    width: 45%;
  }

  #input1 {
    padding-right: 10%;
  }
  #input2 {
    padding-left: 10%;
  }

  #section10inputTitle {
    margin-bottom: 1%;
  }

  #section10inputButton {
    margin-top: 5%;
  }
  #section10getInputFormGroup {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas:
      "section10inputTitle section10inputTitle"
      "section10inputBody section10inputBody"
      "input1 input2"
      "input3 input3"
      "input4 input4"
      "section10inputButton section10inputButton";
  }
}

@media (min-width: 1024px) {
  #section10InputFormContainer {
    padding: 0% 0%;
  }

  #section10inputButton {
    width: 45%;
  }
}

#buttonloader {
  margin: 0% 10%;
  display: none;
}

#buttonloadinggroup {
  display: flex;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  justify-content: center;
}
/* 
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
----------------------------------- Section 11 ----------------------------------------
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
*/
.LPsection11 {
  margin: 0;
  padding: 0;
}

#LPsection11MailTo {
  display: grid;
}

#s11mailtocontent {
  background-color: #fb515e;
  display: grid;
  padding: 7% 0%;
}

#openMail {
  display: grid;
  align-items: center;
  justify-items: center;
}

#section11Button {
  align-self: center;
  justify-self: center;
  margin-bottom: 15px;
}

#Footer {
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 7% 0%;
  padding-bottom: 3%;
}

.footerpadding {
  padding: 15% 0%;
}

#FooterLogo {
  width: 35%;
  padding: 10% 0%;
}

#copyright {
  margin-bottom: 0px;
  padding: 0% 5%;
}

#footerLinks {
  display: grid;
  align-items: center;
  justify-items: center;
}

#s11Body {
  padding: 0% 5%;
}

#LPsection11Address {
  padding-left: 5%;
  padding-right: 5%;
}

@media (min-width: 400px) {
  .footerpadding {
    padding: 10% 0%;
  }

  #FooterLogo {
    padding: 8% 0%;
  }
}

@media (min-width: 400px) {
  #FooterLogo {
    padding: 5% 0%;
    width: 30%;
  }
}

@media (min-width: 560px) {
  .footerpadding {
    padding: 10% 0%;
  }

  #FooterLogo {
    width: 25%;
  }
}

@media (min-width: 650px) {
  #FooterLogo {
    width: 20%;
  }
}

@media (min-width: 768px) {
  #s11Title {
    grid-area: s11Title;
  }

  #s11Body {
    grid-area: s11Body;
  }

  #LPsection11Address {
    grid-area: LPsection11Address;
    padding-left: 10%;
    padding-right: 10%;
  }

  #LPsection11Phone {
    grid-area: LPsection11Phone;
  }

  #LPsection11MailTo {
    grid-area: LPsection11MailTo;
  }

  #Footer {
    grid-area: Footer;
  }

  #LPsection11MailTo {
    width: 60%;
    align-self: center;
    justify-self: center;
  }

  .footerpadding {
    padding: 5% 5%;
  }

  .LPsection11 {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas:
      "s11Title s11Title"
      "s11Body s11Body"
      "LPsection11Address LPsection11Phone"
      "LPsection11MailTo LPsection11MailTo"
      "Footer Footer";
  }

  #Footer {
    display: grid;
    margin: 0% 10%;
  }

  #footerLinks {
    grid-auto-flow: column;
  }

  #footerLinkContainer {
    grid-area: flinks;
    width: 100%;
    margin-bottom: 3%;
  }

  #FooterLogo {
    grid-area: flogo;
    width: 25%;
    justify-self: start;
  }

  #copyright {
    grid-area: copyright;
    font-size: 12px;
  }

  #Footer {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas: "flinks flinks" "flogo copyright";
  }
}

@media (min-width: 900px) {
  #s11Body {
    padding: 0% 10%;
  }
}
@media (min-width: 1024px) {
  .LPsection11 {
    grid-template-columns: 25% 25% 50%;
    grid-template-areas:
      "s11Title s11Title LPsection11MailTo"
      "s11Body s11Body LPsection11MailTo"
      "LPsection11Address LPsection11Phone LPsection11MailTo"
      "Footer Footer Footer";
    margin-left: 10%;
    margin-top: 5%;
  }

  #Footer {
    margin-left: 0;
  }

  #LPsection11MailTo {
    width: 100%;
    height: 100%;
  }

  #section11Button {
    width: 55%;
  }

  #s11mailtocontent {
    margin: 10%;
  }

  #s11Title {
    align-self: end;
    justify-self: start;
    text-align: left;
  }

  #s11Body {
    text-align: left;
    padding: 0%;
    padding-right: 10%;
  }

  #LPsection11Address h4 {
    text-align: left;
  }

  #LPsection11Address p {
    text-align: left;
  }

  #LPsection11Phone h4 {
    text-align: left;
  }

  #LPsection11Phone p {
    text-align: left;
  }

  #LPsection11Address {
    padding-left: 0px;
    padding-right: 15%;
  }

  #s11Title {
    align-self: end;
    justify-self: start;
  }

  #footerLinks {
    margin: 0% 5%;
  }

  #FooterLogo {
    cursor: pointer;
  }
}