:root {
  /* Defaults */

  /* Typography settings */     /* Set here or use a font-stack from below */        /* Rem is based off this number */            /* Default line height */  /* Scale all headers at once - 1 is 100% */    /* Change line-height across all headings. */       /* Default text margin */

  /* Font stacks */

  /* Colors */          /* Allows all grays to have consistent tint */

  /* Buttons */

  /* Layout */

  /* Forms */ /* 100% to fill container */ /* switch to block to stack above form */

  /* select box */

  /* radio buttons and checkboxes */
}

/* ----------- */

/* Interaction */

/* ----------- */

:root {
  /* transition preset */

  /* hover underline */

  /* hover pop */
}

/* ---------- */

/* Typography */

/* ---------- */

@font-face {
  font-family: 'Avenir Variable';
  src: url("../fonts/avenir-variable2.woff2");
  font-style: normal
}

:root {

  /* text margin preset */

  /* paragraph preset */

  /* "small" text preset */

  /* heading base - used across all headings below */

  /* heading sizes, used in headings below */

  /* h1 preset */

  /* h2 preset */

  /* h3 preset */

  /* h4 preset */

  /* h5 preset */

  /* h6 preset */


  /* blockquote preset */

  /* Ellipsis - Truncate text to the width of its container.. */

  /* Custom color for user-selected text */


  /* Default styling for links */

  /* Reset default link styling */

  /* ul preset */

  /* ol preset */

  /* inline list */

  /* reset list */


  /* Additive */
}

/* ----------- */

/* Code Blocks */

/* ----------- */

:root {
  /* Inline code block preset */

  /* Preformatted text preset */


  /* Additive Apply: Code blocks */
}

/* --------- */

/* Utilities */

/* --------- */

:root {
  /* Debug - needs comment */
}

/* ------ */

/* Layout */

/* ------ */

:root {
  /* hr - horizontal rule preset */
}

.nav-piper {
  margin-bottom: 30px
}

.nav-piper li {
  display: inline-block
}

/* ------ */

/* Button */

/* ------ */

:root {
  /* base styling needed for --button */

  /* the button */

  /* the button ,larger */

  /* the button, smaller */

  /* outline button */

  /* disabled button */

  /* additive */
}

/* ------ */

/* Forms */

/* ------ */

:root {

  /* Todo: Select (Q+A), checkboxes, radio-buttons */

  /* select box */
  /* Must be applied to element wrapping <select> tag. */
  /* TODO: ie 10 + 11 support */


  /* Controls - pure css styling for Radio buttons and Checkboxes */


  /* Additive @apply: Forms */

  /* WARNING: Creates classes in your css and styles them - not to be used inside */
  /* an element. */

  /* Adds default form styling */
}

/* ----- */

/* Reset */

/* ----- */

:root {
  /* Mixin: Border Box HTML */
  /* Add border box to every element in your project. Used in your project root. */
  /* http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
}

:root {
  /* overwrite Axis settings */ /* switch to block to stack above form */

  /* brand colors */
  /*Officlal Blue from Marketing: #079FE3 */
  /*--dolby-blue:     #21b0ed */
  /* */

  /* ui */

  /*colors by use: */

  /* layout */

  /*fonts */

  /* mq's */
}

html {
  font-size: 16px
}

body {
  font-family: 'Avenir Variable', 'Avenir', 'Avenir Next', Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: rgb(77, 81, 86)
}

h1 {
  display: block;
  font-weight: normal;
  margin: 31.68px 0;
  margin: 1.98rem 0;
  font-size: 42.24px;
  font-size: 2.64rem;
  line-height: 1.3
}

h2 {
  display: block;
  font-weight: normal;
  margin: 23.76px 0;
  margin: 1.485rem 0;
  font-size: 31.68px;
  font-size: 1.98rem;
  line-height: 1.3
}

h3 {
  display: block;
  font-weight: normal;
  margin: 19.8px 0;
  margin: 1.2375rem 0;
  font-size: 26.4px;
  font-size: 1.65rem;
  line-height: 1.3
}

h4 {
  display: block;
  font-weight: normal;
  margin: 17.16px 0;
  margin: 1.0725rem 0;
  font-size: 22.88px;
  font-size: 1.43rem;
  line-height: 1.3
}

h5 {
  display: block;
  font-weight: normal;
  margin: 13.2px 0;
  margin: 0.825rem 0;
  font-size: 17.6px;
  font-size: 1.1rem;
  line-height: 1.3
}

h6 {
  display: block;
  font-weight: 900;
  margin: 11.88px 0;
  margin: 0.7425rem 0;
  font-size: 12px;
  line-height: 1.3;
  text-transform: uppercase
}

ul {

  @apply ul
}

li {

  @apply li
}

&::-moz-selection {
  background: rgba(0, 174, 239, 0.15)
}

&::selection {
  background: rgba(0, 174, 239, 0.15)
}

p {
  margin: 12px 0;
  margin: .75rem 0;
  letter-spacing: -0.02em;
  line-height: 1.35;
  font-size: 16px
}

a {
  color: #00AEEF;
  text-decoration: none;
  transition: all .3s cubic-bezier(0.250,  0.460, 0.450, 0.940);
  color: #3E44FE;
  font-weight: 500
}

blockquote {
  line-height: 1.3;
  border-left: 6.4px solid #00AEEF;
  border-left: .4rem solid #00AEEF;
  margin: 1em 0;
  padding-left: 1.5em
}

blockquote > p {
  font-weight: 300;
  font-size: 20.32px;
  font-size: 1.27rem;
  line-height: 127%;
  line-height: inherit;
  margin-top: 0
}

blockquote > cite,
    blockquote > footer,
    blockquote > figcaption {
  color: rgb(133, 140, 147)
}

blockquote > cite:before, blockquote > footer:before, blockquote > figcaption:before {
  content: '\2014'
}

code:not(.code-snippet) {
  background-color: rgb(244, 245, 245);
  border: 1px solid rgb(214, 217, 219);
  border-radius: 2px;
  color: #c25;
  font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
  font-size: 11.52px;
  font-size: .72rem;
  line-height: 11.52px;
  line-height: .72rem;
  padding: 1.28px 4.8px;
  padding: .08rem .3rem;
  white-space: normal
}

pre {
  background-color: rgb(244, 245, 245);
  border: 1px solid rgb(201, 204, 207);
  border-radius: 2px;
  display: block;
  font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
  font-size: 12px;
  font-size: .75rem;
  line-height: 18.4px;
  line-height: 1.15rem;
  margin: 0 0 16px;
  margin: 0 0 1rem;
  padding: 8px;
  padding: .5rem;
  white-space: pre-wrap
}

input[type='email'],
    input[type='number'],
    input[type='password'],
    input[type='search'],
    input[type='tel'],
    input[type='text'],
    input[type='url'],
    input[type='color'],
    input[type='date'],
    input[type='datetime'],
    input[type='datetime-local'],
    input[type='month'],
    input[type='time'],
    input[type='week'],
    textarea {
  transition: all .3s cubic-bezier(0.250,  0.460, 0.450, 0.940);
  font-size: 16px;
  font-weight: 300;
  border: 1px solid rgb(214, 216, 218);
  border-radius: 2px;
  height: auto;
  outline: none;
  padding: .45em;
  background: #fff;
  font-family: 'Avenir Variable', 'Avenir', 'Avenir Next', Helvetica, Arial, sans-serif;
  width: auto;
  max-width: 400px;
  max-width: 25rem;
  min-width: 300px;
  color: rgb(59, 63, 66)
}

input[type='email']:hover, input[type='number']:hover, input[type='password']:hover, input[type='search']:hover, input[type='tel']:hover, input[type='text']:hover, input[type='url']:hover, input[type='color']:hover, input[type='date']:hover, input[type='datetime']:hover, input[type='datetime-local']:hover, input[type='month']:hover, input[type='time']:hover, input[type='week']:hover, textarea:hover {
  border-color: rgb(171, 173, 174)
}

input[type='email']:focus, input[type='number']:focus, input[type='password']:focus, input[type='search']:focus, input[type='tel']:focus, input[type='text']:focus, input[type='url']:focus, input[type='color']:focus, input[type='date']:focus, input[type='datetime']:focus, input[type='datetime-local']:focus, input[type='month']:focus, input[type='time']:focus, input[type='week']:focus, textarea:focus {
  box-shadow: inset 0 0 0 1px #3E44FE;
  border: 1px solid #3E44FE;
  outline: none
}

input[type='email']:-webkit-autofill, input[type='number']:-webkit-autofill, input[type='password']:-webkit-autofill, input[type='search']:-webkit-autofill, input[type='tel']:-webkit-autofill, input[type='text']:-webkit-autofill, input[type='url']:-webkit-autofill, input[type='color']:-webkit-autofill, input[type='date']:-webkit-autofill, input[type='datetime']:-webkit-autofill, input[type='datetime-local']:-webkit-autofill, input[type='month']:-webkit-autofill, input[type='time']:-webkit-autofill, input[type='week']:-webkit-autofill, textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #767d84 inset;
  -webkit-text-fill-color: white
}

input[type='email']:-moz-autofill, input[type='number']:-moz-autofill, input[type='password']:-moz-autofill, input[type='search']:-moz-autofill, input[type='tel']:-moz-autofill, input[type='text']:-moz-autofill, input[type='url']:-moz-autofill, input[type='color']:-moz-autofill, input[type='date']:-moz-autofill, input[type='datetime']:-moz-autofill, input[type='datetime-local']:-moz-autofill, input[type='month']:-moz-autofill, input[type='time']:-moz-autofill, input[type='week']:-moz-autofill, textarea:-moz-autofill {
  -moz-box-shadow: 0 0 0px 1000px #767d84 inset;
  -moz-text-fill-color: white
}

input[type='email']:-o-autofill, input[type='number']:-o-autofill, input[type='password']:-o-autofill, input[type='search']:-o-autofill, input[type='tel']:-o-autofill, input[type='text']:-o-autofill, input[type='url']:-o-autofill, input[type='color']:-o-autofill, input[type='date']:-o-autofill, input[type='datetime']:-o-autofill, input[type='datetime-local']:-o-autofill, input[type='month']:-o-autofill, input[type='time']:-o-autofill, input[type='week']:-o-autofill, textarea:-o-autofill {
  -o-box-shadow: 0 0 0px 1000px #767d84 inset;
  -o-text-fill-color: white
}

input[type='email']:-khtml-autofill, input[type='number']:-khtml-autofill, input[type='password']:-khtml-autofill, input[type='search']:-khtml-autofill, input[type='tel']:-khtml-autofill, input[type='text']:-khtml-autofill, input[type='url']:-khtml-autofill, input[type='color']:-khtml-autofill, input[type='date']:-khtml-autofill, input[type='datetime']:-khtml-autofill, input[type='datetime-local']:-khtml-autofill, input[type='month']:-khtml-autofill, input[type='time']:-khtml-autofill, input[type='week']:-khtml-autofill, textarea:-khtml-autofill {
  -khtml-box-shadow: 0 0 0px 1000px #767d84 inset;
  -khtml-text-fill-color: white
}

input[type='reset'],
    input[type='button'],
    input[type='submit'] {
  cursor: pointer;
  font-weight: 700;
  font-size: 10px;
  line-height: 1em;
  letter-spacing: .1em;
  text-decoration: none;
  display: inline-block;
  border: 1px solid #3E44FE;
  border-radius: 0;
  background-color: #3E44FE;
  color: #fff;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding: 12.8px 28.8px;
  padding: .8rem 1.8rem;
  padding: 7.68px 10.24px;
  padding: 0.48rem 0.64rem;
  font-size: 12.8px;
  font-size: .8rem;
  cursor: pointer;
  font-weight: 700;
  font-size: 10px;
  line-height: 1em;
  letter-spacing: .1em;
  text-decoration: none;
  display: inline-block;
  border: 1px solid #3E44FE;
  border-radius: 0;
  background-color: #3E44FE;
  color: #fff;
  user-select: none;
  padding: 12.8px 28.8px;
  padding: .8rem 1.8rem;
  background-color: transparent;
  color: #3E44FE;
  border: 1px solid #3E44FE
}

input[type='reset']:hover, input[type='reset']:active, input[type='button']:hover, input[type='button']:active, input[type='submit']:hover, input[type='submit']:active {
  background-color: #fff;
  color: #3E44FE
}

input[type='reset']:hover, input[type='reset']:active, input[type='button']:hover, input[type='button']:active, input[type='submit']:hover, input[type='submit']:active {
  background-color: #fff;
  color: #3E44FE
}

input[type='reset']:hover, input[type='button']:hover, input[type='submit']:hover {
  background: #3E44FE;
  color: #fff
}

select {
  transition: all .3s cubic-bezier(0.250,  0.460, 0.450, 0.940);
  font-size: 16px;
  font-weight: 300;
  border: 1px solid rgb(214, 216, 218);
  border-radius: 2px;
  height: auto;
  outline: none;
  padding: .45em;
  background: #fff;
  font-family: 'Avenir Variable', 'Avenir', 'Avenir Next', Helvetica, Arial, sans-serif;
  width: auto;
  max-width: 400px;
  max-width: 25rem;
  min-width: 300px;
  color: rgb(59, 63, 66)
}

select:hover {
  border-color: rgb(171, 173, 174)
}

select:focus {
  box-shadow: inset 0 0 0 1px #3E44FE;
  border: 1px solid #3E44FE;
  outline: none
}

/* Radio buttons and Checkboxes */

input[type='radio'],
    input[type='checkbox'] {
  position: absolute;
  display: none
}

input[type='radio'][disabled],
    input[type='checkbox'][disabled] {
  cursor: not-allowed
}

input[type='radio'] + label,
    input[type='checkbox'] + label {
  position: relative;
  display: block;
  padding-left: 30px;
  cursor: pointer;
  vertical-align: middle;
  font-size: 16px;
  line-height: 1.3em;
  margin-bottom: 8px
}

input[type='radio'] + label:hover, input[type='checkbox'] + label:hover {}

input[type='radio'] + label:hover:before, input[type='checkbox'] + label:hover:before {
  border: 1px solid #00AEEF
}

input[type='radio'] + label:before, input[type='checkbox'] + label:before {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 20px;
  height: 20px;
  content: '';
  transition: border .2s ease;
  border: 1px solid rgb(214, 216, 218);
  background: transparent
}

input[type='radio'] + label:after, input[type='checkbox'] + label:after {
  position: absolute;
  content: '';
  transition: all .2s ease
}

