*{
    max-width:100%;
    box-sizing:border-box;
    font-family:'Calibri', sans-serif;
    outline:none;
}

body{
    margin:0;
}

.holder{
    display:inline-flex;
    width:1100px;
}

header{
    text-align:center;
    padding:20px;
}

header .holder{
    align-items:center;
}
header img{
    width:238px;
}


.left,.right{
    width:50%;
}

.left{
    text-align:left;

}
.right{
    text-align:right;
}

main{
    text-align:center;
}
.banner{
    text-align:center;
    background:#03c366;
    padding:40px;
    font-size:2em;
    color:white;
}
.banner .holder{
    font-weight:100;
}

.user{
    display:inline-flex;
    align-items:center;
    flex-direction:column;
}
.user img{
    width:33px;
}

.user span{
    font-size:0.9em;
}

main .holder{
    width:100%;
}
main .left{
    background:#f5f7f8;
    text-align:center;
}

main .form{
    display:inline-block;
    margin:90px 0;
    text-align:left;
    width:400px;
}

main .right{
    display:flex;
    align-items:center;
    justify-content:center;
}
main .right img{
    width:380px;
    margin:90px 0;
}

.col{
    margin:20px 0;
}
input{
    width:1000%;    
    font-size:1.08em;
    font-style:italic;
    border:none;
}

input, input::placeholder{
    color:#aeaeae;
}

#loader{
    display:none;
}

.input{
    margin:4px 0;
    display:flex;
    background:white;
    padding:7px;
}
.input img{
    width:27px;
    margin-right:5px;
}

label{
    font-weight:bold;
    display:block;
    padding:5px 0;
    color:#383737;
}

span.a{
    color:#9f9f9f;
    font-size:0.9em;
    text-decoration:underline;
    display:block;
    margin-top:8px;
}

.title{
    font-size:1.4em;
    font-weight:bold;
    color:#383737;
}

button{
    border:1px solid #03c366;
    background:white;
    color:#03c366;
    padding:15px 30px;
    border-radius:50px;
    font-weight:bold;
    display:flex;
    align-items:center;
    font-size:0.9em;
    cursor:pointer;
}

button:hover, button:active, button:focus{
    background:#03c366;
    color:white;
}

button img{
    width:40px;
    margin:-17px 0;

}
.text{
    margin:20px 0;
}

@media (max-width:800px){
    body{background:#f5f7f8}
    header{padding:10px; background:white;}
    header span{  display:none;  }
    main .right{display:none;}
    main .left{width:100%; padding:20px; }
    main .form{margin:20px 0;}
    .banner{padding:20px;}
}

input.error{
    background:#ffebeb;
}