/********************************************/			
/* 			 	WEBKIT 						*/	
/********************************************/
	
@supports (display: grid) {
    /* remove unsupported padding */
    .content { padding: 0; }

    #breakpoint .webkit {display:inline;}
    
    
    .menu.desktop {display: block;}
    .item a.focus-page { display: block;}
    .navbar {display:  block;}
    .sidebar {display:  block;}


    /* global vars */	
        :root {
            --gap: 2em;
            --gap2: 4em;
            --boxwidth: calc(100vw - var(--gap2));
            --boxheight: calc(100vh - var(--gap2));
        }
        
        body {
            font-size: 16px;
            margin: 0; 
            background:#efefef; 
            font-family: georgia, serif; 
            scroll-behavior: smooth;
        }
        
        .text-white {color:white;}
        
        .color-red {background:red;}
        .color-white {background:white;}
        .color-blue {background:#0070ff;}
        .color-black {background:black;}
        
        .proxy-anchor { display: none;}
                    
        
    /* off canvas menu stuff */	
        .menu {
            transition: transform .4s ease-in-out;
            position:fixed;
            background: #fff;
            width: 15vw;
            height: 100vh;
            left:0;
            top:0;
            padding-top:4em;
            padding-bottom: 1em;
            z-index: 1000;
            box-shadow: 0px 10px 40px 0 rgba(0,0,0,.2);
        }
        .menu h3 {padding-left: 1em;}
        .menu ul {list-style: none; padding: 0; margin: 1em;}
        .menu ul li {margin: .25em; display: block; padding:0 1em;}
        .menu ul li a {display: block; padding: .5em 0 .25em; border-bottom: 1px solid white; text-decoration: none; font-size: 1.25em; transition: border .5s linear; color: #222;}
        .menu ul li a:hover { border-bottom: 1px solid #0070ff;}
        .menu-control-mobile {
            display: none;
            font-size: 2em;
            color: #666;
            
            color: white;
            mix-blend-mode: difference; 
        }
        
        
    /* desktop menu format */
    
        @media screen and (min-width: 64em) and (min-height:32em){
            
            #breakpoint .desk {display:inline;}
            
            
            .menu.mobile {display: none;}
            .menu.desktop { width: 100%; max-width:18em;}
            
            .menuBtn {font-size: 2em; display: inline-block; }
            .menuCloseBtn {font-size: 3em; display: block; text-align: right; padding: .35em 1em; position: absolute; width:4.5em;}
            .menuBtn:hover, .menuCloseBtn:hover {color: #0070ff;}
            
            #menuChk {position: fixed; top: -5em;} 

            #menuChk ~ .wrapper {
                left: 1.5em;
            }
            #menuChk ~ .menu {
                transform: translate3d(-20em,0,0);	
            }
            #menuChk:checked ~ .wrapper {
                transform:scale(.5); z-index: 1;
            }
            #menuChk:checked ~ .menu {
                transform: translate3d(0,0,0);	
                z-index: 1000;
            }
        }
        
    
    /* mobile/tablet format */
    @media screen and (max-width:64em), (max-height: 32em){
            
                    
            #breakpoint .mob {display:inline;}
            
            .menu.mobile {top: 0; width: 100%; max-width: 20em; background: #efefef; box-shadow: inset 0 -10px 20px rgba(0,0,0,.2); padding-top: .8em;}
            .menu.desktop {display: none;}
            
            .menuBtn {font-size: 2em; display: inline-block;}
            .menuCloseBtn {font-size: 3em; display: block; text-align: right; padding: .35em .5em; position: absolute; width:calc(100vw - 2.25em); max-width: 240px; }
            .menuBtn:hover, .menuCloseBtn:hover {color: #0070ff;}
            
            .menu-control-mobile {
                display: block;
                position: fixed;
                width: 100vw;
                top:0; 
                left:0;
                z-index: 100;
                padding: 1em;
                transition: left .4s ease-in-out, opacity .4s linear;
            }
            
            #menuChk {position: fixed; top: -5em;} 

            #menuChk ~ .wrapper {
                left: 0em;
                position:relative;
                transition: left .4s ease-in-out;
            }
            #menuChk ~ .menu {
                transform: translate3d(-20em,0,0);	
            }
            #menuChk:checked ~ .wrapper {
                left: 20em;
                transform: scale(1);
                z-index: 1;
            }
            #menuChk:checked ~ .menu {
                transform: translate3d(0,0,0);	
                z-index: 1000;
            }
            #menuChk:checked ~ .menu-control-mobile {
                left:10em; /*font size 2ems, so half for menu width*/
                z-index: 1000;
                opacity: 0;
            }
            #menuChk:checked ~ .menu-control-mobile > .menuCtrlButton {
                position: absolute;
                top:0;
                left: 0px;
                padding: 1em;
                width: calc(100vw - 10em); /*font size 2ems, so half for menu width*/
                height: 100vh;
                
            }
            
        }
        
        
        
    /* desktop navigation: transforms for proxy anchors. */	
        @media screen and (min-width: 64em) and (min-height:32em){
        
            /* sets X/Y coordinates for each cell of the grid */	
            :target ~ .grid { transform: translate3d( 0, 0, 0); }
            #p1:target ~ .grid { transform: translate3d( 0, 0, 0); }
            #p2:target ~ .grid { transform: translate3d( calc(-1 * var(--boxwidth) ), 0, 0); }
            #p3:target ~ .grid { transform: translate3d( calc(-2 * var(--boxwidth) ), 0, 0); }
            #p4:target ~ .grid { transform: translate3d( 0, calc(-1 * var(--boxheight)), 0); }
            #p5:target ~ .grid { transform: translate3d( calc(-1 * var(--boxwidth) ), calc(-1 * var(--boxheight)), 0); }
            #p6:target ~ .grid { transform: translate3d( calc(-2 * var(--boxwidth) ), calc(-1 * var(--boxheight)), 0); }
            #p7:target ~ .grid { transform: translate3d( 0, calc(-2 * var(--boxheight)), 0); }
            #p8:target ~ .grid { transform: translate3d( calc(-1 * var(--boxwidth) ), calc(-2 * var(--boxheight)), 0); }
            #p9:target ~ .grid { transform: translate3d( calc(-2 * var(--boxwidth) ), calc(-2 * var(--boxheight)), 0); }
            #p10:target ~ .grid { transform: translate3d( 0, calc(-3 * var(--boxheight)), 0); }
            #p11:target ~ .grid { transform: translate3d( calc(-1 * var(--boxwidth) ), calc(-3 * var(--boxheight)), 0); }
            #p12:target ~ .grid { transform: translate3d( calc(-2 * var(--boxwidth) ), calc(-3 * var(--boxheight)), 0); }

            /* remove hover behaviour from untargeted page (homepage, initial load) */		
            
            *:not(:target) ~ .grid > #item1.item:hover {transform:scale(1); z-index: 10;} 
                #p2:target ~ .grid > #item1.item:hover,
                #p3:target ~ .grid > #item1.item:hover,
                #p4:target ~ .grid > #item1.item:hover,
                #p5:target ~ .grid > #item1.item:hover,
                #p6:target ~ .grid > #item1.item:hover,
                #p7:target ~ .grid > #item1.item:hover,
                #p8:target ~ .grid > #item1.item:hover,		
                #p9:target ~ .grid > #item1.item:hover,				
                #p10:target ~ .grid > #item1.item:hover,				
                #p11:target ~ .grid > #item1.item:hover,	
                #p12:target ~ .grid > #item1.item:hover {transform:scale(1.01); z-index: 100;} 
            
            
            /* remove hover behaviour from selected page */		
            #p1:target ~ .grid > #item1.item:hover {transform:scale(1); z-index: 10;} 
            #p2:target ~ .grid > #item2.item:hover {transform:scale(1); z-index: 10;} 
            #p3:target ~ .grid > #item3.item:hover {transform:scale(1); z-index: 10;}  
            #p4:target ~ .grid > #item4.item:hover {transform:scale(1); z-index: 10;} 
            #p5:target ~ .grid > #item5.item:hover {transform:scale(1); z-index: 10;}  
            #p6:target ~ .grid > #item6.item:hover {transform:scale(1); z-index: 10;}  
            #p7:target ~ .grid > #item7.item:hover {transform:scale(1); z-index: 10;} 
            #p8:target ~ .grid > #item8.item:hover {transform:scale(1); z-index: 10;}  
            #p9:target ~ .grid > #item9.item:hover {transform:scale(1); z-index: 10;} 
            #p10:target ~ .grid > #item10.item:hover {transform:scale(1); z-index: 10;}  
            #p11:target ~ .grid > #item11.item:hover {transform:scale(1); z-index: 10;}  
            #p12:target ~ .grid > #item12.item:hover {transform:scale(1); z-index: 10;}  
            
            /* remove focus link from untargeted page (homepage, initial load) */	
            
            *:not(:target) ~ .grid > #item1 .focus-page {display:none;} 
                #p1:target ~ .grid > #item1 .focus-page,
                #p2:target ~ .grid > #item1 .focus-page,
                #p3:target ~ .grid > #item1 .focus-page,
                #p4:target ~ .grid > #item1 .focus-page,
                #p5:target ~ .grid > #item1 .focus-page,
                #p6:target ~ .grid > #item1 .focus-page,
                #p7:target ~ .grid > #item1 .focus-page,
                #p8:target ~ .grid > #item1 .focus-page,				
                #p9:target ~ .grid > #item1 .focus-page,				
                #p10:target ~ .grid > #item1 .focus-page,				
                #p11:target ~ .grid > #item1 .focus-page,	
                #p12:target ~ .grid > #item1 .focus-page {display:block; z-index:2000;} 
            
            
            /* remove focus link from selected page */	
            #p1:target ~ .grid > #item1 .focus-page {display:none;} 
            #p2:target ~ .grid > #item2 .focus-page {display:none;} 
            #p3:target ~ .grid > #item3 .focus-page {display:none;} 
            #p4:target ~ .grid > #item4 .focus-page {display:none;} 
            #p5:target ~ .grid > #item5 .focus-page {display:none;} 
            #p6:target ~ .grid > #item6 .focus-page {display:none;}  
            #p7:target ~ .grid > #item7 .focus-page {display:none;} 
            #p8:target ~ .grid > #item8 .focus-page {display:none;} 
            #p9:target ~ .grid > #item9 .focus-page {display:none;} 
            #p10:target ~ .grid > #item10 .focus-page {display:none;}  
            #p11:target ~ .grid > #item11 .focus-page {display:none;} 
            #p12:target ~ .grid > #item12 .focus-page {display:none;}  
            
            label.selected-closer{
                display:none;
                position: absolute;
                top:0; left: 0;
                width: calc(100vw - 4em);
                height: calc(100vh - 4em);
                z-index: 100;
            }
            
            /* add menu control lable to untargetted selected page (homepage, initial load) */	
            /* should be visible when target is undefined, but should be invisible when any other target is active */
            #menuChk:checked ~ .wrapper *:not(:target) ~ .grid > #item1 label.selected-closer {display:block;} 
                #menuChk:checked ~ .wrapper p1:target ~ .grid > #item1 label.selected-closer {display:block;} 
                #menuChk:checked ~ .wrapper p2:target ~ .grid > #item1 label.selected-closer {display:block;} 
                #menuChk:checked ~ .wrapper p3:target ~ .grid > #item1 label.selected-closer {display:block;} 
                #menuChk:checked ~ .wrapper p4:target ~ .grid > #item1 label.selected-closer {display:block;} 
                #menuChk:checked ~ .wrapper p5:target ~ .grid > #item1 label.selected-closer {display:block;} 
                #menuChk:checked ~ .wrapper p6:target ~ .grid > #item1 label.selected-closer {display:block;} 
                #menuChk:checked ~ .wrapper p7:target ~ .grid > #item1 label.selected-closer {display:block;} 
                #menuChk:checked ~ .wrapper p8:target ~ .grid > #item1 label.selected-closer {display:block;} 
                #menuChk:checked ~ .wrapper p9:target ~ .grid > #item1 label.selected-closer {display:block;} 
                #menuChk:checked ~ .wrapper p10:target ~ .grid > #item1 label.selected-closer {display:block;} 
                #menuChk:checked ~ .wrapper p11:target ~ .grid > #item1 label.selected-closer {display:block;} 
                #menuChk:checked ~ .wrapper p12:target ~ .grid > #item1 label.selected-closer {display:block;} 
                
            
            
            /* add menu control lable to selected page*/
            #menuChk:checked ~ .wrapper #p1:target ~ .grid > #item1 label.selected-closer {display:block;} 
            #menuChk:checked ~ .wrapper #p2:target ~ .grid > #item2 label.selected-closer {display:block;}  
            #menuChk:checked ~ .wrapper #p3:target ~ .grid > #item3 label.selected-closer {display:block;} 
            #menuChk:checked ~ .wrapper #p4:target ~ .grid > #item4 label.selected-closer {display:block;}  
            #menuChk:checked ~ .wrapper #p5:target ~ .grid > #item5 label.selected-closer {display:block;}  
            #menuChk:checked ~ .wrapper #p6:target ~ .grid > #item6 label.selected-closer {display:block;}   
            #menuChk:checked ~ .wrapper #p7:target ~ .grid > #item7 label.selected-closer {display:block;} 
            #menuChk:checked ~ .wrapper #p8:target ~ .grid > #item8 label.selected-closer {display:block;} 
            #menuChk:checked ~ .wrapper #p9:target ~ .grid > #item9 label.selected-closer {display:block;}  
            #menuChk:checked ~ .wrapper #p10:target ~ .grid > #item10 label.selected-closer {display:block;}  
            #menuChk:checked ~ .wrapper #p11:target ~ .grid > #item11 label.selected-closer {display:block;}  
            #menuChk:checked ~ .wrapper #p12:target ~ .grid > #item12 label.selected-closer {display:block;}   
        
        }
        
        
    /* container elements */	
        @media screen and (min-width: 64em) and (min-height:32em){
            
            .wrapper {
                transition: transform .4s ease-in-out;
                position: fixed;
                top: 1.5em;
                left: 1.5em;
                width: calc(100vw - var(--gap)); 
                height: calc(100vh - var(--gap))
            }
        
            .grid {
                position: absolute;
                transition: transform .7s ease-in-out;
                width: 300vw;
                height: 400vh;
                display: grid;
                grid-template: repeat(4, var(--boxheight)) var(--gap) / repeat(3, var(--boxwidth));
                grid-gap: .5em;
            }
            .footer{
                grid-column: 1 / span 3;
            }
        }
        
        
    /* container elements mobile*/	
        @media screen and (max-width: 64em){
            .wrapper {
                position: static;			
            }
            .grid {
                position: static;
                transition: transform .7s ease-in-out;
                display: block;
            }
            .footer{
                grid-column: 1 / span 3;
            }
        }
        
        
    /* TEXT PAGE */	
        
        /* desktop grid format */
        @media screen and (min-width: 64em) and (min-height:32em){
            
            
            .item {transition: transform .2s ease-in-out;} 
            
            .item:hover {transform:scale(1.01); z-index: 100;} 
            
            /* sits within page content, click to navigate to next page in sequence */
            .item a.next-page{
                display: inline-block;
                text-decoration: none;
                padding: 1em .75em;
                border-radius: 5em;
                z-index: 2000;
                box-shadow: 0 3px 8px rgba(0,0,0,.2);
                
                
            }
            
            /* fills grid cell, click to navigate to parent page */
            .item a.focus-page {
                display: block; 
                position: absolute;
                left: 0; 
                top: 0;
                width: var(--boxwidth);
                height: var(--boxheight);
                opacity: 0;
                z-index: 100;
            }
        }
        
        /* short desktop format */
        @media screen and (max-height: 32em){
            body {}
            .item a.focus-page { display: none;}		
            .navbar {display: none;}
        }
    
        @media screen and (max-width: 64em){
            body {}
            .item a.focus-page { display: none;}		
            .navbar {display: none;}
        }
        
        @media screen and (min-width: 64em){
            .columns {
                column-count: 2;
                column-gap: 2em;
            }
        }

        
        
}


