/* Clear floats after the galery-contaainer */
.galery-container:after {
  content: "";
  display: table;
  clear: left;
}
.box {
  padding: 10px;
  float: left;
  height:30vh;
}
.box img {
  height: 100%;
  opacity: 0.8;
  cursor: pointer;
}

.box img:hover {
  opacity: 1;
}

/* The expanding image container (positioning is needed to position the close button and the text) */
.container {
  z-index: 1;
  position: fixed;
  top:110px;
  left: 50%;
  transform: translateX(-50%);
  height: 80vh;
  display: none;
  border:3px solid blue;
  padding:10px;
  background-color:lightgray;
}
.container img{
  height:100%;
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 20px;
  width: 80%;
  left: 10%;
  text-align: center;
  font-family: sans-serif;
  color: black;
  font-size: 18px;
  background-color: white;
  border-radius: 5px;
  padding:5px;
  opacity: 0.6;
}

/* Closable button inside the image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}
.tag{
  display: inline-block;
  background-color:#0a3d62;
  color:white;
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 14px;
}
/* VIDEOS */

.video-container {
    position: relative;
    max-width: 100%;
    margin: 1rem 0;
}
.video-container video {
    width: 70%;
    height: auto;
    border-radius: 8px;
    display: block;
}
@media screen and (max-width: 1024px){
  .box{
    padding: 5px;
    height:10vh;
  }
  .container{
    height: 35vh;
    border:1px solid blue;
    padding:5px;
  }
  #imgtext {
    font-size: 12px;
  }
  .tag{
    font-size: 10px;
  }
}