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

body{
    margin:0;
}

header{
    padding:16px 24px;
    display:flex;
    align-items:center;
    box-shadow:0 2px 5px #bebebe;
}
header .logo{
    margin-right:40px;    
}
header img{
    width:130px;
}

header .links span{
   margin:0 15px;
    font-weight:600;
}

header .links img{
    width:26px;
    display:none;
}

@media screen and (max-width:900px){
    header .logo{width:50%;}
    header{padding:10px;}
    header .links span{display:none;}
    header .links img{display:inline-block;}
    header .links{width:50%; text-align:right;}
    header .logo img{width:110px;}
    
}

main{
    text-align:center;
    padding:10px;
}

.container{
    text-align:left;
    display:inline-block;
    width:1100px;
}

.title{
    font-size:1.4em;
    font-weight:bold;
    margin:30px 0;
    padding:10px 0;
    color:#4a80b7;
    border-bottom:8px solid #4a80b7;
}

.subtitle{
    font-weight:600;
    margin-bottom:20px;
}
.note{
    background:#d1ecf1;
    font-weight:600;
    color:#315a61;
    display:flex;
    padding:30px;
    border-radius:3px;
}

.note .img{
    width:50px;
    margin-right:20px;
}

.note .text{
    width:100%;
}

.init{
    margin:50px 0;
    text-align:center;
}

button{
    background:#0057a6;
    color:white;
    border:none;
    padding:12px 25px; 
    font-weight:600;
}


input{
    width:100%;
    border:1px solid #a5a5a5;
    font-size:1em;
    padding:10px;
}

label{
    display:block;
    margin:5px 0;
    font-size:0.9em;
}

.double{
    display:flex;
}
.double .left{
    width:50%;
}

.double .right{
    width:50%;
}

.double .right input{
    border-left:none;
}

.col{
    margin:20px 0;
}

.col.btn{
    text-align:right;
}

.col.btn button{
    width:200px;
}

footer{
    text-align:center;
    background:#004488;
    color:white;
    padding:30px;
    font-size:0.7em;
    margin-top:90px;
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    
}

footer .social{
    margin:5px 0;
}

footer img{
    width:140px;    
}

footer .links{
    font-weight:bold;
}

 @media screen and (max-width:700px){
     .note{display:block;}
     .note .img{text-align:center;width:100%;}
     .note img{width:40px;margin-bottom:10px;}
     .note .text{font-size:0.9em;}
     .col.btn button{width:100%;}
 }


@media screen and (max-height:800px){
    footer{position:unset;}
}

input.error{
    border:1px solid red;
    box-shadow:0 0 0 2px red;
    background:#fff5f5;
}