input[type='radio'][disabled] + label,
    input[type='checkbox'][disabled] + label {
  cursor: not-allowed;
  color: rgb(214, 216, 218)
}

input[type='radio'][disabled] + label:hover,
      input[type='radio'][disabled] + label:before,
      input[type='radio'][disabled] + label:after,
      input[type='checkbox'][disabled] + label:hover,
      input[type='checkbox'][disabled] + label:before,
      input[type='checkbox'][disabled] + label:after {
  cursor: not-allowed
}

input[type='radio'][disabled] + label:before, input[type='checkbox'][disabled] + label:before {
  border-color: rgb(214, 216, 218)
}

input[type='radio']:checked + label,
    input[type='checkbox']:checked + label {}

input[type='radio']:checked + label:after, input[type='checkbox']:checked + label:after {
  -webkit-transform: scale(1);
          transform: scale(1)
}

input[type='radio'] + label {}

input[type='radio'] + label:before {
  border-radius: 50%
}

input[type='radio'] + label:after {
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00AEEF;
  -webkit-transform: scale(0);
          transform: scale(0)
}

input[type='radio']:checked + label {}

input[type='radio']:checked + label:before {
  border: 1px solid #00AEEF
}

input[type='radio']:checked[disabled] + label {}

input[type='radio']:checked[disabled] + label:before {
  border: 1px solid rgb(102, 206, 245)
}

input[type='radio']:checked[disabled] + label:after {
  background: rgb(102, 206, 245)
}

input[type='checkbox'] + label {}

input[type='checkbox'] + label:before {
  border-radius: 3px
}

input[type='checkbox'] + label:after {
  top: 2px;
  left: 7px;
  width: 6px;
  height: 12px;
  -webkit-transform: scale(0) rotate(45deg);
          transform: scale(0) rotate(45deg);
  border-width: 2px;
  border-style: solid;
  border-color: #fff;
  border-top: 0;
  border-left: 0
}

input[type='checkbox']:checked + label {}

input[type='checkbox']:checked + label:before {
  border: #00AEEF;
  background: #00AEEF
}

input[type='checkbox']:checked + label:after {
  -webkit-transform: scale(1) rotate(45deg);
          transform: scale(1) rotate(45deg)
}

input[type='checkbox']:checked[disabled] + label {}

input[type='checkbox']:checked[disabled] + label:before {
  border: rgb(102, 206, 245);
  background: rgb(102, 206, 245)
}

/*overwrites for color */

input[type='color'] {
  padding: 3.2px;
  padding: .2rem;
  width: 48px;
  width: 3rem;
  max-width: 48px;
  max-width: 3rem;
  min-width: 32px;
  min-width: 2rem;
  height: 32px;
  height: 2rem
}

label {
  display: block;
  text-align: left;
  min-width: 150px
}

fieldset {
  border: 1px solid rgb(214, 216, 218);
  border-radius: 2px
}

.select-box {
  position: relative;
  display: inline-block;
  width: auto;
  min-width: 300px;
  max-width: 400px;
  max-width: 25rem;
  border-radius: 2px
  /*max-width: var(--input-max-width) */
}

.select-box select {
  width: 100%;
  margin: 0;
  outline: none;
  padding: .6em .8em .5em .8em;
  font-size: 16px;
  /*anything except 16px will create page zoom on ios */
  border: none
}

.select-box select:focus, .select-box select:active {
  border: none;
  box-shadow: none
}

.select-box select option {
  padding: 4.8px 11.2px;
  padding: .3rem .7rem
}

.select-box:after {
  content: '';
  position: absolute;
  top: calc(50% - 0.2em);
  right: .75em;
  z-index: 2;
  display: none;
  pointer-events: none
}

@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) or ( ( -moz-appearance: none ) and ( mask-type: alpha ) ) {

  .select-box {
    border: 1px solid rgb(214, 216, 218)
  }

  .select-box:after {
    display: block;
    border-left: .4em solid transparent;
    border-right: .4em solid transparent;
    border-top: .4em solid rgb(187, 190, 194)
  }

  .select-box select {
    border-radius: 2px;
    border: 1px solid rgb(214, 216, 218);
    padding-right: 2em;
    background: none;
    border: 0px solid transparent;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none
  }

  .select-box:hover {
    border-color: rgb(171, 173, 174)
  }

  .select-box:focus {
    box-shadow: inset 0 0 0 1px #00AEEF;
    border: 1px solid #00AEEF;
    outline: none
  }
}

button,
    .btn {
  cursor: pointer;
  font-weight: 700;
  font-size: 10px;
  line-height: 1em;
  letter-spacing: .1em;
  text-decoration: none;
  display: inline-block;
  border: 1px solid #3E44FE;
  border-radius: 0;
  background-color: #3E44FE;
  color: #fff;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding: 12.8px 28.8px;
  padding: .8rem 1.8rem;
  padding: 7.68px 10.24px;
  padding: 0.48rem 0.64rem;
  font-size: 12.8px;
  font-size: .8rem
}

button:hover, button:active, .btn:hover, .btn:active {
  background-color: #fff;
  color: #3E44FE
}

button.large, .btn.large {
  cursor: pointer;
  font-weight: 700;
  font-size: 10px;
  line-height: 1em;
  letter-spacing: .1em;
  text-decoration: none;
  display: inline-block;
  border: 1px solid #3E44FE;
  border-radius: 0;
  background-color: #3E44FE;
  color: #fff;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding: 12.8px 28.8px;
  padding: .8rem 1.8rem;
  padding: 12.48px 16.64px;
  padding: 0.78rem 1.04rem;
  font-size: 20.8px;
  font-size: 1.3rem
}

button.large:hover, button.large:active, .btn.large:hover, .btn.large:active {
  background-color: #fff;
  color: #3E44FE
}

button.small, .btn.small {
  cursor: pointer;
  font-weight: 700;
  font-size: 10px;
  line-height: 1em;
  letter-spacing: .1em;
  text-decoration: none;
  display: inline-block;
  border: 1px solid #3E44FE;
  border-radius: 0;
  background-color: #3E44FE;
  color: #fff;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding: 12.8px 28.8px;
  padding: .8rem 1.8rem;
  padding: 6.72px 8.96px;
  padding: 0.42rem 0.56rem;
  font-size: 11.2px;
  font-size: .7rem
}

button.small:hover, button.small:active, .btn.small:hover, .btn.small:active {
  background-color: #fff;
  color: #3E44FE
}

button.outline, .btn.outline {
  cursor: pointer;
  font-weight: 700;
  font-size: 10px;
  line-height: 1em;
  letter-spacing: .1em;
  text-decoration: none;
  display: inline-block;
  border: 1px solid #3E44FE;
  border-radius: 0;
  background-color: #3E44FE;
  color: #fff;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding: 12.8px 28.8px;
  padding: .8rem 1.8rem;
  background-color: transparent;
  color: #3E44FE;
  border: 1px solid #3E44FE
}

button.outline:hover, button.outline:active, .btn.outline:hover, .btn.outline:active {
  background-color: #fff;
  color: #3E44FE
}

button.outline:hover, .btn.outline:hover {
  background: #3E44FE;
  color: #fff
}

button.disabled, .btn.disabled {
  cursor: pointer;
  font-weight: 700;
  font-size: 10px;
  line-height: 1em;
  letter-spacing: .1em;
  text-decoration: none;
  display: inline-block;
  border: 1px solid #3E44FE;
  border-radius: 0;
  background-color: #3E44FE;
  color: #fff;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding: 12.8px 28.8px;
  padding: .8rem 1.8rem;
  cursor: not-allowed;
  background-color: rgb(214, 216, 218);
  border: 1px solid rgb(214, 216, 218)
}

button.disabled:hover, button.disabled:active, .btn.disabled:hover, .btn.disabled:active {
  background-color: #fff;
  color: #3E44FE
}

button.disabled:hover, .btn.disabled:hover {
  background-color: rgb(214, 216, 218);
  border: 1px solid rgb(214, 216, 218)
}

hr {
  border: 0;
  border-bottom: 1px solid rgba(118, 125, 132, 0.3);
  height: 0;
  padding: 0;
  margin: 24px 0;
  margin: 1.5rem 0
}

html {
  box-sizing: border-box
}

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

/* Some default button styles - move to button */

.btn:not(.disabled), button:not(.disabled) {}

.btn:not(.disabled):active, button:not(.disabled):active {
  -webkit-transform: scale(.95);
          transform: scale(.95)
}

.btn-center {
  margin: 0 auto;
  display: table
}

body {
  padding: 0;
  margin: 0;
  background: #ebe9e9;
  -webkit-text-size-adjust: 100%
}

div.max-container {
  max-width: 1600px;
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden
}

div.main-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 56px;
  background: #000000
}

main {
  -webkit-animation-duration: .65s;
          animation-duration: .65s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
          animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-animation-name: fade-in;
          animation-name: fade-in;
  width: 100%;
  background: #fff
}

main:not(.no-nav) {}

@media (min-width: 768px) {

  main:not(.no-nav) {
    margin-left: auto;
    width: calc(100% - 192px);
    transition: width 350ms ease
  }
}

main.is-transitioned {
  width: 100%
}

div.page-content:after {
  content: '';
  display: block;
  clear: both
}

div.page-content {
  padding: 30px 10% 50px;
  min-height: calc(100vh - 235px)
}

div.page-content h1 {
  position: relative;
  font-weight: 500;
  font-size: 30px;
  margin-bottom: 30px;
  padding-bottom: 20px
}

div.page-content h1::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 32px;
  background: linear-gradient(94.28deg, #E84F7A -9.93%, #AA33FF 104.15%)
}

@media (max-width: 767px) {

  div.page-content h1 {
    font-size: 26px
  }
}

@media (max-width: 767px) {

  div.page-content {
    padding: 30px 5%
  }
}

.btn, button {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 12px;
  padding: .7em 1.6em;
  margin-bottom: 10px
}

.btn.big, button.big {
  padding: .85em 2.5em
}

.btn.signup, button.signup {
  padding: 10px 52px 10.5px
}

h1 {
  -webkit-animation-duration: .6s;
          animation-duration: .6s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
          animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-animation-name: fade-in;
          animation-name: fade-in;
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
  font-size: 48px;
  line-height: 1.1em
}

@media (max-width: 767px) {

  h1 {
    font-size: calc(32px + 16 * ((100vw - 320px) / 447))
  }

  @media screen and (min-width: 767px) {

    h1 {
      font-size: 48px
    }
  }

  @media screen and (max-width: 320px) {

    h1 {
      font-size: 32px
    }
  }
}

h1 ~ * {
  -webkit-animation-duration: .65s;
          animation-duration: .65s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
          animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-animation-name: fade-in;
          animation-name: fade-in;
  -webkit-animation-delay: .5s;
          animation-delay: .5s
}

h1 ~ img {
  -webkit-animation-delay: .7s;
          animation-delay: .7s;
  -webkit-animation-name: fade-in-up;
          animation-name: fade-in-up
}

ul {
  list-style: none;
  padding: 0;
  margin: 0
}

h1 {
  font-weight: 100
}

h2, h3 {
  font-weight: 200
}

h4, h5 {
  text-transform: uppercase
}

p {
  font-size: 18px;
  font-weight: 400
}

h1, h2, h3, h4, h5, h6 {
  color: #000;
  letter-spacing: -.01em
}

.col-2 {
  width: calc(99.9% * 1/2 - (30px - 30px * 1/2))
}

.col-2:nth-child(1n) {
  float: left;
  margin-right: 30px;
  clear: none
}

.col-2:last-child {
  margin-right: 0
}

.col-2:nth-child(2n) {
  margin-right: 0;
  float: right
}

.col-2:nth-child(2n + 1) {
  clear: both
}

@media (max-width: 1023px) {

  .col-2 {
    width: calc(99.9% * 1/1 - (30px - 30px * 1/1))
  }

  .col-2:nth-child(1n) {
    float: left;
    margin-right: 30px;
    clear: none
  }

  .col-2:last-child {
    margin-right: 0
  }

  .col-2:nth-child(1n) {
    margin-right: 0;
    float: right
  }

  .col-2:nth-child(1n + 1) {
    clear: both
  }
}

form:after {
  content: '';
  display: block;
  clear: both
}

p.callout {
  font-size: 12px;
  margin-top: -20px
}

.support-iframe {
  width: 100%;
  border: none;
  min-height: 650px
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 36px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-feature-settings: 'liga';
          font-feature-settings: 'liga'
}

#locked {
  position: relative
}

#locked:before {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-image: url('../img/lock.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 9999
}

#locked:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(67,67,67, .25);
  z-index: 9998
}

#locked:hover {
  box-shadow: none
}

@-webkit-keyframes fade-in-up {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 15%, 0);
            transform: translate3d(0, 15%, 0)
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none
  }
}

@keyframes fade-in-up {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 15%, 0);
            transform: translate3d(0, 15%, 0)
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none
  }
}

@-webkit-keyframes fade-in-up-small {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 5%, 0);
            transform: translate3d(0, 5%, 0)
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none
  }
}

@keyframes fade-in-up-small {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 5%, 0);
            transform: translate3d(0, 5%, 0)
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none
  }
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@keyframes fade-in {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg)
  }

  100% {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg)
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg)
  }

  100% {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg)
  }
}

header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  max-width: 1600px;
  position: fixed;
  top: 0;
  padding: 0;
  background: #000000;
  z-index: 10;
  box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, .08), 0 0.1875rem 0.375rem rgba(0, 0, 0, .115)
}

header.logged-in {}

header.logged-in div.user-select {
  display: block
}

header.logged-in a.log-in,
    header.logged-in a.sign-up {
  display: none
}

header.logged-in div.social li:last-child {
  border: none
}

header.logged-in div.social li:nth-child(2) {
  display: block
}

header.logged-in div.social li:nth-child(3) {
  display: block
}

@media (max-width: 767px) {

  header {
    padding-right: 5%
  }

  header.logged-in {}

  header.logged-in div.social {
    display: block;
    position: absolute;
    right: 71px;
    top: 0
  }

  header.logged-in div.social ul {
    display: none
  }
}

a.logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-preferred-size: 192px;
      flex-basis: 192px;
  text-decoration: none;
  text-transform: uppercase;
  height: 56px;
  transition: all .3s cubic-bezier(0.250,  0.460, 0.450, 0.940)
}

