@keyframes adrFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes adrCopyFadeIn {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes adrButtonCirclePulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes adrMoveFromLeft {
    0% {
        transform: translateX(-100vw);
    }
    100% {
        transform: translateX(0vw);
    }
}
@keyframes adrBackgroundMoveLeft {
    0% {
        transform: translateY(0vw);
    }
    100% {
        transform: translateY(-30vw);
    }
}
@keyframes adrRemoveMask {
    0% {
        opacity: 1;
        clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
    }
    100% {
        opacity: 1;
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    }
}
@keyframes adrButtonArrowMoveLeftRight {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    25% {
        opacity: 1;
        transform: translateX(-0.3vw);
    }
    75% {
        opacity: 1;
        transform: translateX(0.3vw);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes adrReturnMoveLeftRight {
    0% {
        opacity: 1;
        transform: translateX(-32vw);
    }
    25% {
        opacity: 1;
        transform: translateX(-32.4vw);
    }
    75% {
        opacity: 1;
        transform: translateX(-31.6vw);
    }
    100% {
        opacity: 1;
        transform: translateX(-32vw);
    }
}
@keyframes adrBgRightMoveLeft {
    0% {
        opacity: 1;
        transform: translateX(0vw);
    }
    100% {
        opacity: 1;
        transform: translateX(-32vw);
    }
}
@keyframes adrBgRightMoveRight {
    0% {
        opacity: 1;
        transform: translateX(-32vw);
    }
    100% {
        opacity: 1;
        transform: translateX(0vw);
    }
}
@keyframes adrBackgroundMoveLeft {
    0% {
        opacity: 1;
        transform: translateX(0vw);
    }
    100% {
        opacity: 1;
        transform: translateX(-15vw);
    }
}
@keyframes adrBackgroundMoveRight {
    0% {
        opacity: 1;
        transform: translateX(-15vw);
    }
    100% {
        opacity: 1;
        transform: translateX(0vw);
    }
}
@keyframes adrBgGreyFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.4;
    }
}
@keyframes adrBgGreyFadeOut {
    0% {
        opacity: 0.4;
    }
    100% {
        opacity: 0;
    }
}
@keyframes adrFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes adrBadgePulse {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1);
    }
    56% {
        transform: scale(1.1);
    }
    73% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}
