html {
box-sizing : border-box;
}

*, *:before, *:after {
box-sizing : inherit;
}

.cf:before, .cf:after {
content : " ";
margin-left : auto;
margin-right : auto;
display : table;
}

.cf:after {
clear : both;
}

.cf {
  *zoom: 1;
}

body {
margin : 0;
color : #404040;
background-color : #FCFEFC;
font-family : "Roboto", sans-serif;
font-size: calc(14px + (20 - 14) * ((100vw - 420px) / (2100 - 420)));
}

#top {
border-top : 1px solid silver;
background-color : #fcfefc;
margin : 0;
height : 6em;
display : none;
}

#logo {
margin : 1em 1em 1em 2em;
display : inline-block;
flex-grow : 0;
flex-shrink : 0;
flex-basis : auto;
}

#navcontainer {
margin : 0 0 2em 2em;
padding-left : 2em;
min-width : 70%;
height : 4.4em;
background-color : #fcfefc;
display : inline-block;
}

#navcontainer ul {
padding : 0;
}

#navcontainer ul li {
display : inline;
}

#navcontainer ul {
font-size : 1em;
color : #3D3D3D;
letter-spacing : 1px;
float : right;
}

#navcontainer ul li a {
padding : 3px 11px;
background-color : #fcfefc;
color : #3D3D3D;
text-decoration : none;
float : left;
border-left : 1px solid silver;
}

#navcontainer ul li a:hover {
background-color : #FFFFFF;
color : #B0B0B0;
}

#navlist {
margin : 0;
padding : 0 0 1.25em 0.63em;
}

#navlist ul, #navlist li {
margin : 0;
padding : 0;
display : inline;
list-style-type : none;
}
#navlist li a:hover, #navlist li a:active {
color : #FFFFFF;
padding-bottom : 2px;
background : #DCDCDC;
text-align : left;
}

#navlist #active a {
color : #B0B0B0;
}

#navlist #active a:hover {
color : #B0B0B0;
}

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

figure {
margin : 0;
padding : 10px;
}

figure a {
display : block;
}

header {
background-color : #196e76;
text-align : center;
}

header h1, header a {
padding : 15px;
color : #fff;
text-transform : uppercase;
}
header h1 {
margin : 0;
font-size : 18px;
}
header a {
font-weight : 300;
display : block;
text-decoration : none;
background-color : #10474c;
font-size : 14px;
}

.gallery-content {
max-width : 60em;
width : 95%;
padding : 0 2em 0 2em;
margin : 0 0 0 1em;
margin-right : auto;
margin-left : auto;
background-color : #F8F8FF;
}

.gallery-content img {
border : #fff solid 5px;
}

.picture {
padding : 2em 0;
}

.picture:first-child {
padding-top : 2em;
}

.pace {
pointer-events : none;
user-select : none;
}

.pace-inactive {
display : none;
}

.pace .pace-progress {
background : #f87f3f;
position : fixed;
z-index : 2000;
top : 0;
right : 100%;
width : 100%;
height : 2px;
}

.pace-running .gallery-content {
opacity : 0.5;
}

.pace-running figure {
pointer-events : none;
}

#mobile {
display : block;
}

.topnav {
overflow : hidden;
color : #404040;
background-color : #fcfefc;
position : relative;
}

.left {
float : left;
}

#myLinks {
width : 95%;
background-color : #F8F8F8;
padding : 1em 1em;
margin : 1em 2em 1em 1em;
}

.topnav #myLinks {
display : none;
background-color : #F8F8F8;
padding : 0.3em 0.3em 0.3em 0.8em;
width : 90%;
}

.topnav #myLinks span {
font-size : 1em;
vertical-align : middle;
}

.topnav #myLinks hr {
border : none;
height : 1px;
background-color : silver;
width : 95%;
}

.topnav a {
color : #404040;
margin-left : 2em;
text-decoration : none;
font-size : 1em;
display : block;
}

.topnav a.icon {
padding : 0.5em;
font-size : 1.5em;
color : gray;
background : #fcfefc;
display : block;
position : absolute;
right : 0;
top : 0;
}

.topnav a:hover {
color : silver;
}

.inblock {
display : inline-block;
}

.three figure {
float : left;
}

.three figcaption {
text-align : center;
padding : 0.8em;
}

.gallery-iline, .gallery-footline {
margin-top : 1em;
margin-left : 0.8em;
padding-right : 1em;
width : 95%;
text-align : right;
background-color : #F5F5F5;
line-height : 1.8;
}

.gallery-footline {
margin-top : 0;
margin-bottom : 2em;
text-align : center;
}

.gallery-iline a, .gallery-footline a {
color : #404040;
vertical-align : middle;
}

.iline {
text-decoration : none;
line-height : 1.8;
}

.small {
display : block;
}

.main-gallery {
margin-top : 1em;
max-width : 98%;
height : auto;
display : flex;
flex-wrap : wrap;
justify-content : center;
}

div.polaroid {
float : left;
width : 80%;
background-color : white;
box-shadow : 0 4px 8px 0 rgb(0, 0, 0, 0.2), 0 6px 20px 0 rgb(0, 0, 0, 0.19);
margin : 1em;
}

div.container {
text-align : center;
padding : 0.5em 1em;
}

.wrapper {
margin : 0.5em;
}

.cssbutton {
color : navy;
font-weight : normal;
padding : 0.1em;
width : 8em;
height : 0.8em;
border : solid 0.5px #b8babc;
border-radius : 0.5em;
text-decoration : none;
line-height : 2;
background : #E6E6FA;
}

a:hover {
color : silver;
}

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

div.polaroid {
width : 27%;
}

#top {
margin-top: 1em;
display : flex;
}

#mobile {
display : none;
}

.gallery-content {
width : 94%;
max-width : 63em;
padding : 1em;
margin-left : 1.5em;
}

.gallery-iline, .gallery-footline {
padding-right : 1em;
margin-left : 1.5em;
max-width : 63em;
width : 94%;
background-color : #F5F5F5;
}

.picture {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   margin: 0;
   padding: 0;
   padding-left: 1.5em;
   margin-bottom: 1em;
}

.three figure {
padding : 0.5em;
margin : 1em 2em 1em 0;
text-align : center;
font-size : smaller;
text-indent : 0;
background-color : white;
box-shadow : 0 4px 8px 0 rgb(0, 0, 0, 0.2), 0 6px 20px 0 rgb(0, 0, 0, 0.19);
float : left;
width : calc(33.33333% - 2em);
}

.three figure a img {
 height: calc(20vw  - (33 - 18) * ((100vw - 320px) / (1600 - 320))); 
width : auto;
max-width : 98%;
}

.two figure {
float : left;
width : 50%;
}

.small {
display : none;
}

a:hover {
color : silver;
}
}