/*@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');*/
/* 400 */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ubuntu/v15/4iCs6KVjbNBYlgoKfw72nU6AFw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 500 */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ubuntu/v15/4iCv6KVjbNBYlgoCjC3jsGyNPYZvgw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 700 */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ubuntu/v15/4iCv6KVjbNBYlgoCxCvjsGyNPYZvgw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    font-family: 'Ubuntu', sans-serif;
    
}

.wrapper {
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.container {
    padding:0;
}

.button, button, input[type='button'], input[type='reset'], input[type='submit'] {
    background-color: #412E36;
    border: 0.1rem solid #412E36;
}

.navigation {
    background-color: #412E36;
    display: block;
    height: 5.2rem;
    left: 0;
    max-width: 100%;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 2;
}

.navigation a {
    color: #fff;
}

.navigation a:hover {
    color: #DCD6D9;
}

.navigation-logo {
    height: 3rem;
    margin-top: 1.1rem;
    margin-left: 1rem;
}

.navigation .navigation-link, .navigation .navigation-title, .navigation .title {
    display: inline;
    font-size: 1.6rem;
    line-height: 5.2rem;
    padding: 0;
    text-decoration: none;
    color: #fff;
}

.navigation .navigation-item {
    float: left;
    margin-bottom: 0;
    margin-right: 1rem;
    position: relative;
    color: #fff;
}

.navigation-item i {
    font-size: 2.5rem;
    margin-top: 1.3rem;
}

.navigation .navigation-list {
    list-style: none;
    margin-bottom: 0;
}

.teaser {
    margin-top: 5.2rem;
    background-color: #50343F;
    padding: 0 4rem;
}

.textline {
    background: #DCD6D9;
    padding-top: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    margin-bottom: 1em;
}

.textline .container h2 {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
}

.services {
    background-color: #fff;
    padding-left: 2rem;
    padding-right: 2rem;
    margin-bottom: 1em;
}

.services .button {
    height: 6rem;
    width: 100%;
}

.services .button:hover {
    background: #DCD6D9;
}

.service-spotify-big {
    height: 3.6rem;
    margin-top: 1.2rem;
}

.service-apple-music-big {
    height: 2.4rem;
    margin-top: 1.6rem;
}

.service-amazon-music-big {
    height: 5.5rem;
    margin-top: 0.4rem;
}

.service-youtube-music-big {
    height: 2.5rem;
    margin-top: 1.6rem;
}

.service-deezer-big {
    height: 2.2rem;
    margin-top: 1.7rem;
}

.service-tidal-big {
    height: 2rem;
    margin-top: 1.9rem;
}

.service-youtube-big {
    height: 2.6rem;
    margin-top: 1.6rem;
}

.service-fanclub-big {
    height: 2rem;
    margin-top: 1.8rem;
}

#fan-club-button {
    background: linear-gradient(to left, #dcd6d9, #ffffff 38.24%);
    background-size: 400% 400%;

    -webkit-animation: AnimationName 11s ease infinite;
    -moz-animation: AnimationName 11s ease infinite;
    -o-animation: AnimationName 11s ease infinite;
    animation: AnimationName 11s ease infinite;
    animation-direction: alternate;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 13%}
    50%{background-position:100% 88%}
    100%{background-position:0% 13%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 13%}
    50%{background-position:100% 88%}
    100%{background-position:0% 13%}
}
@-o-keyframes AnimationName {
    0%{background-position:0% 13%}
    50%{background-position:100% 88%}
    100%{background-position:0% 13%}
}
@keyframes AnimationName {
    0%{background-position:0% 13%}
    50%{background-position:100% 88%}
    100%{background-position:0% 13%}
}

.release {
    margin-bottom: 2em;
}

.release-row {
    padding: 0 2rem;
}

.cover-art {
    border: 1px solid;
}

.song-cover-art {
    text-align: center;
}

.song-cover-art-container {
    position: relative;
}

.song-facts {
    text-align: center;
}

.song-title {
    font-weight: 700;
    margin-bottom: 1rem;
}

.song-release-date {
    font-size: 1.2rem;
    margin-bottom: 0;
}

.play-song {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    display: block;
    height: 8rem;
    left: 50%;
    margin-left: -4rem;
    margin-top: -4rem;
    position: absolute;
    top: 50%;
    
    width: 8rem;
}

.play-song-button, .pause-song-button, .wait-song-button {
    background: #412e36 none repeat scroll 0 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgb(255 255 255 / 70%);
    color: #fff;
    display: block;
    height: 5rem;
    left: 1.5rem;
    position: relative;
    top: 1.5rem;
    width: 5rem;
    font-size: 2rem;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
}

.play-song-button:hover, .pause-song-button:hover {
    box-shadow: 0 0 0 3rem rgb(255 255 255 / 40%);
}

.play-song-button i {
    padding: 1.5rem 1.7rem;
}

.pause-song-button i, .wait-song-button i {
    padding: 1.5rem 1.5rem;
}

.about-banishu {
    background-color: #fff;
    padding-left: 2rem;
    padding-right: 2rem;
    margin-bottom: 1em;
}

.fan-club {
    background-color: #fff;
    padding-left: 2rem;
    padding-right: 2rem;
    margin-bottom: 1em;
    max-width: 600px;
    margin: auto;
}

#first-name-field, #email-field {
    margin-bottom: 0;
}

#first-name-field:focus, #email-field:focus {
    border-color: #50343f;
    color: #50343f;
}

#first-name-field.field-error, #email-field.field-error {
    border: 2px solid #50343f;
}

#error-first-name-field, #error-email-field {
    display: none;
}

.error-msg {
    color: #50343F;
    font-weight: 700;
    margin-bottom: 0;
}

#foot {
    padding-top: 2rem;
    margin-top: 6rem;
    color: #fff;
    background-color: #50343F;
    padding: 0 4rem;
    text-align: center;
}

.footerlink {
    color: #fff;
}

.footerlink:hover {
    color: #DCD6D9;
}

#contact, #connect {
    margin-bottom: 0;
}

.legals {
    font-size: 0.8rem;
}

.cookies-policy-wrapper {
    display: none;
}

#cookies-policy {
    position: fixed;
    z-index: 999999;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
    background: #412e36;
    color: #fff;
    font-size: 1rem;
    display: flex;
}

#cookies-policy-text {
    width: 100%;
    display: flex;
    padding: 0 1rem;
    text-align: center;
}

#cookies-policy-text p {
    margin: auto;
}

#cookies-policy-text p a {
    color: #dcd6d9;
    text-decoration: underline;
}

#cookies-policy-button {
    display: flex;
}

#cookies-consent-button {
    padding: 0 1rem;
    margin-bottom: 0;
    background-color: #fff;
    color: #412e36;
}

#cookies-consent-button:hover {
    background-color: #dcd6d9;
}

@media (min-width: 40.0rem) {
    .song-facts {
        text-align: left;
    }
}