html {
    height: 100%;
    overflow-y: scroll !important;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent
}

body {
    font-family: raleway, sans-serif;
    color: #424242;
    font-weight: 500;
    font-style: normal;
    line-height: 1.9;
    text-decoration: none;
    text-transform: none;
    letter-spacing: -.34px;
    margin: 0;
    padding: 0;
    width: 100%;
    text-rendering: optimizeLegibility
}

a {
    font-family: oswald, sans-serif;
    background: 0 0;
    color: unset;
    font-style: normal;
    text-decoration: none
}

a,
a:hover,
a:focus,
a:active {
    outline: 0
}

a:hover,
a:focus {
    color: #c9a227
}

a img {
    border: none
}

a,
button,
input[type="button"],
input[type="submit"] {
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease
}

:active,
:focus {
    outline: 0 !important
}

h1>a,
h2>a,
h3>a,
h4>a,
h5>a,
h6>a {
    display: block
}

ol,
ul {
    list-style: none
}

h3 {
    font-family: raleway, sans-serif;
    font-size: 20em;
    font-weight: 800;
    font-style: normal;
    line-height: 1.08;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0
}

/* MENU */
.navbar-nav .nav-link {
    margin-left: 20px;
    margin-right: 20px;
    text-decoration: none;
    color: #fff;
    font-weight: 300;
    transition: color .3s, text-shadow .3s;
    font-family: 'Karla', sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 1.1em
}

.navbar-nav .nav-link:hover {
    color: #c9a227;
    font-weight: 500
}

.navbar-nav .nav-link::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
    transition: width .3s
}

.navbar-nav .nav-link:hover::after {
    width: 1px
}

.navbar {
    transition: background-color .5s, height .5s;
    background-color: transparent;
    height: 135px
}

.navbar.scrolled {
    background-color: rgba(0, 0, 0, 1.5);
    height: 60px
}


/* MENU - END */

.container {
    max-width: 990px !important;
  }

section {
    padding-top: calc(var(--bs-gutter-x) * 3);
    min-height: 100vh;
    padding-right: 0 !important;
    padding-left: 0 !important
}

/* FOOTER */
footer {
    background-image: url(../img/background-about.jpg);
    color: #fff;
    font-size: 0.75em;
}

.footer-logo {
    height: 1.4em;
    vertical-align: middle;
    margin-left: 5px;
    margin-right: 5px
}

/* FOOTER - END */

.bg-home {
    background-image: url(../img/background-home.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 999;
    height: 100vh;
    min-height: 660px
}

.center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    font-family: 'Karla', sans-serif
}

.menu.transparent {
    background: transparent
}

.subtitle {
    font-style: normal;
    color: #c9a227;
    font-size: 1.5rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.5em;
    letter-spacing: -.4px;
    -webkit-font-smoothing: antialiased;
    margin: 0 !important
}

.title {
    margin-top: -.21em;
    margin-bottom: .58em;
    font-size: 3em;
    line-height: 1.2em;
    line-height: 1.2em;
    -webkit-font-smoothing: antialiased
}

#about,
#music {
    background-image: url(../img/background-about.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    z-index: 900;
    position: relative;
    min-height: 660px
}

#about .d-flex {
    height: 100%
}

#about_left {
    overflow: hidden
}

#about_left .frame {
    border: 20px solid #0f0f3b;
    position: relative;
    z-index: 1;
    width: 90%;
    height: 90%
}

#about_left .picture {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 200
}

#about_right .frame-text {
    position: relative;
    z-index: 10;
    padding: 7em .4em 3em 0;
    margin-left: -3.8em
}

#about_right .text {
    padding-left: 6em;
    color: #fff
}

#music .d-flex {
    height: 100%
}

#music_box {
    text-align: right;
    height: 55vh
}

#music_box .frame {
    border: 20px solid #0f0f3b;
    position: relative;
    z-index: 1;
    width: 40%;
    height: 90%;
    max-height: 22em;
    margin-left: auto;
}

#music_box .spotify {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 200;
    width: 55em;
}

