@charset "utf-8";
/* CSS Document */
.content {
  flex-direction: column;
  align-items: center;
  align-self: center;
  margin-top: 2vw;
}
.logo {
  width: 70vw;
  height: 25vw;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("lotuslogo2.png");
  padding-top: 30%;
  margin-bottom: 1vw;
}
.threebeers {
  width: 70vw;
  height: 56vw;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("beers on bg3.jpg");
  margin-bottom: 1vw;
}
.beer {
  width: 70vw;
  height: 56vw;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 1vw;
}
.hibiscus {
  background-image: url("beer hibiscus2.jpg");
}
.elderflower {
  background-image: url("beer elderflower2.jpg");
}
.cherryblossom {
  background-image: url("beer cherryblossom2.jpg");
}
@media screen and (max-width : 600px) {
  .content {
    flex-direction: column;
    align-items: center;
    max-width: 93%;
    width: 93%;
	     display: flex;
    flex-wrap: wrap;
    align-self: center;
  }
  .logo {
    width: 100%;
    min-width: 100%;
    height: auto;
    min-height: 15vw;
    background-size: cover;
    margin-bottom: 4vw;
  }
  .beer {
    width: 100%;
    min-width: 100%;
    min-height: 100vw;
    height: auto;
    background-size: cover;
    margin-bottom: 4vw;
	  
  }
  .threebeers {
    width: 100%;
    min-width: 100%;
    min-height: 70vw;
    height: auto;
    background-size: cover;
    margin-bottom: 4vw;
  }
	.column {
    display: flex;
    flex: 100%;
    max-width: 100%;
  }
}