/* induction header */
#inductionSubScreen .inductionBoardHeader {
    font-size: 20px;
    line-height: 76px;
    margin: 0 auto;
}

#inductionSubScreen .levelButtons {
    position: absolute;
    left: 2%;
    top: 10%;
}

#inductionBoardFooter .side {
    font-size: 25px;
    line-height: 74px;
    text-align: center;
}

#inductionBoard .inductionText {
    width: 100%;
    height: 20%;
    position: absolute;
    bottom: 3%;
    text-align: center;
}

#inductionBoard .inductionText .packageInduction {
    width: 100%;
    height: 100%;
    display: none;
    transition: 0.25s;
    transition-timing-function: ease-in-out;
}

#inductionBoard .inductionText .packageInduction .step {
    position: absolute;
    width: 84%;
    height: 78%;
    padding: 8% 8% 74px 8%;
    font-size: 20px;
    line-height: 20px;
}

#inductionSubScreen.package0 .inductionText #package0Induction {display: inherit}
#inductionSubScreen.package1 .inductionText #package1Induction {display: inherit}
#inductionSubScreen.package2 .inductionText #package2Induction {display: inherit}
#inductionSubScreen.package3 .inductionText #package3Induction {display: inherit}
#inductionSubScreen.package4 .inductionText #package4Induction {display: inherit}

#inductionSubScreen .inductionText .packageInduction .step0 {transform: translate3d(0, 0, 0);}
#inductionSubScreen .inductionText .packageInduction .step1 {transform: translate3d(100%, 0, 0);}
#inductionSubScreen .inductionText .packageInduction .step2 {transform: translate3d(200%, 0, 0);}
#inductionSubScreen .inductionText .packageInduction .step3 {transform: translate3d(300%, 0, 0);}
#inductionSubScreen .inductionText .packageInduction .step4 {transform: translate3d(400%, 0, 0);}
#inductionSubScreen .inductionText .packageInduction .step5 {transform: translate3d(500%, 0, 0);}
#inductionSubScreen .inductionText .packageInduction .step6 {transform: translate3d(600%, 0, 0);}
#inductionSubScreen .inductionText .packageInduction .step7 {transform: translate3d(700%, 0, 0);}
#inductionSubScreen .inductionText .packageInduction .step8 {transform: translate3d(800%, 0, 0);}

#inductionSubScreen.step0 .inductionText .packageInduction {transform: translate3d(0, 0, 0);}
#inductionSubScreen.step1 .inductionText .packageInduction {transform: translate3d(-100%, 0, 0);}
#inductionSubScreen.step2 .inductionText .packageInduction {transform: translate3d(-200%, 0, 0);}
#inductionSubScreen.step3 .inductionText .packageInduction {transform: translate3d(-300%, 0, 0);}
#inductionSubScreen.step4 .inductionText .packageInduction {transform: translate3d(-400%, 0, 0);}
#inductionSubScreen.step5 .inductionText .packageInduction {transform: translate3d(-500%, 0, 0);}
#inductionSubScreen.step6 .inductionText .packageInduction {transform: translate3d(-600%, 0, 0);}
#inductionSubScreen.step7 .inductionText .packageInduction {transform: translate3d(-700%, 0, 0);}
#inductionSubScreen.step8 .inductionText .packageInduction {transform: translate3d(-800%, 0, 0);}

/* induction board */
#inductionCellContainer {
    position: fixed;
}

#inductionHint {
    display: none;
}

#inductionSubScreen .cellparent {
    position: absolute;
    transform: translate3d(0, 0, 0);
    width: 16.667%;
    height: 16.667%;
}

#inductionSubScreen .cellparent .cell {
    top: 0%;
    left: 0%;
    transform: translate3d(0, 0, 0);
    width: 100%;
    height: 100%;
}

#inductionSubScreen .inductionBall {
    width: 16.667%;
    height: 16.667%;
    transform: translate3d(100%, 100%, 0);
    display: none;
    position: absolute;

    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: linear;
}

#inductionSubScreen .inductionBall .ball {
    width: 57.143%;
    height: 57.143%;
    margin: 22%;
}

