/* @import url('https:/fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap'); */

@font-face {
    font-family: "Poppins";
    src: url(Poppins-Regular.ttf);
  }

* {
    margin: 0;
    /* padding: 0; */
    /* box-sizing: border-box; */
    font-family: 'Poppins', sans-serif !important;
}

body {
    width: 100%;
    z-index: -2000;
    height: 100%;
    /* line-height: 1.7; */
    /* background-color: #FFCD19; */
    overflow-x: hidden;
}

/* """"""" */
/* LOADING */
/* """"""" */

.loading{
    display: flex;
    flex-direction: column; /* horizontal alignment */
    justify-content: center; 
    align-items: center;

    z-index: 2000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFCD19;
}
.loading.hidden{
    animation: fadeOut 1s ease-in-out;
    animation-fill-mode: forwards;
    z-index: -1;
}

#orbit{
    position: absolute;
    border: 0px solid rgb(255, 255, 255);
    width: min(40vw, 300px);
    height: min(40vw, 300px);
    border-radius: 50%;
    transform: rotate(45deg);
    animation: spinfinite 3s ease-in-out infinite;
}
#loading-rocket{
    top: 70px;
    width: min(8vw, 60px); /* adjusts logo size */
    height: auto; /* to keep the aspect ratio */ 
}
#loading-logo{
    width: min(20vw, 150px); /* adjusts logo size */
    height: auto; /* to keep the aspect ratio */
}
#loading-text{
    font-size: min(5vw, 40px);
}


/* """"""" */
/* WELCOME */
/* """"""" */

.welcome {
    position: relative;
    height: 100vh;
    background-attachment: local;
    background-color: #FFCD19;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column; /* horizontal alignment */
    justify-content: center;
}

#welcome-text{
    margin: 0 10px;
    border: 0px solid rgb(0, 0, 0);
    font-size: 7vw;
}

#welcome-subs{
    font-size: 2vw;
    z-index: 1000;
}

#one{
    z-index: 1000;
    position: absolute;
    height: 12.5vw;
    top: 5%;
    left: 10%;
}

#two{
    z-index: 1000;
    position: absolute;
    height: 12.5vw;
    top: 7.5%;
    right:10%;
}

#three{
    z-index: 1000;
    height: 12.5vw;
    position: absolute;
    height: 10vw;
    top: 60%;
    left:5%;
}

#four{
    z-index: 1000;
    height: 12.5vw;
    position: absolute;
    height: 10vw;
    top: 60%;
    right:5%;
}

#five{
    z-index: 1000;
    position: absolute;
    height: 12.5vw;
    bottom: 5%;
    left: 43.5%;
}

.welcomeicon:hover {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}


/* """"" */
/* SPACE1 */
/* """"" */

/* Background */
.space{
    position: relative;
    height: 65vw;
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    z-index: -100;
    overflow: hidden;
}

.space_bg_1{
    background-image: url("./Virtual\ Exhibit/Elements/01 Space/Space_BG_1.png");
}

.space_bg_2{
    background-image: url("./Virtual\ Exhibit/Elements/01 Space/Space_BG_2.png");
}

/* Assets animation */

.small_stars_01{
    /* To make things on top of each other */
    position: absolute;
    top: 2vw;
    /* Disappearing effect of the stars at 2nd background */
    opacity: 80%;
    /* Size of the small stars */
    width: 90vw;
    height: 120vw;
    margin-left: 5vw;

    /* animation */
    animation: small-twinkling 3s linear 0.5s infinite alternate;
}

.stars_01{
    width: 60vw;
    height: 40vw;
    z-index: 5;
    display: block;
    margin-left: auto;
    margin-right: auto;
    transform: scale(1.25,1.25);
    opacity: 0%;

    /* animation */
    animation-name: big-twinkling 3s linear 0.5 infinite alternate;
}

.upper_star_01{
    position: absolute;
    top: 10vw;
}

.lower_star_01{
    position: absolute;
    /* top: 50vw; */
    width: 60vw;
    margin-left: 20vw;
    z-index:1000;
}

/* Saturn (Planet 2) */
.saturn-container{
    position: absolute;
    top: 0vw;
    left: -23vw;
    z-index: 10;

    /* Animation */
    -webkit-animation:spin 25s linear infinite;
    -moz-animation:spin 25s linear infinite;
    animation:spin 25s linear infinite;
}

.saturn{
    width: 50vw;
}

/* Uranus (Planet 1) */
.uranus-container{
    position: absolute;
    top: 6vw;
    right: 0vw;
    z-index: 10;
    
    /* Make image larger than div to hide the excess image */
    width: 19vw;
    /* overflow: hidden; */

    
}

.uranus{
    position: absolute;
    width: 30vw; 

    /* Animation */
    -webkit-animation:spin 25s linear infinite;
    -moz-animation:spin 25s linear infinite;
    animation:spin 25s linear infinite;
}

