/* =======================================================================
BASE STYLES
==========================================================================
*/
body {
  font-family: "Open Sans";
  color: #2f2f2f; }

main {
  position: relative;
  margin-top: 40px; }

h2 {
  color: #df4747;
  font-weight: 300;
  line-height: 1.8em;
  font-size: 1.8em;
  margin-bottom: 10px;
  margin-top: 0; }

h3 {
  line-height: 1em;
  font-size: 1.5em;
  text-transform: lowercase;
  font-variant: small-caps;
  font-weight: 600;
  color: #7e7e7e;
  margin-bottom: 20px;
  margin-top: 10px; }

p {
  font-size: 1em;
  line-height: 1.8em;
  margin-top: 0;
  margin-bottom: 20px; }
  p.headline {
    font-weight: 300;
    margin-bottom: 30px;
    font-size: 1.5em;
    line-height: 1.6em; }
  p.note {
    font-style: italic;
    color: #7e7e7e;
    margin-top: 20px; }
    p.note.caption {
      text-align: center;
      margin-bottom: 20px; }
    p.note .author {
      color: #2f2f2f;
      font-style: normal;
      margin-left: 10px; }

p > a:hover {
  cursor: pointer;
  background: #dfdfdf; }

p > a:visited {
  color: #871f1f; }

a {
  text-decoration: underline;
  color: #df4747; }

ul {
  margin-top: 0; }

li {
  line-height: 2em; }

button, input[type="submit"], .link-button {
  color: white;
  text-transform: lowercase;
  font-variant: small-caps;
  background: #df4747;
  border-radius: 4px;
  border: none;
  font-size: 1.5em;
  margin-top: 10px;
  width: auto;
  padding: 10px 25px 12px 25px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  -webkit-transition: background .1s ease-in-out;
  -moz-transition: background .1s ease-in-out;
  -o-transition: background .1s ease-in-out;
  transition: background .1s ease-in-out; }

select {
  background-color: white;
  color: black;
  border: 2px solid #df4747;
  padding: 10px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }

button:hover, input[type="submit"]:hover, .link-button:hover {
  background: #2f2f2f;
  -webkit-transition: background .2s ease-in-out;
  -moz-transition: background .2s ease-in-out;
  -o-transition: background .2s ease-in-out;
  transition: background .2s ease-in-out; }
button:active, input[type="submit"]:active, .link-button:active {
  background: black; }
button:focus, button:active, input[type="submit"]:focus, input[type="submit"]:active, .link-button:focus, .link-button:active {
  outline: 0;
  border: 1px dashed #df4747; }

/* =======================================================================
MARGINS AND PADDING
==========================================================================
*/
ul {
  padding: 20px; }

.grid_12 > p, .grid_12 > h1, .grid_12 > h2, .grid_12 > h3, .grid_12 > ul {
  margin-left: 13px;
  margin-right: 13px; }

.grid_7 > p, .grid_7 > h1, .grid_7 > h2, .grid_7 > h3, .grid_7 > ul, .grid_8 {
  margin-left: 13px;
  margin-right: 13px; }

.grid_6.info {
  margin-left: 13px;
  margin-right: 13px;
  float: left;
  width: auto; }

.testimonial {
  margin-left: 13px;
  margin-right: 13px; }

header {
  padding: 2vw 4vw; }

.grid_12 img {
  margin: 20px 0px; }

.grid_5.image {
  margin: 0 0 30px 0; }

/* =======================================================================
INFOBLOCKS
==========================================================================
*/
/* infoblocks occur in the footer and on the contact page, and consist of a subheading a short paragraph */
.infoblock {
  margin-bottom: 20px; }
  .infoblock h3 {
    font-size: 1.5em;
    line-height: 1.3em;
    margin: 0; }
  .infoblock p {
    font-size: 1em;
    margin: 0;
    line-height: 1.5em; }
  .infoblock.socialmedia {
    margin-top: 40px; }
    .infoblock.socialmedia a {
      width: 0;
      text-decoration: none; }
    .infoblock.socialmedia div {
      display: inline-block; }

/* =======================================================================
PRICETAGS
==========================================================================
*/
/* pricetags occur on the lessons page */
.pricetag {
  text-align: center;
  width: 305px;
  height: 365px;
  border-radius: 3px;
  border: 2px solid #7e7e7e;
  margin: 30px auto;
  display: block;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
  .pricetag h2 {
    margin: 0;
    font-variant: small-caps;
    color: #c8c8c8;
    background: #2f2f2f;
    font-weight: 600;
    font-size: 1.875em;
    padding-top: 3px;
    padding-bottom: 5px;
    z-index: 2;
    position: relative;
    -webkit-box-shadow: 0px 7px 5px -4px black;
    -moz-box-shadow: 0px 7px 5px -4px black;
    box-shadow: 0px 5px 5px -4px black; }
  .pricetag h3 {
    margin: 13px 0px;
    color: #df4747;
    font-size: 1.875em;
    padding-bottom: 6px; }
  .pricetag p.price {
    margin: 0;
    font-size: 4.5em;
    font-weight: 300;
    color: #c8c8c8;
    background: #2f2f2f; }
  .pricetag ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 1.125em; }
    .pricetag ul li {
      line-height: 1.3em;
      padding: 12px 0px;
      border-top: 1px solid #c8c8c8; }

/* =======================================================================
EMBEDDED MEDIA
==========================================================================
*/
iframe {
  width: 100%;
  border: none; }

.iframe-wrapper {
  width: 100%;
  height: 0;
  padding-bottom: 51%;
  position: relative;
  margin: 20px 0px; }

.iframe-wrapper iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0; }

/* =======================================================================
HEADER
==========================================================================
*/
.header-wrapper {
  border-bottom: 2px dashed #df4747;
  width: 100%;
  z-index: 3;
  top: 0px;
  position: absolute;
  -webkit-transition: background 1s ease-in-out;
  -moz-transition: background 1s ease-in-out;
  -o-transition: background 1s ease-in-out;
  transition: background 1s ease-in-out; }

.opaque-header {
  background: white; }
  .opaque-header nav a {
    color: #7e7e7e; }

.transparent-header {
  background: transparent; }
  .transparent-header nav a {
    color: #c8c8c8; }

#headerimage {
  margin: 0 auto;
  display: block;
  position: relative;
  top: 0px;
  z-index: 1;
  user-drag: none;
  -moz-user-select: none;
  -webkit-user-drag: none; }

#headerimage-wrapper {
  margin: 0;
  position: relative;
  background: #e0e0e0;
  /* Old browsers */
  background: -moz-linear-gradient(left, #e0e0e0 0%, #444444 40%, #000000 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #e0e0e0 0%, #444444 40%, #000000 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #e0e0e0 0%, #444444 40%, #000000 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#000000',GradientType=1 );
  /* IE6-9 */ }

#logo-wrapper {
  float: left; }
  #logo-wrapper a {
    text-decoration: none; }

div#tagline {
  display: inline-block;
  background: url("../images/logo.png") no-repeat;
  background-size: 11vw;
  padding-left: 13vw; }
  div#tagline h1, div#tagline h2 {
    color: black;
    font-weight: normal;
    line-height: 1.2em;
    margin: 0;
    padding: 0;
    vertical-align: middle; }
  div#tagline h1 {
    font-size: 6vw; }
  div#tagline h2 {
    font-size: 5vw; }

.has_svgasimg div#tagline {
  background: url("../images/logo.svg") no-repeat;
  background-size: 11vw; }

