@charset "UTF-8";

@font-face
{
    font-family: 'Open Sans';
    src: url('/fonts/OpenSans.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face
{
    font-family: 'Open Sans';
    src: url('/fonts/OpenSans-Italic.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face
{
    font-family: 'Lora';
    src: url('/fonts/Lora.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-stretch: 50% 200%;
    font-style: normal;
    font-display: swap;
}

@font-face
{
    font-family: 'Lora';
    src: url('/fonts/Lora-Italic.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-stretch: 50% 200%;
    font-style: italic;
    font-display: swap;
}

@font-face
{
    font-family: 'Noto Serif Bengali';
    src: url('/fonts/NotoSerifBengali.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-stretch: 55% 200%;
    font-style: normal;
    font-display: swap;
}

:root
{
    --b: 0 0 0;
    --w: 255 255 255;
    --c1: 218 18 26;
    --c2: 255 255 128;
    --c3: 255 255 255;
    --f1: 'Open Sans', sans-serif;
    --f2: 'Lora', cursive;
    --f3: 'Noto Serif Bengali', serif;
    --gradAngle: 90deg;
}

/* Theme Specific Settings */

@media only screen
{
    :root
    {
        --c4: 36 40 44;
        --c5: 50 58 64;
        --c6: 20 24 28;
        --c7: 242 242 242;
        --c8: 164 164 164;
        --c9: 242 242 242;
    }

    .neumorphic_div
    {
        -webkit-box-shadow: 1rem 1rem 2rem 0rem rgb(var(--b) / 0.24), -1rem -1rem 2rem 0rem rgb(var(--w) / 0.06);
        -moz-box-shadow: 1rem 1rem 2rem 0rem rgb(var(--b) / 0.24), -1rem -1rem 2rem 0rem rgb(var(--w) / 0.06);
        -o-box-shadow: 1rem 1rem 2rem 0rem rgb(var(--b) / 0.24), -1rem -1rem 2rem 0rem rgb(var(--w) / 0.06);
        -ms-box-shadow: 1rem 1rem 2rem 0rem rgb(var(--b) / 0.24), -1rem -1rem 2rem 0rem rgb(var(--w) / 0.06);
        box-shadow: 1rem 1rem 2rem 0rem rgb(var(--b) / 0.24), -1rem -1rem 2rem 0rem rgb(var(--w) / 0.06);
    }

    .neumorphic_in
    {
        -webkit-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--b) / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--w) / 0.068) inset;
        -moz-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--b) / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--w) / 0.068) inset;
        -o-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--b) / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--w) / 0.068) inset;
        -ms-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--b) / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--w) / 0.068) inset;
        box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--b) / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--w) / 0.068) inset;
    }

    .neumorphic_btn, .neumorphic_out
    {
        -webkit-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--b) / 0.4), -0.75rem -0.75rem 1.25rem 0rem rgb(var(--w) / 0.068);
        -moz-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--b) / 0.4), -0.75rem -0.75rem 1.25rem 0rem rgb(var(--w) / 0.068);
        -o-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--b) / 0.4), -0.75rem -0.75rem 1.25rem 0rem rgb(var(--w) / 0.068);
        -ms-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--b) / 0.4), -0.75rem -0.75rem 1.25rem 0rem rgb(var(--w) / 0.068);
        box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--b) / 0.4), -0.75rem -0.75rem 1.25rem 0rem rgb(var(--w) / 0.068);
    }
    
    .neumorphic_btn:active
    {
        -webkit-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--b) / 0.4), -0.75rem -0.75rem 1.25rem 0rem rgb(var(--w) / 0.068), 0.75rem 0.75rem 1.25rem 0rem rgb(var(--b) / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--w) / 0.068) inset;
        -moz-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--b) / 0.4), -0.75rem -0.75rem 1.25rem 0rem rgb(var(--w) / 0.068), 0.75rem 0.75rem 1.25rem 0rem rgb(var(--b) / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--w) / 0.068) inset;
        -o-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--b), 0.4) / -0.75rem -0.75rem 1.25rem 0rem rgb(var(--w) / 0.068), 0.75rem 0.75rem 1.25rem 0rem rgb(var(--b) / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--w) / 0.068) inset;
        -ms-box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--b) / 0.4), -0.75rem -0.75rem 1.25rem 0rem rgb(var(--w) / 0.068), 0.75rem 0.75rem 1.25rem 0rem rgb(var(--b) / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--w) / 0.068) inset;
        box-shadow: 0.75rem 0.75rem 1.25rem 0rem rgb(var(--b) / 0.4), -0.75rem -0.75rem 1.25rem 0rem rgb(var(--w) / 0.068), 0.75rem 0.75rem 1.25rem 0rem rgb(var(--b) / 0.4) inset, -0.75rem -0.75rem 1.25rem 0rem rgb(var(--w) / 0.068) inset;
    }
}

@supports (backdrop-filter: blur(1rem)) or (-webkit-backdrop-filter: blur(1rem))
{
    .glass, .passgridmain:empty
    {
        background-image: linear-gradient(140deg, rgb(var(--b) / 0.24) 0%, rgb(var(--b) / 0.4) 40%, rgb(var(--b) / 0.24) 60%, rgb(var(--b) / 0.1) 100%);
        -webkit-backdrop-filter: blur(1rem);
        backdrop-filter: blur(1rem);
    }
}