/* Comet */
.comet-container{
    position: absolute;
    top: 4vw;
    z-index: 10;
    width: 17vw;
    right: 12.5vw;
    /* transform: rotate(-40deg); */

    /* animation */
    animation-name: comet1-moving;
    animation-duration: 7s;
    animation-delay: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.comet{
    width: 15vw;
    
}


/* Earth */
.earth-container{
    position: absolute;
    /* top: 56vw; */
    left: -5vw;
    z-index: 15;
    
    width: 17vw;

}

.earth{
    width: 28vw;

    /* Animation */
    -webkit-animation:spin 25s linear infinite;
    -moz-animation:spin 25s linear infinite;
    animation:spin 25s linear infinite;
}

/* Satellite */
.satellite-container{
    position: absolute;
    /* top: 25vw; */
    right: 15vw;
    z-index: 10;
    
    width: 17vw;

    /* animation */
    animation-name: satellite-moving;
    animation-duration: 10s;
    animation-delay: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.satellite{
    width: 11vw;
}


/* Comet 2 */
.comet2-container{
    position: absolute;
    top: 15vw;
    left: 25vw;
    z-index: 10;
    
    width: 17vw;
}

/* Establish Container */
.establish-container{
    position: absolute;
    top: 30vw;
    left: 7vw;
    z-index: 15;
    width: 17vw;
    opacity: 0;
}

.establish{
    width: 25vw;
}

.establish-text{
    position: absolute;
    top: 6vw;
    left: 8vw;
    width: 12vw;
    font-size: 1.75vw;
    font-family: 'Poppins', sans-serif;
}


/* Info2 */
.info2-container{
    position: absolute;
    /* top: 55vw; */
    right: 22vw;
    z-index: 15;
    width: 405;
    text-align: center;
    opacity: 0;
}

.info2{
    width: 35vw;
}

.info2-text{
    position: absolute;
    top: 11vw;
    right: 25%;
    width: 20vw;
    font-size: 1.3vw;
    font-family: 'Poppins', sans-serif;
}

/* Info1 */
.info1-container{
    position: absolute;
    top: 35vw;
    left: 5vw;
    z-index: 15;
    width: 17vw;
    opacity: 0;
}

.info1{
    width: 36vw;
}

.info1-text{
    position: absolute;
    top: 4.5vw;
    left: 9.75vw;
    width: 20vw;
    font-size: 1.5vw;
    font-family: 'Poppins', sans-serif;
}

/* """ */
/* SKY */
/* """ */

.sky1 {
    height:100vw;
    background-image: url("./Virtual\ Exhibit/Elements/02 Sky/Sky BG 1.png");
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    position: relative;
    }
    
.sky2 {
    height:100vw;
    position: relative;
    background-image: url("./Virtual\ Exhibit/Elements/02 Sky/Sky BG 2.png");
    background-size:cover;
    overflow: hidden;
    position: relative;
}

.clouds {
    z-index:-1;
}

.cloudbg {
    position: absolute;
    bottom:0vw;
    left:0vw;
    width:105vw;
    z-index:1;
}

.logo1 {
    height: 20vw;
    width: 100%;
    background-image: url("./Virtual\ Exhibit/Elements/LOGOS/logo-w_plane.png");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top:0px;
    animation: movetoleft 15s linear infinite;
    visibility:hidden;
    z-index: 20;
 }
  
 .logo2 {
    height: 20vw;
    width: 100%;
    background-image: url("./Virtual\ Exhibit/Elements/LOGOS/logo-w_plane.png");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top:0px;
    animation: movetoleft 15s linear 7.5s infinite;
    visibility: hidden;
    z-index: 20;
 }

/* CLOUD POSITIOING */
/* order based on positioning
of clouds from top to bottom */
.cloud6 {
    position: absolute;
    top:3vw;
    right:-10vw;
    width:47vw;
    animation: cloud6_movement linear 12s infinite alternate;
}

.cloud9 {
    position: absolute;
    top:17vw;
    left:-10vw;
    width:45vw;
    animation: cloud9_movement linear 10s infinite alternate;
}

.cloud1 {
    position: absolute;
    top:38vw;
    right:-18vw;
    width:45vw;
    z-index:2;
    animation: cloud1_movement linear 6s infinite alternate;
}

.cloud7 {
    position: absolute;
    top:45vw;
    left:-10vw;
    width:41vw;
    animation: cloud7_movement linear 8s infinite alternate;
}

.cloud4 {
    position: absolute;
    top:78vw;
    left:2vw;
    width:17vw;
    z-index:2;
    animation: cloud4_movement linear 15s infinite alternate-reverse;
}

.cloud5 {
    position: absolute;
    top:78vw;
    right:-7vw;
    width:28vw;
    animation: cloud5_movement linear 30s infinite alternate;
}

.cloud3 {
    position: absolute;
    top:110vw;
    left:-17vw;
    width:40vw;
    animation: cloud3_movement linear 90s infinite alternate;
}

.cloud2 {
    position: absolute;
    top: 110vw;
    right: 5vw;
    width: 14vw;
    animation: cloud2_movement linear 45s infinite alternate-reverse;
}

/* PLANE POSITIONING */
.plane1 {
    position: absolute;
    top: 12vw;
    right: 15vw;
    width:17vw;
    animation: plane1_movement_lr linear 16s infinite, plane1_movement_ud linear 3s infinite;
}

.plane2 {
    position: absolute;
    top: 25.5vw;
    left: 10vw;
    width:30vw;
    animation: plane2_movement_lr linear 12s infinite, plane2_movement_ud linear 12s infinite;
}

/* AIR BALLOON POSITIONING */
.balloon2 {
    position: absolute;
    top: 73vw;
    left: 10vw;
    width:20vw;
    z-index:1;
    animation: balloon2_movement_ud linear 6s infinite alternate, balloon2_movement_lr linear 2s infinite alternate;
}

/* BIRD POSITIONING */
.bird1 {
    position: absolute;
    top: 30vw;
    left: 30vw;
    width:7vw;
    animation: fly1 20s infinite linear;
}

.bird2 {
    position: absolute;
    top: 80vw;
    right: 0vw;
    width:6vw;
    animation: fly2 20s infinite linear;
    z-index: 3;
}

.bird3 {
    position: absolute;
    top: 30vw;
    right: 22vw;
    width:5vw;
    animation: fly3 30s infinite linear;
}

.info{
    visibility: visible;
    z-index: 17 !important;
 }
  
 .vision {
    height: 40%;
    width: 40%;
    background-image: url("./Virtual\ Exhibit/Elements/07 Information Container/Asset 9.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    text-align: center;
    z-index: 20;
    position: absolute;
    top: 0px;
    left:0px;
    opacity: 0;
 }
  
  
 .mission {
    height: 40%;
    width: 40%;
    background-image: url("./Virtual\ Exhibit/Elements/07 Information Container/Asset 10.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    text-align: center;
    z-index: 20;
    position: absolute;
    top: 20vw;
    right:0px;
    opacity: 0;
 }
  
 .values {
    height: 40%;
    width: 40%;
    background-image: url("./Virtual\ Exhibit/Elements/07 Information Container/Asset 8.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    text-align: center;
    z-index: 20;
    position: absolute;
    top: 50vw;
    left:0px;
    opacity: 0;
 }
  
 .textinfo_vis {
    width: 50%;
    font-size: 1vw;
    position: absolute;
    padding: 20%;
    padding-top: 32%;
    left: 8%;
 }
  
 .textinfo_mis {
    width: 50%;
    font-size: 1vw;
    position: absolute;
    padding: 20%;
    padding-top: 30%;
    left: 8%;
 }
  
 .textinfo_val {
    width: 40%;
    font-size: 1.5vw;
    position: absolute;
    padding: 20%;
    padding-top: 30%;
    left: 12%;
    text-align: justify;
 }
 
.abbrv{
    font-size: 2vw;
}

.accenture_info {
    height: 40%;
    width: 40%;
    background-image: url("./Virtual\ Exhibit/Elements/07 Information Container/Asset 8.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    text-align: center;
    z-index: 20;
    position: absolute;
    margin-top: 15vw;
    left:0px;
    opacity: 0;
 }
  
 .textinfo_a_info {
    font-family: "Poppins";
    width: 50%;
    font-size: 1.2vw;
    position: absolute;
    padding: 20%;
    padding-top: 30%;
    left: 2%;
}

.accenture_vid {
    height: 60%;
    width: 60%;
    background-image: url("./Virtual\ Exhibit/Elements/07 Information Container/Asset 10.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right bottom;
    text-align: center;
    position: absolute;
    z-index: 1000;
    bottom: 0;
    right: 0;
    opacity: 0;
}

.a_vid {
margin-top: 35%;
height: 50%;
width: 75%;
margin-right: 10%;
z-index: 1000;
}


/* """ */
/* SEA */
/* """ */

.sea1 {
    height: 100vw;
    background-attachment: scroll;
    background-image: url("./Virtual\ Exhibit/Elements/03 Sea/SEA BG 1.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    text-align: center;
    position: relative;
    margin-top: 0;
    padding: 0;
}

.sea2 {
    height: 100vw;
    background-attachment: scroll;
    background-image: url("./Virtual\ Exhibit/Elements/03 Sea/SEA BG 2.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    text-align: center;
    position: relative;
    margin-top: 0;
    padding: 0;
}

.seainfo {
    height: 100%;
    margin:0;
}   

.accenture_opps {
    height: 40%;
    width: 40%;
    background-image: url("./Virtual\ Exhibit/Elements/07 Information Container/Asset 8.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    text-align: center;
    z-index: 20;
    position: absolute;
    top: 0px;
    left:0px;
    opacity: 0;
}

.accenture_interns {
    height: 40%;
    width: 40%;
    background-image: url("./Virtual\ Exhibit/Elements/07 Information Container/Asset 9.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left bottom;
    text-align: center;
    position: absolute;
    z-index: 20;
    bottom: 10%;
    opacity: 0;
}

.textinfo_a_opps {
    font-family: "Poppins";
    width: 40%;
    font-size: 1.2vw;
    position: absolute;
    padding: 20%;
    padding-top: 30%;
    left: 8%;
}

.textinfo_a_interns {
    font-family: "Poppins";
    width: 50%;
    font-size: 1.3vw;
    position: absolute;
    padding: 20%;
    padding-top: 40%;
    left: 10%;
}

.lighthouse {
    height: 50vw;
    width: 100%;
    background-image: url("./Virtual\ Exhibit/Elements/03 Sea/LightHouse.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right bottom;
    z-index: 2;
    position: absolute;
    bottom:55vw;
}

.wave {
    width: 100%;
    height: 1080px;
}

.wave1 {
    height: 100vw;
    width: 100%;
    background-image: url("./Virtual\ Exhibit/Elements/03 Sea/1.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    z-index: 1;
    position: absolute;
    bottom:50vw;
    animation: sway 2s linear 0.6s infinite alternate;
}

.wave2 {
    height: 100vw;
    width: 100%;
    background-image: url("./Virtual\ Exhibit/Elements/03 Sea/2.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    z-index: 3;
    position: absolute;
    bottom: 40vw;
    animation: sway 1.5s linear 0.3s infinite alternate;
}

.wave3 {
    height: 100vw;
    width: 100%;
    background-image: url("./Virtual\ Exhibit/Elements/03 Sea/3.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    z-index: 5;
    position: absolute;
    bottom: 30vw;
    animation: sway 2.3s linear 0.1s infinite alternate;
}

.wave4 {
    height: 100vw;
    width: 100%;
    background-image: url("./Virtual\ Exhibit/Elements/03 Sea/4.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    z-index: 7;
    position: absolute;
    bottom: 20vw;
    animation: sway 2s linear 0.7s infinite alternate;
}

.wave5 {
    height: 100vw;
    width: 100%;
    background-image: url("./Virtual\ Exhibit/Elements/03 Sea/5.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    z-index: 9;
    position: absolute;
    bottom: 10vw;
    animation: sway 2s linear 0.4s infinite alternate;
}

.wave6 {
    height: 100vw;
    width: 100%;
    background-image: url("./Virtual\ Exhibit/Elements/03 Sea/6.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    z-index: 11;
    position: absolute;
    bottom: 0;
}

.ship {
    height: 10vw;
    width: 100%;
    background-image: url("./Virtual\ Exhibit/Elements/03 Sea/Ship.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left bottom;
    z-index: 2;
    position: absolute;
    bottom:55vw;

}

.isle1 {
    height: 15vw;
    width: 50%;
    background-image: url("./Virtual\ Exhibit/Elements/03 Sea/Isle 1.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left bottom;
    z-index: 4;
    position: absolute;
    bottom: 40vw;
    left: 10vw;
    animation: smallsway 2s linear 0.4s infinite alternate;
}

.boat1 {
    height: 10vw;
    width: 100%;
    background-image: url("./Virtual\ Exhibit/Elements/03 Sea/Boat 1.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right bottom;
    z-index: 4;
    position: absolute;
    bottom: 39vw;
    right: 40vw;
    animation: sidebyside 2s linear 0.4s infinite alternate, smallsway 3s linear 0.4s infinite alternate;;
}

.boat3 {
    height: 10vw;
    width: 100%;
    background-image: url("./Virtual\ Exhibit/Elements/03 Sea/Boat 3 (2).png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right bottom;
    z-index: 6;
    position: absolute;
    bottom: 39vw;
    right: 20vw;
    animation: smallsway 3s linear 0.4s infinite alternate;
}

.isle2 {
    height: 15vw;
    width: 100%;
    background-image: url("./Virtual\ Exhibit/Elements/03 Sea/Isle 2.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right bottom;
    z-index: 10;
    position: absolute;
    bottom: 17vw;
    animation: smallsway 2s linear 0.4s infinite alternate;
}

.boat2 {
    height: 5vw;
    width: 50vw;
    background-image: url("./Virtual\ Exhibit/Elements/03 Sea/Boat 2.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left bottom;
    z-index: 10;
    position: absolute;
    bottom: 20vw;
    left: 10vw;
    animation: smallsway 3s linear 0.4s infinite alternate;
}

/* """""""""" */
/* UNDERWATER */
/* """""""""" */

.underwater1 {
    height: 100vw;
    background-attachment: scroll;
    background-image: url("./Virtual\ Exhibit/Elements/04 Underwater/Underwater BG 1.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    text-align: center;
    position: relative;
    margin-top: 0;
    padding: 0;
    overflow: hidden;
}

.underwater2 {
    height: 100vw;
    background-attachment: scroll;
    background-image: url("./Virtual\ Exhibit/Elements/04 Underwater/Underwater BG 2.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    text-align: center;
    position: relative;
    margin-top: 0;
    padding: 0;
    overflow: hidden;
}

.accenture_awards1 {
    height: 40%;
    width: 40%;
    background-image: url("./Virtual\ Exhibit/Elements/07 Information Container/Asset 11.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right bottom;
    text-align: center;
    z-index: 20;
    position: absolute;
    right: 0px;
    opacity: 0;
}

.accenture_awards2 {
    height: 40%;
    width: 40%;
    background-image: url("./Virtual\ Exhibit/Elements/07 Information Container/Asset 10.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right bottom;
    text-align: center;
    position: absolute;
    z-index: 20;
    bottom: 10%;
    right: 0;
    opacity: 0;
}

.Career_Series {
    height: 40%;
    width: 40%;
    background-image: url("./Virtual\ Exhibit/Elements/07 Information Container/Asset 11.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left bottom;
    text-align: center;
    position: absolute;
    z-index: 20;
    top: 10%;
    left: 0;
    opacity: 0;
}


.Jobfair {
    height: 40%;
    width: 40%;
    background-image: url("./Virtual\ Exhibit/Elements/07 Information Container/Asset 7.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right bottom;
    text-align: center;
    position: absolute;
    z-index: 20;
    top: 40%;
    right: 0;
    opacity: 0;
}

.Mixer {
    height: 40%;
    width: 40%;
    background-image: url("./Virtual\ Exhibit/Elements/07 Information Container/Asset 10.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left bottom;
    text-align: center;
    position: absolute;
    z-index: 20;
    bottom: 0px;
    left: 0px;
    opacity: 0;
} 

.textinfo_a_awards1 {
    font-family: "Poppins";
    width: 40%;
    font-size: 1.7vw;
    position: absolute;
    padding: 20%;
    padding-top: 40%;
    left: 8%;
}

.textinfo_a_awards2 {
    font-family: "Poppins";
    width: 40%;
    font-size: 1.7vw;
    position: absolute;
    padding: 20%;
    padding-top: 40%;
    right: 8%;
}

.textinfo_CS {
    font-family: "Poppins";
    width: 40%;
    font-size: 1.1vw;
    position: absolute;
    padding: 20%;
    padding-top: 40%;
    right: 15%;
}

.textinfo_Jf {
    font-family: "Poppins";
    width: 50%;
    font-size: 1vw;
    position: absolute;
    padding: 20%;
    padding-top: 38%;
    right: 8%;
}

.textinfo_Mixer {
    font-family: "Poppins";
    width: 50%;
    font-size: 1.2vw;
    position: absolute;
    padding: 20%;
    padding-top: 42%;
    right: 2%;
}

.smallwave{
    height: 80vh;
    width: 100%;
    background-image: url("./Virtual\ Exhibit/Elements/04 Underwater/BG Detail 1.png");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 9;
    position:absolute;
    background-position: bottom;
}

.whale1 {
    height: 20vh;
    width: 20vw;
    background-image: url("./Virtual\ Exhibit/Elements/04 Underwater/Whale.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left bottom;
    position: absolute;
    opacity: 0.4;
    left: 0px;
    top: 40vh;
    animation: hor_swim 2s ease-in-out infinite alternate, ver_swim 25s linear infinite normal;
}

.fishes1 {
    height: 17vh;
    width: 17vw;
    background-image: url("./Virtual\ Exhibit/Elements/04 Underwater/Fish.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left bottom;
    position: absolute;
    top: 70vh;
    left: 0px;
    animation: hor_swim 1s ease-in-out infinite alternate, ver_swim 12s linear infinite normal;
}

.fishes2 {
    height: 17vh;
    width: 17vw;
    background-image: url("./Virtual\ Exhibit/Elements/04 Underwater/Fish.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right top;
    position: absolute;
    top: 20vh;
    right: 0;
    animation: hor_swim 2s ease-in-out infinite alternate, ver_swim 6s linear infinite reverse
}

.fishes3 {
    height: 24vh;
    width: 24vw;
    background-image: url("./Virtual\ Exhibit/Elements/04 Underwater/Fish.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left bottom;
    position: absolute;
    top: 60vh;
    left: 0px;
    animation: hor_swim 0.8s ease-in-out infinite alternate, ver_swim 7s linear infinite normal;
}

.fishes4 {
    height: 14vh;
    width: 14vw;
    background-image: url("./Virtual\ Exhibit/Elements/04 Underwater/Fish.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right top;
    position: absolute;
    top: 10vh;
    opacity: 0.5;
    right: 0;
    animation: hor_swim 2s ease-in-out infinite alternate, ver_swim 20s linear infinite reverse; 
}

.whale2 {
    height: 100vh;
    width: 50vw;
    background-image: url("./Virtual\ Exhibit/Elements/04 Underwater/Whale.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left bottom;
    position: absolute;
    opacity: 0.9;
    right: 0px;
    transform: scaleX(-1);
    animation: hor_swim 2s ease-in-out infinite alternate, ver_swim 25s linear infinite reverse;
}

.underwaterparticles {
    height: 100vh;
    width: 100%;
    background-image: url("./Virtual\ Exhibit/Elements/05 Seafloor/Particle 1 (2).png");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0px;
    opacity: 0.2;
    animation: swim_up 40s ease-in-out 20s infinite alternate;
}

.jellyfish1 {
    height: 17vh;
    width: 17vw;
    background-image: url("./Virtual\ Exhibit/Elements/04 Underwater/Jelly Fish.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left bottom;
    position: absolute;
    top: 70vh;
    left: 0px;
    animation: jellyfish1 20s linear infinite normal;
}

.jellyfish2 {
    height: 20vh;
    width: 20vw;
    background-image: url("./Virtual\ Exhibit/Elements/04 Underwater/Jelly Fish.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right top;
    position: absolute;
    top: 20vh;
    right: 0px;
    animation: jellyfish2 15s linear infinite alternate;
}

.Submarine {
    background-image: url("./Virtual\ Exhibit/Elements/04 Underwater/Submarine.png");
    background-size: contain;
    background-repeat: no-repeat; 
    position: absolute;
    top: 0%;
    right: 6vw;
    height: 20vw;
    width: 50vw;
    z-index: 20;
    animation: sway 4s linear infinite alternate;
}

.Submarine p{
    font-family: "Poppins";
    width: 60%;
    font-size: 3vw;
    position: absolute;
    padding: 11%;
    padding-top: 15%;
    right: 2%;
    text-shadow: 3px 3px 10px orange;
}

/* """"""" */
/* DEEPSEA */
/* """"""" */

.deepsea {
    height: 100vw;
    background-attachment: scroll;
    background-image: url("./Virtual\ Exhibit/Elements/05 Seafloor/Deep Water BG.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    text-align: center;
    position: relative;
    margin-top: 0;
    padding: 0;
    overflow: hidden;
}

.deepsea #submarine {
    position: absolute;
    left: 50%;
}

.deepsea #submarine img {
    position: sticky;  /*stick to the 'container' after passing the region*/
}

.deepsea #grants{
    position: absolute;
    top: 10vw;
    height: 30%;
    width: 40%;
    left: 0%;
    z-index: +6;
    opacity: 0;
}

.deepsea #grants img{
    position: absolute;
    left: 10%;
    height: 100%;
    width: 100%;
    z-index: +5;
}

.deepsea #grants p{
    position: absolute;
    z-index: +6;
    padding: 20%;
    padding-top: 17%;
    font-family: "Poppins";
    font-size: 1.2vw;
    left: 18%;
    width: 40%;
}

.deepsea #opps{
    position: absolute;
    top: 40vw;
    height: 30%;
    width: 40%;
    right: 0%;
    z-index: +6;
    opacity:0;
}

.deepsea #opps img{
    position: absolute;
    right: 10%;
    height: 100%;
    width: 100%;
    z-index: +5;
}

.deepsea #opps p{
    position: absolute;
    z-index: +6;
    padding: 25%;
    padding-top: 17%;
    font-family: "Poppins";
    font-size: 1vw;
    right: 14%;
    width: 40%;
}

/* other design */
.deepsea #fishies1 {
    padding-top: 10vw;
    height: 10vw;
}

.deepsea #fishies1 .f1{
    height: 10%;
    position: absolute;
    animation: hor_swim 2s ease-in-out infinite alternate, ver_swim 30s linear infinite normal;
    z-index: +4;
}

.deepsea #fishies1 .f2{
    transform: scaleX(-1);
    height: 10%;
    position: absolute;
    animation: hor_swim 2s ease-in-out infinite alternate, ver_swim 30s linear infinite reverse; 
    z-index: +4;
}

.deepsea #fishies2 {
    padding-top: 10vw;
    height: 10vw;
}

.deepsea #fishies2 .f3{
    height: 10%;
    position: absolute;
    animation: hor_swim 2s ease-in-out infinite alternate, ver_swim 20s linear infinite normal;
    z-index: +4;
}

.deepsea #fishies2 .f4{
    transform: scaleX(-1);
    height: 10%;
    position: absolute;
    animation: hor_swim 2s ease-in-out infinite alternate, ver_swim 20s linear infinite reverse; 
    z-index: +4;
}

.deepsea #bubbles{
    width: 100%;
}

.deepsea #bubbles img{
    position: absolute;
    z-index: +3;
    width: 95%;
    top: 0px;
    left: 2.5%;
    opacity: 0.2;
}

.deepsea #seaweed1{
    position: absolute;
    height: 50%;
    bottom: 0%;
    width: 33%;
    right: 0px;
}

.deepsea #seaweed1 img{
    position: absolute;
    z-index: +2;
    width: 100%;
    right: 0px;
    bottom: 0px;
}

.deepsea #seaweed2{
    position: absolute;
    height: 50%;
    bottom: 0%;
    width: 66%;
    left: 0px;
}

.deepsea #seaweed2 img{
    position: absolute;
    z-index: +1;
    width: 100%;
    left: 0px;
    bottom: 0px;
}

/* """"" */
/* MODAL */
/* """"" */

/* #Pearl{
    ;
} */

#pearlquiz {
    height: 20vw;
    width: 100vw;
    background-image: url("./Virtual\ Exhibit/Elements/05 Seafloor/Clam\ Open.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment:local;
    position:absolute;
    bottom: 5vw;
    z-index: 200;
    text-align: left;
}

#pearl:hover {
    border-radius: 10vw;
    border-color: yellow;
    box-shadow: 0 0 50px 5px yellow;
}

#pearl {
    height: 7vw;
    width: 7vw;
    position: absolute;
    bottom: 5vw;
    left: 0;
    right: 0;
    z-index: 20;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}

.pearl-quiz-reminder {
    position: absolute;
    font-size: 1.5vw;
    padding: 0.5vw;
    border-radius: 15px;
    top: 15.6vw;
    left: 34vw;
    border: 2px solid black;
    background-color: #fed100;
    opacity: 100%;
}


    
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 12; /* Sit on top */
padding-top: 50px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0); /* Black w/ opacity */
}
    
.modal-content {
    height: 2000px;
    margin: auto;
    display: block;
    width: 80%;
}
    
.modal-content { 
    animation-name: zoom;
    animation-duration: 0.6s;
}

.questionaire {
    background-image: url("./Virtual\ Exhibit/Elements/Extra/TopView Sea.png");
    background-size: cover;
    background-repeat: no-repeat;
    font-family: "Poppins";
    font-size: 1.5rem;
    position: relative;
    height: 40vw;
    width: 10 0%;
}

.container {
    padding: 100px 100px;
    height: 20vw;
    width: 100%;
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover, .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.textinput {
    padding: 2vw;
    }
    
.textinput input {
    background-color: rgb(125, 125, 131);
    width: 90%;
    color:white;
    border-radius: 10px;
    font-size: 20px;
}

.mulcho {
    padding: 2vw;
}

#submit {
    cursor: pointer;
    height: 3vw;
    width: 20%;
    background-color: darkblue;
    color: white;
    position: absolute;
    bottom: 2vw;
    right: 2vw;
    border-radius: 10px;
    font-size: 2vw;
}

#submit:hover {
    animation: changebgcolor 1s ease-in-out infinite alternate, changecolor 1s ease-in-out infinite alternate;;
}

.pnbutton{
    position: absolute;
    bottom: 1vw;
    left: 50%;
    cursor: pointer;
    font-size: 3vw;
}
    
.mySlides {
    position: relative;
    top:50px;
    margin: 50px;
    padding: 20px;
    height: 30vw;
    background-color: rgb(255,255,255,0.8);
    overflow: scroll;
}


/* """""" */
/* BUTTON */
/* """""" */

#TopButton {
    position: fixed;
    bottom: 1vw;
    left:10vw;
    height: 5vw;
    width: 6vw;
    text-align: center;
    background-color: rgb(175, 168, 155, 0.5);
    color: rgb(0, 0, 0,0.5);
    font-size: 2vw;
    border-radius: 30px;
    border-color: rgb(175, 168, 155);
    z-index: 600;
    padding-top: 1vw;
    margin-left: auto;
    margin-right: auto;
}

#TopButton:hover {
    background-color: rgb(131, 130, 130);
    opacity: 0.5;
}


#Button {
    position: fixed;
    bottom: 6vw;
    right: 6vw;
    height: 5vw;
    width: 10vw;
    opacity: 0;
    display: none;
    background-color: rgb(241, 186, 83);
    color: black;
    font-size: 1.3vw;
    border-radius: 20px;
    z-index: 500;
}

#Button:hover {
    background-color: orange;
    
}
    

/* """""""""" */
/* ANIMATIONS */
/* """""""""" */

@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}

@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}

@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}

@keyframes big-twinkling{
    0%  {opacity: 10%;}
    25% {opacity: 25%;}
    50% {opacity: 50%;}
    75% {opacity: 75%;}
    100% {opacity: 100%;}
}

@keyframes small-twinkling{
    0%  {opacity: 80%;}
    25% {opacity: 75%;}
    50% {opacity: 50%;}
    75% {opacity: 25%;}
    100% {opacity: 10%;}
}

@keyframes comet1-moving {
    0% {transform: rotate(-180deg);}
    15%{right: 20vw;transform: rotate(-180deg);}
    20%{ top: 2vw;right: 25vw; transform: rotate(-180deg);}
    25%{top: 1vw;transform: rotate(-180deg);right: 35vw;}
    35%{top: 2vw;right: 50vw;transform: rotate(-220deg);}
    50% {top: 3vw;transform: rotate(-220deg);right: 69vw; }
    65% {top: 2vw;right: 60vw;transform: rotate(-40deg);}
    75% {top: 2vw;right: 50vw; transform: rotate(-40deg);}
    80%{top: 2vw;right: 40vw;}
    100%{top: 4vw;right: 12.5vw;}
}

@keyframes satellite-moving{
    0% {top: 25vw;right: 15vw;}
    20% {top: 15vw;right: 15vw;}
    40% {top: 30vw;right: 10vw;}
    60% {top: 35vw;right: 2vw;}
    80% {top: 35vw;right: 10vw;}
    100% {top: 25vw;right: 10vw;}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

@keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}

@keyframes moveUp {
    from {opacity: 0; top: 50%;}
    to   {opacity: 1; top: 5%;}
}

@keyframes moveRight {
    from {opacity: 0; left: -50vw;}
    to   {opacity: 1; left: 0;}
}

@keyframes moveLeft {
    from {opacity: 0; right: -50vw;}
    to   {opacity: 1; right: 0;}
}

@keyframes moveToLeft {     /* Move from right side to left side */
    from {opacity: 0; left: 150vw;}
    to   {opacity: 1; left: 0;}
}

@keyframes moveToRight {   /* Move from left side to right side */
    from {opacity: 0; right: 150vw;}
    to   {opacity: 1; right: 0;}
}

@keyframes movedown {
    from {opacity: 0; bottom: 150vw;}
    to   {opacity: 1; bottom: 0;}
}

@keyframes changebgcolor {
    from {background-color: darkblue;}
    to   {background-color: aqua;}
    }
    
@keyframes changecolor {
    from {color: white;}
    to {color:black;}
}

@keyframes sway {
    from {transform: skewY(3deg);}
    to {transform: skewY(-3deg);}
    
}

@keyframes smallsway {
    from {transform: skewY(1deg);}
    to {transform: skewY(-1deg);}
}

@keyframes sidebyside {
    from {right: 40vw;}
    to   {right: 42vw;}
}

@keyframes movetoleft {
    from    {visibility: visible; right: -100vw;}
    to      {right: 200vw;}
}

@keyframes jellyfish1 {
    0% {top: 70vh; left: 0px;}
    10%   {top: 50vh; left: -20vw;}
    30% {top: 100vh; right: -50vw; transform: scaleX(-1);}
    50% {top:100ch; left:200vw;}
    100% {top: 70vh;}
}

@keyframes jellyfish2 {
    0% {top: 20vh; left: 0px;}
    10%   {top: 0vh; left: -20vw;}
    30% {top: 100vh; right: -50vw; transform: scaleX(-1);}
    50% {top:100ch; left:200vw;}
    100% {top: 70vh;}
}

@keyframes hor_swim {
    0%   {margin-top: 10px;}
    100% {margin-top: 70px;}
}

@keyframes ver_swim {
    0%   {left: -50vw;}
    100% {left: 150vw;}
}

@keyframes swim_up {
    from {bottom: 0px;}
    to   {bottom: 50vh;}
}

@keyframes swim_sideways {
    from {margin-left: 0px;}
    to   {margin-left: 30px;}
}

@keyframes cloud6_movement{
    0% {right:0vw}
    100% {right:-10vw}
}

@keyframes cloud9_movement{
    0% {left:0vw}
    100% {left:10vw}
}

@keyframes cloud1_movement {
    0% { right: 0vw }
    100% { right: 5vw }
}

@keyframes cloud7_movement {
    0% {left: 0vw}
    100% {left:5vw}
}

@keyframes cloud4_movement {
    0% {left:5vw;}
    100% {left:11vw;}
}

@keyframes cloud5_movement {
    0% {right:-7vw}
    100% {right:11vw;}
}

@keyframes cloud3_movement {
    0% {left:-17vw;}
    100% {left: 17vw;}
}

@keyframes cloud2_movement {
    0% {right:5vw;}
    100% {right:20vw;}
}

@keyframes plane1_movement_lr {
    0% {left:-15vw;}
    50% {left: 50vw;}
    100% {left:100vw;}
}

@keyframes plane1_movement_ud {
    0% {top:32vw;}
    50% {top:36vw;}
    100% {top:32vw;}
}

@keyframes plane2_movement_lr {
    0% {right:-35vw;}
    100% {right:100vw;}
}

@keyframes plane2_movement_ud {
    0% {top:8vw;}
    100% {top:2vw;}
}

@keyframes makeVisible {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fly1 {
    0% {transform: translateX(-20vw);}
    50% {transform: translateX(120vw);}
    51% {transform: translateX(120vw) scaleX(-1);}
    100% {transform: translateX(-20vw) scaleX(-1);}
}

@keyframes fly2 {
    0% {transform: translate(30vw, 10vw) scaleX(-1);}
    25% {transform: translate(-50vw, 10vw) scaleX(-1);}
    50% {transform: translate(-110vw, -30vw) scaleX(-1);}
    51% {transform: translate(-110vw, -30vw) scaleX(1);}
    75% {transform: translate(-50vw, -20vw) scale(1);}
    100% {transform: translate(70vw) scaleX(1);}
} 

@keyframes fly3 {
    0% {transform: translate(40vw, 30vw) scaleX(-1);}
    25%{transform: translate(-10vw, 10vw) scaleX(-1);}
    50%{transform: translate(-80vw, 40vw) scaleX(-1);}
    51%{transform: translate(-80vw, 40vw) scaleX(1);}
    75%{transform: translate(30vw, 0vw) scaleX(1);}
    99%{transform: translate(30vw, 0vw) scaleX(1);}
    100%{transform: translate(30vw, 0vw) scaleX(1);}
} 

@keyframes spinfinite {
    100% {transform: rotate(405deg); }
}

@keyframes fadeOut {
    100%{opacity: 0;visibility: hidden;}
}

@keyframes shake {
    10%, 90% {transform: translate3d(-1px, 0, 0);} 
    20%, 80% {transform: translate3d(2px, 0, 0);} 
    30%, 50%, 70% {transform: translate3d(-4px, 0, 0);}
    40%, 60% {transform: translate3d(4px, 0, 0);}
  }