@charset "UTF-8";
/* Murkage Dave CSS Document */


input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}



@font-face {
font-family: "the-murkage-club";
src:url("the-murkage-club.eot");
src:url("the-murkage-club.eot?#iefix") format("embedded-opentype"),
url("the-murkage-club.woff") format("woff"),
url("the-murkage-club.ttf") format("truetype"),
url("the-murkage-club.svg#the-murkage-club") format("svg");
font-weight: normal;
font-style: normal;

}

[data-icon]:before {
font-family: "the-murkage-club" !important;
content: attr(data-icon);
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: "the-murkage-club" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-tonga:before {
content: "\61";
}
.icon-murkageclub:before {
content: "\62";
}
.icon-xylo:before {
content: "\63";
}

/* width */
::-webkit-scrollbar {
width: 10px;
}


/*----------------------------- Scrollbar ----------------------------*/


::-webkit-scrollbar {
width: 10px;
}

::-webkit-scrollbar-track {
background: #000000; 
}

::-webkit-scrollbar-thumb {
background: #F3953F; 
}

::-webkit-scrollbar-thumb:hover {
background: #FFFFFF; 
}


/*----------------------------- New Typeface 2021 ----------------------------*/



@font-face {
font-family: 'microgramma_dbold_extended';
src: url('microgramma_d_extended_bold-webfont.woff2') format('woff2'),
url('microgramma_d_extended_bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

}

/*----------------------------- Master ----------------------------*/


body, html {
height: 100%;
margin: 0;
overflow:hidden;
background: black;
}

body img {
position: relative;
width:100%;
height: 100%;
object-fit: cover;
}


/*--------------------- h1, h2, h3, h4, h5 ------------------------*/


h1 {
font-family: 'microgramma_dbold_extended';
color:#f3953f;
font-size:4.0em;
letter-spacing:2px;
text-transform:uppercase;
margin:0px auto;
-webkit-text-stroke: 1px #f3953f;
}

h1:hover {
cursor:pointer;	
}

h2 {
font-family: 'microgramma_dbold_extended';
color:#f3953f;
font-size: 1.15em;
line-height: 1.5em;
letter-spacing: 3px;
text-transform:uppercase;
margin:0px auto;
text-align: justify;
}



h3 {
font-family: 'microgramma_dbold_extended';
color:#FFFFFF;
font-size: 1.3em;
line-height: 1.3em;
letter-spacing: 6px;
text-transform:uppercase;
margin:0px auto;
}


h3 a {
padding:5px;
color:#f3953f;
text-decoration:none;
}

h3 a:hover {
cursor:pointer;
color:#000000;
background-color:#f3953f;
}


h4 {
font-family: 'microgramma_dbold_extended';
color:#FFFFFF;
font-size: 2.0em;
line-height: 1.0em;
letter-spacing: 1px;
text-transform:uppercase;
margin:0px auto;
}

h4.outline {
-webkit-text-fill-color: rgba(0,0,0,0);
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
}




.flash-black {
background-color:#000000;
color:#FFFFFF;	
}

.flash-red {
background-color:#F00;
color:#FFFFFF;	
}


/*----------------------------- p is for social media icons ----------------------------*/


p {
text-transform: uppercase;
color: #f3953f;
text-align: center;
display: block;
font-size: 1.8em;
line-height: 3.0em;
letter-spacing: 3px;
margin: 0 auto;
margin: 25px 0px;
}




p a {
text-decoration:none;
transition: color.22s ease-in-out;
-moz-transition: color .22s ease-in-out;
-webkit-transition: color .22s ease-in-out;
}

p:hover {
text-decoration:none;
color:#FFFFFF;
}

.sign-up-text {
font-family: "Times New Roman", Times, serif;
text-transform:uppercase;
color:#FFFFFF;
text-align:center;
display:block;
font-size: 0.9em;
line-height: 1.2em;
letter-spacing:2px;
margin:0 auto;
margin:15px 0px;
}

/*----------------------------- Main ----------------------------*/



#case {
height: 100%;
width:100%;
display:none;
z-index:1;
overflow:hidden;
}

#case #md-cover {
height:calc(100% - 175px);
position:absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}

#content-music {
position: absolute;
top: 75px;
left: 0px;
z-index: 100;
padding: 0px 15px;
display:none;
}

#content-tonga {
position:absolute;
left: 15px;
bottom: 70px;
z-index:100;
height:auto;
display:none;
}