#adrWrapper {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    background-color: #fafafb;
    overflow: hidden;
    cursor: default;
}
#adrClickWrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 2147483509;
}
.adrAbsolutePosition {
    position: absolute;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 2147483500;
}
.adrBackgroundWhite {
    position: absolute;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    opacity: 1;
    background-color: white;
    z-index: 2147483510;
    animation-name: adrMoveFromLeft, adrRemoveMask;
    animation-fill-mode: forwards, forwards;
    animation-duration: 1.2s, 1.5s;
    animation-iteration-count: 1, 1;
    animation-delay: 0s, 1.5s;
    animation-timing-function: ease-out, ease;
}
.adrBadge {
    position: absolute;
    width: 10vw;
    height: auto;
    top: 13.5vw;
    left: 28.5vw;
    z-index: 2147483505;
}
.adrButton {
    z-index: 2147483505;
}
.adrBgRight {
    position: absolute;
    width: 32vw;
    height: auto;
    top: 0;
    left: 100vw;
    opacity: 1;
    z-index: 2147483515;
}
.adrCopyRight {
    position: absolute;
    width: 32vw;
    height: auto;
    top: 0;
    left: 100vw;
    opacity: 1;
    z-index: 2147483515;
}
.adrArrowRight {
    position: absolute;
    width: 32vw;
    height: auto;
    top: 0;
    left: 100vw;
    opacity: 1;
    z-index: 2147483516;
}
.adrCopy {
    position: absolute;
    width: 32vw;
    height: auto;
    top: 0;
    left: 100vw;
    opacity: 1;
    z-index: 2147483516;
}
#adrCopyDiv {
    position: absolute;
    width: 32vw;
    height: 15vw;
    top: 23vw;
    left: 4vw;
    opacity: 0;
    z-index: 2147483510;
    cursor: pointer;
}
.adrPhoto {
    position: absolute;
    width: 28vw;
    height: auto;
    top: 22.4vw;
    left: 102vw;
    opacity: 0;
    z-index: 2147483517;
}
.adrButtonArrow {
    z-index: 2147483506;
}
.adrButtonCircle {
    position: absolute;
    width: 3vw;
    height: auto;
    opacity: 0;
    z-index: 2147483505;
}
.adrButtonDiv {
    position: absolute;
    width: 5vw;
    height: 5vw;
    opacity: 1;
    z-index: 2147483510;
    cursor: pointer;
}
.adrButtonCircle1 {
    top: 23vw;
    left: 49vw;
}
.adrButtonCircle2 {
    top: 11vw;
    left: 62vw;
}
.adrButtonCircle3 {
    top: 19vw;
    left: 80vw;
}
.adrButtonCircle4 {
    top: 30vw;
    left: 57vw;
}
.adrButtonDiv1 {
    top: 22vw;
    left: 48vw;
}
.adrButtonDiv2 {
    top: 10vw;
    left: 61vw;
}
.adrButtonDiv3 {
    top: 18vw;
    left: 79vw;
}
.adrButtonDiv4 {
    top: 29vw;
    left: 56vw;
}
.adrInitialFadeIn {
    animation-name: adrFadeIn;
    animation-fill-mode: forwards;
    animation-duration: 0.1s;
    animation-iteration-count: 1;
    animation-delay: 1.2s;
    animation-timing-function: linear;
}
.adrButtonCircleAnimation {
    animation-name: adrFadeIn, adrButtonCirclePulse;
    animation-fill-mode: forwards, none;
    animation-duration: 0.1s, 1s;
    animation-iteration-count: 1, infinite;
    animation-delay: 1.2s, 1.5s;
    animation-timing-function: linear, linear;
}
.adrButtonArrowAnimation {
    animation-name: adrFadeIn, adrButtonArrowMoveLeftRight;
    animation-fill-mode: forwards, none;
    animation-duration: 0.1s, 2.2s;
    animation-iteration-count: 1, infinite;
    animation-delay: 1.2s, 1.5s;
    animation-timing-function: linear, linear;
}
.adrBackgroundMoveLeft {
    animation-name: adrBackgroundMoveLeft;
    animation-fill-mode: forwards;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-delay: 0s;
    animation-timing-function: ease-out;
}
.adrBgRightMoveLeft {
    animation-name: adrBgRightMoveLeft;
    animation-fill-mode: forwards;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-delay: 0s;
    animation-timing-function: ease-out;
}
.adrBackgroundMoveRight {
    animation-name: adrBackgroundMoveRight;
    animation-fill-mode: forwards;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-delay: 0s;
    animation-timing-function: ease-out;
}
.adrBgRightMoveRight {
    animation-name: adrBgRightMoveRight;
    animation-fill-mode: forwards;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-delay: 0s;
    animation-timing-function: ease-out;
}
.adrCopyRightMoveLeft {
    animation-name: adrBgRightMoveLeft;
    animation-fill-mode: forwards;
    animation-duration: 0.8s;
    animation-iteration-count: 1;
    animation-delay: 0.2s;
    animation-timing-function: ease-out;
}
.adrArrowRightAnimation {
    animation-name: adrBgRightMoveLeft, adrReturnMoveLeftRight;
    animation-fill-mode: forwards, none;
    animation-duration: 1s, 2.2s;
    animation-iteration-count: 1, infinite;
    animation-delay: 0s, 1s;
    animation-timing-function: ease-out, linear;
}
#adrReturnDiv {
    position: absolute;
    width: 12vw;
    height: 10vw;
    top: 0vw;
    left: 65vw;
    opacity: 1;
    pointer-events: none;
    z-index: 2147483520;
}
#adrGreyBg {
    position: absolute;
    width: 100vw;
    height: 44.3vw;
    top: 0;
    left: 0vw;
    opacity: 0;
    background-color: black;
    z-index: 2147483500;
}
.adrBgGreyFadeIn {
    animation-name: adrBgGreyFadeIn;
    animation-fill-mode: forwards;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-delay: 0s;
    z-index: 2147483508 !important;
}
.adrBgGreyFadeOut {
    animation-name: adrBgGreyFadeOut;
    animation-fill-mode: forwards;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-delay: 0s;
}
.adrFadeOut {
    animation-name: adrFadeOut;
    animation-fill-mode: forwards;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-delay: 0s;
}
.adrInstruction {
    z-index: 2147483501;
    transform-origin: 70vw 38vw;
}
.adrBadgeAnimation {
    animation-name: adrFadeIn, adrBadgePulse;
    animation-fill-mode: forwards, none;
    animation-duration: 0.1s, 3s;
    animation-iteration-count: 1, infinite;
    animation-delay: 1.2s, 1.5s;
    animation-timing-function: linear, linear;
}
.adrArrowNext {
    position: absolute;
    width: 32vw;
    height: auto;
    top: 0;
    left: 100vw;
    opacity: 1;
    z-index: 2147483516;
}
.adrArrowPrevious {
    position: absolute;
    width: 32vw;
    height: auto;
    top: 0;
    left: 100vw;
    opacity: 1;
    z-index: 2147483516;
}
.adrNextDiv {
    position: absolute;
    width: 8vw;
    height: 4vw;
    top: 1vw;
    left: 92vw;
    opacity: 1;
    pointer-events: none;
    z-index: 2147483520;
}
.adrPreviousDiv {
    position: absolute;
    width: 8vw;
    height: 4vw;
    top: 1vw;
    left: 83.5vw;
    pointer-events: none;
    z-index: 2147483520;
}
.adrBadgeDiv {
    position: absolute;
    width: 14vw;
    height: 10vw;
    top: 11.5vw;
    left: 26vw;
    opacity: 0;
    z-index: 2147483510;
    cursor: pointer;
}
.adrInstructionAnimation {
    animation-name: adrFadeIn, adrBadgePulse;
    animation-fill-mode: forwards, none;
    animation-duration: 0.1s, 2.8s;
    animation-iteration-count: 1, 3;
    animation-delay: 1.2s, 1.9s;
    animation-timing-function: linear, linear;
}