@font-face{font-family:Roboto;font-style:normal;font-weight:100;src:url(fonts/roboto-v20-latin-100.eot);src:local('Roboto Thin'),local('Roboto-Thin'),url(fonts/roboto-v20-latin-100.eot?#iefix) format('embedded-opentype'),url(fonts/roboto-v20-latin-100.woff2) format('woff2'),url(fonts/roboto-v20-latin-100.woff) format('woff'),url(fonts/roboto-v20-latin-100.ttf) format('truetype'),url(fonts/roboto-v20-latin-100.svg#Roboto) format('svg')}@font-face{font-family:Roboto;font-style:italic;font-weight:100;src:url(fonts/roboto-v20-latin-100italic.eot);src:local('Roboto Thin Italic'),local('Roboto-ThinItalic'),url(fonts/roboto-v20-latin-100italic.eot?#iefix) format('embedded-opentype'),url(fonts/roboto-v20-latin-100italic.woff2) format('woff2'),url(fonts/roboto-v20-latin-100italic.woff) format('woff'),url(fonts/roboto-v20-latin-100italic.ttf) format('truetype'),url(fonts/roboto-v20-latin-100italic.svg#Roboto) format('svg')}@font-face{font-family:Roboto;font-style:normal;font-weight:300;src:url(fonts/roboto-v20-latin-300.eot);src:local('Roboto Light'),local('Roboto-Light'),url(fonts/roboto-v20-latin-300.eot?#iefix) format('embedded-opentype'),url(fonts/roboto-v20-latin-300.woff2) format('woff2'),url(fonts/roboto-v20-latin-300.woff) format('woff'),url(fonts/roboto-v20-latin-300.ttf) format('truetype'),url(fonts/roboto-v20-latin-300.svg#Roboto) format('svg')}@font-face{font-family:Roboto;font-style:italic;font-weight:300;src:url(fonts/roboto-v20-latin-300italic.eot);src:local('Roboto Light Italic'),local('Roboto-LightItalic'),url(fonts/roboto-v20-latin-300italic.eot?#iefix) format('embedded-opentype'),url(fonts/roboto-v20-latin-300italic.woff2) format('woff2'),url(fonts/roboto-v20-latin-300italic.woff) format('woff'),url(fonts/roboto-v20-latin-300italic.ttf) format('truetype'),url(fonts/roboto-v20-latin-300italic.svg#Roboto) format('svg')}@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:url(fonts/roboto-v20-latin-regular.eot);src:local('Roboto'),local('Roboto-Regular'),url(fonts/roboto-v20-latin-regular.eot?#iefix) format('embedded-opentype'),url(fonts/roboto-v20-latin-regular.woff2) format('woff2'),url(fonts/roboto-v20-latin-regular.woff) format('woff'),url(fonts/roboto-v20-latin-regular.ttf) format('truetype'),url(fonts/roboto-v20-latin-regular.svg#Roboto) format('svg')}@font-face{font-family:Roboto;font-style:italic;font-weight:400;src:url(fonts/roboto-v20-latin-italic.eot);src:local('Roboto Italic'),local('Roboto-Italic'),url(fonts/roboto-v20-latin-italic.eot?#iefix) format('embedded-opentype'),url(fonts/roboto-v20-latin-italic.woff2) format('woff2'),url(fonts/roboto-v20-latin-italic.woff) format('woff'),url(fonts/roboto-v20-latin-italic.ttf) format('truetype'),url(fonts/roboto-v20-latin-italic.svg#Roboto) format('svg')}@font-face{font-family:Roboto;font-style:normal;font-weight:500;src:url(fonts/roboto-v20-latin-500.eot);src:local('Roboto Medium'),local('Roboto-Medium'),url(fonts/roboto-v20-latin-500.eot?#iefix) format('embedded-opentype'),url(fonts/roboto-v20-latin-500.woff2) format('woff2'),url(fonts/roboto-v20-latin-500.woff) format('woff'),url(fonts/roboto-v20-latin-500.ttf) format('truetype'),url(fonts/roboto-v20-latin-500.svg#Roboto) format('svg')}@font-face{font-family:Roboto;font-style:italic;font-weight:500;src:url(fonts/roboto-v20-latin-500italic.eot);src:local('Roboto Medium Italic'),local('Roboto-MediumItalic'),url(fonts/roboto-v20-latin-500italic.eot?#iefix) format('embedded-opentype'),url(fonts/roboto-v20-latin-500italic.woff2) format('woff2'),url(fonts/roboto-v20-latin-500italic.woff) format('woff'),url(fonts/roboto-v20-latin-500italic.ttf) format('truetype'),url(fonts/roboto-v20-latin-500italic.svg#Roboto) format('svg')}@font-face{font-family:Roboto;font-style:normal;font-weight:700;src:url(fonts/roboto-v20-latin-700.eot);src:local('Roboto Bold'),local('Roboto-Bold'),url(fonts/roboto-v20-latin-700.eot?#iefix) format('embedded-opentype'),url(fonts/roboto-v20-latin-700.woff2) format('woff2'),url(fonts/roboto-v20-latin-700.woff) format('woff'),url(fonts/roboto-v20-latin-700.ttf) format('truetype'),url(fonts/roboto-v20-latin-700.svg#Roboto) format('svg')}@font-face{font-family:Roboto;font-style:italic;font-weight:700;src:url(fonts/roboto-v20-latin-700italic.eot);src:local('Roboto Bold Italic'),local('Roboto-BoldItalic'),url(fonts/roboto-v20-latin-700italic.eot?#iefix) format('embedded-opentype'),url(fonts/roboto-v20-latin-700italic.woff2) format('woff2'),url(fonts/roboto-v20-latin-700italic.woff) format('woff'),url(fonts/roboto-v20-latin-700italic.ttf) format('truetype'),url(fonts/roboto-v20-latin-700italic.svg#Roboto) format('svg')}@font-face{font-family:Roboto;font-style:normal;font-weight:900;src:url(fonts/roboto-v20-latin-900.eot);src:local('Roboto Black'),local('Roboto-Black'),url(fonts/roboto-v20-latin-900.eot?#iefix) format('embedded-opentype'),url(fonts/roboto-v20-latin-900.woff2) format('woff2'),url(fonts/roboto-v20-latin-900.woff) format('woff'),url(fonts/roboto-v20-latin-900.ttf) format('truetype'),url(fonts/roboto-v20-latin-900.svg#Roboto) format('svg')}@font-face{font-family:Roboto;font-style:italic;font-weight:900;src:url(fonts/roboto-v20-latin-900italic.eot);src:local('Roboto Black Italic'),local('Roboto-BlackItalic'),url(fonts/roboto-v20-latin-900italic.eot?#iefix) format('embedded-opentype'),url(fonts/roboto-v20-latin-900italic.woff2) format('woff2'),url(fonts/roboto-v20-latin-900italic.woff) format('woff'),url(fonts/roboto-v20-latin-900italic.ttf) format('truetype'),url(fonts/roboto-v20-latin-900italic.svg#Roboto) format('svg')}
*,*::before,*::after{
    font-family: 'Roboto','Helvetica';
    color: rgba(117,120,123,1);
    padding: 0;
    margin: 0;
}
body{
    height: 100vh;
    width: 100vw;
    position: relative;
    background: -webkit-linear-gradient(rgb(224, 228, 158,0.95),rgba(255,255,255,0.95));
    background: -moz-linear-gradient(rgb(224, 228, 158,0.95),rgba(255,255,255,0.95));
    background: -ms-linear-gradient(rgb(224, 228, 158,0.95),rgba(255,255,255,0.95));
    background: -o-linear-gradient(rgb(224, 228, 158,0.95),rgba(255,255,255,0.95));
    background: linear-gradient(rgb(224, 228, 158,0.95),rgba(255,255,255,0.95));
}
form{
    width: 180px;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    background: rgba(255,255,255,0.95);
    box-shadow: -2px 2px 10px rgba(0,0,0,0.1);
}
label{
    display: block;
    width: 100%;
    text-align: left;
    font-size: 14px;
    margin-top: 5px;
}
input[type="submit"]{
    margin-bottom: 10px;
    width: 100%;
    margin-top: 10px;
}
input[type="text"],input[type="password"]{
    width: 100%;
    box-sizing: border-box;
}
nav{
    margin-top: 20px;
    display: inline-block;
    width: 100%;
    clear: both;
    font-size: 10px;
    text-align: center;
}
nav a:nth-of-type(1)::after{
    content: "|";
    margin-left: 10px;
    margin-right: 10px;
}
#logo{
    background: url('img/hbwa.svg');
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: inline-block;
    width: 124px;
    height: 77px;
    margin-bottom: 15px;
    margin-top: 20px;
}
input[type="button"],input[type="submit"],select,input[type="text"],input[type="number"],input[type="password"]{
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    height: 30px;
    box-sizing: border-box;
}
input[type="button"],input[type="submit"]{
    background: -webkit-linear-gradient(rgba(117, 120, 123, 0.5),rgba(117, 120, 123, 1));
    background: -moz-linear-gradient(rgba(117, 120, 123, 0.5),rgba(117, 120, 123, 1));
    background: -ms-linear-gradient(rgba(117, 120, 123, 0.5),rgba(117, 120, 123, 1));
    background: -o-linear-gradient(rgba(117, 120, 123, 0.5),rgba(117, 120, 123, 1));
    background: linear-gradient(rgba(117, 120, 123, 0.5),rgba(117, 120, 123, 1));
    border: none;
    color: #fff;
    font-size: 16px;
    letter-spacing: 1px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
input[type="button"]:hover,input[type="submit"]:hover{
    background: -webkit-linear-gradient(rgba(192, 200, 35, 1),rgba(192, 200, 35, 1));
    background: -moz-linear-gradient(rgba(192, 200, 35, 1),rgba(192, 200, 35, 1));
    background: -ms-linear-gradient(rgba(192, 200, 35, 1),rgba(192, 200, 35, 1));
    background: -o-linear-gradient(rgba(192, 200, 35, 1),rgba(192, 200, 35, 1));
    background: linear-gradient(rgba(192, 200, 35, 1),rgba(192, 200, 35, 1));
    border: none;
    color: #fff;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}