.main {
    opacity: 0;
}

[data-exists] .main,
.main.inpage {
    opacity: 1;
}

[manCursor_1] {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: black;
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
}

.cursor[manCursor_2] {
    display: block;
}

@media (any-pointer: fine) {
    .cursor[manCursor_2] {
        position: fixed;
        top: 0;
        left: 0;
        display: block;
        pointer-events: none;
        z-index: 1001;
    }

    .no-js .cursor[manCursor_2] {
        display: none;
    }

    [manCursor_2] .cursor__line {
        position: fixed;
        display: block;
        will-change: transform, opacity;
    }

    [manCursor_2] .cursor__line--horizontal {
        top: -10px;
        left: -10%;
        width: 120%;
        height: 20px;
    }

    [manCursor_2] .cursor__line--vertical {
        left: -10px;
        top: -10%;
        height: 120%;
        width: 20px;
    }

    [manCursor_2] .cursor__line-element {
        fill: none;
        stroke: #000;
        stroke-width: 1px;
    }
}


.manTransition-fade {
    transition: 0.6s;
    transform: translateY(0px);
    opacity: 1;
}

html.is-animating .manTransition-fade {
    opacity: 0;
    transform: translateY(50px);
}


.pageTransition {
    width: 100%;
    height: 100vh;
    max-height: 1080px;
    pointer-events: none;
    position: fixed;
    top: 0;
    z-index: 10;
    opacity: 0;
    background: url(../image/a1986be5-06db-430f-8653-2ec85f0198a8.gif) no-repeat center #fff;
}


.manRedwords {
    background: red;
    color: #fff;
}


.manIvcla {
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    filter: contrast(1.05) brightness(100%);
}


.manSharpen {
    filter: url(#sharp);
}

.manActive {
    color: #007bff !important;
}

[data-rolling] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.rolling-10 {
    display: flex;
    overflow: hidden;
}

.rolling-10>.p_list {
    flex-wrap: nowrap !important;
    min-width: 100%;
    -webkit-animation: rollingLeft var(--speed) linear infinite;
    animation: rollingLeft var(--speed) linear infinite;
}

.rolling-10>.p_list>div {
    flex: 1 !important;
    padding: 0 var(--padding);
}

.rolling-10:hover>.p_list {
    animation-play-state: var(--play);
}

.rolling-10[style*="--opacity"] {
    -webkit-mask-image: linear-gradient(var(--mask-direction, to right), hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0));
    mask-image: linear-gradient(var(--mask-direction, to right), hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0));
}

.rolling-10[style*="--notext"] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.rolling-10[style*="--direction"]>.p_list {
    animation-name: rollingRight;
    -webkit-animation-name: rollingRight;
}

.rolling-10[style*="--portrait"] {
    height: 100%;
    flex-direction: column;
    overflow: hidden;
}

.rolling-10[style*="--portrait"]>.p_list {
    flex-direction: column;
    -webkit-animation-name: rollingTop;
    animation-name: rollingTop;
}

.rolling-10[style*="--portrait"]>.p_list>div {
    padding: var(--padding) 0;
}

.rolling-10[style*="opacity"][style*="portrait"] {
    --mask-direction: to bottom;
}

.rolling-10[style*="direction"][style*="portrait"]>.p_list {
    -webkit-animation-name: rollingBottom;
    animation-name: rollingBottom;
}

@keyframes rollingLeft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes rollingRight {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0%);
    }
}

@keyframes rollingTop {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100%);
    }
}

@keyframes rollingBottom {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0%);
    }
}

.rolling-9 {
    display: flex;
    overflow: hidden;
    width: 100%;
    position: relative;
}

.rolling-9.swiper-container-vertical{
    height: 100%;
}

.rolling-9>.p_list {
    flex-wrap: nowrap !important;
}

.rolling-9>.p_list>div {
    flex: none !important;
    width: 33.333%;
}

.rolling-9.bo {
    -webkit-mask-image: linear-gradient(var(--mask-direction, to right), hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0));
    mask-image: linear-gradient(var(--mask-direction, to right), hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0));
}

[data-rolling] [class*="manNext"],
[data-rolling] [class*="manPrev"] {
    width: 40px;
    height: 40px;
    display: grid;
    place-content: center;
}

[data-rolling] [class*="manPrev"] {
    order: -1;
}

[data-rolling] [class*="manNext"]:hover,
[data-rolling] [class*="manPrev"]:hover {
    color: #007bff;
}

