app.css

@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,500|IBM+Plex+Sans:400,400i");
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img, iframe {
  vertical-align: bottom;
  max-width: 100%;
}

input, textarea, select {
  font: inherit;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@-ms-viewport {
  width: device-width;
}
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -ms-overflow-style: scrollbar;
}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

.hidden-xs-up {
  display: none !important;
}

@media (max-width: 575.98px) {
  .hidden-xs-down {
    display: none !important;
  }
}
@media (min-width: 576px) {
  .hidden-sm-up {
    display: none !important;
  }
}
@media (max-width: 767.98px) {
  .hidden-sm-down {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .hidden-md-up {
    display: none !important;
  }
}
@media (max-width: 991.98px) {
  .hidden-md-down {
    display: none !important;
  }
}
@media (min-width: 992px) {
  .hidden-lg-up {
    display: none !important;
  }
}
@media (max-width: 1199.98px) {
  .hidden-lg-down {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-xl-up {
    display: none !important;
  }
}
.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*=col-] {
  padding-right: 0;
  padding-left: 0;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.col {
  -webkit-flex-basis: 0;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

.col-auto {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.col-1 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 8.3333333333%;
  -ms-flex: 0 0 8.3333333333%;
  flex: 0 0 8.3333333333%;
  max-width: 8.3333333333%;
}

.col-2 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 16.6666666667%;
  -ms-flex: 0 0 16.6666666667%;
  flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
}

.col-3 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 25%;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 33.3333333333%;
  -ms-flex: 0 0 33.3333333333%;
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
}

.col-5 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 41.6666666667%;
  -ms-flex: 0 0 41.6666666667%;
  flex: 0 0 41.6666666667%;
  max-width: 41.6666666667%;
}

.col-6 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 50%;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 58.3333333333%;
  -ms-flex: 0 0 58.3333333333%;
  flex: 0 0 58.3333333333%;
  max-width: 58.3333333333%;
}

.col-8 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 66.6666666667%;
  -ms-flex: 0 0 66.6666666667%;
  flex: 0 0 66.6666666667%;
  max-width: 66.6666666667%;
}

.col-9 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 75%;
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 83.3333333333%;
  -ms-flex: 0 0 83.3333333333%;
  flex: 0 0 83.3333333333%;
  max-width: 83.3333333333%;
}

.col-11 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 91.6666666667%;
  -ms-flex: 0 0 91.6666666667%;
  flex: 0 0 91.6666666667%;
  max-width: 91.6666666667%;
}

.col-12 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.order-first {
  -webkit-box-ordinal-group: 0;
  -webkit-order: -1;
  -ms-flex-order: -1;
  order: -1;
}

.order-last {
  -webkit-box-ordinal-group: 14;
  -webkit-order: 13;
  -ms-flex-order: 13;
  order: 13;
}

.order-0 {
  -webkit-box-ordinal-group: 1;
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
}

.order-1 {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
}

.order-2 {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
}

.order-3 {
  -webkit-box-ordinal-group: 4;
  -webkit-order: 3;
  -ms-flex-order: 3;
  order: 3;
}

.order-4 {
  -webkit-box-ordinal-group: 5;
  -webkit-order: 4;
  -ms-flex-order: 4;
  order: 4;
}

.order-5 {
  -webkit-box-ordinal-group: 6;
  -webkit-order: 5;
  -ms-flex-order: 5;
  order: 5;
}

.order-6 {
  -webkit-box-ordinal-group: 7;
  -webkit-order: 6;
  -ms-flex-order: 6;
  order: 6;
}

.order-7 {
  -webkit-box-ordinal-group: 8;
  -webkit-order: 7;
  -ms-flex-order: 7;
  order: 7;
}

.order-8 {
  -webkit-box-ordinal-group: 9;
  -webkit-order: 8;
  -ms-flex-order: 8;
  order: 8;
}

.order-9 {
  -webkit-box-ordinal-group: 10;
  -webkit-order: 9;
  -ms-flex-order: 9;
  order: 9;
}

.order-10 {
  -webkit-box-ordinal-group: 11;
  -webkit-order: 10;
  -ms-flex-order: 10;
  order: 10;
}

.order-11 {
  -webkit-box-ordinal-group: 12;
  -webkit-order: 11;
  -ms-flex-order: 11;
  order: 11;
}

.order-12 {
  -webkit-box-ordinal-group: 13;
  -webkit-order: 12;
  -ms-flex-order: 12;
  order: 12;
}

.offset-1 {
  margin-left: 8.3333333333%;
}

.offset-2 {
  margin-left: 16.6666666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.3333333333%;
}

.offset-5 {
  margin-left: 41.6666666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.3333333333%;
}

