#MainMenu {

    & #play {
        position: absolute;
        left: calc(1024px / 2 - 227px / 2);
        bottom: 120px;
        width: 227px;
        height: 87px;
/*        background-image: url('../images/menu/button-play.png');*/
        font-size: 48px;
       padding-right:70px;
    }
    #play:after {
        background-image:url(../images/buttons/arrow-right.png);
        background-repeat:no-repeat;
        background-size:auto 50%;
        background-position:150px center;
    }				
						

    #credits {
        position: absolute;
        left: calc(1024px / 2 - 192px / 2);
        bottom: 20px;
        width: 182px;
        height: 72px;
    }
}

#CreditsDisplay {

    #credits-window {
        position: relative;
        width: 770px;
        height: 670px;
        border: 3px solid gray;
        padding: 40px;
        border-radius: 4px;
        background-color: white;
        color: black;
        display: grid;
        grid-template-rows: 1fr 80px;

        a[href] {
            color: blue;
        }
    }

    #credits-exit {
        position: absolute;
        left: 1px;
        top: 1px;
        width: 80px;
        height: 81px;
        background-image: url('../images/buttons/button_exit.png');
        background-position:top left;
        background-repeat: no-repeat;
        text-transform: uppercase;
        display: grid;
        align-items: center;
        justify-items: center;
        padding-left: 6px;
        padding-right: 0px;
        font-size: 12px;
        color: black;
        font-weight: bold;
        text-align: center;
        filter: brightness(0.5);

        &.tab-highlighted {
            filter: none;
            outline: none;
            transform: scale(1.1);
        }
    }

    .credits-navigator {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .credits-navigator .button {
        background-image: url('../images/buttons/button_right_arrow.png');
        background-size: cover;
        width: 150px;
        height: 75px;

    }

    #credits-left {
        transform: scale(-1, 1);
    }

    .pages {
        display: grid;
        align-items: center;
        justify-items: center;
    }

    .page {
        font-size: 24px;
    }

    .credits-panel {
        display: grid;
        grid-template-columns: auto 3fr;
        grid-column-gap: 1em;
        grid-row-gap: 1em;

        :nth-child(2n+1) {
            color: #69c;
            font-weight: bold;
            text-align: right;
        }
    }

    .credits-navigator .button.disabled {
        opacity: 0.5;
    }

    .credits-navigator .button.tab-highlighted {
        outline: 5px dashed black;
    }

}

#IntroSceneOld {
    background-color: black;

    .story-container {
        display: grid;
        grid-template-rows: 410px 1fr;
        align-items: stretch;
        justify-items: stretch;
        width: 100%;
        height: 100%;
    }

    .story-panels {
        display: flex;
        justify-content: space-between;
        width: 100%;

        img {
            opacity: 0.5;

            &.shown {
                opacity: 1.0;
            }
        }

    }

    .story-navigation {
        display: grid;
        grid-template-columns: 150px 1fr 150px;
        grid-column-gap: 30px;
        align-items: center;
        justify-items: center;
        padding: 20px;
    }

    .story-narration {
        display: grid;
        align-items: center;
        justify-items: center;
        color: white;
        font-size: 36px;
        font-weight: bold;
        text-align: center;
    }

    .story-navigation .button {
        align-self: end;
        background-image: url('../images/buttons/button_right_arrow.png');
        background-size: cover;
        width: 150px;
        height: 75px;

    }

    .story-navigation .button.left {
        transform: scale(-1, 1);
        margin-left:0;
        margin-right:auto;
      
    }
    .story-navigation .button.right {
        margin-right:0;
    }


}

