* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    background-color: #202020;
    overflow-x: hidden;
    max-width: 100%;
}

h1,
h2 {
    font-family: 'Russo One', sans-serif;
}

h1 {
    color: #fff;
    font-size: 6em;
}

h2 {
    font-size: 3.6em;
}

h3 {
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 2px;
}

p {
    font-family: 'Monda', sans-serif;
    color: #fff;
}

a {
    color: #fff;
    fill: #0000a0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    transition-property: border-bottom, border-color, background, color, fill;
    transition-duration: .2s;
    transition-timing-function: ease-out;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    text-decoration: none;
    padding-top: .3em;
}

a:hover {
    text-decoration: none;
    color: #f8931f;
    border-bottom: 1px solid rgba(248, 147, 31, 0.7);
}

.header {
    background-color: #202020;
    text-align: center;
    padding: 80px 0 100px 0;
}

.lead {
    font-size: 2em;
    margin-bottom: 30px;
    width: 1140px;
    max-width: 100%;
    margin: auto;
}

.footer {
    background-color: #202020;
    padding: 80px 0 80px 0;
}

.footer p {
    opacity: 0.9;
    font-size: 0.95em;
}

.copy {
    text-align: center;
}

.userpic {
    border-radius: 50%;
    width: 100px;
    float: left;
    margin-left: -114px;
    margin-right: 14px;
    margin-top: -12px;
}

.box {
    margin: 5% 20% 7% 20%;
    padding-bottom: 120px;
}

.psychedelic {
    background-color: #2B003A;
}

.psychedelic h2,
.psychedelic h2 a,
.psychedelic .subtitle {
    color: #FF008F;
}

.psychedelic h2 a:hover {
    color: #fff;
}

.psychedelic a:hover {
    color: #FF008F;
    border-bottom: 1px solid rgba(255, 0, 143, 0.7);
}

.psytrance {
    background-color: #1D0039;
}

.psytrance h2,
.psytrance h2 a,
.psytrance .subtitle {
    color: #AF44FF;
}

.psytrance h2 a:hover {
    color: #fff;
}

.psytrance a:hover {
    color: #AF44FF;
    border-bottom: 1px solid rgba(175, 68, 255, 0.7);
}

.progressive-psy {
    background-color: #041730;
}

.progressive-psy h2,
.progressive-psy h2 a,
.progressive-psy .subtitle {
    color: #7DDED8;
}

.progressive-psy h2 a:hover {
    color: #fff;
}

.progressive-psy a:hover {
    color: #7DDED8;
    border-bottom: 1px solid rgba(125, 221, 215, 0.7);
}

.minimal {
    background-color: #060A24;
}

.minimal h2,
.minimal h2 a,
.minimal .subtitle {
    color: #7C00FF;
}

.minimal h2 a:hover {
    color: #fff;
}

.minimal a:hover {
    color: #7C00FF;
    border-bottom: 1px solid rgba(124, 0, 255, 0.7);
}

.tribal {
    background-color: #220B02;
}

.tribal h2,
.tribal h2 a,
.tribal .subtitle {
    color: #F78200;
}

.tribal h2 a:hover {
    color: #fff;
}

.tribal a:hover {
    color: #F78200;
    border-bottom: 1px solid rgba(247, 130, 0, 0.7);
}

.offbeat {
    background-color: #221918;
}

.offbeat h2,
.offbeat h2 a,
.offbeat .subtitle {
    color: #DE9934;
}

.offbeat h2 a:hover {
    color: #fff;
}

.offbeat a:hover {
    color: #DE9934;
    border-bottom: 1px solid rgba(222, 153, 52, 0.7);
}

.psytechno {
    background-color: #121111;
}

.psytechno h2,
.psytechno h2 a,
.psytechno .subtitle {
    color: #1569FF;
}

.psytechno h2 a:hover {
    color: #fff;
}

