@font-face {
  font-family: Azo Sans;
  src: url('Fonts/AzoSans-Black.woff2');
}

@font-face {
  font-family: Azo Sans Regular;
  src: url('Fonts/AzoSans-Regular.woff2');
}

body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 15%;
}

.flex-container > div {
  margin: 10px;
  padding: 20px;
}

ul {
  display: flex;
  position: relative;
  margin: 0;
  padding: 10px 250px 0 0;
  list-style-type: none;
  align-items: center;
  font-family: "Azo Sans", sans-serif;
}

li {
  display: flex;
}

li a {
  display: flex;
  color: #496b84;
  font-size: 16px;
  line-height: 12px;
  opacity: 0.8;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  color: #0067be;
  cursor: pointer;
}

.logo {
  height: 35px;
  width: auto;
  margin-right: 32px;
  margin-left: 0;
  display: block;
  cursor: pointer;
}

button {
  border: 0;
  border-radius: 6px;
  box-shadow: 0 8px 24px #0e293740;
  background-color: #0DB88F;
  color: white;
  font-size: 18px;
  font-family: "Azo Sans",sans-serif;
  padding: 16px 20px 12px;
  line-height: 22px;
  margin: 0 50px;  
  z-index: 1;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: rgba(12, 166, 129, 1);
}

.location-button {
  margin-left: auto;
  display: flex;
}

.navbarline {
  display: flex;
  width: 100%;
}