.py-5 i {
    font-size: 24px;
    color: #827d7d;
    margin: 0 10px
}

/* ICONS */
a .fab {
    color: #827d7d
}

a .fa-instagram:hover {
    color: #c13584
}

a .fa-tiktok:hover {
    color: #fff
}

a .fa-youtube:hover {
    color: red
}

a .fa-spotify:hover {
    color: #1db954
}

a .fa-apple:hover {
    color: #fff
}

a .fa-vk:hover {
    color: #4c75a3
}

input[placeholder] {
    text-overflow: ellipsis
}

/* ICONS - END */


/* NEWSLETTER */
#newsletter {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../img/background-about.jpg);
    color: #fff;
    padding-top: 0px;
    height: 0vh !important;
    min-height: 30vh !important
}

#newsletter-text .newsletter-text {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 2.33em;
}

#newsletter .newsletter-subtext {
    font-size: 1em;
    line-height: 2vh;
    text-transform: unset;
    color: #fff;
    font-weight: 300
}

#newsletter-form input[type="email"] {
    font-family: oswald, sans-serif;
    font-size: .875em;
    font-weight: 500;
    font-style: normal;
    line-height: normal;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.45px;
    background-color: #f5ddef;
    border: 2px solid #ddd;
    color: #100726;
    outline: none;
    resize: none;
    padding: .4em 1.5em;
    padding: 1em 2em;
    width: 100%;
    vertical-align: top;
    box-sizing: border-box;
    max-width: 350px;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none
}

#newsletter-form input[type="submit"] {
    border-radius: 0
}

#subscribe div:first-child {
    display: flex
}

#newsletter-form input[type="submit"],
#newsletter-form input[type="email"] {
    height: 50px
}

/* NEWSLETTER - END */

/* CONTACT */
#contact {
    position: relative;
}

#contact .card-body .title {
    color: #fff;
    font-size: 1.5rem;
}

#contact-form ul .full {
    width: 100%
}

#contact-form ul {
    margin: 0 -11px
}

#contact-form ul li {
    float: left;
    list-style: outside none none;
    padding: 0 11px 16px;
    width: 50%
}

#contact-form ul li input[type="text"],
#contact-form ul li input[type="email"],
#contact-form ul li input[type="tel"] {
    background-color: #383838;
    border-top: medium none;
    color: #909090;
    display: inline-block;
    font-size: 16px;
    font-weight: 300;
    height: 44px;
    padding: 0 0 1px 20px;
    width: 100%
}

#contact-form ul li textarea {
    background-color: #383838;
    color: #909090;
    font-size: 16px;
    font-weight: 300;
    height: 185px;
    margin: 0 0 15px;
    padding: 12px 19px;
    width: 100%
}

.contact-row {
    display: flex;
    flex-direction: column;
    height: 100%
}

#contact-links .fab {
    font-size: 2em
}

#contact-links {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}

#contact input,
#contact textarea {
    border-width: 0 !important
}

#contact .submit-button-container {
    display: flex;
    justify-content: center;
    align-items: center
}
/* CONTACT - END */



input[type="submit"],
.abo_button {
    position: relative;
    width: 190px;
    height: 52px;
    font-family: oswald, sans-serif;
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    line-height: normal;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.45px;
    background: #c9a227;
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
    border: none;
    outline: none;
    transition: background-position .5s ease, color .5s ease;
    background: linear-gradient(to right, #fff 50%, #c9a227 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    letter-spacing: 1.45px;
    display: inline-block;
    white-space: nowrap;
    padding: 1.4em 2em;
    overflow: hidden;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box
}

input[type="submit"]:hover,
.abo_button:hover {
    background-position: left bottom;
    color: #000
}

input[type="submit"]:active,
.abo_button:active {
    background-position: left bottom;
    color: #000
}

.hidden {
    display: none !important
}




@media (max-width: 1199px) {

}


@media (min-width:992px) {
    .icon-container {
        max-width: 900px;
        margin: 0 auto
    }

    #desktopNav {
        visibility: visible !important
    }

    #mobileNav {
        display: none !important;
        width: 0 !important
    }
}

