* {
  margin: 0;
  padding: 0; }

img {
  border: none;
  vertical-align: middle; }

html {
  box-sizing: border-box;
  background-color: #F5F5F5; }

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

body {
  font-family: 'Avenir Next', 'Helvetica Neue', Helvetica, arial, sans-serif;
  font-size: 17px;
  line-height: 1.5882352941;
  max-width: 1400px;
  margin: auto;
  -webkit-font-smoothing: antialiased;
  color: #353535;
  box-shadow: 0 0 20px #DDD;
  background: #FFF; }

h1 {
  font-size: 45px;
  line-height: 54px; }

h2 {
  font-size: 28px;
  line-height: 1.285714286; }
  @media (max-width: 768px) {
    h2 {
      font-size: 24px; } }

h3 {
  font-size: 17px;
  line-height: 27px; }

p + h3,
p + h4 {
  margin: 2em 0 1em; }

h4 {
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase; }
  h4 abbr {
    text-transform: none; }

ul, ol {
  list-style: square;
  padding: 1em 0 1em 1.5em; }
  ul ul, ul ol, ol ul, ol ol {
    font-size: 80%; }

.subheading {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 12px; }

p {
  margin: 12px 0; }

a {
  text-decoration: inherit;
  color: #4B7CFF; }

section {
  clear: both; }

.grey {
  background-color: #F2F1F3; }

.divider-top {
  border-top: 2px solid #F2F1F3; }

.divider-bottom {
  border-bottom: 2px solid #F2F1F3; }

html.noscroll,
html.noscroll body {
  height: 100%;
  overflow: hidden; }

#nav {
  position: relative;
  background-color: #33272C;
  transition: all 400ms ease; }
  #nav #logo img {
    transition: all 400ms ease; }
  #nav nav ul {
    list-style: none;
    padding: 0; }
  #nav nav a {
    color: #FFF;
    font-size: 16px;
    font-weight: 600;
    padding: 10px; }
    #nav nav a.active {
      text-decoration: underline; }
    #nav nav a:hover {
      color: #4B7CFF; }
  @media (min-width: 900px) {
    #nav {
      height: 110px;
      padding: 24px 10.5263157895%;
      display: flex;
      justify-content: space-between;
      align-items: flex-end; }
      #nav .hamburger {
        display: none; }
      #nav nav {
        position: absolute;
        right: 10.5263157895%;
        top: 66px;
        padding-left: calc(128px + 10.5263157895%); }
        #nav nav ul li {
          display: inline-block; } }
  @media (max-width: 899px) {
    #nav {
      padding: 8px 5.263157895%; }
      #nav #logo img {
        width: 68px; }
      #nav nav {
        transition: height 200ms ease-in;
        height: 0;
        overflow: hidden;
        position: fixed;
        z-index: 1;
        top: 50px;
        left: 0;
        right: 0;
        background: #33272C; }
        #nav nav ul {
          padding-top: 24px; }
        #nav nav a {
          font-size: 22px;
          line-height: 2;
          display: block;
          width: 200px;
          margin: 0 0 0 5.263157895%;
          white-space: nowrap; }
        #nav nav.open {
          height: calc(100vh - 20px); }
      #nav .hamburger {
        display: block;
        cursor: pointer;
        position: absolute;
        top: 2px;
        right: 5.263157895%;
        width: 48px;
        height: 48px;
        transition: all 0.25s; }
      #nav .hamburger__top-bun,
      #nav .hamburger__bottom-bun {
        content: '';
        display: block;
        position: absolute;
        left: 15px;
        width: 18px;
        height: 2px;
        background: #FFF;
        transform: rotate(0);
        transition: all 0.25s; }
      #nav .hamburger:hover [class*="-bun"] {
        background: #AAA; }
      #nav .hamburger__top-bun {
        top: 23px;
        transform: translateY(-3px); }
      #nav .hamburger__bottom-bun {
        bottom: 23px;
        transform: translateY(3px); }
      #nav .hamburger.open {
        transform: rotate(90deg); }
      #nav .hamburger.open .hamburger__top-bun {
        transform: rotate(45deg) translateY(0px); }
      #nav .hamburger.open .hamburger__bottom-bun {
        transform: rotate(-45deg) translateY(0px); } }

