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

  .zone {width: auto; max-width: 1000px;}
  #core {background-image: url(images/core.svg);}
  
}



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

  .zone {max-width: 1180px;}
  #header {font-size: 1.175em;}
  #content {font-size: 1.05em;}
  #home-landing-nav {font-size: 1.1em;}
  .csstransforms #home-landing-nav li {margin-left: -8.65em;}
  
  
  .tourdates-block {width: 32%; font-size: .9em;}

.tourdates-block:nth-child(2n+1) {
     clear: none;
}

  .tourdates-block:nth-child(3n+1) {
     clear: left;
}

}

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

  .zone {max-width: 1280px;}
  #header {font-size: 1.275em;}
  #content {font-size: 1.1em;}
  #home-landing-nav {font-size: 1.2em;}
  .csstransforms #home-landing-nav li {margin-left: -8.85em;}

}

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

  .zone {max-width: 1440px;}
  #header {font-size: 1.4em;}
  #content {font-size: 1.15em;}
  #home-landing-nav {font-size: 1.3em;}
  .csstransforms #home-landing-nav li {margin-left: -9em;}


}


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

  #nav a {font-size: 1em;}

}

@media screen and (max-width: 940px) {
  
  html {overflow-x: hidden;}
  body {-moz-transform: translate(0,0); -webkit-transform: translate(0,0); transform: translate(0,0); -moz-transition: transform .25s ease-in; -webkit-transition: transform .25s ease-in; -moz-transition: -moz-transform .25s ease-in; -webkit-transition: -webkit-transform .25s ease-in; transition: transform .25s ease-in;}
  
  #header {position: relative;}
  #content {padding-top: 3em;}
  
  #nav {width: 250px; position: absolute; top: 0; left: 100%; display: none;}
  #nav ul:first-child,
  #nav ul {position: static; padding: 0; text-align: left;}
  #nav li {display: block; border-bottom: 2px solid #000; }
  #nav a {color: #fff; font-size: 1.3em; padding: .5em 1em;}
  #nav a:hover {background: #EA3A84; color: #000;}
  #nav-toggle {display: block; float: right; width: 45px; border-top: 15px double #000; border-bottom: 5px solid #000; height: 0; padding-top: 5px; overflow: hidden; margin: 1em 0; cursor: pointer;}

  .nav-on body {-moz-transform: translate(-250px,0); -webkit-transform: translate(-250px,0); transform: translate(-250px,0);}
  .nav-on #nav-toggle {opaicty: .5;}
  .nav-on #nav {display: block;}
  
  .layout-photo:after {display: none;}
  .layout-photo {padding: 0 20px;}
  .layout-photo .col-a {width: auto;}
  
  .body-layout-photo #footer {padding-right: 0;}
  .body-layout-photo #footer .zone {width: auto; max-width: 1000px;}
  
  #body-welcome #header {top: 0!important;}
  #body-welcome #logo {top: 0!important;}
  
  #home-landing {display: none;}
  
  #home-landing-mobile {display: block; margin-top: -.25em;}
  #home-landing-mobile img {display: block; width: 100%;}
  
  #home-promos a:hover {transform: scale(1);}
  
  #articles-short .articles-block:first-child,
  #articles-short .articles-block {float: none; width: auto; padding: 0; border: 0; font-size: 1em; background: none;}
  

}

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

  .col-a,
  .col-b {float: none!important; width: auto!important; padding: 0!important; margin: 2.5em 0 0;}
  .col-a:first-child,
  .col-b:first-child {margin: 0;}
  
  #home-promos li {display: block; width: auto; padding: 0; max-width: 444px; margin: 0 auto 1em;}
  #home-promos li:last-child {margin-bottom: 0;}

  
  
    .video-list-item {width: 33.3333334%;}

  
  
  #home-tour .tourdates-block {width: 49%;}


#home-tour .tourdates-block:nth-child(2n+1) {
     clear: left;
}

#home-tour .tourdates-block:nth-child(3n+1) {
     clear: none;
}
  
  

} 

@media screen and (max-width: 660px) {
  
  #footer-meta,
  #copyright {float: none; text-align: center;}
  
  #copyright {margin: 0 0 1em;}
  #copyright-meta {font-size: 1.3em; border-top: 2px solid #333; margin: 1em 0;}
  #copyright-meta li {display: block; border-bottom: 2px solid #333;}
  #copyright-meta li:before {display: none;}
  #copyright-meta a {display: block; padding: .5em;}
  
  #fanclub-buttons .button {font-size: 1em;}
  
  
    #home-tour .tourdates-block,
    .tourdates-block {width: 100%;}


}


@media screen and (max-width: 540px) {
  
  .video-list-item {width: 50%;}
  
}




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

.video-list-item {width: 100%;}

}