@media (max-width:991px) {
    
    .menuMobile.scrolled {
        background-color: rgba(0, 0, 0, .8);
        height: 100px
    }

    #desktopNav {
        display: none !important
    }
/*
    #mobileLogo {
        position: fixed;
        top: 4vh;
        left: 5vw;
        z-index: 1060
    }
*/

    .menuMobile {
        position:fixed !important;
        top:0;
        width:100%;
        /* background:rgba(0,0,0,.5); */
        padding-top:38px;
        padding-bottom:38px;
        transition: background .3s;
        z-index:1000
    }
    
    .menuMobile #mobileLogo, .menuMobile #mobileBtn {
        position: fixed;
        display: flex;
        top: 4vh;
        z-index: 1060;
    }
    .menuMobile #mobileLogo {
        justify-content: start;
        left: 5vw;
    }
    
    .menuMobile #mobileBtn {
        justify-content: end;
        right: 5vw;
    }
    
    .classic-menu {
        margin-left:0;
        margin-right:0;
        margin-top:0;
        margin-bottom:0
    }
    .menuMobile img.logo {
        min-width: 120px;
        width: 15vh;
        margin: 0;
    }
    #mobileMenu {
        position: fixed;
        width: 100%;
        height: 100vh;
        background: #000;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        z-index: 1050
    }

    #mobileMenu #menuItems {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%
    }

    #toggleButton {
        background: transparent;
        border: 0;
    }

    .navbar-toggler-icon {
        width: 2.5em;
        height: 2.5em
    }

    ol,
    ul {
        padding-left: 0
    }

    .container {
        /* max-width: 980px !important; */
    }

    .section {
        padding-top: calc(var(--bs-gutter-x) * 6) !important
    }

    #about_left {
        height: 20em;
        margin-left: 4em;
        width: 75%;
        padding-right: 2em;
    }

    #about_left .frame {
        width: 60%;
        height: 90%;
        max-height: 22em;
        margin-left: auto;
    }

    #about_left .picture {
        position: absolute;
        top: 30px;
        z-index: 200;
        left: -7em;
    }

    #about_left .picture img {
        width:25em;
    }

    #about_right .frame-text {
        padding: 2em 0em 3em 0;
        margin: 0 3em;
    }

    #about_right .text {
        padding-left: 0em;
        color: #fff;
    }
    
    #music_box .frame {
      max-height: 25em;
      width: 50%;
      margin-right: 4vw;
    }

    #music_box .spotify {

      top: 30px;

      right: 30px;


      width: 185%;

    }

}


