<!DOCTYPE html>
<html>
<head>
    <style>
        .block
        {
            position:relative;
            display: flex;
            align-items: flex-start;

            margin: 0;
            padding: 12px 20px;
            border: 0;

            border-radius: 5px;
        }
        .block > *
        {
            padding:10px 0 10px 10px;
        }
        .block > *:last-child
        {
            padding-right: 10px;
        }

        .block__hit-area
        {
            width:100%;
        }
        .block--bordered
        {
            border:1px solid #ddd;
        }


        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(1);
            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;
        }

    </style>

    <!-- progress bar -->
    <style>
        .progress
        {
            position:relative;
            display:block;
            margin:0;
            padding:0;
            border:0;
            font-size:0;
        }
        .progress::before, .progress::after
        {
            content:" ";
            display: block;
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:12px;
            border-radius:20px;
            background:tan;
        }
        .progress::after
        {
            background:green;
        }
        .progress > *
        {
            position:relative;
            display:inline-block;
            width:20%;
            padding:40px 0 0 0;
            margin:6px 0 0 0;
            list-style-type: none;
            font-size:13px;
            text-align:center;
        }

        .progress--stage-1::after{ width:10%;  }
        .progress--stage-2::after{ width:30%;  }
        .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 
        {
            content:" ";
            display: block;
            position:absolute;
            top:0;
            left:50%;
            width:30px;
            height:30px;
            border-radius:50px;
            background:green;
            transform:translate(-50%, -50%);
        }
        .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) 
        {
            font-weight:900;
        }
    </style>

    <style>
        
        @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;600;900&display=swap');

        .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-h2{ font-size:24px; line-height:28px; }
        .txt--size-h1{ font-size:32px; line-height:48px; }

        .txt--green-darken-01{ color: #4B6451; }

        .txt--wgt-light{ font-family:"Nunito Sans"; font-weight:100; }
        .txt--wgt-normal{ font-family:"Nunito Sans"; font-weight:300; }
        .txt--wgt-bold{ font-family:"Nunito Sans"; font-weight:600; }
        .txt--wgt-black{ font-family:"Nunito Sans"; font-weight:900; }

        .txt--uppercase{ text-transform: uppercase; }

        .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; }

    </style>

</head>
<body>

    <ul class="progress progress--stage-2">
        <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>

    <form>

        <input type="checkbox" id="bool-1"/>
        <label for="bool-1">
            Please send me the daily devotional and program link from Truth For Life with Alistair Begg.
        </label>

        <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--sm">Payment Method</div>

        <div class="block block--bordered gap--xs">
            <div class="txt--size-copy txt--wgt-bold">Credit Card</div>
            <a class="txt--green-darken-01" href="/">Change</a>
        </div>

        <input id="check-1" type="radio" name="slot-1" value="option-1"/>
        <div class="block">
            <label class="block__hit-area" for="check-1">
                <span class="txt--size-copy txt--wgt-bold">Credit Card</strong><br>
                <span class="txt--size-copy txt--wgt-normal">Credit Card</span><br>
                <span class="txt--size-copy txt--wgt-normal">Credit Card</span><br>
                <span class="txt--size-copy txt--wgt-normal">Credit Card</span><br>
                <span class="txt--size-copy txt--wgt-normal">Credit Card</span>
            </label>
            <a class="block__auxillary" href="/">Change</a>
        </div>

        <input id="check-2" type="radio" name="slot-1" value="option-2"/>
        <div class="block">
            <label class="block__hit-area" for="check-2">
                <strong>Paypal</strong><br>
                <span>also good</span>
            </label>
            <a class="block__auxillary" href="/">Change</a>
        </div>

        <div class="txt--size-h2 txt--wgt-black">Shipping Information</div>
        <div class="txt--size-copy txt--wgt-black txt--uppercase">Shipping Information</div>
        <div class="block block--bordered">
            <div class="block__hit-area">
                <div class="txt--size-copy txt--wgt-bold">Shell Long TP Check</div>
                <div class="txt--size-copy txt--wgt-normal">
                    8759 Cardinal Court<br>
                    Windmere, FL 34786<br>
                    US
                </div>
                <div class="txt--size-copy txt--wgt-normal">
                    8759 Cardinal Court<br>
                    Windmere, FL 34786<br>
                    US
                </div>
            </div>
            <a class="block__auxillary" href="">Change</a>
        </div>

    </form>
</body>
</html>