/* Kompaktes Layout für mobile Geräte */

html {
    /*    margin:2em;*/
    /*
 background-color: #fff;
    background-size: 100%;
    height: 100%;
*/
    /*    height:70em;*/
    /*    width: 1em;*/
}

body {
    background-color: white;
    /*
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
    color: #545454;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
*/
    /*    font-size: 16px;*/
    /*    line-height: 1.5;
    margin: 0 auto;
    width: 20em;
    padding: 2em 2em 2em;
    height: 200em;
    margin:2em;*/
    /*    overflow:auto;*/
    height: 100%;


}

header {
    height: 20em;
    background: url(music-1283851.jpg) center;
    background-size: 100%;
    margin: 0em 0em;
    z-index: 10;

}

nav {
    float: left;
    width: 100%;
    background: #3a3a3a;
    font-size: calc(1em + 1vw);
    font-weight: bold;
    position: sticky;
    top: 0em;
    z-index: 10;
}

nav ul {
    margin-left: -5%;
    padding: 0;
}

nav a {
    display: block;
    color: #fff;
    text-decoration: none;
}

nav ul li {
    position: relative;
    float: left;
    list-style: none;
    color: #fff;
    transition: 0.5s;
    margin-left: 9%;
}

nav ul li a {
    padding: 1em;
}

li.submenu ul {
    width: 200%;
    margin-left: 1em;
}

li.submenu ul li {
    width: 100%;
    margin-left: 0em;
}


nav ul > li.submenu > a:after {
    position: relative;
    float: right;
    content: '';
    margin-left: 1em;
    margin-top: 0.5em;
    border-left: 0.5em solid transparent;
    border-right: 0.5em solid transparent;
    border-top: 0.5em solid #fff;
    border-bottom: 0.5em solid transparent;
}

nav ul ul li.submenu > a:after {
    margin-left: auto;
    margin-right: -1em;
    border-left: 0.5em solid #fff;
    border-right: 0.5em solid transparent;
    border-top: 0.5em solid transparent;
    border-bottom: 0.5em solid transparent;
}

nav ul li:hover {
    background: #8A0886;

}

nav ul ul {
    position: absolute;
    top: -9999px;
    left: -9999px;
    background: #333;
    box-shadow: 0.2em 0.2em 0.5em rgba(0, 0, 0, 0.5);
    z-index: 1;
}

nav ul ul li {
    float: none;
    width: 200px;
    border-bottom: 1px solid #555;
}

nav ul ul li a {
    padding: 10px 20px;
}

nav ul ul li:last-child {
    border-bottom: none;
}

nav ul li:hover > ul {
    top: 100%;
    left: 0;
}

nav ul ul li:hover > ul {
    top: 0;
    left: 200px;
}


footer ul {

    margin-left: 1em;

}

footer ul li {

    margin-left: 1em;
}

footer nav {
    font-size: calc(0.5em + 1vw);
    background: lightgrey;
    font-weight: lighter;

}


h1,
h2,
h3,
h4,
h5,
h6 {
    color: #222;
    font-weight: 600;
    line-height: 1.3;
}

h2 {
    margin-top: 1.3em;
}

a {
    color: #0083e8;
}

b,
strong {
    font-weight: 600;
}

s1 {
    font-size: calc(2em + 1vw);
}

s2 {
    font-size: calc(2.25em + 1vw);
}

s3 {
    font-size: calc(0.5em + 1vw);
}

s4 {
    font-size: calc(1.5em + 1vw);
    
}
p copyright {
    font-size: calc(0.5em + 1vw);
    
    
}


/*

samp {
    display: none;
}
*/




}