/*if css3*/
@media screen and (min-width: 0px) {

  #logo span {background-image: url(images/logo@2x.png);}
  .zone {width: auto; max-width: 980px; padding: 0 20px;}
  

  #home-twitter {background: none; width: 45%; height: auto; max-width: 660px}    
  #home-twitter-block {height: 0; overflow: hidden; padding-bottom: 38.18181818181818%; position: relative; background: url(images/twitter_tear.png) left top no-repeat; background-size: 100% auto;}   
  #home-twitter-content {position: absolute; bottom: 0; right: 0; left: 0;}
  #twitter-feed {padding: 0 4% 4% 20%;}

}

/*over base size*/
@media screen and (min-width: 1280px) {

  .zone {max-width: 1080px;}
  #logo {width: 360px; margin-top: 13px}
  #nav {line-height: 30px;}
  #nav > ul > li > a {padding-left: .5em; padding-right: .5em;}
  #socials ul li a {margin: 1.2em 0;}

}

@media screen and (min-width: 1440px) {

  .zone {max-width: 1200px;}
  #logo {width: 400px; margin-top: 13px;}
  #nav {font-size: 17px; }
  #nav > ul > li > a {padding-left: .75em; padding-right: .75em;}

}
@media screen and (max-width: 1440px) {

  .jp-playlist {width: 150px!important;}

}


/*under base size*/
@media screen and (max-width: 1030px) {

  #header .zone {padding-left: 320px; padding-right: 170px;}
  #logo {width: 280px; margin-top: 13px; position: absolute; top: 0; left: 20px;}
  #utility {position: absolute; top: 0; right: 20px;}
  #nav {font-size: 16px; margin-left: 0; float: none;}
 
  
  .layout {margin-left: auto; margin-right: auto; width: auto; max-width: 770px;}

}

@media screen and (max-width: 970px) {

  #header .zone {padding-left: 295px;}
  #logo {width: 250px;}
  #nav {font-size: 15px; }
  #socials ul li a {margin: .9em 0;}

}

@media screen and (max-width: 920px) {

  #header {position: static;}
  #content {padding-top:0!important;}
  #header .zone {padding: 0 20px;}
  #logo {position: relative; left: 0; width: 320px; margin-top: 8px; z-index: 100;}
  
  #nav-toggle {display: block; width: 48px; height: 0; overflow: hidden; padding: 48px 0 0; background: url(images/nav_toggle.png) no-repeat; background-size: cover; float: right; margin: 0 -10px 0 0; cursor: pointer; outline: 0;}
  
  #nav-group {clear: both; display: block; max-height: 0; overflow: hidden; background: url(images/texture_green-dark.png) center top repeat; margin: 0 -20px;}
  
  
  .nav-on #nav-toggle {opacity: .4;}
  .nav-on #nav-group {max-height: 500px; -moz-transition: max-height .25s linear; -webkit-transition: max-height .25s linear; transition: max-height .25s linear;}
  
  #nav {font-size: 22px;}
  #nav ul {display: block;}
  #nav ul li {display: block; border-bottom: 1px solid #3C3F3B}
  #nav ul li:hover a {background: none; -moz-transition: none!important;  -webkit-transition: none!important; transition: none!important;}
  #nav ul li a {padding: .25em;}
  #nav ul li a:hover {background: #121111!important; color: #f6f5eb!important;  }
  .nav-lvl2 > a {display: none!important;}
  #nav ul li ul {height: auto; position: static; margin: 0; width: auto; opacity: 1;}
  #nav ul li ul li {display: block; background: none;}
  #nav ul li ul li a {padding: .25em!important;}
  
  
  #utility {float: none; position: static;}
  #socials ul li a {margin: 0;}
  #socials {padding: .75em 0;}
  #socials ul li {margin: 0 .25em;}
  
  .layout {padding: 20px;}


  #home-view-more {display: none;}
  
  #home-twitter {position: relative; background: none; width: auto; height: auto; max-width: none; text-align: left; background: url(images/texture_green-light.png) repeat; padding: 20px;}
  #home-twitter-block {height: auto; overflow: hidden; padding-bottom: 0; position: relative; background: none; background-size: 100% auto;}    
  #home-twitter-content {position: static; }
  #twitter-feed {padding: 0; text-align: left;}
  #twitter-feed ul {padding: 0 0 0 60px;}
  #twitter-feed .user img {left: 0; right: auto;}
  
  #home-cover {height: 65vw!important; background-position: center center!important;}
  
  #bootleg-layout {width: 60%!important;}
  #scrollbar1 {background-color: rgba(0,0,0,0.6); padding: 2%;}
  
  /*
  .home-promo-banner { top: 9%; left: 50%; margin-left: -130px; width: 100%; max-width: 209px; right: 0px;}
  */
}

@media screen and (max-width: 820px) {
  
  #page {font-size: .9em; }

  #col-a,
  #col-b {float: none!important; width: auto!important; margin: 0 0 2.5em;}
  #col-a:last-child,
  #col-b:last-child {margin: 0;}

}

@media screen and (max-width: 740px) {
  
  #bootleg-layout {width: 90%!important; float: none!important;}
  #bootleg-wrapper {}
  #scrollbar1 {width: 100%; background-color: rgba(0,0,0,0.6);}
  
}


@media screen and (max-width: 720px) {

  #page {font-size: .85em; }

  #footer {font-size: 1em; text-align: center;}
  #copyright {float: none; margin: 0 0 1.5em;}
  #footer-meta {float: none;}
    
}


@media screen and (max-width: 600px) {

  #logo {width: 260px; margin-top: 11px;}
  
  .zone {padding: 0 15px;}
  .layout {margin: 30px 0;}

  
}

@media screen and (max-width: 550px) {


  #copyright-meta {margin: 1.5em 0 0;}
  #copyright-meta li {display: block; font-size: 1.2em; border-bottom: 1px solid #454444; }
  #copyright-meta li:first-child {border-top: 1px solid #454444; }
  #copyright-meta li a {display: block; padding: .5em;}
  #copyright-meta li .div {display: none;}
  
  
  

}

@media screen and (max-width: 490px) {

  #jukebox-container {padding: 0!important;}
  .jp-playlist {width: 100%!important; float: none; clear: both; margin-bottom: 15px;}
  .jp-interface {width: 100%; float: none; clear: both;}
  .jp-controls {float: left;}
  
  .tourdates-block .social-icons {position: relative; top: 10px;}
  
  .video-list-item a .video-list-title {text-align: center; display: block; font-size: 12px; font-weight: bold; font-family: 'open_sans', Helvetica, Arial, Verdana, sans-serif; text-transform: uppercase; height: 48px; overflow: hidden;}

/*
.home-promo-banner { top: 8%; left: 69%; margin-left: -130px; width: 100%; max-width: 120px; right: 0px;}
  */
}

@media screen and (max-width: 420px) {

  #page {font-size: .8em; }

  #logo {width: 230px; margin-top: 10px;}
  #nav-toggle {width: 42px; padding-top: 42px;}
  
  .zone {padding: 0 10px;}
  .layout {margin: 20px 0;}
  
  

  
  .tourdates-block .social-icons {position: relative; top: 10px;}
  
  .video-list-item a .video-list-title {text-align: center; display: block; font-size: 12px; font-weight: bold; font-family: 'open_sans', Helvetica, Arial, Verdana, sans-serif; text-transform: uppercase; height: 48px; overflow: hidden;}
  
}