body{
  background-color: #3b3b3b;
}

@font-face {
  font-family: 'Old_Press';
  src: url('font/Old\ Press.ttf') format('truetype');
}

@font-face {
  font-family: 'Comico';
  src: url('font/Comico.otf') format('truetype');
}



#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 9999;

  display: flex;
  justify-content: center;
  align-items: center;
}

.loader-content {
  text-align: center;
  transform: scale(1);
  opacity: 1;
}

#loader-gif {
  width: 300px;
  display: block;
  margin: 0 auto 20px;
  filter: contrast(800%); /*The original .gif was closer to grey than white*/
}

body.loading {
  overflow: hidden;
}



#menu-container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 9998;
}

#menu {
  position: absolute;
  left: -250px;
  top: 0;
  height: 100%;
  width: 200px;
  background-color: #000;
  padding: 20px 30px;
  transition: 0.3s;
}

#menu-handle {
  position: absolute;
  left: 270px;
  top: 90px;
  cursor: pointer;
}

#menu-handle img {
  width: 40px;
}

#menu-container:hover #menu {
  left: 0;
}

#menu h1 {
  font-size: 24px;
  text-align: center;
  margin-bottom: 20px;
  color: white;
  font-family: 'Old_Press', sans-serif;
}

.menu-items {
  list-style: none;
  padding: 0;
}

.menu-items a {
  text-decoration: none;
}

.menu-items .event {
  font-size: 18px;
  padding: 10px;
  margin-bottom: 10px;
  background-color: white;
  color: #000;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
  text-align: center;
  font-family: 'Comico', sans-serif;
}

.menu-items .event:hover {
  background-color: red;
  color: white;
}

#auto-scroll-btn.active {
  background-color: red;
  color: white;
}

#auto-scroll-btn {
  margin-bottom: 40px;
}



#start1 {scroll-margin-top: 900px;} 
#start2 {scroll-margin-top: -480px;} 
#start3 {scroll-margin-top: -480px;}
#start4 {scroll-margin-top: -460px;} 
#start5 {scroll-margin-top: -460px;} 
#start6 {scroll-margin-top: -460px;}
#start7 {scroll-margin-top: -480px;} 
#start8 {scroll-margin-top: -460px;} 
#start9 {scroll-margin-top: -460px;}
#start10 {scroll-margin-top: -460px;} 
#start11 {scroll-margin-top: -450px;} 
#start12 {scroll-margin-top: -980px;}



.wrapper{
  width: 100%;
  height: 22400px;
  position: relative;
}

h1 {
  color: #ffffff;
  font-family: 'Old_Press', sans-serif;
  font-size: 70px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 2px 2px 5px rgb(255, 0, 0);
}

h2 {
  color: #ffffff;
  font-family: 'Old_Press', sans-serif;
  font-size: 35px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 2px 2px 5px rgb(255, 0, 0);
}

h3 {
  color: #ffffff;
  font-family: 'Old_Press', sans-serif;
  font-size: 35px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 2px 2px 5px rgb(255, 0, 0);
}

h4 {
  position: absolute;
  font-family: 'Comico', 'Arial Narrow', Arial, sans-serif;
  font-size: 15px;
  color: #ffffff;
  letter-spacing: 0px;
  top: -12px;
  left: 10px;
} 

p {
  position: absolute;
  font-family: 'Comico', 'Arial Narrow', Arial, sans-serif;
  font-size: 11px;
  color: #000000;
  letter-spacing: 0px;
  top: -7px;
  left: 7px;
}



  .aspect_16_9 {
  width: 622px; 
  height: 350px;
}

.aspect_1_1 {
  width: 350px; 
  height: 350px;
}

.aspect_1_2 {
  width: 350px; 
  height: 700px;
}

.aspect_17_9 {
  width: 661px; 
  height: 350px;
}

.aspect_25_9 {
  width: 972px; 
  height: 350px;
}

.aspect_34_9 {
  width: 1322px;
  height: 350px;
}



#patch {
  position: fixed;
  background-color: #3b3b3b;
  width: 1300px; 
  height: 500px;
  top: 890px; left: 0px;
}

#patch2 {
  position: fixed;
  background-color: #3b3b3b;
  width: 500px; 
  height: 900px;
  top: 0px; left: 1400px;
}

