<section class="warning">
  <div class="wrap">
   <h1>Deprecated</h1>
   <p>
    This version is deprecated, I'll be working on a newer version that uses more modern practices and cleaner code. This has been kept for reference (mostly to see how far I've come 😅). Visit the new one <a href="https://codepen.io/mejiaj/pen/BgJxgK"><strong>here</strong></a>
   </p>
 </div>
</section>
<div class="wrap">
  <section class="cart">

    <header class="cart-header">
      
        <div class="pure-g">
          
            <div class="pure-u-md-2-3 pure-u-1">
                <h1 class="cart-headline">Your Shopping Cart</h1>
            </div>
          
            <div class="pure-u-md-1-3 pure-u-1">
                <div class="cart-secure-badge">Your shopping experience is secure.</div>
            </div>
          
        </div>
      
    </header>

    <div class="cart-body">
      
      <div class="cart-items-header">
        
        <div class="pure-g">
          
          <div class="pure-u-1-4 pure-u-md-1-2">
            <div class="cart-item-title">Product</div>
          </div>
          
          <div class="pure-u-1-6">
            <div class="cart-item-price">Price</div>
          </div>
          
          <div class="pure-u-1-6">
            <div class="cart-item-qty">Qty</div>
          </div>
          
          <div class="pure-u-1-6">
            <div class="cart-item-subtotal">Subtotal</div>
          </div>
          
        </div>
        
      </div>

      <ul class="cart-items-body">
        
        <li class="cart-item">
          
          <div class="pure-g">
            
            <div class="pure-u-1 pure-u-md-1-2">
              <div class="cart-item-title pure-g">
                <div class="pure-u-1 pure-u-md-5-24">
                  <div class="cart-title-img">
                    <img src="http://www.placehold.it/110x110" alt="">
                  </div>
                </div>
                <div class="pure-u-1 pure-u-md-19-24">
                  <div class="cart-title-desc"><a href="">Smooth and Silky Brazilian Formula Wax (refill)</a></div>
                </div>
              </div>
            </div>
              
            <div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
              <div class="cart-item-price">
                $24.99
                <span class="price-desc">ea.</span>
              </div>
            </div>
              
            <div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
              <div class="cart-item-qty">
                <input type="number" name="" id="qty1" value="12" max="15">
              </div>
            </div>
              
            <div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
              <div class="cart-item-subtotal"></div>
            </div>
              
          </div>
              
        </li>
            
        <li class="cart-item">
          
          <div class="pure-g">
            
            <div class="pure-u-1 pure-u-md-1-2">
              <div class="cart-item-title pure-g">
                <div class="pure-u-1 pure-u-md-5-24">
                  <div class="cart-title-img">
                    <img src="http://www.placehold.it/110x110" alt="">
                  </div>
                </div>
                <div class="pure-u-1 pure-u-md-19-24">
                  <div class="cart-title-desc"><a href="">Style Therapy: Shine Therapy Grooming Brush</a></div>
                </div>
              </div>
            </div>
              
            <div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
              <div class="cart-item-price">
                $9.99
                <span class="price-desc">ea.</span>
              </div>
            </div>
              
            <div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
              <div class="cart-item-qty">
                <input type="number" name="" id="qty2" value="12" max="15">
              </div>
            </div>
              
            <div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
              <div class="cart-item-subtotal"></div>
            </div>
              
          </div>
              
        </li>
            
        <li class="cart-item">
          
          <div class="pure-g">
            
            <div class="pure-u-1 pure-u-md-1-2">
              <div class="cart-item-title pure-g">
                <div class="pure-u-1 pure-u-md-5-24">
                  <div class="cart-title-img">
                    <img src="http://www.placehold.it/110x110" alt="">
                  </div>
                </div>
                <div class="pure-u-1 pure-u-md-19-24">
                  <div class="cart-title-desc"><a href="">Battery Operated Rotary Nose & Ear Trimmer</a></div>
                </div>
              </div>
            </div>
              
            <div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
              <div class="cart-item-price">
                $19.99
                <span class="price-desc">ea.</span>
              </div>
            </div>
              
            <div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
              <div class="cart-item-qty">
                <input type="number" name="" id="qty3" value="12" max="15">
              </div>
            </div>
              
            <div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
              <div class="cart-item-subtotal"></div>
            </div>
              
          </div>
              
        </li>
            
        <li class="cart-item">
          
          <div class="pure-g">
            
            <div class="pure-u-1 pure-u-md-1-2">
              <div class="cart-item-title pure-g">
                <div class="pure-u-1 pure-u-md-5-24">
                  <div class="cart-title-img">
                    <img src="http://www.placehold.it/110x110" alt="">
                  </div>
                </div>
                <div class="pure-u-1 pure-u-md-19-24">
                  <div class="cart-title-desc"><a href="">Studio Style 30 Piece Professional Haircut Kit</a></div>
                </div>
              </div>
            </div>
              
            <div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
              <div class="cart-item-price">
                $31.99
                <span class="price-desc">ea.</span>
              </div>
            </div>
              
            <div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
              <div class="cart-item-qty">
                <input type="number" name="" id="qty4" value="12" max="15">
              </div>
            </div>
              
            <div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
              <div class="cart-item-subtotal"></div>
            </div>
              
          </div>
              
        </li>
            
      </ul><!--/Cart Items Body-->
          
    </div><!--/Cart Body-->
            
    <footer class="cart-footer">
      
      <div class="pure-g">
      
        <div class="pure-u-1 pure-u-md-2-5">
              
            <div class="field-wrap inline-field promo is-valid">
              <label for="promo">Promo Code:</label>
              <input type="text" name="promo" id="promo" placeholder="Promo Code" value="Dinosaur"/>
              <a href="" class="btn btn-tertiary">Submit Code</a>
            </div>
          
        </div>
          
        <div class="pure-u-1 pure-u-md-3-5">
          
          <div class="cart-total">
            <div class="pure-g">
              <div class="pure-u-1-2 pure-u-sm-4-5 h2">Total<span class="tooltip-trigger">♦<span class="tooltip">Doesn't include shipping & handling or tax</span></span>:</div>
              <div class="pure-u-1-2 pure-u-sm-1-5 h2" id="cartTotalVal">$1,199.52</div>
            </div>
          </div>
          
        </div>
        
      </div>
      
      <div class="cart-controls">
        <a href="#login" class="btn btn-primary">Begin Checkout</a>
        <a href="" class="btn btn-secondary">Back to Browsing</a>
      </div>
    </footer>

  </section><!--/Cart-->
  
  <section class="checkout is-hidden" id="login">
    <header class="checkout-header">
      <h1 class="checkout-headline">Sign In</h1>
    </header>
    
    <div class="checkout-body">
      <div class="pure-g">
        <div class="pure-u-1 pure-u-md-1-2">
          <div class="login">
            <a href="" class="btn btn-facebook">Login with Facebook</a>
            <span class="hr-text">or</span>
            <h5>Use existing account:</h5>
            <form action="">
              <div class="field-wrap">
                <label for="accEmail">Email</label>
                <input type="email" name="accEmail" id="accEmail" placeholder="Email" required />
              </div>
              <div class="field-wrap">
                <label for="accPwd">Password</label>
                <input type="password" name="" id="accPwd" placeholder="Password" required />
              </div>
              <div class="field-wrap input-checkbox">
                <label for="rememberMe">Remember Me</label>
                <input type="checkbox" name="rememberMe" id="rememberMe" />
              </div>
              <button type="submit" class="btn btn-primary">Submit</button>
            </form>
          </div><!--/Login-->
        </div>
        
        <div class="pure-u-1 pure-u-md-1-2 is-centered">
          <div class="login-alt">
            <a href="#checkout" class="btn btn-tertiary">Guest Checkout</a>
            <a href="" class="btn btn-secondary">Create Account</a>
          </div>
        </div>
      </div>
    </div><!--/Checkout Body-->
  </section><!--/Checkout-->
  
  <section class="checkout is-hidden" id="checkout">
    <header class="checkout-header">
      <h1 class="checkout-headline">Checkout</h1>
      <div class="progress">
        <div class="pure-g">
          <div class="pure-u-1-3 h3 progress-step is-active">
            <a href="">Billing</a>
          </div>
          <div class="pure-u-1-3 h3 progress-step">
            <a href="">Shipping</a>
          </div>
          <div class="pure-u-1-3 h3 progress-step">
            <a href="">Payment</a>
          </div>
        </div>
      </div>
    </header>
  
    <div class="checkout-body">
      
      <div class="pure-g">
        <div class="pure-u-1 pure-u-md-1-3 push-u-2-3">
          
          <section class="checkout-items">
            <h3 class="checkout-items-headline">Your Items</h3>
            
            <ul class="checkout-items-body">
              
              <li class="checkout-item">
                <dl>
                  <dt class="checkout-item-title">
          	        Smooth and Silky Brazilian Formula Wax (refill)
                  </dt>
                  <dd class="checkout-item-price">
                    $24.99
                    <span class="price-desc">ea.</span>
                  </dd>
                  <dd class="checkout-item-qty">×12</dd>
                  <dd class="checkout-item-subtotal">$299.88</dd>
                </dl>
              </li>
              
              <li class="checkout-item">
                <dl>
                  <dt class="checkout-item-title">
          	        Style Therapy: Shine Therapy Grooming Brush
                  </dt>
                  <dd class="checkout-item-price">
                    $24.99
                    <span class="price-desc">ea.</span>
                  </dd>
                  <dd class="checkout-item-qty">×12</dd>
                  <dd class="checkout-item-subtotal">$299.88</dd>
                </dl>
              </li>
              
              <li class="checkout-item">
                <dl>
                  <dt class="checkout-item-title">
          	        Battery Operated Rotary Nose & Ear Trimmer
                  </dt>
                  <dd class="checkout-item-price">
                    $24.99
                    <span class="price-desc">ea.</span>
                  </dd>
                  <dd class="checkout-item-qty">×12</dd>
                  <dd class="checkout-item-subtotal">$299.88</dd>
                </dl>
              </li>
              
              <li class="checkout-item">
                <dl>
                  <dt class="checkout-item-title">
          	        Studio Style 30 Piece Professional Haircut Kit
                  </dt>
                  <dd class="checkout-item-price">
                    $24.99
                    <span class="price-desc">ea.</span>
                  </dd>
                  <dd class="checkout-item-qty">×12</dd>
                  <dd class="checkout-item-subtotal">$299.88</dd>
                </dl>
              </li>
              
              <li class="checkout-total">
                <span class="h4 checkout-total-val">$1,199.52</span>
                <span class="h5">total</span>
              </li>
              
            </ul><!--/Cart Items Body-->
            
          </section>
          
        </div>
        
        <div class="pure-u-1 pure-u-md-2-3 pull-u-1-3">
          
          <section class="checkout-billing checkout-step checkout-step-1" id="step1">
            
            <h2 class="billing-header">Billing Info</h2>
            
            <form action="">
              
              <fieldset class="billing-name">
                <legend>Name</legend>
                <div class="field-wrap">
                  <label for="gAccEmail">Email</label>
                  <input type="email" name="" id="gAccEmail" placeholder="Email" required />
                </div>
                <div class="pure-g">
                  <div class="pure-u-1 pure-u-sm-1-2">
                    <div class="field-wrap">
                      <label for="firstName">First Name</label>
                      <input type="text" name="" id="firstName" placeholder="First Name" required class="pure-u-1 pure-u-sm-23-24"/>
                    </div>
                  </div>
                  <div class="pure-u-1 pure-u-sm-1-2">
                    <div class="field-wrap">
                      <label for="lastName">Last Name</label>
                      <input type="text" name="" id="lastName" placeholder="Last Name" required/>
                    </div>
                  </div>
                </div>
              </fieldset>
              
              <fieldset class="billing-address">
                <legend>Address</legend>
                <div class="field-wrap">
                  <label for="street">Street</label>
                  <input type="text" name="" id="street" placeholder="Street" required/>
                </div>
                <div class="pure-g">
                  <div class="pure-u-1 pure-u-md-1-2">
                    <div class="field-wrap">
                      <label for="city">City</label>
                      <input type="text" name="" id="city" placeholder="City" required value="Madison" class="pure-u-1 pure-u-md-23-24"/>
                    </div>
                  </div>
                  <div class="pure-u-1 pure-u-sm-2-3 pure-u-md-1-5">
                    <div class="field-wrap">
                      <label for="state">State</label>
                      <select name='options' id="state" require class="pure-u-1 pure-u-sm-22-24">
                        <option value='option-1'>Arizona</option>
                        <option value='option-2' selected>Wisconsin</option>
                        <option value='option-6'>Florida</option>
                      </select>
                    </div>
                  </div>
                  <div class="pure-u-1 pure-u-sm-1-3 pure-u-md-7-24">
                    <div class="field-wrap">
                      <label for="zipcode">Zipcode</label>
                      <input type="text" name="zipcode" id="zipcode" placeholder="Zip Code" required value="53713"/>
                    </div>
                  </div>
                </div>
                
                <div class="field-wrap input-checkbox">
                  <label for="shipAddress">My shipping address is the same as my billing address.</label>
                  <input type="checkbox" name="shipCheck" id="shipAddress"  checked/>
                </div>
              </fieldset>
                            
              <button type="submit" class="btn btn-primary">Continue</button>
              <a href="" class="btn btn-secondary">Back</a>
              
            </form>
            
          </section><!--/Checkout Step 1-->
          
          <section class="checkout-step checkout-step-2 shipping-info is-hidden" id="step2">
            
            <h2 class="shipping-info-header">Shipping Info</h2>
            
            <form action="">
              
              <div class="pure-g">
                
                <div class="pure-u-1 pure-u-sm-1-2">
                  <fieldset>
                    <legend class="">Fedex</legend>
                    <div class="field-wrap input-radio">
                      <label for="shipOp1">Standard - Free</label>
                      <input type="radio" name="shipOp" id="shipOp1" required />
                    </div>
                    <div class="field-wrap input-radio">
                      <label for="shipOp2">Priority - $46.96</label>
                      <input type="radio" name="shipOp" id="shipOp2" required />
                    </div>
                  </fieldset>
                </div>
                
                <div class="pure-u-1 pure-u-sm-1-2">
                  <fieldset>
                    <legend>UPS</legend>
                    <div class="field-wrap input-radio">
                      <label for="shipOp3">Standard - Free</label>
                      <input type="radio" name="shipOp" id="shipOp3" required />
                    </div>
                    <div class="field-wrap input-radio">
                      <label for="shipOp4">Priority - $17.26</label>
                      <input type="radio" name="shipOp" id="shipOp4" required />
                    </div>
                  </fieldset>
                </div>
                
              </div>
              
              <button type="submit" class="btn btn-primary">Continue</button>
              <a href="" class="btn btn-secondary">Back</a>
              
            </form>
            
          </section><!--/Checkout Step 2-->
          
          <section class="checkout-step checkout-step-3 payment-info is-hidden" id="step3">
            
            <h2 class="payment-info-header">Payment Info</h2>
            
            <form action="" class="payment-form">
              
              <div class="field-wrap">
                <label for="ccNum">Credit Card Number</label>
                <input type="text" id="ccNum" placeholder="Credit Card Number" maxlength="15" required/>
              </div>
              <div class="field-wrap">
                <label for="ccName">Name on Card</label>
                <input type="text" id="ccName" placeholder="Name on Card" required />
              </div>
              <div class="pure-g">
                
                <div class="pure-u-1 pure-u-sm-3-5">
                  <div class="field-wrap">
                    <label for="ccExpDate">Expires</label>
                    <input type="month" name="ccExpDate" id="ccExpDate" class="cc-exp pure-u-sm-22-24" />
                  </div>
                </div>
                
                <div class="pure-u-1 pure-u-sm-2-5">
                  <div class="field-wrap">
                    <label for="ccCode" class="ccCode">Security Code</label>
                    <input type="text" name="ccCode" id="ccCode" placeholder="Security Code" class="cc-code" required maxlength="6"/>

                    <span class="tooltip-trigger">♦ 
                      <span class="tooltip">
                        The security code is the 3 digit number on the back of your card.
                      </span>
                    </span>
                  </div>
                </div>
                
              </div>
              
              <button type="submit" class="btn btn-primary">Complete Purchase</button>
              <a href="" class="btn btn-secondary">Back</a>
              
            </form>
            
          </section><!--/Checkout Step 3-->
          
          <div class="checkout-footer">
            
            <div class="nl-signup">
              <h3 class="nl-signup-header">Checkout Our Newsletter</h3>
              <div class="nl-signup-body">
                <p>
                Once a month you get an email with the latest products, exclusive deals, the hottest tips and style guides.
                </p>
                <a href="" class="btn btn-tertiary" id="nl-signup">Sign Me Up!</a>
                <a href="" class="btn btn-secondary" id="nl-noThanks">No Thanks</a>
              </div>
            </div>
            
          </div><!--/Checkout Footer-->
          
        </div><!--/Pure 2 of 3-->
        
      </div><!--/Pure G-->
      
    </div><!--/Checkout Body-->
      
  </section><!--/Checkout-->
          
  <section class="checkout-receipt is-hidden" id="checkout-receipt">
  
    <h1>Thanks for shopping with us</h1>
    <h4 class="checkout-ordernum">Order No. 12111320</h4>
        
    <div class="pure-g">
      
      <div class="pure-u-1 pure-u-sm-1-2">
        <div class="shipped-info">
          <h5>Shipped To:</h5>
          <ul>
            <li>B. Rodriguez</li>
            <li>3001 Deming Way,</li>
            <li>Middleton WI, 53713</li>
          </ul>
        </div>
      </div>
      
      <div class="pure-u-1 pure-u-sm-1-2">
        <div class="paid-info">
          <h5>Paid With:</h5>
          <ul>
            <li>Mastercard</li>
            <li>**** **** **** 2916</li>
            <li>Billing Address same as Shipping</li>
          </ul>
        </div>
      </div>
      
    </div>
    
    <div class="cart-items-header">

        <div class="pure-g">

          <div class="pure-u-1-4 pure-u-md-1-2">
            <div class="cart-item-title">Product</div>
          </div>

          <div class="pure-u-1-6">
            <div class="cart-item-price">Price</div>
          </div>

          <div class="pure-u-1-6">
            <div class="cart-item-qty">Qty</div>
          </div>

          <div class="pure-u-1-6">
            <div class="cart-item-subtotal">Subtotal</div>
          </div>

        </div>

      </div>
    <ul class="cart-items-body">
      
        <li>

          <div class="pure-g">

            <div class="pure-u-1 pure-u-md-1-2">
              <div class="cart-item-title pure-g">
                <div class="pure-u-1 pure-u-md-5-24">
                  <div class="cart-title-img">
                    <img src="http://www.placehold.it/110x110" alt="">
                  </div>
                </div>
                <div class="pure-u-1 pure-u-md-19-24">
                  <div class="cart-title-desc"><a href="">Smooth and Silky Brazilian Formula Wax (refill)</a></div>
                </div>
              </div>
            </div>

            <div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
              <div class="cart-item-price">
                $24.99
                <span class="price-desc">ea.</span>
              </div>
            </div>

            <div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
              <div class="cart-item-qty">12</div>
            </div>

            <div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
              <div class="cart-item-subtotal">$299.88</div>
            </div>

          </div>

        </li>

        <li>

          <div class="pure-g">

            <div class="pure-u-1 pure-u-md-1-2">
              <div class="cart-item-title pure-g">
                <div class="pure-u-1 pure-u-md-5-24">
                  <div class="cart-title-img">
                    <img src="http://www.placehold.it/110x110" alt="">
                  </div>
                </div>
                <div class="pure-u-1 pure-u-md-19-24">
                  <div class="cart-title-desc"><a href="">Style Therapy: Shine Therapy Grooming Brush</a></div>
                </div>
              </div>
            </div>

            <div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
              <div class="cart-item-price">
                $9.99
                <span class="price-desc">ea.</span>
              </div>
            </div>

            <div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
              <div class="cart-item-qty">12</div>
            </div>

            <div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
              <div class="cart-item-subtotal">$119.88</div>
            </div>

          </div>

        </li>

        <li>

          <div class="pure-g">

            <div class="pure-u-1 pure-u-md-1-2">
              <div class="cart-item-title pure-g">
                <div class="pure-u-1 pure-u-md-5-24">
                  <div class="cart-title-img">
                    <img src="http://www.placehold.it/110x110" alt="">
                  </div>
                </div>
                <div class="pure-u-1 pure-u-md-19-24">
                  <div class="cart-title-desc"><a href="">Battery Operated Rotary Nose &amp; Ear Trimmer</a></div>
                </div>
              </div>
            </div>

            <div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
              <div class="cart-item-price">
                $19.99
                <span class="price-desc">ea.</span>
              </div>
            </div>

            <div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
              <div class="cart-item-qty">12</div>
            </div>

            <div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
              <div class="cart-item-subtotal">$239.88</div>
            </div>

          </div>

        </li>

        <li>

          <div class="pure-g">

            <div class="pure-u-1 pure-u-md-1-2">
              <div class="cart-item-title pure-g">
                <div class="pure-u-1 pure-u-md-5-24">
                  <div class="cart-title-img">
                    <img src="http://www.placehold.it/110x110" alt="">
                  </div>
                </div>
                <div class="pure-u-1 pure-u-md-19-24">
                  <div class="cart-title-desc"><a href="">Studio Style 30 Piece Professional Haircut Kit</a></div>
                </div>
              </div>
            </div>

            <div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
              <div class="cart-item-price">
                $31.99
                <span class="price-desc">ea.</span>
              </div>
            </div>

            <div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
              <div class="cart-item-qty">12</div>
            </div>

            <div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
              <div class="cart-item-subtotal">$383.88</div>
            </div>

          </div>

        </li>

      </ul>
          
      <div class="cart-total">
        <div class="pure-g">
          <div class="pure-u-1-2 pure-u-md-4-5 h4">Promo Code:</div>
          <div class="pure-u-1-2 pure-u-md-1-5 h4" id="cartTotalVal">-$5.00</div>
          <div class="pure-u-1-2 pure-u-md-4-5 h4">Shipping:</div>
          <div class="pure-u-1-2 pure-u-md-1-5 h4" id="cartTotalVal">$12.00</div>
          <div class="pure-u-1-2 pure-u-md-4-5 h2">Total:</div>
          <div class="pure-u-1-2 pure-u-md-1-5 h2" id="cartTotalVal">$1,199.52</div>
        </div>
      </div>
              
      <h4>Style Guides</h4>
      <div class="pure-g">
        <div class="pure-u-1 pure-u-sm-1-2">
          <div class="receipt-rp">
            <a href="">
              <img src="http://placeimg.com/559/200/people">
              <div class="receipt-rp-header">
                <h5 class="h3">3 Ways to Style a Floral Kimono</h5>
              </div>
            </a>
          </div>
        </div>
        <div class="pure-u-1 pure-u-sm-1-2">
          <div class="receipt-rp">
            <!-- Only to get different image -->
            <a href="">
              <img src="http://placeimg.com/560/200/people">
              <div class="receipt-rp-header">
                <h5 class="h3">Swimsuit Season</h5>
              </div>
            </a>
          </div>
        </div>
    </div>
    
  </section><!--/Checkout Receipt-->

