css-3d-book/index.html

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" >
    <meta charset="utf-8">

<!-- fonts -->
<style>

@font-face {
    font-family: 'Brandon';
    src: url(data:application/octet-stream;base64,T1RUTwALAIAAAwAwQ0ZGICUwgwcAAAzkAACOuEdQT1Ov0QG0AACphAAAtDpHU1VCEG3ByQAAo3QAAAYQT1MvMn3maH8AAAEgAAAAYGNtYXC5Mp3YAAAG8AAABdRoZWFk8gfzawAAALwAAAA2aGhlYQfABEUAAAD0AAAAJGhtdHjKglH0AACbnAAAB9htYXhwAfZQAAAAARgAAAAGbmFtZRwzR1oAAAGAAAAFb3Bvc3T/uAAyAAAMxAAAACAAAQAAAAEAAFrKgzdfDzz1AAMD6AAAAADHptf+AAAAAMem1/7/dP6EBC8ECwAAAAMAAgAAAAAAAAABAAAEGv6EAAAEYf90/2kELwABAAAAAAAAAAAAAAAAAAAB9gAAUAAB9gAAAAIB7gGkAAUAAAK8AooAAACMArwCigAAAd0AMgD6AAACCwYDAgIDBgICoAAAL1AAIFsAAAAAAAAAAEhWRAAAAAAg+wICvP7UAV4EGgF8IAAAmwAAAAABkAK8AAAAIAADAAAAHAFWAAEAAAAAAAAAPgAAAAEAAAAAAAEAEQA+AAEAAAAAAAIABgBPAAEAAAAAAAMAKQBVAAEAAAAAAAQAGAB+AAEAAAAAAAUADwCWAAEAAAAAAAYAFwClAAEAAAAAAAcANwC8AAEAAAAAAAgAEgDzAAEAAAAAAAkAEgDzAAEAAAAAAAoAPQEFAAEAAAAAAAwAFwFCAAEAAAAAABAAEQA+AAEAAAAAABEABgBPAAMAAQQJAAAAfAFZAAMAAQQJAAEAMAHVAAMAAQQJAAIADgIFAAMAAQQJAAMAUgITAAMAAQQJAAQALgJlAAMAAQQJAAUAHgKTAAMAAQQJAAYALgJlAAMAAQQJAAcAbgKxAAMAAQQJAAgAJAMfAAMAAQQJAAkAJAMfAAMAAQQJAAoAegNDAAMAAQQJAAwALgO9AAMAAQQJABAAIgPrAAMAAQQJABEADAQNQ29weXJpZ2h0IChjKSAyMDA5IGJ5IEhhbm5lcyB2b24gRG9laHJlbi4gQWxsIHJpZ2h0cyByZXNlcnZlZC5CcmFuZG9uIEdyb3Rlc3F1ZU1lZGl1bUhhbm5lc3ZvbkRvZWhyZW46IEJyYW5kb24gR3JvdGVzcXVlOiAyMDA5QnJhbmRvbiBHcm90ZXNxdWUgTWVkaXVtVmVyc2lvbiAwMDEuMDAwQnJhbmRvbkdyb3Rlc3F1ZS1NZWRpdW1CcmFuZG9uIEdyb3Rlc3F1ZSBpcyBhIHRyYWRlbWFyayBvZiBIYW5uZXMgdm9uIERvZWhyZW4uSGFubmVzIHZvbiBEb2VocmVuQ29weXJpZ2h0IChjKSAyMDA5IGJ5IEhhbm5lcyB2b24gRJpocmVuLiBBbGwgcmlnaHRzIHJlc2VydmVkLmh0dHA6Ly93d3cuaHZkZm9udHMuY29tAEMAbwBwAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA5ACAAYgB5ACAASABhAG4AbgBlAHMAIAB2AG8AbgAgAEQAbwBlAGgAcgBlAG4ALgAgAEEAbABsACAAcgBpAGcAaAB0AHMAIAByAGUAcwBlAHIAdgBlAGQALgBCAHIAYQBuAGQAbwBuACAARwByAG8AdABlAHMAcQB1AGUAIABNAGUAZABpAHUAbQBSAGUAZwB1AGwAYQByAEgAYQBuAG4AZQBzAHYAbwBuAEQAbwBlAGgAcgBlAG4AOgAgAEIAcgBhAG4AZABvAG4AIABHAHIAbwB0AGUAcwBxAHUAZQA6ACAAMgAwADAAOQBCAHIAYQBuAGQAbwBuAEcAcgBvAHQAZQBzAHEAdQBlAC0ATQBlAGQAaQB1AG0AVgBlAHIAcwBpAG8AbgAgADAAMAAxAC4AMAAwADAAQgByAGEAbgBkAG8AbgAgAEcAcgBvAHQAZQBzAHEAdQBlACAAaQBzACAAYQAgAHQAcgBhAGQAZQBtAGEAcgBrACAAbwBmACAASABhAG4AbgBlAHMAIAB2AG8AbgAgAEQAbwBlAGgAcgBlAG4ALgBIAGEAbgBuAGUAcwAgAHYAbwBuACAARABvAGUAaAByAGUAbgBDAG8AcAB5AHIAaQBnAGgAdAAgACgAYwApACAAMgAwADAAOQAgAGIAeQAgAEgAYQBuAG4AZQBzACAAdgBvAG4AIABEAJoAaAByAGUAbgAuACAAQQBsAGwAIAByAGkAZwBoAHQAcwAgAHIAZQBzAGUAcgB2AGUAZAAuAGgAdAB0AHAAOgAvAC8AdwB3AHcALgBoAHYAZABmAG8AbgB0AHMALgBjAG8AbQBCAHIAYQBuAGQAbwBuACAARwByAG8AdABlAHMAcQB1AGUATQBlAGQAaQB1AG0AAAAAAwAAAAMAAAIUAAEAAAAAABwAAwABAAACFAAGAfgAAAAJAPcAAwAAAAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMABAAFAAYABwAIAAkACgALAAwADQAOAA8AEAARABIAEwAUABUAFgAXABgAGQAaABsAHAAdAB4AHwAgACEAIgAjACQAJQAmACcAKAApACoAKwAsAC0ALgAvADAAMQAyADMANAA1ADYANwA4ADkAOgA7ADwAPQA+AD8AQABBAEIAQwBEAEUARgBHAEgASQBKAEsATABNAE4ATwBQAFEAUgBTAFQAVQBWAFcAWABZAFoAWwBcAF0AXgBfAGAAYQAAAGcAagBzAHgAmACeALYAyADHAMkAywDKAM4A1wDcANsA3QDfAOwA6wDuAPAA/gECAQEBAwEFAQQBGwEaARwBHgFnAZYBcQFyAWkBZAFqARQBbQFsAW4BNwFAAYoAbQCiAZsBhwGMAY0BdAGTAZwBnwGgAZUBnQF1AXYBkgDRAQkBVwFWAY4BngFzAYsBjwFgAWEBVABiAGMAZgCdAKQBCwFiAWMBWgFbAVgBWQGJAaEBKgDCAXoBcAFeAV8BMQEyAWgBZQFcAV0BhQBlAHkAZAB7AHcAhwCJAIsAhgCbAJwBogCaALMAtACyAOoBOQE+AUIBRQFLAUcBTQFJAU8BOwAEA8AAAAByAEAABQAyAH4AvwDEANEA1gDfAOQA8QD2AX4BkgH/AhsCNwLHAskC3QOUA6kDvAPAHoUe8yAUIBogHiAiICYgMCA6IEQgcCB5IIkgrCETISIhJiEuIVQhWyFeIgIiBiIPIhIiFSIaIh4iKyJIImAiZSXK+P/7Av//AAAAIACgAMAAxQDSANcA4ADlAPIA9wGSAfoCGAI3AsYCyQLYA5QDqQO8A8AegB7yIBMgGCAcICAgJiAwIDkgRCBwIHQggCCsIRMhIiEmIS4hUyFbIVwiAiIGIg8iESIVIhkiHiIrIkgiYCJkJcr4//sB////4wAA/6MAAP/IAAD/5wAAAA8AAP/hAAAAAP68AAD+ewAA/fz96f3Y/dUAAAAA4U8AAAAAAADhLuFV4SXhNuE94TrhNODE4ITgTOBr4GoAAOAk4Cbfmt+J35EAAN9mAADffd9y30PfKt8o29cIowYwAAEAAABwAAAArAAAAMIAAADQAAAA5gAAAfIB/AAAAgAAAAIAAAAAAAAAAAACAgIMAAACDAIQAhQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAB+AAAAfgAAAAAAAAAAAAAAAAAAAAAAAAAYgFWAXEBcgFvAXQB9QFpAUABbAF1AWABjgFVAW0BQgGWAYcBeAF5ATcBkwFqAWUBTQF3AXYBYQF+AXwBgQFXAGoAbQBzAHcAeAB5AHsAhgCHAIkAiwB2AJgBiACiALIAswC0ALYAwACxARQAzgDRANcA2wDcAN0A3wDrAOwA7gDwANoA/gGJAQkBGgEbARwBHgEoARkBKgBoAMwAaQDNAGwA0ABvANMAcADUAHIA1gBxANUAdADYAHUA2QB8AOAAfQDhAH4A4gB/AOMAegDeAIAA5ACBAOUAggDmAIMA5wCEAOgAhQDpAIoA7wCMAPEAiADtAI4A8gCNAOoBL
}

@font-face {
    font-family: 'Brandon';
    font-weight: 600;
    src: url(data:application/octet-stream;base64,T1RUTwALAIAAAwAwQ0ZGIMcAUZEAAAzUAACNvEdQT1Po0n3mAACoZAAAtuRHU1VCEhvDwgAAolQAAAYQT1MvMn4EaoMAAAEgAAAAYGNtYXC5J53YAAAG4AAABdRoZWFk8h7zTQAAALwAAAA2aGhlYQfXBEYAAAD0AAAAJGhtdHi/hknUAACakAAAB8RtYXhwAfZQAAAAARgAAAAGbmFtZVPRFYoAAAGAAAAFXXBvc3T/uAAyAAAMtAAAACAAAQAAAAEAAEgGW9NfDzz1AAMD6AAAAADHptftAAAAAMem1+3/Y/6ABFcEEwAAAAMAAgAAAAAAAAABAAAEGv6EAAAEe/9j/1oEVwABAAAAAAAAAAAAAAAAAAAB7AAAUAAB9gAAAAIB8gHCAAUAAAK8AooAAACMArwCigAAAd0AMgD6AAACCwgDAgIDBgICoAAAL1AAIFsAAAAAAAAAAEhWRAAAAAAg+wICvP7UAV4EGgF8IAAAmwAAAAABkAK8AAAAIAADAAAAHAFWAAEAAAAAAAAAPgAAAAEAAAAAAAEAEQA+AAEAAAAAAAIABABPAAEAAAAAAAMAKQBTAAEAAAAAAAQAFgB8AAEAAAAAAAUADwCSAAEAAAAAAAYAFQChAAEAAAAAAAcANwC2AAEAAAAAAAgAEgDtAAEAAAAAAAkAEgDtAAEAAAAAAAoAPQD/AAEAAAAAAAwAFwE8AAEAAAAAABAAEQA+AAEAAAAAABEABABPAAMAAQQJAAAAfAFTAAMAAQQJAAEALAHPAAMAAQQJAAIADgH7AAMAAQQJAAMAUgIJAAMAAQQJAAQAKgJbAAMAAQQJAAUAHgKFAAMAAQQJAAYAKgJbAAMAAQQJAAcAbgKjAAMAAQQJAAgAJAMRAAMAAQQJAAkAJAMRAAMAAQQJAAoAegM1AAMAAQQJAAwALgOvAAMAAQQJABAAIgPdAAMAAQQJABEACAP/Q29weXJpZ2h0IChjKSAyMDA5IGJ5IEhhbm5lcyB2b24gRG9laHJlbi4gQWxsIHJpZ2h0cyByZXNlcnZlZC5CcmFuZG9uIEdyb3Rlc3F1ZUJvbGRIYW5uZXN2b25Eb2VocmVuOiBCcmFuZG9uIEdyb3Rlc3F1ZTogMjAwOUJyYW5kb24gR3JvdGVzcXVlIEJvbGRWZXJzaW9uIDAwMS4wMDBCcmFuZG9uR3JvdGVzcXVlLUJvbGRCcmFuZG9uIEdyb3Rlc3F1ZSBpcyBhIHRyYWRlbWFyayBvZiBIYW5uZXMgdm9uIERvZWhyZW4uSGFubmVzIHZvbiBEb2VocmVuQ29weXJpZ2h0IChjKSAyMDA5IGJ5IEhhbm5lcyB2b24gRJpocmVuLiBBbGwgcmlnaHRzIHJlc2VydmVkLmh0dHA6Ly93d3cuaHZkZm9udHMuY29tAEMAbwBwAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA5ACAAYgB5ACAASABhAG4AbgBlAHMAIAB2AG8AbgAgAEQAbwBlAGgAcgBlAG4ALgAgAEEAbABsACAAcgBpAGcAaAB0AHMAIAByAGUAcwBlAHIAdgBlAGQALgBCAHIAYQBuAGQAbwBuACAARwByAG8AdABlAHMAcQB1AGUAIABCAG8AbABkAFIAZQBnAHUAbABhAHIASABhAG4AbgBlAHMAdgBvAG4ARABvAGUAaAByAGUAbgA6ACAAQgByAGEAbgBkAG8AbgAgAEcAcgBvAHQAZQBzAHEAdQBlADoAIAAyADAAMAA5AEIAcgBhAG4AZABvAG4ARwByAG8AdABlAHMAcQB1AGUALQBCAG8AbABkAFYAZQByAHMAaQBvAG4AIAAwADAAMQAuADAAMAAwAEIAcgBhAG4AZABvAG4AIABHAHIAbwB0AGUAcwBxAHUAZQAgAGkAcwAgAGEAIAB0AHIAYQBkAGUAbQBhAHIAawAgAG8AZgAgAEgAYQBuAG4AZQBzACAAdgBvAG4AIABEAG8AZQBoAHIAZQBuAC4ASABhAG4AbgBlAHMAIAB2AG8AbgAgAEQAbwBlAGgAcgBlAG4AQwBvAHAAeQByAGkAZwBoAHQAIAAoAGMAKQAgADIAMAAwADkAIABiAHkAIABIAGEAbgBuAGUAcwAgAHYAbwBuACAARACaAGgAcgBlAG4ALgAgAEEAbABsACAAcgBpAGcAaAB0AHMAIAByAGUAcwBlAHIAdgBlAGQALgBoAHQAdABwADoALwAvAHcAdwB3AC4AaAB2AGQAZgBvAG4AdABzAC4AYwBvAG0AQgByAGEAbgBkAG8AbgAgAEcAcgBvAHQAZQBzAHEAdQBlAEIAbwBsAGQAAAAAAAADAAAAAwAAAhQAAQAAAAAAHAADAAEAAAIUAAYB+AAAAAkA9wADAAAAAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAEAAUABgAHAAgACQAKAAsADAANAA4ADwAQABEAEgATABQAFQAWABcAGAAZABoAGwAcAB0AHgAfACAAIQAiACMAJAAlACYAJwAoACkAKgArACwALQAuAC8AMAAxADIAMwA0ADUANgA3ADgAOQA6ADsAPAA9AD4APwBAAEEAQgBDAEQARQBGAEcASABJAEoASwBMAE0ATgBPAFAAUQBSAFMAVABVAFYAVwBYAFkAWgBbAFwAXQBeAF8AYABhAAAAZwBqAHMAeACYAJ4AtgDIAMcAyQDLAMoAzgDXANwA2wDdAN8A7ADrAO4A8AD+AQIBAQEDAQUBBAEbARoBHAEeAWcBlgFxAXIBaQFkAWoBFAFtAWwBbgE3AUABigBtAKIBmwGHAYwBjQF0AZMBnAGfAaABlQGdAXUBdgGSANEBCQFXAVYBjgGeAXMBiwGPAWABYQFUAGIAYwBmAJ0ApAELAWIBYwFaAVsBWAFZAYkBoQEqAMIBegFwAV4BXwExATIBaAFlAVwBXQGFAGUAeQBkAHsAdwCHAIkAiwCGAJsAnAGiAJoAswC0ALIA6gE5AT4BQgFFAUsBRwFNAUkBTwE7AAQDwAAAAHIAQAAFADIAfgC/AMQA0QDWAN8A5ADxAPYBfgGSAf8CGwI3AscCyQLdA5QDqQO8A8AehR7zIBQgGiAeICIgJiAwIDogRCBwIHkgiSCsIRMhIiEmIS4hVCFbIV4iAiIGIg8iEiIVIhoiHiIrIkgiYCJlJcr4//sC//8AAAAgAKAAwADFANIA1wDgAOUA8gD3AZIB+gIYAjcCxgLJAtgDlAOpA7wDwB6AHvIgEyAYIBwgICAmIDAgOSBEIHAgdCCAIKwhEyEiISYhLiFTIVshXCICIgYiDyIRIhUiGSIeIisiSCJgImQlyvj/+wH////jAAD/owAA/8gAAP/nAAAADwAA/+EAAAAA/rwAAP57AAD9/P3p/dj91QAAAADhTwAAAAAAAOEu4VXhJeE24T3hOuE04MTghOBM4GvgagAA4CTgJt+a34nfkQAA32YAAN9933LfQ98q3yjb1wijBjAAAQAAAHAAAACsAAAAwgAAANAAAADmAAAB8gH8AAACAAAAAgAAAAAAAAAAAAICAgwAAAIMAhACFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAH4AAAB+AAAAAAAAAAAAAAAAAAAAAAAAABiAVYBcQFyAW8BdAHqAWkBQAFsAXUBYAGOAVUBbQFCAZYBhwF4AXkBNwGTAWoBZQFNAXcBdgFhAX4BfAGBAVcAagBtAHMAdwB4AHkAewCGAIcAiQCLAHYAmAGIAKIAsgCzALQAtgDAALEBFADOANEA1wDbANwA3QDfAOsA7ADuAPAA2gD+AYkBCQEaARsBHAEeASgBGQEqAGgAzABpAM0AbADQAG8A0wBwANQAcgDWAHEA1QB0ANgAdQDZAHwA4AB9AOEAfgDiAH8A4wB6AN4AgADkAIEA5QCCAOYAgwDnAIQA6ACFAOkAigDvAIwA8QCIAO0AjgDyAI0A6gEvATAAjwD0AJAA9QD2AJEA9
}
</style>

<!-- layout -->
<style>
body
{
    margin:0;
    font-family: Brandon, Centrury Gothic, sans-serif;
    /*background:#008794;*/
    /*color:white;*/
}
section
{
    position:relative;
    min-height: 100vh;
    max-width:900px;
    margin:0 auto;
    box-sizing: border-box;
    padding:66px;
}


h2
{
    display:flex;
    align-items: center;
    box-sizing:border-box;
    width:100%;
    max-width:500px;
    margin:0 auto;
    padding:5px 20px 5px 20px;
    text-align:center;
    text-transform:uppercase;
    font-size:36px;
}
h2 > span
{
    position: relative;
    flex:1;
}
h2 > span:first-child::before, h2 > span:last-child::before
{
    content: "⬦";
    line-height: 7px;
    font-size: 60px;
    text-indent:-37px;
    display: block;
    position: absolute;
    top: -2px;
    width: 0%;
    height: 5px;
    background: #000;
    transition: width 0.4s;
}
h2 > span:first-child::before
{
    text-align:left;
    direction:ltr;
    right: 0;
}
h2 > span:last-child::before
{
    text-align:right;
    direction:rtl;
    left: 0;
}
h2[data-spy='true'] > span:first-child::before, h2[data-spy='true'] > span:last-child::before
{
    width: 100%;
}

.CTA
{
    position:relative;
    display:inline-block;
    padding:5px 50px 5px 50px;
    border:5px solid black;
    text-decoration:none !important;
    color: black;
    text-transform:uppercase;
    font-weight:lighter;
}
.CTA::before, .CTA::after
{
    content:" ";
    display:block;
    position:absolute;
    height:100%;
    width:0px;
    top:0;
}
.CTA::before
{
    left:10px;
    border-right:5px solid black;
    transition:left 0.4s;
}
.CTA::after
{
    right:10px;
    border-left:5px solid black;
    transition:right 0.4s;
}
.CTA:hover::before
{
    left:-5px;
}
.CTA:hover::after
{
    right:-5px;
}

.copy
{

}
.copy--narrow
{
    max-width:600px;
    margin:0 auto;
    text-align:center;
}
.copy--large
{
    font-size:22px;
    line-height:33px;
}
.copy--isolate
{
    padding:20px;
    box-sizing: border-box;

}
</style>

<!-- nav menu -->
<style>
    nav
    {
        /* margin: 7px; */
        /* padding: 10px; */
        position: fixed;
        display: block;
        bottom: 0;
        right: 0px;
        width: 100%;
        z-index: 200;
        height: 66px;
        overflow: hidden;
        transition: height 0.4s;
        /* box-sizing: border-box; */
    }
    nav > .detail
    {
        display:block;
        position:absolute;
        width:40px;
        right:0;
        transition: width 0.4s 0.4s;
    }
    
    [nav-open] nav
    {
        height:100%;
    }
    nav > .detail.cap
    {
        height:33px;
    }
    nav > .detail.cap--top
    {
        top:10px;
    }
    nav > .detail.cap--bottom
    {
        bottom:10px;
    }
    nav > .detail.cap::before
    {
        position: relative;
        left: -10px;
        content: "⬦";
        line-height: 37px;
        font-size: 60px;
        font-weight: 900;
        text-indent: -10px;
    }
    nav > .detail.edge
    {
        border: 40px solid transparent;
        border-right: 0px;
        border-left: 0px;
        content: " ";
        height: 100%;
        box-sizing: border-box;
    }
    nav > .detail.edge::before
    {
        content: " ";
        display: block;
        position: absolute;
        top: 0;
        left: 14px;
        width: 5px;
        height: 100%;
        background: #000;
    }
    nav .button
    {
        position: absolute;
        bottom: 0;
        right:0%;
        display: block;
        width: 50%;
        max-width:200px;
        height: 66px;
        transition: left 0.4s 0.4s;
        cursor:pointer;
    }
    nav .button.menu::before, nav .button.menu::after
    {
        display:block;
        position:absolute;
        top:20px;
        left:0;
        width:100%;
        box-sizing: border-box;
        padding-right:48px;
        text-align: right;
        text-transform:uppercase;
        font-weight:900;
        transition:left 0.4s, top 0.4s, padding 0.4s;
    }
    nav .button.menu::before
    {
        content:"Menu";
    }
    nav .button.menu::after
    {
        content:"Close";
        top:180%;
    }
    nav .button.menu:hover::before, nav .button.menu:hover::after
    {
        padding-right:60px;
    }
    [nav-open] nav .button.menu::before
    {
        left:180%;
    }
    [nav-open] nav .button.menu::after
    {
        top:28px;
    }

    nav .button.book
    {
        padding-left: 50px;
        left: 0;
        padding-top: 20px;
        text-transform: uppercase;
        font-weight: 900;
        box-sizing: border-box;
    }
    nav .button.book svg
    {
        display:block;
        width:50px;
        height:100%;
        position:absolute;
        top:0;
        left:0;
    }

    nav > ul
    {
        position: absolute;
        top: 50vh;
        left:0;
        width:100%;
    
        box-sizing: border-box;
        padding: 0 48px 0 0;
        margin: 0;
    
        transform: translateY(-50%);
        transition:left 0.4s 0.5s;
        list-style-type: none;
        text-align: right;
    }
    nav > ul a
    {
        display:block;
        padding:10px 0 10px 0;
        text-decoration: none !important;
        text-transform: uppercase;
        color:black !important;
    }

    .Dim
    {
        box-shadow: 0px 0px 10px rgb(0 0 0 / 20%);
        position: fixed;
        right: 0;
        bottom: 0%;
        height: 65px;
        width: 100%;
        background: #fff;
        opacity: 0.9;
        transition: height 0.4s;
    }
    [nav-open] .Dim
    {
        height:100%;
    }
</style>

<!-- 3d product shot -->
<style>
    .Shot
    {
        transform: perspective(1000px);
        transform-style: preserve-3d;
        width:500px;
        height: 400px;
        margin:20px auto 0 auto;
        text-align:center;
        transition: transform 1s;
    }
    .Shot[show="cover"]{ transform: perspective(800px) rotateX(-15deg) rotateY(110deg); }
    .Shot[show="spine"]{ transform: perspective(2000px) rotateX(0deg)   rotateY(180deg); }
    .Shot[show="back" ]{ transform: perspective(1000px) rotateX(-30deg) rotateY(-60deg); }
    .Shot[show="pages"]{ transform: perspective(800px)  rotateX(-7deg)   rotateY(0deg); }
    
    .Book
    {
        height:100%;
        transform-style: preserve-3d;
        transform: translateZ(-100px);
        position: relative;
        display:inline-block;
    }
    .Spine
    {
        display:flex;
        justify-content:space-between;
        margin:0 auto;
        position:absolute;
        transform-style: preserve-3d;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }
    
    .Page
    {
        display: inline-block;
        position: relative;
        transition: transform 1s;
        transform-style: preserve-3d;
    }
    .Page[swing="closed"]{ transform: translateX(0px)  rotateY(-90deg); }
    .Page[swing="right" ]{ transform: translateX(-3px) rotateY(-20deg); }
    .Page[swing="left"  ]{ transform: translateX(3px)  rotateY(-160deg); }
    .Page .Front, .Page .Back
    {
        float:left;
        position:absolute;
        top:0;
        left:0;
        height:100%;
        backface-visibility: hidden;
        transform-style: preserve-3d;
        transform: rotateY(180deg);
    }
    .Page .Back
    {
        transform: rotateY(0deg);
    }
    .Page img
    {
        height:100%;
        width:auto;
    }
    
    .Page--Fill
    {
        display: block;
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }
    .Page--Shrink
    {
        height:98%;
        top:1%;
    }
    .Shadow--Drop::before
    {
        transform: rotateX(90deg) translateY(-100px) translateZ(-3px);
        box-shadow: 0px 100px 60px black, 0px 100px 17px black;
        display: block;
        position: absolute;
        top: 100%;
        content: " ";
        width: 100%;
        height: 8px;
        border-radius: 39px;
    }
    
    .Shadow--Sheet::after
    {
        content:" ";
    
        background-size: 100% 100%;
        background-position: 0px 0px;
        background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75%);
    
        display:block;
        position:absolute;
        z-index:100;
        top:0;
        left:0;
        width:100%;
        height:100%;
    
        backface-visibility: hidden;
        transform:scaleX(-1);
    }
    .Shadow--Sheet--Flip::after
    {
        transform:scaleX(1);
    }
    
    .Shadow--Radiosity::after
    {
        content: " ";
        background-size: 100% 100%;
        background-position: 0px 0px;
        background-image: radial-gradient(188% 24% at 50% 82%, #ffffff52 0%, #0000 100%);
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index:100;
        width: 100%;
        height: 100%;
    }
</style>

<!-- time -->
<script>
    var Time =
    {
        Jobs:[],
        Stamp:false,
        Queue:false,
        Loop:false,
        Add:function(inJob)
        {
            if(Time.Loop)
            {
                console.log("cannot modify queue while processing");
                return;
            }
            if(!Time.Queue)
            {
                window.requestAnimationFrame(Time.Update);
            }
            Time.Queue = true;
            Time.Jobs.push(inJob);
        },
        Remove:function(inJob)
        {
            if(Time.Loop)
            {
                console.log("cannot modify queue while processing");
                return;
            }
            var index = Time.Jobs.indexOf(inJob);
            if(index > -1)
            {
                Time.Jobs.splice(index, 1);
            }
        },
        Update:function(inTimestamp)
        {
            var delta;
            var i;
    
            if(!Time.Stamp)
            {
                Time.Stamp = inTimestamp;
            }
            delta = inTimestamp - Time.Stamp;
            Time.Stamp = inTimestamp;
    
            Time.Loop = true;
            for(i=0; i<Time.Jobs.length; i++)
            {
                if(Time.Jobs[i](delta) === false)
                {
                    Time.Jobs.splice(i, 1);
                    i--;
                }
            }
            Time.Loop = false;
    
            if(Time.Jobs.length > 0)
            {
                window.requestAnimationFrame(Time.Update);
            }
            else
            {
                Time.Stamp = false;
                Time.Queue = false;
            }
        }
    };
</script>

<!-- scroll spy -->
<script>
var Spy =
{
    Attribute:"data-spy",
    Members:[],
    Defaults:[0, 1, 0, 1],
    Disabled:false,
    Suspend:function()
    {
        Spy.Disabled = true;
    },
    Resume:function()
    {
        Spy.Disabled = false;
        Spy.UpdateAll();
    },
    UpdateAll:function()
    {
        var i, member, aabb, top, bottom, left, right;
        var visible;

        if(Spy.Disabled){ return; }

        for(i=0; i<Spy.Members.length; i++)
        {
            member = Spy.Members[i];

            top =    window.innerHeight * member.Bounds[0];
            bottom = window.innerHeight * member.Bounds[1];
            left =   window.innerWidth *  member.Bounds[2];
            right =  window.innerWidth *  member.Bounds[3];

            aabb = member.Element.getBoundingClientRect();
            visible = (aabb.top < bottom && aabb.bottom > top) && (aabb.left < right && aabb.right > left);
            if(visible != member.Visible)
            {
                member.Element.setAttribute(Spy.Attribute, visible);
                member.Visible = visible;
                member.Change(visible);
            }
        }
    },
    Create:function(inElement)
    {
        var j, bounds;
        var attr;
        var obj;
        attr = inElement.getAttribute(Spy.Attribute)||"";
        inElement.removeAttribute(Spy.Attribute);
        bounds = attr.split("|");
        for(j=0; j<Spy.Defaults.length; j++)
        {
            if(bounds[j])
            {
                bounds[j] = parseFloat(bounds[j]);
            }
            else
            {
                bounds[j] = Spy.Defaults[j];
            }
        }
        obj = {
            Element:inElement,
            Bounds:bounds,
            Visible:undefined,
            Change:function(){}
        };
        Spy.Members.push(obj);
        return obj;
    },
    CreateAll:function()
    {
        var i, elements;
        elements = document.querySelectorAll("*["+Spy.Attribute+"]");

        for(i=0; i<elements.length; i++)
        {
            Spy.Create(elements[i]);
        }
    },
    Init:function()
    {
        Spy.CreateAll();
        Spy.UpdateAll();
        document.addEventListener("scroll", Spy.UpdateAll, {passive:true});
        window.addEventListener("resize", Spy.UpdateAll, {passive:true});
    }
};
</script>

<!-- video player -->
<script>
var Video;
Video = {};
Video.Players = [];
Video.Initialized = false;
Video.SilenceOthers = function(inIndex)
{
    var i;
    for(i=0; i<Video.Players.length; i++)
    {
        if(i != inIndex)
        {
            Video.Players[i].Stop();
        }
    }
};
Video.Player = function(inDOMID, inVideoID)
{
    var obj;
    obj = {};
    obj.DOMID = inDOMID;
    obj.QueuedState = false;
    obj.Stop = function(){obj.QueuedState = false;};
    obj.Play = function(){obj.QueuedState = true;};
    obj.Build = function()
    {
        obj.YT = new YT.Player(obj.DOMID, obj.Config);
    };
    obj.Ready = function(inEvent)
    {
        obj.Stop = function()
        {
            obj.YT.pauseVideo();
        };
        obj.Play = function()
        {
            obj.YT.playVideo();
        };
        if(obj.QueuedState)
        {
            obj.Play();
        }
    };
    obj.StateChange = function(inEvent)
    {
        if(inEvent.data === 1)
        {
            Video.SilenceOthers(obj.Index);
        }
    };
    obj.Config = {
        videoId:inVideoID,
        playerVars: { modestbranding:true, rel:0 },
        events:{'onReady': obj.Ready, 'onStateChange': obj.StateChange }
    };
    obj.Index = Video.Players.length;
    Video.Players.push(obj);

    if(Video.Initialized)
    {
        // if this player is being created long after the YT library initialized, go ahead and build it now
        obj.Build();
    }

    return obj;
};
Video.BuildPlayers = function()
{
    var i;
    for(i=0; i<Video.Players.length; i++)
    {
        Video.Players[i].Build();
    }
    Video.Initialized = true;
};
Video.Init = function()
{
    var tagNew, tagOld;

    tagNew = document.createElement('script');
    tagNew.src = "https://www.youtube.com/iframe_api";
    tagOld = document.getElementsByTagName('script')[0];
    tagOld.parentNode.insertBefore(tagNew, tagOld);

    window.onYouTubeIframeAPIReady = Video.BuildPlayers;
};
</script>

</head>
<body>
    <nav>
        <div class="Dim"></div>
        <span class="detail edge"></span>
        <span class="detail cap cap--top"></span>
        <span class="detail cap cap--bottom"></span>
        <ul>
            <li><a href="#top"  >Top</a></li>
            <li><a href="#order">Order</a></li>
            <li><a href="#video">Video</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#specs">Specs</a></li>
            <li><a href="#email">Sign-up</a></li>
        </ul>
        <span class="button menu"></span>
        <span class="button book">
            <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M41.0717 8.95871L41.0717 22.6941L27.3363 22.6941L27.3363 8.95871L41.0717 8.95871ZM41.0717 8.95871L8.95871 41.0717M41.1181 22.8297L28.3357 35.6121L14.4183 35.6121V21.6947L27.2007 8.91228M20.907 15.206V29.1234L34.8244 29.1234" stroke="black" stroke-width="3"/>
            </svg>
            Buy Now
        </span>
    </nav>
    
    <main>
    <style>
        #intro
        {
            background:black;
            max-width:100%;
        }
        #intro svg
        {
            display:block;
            width:100%;
            max-width:280px;
            margin:0 auto;
        }
        #intro svg path
        {
            fill:white;
        }
    </style>
    <section id="intro" style="background:black;">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 295.7 845.5 107.3">
            <path d="M12.2 343.3h7v-38.2H9v5.6H0v-13.9h47.6v13.9h-9v-5.6h-10v38.2h7v8.3H12.2V343.3z" ></path>
            <path d="M59.1 343.3h6.3v-38.2h-6.3v-8.3h21.2c12.5 0 21.5 5.6 21.5 16.6 0 7-4.2 12.5-10.4 14.9l8.3 14.9h6.3v8.3H93.1L82 330.7c-1 0-2.1 0-3.4 0 -1.7 0-3.4 0-4.6 0v12.5h7v8.3H59.1V343.3zM92.1 313.8c0-5.9-4.9-8.7-12.5-8.7h-5.2v17.8c1 0 2.4 0 5.2 0C87.2 322.9 92.1 319.3 92.1 313.8z" ></path>
            <path d="M119.2 331.5v-26.4h-5.9v-8.3h21.9v8.3h-6.6v26.1c0 8.3 4.2 12.9 11.2 12.9s11.5-4.2 11.5-12.5v-26.4h-6.6v-8.3h21.9v8.3h-5.9v26.4c0 14.3-8.3 21.2-20.5 21.2C127.6 352.7 119.2 345.8 119.2 331.5z" ></path>
            <path d="M187.4 343.3h7v-38.2h-10v5.6h-9v-13.9h47.6v13.9h-9v-5.6h-10v38.2h7v8.3h-23.3v-8.3H187.4z" ></path>
            <path d="M233.9 343.3h6.3v-38.2h-6.3v-8.3h22.6v8.3h-7v14.6h25.4v-14.6h-7v-8.3h22.6v8.3h-6.3v38.2h6.3v8.3h-22.6v-8.3h7V328h-25.4v15.3h7v8.3h-22.6L233.9 343.3 233.9 343.3z" ></path>
            <path d="M307 347.5h7.3v-46.6H307v-4.2h38.5v9.4H341V301H319v21.5h18.1v4.2h-18.5v20.9h8v4.2h-19.8v-4.3H307z" ></path>
            <path d="M355.3 324.2c0-16 11.9-28.5 27.8-28.5 15.6 0 27.5 12.5 27.5 28.5 0 16-11.9 28.5-27.8 28.5C367.1 352.7 355.3 340.2 355.3 324.2zM405.7 324.2c0-13.6-9.4-24.3-22.9-24.3 -13.6 0-22.9 10.8-22.9 23.9 0 13.6 9.4 24.3 22.9 24.3C396.3 348.2 405.7 337.8 405.7 324.2z" ></path>
            <path d="M421.7 347.5h7.3v-46.6h-7.3v-4.2h20.5c11.9 0 19.1 6.3 19.1 15.6 0 7.6-5.2 12.9-12.5 14.9l12.9 20.2h6.6v4.2h-9.4l-14.6-23.3c-1 0-2.1 0-3.1 0 -2.4 0-5.2 0-7.3 0v19.1h7.3v4.2h-19.5v-4.1H421.7zM456.8 312.4c0-7.3-5.9-11.5-14.9-11.5h-8.3v23.3c2.1 0 4.9 0 7.3 0C450.2 324.6 456.8 320.4 456.8 312.4z" ></path>
            <path d="M481.9 345.1h6.6v-41.7h-6.6v-6.6h21.5v6.6h-7.3v41.4h17.3v-8h7.3v14.9h-38.9V345.1z" ></path>
            <path d="M534.3 345.1h7.3v-41.7h-7.3v-6.6h21.9v6.6h-7v41.4h7v6.6h-21.9V345.1z" ></path>
            <path d="M569.4 345.1h6.6v-41.7h-6.6v-6.6h40v11.2h-7.3v-4.6h-18.5v18.1h17v6.6h-17v17h7.3v6.6h-21.5V345.1z" ></path>
            <path d="M618.8 345.1h6.6v-41.7h-6.6v-6.6h40.4v11.2h-7.3v-4.6H633v17h17.3v6.6H633v18.1h18.8v-4.6h7.3v11.2h-40.3V345.1z" ></path>
            <path d="M665.1 303.4L665.1 303.4c0-3.4 2.7-6.6 6.6-6.6 3.4 0 6.3 2.7 6.3 6.3l0 0c0 3.4-2.7 6.6-6.6 6.6C667.8 309.7 665.1 306.8 665.1 303.4zM677.1 303.4L677.1 303.4c0-3.1-2.4-5.9-5.9-5.9 -3.1 0-5.9 2.7-5.9 5.9l0 0c0 3.1 2.4 5.9 5.9 5.9C674.7 309 677.1 306.5 677.1 303.4zM668.8 299.5h3.1c1 0 1.7 0.3 2.1 0.7 0.3 0.3 0.7 0.7 0.7 1.4l0 0c0 1-0.7 1.7-1.4 2.1l1.7 2.4h-1.4l-1.7-2.4 0 0h-1.4v2.4h-1.4v-6.6h-0.3V299.5zM672 303c0.7 0 1.4-0.3 1.4-1l0 0c0-0.7-0.3-1-1.4-1h-1.7v2.1C670.2 303 672 303 672 303z" ></path>
        </svg>
    </section>
    <section id="order">

        <h2 data-spy="0.2|0.8"><span></span><span>Order</span><span></span></h2>
        <p class="copy copy--large copy--narrow copy--isolate">
            Enhance your study of God’s Word by reflecting on a passage of Scripture each day and diving deep into its meaning by reading the rich insights you’ve come to enjoy from Alistair Begg.
        </p>
        <a class="CTA" href="https://truthforlife.org/store/buy/">Buy Now</a>
        <span>$10.00 (free shipping)</span>
            
<style>

    .frame
    {
        position:relative;
        padding:20px;
        border-bottom: none;
        box-sizing:border-box;
    }
    
    .frame__image
    {
        position:relative;
        z-index:20;
        margin-bottom:19px;
    }
    
    .frame__bar
    {
        position:relative;
        bottom:0;
        left:0;
        width:100%;
        height:44px;
        overflow:hidden;
        transform-origin: center 22.5px;
    }
    .frame__bar span
    {
        display: block;
        position: absolute;
        top: -10.5px;
        left: 50%;
        width: 20px;
        height: 20px;
        border: 5px solid #000;
        border-right-color: transparent;
        border-bottom-color: transparent;
        transform: translate(-50%, 20px) rotate(45deg);
        transition: left 0.4s;
    }
    .frame__bar span::before, .frame__bar span::after
    {
        content: " ";
        display: block;
        position: absolute;
        width: 1000px;
        height:0px;
        border-top: 5px solid black;
        transform:rotate(-45deg);
    }
    .frame__bar span::before
    {
        bottom: -0.5px;
        right: 20px;
        transform-origin: right bottom;
    }
    .frame__bar span::after
    {
        top: -4px;
        left: 17px;
        transform-origin: left top;
    }
    .frame__bar--down
    {
        transform: scaleY(-1);
    }
    .frame__bar--up
    {
        transform: scaleY(1);
    }
    .frame__bar--1-3 span
    {
        left:16.6%;
    }
    .frame__bar--2-3 span
    {
        left:50%;
    }
    .frame__bar--3-3 span
    {
        left:83%;
    }
    
    .frame__bracket
    {
        position:relative;
        display:block;
        width:100%;
        height:0px;
        top:-200px;
        z-index:10;
        border-top:5px solid black;
    }
    .frame__bracket::before, .frame__bracket::after
    {
        content:" ";
        display:block;
        width:15px;
        height:171px;
        position:absolute;
        top:-5px;
        border:5px solid black;
    }
    .frame__bracket::before
    {
        left:-20px;
    }
    .frame__bracket::after
    {
        right:-20px;
    }
    
    .frame__button
    {
        position:relative;
        display:block;
        float:left;
        padding:5px 0px 5px 0px;
        box-sizing: border-box;
        width:33.3%;
        text-align:center;
        text-transform: uppercase;
        cursor:pointer;
    }
    .frame__button:hover::before
    {
        content: " ";
        display: block;
        width: 7px;
        height: 7px;
        background: black;
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-5px) rotate(45deg);
        transition: top 0.4s, bottom 0.4s;
    }
    .frame__button--upper:hover::before
    {
        top:auto;
        bottom:-9px;
    }
    .frame__button[data-frame-active='true']:hover::before
    {
        bottom:auto;
        top: -30px;
    }
    .frame__button--upper[data-frame-active='true']:hover::before
    {
        bottom: -26px;
        top:auto;
    }
</style>
                <div class="frame">
                    <div class="frame__image">

                        <div class="Shot" show="cover">
                            <div class="Book">
                                <img style="display:block; height:100%; width:auto; visibility: visible;" src="book-panel-spine.jpg"/>
                                <div class="Page Page--Fill"> <div class="Front Shadow--Radiosity "><img src="book-panel-spine.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-spine.jpg"/></div> </div>
                                <div class="Spine">
                                    <div class="Page" swing="closed"> <div class="Front Shadow--Radiosity "><img src="book-panel-front.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-front.jpg"/></div> </div>
                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
                        
                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-3.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-5.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-4.jpg"/></div> </div>
                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-6.jpg"/></div> </div>
                                    
                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
                                    <div class="Page" swing="closed"> <div class="Front Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="frame__button frame__button--upper" onclick="bookPose('cover'); bookClose();">Cover</div><div class="frame__button frame__button--upper" onclick="bookPose('spine'); bookClose();">Spine </div><div class="frame__button frame__button--upper" onclick="bookPose('back');  bookClose();">Back</div>
                
                    <div class="frame__bar"><span></span></div>
                    <div class="frame__bracket"></div>
                
                    <div class="frame__button" onclick="bookPose('pages'); bookOpen(4);">Intro</div><div class="frame__button" onclick="bookPose('pages'); bookOpen(5);">1 & 2</div><div class="frame__button" onclick="bookPose('pages'); bookOpen(6);">3 & 4</div>
                </div>
                
                <script>
                    function frame__setup(inFrame)
                    {
                        var buttons = inFrame.querySelectorAll(".frame__button");
                        var bar = inFrame.querySelector(".frame__bar");
                        var active = false;
                
                        function activate(inButton)
                        {
                            var index = parseInt(inButton.getAttribute("data-frame-index"));
                            var classX = "frame__bar--" + ((index % 3)+1) + "-3";
                            var classY = index > 2 ? "frame__bar--down" : "frame__bar--up";
                
                            bar.setAttribute("class", "frame__bar " + classX + " " + classY);
                
                            if(active)
                            {
                                active.setAttribute("data-frame-active", "false");
                            }
                            active = inButton;
                            inButton.setAttribute("data-frame-active", "true");
                        }
                        for(var i=0; i<buttons.length; i++)
                        {
                            buttons[i].setAttribute("data-frame-index", i);
                            buttons[i].setAttribute("data-frame-active", "false");
                            buttons[i].addEventListener("click", function(){ activate(this); });
                        }
                
                        activate( buttons[0] );
                    }
                
                    frame__setup(document.querySelector(".frame"));
                </script>    
                

    </section>
    <section id="video">
        <h2 data-spy="0.2|0.8"><span></span><span>Videos</span><span></span></h2>

    </section>
    <section id="about">
        <h2 data-spy="0.2|0.8"><span></span><span>About</span><span></span></h2>
        <p class="copy copy--large copy--narrow copy--isolate">
            Each daily reading begins with a passage from Scripture and is followed by a commentary written by Alistair. The commentary explains God’s words, offers encouragement, and reflects on how the Bible’s truth inspires us to live daily for Christ. Each reading concludes with three questions for deeper reflection:
        </p>
        <ul>
            <li>
                <strong>Head</strong><p>Nam tempus pellentesque ante, nec iaculis nisi porta id.</p>
            </li>
            <li>
                <strong>Hands</strong><p>Vivamus augue enim, egestas a magna vitae, consequat facilisis urna.</p>
            </li>
            <li>
                <strong>Heart</strong><p>Morbi blandit in ligula eu scelerisque. Maecenas hendrerit eu nunc non molestie.</p>
            </li>
        </ul>
        <a href="#">Look Inside</a>
    </section>
    <section id="specs">
        <h2 data-spy="0.2|0.8">Specs</h2>
        <p>
            Start with the gospel each and every day with this one-year devotional by renowned Bible teacher Alistair Begg.
        </p>
        <p>
            Each daily devotion includes:
        </p>
        <ul>
            <li>
                <p>Reflections from renowned Bible teacher Alistair Begg</p>
            </li>
            <li>
                <p>Prompts for real life application</p>
            </li>
            <li>
                <p>Relevant Scripture passages</p>
            </li>
            <li>
                <p>A yearly Bible reading plan</p>
            </li>
        </ul>
    </section>
    <section id="email">
        <h2 data-spy="0.2|0.8">Sign Up</h2>
    </section>
    </main>

<!-- init zone -->
<script>
function $(inSelector){ return document.querySelectorAll(inSelector); }
$("nav .button")[0].addEventListener("click", function()
{
    if(document.body.hasAttribute("nav-open"))
    {
        document.body.removeAttribute("nav-open");
    }
    else
    {
        document.body.setAttribute("nav-open", true);
    }
});


Spy.Init();
function JobDuration(inDuration, inHandler, inDone)
{
    var timeCurrent = 0;
    var timeLimit = inDuration*1000;
    var timeRelative = 0;
    var timeMaxed = false;
    return function(inDelta)
    {
        timeCurrent += inDelta;
        timeMaxed = timeCurrent > timeLimit;
        if(timeMaxed)
        {
            inHandler(1);
            inDone();
            return false;
        }
        return inHandler(timeCurrent / timeLimit);
    };
}


document.querySelector("nav").addEventListener("click", function(inEvent)
{
    var domHtml = document.querySelector("html");
    var domGoal = document.querySelector(inEvent.target.getAttribute("href"));
    var posStart = domHtml.scrollTop;
    var posRange = domGoal.getBoundingClientRect().top;
    var evtTick = function(inProgress){ domHtml.scrollTop = posStart + posRange*Math.sqrt(1 - Math.pow(1-(inProgress), 2)); };
    var evtDone = function(){ Spy.Resume(); };
    
    Spy.Suspend();
    Time.Add( JobDuration(0.4, evtTick, evtDone) );
    inEvent.preventDefault();
});


var pages = $("[swing]");
var table = $(".Shot")[0];
function bookOpen(index)
{
    pages.forEach((p, i)=> p.setAttribute("swing", i>index ? "right" : "left") );
};
function bookClose() 
{
    pages.forEach(p=>p.setAttribute("swing", "closed"));
};
function bookPose(inPanel) 
{
    table.setAttribute("show", inPanel);
    bookClose();
};


Video.Init();

// create and initialize youtube videos...
var playerPromo, playerInterview;
playerPromo = Video.Player('PlayerPromo', 'c_qQHI0rQ6c');
playerInterview = Video.Player('PlayerInterview', 'wEkSWh2_yM4');


</script>
</body>

</html>
-												setup

											
										
										
											2021-08-10 16:53:55 -04:00
+								<!DOCTYPE html>
 								<html>
 								<head>
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								    <meta name="viewport" content="width=device-width, initial-scale=1" >
 								    <meta charset="utf-8">
 								<!-- fonts -->
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								<style>
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
 								@font-face {
 								    font-family: 'Brandon';
 								    src: url(data:application/octet-stream;base64,T1RUTwALAIAAAwAwQ0ZGICUwgwcAAAzkAACOuEdQT1Ov0QG0AACphAAAtDpHU1VCEG3ByQAAo3QAAAYQT1MvMn3maH8AAAEgAAAAYGNtYXC5Mp3YAAAG8AAABdRoZWFk8gfzawAAALwAAAA2aGhlYQfABEUAAAD0AAAAJGhtdHjKglH0AACbnAAAB9htYXhwAfZQAAAAARgAAAAGbmFtZRwzR1oAAAGAAAAFb3Bvc3T/uAAyAAAMxAAAACAAAQAAAAEAAFrKgzdfDzz1AAMD6AAAAADHptf+AAAAAMem1/7/dP6EBC8ECwAAAAMAAgAAAAAAAAABAAAEGv6EAAAEYf90/2kELwABAAAAAAAAAAAAAAAAAAAB9gAAUAAB9gAAAAIB7gGkAAUAAAK8AooAAACMArwCigAAAd0AMgD6AAACCwYDAgIDBgICoAAAL1AAIFsAAAAAAAAAAEhWRAAAAAAg+wICvP7UAV4EGgF8IAAAmwAAAAABkAK8AAAAIAADAAAAHAFWAAEAAAAAAAAAPgAAAAEAAAAAAAEAEQA+AAEAAAAAAAIABgBPAAEAAAAAAAMAKQBVAAEAAAAAAAQAGAB+AAEAAAAAAAUADwCWAAEAAAAAAAYAFwClAAEAAAAAAAcANwC8AAEAAAAAAAgAEgDzAAEAAAAAAAkAEgDzAAEAAAAAAAoAPQEFAAEAAAAAAAwAFwFCAAEAAAAAABAAEQA+AAEAAAAAABEABgBPAAMAAQQJAAAAfAFZAAMAAQQJAAEAMAHVAAMAAQQJAAIADgIFAAMAAQQJAAMAUgITAAMAAQQJAAQALgJlAAMAAQQJAAUAHgKTAAMAAQQJAAYALgJlAAMAAQQJAAcAbgKxAAMAAQQJAAgAJAMfAAMAAQQJAAkAJAMfAAMAAQQJAAoAegNDAAMAAQQJAAwALgO9AAMAAQQJABAAIgPrAAMAAQQJABEADAQNQ29weXJpZ2h0IChjKSAyMDA5IGJ5IEhhbm5lcyB2b24gRG9laHJlbi4gQWxsIHJpZ2h0cyByZXNlcnZlZC5CcmFuZG9uIEdyb3Rlc3F1ZU1lZGl1bUhhbm5lc3ZvbkRvZWhyZW46IEJyYW5kb24gR3JvdGVzcXVlOiAyMDA5QnJhbmRvbiBHcm90ZXNxdWUgTWVkaXVtVmVyc2lvbiAwMDEuMDAwQnJhbmRvbkdyb3Rlc3F1ZS1NZWRpdW1CcmFuZG9uIEdyb3Rlc3F1ZSBpcyBhIHRyYWRlbWFyayBvZiBIYW5uZXMgdm9uIERvZWhyZW4uSGFubmVzIHZvbiBEb2VocmVuQ29weXJpZ2h0IChjKSAyMDA5IGJ5IEhhbm5lcyB2b24gRJpocmVuLiBBbGwgcmlnaHRzIHJlc2VydmVkLmh0dHA6Ly93d3cuaHZkZm9udHMuY29tAEMAbwBwAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA5ACAAYgB5ACAASABhAG4AbgBlAHMAIAB2AG8AbgAgAEQAbwBlAGgAcgBlAG4ALgAgAEEAbABsACAAcgBpAGcAaAB0AHMAIAByAGUAcwBlAHIAdgBlAGQALgBCAHIAYQBuAGQAbwBuACAARwByAG8AdABlAHMAcQB1AGUAIABNAGUAZABpAHUAbQBSAGUAZwB1AGwAYQByAEgAYQBuAG4AZQBzAHYAbwBuAEQAbwBlAGgAcgBlAG4AOgAgAEIAcgBhAG4AZABvAG4AIABHAHIAbwB0AGUAcwBxAHUAZQA6ACAAMgAwADAAOQBCAHIAYQBuAGQAbwBuAEcAcgBvAHQAZQBzAHEAdQBlAC0ATQBlAGQAaQB1AG0AVgBlAHIAcwBpAG8AbgAgADAAMAAxAC4AMAAwADAAQgByAGEAbgBkAG8AbgAgAEcAcgBvAHQAZQBzAHEAdQBlACAAaQBzACAAYQAgAHQAcgBhAGQAZQBtAGEAcgBrACAAbwBmACAASABhAG4AbgBlAHMAIAB2AG8AbgAgAEQAbwBlAGgAcgBlAG4ALgBIAGEAbgBuAGUAcwAgAHYAbwBuACAARABvAGUAaAByAGUAbgBDAG8AcAB5AHIAaQBnAGgAdAAgACgAYwApACAAMgAwADAAOQAgAGIAeQAgAEgAYQBuAG4AZQBzACAAdgBvAG4AIABEAJoAaAByAGUAbgAuACAAQQBsAGwAIAByAGkAZwBoAHQAcwAgAHIAZQBzAGUAcgB2AGUAZAAuAGgAdAB0AHAAOgAvAC8AdwB3AHcALgBoAHYAZABmAG8AbgB0AHMALgBjAG8AbQBCAHIAYQBuAGQAbwBuACAARwByAG8AdABlAHMAcQB1AGUATQBlAGQAaQB1AG0AAAAAAwAAAAMAAAIUAAEAAAAAABwAAwABAAACFAAGAfgAAAAJAPcAAwAAAAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMABAAFAAYABwAIAAkACgALAAwADQAOAA8AEAARABIAEwAUABUAFgAXABgAGQAaABsAHAAdAB4AHwAgACEAIgAjACQAJQAmACcAKAApACoAKwAsAC0ALgAvADAAMQAyADMANAA1ADYANwA4ADkAOgA7ADwAPQA+AD8AQABBAEIAQwBEAEUARgBHAEgASQBKAEsATABNAE4ATwBQAFEAUgBTAFQAVQBWAFcAWABZAFoAWwBcAF0AXgBfAGAAYQAAAGcAagBzAHgAmACeALYAyADHAMkAywDKAM4A1wDcANsA3QDfAOwA6wDuAPAA/gECAQEBAwEFAQQBGwEaARwBHgFnAZYBcQFyAWkBZAFqARQBbQFsAW4BNwFAAYoAbQCiAZsBhwGMAY0BdAGTAZwBnwGgAZUBnQF1AXYBkgDRAQkBVwFWAY4BngFzAYsBjwFgAWEBVABiAGMAZgCdAKQBCwFiAWMBWgFbAVgBWQGJAaEBKgDCAXoBcAFeAV8BMQEyAWgBZQFcAV0BhQBlAHkAZAB7AHcAhwCJAIsAhgCbAJwBogCaALMAtACyAOoBOQE+AUIBRQFLAUcBTQFJAU8BOwAEA8AAAAByAEAABQAyAH4AvwDEANEA1gDfAOQA8QD2AX4BkgH/AhsCNwLHAskC3QOUA6kDvAPAHoUe8yAUIBogHiAiICYgMCA6IEQgcCB5IIkgrCETISIhJiEuIVQhWyFeIgIiBiIPIhIiFSIaIh4iKyJIImAiZSXK+P/7Av//AAAAIACgAMAAxQDSANcA4ADlAPIA9wGSAfoCGAI3AsYCyQLYA5QDqQO8A8AegB7yIBMgGCAcICAgJiAwIDkgRCBwIHQggCCsIRMhIiEmIS4hUyFbIVwiAiIGIg8iESIVIhkiHiIrIkgiYCJkJcr4//sB////4wAA/6MAAP/IAAD/5wAAAA8AAP/hAAAAAP68AAD+ewAA/fz96f3Y/dUAAAAA4U8AAAAAAADhLuFV4SXhNuE94TrhNODE4ITgTOBr4GoAAOAk4Cbfmt+J35EAAN9mAADffd9y30PfKt8o29cIowYwAAEAAABwAAAArAAAAMIAAADQAAAA5gAAAfIB/AAAAgAAAAIAAAAAAAAAAAACAgIMAAACDAIQAhQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAB+AAAAfgAAAAAAAAAAAAAAAAAAAAAAAAAYgFWAXEBcgFvAXQB9QFpAUABbAF1AWABjgFVAW0BQgGWAYcBeAF5ATcBkwFqAWUBTQF3AXYBYQF+AXwBgQFXAGoAbQBzAHcAeAB5AHsAhgCHAIkAiwB2AJgBiACiALIAswC0ALYAwACxARQAzgDRANcA2wDcAN0A3wDrAOwA7gDwANoA/gGJAQkBGgEbARwBHgEoARkBKgBoAMwAaQDNAGwA0ABvANMAcADUAHIA1gBxANUAdADYAHUA2QB8AOAAfQDhAH4A4gB/AOMAegDeAIAA5ACBAOUAggDmAIMA5wCEAOgAhQDpAIoA7wCMAPEAiADtAI4A8gCNAOoBL
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								}
-												setup

											
										
										
											2021-08-10 16:53:55 -04:00
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								@font-face {
 								    font-family: 'Brandon';
 								    font-weight: 600;
 								    src: url(data:application/octet-stream;base64,T1RUTwALAIAAAwAwQ0ZGIMcAUZEAAAzUAACNvEdQT1Po0n3mAACoZAAAtuRHU1VCEhvDwgAAolQAAAYQT1MvMn4EaoMAAAEgAAAAYGNtYXC5J53YAAAG4AAABdRoZWFk8h7zTQAAALwAAAA2aGhlYQfXBEYAAAD0AAAAJGhtdHi/hknUAACakAAAB8RtYXhwAfZQAAAAARgAAAAGbmFtZVPRFYoAAAGAAAAFXXBvc3T/uAAyAAAMtAAAACAAAQAAAAEAAEgGW9NfDzz1AAMD6AAAAADHptftAAAAAMem1+3/Y/6ABFcEEwAAAAMAAgAAAAAAAAABAAAEGv6EAAAEe/9j/1oEVwABAAAAAAAAAAAAAAAAAAAB7AAAUAAB9gAAAAIB8gHCAAUAAAK8AooAAACMArwCigAAAd0AMgD6AAACCwgDAgIDBgICoAAAL1AAIFsAAAAAAAAAAEhWRAAAAAAg+wICvP7UAV4EGgF8IAAAmwAAAAABkAK8AAAAIAADAAAAHAFWAAEAAAAAAAAAPgAAAAEAAAAAAAEAEQA+AAEAAAAAAAIABABPAAEAAAAAAAMAKQBTAAEAAAAAAAQAFgB8AAEAAAAAAAUADwCSAAEAAAAAAAYAFQChAAEAAAAAAAcANwC2AAEAAAAAAAgAEgDtAAEAAAAAAAkAEgDtAAEAAAAAAAoAPQD/AAEAAAAAAAwAFwE8AAEAAAAAABAAEQA+AAEAAAAAABEABABPAAMAAQQJAAAAfAFTAAMAAQQJAAEALAHPAAMAAQQJAAIADgH7AAMAAQQJAAMAUgIJAAMAAQQJAAQAKgJbAAMAAQQJAAUAHgKFAAMAAQQJAAYAKgJbAAMAAQQJAAcAbgKjAAMAAQQJAAgAJAMRAAMAAQQJAAkAJAMRAAMAAQQJAAoAegM1AAMAAQQJAAwALgOvAAMAAQQJABAAIgPdAAMAAQQJABEACAP/Q29weXJpZ2h0IChjKSAyMDA5IGJ5IEhhbm5lcyB2b24gRG9laHJlbi4gQWxsIHJpZ2h0cyByZXNlcnZlZC5CcmFuZG9uIEdyb3Rlc3F1ZUJvbGRIYW5uZXN2b25Eb2VocmVuOiBCcmFuZG9uIEdyb3Rlc3F1ZTogMjAwOUJyYW5kb24gR3JvdGVzcXVlIEJvbGRWZXJzaW9uIDAwMS4wMDBCcmFuZG9uR3JvdGVzcXVlLUJvbGRCcmFuZG9uIEdyb3Rlc3F1ZSBpcyBhIHRyYWRlbWFyayBvZiBIYW5uZXMgdm9uIERvZWhyZW4uSGFubmVzIHZvbiBEb2VocmVuQ29weXJpZ2h0IChjKSAyMDA5IGJ5IEhhbm5lcyB2b24gRJpocmVuLiBBbGwgcmlnaHRzIHJlc2VydmVkLmh0dHA6Ly93d3cuaHZkZm9udHMuY29tAEMAbwBwAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA5ACAAYgB5ACAASABhAG4AbgBlAHMAIAB2AG8AbgAgAEQAbwBlAGgAcgBlAG4ALgAgAEEAbABsACAAcgBpAGcAaAB0AHMAIAByAGUAcwBlAHIAdgBlAGQALgBCAHIAYQBuAGQAbwBuACAARwByAG8AdABlAHMAcQB1AGUAIABCAG8AbABkAFIAZQBnAHUAbABhAHIASABhAG4AbgBlAHMAdgBvAG4ARABvAGUAaAByAGUAbgA6ACAAQgByAGEAbgBkAG8AbgAgAEcAcgBvAHQAZQBzAHEAdQBlADoAIAAyADAAMAA5AEIAcgBhAG4AZABvAG4ARwByAG8AdABlAHMAcQB1AGUALQBCAG8AbABkAFYAZQByAHMAaQBvAG4AIAAwADAAMQAuADAAMAAwAEIAcgBhAG4AZABvAG4AIABHAHIAbwB0AGUAcwBxAHUAZQAgAGkAcwAgAGEAIAB0AHIAYQBkAGUAbQBhAHIAawAgAG8AZgAgAEgAYQBuAG4AZQBzACAAdgBvAG4AIABEAG8AZQBoAHIAZQBuAC4ASABhAG4AbgBlAHMAIAB2AG8AbgAgAEQAbwBlAGgAcgBlAG4AQwBvAHAAeQByAGkAZwBoAHQAIAAoAGMAKQAgADIAMAAwADkAIABiAHkAIABIAGEAbgBuAGUAcwAgAHYAbwBuACAARACaAGgAcgBlAG4ALgAgAEEAbABsACAAcgBpAGcAaAB0AHMAIAByAGUAcwBlAHIAdgBlAGQALgBoAHQAdABwADoALwAvAHcAdwB3AC4AaAB2AGQAZgBvAG4AdABzAC4AYwBvAG0AQgByAGEAbgBkAG8AbgAgAEcAcgBvAHQAZQBzAHEAdQBlAEIAbwBsAGQAAAAAAAADAAAAAwAAAhQAAQAAAAAAHAADAAEAAAIUAAYB+AAAAAkA9wADAAAAAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAEAAUABgAHAAgACQAKAAsADAANAA4ADwAQABEAEgATABQAFQAWABcAGAAZABoAGwAcAB0AHgAfACAAIQAiACMAJAAlACYAJwAoACkAKgArACwALQAuAC8AMAAxADIAMwA0ADUANgA3ADgAOQA6ADsAPAA9AD4APwBAAEEAQgBDAEQARQBGAEcASABJAEoASwBMAE0ATgBPAFAAUQBSAFMAVABVAFYAVwBYAFkAWgBbAFwAXQBeAF8AYABhAAAAZwBqAHMAeACYAJ4AtgDIAMcAyQDLAMoAzgDXANwA2wDdAN8A7ADrAO4A8AD+AQIBAQEDAQUBBAEbARoBHAEeAWcBlgFxAXIBaQFkAWoBFAFtAWwBbgE3AUABigBtAKIBmwGHAYwBjQF0AZMBnAGfAaABlQGdAXUBdgGSANEBCQFXAVYBjgGeAXMBiwGPAWABYQFUAGIAYwBmAJ0ApAELAWIBYwFaAVsBWAFZAYkBoQEqAMIBegFwAV4BXwExATIBaAFlAVwBXQGFAGUAeQBkAHsAdwCHAIkAiwCGAJsAnAGiAJoAswC0ALIA6gE5AT4BQgFFAUsBRwFNAUkBTwE7AAQDwAAAAHIAQAAFADIAfgC/AMQA0QDWAN8A5ADxAPYBfgGSAf8CGwI3AscCyQLdA5QDqQO8A8AehR7zIBQgGiAeICIgJiAwIDogRCBwIHkgiSCsIRMhIiEmIS4hVCFbIV4iAiIGIg8iEiIVIhoiHiIrIkgiYCJlJcr4//sC//8AAAAgAKAAwADFANIA1wDgAOUA8gD3AZIB+gIYAjcCxgLJAtgDlAOpA7wDwB6AHvIgEyAYIBwgICAmIDAgOSBEIHAgdCCAIKwhEyEiISYhLiFTIVshXCICIgYiDyIRIhUiGSIeIisiSCJgImQlyvj/+wH////jAAD/owAA/8gAAP/nAAAADwAA/+EAAAAA/rwAAP57AAD9/P3p/dj91QAAAADhTwAAAAAAAOEu4VXhJeE24T3hOuE04MTghOBM4GvgagAA4CTgJt+a34nfkQAA32YAAN9933LfQ98q3yjb1wijBjAAAQAAAHAAAACsAAAAwgAAANAAAADmAAAB8gH8AAACAAAAAgAAAAAAAAAAAAICAgwAAAIMAhACFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAH4AAAB+AAAAAAAAAAAAAAAAAAAAAAAAABiAVYBcQFyAW8BdAHqAWkBQAFsAXUBYAGOAVUBbQFCAZYBhwF4AXkBNwGTAWoBZQFNAXcBdgFhAX4BfAGBAVcAagBtAHMAdwB4AHkAewCGAIcAiQCLAHYAmAGIAKIAsgCzALQAtgDAALEBFADOANEA1wDbANwA3QDfAOsA7ADuAPAA2gD+AYkBCQEaARsBHAEeASgBGQEqAGgAzABpAM0AbADQAG8A0wBwANQAcgDWAHEA1QB0ANgAdQDZAHwA4AB9AOEAfgDiAH8A4wB6AN4AgADkAIEA5QCCAOYAgwDnAIQA6ACFAOkAigDvAIwA8QCIAO0AjgDyAI0A6gEvATAAjwD0AJAA9QD2AJEA9
 								}
 								</style>
 								<!-- layout -->
 								<style>
 								body
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								{
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								    margin:0;
 								    font-family: Brandon, Centrury Gothic, sans-serif;
 								    /*background:#008794;*/
 								    /*color:white;*/
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								}
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								section
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								{
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								    position:relative;
 								    min-height: 100vh;
 								    max-width:900px;
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								    margin:0 auto;
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								    box-sizing: border-box;
 								    padding:66px;
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								}
-												fixes in place

											
										
										
											2021-08-12 17:58:06 -04:00
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
 								h2
 								{
 								    display:flex;
 								    align-items: center;
 								    box-sizing:border-box;
 								    width:100%;
 								    max-width:500px;
 								    margin:0 auto;
 								    padding:5px 20px 5px 20px;
 								    text-align:center;
 								    text-transform:uppercase;
 								    font-size:36px;
 								}
 								h2 > span
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								{
 								    position: relative;
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								    flex:1;
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								}
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								h2 > span:first-child::before, h2 > span:last-child::before
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								{
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								    content: "⬦";
 								    line-height: 7px;
 								    font-size: 60px;
 								    text-indent:-37px;
 								    display: block;
 								    position: absolute;
 								    top: -2px;
 								    width: 0%;
 								    height: 5px;
 								    background: #000;
 								    transition: width 0.4s;
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								}
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								h2 > span:first-child::before
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								{
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								    text-align:left;
 								    direction:ltr;
 								    right: 0;
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								}
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								h2 > span:last-child::before
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								{
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								    text-align:right;
 								    direction:rtl;
 								    left: 0;
 								}
 								h2[data-spy='true'] > span:first-child::before, h2[data-spy='true'] > span:last-child::before
 								{
 								    width: 100%;
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								}
-												fixes in place

											
										
										
											2021-08-12 17:58:06 -04:00
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								.CTA
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								{
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								    position:relative;
 								    display:inline-block;
 								    padding:5px 50px 5px 50px;
 								    border:5px solid black;
 								    text-decoration:none !important;
 								    color: black;
 								    text-transform:uppercase;
 								    font-weight:lighter;
 								}
 								.CTA::before, .CTA::after
 								{
 								    content:" ";
 								    display:block;
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								    position:absolute;
 								    height:100%;
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								    width:0px;
 								    top:0;
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								}
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								.CTA::before
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								{
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								    left:10px;
 								    border-right:5px solid black;
 								    transition:left 0.4s;
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								}
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								.CTA::after
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								{
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								    right:10px;
 								    border-left:5px solid black;
 								    transition:right 0.4s;
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								}
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								.CTA:hover::before
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								{
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								    left:-5px;
 								}
 								.CTA:hover::after
 								{
 								    right:-5px;
 								}
-												Book CSS

											
										
										
											2021-08-11 13:29:50 -04:00
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								.copy
 								{
-												Book CSS

											
										
										
											2021-08-11 13:29:50 -04:00
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								}
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								.copy--narrow
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								{
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								    max-width:600px;
 								    margin:0 auto;
 								    text-align:center;
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								}
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								.copy--large
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								{
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								    font-size:22px;
 								    line-height:33px;
 								}
 								.copy--isolate
 								{
 								    padding:20px;
 								    box-sizing: border-box;
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								}
 								</style>
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
 								<!-- nav menu -->
 								<style>
 								    nav
 								    {
 								        /* margin: 7px; */
 								        /* padding: 10px; */
 								        position: fixed;
 								        display: block;
 								        bottom: 0;
 								        right: 0px;
 								        width: 100%;
 								        z-index: 200;
 								        height: 66px;
 								        overflow: hidden;
 								        transition: height 0.4s;
 								        /* box-sizing: border-box; */
 								    }
 								    nav > .detail
 								    {
 								        display:block;
 								        position:absolute;
 								        width:40px;
 								        right:0;
 								        transition: width 0.4s 0.4s;
 								    }
 								    [nav-open] nav
 								    {
 								        height:100%;
 								    }
 								    nav > .detail.cap
 								    {
 								        height:33px;
 								    }
 								    nav > .detail.cap--top
 								    {
 								        top:10px;
 								    }
 								    nav > .detail.cap--bottom
 								    {
 								        bottom:10px;
 								    }
 								    nav > .detail.cap::before
 								    {
 								        position: relative;
 								        left: -10px;
 								        content: "⬦";
 								        line-height: 37px;
 								        font-size: 60px;
 								        font-weight: 900;
 								        text-indent: -10px;
 								    }
 								    nav > .detail.edge
 								    {
 								        border: 40px solid transparent;
 								        border-right: 0px;
 								        border-left: 0px;
 								        content: " ";
 								        height: 100%;
 								        box-sizing: border-box;
 								    }
 								    nav > .detail.edge::before
 								    {
 								        content: " ";
 								        display: block;
 								        position: absolute;
 								        top: 0;
 								        left: 14px;
 								        width: 5px;
 								        height: 100%;
 								        background: #000;
 								    }
 								    nav .button
 								    {
 								        position: absolute;
 								        bottom: 0;
 								        right:0%;
 								        display: block;
 								        width: 50%;
 								        max-width:200px;
 								        height: 66px;
 								        transition: left 0.4s 0.4s;
 								        cursor:pointer;
 								    }
 								    nav .button.menu::before, nav .button.menu::after
 								    {
 								        display:block;
 								        position:absolute;
 								        top:20px;
 								        left:0;
 								        width:100%;
 								        box-sizing: border-box;
 								        padding-right:48px;
 								        text-align: right;
 								        text-transform:uppercase;
 								        font-weight:900;
 								        transition:left 0.4s, top 0.4s, padding 0.4s;
 								    }
 								    nav .button.menu::before
 								    {
 								        content:"Menu";
 								    }
 								    nav .button.menu::after
 								    {
 								        content:"Close";
 								        top:180%;
 								    }
 								    nav .button.menu:hover::before, nav .button.menu:hover::after
 								    {
 								        padding-right:60px;
 								    }
 								    [nav-open] nav .button.menu::before
 								    {
 								        left:180%;
 								    }
 								    [nav-open] nav .button.menu::after
 								    {
 								        top:28px;
 								    }
 								    nav .button.book
 								    {
 								        padding-left: 50px;
 								        left: 0;
 								        padding-top: 20px;
 								        text-transform: uppercase;
 								        font-weight: 900;
 								        box-sizing: border-box;
 								    }
 								    nav .button.book svg
 								    {
 								        display:block;
 								        width:50px;
 								        height:100%;
 								        position:absolute;
 								        top:0;
 								        left:0;
 								    }
 								    nav > ul
 								    {
 								        position: absolute;
 								        top: 50vh;
 								        left:0;
 								        width:100%;
 								        box-sizing: border-box;
 								        padding: 0 48px 0 0;
 								        margin: 0;
 								        transform: translateY(-50%);
 								        transition:left 0.4s 0.5s;
 								        list-style-type: none;
 								        text-align: right;
 								    }
 								    nav > ul a
 								    {
 								        display:block;
 								        padding:10px 0 10px 0;
 								        text-decoration: none !important;
 								        text-transform: uppercase;
 								        color:black !important;
 								    }
 								    .Dim
 								    {
 								        box-shadow: 0px 0px 10px rgb(0 0 0 / 20%);
 								        position: fixed;
 								        right: 0;
 								        bottom: 0%;
 								        height: 65px;
 								        width: 100%;
 								        background: #fff;
 								        opacity: 0.9;
 								        transition: height 0.4s;
 								    }
 								    [nav-open] .Dim
 								    {
 								        height:100%;
 								    }
 								</style>
 								<!-- 3d product shot -->
 								<style>
 								    .Shot
 								    {
 								        transform: perspective(1000px);
 								        transform-style: preserve-3d;
 								        width:500px;
 								        height: 400px;
 								        margin:20px auto 0 auto;
 								        text-align:center;
 								        transition: transform 1s;
 								    }
 								    .Shot[show="cover"]{ transform: perspective(800px) rotateX(-15deg) rotateY(110deg); }
 								    .Shot[show="spine"]{ transform: perspective(2000px) rotateX(0deg)   rotateY(180deg); }
 								    .Shot[show="back" ]{ transform: perspective(1000px) rotateX(-30deg) rotateY(-60deg); }
 								    .Shot[show="pages"]{ transform: perspective(800px)  rotateX(-7deg)   rotateY(0deg); }
 								    .Book
 								    {
 								        height:100%;
 								        transform-style: preserve-3d;
 								        transform: translateZ(-100px);
 								        position: relative;
 								        display:inline-block;
 								    }
 								    .Spine
 								    {
 								        display:flex;
 								        justify-content:space-between;
 								        margin:0 auto;
 								        position:absolute;
 								        transform-style: preserve-3d;
 								        top:0;
 								        left:0;
 								        width:100%;
 								        height:100%;
 								    }
 								    .Page
 								    {
 								        display: inline-block;
 								        position: relative;
 								        transition: transform 1s;
 								        transform-style: preserve-3d;
 								    }
 								    .Page[swing="closed"]{ transform: translateX(0px)  rotateY(-90deg); }
 								    .Page[swing="right" ]{ transform: translateX(-3px) rotateY(-20deg); }
 								    .Page[swing="left"  ]{ transform: translateX(3px)  rotateY(-160deg); }
 								    .Page .Front, .Page .Back
 								    {
 								        float:left;
 								        position:absolute;
 								        top:0;
 								        left:0;
 								        height:100%;
 								        backface-visibility: hidden;
 								        transform-style: preserve-3d;
 								        transform: rotateY(180deg);
 								    }
 								    .Page .Back
 								    {
 								        transform: rotateY(0deg);
 								    }
 								    .Page img
 								    {
 								        height:100%;
 								        width:auto;
 								    }
 								    .Page--Fill
 								    {
 								        display: block;
 								        position:absolute;
 								        top:0;
 								        left:0;
 								        width:100%;
 								        height:100%;
 								    }
 								    .Page--Shrink
 								    {
 								        height:98%;
 								        top:1%;
 								    }
 								    .Shadow--Drop::before
 								    {
 								        transform: rotateX(90deg) translateY(-100px) translateZ(-3px);
 								        box-shadow: 0px 100px 60px black, 0px 100px 17px black;
 								        display: block;
 								        position: absolute;
 								        top: 100%;
 								        content: " ";
 								        width: 100%;
 								        height: 8px;
 								        border-radius: 39px;
 								    }
 								    .Shadow--Sheet::after
 								    {
 								        content:" ";
 								        background-size: 100% 100%;
 								        background-position: 0px 0px;
 								        background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75%);
 								        display:block;
 								        position:absolute;
 								        z-index:100;
 								        top:0;
 								        left:0;
 								        width:100%;
 								        height:100%;
 								        backface-visibility: hidden;
 								        transform:scaleX(-1);
 								    }
 								    .Shadow--Sheet--Flip::after
 								    {
 								        transform:scaleX(1);
 								    }
 								    .Shadow--Radiosity::after
 								    {
 								        content: " ";
 								        background-size: 100% 100%;
 								        background-position: 0px 0px;
 								        background-image: radial-gradient(188% 24% at 50% 82%, #ffffff52 0%, #0000 100%);
 								        display: block;
 								        position: absolute;
 								        bottom: 0;
 								        left: 0;
 								        z-index:100;
 								        width: 100%;
 								        height: 100%;
 								    }
 								</style>
 								<!-- time -->
 								<script>
 								    var Time =
 								    {
 								        Jobs:[],
 								        Stamp:false,
 								        Queue:false,
 								        Loop:false,
 								        Add:function(inJob)
 								        {
 								            if(Time.Loop)
 								            {
 								                console.log("cannot modify queue while processing");
 								                return;
 								            }
 								            if(!Time.Queue)
 								            {
 								                window.requestAnimationFrame(Time.Update);
 								            }
 								            Time.Queue = true;
 								            Time.Jobs.push(inJob);
 								        },
 								        Remove:function(inJob)
 								        {
 								            if(Time.Loop)
 								            {
 								                console.log("cannot modify queue while processing");
 								                return;
 								            }
 								            var index = Time.Jobs.indexOf(inJob);
 								            if(index > -1)
 								            {
 								                Time.Jobs.splice(index, 1);
 								            }
 								        },
 								        Update:function(inTimestamp)
 								        {
 								            var delta;
 								            var i;
 								            if(!Time.Stamp)
 								            {
 								                Time.Stamp = inTimestamp;
 								            }
 								            delta = inTimestamp - Time.Stamp;
 								            Time.Stamp = inTimestamp;
 								            Time.Loop = true;
 								            for(i=0; i<Time.Jobs.length; i++)
 								            {
 								                if(Time.Jobs[i](delta) === false)
 								                {
 								                    Time.Jobs.splice(i, 1);
 								                    i--;
 								                }
 								            }
 								            Time.Loop = false;
 								            if(Time.Jobs.length > 0)
 								            {
 								                window.requestAnimationFrame(Time.Update);
 								            }
 								            else
 								            {
 								                Time.Stamp = false;
 								                Time.Queue = false;
 								            }
 								        }
 								    };
 								</script>
 								<!-- scroll spy -->
 								<script>
 								var Spy =
 								{
 								    Attribute:"data-spy",
 								    Members:[],
 								    Defaults:[0, 1, 0, 1],
 								    Disabled:false,
 								    Suspend:function()
 								    {
 								        Spy.Disabled = true;
 								    },
 								    Resume:function()
 								    {
 								        Spy.Disabled = false;
 								        Spy.UpdateAll();
 								    },
 								    UpdateAll:function()
 								    {
 								        var i, member, aabb, top, bottom, left, right;
 								        var visible;
 								        if(Spy.Disabled){ return; }
 								        for(i=0; i<Spy.Members.length; i++)
 								        {
 								            member = Spy.Members[i];
 								            top =    window.innerHeight * member.Bounds[0];
 								            bottom = window.innerHeight * member.Bounds[1];
 								            left =   window.innerWidth *  member.Bounds[2];
 								            right =  window.innerWidth *  member.Bounds[3];
 								            aabb = member.Element.getBoundingClientRect();
 								            visible = (aabb.top < bottom && aabb.bottom > top) && (aabb.left < right && aabb.right > left);
 								            if(visible != member.Visible)
 								            {
 								                member.Element.setAttribute(Spy.Attribute, visible);
 								                member.Visible = visible;
 								                member.Change(visible);
 								            }
 								        }
 								    },
 								    Create:function(inElement)
 								    {
 								        var j, bounds;
 								        var attr;
 								        var obj;
 								        attr = inElement.getAttribute(Spy.Attribute)||"";
 								        inElement.removeAttribute(Spy.Attribute);
 								        bounds = attr.split("|");
 								        for(j=0; j<Spy.Defaults.length; j++)
 								        {
 								            if(bounds[j])
 								            {
 								                bounds[j] = parseFloat(bounds[j]);
 								            }
 								            else
 								            {
 								                bounds[j] = Spy.Defaults[j];
 								            }
 								        }
 								        obj = {
 								            Element:inElement,
 								            Bounds:bounds,
 								            Visible:undefined,
 								            Change:function(){}
 								        };
 								        Spy.Members.push(obj);
 								        return obj;
 								    },
 								    CreateAll:function()
 								    {
 								        var i, elements;
 								        elements = document.querySelectorAll("*["+Spy.Attribute+"]");
 								        for(i=0; i<elements.length; i++)
 								        {
 								            Spy.Create(elements[i]);
 								        }
 								    },
 								    Init:function()
 								    {
 								        Spy.CreateAll();
 								        Spy.UpdateAll();
 								        document.addEventListener("scroll", Spy.UpdateAll, {passive:true});
 								        window.addEventListener("resize", Spy.UpdateAll, {passive:true});
 								    }
 								};
 								</script>
 								<!-- video player -->
-												setup

											
										
										
											2021-08-10 16:53:55 -04:00
+								<script>
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								var Video;
 								Video = {};
 								Video.Players = [];
 								Video.Initialized = false;
 								Video.SilenceOthers = function(inIndex)
 								{
 								    var i;
 								    for(i=0; i<Video.Players.length; i++)
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								    {
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								        if(i != inIndex)
 								        {
 								            Video.Players[i].Stop();
 								        }
 								    }
 								};
 								Video.Player = function(inDOMID, inVideoID)
 								{
 								    var obj;
 								    obj = {};
 								    obj.DOMID = inDOMID;
 								    obj.QueuedState = false;
 								    obj.Stop = function(){obj.QueuedState = false;};
 								    obj.Play = function(){obj.QueuedState = true;};
 								    obj.Build = function()
 								    {
 								        obj.YT = new YT.Player(obj.DOMID, obj.Config);
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								    };
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								    obj.Ready = function(inEvent)
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								    {
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								        obj.Stop = function()
 								        {
 								            obj.YT.pauseVideo();
 								        };
 								        obj.Play = function()
 								        {
 								            obj.YT.playVideo();
 								        };
 								        if(obj.QueuedState)
 								        {
 								            obj.Play();
 								        }
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								    };
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								    obj.StateChange = function(inEvent)
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								    {
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								        if(inEvent.data === 1)
 								        {
 								            Video.SilenceOthers(obj.Index);
 								        }
 								    };
 								    obj.Config = {
 								        videoId:inVideoID,
 								        playerVars: { modestbranding:true, rel:0 },
 								        events:{'onReady': obj.Ready, 'onStateChange': obj.StateChange }
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
+								    };
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								    obj.Index = Video.Players.length;
 								    Video.Players.push(obj);
 								    if(Video.Initialized)
 								    {
 								        // if this player is being created long after the YT library initialized, go ahead and build it now
 								        obj.Build();
 								    }
 								    return obj;
 								};
 								Video.BuildPlayers = function()
 								{
 								    var i;
 								    for(i=0; i<Video.Players.length; i++)
 								    {
 								        Video.Players[i].Build();
 								    }
 								    Video.Initialized = true;
 								};
 								Video.Init = function()
 								{
 								    var tagNew, tagOld;
 								    tagNew = document.createElement('script');
 								    tagNew.src = "https://www.youtube.com/iframe_api";
 								    tagOld = document.getElementsByTagName('script')[0];
 								    tagOld.parentNode.insertBefore(tagNew, tagOld);
 								    window.onYouTubeIframeAPIReady = Video.BuildPlayers;
 								};
-												setup

											
										
										
											2021-08-10 16:53:55 -04:00
+								</script>
-												correct pages

											
										
										
											2021-08-13 17:25:34 -04:00
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
+								</head>
 								<body>
 								    <nav>
 								        <div class="Dim"></div>
 								        <span class="detail edge"></span>
 								        <span class="detail cap cap--top"></span>
 								        <span class="detail cap cap--bottom"></span>
 								        <ul>
 								            <li><a href="#top"  >Top</a></li>
 								            <li><a href="#order">Order</a></li>
 								            <li><a href="#video">Video</a></li>
 								            <li><a href="#about">About</a></li>
 								            <li><a href="#specs">Specs</a></li>
 								            <li><a href="#email">Sign-up</a></li>
 								        </ul>
 								        <span class="button menu"></span>
 								        <span class="button book">
 								            <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
 								            <path d="M41.0717 8.95871L41.0717 22.6941L27.3363 22.6941L27.3363 8.95871L41.0717 8.95871ZM41.0717 8.95871L8.95871 41.0717M41.1181 22.8297L28.3357 35.6121L14.4183 35.6121V21.6947L27.2007 8.91228M20.907 15.206V29.1234L34.8244 29.1234" stroke="black" stroke-width="3"/>
 								            </svg>
 								            Buy Now
 								        </span>
 								    </nav>
 								    <main>
 								    <style>
 								        #intro
 								        {
 								            background:black;
 								            max-width:100%;
 								        }
 								        #intro svg
 								        {
 								            display:block;
 								            width:100%;
 								            max-width:280px;
 								            margin:0 auto;
 								        }
 								        #intro svg path
 								        {
 								            fill:white;
 								        }
 								    </style>
 								    <section id="intro" style="background:black;">
 								        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 295.7 845.5 107.3">
 								            <path d="M12.2 343.3h7v-38.2H9v5.6H0v-13.9h47.6v13.9h-9v-5.6h-10v38.2h7v8.3H12.2V343.3z" ></path>
 								            <path d="M59.1 343.3h6.3v-38.2h-6.3v-8.3h21.2c12.5 0 21.5 5.6 21.5 16.6 0 7-4.2 12.5-10.4 14.9l8.3 14.9h6.3v8.3H93.1L82 330.7c-1 0-2.1 0-3.4 0 -1.7 0-3.4 0-4.6 0v12.5h7v8.3H59.1V343.3zM92.1 313.8c0-5.9-4.9-8.7-12.5-8.7h-5.2v17.8c1 0 2.4 0 5.2 0C87.2 322.9 92.1 319.3 92.1 313.8z" ></path>
 								            <path d="M119.2 331.5v-26.4h-5.9v-8.3h21.9v8.3h-6.6v26.1c0 8.3 4.2 12.9 11.2 12.9s11.5-4.2 11.5-12.5v-26.4h-6.6v-8.3h21.9v8.3h-5.9v26.4c0 14.3-8.3 21.2-20.5 21.2C127.6 352.7 119.2 345.8 119.2 331.5z" ></path>
 								            <path d="M187.4 343.3h7v-38.2h-10v5.6h-9v-13.9h47.6v13.9h-9v-5.6h-10v38.2h7v8.3h-23.3v-8.3H187.4z" ></path>
 								            <path d="M233.9 343.3h6.3v-38.2h-6.3v-8.3h22.6v8.3h-7v14.6h25.4v-14.6h-7v-8.3h22.6v8.3h-6.3v38.2h6.3v8.3h-22.6v-8.3h7V328h-25.4v15.3h7v8.3h-22.6L233.9 343.3 233.9 343.3z" ></path>
 								            <path d="M307 347.5h7.3v-46.6H307v-4.2h38.5v9.4H341V301H319v21.5h18.1v4.2h-18.5v20.9h8v4.2h-19.8v-4.3H307z" ></path>
 								            <path d="M355.3 324.2c0-16 11.9-28.5 27.8-28.5 15.6 0 27.5 12.5 27.5 28.5 0 16-11.9 28.5-27.8 28.5C367.1 352.7 355.3 340.2 355.3 324.2zM405.7 324.2c0-13.6-9.4-24.3-22.9-24.3 -13.6 0-22.9 10.8-22.9 23.9 0 13.6 9.4 24.3 22.9 24.3C396.3 348.2 405.7 337.8 405.7 324.2z" ></path>
 								            <path d="M421.7 347.5h7.3v-46.6h-7.3v-4.2h20.5c11.9 0 19.1 6.3 19.1 15.6 0 7.6-5.2 12.9-12.5 14.9l12.9 20.2h6.6v4.2h-9.4l-14.6-23.3c-1 0-2.1 0-3.1 0 -2.4 0-5.2 0-7.3 0v19.1h7.3v4.2h-19.5v-4.1H421.7zM456.8 312.4c0-7.3-5.9-11.5-14.9-11.5h-8.3v23.3c2.1 0 4.9 0 7.3 0C450.2 324.6 456.8 320.4 456.8 312.4z" ></path>
 								            <path d="M481.9 345.1h6.6v-41.7h-6.6v-6.6h21.5v6.6h-7.3v41.4h17.3v-8h7.3v14.9h-38.9V345.1z" ></path>
 								            <path d="M534.3 345.1h7.3v-41.7h-7.3v-6.6h21.9v6.6h-7v41.4h7v6.6h-21.9V345.1z" ></path>
 								            <path d="M569.4 345.1h6.6v-41.7h-6.6v-6.6h40v11.2h-7.3v-4.6h-18.5v18.1h17v6.6h-17v17h7.3v6.6h-21.5V345.1z" ></path>
 								            <path d="M618.8 345.1h6.6v-41.7h-6.6v-6.6h40.4v11.2h-7.3v-4.6H633v17h17.3v6.6H633v18.1h18.8v-4.6h7.3v11.2h-40.3V345.1z" ></path>
 								            <path d="M665.1 303.4L665.1 303.4c0-3.4 2.7-6.6 6.6-6.6 3.4 0 6.3 2.7 6.3 6.3l0 0c0 3.4-2.7 6.6-6.6 6.6C667.8 309.7 665.1 306.8 665.1 303.4zM677.1 303.4L677.1 303.4c0-3.1-2.4-5.9-5.9-5.9 -3.1 0-5.9 2.7-5.9 5.9l0 0c0 3.1 2.4 5.9 5.9 5.9C674.7 309 677.1 306.5 677.1 303.4zM668.8 299.5h3.1c1 0 1.7 0.3 2.1 0.7 0.3 0.3 0.7 0.7 0.7 1.4l0 0c0 1-0.7 1.7-1.4 2.1l1.7 2.4h-1.4l-1.7-2.4 0 0h-1.4v2.4h-1.4v-6.6h-0.3V299.5zM672 303c0.7 0 1.4-0.3 1.4-1l0 0c0-0.7-0.3-1-1.4-1h-1.7v2.1C670.2 303 672 303 672 303z" ></path>
 								        </svg>
 								    </section>
 								    <section id="order">
 								        <h2 data-spy="0.2|0.8"><span></span><span>Order</span><span></span></h2>
 								        <p class="copy copy--large copy--narrow copy--isolate">
 								            Enhance your study of God’s Word by reflecting on a passage of Scripture each day and diving deep into its meaning by reading the rich insights you’ve come to enjoy from Alistair Begg.
 								        </p>
 								        <a class="CTA" href="https://truthforlife.org/store/buy/">Buy Now</a>
 								        <span>$10.00 (free shipping)</span>
 								<style>
 								    .frame
 								    {
 								        position:relative;
 								        padding:20px;
 								        border-bottom: none;
 								        box-sizing:border-box;
 								    }
 								    .frame__image
 								    {
 								        position:relative;
 								        z-index:20;
 								        margin-bottom:19px;
 								    }
 								    .frame__bar
 								    {
 								        position:relative;
 								        bottom:0;
 								        left:0;
 								        width:100%;
 								        height:44px;
 								        overflow:hidden;
 								        transform-origin: center 22.5px;
 								    }
 								    .frame__bar span
 								    {
 								        display: block;
 								        position: absolute;
 								        top: -10.5px;
 								        left: 50%;
 								        width: 20px;
 								        height: 20px;
 								        border: 5px solid #000;
 								        border-right-color: transparent;
 								        border-bottom-color: transparent;
 								        transform: translate(-50%, 20px) rotate(45deg);
 								        transition: left 0.4s;
 								    }
 								    .frame__bar span::before, .frame__bar span::after
 								    {
 								        content: " ";
 								        display: block;
 								        position: absolute;
 								        width: 1000px;
 								        height:0px;
 								        border-top: 5px solid black;
 								        transform:rotate(-45deg);
 								    }
 								    .frame__bar span::before
 								    {
 								        bottom: -0.5px;
 								        right: 20px;
 								        transform-origin: right bottom;
 								    }
 								    .frame__bar span::after
 								    {
 								        top: -4px;
 								        left: 17px;
 								        transform-origin: left top;
 								    }
 								    .frame__bar--down
 								    {
 								        transform: scaleY(-1);
 								    }
 								    .frame__bar--up
 								    {
 								        transform: scaleY(1);
 								    }
 								    .frame__bar--1-3 span
 								    {
 								        left:16.6%;
 								    }
 								    .frame__bar--2-3 span
 								    {
 								        left:50%;
 								    }
 								    .frame__bar--3-3 span
 								    {
 								        left:83%;
 								    }
 								    .frame__bracket
 								    {
 								        position:relative;
 								        display:block;
 								        width:100%;
 								        height:0px;
 								        top:-200px;
 								        z-index:10;
 								        border-top:5px solid black;
 								    }
 								    .frame__bracket::before, .frame__bracket::after
 								    {
 								        content:" ";
 								        display:block;
 								        width:15px;
 								        height:171px;
 								        position:absolute;
 								        top:-5px;
 								        border:5px solid black;
 								    }
 								    .frame__bracket::before
 								    {
 								        left:-20px;
 								    }
 								    .frame__bracket::after
 								    {
 								        right:-20px;
 								    }
 								    .frame__button
 								    {
 								        position:relative;
 								        display:block;
 								        float:left;
 								        padding:5px 0px 5px 0px;
 								        box-sizing: border-box;
 								        width:33.3%;
 								        text-align:center;
 								        text-transform: uppercase;
 								        cursor:pointer;
 								    }
 								    .frame__button:hover::before
 								    {
 								        content: " ";
 								        display: block;
 								        width: 7px;
 								        height: 7px;
 								        background: black;
 								        position: absolute;
 								        top: -12px;
 								        left: 50%;
 								        transform: translateX(-5px) rotate(45deg);
 								        transition: top 0.4s, bottom 0.4s;
 								    }
 								    .frame__button--upper:hover::before
 								    {
 								        top:auto;
 								        bottom:-9px;
 								    }
 								    .frame__button[data-frame-active='true']:hover::before
 								    {
 								        bottom:auto;
 								        top: -30px;
 								    }
 								    .frame__button--upper[data-frame-active='true']:hover::before
 								    {
 								        bottom: -26px;
 								        top:auto;
 								    }
 								</style>
 								                <div class="frame">
 								                    <div class="frame__image">
 								                        <div class="Shot" show="cover">
 								                            <div class="Book">
 								                                <img style="display:block; height:100%; width:auto; visibility: visible;" src="book-panel-spine.jpg"/>
 								                                <div class="Page Page--Fill"> <div class="Front Shadow--Radiosity "><img src="book-panel-spine.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-spine.jpg"/></div> </div>
 								                                <div class="Spine">
 								                                    <div class="Page" swing="closed"> <div class="Front Shadow--Radiosity "><img src="book-panel-front.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-front.jpg"/></div> </div>
 								                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
 								                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
 								                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
 								                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
 								                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-3.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
 								                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-5.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-4.jpg"/></div> </div>
 								                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-6.jpg"/></div> </div>
 								                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
 								                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
 								                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
 								                                    <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
 								                                    <div class="Page" swing="closed"> <div class="Front Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> </div>
 								                                </div>
 								                            </div>
 								                        </div>
 								                    </div>
 								                    <div class="frame__button frame__button--upper" onclick="bookPose('cover'); bookClose();">Cover</div><div class="frame__button frame__button--upper" onclick="bookPose('spine'); bookClose();">Spine </div><div class="frame__button frame__button--upper" onclick="bookPose('back');  bookClose();">Back</div>
 								                    <div class="frame__bar"><span></span></div>
 								                    <div class="frame__bracket"></div>
 								                    <div class="frame__button" onclick="bookPose('pages'); bookOpen(4);">Intro</div><div class="frame__button" onclick="bookPose('pages'); bookOpen(5);">1 & 2</div><div class="frame__button" onclick="bookPose('pages'); bookOpen(6);">3 & 4</div>
 								                </div>
 								                <script>
 								                    function frame__setup(inFrame)
 								                    {
 								                        var buttons = inFrame.querySelectorAll(".frame__button");
 								                        var bar = inFrame.querySelector(".frame__bar");
 								                        var active = false;
 								                        function activate(inButton)
 								                        {
 								                            var index = parseInt(inButton.getAttribute("data-frame-index"));
 								                            var classX = "frame__bar--" + ((index % 3)+1) + "-3";
 								                            var classY = index > 2 ? "frame__bar--down" : "frame__bar--up";
 								                            bar.setAttribute("class", "frame__bar " + classX + " " + classY);
 								                            if(active)
 								                            {
 								                                active.setAttribute("data-frame-active", "false");
 								                            }
 								                            active = inButton;
 								                            inButton.setAttribute("data-frame-active", "true");
 								                        }
 								                        for(var i=0; i<buttons.length; i++)
 								                        {
 								                            buttons[i].setAttribute("data-frame-index", i);
 								                            buttons[i].setAttribute("data-frame-active", "false");
 								                            buttons[i].addEventListener("click", function(){ activate(this); });
 								                        }
 								                        activate( buttons[0] );
 								                    }
 								                    frame__setup(document.querySelector(".frame"));
 								                </script>
 								    </section>
 								    <section id="video">
 								        <h2 data-spy="0.2|0.8"><span></span><span>Videos</span><span></span></h2>
 								    </section>
 								    <section id="about">
 								        <h2 data-spy="0.2|0.8"><span></span><span>About</span><span></span></h2>
 								        <p class="copy copy--large copy--narrow copy--isolate">
 								            Each daily reading begins with a passage from Scripture and is followed by a commentary written by Alistair. The commentary explains God’s words, offers encouragement, and reflects on how the Bible’s truth inspires us to live daily for Christ. Each reading concludes with three questions for deeper reflection:
 								        </p>
 								        <ul>
 								            <li>
 								                <strong>Head</strong><p>Nam tempus pellentesque ante, nec iaculis nisi porta id.</p>
 								            </li>
 								            <li>
 								                <strong>Hands</strong><p>Vivamus augue enim, egestas a magna vitae, consequat facilisis urna.</p>
 								            </li>
 								            <li>
 								                <strong>Heart</strong><p>Morbi blandit in ligula eu scelerisque. Maecenas hendrerit eu nunc non molestie.</p>
 								            </li>
 								        </ul>
 								        <a href="#">Look Inside</a>
 								    </section>
 								    <section id="specs">
 								        <h2 data-spy="0.2|0.8">Specs</h2>
 								        <p>
 								            Start with the gospel each and every day with this one-year devotional by renowned Bible teacher Alistair Begg.
 								        </p>
 								        <p>
 								            Each daily devotion includes:
 								        </p>
 								        <ul>
 								            <li>
 								                <p>Reflections from renowned Bible teacher Alistair Begg</p>
 								            </li>
 								            <li>
 								                <p>Prompts for real life application</p>
 								            </li>
 								            <li>
 								                <p>Relevant Scripture passages</p>
 								            </li>
 								            <li>
 								                <p>A yearly Bible reading plan</p>
 								            </li>
 								        </ul>
 								    </section>
 								    <section id="email">
 								        <h2 data-spy="0.2|0.8">Sign Up</h2>
 								    </section>
 								    </main>
 								<!-- init zone -->
 								<script>
 								function $(inSelector){ return document.querySelectorAll(inSelector); }
 								$("nav .button")[0].addEventListener("click", function()
 								{
 								    if(document.body.hasAttribute("nav-open"))
 								    {
 								        document.body.removeAttribute("nav-open");
 								    }
 								    else
 								    {
 								        document.body.setAttribute("nav-open", true);
 								    }
 								});
 								Spy.Init();
 								function JobDuration(inDuration, inHandler, inDone)
 								{
 								    var timeCurrent = 0;
 								    var timeLimit = inDuration*1000;
 								    var timeRelative = 0;
 								    var timeMaxed = false;
 								    return function(inDelta)
 								    {
 								        timeCurrent += inDelta;
 								        timeMaxed = timeCurrent > timeLimit;
 								        if(timeMaxed)
 								        {
 								            inHandler(1);
 								            inDone();
 								            return false;
 								        }
 								        return inHandler(timeCurrent / timeLimit);
 								    };
 								}
 								document.querySelector("nav").addEventListener("click", function(inEvent)
 								{
 								    var domHtml = document.querySelector("html");
 								    var domGoal = document.querySelector(inEvent.target.getAttribute("href"));
 								    var posStart = domHtml.scrollTop;
 								    var posRange = domGoal.getBoundingClientRect().top;
 								    var evtTick = function(inProgress){ domHtml.scrollTop = posStart + posRange*Math.sqrt(1 - Math.pow(1-(inProgress), 2)); };
 								    var evtDone = function(){ Spy.Resume(); };
 								    Spy.Suspend();
 								    Time.Add( JobDuration(0.4, evtTick, evtDone) );
 								    inEvent.preventDefault();
 								});
 								var pages = $("[swing]");
 								var table = $(".Shot")[0];
 								function bookOpen(index)
 								{
 								    pages.forEach((p, i)=> p.setAttribute("swing", i>index ? "right" : "left") );
 								};
 								function bookClose()
 								{
 								    pages.forEach(p=>p.setAttribute("swing", "closed"));
 								};
 								function bookPose(inPanel)
 								{
 								    table.setAttribute("show", inPanel);
 								    bookClose();
 								};
 								Video.Init();
 								// create and initialize youtube videos...
 								var playerPromo, playerInterview;
 								playerPromo = Video.Player('PlayerPromo', 'c_qQHI0rQ6c');
 								playerInterview = Video.Player('PlayerInterview', 'wEkSWh2_yM4');
 								</script>
-												setup

											
										
										
											2021-08-10 16:53:55 -04:00
+								</body>
-												updates

											
										
										
											2021-09-02 17:59:48 -04:00
-												setup

											
										
										
											2021-08-10 16:53:55 -04:00
+								</html>