.homepage-showcase {
  display: grid;
  grid-template-columns: 41.6666666667% 16.6666666667% 41.6666666667%;
  grid-template-rows: auto; }
  .homepage-showcase div {
    padding: 72px 8.4210526316%;
    background-size: cover;
    background-position: 50% 50%; }
  .homepage-showcase h2 {
    padding-right: 52px; }
  .homepage-showcase .subheading {
    padding-right: 52px; }
  .homepage-showcase .image,
  .homepage-showcase .wide {
    padding-left: 17.4436090226%;
    padding-right: 17.4436090226%; }
  .homepage-showcase .image {
    color: #FFF; }
  .homepage-showcase .wide {
    grid-column-end: span 2; }
  .homepage-showcase .tall {
    grid-row-end: span 2; }
  .homepage-showcase .blue {
    background-color: #4B7CFF;
    color: #FFF; }
  .homepage-showcase .white {
    background-color: #FFF; }
  .homepage-showcase a {
    font-weight: bold;
    display: inline-block; }
  .homepage-showcase a.white,
  .homepage-showcase a.blue {
    padding: 18px; }

@media (max-width: 768px) {
  .homepage-showcase {
    display: block; }
    .homepage-showcase .image,
    .homepage-showcase .wide {
      padding-left: 8.721804511%;
      padding-right: 8.721804511%; } }

.two-column {
  padding: 95px 112px 85px;
  display: grid;
  grid-template-columns: 29% 73%;
  grid-template-rows: auto;
  align-items: center; }
  .two-column h2 {
    padding-right: 0; }
  .two-column img {
    height: auto;
    width: 100%; }
  .two-column .text {
    margin-left: 10%; }

.two-column.even {
  grid-template-columns: 49% 49%;
  grid-gap: 2%;
  align-items: start; }

@media (max-width: 768px) {
  .two-column {
    display: block;
    padding: 10%; }
    .two-column .text {
      margin: 24px 0 0; } }

.info-blocks div {
  float: left;
  width: 50%;
  padding: 56px 9.824561404%;
  background-color: #DDDDDD; }

.info-blocks div:nth-child(1) {
  background-color: #D1D1D1; }

.info-blocks div:nth-child(2) {
  background-color: #DDDDDD; }

.info-blocks div:nth-child(3) {
  background-color: #DDDDDD; }

.info-blocks div:nth-child(4) {
  background-color: #E7E7E7; }

.info-blocks div:nth-child(5) {
  background-color: #EBEBEB; }

.info-blocks div:nth-child(6) {
  background-color: #D1D1D1; }

@media (max-width: 768px) {
  .info-blocks div {
    width: auto; } }

section.image {
  margin-top: -60px;
  background-size: cover;
  background-position: 50% 50%;
  color: #FFF; }

.slogan {
  text-align: center;
  padding: 280px 72px; }

.big-labels {
  padding: 75px 0 120px 0; }
  .big-labels div + div {
    margin-top: 60px; }
  .big-labels div:after {
    content: "";
    display: table;
    clear: both; }
  .big-labels h2 {
    float: left;
    clear: both;
    width: 29.7368421053%;
    margin-left: 10.5263157895%;
    padding: 0;
    text-align: right; }
  .big-labels p, .big-labels ul, .big-labels ol {
    float: right;
    width: 40.2631578947%;
    margin: 0 16.2280701754% 0.5em 0; }

@media (max-width: 768px) {
  .big-labels div + div {
    margin-top: 21px; }
  .big-labels h2, .big-labels p, .big-labels ul, .big-labels ol {
    float: none;
    width: auto;
    padding: 0;
    margin-left: 10%;
    margin-right: 10%;
    text-align: left; } }

footer {
  clear: both;
  padding: 70px 10.5263157895%;
  background-color: #F2F1F3;
  color: #9394A1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #dark-grey;
  font-size: 16px;
  font-weight: 600; }
  footer small span {
    display: block; }
  footer li {
    display: inline; }
  footer a {
    display: inline-block;
    color: #000;
    opacity: 0.783; }
  footer ul {
    display: flex;
    padding: 12px 0; }
  footer .social-links {
    margin-left: 36px; }
    footer .social-links a {
      margin: 0 6px;
      width: 32px;
      height: 32px; }

@media (max-width: 768px) {
  footer {
    display: block;
    text-align: center; }
    footer small {
      display: block;
      margin: 16px 10%; }
    footer ul {
      justify-content: center; }
    footer .social-links {
      margin-left: 0; } }

section.integrations {
  margin: 94px 0 120px;
  overflow: hidden; }
  section.integrations .glyph {
    display: block;
    margin: 0 auto -35px;
    max-width: 275px; }
  section.integrations header {
    position: relative;
    margin-bottom: 47px;
    background: #4B7CFF;
    width: 50%;
    padding: 24px 2.653508772% 33px 10.614035088%;
    line-height: 1;
    color: white; }
    section.integrations header a {
      color: inherit;
      font-size: inherit; }
  section.integrations ul {
    clear: both;
    margin-left: -6px;
    margin-right: -6px;
    padding: 0 10.52632%;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, auto)); }
    section.integrations ul li {
      background-color: #F2F1F3;
      border: 6px solid #FFF;
      padding: 30px 30px 12px;
      transition: background 150ms ease-out;
      text-align: center;
      line-height: 1.333333333;
      font-size: 12px; }
      section.integrations ul li a {
        font-size: 12px;
        color: #33272C; }
        section.integrations ul li a img {
          margin-bottom: 16px;
          width: 100%;
          transform: scale(1);
          transition: transform 150ms ease-out; }
      section.integrations ul li:hover {
        background: #dedbe0; }
        section.integrations ul li:hover img {
          transform: scale(1.1); }
  @media (max-width: 768px) {
    section.integrations {
      margin-top: 0; }
      section.integrations header {
        width: auto;
        float: none !important; } }

.cool-header {
  text-align: center;
  padding: 90px 32px 70px;
  color: white;
  background: #33272C; }
  .cool-header .subheading {
    display: block;
    padding-top: 18px; }

#articles section {
  padding: 80px 0 18px; }
  #articles section:after {
    content: "";
    display: table;
    clear: both; }
  #articles section img {
    float: left;
    width: 58.7719%;
    margin-left: 10.5263%; }
  #articles section .description {
    float: right;
    margin-top: 42px;
    margin-right: 4.0351%;
    width: 21.7544%; }
  #articles section header {
    clear: both;
    float: left;
    position: relative;
    top: -60px;
    padding-top: 12px;
    padding-right: 12px;
    padding-bottom: 24px;
    padding-left: 38px;
    width: 50%;
    color: white;
    background-color: #4B7CFF; }
    #articles section header h2 {
      padding: 0; }
    #articles section header a {
      color: inherit;
      font-size: inherit; }

#articles section:nth-child(even) {
  background-color: #F2F1F3; }
  #articles section:nth-child(even) img {
    float: right;
    margin-left: 0;
    margin-right: 10.5263%; }
  #articles section:nth-child(even) .description {
    float: left;
    margin-right: 0;
    margin-left: 4.0351%; }
  #articles section:nth-child(even) header {
    float: right; }

@media (max-width: 768px) {
  #articles section,
  #articles section:nth-child(even) {
    position: relative;
    padding-top: 9em;
    padding-bottom: 4em; }
    #articles section img,
    #articles section .description,
    #articles section:nth-child(even) img,
    #articles section:nth-child(even) .description {
      display: block;
      float: none;
      margin-left: auto;
      margin-right: auto;
      width: 83.157894737%; }
    #articles section header,
    #articles section:nth-child(even) header {
      position: absolute;
      top: 0;
      float: none;
      width: 100%;
      padding: 12px 8.4210526316%; }
      #articles section header h2,
      #articles section:nth-child(even) header h2 {
        font-size: 20px; } }