#inductionSubScreen .cellparent.row0.col0 {transform: translate3d(100%, 100%, 0);}
#inductionSubScreen .cellparent.row0.col1 {transform: translate3d(200%, 100%, 0);}
#inductionSubScreen .cellparent.row0.col2 {transform: translate3d(300%, 100%, 0);}
#inductionSubScreen .cellparent.row0.col3 {transform: translate3d(400%, 100%, 0);}

#inductionSubScreen .cellparent.row1.col0 {transform: translate3d(100%, 200%, 0);}
#inductionSubScreen .cellparent.row1.col1 {transform: translate3d(200%, 200%, 0);}
#inductionSubScreen .cellparent.row1.col2 {transform: translate3d(300%, 200%, 0);}
#inductionSubScreen .cellparent.row1.col3 {transform: translate3d(400%, 200%, 0);}

#inductionSubScreen .cellparent.row2.col0 {transform: translate3d(100%, 300%, 0);}
#inductionSubScreen .cellparent.row2.col1 {transform: translate3d(200%, 300%, 0);}
#inductionSubScreen .cellparent.row2.col2 {transform: translate3d(300%, 300%, 0);}
#inductionSubScreen .cellparent.row2.col3 {transform: translate3d(400%, 300%, 0);}

#inductionSubScreen .cellparent.row3.col0 {transform: translate3d(100%, 400%, 0);}
#inductionSubScreen .cellparent.row3.col1 {transform: translate3d(200%, 400%, 0);}
#inductionSubScreen .cellparent.row3.col2 {transform: translate3d(300%, 400%, 0);}
#inductionSubScreen .cellparent.row3.col3 {transform: translate3d(400%, 400%, 0);}

#inductionSubScreen #inductionHint .hand,
#inductionSubScreen #inductionHint .movement {
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

/* Level animations */

/*==========Package0==========*/

/*----------Step0----------*/
#inductionSubScreen.package0.step0 #inductionBall1 {
    display: inherit;
}

#inductionSubScreen.package0.step0 #inductionHint {
    display: inherit;
    transform: translate3d(300%, 300%, 0);
}

#inductionSubScreen.package0.step0 #inductionHint .hand,
#inductionSubScreen.package0.step0 #inductionHint .movement {
    animation-duration: 6s;
}

#inductionSubScreen.package0.step0 #inductionHint .hand {
    animation-name: handP0S0;
}

#inductionSubScreen.package0.step0 #inductionHint .movement {
    animation-name: movementP0S0;
    display: inherit;
}

@keyframes handP0S0 {
    0%   {opacity: 1; top: 50%; left: 50%}
    15%  {opacity: 1; top: -50%; left: 50%}
    16%  {opacity: 0.5; top: -50%; left: 50%}
    19%  {opacity: 0.5; top: 50%; left: 50%}
    20%  {opacity: 1; top: 50%; left: 50%}
    35%  {opacity: 1; top: 50%; left: -50%}
    40%  {opacity: 0.5; top: 50%; left: 50%}

    45%  {opacity: 1; top: 50%; left: 50%}
    60%  {opacity: 1; top: 50%; left: 150%}
    61%  {opacity: 0.5; top: 50%; left: 150%}
    64%  {opacity: 0.5; top: 50%; left: 50%}
    65%  {opacity: 1; top: 50%; left: 50%}
    80%  {opacity: 1; top: 150%; left: 50%}
    85%  {opacity: 0.5; top: 150%; left: 50%}
    100% {opacity: 0.5; top: 50%; left: 50%}
}