@media (max-width: 767px) {

  a.logo {
    -ms-flex-preferred-size: 177px;
        flex-basis: 177px
  }
}

@media (min-width: 768px) {

  a.logo {
    background: rgba(0, 0, 0, 0.02);
    border-right: 1px solid rgba(0, 0, 0, 0.04)
  }
}

a.logo.is-hidden {
  opacity: 0
}

a.logo:hover {
  background: rgba(0, 0, 0, 0.15)
}

a.logo svg {
  float: left;
  margin-left: 20px;
  margin-top: 14px;
  width: 35px;
  height: 35px;
  fill: white
}

a.logo img {
  width: 68%;
  margin-left: 4px;
  margin-top: 3px
}

@media (max-width: 767px) {

  a.logo img {
    width: 100%;
    margin-left: 10px
  }
}

div.search {
  transition: all .3s cubic-bezier(0.250,  0.460, 0.450, 0.940);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin: 0 9px 0 0;
  position: relative;
  z-index: 2
}

div.search.is-active {
  width: calc(100% - 37px)
}

div.search.is-active input {
  padding-left: 50px
}

@media (max-width: 767px) {

  div.search {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 50px;
    margin: 0
  }

  div.search.is-active {
    width: 90%;
    right: 5%
  }
}

div.search svg {
  position: absolute;
  top: 10px;
  left: 14px;
  pointer-events: none
}

@media (max-width: 767px) {

  div.search svg {
    left: 18px
  }
}

div.search input {
  width: 100%;
  padding: 8px 15px 8px 43px;
  background: rgba(255, 255, 255, .1);
  border: none;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 0;
  max-width: 688px;
  min-width: 0;
  transition: all .3s cubic-bezier(0.250,  0.460, 0.450, 0.940)
}

@media (max-width: 767px) {

  div.search input {
    max-width: none;
    min-width: 0;
    width: 100%;
    padding-left: 35px
  }
}

div.search input:hover {
  background: rgba(0, 0, 0, .15)
}

div.search input:hover::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.8)
}

div.search input:hover:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.8)
}

div.search input:hover::placeholder {
  color: rgba(255, 255, 255, 0.8)
}

div.search input:focus {
  outline: none;
  background: rgba(0, 0, 0, .4);
  color: #fff;
  border: 0
}

div.search input:focus::-webkit-input-placeholder {
  color: #fff
}

div.search input:focus:-ms-input-placeholder {
  color: #fff
}

div.search input:focus::placeholder {
  color: #fff
}

@media (max-width: 767px) {

  div.search input:focus {
    width: 100%
  }
}

div.search input::-webkit-input-placeholder {
  transition: all .3s cubic-bezier(0.250,  0.460, 0.450, 0.940);
  color: rgba(255, 255, 255, 0.5)
}

div.search input:-ms-input-placeholder {
  transition: all .3s cubic-bezier(0.250,  0.460, 0.450, 0.940);
  color: rgba(255, 255, 255, 0.5)
}

div.search input::placeholder {
  transition: all .3s cubic-bezier(0.250,  0.460, 0.450, 0.940);
  color: rgba(255, 255, 255, 0.5)
}

div.social {
  display: none
}

@media (min-width: 768px) {

  div.social {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
  }
}

div.social > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center
}

div.social ul {
  display: inline;
  list-style: none;
  padding: 0;
  margin: 0 10px 0 0
}

div.social li {
  float: left
}

div.social li:nth-child(2) {
  display: none
}

div.social li:nth-child(3) {
  display: none
}

div.social li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 5px 10px;
  transition: opacity 350ms
}

div.social li a:hover {
  opacity: .75
}

div.social li a svg {
  width: 18px;
  height: 18px;
  opacity: .8
}

div.social li a svg path {
  fill: white
}

a.log-in,
a.sign-up {
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600
}

a.log-in {
  padding: 10px 25px 10px 10px
}

/* to do: needs to inherit button styles */

a.btn.sign-up {
  background: #000000;
  padding: 7px 28px 6px;
  margin-right: 15px;
  transition: background 350ms;
  font-weight: 600;
  font-size: 10px;
  border: 0;
  margin-bottom: 0;
  z-index: 1;
  border: solid 1px #fff;
  transition: opacity 250ms, visibility 250ms, background 350ms
}

a.btn.sign-up.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s
}

@media (max-width: 767px) {

  a.btn.sign-up {
    position: absolute;
    top: 8px;
    right: 52px;
    padding: 11px 13px
  }
}

a.btn.sign-up:hover {
  border-color: #3E44FE;
  background: #3E44FE;
  color: #fff
}

div.user-select {
  position: relative;
  padding: 0 45px 0 20px;
  border-left: 1px solid rgba(0, 0, 0, .1);
  cursor: pointer;
  transition: background 350ms;
  display: none
}

div.user-select:hover,
  div.user-select.is-active {
  background: rgba(0, 0, 0, .15)
}

div.user-select.is-active {}

div.user-select.is-active::after {
  border-top: 6px solid white
}

div.user-select.is-active span {
  color: white
}

div.user-select.is-active figure {
  border-color: white
}

div.user-select.is-active div.user-btns {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
          transform: translateY(0)
}

div.user-select::after {
  content: '';
  position: absolute;
  top: calc(50% - 2px);
  right: 18px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(255,255,255, .52);
  transition: border 350ms
}

div.user-select figure {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin: 0 15px 0 0;
  border: 2px solid #5d7eb0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: border-color 350ms
}

div.user-select span {
  font-weight: 600;
  font-size: 14px;
  color: rgba(255,255,255, .9);
  transition: color 350ms
}

div.user-toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 56px
}

div.user-btns {
  display: block;
  position: absolute;
  width: 100%;
  bottom: -142px;
  left: 0;
  background: white;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  box-shadow: 0 30px 50px 20px rgba(0, 0, 0, .1);
  transition: opacity 350ms, visibility 350ms, -webkit-transform 500ms ease;
  transition: opacity 350ms, visibility 350ms, transform 500ms ease;
  transition: opacity 350ms, visibility 350ms, transform 500ms ease, -webkit-transform 500ms ease
}

div.user-btns a {
  position: relative;
  font-weight: 600;
  display: block;
  width: 100%;
  color: black;
  padding: 10px 0 10px 30px
}

div.user-btns a:hover {
  background: rgb(244, 244, 244)
}

div.user-btns a::before {
  content: '';
  position: absolute;
  top: calc(50% - 3px);
  left: 15px;
  width: 5px;
  height: 5px;
  background: #00AEEF;
  border-radius: 50%
}

div.user-btns a:first-child {
  border-bottom: 1px solid rgba(0,0,0, .15)
}

div.user-btns a:nth-child(2) {
  border-bottom: 1px solid rgba(0,0,0, .15)
}

nav.side-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 192px;
  height: 100vh;
  position: fixed;
  top: 0;
  padding-top: 72px;
  border-right: 1px solid rgba(118, 125, 132, 0.1);
  background: #000000;
  overflow-x: auto;
  pointer-events: auto;
  transition: -webkit-transform 350ms ease;
  transition: transform 350ms ease;
  transition: transform 350ms ease, -webkit-transform 350ms ease
}

nav.side-nav a {
  padding-top: 14px;
  padding-bottom: 15px
}

@media (max-width: 767px) {

  nav.side-nav {
    width: 100%;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%)
  }
}

nav.side-nav .high-level {
  padding: 0 20px
}

nav.side-nav.resolved {
  position: absolute;
  bottom: 0;
  height: auto
}

nav.side-nav.is-transitioned {
  -webkit-transform: translateX(-192px);
          transform: translateX(-192px)
}

@media (max-width: 767px) {

  nav.side-nav.is-transitioned {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%)
  }
}

nav.side-nav.is-transitioned-mobile {}

@media (max-width: 767px) {

  nav.side-nav.is-transitioned-mobile {
    -webkit-transform: translateX(0);
            transform: translateX(0)
  }
}

nav.side-nav ul {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  list-style: none
}

nav.side-nav li {
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  padding-left: 16px
}

nav.side-nav li ul {
  display: none;
  padding-top: 10px;
  padding-bottom: 40px
}

nav.side-nav li ul a {
  padding-bottom: 5px;
  padding-top: 5px
}

nav.side-nav li ul a span {
  font-size: 10px
}

nav.side-nav li ul.is-active {
  display: block
}

nav.side-nav li li {
  border: none
}

nav.side-nav li li span.bullet::after {
  top: -4px
}

nav.side-nav li li a {
  font-size: 12px
}

@media (max-width: 767px) {

  nav.side-nav li li a {
    font-size: 16px
  }
}

nav.side-nav li li ul {
  padding-bottom: 20px
}

nav.side-nav a {
  display: block;
  color: #fff;
  font-size: 12px;
  text-decoration: none
}

@media (max-width: 767px) {

  nav.side-nav a {
    font-size: 18px
  }
}

nav.side-nav a.locked {}

nav.side-nav a.locked span {
  position: relative
}

nav.side-nav a.locked span:after {
  content: '';
  position: absolute;
  right: -18px;
  bottom: 2px;
  width: 14px;
  height: 14px;
  background: url('../img/icons/lock.svg') no-repeat 0 0
}

nav.side-nav a.current {}

nav.side-nav a.current span {
  position: relative;
  border-bottom: solid 1px #fff
}

nav.side-nav a:hover:not(.is-active) {
  color: #3E44FE;
  cursor: pointer
}

nav.side-nav a.tips {
  padding: 20px 20px 30px;
  color: #00AEEF;
  text-decoration: underline;
  font-size: 14px;
  display: none
}

nav.side-nav a.tips:hover {
  color: rgb(0, 139, 191)
}

nav.side-nav a.tips span:before {
  content: '';
  width: 15px;
  height: 12px;
  margin-right: 8px;
  -webkit-transform: translateY(1px);
          transform: translateY(1px);
  display: inline-block;
  background: url('../img/icons/mail.svg') no-repeat 0 0
}

nav.side-nav span.bullet {
  position: absolute;
  top: 15px;
  left: -6px;
  width: 14px;
  height: 14px;
  pointer-events: none
}

nav.side-nav span.bullet::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #3E44FE;
  position: absolute;
  top: 5px;
  left: 6px
}

@media (max-width: 767px) {

  nav.side-nav span.bullet {
    top: 19px
  }
}

nav.side-nav li.toggle span.bullet {}

nav.side-nav li.toggle span.bullet.is-active {}

nav.side-nav li.toggle span.bullet.is-active::after {
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
  border-top: 5px solid #434343
}

nav.side-nav li:not(.toggle) span.bullet {}

nav.side-nav li:not(.toggle) span.bullet::after {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg)
}

nav.side-nav li ul li.toggle span.bullet {}

nav.side-nav li ul li.toggle span.bullet.is-active {
  -webkit-transform: rotate(0);
          transform: rotate(0)
}

div.clip-container {
  position: fixed;
  top: 0;
  width: 192px;
  height: 100vh;
  clip: rect(auto, auto, auto, auto);
  visibility: visible;
  opacity: 1;
  transition: opacity .3s linear
}

div.clip-container.resolved {
  position: absolute;
  height: 100%;
  bottom: 0;
  top: inherit
}

div.clip-container.is-transitioned {}

@media (min-width: 768px) {

  div.clip-container.is-transitioned {
    opacity: 0;
    visibility: hidden;
    transition: visibility 0s .3s, opacity .3s linear
  }
}

@media (max-width: 767px) {

  div.clip-container.is-transitioned {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%)
  }
}

@media (max-width: 767px) {

  div.clip-container {
    width: 100%;
    pointer-events: none
  }
}

div.nav-wrap {
  height: 100vh;
  position: relative;
  width: 192px;
  z-index: 3;
  transition: width 350ms ease
}

div.nav-wrap.resolved {
  height: auto
}

@media (min-width: 768px) {

  div.nav-wrap {}

  div.nav-wrap.is-transitioned {
    width: 0
  }

  div.nav-wrap.is-transitioned div.slide-toggle {
    -webkit-transform: translateX(15px);
            transform: translateX(15px)
  }

  div.nav-wrap.is-transitioned div.slide-toggle span {
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1)
  }
}

@media (max-width: 767px) {

  div.nav-wrap {
    width: 0;
    z-index: 3
  }
}

div.slide-toggle {
  position: absolute;
  top: 8px;
  left: 16px;
  width: 50px;
  height: 30px;
  -webkit-transform: translateX(219px);
          transform: translateX(219px);
  z-index: 10;
  cursor: pointer;
  transition: -webkit-transform 350ms ease;
  transition: transform 350ms ease;
  transition: transform 350ms ease, -webkit-transform 350ms ease
}

div.slide-toggle.resolved {
  display: none
}

@media (min-width: 768px) {

  div.slide-toggle {
    display: none
  }

  div.slide-toggle:not(.has-touch):hover span {
    background: #00AEEF;
    transition-duration: 200ms
  }

  div.slide-toggle:not(.has-touch):hover span::before,
      div.slide-toggle:not(.has-touch):hover span::after {
    width: 12px;
    left: -3px;
    background: #00AEEF;
    transition-duration: 200ms
  }

  div.slide-toggle:not(.has-touch):hover span::before {
    top: -3px;
    -webkit-transform: rotate(-40deg);
            transform: rotate(-40deg)
  }

  div.slide-toggle:not(.has-touch):hover span::after {
    top: 3px;
    -webkit-transform: rotate(40deg);
            transform: rotate(40deg)
  }
}

@media (max-width: 767px) {

  div.slide-toggle {
    position: fixed;
    width: 55px;
    height: 55px;
    left: auto;
    right: 5%;
    bottom: 7%;
    top: inherit;
    border-radius: 999px;
    background-color: #3E44FE;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    box-shadow: 0px 7px 28px -6px rgba(0, 0, 0, .75);
    border: none
  }

  div.slide-toggle.is-active {
    right: 5%;
    left: inherit
  }

  div.slide-toggle.is-active span {
    -webkit-transform: rotate(140deg) translateX(1px);
            transform: rotate(140deg) translateX(1px)
  }

  div.slide-toggle.is-active span::before {
    opacity: 0;
    transition-duration: 200ms
  }

  div.slide-toggle.is-active span::after {
    -webkit-transform: rotate(-97deg) translateX(7px);
            transform: rotate(-97deg) translateX(7px)
  }
}

