html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
    border: 0;
    box-sizing: border-box;
/*	font-size: 100%;
	font: inherit;
	vertical-align: baseline;*/
}

body, html {
    height: 100vh;    
 /*   box-sizing: border-box;*/
}

header{
    min-height: 5vh;
}

section[role="submenu"]{    
    min-height: 10vh;
}
.submenu-container{
    max-width: 1170px;
    margin: 0 auto; 
    position: relative;
}

/* banner section */
section[role="banner"]{
    min-height: 65vh;
    position: relative;
    padding-bottom: 5vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
}
section[role="post-banner"]{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media screen and (min-width: 1170px) {
    section[role="post-banner"]{
        min-height: 20vh;
        padding-bottom: 5vh;
    }
}

@media screen and (min-width: 1170px) {   
    section[role="banner"]{        
        min-height: 80vh;
    }
}
section[role="banner"] header{
    max-width: 950px;
    margin: 10vh auto;    
}

.text-center{
    text-align: center;
}

.cover-cta{
    margin-top: 5vh;
    z-index: 2;
}

.cover-letter, .post-letter{
    z-index: 1;
    pointer-events:none;
}

@media screen and (max-width: 719px) {
    .cover-letter, .post-letter{
        display: none;
    }
}
@media screen and (min-width: 720px) {
    main section[role="post"] header{
        position: relative;
    }

    .cover-letter, .post-letter{
        position: absolute;     
        user-select: none;
        text-transform: uppercase;
    }
    .cover-letter{      
        font-size: 55vh;     
        top: 50%;
        left: 50%;
        transform: translate(-50%, -70%);
    }
    .post-letter{      
        font-size: 30vh;
        bottom: 0;
        left: -5vw;
        transform: translate(0, 20%);
    }
}

/* main section */
main{
    position: relative;
}

main > section{
    max-width: 1170px;
    margin: 0 auto;
    position: relative;
}

@media screen and (min-width: 1170px) {
    main > section {      
        top: -15vh;
        margin: 0 auto 1vh auto;
    }  
}

main article, main section[role="post"]{
    max-width: 720px;
    margin: 2.5vh auto 2.5vh auto;
}

main article img, main section[role="post"] img{
    max-width: 720px;
    margin: 0 auto;
    display: block;
}

@media screen and (max-width: 1169px) {
    main article img, main section[role="post"] img{
        max-width: 80vw;
    }
}

main section[role="section-header"]{
    min-height:  10vh;    
    margin: 5vh auto 5vh auto;
}
main section[role="post-header"]{
    min-height:  5vh;
}


/* hamburger */

.submenu-container .page-name{   
    display: inline-block;
    margin: 3vh 0 2vh 2vw;
}

@media screen and (min-width: 720px) {
    
    .submenu-container-slot1, .submenu-container-slot2{
        position: absolute;    
        display: inline-block;
    }
    .submenu-container-slot1{
        left: 0;
    }
    .submenu-container-slot2{
        right: 0;       
    }
    
    .submenu-container nav{
        margin: 1.5vh 2vw 0 0;
        z-index: 2;
    }
    .submenu-container nav ul{    
        display: inline-block;
    }
    .submenu-container nav li{
        list-style-type: none;
        display: inline;      
        /* padding: 1.5vh .5vw 1.5vh .5vw;    */
    }
    
    .submenu-container nav a {        
        display: inline-block; 
        margin: 0;        
        padding: 2.5vh .5vw 2.5vh .5vw;
    }

    span.hamburger{
        display: none;
    }
}
@media screen and (max-width: 720px) {  
    .submenu-container-slot1{
        position: relative;    
        display: block;
    }
    .submenu-container-slot2{
        position: relative;    
        display: none; 
        /* display: block; */
    }
    span.hamburger{
        position: absolute;
        right: calc(2vw + 37px);
        top: 3vh;
    }

    .submenu-container nav{
        position: relative;
    }
  
    .submenu-container nav ul{
        display: block;
    }

    .submenu-container nav li{
        display: block;
        text-align: right;
        width: 100%; 
    }
    
    .submenu-container nav a {        
        display: inline-block; 
        margin: 0;  
        margin-right: calc(2vw + 37px);
        padding: 2.5vh .5vw 2.5vh .2vw;
    }
}

/*author */
section[role="author"]{
    display: flex;
    flex-direction: row;
    justify-content: flex-start space-around;
    margin: 0 auto;
    max-width: 720px;
}
@media screen and (max-width: 720px) {  
    section[role="author"]{
        flex-direction: column;
    }
}

.author-slot1{
    flex-basis: 20%;
}

.author-slot2{
    flex-basis: 80%;
} 

.author-image{
    border-radius: 50%;
    height: 160px;
    width: 160px;
    margin: 2.5vh;
}
@media screen and (max-width: 720px) {  
    .author-image{
        margin: 2vh auto;
    }
}

/* Gallery */
section[role="gallery-banner"]{
    min-height: 20vh;
    position: relative;
    padding-bottom: 5vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media screen and (min-width: 720px) {
    main section[role="gallery"] header{
        position: relative;
    }
}
main section[role="gallery"]{
    position: relative;
    max-width: 720px;
    margin: 2.5vh auto 2.5vh auto;
}

@media screen and (min-width: 720px) {   
    section[role="gallery-tiles"]{
        display: flex;      
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
    }
}
section[role="gallery-tiles"] a{
    width: 33%;
    flex: 0 1 30%;	
}
section[role="gallery-tile"]{		
    min-height: 300px; 
    min-width: 200px;
     
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
section[role="gallery-tile"] div.fake-button{
    display: block;	
}

/*pagination */
section[role="pagination"]{
    white-space: nowrap;
    max-width: 720px;
}

/* side bars */
section[role="navbar-side-left"]{
    margin: 0 auto 1vh auto;
}
section[role="navbar-side-right"]{
    margin: 0 auto 1vh auto;
}
@media screen and (min-width: 1670px) {
    section[role="navbar-side-left"], section[role="navbar-side-right"]{
        position: absolute;
        top: -15vh;
        margin: 0 auto 1vh auto;
        padding: 0vh 1vw;
        width: calc((100vw - 1170px)/2);
        max-width: calc((100vw - 1170px)/2);
    }
    section[role="navbar-side-left"]{
        left: 0;
    }
    section[role="navbar-side-right"]{			
        right: 0;
    } 
    section[role="navbar-side-left"] > section, section[role="navbar-side-right"] > section
    {
        padding: 2vh min(2vw, 250px);
        min-width: 200px;
        max-width: 600px;
    }
    section[role="navbar-side-left"] > section
    {
        margin: 0 0 1vh auto;
    } 
    section[role="navbar-side-right"] > section
    {
        margin: 0 auto 1vh 0;
    }
}