#s1 {
    position: relative;
    background: #242424;
    height: 100vh;
}

#s1 h2, #s1 .title {
    position: absolute;
    z-index: 2;
}

#s1 .title {
    height: auto;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#s1 .title h1 {
    font-size: 9vw;
    letter-spacing: -.3rem;
}

#s1 .title #C {
    -webkit-animation: C 1.3s ease;
    -moz-animation: C 1.3s ease;
    -o-animation: C 1.3s ease;
    animation: C 1.3s ease;
}

@-webkit-keyframes C {
    0% {
        transform: translateY(20%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@-moz-keyframes C {
    0% {
        transform: translateY(20%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@-o-keyframes C {
    0% {
        transform: translateY(20%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes C {
    0% {
        transform: translateY(20%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

#s1 .title #O {
    -webkit-animation: O 1.6s ease;
    -moz-animation: O 1.6s ease;
    -o-animation: O 1.6s ease;
    animation: O 1.6s ease;
}

@-webkit-keyframes O {
    0% {
        transform: translateY(10%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@-moz-keyframes O {
    0% {
        transform: translateY(10%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@-o-keyframes O {
    0% {
        transform: translateY(10%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes O {
    0% {
        transform: translateY(10%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

#s1 .title #I {
    -webkit-animation: I 1.8s ease;
    -moz-animation: I 1.8s ease;
    -o-animation: I 1.8s ease;
    animation: I 1.8s ease;
}

@-webkit-keyframes I {
    0% {
        transform: translateY(17%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@-moz-keyframes I {
    0% {
        transform: translateY(17%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@-o-keyframes I {
    0% {
        transform: translateY(17%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes I {
    0% {
        transform: translateY(17%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

#s1 .title #N {
	color: #C0AAFF !important;
    -webkit-animation: N 2.1s ease;
    -moz-animation: N 2.1s ease;
    -o-animation: N 2.1s ease;
    animation: N 2.1s ease;
}

@-webkit-keyframes N {
    0% {
        transform: translateY(13%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@-moz-keyframes N {
    0% {
        transform: translateY(13%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@-o-keyframes N {
    0% {
        transform: translateY(13%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes N {
    0% {
        transform: translateY(13%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

#s1 .title #X {
	color: #C0AAFF !important;
    -webkit-animation: X 1.4s ease;
    -moz-animation: X 1.4s ease;
    -o-animation: X 1.4s ease;
    animation: X 1.4s ease;
}

@-webkit-keyframes X {
    0% {
        transform: translateY(15%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@-moz-keyframes X {
    0% {
        transform: translateY(15%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@-o-keyframes X {
    0% {
        transform: translateY(15%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes X {
    0% {
        transform: translateY(15%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

#s1 .title #T {
	color: #C0AAFF !important;
    -webkit-animation: T 1.9s ease;
    -moz-animation: T 1.9s ease;
    -o-animation: T 1.9s ease;
    animation: T 1.9s ease;
}

@-webkit-keyframes T {
    0% {
        transform: translateY(19%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@-moz-keyframes T {
    0% {
        transform: translateY(19%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@-o-keyframes T {
    0% {
        transform: translateY(19%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes T {
    0% {
        transform: translateY(19%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

#s1 .title #M {
    color: #C0AAFF !important;
    -webkit-animation: M 1.5s ease;
    -moz-animation: M 1.5s ease;
    -o-animation: M 1.5s ease;
    animation: M 1.5s ease;
}

@-webkit-keyframes M {
    0% {
        transform: translateY(14%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@-moz-keyframes M {
    0% {
        transform: translateY(14%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@-o-keyframes M {
    0% {
        transform: translateY(14%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes M {
    0% {
        transform: translateY(14%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

#s1 h2 {
	top: 50px;
    left: 50%;
    transform: translateX(-50%);
}

#s1 h2, #s1 .title h1 {
    color: white;
    text-align: center;
    z-index: 2;
}

#s1 h2 {
    font-size: 1.2vw;
    letter-spacing: -.03rem;
	line-height: 1.4 !important;
	font-family: "Alliance",sans-serif !important;
}

#s1 .mach-img-bx {
    position: absolute;
    width: 100vw;
    height: auto;
    top: 20vh;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#s1 .mach-img-bx .mach-img {
    width: 38vw;
}

#s1 .mousebx {
    position: absolute;
    bottom: 50px;
	left:50%;
	transform:translateX(-50%);
	z-index:2;
    display: flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
}

#s1 .mousebx h1 {
	text-align:center;
	font-size: 14px;
	font-family:"Matter",'sans-serif' !important;
	color:white;
	letter-spacing: -.01rem;
	padding-bottom: 1rem;
	animation: opc 3s infinite;
    -webkit-animation: opc 3s infinite;
}

@keyframes opc {
	0%   {
		opacity:0;
	}
    100% {
        opacity: 1;
   }
}
@-webkit-keyframes opc {
	0%   {
		opacity:0;
	}
    100% {
        opacity: 1;
   }
}

#s1 .mousebx .mouse {
    width: 50px;
    height: 90px;
    border: 1px solid white;
    border-radius: 60px;
    position: relative;
}
#s1 .mousebx .mouse::before {
    content: '';
    width: 12px;
    height: 12px;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    border-radius: 50%;
    opacity: 1;
    animation: wheel 3s infinite;
    -webkit-animation: wheel 3s infinite;
}
@keyframes wheel {
    to {
        opacity: 0;
        top: 60px;
   }
}
@-webkit-keyframes wheel {
    to {
        opacity: 0;
        top: 60px;
   }
}