/* main css - Week 01 */
body {
    font-family: "Open Sans", sans-serif;
     overflow: hidden;
}

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

/* Hide these elements initially */
#logo,
#bird1,
#bird2,
#card1,
#card2,
#card3,
#text1,
#text2,
#text3,
#click1,
#click2,
#click3,
#flower1,
#flower2,
#flower3 {
  display: none;
}


main {
    background-color: #fff;
    width: 1920px;
    height: 1080px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

section {
    width: 100%;
    height: 100%;
    display: none;
}

#screen1{
    display: block;
}

.frame {
    left: 680px;
    top: 110px;
    display: none;
}

#frame1{
    display: block;
}

.intro-container {
    left: 750px;
    top: 206px;
    width: 480px;
    height: 650px;
    padding: 35px 25px;
}

.intro-container div,
.intro-container button {
    position: static;
}

.history-txt {
    color: #0075bf;
    background-color: #fff;
    border: solid 1px #0075bf;
    border-radius: 10px;
    font-size: 14px;
    line-height: 19px;
    padding: 18px;
    font-weight: 400;
}

.learn-more-txt{
    font-size: 24px;
    font-weight: 600;
    color: #0075bf;
    margin-top: 35px;
}

button{
    background: none;
    border: none;
    border-radius: 0;
    font: inherit;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

.to-screen-btn{
    background-color: rgba(255, 255, 255, 0.8);
    border: solid 1px #0075bf;
    border-radius: 5px;
    width: 390px;
    height: 80px;
    display: flex;
    margin-top: 30px;

}

.to-screen-btn > div:first-child{
    padding: 10px;
    font-size: 21px;
    font-weight: 600;
    color: #0075bf;
}

.to-screen-btn > div:last-child{
    width: 60px;
    height: 100%;
    background-color: #0075bf;
    color: white;
    font-size: 52px;
    font-weight: 600;
    overflow: hidden;
}

#start-btn{
    width: 100%;
    height: 100%;
    margin-top: 200px;
    font-size: 30px;
    color: #0075bf;
}

.click-through{
    pointer-events: none;
}

.title-txt{
    opacity: 1;
}

.screen p{
    position:absolute;
    left: 910px;
    top: 300px;
    font-size: 35px;
    color: #0075bf;
    font-weight: 700;
}
 
#logo{
    left: 900px;
    top: 50px;
}

#card1{
    left: 325px;
    top: 320px;
}

#card2{
    left: 810px;
    top: 380px;
}

#card3{
    right: 325px;
    top: 320px;
}

#bird1{
    left: 455px;
    top: 148px;
}

#bird2{
    right: 259px;
    top: 141px;
}

#flower1{
    bottom: 235px;
    left: 516px;
}

#flower2{
    left: 1016px;
    bottom: 173px;
}

#flower3{
    right: 248px ;
    bottom: 217px ;
}

#text1{
    left: 345px;
    bottom: 411px;
}
#text2{
    left: 838px;
    bottom: 343px;
}
#text3{
    left: 1330px;
    bottom: 411px;
}

#click1{
    left: 352px ;
    bottom: 343px;
}
#click2{
    left: 842px ;
    bottom: 270px;
}
#click3{
    left: 1330px ;
    bottom: 326px;
}

.screen img {
    display: block;
}

#back-btn{
    width: 60px;
    height: 100px;
    background-color: #0075bf;
    border-radius: 0 4px 4px 0;
    color: #fff;
    opacity: 0.75;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-content: center;
    line-height: 1;
    font-size: 80px;
}

#screen2{
    overflow: hidden;
}

#screen2title {
    left: 535px;
    top: 60px;
    display: block;
}

#s2-tap{
    bottom: 46px;
    left: 791px;
}

.s2-c{
    left:454px;
    top:493px;
    display: none;
}

#screen2timeline {
    top: 360px;
    left: 156px;
    width: 1570px;
    height: 480px;
    display: flex;
    flex-direction: row;
}
#s2-t1{
    top:-141px;
    left:230px;
    height: 256px;
    width: 194px;
}

#s2-t2{
    top:-141px;
    left:460px;
    height: 256px;
    width: 194px;
}
#s2-t3{
    top:-141px;
    left:690px;
    height: 256px;
    width: 194px;
}
#s2-t4{
    top:-141px;
    left:920px;
    height: 256px;
    width: 194px;
}
#s2-t5{
    top:-141px;
    left:1150px;
    height: 256px;
    width: 194px;
}

#s2-line{
    width:1094px;
    left: 243px;
    top: -9px;
}

#timelinetext{
    top: 476px;
    left: 200px;
}

#s3title{
    left: 600px;
    top: 45px;
}

#s3actvector{
    left: 115px;
    top: 508px;
}

#s3activities{
    left: 275px;
    top: 205px;
}

#rect1{
 left: 326px;
 top: 241px;
 opacity: 0;
}
#rect2{
 left: 459px;
 top: 358px;
 opacity: 0;
}
#rect3{
 left: 497px;
 top: 529px;
 opacity: 0;
}
#rect4{
 left: 466px;
 top: 700px;
 opacity: 0;
}
#rect5{
 left: 340px;
 top: 835px;
 opacity: 0;
}

.s3-c{
    left: 673px;
    top: 206px;
    display: none;
}

#s3-c3{
    left: 673px;
    top: 175px;
    display: none;
}

#s3-tap{
    left: 791px;
    bottom: 62px;
}










#s4title{
    left: 600px;
    top: 30px;
}

#s4bird1{
    top: 20px;
}

#s4bird2{
    top: 550px;
}

#s4rec{
    top: 207px;
    left: 895px;
}

#s4rect{
    top: 207px;
    left: 895px;
}

#s4txt2{
    top: 417px;
    left: 910px;
}

#s4txt3{
    top: 780px;
    left: 923px;
}

#s4txt1{
    top: 225px;
    left: 920px;
}

#s4bird3{
    top: 625px;
    left: 662px;
}

#s4bird4{
    top: 666px;
    left: 1505px;
}