[data-rolling] [class*="manPagi"] {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

[data-rolling] [class*="manPagi"] span {
    margin: 0 3px;
}

[data-rolling].prr {
    padding-bottom: 20px;
}

.has-scroll-init body::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

[data-timing] [data-scroll-speed] {
    transition: transform linear .1s !important;
}

#blackTop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 40px;
    height: 40px;
    background: rgb(0 0 0 / 70%);
    border-radius: 100%;
    color: #fff;
    display: none;
}

.main>div>[data-fulling] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
}

[data-fulling] [data-fulling] {
    height: 100%;
}

[data-fulling] .swiper-wrapper {
    height: 100%;
}

[data-fulling] .swiper-slide {
    height: 100%;
}

[data-fulling] .swiper-slide:not([id*="c_grid"]) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.autoFooter>div>div:last-child {
    height: auto;
}

.main>div>[data-fulling]>[class*="manPagi"] {
    position: absolute;
    right: 15px;
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
}

.main>div>[data-fulling] [data-fulling]>[class*="manPagi"] {
    position: absolute;
    left: 50%;
    bottom: 15px;
    width: auto;
    height: auto;
    display: flex;
}

.main>div>[data-fulling]>[class*="manPagi"] span,
.main>div>[data-fulling] [data-fulling]>[class*="manPagi"] span {
    margin: 4px 0;
    height: 9px;
    width: 9px;
    opacity: 1;
    background: rgb(0 0 0 / 20%);
    position: relative;
}

.main>div>[data-fulling]>[class*="manPagi"] span[class*="active"],
.main>div>[data-fulling] [data-fulling]>[class*="manPagi"] span[class*="active"] {
    background: #007bff;
}

.main>div>[data-fulling] [data-fulling]>[class*="manPagi"] span {
    margin: 0px 4px;
    position: static;
}

[data-exists] .main [data-fulling] {
    position: static;
}

[data-exists] [data-fulling]>div>div {
    min-height: 700px !important;
}

[data-fulling] [class*="pagipost"] {
    right: var(--paginationRight) !important;
    top: var(--paginationTop) !important;
    left: var(--paginationLeft) !important;
    bottom: var(--paginationBottom) !important;
    transform: translateX(var(--paginationTransformX)) translateY(var(--paginationTransformY)) !important;
}

.manPagi-name {
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateX(-10px) translateY(-50%);
    white-space: pre;
    background: rgb(0 0 0 / 70%);
    border-radius: 15px;
    color: #fff;
    padding: 4px 15px;
    line-height: 1;
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    transition: all ease .5s;
}

.main>div>[data-fulling]>[class*="manPagi"] span[class*="active"] .manPagi-name {
    opacity: 1;
    transform: translateX(0) translateY(-50%);
}

.main>div>[data-fulling] [data-fulling] [class*="manPagi"] span[class*="active"] .manPagi-name {
    opacity: 1;
    transform: translateX(0) translateY(-50%);
}

[data-fulling] [class*="Left"] .manPagi-name {
    right: auto;
    left: calc(100% + 8px);
    transform: translateX(10px) translateY(-50%);
}

[data-fulling] .isPath-horizontal {
    flex-direction: row !important;
}

[data-fulling] .isPath-horizontal span {
    margin: 0 4px !important;
    position: static !important;
}

[data-fulling] [data-fulling] .isPath-vertical {
    flex-direction: column;
}

[data-fulling] [data-fulling] .isPath-vertical span {
    margin: 4px 0px !important;
    position: relative !important;
}

.manLoading {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: #fff;
}

[data-loading="loading--1"] {
    background: #fff;
}

.loading--1 {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: center;
}

.loading--1 .circle-border {
    width: 100%;
    height: 100%;
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: rgb(0 0 0);
    background: linear-gradient(0deg, rgb(64 64 64 / 10%) 32%, rgb(80 80 80) 100%);
    animation: spin .8s linear 0s infinite;
}

.loading--1 .circle-core {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 50%;
}

[data-loading="loading--2"] {
    background: #fff;
}

.loading--2 .pswp__preloader__icn {
    --size: 40px;
    width: var(--size);
    height: var(--size);
    -webkit-animation: rotation 500ms linear infinite;
    animation: rotation 500ms linear infinite;
}