#main-nav {
  text-align: right;
  margin-top: 10px; }
  #main-nav a {
    margin-left: 25px; }

nav a {
  text-decoration: none;
  color: #c8c8c8;
  text-transform: lowercase;
  font-variant: small-caps;
  font-weight: 600;
  font-size: 1.5em;
  -webkit-transition: border-bottom .4s ease-in-out;
  -moz-transition: border-bottom .4s ease-in-out;
  -o-transition: border-bottom .4s ease-in-out;
  transition: border-bottom .4s ease-in-out; }
  nav a:hover, nav a.current {
    border-bottom: 3px solid #df4747;
    -webkit-transition: border-bottom .15s ease-in-out;
    -moz-transition: border-bottom .15s ease-in-out;
    -o-transition: border-bottom .15s ease-in-out;
    transition: border-bottom .15s ease-in-out; }

/* navigation is hidden and shown using a menu button on smaller screens */
#nav-wrapper {
  display: none;
  width: auto;
  /* mobile navigation styling */ }
  #nav-wrapper ul {
    padding: 0;
    margin-right: 4vw; }
  #nav-wrapper.mobile {
    height: 100vh;
    width: 100%;
    padding-top: 20vw;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #2f2f2f;
    display: block;
    z-index: 1; }
    #nav-wrapper.mobile li {
      margin-bottom: 11vw;
      margin-left: 0; }
    #nav-wrapper.mobile a {
      width: auto;
      text-align: right;
      border-bottom: none;
      font-size: 11vw; }
      #nav-wrapper.mobile a:hover, #nav-wrapper.mobile a.current {
        border-bottom: 4px solid #df4747; }