#animation_delay {
  position: fixed;
  background-color: #ff0000;
  width: 100px; 
  height: 100px;
  top: 400px; left: 0px;
  opacity: 0%;
}

.box {
  position: absolute;
  background-color: white;
  border: 3px solid #000000;
  box-shadow: 2px 2px 5px rgb(255, 0, 0);
}

.red_box {
  position: absolute;
  background-color: rgb(255, 0, 0);
  border: 3px solid rgb(255, 255, 255);
  border-radius: 12px;
}

#red_box_2 {
  width: 142px; 
  height: 31px;
  top: 25px; left: 20px;
}
#red_box_4 {
  width: 117px; 
  height: 31px;
  top: 20px; left: 25px;
}
#red_box_6 {
  width: 127px; 
  height: 31px;
  top: 20px; left: 20px;
}
#red_box_9 {
  width: 97px; 
  height: 31px;
  top: 20px; left: 20px;
}
#red_box_11 {
  width: 130px; 
  height: 31px;
  top: 30px; left: 30px;
}



#title_1 {
    position: fixed; 
    transform-origin: center;
    top: 250px; left: 455px;
  }

#title_1 h3 {
  margin-top: -50px;
}

#text_1 {
    position: fixed; 
    transform-origin: center;
    top: 300px; left: 95px;
    opacity: 0;
  }

#panel_1_background {
  position: fixed;
  background-color: black;
  width: 100%;
  height: 100%;
  top: 0px; left: 0px;
}

#map_1 {
  position: fixed;
  width: auto; 
  height: 100px;
  top: 0px; left: 0px;
}

#panel_1_img {
  position: fixed;
  width: auto; 
  height: 1100px;
  top: 0px; left: -50px;
}



#box_f2i1_1 {
  width: 114px; 
  height: 30px;
  top: 203px; left: 484px;
}
#box_f2i1_2 {
  width: 119px; 
  height: 30px;
  top: 245px; left: 480px;
}
#box_f2i1_3 {
  width: 60px; 
  height: 19px;
  top: 287px; left: 480px;
}
#box_f2i2_1 {
  width: 140px; 
  height: 40px;
  top: 287px; left: 190px;
}
#box_f2i3_1 {
  width: 95px; 
  height: 19px;
  top: 245px; left: 192px;
}
#box_f2i5_1 {
  width: 200px; 
  height: 30px;
  top: 70px; left: 190px;
}
#box_f2i5_2 {
  width: 115px; 
  height: 19px;
  top: 112px; left: 190px;
}
#box_f2i6_1 {
  width: 115px; 
  height: 30px;
  top: 112px; left: 14px;
}

#panel_2_item_1 {
  position: fixed;
  top: -580px; left: -989px;
  transform: rotate(-35deg);
}
#panel_2_item_2 {
  position: fixed;
  top: -580px; left: 622px;
  transform: rotate(25deg);  
}
#panel_2_item_3 {
  position: fixed;
  top: -580px; left: 1572px;
  transform: rotate(-25deg);
}
#panel_2_item_4 {
  position: fixed;
  top: 930px; left: -1060px;
  transform: rotate(-35deg);
}
#panel_2_item_5 {
  position: fixed;
  top: 1050px; left: 350px;
  transform: rotate(15deg);
}
#panel_2_item_6 {
  position: fixed;
  top: 930px; left: 1572px;
  transform: rotate(-30deg);
}



#box_f3i2_1 {
  width: 150px; 
  height: 19px;
  top: 133px; left: 450px;
}
#box_f3i3_1 {
  width: 150px; 
  height: 30px;
  top: 259px; left: 182px;
}
#box_f3i3_2 {
  width: 160px; 
  height: 30px;
  top: 301px; left: 172px;
}
#box_f3i4_1 {
  width: 155px; 
  height: 30px;
  top: 84px; left: 15px;
}
#box_f3i5_1 {
  width: 97px; 
  height: 19px;
  top: 175px; left: 242px;
}
#box_f3i5_2 {
  width: 70px; 
  height: 19px;
  top: 210px; left: 530px;
}
#box_f3i6_1 {
  width: 140px; 
  height: 19px;
  top: 28px; left: 25px;
}

