/*
0 - 600px:      Phone
600 - 900px:    Tablet portrait
900 - 1200px:   Tablet landscape
[1200 - 1800] is where our normal styles apply
1800px + :      Big desktop

$breakpoint arguement choices:
- phone
- tab-port
- tab-land
- big-desktop

ORDER: Base + typography > general layout + grid > page layout > components

1em = 16px
*/
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0); }
  40% {
    transform: scale(1.2); }
  60% {
    transform: scale(0.8); }
  100% {
    opacity: 1;
    transform: scale(1); } }

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  font-size: 62.5%; }
  @media only screen and (max-width: 75em) {
    html {
      font-size: 56.25%; } }
  @media only screen and (max-width: 56.25em) {
    html {
      font-size: 50%; } }
  @media only screen and (max-width: 37.5em) {
    html {
      font-size: 45%; } }
  @media only screen and (min-width: 112.5em) {
    html {
      font-size: 75%; } }

body {
  box-sizing: border-box; }

body {
  font-family: Montserrat;
  font-weight: 400;
  /*font-size: 16px;*/
  line-height: 1.7rem; }

p {
  font-family: BaskervilleMTStd;
  font-size: 1.5rem;
  line-height: 1.8rem;
  color: #414042; }

.heading-secondary {
  font-family: Montserrat;
  font-size: 3rem;
  padding-bottom: .9rem;
  border-bottom: 0.5rem solid #FFE119; }

.coloum-box {
  max-width: 120rem;
  margin: 0 auto; }

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

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

.u-margin-bottom-medium {
  margin-bottom: 4rem !important; }
  @media only screen and (max-width: 56.25em) {
    .u-margin-bottom-medium {
      margin-bottom: 3rem !important; } }

.u-margin-bottom-big {
  margin-bottom: 8rem !important; }
  @media only screen and (max-width: 56.25em) {
    .u-margin-bottom-big {
      margin-bottom: 5rem !important; } }

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

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

.intro {
  position: relative; }
  .intro__box {
    position: absolute;
    left: 50%;
    width: 48rem;
    transform: translate(-50%, 20%); }
    .intro__box--txt {
      padding: 2rem;
      text-align: justify; }

.brief {
  position: absolute;
  width: 100%;
  height: 100%; }
  .brief__id {
    position: relative;
    float: left;
    height: 100%;
    width: 4%;
    background-color: #FFE119; }
    .brief__id--txt {
      position: relative;
      top: 50%;
      transform: rotate(-90deg); }

.brief-categories-content-container {
  float: left;
  height: 40rem;
  width: 96%; }

.the-brief {
  position: relative; }
  .the-brief__box {
    position: relative;
    width: 100%;
    height: 50rem; }
    @media only screen and (max-width: 56.25em) {
      .the-brief__box {
        height: 10rem; } }
    .the-brief__box--txt {
      position: absolute;
      display: inline-block;
      top: 73%;
      left: 44rem; }
      @media only screen and (max-width: 56.25em) {
        .the-brief__box--txt {
          top: 46%;
          left: 50%;
          transform: translate(-50%); } }
  .the-brief__paragraph {
    position: absolute;
    width: 50%;
    top: 82%;
    left: 28rem;
    text-align: end; }
    @media only screen and (max-width: 56.25em) {
      .the-brief__paragraph {
        top: 90%;
        width: 90%;
        left: 50%;
        transform: translate(-50%);
        text-align: center; } }
  .the-brief__img {
    position: absolute;
    margin: 0 auto;
    width: 100%; }
    @media only screen and (max-width: 37.5em) {
      .the-brief__img {
        top: 20rem;
        left: 50%;
        transform: translate(-50%, 5%); } }
    @media only screen and (max-width: 56.25em) {
      .the-brief__img {
        width: 50%;
        top: 10%;
        left: 50%;
        transform: translate(-50%, 5%); } }
    @media only screen and (max-width: 37.5em) {
      .the-brief__img {
        top: 3rem;
        left: 50%;
        transform: translate(-50%, 5%); } }

.solution {
  position: absolute;
  width: 100%;
  height: 100%; }
  .solution__id {
    position: relative;
    float: left;
    height: 100%;
    width: 4%;
    background-color: #FFE119; }
    .solution__id--txt {
      position: relative;
      top: 50%;
      transform: rotate(-90deg); }

.solution-content-container {
  float: left;
  height: 40rem;
  width: 96%; }

.the-solution {
  position: relative; }
  .the-solution__box {
    position: relative; }
    .the-solution__box--txt {
      position: relative;
      display: inline-block;
      top: 9rem;
      left: 13%; }
      @media only screen and (max-width: 56.25em) {
        .the-solution__box--txt {
          top: 0rem;
          left: 50%;
          transform: translate(-50%); } }
      @media only screen and (max-width: 37.5em) {
        .the-solution__box--txt {
          top: 0rem;
          left: 50%;
          transform: translate(-50%); } }
  .the-solution__paragraph {
    position: relative;
    width: 80%;
    top: 10rem;
    left: 43%;
    transform: translate(-40%, 0); }
    @media only screen and (max-width: 56.25em) {
      .the-solution__paragraph {
        top: 3rem;
        width: 90%;
        left: 50%;
        transform: translate(-50%);
        text-align: center; } }
  .the-solution__img {
    position: relative;
    top: 12rem;
    left: 50%;
    transform: translate(-50%, 0);
    width: 65%; }
    @media only screen and (max-width: 56.25em) {
      .the-solution__img {
        top: 0rem;
        width: 30%; } }
    @media only screen and (max-width: 37.5em) {
      .the-solution__img {
        top: 0rem;
        width: 20%; } }
  .the-solution__paragraph2 {
    position: relative;
    width: 80%;
    top: 10rem;
    left: 43%;
    transform: translate(-40%, 0); }
    @media only screen and (max-width: 56.25em) {
      .the-solution__paragraph2 {
        top: -4rem;
        width: 90%;
        left: 50%;
        transform: translate(-50%);
        text-align: center; } }

.page-id {
  position: absolute;
  width: 100%;
  height: 100%; }

.audi-cate {
  position: relative;
  float: left;
  height: 100%;
  width: 4%;
  background-color: #FFE119; }
  .audi-cate--txt {
    position: relative;
    top: 50%;
    transform: rotate(-90deg); }

.audience-categories-content-container {
  float: left;
  height: 32rem;
  width: 96%; }

.intended-audience {
  position: relative; }
  @media only screen and (max-width: 56.25em) {
    .intended-audience {
      top: 3rem; } }
  @media only screen and (max-width: 37.5em) {
    .intended-audience {
      top: 43rem; } }
  .intended-audience__box {
    position: relative; }
    .intended-audience__box--txt {
      position: relative;
      display: inline-block;
      top: 5rem;
      left: 22%; }
      @media only screen and (max-width: 56.25em) {
        .intended-audience__box--txt {
          top: 0rem;
          left: 50%;
          transform: translate(-50%); } }
  .intended-audience__paragraph {
    position: relative;
    width: 52%;
    top: 7rem;
    left: 43%;
    transform: translate(-40%, 0); }
    @media only screen and (max-width: 56.25em) {
      .intended-audience__paragraph {
        top: 2rem;
        left: 50%;
        width: 90%;
        transform: translate(-50%);
        text-align: center; } }

.page-devider {
  position: absolute;
  top: 5%;
  left: 36%; }
  .page-devider__img {
    width: 40%; }
    @media only screen and (max-width: 56.25em) {
      .page-devider__img {
        width: 0%; } }

.categories {
  position: relative; }
  @media only screen and (max-width: 56.25em) {
    .categories {
      top: 3rem; } }
  @media only screen and (max-width: 37.5em) {
    .categories {
      top: 7rem; } }
  .categories__box {
    position: relative; }
    .categories__box--txt {
      position: relative;
      display: inline-block;
      top: 5rem;
      left: 22%; }
      @media only screen and (max-width: 56.25em) {
        .categories__box--txt {
          top: 0rem;
          left: 50%;
          transform: translate(-50%); } }
  .categories__paragraph {
    position: relative;
    width: 52%;
    top: 7rem;
    left: 43%;
    transform: translate(-40%, 0); }
    @media only screen and (max-width: 56.25em) {
      .categories__paragraph {
        top: 2rem;
        left: 50%;
        width: 90%;
        transform: translate(-50%);
        text-align: center; } }

.page-id {
  position: absolute;
  width: 100%;
  height: 100%; }

.character {
  position: relative;
  float: left;
  height: 100%;
  width: 4%;
  background-color: #FFE119; }
  .character--txt {
    position: relative;
    top: 50%;
    transform: rotate(-90deg); }

.character-categories-content-container {
  float: left;
  height: 40rem;
  width: 96%; }

.c-intro {
  position: relative; }
  .c-intro__box {
    position: relative; }
    @media only screen and (max-width: 56.25em) {
      .c-intro__box {
        text-align: center; } }
    .c-intro__box--txt {
      position: relative;
      display: inline-block;
      top: 9rem; }
      @media only screen and (max-width: 56.25em) {
        .c-intro__box--txt {
          top: 3rem; } }

.c-explain {
  position: relative; }
  .c-explain__box {
    position: relative; }
  .c-explain__paragraph {
    position: relative;
    width: 84%;
    top: 9rem;
    padding: .8rem;
    border-left: 0.5rem solid #FFE119; }
    @media only screen and (max-width: 56.25em) {
      .c-explain__paragraph {
        top: 0rem;
        width: 80%;
        left: 50%;
        transform: translate(-50%);
        text-align: center;
        padding: 0rem;
        border-left: 0rem; } }
    @media only screen and (max-width: 37.5em) {
      .c-explain__paragraph {
        top: 0rem;
        width: 70%;
        left: 50%;
        transform: translate(-50%);
        text-align: center;
        padding: 0rem;
        border-left: 0rem; } }

.billy-goat {
  position: relative;
  width: 100%;
  height: 20rem; }
  @media only screen and (max-width: 56.25em) {
    .billy-goat {
      height: 5rem; } }
  @media only screen and (max-width: 37.5em) {
    .billy-goat {
      height: 8rem; } }
  .billy-goat__box {
    position: relative;
    width: 55%; }
  .billy-goat__img {
    position: absolute;
    top: 10rem;
    left: 20%;
    width: 100%; }
    @media only screen and (max-width: 56.25em) {
      .billy-goat__img {
        top: 0rem;
        left: -10rem; } }
    @media only screen and (max-width: 37.5em) {
      .billy-goat__img {
        top: 0rem;
        left: 90%;
        width: 100%;
        transform: translate(-50%); } }
  .billy-goat__sym-box {
    position: relative;
    width: 50%; }
    @media only screen and (max-width: 56.25em) {
      .billy-goat__sym-box {
        top: -10rem;
        left: 18rem; } }
    @media only screen and (max-width: 37.5em) {
      .billy-goat__sym-box {
        top: 0rem;
        left: 0rem; } }
  .billy-goat__symbol {
    position: absolute;
    left: -10%;
    top: 10rem;
    width: 15%; }
    @media only screen and (max-width: 56.25em) {
      .billy-goat__symbol {
        top: -3rem;
        width: 23%; } }
    @media only screen and (max-width: 37.5em) {
      .billy-goat__symbol {
        top: 0rem;
        width: 0%; } }
  .billy-goat__billy-goat__paragraph-box {
    position: relative;
    width: 60%;
    height: 10rem; }
    @media only screen and (max-width: 56.25em) {
      .billy-goat__billy-goat__paragraph-box {
        top: -27rem;
        left: 22rem; } }
    @media only screen and (max-width: 37.5em) {
      .billy-goat__billy-goat__paragraph-box {
        top: -10rem;
        left: 50%; } }
  .billy-goat__paragraph {
    position: absolute;
    top: 11.5rem;
    left: 5%;
    width: 70%; }
    @media only screen and (max-width: 56.25em) {
      .billy-goat__paragraph {
        top: -12rem;
        left: 24rem; } }
    @media only screen and (max-width: 37.5em) {
      .billy-goat__paragraph {
        top: -3rem;
        left: 50%;
        transform: translate(-50%); } }
  .billy-goat__nanny-paragraph {
    position: absolute;
    top: 11rem;
    left: 5%;
    width: 70%; }
    @media only screen and (max-width: 56.25em) {
      .billy-goat__nanny-paragraph {
        top: -12.5rem;
        left: 24rem; } }
    @media only screen and (max-width: 37.5em) {
      .billy-goat__nanny-paragraph {
        top: -4rem;
        left: 50%;
        transform: translate(-50%); } }

.page-id {
  position: absolute;
  width: 100%;
  height: 100%; }

.timeline {
  position: relative;
  float: left;
  height: 100%;
  width: 4%;
  background-color: #FFE119; }
  .timeline--txt {
    position: relative;
    top: 50%;
    transform: rotate(-90deg); }

.character-timeline-content-container {
  float: left;
  height: 40rem;
  width: 96%; }

.billy-timeline-intro {
  position: relative; }
  .billy-timeline-intro__box {
    position: relative;
    height: 50rem; }
    @media only screen and (max-width: 56.25em) {
      .billy-timeline-intro__box {
        height: 30rem; } }
    @media only screen and (max-width: 37.5em) {
      .billy-timeline-intro__box {
        height: 15rem; } }
    .billy-timeline-intro__box--txt {
      position: relative;
      display: inline-block;
      top: 0rem; }
      @media only screen and (max-width: 56.25em) {
        .billy-timeline-intro__box--txt {
          left: 50%;
          transform: translate(-50%); } }
      @media only screen and (max-width: 37.5em) {
        .billy-timeline-intro__box--txt {
          left: 50%;
          transform: translate(-50%); } }

.billy-time-example {
  position: relative; }
  .billy-time-example__box {
    position: relative; }
  .billy-time-example__img {
    position: absolute;
    top: 3rem;
    width: 100%;
    padding: 2rem; }
    @media only screen and (max-width: 56.25em) {
      .billy-time-example__img {
        top: 1rem;
        width: 80%;
        left: 50%;
        transform: translate(-50%); } }

.nanny-timeline-intro {
  position: relative; }
  .nanny-timeline-intro__box {
    position: relative;
    height: 50rem; }
    @media only screen and (max-width: 56.25em) {
      .nanny-timeline-intro__box {
        height: 30rem; } }
    @media only screen and (max-width: 37.5em) {
      .nanny-timeline-intro__box {
        height: 15rem; } }
    .nanny-timeline-intro__box--txt {
      position: relative;
      display: inline-block;
      top: 15rem; }
      @media only screen and (max-width: 56.25em) {
        .nanny-timeline-intro__box--txt {
          left: 50%;
          transform: translate(-50%); } }
      @media only screen and (max-width: 37.5em) {
        .nanny-timeline-intro__box--txt {
          left: 50%;
          transform: translate(-50%); } }

.nanny-time-example {
  position: relative; }
  .nanny-time-example__box {
    position: relative; }
  .nanny-time-example__img {
    position: absolute;
    top: 19rem;
    width: 100%;
    padding: 2rem; }
    @media only screen and (max-width: 56.25em) {
      .nanny-time-example__img {
        top: 16rem;
        width: 80%;
        left: 50%;
        transform: translate(-50%); } }

.page-break {
  position: absolute;
  width: 100%;
  height: 100%; }
  .page-break__id {
    position: relative;
    float: left;
    height: 100%;
    width: 4%;
    background-color: #FFE119; }
    .page-break__id--txt {
      position: relative;
      top: 60%;
      transform: rotate(-90deg);
      margin: 0 auto; }
      @media only screen and (max-width: 56.25em) {
        .page-break__id--txt {
          top: 65%; } }
      @media only screen and (max-width: 37.5em) {
        .page-break__id--txt {
          top: 86%; } }
  .page-break__img {
    position: relative;
    width: 74%;
    left: 50%;
    transform: translate(-50%); }
    @media only screen and (max-width: 56.25em) {
      .page-break__img {
        padding: 1rem 4rem;
        width: 100%; } }
    @media only screen and (max-width: 37.5em) {
      .page-break__img {
        width: 55%;
        padding: 2rem;
        width: 100%; } }

.page-break-content-container {
  float: left;
  height: 15rem;
  width: 96%; }

.mobile-layout {
  position: absolute;
  width: 100%;
  height: 100%; }
  .mobile-layout__id {
    position: relative;
    float: left;
    height: 100%;
    width: 4%;
    background-color: #FFE119; }
    .mobile-layout__id--txt {
      position: relative;
      top: 55%;
      transform: rotate(-90deg); }

.mobile-layout-content-container {
  float: left;
  width: 96%; }

.layout-header {
  position: relative; }
  .layout-header__box {
    position: relative;
    padding-bottom: 3rem; }
    @media only screen and (max-width: 56.25em) {
      .layout-header__box {
        padding-bottom: 1rem; } }
    .layout-header__box--txt {
      position: relative;
      display: inline-block;
      top: 0rem; }
      @media only screen and (max-width: 56.25em) {
        .layout-header__box--txt {
          left: 50%;
          transform: translate(-50%); } }

.page-image {
  position: relative; }
  .page-image__img1 {
    position: relative;
    width: 100%;
    padding: 2rem; }
    @media only screen and (max-width: 56.25em) {
      .page-image__img1 {
        width: 80%;
        left: 50%;
        transform: translate(-50%); } }
    @media only screen and (max-width: 37.5em) {
      .page-image__img1 {
        width: 80%;
        left: 50%;
        transform: translate(-50%); } }
  .page-image__img2 {
    position: relative;
    width: 100%;
    padding: 2rem; }
    @media only screen and (max-width: 56.25em) {
      .page-image__img2 {
        top: 0rem;
        width: 80%;
        left: 50%;
        transform: translate(-50%); } }
    @media only screen and (max-width: 37.5em) {
      .page-image__img2 {
        top: 5rem;
        width: 80%;
        left: 50%;
        transform: translate(-50%); } }
    .page-image__img2--txt {
      position: absolute;
      width: 27%;
      top: 30%;
      left: 50%;
      padding: .8rem;
      border-left: 0.5rem solid #FFE119; }
      @media only screen and (max-width: 56.25em) {
        .page-image__img2--txt {
          width: 28%;
          left: 70%;
          top: 37%;
          transform: translate(-50%); } }
      @media only screen and (max-width: 37.5em) {
        .page-image__img2--txt {
          width: 71%;
          left: 50%;
          top: -7%;
          transform: translate(-50%); } }
  .page-image__img3 {
    position: relative;
    width: 100%;
    padding: 2rem; }
    @media only screen and (max-width: 56.25em) {
      .page-image__img3 {
        top: 0rem;
        width: 80%;
        left: 50%;
        transform: translate(-50%); } }
    @media only screen and (max-width: 37.5em) {
      .page-image__img3 {
        top: 5rem;
        width: 80%;
        left: 50%;
        transform: translate(-50%); } }
  .page-image__img4 {
    position: relative;
    width: 100%;
    padding: 2rem; }
    @media only screen and (max-width: 56.25em) {
      .page-image__img4 {
        top: 0rem;
        width: 80%;
        left: 50%;
        transform: translate(-50%); } }
    @media only screen and (max-width: 37.5em) {
      .page-image__img4 {
        top: 5rem;
        width: 80%;
        left: 50%;
        transform: translate(-50%); } }
    .page-image__img4--txt1 {
      position: absolute;
      width: 19%;
      top: 5%;
      left: 29%;
      padding: .8rem;
      border-left: 0.5rem solid #FFE119; }
      @media only screen and (max-width: 56.25em) {
        .page-image__img4--txt1 {
          width: 27%;
          top: 13%;
          left: 16%;
          padding: .8rem;
          border-left: 0.5rem solid #FFE119; } }
      @media only screen and (max-width: 37.5em) {
        .page-image__img4--txt1 {
          width: 50%;
          left: 50%;
          top: 8rem;
          transform: translate(-50%); } }
    .page-image__img4--txt2 {
      position: absolute;
      width: 21%;
      top: 28%;
      left: 51%;
      padding: .8rem;
      border-left: 0.5rem solid #FFE119; }
      @media only screen and (max-width: 56.25em) {
        .page-image__img4--txt2 {
          width: 27%;
          top: 37%;
          left: 38%;
          padding: .8rem;
          border-left: 0.5rem solid #FFE119; } }
      @media only screen and (max-width: 37.5em) {
        .page-image__img4--txt2 {
          width: 50%;
          left: 50%;
          top: 14rem;
          transform: translate(-50%); } }
    .page-image__img4--txt3 {
      position: absolute;
      width: 20%;
      top: 51%;
      left: 76%;
      padding: .8rem;
      border-left: 0.5rem solid #FFE119; }
      @media only screen and (max-width: 56.25em) {
        .page-image__img4--txt3 {
          width: 27%;
          top: 61%;
          left: 58%;
          padding: .8rem;
          border-left: 0.5rem solid #FFE119; } }
      @media only screen and (max-width: 37.5em) {
        .page-image__img4--txt3 {
          width: 50%;
          left: 50%;
          top: 22rem;
          transform: translate(-50%); } }

.design-elements {
  position: absolute;
  width: 100%;
  height: 100%; }
  .design-elements__id {
    position: relative;
    float: left;
    height: 100%;
    width: 4%;
    background-color: #FFE119; }
    .design-elements__id--txt {
      position: relative;
      top: 55%;
      transform: rotate(-90deg); }

.design-elements-content-container {
  float: left;
  width: 96%; }

.design-elements-header {
  position: relative; }
  .design-elements-header__box {
    position: relative;
    top: 5rem;
    padding-bottom: 3rem; }
    @media only screen and (max-width: 56.25em) {
      .design-elements-header__box {
        top: 3rem;
        padding-bottom: 1rem; } }
    @media only screen and (max-width: 37.5em) {
      .design-elements-header__box {
        top: 0rem;
        padding-bottom: 1rem; } }
    .design-elements-header__box--txt {
      position: relative;
      display: inline-block; }
      @media only screen and (max-width: 56.25em) {
        .design-elements-header__box--txt {
          left: 50%;
          transform: translate(-50%); } }
      @media only screen and (max-width: 37.5em) {
        .design-elements-header__box--txt {
          top: 3rem;
          padding-bottom: 1rem; } }

.design-elements-image {
  position: relative; }
  .design-elements-image__box {
    position: relative;
    width: 100%;
    padding: 2rem;
    top: 5rem; }
    @media only screen and (max-width: 56.25em) {
      .design-elements-image__box {
        width: 80%;
        left: 50%;
        transform: translate(-50%); } }
    @media only screen and (max-width: 37.5em) {
      .design-elements-image__box {
        width: 80%;
        top: 3rem;
        padding-bottom: 1rem; } }

.campiagn {
  position: absolute;
  width: 100%;
  height: 100%; }
  .campiagn__id {
    position: relative;
    float: left;
    height: 100%;
    width: 4%;
    background-color: #FFE119; }
    .campiagn__id--txt {
      position: relative;
      top: 55%;
      transform: rotate(-90deg); }

.campiagn-content-container {
  float: left;
  width: 96%; }

.ad-campiagn-header {
  position: relative; }
  .ad-campiagn-header__box {
    position: relative;
    top: 5rem;
    padding-bottom: 3rem; }
    .ad-campiagn-header__box--txt {
      position: relative;
      display: inline-block; }
      @media only screen and (max-width: 56.25em) {
        .ad-campiagn-header__box--txt {
          left: 50%;
          transform: translate(-50%); } }

.billboard {
  position: relative; }
  .billboard__box {
    position: relative;
    top: 7rem; }
    .billboard__box--img {
      width: 100%;
      padding: 1rem; }
      @media only screen and (max-width: 56.25em) {
        .billboard__box--img {
          position: relative;
          width: 80%;
          left: 50%;
          transform: translate(-50%); } }
      @media only screen and (max-width: 37.5em) {
        .billboard__box--img {
          width: 80%; } }

.coporate-id {
  position: absolute;
  width: 100%;
  height: 100%; }
  .coporate-id__id {
    position: relative;
    float: left;
    height: 100%;
    width: 4%;
    background-color: #FFE119; }
    .coporate-id__id--txt {
      position: relative;
      top: 55%;
      transform: rotate(-90deg); }

.coporate-id-content-container {
  float: left;
  width: 96%; }

.coporate-id-header {
  position: relative; }
  .coporate-id-header__box {
    position: relative;
    top: 5rem;
    padding-bottom: 3rem; }
    .coporate-id-header__box--txt {
      position: relative;
      display: inline-block; }

.id-images {
  position: relative; }
  .id-images__box {
    position: relative;
    top: 7rem; }
    .id-images__box--img {
      width: 100%;
      padding: 1rem; }

.footer {
  position: relative;
  background-color: #0b0c0c;
  padding: 10rem 0;
  font-size: 1.4rem; }
  .footer__logo-box {
    position: relative;
    padding-bottom: 5rem;
    width: 70%;
    left: 50%;
    transform: translate(-50%);
    text-align: center;
    margin-bottom: 5rem;
    border-bottom: 1px solid #e6e6e6; }
  .footer__logo {
    width: 8rem;
    height: auto; }
  .footer__navigation {
    padding-top: 2rem;
    display: inline-block; }
    @media only screen and (max-width: 56.25em) {
      .footer__navigation {
        position: relative;
        left: 50%;
        transform: translate(-50%); } }
    @media only screen and (max-width: 37.5em) {
      .footer__navigation {
        position: relative;
        left: 50%;
        transform: translate(-50%); } }
  .footer__list {
    font-family: Consola;
    list-style: none; }
  .footer__item {
    display: inline-block; }
    .footer__item:not(:last-child) {
      margin-right: 3.5rem; }
  .footer__link:link, .footer__link:visited {
    color: #e6e6e6;
    text-decoration: none;
    display: inline-block; }
  .footer__link:hover, .footer__link:active {
    color: #4bcaf6; }
  .footer__copy {
    font-family: Consola;
    font-size: 1.4rem;
    color: #e6e6e6;
    padding-top: 2rem;
    line-height: 2rem;
    float: right; }
    @media only screen and (max-width: 56.25em) {
      .footer__copy {
        text-align: center;
        position: relative;
        left: 50%;
        transform: translate(-50%);
        float: none; } }
    @media only screen and (max-width: 37.5em) {
      .footer__copy {
        text-align: center;
        position: relative;
        left: 50%;
        transform: translate(-50%);
        float: none; } }

.row {
  max-width: 120rem;
  margin: 0 auto; }
  .row:not(:last-child) {
    margin-bottom: 8rem; }
  @media only screen and (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: 4rem; }
      @media only screen and (max-width: 56.25em) {
        .row [class^="col-"]:not(:last-child) {
          margin-right: 0;
          margin-bottom: 6rem; } }
    @media only screen and (max-width: 56.25em) {
      .row [class^="col-"] {
        width: 100% !important; } }
  .row .col-1-of-2 {
    width: calc((100% - 4rem) / 2); }
  .row .col-1-of-3 {
    width: calc((100% - 2 * 4rem) / 3); }
  .row .col-2-of-3 {
    width: calc(2 * ((100% - 2 * 4rem) / 3) + 4rem); }
  .row .col-1-of-4 {
    width: calc((100% - 3 * 4rem) / 4); }
  .row .col-2-of-4 {
    width: calc(2 * ((100% - 3 * 4rem) / 4) + 4rem); }
  .row .col-3-of-4 {
    width: calc(3 * ((100% - 3 * 4rem) / 4) + 2 * 4rem); }
  .row .col-1-of-5 {
    width: calc((100% - 4 * 4rem) / 5); }

.header {
  height: 90vh;
  position: relative;
  background-color: #FFE119; }
  .header__img-box {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 30rem;
    height: 30rem; }
    .header__img-box--cplogo {
      position: absolute;
      width: 65%; }
    .header__img-box--goatlogo {
      position: absolute;
      right: 2rem;
      width: 40%;
      animation-name: bounceIn;
      animation-timing-function: ease-out;
      transition: all .3s; }

.navigation__checkbox {
  display: none; }

.navigation__button {
  background-color: #FFE119;
  height: 5rem;
  width: 5rem;
  position: fixed;
  top: 4.1rem;
  right: 4.1rem;
  z-index: 2001;
  box-shadow: 0 1rem 3rem #000 .6;
  text-align: center; }

.navigation__background {
  height: 4rem;
  width: 4rem;
  position: fixed;
  top: 4.5rem;
  right: 4.5rem;
  background-color: #414042;
  opacity: 0.8;
  z-index: 200;
  transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1); }

.navigation__nav {
  height: 100vh;
  position: fixed;
  top: 0rem;
  right: 0rem;
  z-index: 250;
  opacity: 0;
  width: 0%;
  transition: opacity 3.3s; }

.navigation__list {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  text-align: center;
  width: 100%; }

.navigation__item {
  margin: 2rem; }

.navigation__link:link, .navigation__link:visited {
  display: inline-block;
  font-family: Consola;
  font-size: 2rem;
  font-weight: 400;
  color: white;
  text-decoration: none;
  background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #FFE119 50%);
  padding: 1rem 3rem;
  background-size: 230%;
  transition: all .4s; }

.navigation__link:hover, .navigation__link:active {
  color: #303030;
  background-position: 100%;
  text-shadow: 0 1rem 3rem #000 .6; }

.navigation__checkbox:checked ~ .navigation__background {
  transform: scale(100); }

.navigation__checkbox:checked ~ .navigation__nav {
  transition-delay: 0.4s;
  opacity: 1;
  width: 100%; }

.navigation__icon {
  position: relative;
  margin-top: 2.3rem; }
  .navigation__icon, .navigation__icon::before, .navigation__icon::after {
    width: 3rem;
    height: 4px;
    background-color: white;
    display: inline-block; }
  .navigation__icon::before, .navigation__icon::after {
    content: "";
    position: absolute;
    left: 0;
    transition: all .2s; }
  .navigation__icon::before {
    top: -1rem; }
  .navigation__icon::after {
    top: 1rem; }

.navigation__button:hover .navigation__icon::before {
  top: -1.2rem; }

.navigation__button:hover .navigation__icon::after {
  top: 1.2rem; }

.navigation__checkbox:checked + .navigation__button .navigation__icon {
  background-color: transparent; }

.navigation__checkbox:checked + .navigation__button .navigation__icon::before {
  top: 0;
  transform: rotate(135deg); }

.navigation__checkbox:checked + .navigation__button .navigation__icon::after {
  top: 0;
  transform: rotate(-135deg); }

.section-intro {
  position: relative;
  height: 20rem; }

.section-brief {
  position: relative;
  height: 50rem; }
  @media only screen and (max-width: 56.25em) {
    .section-brief {
      height: 40rem; } }
  @media only screen and (max-width: 37.5em) {
    .section-brief {
      height: 45rem; } }

.section-solution {
  position: relative;
  height: 50rem; }
  @media only screen and (max-width: 56.25em) {
    .section-solution {
      height: 79vh; } }
  @media only screen and (max-width: 37.5em) {
    .section-solution {
      height: 42vh; } }

.audience-categories {
  position: relative;
  height: 30rem; }
  @media only screen and (max-width: 56.25em) {
    .audience-categories {
      height: 36rem; } }
  @media only screen and (max-width: 37.5em) {
    .audience-categories {
      height: 60rem; } }

.section-character {
  position: relative;
  height: 85rem; }
  @media only screen and (max-width: 56.25em) {
    .section-character {
      height: 78rem; } }
  @media only screen and (max-width: 37.5em) {
    .section-character {
      height: 95rem; } }

.character-timeline {
  position: relative;
  height: 130rem; }
  @media only screen and (max-width: 56.25em) {
    .character-timeline {
      height: 90rem; } }
  @media only screen and (max-width: 37.5em) {
    .character-timeline {
      height: 60rem; } }

.section-page-break {
  position: relative;
  height: 15rem; }
  @media only screen and (max-width: 56.25em) {
    .section-page-break {
      height: 15rem; } }
  @media only screen and (max-width: 37.5em) {
    .section-page-break {
      height: 10rem; } }

.mobile-app-example {
  position: relative;
  height: 290rem; }
  @media only screen and (max-width: 56.25em) {
    .mobile-app-example {
      height: 182rem; } }
  @media only screen and (max-width: 37.5em) {
    .mobile-app-example {
      height: 124rem; } }

.section-design-elements {
  position: relative;
  height: 70rem; }
  @media only screen and (max-width: 56.25em) {
    .section-design-elements {
      height: 46rem; } }
  @media only screen and (max-width: 37.5em) {
    .section-design-elements {
      height: 30rem; } }

.section-ad-campiagn {
  position: relative;
  height: 150rem; }
  @media only screen and (max-width: 56.25em) {
    .section-ad-campiagn {
      height: 125rem; } }
  @media only screen and (max-width: 37.5em) {
    .section-ad-campiagn {
      height: 106rem; } }

.section-coporate-id {
  position: relative;
  height: 110rem; }
  @media only screen and (max-width: 56.25em) {
    .section-coporate-id {
      height: 83rem; } }
  @media only screen and (max-width: 37.5em) {
    .section-coporate-id {
      height: 55.5rem; } }