/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

#ui-elements {
    position: absolute;
    justify-content: center;
    align-items: center;
    z-index: 100;
    height: 100dvh;
    width: 100dvw;
    display: flex;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

@media screen and (orientation: portrait) {
    .rounded-circle-button {
        position: absolute;
        bottom: 10px;
        left: calc(50% - 25px);
        width: 50px;
        height: 50px;
        /* transform: translateY(-50%) rotate(90deg); */
        z-index: 1051;
        padding: 0;
    }
}
    @media screen and (orientation: landscape) {
        .rounded-circle-button {
            position: absolute;
            right: 20px;
            width: 50px;
            height: 50px;
            z-index: 1051;
            padding: 0;
        }
    }
    /* Sticky footer styles
-------------------------------------------------- */
    html {
        position: relative;
        min-height: 100%;
    }

    h1 {
        color: white;
    }




.page-container {
    min-width: 320px;
    width: 100dvw;
    height:100dvh;
    overflow: hidden;
}

body {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #FFF;
}

    .btn-danger {
        color: #fff;
        background-color: #595353;
        border-color: #9efffc;
    }

    .footers {
        position: absolute;
        bottom: 0;
        width: 100%;
        white-space: nowrap;
        background-color: #666666;
        height: 5%;
        line-height: 40px;
    }

    video, #img {
        width: 100%;
        z-index: 10;
    }

    .video-reverse {
        transform: scaleX(-1);
    }
    /*
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #aaaaaa;
}*/

    .nopadding {
        padding-right: 0px;
        padding-left: 0px;
    }

    .containers {
        /*  height: 80%;
    width: 100%;*/
        position: absolute;
    }


  
        .slice {
            right: 0;
            left: 25%;
            position: absolute;
            width: 50%;
            top:48vh;
            z-index:150;
            clip-path: ellipse(0.2% 50px at 20% 3%);
            border: 1rem solid transparent;
            visibility: hidden;
        }

