@font-face {
    font-family: Icons;
    src: url(webfonts/fontawesome.eot?v=4.2.0);
    src: url(webfonts/fontawesksome.eot?#iefix&v=4.2.0) format('embedded-opentype'), url(webfonts/fontawesome.woff?v=4.2.0) format('woff'), url(webfonts/fontawesome.ttf?v=4.2.0) format('truetype'), url(webfonts/fontawesome.svg?v=4.2.0#fontawesomeregular) format('svg')
}

@font-face {
    font-family: LHFbootCamp;
    src: url(webfonts/lhfbootcamp.eot);
    src: url(webfonts/lhfbootcamp.eot?#iefix) format('embedded-opentype'), url(webfonts/lhfbootcamp.woff2) format('woff2'), url(webfonts/lhfbootcamp.woff) format('woff'), url(webfonts/lhfbootcamp.ttf) format('truetype'), url(webfonts/lhfbootcamp.svg#lhf_boot_camp_regularregular) format('svg')
}

@font-face {
    font-family: RobotoLight;
    src: url(webfonts/robotocondensed-light-webfont.eot);
    src: url(webfonts/robotocondensed-light-webfont.eot?#iefix) format('embedded-opentype'), url(webfonts/robotocondensed-light-webfont.woff2) format('woff2'), url(webfonts/robotocondensed-light-webfont.woff) format('woff'), url(webfonts/robotocondensed-light-webfont.ttf) format('truetype'), url(webfonts/robotocondensed-light-webfont.svg#robotocondensed-light-webfont) format('svg')
}

* {
    margin: 0;
    padding: 0
}

body, input, textarea {
    font: 400 1em/1em RobotoLight;
}

h1 {
    font-family: LHFbootCamp;
    font-weight: 400;
    color: rgba(244, 0, 0, .8);
    font-size: 2em;
    line-height: 1em;
    padding: 0;
    margin: 0 0 1em;
}

p {
    color: #FFFFFF;
    font-weight: 400;
    font-family: RobotoLight;
    font-size: .95em;
    line-height: 1.4em;
    padding-bottom: 15px;
    text-align: center;
}

a {
    color: #FFFFFF;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

p:last-child {
    padding-bottom: 0;
}

#content {
    padding: 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    background-color: #111111;
    gap: 3rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

#content > .teaser {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    color: #fff;
    text-align: center;
}

#content > .item {
        -ms-flex-preferred-size: 20%;
            flex-basis: calc(20% - 3rem);
    min-width: 16rem;
    -ms-flex-negative: 1;
        flex-shrink: 1;
}

#content > .item > img {
    max-width: 100%;
}

#footer {
    background-color: #000;
    padding: 3em 1.5rem;
}

.embedplayer {
    position: relative;
    padding-bottom: 56.25%;
    width: 100%;
    height: auto
}

.embedplayer > #downforce {
    height: 3.5em;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .9);
    position: absolute;
    z-index: 4;
    text-align: center
}

.embedplayer > #downforce::before {
    font-family: Icons;
    content: '\f107';
    color: #fff;
    font-size: 4em;
    position: relative;
    top: .25em;
    cursor: pointer
}

.embedplayer > iframe {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

ul.buylinks {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 1rem;
    gap: 1rem;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

ul.buylinks li a {
    display: block;
    height: 25px;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 5px 6px;
    background-color: #F0F0F0;
    border-radius: 3px
}

ul.buylinks li a:hover {
    background-color: #FFFFFF
}

ul.buylinks li.amazon a {
    width: 83px;
    background-image: url(images/amazon.png)
}

ul.buylinks li.amazon a:hover {
    background-image: url(images/amazonActive.png);
}

ul.buylinks li.youtube a {
    width: 83px;
    background-image: url(images/youTubeMusicBlack.svg);
    background-size: 90%;
    -webkit-filter: grayscale(1);
            filter: grayscale(1);
}

ul.buylinks li.youtube a:hover {
    -webkit-filter: grayscale();
            filter: grayscale(0);
}