.offset-8 {
  margin-left: 66.6666666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.3333333333%;
}

.offset-11 {
  margin-left: 91.6666666667%;
}

@media (min-width: 576px) {
  .col-sm {
    -webkit-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }

  .col-sm-auto {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-sm-1 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 8.3333333333%;
    -ms-flex: 0 0 8.3333333333%;
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .col-sm-2 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 16.6666666667%;
    -ms-flex: 0 0 16.6666666667%;
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-sm-3 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-sm-4 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.3333333333%;
    -ms-flex: 0 0 33.3333333333%;
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .col-sm-5 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 41.6666666667%;
    -ms-flex: 0 0 41.6666666667%;
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .col-sm-6 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-sm-7 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 58.3333333333%;
    -ms-flex: 0 0 58.3333333333%;
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .col-sm-8 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 66.6666666667%;
    -ms-flex: 0 0 66.6666666667%;
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .col-sm-9 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 75%;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-sm-10 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 83.3333333333%;
    -ms-flex: 0 0 83.3333333333%;
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .col-sm-11 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 91.6666666667%;
    -ms-flex: 0 0 91.6666666667%;
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .col-sm-12 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-sm-first {
    -webkit-box-ordinal-group: 0;
    -webkit-order: -1;
    -ms-flex-order: -1;
    order: -1;
  }

  .order-sm-last {
    -webkit-box-ordinal-group: 14;
    -webkit-order: 13;
    -ms-flex-order: 13;
    order: 13;
  }

  .order-sm-0 {
    -webkit-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
  }

  .order-sm-1 {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
  }

  .order-sm-2 {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
  }

  .order-sm-3 {
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
  }

  .order-sm-4 {
    -webkit-box-ordinal-group: 5;
    -webkit-order: 4;
    -ms-flex-order: 4;
    order: 4;
  }

  .order-sm-5 {
    -webkit-box-ordinal-group: 6;
    -webkit-order: 5;
    -ms-flex-order: 5;
    order: 5;
  }

  .order-sm-6 {
    -webkit-box-ordinal-group: 7;
    -webkit-order: 6;
    -ms-flex-order: 6;
    order: 6;
  }

  .order-sm-7 {
    -webkit-box-ordinal-group: 8;
    -webkit-order: 7;
    -ms-flex-order: 7;
    order: 7;
  }

  .order-sm-8 {
    -webkit-box-ordinal-group: 9;
    -webkit-order: 8;
    -ms-flex-order: 8;
    order: 8;
  }

  .order-sm-9 {
    -webkit-box-ordinal-group: 10;
    -webkit-order: 9;
    -ms-flex-order: 9;
    order: 9;
  }

  .order-sm-10 {
    -webkit-box-ordinal-group: 11;
    -webkit-order: 10;
    -ms-flex-order: 10;
    order: 10;
  }

  .order-sm-11 {
    -webkit-box-ordinal-group: 12;
    -webkit-order: 11;
    -ms-flex-order: 11;
    order: 11;
  }

  .order-sm-12 {
    -webkit-box-ordinal-group: 13;
    -webkit-order: 12;
    -ms-flex-order: 12;
    order: 12;
  }

  .offset-sm-0 {
    margin-left: 0;
  }

  .offset-sm-1 {
    margin-left: 8.3333333333%;
  }

  .offset-sm-2 {
    margin-left: 16.6666666667%;
  }

  .offset-sm-3 {
    margin-left: 25%;
  }

  .offset-sm-4 {
    margin-left: 33.3333333333%;
  }

  .offset-sm-5 {
    margin-left: 41.6666666667%;
  }

  .offset-sm-6 {
    margin-left: 50%;
  }

  .offset-sm-7 {
    margin-left: 58.3333333333%;
  }

  .offset-sm-8 {
    margin-left: 66.6666666667%;
  }

  .offset-sm-9 {
    margin-left: 75%;
  }

  .offset-sm-10 {
    margin-left: 83.3333333333%;
  }

  .offset-sm-11 {
    margin-left: 91.6666666667%;
  }
}
@media (min-width: 768px) {
  .col-md {
    -webkit-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }

  .col-md-auto {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-md-1 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 8.3333333333%;
    -ms-flex: 0 0 8.3333333333%;
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .col-md-2 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 16.6666666667%;
    -ms-flex: 0 0 16.6666666667%;
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-md-3 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-md-4 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.3333333333%;
    -ms-flex: 0 0 33.3333333333%;
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .col-md-5 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 41.6666666667%;
    -ms-flex: 0 0 41.6666666667%;
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .col-md-6 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-md-7 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 58.3333333333%;
    -ms-flex: 0 0 58.3333333333%;
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .col-md-8 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 66.6666666667%;
    -ms-flex: 0 0 66.6666666667%;
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .col-md-9 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 75%;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-md-10 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 83.3333333333%;
    -ms-flex: 0 0 83.3333333333%;
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .col-md-11 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 91.6666666667%;
    -ms-flex: 0 0 91.6666666667%;
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .col-md-12 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-md-first {
    -webkit-box-ordinal-group: 0;
    -webkit-order: -1;
    -ms-flex-order: -1;
    order: -1;
  }

  .order-md-last {
    -webkit-box-ordinal-group: 14;
    -webkit-order: 13;
    -ms-flex-order: 13;
    order: 13;
  }

  .order-md-0 {
    -webkit-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
  }

  .order-md-1 {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
  }

  .order-md-2 {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
  }

  .order-md-3 {
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
  }

  .order-md-4 {
    -webkit-box-ordinal-group: 5;
    -webkit-order: 4;
    -ms-flex-order: 4;
    order: 4;
  }

  .order-md-5 {
    -webkit-box-ordinal-group: 6;
    -webkit-order: 5;
    -ms-flex-order: 5;
    order: 5;
  }

  .order-md-6 {
    -webkit-box-ordinal-group: 7;
    -webkit-order: 6;
    -ms-flex-order: 6;
    order: 6;
  }

  .order-md-7 {
    -webkit-box-ordinal-group: 8;
    -webkit-order: 7;
    -ms-flex-order: 7;
    order: 7;
  }

  .order-md-8 {
    -webkit-box-ordinal-group: 9;
    -webkit-order: 8;
    -ms-flex-order: 8;
    order: 8;
  }

  .order-md-9 {
    -webkit-box-ordinal-group: 10;
    -webkit-order: 9;
    -ms-flex-order: 9;
    order: 9;
  }

  .order-md-10 {
    -webkit-box-ordinal-group: 11;
    -webkit-order: 10;
    -ms-flex-order: 10;
    order: 10;
  }

  .order-md-11 {
    -webkit-box-ordinal-group: 12;
    -webkit-order: 11;
    -ms-flex-order: 11;
    order: 11;
  }

  .order-md-12 {
    -webkit-box-ordinal-group: 13;
    -webkit-order: 12;
    -ms-flex-order: 12;
    order: 12;
  }

  .offset-md-0 {
    margin-left: 0;
  }

  .offset-md-1 {
    margin-left: 8.3333333333%;
  }

  .offset-md-2 {
    margin-left: 16.6666666667%;
  }

  .offset-md-3 {
    margin-left: 25%;
  }

  .offset-md-4 {
    margin-left: 33.3333333333%;
  }

  .offset-md-5 {
    margin-left: 41.6666666667%;
  }

  .offset-md-6 {
    margin-left: 50%;
  }

  .offset-md-7 {
    margin-left: 58.3333333333%;
  }

  .offset-md-8 {
    margin-left: 66.6666666667%;
  }

  .offset-md-9 {
    margin-left: 75%;
  }

  .offset-md-10 {
    margin-left: 83.3333333333%;
  }

  .offset-md-11 {
    margin-left: 91.6666666667%;
  }
}
@media (min-width: 992px) {
  .col-lg {
    -webkit-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }

  .col-lg-auto {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-lg-1 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 8.3333333333%;
    -ms-flex: 0 0 8.3333333333%;
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .col-lg-2 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 16.6666666667%;
    -ms-flex: 0 0 16.6666666667%;
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-lg-3 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-lg-4 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.3333333333%;
    -ms-flex: 0 0 33.3333333333%;
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .col-lg-5 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 41.6666666667%;
    -ms-flex: 0 0 41.6666666667%;
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .col-lg-6 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-lg-7 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 58.3333333333%;
    -ms-flex: 0 0 58.3333333333%;
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .col-lg-8 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 66.6666666667%;
    -ms-flex: 0 0 66.6666666667%;
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .col-lg-9 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 75%;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-lg-10 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 83.3333333333%;
    -ms-flex: 0 0 83.3333333333%;
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .col-lg-11 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 91.6666666667%;
    -ms-flex: 0 0 91.6666666667%;
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .col-lg-12 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-lg-first {
    -webkit-box-ordinal-group: 0;
    -webkit-order: -1;
    -ms-flex-order: -1;
    order: -1;
  }

  .order-lg-last {
    -webkit-box-ordinal-group: 14;
    -webkit-order: 13;
    -ms-flex-order: 13;
    order: 13;
  }

  .order-lg-0 {
    -webkit-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
  }

  .order-lg-1 {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
  }

  .order-lg-2 {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
  }

  .order-lg-3 {
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
  }

  .order-lg-4 {
    -webkit-box-ordinal-group: 5;
    -webkit-order: 4;
    -ms-flex-order: 4;
    order: 4;
  }

  .order-lg-5 {
    -webkit-box-ordinal-group: 6;
    -webkit-order: 5;
    -ms-flex-order: 5;
    order: 5;
  }

  .order-lg-6 {
    -webkit-box-ordinal-group: 7;
    -webkit-order: 6;
    -ms-flex-order: 6;
    order: 6;
  }

  .order-lg-7 {
    -webkit-box-ordinal-group: 8;
    -webkit-order: 7;
    -ms-flex-order: 7;
    order: 7;
  }

  .order-lg-8 {
    -webkit-box-ordinal-group: 9;
    -webkit-order: 8;
    -ms-flex-order: 8;
    order: 8;
  }

  .order-lg-9 {
    -webkit-box-ordinal-group: 10;
    -webkit-order: 9;
    -ms-flex-order: 9;
    order: 9;
  }

  .order-lg-10 {
    -webkit-box-ordinal-group: 11;
    -webkit-order: 10;
    -ms-flex-order: 10;
    order: 10;
  }

  .order-lg-11 {
    -webkit-box-ordinal-group: 12;
    -webkit-order: 11;
    -ms-flex-order: 11;
    order: 11;
  }

  .order-lg-12 {
    -webkit-box-ordinal-group: 13;
    -webkit-order: 12;
    -ms-flex-order: 12;
    order: 12;
  }

  .offset-lg-0 {
    margin-left: 0;
  }

  .offset-lg-1 {
    margin-left: 8.3333333333%;
  }

  .offset-lg-2 {
    margin-left: 16.6666666667%;
  }

  .offset-lg-3 {
    margin-left: 25%;
  }

  .offset-lg-4 {
    margin-left: 33.3333333333%;
  }

  .offset-lg-5 {
    margin-left: 41.6666666667%;
  }

  .offset-lg-6 {
    margin-left: 50%;
  }

  .offset-lg-7 {
    margin-left: 58.3333333333%;
  }

  .offset-lg-8 {
    margin-left: 66.6666666667%;
  }

  .offset-lg-9 {
    margin-left: 75%;
  }

  .offset-lg-10 {
    margin-left: 83.3333333333%;
  }

  .offset-lg-11 {
    margin-left: 91.6666666667%;
  }
}
@media (min-width: 1200px) {
  .col-xl {
    -webkit-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }

  .col-xl-auto {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-xl-1 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 8.3333333333%;
    -ms-flex: 0 0 8.3333333333%;
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .col-xl-2 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 16.6666666667%;
    -ms-flex: 0 0 16.6666666667%;
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-xl-3 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-xl-4 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.3333333333%;
    -ms-flex: 0 0 33.3333333333%;
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .col-xl-5 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 41.6666666667%;
    -ms-flex: 0 0 41.6666666667%;
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .col-xl-6 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-xl-7 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 58.3333333333%;
    -ms-flex: 0 0 58.3333333333%;
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .col-xl-8 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 66.6666666667%;
    -ms-flex: 0 0 66.6666666667%;
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .col-xl-9 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 75%;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-xl-10 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 83.3333333333%;
    -ms-flex: 0 0 83.3333333333%;
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .col-xl-11 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 91.6666666667%;
    -ms-flex: 0 0 91.6666666667%;
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .col-xl-12 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-xl-first {
    -webkit-box-ordinal-group: 0;
    -webkit-order: -1;
    -ms-flex-order: -1;
    order: -1;
  }

  .order-xl-last {
    -webkit-box-ordinal-group: 14;
    -webkit-order: 13;
    -ms-flex-order: 13;
    order: 13;
  }

  .order-xl-0 {
    -webkit-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
  }

  .order-xl-1 {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
  }

  .order-xl-2 {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
  }

  .order-xl-3 {
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
  }

  .order-xl-4 {
    -webkit-box-ordinal-group: 5;
    -webkit-order: 4;
    -ms-flex-order: 4;
    order: 4;
  }

  .order-xl-5 {
    -webkit-box-ordinal-group: 6;
    -webkit-order: 5;
    -ms-flex-order: 5;
    order: 5;
  }

  .order-xl-6 {
    -webkit-box-ordinal-group: 7;
    -webkit-order: 6;
    -ms-flex-order: 6;
    order: 6;
  }

  .order-xl-7 {
    -webkit-box-ordinal-group: 8;
    -webkit-order: 7;
    -ms-flex-order: 7;
    order: 7;
  }

  .order-xl-8 {
    -webkit-box-ordinal-group: 9;
    -webkit-order: 8;
    -ms-flex-order: 8;
    order: 8;
  }

  .order-xl-9 {
    -webkit-box-ordinal-group: 10;
    -webkit-order: 9;
    -ms-flex-order: 9;
    order: 9;
  }

  .order-xl-10 {
    -webkit-box-ordinal-group: 11;
    -webkit-order: 10;
    -ms-flex-order: 10;
    order: 10;
  }

  .order-xl-11 {
    -webkit-box-ordinal-group: 12;
    -webkit-order: 11;
    -ms-flex-order: 11;
    order: 11;
  }

  .order-xl-12 {
    -webkit-box-ordinal-group: 13;
    -webkit-order: 12;
    -ms-flex-order: 12;
    order: 12;
  }

  .offset-xl-0 {
    margin-left: 0;
  }

  .offset-xl-1 {
    margin-left: 8.3333333333%;
  }

  .offset-xl-2 {
    margin-left: 16.6666666667%;
  }

  .offset-xl-3 {
    margin-left: 25%;
  }

  .offset-xl-4 {
    margin-left: 33.3333333333%;
  }

  .offset-xl-5 {
    margin-left: 41.6666666667%;
  }

  .offset-xl-6 {
    margin-left: 50%;
  }

  .offset-xl-7 {
    margin-left: 58.3333333333%;
  }

  .offset-xl-8 {
    margin-left: 66.6666666667%;
  }

  .offset-xl-9 {
    margin-left: 75%;
  }

  .offset-xl-10 {
    margin-left: 83.3333333333%;
  }

  .offset-xl-11 {
    margin-left: 91.6666666667%;
  }
}
.img-fluid {
  max-width: 100%;
  height: auto;
}

body {
  background-color: #ffffff;
  color: #29272e;
}

html {
  font-size: 100%;
  font-size: 1vw;
  -webkit-text-size-adjust: 100%;
  font-variant-ligatures: none;
  -webkit-font-variant-ligatures: none;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
}

body {
  font-size: 22px;
  font-family: "IBM Plex Sans", sans-serif;
  line-height: 1.4;
  font-weight: 400;
}
@media (max-width: 475px) {
  body {
    font-size: 16px;
  }
}

p:not(:first-child) {
  margin-top: 32px;
}
@media (max-width: 475px) {
  p:not(:first-child) {
    margin-top: 16px;
  }
}

h1, h2, h3 {
  font-family: "IBM Plex Mono", sans-serif;
  line-height: 1.15;
  font-weight: 400;
}

h1 {
  font-size: 36px;
}
@media screen and (min-width: 450px) {
  h1 {
    font-size: calc(36px + 50 * ((100vw - 450px) / 1350));
  }
}
@media screen and (min-width: 1800px) {
  h1 {
    font-size: 80px;
  }
}

h2 {
  font-size: 40px;
  margin-bottom: 32px;
}
@media (max-width: 475px) {
  h2 {
    font-size: 28px;
  }
}

h3 {
  font-size: 24px;
  margin-bottom: 16px;
  font-weight: 500;
}
@media (max-width: 475px) {
  h3 {
    font-size: 20px;
  }
}

footer {
  font-family: "IBM Plex Mono", sans-serif;
}

.shapes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 24px;
}
@media (max-width: 1216px) {
  .shapes {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }
}
@media (max-width: 1024px) {
  .shapes {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }
}
@media (max-width: 769px) {
  .shapes {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }
  .shapes .hide-tablet {
    display: none;
  }
}
@media (max-width: 475px) {
  .shapes {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }
  .shapes .hide-xs {
    display: none;
  }
}

.shapes div {
  position: relative;
  padding-top: 100%;
}

.shapes div > span {
  background-color: #1F1E21;
  position: absolute;
  top: 0;
  left: 25%;
  width: 50%;
  height: 100%;
  transform: rotate(0deg);
  transition: background-color 8s;
}

.shapes div:nth-child(1) > span,
.shapes div:nth-child(4) > span,
.shapes div:nth-child(6) > span,
.shapes div:nth-child(9) > span,
.shapes div:nth-child(12) > span,
.shapes div:nth-child(13) > span,
.shapes div:nth-child(15) > span,
.shapes div:nth-child(18) > span,
.shapes div:nth-child(20) > span,
.shapes div:nth-child(22) > span,
.shapes div:nth-child(24) > span,
.shapes div:nth-child(26) > span,
.shapes div:nth-child(28) > span,
.shapes div:nth-child(30) > span,
.shapes div:nth-child(31) > span,
.shapes div:nth-child(33) > span,
.shapes div:nth-child(35) > span,
.shapes div:nth-child(36) > span,
.shapes div:nth-child(38) > span,
.shapes div:nth-child(40) > span,
.shapes div:nth-child(42) > span,
.shapes div:nth-child(44) > span,
.shapes div:nth-child(45) > span,
.shapes div:nth-child(47) > span,
.shapes div:nth-child(50) > span,
.shapes div:nth-child(52) > span,
.shapes div:nth-child(55) > span,
.shapes div:nth-child(58) > span,
.shapes div:nth-child(59) > span,
.shapes div:nth-child(61) > span,
.shapes div:nth-child(64) > span,
.shapes div:nth-child(67) > span,
.shapes div:nth-child(69) > span,
.shapes div:nth-child(70) > span,
.shapes div:nth-child(73) > span,
.shapes div:nth-child(75) > span,
.shapes div:nth-child(76) > span,
.shapes div:nth-child(78) > span,
.shapes div:nth-child(81) > span,
.shapes div:nth-child(83) > span,
.shapes div:nth-child(84) > span,
.shapes div:nth-child(85) > span,
.shapes div:nth-child(88) > span,
.shapes div:nth-child(90) > span,
.shapes div:nth-child(93) > span,
.shapes div:nth-child(96) > span,
.shapes div:nth-child(97) > span,
.shapes div:nth-child(99) > span,
.shapes div:nth-child(102) > span,
.shapes div:nth-child(104) > span,
.shapes div:nth-child(106) > span,
.shapes div:nth-child(108) > span,
.shapes div:nth-child(110) > span,
.shapes div:nth-child(112) > span,
.shapes div:nth-child(114) > span,
.shapes div:nth-child(115) > span,
.shapes div:nth-child(117) > span,
.shapes div:nth-child(119) > span,
.shapes div:nth-child(120) > span,
.shapes div:nth-child(122) > span,
.shapes div:nth-child(124) > span,
.shapes div:nth-child(126) > span {
  border-radius: 50%;
  width: 100%;
  left: 0;
}

/**
 *
 * The classes are named `style-a-b`, where `a` is the current
 * style set (the style set changes every 5-10 seconds), and `b`
 * is the current color index within the current style set.
 */
.style-1-1:hover > span {
  background-color: #c73327;
}

.style-2-1:hover > span {
  background-color: #E36835;
}

.style-3-1:hover > span {
  background-color: #DF9D59;
}

.style-4-1:hover > span {
  background-color: #F58C77;
}

.style-5-1:hover > span {
  background-color: #2B347A;
}

.style-6-1:hover > span {
  background-color: #55B4D7;
}

.style-7-1:hover > span {
  background-color: #A5AEAE;
}

.style-8-1:hover > span {
  background-color: #18797A;
}

.shapes div:hover > span {
  transition: background-color 0.05s;
}

.icon {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 24px;
  width: 164px;
  margin-bottom: 48px;
  position: sticky;
  top: 30vh !important;
}

.icon div {
  position: relative;
  padding-top: 100%;
}
.icon div > span {
  background-color: #1F1E21;
  position: absolute;
  top: 0;
  left: 25%;
  width: 50%;
  height: 100%;
  transform: rotate(0deg);
  transition: background-color 2s, border-radius 2s, width 2s;
}

.zero .icon div:nth-child(1) span,
.zero .icon div:nth-child(4) span,
.zero .icon div:nth-child(7) span,
.zero .icon div:nth-child(9) span {
  left: 0;
  width: 100%;
  border-radius: 50%;
}
.zero .icon div:nth-child(1) span {
  background-color: #E1D082;
}
.zero .icon div:nth-child(2) span,
.zero .icon div:nth-child(3) span,
.zero .icon div:nth-child(4) span {
  background-color: #DF9D59;
}
.zero .icon div:nth-child(5) span,
.zero .icon div:nth-child(6) span,
.zero .icon div:nth-child(7) span {
  background-color: #E36835;
}
.zero .icon div:nth-child(8) span,
.zero .icon div:nth-child(9) span {
  background-color: #C73327;
}
.zero .icon div:nth-child(2) span {
  transform: rotate(135deg) !important;
}
.zero .icon div:nth-child(3) span {
  transform: rotate(75deg) !important;
}
.zero .icon div:nth-child(5) span {
  transform: rotate(330deg) !important;
}
.zero .icon div:nth-child(6) span {
  transform: rotate(90deg) !important;
}
.zero .icon div:nth-child(6) span {
  transform: rotate(30deg) !important;
}

.zeroone .icon div > span {
  background-color: #FF8428;
}
.zeroone .icon div:nth-child(7) span,
.zeroone .icon div:nth-child(8) span,
.zeroone .icon div:nth-child(9) span {
  left: 0;
  width: 100%;
  border-radius: 50%;
}
.zeroone .icon div:nth-child(1) span,
.zeroone .icon div:nth-child(2) span {
  background-color: #A5AEAE;
}
.zeroone .icon div:nth-child(3) span,
.zeroone .icon div:nth-child(4) span,
.zeroone .icon div:nth-child(5) span {
  background-color: #55B4D7;
}
.zeroone .icon div:nth-child(6) span,
.zeroone .icon div:nth-child(7) span {
  background-color: #18797A;
}
.zeroone .icon div:nth-child(8) span,
.zeroone .icon div:nth-child(9) span {
  background-color: #2B347A;
}

.onezero .icon div > span {
  background-color: #FF8428;
}
.onezero .icon div:nth-child(1) span,
.onezero .icon div:nth-child(2) span,
.onezero .icon div:nth-child(3) span {
  left: 0;
  width: 100%;
  border-radius: 50%;
}
.onezero .icon div:nth-child(1) span,
.onezero .icon div:nth-child(2) span,
.onezero .icon div:nth-child(4) span {
  background-color: #E7AE68;
}
.onezero .icon div:nth-child(3) span,
.onezero .icon div:nth-child(5) span,
.onezero .icon div:nth-child(7) span,
.onezero .icon div:nth-child(8) span {
  background-color: #F58C77;
}
.onezero .icon div:nth-child(6) span,
.onezero .icon div:nth-child(9) span {
  background-color: #FF7D19;
}
.onezero .icon div:nth-child(4) span {
  transform: rotate(300deg) !important;
}
.onezero .icon div:nth-child(6) span {
  transform: rotate(60deg) !important;
}
.onezero .icon div:nth-child(7) span {
  transform: rotate(330deg) !important;
}
.onezero .icon div:nth-child(8) span {
  transform: rotate(345deg) !important;
}
.onezero .icon div:nth-child(9) span {
  transform: rotate(30deg) !important;
}

.stage2 .zero .icon div > span {
  background-color: #FF8428;
}
.stage2 .zero .icon div:nth-child(7) span,
.stage2 .zero .icon div:nth-child(8) span,
.stage2 .zero .icon div:nth-child(9) span {
  left: 0;
  width: 100%;
  border-radius: 50%;
}
.stage2 .zero .icon div:nth-child(1) span,
.stage2 .zero .icon div:nth-child(2) span {
  background-color: #A5AEAE;
}
.stage2 .zero .icon div:nth-child(3) span,
.stage2 .zero .icon div:nth-child(4) span,
.stage2 .zero .icon div:nth-child(5) span {
  background-color: #55B4D7;
}
.stage2 .zero .icon div:nth-child(6) span,
.stage2 .zero .icon div:nth-child(7) span {
  background-color: #18797A;
}
.stage2 .zero .icon div:nth-child(8) span,
.stage2 .zero .icon div:nth-child(9) span {
  background-color: #2B347A;
}

.stage3 .zero .icon div > span {
  background-color: #FF8428;
}
.stage3 .zero .icon div:nth-child(1) span,
.stage3 .zero .icon div:nth-child(2) span,
.stage3 .zero .icon div:nth-child(3) span {
  left: 0;
  width: 100%;
  border-radius: 50%;
}
.stage3 .zero .icon div:nth-child(1) span,
.stage3 .zero .icon div:nth-child(2) span,
.stage3 .zero .icon div:nth-child(4) span {
  background-color: #E7AE68;
}
.stage3 .zero .icon div:nth-child(3) span,
.stage3 .zero .icon div:nth-child(5) span,
.stage3 .zero .icon div:nth-child(7) span,
.stage3 .zero .icon div:nth-child(8) span {
  background-color: #F58C77;
}
.stage3 .zero .icon div:nth-child(6) span,
.stage3 .zero .icon div:nth-child(9) span {
  background-color: #FF7D19;
}
.stage3 .zero .icon div:nth-child(4) span {
  transform: rotate(300deg) !important;
}
.stage3 .zero .icon div:nth-child(6) span {
  transform: rotate(60deg) !important;
}
.stage3 .zero .icon div:nth-child(7) span {
  transform: rotate(330deg) !important;
}
.stage3 .zero .icon div:nth-child(8) span {
  transform: rotate(345deg) !important;
}
.stage3 .zero .icon div:nth-child(9) span {
  transform: rotate(30deg) !important;
}

.shapes.is-mobile div > span {
  animation: spin infinite 20s linear;
}

.shapes.is-mobile div:nth-child(2) {
  transform: rotate(90deg);
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#innsikt,
#teknologi,
#design {
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}

.stage1 #innsikt {
  opacity: 1;
  transition-delay: 0;
}

.stage2 #design {
  opacity: 1;
  transition-delay: 0;
}

.stage3 #teknologi {
  opacity: 1;
  transition-delay: 0;
}

