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: 260px;
  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: 100px;
  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: 50px;
  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: 50px;
  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: 15px;
  color: #000000;
  letter-spacing: 0px;
  top: -7px;
  left: 7px;
}


  
.aspect_16_9 {
  width: 889px; 
  height: 500px;
}

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

.aspect_1_2 {
  width: 500px; 
  height: 1000px;
}

.aspect_17_9 {
  width: 944px; 
  height: 500px;
}

.aspect_25_9 {
  width: 1389px; 
  height: 500px;
}

.aspect_34_9 {
  width: 1889px;
  height: 500px;
}



#patch {
  position: fixed;
  background-color: #3b3b3b;
  width: 3100px; 
  height: 1000px;
  top: 998px; left: 0px;
}

#patch2 {
  position: fixed;
  background-color: #3b3b3b;
  width: 1000px; 
  height: 1000px;
  top: 0px; left: 2000px;
}

#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: 35px; left: 15px;
}
#red_box_4 {
  width: 117px; 
  height: 31px;
  top: 35px; left: 25px;
}
#red_box_6 {
  width: 127px; 
  height: 31px;
  top: 35px; left: 25px;
}
#red_box_9 {
  width: 97px; 
  height: 31px;
  top: 35px; left: 15px;
}
#red_box_11 {
  width: 130px; 
  height: 31px;
  top: 45px; left: 30px;
}



#title_1 {
    position: fixed; 
    transform-origin: center;
    top: 300px; left: 650px;
  }

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

#text_1 {
    position: fixed; 
    transform-origin: center;
    top: 400px; left: 175px;
    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: 75px;
}



#box_f2i1_1 {
  width: 152px; 
  height: 47px;
  top: 290px; left: 700px;
}
#box_f2i1_2 {
  width: 160px; 
  height: 47px;
  top: 350px; left: 692px;
}
#box_f2i1_3 {
  width: 60px; 
  height: 32px;
  top: 410px; left: 692px;
}
#box_f2i2_1 {
  width: 190px; 
  height: 62px;
  top: 410px; left: 285px;
}
#box_f2i3_1 {
  width: 127px; 
  height: 31px;
  top: 350px; left: 285px;
}
#box_f2i5_1 {
  width: 272px; 
  height: 47px;
  top: 100px; left: 285px;
}
#box_f2i5_2 {
  width: 157px; 
  height: 31px;
  top: 160px; left: 285px;
}
#box_f2i6_1 {
  width: 157px; 
  height: 47px;
  top: 160px; left: 20px;
}

#panel_2_item_1 {
  position: fixed;
  top: -600px; left: -989px;
  transform: rotate(-35deg);
}
#panel_2_item_2 {
  position: fixed;
  top: -600px; left: 889px;
  transform: rotate(25deg);
}
#panel_2_item_3 {
  position: fixed;
  top: -600px; left: 1989px;
  transform: rotate(-25deg);
}
#panel_2_item_4 {
  position: fixed;
  top: 1060px; left: -1060px;
  transform: rotate(-35deg);
}
#panel_2_item_5 {
  position: fixed;
  top: 1180px; left: 500px;
  transform: rotate(15deg);
}
#panel_2_item_6 {
  position: fixed;
  top: 1060px; left: 1989px;
  transform: rotate(-30deg);
}



#box_f3i2_1 {
  width: 200px; 
  height: 31px;
  top: 190px; left: 650px;
}
#box_f3i3_1 {
  width: 200px; 
  height: 47px;
  top: 370px; left: 277px;
}
#box_f3i3_2 {
  width: 220px; 
  height: 47px;
  top: 430px; left: 257px;
}
#box_f3i4_1 {
  width: 205px; 
  height: 47px;
  top: 120px; left: 30px;
}
#box_f3i5_1 {
  width: 127px; 
  height: 31px;
  top: 250px; left: 345px;
}
#box_f3i5_2 {
  width: 90px; 
  height: 31px;
  top: 300px; left: 775px;
}
#box_f3i6_1 {
  width: 187px; 
  height: 31px;
  top: 40px; left: 40px;
}

#panel_3_item_1 {
  position: fixed;
  top: -600px; left: -600px;
  transform: rotate(-35deg);
}
#panel_3_item_2 {
  position: fixed;
  top: -700px; left: 500px;
  transform: rotate(15deg);
}
#panel_3_item_3 {
  position: fixed;
  top: -600px; left: 1989px;
  transform: rotate(-25deg);
}
#panel_3_item_4 {
  position: fixed;
  top: 1060px; left: -1060px;
  transform: rotate(-35deg);
}
#panel_3_item_5 {
  position: fixed;
  top: 1180px; left: 500px;
  transform: rotate(-15deg);
}
#panel_3_item_6 {
  position: fixed;
  top: 1060px; left: 1989px;
  transform: rotate(35deg);
}



