/*::-webkit-scrollbar { 
    display: none; 
}*/
html {
  min-width: 100%;
  min-height: 100%; 
}

body {
  margin: 0;
  padding: 0;
  font-family: Avenir;
}

#parallax-container {
  position: relative;
  height: 740px;
  min-height: 700px;
  width: 4300px;
  min-width: 2000px;
  overflow-x: hidden;
  display: block;
  background-color: #8A898B;
/*  transform: translateY(30px);*/
  /*transform: translateY(25px);*/
}
#parallax-container div {
  position: absolute;
  top: 0px;
  left: 0px;
  background-image: url('../images/background_trial2.png');
  background-position: left top;
  transform: translateY(-70px);
  height: 740px;
  width: 40000px;

}

#expand {
  position: absolute;
  top: 300px;
  left: 4000px;
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.5s;
}

#expand2 {
  position: absolute;
  top: 300px;
  left: 10875px;
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.4s;
}

#expand:hover {
  background-color: #555555; 
  color: white;
}

#expand2:hover {
  background-color: #555555; 
  color: white;
}

#bell  {
  display: none;
  top: 1%;
  left: 4045px;
  z-index: 1;
  width: 2%;
  position: absolute;
}

.fixed-box {
  position: fixed;

}

/*#box-scroll-values {
  right: 15%;
  bottom: 15%;
  width: 200px;
  height: 100px;
}*/

.fixedcharacter {
  position: fixed;
  left: 40%;
  top: 35%;
}

#title {
  left: 10%;
  top: 3%;
  width: 60%;
  height: 110px;
  text-align: center;
  transform: translateY(-80px);
  position: absolute;
  /*background-color: rgb(255,255,255,0.7);*/
}

.unfixed-text {
  font-family: Avenir;
  font-size: 100px;
  font-weight: bold;
  margin-left: 30px;
  position: absolute;
}

#storydescription {
  left: 100%;
  top: 3%;
  width: 70%;
  height: 50px;
  text-align: center;
  font-family: Avenir;
  font-size: 40px;
  /*font-weight: bold;*/
  margin-left: 30px;
  position: absolute;
  /*background-color: rgb(255,255,255,0.7);*/
}

#authors {
  left: 220%;
  top: 3%;
  width: 45%;
  height: 50px;
  text-align: center;
  font-family: Avenir;
  font-size: 40px;
  /*font-weight: bold;*/
  margin-left: 30px;
  position: absolute;
  /*background-color: rgb(255,255,255,0.7);*/
}

#reveal-container {
  width:1000px;
  height: 100px;
  /*background-color: purple;*/
  position: absolute;
  top: 10px;
  left: 4550px; /*its starting position */
  overflow: hidden;
  display: none; /*need to hide it first or else it goes off the page first!! will set it as block once button to continue is clicked */
}

#red {
  position: absolute;
  top: 0px;
  left: 4500px;  /*this sets its starting position*/
  /*background-color: red;*/
  width: 500px;
  height: 300px;
  transform: translateX(0px);
  text-align: center;
  font-size: 1.5em;
}

#reveal-container2 {
  width:1000px;
  height: 100px;
  /*background-color: purple;*/
  position: absolute;
  top: 10px;
  left: 5800px; /*its starting position */
  overflow: hidden;
  display: none; /*need to hide it first or else it goes off the page first!! will set it as block once button to continue is clicked */
}

#red2 {
  position: absolute;
  top: 0px;
  left: 5750px;  /*this sets its starting position*/
  /*background-color: red;*/
  width: 500px;
  height: 300px;
  transform: translateX(0px);
  text-align: center;
  font-size: 1.5em;
}

#reveal-container3 {
  width:1200px;
  height: 100px;
  /*background-color: purple;*/
  position: absolute;
  top: 10px;
  left: 7250px; /*its starting position */
  overflow: hidden;
  display: none; /*need to hide it first or else it goes off the page first!! will set it as block once button to continue is clicked */
}

#red3 {
  position: absolute;
  top: 0px;
  left: 7100px;  /*this sets its starting position*/
  /*background-color: red;*/
  width: 1100px;
  height: 300px;
  transform: translateX(0px);
  text-align: center;
  font-size: 1.5em;
}

#reveal-container4 {
  width:1000px;
  height: 100px;
  /*background-color: purple;*/
  position: absolute;
  top: 10px;
  left: 8700px; /*its starting position */
  overflow: hidden;
  display: none; /*need to hide it first or else it goes off the page first!! will set it as block once button to continue is clicked */
}

#red4 {
  position: absolute;
  top: 0px;
  left: 8650px;  /*this sets its starting position*/
  /*background-color: red;*/
  width: 500px;
  height: 300px;
  transform: translateX(0px);
  text-align: center;
  font-size: 1.5em;
}

#reveal-container5 {
  width:1000px;
  height: 100px;
  /*background-color: purple;*/
  position: absolute;
  top: 10px;
  left: 9950px; /*its starting position */
  overflow: hidden;
  display: none; /*need to hide it first or else it goes off the page first!! will set it as block once button to continue is clicked */
}

#red5 {
  position: absolute;
  top: 0px;
  left: 10000px;  /*this sets its starting position*/
  /*background-color: red;*/
  width: 500px;
  height: 300px;
  transform: translateX(0px);
  text-align: center;
  font-size: 1.5em;
}