</div>
/*  ================================================
    $Table of Contents
    ================================================ */
/**
*   $Variables
*     $Colors
*   $Partials
*   $Mixins
*   $Shared
*     $Forms
*     $Animations
*     $Typography
*     $Alerts
*     $Buttons
*     $Tooltip
*   $Cart
*   $Checkout
*   $Newsletter
*   $Receipt
*/


//  ================================================
//  $Variables
//  ================================================
$easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1);

$font-size: 16px;
$baseline: 1.5;
$space: ($baseline * ($font-size/$font-size) + 0em);
$half-space: $space/2;
$double-space: $space * 2;


//  $Media Queries
//  ================================================
@mixin bp($point) {
  
  //Based on Pure CSS MQ's
  $sm: "(min-width: 35.5em)";
  $md: "(min-width: 48em)";
  $lg: "(min-width: 64em)";
  $xl: "(min-width: 80em)";

  
  @if $point == sm {
    
    @media #{$sm} { @content; }
    
  }
  
  @if $point == md {
    
    @media #{$md} { @content; }
    
  }

  @if $point == lg {
    
    @media #{$lg} { @content; }
    
  }
  
}

//  $Colors
//  ================================================
$black:      #121212;
$gray:       #f6f5f4;
$dark-gray:  #babab9;
$purple:     #5600ff;
$yellow:     #ffab00;
$red:        #ff0015;
$blue:       #007fff;
$green:      #00cc66;