#IntroScene {
    background-color: black;
    
    .story-content {
    	position: absolute;
    	left: 0px;
    	top: 0px;
    	right: 0px;
    	bottom: 0;
        background-color:#5d6577;
    }
    
    .story-navigation {
    	background-color: rgba(0,0,0,.8);
    	position: absolute;
    	left: 0px;
    	right: 0px;
    	bottom: 0px;
    	padding: 15px;
        width:100%;
        display: flex;
        align-items: center;
        justify-items: center;
        /*padding: 20px;*/
    }

    .story-navigation .button {
        align-self: end;
        background-image: url('../images/buttons/button_right_arrow.png');
        background-size: cover;
        width: 110px;
        height: 60px;
position:relative;
    }

    .story-navigation .button.left {
        transform: scale(-1, 1);
        margin-left:0;
        margin-right:auto;
        z-index: 1;
        
    }
    .story-navigation .button#story-right {
        margin-right:0;
        margin-left:auto;
        z-index: 1;
        
    }
    .story-navigation #skip {
        margin:auto;
        font-family:var(--button-font-family);
        font-weight:bold;
        letter-spacing: 1PX;
        margin-bottom:-12px;
        padding:3px 20px;
        background:#17658D;
        border:2px solid rgba(0,0,0,.8);
        text-shadow: 1px 2px 0 rgba(0,0,0,.5);
        
        
    }
}
.story-navigation button b {
    color:white;
}  

/*Slides*/
#caption {
    display:flex;
    justify-content: center;
    bottom:30px;
    height:60px;
   width:100%;
    z-index:1;

}
    #caption p {
        display:inline;
        overflow: hidden;
        white-space: nowrap; 
        margin:auto;
        font-size:1.5rem;
        letter-spacing:.5px;
        font-weight:500;
         animation:typing 4s steps(40, end);
        text-align: center;
    }


/* The typing effect */
@keyframes typing {
  from { width: 0 }
    to { width:100%;}
} 

.intro-slide {
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    
    & div {
        position:absolute;
        background-repeat: no-repeat;
    }
}

.slide-bg {
    height:100%;
    width:100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:transparent;
    background-repeat: no-repeat;
    background-size:100%;
}


/*slide 01*/
#s01-bg {
    background-image:url(../images/intro-slides/s01-background.png);
}

#s01-masked-trader-background {
    display:none;
    height:155px;
    width:162px;
    background-image:url(../images/intro-slides/s01-masked-trader-background.png);
    top:385px;
    left:320px;
    animation:flee_left 40s cubic-bezier(.14,-0.01,.81,.61);
    animation-iteration-count: infinite;
    animation-delay:1s;
    animation-fill-mode: both;
}

@keyframes flee_left {

    0% {
           transform:translate(710px,0);
    }
     4% {
           transform:translate(-145px,20px);
        filter: blur(2px);
    }
     100% {
           transform:translate(-145px,20px);
    }
    
    
    
}



#s01-sign {
    height:263px;
    width:573px;
    background-image:url(../images/intro-slides/s01-warning-sign.png);
    top:0px;
    left:350px;
    animation: fade_pulse 2s ease-out;
    animation-iteration-count: infinite;

    animation-direction: alternate;
    
}
@keyframes fade_pulse {
    0% {
        opacity:0;
        filter: blur(5px);
    }

    75% {
        opacity:1;
        filter: blur(0px);
    }
    100% {
        opacity:1;
        filter: blur(0px);
    }
}
#s01-fg {
    height:234px;
    width:895px;
    background-image:url(../images/intro-slides/s01-mid-ground.png);
    top:456px;
    right:0px
}

#s01-masked-trader-midground {
    height:374px;
    width:242px;
    background-image:url(../images/intro-slides/s01-masked-trader-midground.png);
    top:349px;
    left:712px;  
    animation:idle_anim 3.5s ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: backwards;
    transform-origin: bottom;
    }

#s01-masked-trader-foreground {
    left:0;
    /*bottom:0;*/
    height:450px;
    width:600px;
    /*display:none;*/
    animation:idle_anim 3s ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: backwards;
}

@keyframes idle_anim {
    0%{
        transform:skew(1deg) translateY(5px);
    }
    100%{
        transform:skew(0deg)
    }
}

