@media screen and (max-width: 1200px){
    #top-logo img { max-width: 30px;}
}

/* ================================================================================
   Grid and media stuff
   ================================================================================ */

#gridcnt-main {
    align-item: start;	
    display: grid;
    grid-template-columns: auto;
    grid-auto-flow: column;
}



@media screen and (min-width: 800px){
    
    #gridcnt-main {
	grid-column-gap: 20px;
        grid-template-columns: 15em auto;
    	grid-template-rows: 50px 4em auto 1fr;
    }

    .grid-M { display: block;}
    .grid-S { display: none !important;}

    #top-title  { font-size: 250%; }

}




@media screen and (max-width: 800px){

    .grid-M { display: none !important;}
    .grid-S { display: block;}

    #top-title  {background-color: #b68847; color: black; margin: 0; padding: 0.5em 0.25em; text-align: center;}
    #grid-main, #collection  {padding: 0.5em;}
    #cc-vis{ padding-top: .5em; font-size: 150%; height: 2em;}

    #grid-main  { margin: 1em 0;}

    #shop { margin: 0 1em 1em 1em;}

    #gridcnt-main { grid-template-areas: "toptitle" "topnav" "subnav" "main" "left"  "logo"; }
    #top-title  { font-size: 150%; }
    #curchar-txt{ float: right; width: 45%; }
    #cc-vis{ width: 45%; }
    #sshop { clear: both; }    
}


@media screen and (max-width: 400px){
    #top-title  { font-size: calc(16px + 4vw); }
}


#top-title   { grid-area: toptitle; font-weight: bold; text-align: center; }
#top-nav     { grid-area: topnav; }

#grid-subnav { grid-area: subnav;  margin: 0 0.125em 0 0.750em;}
#grid-shop   { grid-area: left;    margin: 0 0.125em 0 0.750em;}
#grid-main   { grid-area: main;    margin: 0 0.750em 0 0.125em;}


@media screen and (max-width: 800px){
    #grid-subnav { grid-area: subnav;  margin: 0;}
}


@media screen and (min-width: 800px) {
    #gridcnt-main {
	grid-template-areas: "toptitle toptitle" "topnav topnav" "subnav main" "left main";
    }
}