body {
  transition: background-color 0.5s ease;
}

a {
  color: #29272e;
  text-decoration: none;
  border-bottom: 1px solid #29272e;
  transition: border 0.2s ease;
}
a:hover {
  border-color: transparent;
}
a.logo {
  border-bottom: none;
}

.logo path,
.logotype {
  fill: #29272e;
}

header {
  height: 140px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding: 48px 48px 0 48px;
}
@media (max-width: 769px) {
  header {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.hero {
  padding-top: 80px;
  padding-bottom: 80px;
}
.hero .intro {
  margin-bottom: 80px;
  text-align: center;
}
.hero .intro h1 {
  margin-bottom: 96px;
}

nav {
  width: 240px;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
  text-transform: uppercase;
  font-family: "IBM Plex Mono", sans-serif;
}
@media (max-width: 260px) {
  nav {
    width: 100%;
  }
}
nav ul {
  display: flex;
  justify-content: space-between;
  align-items: start;
  visibility: hidden;
}
nav ul:hover > * {
  opacity: 0.4;
}
nav ul > *:hover {
  opacity: 1;
  transition-delay: 0ms, 0ms;
}
nav ul > * {
  visibility: visible;
  transition: opacity 150ms linear 100ms, transform 150ms ease-in-out 100ms;
}
nav a {
  border: none;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}
.fade-in-element {
  animation: fade-in 1.4s;
}

.hidden {
  opacity: 0;
}

.text-center {
  text-align: center;
}

section {
  padding-top: 120px;
  padding-bottom: 120px;
}
@media (max-width: 769px) {
  section {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}
section.large {
  padding-top: 240px;
  padding-bottom: 240px;
}
@media (max-width: 769px) {
  section.large {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}
section.divider {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

#section2 h2 {
  text-align: center;
  margin-bottom: 0;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

footer {
  padding-top: 96px;
  padding-bottom: 32px;
  color: #fff;
  font-size: 18px;
  margin-top: 120px;
  background-color: #29272e;
  transition: all 0.5s ease;
}
@media (max-width: 769px) {
  footer {
    font-size: 14px;
  }
}
footer .footer_bottom {
  margin-top: 120px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
footer .footer_head {
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
footer a {
  color: #fff;
  border-color: #fff;
}
footer h3 {
  font-size: 32px;
  margin-bottom: 48px;
}
footer .contact {
  margin-bottom: 96px;
}
footer .footer_contact {
  margin-right: 48px;
}
footer .logotype {
  fill: #fff;
}

.wrapper {
  width: 1400px;
  max-width: 100%;
  padding-left: 48px;
  padding-right: 48px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 1216px) {
  .wrapper {
    width: 100%;
  }
}
@media (max-width: 769px) {
  .wrapper {
    padding-left: 24px;
    padding-right: 24px;
  }
}
.wrapper .container:not(:first-child) {
  margin-top: 120px;
}

.sidebar {
  margin-top: 48px;
}
.sidebar h3 {
  margin: 0;
}
.sidebar h3 + ul {
  margin-top: 16px;
}
.sidebar li {
  font-size: 16px;
}
.sidebar li:not(:first-child) {
  margin-top: 4px;
}

.person {
  display: flex;
  justify-content: space-between;
  align-items: center;
  vertical-align: middle;
  max-width: 500px;
}
@media (max-width: 722px) {
  .person {
    max-width: 100%;
  }
}
.person + .person {
  margin-top: 48px;
}
.person .person_portrait {
  background-size: cover;
  background-position: center center;
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  width: 110px;
  height: 110px;
  margin-left: 32px;
}
@media (max-width: 769px) {
  .person .person_portrait {
    width: 80px;
    height: 80px;
  }
}
.person.iris .person_portrait {
  background-image: url("img/Anti_Iris.jpg");
}
.person.annkristin .person_portrait {
  background-image: url("img/Anti_AnnKristin.jpg");
}

.whatwedo .row + .row {
  margin-top: 220px;
}
.whatwedo .whatwedo_icon > div {
  position: sticky;
  top: 30vh !important;
  width: 164px;
}
@media (max-width: 769px) {
  .whatwedo .whatwedo_icon > div {
    margin-top: 0;
  }
}
@media (max-width: 768px) {
  .whatwedo .whatwedo_icon > div {
    margin-bottom: 32px;
  }
}

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