#s01-masked-trader-torso {
    height:374px;
    width:577px;
    background-image:url(../images/intro-slides/s01-masked-trader-torso.png);
    top:413px;
    left:0;  
}

#s01-masked-trader-head {
    height:273px;
    width:278px;
    background-image:url(../images/intro-slides/s01-masked-trader-head.png);
    top:215px;
    left:60PX;  
    transform-origin: bottom;
    animation:masked_head 6s ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: backwards;
}
@keyframes masked_head {
    0%{
        transform:rotate(2deg);
    }
    100%{
        transform:rotate(-2deg)
    }
}

#s01-masked-trader-arm {
    height:243px;
    width:411px;
    background-image:url(../images/intro-slides/s01-masked-trader-arm.png);
    top:394px;
    left:247px;  
    transform-origin: 0px 10px;
    animation:masked_arm 6s cubic-bezier(.48,.02,.32,1.14);
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: both;
}
@keyframes masked_arm {
    0%{
        transform:rotate(10deg);
    }
    30%{
        transform:rotate(11deg);
0    }
    
    70%{
        transform:rotate(-10deg);
    }
    100% {
        transform:rotate(-11deg);
    }
}
/*slide 02*/
#s02-bg {
    background-image:url(../images/intro-slides/s02-background.png);
}
#s02-zombie-left {
    top:70px;
    left:80px;
    height:637px;
    width:216px;
    background-image:url(../images/intro-slides/s02-zombie-left.png);
    animation:rock_to_side 2.6s ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay:.3s;
    animation-fill-mode: backwards;
    
}   
#s02-zombie-center{
    top:40px;
    left:350px;
    height:731px;
        width:283px;
    background-image:url(../images/intro-slides/s02-zombie-center.png);
    animation:rock_to_side 2s ease-in-out;
    animation-iteration-count: infinite;
    animation-direction:alternate;
    animation-fill-mode: backwards;
    animation-delay:.2s;
    
        
}   
#s02-zombie-right {
    top:50px;
    left:700px;
    height:684px;
    width:229px;
    background-image:url(../images/intro-slides/s02-zombie-right.png);
    animation:rock_to_side 2.5s ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: backwards;
    }   


@keyframes rock_to_side {
    0% {
        transform:rotate(-1deg) translate(-2px,-5px);
    }
    100%{
         transform:rotate(1deg) translate(2px,5x); 
    }
    
}
/*slide 03*/
#s03-bg {
}

#s03-zombie-left {
    top:90px;
    left:5px;
    height:516px;
    width:358px;
    background-image:url(../images/intro-slides/s03-credit-card-zombie.png);
       animation:pop_in 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /*animation-iteration-count: infinite;*/
    animation-direction: alternate;
    animation-fill-mode: backwards;
    
}   
#s03-zombie-center{
    top:-40px;
    left:297px;
    height:750px;
        width:397px;
    background-image:url(../images/intro-slides/s03-insurance-zombie.png);
      animation:pop_in 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /*animation-iteration-count: infinite;*/
    animation-direction:alternate;
    animation-fill-mode: backwards;
    animation-delay:.2s;
    
        
}   
#s03-zombie-right {
    top:90px;
    left:735px;
    height:500px;
    width:287px;
    background-image:url(../images/intro-slides/s03-student-loan-zombie.png);
    animation:pop_in 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /*animation-iteration-count: infinite;*/
    animation-direction: alternate;
    animation-fill-mode: backwards;
    
    animation-delay:.4s;
    } 

@keyframes pop_in {
    0% {
        transform:scale(.8);
    }
    100%{
         transform:scale(1); 
    }
    
}
/*slide 03*/
#s04-bg {
    
        background-image:url(../images/intro-slides/s04-background.png);
        animation: fade_in .2s ease-in-out;
    }
