*{
    padding: 0px;
    margin: 0px;
}
body{
    font-family: 'Montserrat-regular',"Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #525c69;
}
#container{
    display: flex;
    flex: 1;
    width: 100%;
    min-height: 100%;
    background: linear-gradient(to bottom,#5ce5fb 0,#2fc6f6 100%);
}
#cover{
    transform: translateX(0);
    opacity: 1;
    color: #fff;
    padding: 59px 49px 49px 66px;
    display: flex;
    flex-direction: column;
    position: relative;
    flex: 1;
    flex-grow: 4;
    -webkit-box-flex: 4;
    box-sizing: border-box;
    transition: transform .7s cubic-bezier(.36,.15,.26,.99),opacity .7s cubic-bezier(.36,.15,.26,.99);
    height: 100vh;
    font-family: 'Montserrat-regular',"Helvetica Neue",Helvetica,Arial,sans-serif;
    animation: mymove 0.5s 1;
}
@keyframes mymove {
    from {flex-grow: 100;}
    to {flex-grow: 4;}
  }
#cover-top{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 183px;
    color: #fff;
    font-family: 'Montserrat-regular',"Helvetica Neue",Helvetica,Arial,sans-serif;
}
#logo{
    margin-bottom: 9px;
    margin-right: 0;
    color: #fff;
}
#logo>img{
    max-width: 100%;
    height: auto;
    color: #fff;
}
#back{
    opacity: .9;
    transition: opacity .2s ease;
    margin-bottom: 8px;
    color: #fff;
    font-size: 20px;
}
#back>a{
    font-size: 15px;
    line-height: 19px;
    color: #fff;
    text-decoration: none;
    position: relative;
    padding-left: 18px;
    cursor: pointer;
    white-space: nowrap;
}
#link-back::before{
    position: absolute;
    top: 7px;
    left: 0;
    width: 11px;
    height: 7px;
    background: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2211%22%20height%3D%227%22%20viewBox%3D%220%200%2011%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M1.93%203H11v1H2.042L4%206.147%203.222%207%20.112%203.588l.024-.027L0%203.411%203.111%200l.778.853L1.93%203z%22%20fill%3D%22white%22/%3E%0A%3C/svg%3E%0A) no-repeat center;
    content: '';
}
#cover-middle{
    max-width: 493px;
    display: block;
    color: #fff;
    font-family: 'Montserrat-regular',"Helvetica Neue",Helvetica,Arial,sans-serif;
}
#cover-middle div{
    font-size: 50px;
    line-height: 50px;
    margin-bottom: 30px;
    font-family: 'Montserrat-medium',"Helvetica Neue",Helvetica,Arial,sans-serif;
    letter-spacing: 3px;
}

