body {
  background: #320B43 ;
  font-family: 'Roboto', sans-serif; font-size: 18px;}
    /* font-family: 'Merriweather', serif; */
    .copy {color: #ffffff;}
    h1 {font-family: 'Kanit', serif; font-size: 24px;} 
    h5 {font-weight: bold;}
    ul {font-weight: bold;}
    a {color: #4b286c;}
    img {max-width: 100%; height: auto;}
    .purple {background: #4b286c;}
    .purple:hover {background: #321151;}
    .black {background: rgba(5,5,5,0.6);border:2px solid #fff; transition: all 400ms;}
    .black:hover {background: rgba(5,5,5,1.0); transition: all 400ms;}
    #header-row {
        height: auto; display: block; position: relative; 
        background: url('../img/Laguna-Thunder-Elk-Grove-Travel-Ball-mobile.jpg') no-repeat center center; 
        background-size: cover;
        z-index: 1;
        padding-bottom: 1em;
    }
    #header-row:before {
      background: #2f2f2f url('../img/jersey_style_background_inverted_gradient.png') no-repeat center top;
      /* transform: skewy(-4deg); */ /* angle you want */
      transform-origin: bottom left;
      /* border-bottom: 2px solid #C2C2C2; bottom border skews with the object */
      content: ' ';
      display: block;
      height: 100%;
      width: 100%;
      position: absolute;
      z-index: -1;
      bottom: 0;
      bottom: -500px;
    }
    .float-logo {max-width: 60%; padding: 20px; margin: 0 0 44px;}
    #content-row {
      z-index: 2;
      position: relative;
      display: block;
      margin-top: -24px;
    }
    .button {border-radius: 80px; font-weight: bold; font-family: 'Kanit', serif; text-transform: uppercase; letter-spacing: 2px;}
    .callout {border-radius: 33px; border: 0; padding: 30px;}
    .float-cta {position: absolute; bottom: 40%; right: 50%; margin-right: -110px; display: block;}
    .float-cta .button {width: 220px; border-width: 1px; border-color: #ffffff;}
    p span {color: #4b286c; font-weight: bold; }
    .fb-icon {color: #4b286c; }
    @media print, screen and (min-width: 80em) {
      body {font-size: 16px;}
      h1 { font-size: 28px;} 
      .nav-bar {margin: 0 0 0 0;}
      .callout {padding: 30px;}
      #header-row {
        background: url('../img/Laguna-Thunder-Elk-Grove-Travel-Ball.jpg') no-repeat center center; 
        background-size: cover;
        height: auto;  
        padding-bottom: 1.5em;
      }
      #header-row:before {
        bottom: -500px
      }
      .float-logo {max-width: 66%; padding: 20px; margin: 0;}
      #content-row { 
        
      }
    }
    @media print, screen and (min-width: 20em) {
      /* .float-logo {max-width: 50%; padding: 20px; margin: 0;} */
    }