@font-face {
    font-family: "AvantGarde";
    src: local(AvantGarde), url(fonts/avantgarde.ttf);
    src: url("fonts/avantgarde.eot");
    src: url("fonts/avantgarde.eot?#iefix") format("embedded-opentype"), 
        url("fonts/avantgarde.woff") format("woff"), 
        url("fonts/avantgarde.ttf") format("truetype"), 
        url("fonts/avantgarde.svg#AvantGarde") format("svg");
    font-weight: normal;
    font-style: normal; }

@font-face {
    font-family: "Amatic";
    src: local(Amatic), url(fonts/Amatic-Bold-webfont.ttf);
    src: url("fonts/Amatic-Bold-webfont.eot");
    src: url("fonts/Amatic-Bold-webfont.eot?#iefix") format("embedded-opentype"), 
        url("fonts/Amatic-Bold-webfont.woff") format("woff"), 
        url("fonts/Amatic-Bold-webfont.ttf") format("truetype"), 
        url("fonts/Amatic-Bold-webfont.svg#amatic") format("svg");
    font-weight: normal;
    font-style: normal; }
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0; }

body {
    background: -webkit-radial-gradient(#536372 7%, #28353f 70%);
    /* Safari 5.1-6.0 */
    background: -o-radial-gradient(#536372 7%, #28353f 70%);
    /* For Opera 11.6-12.0 */
    background: -moz-radial-gradient(#536372 7%, #28353f 70%);
    /* For Firefox 3.6-15 */
    background: radial-gradient(#536372 7%, #28353f 70%);
    /* Standard syntax */
    color: #fff;
    font-family: "AvantGarde", Arial, sans-serif; }

h1, h2, h3, h4, h5 {
    font-family: "Amatic", Arial, serif;
    color: #fff;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5); }

h1 {
    font-size: 100px; }

h2 {
    font-size: 60px; }

h3 {
    font-size: 55px;
    font-size: 50px;
    margin: 0;
    padding: 0; }

h4 {
    font-size: 30px; }

h5 {
    font-size: 20px; }
/* Screens START */
.screen {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    display: none; }
body.screen_ranking #screen_ranking {
    display: block;
    background-image: url('../img/gui/fons_textura.png');
    background-size: cover; }
body.screen_ranking #screen_ranking:after {
    background: url(../img/gui/ranking_fonsesquerra.png) center right no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    width: 250px;
    height: 100%;
    content: " ";
    background-size: 250px; }
body.screen_ranking #screen_ranking:before {
    background: url(../img/gui/ranking_fonsdreta.png) center right no-repeat;
    position: absolute;
    right: 0;
    top: 0;
    width: 250px;
    height: 100%;
    content: " ";
    background-size: 250px; }
body.screen_ranking #element_013, body.screen_ranking #element_014, body.screen_ranking #element_015, body.screen_ranking #element_105 {
    display: block; }
.element {
    position: fixed;
    display: none; }
#element_013 {
    position: absolute;
    top: 0px;
    width: 100%;
    text-align: center;
    z-index: 10; }
#element_013 h1 {
    margin: 5px; }

#element_014 {
    position: absolute;
    top: 140px;
    width: 100%;
    text-align: center;
    z-index: 10; }
#element_014 h2 {
    margin: 5px; }
#element_014 h2 span {
    color: #94db1d; }

#element_015 {
    position: absolute;
    top: 240px;
    width: 100%;
    text-align: center;
    z-index: 10; }
#element_015 li {
    font-size: 40px;
    list-style: none;
    font-family: "Amatic", Arial, serif;
    color: #fff;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5); }
#element_015 li span {
    color: #94db1d; }
#element_015 .prize {
    width: 15vw;
    height: 25vw;
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 0 auto; }
#element_015 .prize.gold {
    background-image: url(../img/gui/online/puntuacion_oro.png); }
#element_015 .prize.silver {
    background-image: url(../img/gui/online/puntuacion_plata.png); }
#element_015 .prize.bronze {
    background-image: url(../img/gui/online/puntuacion_bronce.png); }