#cover-middle span{
    font-size: 25px;
    line-height: 26px;
    font-family: 'Montserrat-regular',"Helvetica Neue",Helvetica,Arial,sans-serif;
    letter-spacing: 2px;
}
#cloud{
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: -1;
    display: block;
    color: #fff;
    font-family: 'Montserrat-regular',"Helvetica Neue",Helvetica,Arial,sans-serif;
}
#cloud>div:nth-child(1){
    position: absolute;
    left: -185px;
    top: 116px;
    width: 760px;
    height: 474px;
    transition: left 5s ease-in-out;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%22754%22%20height%3D%22474%22%20viewBox%3D%220%200%20754%20474%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%20%3Cpath%20opacity%3D%22.399%22%20d%3D%22M617.36%20131.239C610.323%2058.159%20548.315%201%20472.835%201c-58.294%200-108.54%2034.11-131.651%2083.3-15.49-5.59-32.204-8.646-49.641-8.646-80.2%200-145.213%2064.521-145.213%20144.117%200%203.765.19%207.484.475%2011.177a124.73%20124.73%200%200%200-30.016-3.659C48.421%20227.289-7%20282.292-7%20350.145-7%20417.996%2048.42%20473%20116.789%20473h461.853C674.938%20473%20753%20395.521%20753%20299.952c0-82.358-57.985-151.228-135.64-168.713%22%20stroke%3D%22white%22/%3E%0A%3C/svg%3E%0A);
}
#cloud>div:nth-child(2){
    right: 8%;
    left: 420px;
    top: 143px;
    width: 66px;
    height: 42px;
    transition: right 5s ease-in-out;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20viewBox%3D%220%200%2068%2042%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%20%3Cpath%20opacity%3D%22.399%22%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M54.944%2012.11C54.336%205.875%2048.98%201%2042.457%201c-5.036%200-9.377%202.91-11.374%207.106a12.756%2012.756%200%200%200-4.29-.738c-6.928%200-12.545%205.504-12.545%2012.293%200%20.321.016.638.04.953a10.909%2010.909%200%200%200-2.593-.312C5.788%2020.302%201%2024.994%201%2030.782s4.788%2010.48%2010.695%2010.48H51.6c8.32%200%2015.064-6.61%2015.064-14.762%200-7.025-5.01-12.9-11.719-14.39%22%20stroke%3D%22white%22/%3E%0A%3C/svg%3E%0A);
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    pointer-events: none;
    display: block;
    color: #fff;    
}
#cloud>div:nth-child(3){
    right: -4%;
    left: 395px;
    width: 188px;
    height: 119px;
    transition: right 5s ease-in-out;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%22190%22%20height%3D%22119%22%20viewBox%3D%220%200%20190%20119%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%20%3Cpath%20opacity%3D%22.399%22%20d%3D%22M155.17%2033.356C153.433%2015.2%20138.121%201%20119.483%201c-14.394%200-26.8%208.474-32.508%2020.695a35.846%2035.846%200%200%200-12.257-2.148c-19.804%200-35.857%2016.029-35.857%2035.803%200%20.936.047%201.86.117%202.777a30.624%2030.624%200%200%200-7.411-.909C14.685%2057.218%201%2070.883%201%2087.74s13.685%2030.521%2030.567%2030.521H145.61c23.778%200%2043.053-19.248%2043.053-42.99%200-20.462-14.318-37.571-33.493-41.915%22%20stroke%3D%22white%22/%3E%0A%3C/svg%3E%0A);
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    pointer-events: none;
    display: block;
    color: #fff;
}
#cloud>div:nth-child(4){
    left: 160px;
    top: 83%;
    width: 127px;
    height: 80px;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20viewBox%3D%220%200%20127%2080%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%20%3Cpath%20opacity%3D%22.2%22%20fill-rule%3D%22evenodd%22%20vector-effect%3D%22non-scaling-stroke%22%20stroke-width%3D%221%22%20%20clip-rule%3D%22evenodd%22%20d%3D%22M104.057%2021.87C102.884%209.598%2092.55%200%2079.97%200c-9.715%200-18.09%205.728-21.94%2013.988a24.161%2024.161%200%200%200-8.274-1.452c-13.366%200-24.202%2010.835-24.202%2024.201%200%20.633.032%201.257.08%201.877A20.636%2020.636%200%200%200%2020.63%2038C9.237%2038%200%2047.236%200%2058.63c0%2011.395%209.237%2020.631%2020.631%2020.631h76.973c16.049%200%2029.059-13.01%2029.059-29.059%200-13.83-9.664-25.395-22.606-28.331z%22%20fill%3D%22white%22/%3E%0A%3C/svg%3E%0A);
    transition: left 5s ease-in-out;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    pointer-events: none;
    display: block;
    color: #fff;
}
#form{
    transform: translateX(0);
    opacity: 1;
    display: flex;
    justify-content: center;
    overflow: auto;
    box-sizing: border-box;
    padding: 105px 60px 10px;
    height: 100vh;
    background: #fff;
    box-shadow: -2px 0 22px rgb(0 0 0 / 12%);
    transition: transform .8s cubic-bezier(.36,.15,.26,.99),opacity .8s cubic-bezier(.36,.15,.26,.99);
    flex: 1;
    flex-grow: 6;
    -webkit-box-flex: 6;
}
#form-inner{
    width: 70%; 
}