@supports not ((backdrop-filter: blur(1rem)) and (-webkit-backdrop-filter: blur(1rem)))
{
    .glass, .passgridmain:empty
    {
        background-image: linear-gradient(140deg, rgb(var(--b) / 0.4) 0%, rgb(var(--b) / 0.64) 40%, rgb(var(--b) / 0.4) 60%, rgb(var(--b) / 0.24) 100%);
    }
}

html
{
    font-size: 16px;
    scrollbar-width: thin;
}

.ovAuto
{
    scrollbar-width: thin;
    scrollbar-track-color: transparent;
}

body
{
    background-color: rgb(var(--c4));
    color: rgba(var(--c7));
}

/* body.genbody::before
{
    content: "";
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

body.genbody::before
{
    background-image: url('/imx/bg1.jpg');
} */

::selection
{
    background-color: rgb(var(--c1));
    color: rgb(var(--w));
}

@media only screen
{
    /* For 2 Color Web Schemes Only */

    body::after
    {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 0rem;
        opacity: 0;
        z-index: 200;
        -webkit-filter: blur(0.0625rem);
        filter: blur(0.0625rem);
        visibility: hidden;
        background-image: linear-gradient(90deg, rgb(var(--c1)) 0%, rgb(var(--c2)) calc(100% / 3), rgb(var(--c1)) calc(200% / 3), rgb(var(--c2)) calc(300% / 3));
        background-size: 300% 100%;
        background-position: 0 0;
        transition: all 0.24s ease;
        -webkit-animation: loading 0.84s 0s linear infinite both normal;
        -moz-animation: loading 0.84s 0s linear infinite both normal;
        -o-animation: loading 0.84s 0s linear infinite both normal;
        -ms-animation: loading 0.84s 0s linear infinite both normal;
        animation: loading 0.84s 0s linear infinite both normal;
    }

    body.loading::after
    {
        height: 0.25rem;
        opacity: 1;
        visibility: visible;
    }

    @-webkit-keyframes loading
    {
        0%
        {
            background-position: 0% 0%;
        }

        100%
        {
            background-position: 100% 0%;
        }
    }

    @-moz-keyframes loading
    {
        0%
        {
            background-position: 0% 0%;
        }

        100%
        {
            background-position: 100% 0%;
        }
    }

    @-o-keyframes loading
    {
        0%
        {
            background-position: 0% 0%;
        }

        100%
        {
            background-position: 100% 0%;
        }
    }

    @-ms-keyframes loading
    {
        0%
        {
            background-position: 0% 0%;
        }

        100%
        {
            background-position: 100% 0%;
        }
    }

    @keyframes loading
    {
        0%
        {
            background-position: 0% 0%;
        }

        100%
        {
            background-position: 100% 0%;
        }
    }

    /* For 3 Color Web Schemes Only */

    /*
    
    body::after
    {
        content: "";
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        opacity: 0;
        height: 0px;
        transition: opacity 0.24s ease, height 0.24s ease;
    }

    body.loading::after
    {
        opacity: 1;
        height: 0.25rem;
        background-image: linear-gradient(90deg, rgb(var(--c2)) 0%, rgb(var(--c1)) calc(100% / 6), rgb(var(--c3)) calc(200% / 6), rgb(var(--c1)) calc(300% / 6), rgb(var(--c2)) calc(400% / 6), rgb(var(--c1)) calc(500% / 6), rgb(var(--c3)) 100%);
        background-size: 300% 100%;
        background-position: 0% 0%;
        -webkit-animation: glownimate 0.8s 0s linear infinite normal both;
        -moz-animation: glownimate 0.8s 0s linear infinite normal both;
        -o-animation: glownimate 0.8s 0s linear infinite normal both;
        -ms-animation: glownimate 0.8s 0s linear infinite normal both;
        animation: glownimate 0.8s 0s linear infinite normal both;
    }

    @-webkit-keyframes glownimate
    {
        0%{background-position: 0% 0%;}
        100%{background-position: 100% 0%;}
    }

    @-moz-keyframes glownimate
    {
        0%{background-position: 0% 0%;}
        100%{background-position: 100% 0%;}
    }

    @-o-keyframes glownimate
    {
        0%{background-position: 0% 0%;}
        100%{background-position: 100% 0%;}
    }

    @-ms-keyframes glownimate
    {
        0%{background-position: 0% 0%;}
        100%{background-position: 100% 0%;}
    }

    @keyframes glownimate
    {
        0%{background-position: 0% 0%;}
        100%{background-position: 100% 0%;}
    }
    
    */

    .btn_def
    {
        background-size: 100% 100%;
        background-position: 0% 0%;
    }

    .btn_def:hover
    {
        background-size: 200% 100%;
    }

    .btn_def:active
    {
        background-position: 100% 0%;
        -webkit-transform: scale(0.94);
        -moz-transform: scale(0.94);
        -o-transform: scale(0.94);
        -ms-transform: scale(0.94);
        transform: scale(0.94);
    }

    .btn_red
    {
        background-image: linear-gradient(120deg, rgb(250, 95, 95) 0%, rgb(190, 24, 24) 100%);
    }

    .flex-fb40p-1
    {
        flex-basis: calc(40% - 1rem);
    }

    .flex-fb50p-1
    {
        flex-basis: calc(50% - 1rem);
    }

    .flex-fb60p-1
    {
        flex-basis: calc(60% - 1rem);
    }

    .highlight
    {
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
    }

    .grad, .highlight
    {
        background-image: -webkit-linear-gradient(120deg, rgb(var(--c1) / 1) 0%, rgb(var(--c2) / 1) 100%);
        background-image: -moz-linear-gradient(120deg, rgb(var(--c1) / 1) 0%, rgb(var(--c2) / 1) 100%);
        background-image: -o-linear-gradient(120deg, rgb(var(--c1) / 1) 0%, rgb(var(--c2) / 1) 100%);
        background-image: linear-gradient(120deg, rgb(var(--c1) / 1) 0%, rgb(var(--c2) / 1) 100%);
    }

    nav a
    {
        display: inherit;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        line-height: inherit;
        transition: all 0.24s ease;
    }

    input[type="checkbox"]:not(:checked) ~ i.checked, input[type="checkbox"]:checked ~ i.unchecked
    {
        opacity: 0;
        visibility: hidden;
    }

    input[type="checkbox"]:checked ~ i.checked, input[type="checkbox"]:not(:checked) ~ i.unchecked
    {
        opacity: 1;
        visibility: visible;
    }

    nav a, header button i
    {
        line-height: 5rem;
    }

    /* Slideshow */

    .slider-stage > *
    {
        z-index: 0;
    }

    .slider-stage > .slide-appearing
    {
        z-index: 1;
    }

    .slider-stage > .slide-active
    {
        z-index: 2;
    }

    .slider-nav
    {
        position: absolute;
        top: 0px;
        left: calc(50% - 2.5rem);
        -webkit-border-radius: 0px 0px 0.5rem 0.5rem;
        -moz-border-radius: 0px 0px 0.5rem 0.5rem;
        -o-border-radius: 0px 0px 0.5rem 0.5rem;
        -ms-border-radius: 0px 0px 0.5rem 0.5rem;
        border-radius: 0px 0px 0.5rem 0.5rem;
    }

    .slide-animateout
    {
        -webkit-animation-fill-mode: both;
        -moz-animation-fill-mode: both;
        -o-animation-fill-mode: both;
        -ms-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation: slideanimout 0.8s 0.2s ease forwards 1;
        -moz-animation: slideanimout 0.8s 0.2s ease forwards 1;
        -o-animation: slideanimout 0.8s 0.2s ease forwards 1;
        -ms-animation: slideanimout 0.8s 0.2s ease forwards 1;
        animation: slideanimout 0.8s 0.2s ease forwards 1;
    }
    
    .slide-animateout::after, .slide-animatein::after
    {
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: rgb(var(--c1) / 1);
        background-image: url('/imx/cpi_w.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 28%;
        -webkit-animation-fill-mode: both;
        -moz-animation-fill-mode: both;
        -o-animation-fill-mode: both;
        -ms-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    .slide-animatein::after
    {
        -webkit-animation: slideanimout 0.6s 0.4s ease forwards 1;
        -moz-animation: slideanimout 0.6s 0.4s ease forwards 1;
        -o-animation: slideanimout 0.6s 0.4s ease forwards 1;
        -ms-animation: slideanimout 0.6s 0.4s ease forwards 1;
        animation: slideanimout 0.6s 0.4s ease forwards 1;
    }

    .slide-animateout::after
    {
        -webkit-mix-blend-mode: multiply;
        mix-blend-mode: multiply;
        -webkit-animation: slideanimout-af 1s 0s ease forwards 1;
        -moz-animation: slideanimout-af 1s 0s ease forwards 1;
        -o-animation: slideanimout-af 1s 0s ease forwards 1;
        -ms-animation: slideanimout-af 1s 0s ease forwards 1;
        animation: slideanimout-af 1s 0s ease forwards 1;
    }

    @-webkit-keyframes slideanimout
    {
        0% { -webkit-clip-path: polygon(0px 0px, 150% 0px, 100% 100%, 0px 100%); clip-path: polygon(0px 0px, 150% 0px, 100% 100%, 0px 100%); }
        100% { -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 100%, 0px 100%); clip-path: polygon(0px 0px, 0px 0px, 0px 100%, 0px 100%); }
    }

    @-moz-keyframes slideanimout
    {
        0% { -webkit-clip-path: polygon(0px 0px, 150% 0px, 100% 100%, 0px 100%); clip-path: polygon(0px 0px, 150% 0px, 100% 100%, 0px 100%); }
        100% { -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 100%, 0px 100%); clip-path: polygon(0px 0px, 0px 0px, 0px 100%, 0px 100%); }
    }

    @-o-keyframes slideanimout
    {
        0% { -webkit-clip-path: polygon(0px 0px, 150% 0px, 100% 100%, 0px 100%); clip-path: polygon(0px 0px, 150% 0px, 100% 100%, 0px 100%); }
        100% { -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 100%, 0px 100%); clip-path: polygon(0px 0px, 0px 0px, 0px 100%, 0px 100%); }
    }

    @-ms-keyframes slideanimout
    {
        0% { -webkit-clip-path: polygon(0px 0px, 150% 0px, 100% 100%, 0px 100%); clip-path: polygon(0px 0px, 150% 0px, 100% 100%, 0px 100%); }
        100% { -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 100%, 0px 100%); clip-path: polygon(0px 0px, 0px 0px, 0px 100%, 0px 100%); }
    }

    @keyframes slideanimout
    {
        0% { -webkit-clip-path: polygon(0px 0px, 150% 0px, 100% 100%, 0px 100%); clip-path: polygon(0px 0px, 150% 0px, 100% 100%, 0px 100%); }
        100% { -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 100%, 0px 100%); clip-path: polygon(0px 0px, 0px 0px, 0px 100%, 0px 100%); }
    }

    @-webkit-keyframes slideanimout-af
    {
        0% { -webkit-clip-path: polygon(150% 0px, 150% 0px, 100% 100%, 100% 100%); clip-path: polygon(150% 0px, 150% 0px, 100% 100%, 100% 100%); }
        100% { -webkit-clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 100%); clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 100%); }
    }

    @-moz-keyframes slideanimout-af
    {
        0% { -webkit-clip-path: polygon(150% 0px, 150% 0px, 100% 100%, 100% 100%); clip-path: polygon(150% 0px, 150% 0px, 100% 100%, 100% 100%); }
        100% { -webkit-clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 100%); clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 100%); }
    }

    @-o-keyframes slideanimout-af
    {
        0% { -webkit-clip-path: polygon(150% 0px, 150% 0px, 100% 100%, 100% 100%); clip-path: polygon(150% 0px, 150% 0px, 100% 100%, 100% 100%); }
        100% { -webkit-clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 100%); clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 100%); }
    }

    @-ms-keyframes slideanimout-af
    {
        0% { -webkit-clip-path: polygon(150% 0px, 150% 0px, 100% 100%, 100% 100%); clip-path: polygon(150% 0px, 150% 0px, 100% 100%, 100% 100%); }
        100% { -webkit-clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 100%); clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 100%); }
    }

    @keyframes slideanimout-af
    {
        0% { -webkit-clip-path: polygon(150% 0px, 150% 0px, 100% 100%, 100% 100%); clip-path: polygon(150% 0px, 150% 0px, 100% 100%, 100% 100%); }
        100% { -webkit-clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 100%); clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 100%); }
    }

    /* Site Styles Goes Here */
    
    .betl::before, .aftl::after, .betlw::before, .aftlw::after, .gala::after
    {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
    }

    .betl::before, .aftl::after, .gala::after
    {
        width: 100%;
        height: 100%;
    }

    .betlw::before, .aftlw::after
    {
        width: 100%;
    }

    .bgcovcent
    {
        background-size: cover;
        background-position: center;
    }

    header::before
    {
        content: "";
        background-color: rgb(var(--c1));
        width: calc(92% - 0.125rem);
        position: absolute;
        top: 0;
        left: 8%;
        height: 100%;
        border-left: 0.125rem solid rgb(var(--b) / 0.14);
        border-bottom: 0.125rem solid rgb(var(--b) / 0.14);
        -webkit-border-radius: 0px 0px 0px 2rem;
        -moz-border-radius: 0px 0px 0px 2rem;
        -o-border-radius: 0px 0px 0px 2rem;
        -ms-border-radius: 0px 0px 0px 2rem;
        border-radius: 0px 0px 0px 2rem;
    }

    main section:first-child::after
    {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: max(8rem, 8vw);
        -webkit-border-radius: 0px 0px 0px 4rem;
        -moz-border-radius: 0px 0px 0px 4rem;
        -o-border-radius: 0px 0px 0px 4rem;
        -ms-border-radius: 0px 0px 0px 4rem;
        border-radius: 0px 0px 0px 4rem;
        background-color: rgb(var(--c1));
        -webkit-mix-blend-mode: multiply;
        mix-blend-mode: multiply;
        z-index: 3;
    }

    .cross
    {
        width: clamp(min(28rem, 100%), 40%, 34rem);
    }

    .cross::before, .cross::after
    {
        content: "";
        position: absolute;
        top: 0;
        left: calc(50% - 0.25rem);
        width: 0.5rem;
        height: 100%;
        -webkit-border-radius: 1rem;
        -moz-border-radius: 1rem;
        -o-border-radius: 1rem;
        -ms-border-radius: 1rem;
        border-radius: 1rem;
        -webkit-animation-fill-mode: backwards;
        -moz-animation-fill-mode: backwards;
        -o-animation-fill-mode: backwards;
        -ms-animation-fill-mode: backwards;
        animation-fill-mode: backwards;
    }

    .cross::before
    {
        background-color: rgb(var(--b));
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-animation: crossbarleft 0.5s 0s ease normal 1;
        -moz-animation: crossbarleft 0.5s 0s ease normal 1;
        -o-animation: crossbarleft 0.5s 0s ease normal 1;
        -ms-animation: crossbarleft 0.5s 0s ease normal 1;
        animation: crossbarleft 0.5s 0s ease normal 1;
    }

    .cross::after
    {
        background-color: rgb(var(--c1));
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-animation: crossbarright 0.5s 0s ease normal 1;
        -moz-animation: crossbarright 0.5s 0s ease normal 1;
        -o-animation: crossbarright 0.5s 0s ease normal 1;
        -ms-animation: crossbarright 0.5s 0s ease normal 1;
        animation: crossbarright 0.5s 0s ease normal 1;
    }

    .cross a, .cross figure
    {
        -webkit-animation: opac 0.5s 0.5s ease 1 both;
        -moz-animation: opac 0.5s 0.5s ease 1 both;
        -o-animation: opac 0.5s 0.5s ease 1 both;
        -ms-animation: opac 0.5s 0.5s ease 1 both;
        animation: opac 0.5s 0.5s ease 1 both;
    }

    @-webkit-keyframes crossbarleft
    {
        0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
        100% { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
    }

    @-moz-keyframes crossbarleft
    {
        0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
        100% { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
    }

    @-o-keyframes crossbarleft
    {
        0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
        100% { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
    }

    @-ms-keyframes crossbarleft
    {
        0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
        100% { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
    }

    @keyframes crossbarleft
    {
        0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
        100% { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
    }

    @-webkit-keyframes crossbarright
    {
        0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
        100% { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
    }

    @-moz-keyframes crossbarright
    {
        0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
        100% { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
    }

    @-o-keyframes crossbarright
    {
        0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
        100% { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
    }

    @-ms-keyframes crossbarright
    {
        0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
        100% { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
    }

    @keyframes crossbarright
    {
        0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
        100% { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
    }
    
    @-webkit-keyframes opac
    {
        0% { opacity: 0; -webkit-filter: blur(1rem); filter: blur(1rem); }
        100% { opacity: 1; -webkit-filter: none; filter: none; }
    }
    
    @-moz-keyframes opac
    {
        0% { opacity: 0; -webkit-filter: blur(1rem); filter: blur(1rem); }
        100% { opacity: 1; -webkit-filter: none; filter: none; }
    }
    
    @-o-keyframes opac
    {
        0% { opacity: 0; -webkit-filter: blur(1rem); filter: blur(1rem); }
        100% { opacity: 1; -webkit-filter: none; filter: none; }
    }
    
    @-ms-keyframes opac
    {
        0% { opacity: 0; -webkit-filter: blur(1rem); filter: blur(1rem); }
        100% { opacity: 1; -webkit-filter: none; filter: none; }
    }
    
    @keyframes opac
    {
        0% { opacity: 0; -webkit-filter: blur(1rem); filter: blur(1rem); }
        100% { opacity: 1; -webkit-filter: none; filter: none; }
    }

    .cross a::before
    {
        background-image: radial-gradient(circle at 50%, rgb(var(--c1) / 0.88) 0%, transparent 68%, transparent 100%);
        -webkit-filter: grayscale(1) brightness(0);
        filter: grayscale(1) brightness(0);
    }

    .cross a:hover::before
    {
        -webkit-filter: grayscale(0);
        filter: grayscale(0);
    }

    .cross a i
    {
        font-size: calc(1.25rem + 1.25vw);
        color: rgb(var(--c1));
    }

    .cross a:hover i
    {
        color: rgb(var(--c3));
    }

    .cross a span
    {
        font-size: calc(1rem + 0.5vw);
    }

    .crleft
    {
        -webkit-clip-path: polygon(0px 0.25rem, calc(50% - 0.25rem) 50%, 0px calc(100% - 0.25rem));
        clip-path: polygon(0px 0.25rem, calc(50% - 0.25rem) 50%, 0px calc(100% - 0.25rem));
    }

    .crright
    {
        -webkit-clip-path: polygon(100% 0.25rem, calc(50% + 0.25rem) 50%, 100% calc(100% - 0.25rem));
        clip-path: polygon(100% 0.25rem, calc(50% + 0.25rem) 50%, 100% calc(100% - 0.25rem));
    }

    .crbottom
    {
        -webkit-clip-path: polygon(0.25rem 100%, 50% calc(50% + 0.25rem), calc(100% - 0.25rem) 100%);
        clip-path: polygon(0.25rem 100%, 50% calc(50% + 0.25rem), calc(100% - 0.25rem) 100%);
    }

    .crtop
    {
        -webkit-clip-path: polygon(0.25rem 0px, 50% calc(50% - 0.25rem), calc(100% - 0.25rem) 0px);
        clip-path: polygon(0.25rem 0px, 50% calc(50% - 0.25rem), calc(100% - 0.25rem) 0px);
    }

    .otpfsec
    {
        background-image: var(--bgi);
        background-size: cover;
        background-position: center;
    }

    .otpfsec h1::before
    {
        border-radius: 0 4rem 0 0;
        -webkit-mix-blend-mode: multiply;
        mix-blend-mode: multiply;
    }

    .clip1_be::before, .clip1_af::after
    {
        -webkit-clip-path: polygon(0px 0px, 100% 0px, 100% 100%);
        clip-path: polygon(0px 0px, 100% 0px, 100% 100%);
    }

    .besthgt::before
    {
        height: 5vw;
    }

    .anifig
    {
        width: calc(8rem + 10vw);
    }
    
    .anibar::before
    {
        content: "";
        position: absolute;
        left: 0px;
        bottom: 0rem;
        width: 40%;
        height: 100%;
        background-image: radial-gradient(circle at 50%, rgb(var(--c3) / 0.14) 0%, rgb(var(--c3) / 0.14) 40%, transparent 40%, transparent 100%);
        background-size: 0.75rem 0.75rem;
        background-position: center bottom;
        background-repeat: repeat;
        -webkit-animation: anibar 1.8s ease 0s infinite alternate;
        -moz-animation: anibar 1.8s ease 0s infinite alternate;
        -o-animation: anibar 1.8s ease 0s infinite alternate;
        -ms-animation: anibar 1.8s ease 0s infinite alternate;
        animation: anibar 1.8s ease 0s infinite alternate;
    }

    @-webkit-keyframes anibar
    {
        0% { -webkit-clip-path: polygon(0px 20%, 100% 20%, 100% 100%, 0px 100%); clip-path: polygon(0px 20%, 100% 20%, 100% 100%, 0px 100%); }
        100% { -webkit-clip-path: polygon(0px 80%, 100% 80%, 100% 100%, 0px 100%); clip-path: polygon(0px 80%, 100% 80%, 100% 100%, 0px 100%); }
    }

    @-moz-keyframes anibar
    {
        0% { -webkit-clip-path: polygon(0px 20%, 100% 20%, 100% 100%, 0px 100%); clip-path: polygon(0px 20%, 100% 20%, 100% 100%, 0px 100%); }
        100% { -webkit-clip-path: polygon(0px 80%, 100% 80%, 100% 100%, 0px 100%); clip-path: polygon(0px 80%, 100% 80%, 100% 100%, 0px 100%); }
    }

    @-o-keyframes anibar
    {
        0% { -webkit-clip-path: polygon(0px 20%, 100% 20%, 100% 100%, 0px 100%); clip-path: polygon(0px 20%, 100% 20%, 100% 100%, 0px 100%); }
        100% { -webkit-clip-path: polygon(0px 80%, 100% 80%, 100% 100%, 0px 100%); clip-path: polygon(0px 80%, 100% 80%, 100% 100%, 0px 100%); }
    }

    @-ms-keyframes anibar
    {
        0% { -webkit-clip-path: polygon(0px 20%, 100% 20%, 100% 100%, 0px 100%); clip-path: polygon(0px 20%, 100% 20%, 100% 100%, 0px 100%); }
        100% { -webkit-clip-path: polygon(0px 80%, 100% 80%, 100% 100%, 0px 100%); clip-path: polygon(0px 80%, 100% 80%, 100% 100%, 0px 100%); }
    }

    @keyframes anibar
    {
        0% { -webkit-clip-path: polygon(0px 20%, 100% 20%, 100% 100%, 0px 100%); clip-path: polygon(0px 20%, 100% 20%, 100% 100%, 0px 100%); }
        100% { -webkit-clip-path: polygon(0px 80%, 100% 80%, 100% 100%, 0px 100%); clip-path: polygon(0px 80%, 100% 80%, 100% 100%, 0px 100%); }
    }

    .animg
    {
        -webkit-animation: animg 2.4s linear 0s infinite alternate;
        -moz-animation: animg 2.4s linear 0s infinite alternate;
        -o-animation: animg 2.4s linear 0s infinite alternate;
        -ms-animation: animg 2.4s linear 0s infinite alternate;
        animation: animg 2.4s linear 0s infinite alternate;
    }

    @-webkit-keyframes animg
    {
        0% { -webkit-filter: grayscale(0); filter: grayscale(0); }
        80%, 100% { -webkit-filter: grayscale(1); filter: grayscale(1); }
    }

    @-moz-keyframes animg
    {
        0% { -webkit-filter: grayscale(0); filter: grayscale(0); }
        80%, 100% { -webkit-filter: grayscale(1); filter: grayscale(1); }
    }

    @-o-keyframes animg
    {
        0% { -webkit-filter: grayscale(0); filter: grayscale(0); }
        80%, 100% { -webkit-filter: grayscale(1); filter: grayscale(1); }
    }

    @-ms-keyframes animg
    {
        0% { -webkit-filter: grayscale(0); filter: grayscale(0); }
        80%, 100% { -webkit-filter: grayscale(1); filter: grayscale(1); }
    }

    @keyframes animg
    {
        0% { -webkit-filter: grayscale(0); filter: grayscale(0); }
        80%, 100% { -webkit-filter: grayscale(1); filter: grayscale(1); }
    }

    .gala::after
    {
        clip-path: polygon(-100% 0%, -20% 0%, 0% 100%, -80% 100%);
    }

    .gala:hover
    {
        transform: scale(1.1);
    }

    .gala:hover::after
    {
        -webkit-mix-blend-mode: color;
        mix-blend-mode: color;
        -webkit-animation: gala 0.68s ease 0s 1 normal both;
        -moz-animation: gala 0.68s ease 0s 1 normal both;
        -o-animation: gala 0.68s ease 0s 1 normal both;
        -ms-animation: gala 0.68s ease 0s 1 normal both;
        animation: gala 0.68s ease 0s 1 normal both;
    }
    
    @-webkit-keyframes gala
    {
        0% { -webkit-clip-path: polygon(-100% 0%, -20% 0%, 0% 100%, -80% 100%); clip-path: polygon(-100% 0%, -20% 0%, 0% 100%, -80% 100%); }
        100% { -webkit-clip-path: polygon(100% 0%, 120% 0%, 140% 100%, 120% 100%); clip-path: polygon(100% 0%, 120% 0%, 140% 100%, 120% 100%); }
    }
    
    @-moz-keyframes gala
    {
        0% { -webkit-clip-path: polygon(-100% 0%, -20% 0%, 0% 100%, -80% 100%); clip-path: polygon(-100% 0%, -20% 0%, 0% 100%, -80% 100%); }
        100% { -webkit-clip-path: polygon(100% 0%, 120% 0%, 140% 100%, 120% 100%); clip-path: polygon(100% 0%, 120% 0%, 140% 100%, 120% 100%); }
    }
    
    @-o-keyframes gala
    {
        0% { -webkit-clip-path: polygon(-100% 0%, -20% 0%, 0% 100%, -80% 100%); clip-path: polygon(-100% 0%, -20% 0%, 0% 100%, -80% 100%); }
        100% { -webkit-clip-path: polygon(100% 0%, 120% 0%, 140% 100%, 120% 100%); clip-path: polygon(100% 0%, 120% 0%, 140% 100%, 120% 100%); }
    }
    
    @-ms-keyframes gala
    {
        0% { -webkit-clip-path: polygon(-100% 0%, -20% 0%, 0% 100%, -80% 100%); clip-path: polygon(-100% 0%, -20% 0%, 0% 100%, -80% 100%); }
        100% { -webkit-clip-path: polygon(100% 0%, 120% 0%, 140% 100%, 120% 100%); clip-path: polygon(100% 0%, 120% 0%, 140% 100%, 120% 100%); }
    }
    
    @keyframes gala
    {
        0% { -webkit-clip-path: polygon(-100% 0%, -20% 0%, 0% 100%, -80% 100%); clip-path: polygon(-100% 0%, -20% 0%, 0% 100%, -80% 100%); }
        100% { -webkit-clip-path: polygon(100% 0%, 120% 0%, 140% 100%, 120% 100%); clip-path: polygon(100% 0%, 120% 0%, 140% 100%, 120% 100%); }
    }

    .ka > div
    {
        flex-basis: calc(40% - 2rem);
    }

    .ka img
    {
        width: calc(100% / 3);
        -webkit-box-shadow: 0.5rem 0.5rem 1rem 0rem rgb(var(--b) / 0.68);
        -moz-box-shadow: 0.5rem 0.5rem 1rem 0rem rgb(var(--b) / 0.68);
        -o-box-shadow: 0.5rem 0.5rem 1rem 0rem rgb(var(--b) / 0.68);
        -ms-box-shadow: 0.5rem 0.5rem 1rem 0rem rgb(var(--b) / 0.68);
        box-shadow: 0.5rem 0.5rem 1rem 0rem rgb(var(--b) / 0.68);
    }

    .ka > .betl::before
    {
        -webkit-animation: kared 3.4s ease 0s infinite normal;
        -moz-animation: kared 3.4s ease 0s infinite normal;
        -o-animation: kared 3.4s ease 0s infinite normal;
        -ms-animation: kared 3.4s ease 0s infinite normal;
        animation: kared 3.4s ease 0s infinite normal;
    }

    .ka > .aftl::after
    {
        -webkit-animation: kablack 4.2s ease 0s infinite normal;
        -moz-animation: kablack 4.2s ease 0s infinite normal;
        -o-animation: kablack 4.2s ease 0s infinite normal;
        -ms-animation: kablack 4.2s ease 0s infinite normal;
        animation: kablack 4.2s ease 0s infinite normal;
    }

    @-webkit-keyframes kared
    {
        0%, 100% { -webkit-clip-path: polygon(0px 0px, 95% 5%, 100% 100%, 5% 95%); clip-path: polygon(0px 0px, 95% 5%, 100% 100%, 5% 95%); }
        50% { -webkit-clip-path: polygon(5% 5%, 100% 0%, 95% 95%, 0% 100%); clip-path: polygon(5% 5%, 100% 0%, 95% 95%, 0% 100%); }
    }

    @-moz-keyframes kared
    {
        0%, 100% { -webkit-clip-path: polygon(0px 0px, 95% 5%, 100% 100%, 5% 95%); clip-path: polygon(0px 0px, 95% 5%, 100% 100%, 5% 95%); }
        50% { -webkit-clip-path: polygon(5% 5%, 100% 0%, 95% 95%, 0% 100%); clip-path: polygon(5% 5%, 100% 0%, 95% 95%, 0% 100%); }
    }

    @-o-keyframes kared
    {
        0%, 100% { -webkit-clip-path: polygon(0px 0px, 95% 5%, 100% 100%, 5% 95%); clip-path: polygon(0px 0px, 95% 5%, 100% 100%, 5% 95%); }
        50% { -webkit-clip-path: polygon(5% 5%, 100% 0%, 95% 95%, 0% 100%); clip-path: polygon(5% 5%, 100% 0%, 95% 95%, 0% 100%); }
    }

    @-ms-keyframes kared
    {
        0%, 100% { -webkit-clip-path: polygon(0px 0px, 95% 5%, 100% 100%, 5% 95%); clip-path: polygon(0px 0px, 95% 5%, 100% 100%, 5% 95%); }
        50% { -webkit-clip-path: polygon(5% 5%, 100% 0%, 95% 95%, 0% 100%); clip-path: polygon(5% 5%, 100% 0%, 95% 95%, 0% 100%); }
    }

    @keyframes kared
    {
        0%, 100% { -webkit-clip-path: polygon(0px 0px, 95% 5%, 100% 100%, 5% 95%); clip-path: polygon(0px 0px, 95% 5%, 100% 100%, 5% 95%); }
        50% { -webkit-clip-path: polygon(5% 5%, 100% 0%, 95% 95%, 0% 100%); clip-path: polygon(5% 5%, 100% 0%, 95% 95%, 0% 100%); }
    }

    @-webkit-keyframes kablack
    {
        0%, 100% { -webkit-clip-path: polygon(10% 10%, 95% 5%, 90% 90%, 5% 95%); clip-path: polygon(10% 10%, 95% 5%, 90% 90%, 5% 95%); }
        50% { -webkit-clip-path: polygon(5% 5%, 90% 10%, 95% 95%, 10% 90%); clip-path: polygon(5% 5%, 90% 10%, 95% 95%, 10% 90%); }
    }

    @-moz-keyframes kablack
    {
        0%, 100% { -webkit-clip-path: polygon(10% 10%, 95% 5%, 90% 90%, 5% 95%); clip-path: polygon(10% 10%, 95% 5%, 90% 90%, 5% 95%); }
        50% { -webkit-clip-path: polygon(5% 5%, 90% 10%, 95% 95%, 10% 90%); clip-path: polygon(5% 5%, 90% 10%, 95% 95%, 10% 90%); }
    }

    @-o-keyframes kablack
    {
        0%, 100% { -webkit-clip-path: polygon(10% 10%, 95% 5%, 90% 90%, 5% 95%); clip-path: polygon(10% 10%, 95% 5%, 90% 90%, 5% 95%); }
        50% { -webkit-clip-path: polygon(5% 5%, 90% 10%, 95% 95%, 10% 90%); clip-path: polygon(5% 5%, 90% 10%, 95% 95%, 10% 90%); }
    }

    @-ms-keyframes kablack
    {
        0%, 100% { -webkit-clip-path: polygon(10% 10%, 95% 5%, 90% 90%, 5% 95%); clip-path: polygon(10% 10%, 95% 5%, 90% 90%, 5% 95%); }
        50% { -webkit-clip-path: polygon(5% 5%, 90% 10%, 95% 95%, 10% 90%); clip-path: polygon(5% 5%, 90% 10%, 95% 95%, 10% 90%); }
    }

    @keyframes kablack
    {
        0%, 100% { -webkit-clip-path: polygon(10% 10%, 95% 5%, 90% 90%, 5% 95%); clip-path: polygon(10% 10%, 95% 5%, 90% 90%, 5% 95%); }
        50% { -webkit-clip-path: polygon(5% 5%, 90% 10%, 95% 95%, 10% 90%); clip-path: polygon(5% 5%, 90% 10%, 95% 95%, 10% 90%); }
    }

    .noticon a:not(:last-child)
    {
        border-bottom: 0.125rem dashed rgb(var(--c5));
    }

    .kalmangrid
    {
        grid-template-columns: 1fr 2fr 5rem;
    }
}

@media only screen and (min-width: 1260px)
{
    .mobonly
    {
        display: none;
    }
}

@media only screen and (max-width: 1259px)
{
    .slidarose::after
    {
        height: max(7.5rem, 8vw);
    }

    nav
    {
        position: absolute;
        right: 0px;
        top: 100%;
        text-align: right;
        background-color: rgb(var(--c1) / 1);
        opacity: 0;
        visibility: hidden;
        -webkit-border-radius: 0px 0px 0px 1rem;
        -moz-border-radius: 0px 0px 0px 1rem;
        -o-border-radius: 0px 0px 0px 1rem;
        -ms-border-radius: 0px 0px 0px 1rem;
        border-radius: 0px 0px 0px 1rem;
        -webkit-clip-path: polygon(0px 0px, 100% 0%, 100% 0%, 0px 0px);
        clip-path: polygon(0px 0px, 100% 0%, 100% 0%, 0px 0px);
        -webkit-transition: all 0.24s ease;
        -moz-transition: all 0.24s ease;
        -o-transition: all 0.24s ease;
        -ms-transition: all 0.24s ease;
        transition: all 0.24s ease;
    }
    
    nav.show
    {
        opacity: 1;
        visibility: visible;
        -webkit-clip-path: polygon(0px 0px, 100% 0%, 100% 100%, 0px 100%);
        clip-path: polygon(0px 0px, 100% 0%, 100% 100%, 0px 100%);
    }

    .dynamicnav
    {
        flex-direction: column;
    }

    #sitenav, #usernav
    {
        display: block;
    }

    #sitenav li, #usernav li
    {
        display: list-item;
        width: 100%;
    }

    nav a, nav li > ul > li > a, nav li:hover > ul > li > a
    {
        line-height: 2.5rem;
    }
}

@media only screen and (max-width: 800px)
{
    .logo img
    {
        height: 2.5rem;
    }
}

@media only screen and (max-width: 650px)
{
    .anifig
    {
        margin-left: auto;
        margin-right: auto;
    }
}

@media only screen and (max-width: 428px)
{
    .kalmangrid
    {
        grid-template-columns: 1fr 5rem;
    }

    .kalmangrid > *:nth-child(2)
    {
        display: none;
    }
}

@media only screen and (orientation: landscape)
{
    .openingsect
    {
        background-image: url('/imx/bg1.jpg');
    }
}

@media only screen and (orientation: portrait)
{
    .openingsect
    {
        background-image: url('/imx/bg4.jpg');
    }
}