/********************************************/			
/* 			 	IE Edge 12+					*/	
/********************************************/
	
@supports (display: -ms-grid) {

    /* remove unsupported padding */
    .content { padding: 0; }
    
    #breakpoint .edge {display:inline;}
    
    
    .menu.desktop {display: block;}
    .item a.focus-page { display: block;}
    .navbar {display:  block;}
    .sidebar {display:  block;}
        
    body {
                font-size: 16px;
                margin: 0; 
                background:#efefef; 
                font-family: georgia, serif; 
                scroll-behavior: smooth;
        }
        
        .text-white {color:white;}
        
        .color-red {background:red;}
        .color-white {background:white;}
        .color-blue {background:#0070ff;}
        .color-black {background:black;}
        
        .proxy-anchor { display: none;}
                    
        
    /* off canvas menu stuff */	
        .menu {
            transition: transform .4s ease-in-out;
            position:fixed;
            background: #fff;
            width: 15vw;
            height: 100vh;
            left:0;
            top:0;
            padding-top:4em;
            padding-bottom: 1em;
            z-index: 1000;
            box-shadow: 0px 10px 40px 0 rgba(0,0,0,.2);
        }
        .menu h3 {padding-left: 1em;}
        .menu ul {list-style: none; padding: 0; margin: 1em;}
        .menu ul li {margin: .25em; display: block; padding:0 1em;}
        .menu ul li a {display: block; padding: .5em 0 .25em; border-bottom: 1px solid white; text-decoration: none; font-size: 1.25em; transition: border .5s linear; color: #222;}
        .menu ul li a:hover { border-bottom: 1px solid #0070ff;}
        .menu-control-mobile {
            display: none;	
            color: #666;
            font-size: 2em;
        }
        
        
    /* desktop menu format */
        @media screen and (min-width: 64em) and (min-height:32em){
            
            #breakpoint .desk {display:inline;}
            
            .menu.mobile {display: none;}
            .menu.desktop { width: 100%; max-width:18em;}
            
            .menuBtn {font-size: 2em; display: inline-block; }
            .menuCloseBtn {font-size: 3em; display: block; text-align: right; padding: .35em 1em; position: absolute; width:4.5em;}
            .menuBtn:hover, .menuCloseBtn:hover {color: #0070ff;}
            
            
            #menuChk {position: fixed; top: -5em;} 

            #menuChk ~ .wrapper {
                left: 1.5em;
            }
            #menuChk ~ .menu {
                transform: translate3d(-20em,0,0);	
            }
            #menuChk:checked ~ .wrapper {
                transform:scale(.5); z-index: 1;
            }
            #menuChk:checked ~ .menu {
                transform: translate3d(0,0,0);	
                z-index: 1000;
            }
        }
        
        
    
    /* mobile menu format */
        @media screen and (max-width:64em), (max-height: 32em){
            
            #breakpoint .mob {display:inline;}
            
            .menu.mobile {top: 0; width: 100%; max-width: 20em; background: #efefef; box-shadow: inset 0 -10px 20px rgba(0,0,0,.2); padding-top: .8em;}
            .menu.desktop {display: none;}
            
            .menuBtn {font-size: 2em; display: inline-block;}
            .menuCloseBtn {font-size: 3em; display: block; text-align: right; padding: .35em .5em; position: absolute; width:calc(100vw - 2.25em); max-width: 5.75em; }
            .menuBtn:hover, .menuCloseBtn:hover {color: #0070ff;}
            
            .menu-control-mobile {
                display: block;
                position: fixed;
                width: 100vw;
                top:0; 
                left:0;
                z-index: 100;
                padding: 1em;
                transition: left .4s ease-in-out, opacity .4s linear;
                
            }
            
            #menuChk {position: fixed; top: -5em;} 

            #menuChk ~ .wrapper {
                left: 0em;
                position:relative;
                transition: left .4s ease-in-out;
            }
            #menuChk ~ .menu {
                transform: translate3d(-20em,0,0);	
            }
            #menuChk:checked ~ .wrapper {
                left: 20em;
                transform: scale(1);
                z-index: 1;
            }
            #menuChk:checked ~ .menu {
                transform: translate3d(0,0,0);	
                z-index: 1000;
            }
            #menuChk:checked ~ .menu-control-mobile {
                left:10em; /*font size 2ems, so half for menu width*/
                z-index: 1000;
                opacity: 0;
            }
            #menuChk:checked ~ .menu-control-mobile > .menuCtrlButton {
                position: absolute;
                top:0;
                left: 0px;
                padding: 1em;
                width: calc(100vw - 10em); /*font size 2ems, so half for menu width*/
                height: 100vh;
                
            }
            
        }
        
        
        
    /* desktop navigation: transforms for proxy anchors. */	
        @media screen and (min-width: 64em) and (min-height:32em){
        
            /* sets X/Y coordinates for each cell of the grid */	
            :target ~ .grid { transform: translate3d( 0, 0, 0); }
            #p1:target ~ .grid { transform: translate3d( 0, 0, 0); }
            #p2:target ~ .grid { transform: translate3d( calc(-1 * var(--boxwidth) ), 0, 0); }
            #p3:target ~ .grid { transform: translate3d( calc(-2 * var(--boxwidth) ), 0, 0); }
            #p4:target ~ .grid { transform: translate3d( 0, calc(-1 * var(--boxheight)), 0); }
            #p5:target ~ .grid { transform: translate3d( calc(-1 * var(--boxwidth) ), calc(-1 * var(--boxheight)), 0); }
            #p6:target ~ .grid { transform: translate3d( calc(-2 * var(--boxwidth) ), calc(-1 * var(--boxheight)), 0); }
            #p7:target ~ .grid { transform: translate3d( 0, calc(-2 * var(--boxheight)), 0); }
            #p8:target ~ .grid { transform: translate3d( calc(-1 * var(--boxwidth) ), calc(-2 * var(--boxheight)), 0); }
            #p9:target ~ .grid { transform: translate3d( calc(-2 * var(--boxwidth) ), calc(-2 * var(--boxheight)), 0); }
            #p10:target ~ .grid { transform: translate3d( 0, calc(-3 * var(--boxheight)), 0); }
            #p11:target ~ .grid { transform: translate3d( calc(-1 * var(--boxwidth) ), calc(-3 * var(--boxheight)), 0); }
            #p12:target ~ .grid { transform: translate3d( calc(-2 * var(--boxwidth) ), calc(-3 * var(--boxheight)), 0); }

            /* remove hover behaviour from untargeted page (homepage, initial load) */		
            
            *:not(:target) ~ .grid > #item1.item:hover {transform:scale(1); z-index: 10;} 
                #p2:target ~ .grid > #item1.item:hover,
                #p3:target ~ .grid > #item1.item:hover,
                #p4:target ~ .grid > #item1.item:hover,
                #p5:target ~ .grid > #item1.item:hover,
                #p6:target ~ .grid > #item1.item:hover,
                #p7:target ~ .grid > #item1.item:hover,
                #p8:target ~ .grid > #item1.item:hover,		
                #p9:target ~ .grid > #item1.item:hover,				
                #p10:target ~ .grid > #item1.item:hover,				
                #p11:target ~ .grid > #item1.item:hover,	
                #p12:target ~ .grid > #item1.item:hover {transform:scale(1.01); z-index: 100;} 
            
            
            /* remove hover behaviour from selected page */		
            #p1:target ~ .grid > #item1.item:hover {transform:scale(1); z-index: 10;} 
            #p2:target ~ .grid > #item2.item:hover {transform:scale(1); z-index: 10;} 
            #p3:target ~ .grid > #item3.item:hover {transform:scale(1); z-index: 10;}  
            #p4:target ~ .grid > #item4.item:hover {transform:scale(1); z-index: 10;} 
            #p5:target ~ .grid > #item5.item:hover {transform:scale(1); z-index: 10;}  
            #p6:target ~ .grid > #item6.item:hover {transform:scale(1); z-index: 10;}  
            #p7:target ~ .grid > #item7.item:hover {transform:scale(1); z-index: 10;} 
            #p8:target ~ .grid > #item8.item:hover {transform:scale(1); z-index: 10;}  
            #p9:target ~ .grid > #item9.item:hover {transform:scale(1); z-index: 10;} 
            #p10:target ~ .grid > #item10.item:hover {transform:scale(1); z-index: 10;}  
            #p11:target ~ .grid > #item11.item:hover {transform:scale(1); z-index: 10;}  
            #p12:target ~ .grid > #item12.item:hover {transform:scale(1); z-index: 10;}  
            
            /* remove focus link from untargeted page (homepage, initial load) */			
            *:not(:target) ~ .grid > #item1 .focus-page {display:none;} 
                #p1:target ~ .grid > #item1 .focus-page,
                #p2:target ~ .grid > #item1 .focus-page,
                #p3:target ~ .grid > #item1 .focus-page,
                #p4:target ~ .grid > #item1 .focus-page,
                #p5:target ~ .grid > #item1 .focus-page,
                #p6:target ~ .grid > #item1 .focus-page,
                #p7:target ~ .grid > #item1 .focus-page,
                #p8:target ~ .grid > #item1 .focus-page,				
                #p9:target ~ .grid > #item1 .focus-page,				
                #p10:target ~ .grid > #item1 .focus-page,				
                #p11:target ~ .grid > #item1 .focus-page,	
                #p12:target ~ .grid > #item1 .focus-page {display:block; z-index:2000;} 
            
            
            /* remove focus link from selected page */	
            #p1:target ~ .grid > #item1 .focus-page {display:none;} 
            #p2:target ~ .grid > #item2 .focus-page {display:none;} 
            #p3:target ~ .grid > #item3 .focus-page {display:none;} 
            #p4:target ~ .grid > #item4 .focus-page {display:none;} 
            #p5:target ~ .grid > #item5 .focus-page {display:none;} 
            #p6:target ~ .grid > #item6 .focus-page {display:none;}  
            #p7:target ~ .grid > #item7 .focus-page {display:none;} 
            #p8:target ~ .grid > #item8 .focus-page {display:none;} 
            #p9:target ~ .grid > #item9 .focus-page {display:none;} 
            #p10:target ~ .grid > #item10 .focus-page {display:none;}  
            #p11:target ~ .grid > #item11 .focus-page {display:none;} 
            #p12:target ~ .grid > #item12 .focus-page {display:none;}  
            
            label.selected-closer{
                display:none;
                position: absolute;
                top:0; left: 0;
                width: calc(100vw - 4em);
                height: calc(100vh - 4em);
                z-index: 100;
            }
            
            /* add menu control lable to untargetted selected page (homepage, initial load) */	
            /* should be visible when target is undefined, but should be invisible when any other target is active */
            #menuChk:checked ~ .wrapper *:not(:target) ~ .grid > #item1 label.selected-closer {display:block;} 
                #menuChk:checked ~ .wrapper p1:target ~ .grid > #item1 label.selected-closer {display:block;} 
                #menuChk:checked ~ .wrapper p2:target ~ .grid > #item1 label.selected-closer {display:block;} 
                #menuChk:checked ~ .wrapper p3:target ~ .grid > #item1 label.selected-closer {display:block;} 
                #menuChk:checked ~ .wrapper p4:target ~ .grid > #item1 label.selected-closer {display:block;} 
                #menuChk:checked ~ .wrapper p5:target ~ .grid > #item1 label.selected-closer {display:block;} 
                #menuChk:checked ~ .wrapper p6:target ~ .grid > #item1 label.selected-closer {display:block;} 
                #menuChk:checked ~ .wrapper p7:target ~ .grid > #item1 label.selected-closer {display:block;} 
                #menuChk:checked ~ .wrapper p8:target ~ .grid > #item1 label.selected-closer {display:block;} 
                #menuChk:checked ~ .wrapper p9:target ~ .grid > #item1 label.selected-closer {display:block;} 
                #menuChk:checked ~ .wrapper p10:target ~ .grid > #item1 label.selected-closer {display:block;} 
                #menuChk:checked ~ .wrapper p11:target ~ .grid > #item1 label.selected-closer {display:block;} 
                #menuChk:checked ~ .wrapper p12:target ~ .grid > #item1 label.selected-closer {display:block;} 
                
            
            
            /* add menu control lable to selected page*/
            #menuChk:checked ~ .wrapper #p1:target ~ .grid > #item1 label.selected-closer {display:block;} 
            #menuChk:checked ~ .wrapper #p2:target ~ .grid > #item2 label.selected-closer {display:block;}  
            #menuChk:checked ~ .wrapper #p3:target ~ .grid > #item3 label.selected-closer {display:block;} 
            #menuChk:checked ~ .wrapper #p4:target ~ .grid > #item4 label.selected-closer {display:block;}  
            #menuChk:checked ~ .wrapper #p5:target ~ .grid > #item5 label.selected-closer {display:block;}  
            #menuChk:checked ~ .wrapper #p6:target ~ .grid > #item6 label.selected-closer {display:block;}   
            #menuChk:checked ~ .wrapper #p7:target ~ .grid > #item7 label.selected-closer {display:block;} 
            #menuChk:checked ~ .wrapper #p8:target ~ .grid > #item8 label.selected-closer {display:block;} 
            #menuChk:checked ~ .wrapper #p9:target ~ .grid > #item9 label.selected-closer {display:block;}  
            #menuChk:checked ~ .wrapper #p10:target ~ .grid > #item10 label.selected-closer {display:block;}  
            #menuChk:checked ~ .wrapper #p11:target ~ .grid > #item11 label.selected-closer {display:block;}  
            #menuChk:checked ~ .wrapper #p12:target ~ .grid > #item12 label.selected-closer {display:block;}   
        
        }
    
    
    
    
    /* container elements */	
    @media screen and (min-width: 64em) and (min-height:32em) {
        
        .wrapper{
            transition: transform .4s ease-in-out;
            position: fixed;
            top: 1.5em;
            left: 1.5em;
            width: calc(100vw - 2em); 
            height: calc(100vh - 2em)
        }
                
        .grid {
                transition: transform .5s ease-in-out;
                width: 300vw;
                height: 400vh;
                display: -ms-grid;
                -ms-grid-columns: 1fr 1fr 1fr;
                -ms-grid-rows: 1fr 1fr 1fr 1fr;	
                -ms-grid-row-gap: .5em;
                -ms-grid-column-gap: .5em;
        }
            
        #item1{ -ms-grid-row: 1; -ms-grid-column: 1; }
        #item2{ -ms-grid-row: 1; -ms-grid-column: 2; }
        #item3{ -ms-grid-row: 1; -ms-grid-column: 3; }
        #item4{ -ms-grid-row: 2; -ms-grid-column: 1; }
        #item5{ -ms-grid-row: 2; -ms-grid-column: 2; }
        #item6{ -ms-grid-row: 2; -ms-grid-column: 3; }
        #item7{ -ms-grid-row: 3; -ms-grid-column: 1; }
        #item8{ -ms-grid-row: 3; -ms-grid-column: 2; }
        #item9{ -ms-grid-row: 3; -ms-grid-column: 3; }
        #item10{ -ms-grid-row: 4; -ms-grid-column: 1; }
        #item11{ -ms-grid-row: 4; -ms-grid-column: 2; }
        #item12{ -ms-grid-row: 4; -ms-grid-column: 3; }
        
        .footer{
            -ms-grid-row: 5; 
            -ms-grid-column: 1;
            -ms-grid-column-span: 3; 
        }
    }
    
    /* mobile page styles */
    @media screen and (max-width: 64em){
        .wrapper {
            position: static;			
        }
        .grid {
            position: static;
            transition: transform .7s ease-in-out;
            display: block;
        }
        .footer{
            grid-column: 1 / span 3;
        }
    }
    


    
