/*   SAN FRANCISCO FONT FAMILY - UI DISPLAY "SF UI Display"  */
@font-face {
  font-family: "SanFrancisco Display";
  font-style: normal;
  font-weight: 100;
  src: url("http://savage.si/assets/fonts/SF-Display-Ultralight.eot?#iefix") format("embedded-opentype"), url("http://savage.si/assets/fonts/SF-Display-Ultralight.woff") format("woff"), url("http://savage.si/assets/fonts/SF-Display-Ultralight.ttf") format("truetype"), url("http://savage.si/assets/fonts/SF-Display-Ultralight.svg#SanFrancisco Display") format("svg"); }
@font-face {
  font-family: "SanFrancisco Display";
  font-style: normal;
  font-weight: 200;
  src: url("http://savage.si/assets/fonts/SF-Display-Thin.eot?#iefix") format("embedded-opentype"), url("http://savage.si/assets/fonts/SF-Display-Thin.woff") format("woff"), url("http://savage.si/assets/fonts/SF-Display-Thin.ttf") format("truetype"), url("http://savage.si/assets/fonts/SF-Display-Thin.svg#SanFrancisco Display") format("svg"); }
@font-face {
  font-family: "SanFrancisco Display";
  font-style: normal;
  font-weight: 300;
  src: url("http://savage.si/assets/fonts/SF-Display-Light.eot?#iefix") format("embedded-opentype"), url("http://savage.si/assets/fonts/SF-Display-Light.woff") format("woff"), url("http://savage.si/assets/fonts/SF-Display-Light.ttf") format("truetype"), url("http://savage.si/assets/fonts/SF-Display-Light.svg#SanFrancisco Display") format("svg"); }
@font-face {
  font-family: "SanFrancisco Display";
  font-style: normal;
  font-weight: normal;
  src: url("http://savage.si/assets/fonts/SF-Display-Regular.eot?#iefix") format("embedded-opentype"), url("http://savage.si/assets/fonts/SF-Display-Regular.woff") format("woff"), url("http://savage.si/assets/fonts/SF-Display-Regular.ttf") format("truetype"), url("http://savage.si/assets/fonts/SF-Display-Regular.svg#SanFrancisco Display") format("svg"); }
@font-face {
  font-family: "SanFrancisco Display";
  font-style: normal;
  font-weight: 500;
  src: url("http://savage.si/assets/fonts/SF-Display-Medium.eot?#iefix") format("embedded-opentype"), url("http://savage.si/assets/fonts/SF-Display-Medium.woff") format("woff"), url("http://savage.si/assets/fonts/SF-Display-Medium.ttf") format("truetype"), url("http://savage.si/assets/fonts/SF-Display-Medium.svg#SanFrancisco Display") format("svg"); }
@font-face {
  font-family: "SanFrancisco Display";
  font-style: normal;
  font-weight: 600;
  src: url("http://savage.si/assets/fonts/SF-Display-Semibold.eot?#iefix") format("embedded-opentype"), url("http://savage.si/assets/fonts/SF-Display-Semibold.woff") format("woff"), url("http://savage.si/assets/fonts/SF-Display-Semibold.ttf") format("truetype"), url("http://savage.si/assets/fonts/SF-Display-Semibold.svg#SanFrancisco Display") format("svg"); }
@font-face {
  font-family: "SanFrancisco Display";
  font-style: normal;
  font-weight: bold;
  src: url("http://savage.si/assets/fonts/SF-Display-Bold.eot?#iefix") format("embedded-opentype"), url("http://savage.si/assets/fonts/SF-Display-Bold.woff") format("woff"), url("http://savage.si/assets/fonts/SF-Display-Bold.ttf") format("truetype"), url("http://savage.si/assets/fonts/SF-Display-Bold.svg#SanFrancisco Display") format("svg"); }
@font-face {
  font-family: "SanFrancisco Display";
  font-style: normal;
  font-weight: 800;
  src: url("http://savage.si/assets/fonts/SF-Display-Heavy.eot?#iefix") format("embedded-opentype"), url("http://savage.si/assets/fonts/SF-Display-Heavy.woff") format("woff"), url("http://savage.si/assets/fonts/SF-Display-Heavy.ttf") format("truetype"), url("http://savage.si/assets/fonts/SF-Display-Heavy.svg#SanFrancisco Display") format("svg"); }
@font-face {
  font-family: "SanFrancisco Display";
  font-style: normal;
  font-weight: 900;
  src: url("http://savage.si/assets/fonts/SF-Display-Black.eot?#iefix") format("embedded-opentype"), url("http://savage.si/assets/fonts/SF-Display-Black.woff") format("woff"), url("http://savage.si/assets/fonts/SF-Display-Black.ttf") format("truetype"), url("http://savage.si/assets/fonts/SF-Display-Black.svg#SanFrancisco Display") format("svg"); }
/*   ICON FONT  */
@font-face {
  font-family: "IconFont";
  font-style: normal;
  font-weight: normal;
  src: url("http://savage.si/assets/fonts/IconFont.eot?#iefix") format("embedded-opentype"), url("http://savage.si/assets/fonts/IconFont.woff") format("woff"), url("http://savage.si/assets/fonts/IconFont.ttf") format("truetype"), url("http://savage.si/assets/fonts/IconFont.svg#IconFont") format("svg"); }
/*  VARIABLES  */
/* Colour ------------------------------------ */
/* Styles ------------------------------------ */
/* Responsiveness ---------------------------- */
/* 768px */
/* 1024px */
/* 1200px */
/* ITEM EXTRAS */
/* CSS PREFIXES */
/*
@mixin transform($value) {
  -webkit-transform: $value;
  -moz-transform: $value;
  -ms-transform: $value;
  -o-transform: $value;
  transform: $value;
}

@mixin transition($value) {
  -webkit-transform: $value;
  -moz-transform: $value;
  -ms-transform: $value;
  -o-transform: $value;
  transform: $value;
}
*/
/* Colour ------------------------------------ */
/* Styles ------------------------------------ */
html {
  width: 100%;
  max-width: 100%;
  background-color: #f5f5f5;
  font-family: "SanFrancisco Display", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  letter-spacing: -.021em;
  color: #444444; }

html::-webkit-scrollbar {
  background-color: #ffffff;
  width: 10px;
  height: 10px; }

html::-webkit-scrollbar-thumb {
  background-color: rgba(50, 50, 50, 0.25);
  border: 2px solid transparent;
  border-radius: 10px;
  margin-right: 10px;
  background-clip: padding-box; }

html::-webkit-scrollbar-thumb:hover {
  background-color: rgba(50, 50, 50, 0.5); }

html::-webkit-scrollbar-track {
  background-color: transparent;
  width: 1px; }

body {
  padding-top: 45px;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  font-size: 10px;
  line-height: 14px;
  font-weight: normal; }
  @media (min-width: 768px) {
    body {
      padding-top: 0; } }

* {
  -webkit-backface-visibility: visible;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  font-family: "SanFrancisco Display", "Helvetica Neue", "Helvetica", "Arial", sans-serif; }

.wrapper {
  font-size: 0; }

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

.SF-Display {
  font-family: "SanFrancisco Display", "Helvetica Neue", "Helvetica", "Arial", sans-serif; }

.product {
  font-size: 26px;
  line-height: 36px;
  font-weight: 400;
  letter-spacing: -1.5px;
  color: #c0c0c0; }

h1, h2, h3, h4, h5, h6 {
  font-family: "SanFrancisco Display", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  letter-spacing: .006em;
  font-weight: normal;
  color: #101010;
  margin: 0 0 6px; }

h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong {
  font-weight: 800; }

h1 {
  font-size: 26px;
  line-height: 28px;
  letter-spacing: -0.4px; }
  #sub-heading h1, .product-page h1 {
    font-size: 50px;
    line-height: 52px;
    letter-spacing: -1px;
    margin: 10px 0 20px; }
    @media (min-width: 768px) {
      #sub-heading h1, .product-page h1 {
        font-size: 60px;
        line-height: 62px;
        letter-spacing: -1.4px;
        margin: 15px 0 20px; } }
    @media (min-width: 1024px) {
      #sub-heading h1, .product-page h1 {
        font-size: 64px;
        line-height: 66px;
        letter-spacing: -1.8px;
        margin: 20px 0 30px; } }

h2 {
  font-size: 20px;
  line-height: 22px;
  letter-spacing: -0.4px; }
  .product-page h2 {
    font-size: 50px;
    line-height: 52px;
    letter-spacing: -1px;
    margin: 10px 0 20px; }
    @media (min-width: 768px) {
      .product-page h2 {
        font-size: 60px;
        line-height: 62px;
        letter-spacing: -1.4px;
        margin: 15px 0 20px; } }
    @media (min-width: 1024px) {
      .product-page h2 {
        font-size: 64px;
        line-height: 66px;
        letter-spacing: -1.8px;
        margin: 20px 0 30px; } }

h3 {
  font-size: 18px;
  line-height: 20px; }
  .product-page h3 {
    font-size: 42px;
    line-height: 44px;
    letter-spacing: -1px;
    margin: 10px 0 20px; }
    @media (min-width: 768px) {
      .product-page h3 {
        font-size: 52px;
        line-height: 54px;
        letter-spacing: -1.4px;
        margin: 15px 0 20px; } }
    @media (min-width: 1024px) {
      .product-page h3 {
        font-size: 58px;
        line-height: 60px;
        letter-spacing: -1.8px;
        margin: 20px 0 30px; } }

h4 {
  font-size: 16px;
  line-height: 18px;
  font-weight: 500; }
  .product-page h4 {
    font-size: 30px;
    line-height: 32px;
    letter-spacing: -1px;
    margin: 10px 0 20px; }
    @media (min-width: 768px) {
      .product-page h4 {
        font-size: 36px;
        line-height: 38px;
        letter-spacing: -1.2px;
        margin: 15px 0 20px; } }
    @media (min-width: 1024px) {
      .product-page h4 {
        font-size: 44px;
        line-height: 46px;
        margin: 20px 0 30px;
        letter-spacing: -1.4px; } }

