.album_entry{
    color: white !important;
    text-decoration: none;
}

body {
  margin: 0;
  font-family: Arial;
}

.header {
  text-align: center;
  padding: 32px;
}

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: auto;
  max-width: 16vw;
}

.image_container{
  text-align: center;
  background: white;
  border-radius: 5px;
  margin-top: 0px;
  margin-bottom: 5px;
  height: 98%;
}

.current_picture{
  border-radius: 5px;
  max-width: 50vw;
  max-height: 50vw;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3vh;
}

.current_container{
  margin-top: 10px;
  background: rgba(255,255,255,0.7);
  width: 70vw;
  border-radius: 5px;
}

.banner{
  display: flex;
  flex-flow: column;
  border-radius: 5px;
  margin-bottom: 1vh;
  height: 30vh;
  width: 63vw;
  object-fit:cover;
  color: white;
}

.topleft{
  flex: 1;
  text-align: left;
}

.container{
  position: relative;
  display: inline-block;
  text-align: left;
}

.container .topleft{
  position: absolute;
  z-index: 999;
  left: 1vw;
  right: 0;
  text-align: left;
  width: 60%; /* Set the width of the positioned div */
  margin-left: 8px;
  margin-right: auto;
  top: 0px;
}

.x_exit{
  height: 4vh;
}

.image_preview{
  margin: 5px;
  max-height: 20vh;
  border-radius: 5px;
}


.title{
  color: white;
  font-size: 250%;
  margin: 0;
}

.carousel{
  height: 9vh;
}

.carousel_picture{
  max-height: 7vh;
  border-radius: 5px;
}
.carousel_picture_current{
  max-height: 7vh;
  border-radius: 5px;
  opacity: 0.5;
}

.sub_container{
  text-align: center;
}

.icons{
  right: 5px;
}

.gallery_icon{
  height: 5vh;
  width: auto;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }

  .current_container{
    margin-left: auto;
    margin-right: auto;
    min-width: 80vw;
  }

  .carousel{
    display: none;
  }

  #next_next{
    display: none;
  }

  #previous_previous{
    display: none;
  }

  .banner{
    display: none;
  }

  .container .topleft{
    position: relative;
    z-index: 0;
    left: 1vw;
    right: 0;
    text-align: left;
    width: 60%; /* Set the width of the positioned div */
    margin-left: 8px;
    margin-right: auto;
    margin-bottom: 2vh;
    top: 0px;
  }
}