body { 
  font-family: 'AMPVXsans';
  width: 100vw;
  height: 100vh;
}

/* Custom Fonts */
	@font-face {
  	font-family: 'AMPVXsans';
  	src: url('https://thehumanitarium.com/PerformanceKunia/fonts/AMPVX Sans.ttf');
	}
	


/********************/
/* INTRO 1 PAGE CSS */
/********************/

    .container {
      position: absolute;
      top: 30vh;
      overflow: hidden;
      height: 30vh;
      z-index: 1;
      /*width: 100vw;*/
    }

    .shape {
        display: none;
        transition: none;
    }

    .shape.loaded {
      display: block;
    }
    
    .hide {
        animation: bounceOff 1s ease-in-out;
    }

    .flashing-word {
        position: absolute;
        font-size: 1vw;
        top: 50%;
        left: 50%;
        color: red;
      animation: flash 3s infinite;
      z-index: 99;
      cursor: pointer;
    }
    
        .flashing-word-click {
        position: absolute;
        font-size: 0.8vw;
        top: 52%;
        left: 50%;
        color: gray;
      animation: flash 3s infinite;
      animation-delay: 2s;
      z-index: 99;
      cursor: pointer;
    }
    
    .skipIntro {
    position: absolute;
    font-size: 0.8vw;
    top: 5%;
    left: 95%;
    color: gray;
    animation: flash 3s infinite;
      z-index: 99;
      cursor: pointer;
    }

    .pic1 {
      position: fixed;
      left: 10vw;
      height: 30%;
      animation: bounceIn 1s ease-in-out;
      z-index: 1;
    }

    .pic2 {
      position: fixed;
      left: 16.5vw;
      height: 30%;
      animation: bounceIn 1s ease-in-out;
      z-index: 1;
    }
    
    .pic3 {
      position: fixed;
      left: 20vw;
      height: 30%;
      animation: bounceIn 1s ease-in-out;
      z-index: 1;
    }
    
    .pic4 {
      position: fixed;
      left: 23.5vw;
      height: 30%;
      animation: bounceIn 1s ease-in-out;
      z-index: 1;
    }
    
    .pic5 {
      position: fixed;
      left: 28.8vw;
      height: 30%;
      animation: bounceIn 1s ease-in-out;
      z-index: 1;
    }
    
    .pic6 {
      position: fixed;
      left: 34.0vw;
      height: 30%;
      animation: bounceIn 1s ease-in-out;
      z-index: 1;
    }
    
    .pic7 {
      position: fixed;
      left: 41vw;
      height: 30%;
      animation: bounceIn 1s ease-in-out;
      z-index: 1;
    }
    
    .pic8 {
      position: fixed;
      left: 50vw;
      height: 30%;
      animation: bounceIn 1s ease-in-out;
      z-index: 1;
    }
    
    .pic9 {
      position: fixed;
      left: 57vw;
      height: 30%;
      animation: bounceIn 1s ease-in-out;
      z-index: 1;
    }
    
    .pic10 {
      position: fixed;
      left: 65vw;
      height: 45%;
      animation: bounceInWall 1s ease-in-out;
      z-index: 1;
    }
    
    .pic11 {
      position: fixed;
      top: 60vh;
      left: 10vw;
      height: 14%;
      animation: bounceInHumanitarium 1s ease-in-out;
      z-index: 1;
    }
    
    .redCircle {
      display: none;
      position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1.0);
      background: red;
      border-radius: 100%;
      width: 2vw;
      height: 2vw;
      animation: redCircleEnters 1s ease-in-out forwards;
      z-index: 3;
    }
    
    .whiteCircle {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: white;
      /*border-radius: 50%;*/
      opacity: 1;
      z-index: 0;
    }