h5 {
  font-size: 14px;
  line-height: 16px; }
  .product-page h5 {
    font-size: 24px;
    line-height: 26px;
    letter-spacing: -1px;
    margin: 10px 0 20px; }
    @media (min-width: 768px) {
      .product-page h5 {
        font-size: 28px;
        line-height: 30px;
        letter-spacing: -1px;
        margin: 15px 0 20px; } }
    @media (min-width: 1024px) {
      .product-page h5 {
        font-size: 32px;
        line-height: 34px;
        margin: 20px 0 30px;
        letter-spacing: -1.2px; } }

h6 {
  font-size: 12px;
  line-height: 14px; }
  .product-page h6 {
    font-size: 22px;
    line-height: 26px;
    letter-spacing: -1px;
    margin: 10px 0 20px; }
    @media (min-width: 768px) {
      .product-page h6 {
        font-size: 24px;
        line-height: 28px;
        letter-spacing: -1px;
        margin: 15px 0 20px; } }
    @media (min-width: 1024px) {
      .product-page h6 {
        font-size: 28px;
        line-height: 32px;
        margin: 20px 0 30px;
        letter-spacing: -1px; } }

.center {
  text-align: center; }

p, .copy {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: #444444;
  margin: 0 0 6px; }
  p a:active, p a:visited, p a:link, .copy a:active, .copy a:visited, .copy a:link {
    color: #0076ff; }
  .product-page p, .product-page .copy {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: -0.2px;
    color: #444444;
    margin-bottom: 20px; }
    @media (min-width: 768px) {
      .product-page p, .product-page .copy {
        font-size: 19px;
        font-weight: 400;
        line-height: 28px;
        margin-bottom: 25px;
        letter-spacing: -0.4px; } }
    @media (min-width: 1024px) {
      .product-page p, .product-page .copy {
        font-size: 21px;
        line-height: 30px;
        margin-bottom: 30px;
        letter-spacing: -0.6px; } }

b,
strong {
  font-weight: 700; }

a {
  text-decoration: none; }

br {
  line-height: 15px; }

hr {
  display: block;
  position: relative;
  margin: 12px 0;
  border: none !important;
  box-sizing: border-box;
  width: 100%;
  height: 1px;
  max-height: 1px;
  overflow: hidden;
  background-color: #efefef; }

hr.dark {
  background-color: #999999; }

hr.thin {
  margin: 4px 0 5px; }

hr.line {
  margin: 0; }

.hide {
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important; }

.content-container {
  display: block;
  position: relative;
  max-width: 1024px;
  margin: 0 auto;
  left: 0;
  right: 0;
  padding: 0 20px;
  box-sizing: border-box;
  height: inherit; }

.content-container.width-100 {
  max-width: 100%; }

*::-webkit-input-placeholder {
  color: #757575;
  font-weight: 400; }

*:-moz-placeholder {
  color: #757575;
  font-weight: 400; }

*::-moz-placeholder {
  color: #757575;
  font-weight: 400; }

*:-ms-input-placeholder {
  color: #757575;
  font-weight: 400; }

*::placeholder {
  color: #757575;
  font-weight: 400; }

input,
select,
textarea,
fieldset {
  font-family: var(--form-field-font-family);
  font-size: var(--form-field-font-size);
  box-sizing: border-box;
  margin-top: 0;
  margin-bottom: 0; }

label {
  vertical-align: middle; }

input[type=text],
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=time],
input[type=url],
input[type=week] {
  vertical-align: middle;
  -webkit-appearance: none; }

textarea {
  line-height: 1.75; }

form, fieldset, label,
table, tbody, tfoot, thead, tr, th, td,
figure, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 12px;
  vertical-align: baseline; }

fieldset {
  display: block;
  position: relative;
  width: 100%;
  max-width: 1024px;
  height: auto;
  margin-bottom: 5px;
  box-sizing: border-box; }

label {
  display: block;
  position: relative;
  font-size: 12px; }

/* iPhone, portrait & landscape. */
@media all and (max-device-width: 480px) {
  html, body {
    -webkit-text-size-adjust: none; } }
/* iPad, portrait & landscape. */
@media all and (min-device-width: 768px) and (max-device-width: 1024px) {
  html, body {
    -webkit-text-size-adjust: none; } }
html {
  -webkit-font-smoothing: antialiased; }

img {
  /* -webkit-backface-visibility: visible; */ }

@media only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-device-pixel-ratio: 1.25), only screen and (min-resolution: 200dpi), only screen and (min-resolution: 1.25dppx) {
  -webkit-font-smoothing: subpixel-antialiased; }
#page-wrapper {
  width: 100%;
  height: auto;
  text-align: left;
  margin: 0 auto;
  box-sizing: border-box; }

