@media screen and (max-width: 768px) {
  nav img{
    left: 6%;
    top: 20px;
    width: 130px;
  }
nav ul li a{
  font-size: 17px;
}
#leftbar {

text-align: center;

background-color: #D9DBE2;

width: 92%;

float: none;

margin-right: 2%;

padding-left: 4%;

padding-right: 4%;

padding-bottom: 4%;

border: #005461 medium solid;

-webkit-box-shadow: 7px 9px 10px -5px rgba(0,0,0,0.12);

-moz-box-shadow: 7px 9px 10px -5px rgba(0,0,0,0.12);

box-shadow: 7px 9px 10px -5px rgba(0,0,0,0.12);
}
#sidebar {

text-align: center;

width: 100%;

float: none;

-webkit-box-shadow: 7px 9px 10px -5px rgba(0,0,0,0.12);

-moz-box-shadow: 7px 9px 10px -5px rgba(0,0,0,0.12);

box-shadow: 7px 9px 10px -5px rgba(0,0,0,0.12);


padding: left:10%;
padding: top:4%;
padding: bottom:4%;
padding: right:4%;

margin-right: 2%;
}
#thumbnails {

width: 100%;

float: none;

margin: 20px 0;

clear: both;

font-size: 1em;

}
.thumb {

float: none;

padding: 2%;

margin-bottom: 10%;

text-align: center;

width: 13%;

background-color: #fff;

-webkit-box-shadow: 7px 9px 10px -5px rgba(0,0,0,0.12);

-moz-box-shadow: 7px 9px 10px -5px rgba(0,0,0,0.12);

box-shadow: 7px 9px 10px -5px rgba(0,0,0,0.12);

margin: 1%;

margin-bottom: 4%;

border: #005461 medium solid;

}
.container{
max-width: 70%;
}
.wrapper {
padding-left: 15%;
display: block;
> * {
  margin: 10px;
}
}
@media screen and (max-width: 480px) {
label #btn{
  display: block;
}
ul{
  position: fixed;
  width: 100%;
  height: 100vh;
  background: #D9DBE2;
  top: 80px;
  left: -100%;
  text-align: center;
  transition: all .5s;
}

nav ul li{
  display:block;
  margin: 50px 0;
  line-height: 30px;
}

nav ul li a{
  font-size: 20px;
}

#check:checked ~ ul{
  left: 0;
}
#check:checked ~ label #btn{
  display: none;
}
#check:checked ~ label #cancel{
  display: block;
}
#leftbar {

text-align: center;

background-color: #D9DBE2;

width: 92%;

float: none;

margin-right: 2%;

padding-left: 4%;

padding-right: 4%;

padding-bottom: 4%;

border: #005461 medium solid;

-webkit-box-shadow: 7px 9px 10px -5px rgba(0,0,0,0.12);

-moz-box-shadow: 7px 9px 10px -5px rgba(0,0,0,0.12);

box-shadow: 7px 9px 10px -5px rgba(0,0,0,0.12);
}
#sidebar {

text-align: center;

width: 100%;

float: none;

-webkit-box-shadow: 7px 9px 10px -5px rgba(0,0,0,0.12);

-moz-box-shadow: 7px 9px 10px -5px rgba(0,0,0,0.12);

box-shadow: 7px 9px 10px -5px rgba(0,0,0,0.12);


padding: left:10%;
padding: top:4%;
padding: bottom:4%;
padding: right:4%;

margin-right: 2%;
}
#thumbnails {

width: 100%;

float: none;

margin: 20px 0;

clear: both;

font-size: 1em;

}
.thumb {

float: none;

padding: 2%;

margin-bottom: 10%;

text-align: center;

width: 13%;

background-color: #fff;

-webkit-box-shadow: 7px 9px 10px -5px rgba(0,0,0,0.12);

-moz-box-shadow: 7px 9px 10px -5px rgba(0,0,0,0.12);

box-shadow: 7px 9px 10px -5px rgba(0,0,0,0.12);

margin: 1%;

margin-bottom: 4%;

border: #005461 medium solid;

}
.container{
  align-content: flex-start;
}

.wrapper {
display: block;
> * {
  margin: 10px;
}
}
.layer{
  display: none;
}

table {display: flex;}
}