html, body {
    font-family: "Lato", sans-serif;
    background: #13242f;
    overflow: hidden;
}

#logo {
    transition: 1000ms;
}

.logo-small {
    display: block;
    width: 200px;
    height: 50px;
    margin: 10px auto;
}

.logo-big {
    display: block;
    width: 600px;
    height: 150px;
    margin: 50px auto;
}

#container:before {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iOTUlIj48c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9Ijk1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==");
    background-size: 100%;
    background-image: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 20%, #000000 95%);
    background-image: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 20%, #000000 95%);
    background-image: radial-gradient(ellipse cover at center, rgba(0, 0, 0, 0) 20%, #000000 95%);
    position: absolute;
    content: "";
    z-index: 0;
    opacity: 0.9;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

#container:after {
    background: url("../img/noise.png");
    position: absolute;
    content: "";
    z-index: 1;
    opacity: 0.8;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

.message {
    width: 700px;
    margin: auto;
    color: white;
    text-align: justify;
}

.message p {
    margin: 8pt auto;
}

#message-wave {
    display: none;
}

audio {
    position: absolute;
    z-index: 2;
    right: 0;
    top: 0;
}

#upload {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 60px auto;
    max-width: 20%;
    max-height: 20%;
    z-index: 2;
}

#upload div {
    width: 100%;
    padding-bottom: 100%;
    border-radius: 50%;
    overflow: hidden;
    background-color: #eaeaea;
}

#upload img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    max-width: 80%;
    max-height: 80%;
}

#upload input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
    width: 100%;
    height: 100%;
}

.modal {
    display: none;
    transition: background-color 1000ms linear;
    opacity: 0.9;
    margin: 50px 0;
    height: 50%;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

#piechart-container {
    z-index: 3;
    width: 600px;
    height: 500px;
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -300px;
    margin-top: -250px;
}

#piechart {
    position: relative;
    width: 400px;
    height: 450px;
}

#legend {
    float: right;
    margin-top: 15%;
}

#legend ul {
    color: white;
    font-size: 20pt;
}

#legend ul li span {
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 2px;
}