/* mobile menu button */
#menu-button {
  border: none;
  background: none;
  box-shadow: none;
  float: right;
  cursor: pointer;
  position: relative;
  z-index: 2;
  margin-top: 0;
  color: #c8c8c8;
  font-variant: small-caps;
  font-variant: small-caps;
  font-weight: 600;
  font-size: 7vw; }

#menu-button.menu-closed {
  background-image: url("../images/icons/menu-icon.png");
  background-repeat: no-repeat;
  background-size: 7vw 7vw;
  background-position: right;
  padding-right: 9vw; }

.has_svgasimg #menu-button.menu-closed {
  background-image: url("../images/icons/menu-icon.svg"); }

#menu-button.menu-open {
  background-image: url("../images/icons/close-icon.png");
  background-repeat: no-repeat;
  background-size: 5vw 5vw;
  background-position: right;
  padding-right: 8vw;
  color: #7e7e7e; }

.has_svgasimg #menu-button.menu-open {
  background-image: url("../images/icons/close-icon.svg"); }

.pgtitle {
  text-align: center;
  font-weight: 300;
  color: white;
  position: absolute;
  width: 100%;
  z-index: 2;
  top: 90px;
  /* fallback for browsers without vw support */
  /* non-hptext needs to be further down */ }
  .pgtitle h1, .pgtitle h2 {
    color: white;
    width: 100%;
    font-weight: 300;
    margin-bottom: 0;
    font-size: 15vw; }
  .pgtitle h1 {
    position: relative;
    top: 35vw;
    margin-top: 0; }
  .pgtitle.hptext h1, .pgtitle.hptext h2 {
    font-variant: normal;
    text-transform: none;
    top: 0; }
  .pgtitle.hptext #big-line {
    line-height: 1.5em;
    font-size: 14vw; }
  .pgtitle.hptext #small-lines {
    line-height: 1.5em;
    font-size: 6.5vw; }

.has_cssvwunit .pgtitle {
  top: 25vw; }

.hp-buttons {
  margin-top: 10vw; }

.hpbutton {
  display: block;
  width: 50%;
  padding: 1.5vw 2vw 3.5vw 2vw;
  margin: 10vw auto;
  font-size: 8vw; }

a.link-button {
  font-weight: 600;
  text-decoration: none; }

/* =======================================================================
FOOTER
==========================================================================
*/
.footer-wrapper {
  border-top: 2px dashed #df4747;
  margin-top: 40px; }

footer .grid_6.info {
  margin-bottom: 0px; }

address {
  font-style: normal; }