#using-hap-intro {
  padding: 60px 10.5263157895%; }
  #using-hap-intro .hap-flavors {
    clear: both;
    margin-left: -12px;
    margin-right: -12px;
    padding: 20px 0px;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, auto));
    grid-template-columns: 1fr 1fr 1fr; }
    #using-hap-intro .hap-flavors li {
      background-color: #F2F1F3;
      border: 12px solid #FFF;
      padding: 48px 48px 42px;
      transition: background 150ms ease-out;
      text-align: left;
      line-height: 1.333333333;
      font-size: 12px; }
      #using-hap-intro .hap-flavors li a {
        font-size: 12px;
        color: #33272C; }
        #using-hap-intro .hap-flavors li a img {
          margin-bottom: 16px;
          width: 100%;
          transform: scale(1);
          transition: transform 150ms ease-out; }
      #using-hap-intro .hap-flavors li:hover {
        background: #dedbe0; }
        #using-hap-intro .hap-flavors li:hover img {
          transform: scale(1.1); }
    @media (max-width: 1024px) {
      #using-hap-intro .hap-flavors {
        grid-template-columns: 1fr; } }

.instructions {
  float: left;
  margin-right: 4.0351%;
  margin-left: 4.0351%;
  width: 40%;
  overflow: hidden; }
  @media (max-width: 768px) {
    .instructions {
      width: auto; } }

