html {
    box-sizing: border-box;
    height: 100%;
}
*, *:before, *:after {
  box-sizing: inherit;
}



body{
    height: 100%;
}

img{
    max-width:100%;
    height:auto;
}
.right{
    float:right;
}

.container{
    width:100%;
    max-width:80rem;
    margin:0 auto;

    padding-left: 15px;
    padding-right: 15px;
    
}
.container.full-width{
    max-width:100%;
}

.row{
    /* interferes with column nesting 
    width:100%;
    margin:0 auto;
    */
    
    grid-area:column;
    
    margin-left:-15px;
    margin-right:-15px;
}

.column {
    padding-left:15px;
    padding-right:15px;
    font-size: 100%;

        grid-column-end:span 12;
}

/* GRID DEMO */
.grid-demo .column {
    background-color: #e0e0e0;
    color: #fff;
    border:1px solid #ccc;
    border-radius: 5px;
    text-align: center;
    padding:15px;
}


.off-canvas-wrapper{
    height: 100%;
    display: grid;

    grid-template-columns:250px minmax(min-content, 1fr);
    
    grid-template-columns:250px minmax(0, 1fr);
    grid-template-columns:minmax(0, 1fr);
    
    grid-template-rows: minmax(min-content, 1fr);
    grid-template-areas:
        "nav" "page";
    grid-template-areas:
        "page";
    
    justify-content: center;
    /*justify-items: center;*/
    justify-items: stretch;
    align-items: start;
    transition: all 1s;
}


.page{
    display: grid;

    grid-template-columns: minmax(min-content, 1fr);
    
    grid-template-columns: minmax(min-content, 1fr);
    
    grid-template-rows: minmax(min-content, 1fr);
    grid-template-areas:
        "header"
        "main"
        "footer";

    justify-content: center;	
    /*justify-items: center;*/
    justify-items: stretch;
    align-items: start;
}

#logo{
    display:block;
}



.scroll {
    overflow-x: scroll;
}

.fixed{
    position:fixed;
    top:0;
    left:0;
}

/* Perhaps use js to change classes??? */

@media screen and (max-width:543px){
    
    #main-nav{
        position:fixed;
        top:0;
        left:0;
        height: 100%;
        padding: 30px 15px 0;
        padding:0;
        margin-left:0;
        width:250px;
        
        z-index:1;
        
        transition: margin 0.4s;
    }
    
    
    .collapsed #main-nav{
        margin-left:-250px;
    }

    
}
@media screen and (min-width:544px){
    
    #main-nav{
        
    }
    
    #main-nav ul li{
        display:inline-block;
        float:left;
    }
    
}





nav{
    /** BEGIN TEST FOR TOGGLE BUTTON **/
    position:relative;
    /** END TEST FOR TOGGLE BUTTON **/
}


nav{
    height: 100%;
    /*
    grid-area:nav;
    */
    
    
    /*grid-column-end:span 1;*/
}
.wrapper{

}

/* separate class because of specific off-canvas grid **/
.off-canvas-wrapper{
    /* negative margin to hide menu */
    
    /*margin-left:-250px;*/
    
    grid-area:off-canvas-wrapper;
   /*grid-column-end:span 1;*/
}


/** standard show nav??
How does this need to behave on >= 640px??
**/
.off-canvas-wrapper.collapsed{
    /*margin-left:-250px;*/
}


.thumb{
    display:inline-block;
    
    /*
    min-width:350px;
    
    */
    
    min-height:250px;
    height:250px;
    width:100%;
    /*height:56.25%;*/
    position:relative;
    overflow:hidden;
    padding:5px;
    box-shadow:0 2px 4px rgba(0,0,0,0.25);
    /*
    transition: all 2s;
    */
}

/*
a.thumb img{
    -webkit-transition: all 2s;
    transition: all 2s;
    position:absolute;
    top:0;
    bottom:-100%;
    left:0;
}
a.thumb:hover img,
a.thumb:active img,
a.thumb:focus img{
    top:-100%;
    bottom:0;
    left:0;
}
*/

/*
http://stackoverflow.com/questions/21469350/not-possible-to-use-css-calc-with-transformtranlatex-in-ie
*/
a.thumb img {
    
    transform: translateY(0);
    transition: transform 1s ease-in-out;
}
a.thumb:hover img {
    transform: translateY(-100%) translateY(250px);
}



