@font-face {
    font-family:AvenirR;
    src:url('/fonts/AvenirNextLTPro-Regular.eot?#iefix') format('embedded-opentype'),
    url('/fonts/AvenirNextLTPro-Regular.woff') format('woff'),
    url('/fonts/AvenirNextLTPro-Regular.ttf') format('truetype'),
    url('/fonts/AvenirNextLTPro-Regular.otf') format('opentype')
}
@font-face {
    font-family:AvenirD;
    src:url('/fonts/AvenirNextLTPro-Demi.eot?#iefix') format('embedded-opentype'),
    url('/fonts/AvenirNextLTPro-Demi.woff') format('woff'),
    url('/fonts/AvenirNextLTPro-Demi.ttf') format('truetype'),
    url('/fonts/AvenirNextLTPro-Demi.otf') format('opentype')
}

div,span.body,input,li,ul,textarea {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}

html { height: 100%; min-height:100%;   font-family: sans-serif;background: #e9edf0;
}
body {min-height:100%;
    margin: 0;
    background-size: cover;
    background-attachment: fixed;
}

h1{color: #ff2700;    letter-spacing: 1pt; }



#page{
   width: 100%; text-align: center;}

.content{
    background: white;
    margin: 0 auto 150px auto;
    max-width: 400px;
    padding: 20px;
    color:#2d2d2d;
    border-radius: 0;
}
.content.warning{
    color:white; background:#009de2; font-weight: bold; margin: 0 auto 50px auto;
}
input, button {width: 100%; padding: 15px; font-size: 12pt; margin: 0 0 10px 0;}
button{color:white; background:#c70001; font-weight: bold;}

.content span{opacity: .7;font-size: 10pt;}

hr{display: block; border-style: none;}

.onblink{    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #65ca88;
    animation-name: blink;
    animation-duration: 1.5s; animation-iteration-count: infinite;
    margin: 0 auto;}
.onblink.yellow{background: #ec9d0a;}
.onblink.red{background: #d83e3e;}

.menu {display: inline-block; padding: 100px;}
.menu .loader polyline {     stroke-dasharray: 141.789, 141.789; stroke:#5742C1; fill:none;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;
    /*animation-name: loader;  stroke-dashoffset: -141; opacity: 0;
    animation-duration: 3s; animation-iteration-count: infinite;*/}


.footer{text-align: center; font-size: 8pt; opacity: .4;}
.footer a{color:black;}

@keyframes loader {
    0% {stroke-dashoffset: 141; opacity: 0;}
    5%{opacity: 1;}
    50% {stroke-dashoffset: 0;}
    95%{opacity: 1;}
    100% {stroke-dashoffset: -141; opacity: 0;}

}


@keyframes blink {
    50% {opacity: .5}

}