div.slide-toggle span {
  top: 14px;
  left: calc(50% - 10px);
  pointer-events: none;
  transition: -webkit-transform 350ms ease;
  transition: transform 350ms ease;
  transition: transform 350ms ease, -webkit-transform 350ms ease;
  transition: all .3s cubic-bezier(0.250,  0.460, 0.450, 0.940)
}

@media (max-width: 767px) {

  div.slide-toggle span {
    top: 26px;
    left: calc(50% - 13px)
  }
}

div.slide-toggle span,
    div.slide-toggle span::before,
    div.slide-toggle span::after {
  position: absolute;
  width: 24px;
  height: 3px;
  background-color: #A6ABAF
}

@media (max-width: 767px) {

  div.slide-toggle span,
    div.slide-toggle span::before,
    div.slide-toggle span::after {
    width: 26px;
    background-color: white
  }
}

div.slide-toggle span::before,
    div.slide-toggle span::after {
  content: '';
  left: 0;
  transition: all .3s cubic-bezier(0.250,  0.460, 0.450, 0.940)
}

div.slide-toggle span::before {
  top: -6px
}

div.slide-toggle span::after {
  top: 6px
}

div.list-container {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-bottom: 80px
}

div.list-container.resolved {
  position: absolute;
  height: 60vh;
  bottom: 270px;
  left: 0;
  right: 0;
  top: auto
}

footer {
  background: black
}

footer a {
  color: rgba(255, 255, 255, .75);
  font-size: 12px;
  transition: all .2s ease-in
}

footer a:hover:not(.logo) {
  color: rgba(255, 255, 255, 1)
}

footer ul li:not(:last-of-type) {
  margin-bottom: 10px
}

footer .site-footer-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 34px
}

@media (max-width: 767px) {

  footer .site-footer-links {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap
  }
}

footer .site-footer {
  border-top: 2px solid rgba(255, 255, 255, .1);
  padding: 65px 4.4%;
  font-size: 15px
}

@media (max-width: 767px) {

  footer .site-footer {
    padding: 30px 5%;
    font-size: 12px
  }
}

footer .site-footer .logo {
  -ms-flex-preferred-size: inherit;
      flex-basis: inherit;
  height: auto
}

footer .site-footer .logo svg {
  width: 132px;
  height: auto;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0
}

@media (max-width: 767px) {

  footer .site-footer .logo {
    display: block
  }
}

footer .site-footer ul {
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: 96px;
  margin-left: 6rem
}

@media (max-width: 767px) {

  footer .site-footer ul {
    margin-bottom: 30px;
    padding-top: 20px;
    margin-left: 0
  }
}

footer .site-footer ul li:not(:last-of-type) {
  margin-bottom: 0;
  margin-right: 14px;
  border-right: 1px solid rgb(77, 81, 86)
}

footer .site-footer li {
  margin-right: 0;
  padding-right: 14px;
  list-style-type: none
}

footer .site-footer li(:not(:last-child)) {
  margin-right: 8px
}

footer .site-footer p {
  margin: 0;
  font-size: 11px
}

div.breadcrumbs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  background: #000;
  z-index: 2;
  border-top: solid 1px rgba(255, 255, 255, .25)
}

div.breadcrumbs ul {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 10px 5% 10px 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative
}

@media (max-width: 767px) {

  div.breadcrumbs ul {
    padding: 15px 5%;
    margin-left: 0
  }

  div.breadcrumbs ul:after {
    background: transparent;
    height: 0;
    width: 0
  }
}

div.breadcrumbs ul li {
  position: relative
  /* divider line */
  /* Hide all but previous on mobile */
}

div.breadcrumbs ul li:not(:last-child)::after {}

@media (min-width: 768px) {

  div.breadcrumbs ul li:not(:last-child)::after {
    content: '';
    width: 1px;
    height: 14px;
    position: absolute;
    top: 1px;
    right: 12px;
    background: rgb(159, 164, 169);
    -webkit-transform: rotate(25deg);
            transform: rotate(25deg)
  }
}

@media (max-width: 767px) {

  div.breadcrumbs ul li {}

  div.breadcrumbs ul li:not(:nth-last-of-type(2)) {
    display: none
  }

  div.breadcrumbs ul li:nth-last-of-type(2) {
    margin-left: 20px
  }

  div.breadcrumbs ul li:nth-last-of-type(2) span::after {
    content: '';
    position: absolute;
    display: block;
    top: 2px;
    left: -21px;
    width: 18px;
    height: 18px;
    fill: red;
    -webkit-transform: scaleX(-1) scale(.8);
            transform: scaleX(-1) scale(.8);
    background: url('../img/icons/arrow-gray-small.svg') no-repeat 0 0
  }
}

div.breadcrumbs ul.is-transitioned {
  padding: 16px 5% 14px 56px
}

div.breadcrumbs ul.is-transitioned:after {
  left: 40px
}

@media (max-width: 767px) {

  div.breadcrumbs ul.is-transitioned {
    padding: 15px 5%
  }
}

div.breadcrumbs ul a {
  padding: 0 25px 0px 0;
  color: rgb(159, 164, 169);
  font-size: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

div.breadcrumbs ul a span {
  font-size: 12px
}

div.breadcrumbs ul a span.icon {
  margin: -2px 7px 0 0
}

div.breadcrumbs ul a span.icon svg {
  width: 20px;
  height: 20px;
  fill: silver
}

div.breadcrumbs ul a span.icon svg,
          div.breadcrumbs ul a span.icon svg path {
  transition: all .3s cubic-bezier(0.250,  0.460, 0.450, 0.940);
  fill: silver
}

div.breadcrumbs ul a:hover {
  color: #3E44FE
}

div.breadcrumbs ul a:hover span.icon svg {
  fill: #3E44FE
}

div.breadcrumbs ul a:hover span.icon svg path {
  fill: #3E44FE
}

div.breadcrumbs ul a.active span {
  color: #fff;
  text-decoration: underline
}

div.breadcrumbs ul a.active span:hover {
  cursor: default
}

div.pagination {
  display: none
}

div.pagination a {
  position: relative;
  width: 60px;
  border-left: 1px solid rgba(0, 0, 0, .15);
  transition: background 350ms
  /* arrows */
  /* tooltip text */
}

div.pagination a.disabled {
  pointer-events: none
}

div.pagination a.disabled svg {
  fill: rgba(0, 0, 0, .15)
}

div.pagination a:hover:not(.disabled) {
  background: #f6f6f6
}

div.pagination a:first-child {}

div.pagination a:first-child p {
  right: -55px
}

div.pagination a:first-child svg {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1)
}

div.pagination a svg {
  position: absolute;
  top: calc(50% - 8px);
  left: calc(50% - 8px);
  width: 16px;
  height: 16px;
  fill: #00AEEF;
  transition: fill 350ms
}

div.pagination a p {
  position: absolute;
  right: 20px;
  bottom: -42px;
  font-size: 14px;
  color: #00AEEF;
  white-space: nowrap;
  pointer-events: none;
  font-weight: 400;
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  transition: opacity 350ms, -webkit-transform 350ms ease;
  transition: opacity 350ms, transform 350ms ease;
  transition: opacity 350ms, transform 350ms ease, -webkit-transform 350ms ease
}

@media (max-width: 767px) {

  div.pagination a p {
    display: none
  }
}

div.pagination a:hover:not(.disabled) p {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  transition-delay: 150ms
}

/* need to move some of this to be more global */

.page-content {}

.page-content ul {
  margin: 5.12px 15.04px;
  margin: 0.32rem 0.94rem;
  padding-left: 16px;
  padding-left: 1rem;
  margin: 20px 5px
}

.page-content ul li {
  list-style-type: disc;
  padding: 2px;
  padding: 0.125rem
}

.page-content ul li {
  margin-bottom: 10px
}

.page-content ul.nav-piper {
  padding-bottom: 30px;
  padding-left: 0;
  margin-left: 0
}

.page-content ul.nav-piper li {
  display: inline-block;
  border-right: solid 1px rgb(159, 164, 169);
  margin-right: 15px;
  padding-right: 20px
}

.page-content ul.nav-piper li a span {
  color: rgb(159, 164, 169);
  transition: all 350ms ease
}

.page-content ul.nav-piper li:last-child {
  border-right: none
}

.page-content ul.nav-piper li.active {}

.page-content ul.nav-piper li.active a span {
  color: #00AEEF
}

.page-content ul.nav-piper li:hover {
  cursor: pointer
}

.page-content ul.nav-piper li:hover a span {
  color: #00AEEF
}

.page-content h5 {
  margin-top: 40px
}

.page-content h6 {
  color: #3E44FE;
  margin: 30px 0 5px
}

.page-content a.h-u {
  border-bottom: 1px solid transparent;
  font-weight: 500
}

.page-content a.h-u:hover {
  border-bottom: 1px solid currentColor
}

.page-content p, .page-content ul, .page-content ol {
  font-size: 16px;
  font-weight: 400;
  color: #000000
}

.page-content p span, .page-content ul span, .page-content ol span {
  font-weight: 600
}

.page-content .single-p {
  margin-bottom: 75px
}

.page-content td {
  /*font-family: 'Gustan Light' */
}

.page-content table.logo-table {
  margin-bottom: 30px;
  max-width: 540px
}

.page-content table.logo-table tbody.half {}

.page-content table.logo-table tbody.half td {
  width: 50%
}

.page-content table.logo-table tbody.half td.link-icons {}

.page-content table.logo-table tbody.half td.link-icons a {
  margin-right: 10px
}

.page-content table.logo-table tbody.half td.link-icons a:last-child {
  margin-right: 0
}

.page-content table.logo-table tbody.half td.link-icons a .svg-icon {}

.page-content table.logo-table tbody.half td.link-icons a .svg-icon g {}

.page-content table.logo-table tbody.half td.link-icons a .svg-icon g polygon {
  transition: all 350ms ease
}

.page-content table.logo-table tbody.half td.link-icons a .svg-icon g path {
  transition: all 350ms ease
}

.page-content table.logo-table tbody.half td.link-icons a .svg-icon:hover {}

.page-content table.logo-table tbody.half td.link-icons a .svg-icon:hover g {}

.page-content table.logo-table tbody.half td.link-icons a .svg-icon:hover g polygon {
  stroke: #00AEEF
}

.page-content table.logo-table tbody.half td.link-icons a .svg-icon:hover g path {
  fill: #00AEEF
}

.page-content img.right-img {
  position: relative;
  top: -80px
}

@media (max-width: 767px) {

  .page-content img.right-img {
    display: none
  }
}

.page-content .ps-container {
  position: relative;
  margin-bottom: 16px
}

div.page-info {
  margin: 50px 0
}

div.copy-img-col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

div.copy-img-col p {
  -webkit-box-flex: 5;
      -ms-flex: 5;
          flex: 5;
  margin: 0;
  padding-right: 85px
}

div.copy-img-col div {
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2
}

div.copy-img-col img {
  width: 100%
}

figure.content-image {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 35px;
  height: 0;
  overflow: hidden;
  margin: 20px 0 0 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center
}

div.pre-wrapper {
  position: relative;
  margin: 25px;
  display: none
}

div.pre-wrapper.is-active {
  display: block
}

div.pre-container {
  position: relative
}

pre {
  background-color: #1c201f;
  border: 1px solid #1c201f;
  color: #fff;
  font-size: 15px;
  font-weight: normal;
  padding: 2%;
  white-space: pre;
  margin: 0;
  min-width: 1300px;
  width: 100%;
  max-height: auto;
  height: auto;
  left: auto
}

pre.is-active {
  max-height: none;
  min-width: 1300px;
  overflow: auto
}

@media (max-width: 767px) {

  pre {
    font-size: 12px;
    max-height: 350px;
    min-width: auto;
    overflow: hidden !important
  }
}

div.pre-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  visibility: visible
}

div.pre-overlay.is-active {
  visibility: hidden
}

@media (min-width: 768px) {

  div.pre-overlay {
    display: none
  }
}

div.pre-tap,
div.pre-close {
  position: absolute;
  border-radius: 5px;
  background: black
}

div.pre-tap svg, div.pre-close svg {
  display: block;
  fill: white
}

div.pre-tap {
  width: 100px;
  height: 100px;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  text-align: center
}

div.pre-tap svg {
  width: 40px;
  height: 40px;
  margin: 17px auto 7px;
  top: 20px
}

div.pre-tap span {
  font-family: 'Avenir Variable', 'Avenir', 'Avenir Next', Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: white
}

div.pre-close {
  width: 50px;
  height: 50px;
  top: 20px;
  right: 20px;
  visibility: hidden;
  cursor: pointer;
  z-index: 1
}

@media (min-width: 768px) {

  div.pre-close {
    display: none
  }
}

div.pre-close.is-active {
  visibility: visible
}

div.pre-close svg {
  width: 25px;
  height: 25px;
  margin: 12px auto 0
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 30px;
  max-width: 100%;
  width: 100%;
  border-collapse: separate;
  background: #FFFFFF;
  box-shadow: 0px 10px 40px rgba(0, 0, 0, .2);
  border-radius: 5px
}

table.question-table {
  margin-bottom: 50px
}

table.question-table tbody tr td:first-child {
  width: 30%
}

table.question-table tbody tr td:last-child {
  text-align: left
}

table td:not(:first-child) {
  text-align: center
}

table th,
table td {
  border-top: 1px solid #eee;
  line-height: 18px;
  padding: 14px;
  text-align: left;
  vertical-align: top;
  font-size: 11px;
  color: #8A8F99
}

table thead th {
  vertical-align: bottom;
  background: #fff;
  color: #000;
  font-weight: 600;
  font-size: 12px
}

table thead:first-child tr th,
table thead:first-child tr td {
  border-top: 0
}

table tbody + tbody {
  border-top: 2px solid #F2F4F8
}

table th + th {
  border-left: 1px solid #eee
}

table td + td,
table th + td,
table td + th {
  border-left: 1px solid #eee
}

table thead:first-child tr:first-child th,
table tbody:first-child tr:first-child th,
table tbody:first-child tr:first-child td {
  border-top: 0
}

table tbody tr:first-child td {
  border-top: 0
}

table tbody tr:nth-child(odd) td,
table tbody tr:nth-child(odd) th {
  background: #F2F4F8
}

table tbody td {
  vertical-align: middle
}

table tr th {
  text-align: center
}

tr.top-tr th {
  text-align: center;
  border-bottom: 1px solid #fff
}

table.table-2col {
  max-width: 500px;


  th, td {
    width: 50
  }
}