#s04-zombie-center {
    top:-40px;
    left:297px;
    height:750px;
        width:397px;
    background-image:url(../images/intro-slides/s03-insurance-zombie.png);
      animation:place_right 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /*animation-iteration-count: infinite;*/
    animation-direction:alternate;
    animation-fill-mode: forwards;
    
        
} 
@keyframes fade_in {
    0%{
        opacity:0;
    }
    
    100%{
        opacity:1;
    }
}
@keyframes place_right{
    0%{
        
    }
    
    100%{
        transform:translate(120px,-40px) scale(.75);
    }
}
/*slide 04b*/
#s04b-bg {
        
       background-color: rgb(45,47,57);
background: linear-gradient(0deg,  rgba(0,0,0,1) 0%, rgba(45,47,57,1) 100%);
}

#s04b-zombie-heads {
    top:10px;
    right:50px;
    height:704px;
    width:168px;
    background-image:url(../images/intro-slides/s04b-zombie-heads.png);
}
#s04b-zombie-hand-top{
    top:19px;
    right:380px;
    height:118px;
    width:133px;
    background-image:url(../images/intro-slides/s04b-zombie-hand-top.png);
      animation:zombie_hand 4s ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: backwards;
}
#s04b-door-container{
    right:150px;
    height:750px;
    width:400px;
    animation:zombie_push 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: backwards;
}

@keyframes zombie_push {
    0% {
        transform:translateX();
    }
    100% {
        transform:translateX(3px);
    }
}
#s04b-door {
    top:0px;
    right:0;
    height:731px;
    width:275px;
    background-image:url(../images/intro-slides/s04b-door.png);
      /*animation:pop_in 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);*/
    /*animation-iteration-count: infinite;*/
    animation-direction: alternate;
    animation-fill-mode: backwards;
}
#s04b-zombie-hand-floor {
    top:670px;
    right:78px;
    height:66px;
    width:101px;
    background-image:url(../images/intro-slides/s04b-zombie-hand-floor.png);
      animation:pop_in 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /*animation-iteration-count: infinite;*/
    animation-direction: alternate;
    animation-fill-mode: backwards;
}
#s04b-zombie-hand-door{
    top:566px;
    right:102px;
    height:72px;
    width:152px;
    transform-origin: right;
    background-image:url(../images/intro-slides/s04b-zombie-hand-door.png);
      animation:zombie_hand 5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: backwards;
}
@keyframes zombie_hand {
    0%{
        transform:rotate();
    }
    10% {
        transform:rotate(2deg) translateX(1px);
    }
    15% {
        transform:rotate(-2deg) translateX(-1px);;
    }
    30%{
        transform:rotate();
    }
    
}
#s04b-avatar{
    top:45px;
    right:95px;
    height:669px;
    width:366px;
    background-image:url(../images/intro-slides/s04b-avatar.png);
    animation:zombie_push 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: backwards;
}
#s04b-avatar-eyes{
    top:68px;
    right:50px;
    height:20px;
    width:37px;
    background-image:url(../images/intro-slides/s04b-eyes.png);
      animation:avatar_eyes 10s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: both;
}

@keyframes avatar_eyes {
    0%{
        transform:translate(0px, 0px);
    }
     45%{
        transform:translate(0px, 0px);
    }
        55%{
        transform:translate(1px, -3px);
    }
        100%{
        transform:translate(1px, -3px);
    }

    
}
#s04b-credit-score{
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    top:150px;
    left:225px;
    height:172px;
    width:172px;
    background-image:url(../images/intro-slides/s04b-credit-score-meter.png);
      animation:credit_float 5s linear,
          credit_glow 2s ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
    border-radius:50%;
    box-shadow:0 0 20px rgba(255,255,255,.5);
    
    & span.credit-score-label {
        margin-top:2px;
        margin-bottom:auto;
        color: rgb(80,200,140);
    }
    & span.credit-score-number {
        margin-top:auto;
        font-size:40px;
        height:40px;
        width:100%;
        justify-content: center;
        display:flex;
        letter-spacing: 2px;
        font-weight:bold;
        margin-bottom:2px;
        color: rgb(80,200,140);
    }
     & span.credit-score-number:before {
         position:absolute;
        display:flex;
         content:'700';
        animation: score_steps 10s step-start;
        animation-iteration-count: infinite;
         animation-direction: alternate;
    }
}
@keyframes score_steps {
    0%{
        content:'700';color: rgb(80,200,140);
    }
    33% {
        content:'680'; color: rgb(180,180,80);
    }
    66% {
        content:'585';
        
        color: rgb(200,100,100);
    }
    100% {
        content:'625';color: rgb(180,180,80);
    }
    
}

