* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

@font-face {
    font-family: 'Galaxy';
    src: url('./fonts/SFDistantGalaxy.woff2') format('woff2'),
        url('./fonts/SFDistantGalaxy.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GSbold';
    src: url('./fonts/GillSans-Bold.woff2') format('woff2'),
        url('./fonts/GillSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GSsemi';
    src: url('./fonts/GillSans-Medium.woff2') format('woff2'),
        url('./fonts/GillSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GSregular';
    src: url('./fonts/GillSans.woff2') format('woff2'),
        url('./fonts/GillSans.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* GENERAL STYLES */
html, body {
    /* stop page from scrolling */
    height: 100%;
    overflow: hidden;
}

div, main, section, img {
    position: absolute;
}

main {
    background-color: #000;
}

#loading, #begin, main, #begin-img {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* makes the middle point of the img to be middle */
}

#loading {
    top: 45%;
}

#loading {
    width: 120px;
    height: auto;
}

/* SHARED SCREEN STYLES */
/* for demo only */
#begin-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

/* #begin-container {
    top: 0;
    left: 0;
} */

#begin-container {
    opacity: 0;
}

#begin {
    /* top: 53%; */
    background-color: #fff;
    color: #aabc80;
    padding: 12px 18px 8px 18px;
    border-radius: 20px;
    border: solid 2px #aabc80;
    transition: all 0.5s;
    font-family: GSbold, sans-serif;
}

#begin-img {
    width: 200px;
    height: auto;
    top: 37.5%;
}

#begin:hover {
    cursor: pointer;
    background-color: #aabc80;
    color: #fff;
    border-color: #aabc80;
}

main {
    width: 960px;
    height: 600px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    display: none;
}

section {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#prev, #next {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    color: #aabc80;
    border: solid 1px #aabc80;
    border-radius: 50%;
    font-size: 20px;
    font-weight: bold;
    transition: all 0.5s;
    top: 30px;
}

#prev {
    left: 30px;
}

#next {
    right: 30px;
}

#prev:hover, #next:hover {
    cursor: pointer;
    color: #fff;
    background-color: #aabc80;
}

/* music play pause button */
#play-pause {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    color: #aabc80;
    border: solid 1px #aabc80;
    border-radius: 50%;
    bottom:360px;
    left: 26px;
}

.play {
    width: 12px;
    height: 16px;
    border-top: 8px solid transparent;
    border-left: 12px solid #aabc80;
    border-bottom: 8px solid transparent;
    margin-left: 2px;
}

.pause {
    width: 10px;
    height: 14px;
    border-right: 4px solid #aabc80;
    border-left: 4px solid #aabc80;
}

#play-pause:hover .play {
    border-left-color: #fff;
}

#play-pause:hover .pause {
    border-right-color: #fff;
    border-left-color: #fff;
}

#play-pause:hover {
    cursor: pointer;
    color: #fff;
    background-color: #aabc80;
}

/* SCREEN 1 STYLES */
#screen1 {
    background: url(../img/screen_1/screen1_background_b.gif)
}

.hover, .click {
    width: 22px;
    height: auto;
}

#s2-hover-1 {
    left: 125px;
    top: 200px;
}

#s2-hover-2 {
    right: 240px;
    top: 165px;
}

#s2-hover-3 {
    right: 150px;
    top: 220px;
}

#s2-hover-4 {
    right: 45px;
    bottom: 180px;
}

#s2-click {
    left: 530px;
    top: 120px;
}

#s1-headline {
    width: 600px;
    height: auto;
    left: 160px;
    top: 100px;
}

#s1-instruction {
    width: 85px;
    height: auto;
    right: 100px;
    bottom: 50px;
}

/* SCREEN 2 STYLES */
#screen2 {
    background: url(../img/screen_2/screen2_bg.gif)
}

#s2-headline {
    width: 455px;
    height: auto;
    top: 55px;
    left: 255px;
}

#s2-pie65 {
    width: 142px;
    height: auto;
    top: 184px;
    left: 153px;
    z-index: 1;
}

#s2-pie11 {
    width: 65px;
    height: auto;
    top: 185px;
    left: 213px;
    z-index: 1;
}

#s2-pie24 {
    width: 65px;
    height: auto;
    top: 210px;
    left: 240px;
    z-index: 1;
}

#s2-pie65:hover, #s2-pie11:hover, #s2-pie24:hover {
    cursor: pointer;
}

#s2-text65 {
    width: 50.5px;
    height: auto;
    top: 297px;
    left: 120px;
    opacity: 0;
}

#s2-text11 {
    width: 59px;
    height: auto;
    top: 154px;
    left: 256px;
    opacity: 0;
}