footer {
  background-color: #151515; }

#foot-wrapper {
  margin-left: auto;
  margin-right: auto;
  height: auto;
  text-align: center;
  font-size: 12px;
  color: #6d6d6d;
  width: 1024px;
  background-color: #151515; }

.v-align {
  display: table; }
  .v-align > div {
    float: none;
    display: table-cell;
    width: 100%; }
    .v-align > div .text-block.align-center {
      width: 1024px; }
  .v-align > .align-top {
    vertical-align: top; }
  .v-align > .align-middle {
    vertical-align: middle; }
  .v-align > .align-bottom {
    vertical-align: bottom; }

/* ----- HELPERS ----- */
.drop-20 {
  margin-top: 20px !important; }

.drop-32 {
  margin-top: 32px !important; }

.drop-70 {
  margin-top: 70px !important; }

.drop-55 {
  margin-top: 55px !important; }

.drop-80 {
  margin-top: 80px !important; }

.drop-150 {
  margin-top: 150px !important; }

.lift-25 {
  margin-bottom: 25px !important; }

.lift-40 {
  margin-bottom: 40px !important; }

.lift-50 {
  margin-bottom: 50px !important; }

.lift-80 {
  margin-bottom: 80px !important; }

.lift-100 {
  margin-bottom: 100px !important; }

.lift-125 {
  margin-bottom: 125px !important; }

.lift-250 {
  margin-bottom: 250px !important; }

.indent-50 {
  margin-left: 50px !important; }

.indent-125 {
  margin-left: 125px !important; }

.wrap-10 {
  margin-right: 10px !important; }

.wrap-50 {
  margin-right: 50px !important; }

.wrap-125 {
  margin-right: 125px !important; }

.layout-cell .align-left.indent-75 {
  margin-right: 10px !important; }

.width-780 {
  max-width: 780px !important; }

.width-800 {
  max-width: 800px !important; }

.width-840 {
  max-width: 840px !important; }

.width-900 {
  max-width: 900px !important; }

/* ----- WIDE IMAGE WITH CROP ----- */
.block.wide-image {
  background-position: center center;
  background-repeat: no-repeat; }

/* ----- WIMAGE BLOCK ----- */
.image-block {
  line-height: 0; }

/* Colour ------------------------------------ */
/* Styles ------------------------------------ */
/* Responsiveness ---------------------------- */
/* 768px */
/* 1024px */
/* 1200px */
/* ITEM EXTRAS */
/* CSS PREFIXES */
/*
@mixin transform($value) {
  -webkit-transform: $value;
  -moz-transform: $value;
  -ms-transform: $value;
  -o-transform: $value;
  transform: $value;
}

@mixin transition($value) {
  -webkit-transform: $value;
  -moz-transform: $value;
  -ms-transform: $value;
  -o-transform: $value;
  transform: $value;
}
*/
nav {
  font-family: "SanFrancisco Display", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  display: block;
  overflow: visible;
  position: fixed;
  top: 0;
  width: 100%;
  height: 45px;
  background-color: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  font-size: 12px;
  letter-spacing: 0.026px;
  z-index: 200;
  -webkit-transition: height 500ms ease;
  -moz-transition: height 500ms ease;
  transition: height 500ms ease; }
  nav.desktop-nav {
    display: none; }
  nav.mobile-nav {
    display: block; }
  @media (min-width: 768px) {
    nav {
      padding: 0 20px;
      box-sizing: border-box;
      margin: 20px auto 0;
      max-width: 1024px;
      position: relative;
      background-color: transparent;
      -webkit-backdrop-filter: blur(0px);
      backdrop-filter: blur(0px); }
      nav.desktop-nav {
        display: block; }
      nav.mobile-nav {
        display: none; } }
  .no-backdropfilter nav {
    background: #080808; }
    @media (min-width: 768px) {
      .no-backdropfilter nav {
        background: transparent; } }
  nav > menu {
    display: block;
    padding: 0 6px;
    float: left;
    overflow-y: hidden;
    max-height: 0;
    position: relative;
    background: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
    top: 0;
    left: 0;
    -webkit-transition: max-height 500ms ease;
    -moz-transition: max-height 500ms ease;
    transition: max-height 500ms ease;
    z-index: 200;
    margin-top: 0;
    box-sizing: border-box;
    width: 100%;
    text-align: left; }
    @media (min-width: 768px) {
      nav > menu {
        float: right;
        text-align: right;
        right: 0;
        background: transparent; } }
    .no-backdropfilter nav > menu {
      background: #080808;
      -webkit-transition: max-height 300ms ease;
      -moz-transition: max-height 300ms ease;
      transition: max-height 300ms ease; }
      @media (min-width: 768px) {
        .no-backdropfilter nav > menu {
          background: transparent; } }
    nav > menu li {
      margin: 0 12px 0 12px;
      padding: 0;
      list-style: none;
      box-sizing: border-box;
      display: inline-block;
      line-height: 45px; }
    nav > menu span a {
      color: #757575;
      text-decoration: none;
      display: block;
      font-size: 14px;
      font-weight: 300; }
      nav > menu span a:hover {
        color: white; }
    nav > menu li {
      display: block;
      margin: 0;
      padding: 0 8px 15px;
      box-sizing: border-box; }
    nav > menu > li {
      -webkit-transition: all 200ms cubic-bezier(0.17, 0.67, 0.38, 1.46);
      -moz-transition: all 200ms cubic-bezier(0.17, 0.67, 0.38, 1.46);
      transition: all 200ms cubic-bezier(0.17, 0.67, 0.38, 1.46);
      -webkit-transform: translateY(-200px);
      -moz-transform: translateY(-200px);
      -ms-transform: translateY(-200px);
      -o-transform: translateY(-200px);
      transform: translateY(-200px); }
      nav > menu > li > span a {
        text-decoration: none;
        font-size: 16px;
        font-weight: 700;
        color: #ffffff;
        height: 32px;
        line-height: 30px; }
      @media (min-width: 768px) {
        nav > menu > li {
          width: 33%;
          float: left; } }
    nav > menu .sub-links li {
      padding: 0;
      line-height: 26px; }
    nav > menu .sub-links a {
      display: inline-block;
      text-decoration: none;
      height: 26px;
      line-height: 24px;
      font-size: 14px;
      font-weight: 400;
      opacity: 1;
      color: #757575; }
      nav > menu .sub-links a:hover {
        color: #ffffff; }
    @media (min-width: 768px) {
      nav > menu {
        display: block;
        max-height: 100vh;
        overflow: visible; }
        nav > menu .sub-links {
          overflow: hidden;
          display: block;
          position: absolute;
          top: 45px;
          left: 0;
          width: 100%;
          padding: 0 4px;
          max-height: 0;
          line-height: 30px;
          background: rgba(38, 38, 38, 0.7);
          -webkit-backdrop-filter: blur(40px);
          backdrop-filter: blur(40px);
          -webkit-transition: max-height 500ms ease;
          -moz-transition: max-height 500ms ease;
          transition: max-height 500ms ease; }
          .no-backdropfilter nav > menu .sub-links {
            background: #252525; } }
      @media (min-width: 768px) and (min-width: 768px) {
        .no-backdropfilter nav > menu .sub-links {
          background: transparent; } }
    @media (min-width: 768px) {
          nav > menu .sub-links li {
            display: inline-block;
            width: auto;
            padding: 0 8px; }
        nav > menu > li {
          float: none;
          width: auto;
          padding: 0 6px;
          display: inline-block;
          -webkit-transform: none;
          -moz-transform: none;
          -ms-transform: none;
          -o-transform: none;
          transform: none; }
          nav > menu > li > span a {
            height: 45px;
            line-height: 45px;
            font-size: 14px;
            font-weight: 400;
            color: #757575; }
          nav > menu > li > span.active a {
            color: #0076ff; }
        nav > menu > li:hover > a {
          color: #ffffff; }
        nav > menu > li:hover menu {
          z-index: 1;
          max-height: 200px;
          overflow: hidden; } }
  nav .logo {
    display: block;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -22.5px;
    height: 45px;
    z-index: 300; }
    nav .logo img.logo-icon {
      width: 45px;
      height: 45px; }
    nav .logo img.logo-trademark {
      display: none;
      width: 175px;
      height: 45px; }
    @media (min-width: 768px) {
      nav .logo {
        left: 0;
        margin-left: 20px; }
        nav .logo img.logo-icon, nav .logo img.logo-trademark {
          display: inline-block; } }
  nav .full-logo {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 45px;
    height: 45px;
    z-index: 300; }
    nav .full-logo img {
      width: 45px;
      height: 45px; }
  nav .download {
    position: absolute;
    line-height: 45px;
    right: 0;
    top: 0;
    margin: 0 15px 0 12px;
    text-decoration: none;
    color: #0076ff; }
    nav .download:hover {
      color: white; }

/* ----- Hamburger ----- */
.hamburger {
  position: relative;
  padding: 22px 15px;
  display: block;
  float: left;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  background-color: transparent;
  color: #757575;
  width: 20px;
  height: 1px;
  z-index: 100; }
  @media (min-width: 768px) {
    .hamburger {
      display: none; } }
  @media (min-width: 768px) {
    .pre-release .hamburger {
      display: none; } }
  .hamburger:hover {
    color: #ffffff; }
    .hamburger:hover .bar, .hamburger:hover .bar::before, .hamburger:hover .bar::after {
      background-color: #ffffff; }

.bar {
  display: block;
  top: 50%;
  margin-top: -1px; }
  .bar, .bar::before, .bar::after {
    width: 20px;
    height: 1px;
    background-color: #757575;
    position: absolute; }
  .bar::before, .bar::after {
    content: "";
    display: block;
    transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear; }
  .bar::before {
    top: -6px; }
  .bar::after {
    bottom: -6px; }

/* ------- Nav Activation --------- */
.nav-transition-on menu {
  display: block; }

.show-nav nav {
  height: auto;
  overflow: hidden; }
  .show-nav nav > menu {
    max-height: 100vh; }
    .show-nav nav > menu menu {
      float: none; }
    .show-nav nav > menu > li {
      -webkit-transform: translateY(0px);
      -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
      -o-transform: translateY(0px);
      transform: translateY(0px); }
.show-nav .hamburger .bar::before,
.show-nav .hamburger .bar::after {
  opacity: 0;
  transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear; }
.show-nav .hamburger .bar::before {
  top: 0; }
.show-nav .hamburger .bar::after {
  bottom: 0; }

footer {
  padding: 0;
  box-sizing: border-box; }
  footer .sub-footer {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    padding: 0 15px !important;
    box-sizing: border-box;
    background-color: #000000 !important;
    -webkit-font-smoothing: initial; }
    @media (min-width: 768px) {
      footer .sub-footer {
        height: 30px; } }
  footer menu li {
    display: inline-block; }
  footer menu#social-nav {
    display: block;
    position: relative;
    text-align: center;
    height: 50px;
    line-height: 50px;
    padding: 0 10px !important;
    background-color: transparent !important;
    margin-bottom: 20px; }
    footer menu#social-nav a {
      color: #666666;
      font-size: 14px;
      font-weight: 300;
      letter-spacing: 0.01em;
      padding: 0 10px; }
      footer menu#social-nav a:hover {
        color: #0076ff; }
  footer menu#copyright-info {
    display: block;
    position: relative;
    text-align: center;
    height: auto;
    line-height: 16px;
    padding: 7px 0 7px;
    box-sizing: border-box; }
    footer menu#copyright-info li {
      color: #565656;
      font-size: 10px;
      letter-spacing: 0.02em;
      font-weight: 400;
      padding: 0; }
      @media (min-width: 768px) {
        footer menu#copyright-info li {
          font-size: 11px; } }
    @media (min-width: 768px) {
      footer menu#copyright-info {
        height: 30px;
        display: inline-block;
        text-align: left;
        float: left;
        padding: 7px 0; } }
  footer menu#corporate-nav {
    display: block;
    position: relative;
    text-align: center;
    height: 30px;
    line-height: 16px;
    padding: 7px 0 !important;
    box-sizing: border-box; }
    footer menu#corporate-nav li {
      padding-right: 12px;
      margin-right: 10px;
      border-right: 1px solid #232323; }
      footer menu#corporate-nav li a {
        color: #565656;
        font-size: 10px;
        letter-spacing: 0.02em;
        font-weight: 400; }
        @media (min-width: 768px) {
          footer menu#corporate-nav li a {
            font-size: 11px; } }
        footer menu#corporate-nav li a:hover {
          text-decoration: underline; }
      footer menu#corporate-nav li:last-of-type {
        padding-right: 6px;
        margin-right: 0;
        border-right: none; }
    @media (min-width: 768px) {
      footer menu#corporate-nav {
        display: inline-block;
        text-align: right;
        float: right; } }

/* Colour ------------------------------------ */
/* Styles ------------------------------------ */
/* Responsiveness ---------------------------- */
/* 768px */
/* 1024px */
/* 1200px */
/* ITEM EXTRAS */
/* CSS PREFIXES */
/*
@mixin transform($value) {
  -webkit-transform: $value;
  -moz-transform: $value;
  -ms-transform: $value;
  -o-transform: $value;
  transform: $value;
}

@mixin transition($value) {
  -webkit-transform: $value;
  -moz-transform: $value;
  -ms-transform: $value;
  -o-transform: $value;
  transform: $value;
}
*/
/* ----- BUILDING BLOCKS  ----- */
.block {
  position: relative;
  width: 100%;
  overflow: hidden;
  text-align: left;
  background-color: #f5f5f5;
  padding: 0 10px;
  box-sizing: border-box;
  z-index: 20; }
  .block.full {
    padding: 0; }
  @media (min-width: 768px) {
    .block {
      padding: 0 40px; } }
  .block.alt {
    background-color: #ffffff; }
  .block.transparent {
    background-color: transparent; }
  .block.image img {
    display: block;
    width: auto;
    margin: 0 auto;
    height: 600px; }
  .block .inner-block {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 0 20px;
    box-sizing: border-box; }
    @media (min-width: 768px) {
      .block .inner-block {
        max-width: 768px;
        padding: 0 30px; } }
    @media (min-width: 1024px) {
      .block .inner-block {
        max-width: 1024px; } }
    @media (min-width: 1200px) {
      .block .inner-block {
        max-width: 1200px; } }
    .block .inner-block.padding {
      padding: 0 10px;
      box-sizing: border-box; }
      @media (min-width: 768px) {
        .block .inner-block.padding {
          padding: 0 30px; } }
      @media (min-width: 1024px) {
        .block .inner-block.padding {
          padding: 0 60px; } }
  .block.base h2 {
    margin-top: 100px; }
  .block.base .product-link {
    margin-bottom: 0; }
    .block.base .product-link a {
      color: #45686a; }
  .block.base .inner-block {
    margin-bottom: 120px; }

.people-grid {
  display: block;
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0 10px;
  box-sizing: border-box; }
  @media (min-width: 768px) {
    .people-grid {
      max-width: 768px;
      padding: 0 15px; } }
  @media (min-width: 1024px) {
    .people-grid {
      max-width: 1024px;
      padding: 0 10px; } }
  @media (min-width: 1200px) {
    .people-grid {
      max-width: 1200px; } }

.people-grid, #modal {
  display: block;
  text-align: center;
  font-size: 0; }
  .people-grid .badge, #modal .badge {
    margin-bottom: 30px; }
  .people-grid .person-item, #modal .person-item {
    display: inline-block;
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 10px 20px;
    box-sizing: content-box;
    font-size: initial;
    border-radius: 8px;
    overflow: hidden;
    vertical-align: top;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1), 0 20px 40px 0 rgba(0, 0, 0, 0.1);
    background-color: #000000; }
    @media (min-width: 768px) {
      .people-grid .person-item, #modal .person-item {
        width: 162px;
        height: 162px; } }
    @media (min-width: 1024px) {
      .people-grid .person-item, #modal .person-item {
        width: 208px;
        height: 208px;
        margin: 0 20px 40px; } }
    @media (min-width: 1200px) {
      .people-grid .person-item, #modal .person-item {
        width: 215px;
        height: 215px;
        margin: 0 20px 40px; } }
    .people-grid .person-item .portrait-container, #modal .person-item .portrait-container {
      display: block;
      width: 100%;
      height: auto;
      min-height: 150px;
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      background-color: #000000; }
      .people-grid .person-item .portrait-container.hiring, #modal .person-item .portrait-container.hiring {
        background-size: 100%;
        background-position: center center;}
        
      @media (min-width: 768px) {
        .people-grid .person-item .portrait-container, #modal .person-item .portrait-container {
          min-height: 162px; } }
      @media (min-width: 1024px) {
        .people-grid .person-item .portrait-container, #modal .person-item .portrait-container {
          min-height: 208px; } }
      @media (min-width: 1200px) {
        .people-grid .person-item .portrait-container, #modal .person-item .portrait-container {
          min-height: 215px; } }
      .people-grid .person-item .portrait-container img, #modal .person-item .portrait-container img {
        width: 100px;
        top: 15px;
        right: 20px;
        position: absolute;
        display: none;
        opacity: 0; }
    .people-grid .person-item .details-container, #modal .person-item .details-container {
      background-color: #ffffff;
      overflow: hidden; }
      .people-grid .person-item .details-container .name, #modal .person-item .details-container .name {
        margin: 30px 0 5px;
        padding: 0 20px; }
      .people-grid .person-item .details-container .title, #modal .person-item .details-container .title {
        margin: 5px 0 15px;
        padding: 0 20px;
        font-weight: 500; }
      .people-grid .person-item .details-container p, #modal .person-item .details-container p {
        margin: 0;
        padding: 0 30px 30px;
        box-sizing: border-box;
        font-size: 16px;
        line-height: 20px;
        font-weight: 400;
        color: #444444;
        letter-spacing: -0.2px; }
        .people-grid .person-item .details-container p:nth-child(2), #modal .person-item .details-container p:nth-child(2) {
          margin-top: 15px; }