$brand:      #121212;
$facebook:   #3b5998;
$alert:      $red;
$deals:      $purple;
$signup:     $blue;
$warning:    $yellow;
$text:       tint($black, 5%);
$success:    $green;


/*  ================================================
    $Partials
    ================================================ */
%clear {
  *zoom: 1;
  
  &:before,
  &:after {
    content: ' ';
    display: table;
  }
  
  &:after { clear: both; }
  
}

%reset-list {
  padding: 0;
  list-style: none;
}

%l-box {
  border: 1px solid $dark-gray;
  box-shadow: 3px 3px shade($dark-gray, 40%);
  margin-bottom: $space;
  padding: $space $space $half-space;
}



/*  ================================================
    $Mixins
    ================================================ */
@function em($px, $context: 16) {
	  @return #{$px/$context}em;
}


/*  ================================================
    $Shared
    ================================================ */
*,
*:before,
*:after { box-sizing: border-box; }

html {
  font: 400 #{$font-size}/#{$baseline} 'Source Sans Pro', sans-serif;
}

.pure-g [class*="pure-u"] { font-family: 'Source Sans Pro'; }

body {
  color: #000;
  margin: 0;
  padding: 0;
  transition: all .4s ease;
}

.wrap {
  margin: 0 auto;
  max-width: 1140px;
  width: 80%;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  border-bottom: 1px dotted currentColor;
  text-decoration: none;  
}

