From 96605198ce0acfdaa3203631e3fd7ab2bdeb2067 Mon Sep 17 00:00:00 2001
From: SethTrowbridge <seth111@gmail.com>
Date: Sun, 10 Oct 2021 22:22:55 -0400
Subject: [PATCH] uploaded edits

---
 index.html | 1163 +++++++++++++++++++++++++++++-----------------------
 1 file changed, 648 insertions(+), 515 deletions(-)
diff --git a/index.html b/index.html
index 4f2de7c..32a08d7 100644
--- a/index.html
+++ b/index.html
@@ -1,171 +1,183 @@
 <!DOCTYPE html>
 <html>
 <head>
-
-    <!-- blocks -->
+    <meta name="viewport" content="initial-scale=1"/>
+    
+    <!-- layout -->
     <style>
-        .block
-        {
-            position:relative;
-            display: flex;
-            align-items: flex-start;
-
-            margin: 0;
-            padding: 0;
-            border: 0;
-        }
-        .col--empty  { box-sizing:border-box; border:1px solid #f1f1ee; }
-        .col--yellow { box-sizing:border-box; border:1px solid #f7f3de; background:#f7f3de; }
-        .col--warm   { box-sizing:border-box; border:1px solid #f1f1ee; background:#F8F8F6; }
-        .col--cool   { box-sizing:border-box; border:1px solid #ccd7de; background:#e6ebee; }
-        .col--gray   { box-sizing:border-box; border:1px solid #E1DFDF; background:#F8F8F6; }
-        .col--drab   { box-sizing:border-box; border:1px solid #DBDCD4; background:#F1F1EE; }
-        .col--green  { box-sizing:border-box; border:1px solid #5E7D65; background:#5E7D65; }
-        .col--inset  { box-sizing:border-box; border:1px solid #DBDCD4; box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.1); }
-    </style>
-
-    <!-- form controls -->
-    <style>
-
-        input[type='radio']
-        {
-            appearance: none;
-            display:block;
-            position:relative;
-            margin:0;
-            padding:0;
-            border:0;
-            width:0;
-            height:0;
-        }
-        input[type='radio'] + * label
-        {
-            position: relative;
-            padding-left:50px;
-        }
-        input[type='radio'] + * label::before, input[type='radio'] + * label::after 
-        {
-            content: " ";
-            display: block;
-            position: absolute;
-            top: 10px;
-            left: 10px;
-            width: 17px;
-            height: 17px;
-            border: 2px solid #D2D2D1;
-            border-radius: 20px;
-        }
-        input[type='radio']:checked + * label::before
-        {
-            border:2px solid #1565C0;
-        }
-        input[type='radio'] + * label::after
-        {
-            background:#1565C0;
-            border:2px solid #1565C0;
-            opacity:0;
-            transform:scale(0);
-            transition: opacity 0.4s, transform 0.4s;
-        }
-        input[type='radio']:checked + * label::after
-        {
-            opacity:1;
-            transform:scale(0.65);
-        } 
-        input[type='radio']:checked + *
-        {
-            background: #F8F8F6;
-        } 
-
-
-        input[type='checkbox']
-        {
-            appearance: none;
-            display:block;
-            position: relative;
-            margin:0;
-            padding:0;
-            border:0;
-            width:0;
-            height:0;
-        }
-        input[type='checkbox'] + label
-        {
-            padding-left:30px;
-        }
-        input[type='checkbox']::before
-        {
-            content:" ";
-            display:block;
-            box-sizing: border-box;
-            width:22px;
-            height:22px;
-            border:2px solid #aaa;
-            border-radius:3px;
-            background:#ccc;
-        }
-        input[type='checkbox']:checked::before
-        {
-            border:2px solid #0A58B2;
-            background:#1565C0;
-        }
-        input[type='checkbox']::after
-        {
-            content: " ";
-            display: block;
-            position: absolute;
-            width: 10px;
-            height: 5px;
-            border-bottom: 3px solid #fff;
-            border-left: 3px solid #fff;
-            transform: rotate(-45deg);
-            left: 5px;
-            top: 10px;
-            opacity:0;
-            transition:opacity 0.4s, top 0.4s;
-        }
-        input[type='checkbox']:checked::after
-        {
-            opacity:1;
-            top: 5px;
-        }
-
-
-        select
-        {
-            appearance: none;
-            padding-left:20px;
-            padding-right:30px;
-            background:url();
-        }
-
-
         /*
-        input[type='text'], input[type='number'], input[type='email'], select
-        {
-            position:relative;
-            box-sizing: border-box;
-            margin:0;
-            padding:0px 13px;
-            border: 1px solid #DBDCD4;
+        layouts provide generic flexbox options.
+        They can float elements, align them to the sides, or do basic columns.
 
-            appearance: none;
-            border-radius: 4px;
-            box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.1);
-
-            color:#000000;
-            font-weight:500;
-            font-size:16px;
-            line-height:44px;
-        }
-        select
-        {
-            padding-right:50px;
-            background:url();
-        }
         */
+        .layout{ display:flex; gap:0px 30px; }
+        .layout--tiles { flex-wrap: wrap; justify-content: flex-start; }
+        .layout--sides { flex-wrap: wrap; justify-content: space-between; }
+        .layout--sides > * { width:40%; }
+        .layout--sides > *:nth-child(even){text-align:right;}
+        .layout--split { flex-direction: row; gap: 30px 30px;}
+        .layout__locked { width:100%; max-width:265px; }
+        .layout__locked--small { max-width:135px; }
+        .layout__spread { flex-grow:1;}
+        @media(max-width:768px)
+        {
+            .layout--split{ flex-direction:column; }
+        }
     </style>
 
+    <!-- region -->
+    <style>
+        /*
+        Region blocks are the numerous (usually) bordered "chunks" in the layout.
+        This is the most complex block because it needs to take on many forms.
+        regions can have Icon, Main, Auxillary, and Fill elements.
+
+        - Icon:
+        When the Region is acting as a checkbox or radio control, the input should be the Icon and is used to override the OS display of the control
+
+        - Main:
+        The Main element has even padding, and when acting as a form field, the <label> should be the Main. In these cases,
+        the contents of the Main should be largely text-based and not contain other actions. 
+
+        - Fill:
+        Regions have the added option of a javascript-less active state.
+        This is done with combinatorial selectors ("+" and "~") provided the Icon element precedes the Fill element,
+        which will color the Region background when the Icon is :checked
+
+        - Auxillary:
+        The Auxillary element is designed to have a different hit area from the sometimes-interactive Main and Icon elements,
+        letting the Region be split into two buttons when added to a Region acting as a form control.
+
+        */
+        .region
+        {
+            display:flex;
+            position:relative;
+            box-sizing: border-box;
+            border:1px solid #F1F1EE;
+            border-radius:4px;
+            margin-top:24px;
+            overflow:hidden;
+        }
+        .region--borderless { border:none; }
+        .region--vertical  { flex-direction: column; }
+        .region--vertical > .region__aux{ border-top:1px solid #f1f1ee; background: #f8f8f6; }
+
+        .region--compress > .region__main, .region--compress > .region__icon, .region--compress > .region__aux {padding:0px 10px 0px 0px;}
+        .region--compress > .region__main {width:auto;}
+
+        .region__icon
+        {
+            z-index:100;
+            padding:20px;
+            padding-right:0;
+            margin: 0;
+            box-sizing: border-box;
+    
+            display:block;
+            appearance: none;
+        }
+            .region__icon::before, .region__icon::after
+            {
+                content:" ";
+                display:inline-block;
+                width:20px;
+                height:20px;
+                box-sizing: border-box;
+                border:2px solid #D2D2D1;
+                border-radius: 50px;
+            }
+            .region__icon:checked::before
+            {
+                border-color:#1565C0;
+            }
+            .region__icon::after
+            {
+                margin-left:-20px;
+                background-color: #1565C0;
+                border-color: #1565C0;
+                transform:scale(0);
+                transition: transform 0.4s;
+            }
+            .region__icon:checked::after
+            {
+                transform:scale(0.7);
+            }
+
+
+            .region__icon--check::before
+            {
+                border-radius:4px;
+                background:#ddd;
+                transition:background 0.4s;
+            }
+            .region__icon--check::after
+            {
+                border-radius: 0;
+                border: none;
+                border-bottom: 4px solid white;
+                border-left: 2px solid white;
+                transform: translate(0px, 6px) rotate(-45deg) scale(0.5, 0.3);
+                background: none;
+                opacity:0;
+            }
+            .region__icon--check:checked::before
+            {
+                background:blue;
+            }
+            .region__icon--check:checked::after
+            {
+                opacity:1;
+                transform: translate(0px, -3px) rotate(-45deg) scale(0.5, 0.3);
+            }
+    
+    
+        .region__fill
+        {
+            position:absolute;
+            top:0%;
+            left:0%;
+            width:0%;
+            height:110%;
+            z-index:1;
+            background: #F8F8F6;
+            transition:width 0.4s;
+        }
+            .region__icon:checked ~ .region__fill, .region__icon:hover ~ .region__fill, .region__main:hover ~ .region__fill
+            {
+                width:110%;
+            }
+    
+        .region__main
+        {
+            z-index:100;
+            padding:20px;
+            box-sizing: border-box;
+    
+            width:100%;
+        }
+
+        .region__aux
+        {
+            z-index:100;
+            padding:20px;
+            box-sizing: border-box;
+        }
+    
+        @media(max-width:500px)
+        {
+            .region{ flex-direction: column; }
+            .region .region__icon{ padding:10px 10px 0px 10px; }
+            .region .region__main{ padding:10px; }
+            .region .region__aux { padding:0px 10px 10px 10px; text-align:right; }
+
+            .region--compress{ flex-direction: row; }
+            .region--vertical > .region__aux{ padding:10px; text-align:center; }
+        }
+
+
+    </style>
+    
     <!-- progress bar -->
     <style>
         .progress
@@ -173,7 +185,7 @@
             position:relative;
             display:block;
             margin:0;
-            padding:0;
+            padding:12px 0 0 0;
             border:0;
             font-size:0;
         }
@@ -193,15 +205,18 @@
         {
             background:#5E7D65;
         }
-        .progress > *
+        .progress__stage
         {
-            position:relative;
+            position:static;
             display:inline-block;
             width:20%;
-            padding:30px 0 0 0;
-            margin:6px 0 0 0;
+            padding:18px 0 0 0;
+            margin:0;
             list-style-type: none;
+            vertical-align: top;
             font-size:13px;
+            font-family: 'Nunito Sans';
+            font-size:16px;
             text-align:center;
         }
 
@@ -210,444 +225,562 @@
         .progress--stage-3::after{ width:50%;  }
         .progress--stage-4::after{ width:70%;  }
         .progress--stage-5::after{ width:100%; }
-        .progress--stage-1 > *:nth-child(1)::before, .progress--stage-2 > *:nth-child(2)::before, .progress--stage-3 > *:nth-child(3)::before, .progress--stage-4 > *:nth-child(4)::before, .progress--stage-5 > *:nth-child(5)::before 
+
+        .progress--stage-1 .progress__stage:nth-child(1)::before,
+        .progress--stage-2 .progress__stage:nth-child(2)::before,
+        .progress--stage-3 .progress__stage:nth-child(3)::before,
+        .progress--stage-4 .progress__stage:nth-child(4)::before,
+        .progress--stage-5 .progress__stage:nth-child(5)::before 
         {
             content:" ";
             display: block;
             position:absolute;
-            top:-18px;
-            left:50%;
+            top:-13px;
              width:36px;
             height:36px;
             border-radius:50px;
             background:#5E7D65;
             transform:translateX(-50%);
         }
-        .progress--stage-5 > *:nth-child(5)::before
+        .progress--stage-1 .progress__stage:nth-child(1)::before{ left:10%;  }
+        .progress--stage-2 .progress__stage:nth-child(2)::before{ left:30%;  }
+        .progress--stage-3 .progress__stage:nth-child(3)::before{ left:50%;  }
+        .progress--stage-4 .progress__stage:nth-child(4)::before{ left:70%;  }
+        .progress--stage-5 .progress__stage:nth-child(5)::before{ left:100%; }
+
+        .progress--stage-5 .progress__stage:nth-child(5)::before
         {
             left:auto;
             right:0;
             transform:none;
         }
-        .progress--stage-1 > *:nth-child(1), .progress--stage-2 > *:nth-child(2), .progress--stage-3 > *:nth-child(3), .progress--stage-4 > *:nth-child(4), .progress--stage-5 > *:nth-child(5) 
+
+        @media(max-width:512px)
+        {
+            .progress__stage{ width:100%; display:none; }
+        }
+        .progress--stage-1 .progress__stage:nth-child(1),
+        .progress--stage-2 .progress__stage:nth-child(2),
+        .progress--stage-3 .progress__stage:nth-child(3),
+        .progress--stage-4 .progress__stage:nth-child(4),
+        .progress--stage-5 .progress__stage:nth-child(5) 
         {
             font-weight:900;
+            display:inline-block;
+        }
+
+        .progress--stage-2 .progress__stage:nth-child(1),
+        .progress--stage-3 .progress__stage:nth-child(1),
+        .progress--stage-3 .progress__stage:nth-child(2),
+        .progress--stage-4 .progress__stage:nth-child(1),
+        .progress--stage-4 .progress__stage:nth-child(2),
+        .progress--stage-4 .progress__stage:nth-child(3),
+        .progress--stage-5 .progress__stage:nth-child(1),
+        .progress--stage-5 .progress__stage:nth-child(2),
+        .progress--stage-5 .progress__stage:nth-child(3),
+        .progress--stage-5 .progress__stage:nth-child(4)
+        {
+            color:#564E4E;
+            font-weight:600;
+        }
+
+
+    </style>
+
+    <!-- giving buttons-->
+    <style>
+        .giving
+        {
+            display:flex;
+            flex-wrap: wrap;
+        }
+        .giving__label, .giving__input, .giving__button
+        {   
+            position:relative;
+            height:44px;
+            padding: 0 15px 0 15px;
+            box-sizing: border-box;
+            margin: 0;
+            border: 0;
+            border-radius: 0;
+            line-height:44px;
+            font-size: 14px;
+            font-family:'Nunito Sans';
+            vertical-align:top;
+        }
+
+        .giving__label
+        {
+            border: 1px solid #DBDCD4;
+            border-top-left-radius: 4px;
+            border-bottom-left-radius: 4px;
+
+            background: #F1F1EE;
+
+            color:black;
+            font-weight:900;
+            text-align:center;
+        }
+        .giving__input
+        {
+            max-width:150px;
+            border: 1px solid #DBDCD4;
+            border-left:none;
+            background: white;
+            color: black;
+            font-weight: lighter;
+        }
+        .giving__button
+        {
+            color: white;
+            font-weight: 900; 
+            border-right: 1px solid #4B6451;
+            background: #5E7D65;
+        }
+        .giving__button[data-active='true']{opacity:0.5;}
+        .giving__button:last-child
+        {
+            border-top-right-radius: 4px;
+            border-bottom-right-radius: 4px;
+            border-right:none;
+        }
+        @media(max-width:512px)
+        {
+            .giving__label{ border-bottom-left-radius: 0px; }
+            .giving__input{ flex-grow:1; min-width:75%; max-width:100%; border-top-right-radius: 4px; }
+            .giving__input + .giving__button{ border-bottom-left-radius: 4px; }
+            .giving__button{ width:25%; }
+            .giving__button:last-child{ border-top-right-radius: 0px; }
         }
     </style>
 
-
-    <!-- atomic text -->
+    <!-- element override blocks -->
     <style>
-        
-        @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;600;900&display=swap');
-        @import url('https://fonts.googleapis.com/css2?family=Sanchez&display=swap');
+        .el-h2     { margin:72px 0 0 0;  color:#2b2727;  font:900 24px/28px 'Nunito Sans', sans-serif;  }
+        .el-h3     { margin:45px 0 0 0;  color:#2b2727;  font:900 16px/24px 'Nunito Sans', sans-serif;  text-transform: uppercase; }
+        .el-h4     { margin:0 0 0 0;     color:#4B6451;  font:500 21px/32px 'Sanchez', monospace;       }
+        .el-label  { margin:24px 0 0 0;  color:#2b2727;  font:600 16px/24px 'Nunito Sans', sans-serif;  display:block; }
+        .el-a      { margin:0 0 0 0;     color:#4B6451;  font:500 16px/24px 'Nunito Sans', sans-serif;  text-decoration:underline; }
+        .el-p      { margin:0 0 0 0;     color:#2b2727;  font:500 16px/24px 'Nunito Sans', sans-serif;  }
 
-        .txt--fnt-slab{ font-family: "Sanchez"; }
-        .txt--fnt-sans{ font-family: "Nunito Sans"; }
-        .txt--size-micro{ font-size: 12px; line-height:24px; }
-        .txt--size-small{ font-size: 14px; line-height:24px; }
-        .txt--size-copy{ font-size:16px; line-height:24px; }
-        .txt--size-h3{ font-size:20px; line-height:32px; }
-        .txt--size-h2{ font-size:24px; line-height:28px; }
-        .txt--size-h1{ font-size:32px; line-height:48px; }
-        .txt--green-darken-01{ color: #4B6451; }
-        .txt--col-white{ color:#ffffff; }
+        .el-button
+        {
+            display:inline-block;
+            position:relative;
+            z-index:10;
+            padding:5px 15px 5px 15px;
+            border-radius:4px;
+            border:none;
+            background: #5E7D65;
+            cursor:pointer;
+            color:#ffffff;
+            font-family:'Nunito Sans';
+            font-size:14px;
+            font-weight:600;
+            line-height:24px;
+            transition:all 0.4s;
+        }
+        .el-button--wide { width:100%; }
+        .el-button--tall { padding:10px 30px 10px 30px; font-size:16px; }
+        .el-button--gray { background:#F8F8F6; border:1px solid #E1DFDF; color:#000000 }
+        .el-button:hover { box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3); }
 
-        .txt--wgt-light { font-weight:100; }
-        .txt--wgt-normal{ font-weight:300; }
-        .txt--wgt-bold  { font-weight:600; }
-        .txt--wgt-black { font-weight:900; }
+        .el-input
+        {
+            display:block;
+            width:100%;
+            appearance: none;
+            box-sizing:border-box;
+            border:1px solid #DBDCD4;
+            padding:10px 0px 10px 20px;
+            border-radius:4px;
 
-        .txt--uppercase{ text-transform: uppercase; }
-        .txt--center{ text-align:center; }
-        .txt--tall{ line-height: 44px; }
-        .txt--short{ line-height: 30px; }
+            box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.1);
 
-        .gap--lg { margin:72px 0 0 0; }
-        .gap--md { margin:47px 0 0 0; }
-        .gap--sm { margin:24px 0 0 0; }
-        .gap--xs { margin:12px 0 0 0; }
-        .gap--no { margin:0; }
-        .gap--md-right { margin-right:42px; }
-        .gap--sm-right { margin-right:20px; }
-        
-        .pad--xs-h { padding-left: 10px; padding-right: 10px; }
-        .pad--sm-h { padding-left: 16px; padding-right: 16px; }
-        .pad--md-h { padding-left: 20px; padding-right: 20px; }
-        .pad--lg-h { padding-left: 24px; padding-right: 24px; }
-        .pad--xl-h { padding-left: 36px; padding-right: 36px; }
-        .pad--xs-v { padding-top: 10px; padding-bottom: 10px; }
-        .pad--sm-v { padding-top: 16px; padding-bottom: 16px; }
-        .pad--md-v { padding-top: 20px; padding-bottom: 20px; }
-        .pad--lg-v { padding-top: 24px; padding-bottom: 24px; }
-        
-
-        .dsp--block{ display:block; }
-        .dsp--inline-block{ display:inline-block; vertical-align: top; }
-        .dsp--middle { display:inline-block; vertical-align: middle; }
-        .dsp--wide{ width:100%; }
-        .dsp--wide-1-3{ width:33%; }
-
-        .dsp--square{ border-radius:0; }
-        .dsp--round{ border-radius:4px; }
-        .dsp--round-left{ border-top-left-radius:4px; border-bottom-left-radius:4px; }
-        .dsp--round-right{ border-top-right-radius:4px; border-bottom-right-radius:4px; }
-
-        .dsp--emboss{ border-left:1px solid rgba(0, 0, 0, 0.5);}
-        .dsp--plus { position: relative; padding-left:1em; }
-        .dsp--plus::before{ content:"+"; position:absolute; left:0;}
-
-        .dsp--float-left{ float:left; }
-        .dsp--float-right{ float:right; }
-        .dsp--float-clear{ float:clear; }
+            color: #000000;
+            font-size:16px;
+            line-height:24px;
+        }
+        .el-input--select
+        {
+            padding-right:30px;
+            background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath d='M12 0H0L6 7L12 0Z' fill='%23A7A0A0' /%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right 20px top 50%;
+        }
 
+        .el-hr{ display:block; border:none; border-top:1px solid #E1DFDF; margin:12px 0;}
+        .el-hr--short{ margin:6px 0 }
+        .el-hr--tall { margin:35px 0 }
+        .el-image  { display:block; width:100%; height:auto; }
     </style>
 
-    <!-- atomic coloration -->
+    <!-- universal modifiers -->
     <style>
 
+        @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700;900&family=Sanchez&display=swap');
+
+        .txt--bold  { font-weight:600; }  .txt--small { font-size:14px; }  .txt--center { text-align:center; }  .txt--plain{ text-decoration:none;      }
+        .txt--heavy { font-weight:900; }  .txt--micro { font-size:12px; }  .txt--right  { text-align:right;  }  .txt--under{ text-decoration:underline; }
+
+        .txt--green-00{ color:#4B6451; }
+        .txt--green-01{ color:#564E4E; }
+        .txt--azure-00{ color:#002235; }
+
+        .gap--xl { margin-top:72px; }
+        .gap--lg { margin-top:45px; }
+        .gap--md { margin-top:24px; }
+        .gap--sm { margin-top:12px; }
+        .gap--xs { margin-top:6px;  }
+        .gap--no { margin-top:0px;  }
+
+        .lap--over { margin-bottom:-10px; z-index:110; }
+        .lap--tuck { margin-top:-10px;    z-index:90;  }
+
+        .fill--yell { background:#f7f3de; border:2px solid #f7f3de; display:inline-block; }
+        .fill--warm { background:#F8F8F6; border:1px solid #F1F1EE; }
+        .fill--cool { background:#E6EBEE; border:1px solid #CCD7DE; }
+
     </style>
 
 </head>
-<body style="max-width:900px; margin:0 auto;" class="txt--fnt-sans">
+<body style="max-width:800px; margin:0 auto; box-sizing: border-box; padding:10px;">
 
-    <h1 class="txt--fnt-slab txt--size-h1 txt--wgt-normal gap--sm">Checkout</h1>
+    <ol class="progress progress--stage-2 gap--sm">
+        <li class="progress__stage">Shopping Cart</li>
+        <li class="progress__stage">Payment Options</li>
+        <li class="progress__stage">Shipping Method</li>
+        <li class="progress__stage">Confirmation</li>
+        <li class="progress__stage">Print Receipt</li>
+    </ol>
 
-    <ul class="progress progress--stage-2 gap--sm">
-        <li class="txt--wgt-normal txt--size-copy">Shopping Cart</li>
-        <li class="txt--wgt-normal txt--size-copy">Payment Options</li>
-        <li class="txt--wgt-normal txt--size-copy">Shipping Method</li>
-        <li class="txt--wgt-normal txt--size-copy">Confirmation</li>
-        <li class="txt--wgt-normal txt--size-copy">Print Receipt</li>
-    </ul>
-
-    <p class="txt--size-copy gap--lg"><strong>*</strong> Indicates required fields</p>
-
-    <div class="txt--size-h2 txt--wgt-black gap--sm">Payment Information</div>
-    <div style="display:flex;">
-
-        <input id="check-1" type="radio" name="slot-1" value="option-1"/>
-        <div class="block col--empty dsp--round col--warm-active gap--sm gap--md-right">
-            <label class="pad--sm-h pad--xs-v txt--wgt-bold txt--size-copy" for="check-1">
-                Credit Card<br>
-                <img class="col--empty dsp--round dsp--middle gap--xs gap--sm-right" src="icon-pay-visa.svg"/>
-                <img class="col--empty dsp--round dsp--middle gap--xs gap--sm-right" src="icon-pay-mastercard.svg"/>
-                <img class="col--empty dsp--round dsp--middle gap--xs gap--sm-right" src="icon-pay-discover.svg"/>
-                <img class="col--empty dsp--round dsp--middle gap--xs" src="icon-pay-american-express.svg"/>
+    <h2 class="el-h2">Payment Information</h2>
+    <div class="layout layout--tiles">
+        <div class="region">
+            <input   class="region__icon" type="radio" name="pay" value="cc" id="pay-cc"/>
+            <label   class="region__main" for="pay-cc">
+                <span class="el-p  | txt--bold">Credit Card</span>
+                <span class="layout layout--tiles">
+                    <span style="width:35px; height:15px; background:red;"></span>
+                    <span style="width:35px; height:15px; background:red;"></span>
+                    <span style="width:35px; height:15px; background:red;"></span>
+                    <span style="width:35px; height:15px; background:red;"></span>
+                </span>
             </label>
+            <div     class="region__fill" ></div>
         </div>
-        
-        <input id="check-2" type="radio" name="slot-1" value="option-2"/>
-        <div class="block col--empty dsp--round gap--sm gap--md-right">
-            <label class="pad--sm-h pad--xs-v txt--wgt-bold txt--size-copy" for="check-2">
-                Paypal<br>
-                <img class="col--empty dsp--round dsp--middle gap--xs" src="icon-pay-paypal.svg"/>
+        <div class="region">
+            <input   class="region__icon" type="radio" name="pay" value="pp" id="pay-pp"/>
+            <label   class="region__main" for="pay-pp">
+                <span class="el-p  | txt--bold">Pay Pal</span>
+                <span class="layout layout--tiles">
+                    <span style="width:35px; height:15px; background:red;"></span>
+                </span>
             </label>
+            <div     class="region__fill" ></div>
         </div>
-
-        <input id="check-3" type="radio" name="slot-1" value="option-3"/>
-        <div class="block col--empty dsp--round gap--sm gap--sm-right">
-            <label class="pad--sm-h pad--xs-v txt--wgt-bold txt--size-copy" for="check-3">
-                Bank Transfer<br>
-                <img class="col--empty dsp--round dsp--middle gap--xs" src="icon-pay-transfer.svg"/>
+        <div class="region">
+            <input   class="region__icon" type="radio" name="pay" value="pp" id="pay-bt"/>
+            <label   class="region__main" for="pay-bt">
+                <span class="el-p  | txt--bold">Bank Transfer</span>
+                <span class="layout layout--tiles">
+                    <span style="width:35px; height:15px; background:red;"></span>
+                </span>
             </label>
+            <div     class="region__fill" ></div>
         </div>
-
     </div>
 
+    <div class="gap--lg">payconnex</div>
 
-    <div class="txt--size-copy txt--wgt-black txt--uppercase gap--md">Billing Information</div>
-    <div class="block col--empty dsp--round gap--xs pad--md-h pad--xs-v">
-        <div class="dsp--wide">
-            <div class="txt--size-copy txt--wgt-bold">Shell Long TP Check</div>
-            <div style="display:flex; gap:130px;">
-                <div class="txt--size-copy txt--wgt-normal">
+    <h3 class="el-h3">Billing Information</h3>
+    <div class="region  | gap--sm">
+        <div class="region__main">
+            <h3 class="el-p  | txt--bold">Addresses</h3>
+            <div class="layout layout--split">
+                <p class="layout__locked el-p">
                     8759 Cardinal Court<br>
-                    Windmere, FL 34786<br>
+                    Windermere, FL 34786<br>
                     US
-                </div>
-                <div class="txt--size-copy txt--wgt-normal">
-                    <img class="dsp--middle" src="icon-wire-phone.svg"/> 8759 Cardinal Court<br>
-                    <img class="dsp--middle" src="icon-wire-envelope.svg"/> Windmere, FL 34786
-                </div>
+                </p>
+                <p class="layout__filled el-p">
+                    8759 Cardinal Court<br>
+                    Windermere, FL 34786<br>
+                    US
+                </p>
             </div>
         </div>
-        <a class="txt--size-small txt--wgt-bold txt--green-darken-01" href="">Change</a>
+        <div class="region__aux">
+            <a class="el-a" href="#">Change</a>
+        </div>
     </div>
 
 
-    <div class="txt--size-h2 txt--wgt-black gap--lg">Shipping Information</div>
-    <div class="col--empty gap--sm dsp--round">
+    <h2 class="el-h2">Shipping Information</h2>
+    <div class="region">
+        <div class="region__main">
+            <p class="el-p  | txt--bold">Same as billing information</p>
+        </div>
+        <div class="region__aux">
+            <a class="el-a" href="">Change</a>
+        </div>
+    </div>
 
-        <div class="pad--md-h pad--sm-v">
 
-            <div class="txt--size-copy txt--wgt-bold">Available Addresses</div>
-
-            <input type="radio" name="ship" value="ship-1" id="ship-1" />
-            <div class="block dsp--round gap--xs">
-                <label for="ship-1" class="dsp--wide pad--md-h pad--xs-v">
-                    <div class="txt--size-copy txt--wgt-bold">Shell Long TP Check</div>
-                    <div class="txt--size-copy txt--wgt-normal">
+    <h2 class="el-h2">Shipping Information</h2>
+    <div class="region region--vertical">
+        <div class="region__main">
+            <h3 class="el-p  | txt--bold">Available Addresses</h3>
+            <div class="region region--borderless">
+                <input   class="region__icon" type="radio" name="add" value="1" id="add-1"/>
+                <div     class="region__fill" ></div>
+                <label   class="region__main" for="add-1">
+                    <span class="el-p  | txt--bold">Shell Long TP Check</span>
+                    <span class="el-p  | txt--small txt--green-00">(billing address)</span><br>
+                    <span class="el-p">
                         8759 Cardinal Court<br>
-                        Windmere, FL 34786<br>
-                        US
-                    </div>
+                        Windermere, FL 34786<br>
+                    </span>
+                    <span class="el-p  | txt--small txt--green-00">Default Shipping Address</span>
                 </label>
-                <a class="txt--size-small txt--wgt-bold txt--green-darken-01 pad--md-h pad--xs-v" href="">Change</a>
+                <div     class="region__aux"><a class="el-a" href="#change">Change</a></div>
             </div>
-    
-            <input type="radio" name="ship" value="ship-2" id="ship-2" />
-            <div class="block dsp--round gap--xs">
-                <label for="ship-2" class="dsp--wide pad--md-h pad--xs-v">
-                    <div class="txt--size-copy txt--wgt-bold">Shell Long TP Check</div>
-                    <div class="txt--size-copy txt--wgt-normal">
+            <div class="region region--borderless"">
+                <input   class="region__icon" type="radio" name="add" value="2" id="add-2"/>
+                <div     class="region__fill" ></div>
+                <label   class="region__main" for="add-2">
+                    <span class="el-p  | txt--bold">Shell Long TP Check</span><br>
+                    <span class="el-p">
                         8759 Cardinal Court<br>
-                        Windmere, FL 34786<br>
-                        US
-                    </div>
+                        Windermere, FL 34786<br>
+                    </span>
                 </label>
-                <a class="txt--size-small txt--wgt-bold txt--green-darken-01 pad--md-h pad--xs-v" href="">Change</a>
+                <div     class="region__aux"><a class="el-a" href="#change">Change</a></div>
             </div>
-            
-            <div class="pad--xl-h gap--xs">
-                <a class="dsp--plus txt--green-darken-01 txt--size-small txt--wgt-bold" href="">Add</a>
+            <div class="region region--borderless">
+                <div class="region__main">
+                    <a href="#modal" class="txt--plain">
+                        <span class="el-a  | txt--plain"> + </span>
+                        <span class="el-a">Add new address</span></a>
+                </div>
+            </div>
+        </div>
+        <div class="region__aux">
+            <button class="el-button">Use this Address</button>
+        </div>
+    </div>
+
+    <div style="padding:50px;">
+        <div class="layout">
+            <div class="layout__spread">
+                <label class="el-label">First Name</label>
+                <input class="el-input" type="text"/>
+            </div>
+            <div class="layout__spread">
+                <label class="el-label">Last Name</label>
+                <input class="el-input" type="text"/>
             </div>
-            
         </div>
 
-        
-        <div class="col--warm pad--xs-v pad--xl-h">
-            <button class="dsp--round col--green pad--md-h txt--size-small txt--wgt-bold txt--col-white txt--short">Use this address</button>
+        <label class="el-label">Street Address</label>
+        <input class="el-input" type="text"/>
+
+        <div class="layout">
+            <div class="layout__spread">
+                <label class="el-label">City</label>
+                <input class="el-input" type="text"/>
+            </div>
+            <div class="layout__spread">
+                <label class="el-label">State</label>
+                <select class="el-input el-input--select">
+                    <option>1</option>
+                </select>
+            </div>
+            <div class="layout__spread">
+                <label class="el-label">Zip/Postal</label>
+                <input class="el-input" type="text"/>
+            </div>
+        </div>
+
+        <label class="el-label">Country</label>
+        <select class="el-input el-input--select">
+            <option>1</option>
+        </select>
+
+        <div class="region region--compress region--borderless">
+            <input class="region__icon region__icon--check" type="checkbox"/>
+            <label class="region__main">
+                <span class="el-p  | txt--bold">Default Shipping address</span>
+            </label>
+        </div>
+
+        <hr class="el-hr el-hr--tall">
+
+        <div class="el-p  | txt--right">
+            <button class="el-button el-button--gray el-button--tall">Cancel</button>
+            <button class="el-button el-button--green el-button--tall">Save Address</button>
         </div>
 
     </div>
 
-    <div class="txt--size-h2 txt--wgt-black gap--lg">Listening Information</div>
-    <label for="channel" class="txt--size-copy txt--wgt-bold gap--sm dsp--block">I primarily listen to Truth For Life with Alistair Begg on: </label>
-    <select id="channel" class="dsp--block dsp--round dsp--wide col--inset txt--tall txt--wgt-bold txt--size-copy">
-        <option>Please select option &hellip;</option>
+    <h2 class="el-h2">Listening Information</h2>
+    <label class="el-label  | gap--md">I primarily listen to Truth For Life with Alistair Begg on: </label>
+    <select class="el-input el-input--select">
+        <option>website</option>
+        <option>radio</option>
     </select>
-    <p class="gap--no">
-        <a class="txt--size-small txt--wgt-bold txt--green-darken-01" href="#">Don’t see your station? Click here.</a>
-        <a class="txt--size-small txt--wgt-bold txt--green-darken-01 dsp--float-right" href="#">Why do we require this information?</a>
-    </p>
-
-    <button class="dsp--wide dsp--round gap--lg col--green txt--size-copy txt--wgt-bold txt--col-white txt--tall">Continue Checkout</button>
-    <p class="txt--size-small txt--wgt-bold gap--sm">
-        Truth For Life needs the contact information you provide to contact you about promotions & services. You may unsubscribe from these communications at anytime. For info on how to unsubscribe and our privacy practices, visit <a class="txt--green-darken-01" href="">Privacy Policy</a>.
-    </p>
-
-
-
-    <div class="txt--size-h2 txt--wgt-black gap--lg">Will you add a donation to your order?</div>
-    <p class="txt--size-copy txt--wgt-normal gap--xs">
-        Truth For Life is entirely funded by the generous giving from people like you! Your added donation today helps make all of Truth For Life's online teaching free and books available for purchase at cost with free shipping. Thank you.
-    </p>
-    <div class="gap--xs" style="display:flex;">
-        <label  class="col--drab   dsp--square dsp--round-left dsp--inline-block  pad--sm-h  txt--size-small txt--tall txt--wgt-black               ">$</label>
-        <input  class="col--inset  dsp--square dsp--inline-block                  pad--sm-h  txt--size-small txt--tall txt--wgt-normal              " type="number"/>
-        <button class="col--green  dsp--square                                    pad--sm-h  txt--size-small txt--tall txt--wgt-black txt--col-white">$20 </button>
-        <button class="col--green  dsp--square dsp--emboss                        pad--sm-h  txt--size-small txt--tall txt--wgt-black txt--col-white">$30 </button>
-        <button class="col--green  dsp--square dsp--emboss                        pad--sm-h  txt--size-small txt--tall txt--wgt-black txt--col-white">$50 </button>
-        <button class="col--green  dsp--square dsp--round-right dsp--emboss       pad--sm-h  txt--size-small txt--tall txt--wgt-black txt--col-white">$100</button>
+    <div class="layout layout--sides  | gap--xs">
+        <a class="el-p  txt--link txt--small" href="#">Don’t see your station? Click here.</a>
+        <a class="el-p  txt--link txt--small" href="#">Why do we require this information?</a>
     </div>
 
-    <div class="txt--size-h2 txt--wgt-black gap--lg">Send you a copy? </div>
-    <p class="txt--size-copy txt--wgt-normal gap--xs">
+
+    <input class="el-button el-button--wide el-button--tall gap--xl" type="submit" value="Continue Checkout"/>
+    <p class="el-p  txt--bold  | gap--md">
+        Truth For Life needs the contact information you provide to contact you about promotions & services. You may unsubscribe from these communications at anytime. For info on how to unsubscribe and our privacy practices, visit <a class="txt--green-00 txt--plain" href="">Privacy Policy</a>.
+    </p>
+
+
+    <h2 class="el-h2">Will you add a donation to your order?</h2>
+    <p class="el-p  | gap--md">
+        Truth For Life is entirely funded by the generous giving from people like you! Your added donation today
+        helps make all of Truth For Life's online teaching free and books available for purchase at cost with
+        free shipping. <em>Thank you</em>.
+    </p>
+
+    <div class="giving  | gap--md">
+        <label  class="giving__label"for="amount">$</label>
+        <input  class="giving__input"id="amount" type="number" value="100"/>
+        <button class="giving__button">$20 </button>
+        <button class="giving__button">$30 </button>
+        <button class="giving__button">$50 </button>
+        <button class="giving__button">$100</button>
+    </div>
+    
+
+
+    <h2 class="el-h2">Send you a copy?</h2>
+    <p class="el-p  | gap--md">
         Would you like to receive a copy of our featured book? It's our way of saying thanks for your support.
     </p>
-    <div style="display:flex;">
-        <div>
-            <button class="col--gray dsp--round gap--xs pad--sm-h txt--short txt--wgt-bold"><img class="dsp--middle" src="icon-wire-magnify.svg"/> Learn More</button>
-            <img src="https://placekitten.com/150/200"/>
+    <div     class="layout layout--split  | gap--md">
+        <div class="layout__locked">
+            <div class="el-p  | txt--center">
+                <a   class="el-button el-button--gray lap--over">Look Inside</a>
+                <img class="el-image lap--tuck" src="https://placekitten.com/100/100"/>
+            </div>
         </div>
-        <div>
-            <p class="gap--xs txt--fnt-slab txt--green-darken-01 txt--size-h3">George Whitefield: God's Anointed Servant in the Great Revival of the Eighteenth Century</p>
-            <p class="gap--xs txt--green-darken-01 txt--size-copy">(fair market value $3.00)</p>
-
-            <input type="radio" name="donation" value="donation-ebook" id="donation-ebook"/>
-            <div class="dsp--inline-block">
-                <label for="donation-ebook" class="dsp--inline-block dsp--round col--active-warm pad--md-h pad--xs-v txt--wgt-bold">
-                    Ebook<br>
-                    <span class="txt--size-micro txt--green-darken-01">.ePub, .mobi, and .pdf</span>
-                </label>
-            </div>
-
-            <input type="radio" name="donation" value="donation-paperback" id="donation-paperback"/>
-            <div class="dsp--inline-block">
-                <label for="donation-paperback" class="dsp--inline-block dsp--round col--active-warm pad--md-h pad--xs-v txt--wgt-bold">
-                    Paperback<br>
-                    <span class="txt--size-micro txt--green-darken-01">Softcover, 224 pages</span>
-                </label>
-            </div>
-
-            <input type="radio" name="donation" value="donation-none" id="donation-none"/>
-            <div class="dsp--inline-block">
-                <label for="donation-none" class="dsp--inline-block dsp--round col--active-warm pad--md-h pad--xs-v txt--wgt-bold">
-                    No, thank you
-                </label>
-            </div>
-
-        </div>
-    </div>
-
-
-    <div class="txt--size-h2 txt--wgt-black gap--lg">Shipping Options</div>
-    <p class="txt--size-copy txt--wgt-normal gap--sm txt--wgt-bold">
-        Please choose your preferred shipping method.
-    </p>
-    <span class="col--yellow dsp--round txt--size-small txt--wgt-bold">You save <strong class="txt--wgt-black">$2.89</strong> by using USPS, Media Mail.</span>
-    <input type="radio" name="shipping" value="shipping-1" id="shipping-1"/>
-    <div class="gap--xs">
-        <label for="shipping-1" class="dsp--block pad--xs-v"><span class="txt--wgt-black">$0.00</span> <span class="txt--wgt-bold">USPS - Media Mail</span> <span class="txt--green-darken-01">(Delivery in 7-10 business days.)</span></label>
-    </div>
-    <input type="radio" name="shipping" value="shipping-2" id="shipping-2"/>
-    <div>
-        <label for="shipping-2" class="dsp--block pad--xs-v"><span class="txt--wgt-black">$37.23</span> <span class="txt--wgt-bold">USPS - Next Day Air</span> <span class="txt--green-darken-01">(Order by 11 am EST for next business day delivery. Weekend orders will be shipped on Monday for Tuesday delivery.)</span></label>
-    </div>
-
-    <button class="dsp--wide dsp--round gap--lg col--green txt--size-copy txt--wgt-bold txt--col-white txt--tall">Continue Checkout</button>
-
-
-    <div class="txt--size-h2 txt--wgt-black gap--lg">Review your Order</div>
-
-    <div class="txt--size-copy txt--wgt-black txt--uppercase gap--md">Billing Information</div>
-    <div class="block col--empty dsp--round gap--xs pad--md-h pad--xs-v">
-        <div class="dsp--wide">
-            <div class="txt--size-copy txt--wgt-bold">Shell Long TP Check</div>
-            <div style="display:flex; gap:130px;">
-                <div class="txt--size-copy txt--wgt-normal">
-                    8759 Cardinal Court<br>
-                    Windmere, FL 34786<br>
-                    US
+        <div class="layout__spread">
+            <h4 class="el-h4">George Whitefield: God's Anointed Servant in the Great Revival of the Eighteenth Century</h4>
+            <p  class="el-p  | txt--green-01 gap--sm">(fair market value $3.00)</p>
+            <div class="layout layout--tiles">
+                <div class="region region--borderless">
+                    <input class="region__icon" type="radio" name="prod" value="ebook" id="prod-ebook"/>
+                    <label class="region__main" for="prod-ebook">
+                        <span class="el-p  | txt--bold">eBook</span><br>
+                        <span class="el-p  | txt--micro txt--bold txt--green-01">Pub, mobi, and pdf</span>
+                    </label>
+                    <div   class="region__fill" ></div>
                 </div>
-                <div class="txt--size-copy txt--wgt-normal">
-                    <img class="dsp--middle" src="icon-wire-phone.svg"/> 8759 Cardinal Court<br>
-                    <img class="dsp--middle" src="icon-wire-envelope.svg"/> Windmere, FL 34786
+                <div class="region region--borderless">
+                    <input class="region__icon" type="radio" name="prod" value="paper" id="prod-paper"/>
+                    <label class="region__main" for="prod-paper">
+                        <span class="el-p  | txt--bold">Paperback</span><br>
+                        <span class="el-p  | txt--micro txt--bold txt--green-01">Softcover, 224 pages</span>
+                    </label>
+                    <div   class="region__fill" ></div>
+                </div>
+                <div class="region region--borderless">
+                    <input    class="region__icon" type="radio" name="prod" value="none" id="prod-none"/>
+                    <label    class="region__main" for="prod-none">
+                        <span class="el-p  | txt--bold">No, Thank you</span>
+                    </label>
+                    <div   class="region__fill" ></div>
                 </div>
             </div>
         </div>
-        <a class="txt--size-small txt--wgt-bold txt--green-darken-01" href="">Change</a>
     </div>
 
-    <div class="txt--size-copy txt--wgt-black txt--uppercase gap--md">Shipping Information</div>
-    <div class="block col--empty dsp--round gap--xs pad--md-h pad--xs-v">
-        <div class="dsp--wide txt--size-copy txt--wgt-bold">
-            Same as billing information
-        </div>
-        <a class="txt--size-small txt--wgt-bold txt--green-darken-01" href="">Change</a>
+
+    <h2 class="el-h2">Shipping Options</h2>
+    <p class="el-p  | txt--bold gap--md">Please choose your preferred shipping method.</p>
+    <span class="el-p  | txt--small txt--bold  fill--yell gap--sm">You save <strong class="el-p  | txt--heavy">$2.89</strong> by using USPS, Media Mail.</span>
+    <div class="region region--borderless region--compress">
+        <input class="region__icon" type="radio" name="ship" value="1" id="ship-1"/>
+        <label class="region__main" for="ship-1">
+            <span class="el-p  | txt--heavy">$0.00</span>
+            <span class="el-p  | txt--bold">USPS - Media Mail</span>
+            <span class="el-p  | txt--green-01">(Delivery in 7-10 business days.)</span>
+        </label>
+    </div>
+    <div class="region region--borderless region--compress">
+        <input class="region__icon" type="radio" name="ship" value="2" id="ship-2"/>
+        <label class="region__main" for="ship-2">
+            <span class="el-p  | txt--heavy">$0.00</span>
+            <span class="el-p  | txt--bold">USPS - Media Mail</span>
+            <span class="el-p  | txt--green-01">(Delivery in 7-10 business days.)</span>
+        </label>
+    </div>
+    <div class="region region--borderless region--compress">
+        <input class="region__icon" type="radio" name="ship" value="3" id="ship-3"/>
+        <label class="region__main" for="ship-3">
+            <span class="el-p  | txt--heavy">$0.00</span>
+            <span class="el-p  | txt--bold">USPS - Media Mail</span>
+            <span class="el-p  | txt--green-01">(Delivery in 7-10 business days.)</span>
+        </label>
     </div>
 
-    <div class="txt--size-copy txt--wgt-black txt--uppercase gap--md">Items and Shipping</div>
-    <div class="block col--empty dsp--round gap--xs pad--md-h pad--xs-v">
-        <div class="dsp--wide txt--size-copy txt--size-copy">
-            <img class="dsp--middle gap--sm-right" src="icon-wire-truck.svg"/> <span class="txt--wgt-black">$3.09</span> <span class="txt--wgt-bold">USPS - Media Mail</span> <span class="txt--green-darken-01">(Delivery 7-10 business days.)</span>
-        </div>
-        <a class="txt--size-small txt--wgt-bold txt--green-darken-01" href="">Change</a>
-    </div>
+    <input class="el-button el-button--wide el-button--tall  | gap--xl" type="submit" value="Continue Checkout"/>
 
-    <div style="display:flex;" class="dsp--round col--empty gap--sm pad--sm-h pad--lg-v">
-        <div class="pad--xs-h">
-            <img src="https://placekitten.com/200/200"/>
-        </div>
-        <div class="pad--xs-h">
-            <p class="gap--no txt--fnt-slab txt--green-darken-01 txt--size-h3">Donation</p>
-            <p class="gap--xs txt--green-darken-01 txt--size-copy">$100.00</p>
+    <h2 class="el-h2">Review Your Order</h2>
+    <h3 class="el-h3  | gap--md">Items and Shipping</h3>
+    <div class="region  | gap--sm">
+        <div class="region__main">
+            <span class="el-p  | txt--heavy">$3.09</span>
+            <span class="el-p  | txt--bold">USPS - Media Mail</span>
+            <span class="el-p  | txt--green-00">(Delivery in 7-10 business days)</span>
         </div>
     </div>
-
-    <div style="display:flex;" class="dsp--round col--empty gap--sm pad--sm-h pad--lg-v">
-        <div class="pad--xs-h">
-            <img src="https://placekitten.com/200/200"/>
-        </div>
-        <div class="pad--xs-h">
-            <p class="gap--no txt--fnt-slab txt--green-darken-01 txt--size-h3">George Whitefield: God's Anointed Servant in the Great Revival of the Eighteenth Century</p>
-            <p class="gap--no txt--green-darken-01 txt--size-small txt--wgt-black">Paperback</p>
-            <p class="gap--no txt--green-darken-01 txt--size-copy">$3.00</p>
-            <p class="gap--no txt--green-darken-01 txt--size-copy">Quantity: 2 ($6.00)</p>
-        </div>
-    </div>
-
-    <ul class="progress progress--stage-5 gap--lg">
-        <li class="txt--wgt-normal txt--size-copy">Shopping Cart</li>
-        <li class="txt--wgt-normal txt--size-copy">Payment Options</li>
-        <li class="txt--wgt-normal txt--size-copy">Shipping Method</li>
-        <li class="txt--wgt-normal txt--size-copy">Confirmation</li>
-        <li class="txt--wgt-normal txt--size-copy">Print Receipt</li>
-    </ul>
-
-    <h2 class="gap--md txt--size-h2 txt--fnt-slab txt--wgt-normal">Thank you for your order</h2>
-    <p class="gap--sm">
-        Your order <span class="txt--wgt-black">#00000001111</span> has been placed!
-    </p>
-    <p class="gap--sm">
-        We sent an email to <span class="txt--green-darken-01 txt--wgt-black">brian.p@email.com</span> with your order details and receipt. If the email hasn’t arrived within five minutes, please check your spam folder.
-    </p>
-    <button class="gap--sm dsp--round col--gray pad--md-h txt--short txt--wgt-bold">Print</button>
-
-    <div style="width:350px;" class="gap--md">
-
-        <div class="col--warm dsp--round gap--sm pad--sm-h pad--sm-v">
-            <div class="txt--wgt-black">Need Help?</div>
-            <p class="gap--xs">Contact Customer Service<br>(888-588-7884)</p>
-            <p class="gap--sm">
-                <a class="txt--green-darken-01" href="">Submit a Support Ticket</a>
-            </p>
-        </div>
-
-        <div class="col--empty dsp--round gap--sm pad--md-h pad--lg-v">
-            <div class="txt--uppercase txt--wgt-black">Order Summary</div>
-            <div class="gap--sm">
-                Items (3):          <span class="dsp--float-right">$107.00 </span><br>
-                Shipping & handling <span class="dsp--float-right">$3.09   </span><br>
-                                    <hr class="dsp--float-right dsp--block dsp--wide-1-3"><br>
-                Total before tax    <span class="dsp--float-right">$110.09 </span><br>
-                Tax                 <span class="dsp--float-right">$0.19   </span><br>
-            </div>
-            <hr class="gap--xs">
-            <p class="gap--xs txt--wgt-black">
-                Grand Total         <span class="dsp--float-right">$110.28</span>
-            </p>
-            <input type="checkbox" id="bool-1"/>
-            <label for="bool-1" class="dsp--block gap--sm txt--size-small txt--wgt-bold">
-                Please send me the daily devotional and program link from Truth For Life with Alistair Begg.
-            </label>
-            <button class="col--green gap--sm dsp--wide dsp--round txt--tall txt--col-white txt--size-copy txt--wgt-bold">Place Order</button>
-        </div>
-
-        <div class="gap--sm">
-            <div class="txt--uppercase txt--wgt-black">Free Account</div>
-            <p class="gap--no txt--size-small">Create a free account to manage your subscriptions, track your listening progress, and build a listening library of your favorite messages. </p>
-            <button class="gap--sm dsp--round col--gray pad--md-h txt--short txt--wgt-bold">Create Account</button>
-            <div class="col--cool dsp--round gap--md pad--sm-v pad--sm-h txt--size-small txt--wgt-bold">
-                We're grateful to offer you resources at cost, with no mark up, thanks to the generous giving from listeners like you. 
+    <div class="region">
+        <div class="region__main">
+            <div class="layout layout--split">
+                <div class="layout__locked layout__locked--small">
+                    <img class="el-image" src="https://placekitten.com/200/200" />
+                </div>
+                <div>
+                    <h3   class="el-h4">George Whitefield: God's Anointed Servant in the Great Revival of the Eighteenth Century</h3>
+                    <div  class="el-p  | txt--small txt--heavy txt--green-01">Paperback</div>
+                    <div  class="el-p  | txt--small">$3.00</div>
+                    <span class="el-p  | txt--green-01">Quantity: </span>
+                    <span class="el-p">1</span>
+                </div>
             </div>
         </div>
-
-        <div class="col--warm dsp--round gap--sm pad--md-h pad--lg-v">
-            <div class="txt--uppercase txt--wgt-black">Summary</div>
-            <div class="gap--no txt--size-small txt--wgt-bold">December 12, 2021</div>
-            <hr class="gap--sm">
-            <div class="gap--sm txt--size-small txt--wgt-bold">
-                <img class="dsp--middle dsp--round" src="icon-pay-visa.svg"/> 1234 - 1234 - 1234
-            </div>
-            <div class="gap--sm">
-                Items (3):          <span class="dsp--float-right">$107.00 </span><br>
-                Shipping & handling <span class="dsp--float-right">$3.09   </span><br>
-                                    <hr   class="dsp--float-right dsp--block dsp--wide-1-3"><br>
-                Total before tax    <span class="dsp--float-right">$110.09 </span><br>
-                Tax                 <span class="dsp--float-right">$0.19   </span><br>
-            </div>
-            <hr class="gap--xs">
-            <p class="gap--xs txt--wgt-black">
-                Grand Total         <span class="dsp--float-right">$110.28</span>
-            </p>
-        </div>
-        <p class="gap--xs txt--size-small txt--wgt-bold txt--center">
-            Contact Customer Service<br>(888-588-7884)
-        </p>
     </div>
 
+    <div class="region">
+        <div class="region__main">
+            <h4  class="el-h3  | gap--no">Order Summary</h4>
+            <div class="layout layout--sides  | gap--sm">
+                <p class="el-p  | txt--small">Items (3):          </p>  <p class="el-p  | txt--small">$107.00 </p>
+                <p class="el-p  | txt--small">Shipping & Handling </p>  <p class="el-p  | txt--small">$3.09   </p>
+                <span></span><span class="el-hr el-hr--short"></span>
+                <p class="el-p  | txt--small">Total before tax    </p>  <p class="el-p  | txt--small">$110.09 </p>
+                <p class="el-p  | txt--small">Tax                 </p>  <p class="el-p  | txt--small">$0.19   </p>
+            </div>
+            <div class="el-hr"></div>
+            <div class="layout layout--sides">
+                <p class="el-p  | txt--heavy">Grand Total         </p>  <p class="el-p  | txt--heavy">$110.28 </p>
+            </div>
+            <div class="region region--borderless region--compress">
+                <input class="region__icon region__icon--check" type="checkbox"/>
+                <label class="region__main">
+                    <span class="el-p  | txt--bold txt--small">Please send me the daily devotional and program link from Truth For Life with Alistair Begg.</span>
+                </label>
+            </div>
+            <input class="el-button el-button--tall el-button--wide  | gap--md" type="submit" value="Place Order"/>
+        </div>
+    </div>
 
 
 </body>
