* {
  padding:0;
  margin:0;
}

body {
  background-color: #c1c1c1;
  box-sizing: border-box;
}

/*transitions*/
section *, .overlay, .overlay h1 {
  transition-property: opacity;
  transition-duration: 500ms;
}

/*audio*/
audio {
  display: none;
}

/*overlay*/
.overlay {
  position:absolute;
  top:0;
  width:100vw;
  height:100vh;
  z-index: 99;
  background-color:rgba(255, 255, 255, 0.2);
  cursor:pointer;
}

.overlay h1 {
  font-weight: normal;
  font-size:30pt;
  display: inline-block;
  margin-top:50vh;
  margin-left:50vw;
  transform:translate(-50%, -50%);
  opacity:1;
}

.overlay h1:hover {
  opacity:0.6;
}

/*sections*/
section {
  width: 25vw;
  z-index:10;
  position:relative;
}

  /*section img*/
section img {
  position:absolute; 
  cursor:pointer;
  width:100%;
  z-index: 10;
}

section img.hidden {
  position:relative;
  opacity:0;
  z-index: 11;
}

  /*section text*/
p.text{
  position: absolute;
  width:70%;
  font-size: 9pt;
  opacity: 0;

  /*the following properties center the text within its parent section*/
  top:50%;
  left:50%; 
  transform: translate(-50%, -50%);
}

/*Individual section positioning*/
section#one {
  margin-top: 33px;
  left: 5px;
}

section#two {
  margin-top: -230px;
  left: 65vw;
}

section#three {
  margin-top: -310px;
  left: 40vw;
}

section#four {
  margin-top: -110px;
  left: 20vw;
}

section#five {
  margin-top: -160px;
  left: 73vw;
}

section#six {
  margin-top: -250px;
  left: 44vw;
}

section#seven {
  margin-top: -120px;
  left: 5vw;
}

section#eight {
  margin-top: -180px;
  left: 40vw;
}

section#nine {
  margin-top: -280px;
  left: 70vw;
}

/*tablet*/
@media screen and (max-width: 1024px) {
 section { 
  }
 p.text {
    font-size: 20pt;
  }
  h1 {
    text-align: center;
  }
}

/*mobiles*/
@media screen and (max-width: 768px) {
  section { 
    margin-top: 0 !important;
    left: 0vw !important; 
    width: 100vw;
  }
  p.text {
    text-align: center;
    font-size: 12pt;
  }
 h1 {
    text-align: center;
 }
}