#panel_3_item_1 {
  position: fixed;
  top: -580px; left: -600px;
  transform: rotate(-35deg);
}
#panel_3_item_2 {
  position: fixed;
  top: -680px; left: 350px;
  transform: rotate(15deg);
}
#panel_3_item_3 {
  position: fixed;
  top: -580px; left: 1572px;
  transform: rotate(-25deg);
}
#panel_3_item_4 {
  position: fixed;
  top: 930px; left: -1060px;
  transform: rotate(-35deg);
}
#panel_3_item_5 {
  position: fixed;
  top: 1050px; left: 350px;
  transform: rotate(-15deg);
}
#panel_3_item_6 {
  position: fixed;
  top: 930px; left: 1572px;
  transform: rotate(35deg);
}



#box_f4i2_1 {
  width: 167px; 
  height: 19px;
  top: 309px; left: 160px;
}
#box_f4i3_1 {
  width: 180px; 
  height: 30px;
  top: 35px; left: 240px;
}
#box_f4i4_1 {
  width: 157px; 
  height: 19px;
  top: 49px; left: 20px;
}

#panel_4_item_1 {
  position: fixed;
  top: 0px; left: -600px;
  transform: rotate(-10deg);
}
#panel_4_item_2 {
  position: fixed;
  top: -580px; left: 350px;
  transform: rotate(25deg);
}
#panel_4_item_3 {
  position: fixed;
  top: -580px; left: 1690px;
  transform: rotate(-15deg);
}
#panel_4_item_4 {
  position: fixed;
  top: 1050px; left: 350px;
  transform: rotate(20deg);
}
#panel_4_item_5 {
  position: fixed;
  top: 930px; left: 1572px;
  transform: rotate(35deg);
}



#box_f5i1_1 {
  width: 130px; 
  height: 19px;
  top: 56px; left: 125px;
}
#box_f5i2_1 {
  width: 152px; 
  height: 30px;
  top: 56px; left: 485px;
}
#box_f5i2_2 {
  width: 67px; 
  height: 19px;
  top: 137px; left: 165px;
}
#box_f5i2_3 {
  width: 132px; 
  height: 19px;
  top: 119px; left: 505px;
}
#box_f5i3_1 {
  width: 165px; 
  height: 19px;
  top: 77px; left: 145px;
} 

#panel_5_item_1 {
  position: fixed;
  top: -580px; left: -1060px;
  transform: rotate(5deg);
}
#panel_5_item_2 {
  position: fixed;
  top: -580px; left: 1720px;
  transform: rotate(-10deg); 
}
#panel_5_item_3 {
  position: fixed;
  top: 930px; left: -1060px;
  transform: rotate(15deg); 
}
#panel_5_item_4 {
  position: fixed;
  top: 930px; left: 1720px;
  transform: rotate(-20deg);
}
#panel_5_item_5 {
  position: fixed;
  top: 1000px; left: 483px;
  transform: rotate(10deg);
}



#box_f6i1_1 {
  width: 125px; 
  height: 30px;
    top: 22px; left: 200px;
}
#box_f6i1_2 {
  width: 80px; 
  height: 19px;
  top: 65px; left: 200px;
}

#panel_6_item_1 {
  position: fixed;
  top: -580px; left: -600px;
  transform: rotate(35deg);
}
#panel_6_item_2 {
  position: fixed;
  top: -580px; left: 350px;
  transform: rotate(5deg); 
}
#panel_6_item_3 {
  position: fixed;
  top: 930px; left: -1060px;
  transform: rotate(35deg);
}
#panel_6_item_4 {
  position: fixed;
  top: 950px; left: 350px;
  transform: rotate(20deg);
}
#panel_6_item_5 {
  position: fixed;
  top: 930px; left: 1690px;
  transform: rotate(-15deg);
}



#box_f7i1_1 {
  width: 135px; 
  height: 19px;
  top: 56px; left: 190px;
}
#box_f7i3_1 {
  width: 55px; 
  height: 19px;
  top: 63px; left: 25px;
}
#box_f7i3_2 {
  width: 67px; 
  height: 19px;
  top: 91px; left: 25px;
}
#box_f7i4_1 {
  width: 140px; 
  height: 19px;
  top: 290px; left: 450px;
}
#box_f7i5_1 {
  width: 165px; 
  height: 19px;
  top: 15px; left: 15px;
}
#box_f7i6_1 {
  width: 90px; 
  height: 19px;
  top: 20px; left: 20px;
}