@keyframes credit_float {
    0%{
        transform: translate(10px,0px);
    }
    25% {
        transform: translate(0,10px);
    }
    50%{
        transform: translate(-10px,0);
    }
    75%{
        transform: translate(0,-10px);
    }
    100%{
        transform: translate(10px,0px);
    }
    
}
@keyframes credit_glow {
    0%{
        box-shadow:0 0 20px rgba(255,255,255,.5);
    }
 
    50%{
        box-shadow:0 0 40px rgba(195,225,255,.8);
    }
    100%{
        box-shadow:0 0 20px rgba(255,255,255,.5);
    }
    
    
}


/*slide 05*/
#s05-bg {
    
        background-image:url(../images/intro-slides/s05-background.png);
        animation: ken_burns 40s linear;
animation-fill-mode: forwards;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    }

@keyframes ken_burns{
    0%{
        
    }
    
    100%{
        transform:translate(10px,40px) scale(1.4);
    }
}

/*slide 06*/
#s06-bg {
    
        background-image:url(../images/intro-slides/s06-background.png);
   animation: ken_burns 40s linear;
animation-fill-mode: forwards;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}


/*slide 07*/
#s07-bg {
  
}

#s07-container {
    top:180px;
    height:300px;
    width:90%;
    left:5%;
    display:flex;
    justify-content: center;
    align-items: center;
    
    & > div {
        position:relative;
        margin:auto;
    }
}
#s07-coin {
    height:150px;
    width:150px;
    background-image:url(../images/intro-slides/s07-coin.png);
      animation:pop_in 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /*animation-iteration-count: infinite;*/
    animation-direction: alternate;
    animation-fill-mode: backwards;
}
#s07-savings {
    height:170px;
    width:205px;
    background-image:url(../images/intro-slides/s07-savings.png);
      animation:pop_in 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /*animation-iteration-count: infinite;*/
    animation-direction: alternate;
    animation-fill-mode: backwards;
    
    animation-delay:.2s;

}
#s07-card {
    height:147px;
    width:206px;
    background-image:url(../images/intro-slides/s07-card.png);
      animation:pop_in 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /*animation-iteration-count: infinite;*/
    animation-direction: alternate;
    animation-fill-mode: backwards;
    
    animation-delay:.4s;

}

/*slide 08*/
#s08-bg {
  background-image: url(../images/intro-slides/s08-background.png);
}
#s08-bank-title{
    font-family:var(--heading-font-family);
    		left: 315px;
		right: 280px;
		bottom: 665px;
		color: white;
		font-size: 54px;
		font-weight: bold;
		text-align: center;
        text-shadow: 2px 2px 2px rgba(0,0,0,.9);
}
#s08-cash-title{
    top:295px;
    left:127px;
    
}
#s08-savings-title{
    top:295px;
    left:447px;
    
}
#s08-card-title{
    top:295px;
    left:761px;
    
}
.s08-bank-button-titles {
    /*background-color:rgba(100,0,0,.5);*/
            width:115px;
    height:40px;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			font-size: 16px;
			padding: 0px;
			text-align: center;
			line-height: 1.0;
			text-transform: uppercase;
			color: #333;
			font-weight: bold;
}
/*slide 09*/
#s09-bg {
  background-image: url(../images/intro-slides/s09-sky.png);
}
.s09-stars {
    height:350px;
    width:1024px;
  background-image: url(../images/intro-slides/s09-stars.png);
}
#stars-01 {
    
    animation:fade_in 1.2s linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