/********************/
/* BIGBANG PAGE CSS */
/********************/

    .whiteText {
        display: block;
        font-size: 1vw;
        color: white;
        z-index: 1;
    }
    
    .introLine1 {
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: slowMagnify 4s forwards;
        /*z-index: 1;*/
    }

    .introLine2 {
        display: none;
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: slowMagnify 3s forwards;
        /*z-index: 1;*/
    }
    
    .introLine3 {
        display: none;
        position: absolute;
        top: 39%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: slowMagnify 4s forwards;
        /*z-index: 1;*/
    }
    
    .introLine4 {
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: startBigBang 1.5s infinite;
        /*z-index: 1;*/
    }


/********************/
/* MENU PAGE CSS */
/********************/

/* Menu elements - div for group actions */
#menuElements {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

/* Handling of NO LONGER EXISTING */
.noLonger { 
    position: absolute; 
    top: 50%; 
    left: 65%; 
    transform: translate(-50%, -50%); 
    font-size: 1.8vw; 
    font-weight: 500; 
    letter-spacing: 10px; 
    color: black;
} 

.noLonger span { animation: animate 0.2s linear forwards; } 

.noLonger span:nth-child(1) { animation-delay: 0s; } 
.noLonger span:nth-child(2) { animation-delay: 0.05s; } 
.noLonger span:nth-child(3) { animation-delay: 0.1s; } 
.noLonger span:nth-child(4) { animation-delay: 0.15s; } 
.noLonger span:nth-child(5) { animation-delay: 0.2s; } 
.noLonger span:nth-child(6) { animation-delay: 0.25s; } 
.noLonger span:nth-child(7) { animation-delay: 0.3s; } 
.noLonger span:nth-child(8) { animation-delay: 0.35s; } 
.noLonger span:nth-child(9) { animation-delay: 0.4s; } 
.noLonger span:nth-child(10) { animation-delay: 0.45s; } 
.noLonger span:nth-child(11) { animation-delay: 0.5s; } 
.noLonger span:nth-child(12) { animation-delay: 0.55s; } 
.noLonger span:nth-child(13) { animation-delay: 0.6s; } 
.noLonger span:nth-child(14) { animation-delay: 0.65s; } 
.noLonger span:nth-child(15) { animation-delay: 0.70s; } 
.noLonger span:nth-child(16) { animation-delay: 0.75s; } 
.noLonger span:nth-child(17) { animation-delay: 0.8s; } 
.noLonger span:nth-child(18) { animation-delay: 0.85s; } 
  
/* Animate from black to dark grey color to simulate opacity 0 -> 1 */
@keyframes animate { 
    0% { color: black; }
    100% { color: #606060; } 
} 

/* Strikethrough the text No More Existing */
.strikethrough { 
    position: absolute; 
    top: 50%; 
    left: 52%; 
    /*transform: translate(-50%, -50%); */
    width: 380px;
    height: 1px;
    background-color: red;
    animation: strikethrough 0.9s ease-in-out forwards;
    /*animation-delay: 0.9s;*/
    opacity: 0;
} 

@keyframes strikethrough {
    0% { width: 0; opacity: 1; }
    10% { width: 20px; opacity: 1; }
    90% { width: 360px; opacity: 1; }
    100% { width: 380px; opacity: 1; } 
}

/* Dummy full screen div so that when user clicks somewhere the menu appears*/
.full-screen {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*opacity: 0;*/
  z-index: 10;
}

/* Animate the two line seperators */
/* White Line Menu Separator */
.firstLineSeperator {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 380px;
  height: 1px;
  background-color: white;
  transform: rotate(0deg);
  transform-origin: top left;
  clip-path: polygon(100px 0, 380px 0, 100px 10px, 0 1.5px);
  animation: rotateWhiteLine 1s ease-in-out forwards;
}

@keyframes rotateWhiteLine {
  0% { background-color: red; transform:  rotate(0deg); }
100% { background-color: white; transform:  rotate(-120deg); }
}

/* Gray Line Menu Separator */
.secondLineSeperator {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 380px;
  height: 1px;
  background-color: gray;
  transform: rotate(-120deg);
  transform-origin: top left;
  clip-path: polygon(100px 0, 380px 0, 100px 10px, 0 1.5px);
  animation: rotateGrayLine 1s ease-in-out forwards;
}

@keyframes rotateGrayLine {
  0% { background-color: white; transform:  rotate(-120deg); }
100% { background-color: gray; transform:  rotate(-240deg); }
}

/* Menu 1 title  */
#aboutHumanitarium{
/*   text-transform:uppercase; */
    display: none;
    position: absolute;
    top: 20%;
    left: 36%;
    color:white;
    font-size:1.5em;
    font-weight:bold;
    text-align:left;
    text-shadow:0.05em 0.05em red;
    transform: rotate(60deg);
}