.psytechno a:hover {
    color: #1569FF;
    border-bottom: 1px solid rgba(21, 105, 255, 0.7);
}

.psytechtrance {
    background-color: #1D1D1D;
}

.psytechtrance h2,
.psytechtrance h2 a,
.psytechtrance .subtitle {
    color: #3E95FB;
}

.psytechtrance h2 a:hover {
    color: #fff;
}

.psytechtrance a:hover {
    color: #3E95FB;
    border-bottom: 1px solid rgba(62, 149, 251, 0.7);
}

.psybreaks {
    background-color: #11071F;
}

.psybreaks h2,
.psybreaks h2 a,
.psybreaks .subtitle {
    color: #7E3BFF;
}

.psybreaks h2 a:hover {
    color: #fff;
}

.psybreaks a:hover {
    color: #7E3BFF;
    border-bottom: 1px solid rgba(87, 0, 255, 0.7);
}

.mainstream {
    background-color: #202327;
}

.mainstream h2,
.mainstream h2 a,
.mainstream .subtitle {
    color: #DCDEEF;
}

.mainstream h2 a:hover {
    color: #fff;
}

.mainstream a:hover {
    color: #DCDEEF;
    border-bottom: 1px solid rgba(211, 222, 239, 0.7);
}

.goa {
    background-color: #30002B;
}

.goa h2,
.goa h2 a,
.goa .subtitle {
    color: #E000C0;
}

.goa h2 a:hover {
    color: #fff;
}

.goa a:hover {
    color: #E000C0;
    border-bottom: 1px solid rgba(224, 0, 192, 0.7);
}

.nitzhonot {
    background-color: #270028;
}

.nitzhonot h2,
.nitzhonot h2 a,
.nitzhonot .subtitle {
    color: #FF5441;
}

.nitzhonot h2 a:hover {
    color: #fff;
}

.nitzhonot a:hover {
    color: #FF5441;
    border-bottom: 1px solid rgba(255, 84, 65, 0.7);
}

.fullon {
    background-color: #271100;
}

.fullon h2,
.fullon h2 a,
.fullon .subtitle {
    color: #FF9E16;
}

.fullon h2 a:hover {
    color: #fff;
}

.fullon a:hover {
    color: #FF9E16;
    border-bottom: 1px solid rgba(255, 168, 22, 0.7);
}

.twilight {
    background-color: #1D001A;
}

.twilight h2,
.twilight h2 a,
.twilight .subtitle {
    color: #E000C0;
}

.twilight h2 a:hover {
    color: #fff;
}

.twilight a:hover {
    color: #E000C0;
    border-bottom: 1px solid rgba(224, 0, 192, 0.7);
}

.darkpsy {
    background-color: #140000;
}

.darkpsy h2,
.darkpsy h2 a,
.darkpsy .subtitle {
    color: #C80C00;
}

.darkpsy h2 a:hover {
    color: #fff;
}

.darkpsy a:hover {
    color: #C80C00;
    border-bottom: 1px solid rgba(199, 13, 0, 0.7);
}

.forestpsy {
    background-color: #001204;
}

.forestpsy h2,
.forestpsy h2 a,
.forestpsy .subtitle {
    color: #00C804;
}

.forestpsy h2 a:hover {
    color: #fff;
}

.forestpsy a:hover {
    color: #00C804;
    border-bottom: 1px solid rgba(0, 200, 4, 0.7);
}


.hitek {
    background-color: #041F1E;
}

.hitek h2,
.hitek h2 a,
.hitek .subtitle {
    color: #c0ff00;
}

.hitek h2 a:hover {
    color: #fff;
}

.hitek a:hover {
    color: #c0ff00;
    border-bottom: 1px solid rgba(0, 255, 125, 0.7);
}

.psycore {
    background-color: #001211;
}

.psycore h2,
.psycore h2 a,
.psycore .subtitle {
    color: #b8323a;
}

.psycore h2 a:hover {
    color: #fff;
}