#stars-02 {
    top:100px;
    left:-200px;
    transform:scaleX(-1);
    animation:fade_in 3s linear; 
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
#s09-moon {
    top:60px;
    left:363px;
    height:303px;
    width:298px;
  background-image: url(../images/intro-slides/s09-moon.png);
border-radius: 50%;
    box-shadow:0 0 100px rgba(240,220,180,.9),
        inset 0 0 30px rgba(250,190,80,1);
}
#s09-sky {
    top:-300px;
}
@keyframes cloud_movement {
    0%{
        transform:translateX(0);
    }
    
    100%{
        transform:translateX(-1024px);
    }
}
#s09-cloud-1 {
    top:-50px;
    left:0;
    animation:cloud_movement 90s linear;
    animation-direction: normal;
    animation-iteration-count: infinite;
}

#s09-cloud-3 {
    top:-50px;
    left:1024;
    animation:cloud_movement 90s linear;
    animation-direction: normal;
    animation-iteration-count: infinite;
}
.cloud-type-01 {
    height:320px;
    width:838px;
  background-image: url(../images/intro-slides/s09-clouds01.png);
    filter:brightness(90%);    transition:all 1s ease-in-out;

    
}
/*
.cloud-type-02 {
    height:254px;
    width:532px;
  background-image: url(../images/intro-slides/s09-clouds02.png);
}
*/
#s09-grass {
    left:0;
    bottom:-100px;
    height:528px;
    width:1024px;
  background-image: url(../images/intro-slides/s09-grass.png);
    filter:brightness(50%);
}

#s09-credit-star {
      left:145px;
    top:3px;
    height:270px;
    width:270px;
  background-image: url(../images/intro-slides/s09-star.png);
    animation: star_scale 3s linear;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    filter:brightness(200%);
    background-blend-mode:overlay;
}

@keyframes rotate_360 {
    0%{
        transform:rotate();
    }
    100%{
    transform:rotate(390deg);
    }
}
@keyframes star_scale {
    0%{
        transform:scale(.6) rotate(-10deg);
        filter:brightness(100%);
    }
    100%{
    transform:scale(1) rotate(10deg);
        filter:brightness(200%);
    }
}
#s09-fg {
      left:0;
    bottom:0px;
    height:670px;
    width:506px;
  background-image: url(../images/intro-slides/s09-foreground.png);
    
}
/*slide-10*/


#slide-10 #s09-sky {
    height:300px;
    animation: pan_down 1s cubic-bezier(.48,-0.01,.46,1.04);
    animation-fill-mode: forwards;
}
#slide-10 .cloud-type-01 {
   top:50px !important;
}

@keyframes pan_down {
    0%{
    transform:translateY(0px);   
    }
    100%{
        transform:translateY(100%);
    }
}
#slide-10 #s10-grass-group {
    bottom:100px;
    height:100px;
    animation: pan_down 1s cubic-bezier(.48,-0.01,.46,1.04);
    animation-fill-mode: forwards; 
    animation-direction: reverse;
}
#slide-10 #s10-fg-group {
    height:768px;
   animation: pan_down 1s cubic-bezier(.48,-0.01,.46,1.04);
    animation-fill-mode: forwards;
}

#s10-story-logo{
      left:242px;
          top:120px;    height:186px;
    width:540px;
  background-image: url(../images/intro-slides/s09-story-logo.png);
     animation: logo_pop_in 1s cubic-bezier(.43,.21,.43,1.24);

    animation-fill-mode: backwards; 
    animation-delay: .5s;
    
}

@keyframes logo_pop_in {
    0%{
        transform:translateY(500px) scale(.8);
    }
    100% {
     transform:translateY(0px) scale(1);
    }
}