#s2-text24 {
    width: 68px;
    height: auto;
    top: 265px;
    left: 303px;
    opacity: 0;
}

#s2-box1, #s2-box2, #s2-box3 {
    height: 37px;
    width: auto;
    left: 151px;
}

#s2-box1 {
    top: 388px;
    opacity: 0;
}

#s2-box2 {
    top: 435px;
    opacity: 0;
}

#s2-box3 {
    top: 482px;
    opacity: 0;
}

#s2-ufolight, #s2-ufoonly {
    width: 216px;
    height: auto;
    top: 138px;
    left: 370px;
}

#s2-ufolight {
    z-index: 1;
    display: none;
}

#s2-ufolight:hover, #s2-ufoonly:hover {
    cursor: pointer;
}

#s2-cow {
    width: 90px;
    height: auto;
    bottom: -80px;
    left: 430px;
}

#s2-withoutalien, #s2-withalien {
    width: 144px;
    height: auto;
    right: 230px;
    bottom: 360px;
}

#s2-withoutalien:hover {
    cursor: pointer;
}

#s2-withalien {
    display: none;
}

#s2-1outof5 {
    width: 164px;
    height: auto;
    right: 210px;
    bottom: 275px;
}

#s2-menchart, #s2-womenchart {
    width: 24px;
    height: auto;
}

#s2-menchart:hover, #s2-womenchart:hover {
    cursor: pointer;
}

#s2-menchart {
    right: 120px;
    top: 158px;
}

#s2-womenchart {
    right: 80px;
    top: 173px;
}

#s2-men {
    width: 23px;
    height: auto;
    right: 120px;
    top: 236px;
}

#s2-women {
    width: 24.6px;
    height: auto;
    right: 78px;
    top: 242px;
}

#s2-textmenwomen {
    width: 79px;
    height: auto;
    right: 72px;
    top: 280px;
}

#s2-men70 {
    width: 12.6px;
    right: 125px;
    top: 105px;
    opacity: 0;
}

#s2-women61 {
    width: 12.6px;
    right: 85px;
    top: 120px;
    opacity: 0;
}

#s2-btmtext {
    width: 296px;
    height: auto;
    right: 79px;
    bottom: 132px;
}

.s2-bar {
    width: 209px;
    height: 16.7px;
    border: 1px solid #aabc80;
    border-radius: 10px;
}

#s2-bar1 {
    right:75px;
    bottom: 200px;
}

#s2-bar2 {
    right:75px;
    bottom: 173px;
}

#s2-bar3 {
    right:75px;
    bottom: 146px;
}

#s2-bar1:hover, #s2-bar2:hover, #s2-bar3:hover, #s2-barfill1:hover, #s2-barfill2:hover, #s2-barfill3:hover {
    cursor: pointer;
}

#s2-barfill1 {
    width: 0px; /* 159px */
    height: 16.7px;
    background-color:#aabc80 ;
    border-radius: 10px;
    left: 675px;
    bottom: 200px;
}

#s2-barfill2 {
    width: 0px; /* 159px */
    height: 16.7px;
    background-color:#aabc80 ;
    border-radius: 10px;
    left: 675px;
    bottom: 173px;
}

#s2-barfill3 {
    width: 0px; /* 114px */
    height: 16.7px;
    background-color:#aabc80 ;
    border-radius: 10px;
    left: 675px;
    bottom: 146px;
}

#s2-barhover1, #s2-barhover2, #s2-barhover3 {
    width: 90px;
    font-size: 10px;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    right: 130px;
}

#s2-barhover1 {
    bottom: 203px;
}

#s2-barhover2 {
    bottom: 176px;
}

#s2-barhover3 {
    bottom: 149px;
}

#s2-text70, #s2-text70-2, #s2-text58 {
    width: 23px;
    height: auto;
}

#s2-text70 {
    right: 90px;
    bottom: 204px;
    opacity: 0;
}

#s2-text70-2 {
    right: 90px;
    bottom: 177px;
    opacity: 0;
}

#s2-text58 {
    right: 90px;
    bottom: 150px;
    opacity: 0;
}

.pagenav div {
    width: 24px;
    height: 9.5px;
    border: 1px solid #aabc80;
    left: 29px;
}

.pagenav div:hover {
    background-color: #aabc80;
    transition: all 0.5s;
}

#page1 {
    top: 260px;
}

#page2 {
    top: 275px;
}

#page3 {
    top: 290px;
}

#page4 {
    top: 305px;
}

#page5 {
    top: 320px;
}

#page6 {
    top: 335px;
}




/* SCREEN 3 STYLES */
#screen3 {
    background: url(../img/screen_3/screen3_background.gif);
}

