:root {
    --room-height: 75vh;
    --sheet-height: 80px;
    --sheet-width: 80px;
}

@media screen and (max-width: 800px) {
    :root {
        --room-height: 100vh;
    }
}

body {
    background: #0f7778;
    /* background: linear-gradient(to bottom, #faa51a 0%, #faa51a 50%, #145369 51%, #145369 100%); */
}

.intro {
    position: relative;
    height: calc(25vh - var(--nav-height));
    min-height: 200px;
    background-color: #0f7778;
    z-index: 9;
    color: #fff;
}

@media screen and (max-width: 800px) {
    .intro {
        max-height: unset;
    }
}

.intro .container {
    position: absolute;
    max-width: 1110px;
    margin: 0 auto;
    right: 0;
    left: 0;
    text-align: center;
    padding-top: 30px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    z-index: 2;
    /* border: 1px solid red; */
}

.intro .container p {
    text-transform: initial;
    letter-spacing: 0em;
    width: 80%;
    margin: 0 auto;
    /* border: 1px solid red; */
    position: relative;
}

@media screen and (max-width: 800px) {
    .intro .container p {
        width: 80vw;
        margin: 0 auto;
        left: 0;
    }
}

.container h1 {
    font-size: 30px;
    font-weight: normal;
    margin-bottom: 30px;
}

@media screen and (max-width: 800px) {
    .container h1 {
        font-size: 20px;
    }
}

/* *************************************************************************************************** */

.secret-military-facility {
    height: 75vh;
}

@media screen and (max-width: 800px) {
    .secret-military-facility {
        height: 100vh;
    }
}

.room {
    background-image: url("../images/secret-military-facility.svg");
    height: 100%;
    background-position: bottom center;
    background-repeat: repeat-x;
    /* background-repeat: no-repeat; */
    background-size: auto 100%;
    position: relative;
    overflow: hidden;
}

.room .big-ol-screen {
    width: 641px;
    height: 506px;
    /* border: 1px solid red; */
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    background-image: url("../images/big-ol-screen.svg");
    background-position: center;
    background-repeat: no-repeat;
    bottom: calc(var(--room-height) * 0.45);
    height: calc(var(--room-height) * 0.50);
    width: calc(var(--room-height) * 0.55);

    padding: 5% 8% 5% 8%;
    text-align: center;
    /* display: flex;
    justify-content: center;
    align-items: center; */
}

.room .big-ol-screen p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
    mix-blend-mode: overlay;
    font-size: 3vh;
    font-weight: 900;
    color: #eee;
    height: 60%;
    /* width: 60%; */
    /* border: 1px solid red; */
}

.room .big-ol-screen p span {
    display: block;
}

.room .big-ol-screen p strong {
    font-size: 4vh;
}

.room .big-ol-screen small {
    font-size: 1.5vh;
    font-style: italic;
    display: block;
    text-transform: none;
}


.room .sentry {
    width: 144px;
    height: 440px;
    /* border: 1px solid red; */
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    background-image: url("../images/sentry.svg");
    background-position: center;
    background-repeat: no-repeat;
    bottom: calc(var(--room-height) * 0.07);
    height: calc(var(--room-height) * 0.50);
}

.room .ai-construct {
    width: 342px;
    width: 500px;
    height: calc(344px * 1);
    /* border: 1px solid red; */
    position: absolute;
    display: block;
    left: calc(50vw);
    right: 0;
    margin-left: auto;
    margin-right: auto;
    background-image: url("../images/ai-construct.svg");
    background-position: center;
    background-repeat: no-repeat;
    bottom: calc(var(--room-height) * -0.04);
    height: calc(var(--room-height) * 0.65);
    width: calc(var(--room-height) * 0.65);
    z-index: 9;
}

