:root {
    --site-color:#FFFFFF;
    --site-text-color:#FFFFFF;
    --site-background-color:#000000;
    --site-hover-color:#FFFFFF;
    --site-button-color:#000000;
    --site-primary-font:'helveticaneue', 'tex_gyre_herosregular', sans-serif;;
    --site-white-color:#FFFFFF;
    --site-black-color:#000000;
}


body {
    margin: 0;
    font-family: var(--site-primary-font);
    font-weight: normal;
    color:
    var(--site-text-color);
    width:100%;
    background-color: var(--site-background-color);
    
}

img{
    width:100%;
    height:auto;
}

a{
    color:var(--site-text-color);
    text-decoration: none;
    transition: 0.2s ease-in;
}
a:hover{
    opacity: 0.7;
    text-decoration: underline;
    color:var(--site-hover-color);
}
button{
    background-color: var(--site-button-color);
    color:var(--site-text-color);
    width:100%;
    display:block;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border:1px solid var(--site-color);
}
.bgvideo-wrap{
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
}

.bgvideo-wrap video{
    object-fit:cover;
    width:100vw;
    height:100vh;
}
video.mobile{
/* display:none; */
}
section.home{
    width: 100vw;
    height: var(--app-height);
    background: url(./../img/moving-clip-placholder.jpg) no-repeat; 
    background-position: top center;
    background-size: cover;
    background:none;
    position: relative;
}
.menu-dropdown {
    /* position: fixed; */
    /* right: calc(50vw - 30px); */
    /* top: 2vw; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.dropbtn {
   transition: .5s ease-in-out;
   cursor: pointer;
}
.dot-logo{
    width: 2.6875vw;
    margin: 0 auto;
    padding-top: 1.5vw;
}
.dropdown {
    position: relative;
    display: inline-block;
}
  
.dropdown-content {
    display: flex;
    /* position: absolute; */
    /* background-color: var(--site-black-color); */
    /* width: 15vw; */
    z-index: 1;
    /* right: 0; */
    color: var(--site-white-color);
    justify-content: center;
    align-items: center;
  
}
  
.dropdown-content a {
    color: var(--site-white-color);
    padding: 1vw 2vw;
    text-decoration: none;
    display: block;
    font-size: 1.1458vw;
    font-size: 18px;
   
}
  
.dropdown-content a:hover {
    background-color: var(--site-white-color);
    color: var(--site-black-color);
    opacity: 1;
}
  
/* .dropdown:hover .dropdown-content {
    display: block;
} */
.dropdown:hover .dropbtn {
    opacity: .6;
}

.sidebar {
    height: 100%;
    width: 100vw;
    position: fixed;
    z-index: 1;
    top: 0;
    right:0;
    background: #000000;
    overflow-x: hidden;
    transition: 0.5s;
    display: none;
    opacity: .97;
}
.sidebar-content-wrapper {
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.closebtn{
    text-align: right;
    display: inline-block;
    color:var(--site-white-color);
    text-align: center;
    position: absolute;
    top: 2vw;
    right: 2vw;
    font-size: 2.896vw;
    line-height: 3.0521vw;
    z-index: 9;
}
.closebtn:hover {
    text-decoration: none;
    opacity: 0.5;
}
.heading {
    padding-bottom: 1vw;
    font-size: 2.084vw;
    color: var(--site-white-color);
    font-size: 2.188vw;
    line-height: 3.386vw;
    text-align: center;
    font-size: 18px;
   
}
.sidebar-content{
    display: none;
}
.sidebar-content.active{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 45vw;
    margin: 0 auto;
    animation: fadeIn 0.5s;
  -webkit-animation: fadeIn 0.5s;
  -moz-animation: fadeIn 0.5s;
  -o-animation: fadeIn 0.5s;
  -ms-animation: fadeIn 0.5s;
  left: 2vw;
    position: relative;
}
.sidebar-content.active#video-section .heading{
    border: none;
    padding: 0;
    text-align: center;
}

@keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
  
@-moz-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
  
@-webkit-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
  
@-o-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
  
@-ms-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
/* Mailing List */


.mlform form {
    width: 60%;
    margin: 0 auto;
}

.fieldWrap {
    padding-bottom: 1.5vw;
    position: relative;
}

.fieldWrap input,
.fieldWrap select {
    color: var(--site-text-color);
    background: var(--site-background-color);
    border: 1px solid var(--site-text-color);
    height: 43px;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    width: 100%;
    border-radius: 0px;
    padding: 0 10px;
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
    font-family: var(--site-primary-font);
    font-weight: normal;
    font-size: 1.25vw;
    line-height: 1.98vw;
    text-transform: lowercase;
}

input[type="submit"],.download{
    background-color:var(--site-background-color);
    color: var(--site-white-color);
    border: 1px solid #000000;
    width:100%;
    height:48px;
    line-height: 48px;
    display:
    block;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border:1px solid
    var(--site-white-color);
    text-decoration: none;
    transition: 0.5s ease-in-out;
    cursor: pointer;
    padding: 0 10px;
    margin: 0 auto;
    text-align: center;
    border-radius: 0;
    font-family: var(--site-primary-font);
    font-weight: normal;
    font-size: 1.25vw;
    text-decoration: none;
    font-size: 18px;
    text-transform: lowercase;
}
input[type="submit"]:hover,.download:hover{
    background-color: var(--site-white-color);
    border:1px solid var(--site-white-color);
    color: var(--site-black-color);
    text-decoration: none;
}
a.download.downloadstem-button {
    width: 50%;
}

.fieldWrap .errored {
    border: 1px solid #ff0000;
}

.input-error {
    position: absolute;
    bottom: 2px;
    width: 100%;
    left: 0;
    color: #ff0000;
    font-size: 0.8333vw;
   
    display: block;
    text-align: left;
}
.fadeOut {
    display: none;
}
.fadeIn {
    display: block;
}

.thankyou {
    font-size: 2.084vw;
    color: var(--site-white-color);
    text-align: center;
    padding: 0;
    text-transform: uppercase;
}

::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: var(--site-text-color);
}

::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--site-text-color);
}

:-ms-input-placeholder {
    /* IE 10+ */
    color: var(--site-text-color);
}

:-moz-placeholder {
    /* Firefox 18- */
    color: var(--site-text-color);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: var(--site-text-color) !important;
    /* -webkit-text-fill-color: var(--site-background-color); */
    /* -webkit-box-shadow: 0 0 0px 1000px var(--site-background-color) inset; */
}

.terms-view {
    width: 100%;
    color: var(--site-white-color);
    font-size: 1vw;
    line-height: 1.5021vw;
    padding-top: 3vw;
    padding-left: 0;
    text-transform: none;
    margin: 0 auto;
    text-align: center;
   
}
.terms-view a{
    color: var(--site-white-color);
    text-decoration:underline;
}

.copyright-links {
    font-size: 0.4vw;
    text-transform: uppercase;
    line-height: 1.146vw;
    text-align: center;
    padding-bottom: 1vw;
    display: flex;
    gap: .5vw;
}

.socials-nav ul a.last{
    padding-right: 0;
}
.socials-nav ul a:hover{
    opacity: .7;
}
.copyright-links span.link {
    display: inline-block;
}
.copyright-links a {
    color: var(--site-white-color);
    transition: 0.5s ease-in-out;
}
.footer-section {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}
.socials-nav ul {
    list-style: none;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    gap: 1vw;
}
.socials-nav {
    padding-bottom: 1vw;
}
.socials-nav ul li a {
    font-size: 1.4vw;
}
.copyright-text{
    display: inline;
}

/* new album overlay css */

