* {
    margin: 0px;
    padding: 0px;
    outline: none;
    font: 12px Verdana, Tahoma, sans-serif;
}

body {
    width: 100vw;
    height: 100vh;

    background-image: url(images/background_1080p.jpg);
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-position-y: top;
}

.container {
    height: 100%;
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-columns: 1fr;
}

.logo {
    width: 30%;
    padding-top: 12vh;
    padding-left: 22px;
    grid-row: 1;
    grid-column: 1;
}

.menu{
    grid-row: 2;
    grid-column: 1;

    height: 95%;
    margin-left: 64px;
    grid-row: 2;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
}



a:link {
	text-decoration: none; 
}


.menu a {
    display: block;
    text-align: center;
    width: 50px;
    height: 50px;
    float: left;
    margin: 12px;
    padding: 0px;

    background-size: contain;
    background-repeat: no-repeat;
}

/*Mobile*/
@media screen and (max-width: 880px) {
    .logo {
        width: 40%;
    }
}
@media screen and (max-width: 680px) {
    .menu {
        margin-left: 30px;
    }
    .logo {
        width: 50%;
    }
}
@media screen and (max-width: 480px) {
    .logo {
        width: 60%;
    }
    body {
        background-position: 58%;
    }

    .menu a {
        width: 48px;
        height: 48px;
        margin: 6px;
    }
}

a.facebook {
    background-image: url(images/button/facebook_n.png);
}
a.facebook:hover { 
    background-image: url(images/button/facebook_s.png);
} 

a.hidden_link_text {
    display: none;
}

a.twitter {
    background-image: url(images/button/twitter_n.png);
}
a.twitter:hover { 
    background-image: url(images/button/twitter_s.png);
} 
a.demodrop {
    background-image: url(images/button/demodrop_n.png);
}
a.demodrop:hover { 
    background-image: url(images/button/demodrop_s.png);
} 

a.soundcloud {
    background-image: url(images/button/soundcloud_n.png);
}
a.soundcloud:hover { 
    background-image: url(images/button/soundcloud_s.png);
} 

a.hearthis {
    background-image: url(images/button/hearthis_n.png);
}
a.hearthis:hover { 
    background-image: url(images/button/hearthis_s.png);
} 

a.sowndhaus {
    background-image: url(images/button/sowndhaus_n.png);
}
a.sowndhaus:hover { 
    background-image: url(images/button/sowndhaus_s.png);
} 

a.instagram {
    background-image: url(images/button/instagram_n.png);
}
a.instagram:hover { 
    background-image: url(images/button/instagram_s.png);
} 

a.youtube {
    background-image: url(images/button/youtube_n.png);
}
a.youtube:hover { 
    background-image: url(images/button/youtube_s.png);
} 

a.mail {
    background-image: url(images/button/mail_n.png);
}
a.mail:hover { 
    background-image: url(images/button/mail_s.png);
} 

a.presskit {
    background-image: url(images/button/presskit_n.png);
}
a.presskit:hover { 
    background-image: url(images/button/presskit_s.png);
}