/* TEXT PAGE */	
    
    /* desktop grid format */
    @media screen and (min-width: 64em) and (min-height:32em){
            
        /* menu active, item rollover effect */	
        #menuChk:checked ~ .wrapper > .grid > .item:hover {box-shadow:inset 0px 0px 0 10px rgba(0,112,255,.5); z-index: 100;}
        #menuChk:checked ~ .wrapper > .grid > .item.color-blue:hover {box-shadow:inset 0px 0px 0 10px rgba(255,255,255,.5); z-index: 100;}
        #menuChk:checked ~ .wrapper > .grid > .item.color-black:hover {box-shadow:inset 0px 0px 0 10px rgba(0,112,255,.7); z-index: 100;}
        
        
        /* sits within page content, click to navigate to next page in sequence */
        .item a.next-page{
            display: inline-block;
            text-decoration: none;
            padding: 1em .75em;
            border-radius: 5em;
            z-index: 100;
            box-shadow: 0 3px 8px rgba(0,0,0,.2);
        }
        
        /* fills grid cell, click to navigate to parent page */
        .item a.focus-page {
            display: block; 
            position: absolute;
            left: 0; 
            top: 0;
            width: calc(100vw - 2em);
            height: calc(100vh - 2em);
            opacity: 0;
            z-index: 100;
        }
        
        /* desktop transforms for proxy anchors. overwrite declarations using variables */	
        
        /* sets X/Y coordinates for each cell of the grid */	
        #p1:target ~ .grid { transform: translate3d( 0, 0, 0); }
        #p2:target ~ .grid { transform: translate3d( -100vw, 0, 0); }
        #p3:target ~ .grid { transform: translate3d( -200vw, 0, 0); }
        #p4:target ~ .grid { transform: translate3d( 0, -100vh, 0); }
        #p5:target ~ .grid { transform: translate3d( -100vw, -100vh, 0); }
        #p6:target ~ .grid { transform: translate3d( -200vw, -100vh, 0); }
        #p7:target ~ .grid { transform: translate3d( 0, -200vh, 0); }
        #p8:target ~ .grid { transform: translate3d( -100vw, -200vh, 0); }
        #p9:target ~ .grid { transform: translate3d( -200vw, -200vh, 0); }
        #p10:target ~ .grid { transform: translate3d( 0, -300vh, 0); }
        #p11:target ~ .grid { transform: translate3d( -100vw, -300vh, 0); }
        #p12:target ~ .grid { transform: translate3d( -200vw, -300vh, 0); }

        
        /* label element enables double click to close menu*/
        label.selected-closer{
            display:none;
            position: absolute;
            top:0; left: 0;
            width: calc(100vw - 2em);
            height: calc(100vh - 2em);
            z-index: 100;
        }
        
    }

    /* short desktop format */
    @media screen and (max-height: 32em){
            body {}
            .item a.focus-page { display: none;}		
            .navbar {display: none;}
    }

    /* mobile format */
    @media screen and (max-width: 64em){
    @media screen and (max-width: 64em){
            body {}
            .item a.focus-page { display: none;}		
            .navbar {display: none;}
    }

    @media screen and (min-width: 64em){
            .columns {
                column-count: 2;
                column-gap: 2em;
            }
    }

}	


        

   