header{
    grid-area:header;
    /*
    grid-column:1 / 13;
    grid-row: 1;
    */
}
main{
    grid-area:main;
    /*
    grid-column:1 / 13;
    grid-row: 1;
    */
}
footer{
    grid-area:footer;
    /*
    grid-column:1 / 13;
    grid-row: 1;
    */
}




ul.menu{
    list-style:none;
    padding:0;
    margin:0;
}
ul.menu a{
    padding:5px;
    text-decoration:none;
    color:#000;
}

.menu.vertical li a{
    display:block;
}



.menu.horizontal{
    display:inline;
}
.menu.horizontal li{
    display:inline;
}



a#toggle-nav{
    /*
    position:fixed;
    left:0;
    top:0;
    */
    position:absolute;
    left:5px;
    top:5px;
    
    display:block;
    width:40px;
    height:40px;
    padding:0;
    line-height:40px;
    font-size:20px;
    border-radius:50%;
    text-align:center;
    text-decoration:none;
    color:#fff;
    text-shadow:0 0 4px rgba(0,0,0,0.25)
    /*text-indent:-9999px;*/


    
    /* menu icons */
    /*
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: "\f0c9";
    */
}
a#toggle-nav:hover,
a#toggle-nav:active,
a#toggle-nav:focus
{
    color:#000;
    text-shadow:none;
    background:#fff;
    box-shadow:0 0 4px rgba(0,0,0,0.25);
    
}



.nav-expanded{
    position:absolute;
    left:0;
    top:0;
}

.off-canvas-wrapper.collapsed{

}




.row{
    display: grid;
    /*
    grid-template-columns: calc(100%/12) calc(100%/12) calc(100%/12) calc(100%/12) calc(100%/12) calc(100%/12) calc(100%/12) calc(100%/12) calc(100%/12) calc(100%/12) calc(100%/12) calc(100%/12);
    grid-template-columns: 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33%;
    */
    grid-template-columns: repeat(12, [col] calc(100%/12) );
    grid-template-rows: auto;
    grid-template-areas:
        "column column column column column column column column column column column column";
    /*grid-gap: 30px;*/
    justify-content: center;	
    /*justify-items: center;*/
    justify-items: stretch;
    align-items: start;
}



.xs-1 {
    grid-column-end:span 1;
}
.xs-2 {
    grid-column-end:span 2;
}
.xs-3 {
    grid-column-end:span 3;
}
.xs-4 {
    grid-column-end:span 4;
}
.xs-5 {
    grid-column-end:span 5;
}
.xs-6 {
    grid-column-end:span 6;
}
.xs-7 {
    grid-column-end:span 7;
}
.xs-8 {
    grid-column-end:span 8;
}
.xs-9 {
    grid-column-end:span 9;
}
.xs-10 {
    grid-column-end:span 10;
}
.xs-11 {
    grid-column-end:span 11;
}
.xs-12 {
    grid-column-end:span 12;
}

/*
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 544px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
*/




/* Flexbox grid */

ul.flex-grid{
    list-style:none;
    margin:0;
    padding:0;
}

.flex-grid{
    display: flex;
     /* perhaps mobile first column, after breakpoint row? */
    flex-direction: row;
    flex-wrap: nowrap; /* everyting on one line?? */
    justify-content:center;
    align-items: center;
    
    
}

    /* flex-grid binnen scrollbare div */
    .scroll .flex-grid{
        width:calc(100%*4);
    }

.flex-grid>*{
  width:100%;
  /*height:300px;*/
    
    /* TODO: relatief schalen, behoud van aspect ratio
    http://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout 
    */
    
  margin: auto;
}




/*
Forms
*/
.form label {
    display: block;
    font-weight: bold;
    padding: 4px 0;
}
.form input[type="text"],
.form input[type="email"],
.form input[type="password"] {
    width: 100%;
    padding: 4px;
    margin: 0 0 0.25em;
}
.form textarea {
    /* width: inherit; */
    width: 100%;
    min-height: 200px;
    padding: 4px;
    margin: 0 0 1em;
}
.form input[type="submit"] {
    padding: 4px 20px;
    float: right;
}

    
/*
Text
*/
.text.justify{
    text-align: justify;
    text-justify: inter-word;
}