[class*="push-"],
[class*="pull-"] { position: relative; }

.pull-u-1-3 { left: -33.3333%; }
.push-u-2-3 { left: 66.6667%; }

@media only screen and (max-width: 767px) {
  
  .pull-u-1-3,
  .push-u-2-3 { left: auto; }
  
}

.is-centered { text-align: center; }

.is-hidden {
  visibility: hidden;
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}



/*  $Forms
    ================================================ */
fieldset { 
  border: none;
  margin-bottom: $half-space;
  padding: 0;
}

legend { padding: 0; }

input,
select,
textarea {
  border: 2px solid $dark-gray;
  border-radius: 0;
  box-sizing: border-box;
  box-shadow: none;
  color: tint($black, 32%);
  display: inline-block;
  font-family: inherit;
  margin: 0 0 $half-space;
  width: 100%;
  transition: border .4s, color .6s;
  
  &:focus {
    color: $text;
    outline: none;
    border-color: $brand !important;
  }
  
  @include bp(sm) {
    
    .inline-field & { width: auto; }
    
  }
  
}

select,
textarea,
[type="tel"],
[type="url"],
[type="number"],
[type="month"],
[type="text"],
[type="email"],
[type="password"] {
  height: em(39);
  padding: .4rem .5rem;
}

label {
  color: $dark-gray;
  display: block;
  font-size: .74em;
  font-weight: 600;
  transition: color .6s;
  text-transform: uppercase;
  
  &.on { color: $black; }
  
}