.room .ai-construct::after {
    content: "";
    width: 10%;
    height: 100px;
    /* border: 1px solid red; */
    bottom: 40%;
    left: 10%;
    position: absolute;
    display: block;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTAxLjEyIDIyLjYiPjxkZWZzPjxzdHlsZT4uY2xzLTF7aXNvbGF0aW9uOmlzb2xhdGU7fS5jbHMtMiwuY2xzLTMsLmNscy00e2ZpbGwtcnVsZTpldmVub2RkO30uY2xzLTJ7b3BhY2l0eTowLjU7bWl4LWJsZW5kLW1vZGU6bXVsdGlwbHk7ZmlsbDp1cmwoI1/DgsOBX8OPX8OMw4xfw4hfw4vDgsOMw5pfMTYpO30uY2xzLTN7ZmlsbDp1cmwoI1/DgsOBX8OPX8OMw4xfw4hfw4vDgsOMw5pfMTQpO30uY2xzLTR7ZmlsbDp1cmwoI1/DgsOBX8OPX8OMw4xfw4hfw4vDgsOMw5pfOSk7fTwvc3R5bGU+PGxpbmVhckdyYWRpZW50IGlkPSJfw4LDgV/Dj1/DjMOMX8OIX8OLw4LDjMOaXzE2IiB4MT0iNS4wNyIgeTE9IjE2Ljg2IiB4Mj0iMTAxLjEyIiB5Mj0iMTYuODYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNiMjZlOTkiLz48c3RvcCBvZmZzZXQ9IjAuMjQiIHN0b3AtY29sb3I9IiNiMDc2YTEiLz48c3RvcCBvZmZzZXQ9IjAuNjIiIHN0b3AtY29sb3I9IiNhYzhiYjciLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNhN2E2ZDMiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0iX8OCw4Ffw49fw4zDjF/DiF/Di8OCw4zDml8xNCIgeDE9IjU2LjYxIiB5MT0iMTguMzgiIHgyPSI1Ni42MSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2ZiYmM5YSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2ZiYzdiNCIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJfw4LDgV/Dj1/DjMOMX8OIX8OLw4LDjMOaXzkiIHgxPSIzNC4zMyIgeTE9IjE4LjI1IiB4Mj0iMzQuMzMiIHkyPSIzLjk5IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZjU5OGIyIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZjlhNjc5Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PGcgY2xhc3M9ImNscy0xIj48ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIj48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMzIuNDkgMTIuMzMgNS4wNyAxNS45MSA0MS40OSAyMi42IDEwMS4xMiAxNi41MiA3MC4wMSAxMS4xMiAzMi40OSAxMi4zMyIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTY4LjY2LDE4czE4LjIxLTIsMjcuNDItMTYuODRMNTMuNzMsMFM1Mi4yMiwxMC42MywxNy4xNSwxMi4zM0MxNy4xNSwxMi4zMyw1NC4yNiwyMC4yMiw2OC42NiwxOFoiLz48cGF0aCBjbGFzcz0iY2xzLTQiIGQ9Ik0wLDRzOC41LDYuNDIsMTcuMTUsOS4wOWMwLDAsMjUuNyw2LjU5LDUxLjUxLDQuODksMCwwLTI1LjQ4LS42OS0zMi0xMi43MloiLz48L2c+PC9nPjwvc3ZnPg==");
    background-repeat: no-repeat;
    background-position: center;
}

.room .analyzer {
    width: 362px;
    width: 500px;
    height: calc(681px * 1);
    /* border: 1px solid red; */
    position: absolute;
    display: block;
    left: calc(-50vw);
    right: 0;
    margin-left: auto;
    margin-right: auto;
    background-image: url("../images/analyzer.svg");
    background-position: center;
    background-repeat: no-repeat;
    bottom: calc(var(--room-height) * 0.18);
    height: calc(var(--room-height) * 0.50);
    width: calc(var(--room-height) * 0.50);
    z-index: 9;
}

.room .book {
    /* border: 1px solid red; */
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-image: url("../images/book.svg");
    background-position: center;
    background-repeat: no-repeat;
    top: 41%;
    left: 5.8%;
    opacity: 0.5;
    height: calc(var(--room-height) * 0.10);
    width: calc(var(--room-height) * 0.10);
    animation: float 5s ease-in-out infinite;
    animation-delay: -5s;
}

@keyframes float {
    0% {
        transform: translatey(0px);
    }
    50% {
        transform: translatey(-10px);
    }
    100% {
        transform: translatey(0px);
    }
}