#panel_7_item_1 {
  position: fixed;
  top: -580px; left: -600px;
  transform: rotate(-20deg);  
}
#panel_7_item_2 {
  position: fixed;
  top: -580px; left: 350px;
  transform: rotate(10deg); 
}
#panel_7_item_3 {
  position: fixed;
  top: -580px; left: 1572px;
  transform: rotate(35deg);
}
#panel_7_item_4 {
  position: fixed;
  top: 930px; left: -1060px;
  transform: rotate(15deg);
}
#panel_7_item_5 {
  position: fixed;
  top: 950px; left: 622px;
  transform: rotate(25deg);
}
#panel_7_item_6 {
  position: fixed;
  top: 930px; left: 1572px;
  transform: rotate(20deg); 
}



#box_f8i3_1 {
  width: 185px; 
  height: 19px;
  top: 56px; left: 315px;
}
#box_f8i4_1 {
  width: 112px; 
  height: 19px;
  top: 18px; left: 15px;
}
#box_f8i4_2 {
  width: 90px; 
  height: 19px;
  top: 105px; left: 240px;
}
#box_f8i4_3 {
  width: 147px; 
  height: 19px;
  top: 294px; left: 280px;
}
#box_f8i5_1 {
  width: 112px; 
  height: 19px;
  top: 21px; left: 180px;
}

#panel_8_item_1 {
  position: fixed;
  top: -580px; left: -600px;
  transform: rotate(35deg); 
}
#panel_8_item_2 {
  position: fixed;
  top: -580px; left: 350px;
  transform: rotate(-25deg);
}
#panel_8_item_3 {
  position: fixed;
  top: -580px; left: 1690px;
  transform: rotate(35deg);
}
#panel_8_item_4 {
  position: fixed;
  top: 930px; left: -1060px;
  transform: rotate(20deg); 
}
#panel_8_item_5 {
  position: fixed;
  top: 930px; left: 1720px;
  transform: rotate(15deg); 
}



#box_f9i1_1 {
  width: 170px; 
  height: 19px;
  top: 40px; left: 450px;
}
#box_f9i2_1 {
  width: 185px; 
  height: 19px;
  top: 98px; left: 70px;
}
#box_f9i2_2 {
  width: 130px; 
  height: 19px;
  top: 126px; left: 70px;
}
#box_f9i3_1 {
  width: 230px; 
  height: 19px;
  top: 280px; left: 250px;
}
#box_f9i4_1 {
  width: 87px; 
  height: 19px;
  top: 25px; left: 25px;
}
#box_f9i4_2 {
  width: 112px; 
  height: 19px;
  top: 50px; left: 25px;
}
#box_f9i5_1 {
  width: 72px; 
  height: 19px;
  top: 28px; left: 28px;
}

#panel_9_item_1 {
  position: fixed;
  top: -580px; left: -600px;
  transform: rotate(5deg);  
}
#panel_9_item_2 {
  position: fixed;
  top: -580px; left: 1720px;
  transform: rotate(-10deg); 
}
#panel_9_item_3 {
  position: fixed;
  top: 930px; left: -1060px;
  transform: rotate(15deg); 
}
#panel_9_item_4 {
  position: fixed;
  top: 950px; left: 622px;
  transform: rotate(20deg); 
}
#panel_9_item_5 {
  position: fixed;
  top: 930px; left: 1572px;
  transform: rotate(-15deg); 
}



#box_f10i1_1 {
  width: 170px; 
  height: 19px;
  top: 280px; left: 65px;
}
#box_f10i2_1 {
  width: 150px; 
  height: 19px;
  top: 250px; left: 190px;
}
#box_f10i3_1 {
  width: 220px; 
  height: 19px;
  top: 30px; left: 80px;
}
#box_f10i4_1 {
  width: 160px; 
  height: 19px;
  top: 257px; left: 470px;
}
#box_f10i4_2 {
  width: 130px; 
  height: 19px;
  top: 290px; left: 500px;
}
#box_f10i5_1 {
  width: 103px; 
  height: 19px;
  top: 269px; left: 20px;
}
#box_f10i5_2 {
  width: 170px; 
  height: 19px;
  top: 302px; left: 20px;
}