textarea { height: auto; }

.input-radio,
.input-checkbox {
 
  label {
    color: $text;
    display: inline-block;
    max-width: 80%;
  }
  
}

.input-radio input[type="radio"],
.input-checkbox input[type="checkbox"] {
  float: left;
  height: 1.2em;
  width: 1.2em;
  margin: .25em 1em $half-space 0;  
}

.field-wrap {
  @extend %clear;

  &.error {
    label { color: $red; }
    input { border-color: $red; }
  }
  
}

.checkout-step.error { animation: shake .2s 2 $easeInOutQuint; }



/*  $Animations
    ================================================ */
@keyframes pulse {

  0% { 
    opacity: 0;
    transform: scale(.6);
  }
  
  80% { transform: scale(1.2); }
  
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
  
}

@keyframes shrink {
        
  to { height: 0; }
  
}

@keyframes collapse {
  
  from {
    max-height: 30em;
  }
  
  to {
    max-height: 0;
    padding: 0;
  }
  
}

@keyframes flyUp {
  
  from { transform: translateY(6em); }
  to   { transform: translateY(0); }
  
}

@keyframes fadeOut {
  
  from { opacity: 1; }
  to   { opacity: 0; }
  
}

@keyframes fadeToGray {
  
  to { background-color: $dark-gray; }
  
}