footer h2 {
  margin-top: 40px;
  margin-bottom: 20px;
  line-height: 1.3em; }

#paypal-logo {
  margin-left: 15px; }

#footer-nav {
  margin-top: 20px;
  margin-bottom: 40px; }
  #footer-nav a {
    display: block;
    color: #7e7e7e;
    width: auto;
    font-weight: normal;
    font-variant: normal;
    text-transform: capitalize;
    font-size: 6vw;
    padding-top: 6vw;
    padding-bottom: 6vw;
    padding-left: 13px;
    border-bottom: 1px dashed #c8c8c8; }
    #footer-nav a.current, #footer-nav a:hover {
      color: #df4747; }
    #footer-nav a.current {
      border-bottom: 2px solid #df4747; }

/* using Modernizr to load SVG icons only in browsers that support them */
#backtotop {
  display: none;
  background-image: url("../images/icons/up-arrow.png");
  background-repeat: no-repeat;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 70px;
  height: 70px;
  margin: 13px;
  border-radius: 100px;
  cursor: pointer;
  z-index: 2;
  -webkit-box-shadow: 0px 0px 8px 1px rgba(255, 255, 255, 0.6);
  -moz-box-shadow: 0px 0px 8px 1px rgba(255, 255, 255, 0.6);
  box-shadow: 0px 0px 8px 1px rgba(255, 255, 255, 0.6); }

.has_svgasimg #backtotop {
  background-image: url("../images/icons/up-arrow.svg"); }

.credit {
  font-size: 14px;
  text-align: center; }

/* =======================================================================
SOCIAL MEDIA LINKS
==========================================================================
*/
/* uses sprites */
/* using Modernizr to load SVG icons only browsers that support them */
#youtube {
  background: url("../images/icons/youtube.png") no-repeat right; }
  #youtube:hover {
    background-position: left; }

.has_svgasimg #youtube {
  background: url("../images/icons/youtube.svg") no-repeat right; }
  .has_svgasimg #youtube:hover {
    background-position: left; }

#facebook {
  background: url("../images/icons/facebook.png") no-repeat right; }
  #facebook:hover {
    background-position: left; }

.has_svgasimg #facebook {
  background: url("../images/icons/facebook.svg") no-repeat right; }
  .has_svgasimg #facebook:hover {
    background-position: left; }

#soundcloud {
  background: url("../images/icons/soundcloud.png") no-repeat right; }
  #soundcloud:hover {
    background-position: left; }

.has_svgasimg #soundcloud {
  background: url("../images/icons/soundcloud.svg") no-repeat right; }
  .has_svgasimg #soundcloud:hover {
    background-position: left; }

.social-icon {
  overflow: hidden;
  height: 40px;
  width: 40px;
  display: inline;
  margin-right: 50px; }
  .social-icon:hover {
    cursor: pointer; }

#buybutton {
  margin-left: 0;
  display: block;
  margin-top: 30px;
  vertical-align: middle; }

/* Elements only useful on mobile, such as links to jump past images to the content, are given this class */
.mobile-only {
  display: inline-block; }

#big-line {
  font-size: 7vw; }

/* =======================================================================
GRID COLUMNS
==========================================================================
*/
.grid_7, .grid_12, .rightfloat, .grid_6 {
  width: 100%;
  float: none;
  margin: 0; }

/* image column */
.grid_5 {
  width: 100%;
  float: none;
  margin: 0 auto; }
  .grid_5 .image {
    padding: 0;
    text-align: center; }

.grid_5.image {
  float: none;
  width: auto; }
  .grid_5.image img {
    display: block;
    margin: 26px auto 30px auto; }

/* =======================================================================
VARIOUS STYLES
==========================================================================
*/
::selection {
  background: #f2b3b3;
  /* WebKit/Blink Browsers */ }

::-moz-selection {
  background: #f2b3b3;
  /* Gecko Browsers */ }

.imagelink:hover {
  border: none; }