.artWrapper {
    position: absolute;
    top: 0.3vw;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 70vw;
    height: auto;
}
.innerWrapOne {
    /* width: 31vh; */
    text-align: center;
    margin: 0 auto;
}
.innerWrapTwo {
    text-align: center;
    color: #fff;
}
.innerWrapTwo p , .innerWrapOne p {
    padding: 0.4vw;
    text-decoration: none;
    display: block;
    font-size: 13px;
    color: #fff;
    margin: 0;
    letter-spacing: 1px;
}
p.pre-order-copy {
    width: 28vw;
    margin: 0 auto;
}
.tourDates {
    margin-top: 1.5vw;
}
.innerWrapOne p,body .spalsh-title {
    padding: 0;
    margin: 0;
    font-size: 18px;
    /* font-weight: bold; */
    letter-spacing: 2px;
    padding-bottom: 0.3vw;
}
.innerWrapTwo a:hover{
    color: #000;
    background: #fff;
    text-decoration: none;
    border: 1px solid #fff;
}
.innerWrapTwo a {
    /* width: 29vw; */
    margin: 0 auto;
    padding: 0.5vw 1vw;
    background-color:var(--site-background-color);
    color: var(--site-white-color);
    border: 1px solid #000000;
    opacity: 1;
    font-size: 15px;
}
.albumText p:nth-child(2) , .newTrack p:nth-child(2){
    margin-bottom: 0.6vw;
}
.newTrack p:first-child {
    margin-top: 0.5vw;
}
.overlayDiv {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.7);
}
@media only screen and (max-width: 1024px) and (orientation: portrait){ 
    .footer-section{
        position: relative;
    }
.copyright-links{
display:initial;
}
    .sidebar{
        width:100vw;
        top: 0;
        left: 0;
        height: 100%;
        right: 0;
    }
    .dot-logo {
        width: 23.0769vw;
    }
    .closebtn{
        font-size: 6.896vw;
        line-height: 6.0521vw;
    }
    .mlform form{
        width: 90%;
    }
    .input-error{
        font-size: 3.25vw;
    }
    .sidebar-content.active {
        padding-bottom: 13vw;
    }
    .fieldWrap input, .fieldWrap select,input[type="submit"]{
        font-size: 4.25vw;
        line-height: 9.25vw;
        height: 10.25vw;
    }
    .thankyou {
        font-size: 4.084vw;
    }
    .download{
        font-size: 2.25vw;
    }
    .sidebar-content.active {
        width: 92%;
        left: 0;
        margin: 0 auto;
    }
    .fieldWrap {
        padding-bottom: 4.9vw;
        position: relative;
    }
    .heading{
        font-size: 3.667vw;
        padding-bottom: 5vw;
    }
    .dropdown-content {
        width: 45vw;
    }
    .terms-view {
        width: 100%;
        color: var(--site-white-color);
        font-size: 3vw;
        line-height: 4.502vw;
    }
    .copyright-links {
        font-size: 2.573vw;
        text-transform: uppercase;
        line-height: 3.146vw;
        text-align: center;
        padding-bottom: 2vw;
    }
    .socials-nav ul{
        gap:5vw;
    }
    .socials-nav ul li a{
        font-size: 5vw;
    }
    .socials-nav {
        padding-bottom: 3vw;
    }
video.desktop{
display:none;
}
video.mobile{
display:block;
}


}
@media only screen and (min-width:320px){
    section.home {
        width: 100vw;
        height: 124vh;
    }
}



@media only screen and (max-width:1023px){
    .innerWrapOne p{
        font-size: 30px;
    }
    .innerWrapTwo p, .innerWrapOne p{
        font-size: 15px;
        padding: 1.2vw 0;
    }
    p.pre-order-copy {
        width: 95vw;
        margin: 0 auto;
    }
    .innerWrapTwo {
        padding: 1vw 0;
    }
    .innerWrapOne p,body .spalsh-title {
        padding-top: 4vw;
        font-size: 16px;
    }
    .innerWrapTwo a {
        padding: 2vw 2.3vw;
        font-size: 15px;
    }
    .albumText p:nth-child(2), .newTrack p:nth-child(2) {
        margin-bottom: 3.5vw;
    }
    .newTrack p:first-child {
        margin-top: 3.5vw;
    }
    .artWrapper {
        top: 2vw;
        width: 100vw;
    }
    .innerWrapOne {
        width: 80vw;
    }
    .tourDates {
        margin-top: 7.5vw;
    }
    .overlayDiv {
        background-color: rgba(0,0,0,0.8);
    }
    body{
        position: relative;
    }
}

