body {
  font-size: 100%;
}
p, h1, h2, h3, h4, li, span {
font-family: Verdana;
}
div.gallery {
border: 1px solid #ccc;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 7px;
text-align: center;
}
.next {
padding: 3px;
text-align: center;
background-color: rgb(207, 202, 190);
}
* {
box-sizing: border-box;
}
.header {
padding: 15px;
margin-bottom: 15px;
text-align: center;
width: 100%;
background-color: rgb(173, 165, 146);
color: white;
}
.title {
padding: 10px;
margin-bottom: 15px;
text-align: center;
width: 100%;
height: auto;
background-color: rgb(207, 202, 190);
color: black;
}
.footer {
padding: 5px;
margin-top: 15px;
text-align: center;
width: 100%;
background-color: rgb(147, 136, 108);
color: #000;
}
.discl {
font-size: 0.5em;
font-size: 7px;
//font-size: 1vw;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.responsive2 {
padding: 0 3px;
float: left;
width: 49%;
}
@media only screen and (max-width: 700px) {
.responsive2 {
width: 49%;
margin: 3px 0;
}
}
@media only screen and (max-width: 500px) {
.responsive2 {
width: 99%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}