.badge {
  display: inline-block;
  width: auto;
  height: 40px;
  font-size: 18px;
  font-weight: 800;
  line-height: 40px;
  letter-spacing: -0.4px;
  border-radius: 10px;
  background-color: #0498E0;
  color: #ffffff;
  margin: 0 auto;
  text-align: center;
  box-sizing: border-box;
  transition: all 0.2s ease-in; }
  .badge.fix-left {
    left: 0;
    margin: 0; }
  .badge.fix-right {
    right: 0;
    margin: 0; }
  .badge a {
    display: block;
    color: inherit;
    padding: 0 18px; }
  .badge:hover {
    background-color: #08a7fc; }

#sub-heading h1 {
  margin: 60px 0 50px; }

#top-vid {
  margin-top: -45px;
  height: 800px; }

#center-vid {
  height: 800px; }

.inner-block.full-center {
  position: absolute;
  top: 50%;
  text-align: center;
  max-width: 100%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%); }

/* Colour ------------------------------------ */
/* Styles ------------------------------------ */
/* Responsiveness ---------------------------- */
/* 768px */
/* 1024px */
/* 1200px */
/* ITEM EXTRAS */
/* CSS PREFIXES */
/*
@mixin transform($value) {
  -webkit-transform: $value;
  -moz-transform: $value;
  -ms-transform: $value;
  -o-transform: $value;
  transform: $value;
}

@mixin transition($value) {
  -webkit-transform: $value;
  -moz-transform: $value;
  -ms-transform: $value;
  -o-transform: $value;
  transform: $value;
}
*/
@keyframes bounceArrow {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0); }
  40% {
    transform: translateY(-20px); }
  60% {
    transform: translateY(-10px); } }
.scroll-arrow {
  display: block;
  position: fixed;
  width: 100%;
  height: 100vh;
  text-align: center;
  bottom: 0;
  pointer-events: none;
  z-index: 15; }
  .scroll-arrow:before {
    content: "\2b07";
    display: block;
    position: absolute;
    font-family: "IconFont", sans-serif;
    font-size: 18px;
    line-height: 50px;
    color: #ffffff;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50px;
    height: 50px;
    margin: 0 auto 0;
    pointer-events: none;
    opacity: 1;
    z-index: 15;
    -moz-animation: bounceArrow 2s infinite;
    -webkit-animation: bounceArrow 2s infinite;
    animation: bounceArrow 2s infinite; }
    @media (max-width: 767px) {
      .scroll-arrow:before {
        color: #000000; } }
  .partial .scroll-arrow:before {
    opacity: 0;
    pointer-events: none; }

#savage-intro {
  display: block;
  position: fixed;
  width: 100%;
  height: 100vh;
  text-align: center;
  top: 0;
  background-image: url("http://savage.si/assets/images/savage-bg.gif");
  background-size: cover;
  background-position: 75% center;
  z-index: 10; }
  #savage-intro:after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10; }
  .partial #savage-intro img.savage-logo {
    opacity: 0;
    pointer-events: none; }
  .partial #savage-intro:after {
    background-color: rgba(0, 0, 0, 0.5); }
  @media (min-width: 768px) {
    #savage-intro {
      background-position: 75% center; } }
  @media (min-width: 1024px) {
    #savage-intro {
      background-position: center center; } }
  #savage-intro img.savage-logo {
    top: 15px;
    right: 20px;
    margin: 0 auto;
    display: block;
    position: absolute;
    width: 120px;
    text-align: center;
    opacity: 1;
    z-index: 20;
    pointer-events: all;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out; }
    @media (min-width: 768px) {
      #savage-intro img.savage-logo {
        top: 20px;
        right: 30px;
        width: 150px; } }
    @media (min-width: 1024px) {
      #savage-intro img.savage-logo {
        top: 20px;
        right: 30px;
        width: 200px; } }

#procreate-text {
  margin-top: 100vh; }
  #procreate-text sup.register-icon {
    font-size: 24px; }
    @media (min-width: 768px) {
      #procreate-text sup.register-icon {
        font-size: 28px; } }
    @media (min-width: 1024px) {
      #procreate-text sup.register-icon {
        font-size: 32px; } }
  #procreate-text .inner-block {
    padding-top: 25px; }
  @media (min-width: 768px) {
    #procreate-text .inner-block {
      padding-top: 30px; } }
  @media (min-width: 1024px) {
    #procreate-text .inner-block {
      padding-top: 50px; } }
#procreate-object .device-savage {
  display: block;
  position: relative;
  max-width: 2000px;
  height: auto;
  z-index: 3;
  width: 160%;
  left: -30%;
  margin: 0 auto; }
  #procreate-object .device-savage img {
    width: 100%; }
#procreate-object .inner-block {
  padding-top: 25px; }
@media (min-width: 768px) {
  #procreate-object .inner-block {
    padding-top: 30px; } }
@media (min-width: 1024px) {
  #procreate-object .inner-block {
    padding-top: 50px; } }

#companies-text strong {
  font-weight: 700; }
#companies-text .inner-block {
  padding-top: 10px;
  padding-bottom: 10px; }
@media (min-width: 768px) {
  #companies-text .inner-block {
    padding-top: 15px;
    padding-bottom: 10px; } }
@media (min-width: 1024px) {
  #companies-text .inner-block {
    padding-top: 20px;
    padding-bottom: 10px; } }
#companies-trademarks {
  padding-bottom: 40px; }
  #companies-trademarks .trademark-images {
    text-align: center; }
    #companies-trademarks .trademark-images img {
      display: inline-block;
      height: 45px; }
  @media (min-width: 768px) {
    #companies-trademarks {
      padding-bottom: 60px; }
      #companies-trademarks .trademark-images {
        text-align: center;
        padding: 0 30px; }
        #companies-trademarks .trademark-images img {
          display: inline-block;
          height: 90px; } }
  @media (min-width: 1024px) {
    #companies-trademarks {
      padding-bottom: 80px; } }

#savage-text .inner-block {
  padding-top: 25px; }
@media (min-width: 768px) {
  #savage-text .inner-block {
    padding-top: 30px; } }
@media (min-width: 1024px) {
  #savage-text .inner-block {
    padding-top: 50px; } }
#savage-people {
  padding: 25px 0; }
  @media (min-width: 768px) {
    #savage-people {
      padding: 30px 0; } }
  @media (min-width: 1024px) {
    #savage-people {
      padding: 50px 0; } }

footer#savage-footer {
  background-color: transparent !important;
  margin: 60px 0 70px;
  box-sizing: border-box; }
  @media (max-width: 767px) {
    footer#savage-footer {
      min-height: 100vh;
      margin: 0;
      padding: 60px 0; } }
  footer#savage-footer .inner-block {
    font-size: 0; }
    footer#savage-footer .inner-block ul {
      margin: 0;
      padding: 0; }
  footer#savage-footer .savage-logo__footer {
    display: block;
    position: relative;
    width: 200px;
    left: 0;
    margin: 0 0 20px; }
  footer#savage-footer .left-block {
    display: inline-block;
    position: relative;
    width: 100%;
    vertical-align: top;
    padding-right: 35px;
    box-sizing: border-box; }
    @media (min-width: 768px) {
      footer#savage-footer .left-block {
        width: 60%; } }
    @media (min-width: 1024px) {
      footer#savage-footer .left-block {
        width: 70%; } }
    footer#savage-footer .left-block p {
      font-size: 12px;
      line-height: 20px;
      color: #ffffff;
      text-align: left;
      letter-spacing: -0.2px;
      margin-bottom: 0; }
      @media (max-width: 767px) {
        footer#savage-footer .left-block p {
          margin-bottom: 40px; } }
      footer#savage-footer .left-block p a {
        color: inherit; }
  footer#savage-footer .right-block {
    display: inline-block;
    position: relative;
    width: 100%;
    vertical-align: top;
    font-size: 0; }
    @media (min-width: 768px) {
      footer#savage-footer .right-block {
        width: 40%; } }
    @media (min-width: 1024px) {
      footer#savage-footer .right-block {
        width: 30%; } }
    footer#savage-footer .right-block li {
      font-size: 12px;
      line-height: 20px;
      color: #ffffff;
      text-align: left;
      letter-spacing: -0.2px;
      list-style: none; }
      footer#savage-footer .right-block li a {
        color: inherit;
        text-decoration: underline; }
    footer#savage-footer .right-block .col-1 {
      display: inline-block;
      position: relative;
      width: 50%;
      vertical-align: top; }
    footer#savage-footer .right-block .col-2 {
      display: inline-block;
      position: relative;
      width: 50%;
      vertical-align: top; }

