* {padding: 0; margin: 0;}
body {background:#000000 url("images/wallpaper01.jpg");
background-repeat: no-repeat; background-size: contain;
color:white;
font-size:18px;
font-family:Arial;'Lucida Sans Unicode';
font-family: 'Quicksand', sans-serif;
font-family: 'Raleway', sans-serif;
font-family: 'Rajdhani', sans-serif;
font-family: 'Quicksand', sans-serif;
line-height:1.1;
text-align:center;
}
* {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;}
a {text-decoration:none;}
.body{margin: 35px auto; width:100%; clear:both;}
a:link, a:visited, a:hover, a:active {color:white;}
 
.mainheader img {height:40px;}
.mainheader nav {background-color: rgba(0, 0, 0, 1); height:40px; margin:0px; top: 0; z-index: 4; position: fixed; width:100%;
-webkit-box-shadow: 0 0 25px 0 #000000;
-moz-box-shadow: 0 0 25px 0 #000000;
box-shadow: 0 0 25px 0 #000000;}
.mainheader nav ul {list-style:none; margin:0 auto;}
.mainheader nav ul li {float:center; display:inline;}
.mainheader nav a:link, .mainheader nav a:visited{color:#fff; display: inline-block; padding: 0px 23px; height:40px;}
.mainheader nav a:hover {background: linear-gradient(red, orange);}
 
.social, .social2, .social3, .social4 { position: fixed; bottom: 0; z-index: 4; width:25%; background-color: rgba(0, 0, 0, 1); height:64px;}
.social {left: 0%;}
.social2 {left: 25%;}
.social3 {left: 50%;}
.social4 {left: 75%;}
.social, .social2, .social3 { border-right: 1px solid rgba(255,255,255,0.3);}
.social, .social2, .social3, .social4 { border-top: 1px solid rgba(0,0,0,0.3);
-webkit-box-shadow: 0 0 15px 0 #000000;
-moz-box-shadow: 0 0 15px 0 #000000;
box-shadow: 0 0 15px 0 #000000;}
.social img, .social2 img, .social3 img, .social4 img {height:50px;}
.social:hover, .social2:hover, .social3:hover, .social4:hover {background: linear-gradient(red, orange); }

.promo img {width:80%; max-width: 100%; height: 100%;}

.buy img {position: relative; margin: 0%; width: 25%; float: left;}
.product img {position: relative; margin: 0%; width: 100%; float: left;}
.item {
border: 1px white solid;
position: relative;
margin: 0.3%; width: 16%;
overflow: hidden;
line-height:0.5;
float: left;
}
.item img {max-width: 100%; height: 100%; -moz-transition: all 0.4s; -webkit-transition: all 0.4s; transition: all 0.4s;}
.item:hover img { -moz-transform: scale(10); -webkit-transform: scale(10); transform: scale(10); opacity: 0;}
 
.mask {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0px;
  background-color: rgba(0, 0, 0, 1);
  transition: all 0.3s linear;
  text-align: center;
  font-size: 15px;
  font-size: 1.3vw;
  line-height: 200%;
  padding: 22% 0 ;
}
.mask img {width:70%;}
.mask:hover {opacity: 1;}
.mask:hover img { -moz-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1;}
 
.album, .album_4 {
border: 0px black solid;
position: relative;
margin: 0.5%; width: 15.6%;
overflow: hidden;
line-height:0.5;
float: left;
}

.album img, .album2 img, .album_4 img { max-width: 100%; height: 100%; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;}
.album:hover img, .album2:hover img, .album_4:hover img { -moz-transform: scale(1.5); -webkit-transform: scale(1.5); transform: scale(1.5);}

.album2 {
border: 0px black solid;
position: relative;
margin: 0.5%; width: 96%;
overflow: hidden;
line-height:0.5;
float: left;
}

.vid {
position: relative;
margin: 0%; 
overflow: hidden;
float: left;
width:50%;
height:100%;
padding:1%;
}

.viddy {
position: relative;
margin: 0%; 
overflow: hidden;
float: center;
width:50%;
height:100%;
padding:1%;
}
 
.bandcamp {
position: relative;
margin: 0.5%; width: 19%;
overflow: hidden;
line-height:15px;
float: left;
width:24%;
height:100%;
background-color:#000;
font-size:70%;
padding-bottom:2%;
padding-left:0.5%;
padding-right:0.5%;
padding-top:0.3%;
}

.bandcamp img {width: 20%;}
.album_4, .album_4 img {width:100%;}

.albumbox {width:100%; height:80%; margin: 0% 0% 0% 0%; padding:0% 0%;}
.textbox {width:100%; height:auto; margin: 0% 0% 0% 0%; padding:0% 4%;}
.textbox img {vertical-align: middle;}
.infobox {width:1000px; height:auto; margin: 0% 0% 0% 0%; padding:0% 0%;}
.player {
position: relative;
margin: 0.5% 13% 0.5% 13%; width:74%;
overflow: hidden;
float: left;
}
 

.bandcamp1 {
position: relative;
margin: 0.5%; width: 19%;
overflow: hidden;
line-height:15px;
float: center;
width:33%;
height:100%;
background-color:#000;
font-size:70%;
padding-bottom:2%;
padding-left:0.5%;
padding-right:0.5%;
}

.bandcamp1 img {width: 20%;}

.cd img {width:400px; height:auto; border:2px solid white;}

 
#optin {
                background: #000 url("images/gradient.jpg");
                border: 15px;
                color: #fff;
                padding: 0px 5px 60px 5px;
                text-shadow: 1px 1px #111;
}
#optin input {
                border: 1px solid #111;
                font-size: 15px;
                font-weight: bold;
                margin-top: 20px;
                margin-bottom: 0px;
                padding: 8px 10px;
                border-radius: 3px;
                -moz-border-radius: 3px;
                -webkit-border-radius: 3px;
}
#optin input.name { background: #fff; color: #bbb; padding-left: 39px }
#optin input[type="submit"] {
                background: linear-gradient(red, orange);
                border: 1px solid #111;
                color: #fff;
                cursor: pointer;
                font-size: 15px;
                font-weight: normal;
                padding: 8px 0;
                width: 120px
}
#optin input[type="submit"]:hover { color: #000 }          
 
 
.nav > li > div {
    position: absolute;
    display: block;
    width: 100%;
    top: 40px;
    left: 0;
    -webkit-box-shadow: 0 0 4px 0 #000000;
                -moz-box-shadow: 0 0 4px 0 #000000;
                box-shadow: 0 0 4px 0 #000000
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
}
.nav > li:hover > div {
    opacity: 1;
    visibility: visible;
    overflow: visible;
    background-color: rgba(0, 0, 0, 1);
    padding-bottom:40px;
}
.nav .nav-column li a {
    display: block;
}