@media (max-width:479px) {
    .container {
        max-width:95%!important
    }
    .section {
        padding-top: calc(var(--bs-gutter-x) * 4.5) !important
    
    
    }
    .title {
        margin-bottom:.40em;
        font-size:2.2em;
        -webkit-font-smoothing:antialiased
    }
    .subtitle {
        font-size:1.3rem
    }
    #about,
    #music {
        height:unset
    }
    #tour-dates .py-5,
    #social .py-5,
    #merch .py-5,
    #contact .py-5 {
        padding-top:unset!important;
        padding-bottom:unset!important
    }
    #about_left {
        height:26em;
        margin-left:1.5em;
        width:90%;
        padding-right:0
    }
    #about_left .frame {
        width:70%
    }
    #about_left .picture {
        top:20px;
        right:20px;
        left:-10em;
        overflow:hidden
    }
    #about_left .picture img {
        width:30em
    }
    #about_right .frame-text {
        padding:3em 0 3em 0;
        margin:0 1em
    }
    #about_right .text {
        padding-left:0;
        color:#fff
    }
    #tour-dates #bandsintown {
        padding:1em 1.5em 0 0!important
    }
    #music {
        height:100vh;
    }
    #music .py-4 {
        padding-top: unset !important;
        padding-bottom: unset !important;
    }
    #music_box {
        margin-left:.2em;
    }
    #music .d-flex {
        height: auto;
      }
    #music_box .frame {
        width:60%;
        height:90%;
        margin-right: 1vw;
    }
    #music_box .spotify {
        width:180%;
        top: 20px;
        right: 20px;
    }
    #contact-form {
        padding: 8em .5em;
        height: 115vh;
    }
    #contact-title,
    #contact-contacts {
        margin-bottom:.5em!important
    }
    #contact .card-body .title {
        font-size:1.3rem;
        margin-bottom:unset
    }
    #contact-contacts .card-body p {
        line-height:1.8em
    }
    .card-body em {
    }
    #contact-form ul li {
        width:100%
    }
    #contact-links {
        padding-bottom:1.5em!important;
        padding-left: 1.5em !important;
    }
    #contact-links .fab {
        font-size:1.5em
    }
    #contact-links .col {
        padding:0!important
    }
    
    #newsletter {
        padding-top: calc(var(--bs-gutter-x) * 2) !important;
        /*! height: 59vh !important; */
        min-height: 40vh !important;
    }
    #newsletter-form {
        width: 95%;
    }
    #newsletter-text .newsletter-text {
        margin-bottom: .3em;
        font-size: 1.7em;
    }
    #newsletter .newsletter-subtext {
        font-size: .9em;
        padding-bottom: 1em;
    }
    #newsletter-form input[type="email"] {
        font-size: .775em;
        padding: 1em 1em;
    }
    #newsletter input[type="submit"] {
        width: 190px;
        height: 50px;
        font-size: 0.85em;
        letter-spacing: unset;
        padding: 1.4em 2em;
        border-radius: 0;
    }
    footer {
        font-size: 0.8em;
        height: 20vh;
    }
    .footer-logo {
        height: 1em;
    }
    footer {
        height: 160px;
    }
}


@media (min-height:980px) and (max-width:991px) {


    #about_left {
        height: 25em;
        width: 80%;
        padding-right: 2em;
    }
    
      #about_right {
        width: 100%;
        padding: 0px 50px;
      }

    #about_left .frame {
        width: 55%;
    }

    #about_left .picture {
        top: 35px;
        right: 20px;
        left: -10em;
    }

    #about_right .frame-text {
        padding: 2em 0em 3em 0;
        margin: 0 3em;
    }

    #about_right .text {
        padding-left: 0em;
        color: #fff;
    }
    
    #about_left .picture img {
        width:28em;
    }

    #music_box {
        height: 35em;
        margin-left: 4em;
        width: 90%;
        padding-right: 2em;
    }

    #music_box .frame {
        width: 60%;
        height: 90%;
        max-height: 22em;
        margin-left: auto;
    }

    #music_box .spotify {
        width: 170%;
    }

    #contact-form {
        padding: 0 3em;
    }

    #contact-links {
        width: 90%;
        padding-bottom: 2em !important;
    }

}
@media (max-height:700px) {

    #about .d-flex, #music .d-flex {
        height: unset;
    }

    #music, #about {
        min-height: 830px;
    }    

    footer {
        height: 160px;
    }
}




.navbar-toggler-icon {
    background-image: url(data:image/svg+xml,%3csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ viewBox=\'0\ 0\ 30\ 30\'%3e%3cpath\ stroke=\'rgba\(255,\ 255,\ 255\)\'\ stroke-linecap=\'round\'\ stroke-miterlimit=\'10\'\ stroke-width=\'2\'\ d=\'M4\ 7h22M4\ 15h22M4\ 23h22\'/%3e%3c/svg%3e)
}

.navbar-toggler.toggled .navbar-toggler-icon {
    background-image: url(data:image/svg+xml,%3csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ viewBox=\'0\ 0\ 30\ 30\'%3e%3cpath\ stroke=\'rgba\(255,\ 255,\ 255\)\'\ stroke-linecap=\'round\'\ stroke-miterlimit=\'10\'\ stroke-width=\'2\'\ d=\'M4\ 4l22\ 22M4\ 26L26\ 4\'/%3e%3c/svg%3e)
}