.room .cord {
    /* border: 1px solid red; */
    position: absolute;
    display: block;
    left: calc(-5vw);
    right: 0;
    margin-left: auto;
    margin-right: auto;
    background-image: url("../images/cord.svg");
    background-position: center;
    background-repeat: no-repeat;
    bottom: calc(var(--room-height) * 0.17);
    height: calc(var(--room-height) * 0.15);
    width: 60vw;
    z-index: 1;
}

.room .log-dumper {
    /* border: 1px solid red; */
    position: absolute;
    display: block;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    background-image: url("../images/log-dumper.svg");
    background-position: center;
    background-repeat: no-repeat;
    bottom: calc(var(--room-height) * 0.00);
    height: calc(var(--room-height) * 0.55);
    width: calc(var(--room-height) * 0.55);
    left: calc(-75vw);
    z-index: 9;
}

.room .log-dumper {
    /* border: 1px solid red; */
    position: absolute;
    display: block;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    background-image: url("../images/log-dumper.svg");
    background-position: center;
    background-repeat: no-repeat;
    bottom: calc(var(--room-height) * 0.00);
    height: calc(var(--room-height) * 0.55);
    width: calc(var(--room-height) * 0.55);
    left: calc(-75vw);
    z-index: 9;
}

.room .qt43 {
    /* border: 1px solid red; */
    position: absolute;
    display: block;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    background-image: url("../images/qt3.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    bottom: calc(var(--room-height) * 0.00);
    height: calc(var(--room-height) * 0.40);
    width: calc(var(--room-height) * 0.40);
    left: calc(-8vw);
    z-index: 9;
    /* background-image: url("../images/qt3-animation.svg");
    animation-name: qt-rotate04;
    animation-duration: 4s;
    animation-timing-function: steps(8) ;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    background-position: -0px 0;
    width: 100px;
    height: 200px; */
}

:root {
    --qt-frame-east: 0px;
    --qt-frame-north-east: -100px;
    --qt-frame-north: -200px;
    --qt-frame-north-west: -300px;
    --qt-frame-west: -400px;
    --qt-frame-south-west: -500px;
    --qt-frame-south: -600px;
    --qt-frame-south-east: -700px;
}

@keyframes qt-rotate04 {
    0% {
        background-position: var(--qt-frame-south-east);
        transform: translateX(0px)
    }
    /* 5%     {                                                    transform: skew(5deg, 0deg); } */
    19.99% {
        background-position: var(--qt-frame-south-east);
        transform: translateX(400px);
    }
    20.00% {
        background-position: var(--qt-frame-east);
    }
    29.99% {
        background-position: var(--qt-frame-east);
    }
    30.00% {
        background-position: var(--qt-frame-north);
    }
    39.99% {
        background-position: var(--qt-frame-north);
    }
    40.00% {
        background-position: var(--qt-frame-north-west);
    }
    49.99% {
        background-position: var(--qt-frame-north-west);
    }
    50.00% {
        background-position: var(--qt-frame-north-west);
        transform: translateX(400px)
    }
    /* 55.00% {                                                    transform: skew(-5deg, 0deg);}  */
    69.99% {
        background-position: var(--qt-frame-north-west);
        transform: skew(0deg, 0deg) translateX(0px)
    }
    70.00% {
        background-position: var(--qt-frame-west);
    }
    79.99% {
        background-position: var(--qt-frame-west);
    }
    80.00% {
        background-position: var(--qt-frame-south-west);
    }
    89.99% {
        background-position: var(--qt-frame-south-west);
    }
    90.00% {
        background-position: var(--qt-frame-south);
    }
    99.99% {
        background-position: var(--qt-frame-south);
    }
}

.room .big-ol-screen {
    left: 25vw;
}

.room .sentry {
    left: 10vw;
}

.room .ai-construct {
    left: 50vw;
}

.room .analyzer {
    left: -25vw;
}

.room .cord {
    left: 15vw;
    width: 45vw;
}

.room .log-dumper {
    left: -50vw;
}

@media screen and (max-width: 800px) {
    .room .big-ol-screen {
        /* transform: scale(0.7); */
        left: -25vw;
        width: 75vw;
        margin: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .room .big-ol-screen p {
        width: 80%;
        margin-top: 18%;
    }
    .room .sentry {
        transform: scale(0.7);
        left: -20vw;
    }
    .room .ai-construct {
        /* transform: scale(0.85); */
        margin: 0;
        left: 80%;
        transform: translateX(-50%);
    }
    .room .analyzer {
        bottom: calc(var(--room-height) * 0.18);
        margin: 0;
        left: 10%;
        transform: translateX(-50%);
    }
    .room .cord {
        left: -10vw;
        width: 85vw;
        height: 8vh;
        bottom: 24vh;
    }
    .room .log-dumper {
        display: none;
    }
    .room .qt43 {
        left: -45vw;
    }
}

.type-selection {
    position: absolute;
    width: 500px;
    left: calc(50% - 250px);
    width: 600px;
    left: calc(50% - 300px);
    margin-left: auto;
    margin-right: auto;
    bottom: 50px;
    display: flex;
    align-items: center;
    background-color: #fff;
    height: 3rem;
    border-radius: 2rem;
    z-index: 11;
}

@media screen and (max-width: 800px) {
    .type-selection {
        width: 80vw;
        left: 5vw;
        font-size: 0.89rem;
    }
    .type-selection p a {
        display: inline-block;
    }
}

.type-selection p {
    margin-left: 2rem;
}

.type-selection p a {
    font-weight: 900;
    /* text-decoration: underline; */
}

.type-selection p a::before {
    content: "Generate me some ";
    font-weight: normal;
}

@media screen and (max-width: 800px) {
    .type-selection p {
        margin-left: 2px;
        margin-right: 2px;
    }
    .type-selection p a::before {
        content: "";
        font-weight: normal;
    }
    .type-selection label {
        display: none;
    }
}

.type-selection p a::after {
    content: " ";
    display: inline-block;
    width: 15px;
    height: 10px;
    margin: auto;
    margin-left: 5px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1Mi40NyAyNi4yNCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiMxNTUzNjk7fTwvc3R5bGU+PC9kZWZzPjxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSI1Mi40NyAwIDI2LjI0IDI2LjI0IDAgMCA1Mi40NyAwIi8+PC9zdmc+");
    background-repeat: no-repeat;
    background-position: center center;
}

.type-selection .button {
    margin: 0;
    align-content: flex-end;
    margin-left: auto;
    cursor: pointer;
}

.type-selection select {
    font-family: 'Lato', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: #fff;
    color: var(--emphasize-color);
    /* background: transparent; */
    border: none;
    /* border-bottom: 2px solid #fff; */
    /* padding: 0.5em 0; */
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* text-align: center; */
    /* width: 100%; */
    box-sizing: border-box;
    
    /* Restore default arrow */
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
}

/* Optional: Remove arrow for a cleaner look
.type-selection select::-ms-expand {
    display: none;
} */
.type-selection select:focus {
    /* border-bottom: 2px solid #009fb2; */
    color: #009fb2;
    background: transparent;
}


/* *************************************************************************************************** */

.paper-trail {
    /* height: 100vh; */
    position: relative;
    z-index: 1;
    /* cedbe0 */
    background: linear-gradient(to bottom, #fff 0%, #fff 45%, #cedbe0 60%);
    overflow: hidden;
}

.paper-trail h3 {
    font-size: 2.2rem;
    text-align: center;
    color: var(--text-color);
}

.paper-trail p {
    font-size: 1.25rem;
    text-align: center;
    padding-top: 30px;
    color: var(--text-color);
}

.paper-trail .container {
    max-width: 1110px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 2rem;
    padding: 60px;
}

@media screen and (max-width: 800px) {
    .paper-trail .container {
        grid-template-columns: none;
        /* grid-template-rows: 100px, 300px; */
        grid-gap: 0;
        align-items: stretch;
        padding: 20px;
    }
    .paper-trail .container div:nth-child(1) {
        order: 2;
    }
    .paper-trail .container div:nth-child(2) {
        order: 1;
        margin-bottom: 2rem;
    }
}

.paper-trail .container>div:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.paper-trail .sentry {
    /* border: 1px solid red; */
    /* 200 x 237 */
    position: relative;;
    height: calc(250px * 2);
    width: calc(200px * 1.5);
    background-image: url("../images/sentry-shadow.svg");
    background-position: center top;
    background-repeat: no-repeat;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.paper-trail .sentry::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 280px;
    /* background-color: deeppink; */

    background-image: url("../images/sentry-shadow.svg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 9;

}

.paper-trail .sentry::after {
    content: "";
    display: block;
    position: absolute;

    background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHZpZXdCb3g9IjAgMCAyOS4wMSAzLjI1Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzYxYzE5YTt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTkuMTYuOTNjLS4xOC43NS0uNDQsMS40NCwwLDIuMTMsMiwuMTQsNS4xNy4xMyw3LjU0LjEyQTMuODcsMy44NywwLDAsMCwyOSwuOTNDMjUuMzguODYsMjIuNDkuODYsMTkuMTYuOTNaTTEuMzksMy4yNUE0LjQzLDQuNDMsMCwwLDEsMCwwUTYuMywwLDEyLjQ5LjI1YTQsNCwwLDAsMS0xLjcxLDIuODJDNy41NywzLjE4LDQuNDMsMy4yNCwxLjM5LDMuMjVaIi8+PC9zdmc+");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    mix-blend-mode: overlay;

    width: 60px;
    height: 30px;
    left: 127px;
    top: 225px;
    z-index: 10;

    animation: blink 10s linear infinite;
}

@keyframes blink {
    0% {
        height: 30px;
    }
    48% {
        height: 30px;
        margin-top: 0px;
    }
    49% {
        height: 3px;
        margin-top: 13px;
    }
    50% {
        height: 3px;
        margin-top: 13px;
    }
    51% {
        height: 30px;
        margin-top: 0px;
    }

    52% {
        height: 3px;
        margin-top: 13px;
    }
    53% {
        height: 3px;
        margin-top: 13px;
    }
    54% {
        height: 30px;
        margin-top: 0px;
    }


    100% {
        height: 30px;
    }
    
}

.paper-trail .sheet {
    /* border: 1px solid red; */
    position: absolute;
    animation: slide-right150 1.5s linear forwards, slide-down 1.5s ease-in-out forwards;
}

.paper-trail .sheet:nth-child(1) {
    animation: slide-right101 1.5s linear forwards, slide-down 1.5s ease-in-out forwards;
}
.paper-trail .sheet:nth-child(2) {
    animation: slide-right102 1.5s linear forwards, slide-down 1.5s ease-in-out forwards;
}
.paper-trail .sheet:nth-child(3) {
    animation: slide-right103 1.5s linear forwards, slide-down 1.5s ease-in-out forwards;
}
.paper-trail .sheet:nth-child(4) {
    animation: slide-right104 1.5s linear forwards, slide-down 1.5s ease-in-out forwards;
}

@keyframes slide-down {
    0% {
        /* top: 0px; */
        margin-top: 0;
    }

    100% {
        /* top: 100px; */
        /* transform: translateY(150px) */
        margin-top: 160px;
    }
}

@keyframes slide-right150 {
    0% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(28px);
    }
    100% {
        transform: translateX(100px);
    }
}

@keyframes slide-right200 {
    0% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(28px);
    }
    100% {
        transform: translateX(120px);
    }
}

@keyframes slide-right300 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(250px) translateY(0px); } }