/********************************************/			
/* 			 	IE 10, 11					*/	
/********************************************/

	
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	/* remove unsupported padding */
	.content { padding: 0; }
		
	#breakpoint .ie {display:inline;}
	#breakpoint .mob {display:inline;}
			
			.menu.desktop {display: block;}
			.item a.focus-page { display: block;}
			.navbar {display:  block;}
			.sidebar {display:  block;}
			
	
			body {
					font-size: 16px;
					margin: 0; 
					background:#efefef; 
					font-family: georgia, serif; 
					scroll-behavior: smooth;
			}
			
			.text-white {color:white;}
			
			.color-red {background:red;}
			.color-white {background:white;}
			.color-blue {background:#0070ff;}
			.color-black {background:black;}
			
			.proxy-anchor { display: none;}
						
			
		/* off canvas menu stuff */	
			.menu {
				transition: transform .4s ease-in-out;
				position:fixed;
				background: #fff;
				width: 15vw;
				height: 100vh;
				left:0;
				top:0;
				padding-top:4em;
				padding-bottom: 1em;
				z-index: 1000;
				box-shadow: 0px 10px 40px 0 rgba(0,0,0,.2);
			}
			
			.menu h3 {padding-left: 1em;}
			.menu ul {list-style: none; padding: 0; margin: 1em;}
			.menu ul li {margin: .25em; display: block; padding:0 1em;}
			.menu ul li a {display: block; padding: .5em 0 .25em; border-bottom: 1px solid white; text-decoration: none; font-size: 1.25em; transition: border .5s linear; color: #222;}
			.menu ul li a:hover { border-bottom: 1px solid #0070ff;}
			.menu-control-mobile {display: none;}
			
		
			
				.menu.mobile {top: 0; width: 100%; max-width: 20em; background: #efefef; box-shadow: inset 0 -10px 20px rgba(0,0,0,.2); padding-top: 1em;}
				.menu.desktop {display: none;}
				
				.menuBtn {font-size: 2em; display: inline-block;}
				.menuCloseBtn {font-size: 3em; display: block; text-align: right; padding: .35em .5em; position: absolute; width:calc(100vw - 2.25em); max-width: 280px; }
				.menuBtn:hover, .menuCloseBtn:hover {color: #0070ff;}
				
				.menu-control-mobile {
					color: #666;
					font-size: 2em;
					display: block;
					position: fixed;
					width: 100vw;
					top:0; 
					left:0;
					z-index: 100;
					padding: 1em;
					transition: left .4s ease-in-out, opacity .4s linear;
				}
				
				#menuChk {position: fixed; top: -5em;} 

				#menuChk ~ .wrapper {
					left: 0em;
					position:relative;
					transition: left .4s ease-in-out;
				}
				#menuChk ~ .menu {
					transform: translate3d(-20em,0,0);	
				}
				#menuChk:checked ~ .wrapper {
					left: 20em;
					transform: scale(1);
					z-index: 1;
				}
				#menuChk:checked ~ .menu {
					transform: translate3d(0,0,0);	
					z-index: 1000;
				}
				#menuChk:checked ~ .menu-control-mobile {
					left:10em; /*font size 2ems, so half for menu width*/
					z-index: 1000;
					opacity: 0;
				}
				#menuChk:checked ~ .menu-control-mobile > .menuCtrlButton {
					position: absolute;
					top:0;
					left: 0px;
					padding: 1em;
					width: calc(100vw - 10em); /*font size 2ems, so half for menu width*/
					height: 100vh;
					
				}
				
			
			
			
	 
			.item a.focus-page { display: none;}
			.navbar {display: none;}
			.menu-control-mobile {
					color: #666;
					font-size: 2em;
					display: block;
					position: fixed;
					width: 100vw;
					top:0; 
					left:0;
					z-index: 100;
					padding: 1em;
					transition: left .4s ease-in-out, opacity .4s linear;
			}
			#menuChk:checked ~ .wrapper {
				transform:scale(1); z-index: 1;
			}
			
			/* hide gallery from IE */
			a.gallery-link {display: none !important;}
			.layout.gallery { display: none;}
	
		
}