#panel_10_item_1 {
  position: fixed;
  top: -580px; left: -1060px;
  transform: rotate(-15deg); 
}
#panel_10_item_2 {
  position: fixed;
  top: -580px; left: 1720px;
  transform: rotate(15deg); 
}
#panel_10_item_3 {
  position: fixed;
  top: 930px; left: -1060px;
  transform: rotate(-15deg); 
}
#panel_10_item_4 {
  position: fixed;
  top: 930px; left: 1720px;
  transform: rotate(20deg); 
}
#panel_10_item_5 {
  position: fixed;
  top: 1000px; left: 483px;
  transform: rotate(10deg); 
}



#box_f11i1_1 {
  width: 205px; 
  height: 19px;
  top: 257px; left: 32px;
}
#box_f11i2_1 {
  width: 160px; 
  height: 19px;
  top: 80px; left: 45px;
}

#panel_11_item_1 {
  position: fixed;
  top: -580px; left: -600px;
  transform: rotate(-15deg);
}
#panel_11_item_2 {
  position: fixed;
  top: -580px; left: 350px;
  transform: rotate(15deg); 
}
#panel_11_item_3 {
  position: fixed;
  top: -580px; left: 1690px;
  transform: rotate(-10deg); 
}
#panel_11_item_4 {
  position: fixed;
  top: 947px; left: 0px;
  transform: rotate(2deg); 
}



#panel_12_item_1 {
  position: fixed;
  top: -580px; left: -600px;
  transform: rotate(-15deg);
  filter: contrast(150%);   
}
#panel_12_item_2 {
  position: fixed;
  top: -680px; left: 350px;
  transform: rotate(10deg);
  filter: contrast(150%);    
}
#panel_12_item_3 {
  position: fixed;
  top: 930px; left: -1060px;
  transform: rotate(5deg);
  filter: contrast(150%);    
}
#panel_12_item_4 {
  position: fixed;
  top: 930px; left: 1572px;
  transform: rotate(10deg);
  filter: contrast(150%);    
}



[class^="white_border"] img {
  box-sizing: border-box;
  border: 5px solid rgb(255, 255, 255);
  /*filter: invert(100%);*/
}



#start1 {
  position:absolute;
  top: 1000px;
  width: 100px; height: 50px;
  background-color: rgb(255, 0, 0);
  opacity: 0;
  margin-left: 90vw;
}
#start2 {
  position:absolute;
  top: 2300px;
  width: 100px; height: 50px;
  background-color: rgb(255, 0, 0);
  opacity: 0;
  margin-left: 90vw;
}
#start3 {
  position:absolute;
  top: 4100px;
  width: 100px; height: 50px;
  background-color: rgb(255, 0, 0);
  opacity: 0;
  margin-left: 90vw;
}
#start4 {
  position:absolute;
  top: 5900px;
  width: 100px; height: 50px;
  background-color: rgb(255, 0, 0);
  opacity: 0;
  margin-left: 90vw;
}
#start5 {
  position:absolute;
  top: 7700px;
  width: 100px; height: 50px;
  background-color: rgb(255, 0, 0);
  opacity: 0;
  margin-left: 90vw;
}
#start6 {
  position:absolute;
  top: 9500px;
  width: 100px; height: 50px;
  background-color: rgb(255, 0, 0);
  opacity: 0;
  margin-left: 90vw;
}
#start7 {
  position:absolute;
  top: 11300px;
  width: 100px; height: 50px;
  background-color: rgb(255, 0, 0);
  opacity: 0;
  margin-left: 90vw;
}
#start8 {
  position:absolute;
  top: 13100px;
  width: 100px; height: 50px;
  background-color: rgb(255, 0, 0);
  opacity: 0;
  margin-left: 90vw;
}
#start9 {
  position:absolute;
  top: 14900px;
  width: 100px; height: 50px;
  background-color: rgb(255, 0, 0);
  opacity: 0;
  margin-left: 90vw;
}
#start10 {
  position:absolute;
  top: 16700px;
  width: 100px; height: 50px;
  background-color: rgb(255, 0, 0);
  opacity: 0;
  margin-left: 90vw;
}
#start11 {
  position:absolute;
  top: 18500px;
  width: 100px; height: 50px;
  background-color: rgb(255, 0, 0);
  opacity: 0;
  margin-left: 90vw;
}
#start12 {
  position:absolute;
  top: 20300px;
  width: 100px; height: 50px;
  background-color: rgb(255, 0, 0);
  opacity: 0;
  margin-left: 90vw;
}