.txt-white {
  color: #FFF;
}

.bg-white {
  background-color: #FFF;
}

.txt-light-gray {
  color: #F9FAFC;
}

.bg-light-gray {
  background-color: #F9FAFC;
}

.txt-gray {
  color: #EEEEEE;
}

.bg-gray {
  background-color: #EEEEEE;
}

.txt-black {
  color: #000 !important;
}

.bg-black {
  background-color: #FFF;
}

.txt-green {
  color: #03A799;
}

.bg-green {
  background-color: #03A799;
}

.txt-orange {
  color: #FB4104;
}

.bg-orange {
  background-color: #FB4104;
}

.txt-light-orange {
  color: #EF8524;
}

.bg-light-orange {
  background-color: #EF8524;
}

.txt-blue {
  color: #025CA0;
}

.bg-blue {
  background-color: #025CA0;
}

.txt-yellow {
  color: #ECBE05;
}

.bg-yellow {
  background-color: #ECBE05;
}

.breadcrumb, .page-header, .page-heading {
  display: none;
}

form > .container {
  padding: 0;
  margin: 0;
  width: 100%;
}

.skill-stem {
  padding: 0;
}
.skill-stem .h2vh {
  height: 200vh !important;
  background-color: #03A799 !important;
}
.skill-stem .d-flex {
  padding: 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.skill-stem .d-flex .col-xs-12 {
  width: 100%;
  flex: 1 0 100%;
}
.skill-stem .d-flex .col {
  max-width: 30%;
  flex-grow: 1;
  margin: 5px 10px;
  text-align: center;
}
.skill-stem .tile {
  margin-top: 35px;
  position: relative;
  border-bottom-right-radius: 75px;
}
.skill-stem .tile .doodle {
  position: absolute;
  margin-top: -25px;
}
.skill-stem .tile .img-wrapper {
  width: 100%;
  height: 300px;
}
.skill-stem .tile .img-wrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.skill-stem .tile .info {
  padding: 25px;
}
.skill-stem .tile .info p {
  font-size: 12px;
  color: #FFF;
}
.skill-stem .tile .info button {
  font-size: 12px;
  background-color: #FFF;
  margin-top: 20px;
  border: none;
  border-radius: 210px;
  padding: 5px 20px;
  transition: all 0.5s ease 0s;
}
.skill-stem .tile .info button:hover {
  padding: 5px 40px;
}
.skill-stem .card {
  position: relative;
  padding: 45px 100px;
  min-height: 300px;
  margin: 50px 0px;
  display: flex;
}
.skill-stem .card .doodle {
  position: absolute;
}
.skill-stem .card h1, .skill-stem .card p {
  color: #FFF;
}
.skill-stem .card button {
  background-color: #FFF;
  margin-top: 20px;
  border: none;
  border-radius: 210px;
  padding: 5px 20px;
  transition: all 0.5s ease 0s;
}
.skill-stem .card button:hover {
  padding: 5px 40px;
}
.skill-stem .card .info {
  padding: 50px;
  align-self: flex-end;
}
.skill-stem .card .img-wrapper {
  padding: 0px;
  width: 40vw;
  height: 30vw;
  margin-top: -6vw;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
  overflow: hidden;
}
.skill-stem .card .img-wrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.skill-stem .card .img-wrapper ~ .card {
  margin-top: 0%;
}
.skill-stem .cta {
  position: relative;
  display: flex;
  align-content: center;
  align-items: center;
  z-index: 9999;
}
.skill-stem .cta .doodle {
  width: 20vh !important;
  position: absolute;
  left: 40%;
  top: 20%;
}
.skill-stem .cta button {
  margin-top: 20px;
  border: none;
  border-radius: 210px;
  padding: 5px 20px;
  transition: all 0.5s ease 0s;
}
.skill-stem .cta button:hover {
  padding: 5px 40px;
}
.skill-stem .cta .info {
  padding: 50px;
  align-self: flex-end;
}
.skill-stem .cta .img-wrapper {
  margin: 25px;
}
.skill-stem section.hero {
  background-color: transparent !important;
  height: auto;
  padding: 0;
}
.skill-stem section.hero .banner {
  background-color: #EEEEEE !important;
  position: relative;
  padding: 0px;
  margin: 0px;
  margin-top: 30px;
  height: 90vh;
  overflow: hidden;
}
.skill-stem section.hero .banner img.banner-background {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.skill-stem section.hero .banner .banner-title {
  font-size: 46px;
  position: absolute;
  top: 20%;
  left: 0px;
  width: 30%;
  padding: 50px;
  color: #000000;
}
.skill-stem section.hero .banner .doodle {
  position: absolute;
  top: 16%;
  left: 35%;
  width: 25vw;
  height: auto;
}
.skill-stem section.hero .banner .doodle object {
  width: 300px;
  height: 300px;
}
.skill-stem section.hero .banner svg.doodle_sparks {
  transform: rotate(0deg) !important;
}
.skill-stem section.hero .banner svg.doodle_sparks path {
  stroke: #fa4005 !important;
}
.skill-stem section.hero .card {
  position: relative;
  margin-top: -10vw;
}
.skill-stem .section-wipe .card {
  margin-top: 55px;
  margin-bottom: 200px;
}
.skill-stem section.slide {
  height: auto;
  min-height: 300px;
  width: 100%;
  position: relative;
  padding: 75px 10vw 20px 10vw !important;
  color: unset;
}
.skill-stem section.slide:nth-child(0) {
  min-height: 100vh;
}
.skill-stem section.slide .inner {
  height: auto;
}
.skill-stem section.slide.fixed {
  position: fixed !important;
}
.skill-stem .container-fluid {
  padding: 0px;
}
.skill-stem .round {
  border-radius: 75px;
}
.skill-stem .round.tl-rect {
  border-top-left-radius: 0px;
}

.reveal {
  opacity: 0;
  transition: all 0.6s ease 0.5s;
}
.reveal.visible {
  opacity: 1;
}

.doodle {
  display: none;
}
.doodle.draw path {
  fill: none;
  stroke: #005ba0;
}
.doodle.shake {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}
.doodle.wobble {
  animation: wobble 2s ease-in-out infinite alternate;
  animation-iteration-count: infinite;
}

@keyframes wobble {
  0% {
    transform: rotate(0deg);
  }
  33% {
    transform: rotate(5deg);
  }
  66% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}/*# sourceMappingURL=skill-stem.css.map */