a {
    color: inherit;
    text-decoration: underline;
}

body {
    color: #eee;
    font-family: Lato, Roboto, Helvetica, sans-serif;
    font-size: 14pt;
}

footer {
    color: #666;
    font-size: 12pt;
    margin: 10em 0 5em;
    text-align: center;
}

footer .copy {
    font-size: 9pt;
}

footer .logo {
    display: block;
    margin:  3em auto;
    width: 5em;
}

h1 {
    margin: 0;
}

h1 .logo {
    display: block;
    margin: 0 auto;
    width: 5em;
}

h2 {
    margin: 1em 0;
    text-align: center;
    text-transform: uppercase;
}

header {
    margin: 2em 0 4em;
}

hgroup {
    margin: 2em 1em;
    text-align: center;
}

html {
    background: url('../assets/background_dark.png') center center no-repeat fixed #dadada;
    background-size: cover;
}

iframe {
    border: 0;
    display: block;
    margin: 0 auto;
}

img {
    display: block;
    max-width: 100%;
}

nav {
    margin: -2em 0 3em;
}

nav a {
    color: #666;
    text-decoration: none;
}

nav a:hover {
    color: #fff;
}

nav li {
    display: inline;
    margin: 0 1em;
}

nav ul {
    font-size: 14pt;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    text-transform: uppercase;
}

p {
    line-height: 1.35em;
    margin: 0.5em 0;
}

q {
    font-style: italic;
}

section {
    margin: 0 auto 4em;
    max-width: 1200px;
}

#artwork a {
    display: block;
    margin: 0 auto;
    max-width: 600px;
}

#artwork img {
    box-shadow: 0 0 20px black;
}

#contact {
    text-align: center;
}

#front p {
    margin: 1em 0;
}

#front section {
    margin: 2em auto 5em;
}

#mailing-list {
    text-align: center;
}

#mailing-list input {
    margin: 0.5em;
}

#mailing-list input[type=text],
#mailing-list input[type=email] {
    background-color: rgba(255,255,255,0);
    color: #fff;
    border: solid 1px #fff;
    border-radius: 2px;
    padding: 11px 20px;
    width: 283px;
    font-size: 18px;
    font-weight: 400;
    max-width: 325px;
}

#mailing-list input[type=submit] {
    background: #E92459;
    color: #fff;
    width: 167px;
    padding: 0 10px;
    border: none;
    border-radius: 4px;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 17px;
    text-align: center;
    cursor: pointer;
    height: calc(45px - 2px - 2px);
    max-width: calc(167px - 2px - 2px);
}

#merch {
    align-items: center;
    display: flex;
}

#merch a {
    font-size: 26pt;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
}

#merch a .arrow {
    position: relative;
    right: 0;
    transition: right 0.35s;
}

#merch a:hover .arrow {
    right: -0.35em;
}

#merch .image {
    width: 60%;
}

#merch .link {
    padding: 0.5em;
    width: 40%;
}

#press {
    margin: 0 auto;
    max-width: 800px;
    padding: 0 1em;
}

#press #hero {
    font-size: 1.3em;
    font-style: italic;
    line-height: 1.3em;
}

#press #images a {
    background: none center center no-repeat;
    background-size: cover;
    display: block;
    height: 300px;
    width: 100%;
}

#press #images li {
    border: 10px solid #fff;
    box-sizing: border-box;
    margin: 1%;
    width: 47%;
}

#press #images ul {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

#press #quotes li {
    margin: 0.5em 0;
    line-height: 1.35em;
}

#press #quotes q {
    display: block;
    text-align: left;
}

#press #quotes ul {
    list-style: none;
    padding: 0;
    text-align: right;
}

.button {
    background-color: rgba(255, 255, 255, 0);
    border: 3px solid white;
    color: white;
    display: inline-block;
    margin: 2em auto;
    padding: 1em 1.5em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.35s, color 0.35s;
}

.button:hover {
    background-color: rgba(255, 255, 255, 1);
    color: #222;
    text-decoration: none;
}

.links {
    font-size: 11pt;
    list-style: none;
    margin: 3em 0;
    padding: 0;
}

.links a {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: rgba(10, 11, 13, 0.08) 0px 2px 4px 0px;
    color: #222;
    display: block;
    padding: 1.25em;
    position: relative;
    text-align: center;
    text-decoration: none;
    top: 0;
}

.links a:active {
    box-shadow: rgba(10, 11, 13, 0.08) 0px 2px 4px 0px !important;
    top: 0 !important;
}

.links a:hover {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: rgba(10, 11, 13, 0.08) 0px 4px 4px 0px;
    top: -1px;
}

.links li {
    margin: 1em auto;
    max-width: 620px;
}

.press-cover {
    display: block;
    margin: 0 auto;
    max-width: 600px;
}

.social-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.social-links li {
    display: inline-block;
    margin: 0.15em;
}

.social-links a {
    color: #666;
    padding: 0 0.5em;
    text-decoration: none;
}

.social-links a:hover {
    color: white;
}

.social-links svg {
    height: 1.5em;
    width: 1.5em;
}

.social-links .icon-bandcamp:hover {
    color: #1ad;
}

.social-links .icon-facebook:hover {
    color: #3a589e;
}

.social-links .icon-instagram:hover {
    color: #125688;
}

.social-links .icon-soundcloud:hover {
    color: #f70;
}

.social-links .icon-spotify:hover {
    color: #84bd00;
}

.social-links .icon-tiktok:hover {
    color: #ee1d52;
}

.social-links .icon-twitter:hover {
    color: #1dcaff;
}

.social-links .icon-youtube:hover {
    color: red;
}

.splash {
    text-align: center;
}

.splash h2 {
    margin: 0 0 1em;
}

.sr-only {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}

.video {
    position: relative;
    overflow: hidden;
}

.video::after {
    display: block;
    content: "";
    padding-top: 56.25%;
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* EPK page overrides */

html#epk {
    background: url('../assets/background_paper.png') center center repeat #fff;
}

html#epk body {
    color: #222;
}

html#epk blockquote {
    font-style: italic;
}

html#epk cite {
    display: block;
    font-style: normal;
    text-align: right;
}

html#epk h1 .logo {
    margin: 2em auto 0;
    max-width: 300px;
    width: 60%;
}

html#epk header,
html#epk footer {
    display: none;
}

html#epk section {
    max-width: 920px;
}

html#epk #hero {
    text-align: center;
}

html#epk #hero img {
    display: block;
    margin: 2em auto;
    width: 70%;
}

html#epk #video {
    margin: 1em 0;
}

html#epk .embed {
    margin-top: 2em;
}

html#epk .email {
    margin-top: 2em;
    text-align: center;
}

html#epk #image-slider {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}

html#epk #image-slider li {
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    z-index: -1;
}

html#epk #image-slider li.current {
    position: relative;
    right: 0;
    z-index: 2;
    transition: right 1s ease-out;
}

html#epk #image-slider li.next {
    right: -100%;
}

html#epk #image-slider li.previous {
    z-index: 1;
}