#using-hap-instructions section {
  padding: 80px 10.5263157895% 60px;
  background-color: #F2F1F3; }
  #using-hap-instructions section:after {
    content: "";
    display: table;
    clear: both; }
  #using-hap-instructions section img, #using-hap-instructions section video, #using-hap-instructions section .under-media {
    float: right;
    clear: right;
    width: 50%; }
    @media (max-width: 768px) {
      #using-hap-instructions section img, #using-hap-instructions section video, #using-hap-instructions section .under-media {
        float: none;
        width: 100%; } }
  #using-hap-instructions section pre {
    white-space: pre-wrap; }

#using-hap-instructions section:nth-child(odd) .instructions {
  margin-left: 0; }

#using-hap-instructions section:nth-child(even) {
  background-color: white; }
  #using-hap-instructions section:nth-child(even) img, #using-hap-instructions section:nth-child(even) video, #using-hap-instructions section:nth-child(even) .under-media {
    float: left;
    clear: left; }
  #using-hap-instructions section:nth-child(even) .instructions {
    float: right;
    margin-right: 0; }

#using-hap-instructions .video-section {
  display: flex;
  align-items: flex-start;
  justify-content: space-between; }
  #using-hap-instructions .video-section .media {
    flex: 0 0 55%; }
    #using-hap-instructions .video-section .media iframe {
      width: 100%; }
  #using-hap-instructions .video-section .instructions {
    flex: 0 0 35%; }
  @media (max-width: 768px) {
    #using-hap-instructions .video-section {
      flex-wrap: wrap; }
      #using-hap-instructions .video-section .media,
      #using-hap-instructions .video-section .instructions {
        flex-basis: 100%; } }

#using-hap-instructions .instructions-wrapper {
  display: flex; }
  #using-hap-instructions .instructions-wrapper .instructions {
    flex: 0 0 50%; }
  @media (max-width: 768px) {
    #using-hap-instructions .instructions-wrapper {
      flex-wrap: wrap; }
      #using-hap-instructions .instructions-wrapper .instructions {
        flex-basis: 100%;
        width: 100%; }
        #using-hap-instructions .instructions-wrapper .instructions .gist {
          width: 100%; } }

#creative-coding ul {
  clear: both;
  margin-left: -6px;
  margin-right: -6px;
  padding: 20px 0px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, auto)); }
  #creative-coding ul li {
    background-color: #F2F1F3;
    border: 6px solid #FFF;
    padding: 30px 30px 12px;
    transition: background 150ms ease-out;
    text-align: center;
    line-height: 1.333333333;
    font-size: 12px; }
    #creative-coding ul li a {
      font-size: 12px;
      color: #33272C; }
      #creative-coding ul li a img {
        margin-bottom: 16px;
        width: 100%;
        transform: scale(1);
        transition: transform 150ms ease-out; }
    #creative-coding ul li:hover {
      background: #dedbe0; }
      #creative-coding ul li:hover img {
        transform: scale(1.1); }

#playing-back {
  position: relative;
  padding-bottom: 0; }
  #playing-back h2, #playing-back p {
    margin-bottom: 0.5em; }
  #playing-back img {
    position: absolute;
    left: 17%;
    width: 20%;
    top: 32%;
    display: block; }
  @media (max-width: 768px) {
    #playing-back img {
      display: none; } }

.centered-block {
  padding: 60px 21.05263%; }
  @media (max-width: 768px) {
    .centered-block {
      padding-left: 8.4210526316%;
      padding-right: 8.4210526316%; } }

#codec-info ul {
  padding: 0;
  list-style: none;
  font-size: 0;
  display: flex;
  justify-content: space-between; }
  #codec-info ul li {
    width: 30%;
    font-size: 13px;
    line-height: 20px; }
    #codec-info ul li strong {
      display: block; }
    #codec-info ul li .benchmark-logo {
      margin-top: 12px;
      margin-bottom: 44px; }
    #codec-info ul li p {
      margin-top: 0; }

@media (max-width: 768px) {
  #codec-info ul {
    display: block; }
    #codec-info ul li {
      width: auto;
      margin: 0;
      padding-left: 0;
      padding-right: 0; } }

.cta-bar {
  padding: 32px;
  background: #4B7CFF;
  color: #FFF;
  text-align: center;
  font-weight: bold; }
  .cta-bar .subheading {
    margin-bottom: 15px; }
  .cta-bar a {
    color: inherit;
    font-size: 16px; }
    .cta-bar a img {
      margin-left: 15px; }
  @media (max-width: 768px) {
    .cta-bar {
      border-bottom: 2px solid #FFF; } }