@media screen and (min-width: 480px) {
    
    
    /*
    Text
    */

    .text.two-col{
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        -webkit-column-gap: 30px;
        -moz-column-gap: 30px;
        column-gap: 30px;
    }

    
}
@media screen and (min-width: 544px) {

    nav{
        height:auto;
    }
    a#toggle-nav{
        display:none;

    }

    /* flex-grid binnen scrollbare div */
    .scroll .flex-grid{
        /* gracious fallback voor oudere browsers */
        width:200%;
        /* breedte / 2 kolommen * aantal items */

        width:calc(100%/2*4);
    }

    /* breedte van items in flexgrid */
    .flex-grid>*{
      width: calc(100%/2);
    }

    

    
    .off-canvas-wrapper{
        margin-left:0;
        /*grid-template-columns:minmax(250px, calc(100%/3)) minmax(min-content, 1fr);*/
        grid-template-columns:250px minmax(min-content, 1fr);
        grid-template-columns:minmax(min-content, 1fr);
    }
    
    .off-canvas-wrapper.collapsed{
        margin-left:0;
    }


    .sm-1 {
        grid-column-end:span 1;
    }
    .sm-2 {
        grid-column-end:span 2;
    }
    .sm-3 {
        grid-column-end:span 3;
    }
    .sm-4 {
        grid-column-end:span 4;
    }
    .sm-5 {
        grid-column-end:span 5;
    }
    .sm-6 {
        grid-column-end:span 6;
    }
    .sm-7 {
        grid-column-end:span 7;
    }
    .sm-8 {
        grid-column-end:span 8;
    }
    .sm-9 {
        grid-column-end:span 9;
    }
    .sm-10 {
        grid-column-end:span 10;
    }
    .sm-11 {
        grid-column-end:span 11;
    }
    .sm-12 {
        grid-column-end:span 12;
    }
    
    
    
    
    
    
}
@media screen and (min-width: 768px) {
    
    .md-1 {
        grid-column-end:span 1;
    }
    .md-2 {
        grid-column-end:span 2;
    }
    .md-3 {
        grid-column-end:span 3;
    }
    .md-4 {
        grid-column-end:span 4;
    }
    .md-5 {
        grid-column-end:span 5;
    }
    .md-6 {
        grid-column-end:span 6;
    }
    .md-7 {
        grid-column-end:span 7;
    }
    .md-8 {
        grid-column-end:span 8;
    }
    .md-9 {
        grid-column-end:span 9;
    }
    .md-10 {
        grid-column-end:span 10;
    }
    .md-11 {
        grid-column-end:span 11;
    }
    .md-12 {
        grid-column-end:span 12;
    }
     
    
    /* flex-grid binnen scrollbare div */
    .scroll .flex-grid{
        /* gracious fallback voor oudere browsers */
        width:133%;
        /* breedte / 3 kolommen * aantal items */

        width:calc(100%/3*4);
    }

    /* breedte van items in flexgrid */
    .flex-grid>*{
      width: calc(100%/3);
    }
    
    
    
        /*
    Text
    */
    .text.three-col{
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
        -webkit-column-gap: 30px;
        -moz-column-gap: 30px;
        column-gap: 30px;
    }
    
}
@media screen and (min-width: 992px) {

    .lg-1 {
        grid-column-end:span 1;
    }
    .lg-2 {
        grid-column-end:span 2;
    }
    .lg-3 {
        grid-column-end:span 3;
    }
    .lg-4 {
        grid-column-end:span 4;
    }
    .lg-5 {
        grid-column-end:span 5;
    }
    .lg-6 {
        grid-column-end:span 6;
    }
    .lg-7 {
        grid-column-end:span 7;
    }
    .lg-8 {
        grid-column-end:span 8;
    }
    .lg-9 {
        grid-column-end:span 9;
    }
    .lg-10 {
        grid-column-end:span 10;
    }
    .v-11 {
        grid-column-end:span 11;
    }
    .lg-12 {
        grid-column-end:span 12;
    }
    
}



.clearfix:before,
.clearfix:after,
.dl-horizontal dd:before,
.dl-horizontal dd:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after,
.btn-toolbar:before,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:before,
.btn-group-vertical > .btn-group:after,
.nav:before,
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.pager:before,
.pager:after,
.panel-body:before,
.panel-body:after,
.modal-header:before,
.modal-header:after,
.modal-footer:before,
.modal-footer:after {
  display: table;
  content: " ";
}
.clearfix:after,
.dl-horizontal dd:after,
.container:after,
.container-fluid:after,
.row:after,
.form-horizontal .form-group:after,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:after,
.nav:after,
.navbar:after,
.navbar-header:after,
.navbar-collapse:after,
.pager:after,
.panel-body:after,
.modal-header:after,
.modal-footer:after {
  clear: both;
}