html, body {
  min-height: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
}

#content {
  min-height: 100%;
  height: 100%;
}

.footer {
  margin: 10px auto 50px auto;
  width: 60%;
  font-style: italic;
  font-size: small;
  text-align: center;
}

.part-block {
  position: relative;
  overflow: auto;
  min-height: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.part-content {
  background-color: rgba(255,255,255,0.8);
  padding: 100px 10%;
  margin: 100px auto;
  font-size: 2vmax;
  position: relative;
  overflow: hidden;
}

#top-menu {
  display: none;
  height: 100%;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #fff;
}

@media screen and (orientation: landscape) {
  .part-content {
    width: 60%;
  }
}

@media screen and (orientation: portrait) {
  .part-content {
    width: 70%;
  }
}

.part-content .part-name {
  text-align: center;
}

#part0 {
  background-image: url("../img/part0-bg.jpg");
}

#part1 {
  background-image: url("../img/part1-bg.jpg");
  background-position: center top;
}

#part2 {
  background-position: center top;
}

@media screen and (orientation: landscape) {
  #part2 {
    background-image: url("../img/part2-bg.jpg");
  }
}

@media screen and (orientation: portrait) {
  #part2 {
    background-image: url("../img/part2-bg-portrait.jpg");
  }
}

@media screen and (orientation: landscape) {
  #part3 {
    background-image: url("../img/part3-bg.jpg");
  }
}

@media screen and (orientation: portrait) {
  #part3 {
    background-image: url("../img/part3-bg-portrait.jpg");
  }
}

#part4 {
  background-image: url("../img/part4-bg.jpg");
}

#part5 {
  background-position: center top;
}

@media screen and (orientation: landscape) {
  #part5 {
    background-image: url("../img/part5-bg.jpg");
  }
}

@media screen and (orientation: portrait) {
  #part5 {
    background-image: url("../img/part5-bg-portrait.jpg");
  }
}

#part6 {
  background-position: center top;
}

@media screen and (orientation: landscape) {
  #part6 {
    background-image: url("../img/part6-bg.jpg");
  }
}

@media screen and (orientation: portrait) {
  #part6 {
    background-image: url("../img/part6-bg-portrait.jpg");
  }
}

#part7 {
  background-image: url("../img/part7-bg.jpg");
}

#part8 {
  background-position: center top;
}

@media screen and (orientation: landscape) {
  #part8 {
    background-image: url("../img/part8-bg.jpg");
  }

  #part8 .part-content-bg.eight {
    z-index: -1;
    background-color: #1485ff;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(1.3);
  }
}

@media screen and (orientation: portrait) {
  #part8 {
    background-image: url("../img/part8-bg-portrait.jpg");
  }
}

#exhibition-name {
  font-weight: bold;
  text-align: center;
  font-size: 3vmax;
  width: 60%;
  margin-left: 20%;
}

.square-wrapper {
  perspective: 1000px;
  -moz-transform: perspective(1000px);
}

.square {
  position: relative;
  padding-bottom: 100%;
  transform-style: preserve-3d;
  -moz-transform: perspective(1000px);
  color: white;
}

.square-front,
.square-back {
  width: 100%;
  padding-bottom: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  backface-visibility: hidden;
  transition: all 0.3s ease-in-out;

}
.square-front .text-holder,
.square-back .text-holder {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  font-weight: bold;
  font-size: 3vmax;
}

.square-front {
  background-color: #5ab2de;
  z-index: 10;
}

.square-back {
  background-color: #2790c4;
  transform: rotateY(-180deg);
}

.l-squares {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 90%;
  margin: 0 auto 100px auto;
}

.l-squares > li {
  float: left;
  cursor: pointer;
}

@media screen and (orientation: landscape) {
  .l-squares > li {
    width: 23%;
    margin: 1%;
  }
}

@media screen and (orientation: portrait) {
  .l-squares > li {
    width: 47%;
    margin: 1%;
  }
}

li:nth-child(odd) .square-wrapper:hover .square-front {
  transform: rotateY(180deg);
}
li:nth-child(odd) .square-wrapper:hover .square-back {
  transform: rotateY(0);
}

li:nth-child(even) .square-back {
  transform: rotateX(180deg);
}
li:nth-child(even) .square-wrapper:hover .square-front {
  transform: rotateX(-180deg);
}
li:nth-child(even) .square-wrapper:hover .square-back {
  transform: rotateX(0);
}

.l-squares .part-link .square-front {
  background-size: 70%;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.6);
}

.l-squares .part-link.one .square-front {
  background-size: cover;
  background-image: url("../img/part1-link.jpg");
}

.l-squares .part-link.one .square-back {
  background-size: cover;
  background-image: url("../img/part1-link-back.jpg");
}

.l-squares .part-link.two .square-front {
  background-image: url("../img/part2-link.png");
  background-color: red;
}

.l-squares .part-link.two .square-back {
  background-size: cover;
  background-image: url("../img/part2-link-back.jpg");
}

.l-squares .part-link.three .square-front {
  background-image: url("../img/part3-link.png");
}

.l-squares .part-link.three .square-back {
  background-size: cover;
  background-image: url("../img/part3-link-back.jpg");
}

.l-squares .part-link.four .square-front {
  background-size: cover;
  background-image: url("../img/part4-link.jpg");
}

.l-squares .part-link.four .square-back {
  background-size: cover;
  background-image: url("../img/part4-link-back.jpg");
}

.l-squares .part-link.five .square-front {
  background-image: url("../img/part5-link.png");
  background-color: #14a538;
}

.l-squares .part-link.five .square-back {
  background-size: cover;
  background-image: url("../img/part5-link-back.jpg");
}

.l-squares .part-link.six .square-front {
  background-size: cover;
  background-image: url("../img/part6-link.jpg");
}

.l-squares .part-link.six .square-back {
  background-size: cover;
  background-image: url("../img/part6-link-back.jpg");
}

.l-squares .part-link.seven .square-front {
  background-size: cover;
  background-image: url("../img/part7-link.jpg");
}

.l-squares .part-link.seven .square-back {
  background-size: cover;
  background-image: url("../img/part7-link-back.jpg");
}

.l-squares .part-link.eight .square-front {
  background-image: url("../img/part8-link.png");
  background-color: #1485ff;
}

.l-squares .part-link.eight .square-back {
  background-size: cover;
  background-image: url("../img/part8-link-back.jpg");
}

.l-squares .part-link a {
  color: #fff;
  text-decoration: none;
}

#contents-icon-container {
  display: none;
  z-index: 10002;
  position: fixed;
  right: 30px;
  top: 30px;
  padding: 30px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 2px 2px 0 0;
  cursor: pointer;
  transition: all 0.3s ease-out;
}

#contents-icon-container:hover {
  padding: 40px;
}

#contents-icon {
  width: 30px;
  height: 30px;
  background-image: url("../img/menu-button.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}