body {background-color: #ab0b28; background-image: url('../img/bg.png'); background-repeat: no-repeat; background-attachment: fixed;
    background-position: center;  background-size: 100%; background-position: left bottom;  margin: 30px; color: #80ae08; height: 100%; font-family: 'heroregular';}
.logo {max-width: 280px; margin: 30px auto 0;}
.responsive-bg {position: fixed; bottom: 0; right: 0;}
.responsive-bg img {width: 100%; min-width: 100%; height: auto;}
h1 {color: #263942; margin-top: 40px;}
li {font-size: 20px;}
.one {color: #f24e6c;}
.two {color: #e7415f;}
.three {color: #dc3654;}
.four {color: #d32d4b;}
.five {color: #ca2341;}
p.copyright {text-align: center; color: #fff; font-size: 10px;}

@font-face {
    font-family: 'hero_lightlight';
    src: url('hero_light-webfont.eot');
    src: url('hero_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('hero_light-webfont.woff2') format('woff2'),
         url('hero_light-webfont.woff') format('woff'),
         url('hero_light-webfont.ttf') format('truetype'),
         url('hero_light-webfont.svg#hero_lightlight') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'heroregular';
    src: url('../hero-webfont.eot');
    src: url('../hero-webfont.eot?#iefix') format('embedded-opentype'),
         url('../hero-webfont.woff2') format('woff2'),
         url('../hero-webfont.woff') format('woff'),
         url('../hero-webfont.ttf') format('truetype'),
         url('../hero-webfont.svg#heroregular') format('svg');
    font-weight: normal;
    font-style: normal;

}