/* remove hover states on touchscreen */
.touch-device #main-nav a:hover {
  border-bottom: none; }
.touch-device #footer-nav a:hover {
  color: #7e7e7e; }
.touch-device a:hover {
  background: none; }
.touch-device button:hover, .touch-device .link-button:hover {
  background: #df4747; }
.touch-device button:focus, .touch-device .link-button:hover {
  border: none; }

/* google map */
#map {
  width: 100%;
  height: 400px; }

/* =======================================================================
MEDIA QUERIES
==========================================================================
*/
@media screen and (min-width: 600px) {
  .credit {
    float: left !important;
    /* for some reason necessary for border to show up on mobile */
    padding-top: 13px;
    border-top: 1px solid #c8c8c8; }

  #footer-nav {
    margin-top: 30px;
    margin-left: 13px;
    margin-right: 13px; }
    #footer-nav a {
      display: inline-block;
      color: #7e7e7e;
      border-bottom: none;
      font-weight: normal;
      font-variant: normal;
      text-transform: capitalize;
      font-size: 1em;
      padding: 0; }
      #footer-nav a.current {
        border: none; }
      #footer-nav a:after {
        content: " | "; }

  header {
    padding: 10px 13px; }

  #nav-wrapper.mobile {
    padding-top: 80px; }
    #nav-wrapper.mobile ul {
      margin-right: 13px; }
    #nav-wrapper.mobile li {
      margin-bottom: 50px; }
    #nav-wrapper.mobile a {
      font-size: 3.125em; }

  #menu-button {
    font-size: 2em; }
    #menu-button.menu-closed {
      background-size: 40px 40px;
      padding-right: 50px; }
    #menu-button.menu-open {
      background-size: 20px 20px; }

  .hpbutton {
    font-size: 5vw;
    padding: 1vw 6vw 2.5vw 6vw;
    display: inline;
    margin-left: 3vw;
    margin-right: 3vw; }

  div#tagline {
    padding-left: 59px;
    background: url("../images/logo.png") no-repeat;
    background-size: 49px; }
    div#tagline h1, div#tagline h2 {
      color: black;
      font-weight: normal;
      margin: 0;
      padding: 0; }
    div#tagline h1 {
      font-size: 1.6em; }
    div#tagline h2 {
      font-size: 1.3em; }

  .has_svgasimg div#tagline {
    background: url("../images/logo.svg") no-repeat;
    background-size: 49px; }

  .grid_6.info, .grid_6.info.rightfloat {
    width: 45%; }

  footer .grid_6.info.rightfloat {
    text-align: right; } }
/* tablets */
@media screen and (min-width: 780px) {
  footer .grid_6.rightfloat {
    float: right; }

  p.headline {
    font-size: 1.875em;
    line-height: 1.8em; }

  h2 {
    line-height: 2em;
    font-size: 2.25em; }

  .pgtitle h1 {
    top: 0vw; }
  .pgtitle h1, .pgtitle h2 {
    font-size: 8.5vw; }
  .pgtitle.hptext {
    top: 12vw; }
    .pgtitle.hptext h1#big-line {
      font-size: 8.5vw; }
    .pgtitle.hptext h2#small-lines {
      font-size: 3.5vw; }

  .hp-buttons {
    margin-top: 5vw; }

  .hpbutton {
    margin-left: 13px;
    margin-right: 13px;
    font-size: 3.8vw;
    padding: 4px 30px 15px 30px; }

  #buybutton {
    display: inline-block;
    margin-top: 0;
    margin-left: 20px; }

  .container .grid_5, grid_5.image {
    width: 38%; }

  .container .grid_6 {
    width: 45%; }

  .container .grid_7 {
    width: 56%; }

  .container .grid_12 {
    width: 100%;
    max-width: 996px; }

  .grid_5, .grid_5.image, .grid_6, .grid_7, .grid_8, .grid_12 {
    float: left; }

  /* everything is floated left by default, but sometimes we might want to align something to the right side (like images) */
  .grid_5.rightfloat {
    float: right; }

  .grid_5.image {
    margin-left: 13px;
    margin-right: 26px; }

  .grid_5.rightfloat.image {
    margin-right: 13px;
    margin-left: 26px; } }
