* {
    box-sizing: border-box;
}
html, body {
}
img {max-width: 100%; max-height: 100%; display: flex;}
body{background-color: #FFA631;}
main{margin-top: 3em; background-color: #FFFDFA; min-height: 100vh;}

/*Typography*/
nav > ul{line-height: 1;}
h1{font-weight:700; margin-bottom: 0.5em; color: #FFA631}
h2{color: #FFA631}
p+p{margin-top: 0.5em; color: #000}
ol+ol{margin-top: 0.5em; color: #000000}
span{font-style: italic; color: #000000;}
.rule{border-top: thin solid;}

/*Navigation*/
nav{width: 100%; position: fixed; top: 0em; left: 0; padding: 0em 1em; display: flex; justify-content: left; background-color: #FFFFFF; border-bottom: 1px solid #FFA631; color: #FFA631; z-index:3;}
nav > ul{display: flex; flex-direction: row;}
nav > ul > li{padding: 1em;}

img+h2{margin-top: 0.5em;}

/*Links*/
a:link{text-decoration: none; color: #808080;}
a:visited{text-decoration: none; color: #808080;}
a:active{text-decoration: none; color: #808080;}
a:hover{text-decoration: none; color: #FFA631; -webkit-transition: all 0.5s; transition: all 0.5s;}
a.current{text-decoration: none; color: #FFA631;}

a.overlay:link{color: #808080;}
a.overlay:visited{text-decoration: none; color: #808080;}
a.overlay:hover{color: #FFA631; -webkit-transition: all 0.5s; transition: all 0.5s;}
a.overlay:visited{color: #808080;}

a.title:link{color: #FFA631;}
a.title:visited{color: #FFA631;}
a.title:active{color: #FFA631;}
a.title:hover{color: #808080; -webkit-transition: all 0.5s; transition: all 0.5s;}

/*Gallery*
.gallery-section{display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; background-color: #FFA631 ; min-height: 100vh; border-top: 1px solid #FFA631}
.gallery-group{flex-shrink: 0; width: 100%; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; flex-wrap: wrap; padding: 1em; flex-direction: column;}
.bg{background-color: #FFFDFA;}*/

@media only screen and (min-width: 600px) { 
    .gallery-group{flex-direction: row;}
}

/*About section overlay*/
.about {
    position: fixed;
    display: none;
    /*align-content: top;*/
    width: 100%;
    height: 100%;
    top: 3em;
    left: 0%;
    right: 0%;
    bottom: 0%;
    border-top: 1px solid #FFA631;
    /*box-sizing: border-box;*/
    /*background-color: rgba(255, 166, 49, 0.8);*/
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 2;
    cursor: pointer;
    color: #000000;
}