@keyframes movementP0S0 {
    0%   {opacity: 0; transform: rotate(270deg); top: -50%; left: 0%;}
    5%   {opacity: 1; transform: rotate(270deg); top: -50%; left: 0%;}
    15%  {opacity: 1; transform: rotate(270deg); top: -50%; left: 0%;}
    16%  {opacity: 0; transform: rotate(270deg); top: -50%; left: 0%;}
    20%  {opacity: 0; transform: rotate(180deg); top: 0%; left: -50%;}
    35%  {opacity: 1; transform: rotate(180deg); top: 0%; left: -50%;}
    40%  {opacity: 0; transform: rotate(180deg); top: 0%; left: -50%;}

    45%  {opacity: 0; transform: rotate(0deg); top: 0%; left: 50%;}
    50%  {opacity: 1; transform: rotate(0deg); top: 0%; left: 50%;}
    60%  {opacity: 1; transform: rotate(0deg); top: 0%; left: 50%;}
    61%  {opacity: 0; transform: rotate(0deg); top: 0%; left: 50%;}
    65%  {opacity: 0; transform: rotate(90deg); top: 50%; left: 0%;}
    80%  {opacity: 1; transform: rotate(90deg); top: 50%; left: 0%;}
    85%  {opacity: 0; transform: rotate(90deg); top: 50%; left: 0%;}
    100% {opacity: 0; transform: rotate(90deg); top: 50%; left: 0%;}
}

#inductionSubScreen.package0.step0 .cellparent.row0.col2 .cell,
#inductionSubScreen.package0.step0 .cellparent.row1.col2 .cell,
#inductionSubScreen.package0.step0 .cellparent.row2.col2 .cell,
#inductionSubScreen.package0.step0 .cellparent.row3.col2 .cell {
    animation-name: columnMoveP0S0;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-duration: 6s;

}

@keyframes columnMoveP0S0 {
    0%   {transform: translate3d(0, 0, 0);}
    15%  {transform: translate3d(0, -100%, 0);}
    65%  {transform: translate3d(0, -100%, 0);}
    80%  {transform: translate3d(0, 0, 0);}
    100% {transform: translate3d(0, 0, 0);}
}

#inductionSubScreen.package0.step0 .cellparent.row2.col0 .cell,
#inductionSubScreen.package0.step0 .cellparent.row2.col1 .cell,
#inductionSubScreen.package0.step0 .cellparent.row2.col3 .cell {
    animation-name: rowMoveP0S0;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-duration: 6s;

}

@keyframes rowMoveP0S0 {
    0%   {transform: translate3d(0, 0, 0);}
    20%  {transform: translate3d(0, 0, 0);}
    35%  {transform: translate3d(-100%, 0, 0);}
    45%  {transform: translate3d(-100%, 0, 0);}
    60%  {transform: translate3d(0, 0, 0);}
    100% {transform: translate3d(0, 0, 0);}
}

#inductionSubScreen.package0.step0 .cellparent.row3.col2 .cell {
    animation-name: columnEndMoveP0S0;
}

@keyframes columnEndMoveP0S0 {
    0%   {transform: translate3d(0, 0, 0);}
    15%  {transform: translate3d(0, -100%, 0);}
    20%  {transform: translate3d(0, -100%, 0);}
    35%  {transform: translate3d(-100%, -100%, 0);}
    45%  {transform: translate3d(-100%, -100%, 0);}
    60%  {transform: translate3d(0, -100%, 0);}
    65%  {transform: translate3d(0, -100%, 0);}
    80%  {transform: translate3d(0, 0, 0);}
    100% {transform: translate3d(0, 0, 0);}
}

/*----------Step1----------*/
#inductionSubScreen.package0.step1 #inductionBall1 {
    display: inherit;
    animation-name: ballMoveP0S1;
    animation-duration: 12s;
}

#inductionSubScreen.package0.step1 .cellparent.row0.col0 .cell .content {
    background-image: url(../img/ChangeDir180.png);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

#inductionSubScreen.package0.step1 .cellparent.row0.col3 .cell .content {
    background-image: url(../img/ChangeDir180.png);
}

@keyframes ballMoveP0S1 {
    0%   {transform: translate3d(100%, 100%, 0);}
    25%  {transform: translate3d(400%, 100%, 0);}
    50% {transform: translate3d(100%, 100%, 0);}
    75%  {transform: translate3d(400%, 100%, 0);}
    99% {transform: translate3d(100%, 100%, 0);}
}

#inductionSubScreen.package0.step1 #inductionHint {
    display: inherit;
    transform: translate3d(300%, 300%, 0);
}

#inductionSubScreen.package0.step1 #inductionHint .hand,
#inductionSubScreen.package0.step1 #inductionHint .movement {
    animation-duration: 12s;
}