/* Menu 2 title  */
#aboutPeople{
/*   text-transform:uppercase; */
    display: none;
    position: absolute;
    top: 62%;
    left: 36%;
    color:red;
    font-size:1.5em;
    font-weight:bold;
    text-align:left;
    text-shadow:0.05em 0.05em white;
    transform: rotate(-60deg);
}

/* Menu 1 gif to hover */
#humansToHover{
    display: none;
  position: absolute;
  top: 20%;
  width: 10vw;
  height: 10vw;
  left: 55%;
  border-radius: 50%;
    border-style: dashed;
  border-color: red;
  border-width: 1px;
  opacity: 1;
  transform: scale(1.0);
  animation: appear0to100 1s ease-in-out forwards;
  cursor: url(cursors/pointer.cur);
  z-index: 2;
}

/* Menu 2 gif to hover */
#youToHover{
    display: none;
  position: absolute;
  top: 43%;
  width: 10vw;
  height: 10vw;
  left: 20%;
  border-radius: 50%;
    border-style: dashed;
  border-color: red;
  border-width: 1px;
  opacity: 1;
  transform: scale(1.0);
  animation: appear0to100 1s ease-in-out forwards;
  cursor: url(cursors/pointer.cur);
  z-index: 1;
}

/* Menu 3 gif to hover */
#usToHover{
    display: none;
  position: absolute;
  top: 66%;
  width: 10vw;
  height: 10vw;
  left: 55%;
  border-radius: 50%;
    border-style: dashed;
  border-color: red;
  border-width: 1px;
  opacity: 1;
  transform: scale(1.0);
  animation: appear0to100 1s ease-in-out forwards;
  cursor: url(cursors/pointer.cur);
  z-index: 1;
}

/* Menu 1 - Humans video background */
#humansBackground{
    display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /*animation: brightness 1s ease-in-out forwards;*/
  filter: brightness(100%);
  z-index: 5;
}

#menuElements{
    display: block;
}

/* Hover Menu gif -> make image bigger and blur other objects */

@keyframes hoverMenu {
      0% { transform: scale(1.0); }
      100% { transform: scale(1.2); }
    }
@keyframes blur2 {
      0% { filter: blur(0px); }
      100% { filter: blur(2px); }
    }
@keyframes unhoverMenu {
      0% { transform: scale(1.2); }
      100% { transform: scale(1.0); }
    }
@keyframes unblur2 {
      0% { filter: blur(2px); }
      100% { filter: blur(0px); }
    }
    
/* Click Menu1 */
@keyframes zoomMenu1 {
      0% { transform: scale(1.2); }
      100% { transform: scale(150); }
    }
@keyframes brightness {
      0% { filter: brightness(1000%); }
      100% { filter: brightness(100%); }
    }

/* Humans Text */
#humansText{
    display: none;
  position: absolute;
  top: 2%;
  font-size: 2vw;  
  text-shadow: 1px 1px #FFFFFF;
  color: red;
  text-align: center;
  width: 100vw;
  /*height: 100vh;*/
  /*cursor: url(cursors/pointer.cur);*/
  z-index: 10;
}

/* Click Menu3 */

#launchImage {
    display: none;
    width: 100vw;
    height: 100vh;
    z-index: 11;
}