@keyframes slide-right1 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(178px) translateY(73px); } }
@keyframes slide-right2 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(174px) translateY(10px); } }
@keyframes slide-right3 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(187px) translateY(40px); } }
@keyframes slide-right4 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(194px) translateY(33px); } }
@keyframes slide-right5 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(193px) translateY(26px); } }
@keyframes slide-right6 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(136px) translateY(28px); } }
@keyframes slide-right7 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(102px) translateY(41px); } }
@keyframes slide-right8 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(117px) translateY(40px); } }
@keyframes slide-right9 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(106px) translateY(63px); } }
@keyframes slide-right10 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(139px) translateY(45px); } }
@keyframes slide-right11 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(150px) translateY(50px); } }
@keyframes slide-right12 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(144px) translateY(70px); } }
@keyframes slide-right13 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(171px) translateY(5px); } }
@keyframes slide-right14 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(120px) translateY(58px); } }
@keyframes slide-right15 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(154px) translateY(69px); } }
@keyframes slide-right16 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(176px) translateY(64px); } }
@keyframes slide-right17 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(185px) translateY(19px); } }
@keyframes slide-right18 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(173px) translateY(18px); } }
@keyframes slide-right19 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(170px) translateY(13px); } }
@keyframes slide-right20 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(182px) translateY(24px); } }
@keyframes slide-right21 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(199px) translateY(65px); } }
@keyframes slide-right22 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(188px) translateY(49px); } }
@keyframes slide-right23 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(128px) translateY(30px); } }
@keyframes slide-right24 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(183px) translateY(52px); } }
@keyframes slide-right25 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(196px) translateY(72px); } }
@keyframes slide-right26 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(175px) translateY(48px); } }
@keyframes slide-right27 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(149px) translateY(61px); } }
@keyframes slide-right28 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(156px) translateY(71px); } }
@keyframes slide-right29 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(131px) translateY(73px); } }
@keyframes slide-right30 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(188px) translateY(41px); } }
@keyframes slide-right31 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(178px) translateY(61px); } }
@keyframes slide-right32 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(181px) translateY(15px); } }
@keyframes slide-right33 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(184px) translateY(26px); } }
@keyframes slide-right34 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(164px) translateY(67px); } }
@keyframes slide-right35 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(190px) translateY(51px); } }
@keyframes slide-right36 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(133px) translateY(73px); } }
@keyframes slide-right37 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(112px) translateY(37px); } }
@keyframes slide-right38 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(199px) translateY(36px); } }
@keyframes slide-right39 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(108px) translateY(33px); } }
@keyframes slide-right40 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(131px) translateY(70px); } }
@keyframes slide-right41 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(138px) translateY(23px); } }
@keyframes slide-right42 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(111px) translateY(58px); } }
@keyframes slide-right43 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(140px) translateY(65px); } }
@keyframes slide-right44 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(111px) translateY(46px); } }
@keyframes slide-right45 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(163px) translateY(1px); } }
@keyframes slide-right46 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(164px) translateY(53px); } }
@keyframes slide-right47 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(170px) translateY(58px); } }
@keyframes slide-right48 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(170px) translateY(1px); } }
@keyframes slide-right49 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(166px) translateY(65px); } }
@keyframes slide-right50 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(194px) translateY(43px); } }

