/* FAMILIES */
@font-face {
    font-family: 'fs_lola_webregular';
    src: url('../../fonts/fs_lola_web-regularWEB.eot');
    src: url('../../fonts/fs_lola_web-regularWEB.eot?#iefix') format('embedded-opentype'),
	     url('../../fonts/fs_lola_web-regularWEB.woff') format('woff'),
         url('../../fonts/fs_lola_web-regularWEB.ttf') format('truetype'),
         url('../../fonts/fs_lola_web-regularWEB.svg#fs_lola_webregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'fs_lola_web_boldregular';
    src: url('../../fonts/fs_lola_web-boldWEB.eot');
    src: url('../../fonts/fs_lola_web-boldWEB.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/fs_lola_web-boldWEB.woff') format('woff'),
         url('../../fonts/fs_lola_web-boldWEB.ttf') format('truetype'),
         url('../../fonts/fs_lola_web-boldWEB.svg#fs_lola_web_boldregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* SIZES */
#chart-frame { font-size: 100%; font-family: Arial, Sans-Serif; }
@media screen and (max-width:479px) and (max-height:299px) { 
    #chart-frame { font-size: 40%; }
}
@media screen and (max-width:479px) and (min-height:300px) { 
    #chart-frame { font-size: 45%; }
}
@media screen and (max-width:479px) and (min-height:500px) { 
    #chart-frame { font-size: 50%; }
}
@media screen and (max-width:479px) and (min-height:700px) { 
    #chart-frame { font-size: 60%; }
}
@media screen and (min-width:480px) and (max-height:299px) { 
    #chart-frame { font-size: 40%; }
}
@media screen and (min-width:480px) and (min-height:300px) {
    #chart-frame { font-size: 50%; }
}
@media screen and (min-width:480px) and (min-height:500px) {
    #chart-frame { font-size: 60%; }
}
@media screen and (min-width:480px) and (min-height:700px) {
    #chart-frame { font-size: 65%; }
}
@media screen and (min-width:480px) and (min-height:1000px) {
    #chart-frame { font-size: 70%; }