@keyframes launch {
  0% { transform: translate(-10px, 10px); }
  4% { transform: translate(10px, -10px); }
  6% { transform: translate(-10px, 10px); }
  9% { transform: translate(10px, -10px); }
  14% { transform: translate(-10px, 10px); }
  16% { transform: translate(10px, -10px); }
  17% { transform: translate(-10px, 10px); }
  18% { transform: translate(10px, -10px); }
  20% { transform: translate(-10px, 10px); }
  21% { transform: translate(10px, -10px); }
  24% { transform: translate(-10px, 10px); }
  25% { transform: translate(10px, -10px); }
  26% { transform: scale(1.0); }
  100% { transform: scale(0); }
}

#cloudsImage {
    display: none;
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    animation: cloudsAnimation 1s ease-out forwards;
    z-index: 12;
}

@keyframes cloudsAnimation {
  0% { transform: scale(10.0); opacity: 0 ; }
  20% { transform: scale(1.5); opacity: 1 ; }
  100% { transform: scale(0); opacity: 1; }
}

#shoeImage {
    display: none;
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    animation: shoeAnimation 1s ease-out forwards;
    z-index: 12;
}

@keyframes shoeAnimation {
  0% { transform: scale(3.0) rotate(20deg); }
  100% { transform: scale(0) rotate(80deg); }
}

#condomImage {
    display: none;
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    animation: condomAnimation 1s ease-out forwards;
    z-index: 13;
}

@keyframes condomAnimation {
  0% { transform: scale(2.0) rotate(-20deg); }
  100% { transform: scale(0) rotate(-110deg); }
}

#coffeeImage {
    display: none;
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    animation: coffeeAnimation 1s ease-out forwards;
    z-index: 13;
}

@keyframes coffeeAnimation {
  0% { transform: scale(1.0) rotate(-200deg); }
  100% { transform: scale(0) rotate(-170deg); }
}

#whaleImage {
    display: none;
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    animation: whaleAnimation 2s ease-out forwards;
    z-index: 14;
}

@keyframes whaleAnimation {
  0% { transform: scale(3.0) rotate(90deg); }
  0% { transform: scale(0.5) rotate(80deg); }
  100% { transform: scale(0.3) rotate(100deg); }
}

@keyframes whaleExits {
  0% { transform: scale(0.3) rotate(100deg); opacity: 1;  }
  100% { transform: scale(0.3) rotate(100deg); opacity: 0; }
}


/********************/
/* MENU3 PAGE CSS   */
/********************/

/* About Humanitarium FOR MENU3 */
#aboutHumanitarium2 {
/*   text-transform:uppercase; */
    display: none;
    position: absolute;
    top: 20%;
    left: 36%;
    color: black;
    font-size:1.5em;
    font-weight:bold;
    text-align:left;
    text-shadow:0.05em 0.05em red;
    transform: rotate(60deg);
}

/* White Line Menu Separator */
.firstLineSeperator2 {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 380px;
  height: 1px;
  background-color: black;
  transform: rotate(0deg);
  transform-origin: top left;
  clip-path: polygon(100px 0, 380px 0, 100px 10px, 0 1.5px);
  animation: rotateWhiteLine2 1s ease-in-out forwards;
}

@keyframes rotateWhiteLine2 {
  0% { background-color: red; transform:  rotate(0deg); }
100% { background-color: black; transform:  rotate(-120deg); }
}


/********************/
/* US PAGE CSS.     */
/********************/

.square {
position: absolute;
display: none;
width: 2vw;
height: 2vw;
top: 48%;
left: 75%;
background-color: white;
border: 2px solid gray;
z-index: 30;
}

.square2 {
position: absolute;
display: none;
width: 2vw;
height: 2vw;
top: 48%;
left: 75%;
background-color: black;
border: 2px solid gray;
z-index: 30;
}

#line1 {
position: absolute;
display: none; 
top: 48%;
left: 25%;
font-size: 1.2vw;
color: gray;
}

#line2 {
position: absolute;
display: none; 
top: 53%;
left: 25%;
font-size: 1vw;
color: lightgray;
}

#lineTimer {
position: absolute;
display: none; 
top: 48%;
left: 25%;
font-size: 1.2vw;
color: gray;
z-index: 10;
}

