body{
    background-color: #36776f;
}
#backgroundDiv{
    position: absolute;
    width: 100%;
    height: 0;
    top: 100%;
    left: 0;
    margin: 0;
    padding: 0;
    background-image: url(../images/back.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 600ms ease-out 0s;
    z-index: 9;
}
#wrapper{
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    left: 0;
    top: 0;
    overflow: hidden;
}
.diagonDiv{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    background-image: url(../images/diagon_01.png);
    background-position: 0,0;
    background-repeat: no-repeat;
    background-size: cover;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    display: none;
}
.diagonDiv:nth-of-type(1){
    animation-name: diagon_01;
}
.diagonDiv:nth-of-type(2){
    background-position: -20vw,0;
    background-image: url(../images/diagon_02.png);
    animation-name: diagon_02;
}
.diagonDiv:nth-of-type(3){
    background-position: -50vw,0;
    background-image: url(../images/diagon_03.png);
    animation-name: diagon_03;
}
.diagonDiv:nth-of-type(4){
    background-position: -60vw,0;
    background-image: url(../images/diagon_04.png);
    animation-name: diagon_04;
}
.diagonDiv:nth-of-type(5){
    background-position: -90vw,0;
    animation-name: diagon_05;
}
#leafDiv{
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/leaf.png);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 50vh;
    transition: all 400ms ease-out 0s;
    animation-name: leafAnim;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-play-state: paused;
}
.footHead{
    background-color: #ffffff;
    position: absolute;
    width: 100%;
    height: 10%;
    left: 0;
    color: #224f79;
    font-family: 'Open Sans', sans-serif;
    font-size: 5vh;
    line-height: 9vh;
    pointer-events: none;
    z-index: 9;
}
.nxt{
    float: none !important;
}
#header{
    font-size: 2vw;
    top: -20%;
    border-bottom: solid .5vh;
    left: 0;
    transition: all 400ms ease-out 0ms;
}
#header #headTitle{
    margin-left: 5vw;
}
#header #clipTitle{
    position: fixed;
    width: 0;
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap;
    transition: all 1s linear 0s;
}
#footer{
    bottom: 0;
    height: 7%;
    display: none;
}
#logoDiv{
    background-image: url(../images/logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    position: relative;
    height: 80%;
    bottom: 80%;
    right: 25px;
}
#footer #borderDiv{
    position: absolute;
    width: 100%;
    top: -20%;
    border-top: .5vh solid #ffffff;
}
#openMovie{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #000000;
    opacity: 1;
    z-index: 8;
    transition: opacity 600ms linear 0s;
}
#openMovie video{
    width: 100%;
    height: 100%;
}
.openDiv{
    position: absolute;
    width: 100%;
    height: 80%;
    top: 15%;
    transition: all 500ms ease-in-out 0s;
}
#insDiv{
    top: -100%;
}
#insDiv div{
    padding-top: 2vh;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 1vh;
    
}
#insDiv div div{
    width: 90%;
    float: left;
    clear: right;
}
#insDiv .bulletDiv{
    width: auto;
    clear: left;
}
#insDiv button{
    position: relative;
    z-index: 8;
    margin-top: 6%;
    margin-right: 83%;
}
#centerThis{
    position: absolute;
    bottom: 12%;
    left: 5%;
    font-size: 3vh;
    text-align: center;
    line-height: 3.5vh;
}
#centerThis u, #centerThis i{
    text-decoration: none;
    font-style: normal;
    font-size: 4.5vh;
}
#doneDiv{
    opacity: 0;
    pointer-events: none;
    height: 90%;
    top: 10%;
    left: 0;
    z-index: 12;
    /*background-color: rgba(0,0,0,.5);*/
}
#doneDiv button, #almostDiv button{
    position: relative;
    float: none;
    left: 90%;
}
#almostDiv button{
    margin-right: 0;
}
#doneDiv button{
    margin-right: 0;
}
#doneDiv div{
    width: 60%;
    margin-top: 10%;
    font-size: 4.5vh;
    /*background-color: #224f79;*/
    background-image: url(../images/Shield_AI.png);
    background-repeat: no-repeat;
    /*background-position: 99% -10vh;
    background-size: 6vh;*/
    background-position: left !important;
    background-size: contain;
    padding-left: 36vh;
    transition: background-position 300ms ease-out 200ms;
}
.shabangDiv{
    line-height: 10vh !important;
    width: auto !important;
    float: left !important;
    padding: 0 !important;
    margin: 0 !important;
    background-image: none !important;
    padding-left: 2vh !important;
    transform: scale(0);
    transition: all 500ms cubic-bezier(0.000, 0.750, 0.135, 1.200) 0s !important;
}
.shabangDiv:nth-of-type(2){
    transition: all 500ms cubic-bezier(0.000, 0.750, 0.135, 1.200) 150ms !important;
}
.shabangDiv:nth-of-type(3){
    transition: all 500ms cubic-bezier(0.000, 0.750, 0.135, 1.200) 450ms !important;
}
.shabangDiv:nth-of-type(4){
    transition: all 500ms cubic-bezier(0.000, 0.750, 0.135, 1.200) 750ms !important;
}
#doneDiv b{
    font-size: 6vh;
    color: #ffffff;
}
#doneDiv hr, #thankDiv hr{
    background-color: #ffffff;
}
#doneDiv hr{
    width: 0;
    transition: width 300ms ease-out 0s;
}
#almostDiv{
    pointer-events: none;
    left: 120%;
}
#almostDiv div{
    width: 120vh;
    font-size: 2vh;
}
#almostDiv div a{
    color: #224f79;
    transition: all 200ms linear 0s;
}
#almostDiv a:hover{
    color: #173550;
    transition: all 200ms linear 0s;
}
.clickAnswer{
    opacity: 0;
    margin: .5vh;
    height: 21vh;
    float: left;
    padding-left: 10vh !important;
    width: 36vh !important;
    background-color: #204e77;
    background-image: url(../images/icon_01_building.png);
    background-position: top left;
    background-size: 9vh;
    background-repeat: no-repeat;
    transform: translate(300px,0);
    transition: all 300ms ease-out 0s;
}
.clickAnswer span{
    margin-left: 1.4vw;
    display: list-item;
    list-style-type: disc;
    list-style-position: outside;
}
.clickAnswer b{
    color: #ffffff !important;
    font-size: 3vh !important;
}
.clickAnswer:nth-of-type(2){
    background-color: #69b73d;
    background-image: url(../images/icon_02_truck.png);
    transition: all 300ms ease-out 150ms;
}
.clickAnswer:nth-of-type(3){
    background-color: #269b75;
    background-image: url(../images/icon_03_travel.png);
    transition: all 300ms ease-out 450ms;
}
.clickAnswer:nth-of-type(4){
    background-color: #9fd142;
    background-image: url(../images/icon_04_comp.png);
    transition: all 300ms ease-out 750ms;
}
.clickAnswer:nth-of-type(5){
    background-color: #35786e;
    background-image: url(../images/icon_05_employee.png);
    transition: all 300ms ease-out 1050ms;
}
.clickAnswer:nth-of-type(6){
    padding-left: 0 !important;
    background-image: none;
    font-size: 2vh !important;
    background-color: rgba(0,0,0,0);
    transition: all 300ms ease-out 1350ms;
    width: 47vh !important;
}
#almostDiv img{
    opacity: .7;
    width: 15vh;
    height: 15vh;
    transform: scale(.8);
    cursor: pointer;
    transition: all 300ms ease-in-out 0s;
}
#almostDiv img:hover{
    transform: scale(1);
    cursor: pointer;
    transition: all 300ms ease-in-out 0s;
}
#almostDiv .smImage, #thankDiv .smImage{
    opacity: 1;
    transform: translate(0,1vh);
    height: 4vh;
    width: 4vh;
    cursor: default;
}
#almostDiv .smImage:hover, #thankDiv .smImage:hover{
    transform: translate(0,1vh);
    cursor: default;
}
#thankDiv{
    pointer-events: none;
    left: 120%;
    /*top: 10%;*/
}
#thankDiv b{
    font-size: 6vh;
    color: #9fce42;
}
#thankDiv div{
    background-image: url(../images/Shield_AI.png);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 21vw;
    padding-left: 7vw;
}
#contactDiv{
    width: 100%;
    font-size: .6em;
}
#contactDiv a{
    color: #224f79;
    transition: all 200ms linear 0s;
}
#contactDiv a:hover{
    color: #173550;
    transition: all 200ms linear 0s;
}
.openDiv div{
    width: 40%;
    text-align: left;
    font-family: 'Open Sans', sans-serif;
    font-size: 3vh;
    color: #ffffff;
    padding: 1vh;
}
#missionDiv{
    opacity: 0;
}
#missionDiv #typeMe{
    height: 30vh;
}
#missionDiv div:nth-of-type(1){
    font-size: 3.5vh;
    background-image: url(../images/Shield_AI.png);
    background-repeat: no-repeat;
    /*background-position: 99% 2vh;
    background-size: 6vh;*/
    background-position: left;
    background-size: contain;
    padding-left: 26vh;
    /*border: 1px solid #ffffff;
    background-color: #224f79;*/
}
#missionDiv button{
    position: absolute;
    right: 29.3%;
    /*bottom: 10%;*/
    margin-right: auto;
    opacity: 0;
    pointer-events: none;
    transition: all 300ms linear 0s;
}
#missionDiv b{
    color: #ffffff;
}
#missionDiv hr{
    background-color: #ffffff;
}
#missionDiv div:nth-of-type(2){
    /*background-color: #224f79;*/
    padding-left: 26vh;
    font-size: 2vh;
    margin-top: 12vh;
    opacity: 0;
    transition: opacity 300ms linear 50ms;
}
.openDiv div b{
    font-size: 4.5vh;
    color: #224f79;
}
.openDiv div hr{
    height: .2vh;
    border: 0;
    background-color: #224f79;
}
#contentDiv{
    position: absolute;
    width: 70%;
    height: 79%;
    top: -120%;
    margin-left: 10%;
    margin-right: auto;
    left: 0;
    right: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 3vh;
    line-height: 6vh;
    /*color: #224f79;*/
    color: #ffffff;
    animation-name: contentAnim;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-play-state: paused;
}
#contentDiv #titleThis{
    line-height: 4vh;
    margin-top: 2vh;
    padding: 5px;
    /*font-weight: bold;
    text-shadow: 0px 0px 15px rgba(255,255,255,1);*/
    padding-left: 15px;
    padding-right: 15px;
    /*border-radius: 15px;*/
}
#bigMovie{
    position: absolute;
    width: 80%;
    height: 79%;
    top: 11.5%;
    margin-left: auto;
    margin-right: auto;
    left: 300%;
    right: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 3vh;
    line-height: 6vh;
    color: #ffffff;
    animation-play-state: paused;
    animation-name: bigAnim;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    transition: all 500ms ease-in-out 0s;
}
#bigBig{
    width: 900px;
    height: 26vw;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    margin-top: 3vh;
    transition: all 500ms ease-in-out 0s;
}
#bigBig #questus, #bigBig #breachus{
    /*background-color: rgba(54,119,111,1);
    border-radius: 2vh;*/
    background-color: #214e78;
    border: .5vh solid #214e78;
    position: absolute;
    width: calc(100% - 980px);
    min-height: 450px;
    height: auto;
    /*height: 56vh;
    max-height: 450px;*/
    margin-left: 2vh;
    overflow: hidden;
    font-size: 2.5vh;
    line-height: 3vh;
    opacity: 0;
    left: 25%;
    /*box-shadow: -10px 10px 0 rgba(0,0,0,.3);*/
    transition: left 500ms ease-in-out 0s, opacity 500ms ease-in-out 0s, width 500ms ease-in-out 0s;
}
#questus{
    z-index: 8;
}
#shieldDiv{
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background-image: url(../images/shield.jpg);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
}
#breachus{
    z-index: 9;
    pointer-events: none;
}
#feedbackDiv{
    position: absolute;
    width: calc(100% - 980px);
    height: 80%;
    min-height: 410px;
    margin-left: 2vh;
    /*padding: 20px;*/
    left: 880px;
    z-index: 10;
    pointer-events: none;
}
#feedbackDiv div{
    /*position: absolute;
    width: 50%;
    height: auto;
    bottom: 20%;
    left: 25%;*/
    position: relative;
    width: 92%;
    min-height: 30%;
    margin-left: 2%;
    /*bottom: -27%;*/
    bottom: -56%;
    border: .5vh solid white;
    line-height: 3vh;
    font-size: 2.5vh;
    padding: 2%;
    opacity: 0;
    background-color: #214e78;
    transition: all 500ms ease-in-out 0s;
}
#feedbackDiv #tryFeed{
    position: absolute;
    width: 50%;
    min-height: 1%;
    height: auto;
    bottom: 5%;
    left: 25%;
}
#innerFeed{
    overflow: auto;
    z-index: 12;
}
#innerFeed .nex{
    position: absolute;
    bottom: 2vh;
    right: 2vh;
    opacity: 0;
    transition: all 300ms linear 0s;
}
#innerFeed button, #backBtn, #startBtn {
    padding: .5vh;
    border: none;
    outline: none;
    background-color: #279e76;
    color: #ffffff;
    font-size: 2.5vh; 
    float: right;
    cursor: pointer;
    box-shadow: -6px 6px 0px rgba(0,0,0,.2);
    transform: scale(1);
    transition: all 300ms ease-in-out 0s;
}
#innerFeed button:hover, #backBtn:hover{
    box-shadow: -4px 4px 0px rgba(0,0,0,.4);
    background-color: #69b93e;
    transform: scale(0.9);
    transition: all 300ms ease-in-out 0s;
}
#backBtn{
    /*float: left;
    margin-right: 4px;
    margin-left: 6px;*/
    background-image: url(../images/homeBtn.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    position: absolute;
    top: 110%;
    left: 0;
    width: 7vh;
    height: 7vh;
    z-index: 14;
    transition: all 300ms ease-in-out 0s;
}
#questDiv, #breachDiv{
    padding: 20px;
    width: 94%;
}
#questDiv span{
    color: #9fce42;
    font-size: 2vh;
}
#questDiv{
    transition: opacity 200ms linear 0s;
}
#pushDiv{
    position: relative;
    opacity: 0;
    float: left;
}
#questDiv button, #breachDiv button, .openDiv button, #contentDiv button{
    padding: .5vh;
    border: none;
    outline: none;
    background-color: #279e76;
    color: #ffffff;
    font-size: 2.5vh; 
    float: right;
    cursor: pointer;
    transform: scale(1);
    transition: all 300ms ease-in-out 0s;
}
#questDiv button{
    margin-right: 6vh;
}
.openDiv button{
    margin-right: 29.3%;
    box-shadow: -6px 6px 0px rgba(0,0,0,.2);
}
#contentDiv button{
    margin-right: 11%;
    box-shadow: -6px 6px 0px rgba(0,0,0,.2);
    float: right;
}
#contentDiv button:nth-of-type(2){
    margin-right: 1%;
}
#contentDiv button:nth-of-type(1){
    opacity: 0;
    clear: left;
    pointer-events: none;
}
#questDiv button:hover, #breachDiv button:hover, .openDiv button:hover, #contentDiv button:hover{
    background-color: #69b93e;
    transform: scale(0.9);
    transition: all 300ms ease-in-out 0s;
}
.openDiv button:hover{
    box-shadow: -4px 4px 0px rgba(0,0,0,.4);
}
#questDiv ol{
    margin-top: .5em;
    /*line-height: 4vh;*/
}
#questDiv li{
    color: #ffffff;
    cursor: pointer;
    transition: all 300ms linear 0s;
    margin-before: .5em;
    -webkit-margin-before: .5em;
}
#questDiv li:hover{
    color: #9fce42;
    transition: all 300ms linear 0s;
}
#questDiv .noHover li:hover{
    color: #ffffff;
    cursor: auto;
}
#questDiv li:selected{
    color: #ff0000;
    transition: all 300ms linear 0s;
}
#bigBig #videoMask{
    position: relative;
    float: left;
    max-width: 800px;
    max-height: 450px;
    width: 100vh;
    height: 56vh;
    border: .5vh solid #ffffff;
    background-color: #ffffff;
    /*border-radius: 2vh;*/
    /*box-shadow: -10px 10px 0 rgba(0,0,0,.3);*/
    z-index: 10;
    overflow: hidden;
}
#bigBig video{
    background-color: #ffffff;
    width: 100%;
    height: 100%;
}
#bigBig video::-webkit-media-controls-panel{
    display: none !important;
    /*display: block !important;
    display: none !important;
    opacity: 0 !important;*/
    /*border-radius: 2vh !important;*/
}
#bigBig #playBtn{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.3);
    opacity: 1;
    z-index: 4;
    cursor: pointer;
    transition: all 300ms linear 0s;
}
#realPlay{
    position: relative;
    width: 150px;
    height: 150px;
    top: 50%;
    left: 50%;
    margin-left: -75px;
    margin-top: -75px;
    background-color: #279e76;
    /*border: 10px solid #e2dfde;*/
    border-radius: 100%;
    background-image: url(../images/playBtn.png);
    background-position: center;
    background-repeat: no-repeat;
    /*box-shadow: -10px 10px 0 rgba(0,0,0,.3);*/
    transform: scale(1);
    transition: all 300ms ease-in-out 0s;
}
#realPlay:hover{
    background-color: #69b93e;
    transform: scale(.9);
    transition: all 300ms ease-in-out 0s;
}
/*#backBtn{
    background-image: url(../images/backBtn.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-size: 50%;
    position: relative;
    float: left;
    z-index: 3;
    width:36px;
    height: 25px;
    padding: 15px;
    cursor: pointer;
    transform: scale(1);
    transition: all 300ms ease-in-out;
}
#backBtn:hover{
    transform: scale(1.2);
    transition: all 300ms ease-in-out;
}*/
#bellDiv{
    position: absolute;
    width: 50vh;
    height: 23vh;
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    z-index: 1;
    color: #ffffff;
    font-family: 'Open Sans', sans-serif;
    font-size: 4vh;
    line-height: 3.5vh;
    animation-name: bellAnim;
    animation-play-state: paused;
    animation-duration: 500ms;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    display: none;
}
#realBell{
    height: 100%;
    width: 100%;
    overflow: hidden;
}
#innerBell{
    background-image: url(../images/realBell.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    height: 90%;
    width: 100%;
    margin-top: 5%;
    /*filter: brightness(100%);
    transition: all 500ms linear 0s;*/

    animation-name: bellJump;
    animation-duration: 300ms;
    animation-play-state: paused;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
}
#innerBell:hover{
    /*filter: brightness(150%);
    transition: all 500ms linear 0s;*/
    background-image: url(../images/realBellHover.png);
}
#bellDiv #textDiv{
    position: absolute;
    bottom: 8vh;
    left: -25vw;
    transition: all 300ms linear 0s;
}
#someText{
    line-height: 1.3em;
}
#bellDiv u, #bellDiv #wrongText{
    font-size: 6vh;
    font-weight: normal;
    text-decoration: none;
}
#bellDiv u{
    margin-left: -2vh;
}
#bellDiv #wrongText{
    animation-name: textRing;
    animation-delay: 350ms;
    animation-duration: 1s;
    animation-play-state: paused;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}