#box_f4i2_1 {
  width: 225px; 
  height: 31px;
  top: 442px; left: 250px;
}
#box_f4i3_1 {
  width: 240px; 
  height: 47px;
  top: 50px; left: 350px;
}
#box_f4i4_1 {
  width: 210px; 
  height: 31px;
  top: 70px; left: 30px;
}

#panel_4_item_1 {
  position: fixed;
  top: -20px; left: -600px;
  transform: rotate(-10deg);  
}
#panel_4_item_2 {
  position: fixed;
  top: -600px; left: 500px;
  transform: rotate(25deg);
}
#panel_4_item_3 {
  position: fixed;
  top: -600px; left: 1989px;
  transform: rotate(-15deg);
}
#panel_4_item_4 {
  position: fixed;
  top: 1180px; left: 500px;
  transform: rotate(20deg);
}
#panel_4_item_5 {
  position: fixed;
  top: 1060px; left: 1989px;
  transform: rotate(35deg);
}



#box_f5i1_1 {
  width: 175px; 
  height: 31px;
  top: 80px; left: 190px;
}
#box_f5i2_1 {
  width: 205px; 
  height: 47px;
  top: 80px; left: 700px;
}
#box_f5i2_2 {
  width: 87px; 
  height: 31px;
  top: 195px; left: 235px;
}
#box_f5i2_3 {
  width: 177px; 
  height: 31px;
  top: 170px; left: 728px;
}
#box_f5i3_1 {
  width: 220px; 
  height: 31px;
  top: 110px; left: 210px;
}

#panel_5_item_1 {
  position: fixed;
  top: -600px; left: -1060px;
  transform: rotate(5deg);
}
#panel_5_item_2 {
  position: fixed;
  top: -600px; left: 2000px;
  transform: rotate(-10deg);  
}
#panel_5_item_3 {
  position: fixed;
  top: 1060px; left: -1060px;
  transform: rotate(15deg);  
}
#panel_5_item_4 {
  position: fixed;
  top: 1060px; left: 2000px;
  transform: rotate(-20deg);  
}
#panel_5_item_5 {
  position: fixed;
  top: 1060px; left: 690px;
  transform: rotate(10deg);  
}



#box_f6i1_1 {
  width: 165px; 
  height: 47px;
  top: 45px; left: 300px;
}
#box_f6i1_2 {
  width: 107px; 
  height: 31px;
  top: 107px; left: 300px;
}

#panel_6_item_1 {
  position: fixed;
  top: -600px; left: -600px;
  transform: rotate(35deg);
}
#panel_6_item_2 {
  position: fixed;
  top: -600px; left: 500px;
  transform: rotate(5deg);  
}
#panel_6_item_3 {
  position: fixed;
  top: 1060px; left: -1060px;
  transform: rotate(35deg);  
}
#panel_6_item_4 {
  position: fixed;
  top: 1080px; left: 500px;
  transform: rotate(20deg);  
}
#panel_6_item_5 {
  position: fixed;
  top: 1060px; left: 1989px;
  transform: rotate(-15deg);  
}



#box_f7i1_1 {
  width: 180px; 
  height: 31px;
  top: 80px; left: 290px;
}
#box_f7i3_1 {
  width: 75px; 
  height: 31px;
  top: 90px; left: 30px;
}
#box_f7i3_2 {
  width: 87px; 
  height: 31px;
  top: 130px; left: 30px;
}
#box_f7i4_1 {
  width: 187px; 
  height: 31px;
  top: 400px; left: 667px;
}
#box_f7i5_1 {
  width: 220px; 
  height: 31px;
  top: 15px; left: 15px;
}
#box_f7i6_1 {
  width: 125px; 
  height: 31px;
  top: 20px; left: 20px;
}

#panel_7_item_1 {
  position: fixed;
  top: -600px; left: -600px;
  transform: rotate(-20deg);  
}
#panel_7_item_2 {
  position: fixed;
  top: -600px; left: 500px;
  transform: rotate(10deg);  
}
#panel_7_item_3 {
  position: fixed;
  top: -600px; left: 1989px;
  transform: rotate(35deg);  
}
#panel_7_item_4 {
  position: fixed;
  top: 1060px; left: -1060px;
  transform: rotate(15deg);  
}
#panel_7_item_5 {
  position: fixed;
  top: 1080px; left: 889px;
  transform: rotate(25deg);  
}
#panel_7_item_6 {
  position: fixed;
  top: 1060px; left: 1989px;
  transform: rotate(20deg);  
}



#box_f8i3_1 {
  width: 247px; 
  height: 31px;
  top: 80px; left: 450px;
}
#box_f8i4_1 {
  width: 150px; 
  height: 31px;
  top: 25px; left: 25px;
}
#box_f8i4_2 {
  width: 120px; 
  height: 31px;
  top: 150px; left: 350px;
}
#box_f8i4_3 {
  width: 197px; 
  height: 31px;
  top: 420px; left: 400px;
}
#box_f8i5_1 {
  width: 150px; 
  height: 31px;
  top: 30px; left: 250px;
}