.psycore a:b8323a {
    color: #00FF7D;
    border-bottom: 1px solid rgba(0, 255, 125, 0.7);
}

.suomi {
    background-color: #05262A;
}

.suomi h2,
.suomi h2 a,
.suomi .subtitle {
    color: #6FF0BB;
}

.suomi h2 a:hover {
    color: #fff;
}

.suomi a:hover {
    color: #6FF0BB;
    border-bottom: 1px solid rgba(111, 239, 187, 0.7);
}

.psychill {
    background-color: #241B00;
}

.psychill h2,
.psychill h2 a,
.psychill .subtitle {
    color: #FFAD00;
}

.psychill h2 a:hover {
    color: #fff;
}

.psychill a:hover {
    color: #FFAD00;
    border-bottom: 1px solid rgba(255, 173, 0, 0.7);
}

.chillout {
    background-color: #2B1F00;
}

.chillout h2,
.chillout .subtitle,
.chillout h2 a {
    color: #FFE644;
}

.chillout h2 a:hover {
    color: #eee;
    border-bottom: none;
}

.chillout a:hover {
    color: #FFE644;
    border-bottom: 1px solid rgba(255, 229, 68, 0.7);
}

.description {
    margin-right: 6%;
    width: 80%;
    display: table-cell;
}

.subtitle {
    margin-top: -10px;
}

.bpm {
    float: right;
/*    max-width: 110px;*/
    margin-left: 30px;
    /*    margin-top: 30px;*/
}

.bpm p {
    color: #fff;
    opacity: 0.8;
}

.bpm p:last-child {
    font-size: 4em;
    font-family: 'Russo One', sans-serif;
    line-height: 0.6;
    margin-top: -8px;
}

.jouele-playlist {
    margin: 30px 0 50px 0;
}

.artists,
.labels {
    width: 46%;
    float: left;
}

.artists {
    margin-right: 8%;
}

.shadow {
    -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
}

.shadow-top {
    height: 20px;
    -webkit-box-shadow: inset 0 20px 20px -20px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: inset 0 20px 20px -20px rgba(0, 0, 0, 0.8);
    box-shadow: inset 0 20px 20px -20px rgba(0, 0, 0, 0.8);
}


/* For 1740 and below */

@media (max-width: 1740px) {
    .box {
        margin: 5% 10% 10% 10%;
    }
}


/* For 1440 and below */

@media (max-width: 1440px) {
    .bpm {
        max-width: 100px;
    }
    .bpm p:last-child {
        font-size: 3em;
        font-family: 'Russo One', sans-serif;
        line-height: 0.6;
    }
    h1 {
        font-size: 4em;
    }
    h2 {
        font-size: 3em;
    }
    .box {
        margin: 5% 10% 10% 10%;
    }
    .lead {
        font-size: 1.6em;
    }
    .userpic {
        display: none;
    }
}


/* For 1200 and below */

@media (max-width: 1200px) {
    .bpm p:last-child {
        font-size: 3em;
        line-height: 0.6;
    }
    h1 {
        font-size: 4em;
    }
    h2 {
        font-size: 3em;
    }
    .footer div {
        margin-bottom: 20px;
    }
}


/* For 768 and below */

@media (max-width: 768px) {
    .bpm {
        display: none;
    }
    h1 {
        font-size: 3em;
    }
    h2 {
        font-size: 3em;
    }
    .lead {
        font-size: 1.2em;
        line-height: 1.3;
    }
    .header {
        padding: 30px 15px 30px 15px;
    }
    .box {
        margin: 0;
        margin-top: 30px;
        padding-bottom: 60px;
    }
    .artists,
    .labels {
        width: 100%;
        float: none;
    }
    .jouele-playlist {
        margin: 30px 0 30px 0;
    }
    .footer {
        padding: 30px 0 30px 0;
    }
}


/* For 576 and below */

@media (max-width: 576px) {
    h2 {
        font-size: 2.1em;
    }
}