@font-face{
    font-family:'DMSans';
    src:url("../fonts/DMSans-Bold.woff2");
    font-style:normal;
    font-weight:700;
}
@font-face{
    font-family:'DMSans';
    src:url("../fonts/DMSans-Regular.woff2");
    font-style:normal;
    font-weight:400;
}
:root {
    --main-font-family: 'DMSans', sans-serif;
    --primary-color:  #67A6FF;
}
body{
    font-family: var(--main-font-family);
    font-size: 16px;
    /*overflow-x: hidden;*/
}
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, .uk-heading-2xlarge, .uk-heading-large, .uk-heading-medium, .uk-heading-small, .uk-heading-xlarge, h1, h2, h3, h4, h5, h6{
    font-family: var(--main-font-family);
}
/*** mouse circle ***/
#circle{
    position:absolute;
    height:70px;
    width:70px;
    transform:translate(-50%,-50%);
    z-index: 1000;
    pointer-events: none;    
    background: rgb(0,0,0,0.07);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border-radius: 50%;
    background-clip: padding-box;
    /*transition-duration: 3s;*/
    /*transition-timing-function: cubic-bezier(0.000, 1.270, 0.360, 0.945);*/
    transition: transform 0.2s linear, top 3s cubic-bezier(0.000, 1.270, 0.360, 0.945), left 3s cubic-bezier(0.000, 1.270, 0.360, 0.945);
}
#circle.active{
    transform: translate(-50%,-50%) scale(0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    background: rgb(0,0,0,0.05);
}
#circle.hide{
    transform: translate(-50%,-50%) scale(0);
}
/*** sections ***/
.section{
    /*border: 1px solid blue;*/
}
.section > .left,
.section > .right{
    /*border: 1px solid red;*/
}
.section .left{

}
.section .right{
    
}
/*** box ***/
.right .box{
    max-width: 540px;
    padding-right: 30px;
}
.left .box{
    max-width: 540px;
    padding-left: 30px;
    margin-left: auto;
}
/**** text *****/
.section .title{
    font-size: 56px;
    font-style: normal;
    letter-spacing: -2px;
}
.section .desc{
    font-size: 20px;
    color: #828282;
}
.left  .box .title-container,
.right .box .title-container{
    position: relative;
    height: 70px;
}
.right .box .title-container .title{
    position: absolute;
    top: 0;
    right: 0px;
    white-space: nowrap;
    margin: 0;
}
.left .box .title-container .title{
    position: absolute;
    top: 0;
    left: 0px;
    white-space: nowrap;
    margin: 0;
}
.right .box .desc{
    text-align: right;
}
.i-button{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    margin: 0;
    border: 3px solid #E0E0E0;
    font-size: 20px;
    border-radius: 16px;
    color: #333;
    text-transform: unset;
    text-decoration: none !important;
    outline: 0 !important;
    box-sizing: border-box;
    transition: 200ms;
}
.i-button + .i-button{
    margin-left: 20px;
}
.i-button span{
    display: inline-block;
    border-radius: 12px;
    padding: 13px 45px;
    background: #fff !important;
    box-sizing: border-box;
}
.i-button:before {
    content: '';
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: -3px;
    right: -3px;
    background-image: linear-gradient(90deg, #495AFF 0%, #0ACFFE 100%);
    z-index: -1;
    border-radius: 16px;
    transition: 200ms;
    opacity: 0;
}
.i-button:hover {
    border-color: transparent;
    transform: scale(1.1);
    color:  var(--primary-color);
}
.i-button:hover:before{
    opacity: 1;
}
/***********/
.section-1{
    min-height: 100vh;
    /*overflow-x: hidden;*/
}
.section-1 .left{
    /*transform: translateX(-50px);*/
}
.section-1 .right{
    /*transform: translateX(50px);*/
}
.section-1 .logo-container{
    text-align: right;
}
.section-1 .logo{
    display: inline-block;
    max-width: 350px;
    transition: 200ms;
}
.section-1 .logo:hover{
    transform: scale(0.95);
    opacity: 0.75;
}
.section-1 .box .title-container{
    margin: 40px 0px 20px;
}
.section-1 .button-container{
    text-align: right;
    margin-top: 30px;
}
.section-1 .social-networks{
    display: block;
    margin: 0px auto;
    background: #fff;
    border: 1px solid #ddd;
    width: 190px;
    text-align: center;
    border-radius: 15px;
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 1;
}
.section-1 .social-networks a{
    display: inline-block;
    text-decoration: none;
    color: #4F4F4F;
    transition: 200ms;
}
.section-1 .social-networks a:hover{
    color: var(--primary-color);
    transform: scale(1.35);
}

.section-2 .robot-container{
    position: relative;
}
.section-2 .robot-container .robot{
    position: absolute;
    /*top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);*/
    top: 50px;
    right: 30%;
    max-width: 90%;
    max-height: 90%;
}
.section-3 .image-container{
    position: relative;
}
.section-3 img.laptop{
    position: absolute;
    right: 0;
    top: 20%;
}
.logos-container img{
    margin: 10px;
    transition: 200ms;
}
.logos-container img:hover{
    opacity: 0.75;
    transform: scale(0.95);
}
.section-4{
    overflow: hidden;
    /*background: #f5f5f5;*/
}
.large-title{
    font-size: 300px;
    font-size: 22vw;
    line-height: 1;
    font-weight: 700;
    padding: 50px 200px 100px 0px;
}
.large-title span{
    color: #eee;
    cursor: default;
    transition: 900ms;
}
.large-title span:hover{
    color: #242424;
    transition: 300ms;
}
.stores-container{
    text-align: right;
    margin-top: 30px;
}
.stores-container a{
    display: inline-block;
    margin: 0px 10px;
    transition: 300ms;
}
.stores-container a:hover{
    transform: scale(0.95);
    opacity: 0.75;
}
.stores-container a img{
    height: 45px;
}
.section-7-images{
    position: relative;
}
.section-7-images img.shape{
    position: absolute;
    bottom: 100px;
    left: -170px;
}
.section-8-images{
    position: relative;
}
.section-8-images img.shape{
    position: absolute;
    bottom: 100px;
    right: -120px;
}
.section-9{
    min-height: 100vh;
    position: relative;
}
.section-9 .shape-1{
    position: absolute;
    top: 150px;
    left: 0px;
    width: 100px !important;
}
.section-9 .shape-2{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 450px !important;
}
/****** notes-circle *********/
.image-container{
    position: relative;
}
.image-container img.person{
    position: absolute;
    bottom: 0px;
}
.right .image-container img.person{
    left: 0px;
}
.left .image-container img.person{
    right: 0px;
}
.image-container .notes-circle{
    position: absolute;
    min-width: 75%;
    max-width: 100%;
    width: 600px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    pointer-events: none;
}
.image-container .notes-circle img{
    width: 100%;
}
.always-cirlce{
    animation: always-spin 90s linear infinite;
}
@keyframes always-spin {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(-360deg);
    }
}
.section-7 .image-container .notes-circle{
    width: 800px;
}
.section-8 .image-container .notes-circle{
    width: 650px;
}
.copyright {
	margin: 75px 0 0 0;
    	font-size: 14px;

}