#content-tonga p {
margin-right:20px;
display:inline;
font-size:2.5em;
}


#content-tonga a {
text-decoration:none;
}


#content-logo-t {
position:absolute;
left: 65px;
bottom: -12px;
z-index:100;
height:auto;
font-size:2.0em;
overflow:hidden;
}

#content-social {
position:absolute;
right: 0px;
bottom: 45px;
z-index:100;
height:auto;
padding:10px 20px;
display:none;
}

#content-bio {
position:absolute;
width: calc(100% - 450px);
height: calc(100% - 150px);
left:50%;
top:50%;
transform: translate(-50%, -50%);
z-index:100;
padding-right: 30px;
overflow-y: scroll;
display:none;
}

#content-sign-up {
position:relative;
width:100%;
height: auto;
z-index:500;
background-color:#9e2421;
display:none;
}

.content-sign-up-form {
position:relative;
width: 400px;
height: auto;
left:50%;
transform: translateX(-50%);
z-index:100;
padding:50px 0px;
}

#content-sign-up-scroll {
overflow-y:scroll!important;
background-color:#9E2421;
}

.content-sign-up-form-thank-you {
position:absolute;
width: 300px;
height: auto;
left:50%;
top:50%;
transform: translate(-50%, -50%);
z-index:100;	
}



#content-sign-up-form img {
width: 100%;
height: auto;	
}


#gradient {
background: linear-gradient(230deg, #23424a, #203439, #282c2b, #1d343d, #016479);
background-size: 1000% 1000%;
-webkit-animation: mdmicrosite 41s ease infinite;
-moz-animation: mdmicrosite 41s ease infinite;
animation: mdmicrosite 41s ease infinite;
}


@-webkit-keyframes mdmicrosite {
    0%{background-position:94% 0%}
    50%{background-position:7% 100%}
    100%{background-position:94% 0%}
}
@-moz-keyframes mdmicrosite {
    0%{background-position:94% 0%}
    50%{background-position:7% 100%}
    100%{background-position:94% 0%}
}
@keyframes mdmicrosite {
    0%{background-position:94% 0%}
    50%{background-position:7% 100%}
    100%{background-position:94% 0%}
}




#line {
display: block;
width: 100%;
height: 3px;
background-color: white;
margin: 20px 0px;
}





#intro {
display:none;
}

img#intro {
transition: transform 0.33s cubic-bezier(0.12, 0, 0.39, 0);
}



#tab-music,
#tab-album,
#tab-tonga,
#tab-bio,
#tab-tour,
#tab-close,
#tab-social,
#tab-signup { 
display:none;
}



#tab-music { 
position: absolute;
left: -1px;
top: -18px;
z-index:100;
height:auto;
}



#tab-bio {
position:absolute;
right: -5px;
top: -18px;
z-index:100;
}

#tab-close {
position:absolute;
right: -5px;
top: -20px;
z-index:100;
}


#tab-social { 
position:absolute;
right: -3px;
bottom: -20px;
z-index:100;
}


#tab-album {
position:absolute;
left: 50%;
top: 50%;
z-index:100;
transform: translate(-50%,-50%);
text-align:center;
}

#tab-signup {
position:absolute;
left: 0%;
bottom: -20px;
z-index:100;
transform: translateX(-0%);
text-align:center;
}


#tab-tour {
position:absolute;
left:50%;
transform: translateX(-50%);
bottom:-20px;
z-index:100;
text-align:center;
}




/*----------------------------- Form ----------------------------*/


#form-field {
font-family: "Times New Roman", Times, serif;
font-weight:600;
font-size: 0.9em;
padding: 10px 20px;
border-style:solid;
border-color:#222222;
border-width:1px;
background-color:#FFFFFF;
color:#222222;
width:258px;
height:15px;
transition: background-color 0.22s ease;
display:block;
margin:0 auto;
margin-bottom:10px;
}

#form-field:hover {
background-color:#222222;
color:#FFFFFF;
}


#form-button {
font-family: "Times New Roman", Times, serif;
font-weight:600;
font-size: 0.9em;
padding: 15px;
color: #FFFFFF;
border-style: solid;
border-color: #FFFFFF;
border-width: 1px;
background-color:#9E2421;
width: 300px;
text-transform:uppercase;
height: auto;
transition: background-color 0.22s ease;
display: block;
margin:0 auto;
margin-bottom:10px;
}