#panel_8_item_1 {
  position: fixed;
  top: -600px; left: -600px;
  transform: rotate(35deg); 
}
#panel_8_item_2 {
  position: fixed;
  top: -600px; left: 500px;
  transform: rotate(-25deg);  
}
#panel_8_item_3 {
  position: fixed;
  top: -600px; left: 1989px;
  transform: rotate(35deg);  
}
#panel_8_item_4 {
  position: fixed;
  top: 1060px; left: -1060px;
  transform: rotate(20deg);  
}
#panel_8_item_5 {
  position: fixed;
  top: 1060px; left: 2000px;
  transform: rotate(15deg);  
}



#box_f9i1_1 {
  width: 230px; 
  height: 31px;
  top: 60px; left: 650px;
}
#box_f9i2_1 {
  width: 245px; 
  height: 31px;
  top: 140px; left: 100px;
}
#box_f9i2_2 {
  width: 177px; 
  height: 31px;
  top: 180px; left: 100px;
}
#box_f9i3_1 {
  width: 310px; 
  height: 31px;
  top: 400px; left: 350px;
}
#box_f9i4_1 {
  width: 110px; 
  height: 31px;
  top: 40px; left: 40px;
}
#box_f9i4_2 {
  width: 150px; 
  height: 31px;
  top: 80px; left: 40px;
}
#box_f9i5_1 {
  width: 97px; 
  height: 31px;
  top: 40px; left: 40px;
}

#panel_9_item_1 {
  position: fixed;
  top: -600px; left: -600px;
  transform: rotate(5deg);  
}
#panel_9_item_2 {
  position: fixed;
  top: -600px; left: 2000px;
  transform: rotate(-10deg);  
}
#panel_9_item_3 {
  position: fixed;
  top: 1060px; left: -1060px;
  transform: rotate(15deg);  
}
#panel_9_item_4 {
  position: fixed;
  top: 1080px; left: 889px;
  transform: rotate(20deg);  
}
#panel_9_item_5 {
  position: fixed;
  top: 1060px; left: 1989px;
  transform: rotate(-15deg);  
}



#box_f10i1_1 {
  width: 240px; 
  height: 31px;
  top: 410px; left: 100px;
}
#box_f10i2_1 {
  width: 200px; 
  height: 31px;
  top: 350px; left: 280px;
}
#box_f10i3_1 {
  width: 300px; 
  height: 31px;
  top: 40px; left: 120px;
}
#box_f10i4_1 {
  width: 210px; 
  height: 31px;
  top: 350px; left: 690px;
}
#box_f10i4_2 {
  width: 180px; 
  height: 31px;
  top: 400px; left: 720px;
}
#box_f10i5_1 {
  width: 132px; 
  height: 31px;
  top: 385px; left: 20px;
}
#box_f10i5_2 {
  width: 225px; 
  height: 31px;
  top: 435px; left: 20px;
}

#panel_10_item_1 {
  position: fixed;
  top: -600px; left: -1060px;
  transform: rotate(-15deg); 
}
#panel_10_item_2 {
  position: fixed;
  top: -600px; left: 2000px;
  transform: rotate(15deg); 
}
#panel_10_item_3 {
  position: fixed;
  top: 1060px; left: -1060px;
  transform: rotate(-15deg); 
}
#panel_10_item_4 {
  position: fixed;
  top: 1060px; left: 2000px;
  transform: rotate(20deg); 
}
#panel_10_item_5 {
  position: fixed;
  top: 1060px; left: 690px;
  transform: rotate(10deg); 
}



#box_f11i1_1 {
  width: 275px; 
  height: 31px;
  top: 370px; left: 40px;
}
#box_f11i2_1 {
  width: 215px; 
  height: 31px;
  top: 110px; left: 60px;
}

#panel_11_item_1 {
  position: fixed;
  top: -600px; left: -600px;
  transform: rotate(-15deg); 
}
#panel_11_item_2 {
  position: fixed;
  top: -600px; left: 500px;
  transform: rotate(15deg); 
}
#panel_11_item_3 {
  position: fixed;
  top: -600px; left: 1989px;
  transform: rotate(-10deg); 
}
#panel_11_item_4 {
  position: fixed;
  top: 1080px; left: 0px;
  transform: rotate(2deg); 
}



#panel_12_item_1 {
  position: fixed;
  top: -600px; left: -600px;
  transform: rotate(-15deg);
  filter: contrast(150%);   
}
#panel_12_item_2 {
  position: fixed;
  top: -700px; left: 500px;
  transform: rotate(10deg);
  filter: contrast(150%);   
}
#panel_12_item_3 {
  position: fixed;
  top: 1060px; left: -1060px;
  transform: rotate(5deg);
  filter: contrast(150%);   
}
#panel_12_item_4 {
  position: fixed;
  top: 1060px; left: 1989px;
  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;
}