#inductionSubScreen.package0.step1 #inductionHint .hand {
    animation-name: handP0S1;
    opacity: 0.5;
}

#inductionSubScreen.package0.step1 #inductionHint .movement {
    animation-name: movementP0S1;
    display: inherit;
}

@keyframes handP0S1 {
    0%   {opacity: 0.5; top: 50%;}
    10%  {opacity: 0.5; top: 50%;}
    17%  {opacity: 1; top: -50%;}
    20%  {opacity: 0.5; top: 50%;}
    40%  {opacity: 0.5; top: 50%;}
    47%  {opacity: 1; top: -50%;}
    51%  {opacity: 0.5; top: 50%;}
    59%  {opacity: 0.5; top: 50%;}
    66%  {opacity: 1; top: 150%;}
    70%  {opacity: 0.5; top: 50%;}
    90%  {opacity: 0.5; top: 50%;}
    97%  {opacity: 1; top: 150%;}
    100% {opacity: 0.5; top: 50%;}
}

@keyframes movementP0S1 {
    0%   {opacity: 0; transform: rotate(270deg); top: -50%; left: 0%;}
    10%  {opacity: 0; transform: rotate(270deg); top: -50%; left: 0%;}
    17%  {opacity: 1; transform: rotate(270deg); top: -50%; left: 0%;}
    20%  {opacity: 0; transform: rotate(270deg); top: -50%; left: 0%;}
    40%  {opacity: 0; transform: rotate(270deg); top: -50%; left: 0%;}
    47%  {opacity: 1; transform: rotate(270deg); top: -50%; left: 0%;}
    50%  {opacity: 0; transform: rotate(270deg); top: -50%; left: 0%;}
    60%  {opacity: 0; transform: rotate(90deg); top: 50%; left: 0%;}
    66%  {opacity: 1; transform: rotate(90deg); top: 50%; left: 0%;}
    69%  {opacity: 0; transform: rotate(90deg); top: 50%; left: 0%;}
    90%  {opacity: 0; transform: rotate(90deg); top: 50%; left: 0%;}
    97%  {opacity: 1; transform: rotate(90deg); top: 50%; left: 0%;}
    100% {opacity: 0; transform: rotate(90deg); top: 50%; left: 0%;}
}

#inductionSubScreen.package0.step1 .cellparent.row0.col2 .cell,
#inductionSubScreen.package0.step1 .cellparent.row1.col2 .cell,
#inductionSubScreen.package0.step1 .cellparent.row2.col2 .cell,
#inductionSubScreen.package0.step1 .cellparent.row3.col2 .cell {
    animation-name: columnMoveP0S1;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-duration: 12s;

}

@keyframes columnMoveP0S1 {
    0%   {transform: translate3d(0, 0, 0);}
    40%  {transform: translate3d(0, 0, 0);}
    47%  {transform: translate3d(0, -100%, 0);}
    90%  {transform: translate3d(0, -100%, 0);}
    97%  {transform: translate3d(0, 0, 0);}
    100% {transform: translate3d(0, 0, 0);}
}

#inductionSubScreen.package0.step1 .cellparent.row0.col2 {
    filter: saturate(1);
    animation-name: cellSaturateP0S1_1;
    animation-duration: 12s;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

#inductionSubScreen.package0.step1 .cellparent.row1.col2 {
    filter: saturate(1);
    animation-name: cellSaturateP0S1_2;
    animation-duration: 12s;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

@keyframes cellSaturateP0S1_1 {
    0% {filter: saturate(1)}
    10% {filter: saturate(1)}
    13% {filter: saturate(5.5)}
    16% {filter: saturate(1)}
    100% {filter: saturate(1)}
}

@keyframes cellSaturateP0S1_2 {
    0% {filter: saturate(1)}
    60% {filter: saturate(1)}
    63% {filter: saturate(5.5)}
    66% {filter: saturate(1)}
    100% {filter: saturate(1)}
}

/*----------Step2----------*/
#inductionSubScreen.package0.step2 #inductionBall1 {
    display: inherit;
}

#inductionSubScreen.package0.step2 #inductionHint {
    display: inherit;
    transform: translate3d(300%, 300%, 0);
}