@media only screen and (min-width:768px) and (max-width:1023px){
    .innerWrapTwo p, .innerWrapOne p {
        padding: 1vw 0;
    }
    .artWrapper {
        top: 5vw;
    }
    .albumText p:nth-child(2), .newTrack p:nth-child(2) {
        margin-bottom: 3vw;
    }
    p.pre-order-copy {
        width: 70vw;
    }
    .innerWrapTwo a {
        padding: 1.5vw 2.3vw;
    }
    .tourDates {
        margin-top: 6vw;
    }
    .innerWrapOne {
        width: 30vh;
    }
}

@media only screen and (max-height: 575.98px) and (orientation: landscape) {
    .artWrapper {
        top: 0;
    }
    .innerWrapOne p {
        padding-top: 4vw;
        font-size: 8px;
    }
    .innerWrapTwo p, .innerWrapOne p {
        padding: 0.2vw 0;
    }
    .innerWrapTwo a {
        font-size: 10px;
        padding: 0.3vw 2.3vw;
    }
    .albumText p:nth-child(2), .newTrack p:nth-child(2) {
        margin-bottom: 0.5vw;
    }
    .innerWrapTwo p, .innerWrapOne p{
        font-size: 10px;
    }
    .newTrack p:first-child {
        margin-top: 0.2vw;
    }
    .tourDates {
        margin-top: 0.5vw;
    }
    .innerWrapTwo {
        padding: 0vw 0;
    }
    .innerWrapOne {
        width: 20vw;
    }
    }

    @media only screen and (min-width:2560px){
        p.pre-order-copy {
            width: 15vw;
            margin: 0 auto;
        }
    }

    @media only screen and (min-width:1024px){
        br.mobile-only {
            display: none;
        }
        .copyright-links {
            font-size: 0.7vw;
            text-transform: lowercase;
            letter-spacing: 2px;
        }
        .innerWrapOne img {
            /* margin-bottom: 0.7vw; */
            width: 31vh;
        }
        body{
            overflow: hidden;
        }
        .newTrack p:first-child {
            margin-top: 1.5vw;
        }
    }
    @media only screen and (max-width:767px){
        .innerWrapOne p{
            margin-left: -1vw;
        }
    }

    @media only screen and (max-width: 1024px)  and (orientation: landscape){ 
        .dropdown-content {
            width: 20vw;
        }
        .copyright-links {
            font-size: 1.3vw;
            line-height: 1.6vw;
            padding-bottom: 1vw;
        }
        .mlform form {
            width: 80%;
            margin: 0 auto;
        }
        .dropdown-content a{
            font-size: 10px;
            padding: 0.2vw 2vw;
        }
        .artWrapper .innerWrapOne p {
            margin-left: -1.5vw;
        }
        .innerWrapOne {
            width: 22vw;
        }
        .albumText .innerWrapTwo p, .albumText .innerWrapOne p {
            font-size: 9px;
        }
        .artWrapper .innerWrapTwo a {
            font-size: 8px;
            padding: 0.3vw 2.3vw;
        }
        .artWrapper{
            top: 0.5vw;
        }
        .dot-logo{
            padding-top: 0.5vw;
        }
        .albumText p:nth-child(2), .newTrack p:nth-child(2) {
            margin-bottom: 0;
        }
        .tourDates {
            margin-top: 0;
        }
        p.pre-order-copy {
            width: 43vw;
            margin: 0 auto;
        }
        
    }