@charset "utf-8";
/* CSS SisterSax - web 3.0 - 2013 Sister Sax Club Classics css */

@import url(http://fonts.googleapis.com/css?family=Orbitron);

#main-content {
height: 100%;
padding-bottom: 100px;
}

.club-classics-page {
clear: both;
width: 100%;
}

.club-classics-flier {
background: #FFF url(../images/occasions/club-classics/club-classics-sister-sax-bk2.jpg) 0 0 no-repeat scroll;
width: 1000px;
height: 1466px;
}

@media all and (max-width: 1000px) {
.club-classics-flier {
background-size: 100% auto;
width: 100%;
}
}

.flier-head {
width: 100%;
height: 760px;
position: relative;
}

.head-spacer {
width: 100%;
height: 153px;
}

@media all and (max-width: 1000px) {
.head-spacer {
display: none;
}
}

.head-intro {
width: 100%;
height: 132px;
}

@media all and (max-width: 1000px) {
.head-intro {
padding-top: 16%;
width: 64%;
height: auto;
padding-bottom: 5%;
float: right;
}
}

.club-classics-page .head-intro p,
.club-classics-page .listing-intro p {
font: normal 1.3em/1.5em Orbitron, Arial, Helvetica, sans-serif;
color: #FFF;
text-align: center;
margin: 15px 59px 0 0;
text-shadow: 2px 2px #000;
}
.club-classics-page .listing-intro p {
width: 540px;
float: right;
}
@media all and (min-width: 723px) {
  .club-classics-page .head-intro p {
    width: 540px;
    float: right;
  }
}
.club-classics-page .head-intro p .old-skool {
color: #ff37e5;
}
.middle-track-listing .middle-track-listing__message .middle-track-listing__message-copy {
  clear: both;
  font: normal 1.3em/1.5em Orbitron, Arial, Helvetica, sans-serif;
  text-align: center;
  margin: 30px 4vw 0;
  color: #000;
}

.head-video-area {
clear: both;
width: 100%;
height: 390px;
}

.video-content {
width: 645px;
height: 365px;
}

.top-video {
float: right;
margin: 0 53px 0 0;
}

@media all and (max-width: 1000px) {

.head-video-area,
.video-content.base-video {
clear: both;
width: 67%;
height: auto;
float: right;
}

.video-content {
width: 90%;
height: auto;
}

.top-video,
.base-video {
margin: 0 8% 0 0;
}

#main-content .base-video.videoWrapper {
position: relative;
padding-bottom: 39.25%;
padding-top: 25px;
height: 0;
clear: both;
margin-bottom: 1em;
width: 64%;
float: left;
}
}

.club-classics-page .listing-intro p {
/* Overides */
width: 697px;
float: none;
margin: 10px auto;
}


.club-classics-logo {
  display: none;
}
@media all and (max-width: 723px) {
  .club-classics-logo.club-classics-logo--mobile {
    display: inline-block;
    width: 100%;
    max-width: 200px;
    height: auto;
  }
}
.club-classics-logo img {
  width: 100%;
  height: inherit;
}
@media all and (min-width: 723px) and (max-width: 1021px) {
  .club-classics-logo {
    display: block;
    position: absolute;
    top: 3%;
    left: 2%;
    width: 37%;
    max-width: 467px;
    height: auto;
  }
  .club-classics-logo.club-classics-logo--mobile {
    display: none;
  }
}
@media all and (min-width: 1022px)  {
  .club-classics-logo {
      display: block;
      position: relative;
      top: -663px;
      left: -15px;
      width: 467px;
      height: 372px;
    }
    .club-classics-logo.club-classics-logo--mobile {
      display: none;
    }
  }

.club-classics-logo img {
width: 100%;
height: auto;
}
}

.middle-track-listing {
width: 100%;
height: 231px;
}

/* .middle-track-listing div {
padding: 10px 0 0 30px;
} */

.middle-track-listing ul {
width: 25%;
display: inline-block;
margin: 10px auto;
text-align: left;
}

.middle-track-listing ul li {
font: normal 1.3em/1.5em Orbitron, Arial, Helvetica, sans-serif;
color: #68004e;
}

.middle-track-listing .list-right {
width: 42%;
}

.base-section {
clear: both;
width: 100%;
height: 475px;
}

.base-video {
float: left;
margin: 0 0 0 70px;
}

.about-club-classics h1 {
color: #FF3297;
text-align: center;
padding: 0 5px;
margin: 0;
}

.about-club-classics p {
width: 80%;
margin: 10px auto;
color: #6A0034;
text-align: left;
margin: 10px auto;
}


@media all and (max-width: 723px) {
  .head-intro.head-intro--classics {
    display: flex;
    flex-direction: row;
    float: none;
    clear: both;
    width: 100%;
    justify-content: center;
    align-items: center;
  }
}
  
@media all and (max-width: 1000px) {
.club-classics-page .flier-head {
height: auto;
}

.club-classics-page .listing-intro {
clear: both;
top: -20px;
position: relative;
}

.club-classics-page .head-intro p,
.club-classics-page .listing-intro p {
width: 84%;
font-size: 1em;
margin: 0 10% 0 0;
}

.club-classics-page .listing-intro p {
font-size: 0.8em;
color: #ff37e5;
text-shadow: 1px 1px #000;
margin: 0 auto;
}

.club-classics-page .middle-track-listing {
height: auto;
padding: 0;
margin: -9% auto 0;
}

.middle-track-listing ul li {
font: normal 1em/1.2em Orbitron, Arial, Helvetica, sans-serif;
color: #68004e;
}

.middle-track-listing .list-right {
width: 51%;
}
}

@media all and (max-width: 732px) {

.club-classics-flier {
background: none;
width: 100%;
height: auto;
}

.head-intro {
padding-top: 1%;
width: 64%;
height: auto;
float: right;
}

.club-classics-page .head-intro p,
.club-classics-page .listing-intro p {
color: #000;
text-shadow: none;
}

.head-video-area,
.video-content.base-video {
clear: both;
width: 95%;
height: auto;
float: right;
}

.club-classics-page .about-club-classics {
clear: both;
}

.club-classics-page .base-section {
height: auto;
}

#main-content .base-video.videoWrapper {
padding-bottom: 55.25%;
margin-bottom: 0.5em;
width: 95%;
float: none;
margin-left: 1%;
}
}

@media all and (max-width: 508px) {

.middle-track-listing .list-left,
.middle-track-listing .list-right {
clear: both;
width: 96%;
margin: 1% auto;
}
}

.event-poster {
margin: 1em auto;
width: 100%;
}

.event-poster img {
width: 100%;
height: inherit;
}
.event-poster--split .images--50-50 { 
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 630px) {
  .event-poster--split .images--50-50 { 
    flex-direction: row;
  }
  .event-poster--split img {
    max-width: 50%;
    height: inherit;
  }
}
.event-poster img.tropical-records {
max-width: 610px;
padding: 0;
}
