
.primary-heading {
  font-weight: normal; }

.page-heading {
  font-size: 1.1rem;
  font-family: "Nexa";
  letter-spacing: 0.2rem;
  color: #343637;
  text-transform: uppercase;
  margin-bottom: 20px; }

.about-page-section-container {
  overflow: hidden;
  margin-top: -130px;
  background-color: #A2BDD5; }

.about-page-section-header,
.about-page-section.section-intro {
  background: #ddd url(/images/about/grid-bg.jpg); }

.about-page-section-header {
  padding-top: 150px;
  padding-bottom: 50px;
  margin-bottom: -1rem;
  text-align: center; }
  .about-page-section-header .heading {
    font-family: "Nexa";
    font-size: 4rem; }
  .about-page-section-header p {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 0 2rem; }

.yearofmoo-wording em {
  color: #c1953f;
  font-style: normal; }

.about-page-section {
  position: relative;
  clear: both;
  overflow: visible; }
  .about-page-section > .inner {
    margin: 0 10vw;
    position: relative;
    z-index: 100; }
  .about-page-section.section-intro:after, .about-page-section:before {
    background-position: 0 10vw;
    background-repeat: no-repeat;
    background-size: 100% auto;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2000px; }
  .about-page-section.section-intro {
    background-color: #cfe7f6; }
    .about-page-section.section-intro:before {
      background-image: url(/images/about/hills.png); }
    .about-page-section.section-intro:after {
      background-position: 0 18vw;
      background-image: url(/images/about/blue.png); }
  .about-page-section.section-purpose {
    padding-top: 8vw; }
    .about-page-section.section-purpose > .inner {
      min-height: 30vw; }
    .about-page-section.section-purpose:before {
      top: -10vw;
      background-image: url(/images/about/mid-blue.png); }
  .about-page-section.section-we-focus-on {
    padding: 15vw 0 5vw; }
  .about-page-section.section-matias {
    margin-top: 10vw;
    padding-top: 6vw;
    padding-bottom: 6vw; }
    .about-page-section.section-matias:before {
      background-position: 0 0;
      background-image: url(/images/about/hills2.png); }
    .about-page-section.section-matias .matias-quote {
      width: 85%; }
    .about-page-section.section-matias .quote-avatar.ogre {
      position: absolute;
      bottom: 10%;
      right: 2%;
      z-index: 100;
      width: 20%; }
  .about-page-section.section-animations {
    margin-top: -20vw; }
    .about-page-section.section-animations > .inner {
      min-height: 35vw;
      margin: 0; }
    .about-page-section.section-animations .quote-avatar, .about-page-section.section-animations .quote-content {
      position: absolute;
      width: 22%; }
    .about-page-section.section-animations .quote-avatar {
      left: 0;
      top: 0; }
    .about-page-section.section-animations .quote-content {
      left: 20%;
      top: 40%;
      text-align: center; }
    .about-page-section.section-animations:before {
      top: -30vw;
      background-image: url(/images/about/snow-drop.png); }
  .about-page-section.section-events > .inner {
    margin: 0;
    position: absolute;
    top: 0;
    left: 5%;
    width: 60%; }
  .about-page-section.section-events:before {
    height: 135vw;
    top: -10vw;
    background-image: url(/images/about/map-area.png);
    background-position: 0 0; }
  .about-page-section.section-we-live-here > .inner {
    margin: 0;
    min-height: 30vw; }
  .about-page-section.section-we-live-here img {
    position: absolute;
    bottom: 0;
    right: 5%;
    width: 40%; }
  .about-page-section.section-we-live-here .quote-content {
    position: absolute;
    bottom: 5%;
    right: 45%;
    width: 40%; }
  .about-page-section.section-map {
    padding-top: 5vw;
    padding-bottom: 10vw; }
    .about-page-section.section-map > .inner {
      margin: 0 5%; }
    .about-page-section.section-map img {
      width: 100%; }
  .about-page-section.section-breakdown:before {
    height: 102vw;
    background-image: url(/images/about/mountain-shelf.png);
    background-position: left 20%; }
  .about-page-section.section-creative-area:before {
    height: 80vw;
    margin-top: -5px;
    background-image: url(/images/about/bottom-shelf.png);
    background-position: 0 0; }
  .about-page-section.section-footer {
    padding-top: 6vw;
    padding-bottom: 150px;
    margin-bottom: -150px; }
    .about-page-section.section-footer:before {
      height: 0; }
    .about-page-section.section-footer .heading {
      font-size: 4rem; }
    .about-page-section.section-footer .blurb {
      font-family: "Nexa";
      font-size: 1.33333rem;
      width: 50%;
      margin: 0 auto 2rem;
      font-weight: bold; }
    .about-page-section.section-footer > .inner {
      margin: 0 10vw;
      text-align: center; }

.quote-avatar {
  text-align: center; }
  .quote-avatar img {
    margin: 0 auto;
    width: 100%; }

.section-breakdown .inner img {
  width: 100%; }

.section-breakdown .inner .quote-content {
  height: 300px;
  display: inline-block; }

.section-breakdown .inner .breakdown-heading-quote {
  background-image: url(/images/about/quotes/mq0.png); }

.section-breakdown .inner .breakdown-blogging-quote {
  background-image: url(/images/about/quotes/mq1.png); }

.section-breakdown .inner .breakdown-reading-quote {
  background-image: url(/images/about/quotes/mq2.png); }

.section-breakdown .inner .breakdown-programming-quote {
  background-image: url(/images/about/quotes/mq3.png); }

.quote-content {
  font-size: 1.4vw;
  letter-spacing: 1px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% auto; }
  .quote-content .heading {
    font-family: "proxima_novasemibold"; }
  .quote-content sub {
    display: block;
    font-family: "proxima_novasemibold";
    text-align: center; }

.breakdown-teaching-quote {
  background-image: url(/images/about/quotes/mq4.png); }

.creative-heading-quote {
  background-image: url(/images/about/quotes/aq0.png); }

.quote-creative-point-kombucha {
  background-image: url(/images/about/quotes/aq1.png); }

.creative-point-books-quote {
  background-image: url(/images/about/quotes/aq2.png); }

.lived-and-worked-quote {
  background-image: url(/images/about/quotes/aq3.png); }

.lived-usa-quote {
  background-image: url(/images/about/quotes/aq4.png); }

.lived-finland-quote {
  background-image: url(/images/about/quotes/aq5.png); }

.lived-canada-quote {
  background-image: url(/images/about/quotes/aq6.png); }

.intro-quote {
  background-image: url(/images/about/quotes/quote1.png);
  background-size: 90% auto;
  background-position: center top; }
  .intro-quote .inner {
    padding: 8% 35% 5% 15%; }
  .intro-quote h3 {
    font-weight: bold;
    font-size: 1.2rem; }

.purpose-quote {
  background-image: url(/images/about/quotes/quote2.png); }
  .purpose-quote .inner {
    padding: 10% 5% 10% 30%; }
    .purpose-quote .inner h3 {
      font-weight: bold;
      font-size: 1.5rem; }

.matias-quote {
  background: url(/images/about/quotes/matias-quote.png) no-repeat 0 0/100% auto; }
  .matias-quote .matias {
    position: absolute;
    width: 20%;
    left: 3%;
    top: 9vw; }
  .matias-quote .inner {
    min-height: 50vw;
    font-size: 1.8vw;
    padding: 10% 10% 5% 30%; }

.youre-leaving-quote .inner {
  font-size: 1.2rem; }

.miss-you-quote .inner {
  font-size: 1.2rem; }

.animations-quote {
  background-image: url(/images/about/quotes/fq2.png); }
  .animations-quote .inner {
    text-align: center;
    padding: 10% 5% 20% 10%; }
    .animations-quote .inner strong {
      font-size: 1.2rem;
      font-weight: bold;
      display: block;
      margin-bottom: 0.5rem; }

.speaking-events-quote {
  background-image: url(/images/about/quotes/manatee-bubble.png); }
  .speaking-events-quote .inner {
    padding: 11% 10% 5% 20%;
    min-height: 500px; }
    .speaking-events-quote .inner .heading {
      padding-bottom: 1rem; }
    .speaking-events-quote .inner .heading + p {
      margin-top: 0; }

.seahorse-quote {
  background-image: url(/images/about/quotes/seahorse-bubble.png); }
  .seahorse-quote .inner {
    text-align: center;
    font-size: 1.2rem;
    line-height: 2rem;
    padding: 17% 20% 30% 15%; }
    .seahorse-quote .inner .heading {
      font-size: 1.2rem;
      margin-bottom: 1rem; }

@media (max-width: 29.99999em) {
  .quote-content, .section-we-focus-on {
    padding: 1rem;
    margin-bottom: 10px; } }

@media (min-width: 30em) {
  .section-we-live-here > .inner {
    width: 50%;
    float: right;
    margin-top: -50px; }
  .section-creative-area {
    margin: 0 !important; }
    .section-creative-area .inner {
      min-height: 79vw; }
    .section-creative-area .creative-heading-quote {
      position: absolute;
      top: 0;
      left: 0;
      width: 42% !important; }
      .section-creative-area .creative-heading-quote .inner {
        padding: 5% 20% 0 !important; }
    .section-creative-area ol, .section-creative-area ul, .section-creative-area li {
      list-style: none; }
    .section-creative-area li, .section-creative-area .quote-content {
      position: absolute; }
    .section-creative-area .quote-content {
      height: 500px; }
    .section-creative-area .creative-point-kombucha {
      width: 100%;
      height: 40%;
      position: absolute;
      top: 0;
      left: 0; }
      .section-creative-area .creative-point-kombucha .quote-creative-point-kombucha {
        height: 500px;
        width: 25%;
        position: absolute;
        top: 30%;
        left: 35%; }
      .section-creative-area .creative-point-kombucha .kombucha {
        position: absolute;
        bottom: 15%;
        left: 0%;
        width: 28%; }
    .section-creative-area .creative-point-books {
      width: 100%;
      height: 62.5%;
      position: absolute;
      top: 0;
      right: -20%; }
      .section-creative-area .creative-point-books .quote-avatar {
        position: absolute;
        bottom: 0;
        right: 0; }
      .section-creative-area .creative-point-books .creative-point-books-quote {
        width: 35%;
        height: 500px;
        right: 20%;
        top: 15%; }
        .section-creative-area .creative-point-books .creative-point-books-quote .inner {
          padding: 10% 15% 0; }
      .section-creative-area .creative-point-books .kombucha {
        width: 28%; }
      .section-creative-area .creative-point-books .books {
        width: 55%;
        margin-left: 5%; }
    .section-creative-area .creative-point-countries {
      width: 100%;
      height: 62.5%;
      position: absolute;
      top: 70%;
      left: 0; }
      .section-creative-area .creative-point-countries li {
        height: 500px;
        width: 15%; }
      .section-creative-area .creative-point-countries .quote-content {
        position: absolute;
        top: 0;
        width: 18%; }
        .section-creative-area .creative-point-countries .quote-content .inner {
          padding: 15% 0%; }
      .section-creative-area .creative-point-countries .quote-avatar {
        position: absolute;
        top: 0;
        height: 500px;
        width: 20%; }
      .section-creative-area .creative-point-countries .lived-and-worked-quote {
        left: -10%;
        width: 25%; }
        .section-creative-area .creative-point-countries .lived-and-worked-quote .inner {
          padding: 15% 20% 0% 10%; }
      .section-creative-area .creative-point-countries .eagle {
        width: 15%;
        left: 15%; }
      .section-creative-area .creative-point-countries .lived-usa-quote {
        left: 30%; }
        .section-creative-area .creative-point-countries .lived-usa-quote .inner {
          padding: 15% 5% 0 15%; }
      .section-creative-area .creative-point-countries .lived-finland-quote {
        top: 20%;
        left: 40%; }
      .section-creative-area .creative-point-countries .whale {
        left: 55%; }
      .section-creative-area .creative-point-countries .lived-canada-quote {
        top: 20%;
        left: 75%; }
      .section-creative-area .creative-point-countries .moose {
        left: 90%; }
  .section-we-focus-on > .inner {
    position: relative;
    height: 50vw; }
    .section-we-focus-on > .inner .component-category-icon, .section-we-focus-on > .inner:before, .section-we-focus-on > .inner:after, .section-we-focus-on > .inner .we-focus-on {
      position: absolute;
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: 100% auto;
      content: ""; }
    .section-we-focus-on > .inner .component-category-icon span {
      font-size: 5vw; }
    .section-we-focus-on > .inner .component-category-icon h6 {
      font-size: 1.2vw; }
    .section-we-focus-on > .inner:before {
      background-image: url(/images/about/dolphin.png);
      width: 35%;
      height: 400px;
      top: 25%;
      left: -5%; }
    .section-we-focus-on > .inner .nessle {
      position: absolute;
      width: 40%;
      top: 20%;
      right: -5%; }
    .section-we-focus-on > .inner .we-focus-on {
      background-image: url(/images/about/quotes/qfocus.png);
      width: 30%;
      height: 200px; }
      .section-we-focus-on > .inner .we-focus-on .heading {
        font-family: "proxima_novasemibold"; }
      .section-we-focus-on > .inner .we-focus-on .inner {
        padding: 10% 30% 5% 0%;
        font-weight: bold;
        font-size: 1.2rem;
        text-align: center; }
    .section-we-focus-on > .inner .component-category-icon {
      display: block;
      padding: 1rem;
      z-index: 200;
      height: 200px;
      width: 15%; }
      .section-we-focus-on > .inner .component-category-icon.component-category-icon-angular {
        background-image: url(/images/about/quotes/q0.png);
        top: 10%;
        left: 20%; }
      .section-we-focus-on > .inner .component-category-icon.component-category-icon-testing {
        background-image: url(/images/about/quotes/q1.png);
        top: 2%;
        right: 30%; }
      .section-we-focus-on > .inner .component-category-icon.component-category-icon-design {
        background-image: url(/images/about/quotes/q2.png);
        top: 15%;
        right: 0%; }
      .section-we-focus-on > .inner .component-category-icon.component-category-icon-html5 {
        background-image: url(/images/about/quotes/q5.png);
        padding-top: 4%;
        top: 70%;
        left: 0%; }
      .section-we-focus-on > .inner .component-category-icon.component-category-icon-animation {
        background-image: url(/images/about/quotes/q4.png);
        padding-top: 10px;
        top: 65%;
        left: 30%; }
      .section-we-focus-on > .inner .component-category-icon.component-category-icon-css {
        padding-left: 15px;
        background-image: url(/images/about/quotes/q3.png);
        top: 50%;
        left: 50%; }
      .section-we-focus-on > .inner .component-category-icon.component-category-icon-javascript {
        padding: 15px 0 0 0;
        background-image: url(/images/about/quotes/q6.png);
        top: 70%;
        right: 20%; }
      .section-we-focus-on > .inner .component-category-icon.component-category-icon-ruby {
        padding: 10px 10px 0 10px;
        background-image: url(/images/about/quotes/q7.png);
        top: 80%;
        right: 0; }
  .section-breakdown .quote-content, .section-creative-area .quote-content {
    position: absolute;
    width: 18%;
    text-align: center; }
    .section-breakdown .quote-content strong, .section-creative-area .quote-content strong {
      font-size: 1.2rem;
      font-weight: bold;
      display: block; }
    .section-breakdown .quote-content .inner, .section-creative-area .quote-content .inner {
      padding: 10% 20%; }
  .section-breakdown {
    position: relative; }
    .section-breakdown .breakdown-heading-quote {
      left: -5%;
      top: -10%;
      width: 45%; }
      .section-breakdown .breakdown-heading-quote .inner {
        padding: 5% 10%; }
    .section-breakdown .breakdown-blogging-quote {
      left: -5%;
      top: 35%; }
    .section-breakdown .breakdown-reading-quote {
      left: 15%;
      top: 18%; }
    .section-breakdown .breakdown-programming-quote {
      left: 35%;
      top: 8%; }
    .section-breakdown .breakdown-teaching-quote {
      right: 0%;
      top: 25%; } }

@media (max-width: 61.99999em) {
  .about-page-section-header .heading {
    font-size: 2.85714rem; }
  .about-page-section.section-intro:after, .about-page-section:before {
    background-size: 61.99999em auto; } }

.map-frame {
  position: relative; }

.locations, .locations li {
  list-style: none; }

.locations li {
  width: 4vw;
  height: 4vw;
  transform: translateX(calc(-0.5vw - 3px)) translateY(-0.5vw);
  position: absolute;
  text-indent: -9999px;
  cursor: pointer;
  display: block;
  animation: oscillate 12s ease-out infinite;
  animation-fill-mode: both; }
  .locations li:before, .locations li:after {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    transition: 0.3s ease-out all;
    width: 4vw;
    height: 4vw; }
  .locations li:before {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50px;
    transform: scale(0);
    left: 0.5vw;
    top: 0.5vw;
    width: 3vw;
    height: 3vw; }
  .locations li:hover:before {
    transform: scale(1); }
  .locations li:after {
    background: url(/images/yom-icon.png) no-repeat 0 0/4vw 4vw;
    transform: scale(1); }
  .locations li:hover:after {
    transform: scale(1); }
  .locations li:hover {
    z-index: 100; }
  .locations li.location-sf {
    top: 37%;
    left: 11%;
    animation-delay: 1s; }
  .locations li.location-mtv {
    top: 37.5%;
    left: 11.5%;
    animation-delay: 1s; }
  .locations li.location-sj {
    top: 37.5%;
    left: 11.9%;
    animation-delay: 4.5s; }
  .locations li.location-vegas {
    top: 37%;
    left: 14%;
    animation-delay: 6s; }
  .locations li.location-utah {
    top: 35.5%;
    left: 16%;
    animation-delay: 8s; }
  .locations li.location-boston {
    top: 36%;
    left: 25.5%;
    animation-delay: 2.8s; }
  .locations li.location-toronto {
    top: 34%;
    left: 24.5%;
    animation-delay: 11s; }
  .locations li.location-st-louis {
    top: 36%;
    left: 20%;
    animation-delay: 9s; }
  .locations li.location-winnipeg {
    top: 31.7%;
    left: 19.8%;
    animation-delay: 12s; }
  .locations li.location-chicago {
    top: 35.5%;
    left: 22%;
    animation-delay: 10s; }
  .locations li.location-paris {
    top: 35%;
    left: 43.5%;
    animation-delay: 6s; }
  .locations li.location-london {
    top: 32.5%;
    left: 42%;
    animation-delay: 15s; }
  .locations li.location-aarhus {
    top: 31%;
    left: 44.8%;
    animation-delay: 2.5s; }
  .locations li.location-copenhagen {
    top: 31.5%;
    left: 45.5%;
    animation-delay: 9s; }
  .locations li.location-helsinki {
    top: 28%;
    left: 49%;
    animation-delay: 4s; }
  .locations li.location-amsterdam {
    top: 33%;
    left: 43.5%;
    animation-delay: 10s; }
  .locations li.location-tokyo {
    top: 38.5%;
    left: 83%;
    animation-delay: 10s; }

@keyframes oscillate {
  0% {
    transform: translateY(0px); }
  5% {
    transform: translateY(-5px); }
  10% {
    transform: translateY(0px); }
  50% {
    transform: translateY(0px); }
  55% {
    transform: translateY(5px); }
  60% {
    transform: translateY(0px); }
  100% {
    transform: translateY(0px); } }