@keyframes slide-right101 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(100px) translateY(0px); } }
@keyframes slide-right102 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(200px) translateY(0px); } }
@keyframes slide-right103 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(100px) translateY(75px); } }
@keyframes slide-right104 { 0% { transform: translateX(0px) translateY(0px); } 50% { transform: translateX(28px) translateY(0px); } 100% { transform: translateX(200px) translateY(75px); } }

.paper-trail .sheet span {
    /* border: 1px solid red; */
    display: block;
    width: var(--sheet-width);
    height: var(--sheet-height);
    background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSIwIDAgMTY5LjM4IDE3MS42NCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOmdyYXk7b3BhY2l0eTowLjM7fS5jbHMtMntmaWxsLXJ1bGU6ZXZlbm9kZDtmaWxsOnVybCgjbGluZWFyLWdyYWRpZW50KTt9PC9zdHlsZT48bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudCIgeDE9Ijg0LjY5IiB4Mj0iODQuNjkiIHkyPSIxNjkuMjYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAuMiIgc3RvcC1jb2xvcj0iI2ZiYmM5YSIvPjxzdG9wIG9mZnNldD0iMC41IiBzdG9wLWNvbG9yPSIjYzk5Yzg4Ii8+PHN0b3Agb2Zmc2V0PSIwLjgiIHN0b3AtY29sb3I9IiNmYmM3YjQiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCBjbGFzcz0iY2xzLTEiIHdpZHRoPSIxNjIuNjIiIGhlaWdodD0iMTcxLjY0Ii8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMTY5LjM4LDE2OS4yNkg2Ljc4Yy05LTcxLjI3LTktOTgsMC0xNjkuMjZoMTYyLjZDMTYwLjM1LDcxLjI3LDE2MC4zNSwxMDYuOSwxNjkuMzgsMTY5LjI2WiIvPjwvc3ZnPg==");
    background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSIwIDAgMTY5LjM4IDE3MS42NCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOmdyYXk7b3BhY2l0eTowLjM7fS5jbHMtMSwuY2xzLTJ7ZmlsbC1ydWxlOmV2ZW5vZGQ7fS5jbHMtMntmaWxsOnVybCgjbGluZWFyLWdyYWRpZW50KTt9PC9zdHlsZT48bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudCIgeDE9Ijg0LjgyIiB4Mj0iODQuODIiIHkyPSIxNjkuMjYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAuMiIgc3RvcC1jb2xvcj0iI2ZiYmM5YSIvPjxzdG9wIG9mZnNldD0iMC41IiBzdG9wLWNvbG9yPSIjYzk5Yzg4Ii8+PHN0b3Agb2Zmc2V0PSIwLjgiIHN0b3AtY29sb3I9IiNmYmM3YjQiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cG9seWdvbiBjbGFzcz0iY2xzLTEiIHBvaW50cz0iMTYyLjYyIDE3MS42NCAwIDE3MS42NCAwIDAgMTYyLjYyIDAgMTUyLjQ1IDQ0Ljc3IDE1MC45NCAxMTMuOTEgMTYyLjYyIDE3MS42NCIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTE2OS4zOCwxNjkuMjZIMTYuNzhjLTIwLjctNzAtMjMuMjktOTgsMC0xNjkuMjZoMTUyLjZDMTQ5Ljg2LDcxLjQ3LDE1MC4wOCwxMDYuOCwxNjkuMzgsMTY5LjI2WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCkiLz48L3N2Zz4=");

    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform: perspective(600px) rotateY(00deg) rotateX(60deg) rotateZ(-110deg);
    transform: perspective(600px) rotateY(00deg) rotateX(20deg);
    transform: perspective(600px) rotateY(50deg) rotateX(30deg) rotateZ(-3deg);
    transform-style: preserve-3d;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 200px;
    left: 100px;
    animation: rotate40 1s ease-in-out forwards;
    animation-delay: 0.5s;
    overflow: hidden;
    padding: 5px 5px 5px 5px;
    font-size: 1rem;
}