#inductionSubScreen.package0.step2 #inductionHint .hand,
#inductionSubScreen.package0.step2 #inductionHint .movement {
    animation-duration: 6s;
}

#inductionSubScreen.package0.step2 #inductionHint .hand {
    animation-name: handP0S2;
    opacity: 0.5;
}

#inductionSubScreen.package0.step2 #inductionHint .movement {
    animation-name: movementP0S2;
    display: inherit;
}

@keyframes handP0S2 {
    0%   {opacity: 0.5; top: 50%;}
    20%  {opacity: 0.5; top: 50%;}
    30%  {opacity: 1;   top: -50%;}
    40%  {opacity: 1;   top: 50%;}
    50%  {opacity: 1;   top: 150%;}
    60%  {opacity: 1;   top: 50%;}
    70%  {opacity: 1;   top: -50%;}
    80%  {opacity: 1;   top: 50%;}
    90%  {opacity: 0.5; top: 50%;}
    100% {opacity: 0.5; top: 50%;}
}

@keyframes movementP0S2 {
    0%   {opacity: 0; transform: rotate(270deg); top: -50%; left: 0%;}
    20%  {opacity: 0; transform: rotate(270deg); top: -50%; left: 0%;}
    30%  {opacity: 1; transform: rotate(270deg); top: -50%; left: 0%;}
    35%  {opacity: 0; transform: rotate(270deg); top: -50%; left: 0%;}
    40%  {opacity: 0; transform: rotate(90deg); top: 50%; left: 0%;}
    50%  {opacity: 1; transform: rotate(90deg); top: 50%; left: 0%;}
    55%  {opacity: 0; transform: rotate(90deg); top: 50%; left: 0%;}
    60%  {opacity: 0; transform: rotate(270deg); top: -50%; left: 0%;}
    70%  {opacity: 1; transform: rotate(270deg); top: -50%; left: 0%;}
    75%  {opacity: 0; transform: rotate(270deg); top: -50%; left: 0%;}
    100% {opacity: 0; transform: rotate(270deg); top: -50%; left: 0%;}
}

#inductionSubScreen.package0.step2 .cellparent.row0.col2 .cell .content .subContent .fixed {
    background-image: url(../img/Fixed.png);
}

#inductionSubScreen.package0.step2 .cellparent.row0.col2 {
    filter: saturate(1);
    animation-name: cellSaturateP0S2;
    animation-duration: 6s;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

@keyframes cellSaturateP0S2 {
    0% {filter: saturate(1)}
    20% {filter: saturate(1)}
    27% {filter: saturate(5.5)}
    30% {filter: saturate(1)}
    100% {filter: saturate(1)}
}

#inductionSubScreen.package0.step2 .cellparent.row1.col2 .cell,
#inductionSubScreen.package0.step2 .cellparent.row2.col2 .cell,
#inductionSubScreen.package0.step2 .cellparent.row3.col2 .cell {
    animation-name: columnMoveP0S2;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-duration: 6s;

}

@keyframes columnMoveP0S2 {
    0%   {transform: translate3d(0, 0, 0);}
    40%  {transform: translate3d(0, 0, 0);}
    50%  {transform: translate3d(0, 100%, 0);}
    60%  {transform: translate3d(0, 100%, 0);}
    70%  {transform: translate3d(0, 0, 0);}
    100% {transform: translate3d(0, 0, 0);}
}

/*----------Step3----------*/

#inductionSubScreen.package0.step3 #inductionBall1 {
    display: inherit;
    animation-name: ballMoveP0S3;
    animation-duration: 4s;
}

@keyframes ballMoveP0S3 {
    5%   {opacity: 1; transform: translate3d(100%, 100%, 0);}
    45%  {opacity: 1; transform: translate3d(300%, 100%, 0);}
    85%  {opacity: 1; transform: translate3d(300%, 300%, 0);}
    99%  {opacity: 1; transform: translate3d(300%, 300%, 0);}
    100% {opacity: 0; transform: translate3d(300%, 300%, 0);}
}

