/*

h3 {
  text-align: center;
  font-size: 1.65em;
  margin: 0 0 30px;
}

div#gallery {
  display: flex;
  flex-wrap: wrap;
}

#gallery a {
  display: inline-block;
  margin-bottom: 8px;
  width: calc(50% - 4px);
    height: 35%;
  margin-right: 8px;
  text-decoration: none;
  color: black;
}

#gallery a:nth-of-type(2n) {
  margin-right: 0;
}

@media screen and (min-width: 50em) {
  #gallery a {
    width: calc(25% - 6px);
  }
  
  #gallery a:nth-of-type(2n) {
    margin-right: 8px;
  }
  
  #gallery a:nth-of-type(4n) {
    margin-right: 0;
  }
}

#gallery a:hover img {
  transform: scale(1.15);
}

#gallery figure {
  margin: 0;
  overflow: hidden;
}

#gallery figcaption {
  margin-top: 15px;
}

#gallery img {
  border: none;
  width: auto;
  height: 100%;
  display: block;
  background: #ccc;
  transition: transform .2s ease-in-out;
    object-fit: cover;
}

#gallery .p a {
  display: inline;
  font-size: 13px;
  margin: 0;
  text-decoration: underline;
  color: blue;
}

#gallery .p {
  text-align: center;
  font-size: 13px;
  padding-top: 100px;
}*/

/*
.imagecontainer {
    display:inline;
    float:left;
    position:relative;
    height: 25%;
        margin-right:8px;
    margin-bottom:8px;
}
*/

#gallery::after {
    content: "";
    display: block;
    clear: both;
}
.imagecontainer {
    float: left;
    margin-right: 8px;
    margin-bottom: 8px;
    height: 200px; /* use a real height */
}

.overlay{
  opacity: 1;
  display: block;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.imagecontainer:hover .overlay{
  opacity: 0.3;
}

.imagecontainer:hover .middle {
  opacity: 1;
}

.text {
  color: #000;
  font-size: 1em;
  padding: 1em;
    padding-bottom:2em;
}

#gallery img {
    height:100%;
    display:block;
    float:left;

}

.project {
    position:relative;
    float:left;
    margin:0;
    padding:0;
/*    height: 75%;*/
}

.project img {
/*    display:block;*/
/*    height: 100%;*/
/*    width: auto;*/
}

a.next, a.previous {
    position:absolute;
    height: 100%;
    top:0;
    width: 50%;
    color:#fff;
    opacity: 0;
    transition: opacity 400ms;
}



a.next {
    right:0;
}

a.previous {
    left:0;
}

.btnText {
    position:absolute;
    top:50%;
/*    text-shadow: 2px 2px 2px rgba(150, 150, 150, 1);*/
}

a.next .btnText {
    right:1.5em;
}

a.previous .btnText {
    left:1.5em;
}

a.previous:hover {
    opacity: 1.0;
}

a.next:hover {
    opacity: 1.0;
}


@media (max-width:641px) {
.imagecontainer {
    width:100%;
    height: auto;
}
    
 #gallery .imagecontainer img {
    width:100%;
    height: auto;
}
}