#scrollcue-wrapper {
  text-align: center;
  position: absolute;
  bottom: 0px;
  display: none; }

#scrollcue {
  display: block;
  margin: 0 auto;
  z-index: 3;
  position: relative; }
  #scrollcue:hover {
    cursor: pointer; }

/* desktops */
@media screen and (min-width: 1029px) {
  #scrollcue-wrapper {
    display: block; }

  .grid_5.image {
    margin-left: 0;
    margin-right: 26px; }

  .grid_5.rightfloat.image {
    margin-right: 0;
    margin-left: 26px; }

  #backtotop {
    display: none; }

  #menu-button {
    display: none; }

  .pricetag {
    margin: 0px 5px 20px 5px;
    display: inline-block; }

  .grid_12 {
    float: left; }

  .grid_5, .grid_6, .grid_7, .grid_8, .grid_12 {
    margin: 0;
    float: left; }

  .hpbutton {
    font-size: 2.5vw;
    line-height: 1em;
    padding: .3vw 2.5vw 1vw 2.5vw; }

  .mobile-only {
    display: none; }

  /* navigation is hidden and shown using a menu button on smaller screens */
  #nav-wrapper {
    display: block; }
    #nav-wrapper ul {
      margin-right: 0; }
    #nav-wrapper li {
      display: inline-block; }

  /* detect <picture> element support with modernizr and only make header bg transparent if it is supported - otherwise menu text becomes unreadable due to the wrong background image being loaded. we only do this on desktop because the menu text is not an issue in the mobile layout */
  .header-wrapper {
    position: fixed; }
    .header-wrapper.transparent-header {
      background: white;
      -webkit-transition: none;
      -moz-transition: none;
      -o-transition: none;
      transition: none; }
      .header-wrapper.transparent-header nav a {
        color: #7e7e7e; }

  .has_picture .transparent-header {
    background: transparent;
    -webkit-transition: background 1s ease-in-out;
    -moz-transition: background 1s ease-in-out;
    -o-transition: background 1s ease-in-out;
    transition: background 1s ease-in-out; }
    .has_picture .transparent-header nav a {
      color: #c8c8c8; }

  /* =======================================================================
  MARGINS
  ==========================================================================
  */
  .grid_12 > p, .grid_12 > h1, .grid_12 > h2, .grid_12 > h3 {
    margin-left: 0;
    margin-right: 0; }

  .grid_7 > p, .grid_7 > h1, .grid_7 > h2, .grid_7 > h3, .grid_8 {
    margin-left: 0;
    margin-right: 0; }

  .grid_6.info {
    margin-left: 0;
    margin-right: 0; }

  .testimonial, #footer-nav {
    margin-left: 0;
    margin-right: 0; } }
/*  Freeze the button and text sizes on the homepage once the window is wide enough. these don't need to be set in em since they will not be seen on smaller devices */
@media screen and (min-width: 1270px) {
  .hpbutton {
    font-size: 30px;
    padding: 5px 34px 15px 34px; }

  .hp-buttons {
    margin-top: 60px; }

  #headerimage {
    max-height: 800px; }

  .pgtitle {
    /* important seems to be needed due to modernizr classes. don't ask */
    top: 310px !important; }
    .pgtitle h1 {
      font-size: 110px; }
    .pgtitle.hptext {
      /* title text on the homepage takes up more vertical space, so doesn't need to be pushed down as much */
      top: 160px !important; }
      .pgtitle.hptext h1#big-line {
        font-size: 110px; }
      .pgtitle.hptext h2#small-lines {
        font-size: 45px; } }

/*# sourceMappingURL=style.css.map */