div.gallery {
  border: 1px solid #ccc;
  height:250px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}
img#img{
	width:100%;
	height:80%;
}
#sol{
	list-style:none;
	color:red;
	font-weight:bold;
}
* {
  box-sizing: border-box;
}
#sideinfo{
	position:sticky;
	top:15%;
}
#pictures1{
	height:350px;
}
#pictures2{
	height:600px;
}
#pictures3{
	height:850px;
}
#pictures4{
	height:1100px;
}
#pictures5{
	height:1350px;
}
.responsive {
  padding: 0 6px;
  float: left;
  margin-bottom:5px;
  margin-left:0;
  /*width:400px;*/
  width: 24.99999%;
}

.google-map {
     padding-bottom: 50%;
     position: relative;
     margin-bottom:5%;
}

.google-map iframe {
     height: 100%;
     width: 100%;
     left: 0;
     top: 0;
     position: absolute;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
    #pictures1{
	height:600px;
}
#pictures2{
	height:850px;
}
#pictures3{
	height:1100px;
}
#pictures4{
	height:1350px;
}
#pictures5{
	height:1600px;
}
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
  #pictures1{
	height:600px;
}
#pictures2{
	height:850px;
}
#pictures3{
	height:1100px;
}
#pictures4{
	height:1350px;
}
#pictures4{
	height:1600px;
}
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
#map {
    height: 400px; /* The height is 400 pixels */
    width: 100%; /* The width is the width of the web page */
}