div.next-page a {
  display: block;
  position: relative;
  padding: 50px 10%;
  background: #ECECEC;
  z-index: 2
}

div.next-page a:hover {}

div.next-page a:hover span:nth-child(2):after {
  right: -34px
}

div.next-page a span {
  display: block;
  line-height: 1em
}

div.next-page a span:nth-child(1) {
  color: #434343;
  margin-bottom: 16px;
  font-size: 12px
}

div.next-page a span:nth-child(2) {
  color: #000;
  font-size: 24px;
  display: inline;
  margin: 0;
  font-weight: 200;
  line-height: 1.2em;
  position: relative
}

@media (max-width: 959px) {

  div.next-page a span:nth-child(2) {
    font-size: 1.43rem
  }
}

div.next-page a span:nth-child(2):after {
  transition: all .3s cubic-bezier(0.250,  0.460, 0.450, 0.940);
  transition-duration: .2s;
  content: '';
  position: absolute;
  display: block;
  top: 13px;
  right: -27px;
  width: 18px;
  height: 8px;
  background: url('../img/icons/arrow-red.svg') no-repeat 0 0
}

@media (max-width: 959px) {

  div.next-page a span:nth-child(2):after {
    top: 9px;
    right: -28px
  }
}

@media (max-width: 767px) {

  div.next-page a span:nth-child(2):after {
    position: relative;
    top: 7px;
    right: 0
  }
}

@media (max-width: 767px) {

  div.next-page a {
    padding: 40px 5%
  }
}

/* perfectScrollbar overrides */

div.platforms-wrap.ps-container > .ps-scrollbar-x-rail {
  opacity: 1;
  margin-left: 20px
}

div.platforms-wrap.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
  height: 8px
}

div.page-content div.platforms-wrap.ps-container {
  margin-bottom: 8px
}

div.plugins {
  /* margin: 50px 0 */
  border: 1px solid rgba(0,0,0, .15);
  border-radius: 5px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .075);
  overflow: hidden
}

@media (min-width: 768px) {

  div.plugins {
    max-width: 90%
  }
}

div.plugins div.file-copy {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0 25px
}

div.plugins div.file-copy span.file {
  margin: 0;
  padding-bottom: 3px
}

div.plugins div.file-copy span.version {
  font-weight: 200;
  font-size: 14px;
  text-transform: uppercase;
  color: rgb(159, 164, 169)
}

a.view-file {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 75px;
  overflow: hidden;
  transition: all .3s cubic-bezier(0.250,  0.460, 0.450, 0.940)
}

a.view-file:not(.plugin) {
  margin: 25px 0;
  border: 1px solid #eee;
  border-radius: 5px
}

a.view-file.plugin {}

a.view-file.plugin:not(:last-child) {
  border-bottom: 1px solid rgba(0,0,0, .15)
}

a.view-file svg polygon,
  a.view-file svg path {
  transition: fill 350ms, stroke 350ms
}

a.view-file div.file-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 75px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%
}

a.view-file span.file {
  font-size: 16px;
  margin: 0 25px;
  color: #8C9098
}

a.view-file span.btn {
  margin: 0 25px 0 auto;
  pointer-events: none;
  text-align: center;
  background-color: white;
  color: #3E44FE;
  padding: 11px 23px
}

a.view-file:hover {
  box-shadow: 0px 4px 24px rgba(0, 0, 0, .25)
}

a.view-file:hover svg {}

a.view-file:hover svg polygon {
  stroke: #3E44FE
}

a.view-file:hover svg path {
  fill: #3E44FE
}

@media (max-width: 767px) {

  a.view-file {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    height: inherit;
    padding: 20px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center
  }

  a.view-file div.file-icon {
    width: inherit
  }

  a.view-file span.file {
    width: 100%;
    margin: 10px 0 0;
    text-align: center
  }

  a.view-file span.btn {
    margin: 10px 0 0
  }
}

div.file {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 90px;
  overflow: hidden;
  transition: all .3s cubic-bezier(0.250,  0.460, 0.450, 0.940)
}

@media (max-width: 767px) {

  div.file {
    height: 130px;
    position: relative
  }
}

div.file:not(.plugin) {
  margin: 25px 0;
  border: 1px solid rgba(0,0,0, .15);
  border-radius: 5px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .075)
}

@media (min-width: 768px) {

  div.file:not(.plugin) {
    max-width: 90%
  }
}

div.file div.file-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 150px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%
}

div.file div.file-icon div.bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%
}

@media (max-width: 767px) {

  div.file div.file-icon {
    width: 50%
  }
}

div.file span.file {
  font-size: 16px;
  margin: 0 20px;
  color: #434343
}

@media (max-width: 767px) {

  div.file span.file {
    position: absolute;
    left: 50%;
    top: 25%
  }
}

div.file a.btn-wrap {
  margin: 0 0 0 5px;
  display: inline-block;
  transition: all 350ms ease
}

div.file a.btn-wrap:hover {}

div.file a.btn-wrap:hover span {
  background-color: #0b7aaa;
  color: #ffffff;
  transition: all 350ms ease;
  border-color: #0b7aaa
}

div.file span.btn {
  pointer-events: none;
  text-align: center;
  margin-bottom: 0
}

div.file div.btn-container {
  margin: 0 20px 0 auto
}

@media (max-width: 767px) {

  div.file div.btn-container {
    position: absolute;
    width: 50%;
    left: 50%;
    padding-left: 16px;
    bottom: 25%
  }
}

div.file:hover {}

div.file:hover svg {}

div.file:hover svg polygon {
  stroke: #00AEEF
}

div.file:hover svg path {
  fill: #00AEEF
}

figure.table-img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
  margin: 0
}

@media (max-width: 767px) {

  figure.table-img {
    background-size: contain
  }
}

/* Sample Sound Library page */

div.page-info.sample-lib {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 50px
}

div.page-info.sample-lib a.view-file {
  height: 85px;
  margin-top: 0;
  margin-bottom: 16px
}

@media(min-width: 1024px) {

  div.page-info.sample-lib a.view-file {
    width: 48%
  }

  div.page-info.sample-lib a.view-file:nth-child(odd) {
    margin-right: 2%
  }
}

@media(max-width: 1023px) {

  div.page-info.sample-lib a.view-file {
    width: 100%;
    max-width: none
  }
}

div.page-info.sample-lib a.view-file svg {
  width: 40px;
  height: 40px
}

@media(max-width: 767px) {

  div.page-info.sample-lib a.view-file {
    height: auto;
    height: initial
  }

  div.page-info.sample-lib a.view-file div.file-icon {
    height: auto;
    height: initial
  }
}

#sign-up {
  min-height: 80vh
}

div.modal-wrap {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, .75);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 350ms, visibility 350ms
}

div.modal-wrap.is-active.locked,
  div.modal-wrap.is-active.newsletter,
  div.modal-wrap.is-active.password-modal,
  div.modal-wrap.is-active.email-modal {
  opacity: 1;
  visibility: visible
}

div.modal-wrap.is-active.locked div.modal, div.modal-wrap.is-active.newsletter div.modal, div.modal-wrap.is-active.password-modal div.modal, div.modal-wrap.is-active.email-modal div.modal {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
          transform: translateY(0)
}

div.modal-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 1600px;
  margin: 0 auto;
  padding: 75px 5%;
  min-height: 675px
}

@media(max-width: 959px) {

  div.modal-container {
    padding: 50px 5%;
    display: block;
    height: inherit
  }
}

div.modal-container h1 {
  margin-top: 0;
  font-size: 42px;
  text-align: center;
  color: white
}

div.modal-container form.form-col div {
  margin-bottom: 20px
}

div.modal-container.cover {
  /*max-height: 800px */
  /* background-color: rgba(#000, .8) */
  background-color: #ffffff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat
}

div.modal-container.cover {}

div.modal-container.cover h1 {
  -webkit-animation-name: fade-in-up;
          animation-name: fade-in-up;
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
  color: #434343;
  font-size: 32px
}

div.modal-container.cover div.modal {
  -webkit-animation-name: fade-in-up-small;
          animation-name: fade-in-up-small;
  -webkit-animation-delay: .5s;
          animation-delay: .5s
}

div.modal-container.cover a.forgot-pw {
  -webkit-animation-name: fade-in-up;
          animation-name: fade-in-up;
  -webkit-animation-delay: .75s;
          animation-delay: .75s
}

div.modal-container.cover p.required {
  -webkit-animation-name: fade-in-up;
          animation-name: fade-in-up;
  -webkit-animation-delay: .75s;
          animation-delay: .75s
}

div.modal-container.cover h1,
  div.modal-container.cover a.forgot-pw,
  div.modal-container.cover p.required,
  div.modal-container.cover div.modal {
  -webkit-animation-duration: .7s;
          animation-duration: .7s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
          animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

div.agreement-wrap {
  position: relative;
  display: block;
  width: 100%
}

div.modal {
  box-shadow: 0 15px 60px 0 rgba(0, 0, 0, .2);
  position: relative
}

div.modal::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 12px;
  background: linear-gradient(106.85deg, #E84F7A -9.93%, #AA33FF 104.15%)
}

div.modal:not(.small) {
  max-width: 605px;
  margin: 0 auto
}

div.modal.agreement {
  max-width: 900px;
  margin: 0 auto
}

div.modal.agreement article.modal-copy {}

div.modal.agreement article.modal-copy p.center {
  text-align: center
}

div.modal.agreement div.modal-cta {}

div.modal.agreement div.modal-cta form {}

div.modal.agreement div.modal-cta form div.checkbox {
  width: 100%;
  padding: 0 19% 10px;
  margin: 0 0 20px
}

div.modal.agreement div.modal-cta form div.checkbox input {
  position: relative;
  margin: 0;
  display: block;
  margin-top: 7px
}

div.modal.agreement div.modal-cta form div.checkbox p {
  padding-bottom: 0
}

div.modal.small {
  position: relative;
  max-width: 420px;
  margin: 0 auto
}

div.modal.locked {
  max-width: 530px;
  margin: 0 auto
}

div.modal.locked article.modal-copy {
  padding: 30px 65px 25px
}

div.modal.locked div.modal-cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 18px 65px 50px
}

div.modal.locked div.modal-top {
  padding: 60px 65px 0
}

div.modal .btn {
  font-weight: 500;
  font-size: 10px;
  padding: 15px 43px
}

div.modal .btn:first-child {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1
}

div.modal .btn:nth-child(2) {
  background-color: #fff;
  color: #3E44FE;
  border: solid 1px #3E44FE
}

div.modal .btn:nth-child(2):hover {
  background-color: #3E44FE;
  color: #fff
}

div.modal .btn.close-modal {
  display: none
}

div.modal.newsletter, div.modal.password-modal, div.modal.email-modal {}

div.modal.newsletter article.modal-copy, div.modal.password-modal article.modal-copy, div.modal.email-modal article.modal-copy {
  padding: 25px 30px
}

div.modal.newsletter div.modal-cta,
    div.modal.newsletter div.modal-top,
    div.modal.password-modal div.modal-cta,
    div.modal.password-modal div.modal-top,
    div.modal.email-modal div.modal-cta,
    div.modal.email-modal div.modal-top {
  padding: 20px 30px
}

div.modal.sign-up article.modal-copy {
  padding: 30px 55px 10px
}

div.modal.login {}

div.modal.login article.modal-copy {
  padding: 35px 55px 5px
}

div.modal.fp {}

div.modal.fp label {
  padding-bottom: 10px
}

div.modal.fp article.modal-copy {
  padding: 30px 55px 15px
}

div.modal.thank-you article.modal-copy p:last-child {
  padding-bottom: 0
}

div.modal.locked,
  div.modal.newsletter,
  div.modal.password-modal,
  div.modal.email-modal {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  transition: opacity 250ms ease 350ms, visibility 250ms ease 350ms, -webkit-transform 500ms ease 350ms;
  transition: opacity 250ms ease 350ms, visibility 250ms ease 350ms, transform 500ms ease 350ms;
  transition: opacity 250ms ease 350ms, visibility 250ms ease 350ms, transform 500ms ease 350ms, -webkit-transform 500ms ease 350ms
}

div.modal h5 {
  font-size: 20px;
  color: #434343;
  text-transform: none;
  display: inline-block;
  -webkit-backface-visibility: hidden
}

div.modal h5, div.modal p {
  margin: 0
}

    div.modal p {
        color: #000;
        font-size: 16px;
        padding-top: 25px;
        padding-bottom: 25px;
        font-weight: 200
    }

a.forgot-pw {
  position: absolute;
  right: 0;
  bottom: -40px;
  font-weight: 200;
  font-size: 12px;
  text-align: right;
  text-transform: uppercase;
  width: 50%
}

p.required {
  position: absolute;
  left: 0;
  bottom: -40px;
  font-weight: 200;
  font-size: 12px;
  text-align: left;
  text-transform: uppercase;
  width: 50%;
  margin: 0;
  color: #00AEEF;
  padding-bottom: 0 !important
}

div.agreement-copy {
  position: relative;
  padding: 15px 25px;
  background: white;
  border-top: solid 1px #00AEEF;
  max-height: 400px;
  overflow-y: scroll
}

div.agreement-copy h4 {
  margin: 0 0 20px;
  text-align: center;
  font-size: 18px
}

div.agreement-copy h5 {
  color: rgb(77, 81, 86);
  margin-bottom: 10px
}

div.agreement-copy p {
  font-size: 15px;
  text-align: left
}

div.agreement-copy p span {
  font-weight: 600
}

div.indent {
  padding-left: 20px
}

div.indent-two {
  padding-left: 40px
}

div.modal-top {
  position: relative;
  background: #fff
}

div.modal-top div {
  position: absolute;
  right: 10px;
  top: 20px;
  height: 44px;
  width: 44px;
  cursor: pointer;
  transition: background 350ms, border 350ms
}

div.modal-top div svg {
  width: 16px;
  height: 16px;
  fill: #434343;
  position: absolute;
  top: calc(50% - 8px);
  left: calc(50% - 8px)
}

div.modal-top div:hover {}

div.modal-top div:hover svg {
  fill: #3E44FE
}

article.modal-copy {
  padding: 35px;
  background: #ffffff
}

article.modal-copy label.small-label {
  font-weight: 200;
  font-size: 13px
}

div.modal-cta {
  position: relative;
  background: white;
  padding: 25px
}

div.modal-cta.center {
  text-align: center
}

div.modal-cta label {
  text-align: center;
  transition: all .3s cubic-bezier(0.250,  0.460, 0.450, 0.940)
}