@media only screen and (max-width: 1050px) {
    .slice {
        right: 0px;
        max-width: 1050px;
        position: absolute;
        width: 100dvw;
        min-width: 200px;
        clip-path: ellipse(0.8vw 50px at 8.4vw 0%);
        border: 1rem solid transparent;
        visibility: hidden;
        left: 0px;
        top: 48.3dvh;
        z-index:50;
    }
}






    #slice1 {
        transform: rotate(0deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice2 {
        transform: rotate(9deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice3 {
        transform: rotate(18deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice4 {
        transform: rotate(27deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice5 {
        transform: rotate(36deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice6 {
        transform: rotate(45deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice7 {
        transform: rotate(54deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice8 {
        transform: rotate(63deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice9 {
        transform: rotate(72deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice10 {
        transform: rotate(81deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice11 {
        transform: rotate(90deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice12 {
        transform: rotate(99deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice13 {
        transform: rotate(108deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice14 {
        transform: rotate(117deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice15 {
        transform: rotate(126deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice16 {
        transform: rotate(135deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice17 {
        transform: rotate(144deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice18 {
        transform: rotate(153deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice19 {
        transform: rotate(162deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice20 {
        transform: rotate(171deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice21 {
        transform: rotate(180deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice22 {
        transform: rotate(189deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice23 {
        transform: rotate(198deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice24 {
        transform: rotate(207deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice25 {
        transform: rotate(216deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice26 {
        transform: rotate(225deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice27 {
        transform: rotate(234deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice28 {
        transform: rotate(243deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice29 {
        transform: rotate(252deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice30 {
        transform: rotate(261deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice31 {
        transform: rotate(270deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice32 {
        transform: rotate(279deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice33 {
        transform: rotate(288deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice34 {
        transform: rotate(297deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice35 {
        transform: rotate(306deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice36 {
        transform: rotate(315deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice37 {
        transform: rotate(324deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice38 {
        transform: rotate(333deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice39 {
        transform: rotate(342deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

    #slice40 {
        transform: rotate(351deg);
        border-top-color: #777777;
        border-right-color: #2E313F;
    }

.Approved {
    border-top-color: #28A1DA !important;
    border-right-color: #28A1DA !important;
}


    @keyframes blink {
        0% {
            opacity: 0.75;
        }

        50% {
            opacity: 0;
        }

        100% {
            opacity: 0.75;
        }
    }

    @keyframes scale-slice {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.5);
        }

        100% {
            transform: scale(1);
        }
    }

    .slice-scaling {
        animation: scale-slice 0.2s 1;
    }

    @keyframes blink-slice {
        0% {
            opacity: 1;
        }

        50% {
            opacity: 0.7;
            box-shadow: 20px 20px 40px rgb(0, 0, 0,1);
        }

        100% {
            opacity: 1;
        }
    }


    .blink-slice {
        animation: blink-slice 1s 1;
    }


    @keyframes blink-face {
        0% {
            opacity: 0.75;
        }

        50% {
            opacity: 0;
        }

        100% {
            opacity: 0.75;
        }
    }

    @keyframes spinner-vertical {
        from {
            transform: rotateX(0deg) rotate(90deg) translate(-60%);
        }

        to {
            transform: rotateY(-360deg) rotate(90deg) translate(-60%);
        }
    }

    @keyframes spinner-horizontal {
        from {
            transform: translate(104%, -45%) rotateY(0deg)
        }

        to {
            transform: translate(104%, -45%) rotateY(-360deg)
        }
    }

    @keyframes facehole {
        0% {
            background: radial-gradient(circle at 50% 50%, transparent 120vw, white 41vw);
        }

        1% {
            background: radial-gradient(circle at 50% 50%, transparent 119vw, white 41vw);
        }

        2% {
            background: radial-gradient(circle at 50% 50%, transparent 118vw, white 41vw);
        }

        3% {
            background: radial-gradient(circle at 50% 50%, transparent 117vw, white 41vw);
        }

        4% {
            background: radial-gradient(circle at 50% 50%, transparent 116vw, white 41vw);
        }

        5% {
            background: radial-gradient(circle at 50% 50%, transparent 115vw, white 41vw);
        }

        6% {
            background: radial-gradient(circle at 50% 50%, transparent 114vw, white 41vw);
        }

        7% {
            background: radial-gradient(circle at 50% 50%, transparent 113vw, white 41vw);
        }

        8% {
            background: radial-gradient(circle at 50% 50%, transparent 112vw, white 41vw);
        }

        9% {
            background: radial-gradient(circle at 50% 50%, transparent 111vw, white 41vw);
        }

        10% {
            background: radial-gradient(circle at 50% 50%, transparent 110vw, white 41vw);
        }

        11% {
            background: radial-gradient(circle at 50% 50%, transparent 109vw, white 41vw);
        }

        12% {
            background: radial-gradient(circle at 50% 50%, transparent 108vw, white 41vw);
        }

        13% {
            background: radial-gradient(circle at 50% 50%, transparent 107vw, white 41vw);
        }

        14% {
            background: radial-gradient(circle at 50% 50%, transparent 106vw, white 41vw);
        }

        15% {
            background: radial-gradient(circle at 50% 50%, transparent 105vw, white 41vw);
        }

        16% {
            background: radial-gradient(circle at 50% 50%, transparent 104vw, white 41vw);
        }

        17% {
            background: radial-gradient(circle at 50% 50%, transparent 103vw, white 41vw);
        }

        18% {
            background: radial-gradient(circle at 50% 50%, transparent 102vw, white 41vw);
        }

        19% {
            background: radial-gradient(circle at 50% 50%, transparent 101vw, white 41vw);
        }

        20% {
            background: radial-gradient(circle at 50% 50%, transparent 100vw, white 41vw);
        }

        21% {
            background: radial-gradient(circle at 50% 50%, transparent 99vw, white 41vw);
        }

        22% {
            background: radial-gradient(circle at 50% 50%, transparent 98vw, white 41vw);
        }

        23% {
            background: radial-gradient(circle at 50% 50%, transparent 97vw, white 41vw);
        }

        24% {
            background: radial-gradient(circle at 50% 50%, transparent 96vw, white 41vw);
        }

        25% {
            background: radial-gradient(circle at 50% 50%, transparent 95vw, white 41vw);
        }

        26% {
            background: radial-gradient(circle at 50% 50%, transparent 94vw, white 41vw);
        }

        27% {
            background: radial-gradient(circle at 50% 50%, transparent 93vw, white 41vw);
        }

        28% {
            background: radial-gradient(circle at 50% 50%, transparent 92vw, white 41vw);
        }

        29% {
            background: radial-gradient(circle at 50% 50%, transparent 91vw, white 41vw);
        }

        30% {
            background: radial-gradient(circle at 50% 50%, transparent 90vw, white 41vw);
        }

        31% {
            background: radial-gradient(circle at 50% 50%, transparent 89vw, white 41vw);
        }

        32% {
            background: radial-gradient(circle at 50% 50%, transparent 88vw, white 41vw);
        }

        33% {
            background: radial-gradient(circle at 50% 50%, transparent 87vw, white 41vw);
        }

        34% {
            background: radial-gradient(circle at 50% 50%, transparent 86vw, white 41vw);
        }

        35% {
            background: radial-gradient(circle at 50% 50%, transparent 85vw, white 41vw);
        }

        36% {
            background: radial-gradient(circle at 50% 50%, transparent 84vw, white 41vw);
        }

        37% {
            background: radial-gradient(circle at 50% 50%, transparent 83vw, white 41vw);
        }

        38% {
            background: radial-gradient(circle at 50% 50%, transparent 82vw, white 41vw);
        }

        39% {
            background: radial-gradient(circle at 50% 50%, transparent 81vw, white 41vw);
        }

        40% {
            background: radial-gradient(circle at 50% 50%, transparent 80vw, white 41vw);
        }

        41% {
            background: radial-gradient(circle at 50% 50%, transparent 79vw, white 41vw);
        }

        42% {
            background: radial-gradient(circle at 50% 50%, transparent 78vw, white 41vw);
        }

        43% {
            background: radial-gradient(circle at 50% 50%, transparent 77vw, white 41vw);
        }

        44% {
            background: radial-gradient(circle at 50% 50%, transparent 76vw, white 41vw);
        }

        45% {
            background: radial-gradient(circle at 50% 50%, transparent 75vw, white 41vw);
        }

        46% {
            background: radial-gradient(circle at 50% 50%, transparent 74vw, white 41vw);
        }

        47% {
            background: radial-gradient(circle at 50% 50%, transparent 73vw, white 41vw);
        }

        48% {
            background: radial-gradient(circle at 50% 50%, transparent 72vw, white 41vw);
        }

        49% {
            background: radial-gradient(circle at 50% 50%, transparent 71vw, white 41vw);
        }

        50% {
            background: radial-gradient(circle at 50% 50%, transparent 70vw, white 41vw);
        }

        51% {
            background: radial-gradient(circle at 50% 50%, transparent 69vw, white 41vw);
        }

        52% {
            background: radial-gradient(circle at 50% 50%, transparent 68vw, white 41vw);
        }

        53% {
            background: radial-gradient(circle at 50% 50%, transparent 67vw, white 41vw);
        }

        54% {
            background: radial-gradient(circle at 50% 50%, transparent 66vw, white 41vw);
        }

        55% {
            background: radial-gradient(circle at 50% 50%, transparent 65vw, white 41vw);
        }

        56% {
            background: radial-gradient(circle at 50% 50%, transparent 64vw, white 41vw);
        }

        57% {
            background: radial-gradient(circle at 50% 50%, transparent 63vw, white 41vw);
        }

        58% {
            background: radial-gradient(circle at 50% 50%, transparent 62vw, white 41vw);
        }

        59% {
            background: radial-gradient(circle at 50% 50%, transparent 61vw, white 41vw);
        }

        60% {
            background: radial-gradient(circle at 50% 50%, transparent 60vw, white 41vw);
        }

        61% {
            background: radial-gradient(circle at 50% 50%, transparent 59vw, white 41vw);
        }

        62% {
            background: radial-gradient(circle at 50% 50%, transparent 58vw, white 41vw);
        }

        63% {
            background: radial-gradient(circle at 50% 50%, transparent 57vw, white 41vw);
        }

        64% {
            background: radial-gradient(circle at 50% 50%, transparent 56vw, white 41vw);
        }

        65% {
            background: radial-gradient(circle at 50% 50%, transparent 55vw, white 41vw);
        }

        66% {
            background: radial-gradient(circle at 50% 50%, transparent 54vw, white 41vw);
        }

        67% {
            background: radial-gradient(circle at 50% 50%, transparent 53vw, white 41vw);
        }

        68% {
            background: radial-gradient(circle at 50% 50%, transparent 52vw, white 41vw);
        }

        69% {
            background: radial-gradient(circle at 50% 50%, transparent 51vw, white 41vw);
        }

        70% {
            background: radial-gradient(circle at 50% 50%, transparent 50vw, white 41vw);
        }

        71% {
            background: radial-gradient(circle at 50% 50%, transparent 49vw, white 41vw);
        }

        72% {
            background: radial-gradient(circle at 50% 50%, transparent 48vw, white 41vw);
        }

        73% {
            background: radial-gradient(circle at 50% 50%, transparent 47vw, white 41vw);
        }

        74% {
            background: radial-gradient(circle at 50% 50%, transparent 46vw, white 41vw);
        }

        75% {
            background: radial-gradient(circle at 50% 50%, transparent 45vw, white 41vw);
        }

        76% {
            background: radial-gradient(circle at 50% 50%, transparent 44vw, white 41vw);
        }

        77% {
            background: radial-gradient(circle at 50% 50%, transparent 43vw, white 41vw);
        }

        78% {
            background: radial-gradient(circle at 50% 50%, transparent 42vw, white 41vw);
        }

        79% {
            background: radial-gradient(circle at 50% 50%, transparent 41vw, white 41vw);
        }
        80% {
            background: radial-gradient(circle at 50% 50%, transparent 40vw, white 41vw);
        }
        81% {
            background: radial-gradient(circle at 50% 50%, transparent 39vw, white 41vw);
        }
        100% {
            background: radial-gradient(circle at 50% 50%, transparent 39vw, white 41vw);
        }
    }    
    
    
    @keyframes facehole-pc {
        0% {
            background: radial-gradient(circle at 50% 50%, transparent 120vw, white 14.5vw);
        }

        1% {
            background: radial-gradient(circle at 50% 50%, transparent 119vw, white 14.5vw);
        }

        2% {
            background: radial-gradient(circle at 50% 50%, transparent 118vw, white 14.5vw);
        }

        3% {
            background: radial-gradient(circle at 50% 50%, transparent 117vw, white 14.5vw);
        }

        4% {
            background: radial-gradient(circle at 50% 50%, transparent 116vw, white 14.5vw);
        }

        5% {
            background: radial-gradient(circle at 50% 50%, transparent 115vw, white 14.5vw);
        }

        6% {
            background: radial-gradient(circle at 50% 50%, transparent 114vw, white 14.5vw);
        }

        7% {
            background: radial-gradient(circle at 50% 50%, transparent 113vw, white 14.5vw);
        }

        8% {
            background: radial-gradient(circle at 50% 50%, transparent 112vw, white 14.5vw);
        }

        9% {
            background: radial-gradient(circle at 50% 50%, transparent 111vw, white 14.5vw);
        }

        10% {
            background: radial-gradient(circle at 50% 50%, transparent 110vw, white 14.5vw);
        }

        11% {
            background: radial-gradient(circle at 50% 50%, transparent 109vw, white 14.5vw);
        }

        12% {
            background: radial-gradient(circle at 50% 50%, transparent 108vw, white 14.5vw);
        }

        13% {
            background: radial-gradient(circle at 50% 50%, transparent 107vw, white 14.5vw);
        }

        14% {
            background: radial-gradient(circle at 50% 50%, transparent 106vw, white 14.5vw);
        }

        15% {
            background: radial-gradient(circle at 50% 50%, transparent 105vw, white 14.5vw);
        }

        16% {
            background: radial-gradient(circle at 50% 50%, transparent 104vw, white 14.5vw);
        }

        17% {
            background: radial-gradient(circle at 50% 50%, transparent 103vw, white 14.5vw);
        }

        18% {
            background: radial-gradient(circle at 50% 50%, transparent 102vw, white 14.5vw);
        }

        19% {
            background: radial-gradient(circle at 50% 50%, transparent 101vw, white 14.5vw);
        }

        20% {
            background: radial-gradient(circle at 50% 50%, transparent 100vw, white 14.5vw);
        }

        21% {
            background: radial-gradient(circle at 50% 50%, transparent 99vw, white 14.5vw);
        }

        22% {
            background: radial-gradient(circle at 50% 50%, transparent 98vw, white 14.5vw);
        }

        23% {
            background: radial-gradient(circle at 50% 50%, transparent 97vw, white 14.5vw);
        }

        24% {
            background: radial-gradient(circle at 50% 50%, transparent 96vw, white 14.5vw);
        }

        25% {
            background: radial-gradient(circle at 50% 50%, transparent 95vw, white 14.5vw);
        }

        26% {
            background: radial-gradient(circle at 50% 50%, transparent 94vw, white 14.5vw);
        }

        27% {
            background: radial-gradient(circle at 50% 50%, transparent 93vw, white 14.5vw);
        }

        28% {
            background: radial-gradient(circle at 50% 50%, transparent 92vw, white 14.5vw);
        }

        29% {
            background: radial-gradient(circle at 50% 50%, transparent 91vw, white 14.5vw);
        }

        30% {
            background: radial-gradient(circle at 50% 50%, transparent 90vw, white 14.5vw);
        }

        31% {
            background: radial-gradient(circle at 50% 50%, transparent 89vw, white 14.5vw);
        }

        32% {
            background: radial-gradient(circle at 50% 50%, transparent 88vw, white 14.5vw);
        }

        33% {
            background: radial-gradient(circle at 50% 50%, transparent 87vw, white 14.5vw);
        }

        34% {
            background: radial-gradient(circle at 50% 50%, transparent 86vw, white 14.5vw);
        }

        35% {
            background: radial-gradient(circle at 50% 50%, transparent 85vw, white 14.5vw);
        }

        36% {
            background: radial-gradient(circle at 50% 50%, transparent 84vw, white 14.5vw);
        }

        37% {
            background: radial-gradient(circle at 50% 50%, transparent 83vw, white 14.5vw);
        }

        38% {
            background: radial-gradient(circle at 50% 50%, transparent 82vw, white 14.5vw);
        }

        39% {
            background: radial-gradient(circle at 50% 50%, transparent 81vw, white 14.5vw);
        }

        40% {
            background: radial-gradient(circle at 50% 50%, transparent 80vw, white 14.5vw);
        }

        41% {
            background: radial-gradient(circle at 50% 50%, transparent 79vw, white 14.5vw);
        }

        42% {
            background: radial-gradient(circle at 50% 50%, transparent 78vw, white 14.5vw);
        }

        43% {
            background: radial-gradient(circle at 50% 50%, transparent 77vw, white 14.5vw);
        }

        44% {
            background: radial-gradient(circle at 50% 50%, transparent 76vw, white 14.5vw);
        }

        45% {
            background: radial-gradient(circle at 50% 50%, transparent 75vw, white 14.5vw);
        }

        46% {
            background: radial-gradient(circle at 50% 50%, transparent 74vw, white 14.5vw);
        }

        47% {
            background: radial-gradient(circle at 50% 50%, transparent 73vw, white 14.5vw);
        }

        48% {
            background: radial-gradient(circle at 50% 50%, transparent 72vw, white 14.5vw);
        }

        49% {
            background: radial-gradient(circle at 50% 50%, transparent 71vw, white 14.5vw);
        }

        50% {
            background: radial-gradient(circle at 50% 50%, transparent 70vw, white 14.5vw);
        }

        51% {
            background: radial-gradient(circle at 50% 50%, transparent 69vw, white 14.5vw);
        }

        52% {
            background: radial-gradient(circle at 50% 50%, transparent 68vw, white 14.5vw);
        }

        53% {
            background: radial-gradient(circle at 50% 50%, transparent 67vw, white 14.5vw);
        }

        54% {
            background: radial-gradient(circle at 50% 50%, transparent 66vw, white 14.5vw);
        }

        55% {
            background: radial-gradient(circle at 50% 50%, transparent 65vw, white 14.5vw);
        }

        56% {
            background: radial-gradient(circle at 50% 50%, transparent 64vw, white 14.5vw);
        }

        57% {
            background: radial-gradient(circle at 50% 50%, transparent 63vw, white 14.5vw);
        }

        58% {
            background: radial-gradient(circle at 50% 50%, transparent 62vw, white 14.5vw);
        }

        59% {
            background: radial-gradient(circle at 50% 50%, transparent 61vw, white 14.5vw);
        }

        60% {
            background: radial-gradient(circle at 50% 50%, transparent 60vw, white 14.5vw);
        }

        61% {
            background: radial-gradient(circle at 50% 50%, transparent 59vw, white 14.5vw);
        }

        62% {
            background: radial-gradient(circle at 50% 50%, transparent 58vw, white 14.5vw);
        }

        63% {
            background: radial-gradient(circle at 50% 50%, transparent 57vw, white 14.5vw);
        }

        64% {
            background: radial-gradient(circle at 50% 50%, transparent 56vw, white 14.5vw);
        }

        65% {
            background: radial-gradient(circle at 50% 50%, transparent 55vw, white 14.5vw);
        }

        66% {
            background: radial-gradient(circle at 50% 50%, transparent 54vw, white 14.5vw);
        }

        67% {
            background: radial-gradient(circle at 50% 50%, transparent 53vw, white 14.5vw);
        }

        68% {
            background: radial-gradient(circle at 50% 50%, transparent 52vw, white 14.5vw);
        }

        69% {
            background: radial-gradient(circle at 50% 50%, transparent 51vw, white 14.5vw);
        }

        70% {
            background: radial-gradient(circle at 50% 50%, transparent 50vw, white 14.5vw);
        }

        71% {
            background: radial-gradient(circle at 50% 50%, transparent 49vw, white 14.5vw);
        }

        72% {
            background: radial-gradient(circle at 50% 50%, transparent 48vw, white 14.5vw);
        }

        73% {
            background: radial-gradient(circle at 50% 50%, transparent 47vw, white 14.5vw);
        }

        74% {
            background: radial-gradient(circle at 50% 50%, transparent 46vw, white 14.5vw);
        }

        75% {
            background: radial-gradient(circle at 50% 50%, transparent 45vw, white 14.5vw);
        }

        76% {
            background: radial-gradient(circle at 50% 50%, transparent 44vw, white 14.5vw);
        }

        77% {
            background: radial-gradient(circle at 50% 50%, transparent 43vw, white 14.5vw);
        }

        78% {
            background: radial-gradient(circle at 50% 50%, transparent 42vw, white 14.5vw);
        }

        79% {
            background: radial-gradient(circle at 50% 50%, transparent 41vw, white 14.5vw);
        }
        80% {
            background: radial-gradient(circle at 50% 50%, transparent 40vw, white 14.5vw);
        }
        81% {
            background: radial-gradient(circle at 50% 50%, transparent 39vw, white 14.5vw);
        }
        82% {
            background: radial-gradient(circle at 50% 50%, transparent 38vw, white 14.5vw);
        }
        83% {
            background: radial-gradient(circle at 50% 50%, transparent 37vw, white 14.5vw);
        }
        84% {
            background: radial-gradient(circle at 50% 50%, transparent 36vw, white 14.5vw);
        }
        85% {
            background: radial-gradient(circle at 50% 50%, transparent 35vw, white 14.5vw);
        }
        86% {
            background: radial-gradient(circle at 50% 50%, transparent 34vw, white 14.5vw);
        }
        87% {
            background: radial-gradient(circle at 50% 50%, transparent 33vw, white 14.5vw);
        }
        88% {
            background: radial-gradient(circle at 50% 50%, transparent 32vw, white 14.5vw);
        }
        89% {
            background: radial-gradient(circle at 50% 50%, transparent 31vw, white 14.5vw);
        }
        90% {
            background: radial-gradient(circle at 50% 50%, transparent 30vw, white 14.5vw);
        }
        91% {
            background: radial-gradient(circle at 50% 50%, transparent 28vw, white 14.5vw);
        }
        92% {
            background: radial-gradient(circle at 50% 50%, transparent 27vw, white 14.5vw);
        }
        93% {
            background: radial-gradient(circle at 50% 50%, transparent 26vw, white 14.5vw);
        }
        94% {
            background: radial-gradient(circle at 50% 50%, transparent 24vw, white 14.5vw);
        }
        95% {
            background: radial-gradient(circle at 50% 50%, transparent 22vw, white 14.5vw);
        }
        96% {
            background: radial-gradient(circle at 50% 50%, transparent 20vw, white 14.5vw);
        }
        97% {
            background: radial-gradient(circle at 50% 50%, transparent 18vw, white 14.5vw);
        }
        98% {
            background: radial-gradient(circle at 50% 50%, transparent 16vw, white 14.5vw);
        }
        99% {
            background: radial-gradient(circle at 50% 50%, transparent 15vw, white 14.5vw);
        }
        100% {
            background: radial-gradient(circle at 50% 50%, transparent 14vw, white 14.5vw);
        }
    }

    @media only screen and (max-width: 1000px) {
        .rotate-card-vertical {
            position: absolute;
            width: 65%;
            height: 12rem;
            transform: translate(104%, -45%);
            opacity: 0.75;
            visibility: hidden;
        }
    }

    .flip-animation {
        animation: spinner-horizontal 2s linear infinite;
    }

    h2 {
        text-shadow: 2px 2px 2px black;
        color: #23c736;
        /*color: #3c9fff;*/
    }

    .blink-face {
        animation-name: blink-face;
        animation-duration: 0.75s;
        animation-iteration-count: 2;
        visibility: hidden;
    }

.svg-image {
    position: absolute;
    width: 50vw;
    height: 50dvh;
    opacity: 0.75;
    visibility: hidden;
    top: 25%;
    left: 25%;
    min-width: 100px;
}


    .modal-header {
        border-bottom: 1px solid #000000;
    }

    .modal-fullscreen {
        width: 100dvw;
        height: 100dvh;
    }

    .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        left: 0;
        top: 0;
        width: 100dvw;
        height: 100dvh;
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        z-index: 101;
    }

    .modal-faceid {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        left: 0;
        top: 0;
        width: 100dvw;
        height: 100dvh;
        overflow: auto; /* Enable scroll if needed */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        z-index: 101;
    }

#InformationModal {
    position: fixed; /* Stay in place */
    left: 0;
    top: 0;
    width: 100dvw;
    height: 100dvh;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    z-index: 102;
}

    /* Modal Content */
    .modal-content-faceid {
        background-color: black;
        margin: auto;
        padding: 20px;
        width: 80%;
    }

    .modal-content {
        background-color: #fefefe;
        padding: 0;
        width: 100%;
    }

    .svg-notifications {
        position: absolute;
        width: 18%;
        height: 10%;
        opacity: 1;
        stroke: rgb(0, 200, 0) !important;
        animation: blink-face 2s linear infinite;
        left: 0%;
        visibility: hidden;
        top: 2%;
        z-index: 99;
    }

    .mainlogo {
        margin: auto;
        height: 30px;
    }

    .arrow {
        position: absolute;
        width: 7.1%;
        height: 12.5%;
        opacity: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        visibility: hidden;
        top: 29%;
        left: 39.2%;
    }

    @media only screen and (max-width: 1000px) {
        .arrow {
            position: absolute;
            width: 20%;
            height: 11%;
            opacity: 1;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            visibility: hidden;
            top: 35%;
            left: 20%;
        }
    }

    @media only screen and (max-width: 600px) {
        .faceidgif {
            width: 100%
        }
    }

    @media only screen and (max-width: 600px) {
        /*.btn{
            width:100%
        }*/
    }





.overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.97;
    background: radial-gradient(circle at 50vw 50%, transparent 39vw, #ffffff 40vw);
    z-index: 50;
    visibility:hidden;
}
@media only screen and (min-width: 1050px) {

    .overlay {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        opacity: 0.8;
        background: radial-gradient(circle at 50vw 50%, transparent 14vw, #ffffff 14.5vw);
        z-index: 50;
        visibility: hidden;
    }
}

    .faceholeanimation {
        animation: facehole 1.5s 1;
    }
    
    .faceholeanimation-pc {
        animation: facehole-pc 1.5s 1;
    }

    .video-container {
        justify-content: center;
        align-items: center;
        display: flex;
        height: 100dvh;
        width: 100dvw;
        position: absolute;
        overflow: hidden;
    }

    .container {
        width: 100%;
        height: 100%;
        position: absolute;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        margin: 0 auto; /* Merkezlemek için */
    }

    #NorthArrow {
        transform: translate(100%, -100%) rotate(-90deg);
    }

    #NorthEastArrow {
        transform: translate(241%, -41%) rotate(-45deg)
    }


    #EastArrow {
        transform: translate(300%, 100%);
    }

    #SouthEastArrow {
        transform: translate(241%, 241%) rotate(45deg);
    }

    #SouthArrow {
        transform: translate(100%, 300%) rotate(90deg);
    }

    #SouthWestArrow {
        transform: translate(-41%, 241%) rotate(135deg);
    }

    #WestArrow {
        transform: translate(-100%, 100%) rotate(180deg);
    }

    #NorthWestArrow {
        transform: translate(-41%, -41%) rotate(225deg);
    }


    .st0 {
        fill: none;
        stroke: #000000;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-miterlimit: 10;
    }

    .st1 {
        fill: none;
        stroke: #000000;
        stroke-width: 2;
        stroke-linejoin: round;
        stroke-miterlimit: 10;
    }

.blur {
    position: absolute;
    text-align: center;
    top: 20dvh;
    font-size: 1.5rem;
    z-index: 110;
    color: black;
    visibility: hidden;
}

    @media screen and (orientation: landscape) {
        #CardBorder {
            position: absolute;
            width: 100%;
            height: 90%;
            visibility: hidden;
            z-index: 99;
        }
    }

    @media screen and (orientation: portrait) {
        #CardBorder {
            position: absolute;
            width: 100%;
            height: 100%;
            visibility: hidden;
            z-index: 99;
        }
    }

    @media screen and (orientation: landscape) {
        .matching {
            position: absolute;
            left: 80%;
            top: 72%;
            font-size: 3vw;
            z-index: 99;
        }
    }

    @media screen and (orientation: portrait) {
        .matching {
            position: absolute;
            left: 15%;
            top: 75%;
            font-size: 8vw;
            transform: rotate(90deg);
            z-index: 99;
        }
    }

    #warnings {
        position: absolute;
        left: 44%;
        top: 12%;
        font-size: 2.5vw;
        z-index: 99;
    }

.notification {
    position: absolute;
    left: 0%;
    top: 10%;
    width: 100%;
    font-size: 1.2rem;
    margin: 0;
    z-index: 1500;
    text-align: center;
}




    .modal-body {
        overflow-y: auto;
        text-align: center;
        padding-left:0;
        padding-right:0px;
    }

        .modal-body .btn {
            max-width: 100%;
            border-radius: 8px;
            background: #28A1DA;
            border: none;
            bottom: 25px;
        }

    /*#video {
    height: 100vh;
}*/

    canvas {
        display: none;
    }

.p-5 {
    padding: 4rem !important;
    padding-top:1rem!important;
}

#infoButton {
    position: absolute;
    z-index: 100;
    width: 10%;
    right: 3%;
    top: 3%;
    max-width: 50px;
    padding: 0;
    border-radius: 50%;
}

#loadingIcon {
    position: absolute;
    z-index: 100;
    width: 50px;
    bottom: 20px;
    left: 20px;
    -webkit-animation: spin 4s linear infinite;
    -moz-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite;
    visibility:hidden;
}

.rolling {
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(-360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(-360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}


.headerdiv {
    display: flex;

    justify-content: center;
    gap: 50px;
    margin-left: 33px;
}
.modal-inside {
    background: linear-gradient(180deg, rgba(40, 161, 218, 0.10) 0%, rgba(255, 255, 255, 0.00) 100%);
}

h3 {
    color: #000;
    font-family: Roboto;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 117.375%; /* 30.517px */
    letter-spacing: 1.3px;
    text-align: start;
    margin-left: 5%;
    margin-top: 5vh;
}

.description p {
    color: #000;
    font-family: Roboto;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 300;
    line-height: 135%; /* 16.2px */
    letter-spacing: 0.6px;
    text-align: start;
}

.description {
    margin-left: 5%;
    margin-top: 10%;
    width: 80%;
}

    .description ul {
        color: #000;
        font-family: Roboto;
        font-size: 12px;
        font-style: normal;
        font-weight: 300;
        line-height: 135%; /* 16.2px */
        letter-spacing: 0.6px;
        text-align:start;
    }

    .description li {
        margin-bottom: 1rem;
    }

.headerdiv p {
    color: #28A1DA;
    font-family: Roboto;
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 400;
    line-height: 135%;
    letter-spacing: 0.45px;
}
h4 {
    color: #000;
    text-align: center;
    font-family: Roboto;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 117.375%; /* 28.17px */
    letter-spacing: 1.2px;
    margin-top: 5vh;
    padding: 0 20px 0 20px;
}



.description svg {
    min-height: 20px;
    min-width: 20px;
    margin-right: 5px;
}

@media screen and (orientation: portrait) {
    #cardportrait {
        margin-top: 0%;
        margin-left: 32%;
        width: 45%;
        height: 40%;
        transform: rotate(90deg);
    }

    #mrzzone {
        width: 45%;
        height: 90%;
        margin-left: 5%;
        margin-top: 11%;
        border-radius: 12px;
        border: 2px solid #28A1DA;
    }

    #carddashed {
        height: 101%;
    }    #carddashed2 {
        height: 101%;
    }
    #DocumentBorder {
        top: -1px;
        left: -1px;
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 101%;
        position: absolute;
    }
    #warningcard {
        color: #000;
        font-family: Roboto;
        font-size: 1rem;
        font-style: normal;
        font-weight: 500;
        line-height: 117.375%;
        letter-spacing: 0.75px;
        display: flex;
        align-content: center;
        justify-content: center;
        bottom: 20vh;
        position: absolute;
        z-index: 2;
        left: calc(10% - 19px);
        right: auto;
        border-radius: 9px;
        width: 90%;
        height: 38px;
        align-items: center;
        gap:5px;
    }
    .rotatedvideo{
        transform: rotateY(180deg)
    }
    .phase1 {
        background-image: url(/karton.png);
        background-size: cover;
        background-position: center;
    }
    .phase2 {
        background-image: url(/kartarka.png);
        background-size: cover;
        background-position: center;
    }
}
@media screen and (orientation:landscape ) {
    #cardportrait {
        margin-top: 10%;
        margin-left: 5%;
        width: 35%;
        height: 55%;
    }

    #mrzzone {
        width: 90%;
        height: 40%;
        margin-left: 5%;
        margin-top: 30%;
        border-radius: 12px;
        border: 2px solid #28A1DA;
    
    }

    #carddashed {
        height: 101%;
        transform: rotate(90deg);
    }
    #carddashed2 {
        height: 101%;
        transform: rotate(90deg);
    }
    #DocumentBorder {
        top: 0px;
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
        position: absolute;
        opacity:0.95;
    }
    .phase1 {
        background-image: url(/cart2h.png);
        background-size: contain;
        background-position: center;
    }    
    .phase2 {
        background-image: url(/arkah.png);
        background-size: contain;
        background-position: center;
    }
}

.redirectheader {
    color: #000;
    text-align: center;
    font-family: Roboto;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 117.375%; /* 28.17px */
    letter-spacing: 1.2px;
    margin-left:0;
}

#ApprovedRedirectingModal h2 {
    color: #05CD99;
    text-align: center;
    font-family: Roboto;
    font-size: 34px;
    font-style: normal;
    font-weight: 700;
    line-height: 117.375%; /* 39.907px */
    letter-spacing: 1.7px;
    text-shadow:none;       
}
#ApprovedRedirectingModal .modal-inside p {
    color: #000;
    text-align: center;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 117.375%; /* 16.432px */
    letter-spacing: 0.7px;
}

#DeniedRedirectingModal h2 {
    color: #EE5D50;
    text-align: center;
    font-family: Roboto;
    font-size: 34px;
    font-style: normal;
    font-weight: 700;
    line-height: 117.375%; /* 39.907px */
    letter-spacing: 1.7px;
    text-shadow: none;
}
#DeniedRedirectingModal .modal-inside p {
    color: #000;
    text-align: center;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 117.375%; /* 16.432px */
    letter-spacing: 0.7px;
}

h5 {
    color: #000;
    font-family: Roboto;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 117.375%; /* 17.606px */
    letter-spacing: 0.75px;
}