/* Colour ------------------------------------ */
/* Styles ------------------------------------ */
/* Responsiveness ---------------------------- */
/* 768px */
/* 1024px */
/* 1200px */
/* ITEM EXTRAS */
/* CSS PREFIXES */
/*
@mixin transform($value) {
  -webkit-transform: $value;
  -moz-transform: $value;
  -ms-transform: $value;
  -o-transform: $value;
  transform: $value;
}

@mixin transition($value) {
  -webkit-transform: $value;
  -moz-transform: $value;
  -ms-transform: $value;
  -o-transform: $value;
  transform: $value;
}
*/
*::-webkit-input-placeholder {
  color: #757575;
  font-weight: 400; }
*:-moz-placeholder {
  color: #757575;
  font-weight: 400; }
*::-moz-placeholder {
  color: #757575;
  font-weight: 400; }
*:-ms-input-placeholder {
  color: #757575;
  font-weight: 400; }
*::placeholder {
  color: #757575;
  font-weight: 400; }

input,
select,
textarea,
fieldset {
  font-family: var(--form-field-font-family);
  font-size: var(--form-field-font-size);
  box-sizing: border-box;
  margin-top: 0;
  margin-bottom: 0; }

label {
  vertical-align: middle; }

input[type=text],
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=time],
input[type=url],
input[type=week] {
  height: var(--form-field-height);
  padding: var(--form-field-padding-y) var(--form-field-padding-x);
  vertical-align: middle;
  -webkit-appearance: none; }

textarea {
  line-height: 1.75;
  padding: var(--form-field-padding-y) var(--form-field-padding-x); }

fieldset, form, label,
table, tbody, tfoot, thead, tr, th, td,
figure, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 12px;
  vertical-align: baseline; }

fieldset {
  display: block;
  position: relative;
  width: 100%;
  max-width: 1024px;
  height: auto;
  margin-bottom: 5px;
  box-sizing: border-box; }

label {
  display: block;
  position: relative;
  font-size: 12px; }

.complex .field-item {
  display: block;
  position: relative;
  padding: 12px 0 6px;
  box-sizing: border-box;
  font-size: 0; }
  .complex .field-item .drop-image {
    display: inline-block;
    position: relative; }
    .complex .field-item .drop-image.avatarSize {
      width: 120px;
      height: 120px; }
    .complex .field-item .drop-image.coverSize {
      width: 440px;
      height: 120px; }
    .complex .field-item .drop-image .drag-message {
      font-family: "IconFont";
      font-size: 24px;
      text-align: center;
      line-height: 124px;
      color: #0076ff;
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(242, 242, 242, 0.75);
      border: 2px dashed #0076ff;
      border-radius: 8px;
      box-sizing: content-box;
      top: -2px;
      left: -2px;
      opacity: 0; }
    .complex .field-item .drop-image .hover-message {
      font-size: 10px;
      line-height: 124px;
      font-weight: 700;
      text-align: center;
      color: #555555;
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(242, 242, 242, 0.75);
      border: 2px dashed #757575;
      border-radius: 8px;
      box-sizing: content-box;
      top: -2px;
      left: -2px;
      opacity: 0; }
    .complex .field-item .drop-image.hover-active .drag-message {
      opacity: 1; }
    .complex .field-item .drop-image:hover .hover-message {
      opacity: 1; }
    .complex .field-item .drop-image .avatar-image {
      border-radius: 6px;
      width: 120px;
      height: 120px;
      object-fit: cover; }
    .complex .field-item .drop-image .cover-image {
      border-radius: 6px;
      width: 440px;
      height: 120px;
      object-fit: cover; }
  .complex .field-item .avatar-options, .complex .field-item .cover-options {
    display: inline-block;
    position: relative;
    height: 120px;
    margin-left: 18px;
    vertical-align: top;
    padding: 22px 0;
    box-sizing: border-box; }
    .complex .field-item .avatar-options input, .complex .field-item .cover-options input {
      display: block;
      position: relative;
      margin: 8px 0;
      width: 100px;
      padding: 0;
      font-size: 11px;
      height: 26px;
      line-height: 27px; }
      .complex .field-item .avatar-options input.red, .complex .field-item .cover-options input.red {
        background-color: #ff3d00;
        box-shadow: 0 0 0 0 rgba(255, 61, 0, 0.2), 0 0 0 0 rgba(255, 61, 0, 0.2), 0 0 0 0 rgba(255, 61, 0, 0.2), 0 0 0 0 rgba(255, 61, 0, 0.2), 0 0 0 0 rgba(255, 61, 0, 0.2); }
        .complex .field-item .avatar-options input.red:hover, .complex .field-item .cover-options input.red:hover {
          box-shadow: 0 16px 16px 0 rgba(255, 61, 0, 0.2), 0 8px 8px 0 rgba(255, 61, 0, 0.2), 0 4px 4px 0 rgba(255, 61, 0, 0.2), 0 2px 2px 0 rgba(255, 61, 0, 0.2), 0 1px 1px 0 rgba(255, 61, 0, 0.2); }
  .complex .field-item-checkbox {
    display: block;
    position: relative;
    padding: 12px 0 6px;
    box-sizing: border-box;
    font-size: 0; }
    .complex .field-item-checkbox label.checkbox-label {
      display: inline-block;
      width: 120px;
      height: 30px;
      line-height: 30px;
      font-size: 12px;
      font-weight: 500;
      color: #757575;
      text-align: right;
      padding: 0 12px 0 0;
      box-sizing: border-box;
      vertical-align: top;
      -webkit-tap-highlight-color: transparent; }
    .complex .field-item-checkbox label.checkbox-toggle {
      display: inline-block;
      position: relative;
      width: auto;
      height: 30px;
      margin: 0;
      -webkit-tap-highlight-color: transparent; }
    .complex .field-item-checkbox .inner {
      display: inline-block;
      position: absolute;
      width: 50px;
      height: 30px;
      border-radius: 15px;
      border: 2px solid #e2e2e2;
      background: #f2f2f2;
      transition: all .2s ease;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent; }
    .complex .field-item-checkbox .bullet {
      display: inline-block;
      position: relative;
      width: 26px;
      height: 26px;
      background: white;
      border-radius: 50%;
      transition: all .3s ease;
      top: 2px;
      left: 2px;
      box-sizing: border-box;
      animation: .2s bullet-large;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
      -webkit-tap-highlight-color: transparent; }
    .complex .field-item-checkbox input:checked ~ .inner {
      border: 15px solid #1a85ff;
      transition: all .2s ease; }
    .complex .field-item-checkbox input:checked ~ .bullet {
      left: 22px;
      transition: all .4s ease;
      animation: .4s bullet-large;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25); }