#form-button:hover {
background-color:#FFFFFF;
color:#222222;
border-color: #FFFFFF;
}


#form-button-close {
font-family: "Times New Roman", Times, serif;
font-weight:600;
font-size: 0.9em;
padding: 15px;
color: #FFFFFF;
border-style: solid;
border-color: #FFFFFF;
border-width: 1px;
background-color:#9E2421;
width:auto;
text-align:center;
text-transform:uppercase;
height: auto;
transition: background-color 0.22s ease;
display: block;
margin:0 auto;
}

#form-button-close:hover {
background-color:#FFFFFF;
color:#222222;
border-color: #FFFFFF;
}



form .error {
font-family: 'EB Garamond', serif;
font-style: normal;
font-size: 1.1vw;
background-color: #111100;
color: #FFFFFF;
margin-bottom: 20px;
margin-top: -10px;
padding: 20px 0px;
display: block;
width: 543px;
}



/*------------------- Tour 2022 ------------------*/


.tour {
display: none;
position: absolute;
top:0px;
left:0px;
width:100vw;
height: 100vh;
background-color:#141414;
z-index: 100;
}

.tour .case {
position: relative;
display: flex;
max-width: 1024px;
margin: 25px;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}


.tour .case .photo {
flex:6;
background-color: #023e74;
}

.tour .case .photo img {
position: relative;
display: block;
width:100%;
height: 100%;
object-fit: cover;
}


.tour .case p {
font-family: 'microgramma_dbold_extended';
text-transform:uppercase;
color:#FFFFFF;
display:block;
font-size: 0.9em;
line-height: 1.0em;
letter-spacing:3px;
margin:0 auto;
}

.tour .case .dates {
flex:10;
background-color: #1d1d1d;
padding: 25px;
text-align: center;
}

.tour .case .dates h4:last-of-type {
padding-bottom: 25px;
border-bottom: 2px solid #2070a1;
}


.tour .case .dates .breakdown {
display: flex;
}

.tour .case .dates .breakdown:first-of-type {
margin-top:25px;
display: flex;
flex-direction: column;
}


.tour .case .dates .breakdown .date {
flex:4;
margin:10px 0px;
padding-top:0px;
padding-right: 10px;
}

.tour .case .dates .breakdown .location {
flex:8;
margin:10px 0px;
padding-top:10px;
padding-right: 10px;
}

.tour .case .dates .breakdown .tickets {
flex:1;
margin:10px 0px;
}


.tour .case .dates .breakdown .tickets button {
font-family: 'microgramma_dbold_extended';
color:#FFFFFF;
border: 2px solid white;
font-size: 0.9em;
line-height: 1.0em;
letter-spacing: 2px;
text-transform:uppercase;
display: inline-block;
width: 100%;
padding: 15px 25px;
margin-bottom: 15px
}

.tour .case .dates .breakdown .tickets button:hover {
background-color:white;
color:black;
}




.tour .close { 
position:absolute;
display: block;
left:50%;
transform: translateX(-50%);
bottom:-20px;
z-index:100;
}



/*------------------- MDCML Shop ------------------*/


#mc-shop-case {
position:relative;
width:100%;
height:100vh;
background-color:#FFFFFF;
z-index:1;
text-align:center;
transition: background-color 0.44s ease;
overflow-y:scroll!important;
}

#mc-shop-case:hover {
background-color:#FFFFFF;
}

#mc-shop-header {
position:relative;
width:100%;
min-height:auto;
text-align:center;
display:none;
z-index:1;
padding:50px 0px 0px 0px;
}

.mc-shop-case {
position:relative;
width:50%;
min-height:300px;
margin-bottom:50px;
display:none;
float:left;
}

.mc-shop-case img {
width:calc(100% - 100px);
height:auto;
}

.mc-shop-button {
width:25%;
margin:0px 10px;
}


.clear { clear:both; }



.shop.header {
height: 200px;
padding:50px 0px;
}

.shop.header img {
height: 100%;
width: auto;
}


.shopflex {
display: flex;
padding: 0px 50px;
}


.shopflex:last-child {
padding-bottom: 50px;
}



.shopflex .product {
 width: 50%;
}

.shopflex .product a {
cursor: pointer;
}

.shopflex .product img {
width:100%;
height: auto;
filter: grayscale(100);
transition: all 333ms cubic-bezier(0.570, 0.000, 0.320, 1.005);
}