#inductionSubScreen.package0.step3 .cellparent.row0.col1 .cell .content .subContent,
#inductionSubScreen.package0.step3 .cellparent.row1.col2 .cell .content .subContent,
#inductionSubScreen.package0.step3 .cellparent.row2.col2 .cell .content .subContent {
    background-image: url(../img/Star.png);
    background-size: 56% 50%;
    background-position: center;

    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-duration: 4s;
}

#inductionSubScreen.package0.step3 .cellparent.row1.col2 .cell .content {
    background-image: url(../img/ChangeDir90.png);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

#inductionSubScreen.package0.step3 .cellparent.row1.col2 .cell .content .subContent {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

#inductionSubScreen.package0.step3 .cellparent.row3.col2 .cell .content .subContent {
    background-image: url(../img/GoalRed.png);
}

#inductionSubScreen.package0.step3 #inductionHint {
    display: inherit;
    transform: translate3d(300%, 400%, 0);
}

#inductionSubScreen.package0.step3 #inductionHint .hand,
#inductionSubScreen.package0.step3 #inductionHint .movement {
    animation-duration: 4s;
}

#inductionSubScreen.package0.step3 #inductionHint .hand {
    animation-name: handP0S3;
    opacity: 0.5;
    top: 50%;
}

#inductionSubScreen.package0.step3 #inductionHint .movement {
    animation-name: movementP0S3;
    display: inherit;
}

@keyframes handP0S3 {
    0%   {opacity: 0.5; top: 50%;}
    10%  {opacity: 0.5; top: 50%;}
    30%  {opacity: 1; top: -50%;}
    35%  {opacity: 0.5; top: 50%;}
    100% {opacity: 0.5; top: 50%;}
}

@keyframes movementP0S3 {
    0%   {opacity: 0; transform: rotate(270deg); top: -50%; left: 0%;}
    10%   {opacity: 0; transform: rotate(270deg); top: -50%; left: 0%;}
    30%  {opacity: 1; transform: rotate(270deg); top: -50%; left: 0%;}
    35%  {opacity: 0; transform: rotate(270deg); top: -50%; left: 0%;}
    100% {opacity: 0; transform: rotate(270deg); top: -50%; left: 0%;}
}

#inductionSubScreen.package0.step3 .cellparent.row0.col2 .cell,
#inductionSubScreen.package0.step3 .cellparent.row1.col2 .cell,
#inductionSubScreen.package0.step3 .cellparent.row2.col2 .cell,
#inductionSubScreen.package0.step3 .cellparent.row3.col2 .cell {
    animation-name: columnMoveP0S3;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-duration: 4s;

}

@keyframes columnMoveP0S3 {
    0%   {transform: translate3d(0, 0, 0);}
    10%   {transform: translate3d(0, 0, 0);}
    30%  {transform: translate3d(0, -100%, 0);}
    100% {transform: translate3d(0, -100%, 0);}
}

#inductionSubScreen.package0.step3 .cellparent.row0.col1 .cell .content .subContent {animation-name: star1CollectP0S3;}
#inductionSubScreen.package0.step3 .cellparent.row1.col2 .cell .content .subContent {animation-name: star2CollectP0S3;}
#inductionSubScreen.package0.step3 .cellparent.row2.col2 .cell .content .subContent {animation-name: star3CollectP0S3;}

@keyframes star1CollectP0S3 {
    0%   {opacity: 1;}
    25%  {opacity: 1;}
    25.1%  {opacity: 0;}
    100% {opacity: 0;}
}

@keyframes star2CollectP0S3 {
    0%   {opacity: 1;}
    45%  {opacity: 1;}
    45.1%  {opacity: 0;}
    100% {opacity: 0;}
}

@keyframes star3CollectP0S3 {
    0%   {opacity: 1;}
    65%  {opacity: 1;}
    65.1%  {opacity: 0;}
    100% {opacity: 0;}
}

/*==========Package2==========*/

/*----------Step0----------*/
#inductionSubScreen.package2.step0 #inductionBall1,
#inductionSubScreen.package2.step0 #inductionBall2 {
    display: inherit;
    animation-name: ball1MoveP2S0;
    animation-duration: 4s;
}

#inductionSubScreen.package2.step0 #inductionBall2 {
    transform: translate3d(300%, 200%, 0);
    opacity: 0;
    animation-name: ball2MoveP2S0;
}