div.modal-cta .btn:not(:last-child) {
  margin-right: 6px
}

.form-col div {
  position: relative
}

.form-col div.full {
  width: 100%
}

.form-col div.select::after {
  content: '';
  position: absolute;
  top: 44px;
  right: 15px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgb(214, 216, 218)
}

.form-col div.checkbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

.form-col div.checkbox input {
  width: 30px
}

.form-col div.checkbox input:focus {
  outline: none
}

@media(min-width: 1024px) {

  .form-col div {
    width: calc(50% - 13px);
    float: left
  }

  .form-col div:not(:last-of-type) {
    margin-bottom: 35px
  }

  .form-col div:nth-child(odd) {
    margin-right: 26px
  }
}

@media(max-width: 1023px) {

  .form-col div {}

  .form-col div:not(:last-of-type) {
    margin-bottom: 25px
  }
}

.form-col div label {
  color: #767d84;
  padding-bottom: 8px
}

.form-col div input {
  width: 100%;
  min-width: 0;
  max-width: none;
  font-size: 18px
}

.form-col div input:focus,
    .form-col div input:active {
  background: white
}

.form-col div select {
  min-width: 100%;
  width: 100%;
  height: 42px;
  font-size: 18px;
  -webkit-appearance: none;
  -webkit-border-radius: 2px;
  border-color: rgb(214, 216, 218)
}

.form-col div select:hover {
  border-color: rgb(171, 173, 174)
}

.form-col div select:focus {
  border-color: #00AEEF
}

.form-col div.invalid-email {
  position: relative
}

.form-col div.invalid-email input {
  border-color: #00AEEF;
  box-shadow: inset 0 0 0 1px #00AEEF
}

.form-col div.invalid-email label {
  color: #00AEEF
}

.form-col div.invalid-email:after {
  content: 'Email Already In Use';
  position: absolute;
  right: 0;
  top: -13px;
  color: #00AEEF;
  width: 100%;
  padding: 5px 0;
  text-align: center;
  background: white;
  border-radius: 5px;
  border: solid 2px
}

.form-col div.invalid-input {}

.form-col div.invalid-input input {
  border-color: #00AEEF
}

.form-col div.invalid-input label {
  color: #00AEEF
}

.form-col div.invalid-ilok {
  position: relative
}

.form-col div.invalid-ilok input {
  border-color: #00AEEF;
  box-shadow: inset 0 0 0 1px #00AEEF
}

.form-col div.invalid-ilok label {
  color: #00AEEF
}

.form-col div.invalid-ilok:after {
  content: 'Invalid iLok Username';
  position: absolute;
  right: 0;
  top: -13px;
  color: #00AEEF;
  width: 100%;
  padding: 5px 0;
  text-align: center;
  background: white;
  border-radius: 5px;
  border: solid 2px
}

.form-col .hidden {
  display: none
}

p.invalid {
  color: #00AEEF;
  padding-bottom: 10px !important;
  font-size: 14px;
  font-weight: 600 !important
}

div.snippet-wrap {
  -webkit-animation-duration: .65s;
          animation-duration: .65s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
          animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-animation-name: fade-in;
          animation-name: fade-in;
  -webkit-animation-duration: .3s;
          animation-duration: .3s;
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
  border: 1px solid rgba(0,0,0, .15)
}

code.code-snippet {
  font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
  white-space: pre-wrap
}

nav.snippet-nav:after {
  content: '';
  display: block;
  clear: both
}

nav.snippet-nav {
  background: #efefef
}

nav.snippet-nav ul {
  margin: 0;
  padding: 0
}

nav.snippet-nav ul li {
  float: left;
  padding: 0;
  list-style-type: none;
  margin-bottom: 0
}

@media (max-width: 767px) {

  nav.snippet-nav ul li {
    width: 50%
  }
}

nav.snippet-nav a {
  display: block;
  padding: 15px 35px;
  transition: background 350ms, color 350ms
}

nav.snippet-nav a:hover {
  background: rgb(227, 227, 227)
}

nav.snippet-nav a.is-active {
  background: white;
  color: black
}

@media (max-width: 767px) {

  nav.snippet-nav a {
    text-align: center
  }
}

body.support-knowledge-base, body.support-forums, body.support-tickets {}

body.support-knowledge-base div.page-info, body.support-forums div.page-info, body.support-tickets div.page-info {
  position: relative
}

div.loading-box {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10000;
  opacity: 1;
  visibility: visible;
  background-color: white
}

div.loading-box.is-off {
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease
}

div.loading-box div.wrapper {
  position: absolute;
  top: 40%;
  left: 50%;
  -webkit-transform: translate(-50% -50%);
          transform: translate(-50% -50%);
  height: 50px;
  width: 50px;
  -webkit-animation-name: rotate;
          animation-name: rotate;
  -webkit-animation-duration: .8s;
          animation-duration: .8s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite
}

div.loader {
  width: 50px;
  height: 50px;
  border: 5px solid #D9D9D9;
  border-top-color: #00AEEF;
  border-radius: 50%;
  position: relative
}

div#scanWindow {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  padding: 20px;
  overflow: hidden;
  position: relative
}

div#hasSupport {
  display: none;
  background: #00AEEF;
  color: #ffffff;
  font-size: 14px;
  position: absolute;
  right: 0px;
  top: 0px;
  width: 100px;
  height: 100%;
  text-align: center;
  padding: 100px 5px 0
}

div#hasSupport p {
  color: #fff
}

#scanButton {
  width: 130px;
  float: left;
  top: 8px
}

#scanButton:hover {
  cursor: pointer
}

#system {
  margin-bottom: 10px
}

#output, #scanning {
  max-width: 450px;
  float: left;
  display: none
}

.tools-content .switch-tab h4 {
  color: #128b98
}

.tab-container .specs {
  margin-top: 30px
}

.tools-content .specs table {
  width: 96%;
  margin: 0 auto 20px
}

.tools-content .specs table .header th {
  text-align: center;
  padding: 12px 18px 15px
}

.tools-content .specs table tr td:first-child {
  font-size: 16px;
  font-size: 24px;
  font-size: 1.5rem;
  vertical-align: middle
}

.yep2 {
  color: #2bc3a3
}

.tools-content .specs table .header .format-support {
  background-color: #b21f6e
}

.tools-content .specs table .header .audio-enhance {
  background-color: #90c14d
}

div#hasSupport.isSupported {
  background: #90c14d
}

div#hasSupport div.icon {
  width: 100%;
  -webkit-transform: translateY(-59px);
          transform: translateY(-59px);
  /* background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYxMiA3OTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYxMiA3OTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJCTxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSI5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjI5Mi45IiB5MT0iNDEwLjQiIHgyPSIzMTkuOSIgeTI9IjM4MS45Ii8+DQoJCTxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSI5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjI5Mi4xIiB5MT0iMzgyLjciIHgyPSIzMjAuNiIgeTI9IjQwOS43Ii8+DQo8L2c+DQo8L3N2Zz4=') */
  background-position: center -135px;
  background-repeat: no-repeat;
  background-size: 250%
}

div#hasSupport.isSupported div.icon {
  height: 35px;
  width: 100%;
  margin-top: -30px;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYxMiA3OTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYxMiA3OTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBvbHlsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSI5IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50cz0iMjg1LjQsMzk1LjUgMjk5LjksNDA5LjIgMzI2LjksMzgwLjcgIi8+DQo8L3N2Zz4=');
  background-position: center -135px;
  background-repeat: no-repeat;
  background-size: 250%;
  background-color: #90c14d
}

.snippet-wrapper nav.snippet ul li a {
  padding: 12px 30px
}

p.test {
  font-size: 24px;
  line-height: 1.2em;
  margin-top: 48px;
  margin-bottom: 0
}

p.test-2 {
  margin: 0;
  color: white
}

div.platforms-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap
}

div.platforms-grid a.platform {
  width: 23%;
  margin-bottom: 2%;
  margin-right: 2%
}

@media(max-width: 1023px) {

  div.platforms-grid a.platform {
    width: 30%;
    margin-right: 5%;
    margin-bottom: 5%
  }

  div.platforms-grid a.platform:nth-child(3n) {
    margin-right: 0
  }
}

@media(max-width: 767px) {

  div.platforms-grid a.platform {
    width: 48%;
    margin-right: 4%;
    margin-bottom: 4%
  }

  div.platforms-grid a.platform:nth-child(2n),
      div.platforms-grid a.platform:nth-child(3n) {
    margin-right: 0
  }

  div.platforms-grid a.platform:nth-child(odd) {
    margin-right: 4%
  }
}

div.platforms-grid a.platform:nth-child(4) {}

@media(min-width: 1024px) {

  div.platforms-grid a.platform:nth-child(4) {
    margin-right: 0
  }
}

#index {}

#index div.page-content {
  padding: 0
}

#index div.page-content ul li {
  margin-bottom: 0
}

#index div.breadcrumbs p {
  position: relative;
  margin: 16px 5% 14px 60px;
  font-size: 15px;
  line-height: 1em;
  color: black;
  margin-right: 10px;
  transition: margin 350ms
}

@media (max-width: 767px) {

  #index div.breadcrumbs p {
    font-size: 13px;
    margin: 1em 5% 1em 5%
  }
}

#index div.breadcrumbs p a {
  position: relative;
  font-size: 11px;
  text-decoration: underline
}

#index div.breadcrumbs p a:hover {
  color: #131c27;
  font-size: 11px
}

#index div.breadcrumbs p.is-transitioned {
  margin: 16px 5% 14px 100px
}

/* hero carousel */

div.home-hero {
  position: relative;
  min-height: 350px;
  background-color: black

  /* hero overlay */
}

@media (min-width: 960px) {

  div.home-hero {
    position: relative;
    box-sizing: border-box
  }

  div.home-hero > * {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box
  }

  div.home-hero:before {
    position: relative;
    display: block;
    content: "";
    padding-top: 43.99585921325052%;
    box-sizing: border-box
  }

  div.home-hero.is-hover::after {
    box-shadow: inset 0 0 0 20px rgba(62, 68, 254, 0.28)
  }
}

@media (max-width: 959px) {

  div.home-hero {
    height: auto;
    padding-bottom: 70px
  }
}

div.home-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: box-shadow 350ms
}

div.home-hero h2 {
  line-height: 1.1em;
  font-weight: 100;
  margin-top: 0;
  -webkit-animation-delay: .3s;
          animation-delay: .3s
}

div.home-hero h2:not(.slide-title) {
  font-size: 68px
}

@media (max-width: 959px) {

  div.home-hero h2 {
    margin-bottom: 0
  }

  div.home-hero h2:not(.slide-title) {
    display: none
  }
}

div.home-hero h2, div.home-hero p {
  color: white
}

div.home-hero a {
  text-transform: uppercase;
  -webkit-animation-delay: .7s;
          animation-delay: .7s;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  border-bottom: 1px solid rgb(62, 68, 254)
}

div.home-hero p {
  -webkit-animation-delay: .5s;
          animation-delay: .5s;
  padding: 0 0 15px;
  font-weight: 200;
  font-size: 18px
}

@media (min-width: 960px) {

  div.home-hero p {
    max-width: 375px
  }
}

@media (max-width: 959px) {

  div.home-hero p {
    margin-bottom: 0;
    font-size: 14px
  }
}

div.home-hero figure {
  margin: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 350ms
}

@media (min-width: 960px) {

  div.home-hero figure {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
  }
}

@media (max-width: 959px) {

  div.home-hero figure {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
            position: relative;
            box-sizing: border-box
  }

  div.home-hero figure > * {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box
  }

  div.home-hero figure:before {
    position: relative;
    display: block;
    content: "";
    padding-top: 50%;
    box-sizing: border-box
  }
}

div.home-hero figure h2.slide-title {
  position: relative;
  left: 5%;
  z-index: 2;
  max-width: 50%;
  font-size: calc(24px + 41 * ((100vw - 320px) / 640))
}

@media screen and (min-width: 960px) {

  div.home-hero figure h2.slide-title {
    font-size: 65px
  }
}

@media screen and (max-width: 320px) {

  div.home-hero figure h2.slide-title {
    font-size: 24px
  }
}

@media (min-width: 960px) {

  div.home-hero figure h2.slide-title {
    display: none
  }
}

div.home-hero figure::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 75%)
}

div.slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s, visibility .5s
}

@media (min-width: 960px) {

  div.slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center
  }
}

@media (max-width: 959px) {

  div.slide {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0
  }
}

div.slide div {
  position: relative;
  padding-left: 50px;
  z-index: 2;
  cursor: pointer
}

@media(min-width: 960px) {

  div.slide div {
    max-width: 450px
  }
}

@media (max-width: 959px) {

  div.slide div {
    padding: 0 5%
  }
}

div.slide.is-active {
  opacity: 1;
  visibility: visible
}

@media (max-width: 959px) {

  div.slide.is-active {
    position: relative
  }
}

div.slide.is-active h2, div.slide.is-active p, div.slide.is-active a {
  /* for some reason this isn't working as apply when nested in h2... works on parent. */
  -webkit-animation-name: fade-in-up;
          animation-name: fade-in-up;
  -webkit-animation-duration: .7s;
          animation-duration: .7s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
          animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

/* hero navigation arrows & dots */

div.control-wrap {
  pointer-events: none
}

div.hero-control {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  bottom: 20px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  pointer-events: auto
}

div.hero-control ul {
  margin: 0 20px;
  padding: 0
}

div.hero-control li {
  position: relative;
  list-style-type: none !important;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255, .2);
  float: left;
  cursor: pointer;
  transition: background .2s ease;
  margin-bottom: 0
}

div.hero-control li:hover {
  background: rgba(255,255,255, .7)
}

div.hero-control li.is-active {
  background: rgba(128, 128, 128, 0);
  box-shadow: 0 0 0 1px white
}

div.hero-control li:not(:last-child) {
  margin-right: 16px
}

div.hero-prev,
div.hero-next {
  width: 25px;
  height: 25px;
  float: left;
  cursor: pointer;
  margin-bottom: 10px;
  position: relative
}

@media (max-width: 959px) {

  div.hero-prev,
div.hero-next {
    display: none
  }
}

div.hero-prev svg, div.hero-next svg {
  position: absolute;
  top: calc(50% - 12.5px);
  height: 25px;
  width: 25px;
  fill: white;
  transition: fill 250ms
}