.shopflex .product img:hover {
filter: grayscale(0);
}


/*-------------------- The Murkage Club / MDCML Live 2019 ------------------*/


#murkageclub {
overflow-y:scroll!important;
}

#mc-case {
position:relative;
width:100%;
min-height:100%;
background-color:#F7F6F5;
z-index:1;
text-align:center;
transition: background-color 0.44s ease;
}

#mc-case:hover {
position:relative;
width:100%;
min-height:100%;
background-color:#e4ea0d;
z-index:1;
text-align:center;
}

#mc-cover {
position:relative;
height: calc(100vh - 200px);
width:auto;
margin:auto;
display:none;
z-index:100;
padding:25px 0px 25px 0px;
}

#mc-tickets {
display:none;
}

table {
position:relative;
width: calc(100vw - 300px);
font-family: "Times New Roman", Times, serif;
text-transform:uppercase;
color:#111111;
font-size: 1.2em;
line-height: 2.0em;
letter-spacing:2px;
text-align:left;
left:50%;
transform: translateX(-50%);	
border-collapse: collapse;
table-layout: auto;
}

button {
position: relative;
width: auto;
font-size: 0.8em;
border-radius: 1px;
text-transform: uppercase;
outline: 0;
border:none;
overflow: hidden;
background-color:rgba(25,25,25,0);
color:#FFFFFF;
z-index: 1;
cursor: pointer;
transition: background-color 0.22s ease;
}

button:hover {
background-color:#06be91;

}

/*----------------------------- iPad Landscape ----------------------------*/


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 


#content-bio {
width: calc(100% - 250px);
}


h1 {
font-size: 3.6em;	
}


h2 {
font-size: 1.5em;
line-height: 1.7em;
letter-spacing: 3px;
}


#tab-music {
left: -5px;
top: -12px;
}

#tab-bio {
right: -6px;
top: -12px;
}

#tab-social {
right: -3px;
bottom: -13px;
}

#tab-signup {
bottom: -11px;
}


#tab-album {
bottom: -11px;
}


#tab-tonga {
left: 0px;
bottom: -11px;
}

#tab-close {
right: -6px;
top: -12px;
}



#tab-tour {
bottom: -11px;
}

.tour .close {
bottom: -11px;
}

.tour .case {
margin: 0px; 
width: calc(100% - 50px);
}

.tour .case .photo {
padding: 25px;
}


.tour .case .dates {
padding: 25px 25px 25px 0px;
}

.tour .case .dates .breakdown .location {
flex: 5;
}

.tour .case .dates .breakdown .tickets button {
font-size: 0.8em;
}


.tour .case p {
font-size: 0.8em;
}







table {
width: calc(100vw - 100px);
}

}


/*----------------------------- iPad Portrait ----------------------------*/


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 



#mc-shop-header img {
width: calc(100% - 100px);
}

.mc-shop-case {
position:relative;
width:100%;
min-height:300px;
margin-bottom:0px;
display:none;
}

.mc-shop-case img {
width:calc(100% - 50px);
height:auto;
}

#tees,
#vinyl {
float:none;
}




#case #md-cover {
width: calc(100% - 200px);
height:auto;
position:absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}

#content-bio {
width: calc(100% - 250px);
height: calc(100% - 250px);
}

#content-music {
top: 50px;
left: 5px;
padding: 10px 10px;
}

#content-tonga {
left: 250px;
bottom: 5px;
}

#content-logo-t {
left: 50px;
bottom: -5px;
font-size: 1.5em;
}

#content-social {
right: 10px;
bottom: 50px;
padding: 10px 10px;
}

h1 {
font-size: 3.0em;	
}

#mc-cover {
width: calc(100% - 100px);
}


.shopflex {
display: block;
}

.shopflex .product {
width: 100%;
}

.shopflex .product img {
filter: grayscale(0);
}


#tab-music {
left: -5px;
top: -12px;
}

#tab-bio {
right: -6px;
top: -12px;
}

#tab-social {
right: -3px;
bottom: -10px;
}

#tab-signup {
bottom: -7px;
}

#tab-tour {
bottom: -7px;
}

#tab-album {
bottom: -7px;
}


#tab-tonga {
left: 0px;
bottom: -13px;
}

#tab-close {
right: -6px;
top: -12px;
}



.tour .close {
bottom: -7px;
}

.tour .case {
margin: 0px; 
width: calc(100% - 50px);
}