#form-inner>div{
    font: 31px/39px 'Montserrat-medium',"Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #333;
    text-overflow: ellipsis;
    margin-bottom: 25px;
}
#form-inner>div:nth-child(2){
    width: 100%;
    border-bottom: 1px solid #eeeff0;
}
label{
    font-size: 22px;
    color: #56595c;
}
#email{
    position: relative;
    overflow: hidden;
    display: block;
    white-space: normal;
    margin-top: 15px;
}
#email>input{
    padding: 12px 85px 15px 17px;
    border: 2px solid #d1d4d8;
    border-radius: 3px;
    color: #333;
    font-size: 20px;
    line-height: 26px;
    transition: border .2s ease;
    box-sizing: border-box;
    width: 100%;
    background: transparent;
    font-family: 'Montserrat-regular',"Helvetica Neue",Helvetica,Arial,sans-serif;
}
#or{
    background: rgba(82,92,105,.1);
    width: 100;
    height: 1px;
    margin: 30px 0 38px;
    position: relative;
    display: block;
}
#or>span{
    color: #6e757e;
    font-size: 16px;
    line-height: 20px;
    background: #fff;
    padding: 0 18px;
    display: block;
    position: absolute;
    top: -10px;
    left: 50%;
}
#login-other{
    text-align: center;
    margin: 0 0 32px;
    display: block;
}
#login-other>span{
    font-size: 16px;
    color: rgb(164, 162, 162);
    text-align: center;
}

#login-other>div{
    width: 100%;
    display: flex;
    flex-direction: row;
    border-radius: 34px;
    background: rgba(241,245,246,.8);
    padding: 20px;
}
#login-option{
    width: 65%; 
    padding-right: 40px;
    border-right: 1px solid #cacccd;
}
ul{
    text-decoration: none;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
li{
    display: flex;
    margin-bottom: 10px;
}
li>img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 20px;    
    background-color:white;
    cursor: pointer;
}
#google{
    display: flex;
    font-size: 16px;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    padding-right: 10px;    
    margin-left: 20px;
    cursor: pointer;
}   
#google>img{
    width: 16px;
    height: 16px;
    position: relative;
    top: 10px;
    left: -10px;
}
#qrcode-login{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 135px;
    box-sizing: border-box;
    cursor: pointer;
    transition: .1s;
    text-align: center;
}

#qrcode-login>img{
    width: 49px;
    height: 49px;
    margin-bottom: 15px;
    opacity: .7;
}
#qrcode-login>p{
    font-size: 13px;
    padding: 0px 10px;
    line-height: 15px;    
}
#form-bottom{
    width: 100%;
    padding: 45px 0 52px;
    border-top: 1px solid rgba(82,92,105,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    overflow: hidden;
    position: relative;
}
#form-bottom>input{
    color: #fff;
    background-color: #9dcf00;
    border-color: #9dcf00;
    padding: 0 33px;
    width: 158px;
    height: 52px;
    border-radius: 26px;
    font: 17px/23px 'Montserrat-medium',"Helvetica Neue",Helvetica,Arial,sans-serif;
    margin: 7px 2px;
    font-size: 20px;
    cursor: pointer;
}
#form-bottom>button{
    margin-left: 15px;
    height: 52px;
    font: 17px/23px 'Montserrat-medium',"Helvetica Neue",Helvetica,Arial,sans-serif;
    overflow: hidden;
    margin: 7px 2px;
    color: #757d87;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;  
    box-sizing: border-box;
    outline: none;
    border: 0;
    background-color: #fff;
    margin-left: 20px;
    cursor: pointer;
}
#help{
    text-align: center;
}
#help>a{
  
    font-size: 16px;
}

#lang{
    opacity: 1;
    transform: translateX(0);
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
}
#lang>div{
    background: rgba(255, 255, 255, .2) url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%20%3Cpath%20opacity%3D%22.7%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M1.414%204.242L0%205.656%204.243%209.9l1.414%201.414L7.07%209.9l4.243-4.243-1.415-1.414-4.242%204.243-4.243-4.243z%22%20fill%3D%22white%22/%3E%0A%3C/svg%3E%0A) no-repeat right 12px top 12px;
    border: 2px solid rgba(255,255,255,.38);
    border-radius: 3px;
    width: 155px;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 12px 56px 13px 14px;
    box-sizing: border-box;
    transition: background .2s ease;
    color: #fff;
}
#lang>div>span{
    font-size: 13px;
    line-height: 16px;
    width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    color: #fff;
}