@keyframes bullet-large {
  0%, 100% {
    width: 26px; }
  40% {
    width: 40px; } }
    .complex .field-item-checkbox .field-error, .complex .field-item-checkbox .field-message {
      display: block;
      position: relative;
      font-size: 11px;
      margin-left: 120px; }
    .complex .field-item-checkbox .field-error {
      display: none;
      color: #ff3d00; }
    .complex .field-item-checkbox .field-message {
      color: #757575; }
      .complex .field-item-checkbox .field-message a {
        color: #1a85ff;
        text-decoration: none; }
  .complex .field-item label {
    display: inline-block;
    width: 120px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    font-weight: 500;
    color: #757575;
    text-align: right;
    padding: 0 12px 0 0;
    box-sizing: border-box;
    vertical-align: top; }
  .complex .field-item input[type=text], .complex .field-item input[type=email], .complex .field-item input[type=number],
  .complex .field-item input[type=password], .complex .field-item select {
    display: inline-block;
    margin-bottom: 6px; }
    .complex .field-item input[type=text]:nth-of-type(2), .complex .field-item input[type=email]:nth-of-type(2), .complex .field-item input[type=number]:nth-of-type(2),
    .complex .field-item input[type=password]:nth-of-type(2), .complex .field-item select:nth-of-type(2) {
      margin-left: 6px; }
  .complex .field-item textarea {
    display: inline-block;
    margin-bottom: 0;
    max-width: 566px; }
    .complex .field-item textarea:nth-of-type(2) {
      margin-left: 6px; }
  .complex .field-item .field-error, .complex .field-item .field-message {
    display: block;
    position: relative;
    font-size: 11px;
    margin-left: 120px; }
  .complex .field-item .field-error {
    display: none;
    color: #ff3d00; }
  .complex .field-item .field-message {
    color: #757575; }
    .complex .field-item .field-message a {
      color: #1a85ff;
      text-decoration: none; }
.complex hr {
  background-color: #f5f5f5; }

.simple .field-item {
  display: inline-block;
  position: relative;
  padding: 6px 0px 6px;
  box-sizing: border-box;
  font-size: 0;
  width: 100%;
  max-width: 280px;
  vertical-align: top; }
  .simple .field-item.spaceRight {
    margin-right: 20px; }
  .simple .field-item-checkbox {
    display: block;
    position: relative;
    padding: 12px 0 0;
    box-sizing: border-box;
    font-size: 0; }
    @media (min-width: 768px) {
      .simple .field-item-checkbox {
        padding: 6px 10px; } }
    .simple .field-item-checkbox label.checkbox-label {
      display: inline-block;
      width: 240px;
      line-height: 17px;
      font-size: 12px;
      font-weight: 500;
      color: #757575;
      text-align: left;
      padding: 0 12px 0 0;
      box-sizing: border-box;
      vertical-align: top;
      -webkit-tap-highlight-color: transparent; }
      @media (min-width: 768px) {
        .simple .field-item-checkbox label.checkbox-label {
          width: 330px;
          line-height: 15px; } }
      @media (min-width: 1024px) {
        .simple .field-item-checkbox label.checkbox-label {
          width: auto;
          line-height: 30px;
          height: 30px; } }
    .simple .field-item-checkbox label.checkbox-toggle {
      display: inline-block;
      position: absolute;
      width: 50px;
      padding: 10px 0;
      height: 30px;
      margin: 0;
      -webkit-tap-highlight-color: transparent;
      right: 0; }
      @media (min-width: 768px) {
        .simple .field-item-checkbox label.checkbox-toggle {
          right: initial;
          position: relative;
          padding: 0; } }
    .simple .field-item-checkbox .inner {
      display: inline-block;
      position: absolute;
      left: 0;
      width: 50px;
      height: 30px;
      border-radius: 15px;
      border: 2px solid #e2e2e2;
      background: #f2f2f2;
      transition: all .2s ease;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent; }
    .simple .field-item-checkbox .bullet {
      display: inline-block;
      position: relative;
      width: 26px;
      height: 26px;
      background: white;
      border-radius: 50%;
      transition: all .3s ease;
      top: 2px;
      left: -22px;
      box-sizing: border-box;
      animation: .2s bullet-large;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
      -webkit-tap-highlight-color: transparent; }
    .simple .field-item-checkbox input:checked ~ .inner {
      border: 15px solid #1a85ff;
      transition: all .2s ease; }
    .simple .field-item-checkbox input:checked ~ .bullet {
      left: -2px;
      transition: all .4s ease;
      animation: .4s bullet-large;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25); }
@keyframes bullet-large {
  0%, 100% {
    width: 26px; }
  40% {
    width: 40px; } }
    .simple .field-item-checkbox .field-error, .simple .field-item-checkbox .field-message {
      display: block;
      position: relative;
      font-size: 11px; }
    .simple .field-item-checkbox .field-error {
      display: none;
      color: #ff3d00; }
    .simple .field-item-checkbox .field-message {
      color: #757575; }
      .simple .field-item-checkbox .field-message a {
        color: #1a85ff;
        text-decoration: none; }
  .simple .field-item label {
    display: block;
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #757575;
    text-align: left;
    padding: 0 12px 0 0;
    box-sizing: border-box;
    vertical-align: top; }
  .simple .field-item input[type=text], .simple .field-item input[type=email], .simple .field-item input[type=number],
  .simple .field-item input[type=password], .simple .field-item select {
    display: inline-block;
    margin-bottom: 6px; }
    .simple .field-item input[type=text]:nth-of-type(2), .simple .field-item input[type=email]:nth-of-type(2), .simple .field-item input[type=number]:nth-of-type(2),
    .simple .field-item input[type=password]:nth-of-type(2), .simple .field-item select:nth-of-type(2) {
      margin-left: 6px; }
  .simple .field-item textarea {
    display: inline-block;
    margin-bottom: 0;
    max-width: 566px; }
    .simple .field-item textarea:nth-of-type(2) {
      margin-left: 6px; }
  .simple .field-item .field-error, .simple .field-item .field-message {
    display: block;
    position: relative;
    font-size: 11px;
    width: 280px;
    overflow: hidden; }
    .simple .field-item .field-error.disabled, .simple .field-item .field-message.disabled {
      display: none; }
    .simple .field-item .field-error.alert, .simple .field-item .field-message.alert {
      display: block; }
    .simple .field-item .field-error a, .simple .field-item .field-message a {
      color: #1a85ff;
      text-decoration: none; }
  .simple .field-item .field-error {
    display: none;
    color: #ff3d00; }
  .simple .field-item .field-message {
    color: #757575; }
.simple hr {
  background-color: #f5f5f5; }

.simple label {
  display: inline-block;
  width: 120px;
  text-align: right;
  padding: 0 12px;
  box-sizing: border-box; }
.simple input[type=text], .simple input[type=email], .simple input[type=number],
.simple input[type=password], .simple textarea, .simple select {
  display: inline-block;
  margin-bottom: 0; }

input[type=text], input[type=email], input[type=number],
input[type=password], textarea, select {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  font-weight: normal;
  color: #444444;
  font-size: 12px;
  width: 100%;
  max-width: 280px;
  height: 30px;
  line-height: 14px;
  padding: 0 12px 0;
  background: #f5f5f5;
  text-decoration: none;
  outline: none !important;
  display: block;
  margin-bottom: 6px;
  -webkit-appearance: none;
  -webkit-transition: border 0.3s ease;
  -moz-transition: border 0.3s ease;
  transition: border 0.3s ease; }

.darkMode input[type=text], .darkMode input[type=email], .darkMode input[type=number],
.darkMode input[type=password], .darkMode textarea, .darkMode select {
  border: 1px solid #383838;
  color: #969696;
  background: #151515; }
  .darkMode input[type=text]::-webkit-input-placeholder, .darkMode input[type=email]::-webkit-input-placeholder, .darkMode input[type=number]::-webkit-input-placeholder, .darkMode input[type=password]::-webkit-input-placeholder, .darkMode textarea::-webkit-input-placeholder, .darkMode select::-webkit-input-placeholder {
    color: #444444;
    font-weight: 400; }
  .darkMode input[type=text]:-moz-placeholder, .darkMode input[type=email]:-moz-placeholder, .darkMode input[type=number]:-moz-placeholder, .darkMode input[type=password]:-moz-placeholder, .darkMode textarea:-moz-placeholder, .darkMode select:-moz-placeholder {
    color: #444444;
    font-weight: 400; }
  .darkMode input[type=text]::-moz-placeholder, .darkMode input[type=email]::-moz-placeholder, .darkMode input[type=number]::-moz-placeholder, .darkMode input[type=password]::-moz-placeholder, .darkMode textarea::-moz-placeholder, .darkMode select::-moz-placeholder {
    color: #444444;
    font-weight: 400; }
  .darkMode input[type=text]:-ms-input-placeholder, .darkMode input[type=email]:-ms-input-placeholder, .darkMode input[type=number]:-ms-input-placeholder, .darkMode input[type=password]:-ms-input-placeholder, .darkMode textarea:-ms-input-placeholder, .darkMode select:-ms-input-placeholder {
    color: #444444;
    font-weight: 400; }
  .darkMode input[type=text]::placeholder, .darkMode input[type=email]::placeholder, .darkMode input[type=number]::placeholder, .darkMode input[type=password]::placeholder, .darkMode textarea::placeholder, .darkMode select::placeholder {
    color: #444444;
    font-weight: 400; }
.darkMode label {
  color: #969696; }
.darkMode select.default-option {
  color: #444444;
  font-weight: 400; }
.darkMode .field-item-checkbox .inner {
  border: 2px solid #383838;
  background: #151515; }

.largeSize .field-item {
  max-width: 100%; }
  @media (min-width: 768px) {
    .largeSize .field-item {
      max-width: 265px; } }
  @media (min-width: 1024px) {
    .largeSize .field-item {
      max-width: 360px; } }
.largeSize input[type=text], .largeSize input[type=email], .largeSize input[type=number],
.largeSize input[type=password], .largeSize textarea, .largeSize select {
  height: 40px;
  line-height: 18px;
  font-size: 14px;
  max-width: 100%; }
  @media (min-width: 768px) {
    .largeSize input[type=text], .largeSize input[type=email], .largeSize input[type=number],
    .largeSize input[type=password], .largeSize textarea, .largeSize select {
      max-width: 265px; } }
  @media (min-width: 1024px) {
    .largeSize input[type=text], .largeSize input[type=email], .largeSize input[type=number],
    .largeSize input[type=password], .largeSize textarea, .largeSize select {
      max-width: 360px; } }
.largeSize .field-item-checkbox label .checkbox-label {
  width: 330px;
  line-height: 15px; }
  @media (min-width: 768px) {
    .largeSize .field-item-checkbox label .checkbox-label {
      width: 330px;
      line-height: 15px; } }
  @media (min-width: 1024px) {
    .largeSize .field-item-checkbox label .checkbox-label {
      width: auto;
      line-height: 30px; } }
.largeSize .select-wrap {
  max-width: 100%; }
  @media (min-width: 768px) {
    .largeSize .select-wrap {
      max-width: 265px; } }
  @media (min-width: 1024px) {
    .largeSize .select-wrap {
      max-width: 360px; } }
  .largeSize .select-wrap:after {
    line-height: 42px;
    height: 40px; }

input.info, select.info {
  max-width: 226px; }

input[type=text], input[type=email], input[type=number],
input[type=password], select {
  height: 30px; }

.select-wrap {
  position: relative;
  display: inline-block;
  max-width: 280px;
  width: 100%;
  height: 30px;
  margin-bottom: 6px; }
  .select-wrap:after {
    content: "\2b07";
    font-family: "IconFont";
    font-size: 12px;
    line-height: 32px;
    height: 30px;
    top: 0;
    right: 12px;
    position: absolute;
    color: #444444;
    pointer-events: none; }

select {
  text-indent: 2px; }

textarea {
  height: 60px;
  padding: 8px 12px 0;
  resize: none; }

input[type=button], input[type=submit], .btn {
  border: none;
  border-radius: 60px;
  color: white;
  font-size: 13px;
  text-align: center;
  height: 30px;
  line-height: 26px;
  padding-right: 24px;
  padding-left: 24px;
  background: #0076ff;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(0, 118, 255, 0.2), 0 0 0 0 rgba(0, 118, 255, 0.2), 0 0 0 0 rgba(0, 118, 255, 0.2), 0 0 0 0 rgba(0, 118, 255, 0.2), 0 0 0 0 rgba(0, 118, 255, 0.2);
  outline: none !important;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-appearance: none; }
  input[type=button].outline, input[type=submit].outline, .btn.outline {
    color: #0076ff;
    line-height: 24px;
    border: 1px solid #0076ff;
    box-sizing: border-box;
    background: transparent;
    box-shadow: none !important;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease; }
    input[type=button].outline:hover, input[type=submit].outline:hover, .btn.outline:hover {
      color: white;
      background-color: #0076ff; }
  input[type=button]:hover, input[type=submit]:hover, .btn:hover {
    text-decoration: none;
    box-shadow: 0 16px 16px 0 rgba(0, 118, 255, 0.2), 0 8px 8px 0 rgba(0, 118, 255, 0.2), 0 4px 4px 0 rgba(0, 118, 255, 0.2), 0 2px 2px 0 rgba(0, 118, 255, 0.2), 0 1px 1px 0 rgba(0, 118, 255, 0.2); }

.btn.outline {
  color: #0076ff;
  line-height: 28px;
  border: 1px solid #0076ff;
  box-sizing: border-box;
  background: transparent;
  box-shadow: none !important;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  .btn.outline:hover {
    color: white;
    background-color: #0076ff; }

label {
  display: block; }

label > input[type=checkbox] {
  display: none; }

.checkbox-toggle {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 22px;
  margin: 6px 0; }
  .checkbox-toggle.w50 {
    width: 50%; }
  .checkbox-toggle.w100-border {
    margin: 6px 0;
    padding-top: 12px;
    border-top: 1px solid #e2e2e2; }
  .checkbox-toggle .label {
    font-size: 12px;
    color: #444444;
    display: inline-block;
    position: absolute;
    left: 50px;
    line-height: 22px; }
  .checkbox-toggle .inner {
    display: inline-block;
    position: absolute;
    width: 40px;
    height: 22px;
    border-radius: 11px;
    border: 1px solid #e2e2e2;
    background: #f2f2f2;
    transition: all .2s ease;
    box-sizing: border-box; }
  .checkbox-toggle .bullet {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: all .3s ease;
    top: 1px;
    left: 1px;
    box-sizing: border-box; }
  .checkbox-toggle input:checked ~ .inner {
    border: 11px solid #0076ff;
    transition: all .2s ease; }
  .checkbox-toggle input:checked ~ .bullet {
    left: 19px;
    transition: all .3s ease;
    animation: .2s bullet;
    box-shadow: 0 0 4px 0 #0076ff; }

@keyframes bullet {
  0%, 100% {
    width: 20px; }
  40% {
    width: 20px; } }
/* ----- DEVICES ----- */
.device {
  position: relative; }

.device.absolute {
  position: absolute; }

.tv-wrap {
  position: relative;
  height: 555px;
  width: 100%; }

.small-ipad {
  transform: scale(0.37);
  -webkit-transform: scale(0.37); }

.device video,
.device video,
.mobile .device video + img {
  display: block !important; }

.mobile .device video,
.mobile .device video,
.device video + img {
  display: none !important; }

img.device-shadow {
  display: block;
  position: relative;
  max-width: 2000px;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none; }
  img.device-shadow.shadow-01 {
    width: 160%;
    left: -30%;
    margin: -27% auto 0; }
  img.device-shadow.shadow-02 {
    opacity: 0.7;
    width: 100%;
    left: 0;
    margin: -15.2% auto 0; }
  img.device-shadow.shadow-03 {
    opacity: 0.7;
    width: 140%;
    left: -20%;
    margin: -23.9% auto 0; }
  img.device-shadow.shadow-04 {
    width: 140%;
    left: -20%;
    margin: -15.4% auto 0; }
  img.device-shadow.shadow-05 {
    width: 120%;
    left: -10%;
    margin: -34.2% auto 0; }
  img.device-shadow.shadow-basic {
    width: 140%;
    left: -20%;
    margin: -81.9% auto 0; }

.device.iphone.black {
  display: block;
  position: relative;
  max-width: 320px;
  width: 100%;
  height: auto;
  background-size: 100%;
  background-repeat: no-repeat;
  z-index: 3; }
  .device.iphone.black.inline {
    display: inline-block; }
  .device.iphone.black img, .device.iphone.black video {
    display: block;
    position: relative;
    filter: saturate(100%);
    -webkit-filter: saturate(100%); }
  .device.iphone.black.basic {
    background-image: url("https://assets.procreate.art/img/devices/iphone-black-Basic-apple.png"); }
    .device.iphone.black.basic img, .device.iphone.black.basic video {
      padding: 25.4% 0;
      left: 8.05%;
      width: 84%;
      height: auto; }

.device.apple-watch.black {
  display: block;
  position: relative;
  max-width: 175px;
  width: 100%;
  height: auto;
  background-size: 100%;
  background-repeat: no-repeat;
  z-index: 3; }
  .device.apple-watch.black.inline {
    display: inline-block; }
  .device.apple-watch.black img, .device.apple-watch.black video {
    display: block;
    position: relative;
    filter: saturate(100%);
    -webkit-filter: saturate(100%); }
  .device.apple-watch.black.basic {
    background-image: url("https://assets.procreate.art/img/devices/apple-watch-black-sm.png"); }
    .device.apple-watch.black.basic img, .device.apple-watch.black.basic video {
      padding: 47% 0;
      left: 20%;
      width: 60%;
      height: auto; }

.device.ipad.black {
  display: block;
  position: relative;
  max-width: 2000px;
  width: 100%;
  height: auto;
  background-size: 100%;
  background-repeat: no-repeat;
  z-index: 3; }
  .device.ipad.black img, .device.ipad.black video {
    display: block;
    position: relative;
    filter: saturate(100%);
    -webkit-filter: saturate(100%); }
  .device.ipad.black.basic {
    background-image: url("https://assets.procreate.art/img/ipads/ipad-black_Basic-Vector.png"); }
    .device.ipad.black.basic img, .device.ipad.black.basic video {
      padding: 4% 0;
      left: 7.1%;
      width: 85.8%;
      height: auto; }
  .device.ipad.black.angle-01 {
    width: 160%;
    left: -30%;
    margin: 0 auto;
    background-image: url("https://assets.procreate.art/img/ipads/ipad-black_01-Vector.png"); }
    .device.ipad.black.angle-01 .mask {
      display: block;
      position: relative;
      clip-path: polygon(46.5% 3.8%, 93.8% 51%, 48% 88.8%, 4.6% 28%);
      -webkit-clip-path: polygon(46.5% 3.8%, 93.8% 51%, 48% 88.8%, 4.6% 28%);
      overflow: hidden; }
    .device.ipad.black.angle-01 img, .device.ipad.black.angle-01 video {
      margin: 0 auto;
      left: 0;
      right: 0;
      width: 100%;
      clip-path: polygon(46.5% 3.8%, 93.8% 51%, 48% 88.8%, 4.6% 28%);
      -webkit-clip-path: polygon(46.5% 3.8%, 93.8% 51%, 48% 88.8%, 4.6% 28%);
      overflow: hidden;
      height: auto; }
  .device.ipad.black.angle-02 {
    left: 0;
    margin: 0 auto;
    background-image: url("https://assets.procreate.art/img/ipads/ipad-black_02-Vector.png"); }
    .device.ipad.black.angle-02 .mask {
      display: block;
      position: relative;
      clip-path: polygon(22.8% 15.3%, 92.4% 5.3%, 76.6% 93.3%, 4.8% 84.5%);
      -webkit-clip-path: polygon(22.8% 15.3%, 92.4% 5.3%, 76.6% 93.3%, 4.8% 84.5%);
      overflow: hidden; }
    .device.ipad.black.angle-02 img, .device.ipad.black.angle-02 video {
      margin: 0 auto;
      left: 0;
      right: 0;
      width: 100%;
      clip-path: polygon(22.8% 15.3%, 92.4% 5.3%, 76.6% 93.3%, 4.8% 84.5%);
      -webkit-clip-path: polygon(22.8% 15.3%, 92.4% 5.3%, 76.6% 93.3%, 4.8% 84.5%);
      overflow: hidden;
      height: auto; }
  .device.ipad.black.angle-03 {
    left: 0;
    margin: 0 auto;
    background-image: url("https://assets.procreate.art/img/ipads/ipad-black_03-Vector.png"); }
    .device.ipad.black.angle-03 .mask {
      display: block;
      position: relative;
      clip-path: polygon(8.5% 5.1%, 87% 12.7%, 94.3% 85.9%, 8.9% 93.8%);
      -webkit-clip-path: polygon(8.5% 5.1%, 87% 12.7%, 94.3% 85.9%, 8.9% 93.8%);
      overflow: hidden; }
    .device.ipad.black.angle-03 img, .device.ipad.black.angle-03 video {
      margin: 0 auto;
      left: 0;
      right: 0;
      width: 100%;
      clip-path: polygon(8.5% 5.1%, 87% 12.7%, 94.3% 85.9%, 8.9% 93.8%);
      -webkit-clip-path: polygon(8.5% 5.1%, 87% 12.7%, 94.3% 85.9%, 8.9% 93.8%);
      overflow: hidden;
      height: auto; }
  .device.ipad.black.angle-04 {
    left: -9%;
    width: 118%;
    margin: 0 auto;
    background-image: url("https://assets.procreate.art/img/ipads/ipad-black_04-Vector.png"); }
    .device.ipad.black.angle-04 .mask {
      display: block;
      position: relative;
      clip-path: polygon(16.7% 3.9%, 83.4% 3.9%, 92.9% 91.3%, 7.1% 91.3%);
      -webkit-clip-path: polygon(16.7% 3.9%, 83.4% 3.9%, 92.9% 91.3%, 7.1% 91.3%);
      overflow: hidden; }
    .device.ipad.black.angle-04 img, .device.ipad.black.angle-04 video {
      margin: 0 auto;
      left: 0;
      right: 0;
      width: 100%;
      clip-path: polygon(16.7% 3.9%, 83.4% 3.9%, 92.9% 91.3%, 7.1% 91.3%);
      -webkit-clip-path: polygon(16.7% 3.9%, 83.4% 3.9%, 92.9% 91.3%, 7.1% 91.3%);
      overflow: hidden;
      height: auto; }
  .device.ipad.black.angle-05 {
    width: 120%;
    left: -10%;
    margin: 0 auto;
    background-image: url("https://assets.procreate.art/img/ipads/ipad-black_05-Vector.png"); }
    .device.ipad.black.angle-05 .mask {
      display: block;
      position: relative;
      clip-path: polygon(34.1% 2.9%, 92.9% 9.3%, 66% 90.3%, 4.6% 57.5%);
      -webkit-clip-path: polygon(34.1% 2.9%, 92.9% 9.3%, 66% 90.3%, 4.6% 57.5%);
      overflow: hidden; }
    .device.ipad.black.angle-05 img, .device.ipad.black.angle-05 video {
      margin: 0 auto;
      left: 0;
      right: 0;
      width: 100%;
      clip-path: polygon(34.1% 2.9%, 92.9% 9.3%, 66% 90.3%, 4.6% 57.5%);
      -webkit-clip-path: polygon(34.1% 2.9%, 92.9% 9.3%, 66% 90.3%, 4.6% 57.5%);
      overflow: hidden;
      height: auto; }

.text-block.floating {
  margin: 0 auto;
  max-width: 100%; }

.device.ipad.landscape .button-cont {
  position: absolute;
  z-index: 9999;
  top: 37px;
  left: 72px;
  width: 642px;
  height: 482px;
  overflow: hidden;
  display: none; }

.device.ipad.landscape .button-cont .text-cont {
  position: relative;
  width: 100%;
  z-index: 999;
  vertical-align: middle;
  display: table-cell;
  font-size: 28px;
  cursor: pointer;
  text-align: center; }

.device.ipad.landscape .button-cont .text-cont .button-text {
  display: inline-block;
  line-height: 45px;
  padding-left: 50px;
  background-image: url("play-btn.png");
  background-size: 40px 40px;
  background-repeat: no-repeat;
  height: 40px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease; }

.device.ipad.landscape .button-cont .text-cont .button-text:hover {
  opacity: 0.65; }

.device.ipad.landscape .button-cont .background-blurred {
  position: absolute;
  opacity: 0;
  top: 0px;
  width: 652px;
  height: 502px;
  background-size: 642px 482px; }

.device.ipad.side .button-cont {
  position: absolute;
  z-index: 9999;
  top: 24px;
  left: 46px;
  width: 428px;
  height: 321px;
  overflow: hidden;
  display: none; }

.device.ipad.side .button-cont .text-cont .button-text {
  display: inline-block;
  line-height: 34px;
  padding-left: 40px;
  background-image: url("play-btn.png");
  background-size: 30px 30px;
  background-repeat: no-repeat;
  height: 30px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease; }

.device.ipad.side .button-cont .text-cont .button-text:hover {
  opacity: 0.65; }

.device.ipad.side .button-cont .text-cont {
  position: relative;
  width: 100%;
  z-index: 999;
  vertical-align: middle;
  display: table-cell;
  font-size: 24px;
  cursor: pointer;
  text-align: center; }

.device.ipad.side .button-cont .background-blurred {
  position: absolute;
  opacity: 0;
  top: 0px;
  width: 458px;
  height: 344px;
  background-size: 458px 344px; }

.device.ipad.portrait {
  width: 435px;
  height: 616px;
  background-size: 435px 616px; }

.device.ipad.landscape {
  width: 785px;
  height: 555px;
  background-size: 785px 555px; }

.device.tv.landscape {
  width: 785px;
  height: 555px;
  background-size: 785px 555px; }

.device.ipad.side {
  width: 520px;
  height: 368px;
  background-size: 520px 368px; }

.device.ipad.portrait.black {
  background-image: url("ipad-portrait-black.png"); }

.device.ipad.portrait.white {
  background-image: url("ipad-portrait-white.png"); }

.device.ipad.landscape.black {
  background-image: url("ipad-landscape-black.png"); }

.device.ipad.landscape.white {
  background-image: url("ipad-landscape-white.png"); }

.device.ipad.side.black {
  background-image: url("ipad-landscape-black.png"); }

.device.ipad.side.white {
  background-image: url("ipad-landscape-white.png"); }

.device.tv.landscape.black {
  background-image: url("tv-landscape-black.png"); }

.device.iphone.portrait {
  width: 292px;
  height: 589px;
  background-size: 292px 589px; }

.layout-cols-3 .layout-cell .device.iphone.portrait {
  width: 231px;
  height: 467px;
  background-size: 231px 467px; }

.device.iphone.landscape {
  width: 626px;
  height: 311px;
  background-size: 626px 311px; }

.device.iphone.portrait.black {
  background-image: url("iphone-portrait-black.png"); }

.device.iphone.portrait.white {
  background-image: url("iphone-portrait-white.png"); }

.device.iphone.landscape.black {
  background-image: url("iphone-landscape-black.png"); }

.device.iphone.landscape.white {
  background-image: url("iphone-landscape-white.png"); }

.device img {
  position: absolute; }

.device video {
  position: absolute; }

.device.ipad.portrait img {
  top: 56px;
  left: 30px;
  width: 376px;
  height: 502px; }

.device.ipad.landscape img {
  top: 37px;
  left: 72px;
  width: 642px;
  height: 482px; }

.device.tv.landscape img {
  top: 72px;
  left: 26px;
  width: 734px;
  height: 411px; }

.device.ipad.landscape video {
  top: 37px;
  left: 72px;
  width: 642px;
  height: 482px;
  position: absolute; }

.device.ipad.side img {
  top: 24px;
  left: 47px;
  width: 426px;
  height: 320px; }

.device.ipad.side video {
  top: 24px;
  left: 47px;
  width: 426px;
  height: 320px; }

.layout-cols-2 .layout-cell .device.ipad {
  margin-top: 75px;
  margin-bottom: 75px; }

.layout-cols-2 .layout-cell:first-of-type .device.ipad {
  margin-right: auto;
  margin-left: 50px; }

.layout-cols-2 .layout-cell:last-of-type .device.ipad {
  margin-right: 50px;
  margin-left: auto; }

.layout-cols-1 .layout-cell .device.ipad.landscape {
  margin: 37px auto 90px; }

.layout-cols-1 .layout-cell .device.ipad.small-ipad.landscape {
  margin: 120px -265px 90px; }

.layout-cols-1 .layout-cell .device.tv.landscape {
  margin: -20px auto 90px; }

.device.iphone.portrait img {
  top: 69px;
  left: 19px;
  width: 254px;
  height: 450px; }

.layout-cell h4 {
  margin: 0; }

.layout-cols-3 .layout-cell .device.iphone.portrait img {
  top: 55px;
  left: 15px;
  width: 201px;
  height: 357px; }

.device.iphone.landscape img {
  top: 20px;
  left: 73px;
  width: 480px;
  height: 270px; }

.layout-cols-2 .layout-cell .device.iphone {
  margin-top: 80px;
  margin-bottom: 80px; }

.layout-cols-3 .layout-cell .device.iphone {
  margin-right: auto;
  margin-left: auto; }

.layout-cols-2 .layout-cell:first-of-type .device.iphone {
  margin-right: auto;
  margin-left: 125px; }

.layout-cols-3 .layout-cell:first-of-type .device.iphone {
  margin-right: auto;
  margin-left: 80px; }

.layout-cols-3 .layout-cell .text-block.caption-text {
  margin-right: 62px;
  margin-left: 62px;
  margin-top: 28px; }

.layout-cols-3 .layout-cell:first-of-type .text-block.caption-text {
  margin-right: 40px;
  margin-left: 90px; }

.layout-cols-3 .layout-cell:last-of-type .text-block.caption-text {
  margin-right: 90px;
  margin-left: 40px; }

.layout-cols-2 .layout-cell:last-of-type .device.iphone {
  margin-right: 95px;
  margin-left: auto; }

.layout-cols-3 .layout-cell:last-of-type .device.iphone {
  margin-right: 80px;
  margin-left: auto; }

.layout-cols-1 .layout-cell .device.iphone.landscape {
  margin: 37px auto 90px; }

/* ITEM EXTRAS */
/* CSS PREFIXES */
/*
@mixin transform($value) {
  -webkit-transform: $value;
  -moz-transform: $value;
  -ms-transform: $value;
  -o-transform: $value;
  transform: $value;
}

@mixin transition($value) {
  -webkit-transform: $value;
  -moz-transform: $value;
  -ms-transform: $value;
  -o-transform: $value;
  transform: $value;
}
*/
/* Colour ------------------------------------ */
/* Styles ------------------------------------ */
/* Responsiveness ---------------------------- */
/* 768px */
/* 1024px */
/* 1200px */
#modal {
  display: none;
  position: fixed;
  overflow-y: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding-bottom: 60px;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0);
  z-index: 150;
  -webkit-transition: 0.2s background-color ease-out;
  -moz-transition: 0.2s background-color ease-out;
  transition: 0.2s background-color ease-out; }
  #modal.show {
    background-color: rgba(255, 255, 255, 0.8); }
  @media (max-width: 767px) {
    #modal {
      height: 100%;
      overflow: hidden;
      padding-bottom: 0;
      background-color: transparent; }
      #modal.show {
        background-color: transparent; } }
  #modal .person-item {
    margin: 0 10px 60px; }
    @media (max-width: 767px) {
      #modal .person-item {
        margin: 0;
        width: 100%;
        height: 100vh;
        background-color: transparent;
        box-shadow: none;
        border-radius: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; }
        #modal .person-item .portrait-container {
          min-height: 360px;
          height: 50vh;
          background-color: #000000; }
          #modal .person-item .portrait-container .close-button {
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            width: 50px;
            height: 50px;
            background-color: #ffffff; }
            #modal .person-item .portrait-container .close-button:before {
              content: "\2715";
              font-size: 18px;
              color: #000000;
              font-family: "IconFont", sans-serif;
              line-height: 50px; }
        #modal .person-item .details-container {
          min-height: 50vh;
          margin-bottom: 30px; } }

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