.tour .case .photo {
padding: 25px;
}


.tour .case .dates {
padding: 25px 25px 25px 0px;
}

.tour .case .dates .breakdown .location {
flex: 5;
}

.tour .case .dates .breakdown .tickets button {
font-size: 0.65em;
}




.tour .case p {
font-size: 0.65em;
}




table {
width: calc(100vw - 100px);
font-size: 1.0em;
line-height: 1.2em;
letter-spacing: 1px;
}


}



/*----------------------------- iPhone X ----------------------------*/

@media only screen 
and (min-device-width : 300px) 
and (max-device-width : 430px)
and (orientation : portrait) { 





button {
padding: 5px 10px;
}


.mc-shop-button {
width: 40%;
margin: 0px 10px;
}



#mc-shop-header img {
width: calc(100% - 50px);
}

.mc-shop-case {
position:relative;
width: calc(100% - 50px);
left:50%;
transform: translateX(-50%);
min-height:300px;
margin-bottom:0px;
display:none;
padding:0px 0px 25px 0px;
}

.mc-shop-case img {
width:calc(100% - 0px);
height:auto;
}

#tees,
#vinyl {
float:none;
}



#case #md-cover {
width: calc(100% - 0px);
height:auto;
position:absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}

.content-sign-up-form {
width: calc(100% - 50px);
}



#content-music {
top: 25px;
left: 5px;
padding:0px;
}

#content-tonga {
left: 5px;
bottom: 30px;
}

#content-logo-t {
left: 50px;
bottom: -5px;
font-size: 1.5em;
}

#content-social {
right: 10px;
bottom: 30px;
padding:0px;
}

#content-bio {
width: calc(100% - 0px);
height: calc(100% - 100px);
background-color: black;
padding:0px;
}


#form-field {
width: calc(100% - 44px);
}

#form-button {
width: 100%;
}


h1 {
font-size:1.3em;
}

h2 {
font-size: 0.8em;
line-height:1.4em;
text-align:center;
padding:30px;
}



h3 {
font-size:0.9em;
line-height:1.5em;
}

p {
    font-size: 1.5em;
    line-height: 3.0em;
}


#mc-cover {
width: calc(100% - 25px);
height: auto;
}





.shopflex {
display: block;
}

.shopflex .product {
width: 100%;
}

.shopflex .product img {
filter: grayscale(0);
}







#tab-music {
position: absolute;
left: -2px;
top: -6px;
}


#tab-bio,
#tab-close {
position: absolute;
right: -3px;
top: -6px;
}

#tab-social {
position: absolute;
right: -2px;
bottom: -5px;
}

#tab-signup {
bottom: -5px;
transform: translateX(-0%);
}

#tab-tonga {
position: absolute;
left: -1px;
bottom: -5px;	
}

#tab-album {
top: 55%;
width: calc(100% - 25px);
}

#tab-tour {
bottom: -5px;
}


.tour {
overflow: auto;
}




.tour .case {
position: relative;
display: block;
left: initial;
top: initial;
transform: initial;
}




.tour .case .photo {
padding: 0px;
height: 275px;
}

.tour .case .photo img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}




.tour .case .dates {
background-color: transparent;
padding: 0px;
}


.tour .case .dates  h4 {
font-size: 1.5em;
text-align: center;
}

.tour .case .dates  h4:first-of-type {
padding-top:25px;
}

.tour .case .dates h4:last-of-type {
padding-bottom: 15px;
}

.tour .case .dates .breakdown {
flex-direction: column;
}




.tour .case .dates .breakdown:first-of-type {
margin-top: 15px;
}

.tour .case .dates .breakdown .date {
margin: 0px 0px;
padding-top: 0px;
padding-right: 0px;
}




.tour .case .dates .breakdown .location {
margin: 0px 0px;
padding-top: 0px;
padding-right: 0px;

}


.tour .case .dates .breakdown .tickets {
flex: 1;
margin: 10px 0px 0px 0px;
}



	
.tour .case .dates .breakdown .tickets button {
padding: 10px;
font-size: 0.7em;
}


.tour .close {
position: relative;
bottom: 0px;
text-align: center;
padding:0px;
}

.tour .case p {
text-align: center;
font-size: 0.9em;
line-height: 1.2em;
}



table {
width: calc(100vw - 50px);
font-size: 0.8em;
line-height: 1.2em;
letter-spacing: 1px;
}




}