@keyframes shake {
  
  0% { transform: translate(0, 0); }
  
  33.33% { transform: translate(1em, -1em); }
  
  66.66% { transform: translate(-1em, 1em); }
  
  100% { transform: translate(0, 0); }

}

.fadeOut { animation: fadeOut .3s $easeInOutQuint forwards; }

.pulse { animation: pulse .3s $easeInOutQuint forwards; }

.is-removed { 
  animation: flyUp .4s $easeInOutQuint forwards reverse,
             fadeOut .3s ease forwards;

}

.is-added {
  animation: flyUp .4s $easeInOutQuint forwards,
             fadeOut .3s ease forwards reverse;
}


/*  $Typography
    ================================================ */
h1, .h1 {
  font-size: em(40);
  font-weight: 200;
  margin: 0 0 em(21, 40);
}

h2, .h2 {
  font-size: em(36);
  font-weight: 200;
  margin: 0 0 em(21, 36);
}

h3, .h3 {
  font-size: em(26.667);
  font-weight: 300;
  letter-spacing: 2px;
  margin: 0 0 em(21, 26.667);
  text-transform: uppercase;
}


h4, .h4 {
  font-size: em(24);
  font-weight: 300;
  margin: 0 0 em(21, 24);
}

h5, .h5 {
  font-size: em(17.778);
  font-weight: 400;
  margin: 0 0 em(21, 17.778);
}


p,
ul,
ol,
dl,
table { margin: 0 0 em(21); }

.hr-text {
  display: table;
  font-weight: 600;
  margin: $half-space auto $space;
  position: relative;
  text-transform: uppercase;
  
  &:before,
  &:after { content: '\25C8'; }
  
  &:before { margin-right: $half-space; }
  &:after  { margin-left: $half-space; }
  
}


/*  $Alerts
    ================================================ */
.alert {
  @extend %l-box;
  margin: $space;
  padding: $half-space;
  text-align: center;
}

.alert-default {
  background-color: $gray;
  border-color: $dark-gray;
}

.alert-warning {
  background-color: tint($warning, 60%);
  border-color: $warning;
}

.decay-progress {
  background-color: $dark-gray;
  border-radius: 100%;
  height: 1em;
  width: 1em;
  overflow: hidden;
  position: absolute;
  top: .3em;
  right: .3em;

  &:after {
    animation: 
      fadeOut .4s ease-in forwards reverse,
      shrink 7s .4s linear forwards;
    background-color: $success;
    content: ' ';
    height: 1em;
    width: 1em;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }
  
}


/*  $Buttons
    ================================================ */
.btn {
  -webkit-appearance: none;
  background-image: linear-gradient(rgba(white, .24), transparent);
  cursor: pointer;
  border: 1px solid;
  display: inline-block;
  font: 300 .74em/1.6 'Source Sans Pro', sans-serif;
  letter-spacing: 1px;
  margin: 0 0 $space;
  padding: .8em $space .7em;
  position: relative;
  text: {
    align: center;
    decoration: none;
    transform: uppercase;
    shadow: 1px 1px 0 rgba($black, .4);
  }
  transition: all .4s ease;
  vertical-align: top;
  width: 100%;
    
  &:hover,
  &:focus {
    box-shadow: 3px 3px 0 rgba(black, .4);
    outline: none;
  }
  
  &:active { box-shadow: 3px 3px 0 rgba(black, .8); }
  
  @include bp(sm) { width: auto; }
  
}

.btn-primary {
  background-color: $brand;
  border: 1px solid $black;
  color: #fff;
  
  &:active { background-color: shade($brand, 72%); }
  
}

.btn-secondary {
  background-color: $dark-gray;
  border-color: shade($dark-gray, 8%);
  color: #fff;
  
  &:active {
    background-color: shade($dark-gray, 32%);
    border-color: shade($dark-gray, 32%);
  }
  
}

.btn-deals {
  background-color: $deals;
  border-color: $deals;
  color: #fff;
  
  &:active {
    background-color: shade($deals, 32%);
    border-color: shade($deals, 32%);
  }
  
}