@keyframes ball1MoveP2S0 {
    0%   {transform: translate3d(100%, 100%, 0); opacity: 1;}
    40%  {transform: translate3d(300%, 100%, 0); opacity: 1;}
    60%  {transform: translate3d(300%, 200%, 0); opacity: 1;}
    80%  {transform: translate3d(200%, 200%, 0); opacity: 1;}
    98%  {transform: translate3d(200%, 200%, 0); opacity: 1;}
    99%  {transform: translate3d(200%, 200%, 0); opacity: 0;}
    100% {transform: translate3d(100%, 100%, 0); opacity: 0;}
}

@keyframes ball2MoveP2S0 {
    0%   {transform: translate3d(300%, 200%, 0); opacity: 0;}
    60%  {transform: translate3d(300%, 200%, 0); opacity: 0;}
    60.1%{transform: translate3d(300%, 200%, 0); opacity: 1;}
    80%  {transform: translate3d(400%, 200%, 0); opacity: 1;}
    98%  {transform: translate3d(400%, 200%, 0); opacity: 1;}
    99%  {transform: translate3d(400%, 200%, 0); opacity: 0;}
    100% {transform: translate3d(300%, 200%, 0); opacity: 0;}
}

#inductionSubScreen.package2.step0 #inductionHint {
    display: inherit;
    transform: translate3d(300%, 300%, 0);
}

#inductionSubScreen.package2.step0 #inductionHint .hand,
#inductionSubScreen.package2.step0 #inductionHint .movement {
    animation-duration: 4s;
}

#inductionSubScreen.package2.step0 #inductionHint .hand {
    animation-name: handP2S0;
}

#inductionSubScreen.package2.step0 #inductionHint .movement {
    animation-name: movementP2S0;
    display: inherit;
}

@keyframes handP2S0 {
    0%   {opacity: 0.5; top: 50%;}
    5%   {opacity: 0.5; top: 50%;}
    25%  {opacity: 1; top: -50%;}
    35%  {opacity: 0.5; top: 50%;}
    100% {opacity: 0.5; top: 50%;}
}

@keyframes movementP2S0 {
    0%   {opacity: 0; transform: rotate(270deg); top: -50%; left: 0%;}
    5%   {opacity: 0; transform: rotate(270deg); top: -50%; left: 0%;}
    25%  {opacity: 1; transform: rotate(270deg); top: -50%; left: 0%;}
    35%  {opacity: 0; transform: rotate(270deg); top: -50%; left: 0%;}
    100% {opacity: 0; transform: rotate(270deg); top: -50%; left: 0%;}
}

#inductionSubScreen.package2.step0 .cellparent.row1.col2 .cell .content {
    background-image: url(../img/ChangeDir90.png);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

#inductionSubScreen.package2.step0 .cellparent.row2.col2 .cell .content {
    background-image: url(../img/Divide.png);
}

#inductionSubScreen.package2.step0 .cellparent.row1.col1 .cell .content .subContent,
#inductionSubScreen.package2.step0 .cellparent.row1.col3 .cell .content .subContent {
    background-image: url(../img/GoalRed.png);
}

#inductionSubScreen.package2.step0 .cellparent.row0.col2 .cell,
#inductionSubScreen.package2.step0 .cellparent.row1.col2 .cell,
#inductionSubScreen.package2.step0 .cellparent.row2.col2 .cell,
#inductionSubScreen.package2.step0 .cellparent.row3.col2 .cell {
    animation-name: columnMoveP2S0;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-duration: 4s;
}

@keyframes columnMoveP2S0 {
    0%   {transform: translate3d(0, 0, 0);}
    5%   {transform: translate3d(0, 0, 0);}
    25%  {transform: translate3d(0, -100%, 0);}
    100% {transform: translate3d(0, -100%, 0);}
}

/*==========Package4==========*/

/*----------Step0----------*/
#inductionSubScreen.package4.step0 #inductionBall1,
#inductionSubScreen.package4.step0 #inductionBall2 {
    display: inherit;
    animation-name: ball1MoveP4S0;
    animation-duration: 4s;
}