div.hero-prev:hover svg, div.hero-next:hover svg {
  fill: #00AEEF
}

div.hero-prev svg {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1)
}

/* platforms grid */

div.platforms-wrap {
  width: auto;
  padding: 15px 7% 15px 10%
}

div.platforms-wrap h6 {
  margin-bottom: 30px
}

@media (max-width: 767px) {

  div.platforms-wrap {
    padding: 10px 5%
  }
}

.platforms-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  background-color: #F6F6F6
}

a.platform {
  display: block;
  position: relative;
  width: 25%;
  text-align: center;
  padding: 22px;
  transition: all .3s cubic-bezier(0.250,  0.460, 0.450, 0.940);
  background-color: #fff;
  border-right: solid 1px #ddd;
  border-bottom: solid 1px #ddd
}

@media (min-width: 768px) {

  a.platform {}

  a.platform:nth-child(-n+4) {
    border-top: solid 1px #ddd
  }

  a.platform:nth-child(4n+1) {
    border-left: solid 1px #ddd
  }
}

@media (max-width: 767px) {

  a.platform {
    width: 50%
  }

  a.platform:nth-child(-n+2) {
    border-top: solid 1px #ddd
  }

  a.platform:nth-child(odd) {
    border-left: solid 1px #ddd
  }
}

a.platform span {
  font-weight: 500;
  font-size: 14px;
  color: black;
  text-transform: uppercase;
  transition: all .3s cubic-bezier(0.250,  0.460, 0.450, 0.940)
}

a.platform:hover {
  box-shadow: 0px 10px 20px rgba(0, 0, 0, .05);
  border-color: #CDCBCB
}

a.platform:hover div.platform-icon svg * {
  fill: #3E44FE
}

div.platform-icon-wrap {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center
}

div.platform-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 120px;
  height: 70px;
  margin-right: 14px
}

div.platform-icon svg {}

div.platform-icon svg path {
  fill: #BABABA;
  transition: all .3s cubic-bezier(0.250,  0.460, 0.450, 0.940)
}

/* bottom news-events */

div.news {
  padding: 15px 7% 15px 10%
}

div.news a.btn {
  margin: 50px 0
}

@media (min-width: 1024px) {

  div.news {
    -webkit-box-flex: 1.75;
        -ms-flex: 1.75;
            flex: 1.75
  }
}

@media (max-width: 1023px) {

  div.news {
    border-bottom: 1px solid rgba(0,0,0, .15)
  }
}

@media (max-width: 767px) {

  div.news {
    padding: 10px 5%
  }

  div.news a.btn {
    margin: 30px 0
  }
}

#blog-index {}

#blog-index .news-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

@media (max-width: 1023px) {

  #blog-index .news-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column
  }
}

#blog-index h1 {
  margin: 20px 0
}

#blog-index .blog-wrapper {
  -ms-flex-preferred-size: 70%;
      flex-basis: 90%
}

@media (max-width: 1023px) {

  #blog-index .blog-wrapper {
    -ms-flex-preferred-size: initial;
        flex-basis: initial;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2
  }
}

#blog-index .category-nav {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-top: -80px;
  position: relative
}

@media (max-width: 1023px) {

  #blog-index .category-nav {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    margin-top: 0
  }
}

@media(max-width: 767px) {

  #blog-index .category-nav {
    margin-bottom: 20px
  }
}

#blog-index .category-nav .nav-wrapper {
  background: #fff;
  width: 100%;
  max-width: 160px;
  margin: 0 auto;
  padding: 10px 15px;
  border: 1px solid rgba(0, 0, 0, .10);
  box-shadow: 0px 4px 24px rgba(0, 0, 0, .25);
  border-radius: 2px
}

@media(min-width: 1600px) {

  #blog-index .category-nav .nav-wrapper {
    position: fixed;
    left: 50%;
    -webkit-transform: translateX(500px);
            transform: translateX(500px)
  }

  #blog-index .category-nav .nav-wrapper.is-absolute {
    position: absolute;
    left: auto;
    right: 11.5%;
    bottom: 0;
    -webkit-transform: translateX(0);
            transform: translateX(0)
  }
}

@media(max-width: 1599px) {

  #blog-index .category-nav .nav-wrapper {
    position: fixed;
    right: 1.7%
  }

  #blog-index .category-nav .nav-wrapper.is-absolute {
    position: absolute;
    width: 160px;
    right: -100%;
    bottom: 0
  }
}

@media (max-width: 1023px) {

  #blog-index .category-nav .nav-wrapper {
    position: relative;
    right: 0;
    max-width: none
  }
}

#blog-index .category-nav h6 {
  margin-top: 0;
  text-transform: capitalize;
  font-size: 13px;
  font-weight: 600
}

#blog-index .category-nav ul {
  display: initial;
  margin: 0;
  padding: 0;
  display: block;
  padding: 2px 0 10px;
  margin-top: 10px
}

#blog-index .category-nav ul li {
  list-style-type: none;
  padding: 0;
  margin: 0
}

@media (max-width: 1023px) {

  #blog-index .category-nav ul {
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap
  }

  #blog-index .category-nav ul li {
    list-style-type: none
  }

  #blog-index .category-nav ul li:not(:last-child) {
    margin-right: 1.5rem
  }
}

#blog-index .category-nav ul li {}

#blog-index .category-nav ul li:not(:last-child) {
  margin-bottom: 9px
}

#blog-index .category-nav a {
  color: rgb(159, 164, 169);
  border-bottom: none;
  font-size: 14px;
  display: block;
  font-weight: 400;
  transition: all .2s ease-in
  /*& input[type="radio"]

        margin-right: 8px */
}

#blog-index .category-nav a span:not(.icon) {
  vertical-align: top;
  font-size: 12px
}

#blog-index .category-nav a span.icon {
  margin: 0 4px 0 0
}

#blog-index .category-nav a span.icon svg {
  width: 20px;
  height: 20px
}

#blog-index .category-nav a span.icon svg,
          #blog-index .category-nav a span.icon svg path {
  transition: all .3s cubic-bezier(0.250,  0.460, 0.450, 0.940);
  fill: silver
}

#blog-index .category-nav a:hover {
  color: black
}

#blog-index .category-nav a:hover span.icon svg {}

#blog-index .category-nav a:hover span.icon svg,
          #blog-index .category-nav a:hover span.icon svg path {
  fill: black
}

#blog-index .category-nav a.active {
  color: black;
  font-weight: 600
}

#blog-index .category-nav a.active span.icon svg {}

#blog-index .category-nav a.active span.icon svg,
          #blog-index .category-nav a.active span.icon svg path {
  fill: black
}

#blog-index .category-nav label {
  cursor: pointer;
  display: block;
  line-height: 2em;
  min-width: 0
  /* Accessible hidden styles */
  /* Unchecked */
}

#blog-index .category-nav label [type="radio"] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  margin-right: 8px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px
  /* Checked */
}

#blog-index .category-nav label [type="radio"]:checked + span:before,
        #blog-index .category-nav label [type="radio"]:focus + span:before,
        #blog-index .category-nav label [type="radio"]:hover + span:before {
  background: #3E44FE;
  box-shadow: 0 0 0 0.25em rgba(0,0,0, .15)
}

#blog-index .category-nav label span {
  display: block
}

#blog-index .category-nav label span:before {
  background: rgba(0,0,0, .15);
  border: 0.125em solid #FFF;
  border-radius: 1em;
  box-shadow: 0 0 0 .1em rgba(0,0,0, .25);
  content: '';
  display: inline-block;
  height: 13px;
  margin-right: 10px;
  margin-left: 3px;
  transition: all 0.25s ease-out;
  width: 13px
}

.blog-post {
  border-bottom: 1px solid #EEE
}

.blog-post.show {
  display: block
}

.blog-post.hide {
  display: none
}

.blog-post:last-of-type {
  border-bottom: none
}

.blog-post:first-of-type {}

.blog-post:first-of-type a.post {
  padding-top: 0
}

.blog-post a.post:after {
  content: '';
  display: block;
  clear: both
}

.blog-post a.post {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  color: #000;
  color: initial;
  border-bottom: none;
  font-weight: 400;
  padding: 60px 0
}

.blog-post a.post:hover {}

.blog-post a.post:hover span.more svg {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0)
}

@media (max-width: 767px) {

  .blog-post a.post {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    padding: 40px 0
  }
}

.blog-post .post-details-content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1
}

.blog-post figure {
  position: relative;
  vertical-align: top;
  margin: 0 0 0 25px;
  width: 185px;
  height: 185px;
}

.blog-post figure::before {
  content: '';
  display: block;
  height: 0;
  padding-top: 60%
}

@media (max-width: 767px) {

  .blog-post figure {
    width: 100%;
    margin: 0 auto 25px
  }
}

.blog-post figure img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50%;
  border: 5px solid transparent;
}

.blog-post figure img:hover {
    border-color: #AA33FF;
}

.blog-post h3 {
  margin-top: 10px;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 24px;
  position: relative;
  display: inline-block
}

.blog-post div.post-details {
  margin-bottom: 14px
}

.blog-post div.post-details span {
  font-size: 12px;
  color: #434343
}

.blog-post p {
  font-size: 16px;
  font-weight: 500;
  color: #000000
}

.blog-post span.more {
  position: relative;
  text-transform: uppercase;
  font-size: 12px;
  color: #434343;
  border-bottom: 1px solid #3E44FE;
  font-weight: 500
}

.blog-post span.more svg {
  position: absolute;
  top: 4px;
  left: calc(100% + 5px);
  -webkit-transform: translateX(-3px);
          transform: translateX(-3px);
  opacity: 0;
  transition: all .3s cubic-bezier(0.250,  0.460, 0.450, 0.940)
}

.blog-video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  margin: 20px 0;
  height: 0;
  overflow: hidden
}

.ytplayer, .vplayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.page-content .blog-pagination ul {
  padding-left: 0
}

.blog-pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 50px 5% 0
}

@media(max-width: 767px) {

  .blog-pagination {
    padding: 25px 5% 0
  }
}

.blog-pagination div {
  position: relative
}

.blog-pagination ul {
  list-style-type: none;
  margin: 0
}

.blog-pagination li {
  display: inline-block
}

.blog-pagination li.separator {
  padding: 0 10px;
  display: none
}

.blog-pagination li.separator.set {
  display: inline-block
}

.blog-pagination li.separator span {
  position: relative;
  top: -2px
}

.blog-pagination li a {
  padding: 8px 13px;
  color: #c5c5c5;
  border: 1px solid #c5c5c5;
  border-radius: 5px;
  transition: color 350ms, border-color 350ms
}

@media(max-width: 767px) {

  .blog-pagination li a {
    padding: 4px 7px
  }
}

.blog-pagination li a:hover {
  border-color: #3E44FE;
  color: #3E44FE
}

.blog-pagination li a.active {
  border-color: black;
  color: black
}

.blog-pagination .page-arrow {
  position: absolute;
  top: -6px;
  padding: 10px
}

.blog-pagination .page-arrow svg {
  width: 15px;
  height: 15px;
  fill: #000;
  transition: -webkit-transform 350ms;
  transition: transform 350ms;
  transition: transform 350ms, -webkit-transform 350ms
}

.blog-pagination .page-arrow.prev {
  left: -31px
}

.blog-pagination .page-arrow.prev:hover svg {
  -webkit-transform: scaleX(-1) translateX(5px);
          transform: scaleX(-1) translateX(5px)
}

.blog-pagination .page-arrow.prev svg {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1)
}

.blog-pagination .page-arrow.next {
  right: -31px
}

.blog-pagination .page-arrow.next:hover svg {
  -webkit-transform: translateX(5px);
          transform: translateX(5px)
}

#blog-detail-index {}

#blog-detail-index .detail-copy {
  position: relative
}

#blog-detail-index .detail-copy h1 {
  margin-bottom: 10px
}

#blog-detail-index .detail-copy div.post-details {
  padding-bottom: 40px
}

@media (max-width: 767px) {

  #blog-detail-index .detail-copy div.post-details {
    padding-bottom: 20px
  }
}

#blog-detail-index .detail-copy div.post-details span {
  font-size: 12px;
  color: rgb(159, 164, 169)
}

#blog-detail-index .detail-copy p:not(:last-of-type) {
  margin-bottom: 25px
}

div.page-content div.share-blog {
  margin-top: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center
}

@media (max-width: 1065px) {

  div.page-content div.share-blog {
    /*display: block */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
  }
}

div.page-content div.share-blog p {
  display: inline-block;
  margin-right: 10px;
  font-size: 12px
}

@media (max-width: 767px) {

  div.page-content div.share-blog p {
    font-size: 16px
  }
}

div.page-content div.share-blog ul {
  display: inline-block;
  padding: 0;
  padding-left: 0;
  margin: 20px 0;
  min-width: 150px
}

@media (max-width: 1065px) {

  div.page-content div.share-blog ul {
    min-width: 50%;
    float: left;
    margin-right: 50%;
    margin-top: 0
  }
}

@media (max-width: 767px) {

  div.page-content div.share-blog ul {
    min-width: 100%;
    margin-right: 0
  }
}

div.page-content div.share-blog a {}

div.page-content div.share-blog a:hover {}

div.page-content div.share-blog a:hover svg {
  fill: #3E44FE
}

@media (max-width: 767px) {

  div.page-content div.share-blog a {
    display: block;
    width: 18%;
    float: left
  }
}

div.page-content div.share-blog li {
  list-style-type: none;
  padding: 0;
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 0
}

div.page-content div.share-blog li svg {
  width: 20px;
  height: 205px;
  fill: #C4C4C4
}

@media (max-width: 767px) {

  div.page-content div.share-blog li svg {
    width: 40px;
    height: 40px
  }
}

div.page-content div.share-blog textarea {
  max-height: 30px;
  padding: 3px 10px;
  margin: 0 15px 0 10px;
  min-width: 420px
}

@media (max-width: 1065px) {

  div.page-content div.share-blog textarea {
    min-width: 70%;
    margin-left: 0;
    float: left
  }
}

@media (max-width: 767px) {

  div.page-content div.share-blog textarea {
    min-width: 100%;
    margin-bottom: 20px
  }
}

div.page-content div.share-blog button {
  min-width: 106px;
  margin-bottom: 2px
}

@media (max-width: 1065px) {

  div.page-content div.share-blog button {
    min-width: 25%;
    float: left
  }
}

@media (max-width: 767px) {

  div.page-content div.share-blog button {
    min-width: 200px
  }
}