.btn-facebook {
  background-color: $facebook;
  border-color: $facebook;
  color: #fff;  
}

.btn-tertiary {
  background-color: $blue;
  border-color: $blue;
  color: #fff; 
}

.btn-alert {
  background-color: $alert;
  border-color: $alert;
  color: #fff;  
}

.btn-success {
  background-color: $success;
  border-color: $success;
  color: #fff;
}


/*  $Tooltip
    ================================================ */
.tooltip-trigger {
  color: $black;
  cursor: pointer;
  font-size: initial;
  position: relative;
  padding: 0 $half-space;
  vertical-align: super;
  
  &:hover .tooltip {
    opacity: 1;
    transform: translateY(-110%);
    visibility: visible;
  }
  
}

.tooltip {
  background-color: $black;
  border-radius: 3px;
  color: #fff;
  cursor: default;
  display: block;
  font-weight: 400;
  margin-left: -9em;
  padding: $space;
  position: absolute;
  top: 0;
  left: 50%;
  opacity: 0;
  text-align: center;
  transition: opacity .3s linear, transform .3s $easeInOutQuint;
  visibility: hidden;
  width: 18em;
  z-index: 2;
  
  &:after {
    border: 10px solid transparent;
    border-top-color: $black;
    content: ' ';
    margin-left: -10px;
    top: 98%;
    position: absolute;
    left: 50%;
    z-index: 1;
  }
  
}


/*  ================================================
    $Cart
    ================================================ */
.cart-items-body { @extend %reset-list; }

.cart-items-header dd,
.cart-item dd { margin: 0; }

.cart-title-desc,
.cart-item-price,
.cart-item-qty,
.cart-item-subtotal { padding: 0 1.5rem; }

.cart-title-desc,
.cart-item-price,
.cart-item-subtotal {}

.cart-items-header {
  border-top: 3px double $dark-gray;
  border-bottom: 3px double $dark-gray;
  display: none;
  font-size: .74em;
  padding: $space 0;
  text-transform: uppercase;
  
  @include bp(md) { display: block; }
  
}

.cart-secure-badge {
  padding: $half-space 0;
  
  @include bp(md) {
    margin-top: $half-space;
    padding: $half-space;
    text-align: center;
  }
  
}

.cart-items-body > li {
  background-color: #fff;
  border-bottom: 1px solid $dark-gray;
  padding: $half-space 0 .5em;
}

.cart-title-img {
  display: none;
  
  @include bp(md) { display: block; }
  
}

.cart-title-desc { margin-bottom: $space; }

.cart-item-qty label { line-height: 2.5; }


.cart-total { text-align: right; }

.cart-controls .btn-primary { float: right; }



/*  ================================================
    $Login
    ================================================ */
.login,
.login-alt {
  @extend %l-box;
  margin-left: 15%;
  margin-right: 15%; 
}

.login .btn,
.login-alt .btn { width: 100%; }


/*  ================================================
    $Checkout
    ================================================ */
.progress { margin-bottom: $space; }

.progress-step {
  color: $dark-gray;
  overflow: hidden;
  position: relative;
  text-align: center;
  text-overflow: ellipsis;
  
  a {
    color: inherit;
    cursor: default;
    border: none;
    text-decoration: none;
    transition: color .4s $easeInOutQuint;
  }
  
  &:before,
  &:after {
    content: '';
    display: block;
    height: 4px;
  }
  
  &:after {
    background-color: $dark-gray;
    width: 100%;
  }
  
  &:before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    transition: width .4s ease .3s;
  }
  
}

.progress-step.is-active {
  color: $blue;
  
  a {
    color: $blue;
    cursor: pointer;
  }
  
  &:before {
    background-color: $blue;
    width: 100%;
  }

}

[class*="checkout-step"] { margin-bottom: $double-space; }

.checkout-items {
  
  @include bp(md) { margin-left: $double-space; }
    
}

.checkout-items-body { @extend %reset-list; }

.checkout-item dd { margin: 0; }

.checkout-step {
  @extend %l-box;

  .btn-primary { float: right; }
  
}

.checkout-item + .checkout-item {
  border-top: 1px dashed $dark-gray;
  margin-top: $half-space;
  padding-top: $half-space;
}

.checkout-item dl { margin-bottom: 0; }

.checkout-total {
  border-top: 3px double $dark-gray;
  margin-top: $half-space;
  padding: $half-space 0;
}


/*  $Payment
    ================================================ */
.cc-code {
  float: left;
  width: 70%;
}

/*  $Newsletter
    ================================================ */
.checkout-footer { text-align: center; }


/*  ================================================
    $Receipt
    ================================================ */
.shipped-info,
.paid-info {
  @extend %l-box;
  
  ul {
    list-style: none;
    padding: 0;
  }
  
}

.shipped-info {
  
  @include bp(sm) { margin-right: 5%; }
  
}
.paid-info {
  
  @include bp(sm) { margin-left: 5%; }
  
}