/* .paper-trail .sheet span::before {
    content: "";
    display: block;
    display: table-cell;
    background-color: rgba(80, 80, 80, 0.3);
    transform: translateZ(-10px);
    transform: translateZ(-1px);
    width: calc(var(--sheet-width) - 5px);
    height: var(--sheet-height);
    position: absolute;
    display: block;
    z-index: -1;
} */

@keyframes rotate40 {
    /* 50% {
        transform: perspective(600px) rotateY(20deg) rotateX(60deg) rotateZ(-3deg);
    } */
    100% {
        /* transform: perspective(600px) rotateY(30deg) rotateX(70deg) rotateZ(-40deg); */
        transform: perspective(600px) rotateY(0deg) rotateX(60deg) rotateZ(-40deg);
        height: 80px;
    }
}

@keyframes rotate60 {
    100% {
        transform: perspective(600px) rotateY(00deg) rotateX(60deg) rotateZ(-60deg);
    }
}

@keyframes rotate80 {
    100% {
        transform: perspective(600px) rotateY(00deg) rotateX(60deg) rotateZ(-80deg);
    }
}

@keyframes rotate100 {
    100% {
        transform: perspective(600px) rotateY(00deg) rotateX(60deg) rotateZ(-100deg);
    }
}

.paper-trail .sheet:nth-child(1) span {
    /* animation: rotate40 1.5s ease-in-out forwards; */
}

.paper-trail .sheet:nth-child(2) span {
    /* animation: rotate100 1.5s ease-in-out forwards; */
    /* animation-delay: 2s; */
}

@keyframes slide-down-shadow {
    0% {
        transform: translateZ(-300px);
    }
    100% {
        transform: translateZ(-3px);
    }
}


/* *************************************************************************************************** */

.footer .share {
    background-color: #52918e;
}

.footer {
    background-color: #367578;
}