#s3-headline-encounter {
    width: 415px;
    height: auto;
    right: 40px;
    top: 100px;
}

#s3-headline-drake {
    width: 385px;
    height: auto;
    left: 150px;
    top: 310px;
}

#s3-encounter-text {
    width: 361px;
    height: auto;
    right: 40px;
    top: 200px;
}

#s3-drake-text {
    width: 275px;
    height: auto;
    left: 560px;
    top: 310px;
}

#s3-map {
    width: 386px;
    height: auto;
    left: 94px;
    top: 29px;
}

.s3-locationpoint {
    width: auto;
    height: 29.3px;
    cursor: pointer;
}

#s3-location-bc {
    width: auto;
    height: 45px;
    top: 165px;
    left: 115px;
    cursor: pointer;
}

#s3-location-alberta {
    left: 202px;
    top: 220px;
}

#s3-location-sas {
    left: 195px;
    top: 165px;
}

#s3-location-manitoba {
    left: 265px;
    top: 210px;
}

#s3-location-ontario {
    left: 325px;
    top: 220px;
}

#s3-location-nunavut {
    left: 235px;
    top: 125px;
}

#s3-location-quebec {
    left: 340px;
    top: 155px;
}

.s3-location-no {
    width: 36.6px;
    height: auto;
    opacity: 0;
}

#s3-location-5 {
    left: 270px;
    top: 90px;
}

#s3-location-7 {
    left: 173px;
    top: 201px;
}

#s3-location-8 {
    top: 133px;
    left: 100px;
}

#s3-location-9 {
    left: 358px;
    top: 193px;
}

#s3-location-10 {
    left: 367px;
    top: 120px;
}

#s3-location-16-mani {
    left: 288px;
    top: 170px;
}

#s3-location-16-sas {
    left: 186px;
    top: 145px;
}

#s3-line {
    bottom: 39px;
    height: 119.4px;
    width: auto;
    left: 51px;
}

.s3-drakealpha {
    cursor: pointer;
}

#s3-drake-n {
    height: 35px;
    width: auto;
    left: 65px;
    bottom: 122px;
}

#s3-drake-r {
    height: 37.7px;
    width: auto;
    left: 203px;
    bottom: 122px;
}

#s3-drake-fp {
    height: 40.5px;
    width: auto;
    left: 319px;
    bottom: 118px;
}

#s3-drake-ne {
    height: 24px;
    width: auto;
    left: 425px;
    bottom: 122px;
}

#s3-drake-fl, #s3-drake-fi, #s3-drake-fc {
    height: 35.5px;
    width: auto;
}

#s3-drake-fl {
    left: 538px;
    bottom: 122px;
}

#s3-drake-fi {
    left: 638px;
    bottom: 122px;
}

#s3-drake-fc {
    left: 732px;
    bottom: 122px;
}

#s3-drake-l {
    height: 35px;
    width: auto;
    left: 840px;
    bottom: 122px;
}

.s3-draketext {
    opacity: 0;
}

#s3-drake-n-text {
    height: 43px;
    width: auto;
    left: 65px;
    bottom: 40px;
}

#s3-drake-r-text {
    height: 57.2px;
    width: auto;
    left: 203px;
    bottom: 40px;
}

#s3-drake-fp-text {
    height: 45.2px;
    width: auto;
    left: 319px;
    bottom: 40px;
}

#s3-drake-ne-text {
    height: 43px;
    width: auto;
    left: 425px;
    bottom: 40px;
}

#s3-drake-fl-text {
    height: 45.2px;
    width: auto;
    left: 538px;
    bottom: 40px;
}

#s3-drake-fi-text {
    height: 57.2px;
    width: auto;
    left: 638px;
    bottom: 40px;
}

#s3-drake-fc-text {
    height: 57.1px;
    width: auto;
    left: 732px;
    bottom: 40px;
}

#s3-drake-l-text {
    height: 45.2px;
    width: auto;
    left: 840px;
    bottom: 40px;
}


#s3-hover {
    left: 400px;
    top: 100px;
}

#s3-click {
    left: 60px;
    top: 405px;
}

/* SCREEN 4 STYLES */
#screen4 {
    background: url(../img/screen_4/screen4b_background.gif)
}

#s4-ground1 {
    width: 267px;
    height: auto;
    right: 0;
    bottom: 34px;
}

#s4-ground2 {
    width: 235px;
    height: auto;
    right: 219px;
    bottom: 151px;
}

#s4-ground3 {
    width: 142px;
    height: auto;
    right: 449px;
    bottom: 234px;
}

#s4-ground4 {
    width: 109px;
    height: auto;
    right: 592px;
    bottom: 288px;
}

#s4-ground5 {
    width: 77px;
    height: auto;
    right: 707px;
    bottom: 336px;
}

