input,label,select,button,textarea{
    margin:0;
    border:0;
    padding:0;
    display:inline-block;
    vertical-align:middle;
    white-space:normal;
    background:none;
    line-height:1;
    font-size:13px;
    font-family:Arial
}
input:focus{
    outline:0
}
input,textarea{
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box
}
button,input[type='reset'],input[type='button'],input[type='submit'],input[type='checkbox'],input[type='radio'],select{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
input[type='checkbox'],input[type='radio']{
    width:13px;
    height:13px
}
input[type='search']{
    appearance:textfield;
    box-sizing:content-box
}
::-webkit-search-decoration{
    display:none
}
button,input[type='reset'],input[type='button'],input[type='submit']{
    overflow:visible;
    width:auto
}
::-webkit-file-upload-button{
    padding:0;
    border:0;
    background:none
}
textarea{
    vertical-align:top;
    overflow:auto
}
select[multiple]{
    vertical-align:top
}
html{
    scroll-behavior:smooth;
    box-sizing:border-box
}
*,*::before,*::after{
    box-sizing:inherit
}
body{
    margin:0;
    padding:0;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
img{
    display:inline-block;
    vertical-align:middle;
    max-width:100%;
    height:auto;
    -ms-interpolation-mode:bicubic
}
html{
    height:100%
}
html{
    font-size:.8rem
}
@media screen and (min-width: 20rem){
    html{
        font-size:calc( .8rem + .2 * (100vw - 20rem) / 80)
    }
}
@media screen and (min-width: 100rem){
    html{
        font-size:1rem
    }
}
body{
    width:100%;
    min-height:100vh;
    background:#fff;
    min-width:320px;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    -webkit-tap-highlight-color:transparent
}
strong,label,input,textarea,input,button{
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif
}
::-webkit-input-placeholder,::-moz-placeholder,:-ms-input-placeholder,input:-moz-placeholder{
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    color:#acacac
}
body,h1,h2,h3,h4,h5,h6,p,a,li,strong,label,input,textarea{
    color:#202125;
    line-height:1.4;
    text-rendering:optimizeLegibility
}
h1{
    font-size:2rem;
    font-weight:700
}
h2{
    font-size:1.8rem;
    font-weight:700
}
h3{
    font-size:1.6rem;
    font-weight:700
}
h4{
    font-size:1.4rem;
    font-weight:700
}
h5{
    font-size:1.2rem;
    font-weight:700
}
h6{
    font-size:1rem;
    font-weight:700
}
body>svg{
    display:none
}
p,label,textarea,input,label,select,button,textarea{
    font-size:1rem
}
@font-face {
    font-family: 'AvertaStdPE-Black';
    src: url('../fonts/averta/346526_0_0.eot');
    src: url('../fonts/averta/346526_0_0.eot?#iefix') format('embedded-opentype'),
      url('../fonts/averta/346526_0_0.woff2') format('woff2'),
      url('../fonts/averta/346526_0_0.woff') format('woff'),
      url('../fonts/averta/346526_0_0.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'AvertaStdPE-BlackItalic';
    src: url('../fonts/averta/346526_1_0.eot');
    src: url('../fonts/averta/346526_1_0.eot?#iefix') format('embedded-opentype'),
      url('../fonts/averta/346526_1_0.woff2') format('woff2'),
      url('../fonts/averta/346526_1_0.woff') format('woff'),
      url('../fonts/averta/346526_1_0.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'AvertaStdPE-Bold';
    src: url('../fonts/averta/346526_2_0.eot');
    src: url('../fonts/averta/346526_2_0.eot?#iefix') format('embedded-opentype'),
      url('../fonts/averta/346526_2_0.woff2') format('woff2'),
      url('../fonts/averta/346526_2_0.woff') format('woff'),
      url('../fonts/averta/346526_2_0.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'AvertaStdPE-Extrabold';
    src: url('../fonts/averta/346526_3_0.eot');
    src: url('../fonts/averta/346526_3_0.eot?#iefix') format('embedded-opentype'),
      url('../fonts/averta/346526_3_0.woff2') format('woff2'),
      url('../fonts/averta/346526_3_0.woff') format('woff'),
      url('../fonts/averta/346526_3_0.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'AvertaStdPE-BoldItalic';
    src: url('../fonts/averta/346526_4_0.eot');
    src: url('../fonts/averta/346526_4_0.eot?#iefix') format('embedded-opentype'),
      url('../fonts/averta/346526_4_0.woff2') format('woff2'),
      url('../fonts/averta/346526_4_0.woff') format('woff'),
      url('../fonts/averta/346526_4_0.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'AvertaStdPE-ExtraboldItalic';
    src: url('../fonts/averta/346526_5_0.eot');
    src: url('../fonts/averta/346526_5_0.eot?#iefix') format('embedded-opentype'),
      url('../fonts/averta/346526_5_0.woff2') format('woff2'),
      url('../fonts/averta/346526_5_0.woff') format('woff'),
      url('../fonts/averta/346526_5_0.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'AvertaStdPE-Extrathin';
    src: url('../fonts/averta/346526_6_0.eot');
    src: url('../fonts/averta/346526_6_0.eot?#iefix') format('embedded-opentype'),
      url('../fonts/averta/346526_6_0.woff2') format('woff2'),
      url('../fonts/averta/346526_6_0.woff') format('woff'),
      url('../fonts/averta/346526_6_0.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'AvertaStdPE-ExtrathinItalic';
    src: url('../fonts/averta/346526_7_0.eot');
    src: url('../fonts/averta/346526_7_0.eot?#iefix') format('embedded-opentype'),
      url('../fonts/averta/346526_7_0.woff2') format('woff2'),
      url('../fonts/averta/346526_7_0.woff') format('woff'),
      url('../fonts/averta/346526_7_0.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'AvertaStdPE-Light';
    src: url('../fonts/averta/346526_8_0.eot');
    src: url('../fonts/averta/346526_8_0.eot?#iefix') format('embedded-opentype'),
      url('../fonts/averta/346526_8_0.woff2') format('woff2'),
      url('../fonts/averta/346526_8_0.woff') format('woff'),
      url('../fonts/averta/346526_8_0.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'AvertaStdPE-LightItalic';
    src: url('../fonts/averta/346526_9_0.eot');
    src: url('../fonts/averta/346526_9_0.eot?#iefix') format('embedded-opentype'),
      url('../fonts/averta/346526_9_0.woff2') format('woff2'),
      url('../fonts/averta/346526_9_0.woff') format('woff'),
      url('../fonts/averta/346526_9_0.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'AvertaStdPE-Regular';
    src: url('../fonts/averta/346526_A_0.eot');
    src: url('../fonts/averta/346526_A_0.eot?#iefix') format('embedded-opentype'),
      url('../fonts/averta/346526_A_0.woff2') format('woff2'),
      url('../fonts/averta/346526_A_0.woff') format('woff'),
      url('../fonts/averta/346526_A_0.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'AvertaStdPE-RegularItalic';
    src: url('../fonts/averta/346526_B_0.eot');
    src: url('../fonts/averta/346526_B_0.eot?#iefix') format('embedded-opentype'),
      url('../fonts/averta/346526_B_0.woff2') format('woff2'),
      url('../fonts/averta/346526_B_0.woff') format('woff'),
      url('../fonts/averta/346526_B_0.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'AvertaStdPE-Semibold';
    src: url('../fonts/averta/346526_C_0.eot');
    src: url('../fonts/averta/346526_C_0.eot?#iefix') format('embedded-opentype'),
      url('../fonts/averta/346526_C_0.woff2') format('woff2'),
      url('../fonts/averta/346526_C_0.woff') format('woff'),
      url('../fonts/averta/346526_C_0.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'AvertaStdPE-SemiboldItalic';
    src: url('../fonts/averta/346526_D_0.eot');
    src: url('../fonts/averta/346526_D_0.eot?#iefix') format('embedded-opentype'),
      url('../fonts/averta/346526_D_0.woff2') format('woff2'),
      url('../fonts/averta/346526_D_0.woff') format('woff'),
      url('../fonts/averta/346526_D_0.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'AvertaStdPE-Thin';
    src: url('../fonts/averta/346526_E_0.eot');
    src: url('../fonts/averta/346526_E_0.eot?#iefix') format('embedded-opentype'),
      url('../fonts/averta/346526_E_0.woff2') format('woff2'),
      url('../fonts/averta/346526_E_0.woff') format('woff'),
      url('../fonts/averta/346526_E_0.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'AvertaStdPE-ThinItalic';
    src: url('../fonts/averta/346526_F_0.eot');
    src: url('../fonts/averta/346526_F_0.eot?#iefix') format('embedded-opentype'),
      url('../fonts/averta/346526_F_0.woff2') format('woff2'),
      url('../fonts/averta/346526_F_0.woff') format('woff'),
      url('../fonts/averta/346526_F_0.ttf') format('truetype');
  }
h2{
    font-family:Helvetica;
    font-weight:400;
    font-size:60px;
    line-height:70px
}
@media screen and (max-width: 600px){
    h2{
        font-size:40px;
        line-height:50px
    }
}
.button{
    border-radius:4px;
    padding:1rem;
    min-width:10rem;
    color:#fff;
    font-weight:500;
    background-color:#0019ff
}
.button:hover,.button:focus{
    outline:none;
    background-color:#3d50ff
}
.button:active{
    background-color:#041ae5
}
.hero{
    height:100vh
}
.hero .header{
    height:70px;
    background-color:#fff;
    display:flex;
    align-items:center;
    justify-content:center
}
.hero .button{
    margin-bottom:2.5rem
}
.hero .logo{
    width:7.5rem;
    height:4.25rem;
    z-index:1
}
.hero .content{
    z-index:1;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    opacity:0
}
.hero .title{
    font-family:AvertaStdPE-Semibold;
    font-size:6.6rem;
    margin:0;
    margin-bottom:2rem
}
@media screen and (max-width: 600px){
    .hero .title{
        font-size:4rem
    }
}
.hero .description{
    margin:0 2rem 3.5rem;
    font-size:1.5rem;
    max-width:700px;
    text-align:center
}
.hero .link{
    position:relative;
    font-weight:500;
    text-decoration:none;
    line-height:1.8
}
.hero .link::after{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    content:'';
    border:1px solid #202125;
    border-bottom:0
}
.hero .title,.hero .description,.hero .link{
    background-image:radial-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0))
}
.hero .imagesContainer{
    position:absolute;
    z-index:0;
    width:100%;
    height:100%;
    will-change:transform
}
.hero .img1{
    position:absolute;
    top:7.16146%;
    left:63.81944%
}
.hero .img1>.image-canvas-bg{
    position:absolute;
    z-index:-1;
    top:0;
    width:100%;
    height:100%
}
.hero .img1>.image-bg{
    will-change:opacity;
    opacity:1
}
.hero .img2{
    position:absolute;
    top:22.00521%;
    left:15%
}
.hero .img2>.image-canvas-bg{
    position:absolute;
    z-index:-1;
    top:0;
    width:100%;
    height:100%
}
.hero .img2>.image-bg{
    will-change:opacity;
    opacity:1
}
.hero .img3{
    position:absolute;
    top:44.01042%;
    left:80.69444%
}
.hero .img3>.image-canvas-bg{
    position:absolute;
    z-index:-1;
    top:0;
    width:100%;
    height:100%
}
.hero .img3>.image-bg{
    will-change:opacity;
    opacity:1
}
.hero .img4{
    position:absolute;
    top:62.76042%;
    left:72.08333%
}
.hero .img4>.image-canvas-bg{
    position:absolute;
    z-index:-1;
    top:0;
    width:100%;
    height:100%
}
.hero .img4>.image-bg{
    will-change:opacity;
    opacity:1
}
.hero .img5{
    position:absolute;
    top:71.74479%;
    left:16.31944%
}
.hero .img5>.image-canvas-bg{
    position:absolute;
    z-index:-1;
    top:0;
    width:100%;
    height:100%
}
.hero .img5>.image-bg{
    will-change:opacity;
    opacity:1
}
.animateImages{
    animation:revealSmearHash 5s 2.5s infinite
}
@keyframes revealSmearHash{
    0%{
        opacity:1
    }
    25%,50%{
        opacity:0
    }
    75%,100%{
        opacity:1
    }
}
.section{
    position:relative;
    background:#fff;
    display:flex;
    flex-direction:column
}
@keyframes cross-fade{
    0%{
        opacity:0
    }
    10%{
        opacity:1
    }
    50%{
        opacity:1
    }
    60%{
        opacity:0
    }
}
.why-smearhash{
    position:relative;
    padding-top:24px;
    padding-bottom:50px;
    padding-left:10vw;
    display:flex;
    min-height:800px
}
.why-smearhash:before,.why-smearhash:after{
    content:'';
    height:731px;
    width:365px;
    position:absolute;
    top:75px;
    right:75%;
    background-size:100% 100%
}
.why-smearhash:before{
    background-image:url(../images/4d105029b5b864fb8225.png)
}
.why-smearhash:after{
    background-image:url(../images/795ed289706e62297532.png);
    opacity:0;
    animation:cross-fade 5s infinite
}
@media screen and (min-width: 600px){
    .why-smearhash{
        padding-left:30vw
    }
    .why-smearhash:before,.why-smearhash:after{
        right:60%
    }
}
.why-smearhash .content{
    background:rgba(229,238,255,0.37);
    height:100%;
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    font-size:16px;
    line-height:22px;
    padding:0 24px 24px 20vw
}
@media screen and (min-width: 600px){
    .why-smearhash .content{
        padding:0 20vw 50px
    }
}
.why-smearhash .content p{
    max-width:590px
}
.why-smearhash h3{
    font-size:20px;
    font-weight:700;
    letter-spacing:0.34px
}
.how-it-works{
    text-align:center
}
.how-it-works p{
    font-family:Helvetica;
    font-size:28px;
    letter-spacing:-0.5px;
    max-width:870px;
    margin:0 auto
}
@media screen and (max-width: 600px){
    .how-it-works p{
        font-size:20px;
        padding:0 24px
    }
}
.demo{
    max-width:1200px;
    margin:0 auto;
    padding:100px 10px 130px;
    display:flex;
    justify-content:stretch
}
@media screen and (max-width: 600px){
    .demo{
        flex-direction:column;
        padding:24px
    }
}
.demo .part{
    position:relative;
    flex:1;
    margin:0 24px
}
.demo .part:first-child{
    margin-left:0
}
.demo .part:last-child{
    margin-right:0
}
.demo .part:last-child:after{
    content:unset
}
@media screen and (max-width: 600px){
    .demo .part{
        margin:24px 0
    }
}
.demo .part:after{
    content:'';
    background:url(../images/e27133c6bb559c07f9a2.svg);
    width:72px;
    height:25px;
    position:absolute;
    top:-32px;
    right:-63px
}
@media screen and (max-width: 600px){
    .demo .part:after{
        top:unset;
        right:unset;
        bottom:-45px;
        left:calc(50% - 32px);
        transform:rotate(90deg);
        z-index:1
    }
}
.demo .explain{
    margin:24px 0;
    font-size:18px;
    text-align:center;
    line-height:24px
}
.demo .explain-small{
    font-size:14px;
    color:#838383;
    letter-spacing:-0.15px;
    text-align:center;
    line-height:18px
}
.demo .predefined{
    position:relative;
    display:flex;
    justify-content:space-between;
    flex-direction:row;
    flex-wrap:wrap;
    height:200px
}
.demo .predefined label{
    position:relative;
    width:100%;
    margin-bottom:5%;
    cursor:pointer;
    background-size:cover
}
.demo .predefined label input{
    position:absolute;
    top:16px;
    left:16px
}
.demo .predefined label>img{
    display:none
}
.demo .predefined .original-canvas{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    opacity:0;
    transition:opacity 0.2s ease-in-out;
    background:#eee
}
.demo .predefined .original-canvas.visible{
    pointer-events:unset;
    opacity:1;
    cursor:pointer
}
.disabled {
    background-color: #808080;
}
.demo #file-upload{
    display:none
}
.demo .dimension{
    margin-top:24px;
    font-size:14px;
    color:#868789;
    letter-spacing:-0.15px;
    text-align:center;
    line-height:20px
}
.demo .dimension>div{
    margin-top:12px
}
.demo .dimension input{
    background:#ffffff;
    border:1px solid rgba(32,33,37,0.12);
    border-radius:4px;
    text-align:center;
    width:46px;
    height:40px
}
.demo .demo-smearhash{
    position:relative;
    box-shadow:0 4px 20px rgba(32,33,37,0.2);
    height:200px;
    padding:24px;
    background:#ffffff;
    border-radius:2px;
    font-size:18px;
    text-align:center;
    line-height:24px;
    display:flex;
    overflow:auto;
    justify-content:center;
    align-items:center
}
.demo .demo-smearhash:focus-within{
    box-shadow:0 4px 20px rgba(32,33,37,0.4)
}
.demo #demo-smearhash{
    color:#0019ff;
    word-break:break-all
}
.demo #demo-smearhash.error{
    color:#ff1900
}
.demo .sprite {
    margin: auto;
    background:#ddd
}
.get-started{
    background:url(../images/9b7171b998e865342e33.jpg);
    max-width:1180px;
    height:556px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center
}
.get-started h2{
    margin:0
}
.get-started h2,.get-started p{
    color:#fff
}
.get-started p{
    font-size:24px;
    line-height:32px;
    padding:0 20%
}
@media screen and (max-width: 600px){
    .get-started p{
        padding:0 24px
    }
}
.get-started .white-button{
    background:#fff;
    padding:1rem 2rem;
    color:#0019ff;
    text-decoration:none
}