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

}

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

}
 
* {
  margin: 0;
  padding: 0;
}

body {
  background: black;
}

canvas {
  display: block;
  opacity: 0.4;

    width: 100%;
    height: 100%;
    top: 0;
    position: absolute;

}


/* -------- Global -------- */
HTML{height:100%;width:100%; margin: 0;}
/*BODY{background: #fbfffe url(../images/pattern.png) repeat top left;}*/


SECTION.top{padding:50px 0 0 200px;max-width:800px;}
SECTION.bottom{padding:60px 0 0 200px;max-width:800px;}

H1{font:normal 45px 'brandon_grotesqueblack', arial, helvetica, sans-serif;color:#cdcfd0;text-align:left;text-transform:uppercase;line-height:1.2;margin:0 0 20px 0;}
H2{font:normal 35px 'brandon_grotesqueblack', arial, helvetica, sans-serif;color:#cdcfd0;text-align:left;text-transform:uppercase;line-height:1.2;margin:0 0 20px 0;}
H3{font:normal 35px 'brandon_grotesqueblack', arial, helvetica, sans-serif;color:#ffbf15;text-align:left;text-transform:uppercase;line-height:1.2;margin:0 0 20px 0;}
H4{font:normal 25px 'CoreHumanistSansRegular', arial, helvetica, sans-serif;color:#cdcfd0;text-align:left;text-transform:uppercase;line-height:1.2;}

.fb{color:#415e9b;text-decoration:none;}
.fb:hover{opacity:0.8;}
.db{color:#e94b88;text-decoration:none;}
.db:hover{opacity:0.8;}
.lp{color:#97ba64;text-decoration:none;}
.lp:hover{opacity:0.8;}
.bh{color:#1575f3;text-decoration:none;}
.bh:hover{opacity:0.8;}

.mail{color:#64e3ed;}


section br{
    display: none;
}

h2 br{
    display: block;
}

ul {
    list-style-type: none;
    margin-top: -10px;
    margin-bottom: 30px;
    max-width: 570px;
    padding: 0;
}

.skill-set li {
    background: rgba(0,0,0,.75);
    border-radius: 5px;
    color: #FFF;
    display: inline-block;
    list-style: none;
    margin: 15px 15px 0 0;
    padding: 10px;
    text-align: justify;

    background: #fbfffe url(../images/pattern.png) repeat top left;
    color: #000;
}
.skill-set li:hover
{
    background:#3498db;
}

/* -------- MEDIA QUERIES -------- */

@media screen and (max-width: 1200px) {
SECTION.top{padding:50px 0 0 80px;}
SECTION.bottom{padding:60px 0 0 80px;}
}

@media screen and (max-width: 600px) {
SECTION.top{padding:40px 20px 0 40px;}
SECTION.bottom{padding:60px 20px 0 40px;}
H1{font:normal 40px 'brandon_grotesqueblack', arial, helvetica, sans-serif;line-height:0.95;}
H2{font:normal 30px 'brandon_grotesqueblack', arial, helvetica, sans-serif;line-height:0.95;}
H3{font:normal 30px 'brandon_grotesqueblack', arial, helvetica, sans-serif;line-height:0.95;}
}


section.top{
  /*background: #fbfffe url(../images/pattern.png) repeat top left;*/
  position: absolute;
  top:0;
}