.loading--2 .pswp__preloader__cut {
    width: calc(var(--size) - 7px);
    height: var(--size);
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.loading--2 .pswp__preloader__donut {
    width: var(--size);
    height: var(--size);
    border: 2px solid #333;
    border-radius: 50%;
    border-left-color: transparent;
    border-bottom-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: donut-rotate 1000ms cubic-bezier(.4, 0, .22, 1) infinite;
    animation: donut-rotate 1000ms cubic-bezier(.4, 0, .22, 1) infinite;
}




[data-loading="loading--3"] {
    background: #fff;
}

.loading--3>div {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    border: 2px solid;
    border-color: #ccc #ccc transparent transparent;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}

.loading--3>div:after,
.loading--3>div:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 2px solid;
    border-color: transparent transparent #007bff #007bff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -webkit-animation: rotationBack 0.5s linear infinite;
    animation: rotationBack 0.5s linear infinite;
    transform-origin: center center;
}

.loading--3>div:before {
    width: 32px;
    height: 32px;
    border-color: #ccc #ccc transparent transparent;
    -webkit-animation: rotation 1.5s linear infinite;
    animation: rotation 1.5s linear infinite;
}

[data-loading="loading--4"] {
    background: #fff;
}

.loading--4 {
    width: 40px;
    height: 40px;
    border: 2px dashed #333;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    -webkit-animation: rotation 2s linear infinite;
    animation: rotation 2s linear infinite;
}

[data-loading="loading--5"] {
    background: #fff;
}

.loading--5>div {
    width: 40px;
    height: 40px;
    display: inline-block;
    position: relative;
}

.loading--5>div::after,
.loading--5>div::before {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #007bff;
    position: absolute;
    left: 0;
    top: 0;
    transform: scale(0);
    -webkit-animation: loading5 2s ease-in-out infinite;
    animation: loading5 2s ease-in-out infinite;
}

.loading--5>div::after {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

[data-loading="loading--6"] {
    background: #fafafa;
}

.loading--6 .pl {
    --hue: 223;
    --themeTrans: 0.3s;
    width: 60px;
    height: 60px;
}

.loading--6 .pl__ring,
.loading--6 .pl__worm1,
.loading--6 .pl__worm2,
.loading--6 .pl__worm3 {
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

.loading--6 .pl__ring {
    stroke: hsla(var(--hue), 10%, 10%, 0.1);
    transition: stroke var(--themeTrans);
}

.loading--6 .pl__worm1 {
    animation-name: worm1;
}

.loading--6 .pl__worm2 {
    animation-name: worm2;
    transform-origin: 32px 88px;
}

.loading--6 .pl__worm3 {
    animation-name: worm3;
    transform-origin: 144px 88px;
}

[data-loading="loading--7"] {
    background: #fafafa;
}

.loading--7 .pl,
.loading--7 .pl__worm {
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

.loading--7 .pl {
    --hue: 223;
    animation-name: bump;
    animation-timing-function: linear;
    width: 60px;
    height: 60px;
}

.loading--7 .pl__ring {
    stroke: hsla(var(--hue), 10%, 10%, 0.1);
    transition: stroke 0.3s;
}

.loading--7 .pl__worm {
    animation-name: worm;
    animation-timing-function: cubic-bezier(0.42, 0.17, 0.75, 0.83);
}

[data-loading="loading--8"] {
    background: #fff;
}

.loading--8>div {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    color: rgb(0, 123, 255, 1);
    left: -100px;
    -webkit-animation: shadowRolling 2s linear infinite;
    animation: shadowRolling 2s linear infinite;
}

[data-loading="loading--9"] {
    background: #fff;
}

.loading--9 {
    width: 150px;
    height: 2px;
    display: flex;
}

.loading--9 div {
    width: 100%;
    height: 100%;
    display: inline-block;
    position: relative;
    background: rgb(0 0 0 / 10%);
    overflow: hidden;
}

.loading--9 span {
    content: "";
    width: 0;
    height: 100%;
    background: #007bff;
    position: absolute;
    top: 0;
    left: 0;
    transition: width .5s ease;
}

[data-loading="loading--10"] {
    background: #fff;
}

.loading--10 {
    width: 200px;
    height: 3px;
    position: relative;
    display: flex;
    overflow: hidden;
}

.loading--10>div {
    width: 100%;
    height: 100%;
    background: rgb(100 100 100 / 15%);
}

.loading--10 span {
    content: "";
    width: 0%;
    height: 4.8px;
    background-color: #fff;
    font-size: 15px;
    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent);
    background-size: 1em 1em;
    position: absolute;
    top: 0;
    left: 0;
    transition: width .5s ease;
    -webkit-animation: barStripe 1s linear infinite;
    animation: barStripe 1s linear infinite;
}

[data-loading="loading--11"] {
    background: #1d2630;
}

.loading--11 {
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    position: relative;
}

.loading--11 .leo-border-1 {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: rgb(63, 249, 220);
    background: linear-gradient(0deg, rgb(255 255 255 / 10%) 33%, #ffffff 100%);
    animation: spin3D 1.8s linear 0s infinite;
}

.loading--11 .leo-core-1 {
    width: 100%;
    height: 100%;
    background-color: #1d2630aa;
    border-radius: 50%;
}

.loading--11 .leo-border-2 {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #007bff;
    background: linear-gradient(0deg, rgb(0 123 255 / 10%) 33%, #007bff 100%);
    animation: spin3D 2.2s linear 0s infinite;
}

.loading--11 .leo-core-2 {
    width: 100%;
    height: 100%;
    background-color: rgb(6 27 50 / 65%);
    border-radius: 50%;
}

[data-loading="loading--12"] {
    background: #fff;
}

.loading--12 .text-progress {
    font-size: clamp(3.125rem, 1.875rem + 6.25vw, 9.375rem);
    font-weight: bold;
    color: #333;
    line-height: 1;
    display: flex;
}

@keyframes worm1 {
    from {
        animation-timing-function: ease-out;
        stroke-dashoffset: 43.98;
    }

    12.5% {
        animation-timing-function: ease-in-out;
        stroke-dashoffset: -131.95;
    }

    25% {
        animation-timing-function: ease-in;
        stroke-dashoffset: 0;
    }

    37.5%,
    50% {
        animation-timing-function: ease-out;
        stroke-dashoffset: -175.93;
    }

    62.5% {
        animation-timing-function: ease-in-out;
        stroke-dashoffset: 0;
    }

    75% {
        animation-timing-function: ease-in;
        stroke-dashoffset: -131.95;
    }

    87.5%,
    to {
        stroke-dashoffset: 43.98;
    }
}

@keyframes worm2 {

    from,
    35.5% {
        animation-timing-function: linear;
        stroke-dasharray: 0 40 0 44;
        visibility: hidden;
        transform: translate(0, 0) rotate(0);
    }

    37.5% {
        animation-timing-function: ease-out;
        stroke-dasharray: 0 40 44 0;
        visibility: visible;
        transform: translate(0, 0) rotate(0);
    }

    47.5% {
        animation-timing-function: ease-in;
        stroke-dasharray: 0 4 40 40;
        visibility: visible;
        transform: translate(0, -80px) rotate(360deg);
    }

    50% {
        animation-timing-function: linear;
        stroke-dasharray: 0 4 40 40;
        visibility: visible;
        transform: translate(0, -36px) rotate(360deg);
    }

    52.5%,
    to {
        stroke-dasharray: 0 42 0 42;
        visibility: hidden;
        transform: translate(0, 12px) rotate(360deg);
    }
}

@keyframes worm3 {
    from {
        animation-timing-function: linear;
        stroke-dasharray: 0 4 40 40;
        visibility: visible;
        transform: translate(0, -36px) rotate(0);
    }

    2.5% {
        animation-timing-function: linear;
        stroke-dasharray: 0 42 0 42;
        visibility: hidden;
        transform: translate(0, 12px) rotate(0);
    }

    85.5% {
        animation-timing-function: linear;
        stroke-dasharray: 0 40 0 44;
        visibility: hidden;
        transform: translate(0, 0) rotate(0);
    }

    87.5% {
        animation-timing-function: ease-out;
        stroke-dasharray: 0 40 44 0;
        visibility: visible;
        transform: translate(0, 0) rotate(0);
    }

    97.5% {
        animation-timing-function: ease-in;
        stroke-dasharray: 0 4 40 40;
        visibility: visible;
        transform: translate(0, -80px) rotate(-360deg);
    }

    to {
        stroke-dasharray: 0 4 40 40;
        visibility: visible;
        transform: translate(0, -36px) rotate(-360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(359deg);
    }
}

@keyframes rotation {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes rotationBack {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(-360deg)
    }
}

@keyframes spin3D {
    from {
        transform: rotate3d(.5, .5, .5, 360deg);
    }

    to {
        transform: rotate3d(0deg);
    }
}

@keyframes clockwise {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes donut-rotate {
    0% {
        -webkit-transform: rotate(0)
    }

    50% {
        -webkit-transform: rotate(-140deg)
    }

    100% {
        -webkit-transform: rotate(0)
    }
}

@keyframes donut-rotate {
    0% {
        transform: rotate(0)
    }

    50% {
        transform: rotate(-140deg)
    }

    100% {
        transform: rotate(0)
    }
}

@keyframes loading5 {

    0%,
    100% {
        transform: scale(0);
        opacity: 1;
    }

    50% {
        transform: scale(1);
        opacity: 0;
    }
}

@keyframes bump {

    from,
    42%,
    46%,
    51%,
    55%,
    59%,
    63%,
    67%,
    71%,
    74%,
    78%,
    81%,
    85%,
    88%,
    92%,
    to {
        transform: translate(0, 0);
    }

    44% {
        transform: translate(1.33%, 6.75%);
    }

    53% {
        transform: translate(-16.67%, -0.54%);
    }

    61% {
        transform: translate(3.66%, -2.46%);
    }

    69% {
        transform: translate(-0.59%, 15.27%);
    }

    76% {
        transform: translate(-1.92%, -4.68%);
    }

    83% {
        transform: translate(9.38%, 0.96%);
    }

    90% {
        transform: translate(-4.55%, 1.98%);
    }
}

@keyframes worm {
    from {
        stroke-dashoffset: 10;
    }

    25% {
        stroke-dashoffset: 295;
    }

    to {
        stroke-dashoffset: 1165;
    }
}

@keyframes shadowRolling {
    0% {
        box-shadow: 0px 0 rgba(0, 123, 255, 0),
            0px 0 rgba(0, 123, 255, 0),
            0px 0 rgba(0, 123, 255, 0),
            0px 0 rgba(0, 123, 255, 0);
    }

    12% {
        box-shadow: 100px 0 rgb(0, 123, 255, 1),
            0px 0 rgba(0, 123, 255, 0),
            0px 0 rgba(0, 123, 255, 0),
            0px 0 rgba(0, 123, 255, 0);
    }

    25% {
        box-shadow: 110px 0 rgba(0, 123, 255, 1),
            100px 0 rgba(0, 123, 255, 1),
            0px 0 rgba(0, 123, 255, 0),
            0px 0 rgba(0, 123, 255, 0);
    }

    36% {
        box-shadow: 120px 0 rgba(0, 123, 255, 1),
            110px 0 rgba(0, 123, 255, 1),
            100px 0 rgba(0, 123, 255, 1),
            0px 0 rgba(0, 123, 255, 0);
    }

    50% {
        box-shadow: 130px 0 rgba(0, 123, 255, 1),
            120px 0 rgba(0, 123, 255, 1),
            110px 0 rgba(0, 123, 255, 1),
            100px 0 rgba(0, 123, 255, 1);
    }

    62% {
        box-shadow: 200px 0 rgba(0, 123, 255, 0),
            130px 0 rgba(0, 123, 255, 1),
            120px 0 rgba(0, 123, 255, 1),
            110px 0 rgba(0, 123, 255, 1);
    }

    75% {
        box-shadow: 200px 0 rgba(0, 123, 255, 0),
            200px 0 rgba(0, 123, 255, 0),
            130px 0 rgba(0, 123, 255, 1),
            120px 0 rgba(0, 123, 255, 1);
    }

    87% {
        box-shadow: 200px 0 rgba(0, 123, 255, 0),
            200px 0 rgba(0, 123, 255, 0),
            200px 0 rgba(0, 123, 255, 0),
            130px 0 rgba(0, 123, 255, 1);
    }

    100% {
        box-shadow: 200px 0 rgba(0, 123, 255, 0),
            200px 0 rgba(0, 123, 255, 0),
            200px 0 rgba(0, 123, 255, 0),
            200px 0 rgba(0, 123, 255, 0);
    }
}

@keyframes barStripe {
    0% {
        background-position: 1em 0;
    }

    100% {
        background-position: 0 0;
    }
}

.bottomTop {
    opacity: 0;
    transform: translateY(80px);
}
.topBottom {
    opacity: 0;
    transform: translateY(-80px);
}
.leftRight {
    opacity: 0;
    transform: translateX(-80px);
}
.rightLeft {
    opacity: 0;
    transform: translateX(80px);
}