@keyframes audioFadeOut {
  from { volume: 1; } to {volume: 0; }
}

#backToHome {
display: none;  
position: absolute;
top: 48.5%;
left: 55%;
color: slategray;
font-size: 1.5vw;
font-family: AMPVXsans;
text-shadow: 1px 1px 2px red;   
}

#facebook {
display: none;  
position: absolute;
top: 40.5%;
left: 15%;
color: gray;
font-size: 1.5vw;
font-family: AMPVXsans;
text-shadow: 1px 1px 2px red;
}

#instagram {
display: none;  
position: absolute;
top: 47.5%;
left: 25%;
color: gray;
font-size: 1.5vw;
font-family: AMPVXsans;
text-shadow: 1px 1px 2px red;
}

#webpage {
display: none;
position: absolute;
top: 54.5%;
left: 35%;
color: gray;
font-size: 1.5vw;
font-family: AMPVXsans;
text-shadow: 1px 1px 2px red;
}

#email {
display: none;    
position: absolute;
top: 61.5%;
left: 45%;
color: gray;
font-size: 1.5vw;
font-family: AMPVXsans;
text-shadow: 1px 1px 2px red;
}


/********************/
/* ANIMATIONS */
/********************/
    @keyframes flash {
      0% { opacity: 0.2; transform: scale(0.9); }
      50% { opacity: 0.5; transform: scale(1.0); }
      100% { opacity: 0.2; transform: scale(0.9); }
    }
    
    @keyframes bounceIn {
      0% { opacity: 0; transform: scale(0.5); }
      100% { opacity: 1; transform: scale(1); }
    }
    
    @keyframes bounceInWall {
        0% { opacity: 0; transform: scale(0.5); left: 110vw; }
      100% { opacity: 1; transform: scale(1); left: 65vw; }
    }
    
    @keyframes bounceInHumanitarium {
      0% { opacity: 0; right: 35vw; width: 0; }
      100% { opacity: 1; right: 10vw; width: 55%; }
    }
    
    @keyframes bounceOut {
      0% { opacity: 1; left: current;}
      100% { opacity: 0; left: -90%; }
    }
    
    @keyframes bounceOff {
      0% { opacity: 1; }
      100% { opacity: 0; }
    }
    
        @keyframes redCircleEnters {
      0% { left: 130vw; width: 2vw; height: 5vw; transform: translate(-50%, -50%) scale(1);}
      30% { left: 52%; width: 2vw; height: 5vw; transform: translate(-50%, -50%) scale(1);}
      50% { left: 48%; width: 5vw; height: 2vw; transform: translate(-50%, -50%) scale(1);}
      60% { left: 51%; width: 3vw; height: 2vw; transform: translate(-50%, -50%) scale(1);}
      100% { left: 50%; width: 2vw; height: 2vw; transform: translate(-50%, -50%) scale(1);}
    }
    
    @keyframes explode {
      0% { left: 50%; width: 2vw; height: 2vw; transform: translate(-50%, -50%) scale(1);}
      100% { left: 50%; width: 2vw; height: 2vw; transform: translate(-50%, -50%) scale(90);}
    }
    
    @keyframes implode {
      0% { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(90); }
      100% { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1); }
    }
    
    @keyframes disappear {
      0% { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1); }
      100% { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0); }
    }
    
    @keyframes appear {
      0% { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0); }
      100% { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1); }
    }
    
    @keyframes slowMagnify {
      0% { opacity: 0; transform: scale(1); }
      10% { opacity: 1; transform: scale(1.1); }
      70% { opacity: 1; transform: scale(1.2); }
      100% { opacity: 0; transform: scale(1.3); }
    }
    
    @keyframes startBigBang {
      0% { transform: translate(-3%, -3%); }
      25% { transform: translate(-3%, 3%); }
      50% { transform: translate(3%, 3%); }
      75% { transform: translate(3%, -3%); }
      100% { transform: translate(0, 0); }
    }
    
    @keyframes appear0to100 {
    0% { opacity: 0; }
    100% { opacity: 1; }
    }