html {
  font-family: sans-serif;
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0;
  font-size: 16px;
  overflow-anchor: none
}

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

[hidden],
template {
  display: none
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects
}

a:active,
a:hover {
  outline-width: 0
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted
}

b,
strong {
  font-weight: inherit;
  font-weight: bolder
}

dfn {
  font-style: italic
}

mark {
  background-color: #ff0;
  color: #000
}

small {
  font-size: 80%
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sub {
  bottom: -.25em
}

sup {
  top: -.5em
}

img {
  border-style: none
}

svg:not(:root) {
  overflow: hidden
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em
}

figure {
  margin: 1em 40px
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible
}

button,
input,
optgroup,
select,
textarea {
  font: inherit;
  margin: 0
}

button,
input {
  overflow: visible
}

button,
select {
  text-transform: none
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

body {
  background: #000
}

hr {
  height: 1px;
  border: none;
  color: #4a5b64;
  background-color: #4a5b64;
  margin: 0
}

.contDoc {
  background: #232e39;
  padding-top: 2.9rem;
  width: 100%
}

@media (min-width:64em) {
  .contDoc {
    padding-top: 2.9rem
  }
}

.g-container {
  padding: 0 0.5rem
}

@media (min-width:64em) {
  .g-container {
    margin: 0 auto
  }
}

.g-grid {
  padding: 0 1rem;
  overflow: hidden;
  float: left;
  min-height: 1px
}

.g-grid--noPadding {
  padding-left: 0;
  padding-right: 0
}

.g-grid--reverse {
  float: right
}

.g-grid--1-8 {
  width: 12.5%
}

.g-grid--2-8 {
  width: 25%
}

.g-grid--3-8 {
  width: 37.5%
}

.g-grid--4-8 {
  width: 50%
}

.g-grid--5-8 {
  width: 62.5%
}

.g-grid--6-8 {
  width: 75%
}

.g-grid--7-8 {
  width: 87.5%
}

.g-grid--8-8 {
  width: 100%
}

.g-grid--33333-8 {
  width: 33.3333%
}

.g-grid--1p3-8 {
  width: 16.666666%
}

.g-grid--25 {
  width: 25%
}

.g-twoColumnBreak {
  content: " "
}

@media (min-width:39em) and (max-width:53em) {
  .g-grid--2-8 {
    width: 50%
  }

  .g-twoColumnBreak {
    content: " ";
    display: table;
    clear: both
  }
}

@media (max-width:38.99em) {
  .g-grid--mobileBreak {
    width: 100%;
    float: none
  }
}

@media (min-width:64em) {
  .g-grid--push-1 {
    margin-left: 12.5%
  }

  .g-grid--push-2 {
    margin-left: 25%
  }

  .g-grid--push-3 {
    margin-left: 37.5%
  }

  .g-grid--push-4 {
    margin-left: 50%
  }

  .g-grid--push-5 {
    margin-left: 62.5%
  }

  .g-grid--push-6 {
    margin-left: 75%
  }

  .g-grid--push-7 {
    margin-left: 87.5%
  }
}

.g-grid--bottomGutter {
  margin-bottom: 1rem
}

.g-grid--topBottomGutter {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem
}

.g-clear:after {
  content: " ";
  display: table;
  clear: both
}

@media (min-width:64em) {
  .g-grid--height35vw {
    height: 35vw
  }
}

.g-grid--height50pc {
  height: 50%
}

.g-grid--height80pc {
  height: 80%
}

.g-grid--height20pc {
  height: 20%
}

@media (min-width:64em) {
  .contentPositioner {
    height: 100%
  }

  .contentPositioner__hideOverflow {
    height: 100%;
    overflow: hidden
  }
}

.placeholder {
  height: 0;
  overflow: hidden;
  position: relative
}

.placeholder--500 {
  padding-top: 500%
}

.placeholder--400 {
  padding-top: 400%
}

.placeholder--375 {
  padding-top: 375%
}

.placeholder--300 {
  padding-top: 300%
}

.placeholder--299 {
  padding-top: 299%
}

.placeholder--295 {
  padding-top: 295%
}

.placeholder--290 {
  padding-top: 290%
}

.placeholder--280 {
  padding-top: 280%
}

.placeholder--275 {
  padding-top: 275%
}

.placeholder--260 {
  padding-top: 260%
}

.placeholder--250 {
  padding-top: 250%
}

.placeholder--240 {
  padding-top: 240%
}

.placeholder--235 {
  padding-top: 235%
}

.placeholder--230 {
  padding-top: 230%
}

.placeholder--225 {
  padding-top: 225%
}

.placeholder--215 {
  padding-top: 215%
}

.placeholder--210 {
  padding-top: 210%
}

.placeholder--205 {
  padding-top: 205%
}

.placeholder--200 {
  padding-top: 200%
}

.placeholder--190 {
  padding-top: 190%
}

.placeholder--185 {
  padding-top: 185%
}

.placeholder--180 {
  padding-top: 180%
}

.placeholder--175 {
  padding-top: 175%
}

.placeholder--170 {
  padding-top: 170%
}

.placeholder--168 {
  padding-top: 168%
}

.placeholder--165 {
  padding-top: 165%
}

.placeholder--160 {
  padding-top: 160%
}

.placeholder--155 {
  padding-top: 155%
}

.placeholder--150 {
  padding-top: 150%
}

.placeholder--145 {
  padding-top: 144%
}

.placeholder--140 {
  padding-top: 140%
}

.placeholder--135 {
  padding-top: 135%
}

.placeholder--130 {
  padding-top: 130%
}

.placeholder--126 {
  padding-top: 126%
}

.placeholder--125 {
  padding-top: 125%
}

.placeholder--123 {
  padding-top: 123%
}

.placeholder--120 {
  padding-top: 120%
}

.placeholder--115 {
  padding-top: 115%
}

.placeholder--110 {
  padding-top: 110%
}

.placeholder--106 {
  padding-top: 106%
}

.placeholder--100 {
  padding-top: 100%
}

.placeholder--97 {
  padding-top: 97%
}

.placeholder--95 {
  padding-top: 95%
}

.placeholder--93 {
  padding-top: 93%
}

.placeholder--90 {
  padding-top: 90%
}

.placeholder--85 {
  padding-top: 85%
}

.placeholder--82 {
  padding-top: 82%
}

.placeholder--80 {
  padding-top: 80%
}

.placeholder--78 {
  padding-top: 78%
}

.placeholder--76 {
  padding-top: 76%
}

.placeholder--75 {
  padding-top: 75%
}

.placeholder--71 {
  padding-top: 71%
}

.placeholder--70 {
  padding-top: 70%
}

.placeholder--69 {
  padding-top: 69%
}

.placeholder--68 {
  padding-top: 68%
}

.placeholder--67 {
  padding-top: 67%
}

.placeholder--665 {
  padding-top: 66.5%
}

.placeholder--65 {
  padding-top: 65%
}

.placeholder--63 {
  padding-top: 63%
}

.placeholder--60 {
  padding-top: 60%
}

.placeholder--58 {
  padding-top: 58%
}

.placeholder--55 {
  padding-top: 55%
}

.placeholder--50 {
  padding-top: 50%
}

.placeholder--44 {
  padding-top: 44%
}

.placeholder--40 {
  padding-top: 40%
}

.placeholder--35 {
  padding-top: 35%
}

.placeholder--33 {
  padding-top: 33%
}

.placeholder--25 {
  padding-top: 25%
}

.placeholder--20 {
  padding-top: 20%
}

.placeholder--18 {
  padding-top: 17.5%
}

.placeholder--17 {
  padding-top: 17%
}

.placeholder--16 {
  padding-top: 16%
}

.placeholder--15 {
  padding-top: 15%
}

.placeholder--10 {
  padding-top: 10%
}

.placeholder--09 {
  padding-top: 9%
}

.placeholder--07 {
  padding-top: 7%
}

.placeholder--05 {
  padding-top: 5%
}

.placeholder__object {
  position: absolute;
  top: 0;
  left: 0
}

.placeholder--thumbs {
  padding-top: 0.5rem;
  padding-left: 0.5rem
}

.bottomspacing--05 {
  padding-bottom: 5%
}

.bottomspacing--10 {
  padding-bottom: 10%
}

.u-fitLandscape {
  width: 100%;
  height: auto;
  display: block
}

.u-noPaddingLeft {
  padding-left: 0 !important
}

.u-noPaddingRight {
  padding-right: 0 !important
}

.u-noPaddingTop {
  padding-top: 0 !important
}

.u-noPaddingBottom {
  padding-bottom: 0 !important
}

.u-noPadding {
  padding: 0 !important
}

.u-paddingLeft05 {
  padding-left: 0.5rem
}

.u-paddingLeft1 {
  padding-left: 1rem
}

.u-paddingLeft70 {
  padding-left: 0.65rem
}

.u-paddingRight3 {
  padding-right: 3rem
}

.u-paddingRight2 {
  padding-right: 2rem
}

.u-paddingRight1 {
  padding-right: 1rem
}

.u-paddingRight70 {
  padding-right: 0.65rem
}

.u-paddingright15 {
  padding-right: 1.5rem
}

.u-pr05 {
  padding-right: 0.5rem
}

.u-paddingTop05 {
  padding-top: 0.5rem
}

.u-paddingTop1 {
  padding-top: 1rem
}

.u-paddingTop2 {
  padding-top: 2rem
}

.u-paddingTop3 {
  padding-top: 3rem
}

.u-paddingTop4 {
  padding-top: 4rem
}

.u-paddingTop5 {
  padding-top: 5rem
}

.u-paddingBottom1 {
  padding-bottom: 1rem
}

.u-paddingBottom2 {
  padding-bottom: 2rem
}

.u-paddingBottom3 {
  padding-bottom: 3rem
}

.u-paddingBottom4 {
  padding-bottom: 4rem
}

.u-paddingBottom8 {
  padding-bottom: 8rem
}

.u-noMargin {
  margin: 0 !important
}

.u-noMarginBottom {
  margin-bottom: 0 !important
}

.u-marginBottom0p5 {
  margin-bottom: 0.5rem !important
}

.u-marginBottom1 {
  margin-bottom: 1rem !important
}

.u-marginBottom2 {
  margin-bottom: 2rem !important
}

.u-marginBottom3 {
  margin-bottom: 3rem !important
}

.u-marginLeft05 {
  margin-left: 0.5rem
}

.u-marginLeft1 {
  margin-left: 1rem
}

.u-marginLeft11 {
  margin-left: 1.1rem
}

.u-marginLeft12 {
  margin-left: 1.2rem
}

.u-marginRight15 {
  margin-right: 1.5rem
}

.u-bulletless {
  list-style: none !important
}

.u-minHeight30rem {
  min-height: 30rem
}

.u-relative {
  position: relative
}

.u-absolute {
  position: absolute
}

.u-fixed {
  position: fixed !important
}

.u-inlineCentre {
  text-align: center
}

.u-alignLeft {
  text-align: left !important
}

.u-alignRight {
  text-align: right
}

.u-noSelect {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.u-floatLeft {
  float: left !important
}

.u-floatRight {
  float: right !important
}

.u-opacity0 {
  opacity: 0
}

.u-width100pc {
  width: 100%
}

.u-height100pc {
  height: 100%
}

.u-lowercase {
  text-transform: lowercase
}

.u-overflowVisible {
  overflow: visible
}

.u-overflowHidden {
  overflow: hidden
}

.u-displayNone {
  display: none !important
}

.u-displayBlock {
  display: block
}

.u-showOnXtraLargeScreens {
  display: none !important
}

@media (min-width:135em) {
  .u-showOnXtraLargeScreens {
    display: block !important
  }
}

.u-showOnLargeScreens {
  display: none !important
}

@media (min-width:74em) {
  .u-showOnLargeScreens {
    display: block !important
  }
}

.u-showOnLargerScreens {
  display: none !important
}

@media (min-width:74em) and (max-width:134.99em) {
  .u-showOnLargerScreens {
    display: block !important
  }
}

.u-showOnLargeAndMediumScreens {
  display: none !important
}

@media (min-width:44em) {
  .u-showOnLargeAndMediumScreens {
    display: block !important
  }
}

.u-showOnMediumScreens {
  display: none !important
}

@media (min-width:44em) and (max-width:73.99em) {
  .u-showOnMediumScreens {
    display: block !important
  }
}

.u-showOnTabletLandscapeScreens {
  display: none !important
}

@media (min-width:53.01em) and (max-width:73.99em) {
  .u-showOnTabletLandscapeScreens {
    display: block !important
  }
}

.u-showOnTabletPortraitScreens {
  display: none !important
}

@media (min-width:44em) and (max-width:53.00em) {
  .u-showOnTabletPortraitScreens {
    display: block !important
  }
}

.u-showOnSmallScreens {
  display: none !important
}

@media (max-width:43.99em) {
  .u-showOnSmallScreens {
    display: block !important
  }
}

.u-hideOnSmallScreens {
  display: block !important
}

@media (max-width:43.99em) {
  .u-hideOnSmallScreens {
    display: none !important
  }
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 200;
  src: local("IBM Plex Mono ExtLt"), local("IBMPlexMono-ExtLt"), url("../fonts/IBMPlexMono-ExtraLight.woff2") format("woff2")
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 300;
  src: local("IBM Plex Mono Light"), local("IBMPlexMono-Light"), url("../fonts/IBMPlexMono-Light.woff2") format("woff2")
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  src: local("IBM Plex Mono"), local("IBMPlexMono"), url("../fonts/IBMPlexMono-Regular.woff2") format("woff2")
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 300;
  src: local("IBM Plex Sans Light"), local("IBMPlexSans-Light"), url("../fonts/IBMPlexSans-Light.woff2") format("woff2")
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  src: local("IBM Plex Sans"), local("IBMPlexSans"), url("../fonts/IBMPlexSans-Regular.woff2") format("woff2")
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 400;
  src: local("IBM Plex Sans Italic"), local("IBMPlexSans-Italic"), url("../fonts/IBMPlexSans-Italic.woff2") format("woff2")
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  src: local("IBM Plex Sans Medm"), local("IBMPlexSans-Medm"), url("../fonts/IBMPlexSans-Medium.woff2") format("woff2")
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  src: local("IBM Plex Sans Bold"), local("IBMPlexSans-Bold"), url("../fonts/IBMPlexSans-Bold.woff2") format("woff2")
}

.h1,
.h2,
.h3,
.h4,
.h5,
.navMainMobile__link,
.navMain__link,
.navSearch__form .navSearch__submit,
h1,
h2,
h3,
h4,
h5 {
  font-family: IBM Plex Sans, sans-serif;
  letter-spacing: -.01rem;
  -ms-font-feature-settings: "kern";
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern";
  -webkit-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern=1";
  -webkit-font-kerning: normal;
  font-kerning: normal
}

.h1,
h1 {
  font-weight: 400;
  padding-top: 0.3rem
}

@media (min-width:64em) {

  .h1,
  h1 {
    font-size: 5rem;
    line-height: 1.26
  }
}

@media (min-width:48em) and (max-width:63.99em) {

  .h1,
  h1 {
    font-size: 6.5rem;
    line-height: 1.26
  }
}

@media (min-width:19.375em) and (max-width:47.99em) {

  .h1,
  h1 {
    font-size: 2.3rem;
    line-height: 1.26
  }
}

.h2,
h2 {
  font-size: 3rem;
  font-weight: 300
}

@media (min-width:64em) {

  .h2,
  h2 {
    font-size: 2.1rem;
    line-height: 1.6
  }
}

@media (min-width:48em) and (max-width:63.99em) {

  .h2,
  h2 {
    font-size: 2.9rem;
    line-height: 1.45;
    padding-bottom: 4rem
  }
}

@media (min-width:36em) and (max-width:47.99em) {

  .h2,
  h2 {
    font-size: 2rem;
    line-height: 1.45;
    padding-bottom: 4rem
  }
}

@media (min-width:10.375em) and (max-width:35.99em) {

  .h2,
  h2 {
    font-size: 1.6rem;
    line-height: 1.45;
    padding-bottom: 4rem
  }
}

.h3,
h3 {
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1.3;
  position: relative;
  padding-bottom: 0.3rem
}

@media (max-width:63.99em) {

  .h3,
  h3 {
    font-size: 1.9rem;
    line-height: 1.3;
    padding-bottom: 0.5rem
  }
}

@media (min-width:64em) {

  .h3,
  h3 {
    font-size: 1.6rem;
    line-height: 1.3;
    padding-bottom: 0.3rem
  }
}

.h4,
h4 {
  font-weight: 500
}

@media (max-width:63.99em) {

  .h4,
  h4 {
    font-size: 1.4rem;
    line-height: 1.55;
    padding-bottom: 0.5rem
  }
}

@media (min-width:64em) {

  .h4,
  h4 {
    font-size: 1.2rem;
    line-height: 1.55
  }
}

.h5,
h5 {
  font-size: 1.1rem;
  font-weight: 500
}

.navMainMobile__link,
.navMain__link {
  word-spacing: -.1rem;
  line-height: 1.3;
  font-size: 1.2 rem;
  font-weight: 300;
  position: relative;
  padding-bottom: 0.3rem
}

li,
p {
  font-family: IBM Plex Sans;
  font-weight: 300;
  clear: both
}

@media (max-width:43.99em) {

  li,
  p {
    font-size: 1rem;
    line-height: 1.6
  }
}

@media (min-width:44em) and (max-width:63.99em) {

  li,
  p {
    font-size: 1rem;
    line-height: 1.6
  }
}

@media (min-width:64em) and (max-width:87.49em) {

  li,
  p {
    font-size: 0.85rem;
    line-height: 1.6
  }
}

@media (min-width:87.5em) and (max-width:112.49em) {

  li,
  p {
    font-size: 0.9rem;
    line-height: 1.6
  }
}

@media (min-width:112.5em) and (max-width:137.49em) {

  li,
  p {
    font-size: 0.9rem;
    line-height: 1.6
  }
}

@media (min-width:137.5em) {

  li,
  p {
    font-size: 0.9rem;
    line-height: 1.6
  }
}

@media (max-width:63.99em) {
  .p--small {
    font-size: 0.95rem;
    line-height: 1.25
  }
}

@media (min-width:64em) {
  .p--small {
    font-size: 0.525rem;
    line-height: 1.25;
    padding-top: 0
  }
}

a {
  color: #338fc2;
  text-decoration: none
}

a:hover {
  color: #ffffff
}

.h1 a,
.h2 a,
.h3 a,
.h4 a,
.navMainMobile__link a,
.navMain__link a,
h1 a,
h2 a,
h3 a,
h4 a {
  border-bottom: none
}

.h1>a:hover,
.h2>a:hover,
.h3>a:hover,
.h4>a:hover,
.navMainMobile__link>a:hover,
.navMain__link>a:hover,
h1>a:hover,
h2>a:hover,
h3>a:hover,
h4>a:hover {
  color: #bfe9ff
}

p>a {
  border-bottom: 1px solid #c5c5c5
}

p>a:hover {
  color: #0DBAF1;
  border-bottom: 1px solid #0DBAF1
}

.a--contactLink {
  color: #0DBAF1;
  border-bottom: 1px solid #0DBAF1
}

.a--contactLink:hover {
  color: #ffffff;
  border-bottom: 1px solid #ffffff
}

.a--borderBottom {
  border-bottom: 1px solid #0DBAF1
}

.a--borderBottom:hover {
  border-bottom: 1px solid #ff3100
}

.a--noBorderBottom,
.a--noBorderBottom:hover {
  border-bottom: 0 !important
}

hr {
  height: 2px;
  border: none;
  color: #324853;
  background-color: #324853;
  margin: 0
}

@media (max-width:63.99em) {
  hr {
    margin-bottom: 0.9rem
  }
}

@media (min-width:64em) {
  h4+p {
    padding-top: 0
  }
}

.footerText {
  font-weight: 300;
  font-size: 0.9rem;
  top: 0.3rem;
  color: #4e5766;
  position: relative
}

@media (max-width:36.99em) {
  .footerText {
    text-align: left
  }
}

@media (min-width:37.00em) {
  .footerText {
    text-align: right
  }
}

@media (max-width:19.365em) {
  html {
    font-size: 63%
  }
}

@media (min-width:19.375em) and (max-width:21.865em) {
  html {
    font-size: 65%
  }
}

@media (min-width:21.875em) and (max-width:26.24em) {
  html {
    font-size: 85%
  }
}

@media (min-width:26.25em) and (max-width:29.99em) {
  html {
    font-size: 90%
  }
}

@media (min-width:30em) and (max-width:35.49em) {
  html {
    font-size: 75%
  }
}

@media (min-width:35.5em) and (max-width:47.99em) {
  html {
    font-size: 75%
  }
}

@media (min-width:48em) and (max-width:63.99em) {
  html {
    font-size: 80%
  }
}

@media (min-width:64em) and (max-width:74.99em) {
  html {
    font-size: 100%
  }
}

@media (min-width:75em) and (max-width:87.49em) {
  html {
    font-size: 110%
  }
}

@media (min-width:87.5em) and (max-width:112.49em) {
  html {
    font-size: 110%
  }
}

@media (min-width:112.5em) and (max-width:137.49em) {
  html {
    font-size: 120%
  }
}

@media (min-width:137.5em) {
  html {
    font-size: 130%
  }
}

@media (min-width:22em) and (max-width:33.99em) {
  .thanksMsg {
    font-size: 1.6rem
  }
}

.c-textGrey {
  color: #b0dcf5
}

.c-textSoftGrey {
  color: #a9ccdf
}

.c-grey2 {
  color: #666
}

.c-white {
  color: #fff
}

.c-blue {
  color: #338fc2
}

.c-blueBright {
  color: #0DBAF1
}

.c-blueLight {
  color: #92b8cc
}

.c-red {
  color: #ff3100
}

.c-bgRed {
  background-color: #ff3100
}

.c-bgBlack {
  background-color: #000
}

.c-bgWhite {
  background-color: #fff
}

.c-bgDustyBlue {
  background-color: #414553
}

.c-bgNav {
  background-color: #13161a
}

.c-bgNavCap {
  background-color: #284657
}

.c-bgDarkBlue1 {
  background-color: #192129
}

.c-bgDarkBlue2 {
  background-color: #232e39
}

.c-bgDarkBlue3 {
  background-color: #2a3643
}

.c-bgDarkBlue4 {
  background-color: #1d2731
}

.c-bgDarkBlue5 {
  background-color: #10171c
}

.c-bgDarkBlue6 {
  background-color: #192129
}

.navMain {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100
}

@media (min-width:64em) {
  .navMain {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0
  }
}

.navMain__links {
  position: relative;
  z-index: 2;
  padding-bottom: 0.8rem;
  padding-left: 1.6rem;
  border-top: 0.5rem solid #284657
}

.navMain__links.active {
  background: #282828
}

.navMain__cont {
  display: block;
  float: left
}

@media (max-width:23.49em) {
  .navMain__cont {
    padding-left: 2.5rem
  }
}

@media (min-width:23.50em) and (max-width:26.49em) {
  .navMain__cont {
    padding-left: 3rem
  }
}

@media (min-width:26.5em) and (max-width:43.99em) {
  .navMain__cont {
    padding-left: 3.2rem
  }
}

@media (min-width:44em) {
  .navMain__cont {
    width: 25%;
    padding-left: 0.5rem;
    padding-right: 0.5rem
  }
}

.navMain__cont--logo {
  float: left
}

@media (max-width:63.99em) {
  .navMain__cont--logo {
    padding-left: 0.3rem
  }
}

@media (min-width:64em) {
  .navMain__cont--logo {
    width: 25%
  }
}

.navMain__link {
  top: 0;
  display: block;
  float: left;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  line-height: 0.975;
  font-size: 1.1rem
}

.navMain__link:hover {
  color: #b0dcf5
}

.navMain__linkHighlight {
  position: absolute;
  width: 100%;
  top: -.45rem;
  left: 0;
  height: 0.4em;
  background: #338fc2
}

@media (max-width:41.47em) {
  .navMainMobile {
    position: absolute;
    width: 100%;
    z-index: 0
  }

  .navMainMobile__link {
    top: 0;
    display: block;
    float: none;
    background: #000;
    padding-left: 13.45rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #c5c5c5
  }
}

@media (max-width:41.74em) {
  .navMainMobile__link {
    padding-left: 13.85rem
  }
}

@media (max-width:41.74em) {

  .navMainMobile__link,
  .navMain__link {
    font-size: 1.1rem
  }
}

.footerCap {
  position: relative;
  z-index: 2;
  border-bottom: 0.5rem solid #172c38
}

.btn {
  border-radius: 0.1rem;
  border: 1px solid #286e94;
  color: #fff;
  cursor: pointer;
  background-color: #286e94;
  font-family: IBM Plex Sans, sans-serif;
  font-weight: 300;
  color: #bad9eb;
  line-height: 1;
  margin: 0;
  border-radius: 4px;
  padding: 0.725em 1.8em 0.7em;
  display: block;
  float: none;
  font-size: 1em;
  text-align: center;
  width: 100%
}

@media (max-width:19.365em) {
  .btn--main {
    margin-top: 0.55rem;
    margin-bottom: 3rem;
    width: 100%
  }
}

@media (min-width:19.375em) and (max-width:43.99em) {
  .btn--main {
    margin-top: 0.55rem;
    margin-bottom: 3rem;
    width: 100%
  }
}

@media (min-width:44em) and (max-width:50.99em) {
  .btn--main {
    padding: 0.65em 0.8em 0.6em;
    font-size: 1em;
    float: left;
    width: 100%
  }
}

@media (min-width:51em) and (max-width:64.99em) {
  .btn--main {
    padding: 0.65em 0.8em 0.6em;
    font-size: 1em;
    float: left;
    width: 100%
  }
}

@media (min-width:65em) and (max-width:72.99em) {
  .btn {
    padding: 0.65em 0.8em 0.6em;
    font-size: 0.9em;
    float: left;
    width: 100%
  }
}

@media (min-width:73em) and (max-width:87.49em) {
  .btn {
    padding: 0.65em 0.8em 0.6em;
    font-size: 1.1em;
    float: left;
    width: 100%
  }
}

@media (min-width:87.5em) and (max-width:112.49em) {
  .btn {
    margin-top: 0.55rem;
    padding: 0.5em 0.8em 0.6em;
    font-size: 1.1em;
    float: left;
    width: 100%
  }
}

@media (min-width:112.5em) and (max-width:137.49em) {
  .btn {
    padding: 0.65em 0.8em 0.6em;
    font-size: 1.2em;
    float: left;
    width: 60%
  }
}

@media (min-width:137.5em) {
  .btn {
    padding: 0.65em 0.8em 0.6em;
    font-size: 1.2em;
    float: left;
    width: 100%
  }
}

.btn--hover-bg:hover {
  background-color: #4ac0ff
}

.btn--hover-border:hover {
  border: 1px solid #4ac0ff !important
}

.arrowXtraSmallBtn {
  display: inline-block;
  font-size: 13px;
  position: relative;
  bottom: 2px;
  left: 10px;
  border: 1px solid;
  border-radius: 15%;
  width: 16px;
  height: 16px;
  line-height: 12px;
  text-align: center;
  font-weight: 500
}

.use {
  position: relative;
  font-weight: 700;
  color: #aad5ed;
  font-size: 1.3em;
  top: -.2rem
}

.craft {
  position: relative;
  font-weight: 400;
  color: #87a9bd;
  font-size: 1.3em;
  top: -.2rem
}

.mainLogoBlock {
  display: inline-block
}

@media (min-width:10em) and (max-width:29.99em) {
  .hexagon {
    padding-top: 1.5rem;
    height: 18rem;
    background-repeat: no-repeat;
    background-position: left 0 bottom 0.1em;
    background-size: auto 98.5%;
    background-origin: content-box
  }

  .mainLogoText {
    position: relative;
    top: 0.2rem;
    font-size: 2.6em;
    bottom: 3.2rem
  }

  .mainSubtagText {
    position: relative;
    margin: auto;
    width: 85%;
    top: 1rem;
    font-size: 1.3em
  }

  .debugSizeBG2 {
    background-color: yellow
  }
}

@media (min-width:30em) and (max-width:42.99em) {
  .hexagon {
    padding-top: 1.5rem;
    height: 18rem;
    background-repeat: no-repeat;
    background-position: left 0 bottom 0.1em;
    background-size: auto 98.5%;
    background-origin: content-box
  }

  .mainLogoText {
    position: relative;
    top: 0.2rem;
    font-size: 2.6em;
    bottom: 3.2rem
  }

  .mainSubtagText {
    position: relative;
    margin: auto;
    width: 65%;
    top: 1rem;
    font-size: 1.3em
  }

  .debugSizeBG2 {
    background-color: brown
  }
}

@media (min-width:43em) and (max-width:62.99em) and (max-height:52em) {
  .hexagon {
    padding-right: 1.5rem;
    height: 13rem;
    background-repeat: no-repeat;
    background-position: left 0 bottom 0.1em;
    background-size: auto 98.5%;
    background-origin: content-box
  }

  .mainLogoText {
    position: relative;
    font-size: 3em;
    bottom: 4rem
  }

  .mainSubtagText {
    position: relative;
    margin: auto;
    width: 80%;
    top: -1rem;
    font-size: 1.3em
  }

  .debugSizeBG2 {
    background-color: darkgreen
  }
}

@media (min-width:43em) and (max-width:62.99em) {
  .hexagon {
    padding-right: 1.5rem;
    height: 11rem;
    background-repeat: no-repeat;
    background-position: left 0 bottom 0.1em;
    background-size: auto 98.5%;
    background-origin: content-box
  }

  .mainLogoText {
    position: relative;
    font-size: 4em;
    bottom: 2.4rem
  }

  .mainSubtagText {
    position: relative;
    margin: auto;
    width: 100%;
    font-size: 1.6em;
    top: -1rem;
    padding-bottom: 2rem
  }

  .debugSizeBG2 {
    background-color: olivedrab
  }
}

@media (min-width:63em) and (max-width:73.99em) {
  .hexagon {
    margin-right: 1.5rem;
    height: 11rem
  }

  .mainLogoText {
    position: relative;
    bottom: 2.8rem
  }

  .mainSubtagText {
    position: relative;
    margin: auto;
    width: 100%;
    font-size: 1.85em;
    top: -rem;
    padding-bottom: 2rem
  }

  .debugSizeBG2 {
    background-color: orangered
  }
}

@media (min-width:74em) and (max-width:87.49em) {
  .hexagon {
    position: relative;
    margin-right: 2rem;
    width: 11rem
  }

  .mainLogoText {
    position: relative;
    bottom: 3rem
  }

  .mainSubtagText {
    position: relative;
    margin: auto;
    width: 100%;
    font-size: 2.5em;
    top: -1rem;
    padding-bottom: 2rem
  }

  .debugSizeBG2 {
    background-color: orchid
  }
}

@media (min-width:87.5em) and (max-width:112.49em) {
  .hexagon {
    padding-right: 1.5rem;
    height: 14rem;
    background-repeat: no-repeat;
    background-position: left 0 bottom 0.1em;
    background-size: auto 98.5%;
    background-origin: content-box
  }

  .mainLogoText {
    position: relative;
    font-size: 6.5em;
    bottom: 3rem;
    top: -4rem
  }

  .mainSubtagText {
    position: relative;
    margin: auto;
    width: 100%;
    font-size: 2.2em;
    top: -1rem;
    padding-bottom: 2rem
  }

  .debugSizeBG2 {
    background-color: blue
  }
}

@media (min-width:112.5em) and (max-width:137.49em) {
  .hexagon {
    padding-right: 1.5rem;
    height: 15rem
  }

  .mainLogoText {
    position: relative;
    font-size: 7em;
    bottom: 3rem;
    top: -4rem
  }

  .mainSubtagText {
    position: relative;
    margin: auto;
    width: 100%;
    font-size: 3.2em;
    top: -1rem;
    padding-bottom: 2rem
  }

  .debugSizeBG2 {
    background-color: palevioletred
  }
}

@media (min-width:137.5em) {
  .hexagon {
    position: relative;
    padding-right: 1.5rem;
    height: 16rem;
    top: -3rem;
    background-repeat: no-repeat;
    background-position: left 0 bottom 0.2em;
    background-size: auto 98%;
    background-origin: content-box
  }

  .mainLogoText {
    position: relative;
    font-size: 8em;
    bottom: 3rem;
    top: -7.5rem
  }

  .mainSubtagText {
    position: relative;
    margin: auto;
    width: 100%;
    font-size: 3.5em;
    top: -4rem;
    padding-bottom: 2rem
  }

  .debugSizeBG2 {
    background-color: red
  }
}

.imageLinkArea {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 0.5rem solid #364557
}

a.imageLinkArea:hover {
  border: 0.5rem solid #338fc2
}

@media (min-width:42em) {
  .helloImageContainer {
    position: relative;
    background-image: url("../img/home/intro_illustration.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center top 4rem;
    background-size: auto 80%;
    background-origin: content-box
  }
}

@media (min-width:20em) and (max-width:41.99em) {
  .helloImageContainer {
    background-image: url("../img/home/intro_illustration_phone.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center top 6rem;
    padding-left: 1rem;
    background-size: auto 35%;
    background-origin: content-box
  }
}

@media (min-width:20em) and (max-width:60em) and (max-height:27em) {
  .helloImageContainer {
    background-image: url("../img/home/intro_illustration_phone.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: auto 80%;
    background-origin: content-box;
    padding-top: 0.5rem
  }
}

.aboutImageContainer {
  background-image: url("../img/home/about2.png");
  background-repeat: no-repeat, no-repeat;
  background-position: bottom right 1em;
  background-size: auto 97%;
  background-origin: content-box
}

.aboutImageContainerMedium {
  background-image: url("../img/home/about2.png");
  background-repeat: no-repeat, no-repeat;
  background-position: bottom right 0.75em;
  background-size: auto 95%;
  background-origin: content-box
}

.aboutImageContainerSmall {
  background-image: url("../img/home/about2_phone.png");
  background-repeat: no-repeat, no-repeat;
  background-position: top;
  background-size: auto 100%;
  background-origin: content-box
}

.contactImageContainer {
  background-image: url("../img/home/contact.png");
  background-repeat: no-repeat, no-repeat;
  background-position: top;
  background-size: auto 90%;
  background-origin: content-box
}

.contactImageContainerMedium {
  background-image: url("../img/home/contact.png");
  background-repeat: no-repeat, no-repeat;
  background-position: top right 4.5em;
  background-size: auto 85%;
  background-origin: content-box
}

.debug {
  background-color: #00ff27
}

.debug2 {
  background-color: #8600ff
}

.logospacer {
  height: 0;
  overflow: hidden;
  position: relative
}

@media (min-width:74em) and (max-width:87.49em) {
  .timelineBlock {
    width: 320px;
    margin-left: 10px
  }

  .logospacer--1 {
    padding-top: 320px
  }

  .logospacer--2 {
    padding-top: 1250px
  }

  .logospacer--3 {
    padding-top: 310px
  }

  .logospacer--4 {
    padding-top: 220px
  }

  .logospacer--5 {
    padding-top: 115px
  }

  .logospacer--6 {
    padding-top: 100px
  }

  .logospacer--7 {
    padding-top: 200px
  }

  .logospacer--8 {
    padding-top: 270px
  }
}

@media (min-width:87.5em) and (max-width:112.49em) {
  .logospacer--1 {
    padding-top: 300px
  }

  .logospacer--2 {
    padding-top: 1250px
  }

  .logospacer--3 {
    padding-top: 320px
  }

  .logospacer--4 {
    padding-top: 175px
  }

  .logospacer--5 {
    padding-top: 100px
  }

  .logospacer--6 {
    padding-top: 115px
  }

  .logospacer--7 {
    padding-top: 210px
  }

  .logospacer--8 {
    padding-top: 270px
  }
}

@media (min-width:112.5em) and (max-width:137.49em) {
  .logospacer--1 {
    padding-top: 300px
  }

  .logospacer--2 {
    padding-top: 1240px
  }

  .logospacer--3 {
    padding-top: 270px
  }

  .logospacer--4 {
    padding-top: 180px
  }

  .logospacer--5 {
    padding-top: 100px
  }

  .logospacer--6 {
    padding-top: 80px
  }

  .logospacer--7 {
    padding-top: 198px
  }

  .logospacer--8 {
    padding-top: 253px
  }
}

@media (min-width:137.5em) {
  .timelineBlock {
    width: 440px
  }

  .logospacer--1 {
    padding-top: 300px
  }

  .logospacer--2 {
    padding-top: 1180px
  }

  .logospacer--3 {
    padding-top: 300px
  }

  .logospacer--4 {
    padding-top: 150px
  }

  .logospacer--5 {
    padding-top: 80px
  }

  .logospacer--6 {
    padding-top: 80px
  }

  .logospacer--7 {
    padding-top: 180px
  }

  .logospacer--8 {
    padding-top: 215px
  }
}

.timelineLegend {
  max-width: 23px
}

.resumeBlock {
  margin-left: 20px;
  margin-right: 20px;
  position: relative;
  max-width: 800px
}

.resumewrapper {
  display: flex
}

.resumespacer {
  overflow: hidden;
  position: relative;
  display: block;
  width: 150px
}

.resumedots {
  background-image: url("../img/about/resumecircle.png");
  background-repeat: repeat-y;
  background-position: left 2.5em bottom;
  background-size: 10px;
  background-origin: content-box
}

.resumespacer--1 {
  height: 85px
}

@media (min-width:44em) and (max-width:62.99em) {
  .resumespacer--1 {
    height: 120px
  }

  .resumespacer--2 {
    height: 718px
  }

  .resumespacer--3 {
    height: 120px
  }

  .resumespacer--4 {
    height: 335px
  }

  .resumespacer--5 {
    height: 50px
  }

  .resumespacer--6 {
    height: 130px
  }

  .resumespacer--7 {
    height: 30px
  }

  .resumespacer--8 {
    height: 50px
  }

  .resumespacer--9 {
    height: 110px
  }

  .resumespacer--10 {
    height: 50px
  }

  .resumespacer--11 {
    height: 50px
  }
}

@media (min-width:63em) and (max-width:73.99em) {
  .resumespacer--1 {
    height: 120px
  }

  .resumespacer--2 {
    height: 875px
  }

  .resumespacer--3 {
    height: 160px
  }

  .resumespacer--4 {
    height: 350px
  }

  .resumespacer--5 {
    height: 50px
  }

  .resumespacer--6 {
    height: 140px
  }

  .resumespacer--7 {
    height: 30px
  }

  .resumespacer--8 {
    height: 60px
  }

  .resumespacer--9 {
    height: 145px
  }

  .resumespacer--10 {
    height: 50px
  }

  .resumespacer--11 {
    height: 50px
  }
}

@media (min-width:74em) and (max-width:87.49em) {
  .resumespacer--2 {
    height: 910px
  }

  .resumespacer--3 {
    height: 220px
  }

  .resumespacer--4 {
    height: 380px
  }

  .resumespacer--5 {
    height: 50px
  }

  .resumespacer--6 {
    height: 110px
  }

  .resumespacer--7 {
    height: 30px
  }

  .resumespacer--8 {
    height: 90px
  }

  .resumespacer--9 {
    height: 140px
  }

  .resumespacer--10 {
    height: 50px
  }

  .resumespacer--11 {
    height: 50px
  }
}

@media (min-width:87.5em) and (max-width:112.49em) {
  .resumespacer--2 {
    height: 785px
  }

  .resumespacer--3 {
    height: 190px
  }

  .resumespacer--4 {
    height: 350px
  }

  .resumespacer--5 {
    height: 50px
  }

  .resumespacer--6 {
    height: 80px
  }

  .resumespacer--7 {
    height: 50px
  }

  .resumespacer--8 {
    height: 40px
  }

  .resumespacer--9 {
    height: 90px
  }

  .resumespacer--10 {
    height: 50px
  }

  .resumespacer--11 {
    height: 50px
  }
}

@media (min-width:112.5em) and (max-width:137.49em) {
  .resumespacer--2 {
    height: 780px
  }

  .resumespacer--3 {
    height: 190px
  }

  .resumespacer--4 {
    height: 340px
  }

  .resumespacer--5 {
    height: 40px
  }

  .resumespacer--6 {
    height: 85px
  }

  .resumespacer--7 {
    height: 30px
  }

  .resumespacer--8 {
    height: 60px
  }

  .resumespacer--9 {
    height: 65px
  }

  .resumespacer--10 {
    height: 50px
  }

  .resumespacer--11 {
    height: 50px
  }
}

@media (min-width:137.5em) {
  .resumespacer--2 {
    height: 680px
  }

  .resumespacer--3 {
    height: 170px
  }

  .resumespacer--4 {
    height: 325px
  }

  .resumespacer--5 {
    height: 40px
  }

  .resumespacer--6 {
    height: 60px
  }

  .resumespacer--7 {
    height: 50px
  }

  .resumespacer--8 {
    height: 60px
  }

  .resumespacer--9 {
    height: 90px
  }

  .resumespacer--10 {
    height: 50px
  }

  .resumespacer--11 {
    height: 50px
  }
}

@media (min-width:10em) and (max-width:41.99em) {
  .aboutMainImageContainer {
    background-image: url("../img/about/about_main_phone.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: auto 140%;
    background-origin: content-box;
    padding-top: 4rem;
    padding-bottom: 3rem
  }
}

@media (min-width:42em) and (max-width:71.99em) {
  .aboutMainImageContainer {
    background-image: url("../img/about/about_main.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: auto 115%;
    background-origin: content-box;
    margin-bottom: -2rem
  }
}

@media (min-width:72em) and (max-width:112.49em) {
  .aboutMainImageContainer {
    background-image: url("../img/about/about_main.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: auto 110%;
    background-origin: content-box;
    margin-bottom: -2rem
  }
}

@media (min-width:112.50em) {
  .aboutMainImageContainer {
    background-image: url("../img/about/about_main.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: auto 100%;
    background-origin: content-box;
    margin-bottom: -1rem
  }
}

@media (min-width:42em) and (max-width:73.99em) {
  .aboutHelloImageContainer1 {
    background-image: url("../img/about/asteroids_1.png"), url("../img/about/asteroids_2.png");
    background-repeat: no-repeat, no-repeat;
    background-position: left 0.5em bottom 1em, right 1.5em bottom 3em;
    background-size: auto 50%, auto 40%;
    background-origin: content-box
  }
}

@media (min-width:74em) and (max-width:112.49em) {
  .aboutHelloImageContainer1 {
    background-image: url("../img/about/mjrhavoc_sm.png"), url("../img/about/engelbart_sm.png");
    background-repeat: no-repeat, no-repeat;
    background-position: left 0 bottom, right 1em bottom;
    background-size: auto 80%, auto 80%;
    background-origin: content-box
  }
}

@media (min-width:112.5em) {
  .aboutHelloImageContainer1 {
    background-image: url("../img/about/mjrhavoc_sm.png"), url("../img/about/engelbart_sm.png");
    background-repeat: no-repeat, no-repeat;
    background-position: left 1em bottom, right 3em bottom;
    background-size: auto 80%, auto 75%;
    background-origin: content-box
  }
}

.caption {
  font-family: IBM Plex Sans
}

.resume {
  font-family: IBM Plex Sans
}

@media (min-width:10em) and (max-width:41.99em) {
  .aboutHelloText {
    font-size: 2em;
    font-weight: 400;
    text-align: left;
    padding-bottom: 1rem
  }

  .aboutHelloSubtagText {
    position: relative;
    margin: auto;
    font-size: 1.1em;
    text-align: left;
    padding-bottom: 2rem
  }

  h5 {
    font-size: 1.2rem;
    font-weight: 500;
    padding-bottom: 0.5rem
  }

  .caption {
    position: relative;
    top: 0.3rem;
    font-size: 0.9em;
    line-height: 1.6
  }

  .resume {
    position: relative;
    top: 0.3rem;
    font-size: 0.9em;
    line-height: 1.6
  }

  .date {
    font-size: 0.9em
  }
}

@media (min-width:42em) and (max-width:65.99em) {
  .aboutHelloText {
    position: relative;
    font-size: 3.5em;
    font-weight: 400;
    top: -3rem
  }

  .aboutHelloSubtagText {
    position: relative;
    margin: auto;
    width: 70%;
    font-size: 1.2em;
    text-align: left;
    left: 1rem;
    top: -2rem;
    padding-bottom: 4rem
  }

  h5 {
    font-size: 1.3rem;
    font-weight: 500
  }

  .caption {
    position: relative;
    top: 0.5rem;
    font-size: 0.9em;
    line-height: 1.6
  }

  .resume {
    position: relative;
    top: 0.5rem;
    font-size: 0.9em;
    line-height: 1.6
  }

  .timelineBlock li {
    font-size: 0.65rem;
    line-height: 1.9
  }

  .date {
    font-size: 0.9em
  }
}

@media (min-width:66em) and (max-width:73.99em) {
  .aboutHelloText {
    position: relative;
    font-size: 3.5em;
    font-weight: 400;
    top: -3rem
  }

  .aboutHelloSubtagText {
    position: relative;
    margin: auto;
    width: 55%;
    font-size: 1.4em;
    text-align: left;
    left: 1rem;
    top: -2rem;
    padding-bottom: 4rem
  }

  h5 {
    font-size: 1.0rem;
    font-weight: 500
  }

  .caption {
    position: relative;
    top: 0.5rem;
    font-size: 0.8em;
    line-height: 1.6
  }

  .resume {
    position: relative;
    top: 0.5rem;
    font-size: 0.8em;
    line-height: 1.6
  }

  .timelineBlock li {
    font-size: 0.65rem;
    line-height: 1.9
  }

  .date {
    font-size: 0.9em
  }
}

@media (min-width:74em) and (max-width:87.49em) {
  .aboutHelloText {
    position: relative;
    font-size: 3.9em;
    font-weight: 400;
    top: -3rem
  }

  .aboutHelloSubtagText {
    position: relative;
    margin: auto;
    width: 60%;
    font-size: 1.6em;
    text-align: left;
    top: -2rem;
    left: 1rem;
    padding-bottom: 3rem
  }

  h5 {
    font-size: 0.95rem;
    font-weight: 500
  }

  .caption {
    position: relative;
    top: 0.5rem;
    font-size: 0.9em;
    line-height: 1.6
  }

  .resume {
    position: relative;
    top: 0.5rem;
    font-size: 0.9em;
    line-height: 1.6
  }

  .timelineBlock li {
    font-size: 0.65rem;
    line-height: 1.9
  }

  .date {
    font-size: 0.9em
  }
}

@media (min-width:87.5em) and (max-width:112.49em) {
  .aboutHelloText {
    position: relative;
    font-size: 4.8em;
    font-weight: 400;
    top: -4rem
  }

  .aboutHelloSubtagText {
    position: relative;
    margin: auto;
    width: 60%;
    font-size: 1.9em;
    text-align: left;
    left: 3rem;
    top: -3rem;
    padding-bottom: 3rem
  }

  h5 {
    font-size: 1.0rem;
    font-weight: 500
  }

  .caption {
    position: relative;
    top: 0.5rem;
    font-size: 1.0em;
    line-height: 1.7
  }

  .resume {
    position: relative;
    top: 0.5rem;
    font-size: 1.1em;
    line-height: 1.7
  }

  .timelineBlock li {
    font-size: 0.75rem;
    line-height: 1.9
  }

  .date {
    font-size: 1em
  }
}

@media (min-width:112.5em) and (max-width:137.49em) {
  .aboutHelloText {
    position: relative;
    font-size: 5.5em;
    font-weight: 400;
    top: -4rem
  }

  .aboutHelloSubtagText {
    position: relative;
    margin: auto;
    width: 50%;
    font-size: 2em;
    text-align: left;
    top: -3rem;
    padding-bottom: 4rem
  }

  h5 {
    font-size: 1.1rem;
    font-weight: 500
  }

  .caption {
    position: relative;
    top: 0.5rem;
    font-size: 1.1em;
    line-height: 1.7
  }

  .resume {
    position: relative;
    top: 0.5rem;
    font-size: 1.1em;
    line-height: 1.7
  }

  .timelineBlock li {
    font-size: 0.75rem;
    line-height: 1.9
  }

  .date {
    font-size: 1em
  }
}

@media (min-width:137.5em) {
  .aboutHelloText {
    position: relative;
    font-size: 5.7 em;
    font-weight: 400;
    top: -5rem
  }

  .aboutHelloSubtagText {
    position: relative;
    margin: auto;
    width: 60%;
    font-size: 2.9em;
    text-align: left;
    left: 1rem;
    top: -4rem;
    padding-bottom: 3rem
  }

  h5 {
    font-size: 1.1rem;
    font-weight: 500
  }

  .caption {
    position: relative;
    top: 0.5rem;
    font-size: 1.2em;
    line-height: 1.7
  }

  .resume {
    position: relative;
    top: 0.5rem;
    font-size: 1.2em;
    line-height: 1.7
  }

  .timelineBlock li {
    font-size: 0.75rem;
    line-height: 1.9
  }

  .date {
    font-size: 1em
  }
}

.date {
  font-family: IBM Plex Mono;
  font-weight: 500;
  color: #80a1b3;
  margin-top: -3px;
  margin-bottom: 5px
}

.jobtitle {
  color: #b0dcf5
}

.company {
  font-weight: 300
}

.location {
  font-weight: 300
}

.timelinewrapper {
  display: flex
}

.timelineBlock {
  border: 2px solid;
  border-color: #5a768a;
  background-color: #212d38;
  margin-left: 20px;
  width: 400px
}

.timelineBlock hr {
  background-color: #4b6272
}

.timelineBlock ul {
  padding-top: 0.5rem;
  padding-left: 2rem;
  padding-bottom: 0.5rem;
  color: #80a1b3
}

.timelineBlock li {
  font-family: IBM Plex Mono, monospace;
  font-weight: 300
}

.logoAdsk {
  height: 3rem;
  background-image: url("../img/about/logo_adsk.png");
  background-repeat: no-repeat, no-repeat;
  background-position: top center;
  background-size: auto 100%;
  background-origin: content-box;
  background-color: #1d2731
}

.logoRivermeadow {
  height: 3rem;
  background-image: url("../img/about/logo_rivermeadow.png");
  background-repeat: no-repeat, no-repeat;
  background-position: top center;
  background-size: auto 100%;
  background-origin: content-box;
  background-color: #1d2731
}

.logoApigee {
  height: 3rem;
  background-image: url("../img/about/logo_apigee.png");
  background-repeat: no-repeat, no-repeat;
  background-position: top center;
  background-size: auto 100%;
  background-origin: content-box;
  background-color: #1d2731
}

.logoSwivel {
  height: 3rem;
  background-image: url("../img/about/logo_swivel.png");
  background-repeat: no-repeat, no-repeat;
  background-position: top center;
  background-size: auto 100%;
  background-origin: content-box;
  background-color: #1d2731
}

.logoOdopod2 {
  height: 3rem;
  background-image: url("../img/about/logo_odopod_2.png");
  background-repeat: no-repeat, no-repeat;
  background-position: top center;
  background-size: auto 100%;
  background-origin: content-box;
  background-color: #1d2731
}

.logoOdopod1a {
  height: 3rem;
  background-image: url("../img/about/logo_odopod_1a.png");
  background-repeat: no-repeat, no-repeat;
  background-position: top center;
  background-size: auto 100%;
  background-origin: content-box;
  background-color: #1d2731
}

.logoOdopod1b {
  height: 3rem;
  background-image: url("../img/about/logo_odopod_1b.png");
  background-repeat: no-repeat, no-repeat;
  background-position: top center;
  background-size: auto 100%;
  background-origin: content-box;
  background-color: #1d2731
}

.logoNovoa {
  height: 3rem;
  background-image: url("../img/about/logo_novo_a.png");
  background-repeat: no-repeat, no-repeat;
  background-position: top center;
  background-size: auto 100%;
  background-origin: content-box;
  background-color: #1d2731
}

.logoNovob {
  height: 3rem;
  background-image: url("../img/about/logo_novo_b.png");
  background-repeat: no-repeat, no-repeat;
  background-position: top center;
  background-size: auto 100%;
  background-origin: content-box;
  background-color: #1d2731
}

@media (min-width:22em) and (max-width:43.99em) {
  .mainImageContainer {
    background-image: url("../img/contact/contact_main_phone.png");
    background-repeat: no-repeat, no-repeat;
    background-position: right bottom;
    background-size: auto 80%;
    background-origin: content-box;
    padding-right: 1.5rem
  }
}

@media (min-width:44em) {
  .mainImageContainer {
    background-image: url("../img/contact/contact_main_isolated.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center bottom;
    background-size: auto 90%;
    background-origin: content-box
  }
}

@media (min-width:22em) and (max-width:43.99em) {
  .thanksImageContainer {
    background-image: url("../img/contact/thanks.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center bottom;
    background-size: auto 80%;
    background-origin: content-box
  }
}

@media (min-width:44em) and (max-width:65.49em) {
  .thanksImageContainer {
    background-image: url("../img/contact/thanks.png"), url("../img/contact/contact_sorry_st_msg.png");
    background-repeat: no-repeat, no-repeat;
    background-position: right 25% bottom 1em, left 0.5em bottom 1em;
    background-size: auto 80%, auto 30%;
    background-origin: content-box
  }
}

@media (min-width:65.5em) and (max-width:87.49em) {
  .thanksImageContainer {
    background-image: url("../img/contact/thanks.png"), url("../img/contact/contact_sorry_st_msg.png");
    background-repeat: no-repeat, no-repeat;
    background-position: right 25% bottom 2em, left 1em bottom 1em;
    background-size: auto 80%, auto 30%;
    background-origin: content-box
  }
}

@media (min-width:88em) {
  .thanksImageContainer {
    background-image: url("../img/contact/thanks.png"), url("../img/contact/contact_sorry_st_msg.png");
    background-repeat: no-repeat, no-repeat;
    background-position: right 20% bottom 3em, left 1em bottom 1em;
    background-size: auto 80%, auto 26%;
    background-origin: content-box
  }
}

.formContainer {
  position: relative;
  max-width: 40em;
  min-width: 20em;
  margin: 0 auto;
  background-color: #13191f;
  padding: 2rem 2rem 1rem
}

@media (min-width:22em) and (max-width:43.99em) {
  .formContainer {
    margin-left: 0.75rem;
    margin-right: 1rem
  }

  .contactCaptionImageContainer {
    background-image: url("../img/contact/contact_sorry_mobile_msg.png");
    background-repeat: no-repeat;
    background-position: center bottom 1em;
    height: 150px;
    background-size: auto 60%;
    background-origin: content-box
  }
}

@media (min-width:44em) and (max-width:65.49em) {
  .formContainer {
    position: relative;
    width: 40%;
    max-width: 40em;
    min-width: 20em;
    margin: 0 auto;
    background-color: #13191f;
    padding: 2rem 2rem 1rem
  }

  .contactCaptionImageContainer {
    background-image: url("../img/contact/contact_sorry_msg.png");
    background-repeat: no-repeat;
    background-position: left 1em bottom 1em;
    background-size: auto 45%;
    background-origin: content-box
  }
}

@media (min-width:65.5em) and (max-width:87.49em) {
  .formContainer {
    position: relative;
    width: 40%;
    max-width: 40em;
    min-width: 20em;
    margin: 0 auto;
    background-color: #13191f;
    padding: 2rem 2rem 1rem
  }

  .contactCaptionImageContainer {
    background-image: url("../img/contact/contact_sorry_msg.png");
    background-repeat: no-repeat;
    background-position: left 1em bottom 1em;
    background-size: auto 47%;
    background-origin: content-box
  }
}

@media (min-width:88em) {
  .formContainer {
    position: relative;
    width: 40%;
    max-width: 40em;
    min-width: 20em;
    margin: 0 auto;
    background-color: #13191f;
    padding: 2rem 2rem 1rem
  }

  .contactCaptionImageContainer {
    background-image: url("../img/contact/contact_sorry_msg.png");
    background-repeat: no-repeat;
    background-position: left 2em bottom 1em;
    background-size: auto 45%;
    background-origin: content-box
  }
}

.wishful {
  font-size: 0.8rem;
  margin-bottom: 0.5rem
}

.thanks {
  position: relative;
  font-weight: 500;
  color: #87a9bd;
  font-size: 1.2em
}

@media (min-width:42em) {
  .contactMethodTitle {
    margin-bottom: 2rem
  }
}

.contactStep {
  position: relative;
  font-family: IBM Plex Sans;
  font-weight: 500;
  font-size: 0.9rem;
  color: #98bed4
}

.contactInstructions {
  font-weight: 300;
  font-size: 0.8rem;
  margin-top: 1.2rem;
  font-family: IBM Plex Sans
}

@media (min-width:19em) and (max-width:26.49em) {
  .contactHelloText {
    font-size: 2em;
    font-weight: 400;
    text-align: left
  }

  .contactHelloSubtagText {
    position: relative;
    margin: auto;
    font-size: 1.1em;
    text-align: left;
    left: 0;
    top: -1rem;
    padding-bottom: 2rem;
    padding-top: 2rem
  }

  .thanksHelloSubtagText {
    position: relative;
    margin: auto;
    font-size: 1.1em;
    text-align: left;
    left: 0;
    top: 0;
    padding-bottom: 2rem;
    padding-top: 2rem
  }

  .contactInstructions {
    font-weight: 300;
    font-size: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem
  }

  .wishful {
    font-size: 1rem;
    margin-bottom: 0.5rem
  }
}

@media (min-width:26.50em) and (max-width:43.99em) {
  .contactHelloText {
    font-weight: 400;
    text-align: left
  }

  .contactHelloSubtagText {
    position: relative;
    margin: auto;
    font-size: 1.1em;
    text-align: left;
    left: 0;
    top: -1rem;
    padding-bottom: 2rem;
    padding-top: 2rem
  }

  .thanksHelloSubtagText {
    position: relative;
    margin: auto;
    width: 70%;
    font-size: 1.2em;
    text-align: center;
    left: 0;
    top: 0;
    padding-bottom: 2rem;
    padding-top: 2rem
  }

  .contactInstructions {
    font-weight: 300;
    font-size: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem
  }

  .wishful {
    font-size: 1rem;
    margin-bottom: 0.5rem
  }
}

@media (min-width:44em) and (max-width:63.99em) {
  .contactHelloText {
    position: relative;
    font-size: 3.5em;
    font-weight: 400;
    top: -3rem
  }

  .contactHelloSubtagText {
    position: relative;
    margin: auto;
    width: 60%;
    font-size: 1.3em;
    text-align: left;
    top: -1rem;
    left: 1rem;
    padding-bottom: 2rem
  }

  .thanksHelloSubtagText {
    position: relative;
    margin: auto;
    width: 55%;
    font-size: 1.5em;
    text-align: center;
    top: -1rem;
    padding-bottom: 8rem
  }

  .debugSizeBG {
    background-color: olivedrab
  }

  .contactInstructions {
    font-size: 0.9rem;
    margin-top: 1.2rem
  }
}

@media (min-width:64em) and (max-width:87.49em) {
  .contactHelloText {
    position: relative;
    font-size: 4.5em;
    font-weight: 400;
    top: -3rem
  }

  .contactHelloSubtagText {
    position: relative;
    margin: auto;
    width: 60%;
    font-size: 2.0em;
    text-align: left;
    left: 1.5rem;
    top: -1rem;
    padding-bottom: 3rem
  }

  .thanksHelloSubtagText {
    position: relative;
    margin: auto;
    width: 47%;
    font-size: 2.0em;
    text-align: center;
    left: 0;
    top: -2rem;
    padding-bottom: 3rem
  }

  .debugSizeBG {
    background-color: darkgreen
  }

  .contactInstructions {
    font-size: 0.8rem;
    margin-top: 1.2rem
  }
}

@media (min-width:87.5em) and (max-width:112.49em) {
  .contactHelloText {
    position: relative;
    font-size: 4.8em;
    font-weight: 400;
    top: -4rem
  }

  .contactHelloSubtagText {
    position: relative;
    margin: auto;
    width: 55%;
    font-size: 2.3em;
    text-align: left;
    left: 2rem;
    top: -1rem;
    padding-bottom: 3rem
  }

  .thanksHelloSubtagText {
    position: relative;
    margin: auto;
    width: 45%;
    font-size: 2.7em;
    text-align: center;
    left: 0;
    top: -3rem;
    padding-bottom: 3rem
  }

  .debugSizeBG {
    background-color: darkred
  }

  .contactInstructions {
    font-size: 0.9rem;
    margin-top: 1.2rem
  }
}

@media (min-width:112.5em) and (max-width:137.49em) {
  .contactHelloText {
    position: relative;
    font-size: 5.5em;
    font-weight: 400;
    top: -4rem
  }

  .contactHelloSubtagText {
    position: relative;
    margin: auto;
    width: 53%;
    font-size: 2.9em;
    text-align: left;
    left: 3rem;
    top: -1rem;
    padding-bottom: 3rem
  }

  .thanksHelloSubtagText {
    position: relative;
    margin: auto;
    width: 45%;
    font-size: 3.1em;
    text-align: center;
    left: 0;
    top: -3rem;
    padding-bottom: 3rem
  }

  .debugSizeBG {
    background-color: darkslategrey
  }

  .contactInstructions {
    font-size: 0.9rem;
    margin-top: 1.2rem
  }
}

@media (min-width:137.5em) {
  .contactHelloText {
    position: relative;
    font-size: 5.7 em;
    font-weight: 400;
    top: -5rem
  }

  .contactHelloSubtagText {
    position: relative;
    margin: auto;
    width: 40%;
    font-size: 2.8em;
    text-align: left;
    left: 2rem;
    top: -1rem
  }

  .thanksHelloSubtagText {
    position: relative;
    margin: auto;
    width: 35%;
    font-size: 3.3em;
    text-align: left;
    left: 0;
    top: -5rem;
    padding-bottom: 2rem
  }

  .debugSizeBG {
    background-color: darkgoldenrod
  }

  .contactInstructions {
    font-size: 0.9rem;
    margin-top: 1.2rem
  }
}

@media (min-width:10em) and (max-width:43.99em) {
  .workMainImageContainer {
    background-image: url("../img/work/intro_work_phone.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: auto 100%;
    background-origin: content-box;
    padding-top: 4rem;
    padding-bottom: 3rem
  }
}

@media (min-width:44em) {
  .workMainImageContainer {
    background-image: url("../img/work/intro_work.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: auto 80%;
    background-origin: content-box;
    margin-bottom: -1rem
  }
}

.workIntroBlock {
  display: inline-block;
  position: relative;
  top: -1rem
}

.workIntroText {
  position: relative;
  font-size: 2.8em
}

@media (min-width:10em) and (max-width:43.99em) {
  .workHelloText {
    font-size: 2em;
    font-weight: 400;
    text-align: left
  }

  .workHelloSubtagText {
    position: relative;
    margin: auto;
    font-size: 1.2em;
    text-align: left;
    padding-bottom: 2rem
  }

  .workName {
    font-size: 1.2em;
    font-weight: 500
  }
}

@media (min-width:44em) and (max-width:73.99em) {
  .workIntroPos {
    position: relative;
    top: -1rem
  }

  .workHelloText {
    position: relative;
    font-size: 3.5em;
    font-weight: 400;
    top: -3rem
  }

  .workHelloSubtagText {
    position: relative;
    margin: auto;
    width: 82%;
    font-size: 1.8em;
    text-align: center;
    top: -4rem;
    padding-bottom: 2rem
  }

  .workName {
    font-size: 1.3em;
    font-weight: 500
  }
}

@media (min-width:74em) and (max-width:87.49em) {
  .workIntroPos {
    position: relative;
    top: -1rem
  }

  .workHelloText {
    position: relative;
    font-size: 4.5em;
    font-weight: 400;
    top: -3rem
  }

  .workHelloSubtagText {
    position: relative;
    margin: auto;
    width: 70%;
    font-size: 2.5em;
    text-align: center;
    top: -4rem;
    padding-bottom: 3rem
  }

  .workName {
    font-size: 1.4em;
    font-weight: 500
  }
}

@media (min-width:87.5em) and (max-width:112.49em) {
  .workIntroPos {
    position: relative;
    top: -1rem
  }

  .workHelloText {
    position: relative;
    font-size: 4.8em;
    font-weight: 400;
    top: -4rem
  }

  .workHelloSubtagText {
    position: relative;
    margin: auto;
    width: 70%;
    font-size: 2.6em;
    text-align: center;
    top: -4rem;
    padding-bottom: 3rem
  }

  .workName {
    font-size: 1.5em;
    font-weight: 500
  }
}

@media (min-width:112.5em) and (max-width:137.49em) {
  .workIntroPos {
    position: relative;
    top: -2rem
  }

  .workHelloText {
    position: relative;
    font-size: 5.5em;
    font-weight: 400;
    top: -4rem
  }

  .workHelloSubtagText {
    position: relative;
    margin: auto;
    width: 65%;
    font-size: 3.2em;
    text-align: center;
    top: -5rem;
    padding-bottom: 3rem
  }

  .workName {
    font-size: 1.6em;
    font-weight: 500
  }
}

@media (min-width:137.5em) {
  .workIntroPos {
    position: relative;
    top: -1rem
  }

  .workHelloText {
    position: relative;
    font-size: 5.7 em;
    font-weight: 400;
    top: -5rem
  }

  .workHelloSubtagText {
    position: relative;
    margin: auto;
    width: 57%;
    font-size: 3.2em;
    text-align: center;
    top: -4rem;
    padding-bottom: 2rem
  }

  .workName {
    font-size: 2em;
    font-weight: 500
  }

  .workDescription {
    font-size: 1.2em
  }
}

.overviewImg {
  max-width: 2000px
}

.arrow {
  display: inline-block;
  font-size: 18px;
  position: relative;
  bottom: 4px;
  left: 7px;
  border: 2px solid;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  line-height: 22px;
  text-align: center;
  font-weight: 500
}

.arrowSmall {
  display: inline-block;
  font-size: 12px;
  position: relative;
  bottom: 3px;
  left: 10px;
  border: 1px solid;
  border-radius: 10%;
  background-color: #313f4f;
  width: 16px;
  height: 16px;
  line-height: 14px;
  text-align: center;
  font-weight: 500
}

.arrowXtraSmall {
  display: inline-block;
  font-size: 11px;
  position: relative;
  bottom: 1px;
  left: 6px;
  border: 1px solid;
  border-radius: 15%;
  background-color: #313f4f;
  width: 14px;
  height: 14px;
  line-height: 12px;
  text-align: center;
  font-weight: 500
}

.arrowXtraSmallLeft {
  display: inline-block;
  font-size: 11px;
  position: relative;
  bottom: 1px;
  right: 10px;
  border: 1px solid;
  border-radius: 15%;
  background-color: #313f4f;
  width: 14px;
  height: 14px;
  line-height: 12px;
  text-align: center;
  font-weight: 500
}

.StripeElement,
form fieldset,
form input,
form label,
form optgroup,
form select,
form textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: IBM Plex Mono, monospace;
  font-weight: 300;
  font-size: 0.9rem;
  color: #a9ccdf;
  border: none;
  border-radius: 0;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0
}

form label,
form legend {
  font-family: IBM Plex Mono, monospace;
  font-weight: 300;
  font-size: 1rem;
  margin-bottom: 0.7rem;
  color: #657d8c
}

.StripeElement,
form input,
form select,
form textarea {
  -webkit-appearance: none;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: #a9ccdf;
  background-color: #35404f;
  padding: 0.75em 1rem;
  margin-bottom: 1.5rem
}

.StripeElement:focus,
form input:focus,
form select:focus,
form textarea:focus {
  -webkit-appearance: none;
  background-color: #4a5868;
  outline-style: solid;
  outline-width: thin;
  outline-color: #caedff;
  outline-offset: -1px
}

form [type="text"],
form [type="email"],
.StripeElement {
  width: 100%;
  -webkit-appearance: none
}

form [type="button"],
form [type="reset"] {
  width: auto;
  cursor: pointer;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  color: #ffffff
}

form [type="submit"] {
  width: auto;
  cursor: pointer;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  color: #ffffff;
  background-color: #286e94;
  border-radius: 4px
}

form [type="button"]:focus,
form [type="submit"]:focus,
form [type="reset"]:focus {
  outline: none;
  background-color: #034366
}

form [type="submit"]:hover {
  outline: none;
  background-color: #338fc2
}

form select {
  text-transform: none
}

input[type=text] {
  -webkit-appearance: none !important;
  color: #a9ccdf
}

input[type=email] {
  -webkit-appearance: none;
  color: #a9ccdf
}

form textarea {
  -webkit-appearance: none !important;
  color: #a9ccdf
}

@media (min-width:10em) and (max-width:43.99em) {
  .autodeskIntroImageContainer {
    background-image: url("../img/work/intro_autodesk.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: auto 80%;
    background-origin: content-box;
    padding-top: 4rem;
    padding-bottom: 3rem
  }

  .apigeeIntroImageContainer {
    background-image: url("../img/work/intro_apigee.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: auto 80%;
    background-origin: content-box;
    padding-top: 4rem;
    padding-bottom: 3rem
  }

  .swivelIntroImageContainer {
    background-image: url("../img/work/intro_swivel.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: auto 80%;
    background-origin: content-box;
    padding-top: 4rem;
    padding-bottom: 3rem
  }

  .nikecyclingIntroImageContainer {
    background-image: url("../img/work/intro_nikecycling.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: auto 80%;
    background-origin: content-box;
    padding-top: 4rem;
    padding-bottom: 3rem
  }

  .nikesoccerIntroImageContainer {
    background-image: url("../img/work/intro_nikesoccer.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: auto 80%;
    background-origin: content-box;
    padding-top: 4rem;
    padding-bottom: 3rem
  }

  .dschoolIntroImageContainer {
    background-image: url("../img/work/intro_dschool.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: auto 80%;
    background-origin: content-box;
    padding-top: 4rem;
    padding-bottom: 3rem
  }

  .flashcastIntroImageContainer {
    background-image: url("../img/work/intro_flashcast.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: auto 80%;
    background-origin: content-box;
    padding-top: 4rem;
    padding-bottom: 3rem
  }

  .beaIntroImageContainer {
    background-image: url("../img/work/intro_bea.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: auto 80%;
    background-origin: content-box;
    padding-top: 4rem;
    padding-bottom: 3rem
  }

  .behrIntroImageContainer {
    background-image: url("../img/work/intro_behr.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: auto 80%;
    background-origin: content-box;
    padding-top: 4rem;
    padding-bottom: 3rem
  }

  .siteplanningIntroImageContainer {
    background-image: url("../img/work/intro_siteplanning.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: auto 80%;
    background-origin: content-box;
    padding-top: 4rem;
    padding-bottom: 3rem
  }

  .illustrationIntroImageContainer {
    background-image: url("../img/work/intro_illustration.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: auto 80%;
    background-origin: content-box;
    padding-top: 4rem;
    padding-bottom: 3rem
  }
}

@media (min-width:44em) {
  .autodeskIntroImageContainer {
    background-image: url("../img/work/intro_autodesk.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: auto 70%;
    background-origin: content-box;
    margin-bottom: -1rem
  }

  .apigeeIntroImageContainer {
    background-image: url("../img/work/intro_apigee.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: auto 70%;
    background-origin: content-box;
    margin-bottom: -1rem
  }

  .swivelIntroImageContainer {
    background-image: url("../img/work/intro_swivel.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: auto 70%;
    background-origin: content-box;
    margin-bottom: -1rem
  }

  .nikecyclingIntroImageContainer {
    background-image: url("../img/work/intro_nikecycling.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: auto 70%;
    background-origin: content-box;
    margin-bottom: -1rem
  }

  .nikesoccerIntroImageContainer {
    background-image: url("../img/work/intro_nikesoccer.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: auto 70%;
    background-origin: content-box;
    margin-bottom: -1rem
  }

  .dschoolIntroImageContainer {
    background-image: url("../img/work/intro_dschool.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: auto 70%;
    background-origin: content-box;
    margin-bottom: -1rem
  }

  .flashcastIntroImageContainer {
    background-image: url("../img/work/intro_flashcast.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: auto 70%;
    background-origin: content-box;
    margin-bottom: -1rem
  }

  .beaIntroImageContainer {
    background-image: url("../img/work/intro_bea.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: auto 70%;
    background-origin: content-box;
    margin-bottom: -1rem
  }

  .behrIntroImageContainer {
    background-image: url("../img/work/intro_behr.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: auto 70%;
    background-origin: content-box;
    margin-bottom: -1rem
  }

  .siteplanningIntroImageContainer {
    background-image: url("../img/work/intro_siteplanning.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: auto 70%;
    background-origin: content-box;
    margin-bottom: -1rem
  }

  .illustrationIntroImageContainer {
    background-image: url("../img/work/intro_illustration.png");
    background-repeat: no-repeat, no-repeat;
    background-position: center;
    background-size: auto 70%;
    background-origin: content-box;
    margin-bottom: -1rem
  }
}

.takeawayItem {
  font-family: IBM Plex Sans
}

.screenCaption {
  position: relative;
  float: right;
  font-family: IBM Plex Sans;
  font-weight: 300
}

@media (min-width:10em) and (max-width:73.99em) {
  .screenCaption {
    float: left;
    left: 0.8rem
  }
}

.sectionName {
  position: relative;
  left: 0.8rem;
  top: -.8rem
}

@media (min-width:10em) and (max-width:41.99em) {
  .projectName {
    position: relative;
    margin: auto;
    font-size: 1.8em;
    font-weight: 400
  }

  .projectIntroText {
    position: relative;
    margin: auto;
    font-size: 1.1em;
    text-align: left;
    padding-bottom: 2rem;
    top: 1rem;
    width: 100%
  }

  .takeawaySummary {
    font-size: 1.3rem;
    line-height: 1.6
  }

  .takeawayItem {
    font-size: 1.1rem
  }

  .sectionName {
    position: relative;
    left: 0.8rem;
    top: -.8rem;
    padding-top: 1.5rem;
    padding-bottom: 0.5rem
  }

  .screenCaption {
    font-size: 0.9em;
    padding-bottom: 0.5rem
  }

  .nextPrev {
    font-size: 0.9em
  }

  .thanksMsg {
    font-size: 1.3em
  }
}

@media (min-width:42em) and (max-width:65.99em) {
  .projectName {
    position: relative;
    font-size: 3.5em;
    font-weight: 400;
    bottom: 2rem
  }

  .projectIntroText {
    position: relative;
    margin: auto;
    width: 82%;
    font-size: 1.1em;
    line-height: 1.8;
    text-align: left;
    top: -2rem;
    padding-bottom: 2rem
  }

  .sectionName {
    padding-bottom: 1rem;
    font-size: 2.2em
  }

  .screenCaption {
    font-size: 0.9em;
    line-height: 1.6em
  }

  .takeawaySummary {
    font-size: 1.3rem;
    line-height: 1.6
  }

  .takeawayItem {
    font-size: 1.0rem
  }
}

@media (min-width:66em) and (max-width:73.99em) {
  .projectName {
    position: relative;
    font-size: 4em;
    font-weight: 400;
    top: -1.25em
  }

  .projectIntroText {
    position: relative;
    margin: auto;
    width: 82%;
    font-size: 1.4em;
    text-align: left;
    top: -3rem;
    padding-bottom: 2rem
  }

  .screenCaption {
    font-size: 0.9em;
    line-height: 1.6em
  }

  .takeawaySummary {
    font-size: 1.6rem;
    line-height: 1.6
  }

  .takeawayItem {
    font-size: 1.2rem
  }
}

@media (min-width:74em) and (max-width:87.49em) {
  .projectName {
    position: relative;
    font-size: 5em;
    font-weight: 400;
    top: -3rem
  }

  .projectIntroText {
    position: relative;
    margin: auto;
    width: 72%;
    font-size: 1.5em;
    text-align: left;
    top: -3rem;
    padding-bottom: 3rem
  }

  .screenCaption {
    font-size: 0.9em;
    line-height: 1.6;
    width: 400px
  }

  .takeawaySummary {
    font-size: 1.3rem;
    line-height: 1.6
  }

  .takeawayItem {
    font-size: 1.0rem;
    margin-left: 1em
  }
}

@media (min-width:87.5em) and (max-width:112.49em) {
  .projectName {
    position: relative;
    font-size: 6em;
    font-weight: 400;
    bottom: 3rem;
    top: -5rem
  }

  .projectIntroText {
    position: relative;
    margin: auto;
    width: 65%;
    font-size: 1.8em;
    text-align: left;
    top: -4rem;
    padding-bottom: 3rem
  }

  .screenCaption {
    font-size: 1em;
    line-height: 1.6;
    width: 400px
  }

  .takeawaySummary {
    font-size: 1.6rem;
    line-height: 1.6
  }

  .takeawayItem {
    font-size: 1.2rem;
    margin-left: 1em
  }
}

@media (min-width:112.5em) and (max-width:137.49em) {
  .projectName {
    position: relative;
    font-size: 6em;
    font-weight: 400;
    bottom: 3rem;
    top: -5rem
  }

  .projectIntroText {
    position: relative;
    margin: auto;
    width: 60%;
    font-size: 2.0em;
    text-align: left;
    top: -4rem;
    padding-bottom: 3rem
  }

  .screenCaption {
    font-size: 1em;
    line-height: 1.6;
    width: 400px
  }

  .takeawaySummary {
    font-size: 1.6rem;
    line-height: 1.6
  }

  .takeawayItem {
    font-size: 1.1rem;
    margin-left: 1em
  }
}

@media (min-width:137.5em) {
  .projectName {
    position: relative;
    font-size: 6em;
    font-weight: 400;
    bottom: 3rem;
    top: -5rem
  }

  .projectIntroText {
    position: relative;
    margin: auto;
    width: 50%;
    font-size: 2.5em;
    text-align: left;
    top: -4rem;
    left: 2rem;
    padding-bottom: 3rem
  }

  .screenCaption {
    font-size: 1.1em;
    line-height: 1.6;
    width: 400px
  }

  .takeawaySummary {
    font-size: 1.6rem;
    line-height: 1.6
  }

  .takeawayItem {
    font-size: 1.0rem;
    margin-left: 1em
  }
}

.projectContainer {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 2000px
}

.takeawayList {
  max-width: 900px
}

.takeawayList ul {
  padding-bottom: 1rem
}

.takeawayList li {
  padding-left: 0.5rem;
  padding-bottom: 2rem
}

.takeawayItem {
  font-weight: 300
}