/*
body, html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth
}



@media (min-width:576px) {
    h1, h2 {
        font-size: 75px
    }
}

@media (min-width:768px) {
    h1, h2 {
        font-size: 100px
    }
}

h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2
}

    h3 small, h4 small, h5 small, h6 small {
        font-weight: 400
    }

h3, h4 {
    font-size: 130%;
    margin: 80px 0 20px
}

h5, h6 {
    font-size: 115%;
    margin: 40px 0 10px
}

blockquote, ol, p, ul {
    margin: 0 0 20px
}

a {
    color: inherit
}

dd a:not(.btn), dd a:not(.btn):active, dd a:not(.btn):link, dd a:not(.btn):visited, dt a:not(.btn), dt a:not(.btn):active, dt a:not(.btn):link, dt a:not(.btn):visited, p a:not(.btn), p a:not(.btn):active, p a:not(.btn):link, p a:not(.btn):visited, td a:not(.btn), td a:not(.btn):active, td a:not(.btn):link, td a:not(.btn):visited, th a:not(.btn), th a:not(.btn):active, th a:not(.btn):link, th a:not(.btn):visited {
    text-decoration: none;
    border-bottom: 1px solid currentColor
}

    dd a:not(.btn):active:hover, dd a:not(.btn):hover, dd a:not(.btn):link:hover, dd a:not(.btn):visited:hover, dt a:not(.btn):active:hover, dt a:not(.btn):hover, dt a:not(.btn):link:hover, dt a:not(.btn):visited:hover, p a:not(.btn):active:hover, p a:not(.btn):hover, p a:not(.btn):link:hover, p a:not(.btn):visited:hover, td a:not(.btn):active:hover, td a:not(.btn):hover, td a:not(.btn):link:hover, td a:not(.btn):visited:hover, th a:not(.btn):active:hover, th a:not(.btn):hover, th a:not(.btn):link:hover, th a:not(.btn):visited:hover {
        text-decoration: none;
        border-bottom-width: 2px
    }

img {
    max-width: 100%
}

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

input[type=text], select, textarea {
    border: none;
    background: rgba(255,255,255,.7);
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    min-height: 40px;
    vertical-align: middle;
    color: #666;
    text-transform: none;
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    resize: none;
    -webkit-transition: background .5s ease;
    -o-transition: background .5s ease;
    transition: background .5s ease
}

input[type=text], select {
    padding: 5px 10px
}

textarea {
    padding: 10px
}

    input[type=text].popout, select.popout, textarea.popout {
        width: calc(100% + 40px);
        padding-left: 20px;
        padding-right: 20px;
        margin-left: -20px;
        margin-right: -20px
    }

code, pre {
    font-family: Consolas,monospace
}

code {
    color: rgba(255,255,255,.7);
    white-space: nowrap
}

pre {
    border: none;
    color: rgba(255,255,255,.7);
    text-transform: none;
    white-space: pre;
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: rgba(0,0,0,.4);
    padding: 10px 20px;
    margin: 20px -20px;
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

    pre code {
        white-space: pre
    }

        pre code.hljs {
            background: 0 0;
            padding: 0
        }

        pre code [class*=hljs-] {
            -webkit-transition: color 2s ease;
            -o-transition: color 2s ease;
            transition: color 2s ease
        }

    pre .faded {
        opacity: .4
    }

@media (min-width:576px) {
    [class*=col-xs-] + .col pre {
        border-left: 1px solid rgba(62,167,225,.7)
    }
}

@media (min-width:768px) {
    [class*=col-sm-] + .col pre {
        border-left: 1px solid rgba(62,167,225,.7)
    }
}

@media (min-width:992px) {
    [class*=col-md-] + .col pre {
        border-left: 1px solid rgba(62,167,225,.7)
    }
}

@media (min-width:1200px) {
    [class*=col-lg-] + .col pre {
        border-left: 1px solid rgba(62,167,225,.7)
    }
}

@media (min-width:1440px) {
    [class*=col-xl-] + .col pre {
        border-left: 1px solid rgba(62,167,225,.7)
    }
}

dl {
    border-bottom: 1px solid rgba(255,255,255,.5);
    display: block;
    margin: 20px -20px
}

dd, dt {
    width: 100%;
    margin: 0;
    float: none
}

dt {
    border-top: 1px solid rgba(255,255,255,.5);
    padding: 10px 20px 0 20px
}

dd {
    padding: 0 20px 10px 20px
}

@media (min-width:768px) {
    dl:after {
        content: "";
        display: block;
        clear: both
    }

    dd, dt {
        min-height: 1px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        float: left
    }

    dt {
        width: 30%;
        padding-bottom: 10px;
        clear: left
    }

    dd {
        border-top: 1px solid rgba(255,255,255,.5);
        width: 70%;
        padding-top: 10px
    }
}

dt.divider {
    font-size: 15px;
    text-transform: uppercase;
    opacity: .7;
    width: 100%;
    padding-bottom: 0;
    padding-top: 20px
}

    dt.divider + dd {
        width: 0%;
        padding: 0
    }

        dt.divider + dd + dt, dt.divider + dd + dt + dd {
            border-top: none
        }

iframe {
    overflow: hidden
}

.hidden {
    display: none !important
}

.visible {
    display: block !important
}

@media (min-width:576px) {
    .hidden-xs {
        display: none !important
    }

    .visible-xs {
        display: block !important
    }
}

@media (min-width:768px) {
    .hidden-sm {
        display: none !important
    }

    .visible-sm {
        display: block !important
    }
}

@media (min-width:992px) {
    .hidden-md {
        display: none !important
    }

    .visible-md {
        display: block !important
    }
}

@media (min-width:1200px) {
    .hidden-lg {
        display: none !important
    }

    .visible-lg {
        display: block !important
    }
}

@media (min-width:1440px) {
    .hidden-xl {
        display: none !important
    }

    .visible-xl {
        display: block !important
    }
}

.success, .warning {
    padding: 20px;
    margin: 20px -20px
}

.success {
    background: #393
}

.warning {
    background: #c30
}

.warning-soft {
    border-left: 4px solid #c30;
    background: rgba(255,255,255,.5);
    color: #666;
    padding: 20px;
    margin: 20px 0
}

    .warning-soft code {
        color: rgba(102,102,102,.7)
    }
    */
    #hamburger {
      background: #3ea7e1;
      background: #f68a49;
      background: #fff;
      border-bottom: 1px solid rgba(255,255,255,.5);
      opacity: .95;
      display: block;
      width: 100%;
      height: 60px;
      /*margin: -80px 0 10px 0;*/
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      left: 0;
      z-index: 15
  }
  
      #hamburger .mburger {
          color: #fff;
          color: #282828;
          margin-top: 7px;
          margin-left: 15px;
          --mb-button-size: 46px;
          --mb-bar-height: 2px;
          --mb-bar-width: 0.8;
          --mb-bar-spacing: 10px
      }
  
  @media (min-width:768px) {
      #hamburger {
          background: 0 0;
          border: none;
          opacity: 1;
          width: 90px;
          height: 50px;
          margin-top: -60px;
          margin-left: 30px;
          top: 20px
      }
  
          #hamburger .mburger {
              margin-left: 0
          }
  }
  
  #menu:not(.mm-menu), .mm-menu {
      display: none
  }
  
  body .mm-menu {
      font-size: 16px;
      --mm-line-height: 26px;
      --mm-navbar-size: 50px;
      --mm-listitem-size: 50px;
      --mm-iconpanel-size: 60px;
      --mm-iconbar-size: 60px
  }
  
  body .mm-slideout {
      --mm-sidebar-collapsed-size: 60px
  }
  
  #menu .menu-text {
      padding: 40px 40px 0 60px
  }
  
      #menu .menu-text:after {
          border: none !important
      }
  
      #menu .menu-text p {
          margin: 0
      }
  
  .mm-panel > p {
      padding: 20px;
      margin: 0
  }
  
  .mm-panel_iconpanel-first .fa {
      font-size: 16px;
      text-align: center;
      color: #fff;
      line-height: 25px;
      width: 25px;
      margin-right: 15px;
      float: left;
      -webkit-transition: color 1s ease;
      -o-transition: color 1s ease;
      transition: color 1s ease
  }
  
  .mm-panel_iconpanel-first .mm-divider {
      padding-left: 60px
  }
  
  .mm-panel_iconpanel-first .mm-listitem:after {
      left: 60px
  }
  
  .mm-menu_opened .mm-panel_opened.mm-panel_iconpanel-first .fa {
      /*color: #85181d;*/
  }
  
  .mm-panel__blocker {
      display: block !important;
      opacity: 0 !important
  }
  
  .mm-panel_search {
      left: 0 !important;
      right: 0 !important;
      width: 100% !important
  }
  
      .mm-panel_search .fa {
          display: none
      }
  
  .mm-panel__searchsplash {
      text-align: center;
      opacity: .6;
      padding-top: 40px
  }
  
      .mm-panel__searchsplash a {
          display: inline-block;
          padding: 5px
      }
  
  #noscript {
      border-bottom: 1px solid rgba(255,255,255,.3);
      color: #fff;
      height: 800px;
      height: 100vh;
      position: absolute;
      top: 0;
      right: 20px;
      left: 20px;
      z-index: 9999999
  }
  
      #noscript > div {
          text-align: center;
          width: 100%;
          max-width: 500px;
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%,-50%);
          -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%)
      }
  
      #noscript h1 {
          margin: 0 0 50px 0
      }
  
  @media (min-width:992px) {
      body.home #page {
          position: relative
      }
  
          body.home #page:before {
              content: '';
              width: 45%;
              height: 900px;
              background: url(../img/iphonex-perspective-black.png) 0 0 no-repeat transparent;
              background-size: auto 850px;
              position: absolute;
              top: calc(100vh - 725px);
              left: 55%
          }
  }
  
  body.p404, body.p404 #page {
      background: #e34545
  }
  
      body.p404 .container {
          text-align: center
      }
  
      body.p404 h1 {
          letter-spacing: -10px;
          font-size: 200px
      }
  
  @media (min-width:576px) {
      body.p404 h1 {
          letter-spacing: -15px;
          font-size: 300px
      }
  }
  
  @media (min-width:768px) {
      body.p404 h1 {
          letter-spacing: -20px;
          font-size: 400px
      }
  }
  
  @media (min-width:768px) {
      body:not(.p404):not(.docready) #page {
          width: calc(100% - 60px);
          -webkit-transform: translate3d(60px,0,0);
          transform: translate3d(60px,0,0);
          -webkit-transition: none;
          -o-transition: none;
          transition: none
      }
  }
  
  @media (min-width:1440px) {
      body:not(.p404):not(.docready) #page {
          width: calc(100% - 440px);
          -webkit-transform: translate3d(440px,0,0);
          transform: translate3d(440px,0,0);
          -webkit-transition: none;
          -o-transition: none;
          transition: none
      }
  }
  /*
  .container {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      max-width: 992px;
      min-width: 320px;
      padding: 0 20px;
      margin: 0 auto
  }
  
      .container.header {
          padding-bottom: 50px
      }
      */
  @media (min-width:576px) {
      .container {
          width: 90%
      }
  }
  
  @media (min-width:768px) {
      .container {
          width: 80%
      }
  }
  
  .row {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;    
  }
  
  .col {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      display: block;
      width: 100%;
      padding: 0 20px
  }
  
  .col-12 {
      width: 100% !important;
  }
  
  .col-10 {
      width: 80% !important;
  }
  
  .col-9 {
      width: 75% !important;
  }
  
  .col-8 {
      width: 66.66% !important;
  }
  
  .col-6 {
      width: 50% !important;
  }
  
  .col-4 {
      width: 33.33% !important;
  }
  
  .col-3 {
      width: 25% !important;
  }
  
  .col-2 {
      width: 20% !important;
  }
  
  .col-1 {
      width: 10% !important;
  }
  
  .nogluter {
      padding: 0 !important;
      margin: 0 !important;
  }
  
  .row {
      margin: 0 !important; 
      padding: 0 !important;
  }
  
  
  @media (min-width:576px) {
      .col-xs-12 {
          width: 100%
      }
  
      .col-xs-10 {
          width: 80%
      }
  
      .col-xs-9 {
          width: 75%
      }
  
      .col-xs-8 {
          width: 66.66%
      }
  
      .col-xs-6 {
          width: 50%
      }
  
      .col-xs-4 {
          width: 33.33%
      }
  
      .col-xs-3 {
          width: 25%
      }
  
      .col-xs-2 {
          width: 20%
      }
  }
  
  @media (min-width:768px) {
      .col-sm-12 {
          width: 100%
      }
  
      .col-sm-10 {
          width: 80%
      }
  
      .col-sm-9 {
          width: 75%
      }
  
      .col-sm-8 {
          width: 66.66%
      }
  
      .col-sm-6 {
          width: 50%
      }
  
      .col-sm-4 {
          width: 33.33%
      }
  
      .col-sm-3 {
          width: 25%
      }
  
      .col-sm-2 {
          width: 20%
      }
  }
  
  @media (min-width:992px) {
      .col-md-12 {
          width: 100% !important;
      }
  
      .col-md-10 {
          width: 80% !important;
      }
  
      .col-md-9 {
          width: 75% !important;
      }
  
      .col-md-8 {
          width: 66.66% !important;
      }
  
      .col-md-6 {
          width: 50% !important;
      }
  
      .col-md-4 {
          width: 33.33% !important;
      }
  
      .col-md-3 {
          width: 25% !important;
      }
  
      .col-md-2 {
          width: 20% !important;
      }
  
      .col-md-2 {
          width: 10% !important;
      }
  }
  
  @media (min-width:1200px) {
      .col-lg-12 {
          width: 100%
      }
  
      .col-lg-10 {
          width: 80%
      }
  
      .col-lg-9 {
          width: 75%
      }
  
      .col-lg-8 {
          width: 66.66%
      }
  
      .col-lg-6 {
          width: 50%
      }
  
      .col-lg-4 {
          width: 33.33%
      }
  
      .col-lg-3 {
          width: 25%
      }
  
      .col-lg-2 {
          width: 20%
      }
  }
  
  .features {
      background: rgba(255,255,255,.7);
      color: #666;
      padding: 80px 0;
      overflow: hidden
  }
  
  @media (min-width:992px) {
      .features--after-tablet {
          margin-top: -200px;
          padding-top: 150px
      }
  }
  
  .features h3, .features h4, .features h5, .features h6 {
      font-weight: 100;
      font-size: 30px;
      color: #3ea7e1
  }
  
  .features a {
      color: #3ea7e1
  }
  
  .features pre {
      background-color: rgba(0,0,0,.75)
  }
  
  .features [class*=col-] + .col pre {
      border-left-color: rgba(255,255,255,.4)
  }
  
  .feature {
      padding: 40px 0;
      position: relative
  }
  
      .feature h4 {
          margin-top: 20px
      }
  
  @media (min-width:768px) {
      .feature {
          padding: 80px 0
      }
  
          .feature:first-child {
              padding-top: 40px
          }
  
          .feature + .feature {
              border-top: 1px solid rgba(0,0,0,.1)
          }
  }
  
  .feature_noborder {
      border-top: none !important;
      padding-top: 0 !important
  }
  
  .feature_rotatable-tablets, .feature_stacked-phones {
      padding-bottom: 0
  }
  
      .feature_rotatable-tablets + .feature, .feature_stacked-phones + .feature {
          border-top: none
      }
  
      .feature_rotatable-tablets p {
          position: relative;
          z-index: 1
      }
  
  .feature_cta > * {
      vertical-align: middle;
      display: inline-block
  }
  
  .feature_cta h4 {
      margin: 20px 0 5px 0
  }
  
  /*
  .feature_cta .btn {
      background-color: rgba(255,255,255,.3);
      border-color: #3ea7e1;
      color: #3ea7e1;
      display: block;
      padding-left: 30px;
      padding-right: 30px;
      margin-top: 20px
  }
  
  @media (min-width:992px) {
      .feature_cta .btn {
          float: right
      }
  }
  
  .feature_cta .btn:hover {
      background-color: rgba(255,255,255,.4)
  }
  */
  .feature_customize {
      padding-top: 0;
      padding-bottom: 0
  }
  
      .feature_customize p {
          padding: 20px 0;
          margin: 0;
          position: relative
      }
  
          .feature_customize p img {
              display: none
          }
  
  @media (min-width:768px) {
      .feature_customize p {
          border-top: 1px solid rgba(0,0,0,.1);
          min-height: 50px;
          padding: 120px 0 120px 45%
      }
  
          .feature_customize p:first-child {
              border-top: none
          }
  
          .feature_customize p img {
              -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);
              box-shadow: 0 2px 10px rgba(0,0,0,.2);
              border: 1px solid #ccc;
              border-radius: 30px;
              overflow: hidden;
              position: absolute;
              top: 50%;
              right: calc(55% + 50px);
              -webkit-transform: translateY(-50%);
              -ms-transform: translateY(-50%);
              transform: translateY(-50%)
          }
  
              .feature_customize p img:first-child {
                  display: block
              }
  
          .feature_customize p:nth-child(even) {
              padding: 120px 45% 120px 0
          }
  
              .feature_customize p:nth-child(even) img {
                  right: auto;
                  left: calc(55% + 50px)
              }
  }
  
  @media (min-width:992px) {
      .feature_customize p img {
          display: block
      }
  
          .feature_customize p img:nth-child(2) {
              right: calc(55% + 260px)
          }
  
          .feature_customize p img:nth-child(3) {
              right: calc(55% + 470px)
          }
  
          .feature_customize p img:nth-child(4) {
              right: calc(55% + 680px)
          }
  
      .feature_customize p:nth-child(even) img:nth-child(2) {
          left: calc(55% + 260px)
      }
  
      .feature_customize p:nth-child(even) img:nth-child(3) {
          left: calc(55% + 470px)
      }
  
      .feature_customize p:nth-child(even) img:nth-child(4) {
          left: calc(55% + 680px)
      }
  }
  
  /*
  .btn, .buttons {
      -webkit-box-shadow: 6px 8px 1px rgba(0,0,0,.1);
      box-shadow: 6px 8px 1px rgba(0,0,0,.1);
      border-radius: 8px;
      overflow: hidden;
      margin: 0
  }
  
      .btn .font, .buttons .font {
          font-size: 35px;
          text-align: center;
          display: block
      }
  
      .btn .sub, .buttons .sub {
          font-size: 13px;
          font-weight: 400;
          text-align: center;
          display: block
      }
  
      .btn, .buttons a {
          text-decoration: none !important;
          line-height: 25px
      }
  
  .btn {
      border: 1px solid rgba(255,255,255,.7);
      font-weight: 700;
      color: #fff;
      display: inline-block;
      padding: 12px 24px;
      margin: 10px 10px 0 0;
      -webkit-transition: none .2s ease;
      -o-transition: none .2s ease;
      transition: none .2s ease;
      -webkit-transition-property: background-color,border-color,-webkit-box-shadow,-webkit-transform;
      transition-property: background-color,border-color,-webkit-box-shadow,-webkit-transform;
      -o-transition-property: background-color,border-color,box-shadow,transform;
      transition-property: background-color,border-color,box-shadow,transform;
      transition-property: background-color,border-color,box-shadow,transform,-webkit-box-shadow,-webkit-transform
  }
  
      .btn:hover {
          background-color: rgba(255,255,255,.05);
          -webkit-box-shadow: 4px 6px 0 rgba(0,0,0,.15);
          box-shadow: 4px 6px 0 rgba(0,0,0,.15);
          -webkit-transform: translateY(2px);
          -ms-transform: translateY(2px);
          transform: translateY(2px)
      }
  
  .buttons a {
      background: rgba(255,255,255,.7);
      display: block;
      padding: 20px 0 10px 0;
      margin: 0;
      -webkit-transition: background-color .2s ease;
      -o-transition: background-color .2s ease;
      transition: background-color .2s ease
  }
  
      .buttons a:hover {
          background-color: rgba(255,255,255,.85)
      }
  
      .buttons a .font {
          color: #3ea7e1
      }
  
      .buttons a .sub {
          color: #666
      }
  
      .buttons a + a {
          border-top: 1px solid rgba(62,167,225,.7)
      }
  
  @media (min-width:576px) {
      .buttons [class*=col-xs-] + .col {
          border-top: none;
          border-left: 1px solid rgba(62,167,225,.7)
      }
  }
  
  @media (min-width:768px) {
      .buttons [class*=col-sm-] + .col {
          border-top: none;
          border-left: 1px solid rgba(62,167,225,.7)
      }
  }
  
  @media (min-width:992px) {
      .buttons [class*=col-md-] + .col {
          border-top: none;
          border-left: 1px solid rgba(62,167,225,.7)
      }
  }
  
  @media (min-width:1200px) {
      .buttons [class*=col-lg-] + .col {
          border-top: none;
          border-left: 1px solid rgba(62,167,225,.7)
      }
  }
  
  @media (min-width:1440px) {
      .buttons [class*=col-xl-] + .col {
          border-top: none;
          border-left: 1px solid rgba(62,167,225,.7)
      }
  }
  
  .features .btn {
      border: 1px solid #3ea7e1
  }
  
  .container > .buttons:first-child:last-child {
      margin: 80px 0 0 0
  }
  .next {
      border-top: 1px solid rgba(255,255,255,.5);
      padding: 80px 20px 0 20px;
      margin: 80px -20px 0 -20px
  }
  
      .next .btn {
          margin-top: 10px
      }
  
  .next_noborder {
      border-top: none;
      padding-top: 0
  }
  
  @media (min-width:576px) {
      .next_noborder-xs {
          border-top: none;
          padding-top: 0
      }
  }
  
  @media (min-width:768px) {
      .next_noborder-sm {
          border-top: none;
          padding-top: 0
      }
  }
  
  @media (min-width:992px) {
      .next_noborder-md {
          border-top: none;
          padding-top: 0
      }
  }
  
  @media (min-width:1200px) {
      .next_noborder-lg {
          border-top: none;
          padding-top: 0
      }
  }
  
  @media (min-width:1440px) {
      .next_noborder-xl {
          border-top: none;
          padding-top: 0
      }
  }
  */
  
  h1.has-submenu {
      margin-bottom: 10px;
      position: relative;
      z-index: 11
  }
  
  h1 .submenutext {
      display: none
  }
  
  .submenu {
      white-space: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      line-height: 20px;
      opacity: .95;
      margin: 30px -20px 80px;
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 10
  }
  
      .submenu + * {
          margin-top: 80px
      }
  
      .submenu li, .submenu ul {
          list-style: none;
          display: block;
          padding: 0
      }
  
      .submenu ul {
          background: #3ea7e1;
          border-bottom: 8px solid rgba(0,0,0,.1);
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          padding: 0;
          margin: 0
      }
  
          .submenu ul:after {
              content: '';
              display: block;
              clear: both
          }
  
      .submenu li {
          margin: 0
      }
  
      .submenu a {
          text-decoration: none;
          display: block;
          padding: 15px 20px;
          border: none;
          position: relative
      }
  
          .submenu a:after {
              content: '';
              background-color: rgba(0,0,0,0);
              display: block;
              height: 8px;
              position: absolute;
              top: 100%;
              left: 0;
              right: 0;
              -webkit-transition: background-color .6s ease;
              -o-transition: background-color .6s ease;
              transition: background-color .6s ease
          }
  
          .submenu a:hover:after, .submenu li.selected a:after, .submenu:hover li.selected a:hover:after {
              background-color: rgba(0,0,0,.1)
          }
  
      .submenu:hover li.selected a:after {
          background-color: rgba(0,0,0,0)
      }
  
  .responsive-video {
      background: #333;
      -webkit-box-shadow: 0 0 30px rgba(0,0,0,.5);
      box-shadow: 0 0 30px rgba(0,0,0,.5);
      width: 100%;
      height: 0;
      padding-top: 56%;
      position: relative
  }
  
      .responsive-video iframe {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0
      }
  
  .table {
      width: calc(100% + 40px);
      margin: 20px -20px
  }
  
      .table td {
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          border: none;
          vertical-align: top
      }
  
      .table tfoot, .table thead {
          font-size: 15px
      }
  
      .table thead {
          background: rgba(255,255,255,.7);
          color: #3ea7e1
      }
  
          .table thead td {
              padding-top: 10px;
              padding-bottom: 10px
          }
  
      .table tfoot td {
          padding-top: 0;
          padding-bottom: 0
      }
  
      .table tfoot tr:first-child td {
          padding-top: 20px
      }
  
      .table tfoot tr:last-child td {
          padding-bottom: 20px
      }
  
      .table .close, .table .open {
          padding-top: 0
      }
  
      .table .sub-open + tr td {
          padding-top: 0
      }
  
      .table tbody tr + tr, .table tfoot tr:first-child {
          position: relative
      }
  
          .table tbody tr + tr:after, .table tfoot tr:first-child:after {
              content: '';
              display: block;
              border-top: 1px solid rgba(255,255,255,.5);
              position: absolute;
              left: 0;
              right: 0;
              top: 0
          }
  
      .table .divider + tr:after, .table .sub-close:after, .table .sub-open + tr:after, .table .sub-open:after {
          content: none;
          display: none
      }
  
      .table .sub-1:after {
          left: 50px
      }
  
      .table .sub-1 .close, .table .sub-1 .name, .table .sub-1 .open {
          padding-left: 50px
      }
  
      .table .sub-2:after {
          left: 75px
      }
  
      .table .sub-2 .close, .table .sub-2 .name, .table .sub-2 .open {
          padding-left: 75px
      }
  
      .table .sub-3:after {
          left: 100px
      }
  
      .table .sub-3 .close, .table .sub-3 .name, .table .sub-3 .open {
          padding-left: 100px
      }
  
      .table .divider td {
          font-size: 15px;
          text-transform: uppercase;
          opacity: .7;
          padding-bottom: 0
      }
  
  @media (max-width:991px) {
      .table td:empty, .table thead {
          display: none
      }
  
      .table tr {
          display: block;
          width: 100%;
          overflow: hidden
      }
  
      .table td {
          display: block;
          padding: 20px
      }
  
      .table .name {
          font-weight: 700;
          width: auto;
          padding-right: 5px;
          padding-bottom: 0;
          float: left
      }
  
      .table .datatype {
          width: auto;
          padding-left: 0;
          padding-bottom: 0;
          float: left
      }
  
          .table .datatype em:before {
              content: '('
          }
  
          .table .datatype em:after {
              content: ')'
          }
  
      .table .default {
          width: 100%;
          padding-top: 0;
          clear: left
      }
  
          .table .default:before {
              content: 'Default: '
          }
  
      .table .description {
          width: 100%;
          padding-top: 0;
          clear: left
      }
  
      .table .sub-1 td:not(.datatype) {
          padding-left: 50px
      }
  
      .table .sub-2 td:not(.datatype) {
          padding-left: 75px
      }
  
      .table .sub-3 td:not(.datatype) {
          padding-left: 100px
      }
  }
  
  @media (min-width:992px) {
      .table td {
          padding: 20px 10px
      }
  
      .table .close, .table .name, .table .open, .table .text {
          padding-left: 20px
      }
  
      .table .name {
          width: 20%
      }
  
      .table .datatype {
          width: 15%
      }
  
      .table .default {
          width: 20%
      }
  
      .table .description {
          width: 45%
      }
  }
  
  .phone iframe, .tablet iframe {
      border: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%
  }
  
  .phone + pre, .tablet + pre {
      margin-top: 0
  }
  
  .phone {
      padding: 90px 0 60px;
      margin: 0 -40px;
      position: relative;
      z-index: 1
  }
  
      .phone:after, .phone:before {
          content: '';
          background: url(../img/iphonex-example-blue.png) center top/395px auto no-repeat transparent;
          display: block;
          width: 100%;
          height: 50%;
          position: absolute;
          left: 0;
          z-index: -1
      }
  
      .phone:before {
          top: 0
      }
  
      .phone:after {
          background-position: center bottom;
          bottom: 0
      }
  
      .phone div {
          border-radius: 0 0 35px 35px;
          background: #000;
          background-size: inherit;
          overflow: hidden;
          display: block;
          width: 290px;
          height: 550px;
          margin: 0 auto;
          position: relative
      }
  
      .phone span {
          content: '';
          border-radius: 30px 30px 0 0;
          background: url(../img/iphonex-example-camera.png) center top no-repeat #4bb5ef;
          display: block;
          width: 290px;
          height: 25px;
          position: absolute;
          top: 65px;
          left: calc(50% - 145px);
          z-index: 1
      }
  
      .phone.coral:after, .phone.coral:before {
          background-image: url(../img/iphonex-example-coral.png)
      }
  
      .phone.coral span {
          background-color: #e34545
      }
  
      .phone.yellow:after, .phone.yellow:before {
          background-image: url(../img/iphonex-example-yellow.png)
      }
  
      .phone.yellow span {
          background-color: #fb0
      }
  
      .phone.black:after, .phone.black:before {
          background-image: url(../img/iphonex-example-black.png)
      }
  
      .phone.black span {
          background-color: #555
      }
  
      .phone.white:after, .phone.white:before {
          background-image: url(../img/iphonex-example-white.png)
      }
  
      .phone.white span {
          background-color: #fff
      }
  
  .tablet {
      height: 510px;
      padding: 38px 72px;
      margin: 40px -20px 20px -20px;
      position: relative;
      z-index: 1;
      -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
      transform: rotate(0);
      -webkit-transition: none .6s ease;
      -o-transition: none .6s ease;
      transition: none .6s ease;
      -webkit-transition-property: margin,-webkit-transform;
      transition-property: margin,-webkit-transform;
      -o-transition-property: transform,margin;
      transition-property: transform,margin;
      transition-property: transform,margin,-webkit-transform
  }
  
      .tablet:after, .tablet:before {
          content: '';
          background: url(../img/tablet-example.png) left top no-repeat transparent;
          display: block;
          height: 100%;
          position: absolute;
          top: 0;
          z-index: 0
      }
  
      .tablet:before {
          width: 30%;
          left: 0
      }
  
      .tablet:after {
          background-position: right top;
          width: 70%;
          right: 0
      }
  
      .tablet div {
          overflow: hidden;
          background: #111;
          border: none;
          display: block;
          width: 100%;
          height: 492px;
          position: relative;
          z-index: 1
      }
  
          .tablet div.img {
              overflow-y: auto
          }
  
      .tablet iframe {
          -webkit-transform: rotate(0);
          -ms-transform: rotate(0);
          transform: rotate(0);
          -webkit-transition: none .6s ease .6s;
          -o-transition: none .6s ease .6s;
          transition: none .6s ease .6s;
          -webkit-transition-property: width,height,top,left,-webkit-transform;
          transition-property: width,height,top,left,-webkit-transform;
          -o-transition-property: transform,width,height,top,left;
          transition-property: transform,width,height,top,left;
          transition-property: transform,width,height,top,left,-webkit-transform
      }
  
      .tablet img {
          width: auto;
          max-width: 100%;
          height: auto;
          margin: auto
      }
  
  .tablets > div {
      margin-bottom: 40px
  }
  
  .stacked-phones {
      overflow: hidden;
      height: 550px;
      margin: 0 -15%;
      position: relative
  }
  
      .stacked-phones .phone {
          width: 380px;
          margin: 0;
          position: absolute;
          top: 0;
          left: 50%;
          z-index: 1;
          -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
          transform: translateX(-50%)
      }
  
          .stacked-phones .phone:first-child, .stacked-phones .phone:last-child {
              z-index: 0;
              margin-top: 25px
          }
  
  @media (min-width:576px) {
      .stacked-phones .phone {
          -webkit-transform: translateX(-12%);
          -ms-transform: translateX(-12%);
          transform: translateX(-12%)
      }
  
          .stacked-phones .phone:first-child {
              -webkit-transform: translateX(-88%);
              -ms-transform: translateX(-88%);
              transform: translateX(-88%)
          }
  }
  
  @media (min-width:992px) {
      .stacked-phones .phone {
          -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
          transform: translateX(-50%)
      }
  
          .stacked-phones .phone:first-child {
              -webkit-transform: translateX(-125%);
              -ms-transform: translateX(-125%);
              transform: translateX(-125%)
          }
  
          .stacked-phones .phone:last-child {
              -webkit-transform: translateX(25%);
              -ms-transform: translateX(25%);
              transform: translateX(25%)
          }
  }
  
  .rotatable {
      margin: -200px -100px;
      margin-bottom: 0;
      padding-top: 200px;
      position: relative;
      overflow: hidden
  }
  
      .rotatable .tablet {
          width: 695px;
          margin-left: auto;
          margin-right: auto;
          margin-bottom: -140px
      }
  
  .portrait .tablet {
      margin-top: 160px;
      margin-bottom: -260px;
      -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg)
  }
  
      .portrait .tablet iframe {
          width: 490px;
          height: 690px;
          left: 100px;
          top: -100px;
          -webkit-transform: rotate(-90deg);
          -ms-transform: rotate(-90deg);
          transform: rotate(-90deg)
      }
  
  .stacked-phones:after, .tablets.rotatable:after {
      content: '';
      border-radius: 50%;
      -webkit-box-shadow: 0 0 20px rgba(0,0,0,.3);
      box-shadow: 0 0 20px rgba(0,0,0,.3);
      display: block;
      height: 20px;
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      z-index: 2
  }
  
  .rotate {
      text-align: center;
      text-decoration: none !important;
      font-size: 50px;
      display: block;
      width: 100px;
      padding-left: 20px;
      margin: 20px auto
  }
  
      .rotate .portrait {
          opacity: .3
      }
  
      .rotate:hover .portrait {
          opacity: .5
      }
  
      .rotate .landscape {
          opacity: 1;
          padding-left: 20px;
          margin-left: -40px
      }
  
  .portrait .rotate .portrait {
      opacity: 1
  }
  
  .portrait .rotate .landscape {
      opacity: .3
  }
  
  .portrait .rotate:hover .landscape {
      opacity: .5
  }
  
  a.popout {
      border-bottom: 1px solid rgba(255,255,255,.5);
      text-decoration: none;
      text-align: center;
      line-height: 20px;
      display: block;
      padding: 10px 0 10px 40px
  }
  
      a.popout .fa {
          margin-left: 20px
      }
  
  pre + a.popout {
      margin: -20px -20px 0 -20px
  }
  
  .burgers {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      margin: 40px -10px 80px
  }
  
  .burger {
      position: relative;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: calc(50% - 20px);
      padding-top: calc(50% - 20px);
      margin: 10px;
      background: rgba(255,255,255,.05);
      -webkit-box-shadow: 6px 8px 1px rgba(0,0,0,.1);
      box-shadow: 6px 8px 1px rgba(0,0,0,.1);
      -webkit-transition: none .2s ease;
      -o-transition: none .2s ease;
      transition: none .2s ease;
      -webkit-transition-property: background-color,-webkit-box-shadow,-webkit-transform;
      transition-property: background-color,-webkit-box-shadow,-webkit-transform;
      -o-transition-property: background-color,box-shadow,transform;
      transition-property: background-color,box-shadow,transform;
      transition-property: background-color,box-shadow,transform,-webkit-box-shadow,-webkit-transform;
      cursor: pointer;
      font-size: 15px;
      text-align: center
  }
  
      .burger:hover {
          background: rgba(255,255,255,.15);
          -webkit-box-shadow: 4px 6px 0 rgba(0,0,0,.15);
          box-shadow: 4px 6px 0 rgba(0,0,0,.15);
          -webkit-transform: translateY(2px);
          -ms-transform: translateY(2px);
          transform: translateY(2px)
      }
  
      .burger button {
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%,-50%);
          -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%)
      }
  
      .burger .mburger {
          --mb-cross-timeout: 0s;
          --mb-animate-timeout: 0s
      }
  
      .burger span {
          position: absolute;
          bottom: 10%;
          left: 0;
          right: 0
      }
  
  @media (min-width:992px) {
      .burger {
          width: calc(25% - 20px);
          padding-top: calc(25% - 20px)
      }
  }
  
  #playground .phone {
      position: -webkit-sticky;
      position: sticky;
      top: 45px
  }
  
  #playground-options {
      position: relative;
      z-index: 2;
      margin: 60px 0;
      --mm-color-text: #fff
  }
  
      #playground-options .mm-listitem {
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          padding: 15px 0;
          border-bottom: 1px solid rgba(255,255,255,.5)
      }
  
          #playground-options .mm-listitem:first-child {
              border-top: 1px solid rgba(255,255,255,.5)
          }
  
          #playground-options .mm-listitem:after {
              content: none
          }
  
          #playground-options .mm-listitem a, #playground-options .mm-listitem span {
              padding: 0;
              -o-text-overflow: clip;
              text-overflow: clip;
              white-space: normal
          }
  
          #playground-options .mm-listitem + .mm-divider {
              padding-top: 30px
          }
  
      #playground-options .mm-divider {
          padding: 0;
          border: none;
          background: 0 0;
          font-size: 15px;
          text-transform: uppercase;
          opacity: .7
      }
  
          #playground-options .mm-divider:before {
              content: none
          }
  
      #playground-options + pre {
          margin: 60px 0
      }
  
  #playground__code.hljs {
      background: unset;
      display: unset;
      overflow-x: unset;
      padding: unset;
      background: unset;
      color: unset
  }
  
  #check {
      position: relative
  }
  
      #check a {
          color: #3ea7e1;
          text-align: center;
          text-decoration: none;
          font-size: 20px;
          line-height: 40px;
          display: block;
          width: 60px;
          height: 40px;
          position: absolute;
          bottom: 0;
          right: 0
      }
  
      #check .popout + a {
          right: -20px
      }
  
  #license {
      margin-bottom: 40px
  }
  
      #license .licenses {
          margin-top: 40px;
          margin-bottom: 80px
      }
  
          #license .licenses > div {
              padding-top: 20px;
              padding-bottom: 20px
          }
  
              #license .licenses > div + div {
                  border-top: 1px solid rgba(255,255,255,.5)
              }
  
          #license .licenses .title {
              display: inline-block;
              padding: 20px 20px 20px 0;
              margin: 0
          }
  
          #license .licenses .price {
              font-weight: 100;
              display: inline-block;
              padding: 20px 0;
              margin: 0
          }
  
          #license .licenses .usp {
              padding: 0;
              margin: 0
          }
  
              #license .licenses .usp li {
                  list-style: none;
                  padding: 5px 0 5px 25px;
                  position: relative
              }
  
              #license .licenses .usp .fa {
                  position: absolute;
                  top: 11px;
                  left: 0
              }
  
          #license .licenses .btn {
              display: block;
              padding-bottom: 20px;
              margin: 20px 0
          }
  
          #license .licenses .comment {
              opacity: .6;
              line-height: 20px;
              padding: 20px 0;
              margin: 0
          }
  
  @media (min-width:992px) {
      #license .licenses {
          text-align: center
      }
  
          #license .licenses > div:nth-child(even) {
              background: rgba(0,0,0,.1);
              border-radius: 10px
          }
  
          #license .licenses > div + div {
              border-top: none
          }
  
          #license .licenses .title {
              display: block;
              padding-right: 0;
              margin-top: 20px
          }
  
          #license .licenses .price {
              border-top: 1px solid rgba(255,255,255,.5);
              border-bottom: 1px solid rgba(255,255,255,.5);
              font-size: 45px;
              display: block;
              padding: 40px 0;
              margin: 20px 0
          }
  
          #license .licenses .license-personal .price {
              font-size: 30px
          }
  
          #license .licenses .usp {
              display: inline-block;
              text-align: left;
              margin: 20px
          }
  }
  
  #home-intro {
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      min-height: calc(100vh - 160px);
      padding: 0 0 80px 0;
      margin: 0;
      position: relative
  }
  
      #home-intro h1 {
          letter-spacing: -5px;
          font-size: 100px;
          margin: 0
      }
  
  @media (min-width:576px) {
      #home-intro h1 {
          letter-spacing: -10px;
          font-size: 150px
      }
  }
  
  #home-intro h4 {
      margin: 20px 0 40px 0
  }
  
  #changelog > li {
      margin-top: 20px
  }
  
  #wp-screenshot h4 {
      display: none
  }
  
  
  .pr-2 {
      padding-right: 15px !important;
  }
  
  .pl-2 {
      padding-left: 15px !important;
  }
  
  .pl-10 {
      padding-left: 10% !important;
  }
  
  .pl-15 {
      padding-left: 15% !important;
  }
  
  .pl-20 {
      padding-left: 20% !important;
  }