/* Receipt Related Posts */
.receipt-rp {
  margin: 0 1% 2em;
  text-align: center;
  overflow: hidden;
  position: relative;
  
  &:hover .receipt-rp-header { background-color: rgba($brand, .8); }
    
  img { display: block; }
  
}

  .receipt-rp-header {
    background-image: linear-gradient(transparent, rgba($brand, .8) );
    color: #fff;
    padding: 10em 1em .5em;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    transition: background .4s ease;
    
    h5 {
      margin-bottom: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
  }
.l-box { @extend %l-box; }

/*  ================================================
    $Warning
    ================================================ */
.warning {
 background-color: #fffc00;
 margin-bottom: 1rem;
 padding: 2rem;
}
View Compiled
$(function(){
  
  var $cartItems       = $('.cart-item'),
      getPrice         = /(\d+)\.(\d{2})/g,
      animationEnd     = 'webkitAnimationEnd oanimationend oAnimationEnd animationend',
      removedItemAlert = '<li class="is-added"><div class="alert alert-default" data-mod="undo-alert">{{ Item name }} has been removed from your cart. <a href="" class="btn btn-secondary" data-mod="undo-delete-btn">↩ Undo</a></div></div>',
      emptyCartAlert   = '<li class="is-added"><div class="alert alert-default"><h3 class="alert-header">Bummer, your cart\'s empty.</h3><div class="alert-body"><p>You currently don\'t have any items in your cart. Need some help? Check out our: </p><a href="" class="btn btn-primary">Products</a><span class=""> or </span><a href="" class="btn btn-deals">Specials</a></div></div></li>',
      removedItems     = 0;
      getSubTotal      = function(){

        var subTotal = itemPrice * itemQty;
        return subTotal.toFixed(2);

      };
  
  $cartItems.each(function(index) {

    var $cartItem   = $(this),
        $itemInput  = $cartItem.find('input'),
        $subTotal   = $cartItem.find('.cart-item-subtotal');
        
    itemPrice = $cartItem.find('.cart-item-price').text().match(getPrice);
    itemQty   = $itemInput.val();
                    
    $subTotal.append('$' + getSubTotal());
        
    $itemInput.on('input', function(){
            
      itemPrice = $cartItem.find('.cart-item-price').text().match(getPrice);
      itemQty = $cartItem.find('input').val();
      
      if ( itemQty <= 0 ) {
        
        $removedItem = $cartItem;
         
        $removedItem.addClass('is-removed').on(animationEnd, function(){
          
          $removedItem.removeClass('is-removed').addClass('is-hidden');
          
        });
       
        $('[data-mod="undo-alert"]').parent('li').remove();
        $removedItem.before(removedItemAlert);
        $('[data-mod="undo-alert"]').startDecay();
        $('[data-mod="undo-alert"]').parent('li').delay(7000).fadeOut();
        
        removedItems += 1;
               
      }
      
      var cartItemsLength = $cartItems.length;
                
      if ( cartItemsLength === removedItems ) {
          
        $('.cart-items-body').append(emptyCartAlert);
                
          
      } else {
          
      }
      
                  
      $subTotal.text('$' + getSubTotal());

      $subTotal.addClass('pulse').on(animationEnd, function(){
        
        $subTotal.removeClass('pulse');
          
      });
      
    });
           
  });  
  
  $('.cart-controls').find('.btn-primary').on('click', function() {
    
    $('.cart').addClass('is-hidden');
    $('#login').addClass('is-added').removeClass('is-hidden');
    
  });
    
  $('#login').find('.btn').on('click', function(e){
    
    e.preventDefault();
    $('#login').addClass('is-hidden');
    $('#checkout').addClass('is-added').removeClass('is-hidden');
    
  });
  
  var validateForms = function(){
    
    var isValid = true,
        $formParent = $(this).closest('section');
    
    $formParent.find('input').each(function(){
     
      if ( !$(this).val() ) {
       
        isValid = false;
        $(this).closest('.field-wrap').addClass('error');
        
      }
      
    });
    
    if ( isValid ) {
      
      $('.progress-step.is-active').next('.progress-step').addClass('is-active');
      
      if ( $formParent.hasClass('payment-info') ) {
        
        $('#checkout').addClass('is-hidden');
        $('#checkout-receipt').addClass('is-added').on(animationEnd, function(){
          
          $(this).removeClass('is-added');
        
        }).removeClass('is-hidden');
        
      } else {
        
        $formParent.addClass('is-hidden');
        $formParent.next('section').removeClass('is-hidden').addClass('is-added').on(animationEnd, function(){
          
          $(this).removeClass('is-added');
        
        });
        
      }
      return false;
      
    } else {
      
      $formParent.addClass('error');
      return false;
      
    }
    
  };
  
  $('#step1, #step2, #step3').find('.btn-primary').on('click', validateForms);
  
  $('#step2, #step3').find('.btn-secondary').on('click', function(e){
    
    e.preventDefault();

    $formParent = $(this).closest('section');

    $formParent.removeClass('is-added').addClass('is-hidden');
    $formParent.prev('section').addClass('is-added').on(animationEnd, function(){
      
      $(this).removeClass('is-added');
      
    }).removeClass('is-hidden');
    
    $('.progress-step.is-active').last('.is-active').removeClass('is-active');
    
  });
  
  
  var $nlSignupBody = $('.nl-signup-body');

  
  $('#nl-signup').on('click', function(e){
    
    e.preventDefault();
    $nlSignupBody.empty().append('<div class="is-added">Good choice! Be sure to lookout for our next newsletter on {{ date }}. You won\'t regret it.</div>');
    $('.nl-signup').startDecay();
    
  });
  
  $('#nl-noThanks').on('click', function(e){
    
    e.preventDefault();
    $nlSignupBody.empty().append('<div class="is-added">Too bad, please check us out in the future!</div>');
    $('.nl-signup').startDecay();
    
  });
  
  
    
});

  
$.fn.startDecay = function(){

  parentContainer = this;
  
  parentContainer.css('position', 'relative').append('<div class="decay-progress"></div>').delay(7000).fadeOut(500);
      
  return false;

};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://codepen.io/aaronbarker/pen/tIprm.js
  3. //cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.1.47/jquery.form-validator.min.js