.backdrop {
  background-image: url(https://39646145.fs1.hubspotusercontent-na1.net/hubfs/39646145/bg-desktop@3x.webp);
  position: absolute;
  max-width: 100%;
  height: 700px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow-x: hidden;
}

.empower {
  display: flex;
  margin-left: 20%;
  margin-top: 2%;
  width: 58%;
}

.map-icon {
  position: absolute;
  top: 61.5%;
  left: 44.7%;
  width: 15px;
  height: auto;
  justify-content: center;
}

.NO {
  position: absolute;
  font-family: "Azo Sans Regular",sans-serif;
  font-weight: bold;
  color: white;
  top: 60%;
  left: 45.9%;
  justify-content: center;
}

.second-button {
  position: absolute;
  border: 0;
  border-radius: 6px;
  box-shadow: 0 8px 24px #0e293740;
  background-color: #0DB88F;
  color: white;
  font-size: 18px;
  font-family: "Azo Sans",sans-serif;
  padding: 16px 20px 12px;
  line-height: 22px;
  margin: 0 50px;  
  cursor: pointer;
  transition: background-color 0.3s ease;
  top: 65%;
  right: 43%;
  justify-content: center;
}

.jumping-ninja {
  position: absolute;
  top: 73%;
  left: -1%;
  width: 20%;
  height: auto;
  justify-content: center;
}

.happy-ninja {
  position: absolute;
  top: 73%;
  left: 83%;
  width: 15%;
  height: auto;
  justify-content: center;
}

.why {
  position: absolute;
  font-family: "Azo Sans",sans-serif;
  font-weight: bold;
  color: #0E2937;
  top: 90%;
  left: 45.9%;
  font-size: 48px;
  justify-content: center;
}

.code-ninjas {
  position: absolute;
  font-family: "Azo Sans",sans-serif;
  font-weight: bold;
  color: #187ABF;
  top: 95%;
  left: 40.3%;
  font-size: 48px;
  justify-content: center;
}

.message {
  position: absolute;
  font-family: "Azo Sans Regular",sans-serif;
  color: #506690;
  line-height: 26px;
  top: 105%;
  left: 24%;
  right: 24%;
  font-size: 16px;
  max-width: 650px;
  text-align: center;
  margin: auto;
}

.MSNBC {
  position: absolute;
  top: 127%;
  left: 30%;
  width: 7%;
}

.parents {
  position: absolute;
  top: 127%;
  left: 40%;
  width: 5%;
}

.abc {
  position: absolute;
  top: 127%;
  left: 48%;
  width: 2%;
}

.lifehacker {
  position: absolute;
  top: 127%;
  left: 53%;
  width: 6%;
}

.entrepreneur {
  position: absolute;
  top: 127.3%;
  left: 62%;
  width: 7%;
}

.messagea {
  position: absolute;
  font-family: "Azo Sans",sans-serif;
  color: #506690;
  line-height: 26px;
  top: 138%;
  left: 24%;
  right: 24%;
  font-size: 20px;
  max-width: 650px;
  text-align: center;
  margin: auto;
}

.messageb {
  position: absolute;
  font-family: "Azo Sans",sans-serif;
  color: #506690;
  line-height: 26px;
  top: 141%;
  left: 24%;
  right: 24%;
  font-size: 20px;
  max-width: 650px;
  text-align: center;
  margin: 0px 172px;
}

.play-button {
  position: absolute;
  border: 0;
  border-radius: 50%;
  background-color: #7e8c94;
  font-size: 30px;
  padding: 40px 40px 40px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  top: 168%;
  left: 45.5%;
  align-items: center;
  justify-content: center;
}

.play-button:hover {
  background-color: #0270e0;
}

.triangle {
  position: absolute;
  top: 170.3%;
  left: 49.7%;
  width: 1.5%;
  z-index: 10;
}

.building {
  position: absolute;
  top: 146%;
  left: 27.7%;
  width: 45%;
  border-radius: 25px;
  box-shadow: 0 8px 24px #0e293740;
}

.bubblea {
  position: absolute;
  top: 143%;
  left: 24%;
  width: 7%;
}

.bubbleb {
  position: absolute;
  top: 180%;
  left: 68%;
  width: 7%;
}

.light-gradient {
  position: absolute;
  top: 96%;
  width: 100%;
  height: auto;
  background-position: top;
  background-size: cover;
  z-index: -1;
}

.messagec {
  position: absolute;
  font-family: "Azo Sans Regular",sans-serif;
  color: #187abf;
  top: 210%;
  left: 24%;
  right: 24%;
  font-size: 20px;
  text-align: center;
  margin: auto;
}

.messaged {
  position: absolute;
  font-family: "Azo Sans",sans-serif;
  line-height: 20%;
  color: #0E2937;
  top: 215%;
  left: 24%;
  right: 24%;
  font-size: 56px;
  text-align: center;
  margin: auto;
}

.programs-color {
  color: #187ABF;
}

.create {
  position: absolute;
  top: 220%;
  width: 100%;
  height: 620px;
  background-color: rgba(0,103,190, 0.7);
  background-image: url(https://39646145.fs1.hubspotusercontent-na1.net/hubfs/39646145/CodeNinjas%20-%20Marketting%20Website/Gradients/Color-Fade_2x.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.createblob {
  position: absolute;
  top: 230%;
  left: 23%;
  width: 27%;
  height: auto;
  z-index: 1;
}

.create-display {
  position: absolute;
  top: 234%;
  left: 23%;
  width: 27%;
  height: auto;
  z-index: 2;
}

.ages {
  position: absolute;
  top: 235%;
  left: 53%;
  font-family: "Azo Sans Regular",sans-serif;
  color: #8EECFF;
  font-size: 20px;
  font-weight: bold;
  z-index: 2;
}

.site {
  position: absolute;
  top: 237%;
  left: 53%;
  font-family: "Azo Sans Regular",sans-serif;
  font-weight: bold;
  color: white;
  font-size: 24px;
  z-index: 2;
}

.create-title {
  position: absolute;
  top: 238%;
  left: 53%;
  font-family: "Azo Sans",sans-serif;
  font-weight: bold;
  color: #8EECFF;
  font-size: 65px;
  z-index: 2;
  max-width: 400px;
}

.create-text {
  position: absolute;
  top: 249%;
  left: 53%;
  right: 28%;
  font-family: "Azo Sans Regular",sans-serif;
  color: white;
  font-size: 16px;
  line-height: 22px;
  z-index: 2;
}

.third-button {
  position: absolute;
  border: 0;
  border-radius: 6px;
  box-shadow: 0 8px 24px #0e293740;
  background-color: #0DB88F;
  color: white;
  font-size: 18px;
  font-family: "Azo Sans",sans-serif;
  padding: 16px 20px 12px;
  line-height: 22px;
  margin: 0 50px;  
  cursor: pointer;
  transition: background-color 0.3s ease;
  top: 264%;
  left: 50.2%;
  z-index: 2;
}

.jr {
  position: absolute;
  top: 285.6%;
  width: 100%;
  height: 620px;
  background-color: rgba(128, 0, 128, 0.7);
  background-image: url(https://39646145.fs1.hubspotusercontent-na1.net/hubfs/39646145/CodeNinjas%20-%20Marketting%20Website/Color%20Fade-JR-@2x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.jrblob {
  position: absolute;
  top: 295.6%;
  right: 23%;
  width: 29%;
  height: auto;
  z-index: 1;
}

.jr-display {
  position: absolute;
  top: 303%;
  right: 25%;
  width: 25%;
  height: auto;
  z-index: 1;
}

.agesb {
  position: absolute;
  top: 301%;
  right: 67%;
  font-family: "Azo Sans Regular",sans-serif;
  color: #DEABF7;
  font-size: 20px;
  font-weight: bold;
  z-index: 2;
}

.siteb {
  position: absolute;
  top: 303%;
  right: 65%;
  font-family: "Azo Sans Regular",sans-serif;
  font-weight: bold;
  color: white;
  font-size: 24px;
  z-index: 2;
}

.jr-title {
  position: absolute;
  top: 304%;
  right: 69.5%;
  font-family: "Azo Sans",sans-serif;
  font-weight: bold;
  color: #DEABF7;
  font-size: 65px;
  z-index: 2;
  max-width: 400px;
}

.jr-text {
  position: absolute;
  top: 315%;
  right: 53%;
  left: 27%;
  font-family: "Azo Sans Regular",sans-serif;
  color: white;
  font-size: 16px;
  line-height: 22px;
  z-index: 2;
}

.fourth-button {
  position: absolute;
  border: 0;
  border-radius: 6px;
  box-shadow: 0 8px 24px #0e293740;
  background-color: #0DB88F;
  color: white;
  font-size: 18px;
  font-family: "Azo Sans",sans-serif;
  padding: 16px 20px 12px;
  line-height: 22px;
  margin: 0 50px;  
  cursor: pointer;
  transition: background-color 0.3s ease;
  top: 330%;
  right: 62.3%;
  z-index: 2;
}

.camps {
  position: absolute;
  top: 351.1%;
  width: 100%;
  height: 620px;
  background-color: rgba(0, 128, 128, 0.7);
  background-image: url(https://39646145.fs1.hubspotusercontent-na1.net/hubfs/39646145/CodeNinjas%20-%20Marketting%20Website/Color%20Fade-Camp-@2x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
}

.campsblob {
  position: absolute;
  top: 361.1%;
  left: 23%;
  width: 27%;
  height: auto;
  z-index: 3;
}

.camps-display {
  position: absolute;
  top: 372%;
  left: 28%;
  width: 20%;
  height: auto;
  z-index: 3;
}

.agesc {
  position: absolute;
  top: 370%;
  left: 53%;
  font-family: "Azo Sans Regular",sans-serif;
  color: #92F4F5;
  font-size: 20px;
  font-weight: bold;
  z-index: 2;
}

.sitec {
  position: absolute;
  top: 372%;
  left: 53%;
  font-family: "Azo Sans Regular",sans-serif;
  font-weight: bold;
  color: white;
  font-size: 24px;
  z-index: 2;
}

.camps-title {
  position: absolute;
  top: 373%;
  left: 53%;
  font-family: "Azo Sans",sans-serif;
  font-weight: bold;
  color: #92F4F5;
  font-size: 65px;
  z-index: 2;
  max-width: 400px;
}

.camps-text {
  position: absolute;
  top: 384%;
  left: 53%;
  right: 28%;
  font-family: "Azo Sans Regular",sans-serif;
  color: white;
  font-size: 16px;
  line-height: 22px;
  z-index: 2;
}

.fifth-button {
  position: absolute;
  border: 0;
  border-radius: 6px;
  box-shadow: 0 8px 24px #0e293740;
  background-color: #0DB88F;
  color: white;
  font-size: 18px;
  font-family: "Azo Sans",sans-serif;
  padding: 16px 20px 12px;
  line-height: 22px;
  margin: 0 50px;  
  cursor: pointer;
  transition: background-color 0.3s ease;
  top: 402%;
  left: 50.2%;
  z-index: 2;
}

.impact {
  position: absolute;
  top: 390%;
  right: 0;
  width: 112vw;
  height: auto;
  z-index: 1;
}

.impact-laptop {
  position: absolute;
  top: 420%;
  left: 15%;
  width: 70%;
  height: auto;
  z-index: 4;
}

.IMPACT {
  position: absolute;
  top: 425%;
  left: 27.5%;
  width: 44.7%;
  border-radius: 3%;
  z-index: 3;
}

.jumping-ninja2 {
  position: absolute;
  top: 440%;
  left: 67%;
  width: 15.3%;
  height: auto;
  justify-content: center;
  opacity: 0.7;
  z-index: 1;
}

.impact-ninja {
  position: absolute;
  top: 448%;
  left: 20%;
  width: 7%;
  height: auto;
  justify-content: center;
  opacity: 1;
  z-index: 1;
}

.play-button2 {
  position: absolute;
  border: 0;
  border-radius: 50%;
  background-color: #7e8c94;
  font-size: 30px;
  padding: 40px 40px 40px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  top: 447%;
  left: 45.5%;
  align-items: center;
  justify-content: center;
  z-index: 4;
}

.play-button2:hover {
  background-color: #0270e0;
}

.triangle2 {
  position: absolute;
  top: 449.3%;
  left: 49.7%;
  width: 1.5%;
  z-index: 5;
}

.impact-text-logo {
  position: absolute;
  top: 487%;
  left: 40%;
  width: 19%;
  height: auto;
  justify-content: center;
  z-index: 4;
}

.partnership {
  position: absolute;
  font-family: "Azo Sans Regular",sans-serif;
  font-weight: lighter;
  color: #257CC6;
  top: 497%;
  left: 45.2%;
  font-size: 14px;
  opacity: .6;
  justify-content: center;
  z-index: 4;
}

.partners {
  position: absolute;
  top: 504%;
  left: 41.3%;
  font-size: 32px;
  justify-content: center;
  z-index: 4;
}

.impact-message {
  position: absolute;
  font-family: "Azo Sans Regular",sans-serif;
  color: #506690;
  line-height: 26px;
  top: 509%;
  left: 35%;
  right: 36%;
  font-size: 16px;
  max-width: 650px;
  text-align: center;
  margin: auto;
  z-index: 4;
}

.sixth-button {
  position: absolute;
  border: 0;
  border-radius: 6px;
  box-shadow: 0 8px 24px #0e293740;
  background-color: #0DB88F;
  color: white;
  font-size: 18px;
  font-family: "Azo Sans",sans-serif;
  padding: 16px 20px 12px;
  line-height: 22px;
  margin: 0 50px;  
  cursor: pointer;
  transition: background-color 0.3s ease;
  top: 526%;
  left: 42.7%;
  z-index: 4;
}