#inductionSubScreen.package4.step0 #inductionBall2 {
    transform: translate3d(300%, 200%, 0);
    opacity: 0;
    animation-name: ball2MoveP4S0;
}

#inductionSubScreen.package4.step0 #inductionBall2 .ball {
    background-image: url(../img/BallGreen.png);
}

@keyframes ball1MoveP4S0 {
    0%   {transform: translate3d(100%, 100%, 0); opacity: 1;}
    40%  {transform: translate3d(300%, 100%, 0); opacity: 1;}
    60%  {transform: translate3d(300%, 200%, 0); opacity: 1;}
    60.1%{transform: translate3d(300%, 200%, 0); opacity: 0;}
    100% {transform: translate3d(100%, 100%, 0); opacity: 0;}
}

@keyframes ball2MoveP4S0 {
    0%   {transform: translate3d(300%, 200%, 0); opacity: 0;}
    60%  {transform: translate3d(300%, 200%, 0); opacity: 0;}
    60.1%{transform: translate3d(300%, 200%, 0); opacity: 1;}
    80%  {transform: translate3d(300%, 300%, 0); opacity: 1;}
    98%  {transform: translate3d(300%, 300%, 0); opacity: 1;}
    99%  {transform: translate3d(300%, 300%, 0); opacity: 0;}
    100% {transform: translate3d(100%, 100%, 0); opacity: 0;}
}

#inductionSubScreen.package4.step0 #inductionHint {
    display: inherit;
    transform: translate3d(300%, 400%, 0);
}

#inductionSubScreen.package4.step0 #inductionHint .hand,
#inductionSubScreen.package4.step0 #inductionHint .movement {
    animation-duration: 4s;
}

#inductionSubScreen.package4.step0 #inductionHint .hand {
    animation-name: handP4S0;
}

#inductionSubScreen.package4.step0 #inductionHint .movement {
    animation-name: movementP4S0;
    display: inherit;
}

@keyframes handP4S0 {
    0%   {opacity: 0.5; top: 50%;}
    5%   {opacity: 0.5; top: 50%;}
    25%  {opacity: 1; top: -50%;}
    35%  {opacity: 0.5; top: 50%;}
    100% {opacity: 0.5; top: 50%;}
}

@keyframes movementP4S0 {
    0%   {opacity: 0; transform: rotate(270deg); top: -50%; left: 0%;}
    5%   {opacity: 0; transform: rotate(270deg); top: -50%; left: 0%;}
    25%  {opacity: 1; transform: rotate(270deg); top: -50%; left: 0%;}
    35%  {opacity: 0; transform: rotate(270deg); top: -50%; left: 0%;}
    100% {opacity: 0; transform: rotate(270deg); top: -50%; left: 0%;}
}

#inductionSubScreen.package4.step0 .cellparent.row1.col2 .cell .content {
    background-image: url(../img/ChangeDir90.png);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

#inductionSubScreen.package4.step0 .cellparent.row2.col2 .cell .content {
    background-image: url(../img/ColorGreen.png);
}

#inductionSubScreen.package4.step0 .cellparent.row3.col2 .cell .content .subContent {
    background-image: url(../img/GoalGreen.png);
}

#inductionSubScreen.package4.step0 .cellparent.row0.col2 .cell,
#inductionSubScreen.package4.step0 .cellparent.row1.col2 .cell,
#inductionSubScreen.package4.step0 .cellparent.row2.col2 .cell,
#inductionSubScreen.package4.step0 .cellparent.row3.col2 .cell {
    animation-name: columnMoveP4S0;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-duration: 4s;
}

@keyframes columnMoveP4S0 {
    0%   {transform: translate3d(0, 0, 0);}
    5%   {transform: translate3d(0, 0, 0);}
    25%  {transform: translate3d(0, -100%, 0);}
    100% {transform: translate3d(0, -100%, 0);}
}

@media (min-width: 610px) {
    #inductionSubScreen .inductionBoardHeader {
        font-size: 170%;
        line-height: 420%;
    }

    #inductionBoard .inductionText .packageInduction .step {
        width: 84%;
        height: 78%;
        padding: 8%;

        font-size: 140%;
        line-height: 150%;
    }
}