#s4-ground6 {
    width: 57px;
    height: auto;
    right: 795px;
    bottom: 375px;
}

#s4-headline {
    width: 326px;
    height: auto;
    right: 128px;
    top: 51px;
}

.s4-text {
    left: 118.5px;
    top: 352.5px;
    width: 244.6px;
    height: auto;
    opacity: 0;
    display: none;
}

#s4-poster-1897 {
    width: 55px;
    height: auto;
    left: 109px;
    top: 144.5px;
}

#s4-poster-1960 {
    width: 69.5px;
    height: auto;
    left: 179px;
    top: 162px;
}

#s4-poster-1966 {
    width: 87px;
    height: auto;
    left: 270px;
    top: 183px;
}

#s4-poster-1969 {
    width: 109px;
    height: 118px;
    left: 386px;
    top: 206px;
}

#s4-poster-1994 {
    width: 140px;
    height: auto;
    left: 557px;
    top: 246px;
}

#s4-poster-2021 {
    width: 170px;
    height: auto;
    right: 22px;
    top: 314px;
}

.s4-posters {
    z-index: 1;
    cursor: pointer;
}

#s4-instruction {
    width: 319px;
    height: auto;
    left: 118.5px;
    bottom: 22px;
}

/* SCREEN 5 STYLES */
#screen5 {
    background: url(../img/screen_5/screen5_background.gif)
}

.s5-btns {
    width: 131px;
    height: auto;
    right: 51px;
    cursor: pointer;
}

.s5-text {
    top: 202px;
    left: 379px;
    height: auto;
    opacity: 0;
}

#s5-headline {
    width: 571px;
    height: auto;
    top: 46px;
    left: 190px;
}

#s5-text-starwars {
    width: 321px;
}

#s5-text-toy {
    width: 324.7px;
}

#s5-text-xfiles {
    width: 317.6px;
}

#s5-text-et {
    width: 320px;
}

#s5-text-mib {
    width: 323px;
}

#s5-text-alien {
    width: 349px;
}

#s5-btn-starwars {
    top: 156px;
}

#s5-btn-toy {
    top: 219px;
}

#s5-btn-xfiles {
    top: 283.6px;
}

#s5-btn-et {
    top: 347.7px;
}

#s5-btn-mib {
    top: 411px;
}

#s5-btn-alien {
    top: 474.3px;
}

#s5-stage {
    height: 215.9px;
    width: auto;
    bottom: -300px;
    left: 157px;
}

#s5-sil-starwars {
    width: 122.5px;
    height: auto;
    top: 290px;
    left: 165.5px;
    display: none;
}

#s5-sil-toy {
    width: 162.6px;
    height: auto;
    top: 260.7px;
    left: 148px;
    display: none;
}

#s5-sil-xfiles {
    width: 120px;
    height: auto;
    top: 166.2px;
    left: 165px;
    display: none;
}

#s5-sil-et {
    width: 138.5px;
    height: auto;
    top: 244px;
    left: 153.7px;
    display: none;
}

#s5-sil-mib {
    width: 131.5px;
    height: auto;
    top: 173.8px;
    left: 165px;
    display: none;
}

#s5-sil-alien {
    width: 202.6px;
    height: auto;
    top: 168px;
    left: 124.5px;
    display: none;
}

.s5-light {
    height: 31px;
    width: auto;
    bottom: 50px;
    left: 379px;
    cursor: pointer;
}

#s5-starwars-lighton, #s5-toy-lighton, #s5-xfiles-lighton, #s5-et-lighton, #s5-mib-lighton, #s5-alien-lighton {
    height: 39.2px;
    width: auto;
    bottom: 50px;
    left: 370px;
    cursor: pointer;
}

/* SCREEN 6 STYLES */
#screen6 {
    background: url(../img/screen_6/screen6_background.gif)
}

.s6-topicposter {
    width: 131px;
    height: auto;
    top: 222.5px;
}

#s6-headline {
    width: 536px;
    height: auto;
    top: 50px;
    left: 207px;
}

#s6-subline {
    width: 282.7px;
    height: auto;
    top: 161px;
    left: 339px;
}

#s6-topic1 {
    left: 162.6px;
}

#s6-topic2 {
    left: 345px;
}

#s6-topic3 {
    left: 526.5px;
}

#s6-topic4 {
    left: 700.5px;
}

.s6-shadow {
    width: 220px;
    top: 340px;
    opacity: 0.7;
}

#s6-shadow1 {
    left: 118px;
}

#s6-shadow2 {
    left: 301px;
}

#s6-shadow3 {
    left: 481px;
}

#s6-shadow4 {
    left: 660px;
}