/* IMPORT THE FRAMEWORK */ /* /////////////// VARIABLES /////////////// */
/* -------------------------- */
/* ///////// COLOURS //////// */
/* -------------------------- */
/* /////////////// MIXIN FUNCTIONS /////////////// */
/* /////// CUSTOM BORDER RADIUS //////// */
/* /////// CUSTOM TRANSITIONS //////// */
/* /////// LINEAR GRADIENTS //////// */
/* /////// BREAKPOINTS //////// */
/* CUSTOM MIN MAX */
/* CUSTOM MAX */
/* CUSTOM MIN */
/* --------------------------------- */
/* /////// LAYOUT FRAMEWORK //////// */
/* --------------------------------- */
/* PLACEHOLDERS */
/* LOOP TO CREATE A CLASS FOR EACH COLUMN WIDTH */
/* --------------------------------- */
/* /////// END LAYOUT FRAMEWORK //// */
/* --------------------------------- */
/* --------------------------------- */
/* ///////// FLEX FRAMEWORK //////// */
/* --------------------------------- */
/* --------------------------------- */
/* /////// SITE SPECIFIC STYLES //// */
/* --------------------------------- */
/* PLACEHOLDERS */
/* --------------------------------- */
/* /////// END SITE STYLES ///////// */
/* --------------------------------- */
#hero {
  background: url("../images/club/hero.jpg") no-repeat center top;
}

#features {
  text-align: left;
}

#features h1 {
  font-size: 2.8em;
  font-weight: normal;
  margin-bottom: 0.4em;
}

#features ul li {
  margin-bottom: 0.8em;
  font-size: 1.9em;
  background: url("../images/global/list-style.jpg") no-repeat left top;
  padding-left: 38px;
  color: #7C7C7C;
}

#pricing h1, #cond h1 {
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 0.5em;
  text-shadow: 1px 1px 2px #6F6F6F;
  color: #2A2A2A;
}

#pricing p {
  font-size: 2.8em;
}

#pricing .join {
  text-align: right;
  font-size: 1.8em;
}

.price {
  font-size: 2em;
  font-family: "LobsterTwo";
  color: #2A2A2A;
  margin-bottom: 0;
  line-height: 1em;
  display: inline-block;
  vertical-align: middle;
}

#cond {
  clear: both;
  text-align: left;
}

#cond ul li {
  list-style: disc;
  font-size: 1.3em;
  color: #7C7C7C;
  margin-left: 15px;
  line-height: 1.5em;
}

/* MOBILE PHONES  /////////////////////////////////////// */
@media screen and (max-width: 767px) {
  #hero {
    background: url("../images/club/hero.jpg") no-repeat center top;
    background-size: 300%;
  }
  #content {
    margin-top: 2em;
  }
  #pricing h1, #cond h1 {
    font-size: 2.6em;
  }
  #pricing p {
    display: inline-block;
    margin-right: 2%;
    font-size: 2.1em;
    margin-bottom: 5px;
  }
  #features {
    margin-bottom: 3em;
  }
  #features h1 {
    text-align: center;
  }
  #features ul li {
    font-size: 2em;
    margin-bottom: 0.6em;
    border-bottom: solid 1px #EEE;
    padding-bottom: 0.5em;
  }
  #cond {
    padding: 2em 0 3em;
    background: url("../images/global/ipad-lrg-divider.jpg") no-repeat center top;
  }
  #price {
    background: url("../images/club/member-bg.jpg") no-repeat left top;
    padding: 0 0 30px 115px;
    background-size: 115px;
  }
  #cond h1 {
    text-align: center;
  }
}
/* MOBILE PHONES  /////////////////////////////////////// */
@media screen and (min-width: 480px) and (max-width: 767px) {
  #price {
    background: none;
    padding: 0 0 30px 0;
  }
}
/* TABLETS (IN PORTRAIT) /////////////////////////////////////// */
@media screen and (min-width: 768px) and (max-width: 959px) {
  #content {
    margin-top: 3em;
  }
  #cond {
    background: url("../images/global/ipad-lrg-divider.jpg") no-repeat center top;
  }
  #cond ul {
    background: url("../images/club/ipad-cond-bg.jpg") no-repeat right top;
  }
  #features {
    padding: 0 0 30px 0;
  }
}
/* TABLETS AND UP /////////////////////////////////////// */
@media screen and (min-width: 768px) {
  #cond {
    padding: 50px 0;
  }
  #cond ul {
    width: 40%;
    padding-right: 60%;
  }
  #features {
    float: left;
    width: 45%;
    padding-bottom: 2em;
  }
  #pricing {
    float: left;
    width: 46%;
    margin-left: 8%;
    padding-bottom: 2em;
  }
  #pricing h1, #cond h1 {
    font-size: 3.1em;
  }
}
/* 960 DESKTOPS AND UP /////////////////////////////////////// */
@media screen and (min-width: 960px) {
  .sw {
    padding: 40px 0;
  }
  #content {
    margin-top: 5em;
  }
  #cond {
    background: url("../images/global/lrg-divider.jpg") no-repeat center top;
  }
  #cond ul {
    background: url("../images/club/cond-bg.jpg") no-repeat right top;
  }
  #price {
    background: url("../images/club/member-bg.jpg") no-repeat left top;
    padding: 0 0 30px 230px;
  }
}