#bellDiv div{
    float: left;
    clear: both;
}
.seretDiv{
    position: relative !important;
    width: 40vh;
    height: 30vh;
    max-width: 20vw;
    max-height: 15vw;
    margin: 1vw;
    background-image: url(../images/seret_01_N.jpg);
    background-size: 100%,100%;
    background-position: center;
    float: left;
    border-width: .5vh;
    border-style: solid;
    border-color: #ffffff;
    /*border-radius: 2vh;*/
    cursor: pointer;
    transform: scale(1);
    /*box-shadow: -10px 10px 0 rgba(0,0,0,.3);*/
    transition: all 300ms ease-in-out 0s;
}
.seretDiv:nth-of-type(2){
    margin-left: 5vw;
    z-index: 2;
}
.seretDiv:nth-of-type(3){
    background-image: url(../images/seret_02_N.jpg);
    z-index: 1;
}
.seretDiv:nth-of-type(4){
    margin-left: 17vw;
    clear: left;
    background-image: url(../images/seret_03_N.jpg);
    z-index: 4;
}
.seretDiv:nth-of-type(5){
    background-image: url(../images/seret_04_N.jpg);
    z-index: 3;
}
.seretDiv:hover{
    -webkit-background-size: 120%,120%;
    -moz-background-size: 120%,120%;
    transform: scale(1.1);
    /*box-shadow: -5px 5px 20px rgba(0,0,0,.1);*/
    transition: all 300ms ease-in-out 0s;
}
.duraDiv{
    position: absolute;
    bottom: 0;
    right: 5%;
    font-size: 2vh;
    line-height: 4vh;
    display: none;
}
#questV{
    position: relative;
    width: 5vw;
    height: 5vw;
    float: left;
    margin: .5vh;
    margin-right: 1vh;
    margin-bottom: 20vh;
    background-image: url(../images/vSign.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: none;
    /*opacity: 0;*/
}
.seretDiv .vSign{
    position: relative;
    width: 5vw;
    height: 5vw;
    float: right;
    margin-top: -1vw;
    margin-right: -1vw;
    background-image: url(../images/vSign.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
}
.seretDiv .opacDiv{
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0.15;
    /*border-radius: 2vh;*/
}
@keyframes diagon_01{
    0% {background-position: -200vw,0;}
    100% {background-position: 0,0;}
}
@keyframes diagon_02{
    0% {background-position: -200vw,0;}
    20% {background-position: -200vw,0;}
    100% {background-position: -20vw,0;}
}
@keyframes diagon_03{
    0% {background-position: -200vw,0;}
    40% {background-position: -200vw,0;}
    100% {background-position: -50vw,0;}
}
@keyframes diagon_04{
    0% {background-position: -200vw,0;}
    60% {background-position: -200vw,0;}
    100% {background-position: -60vw,0;}
}
@keyframes diagon_05{
    0% {background-position: -200vw,0;}
    80% {background-position: -200vw,0;}
    100% {background-position: -90vw,0;}
}

@keyframes noDiagon_01{
    0% {background-position: 0,0;}
    100% {background-position: 10vw,0;}
}
@keyframes noDiagon_02{
    0% {background-position: -20vw,0;}
    100% {background-position: -2vw,0;}
}
@keyframes noDiagon_03{
    0% {background-position: -50vw,0;}
    100% {background-position: -15vw,0;}
}
@keyframes noDiagon_04{
    0% {background-position: -60vw,0;}
    100% {background-position: -50vw,0;}
}
@keyframes noDiagon_05{
    0% {background-position: -90vw,0;}
    100% {background-position: -60vw,0;}
}

@keyframes againDiagon_01{
    0% {background-position: 10vw,0;}
    100% {background-position: 0,0;}
}
@keyframes againDiagon_02{
    0% {background-position: -2vw,0;}
    100% {background-position: -20vw,0;}
}
@keyframes againDiagon_03{
    0% {background-position: -15vw,0;}
    100% {background-position: -50vw,0;}
}
@keyframes againDiagon_04{
    0% {background-position: -50vw,0;}
    100% {background-position: -60vw,0;}
}
@keyframes againDiagon_05{
    0% {background-position: -60vw,0;}
    100% {background-position: -90vw,0;}
}

@keyframes contentAnim{
    0% {top: -120%;}
    100% {top: 11.5%;}
}
@keyframes noContent{
    0% {left: 0;top:11.5%;}
    100% {left: -200%;top:11.5%;}
}
@keyframes contentAgain{
    0% {left: -200%;top:11.5%;}
    100% {left: 0;top:11.5%;}
}
@keyframes bigAnim{
    0% {left: 300%;}
    100% {left: 0;}
}
@keyframes noBig{
    0% {left: 0;}
    100% {left: 300%;}
}
@keyframes bellAnim{
    0% {bottom: -50%;}
    100% {bottom: 0;}
}
@keyframes noBell{
    0% {bottom: 0;}
    100% {bottom: -50%;}
}
@keyframes textRing{
    0% {transform: rotate(0deg);}
    10% {transform: rotate(7deg);}
    20% {transform: rotate(-7deg);}
    40% {transform: rotate(3deg);}
    70% {transform: rotate(-3deg);}
    100% {transform: rotate(0deg);}
}
@keyframes noRing{
    0% {transform: rotate(0deg);}
    100% {transform: rotate(0deg);}
}
@keyframes bellJump{
    0% {transform: translateY(0) rotate(0deg);}
    30% {transform: translateY(5%) rotate(0deg);}
    70% {transform: translateY(-10%) rotate(2deg);}
    85% {transform: translateY(-5%) rotate(-1deg);}
    100% {transform: translateY(0) rotate(0deg);}
}
@keyframes noJump{
    0% {transform: translateY(0) rotate(0deg);}
    100% {transform: translateY(0) rotate(0deg);}
}
@keyframes leafAnim{
    0% {left: 0;}
    100% {left: -100%;}
}
@keyframes againLeaf{
    0% {left: -100%;}
    100% {left: -0;}
}