body {
	background: white;
	padding: 0;
    width: 100vw;
    overflow-x: hidden;
    margin: 0;
}

.button {
    position: fixed;
    top: 95vh;
    height: 10px;
    width: 50px;
    z-index: 40;
    filter: drop-shadow(2px 2px 3px grey);
}

.quote-button {
    left: 50px;
    background: #f05626;
}

.alphabet-button {
    left: 120px;
    background: black;
}

.bazinga-button {
    left: 190px;
    background: #13b38c;
}

.quote-wrapper, .stage-wrapper {
    width: 100%;
    height: 100vh;

}

.bazinga-wrapper {    width: 121%;
    height: 96vh;}

.quote {
    width: 960px;
    background: white;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}

.stage {
	width: 1120px;
    background: transparent;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}

.stage-wrapper {
    background:transparent ;
}

.bazinga {
    width: 960px;
    margin: 0 auto;
    background: white;
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}

.alphabet {
    height: 100px;
    width: 100px;
    display: inline-block;
    position: relative;
    margin: 10px 10px;
}

.letter {
    height: 100px;
    width: 100px;
    /*background: gray;*/
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.letter-wrapper {
    height: 100px;
    width: 70px;
    /*overflow: hidden;*/
    position: relative;
    display: inline-block;
}

.black, .orange, .green, .red, .blue, .purple, .yellow, .grey {
    position: absolute;
}

.black {
	background: black;
    border-top-color: black;
}

.grey {
    background: #A5A8AD;
    border-top-color: #A5A8AD;
}
.orange {
    background: #f05626;
    border-top-color: #f05626;
}

.green {
    background: #13b38c;
    border-top-color: #13b38c;
}

.red {
    background: #b13124;
    border-top-color: #b13124;
}

.blue {
    background: #3587C8;
    border-top-color: #3587C8;
}

.purple {
    background: #2F4EA2;
    border-top-color: #2F4EA2; 
}

.yellow {
    background: #FCB332;
    border-top-color: #FCB332;
}

.vert {
    width: 20%;
}

.dot {
    height: 20%;
    width: 20%;
    border-radius: 100%;
}

.end, .joint, .finish {
    position: absolute;
    height: 15%; /* 30px */
    width: 35%; /* 70px */
    overflow: hidden;
}

.main {
    width: 107.14%;
    left: -7.14%;
    height: 100%;
}

.letter-wrapper .main {
    animation-name: main-left;
    animation-duration: 6s;
    animation-iteration-count: 1;
    animation-timing-function:cubic-bezier(0.770, 0.000, 0.945, 0.680);;*/
}

.alphabet .bg, .alphabet .bg-ex {
    background-color: white;
}

.bg {
    background-color: white;
    position: absolute;
    z-index: 10;
}

.bg-ex {
    background-color: white;
    position: absolute;
    z-index: 10;
}

.end .main {
    border-radius: 110% 110% 0 0 / 200% 200% 0 0;
}

.end .bg {
    width: 57.14%;
    height: 60%;
    left: -14%;
    top: 40%;
    border-radius: 60% 60% 0 0 / 100% 100% 0 0;
}

.end .bg-ex {
    width: 28.57%;
    height: 53.33%;
    left: -8.57%;
    top: 36.67%;
    border-radius: 0 120% 0 0 / 0 112.5% 0 0;
}

.joint .main {
    border-radius: 10.67% 146.67% 0 0 / 0 200% 0 0;
}

.joint .bg {
    width: 57.14%;
    height: 73.33%;
    left: -14.29%;
    top: 26.67%;
    border-radius: 60% 60% 0 0 / 81.81% 81.81% 0 0;
}

.joint .bg-ex {
    display: hidden;
}

.finish .main {
    border-radius: 110% 110% 0 0 / 200% 200% 0 0;
}

.finish .bg {
    width: 57.14%;
    height: 106.67%;
    left: -14.29%;
    top: 0;
    border-radius: 60% 30% 0 0 / 56.25% 56.25% 0 0;
}

.finish .bg-ex {
    width: 28.5714%;
    height: 53.33%;
    left: 5.714%;
    top: 0;
}

.cross {
    position: absolute;
    height: 15%; /* 30 */
    width: 42%; /* 84 */
    overflow: hidden;
}

.cross .main {
    width: 100%;
    left: 0;
    height: 100%;
    border-radius: 107.14% 92.857% 0 0 / 200% 200% 0 0;
}

.cross .bg {
    width: 47.619%;
    height: 53.33%;
    left: 4.7619%;
    top: 46.67%;
    border-radius: 60% 60% 0 0 / 112.5% 112.5% 0 0;
}

.cross .bg-ex {
    display: hidden;
}

.combo {
    height: 12.5%;
    position: absolute;
    overflow: hidden;
    width: 35%;
}

.combo > div {
    height: 120%;
    width: 100%;
}

.cut {
    height: 5%;
    border-radius: 25% 50%;
}

.break {
    display: block; margin: 40px 0; content: " ";
}

@keyframes main-left {
    0% { left: -7.41%; }
    33% { left: 120%; }
    66% { left: -120%; }
    100% { left: -7.41%%; }
}



@keyframes main-width {
    0% { width: 50%; }
    25%{ width: 50%; }
    50% { width: 150%; }
    100% { width: 50%; }
}