/* ****************************** TABLET - iPAD MODE ********************************** */

@media all and (max-width: 1024px) {
.body{margin: 30px auto; font-size:16px;}
.mainheader img {height:33px;}
.mainheader nav {height:36px;}
.mainheader nav a:link, .mainheader nav a:visited{padding: 0px 0px; height:36px;}
.item { border: 1px black solid; margin: 0.5%; width: 24%; }
.infobox {width:auto; height:auto; margin: 0% 0% 0% 0%; padding:0% 5%;}
.nav > li > div {top: 36px;}
.mask {font-size: 1.8vw;}
.bandcamp { border: 10px black solid; margin: 0.0%; width: 50%;}
.bandcamp1 { border: 10px black solid; margin: 0.0%; width: 50%;}
.album { border: 1px black solid; margin: 0.5%; width: 32.3%;}
.viddy {width:80%; height:100%;}
}
/* ****************************** MOBILE - PHONE MODE ********************************* */

@media all and (max-width: 690px) {
 
.body {background:#000000 url("images/wallpaper00.jpg"); width:100%;
font-size:14px; margin: 80px auto 30px auto;}
.mainheader img {width:auto; height:36px}
.mainheader nav {height:auto;}
.mainheader nav ul {padding-left:0px;}
.mainheader nav ul {padding: 6px 0px;}
.item { border: 1px black solid; margin: 0.0%; width: 50%;}
.mask {font-size: 3.5vw;}
.album, .album_4 { border: 1px black solid; margin: 0.0%; width: 50%;}
.bandcamp { border: 20px black solid; margin: 0.0%; width: 100%;}
.bandcamp1 { border: 20px black solid; margin: 0.0%; width: 100%;}
.player {margin: 0.5% 10% 0.5% 10%; width:80%;}
.nav > li > div {top: 80px; }

.album_4 {width: 100%;}

.vid {width:98%; height:100%; padding:0%; padding-bottom:1%;}
.viddy {width:100%; height:100%;}

.promo img {width:200%; max-width: 100%; height: 100%; padding-top:10%;}
.promo img { -moz-transform: scale(1.8); -webkit-transform: scale(1.8); transform: scale(1.8);}

.cd img {width:90%;}

.nav > li > div {
-webkit-box-shadow: 0 0 10px 0 #000000;
-moz-box-shadow: 0 0 10px 0 #000000;
box-shadow: 0 0 10px 0 #000000
}

.nav > li:hover > div {padding-bottom:22px;}

}
 
 
@media screen and (min-width: 540px) and (max-width: 690px) {
 
.mainheader img {width:auto; height:45px}
.nav > li > div {top: 90px; }
 
}
 
@media all and (max-width: 470px) {

.mainheader img {width:auto; height:30px}

}