div.page-content div.share-blog li:hover {
  svg {
    fill: #0b97d3
  }
}

div.blog-author-block {
  padding: 40px 0 50px;
  margin-top: 50px;
  border-top: 1px solid rgba(0,0,0, .15)




  /* --dolby-blue */
}

@media (max-width: 767px) {

  div.blog-author-block {
    padding: 30px 0 30px
  }
}

div.blog-author-block h4 {
  color: #000;
  font-size: 17.6px;
  font-size: 1.1rem;
  text-transform: none
}

div.blog-author-block .au-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 700px
}

@media only screen and (max-width: 1000px) {

  div.blog-author-block .au-wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border: 1px solid #efefef;
    padding-top: 30px
  }
}

div.blog-author-block figure {
  background: red;
  width: 150px;
  min-height: 150px;
  margin: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat
}

div.blog-author-block figure:before {
  content: '';
  display: block;
  height: 0;
  padding-top: 100%
}

div.blog-author-block .text-box {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 30px;
  border: 1px solid #efefef;
  border-left: none;

  p {
    color: rgb(159, 164, 169)
  }
}

@media only screen and (max-width: 1000px) {

  div.blog-author-block .text-box {
    border: none;
    padding: 20px
  }
}

.partners-detail {}

.partners-detail .page-content {
  padding: 0;
  position: relative;
  overflow: hidden
}

.partners-detail figure {
  position: absolute;
  top: 30px;
  right: -275px;
  width: 550px;
  height: 600px;
  margin: 0;
  background: rgba(255, 0, 0, 0.1);
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 60%
}

@media (max-width: 1023px) {

  .partners-detail figure {
    display: none
  }
}

div.partner-content {
  position: relative;
  padding: 10px 5% 50px;
  min-height: 660px;
  z-index: 2
}

@media (max-width: 1023px) {

  div.partner-content {
    min-height: 0
  }
}

div.partner-content p {
  font-weight: 200;
  color: #767d84;
  max-width: calc(90% - 275px)
}

@media (max-width: 1023px) {

  div.partner-content p {
    max-width: 100%
  }
}

div.partner-content a.btn {
  margin-top: 50px
}

div.partner-content ul {
  font-weight: 200;
  max-width: calc(90% - 275px)
}

@media (max-width: 1023px) {

  div.partner-content ul {
    max-width: 100%
  }
}

div.partner-logo {
  max-width: 250px;
  margin: 50px 0
}

div.partner-logo a {
  display: block
}

div.partner-logo img {
  max-width: 250px
}

/* */

body.edit-profile, body.edit-support-profile {}

body.edit-profile div.user-select, body.edit-support-profile div.user-select {
  display: block
}

body.edit-profile nav.side-nav a.tips, body.edit-support-profile nav.side-nav a.tips {
  display: block
}

body.edit-profile a.log-in,
  body.edit-profile a.sign-up,
  body.edit-support-profile a.log-in,
  body.edit-support-profile a.sign-up {
  display: none
}

body.edit-profile div.social li:last-child, body.edit-support-profile div.social li:last-child {
  border: none
}

body.edit-profile div.social li:nth-child(2), body.edit-support-profile div.social li:nth-child(2) {
  display: block
}

body.edit-profile div.social li:nth-child(3), body.edit-support-profile div.social li:nth-child(3) {
  display: block
}

#edit-profile {}

#edit-profile div.page-content {
  padding-right: 0
}

#edit-profile div.breadcrumbs,
  #edit-profile div.next-page {
  display: none
}

div.profile-wrap {}

@media(min-width: 1024px) {

  div.profile-wrap {
    margin-right: 400px
  }
}

@media(max-width: 1023px) {

  div.profile-wrap {
    margin-right: 350px
  }
}

@media(max-width: 959px) {

  div.profile-wrap {
    margin-right: 5%
  }
}

div.profile-wrap .btn-submit {
  margin-top: 35px;
  text-transform: none
}

div.p-row {
  padding: 50px 0
}

div.p-row:not(:last-of-type) {
  border-bottom: 1px solid rgba(0,0,0, .15);
  position: relative;
  padding-bottom: 100px
}

div.password-sec {
  position: absolute;
  bottom: 50px;
  left: 0
}

div.password-sec a {
  display: block
}

div.profile-top:after {
  content: '';
  display: block;
  clear: both
}

div.profile-top h1 {
  margin: 0
}

div.profile-top p {
  padding: 10px 0 25px;
  line-height: 1.45em
}

div.profile-top p span {
  font-weight: 600;
  color: #131c27
}

div.profile-avatar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center
}

div.profile-avatar h3 {
  margin-top: 0
}

div.profile-avatar div {
  margin: 0 0 0 30px
}

div.profile-avatar figure {
  width: 125px;
  height: 125px;
  margin: 0
}

div.profile-avatar figure img {
  width: 125px;
  height: 125px;
  border-radius: 50%
}

div.profile-avatar a.btn {
  margin-bottom: 10px
}

div.profile-avatar button.btn-remove {
  font-family: 'Avenir Variable', 'Avenir', 'Avenir Next', Helvetica, Arial, sans-serif
}

div.profile-avatar button.btn-disable {
  pointer-events: none;
  opacity: .75
}

div.profile-avatar a.btn:first-of-type {
  margin-right: 10px
}

.inputfile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1
}

.inputfile + label {
  transition: all .3s cubic-bezier(0.250,  0.460, 0.450, 0.940);
  display: inline-block;
  min-width: 0;
  margin-bottom: 10px
}

.inputfile:focus + label {
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px
}

div.profile-progress {
  background: #f9f9f9;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0, .15)
}

@media(min-width: 960px) {

  div.profile-progress {
    width: 250px;
    position: fixed;
    top: 120px
  }
}

@media(max-width: 959px) {

  div.profile-progress {
    width: 100%;
    margin-top: 35px
  }
}

@media(min-width: 1600px) {

  div.profile-progress {
    left: 50%;
    -webkit-transform: translateX(475px);
            transform: translateX(475px)
  }
}

@media(max-width: 1599px) {

  div.profile-progress {
    right: 4%
  }
}

div.profile-progress p.progress-title {
  text-align: center;
  margin: 0 0 5%;
  padding: 15px 0;
  color: #131c27;
  border-bottom: 1px solid rgba(0,0,0, .15)
}

div.progress {
  position: relative;
  margin: 0 auto
}

div.progress svg {
  width: 165px;
  height: 165px;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  display: block;
  margin: 0 auto
}

@media(max-width: 767px) {

  div.progress svg {
    width: 125px;
    height: 125px
  }
}

div.progress span {
  text-align: center;
  position: absolute;
  top: 62px;
  width: 100%;
  font-weight: 600;
  font-size: 30px;
  color: #25b1ed
}

@media(max-width: 767px) {

  div.progress span {
    top: 46px;
    font-size: 26px
  }
}

circle.circle_animation {
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
  transition: stroke-dashoffset 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

div.progress-remaining {
  padding: 25px 10px 20px 30px
}

div.progress-remaining p {
  font-size: 14px
}

div.progress-inner {}

@media(max-width: 959px) {

  div.progress-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0 5% 5%
  }
}

div.profile-select {
  margin-bottom: 35px
}

div.profile-select div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

div.profile-select div:not(:last-child) {
  margin-bottom: 7px
}

div.profile-select div input:focus {
  outline: none
}

div.profile-select div label {
  position: relative;
  cursor: pointer
}

div.streams-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 40px
}

div.stream {
  width: 50%;
  position: relative
}

div.stream:not(:last-child) {
  padding-bottom: 40px
}

div.stream.no-border {
  border-bottom: none
}

@media(min-width: 1024px) {

  div.stream {}

  div.stream:nth-child(even) {
    padding-left: 40px
  }

  div.stream:nth-child(odd) {
    padding-right: 40px
  }

  div.stream:nth-child(n+3) {
    padding-top: 40px
  }

  div.stream:nth-last-child(2) {
    padding-bottom: 0
  }
}

@media(max-width: 1023px) {

  div.stream {
    width: 100%;
    padding-bottom: 40px
  }

  div.stream:not(:first-child) {
    padding-top: 40px
  }
}

div.stream figure {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 0 15px;
  position: relative;
  box-sizing: border-box
}

div.stream figure > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box
}

div.stream figure:before {
  position: relative;
  display: block;
  content: "";
  padding-top: 56.25%;
  box-sizing: border-box
}

div.stream ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

div.stream li {
  float: none;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1
}

div.stream li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  padding: 15px 10px;
  font-size: 14px;
  text-align: center;
  text-transform: uppercase
}

div.stream-title {}

div.stream-title span {
  display: block;
  position: relative;
  width: 100%;
  padding: 15px 25px;
  font-weight: 200;
  font-size: 16px;
  color: white;
  z-index: 1
}

div.stream-title::before {
  content: '';
  width: 100%;
  height: 75px;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to bottom, black, rgba(0, 0, 0, 0));
  z-index: 0
}

div.stream-link {
  position: relative;
  margin: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center
}

div.stream-link div {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-right: 20px;
  padding: 7px 12px;
  background: #eeeeee;
  border: 1px solid rgba(0,0,0, .15);
  font-weight: 200;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap
}

div.stream-link a.btn {
  margin-bottom: 0
}

.stream-text-url {
  width: 0;
  height: 0;
  min-width: 0;
  padding: 0;
  position: absolute
}

.upevts-grid-wrap {
  margin-top: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  overflow: hidden
}

@media (max-width: 767px) {

  .upevts-grid-wrap {
    margin-top: 0
  }
}

.upevts-grid-wrap .evt-grid {
  width: 50%;
  padding: 3% 5% 4% 0;
  position: relative
}

@media (max-width: 767px) {

  .upevts-grid-wrap .evt-grid {
    width: 100%;
    border-bottom: 1px solid rgba(118, 125, 132, 0.1);
    padding: 30px 0
  }
}

.upevts-grid-wrap .evt-grid:nth-child(odd) {}

@media (min-width: 768px) {

  .upevts-grid-wrap .evt-grid:nth-child(odd) {
    border-right: 1px solid rgba(118, 125, 132, 0.1)
  }
}

.upevts-grid-wrap .evt-grid:nth-child(odd):before {}

@media (min-width: 768px) {

  .upevts-grid-wrap .evt-grid:nth-child(odd):before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200%;
    height: 1px;
    background: rgba(118, 125, 132, 0.1)
  }
}

.upevts-grid-wrap .evt-grid:nth-child(even) {}

@media (min-width: 768px) {

  .upevts-grid-wrap .evt-grid:nth-child(even) {
    padding-left: 3%;
    padding-right: 0
  }
}

.upevts-grid-wrap .evt-grid:nth-child(-n+2) {}

@media (min-width: 768px) {

  .upevts-grid-wrap .evt-grid:nth-child(-n+2) {
    padding-top: 0
  }
}

.upevts-grid-wrap .evt-grid:last-child,
    .upevts-grid-wrap .evt-grid:nth-last-child(2):nth-child(odd) {}

.upevts-grid-wrap .evt-grid:last-child:before, .upevts-grid-wrap .evt-grid:nth-last-child(2):nth-child(odd):before {}

@media (min-width: 768px) {

  .upevts-grid-wrap .evt-grid:last-child:before, .upevts-grid-wrap .evt-grid:nth-last-child(2):nth-child(odd):before {
    content: none
  }
}

.upevts-grid-wrap .evt-grid:last-child {}

@media (max-width: 767px) {

  .upevts-grid-wrap .evt-grid:last-child {
    border-bottom: none
  }
}

.upevts-grid-wrap .evt-grid:first-child {}

@media (max-width: 767px) {

  .upevts-grid-wrap .evt-grid:first-child {
    padding-top: 0
  }
}

.upevts-grid-wrap .info-heading-wrap {
  display: table;
  width: 100%;
  margin-bottom: 30px
}

.upevts-grid-wrap .date-block,
  .upevts-grid-wrap .title-block {
  display: table-cell
}

.upevts-grid-wrap .date-block {
  width: 84px;
  height: 84px;
  overflow: hidden;
  border-radius: 7px;
  box-shadow: 0 5px 10px rgba(118,125,132, 0.3)
}

.upevts-grid-wrap .month,
  .upevts-grid-wrap .date {
  font-weight: 100;
  text-align: center
}

.upevts-grid-wrap .month {
  background: #333;
  color: #fff;
  font-weight: 100;
  font-size: 15px;
  height: 29px;
  padding-top: 5px
}

.upevts-grid-wrap .date {
  height: 55px;
  font-size: 35px;
  padding-top: 6px
}

.upevts-grid-wrap .title-block {
  padding-left: 20px;
  vertical-align: middle
}

.upevts-grid-wrap .title {
  font-size: 23px
}

.upevts-grid-wrap .full-date {
  font-weight: 200;
  font-style: italic;
  font-size: 12px;
  padding-top: 10px
}

.upevts-grid-wrap .more {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 13px
}

form.contact {
  width: 60%;
  float: left
}

aside.contact-aside {
  width: 35%;
  float: right
}

.message {
  width: 100%;
  max-width: inherit;
  min-height: 200px;
  margin-bottom: 30px
}

div.encoding-utility {}

div.encoding-utility.desktop {
  display: block
}

@media (max-width: 1169px) {

  div.encoding-utility.desktop {
    display: none
  }
}

div.encoding-utility.tablet {
  display: none
}

@media (max-width: 1169px) {

  div.encoding-utility.tablet {
    display: block
  }
}

@media (max-width: 906px) {

  div.encoding-utility.tablet {
    display: none
  }
}

div.encoding-utility.phone {
  display: none
}

@media (max-width: 906px) {

  div.encoding-utility.phone {
    display: block
  }
}

div.search-results-container {}

div.search-results-container h1 {}

div.search-results-container h1 span {
  font-size: 30px;
  background-color: rgba(0,174,239, .7);
  padding: 0 10px;
  color: #ffffff;
  margin-right: 5px
}

div.search-post {
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: solid 1px rgba(0, 0, 0, .15)
}

div.search-post:last-child {
  border-bottom: none
}

div.search-post p {}

div.search-post p span {
  background-color: rgba(0,174,239, .7);
  padding: 0 10px;
  color: #ffffff
}

div.search-post a {
  color: #000000;
  transition: all 350ms ease
}

div.search-post a.more {
  text-transform: uppercase
}

div.search-post a:hover {
  color: #00AEEF;
  transition: all 350ms ease
}