:root {
    --font: 'fnt-eng';
    --content-width: 1376px;
    --sides-gap: 12px;
    --anouncement-height: 0;
    --anouncement-background: #eeeeee;
    --loaded: 0;
    --submenu-background: #0070ff;
    --submenu-background: #ff873c;

    --colors: #0070ff, #0a2246, #ff4900;
    --focus-within-background-color: transparent;
}

*, *::before, *::after {
    box-sizing: border-box;
}
a {
  touch-action: manipulation;
}
* {
  scroll-margin-top: 150px;
}
a {
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6, ol, ul {
    margin: 0;
    padding: 0;
}

:is(ol, ul) li {
    list-style: none;
}

html, body {
    padding: 0;
    margin: 0;
}

li#sandwich
{
    & > a
    {
        padding: 14px 0 0 0;
        touch-action: manipulation;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
        display: inline;
    }
}


div#donate
{
    display: grid;
    grid: auto / 1fr;
    grid-gap: 10px;

    & > p
    {
        display: grid;
        grid-auto-flow: column dense;
        align-items: center;
        grid-template-columns: minmax(0px, 140px) 1fr;
        grid-gap: 20px;
        margin: 0;
        background: #e1faff;
        border-radius: 10px;
        transition: all 0.3s;
        padding: 0 1vw;
        direction: ltr;
        text-align: left;

        &:hover
        {
            background: #fdeecd;
        }

        & > img
        {
            max-width: 200px;
        }
    }
}

form#contact
{
    display: grid;
    grid-gap: 10px;

    & > :is( input[type=text], input[type=email], textarea )
    {
        border: 1px solid #bcbcbc;
        box-shadow: inset 2px 2px 0 #f0f0f0;
        border-radius: 5px;
        background: white;
        padding: 15px;
        resize: none;
        font-family: var(--font);
    }

    & > :is( button[type=submit] )
    {
        background: #0068ff;
        width: 140px;
        border: 0;
        color: white;
        padding: 14px;
        border-radius: 7px;
        transition: all 0.3s;
        cursor: pointer;
        font-family: var(--font);

        &:hover
        {
            background: #064eb6;
        }
    }
}

body.mobile > nav > ul#menu-navigation
{
    & > li
    {
        & > a
        {
            padding: 9px clamp(1vw, 3vw, 3vw) 9px clamp(1vw, 3vw, 3vw) !important;

            &:hover
            {
                background: linear-gradient(to bottom, #cb9d38 0px, #0253cb 0) !important;
            }  
        }
    }
}

body {
    font-family: var( --font );
    font-weight: 300;
    background: #fff;
    font-optical-sizing: auto;

    & > header
    {
        @media (width <= 780px)
        {
            & > a
            {
                & > h1
                {
                    padding: 20px 3px 0px 0px !important;
                }
            }

            & > div
            {
                & > p
                {
                    font-size: 12px !important;
                    padding: 6px 8px !important;

                    & > span
                    {
                        display: none;
                    }
                }

                & > nav
                {
                    padding: 6px !important;

                    & > a
                    {
                        font-size: 12px !important;
                    }
                }
            }  
        }
    }

    &.mobile
    {
        & > nav
        {
            overflow: hidden;

            & > :is(ol, ul)
            {
                top: 2px;
            }

            & > #mobile_nav
            {
                display: grid;
                align-self: end;
                grid-column: 1 / none;
                grid-template-columns: 1fr 1fr;
                grid-auto-flow: dense;
                background: #2a5ac7;
                box-shadow: 100px 0 #2a5ac7, -100px 0 #2a5ac7;
                padding-top: 10px;
                padding-bottom: 10px;
                margin-top: 1px;
                margin-bottom: 2px;
                grid-gap: 2px;

                & li
                {
                    position: relative;
                    background-color: #2c65e6;

                    &:hover > :is(ol, ul)
                    {
                        top: 0;
                        min-width: 100%;
                        max: 100%;
                        width: 100%;
                    }

                    & > a:not(:only-child):after
                    {
                        background: #003783;
                        justify-self: left;
                    }

                    & > :is(ol, ul)
                    {
                        & li
                        {
                            background: #0070ff;
                        }
                    }
                }
            }
        }
    }




    & > :is( header, nav, main, footer ) {
        box-sizing: content-box;
        display: grid;
        grid: none / auto 1fr;
        grid-auto-flow: column dense;
        align-items: center;
        padding: 0 clamp( var(--sides-gap), calc((100vw - var(--content-width)) / 2), 100vw);
        overflow-x: clip;
        align-content: stretch;
        align-items: stretch;
        /*column-gap: clamp(12px, 3vw, 36px);*/
    }

    & > nav {
        height: 40px;

        & li:focus-visible > a {
          background: yellow !important;
        }

        & li a {
            text-shadow: none !important;
            font-size: 16px !important;
            font-weight: 400;
        }
    }
     & > nav,
     & header > nav {
        grid-row: 2;
        align-self: center;
        justify-self: end;
        /*background: linear-gradient(to bottom, #0056d0 2px, #000000 0, #000000 0);
        background: linear-gradient(to bottom, rgb(213, 163, 56) 2px, #00193b 0, #000 100%, #000000 50%);*/
        background: linear-gradient(to bottom, #cb9d38 2px, #00193b 0, #000 100%, #000000 50%);
        text-shadow: 1px 1px #fff;
        font-size: 16px;
        font-weight: 500;

        & :is(ol, ul) {
            display: grid;
            grid: none / auto-flow max-content;
            align-self: start;

            & li {
                list-style: none;
                display: grid;

                & :is( a, a:visited )
                {
                    transition: 0.3s;
                    padding: 8px 30px;
                    color: #000;
                    align-content: center;
                    display: grid;
                    grid: auto / auto-flow;
                    align-items: center;
                    position: relative;
                    z-index: 1;
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                    -webkit-font-smoothing: subpixel-antialiased;
                    text-shadow: 1px 1px 0px #ffffff;
                }

/*                & :is( a:hover )
                {
                    color: #fff;
                    background: linear-gradient(to bottom, #cb9d38 2px, #0253cb 0);
                    text-shadow: none !important;
                }

                &:focus-within > a {
                    color: #fff !important;
                    background: linear-gradient(to bottom, #cb9d38 2px, #0253cb 0);
                    text-shadow: none !important;
                }*/

                &:focus-within > a:not(:only-child):after {
                    background-color: black;
                }

                &:hover > :is(ol, ul) {
                    visibility: visible !important;
                    background: #0070ff;
                    /*position: absolute;
                    transform: translate3d(-48px, 0px, 0px);*/
                    padding-top: 12px;
                    box-shadow: rgb(0 0 0 / 56%) 0px 9px 14px -6px;
                    opacity: 1;
                    top: 100%;
                    grid-row-start: none;

                    & li {

                        & > a {
                            color: #ffffff;
                            text-shadow: none;
                            font-size: 15px;
                            font-weight: 300;
                        }
                    }
                }
            }

            & > li > a:not(:only-child):after {
                content: '';
                width: 24px;
                /* height: 10px; */
                aspect-ratio: 1 / 1;
                background: #0056d0;
                display: inline-block;
                mask: url(../images/icons.svg#angle-down) center / contain no-repeat;
                -webkit-mask: url(../images/icons.svg#angle-down) center / contain no-repeat;
                justify-self: right;
                position: relative;
                top: 3px;
                right: -2px;
                transform: scaleX(1.5);

                &:hover{
                  background: #000;
                }
            }

            & > li > a:not(:only-child):hover:after {
                background: #000000;
            }

            & :is(ol, ul) {
                visibility: hidden;
                /*transform: scaleY(1) translate3d(-40px, 4px, 0px);
                transition: all;
                transition-timing-function: cubic-bezier(.42, 0, .58, 1);
                transition-duration: 100ms;*/
                opacity: 0;
                display: block;
                position: absolute;
                z-index: 3;
                top: 40px;
                min-width: 28%;
            }
        }
    }

    & > header {
        grid: 0 / auto 1fr;
    }

    & > nav {
        overflow: unset;
        grid: auto / 1fr 1fr !important;
        position: sticky;
        top: 100px;
        z-index: 10;
        float: inline-start;
        width: 100%;
        box-sizing: border-box;
        will-change: height;
        transition: height 0s;

        @media (width <= 1376px)
        {
            &{

                & > :is(ol, ul)
                {

                    & > li
                    {
                        & :is( a, a:visited )
                        {
                            padding: 9px clamp(1vw, 1.2vw, 3vw) 7px clamp(1vw, 1.2vw, 3vw) !important;
                        }

                        &:not(:only-child)
                        {

                        }
                    }
                }
            }
        }

/*        &:after{
            content: '';
            position: absolute;
            z-index: -1;
            inset: 0;
            background: inherit;
        }*/

        & > :is(ol, ul) {
            grid-column-start: 1;
            position: relative;
            top: 0px;

             & li {

                &:hover > a
                {
                    color: #fff;
                    background: #0253cb;
                    text-shadow: none !important;

                    &:not(:only-child):after {
                      background: #000;
                    }
                }



                /*&:hover > a:not(:only-child)
                &:not(:has(.sub-menu)):hover > a
                {
                    color: #fff;
                    background: linear-gradient(to bottom, #cb9d38 2px, #0253cb 0);
                    text-shadow: none !important;                  
                
                }*/



/*                &:hover > a:is(:only-child)
                {
                    color: #fff;
                    background: #0253cb;
                    text-shadow: none !important;  
                }*/

                & :is( a, a:visited ){
/*                    padding: 8px 14px 8px 14px !important;*/
                    font-weight: 300 !important;
                    font-size: 15px !important;
                    color: #fff !important;
                }
             }
        }
    }

    & > main {
        background: #f7f7f7;
    }
}


ul#menu-navigation > li:hover > a
{
      color: #fff;
      background: linear-gradient(to bottom, #cb9d38 2px, #0253cb 0) !important;
      text-shadow: none !important; 
  
}

/***** Top Header *****/

body > header {
    /*    background: linear-gradient(#000 0px, 3px, var(--anouncement-background) 0px, #efefea -100%);*/
    background: url(../images/wall.png) 0px 1px repeat-x;
    position: sticky;
    top: 0;
    margin-top: var(--anouncement-height);
    height: 100px;
    z-index: 20;

    &:before {
        content: '';
        position: absolute;
        z-index: 0;
        inset: 0;
        background: #000000;
    }

    &:after {
        content: '';
        position: absolute;
        z-index: 0;
        inset: 0;
        background: inherit;
        box-shadow: rgb(2, 83, 205) 0px 2px 0px inset;
    }

    & > a {
        grid-row: 2;
        display: grid;
        grid-auto-flow: column;
        line-height: 1;
        grid-gap: 0 0;
        grid-template-columns: 97px 1fr;
        text-shadow: 1px 1px #ffffff;
        z-index: 3;
        mix-blend-mode: darken;

        @media (width <= 500px)
        {
            &{
                grid-template-columns: 72px 1fr;
            }
            
        }

        & img {
            grid-area: left;
            position: absolute;
            z-index: 9999;
            top: -93px;
            width: 88px;
            aspect-ratio: 1 / 1;

            @media (width <= 500px)
            {
                &{
                    top: -77px;
                    width: 72px;                    
                }

            }
        }

        & h1 {
            transform: skewX(-7deg) scaleY(0.88);
            align-self: end;
            font-weight: 900;
            font-size: 32px;
            text-wrap: nowrap;
            grid-column-start: 2;
            text-align: left;
            text-size-adjust: auto;
            text-align-last: justify;
            color: #000000;
            font-optical-sizing: auto;
            letter-spacing: -1px;
            font-family: 'fnt-eng';
            padding: 0px 3px;

            @media (width <= 500px)
            {
                &{
                    font-size: 26px;
                }
            }
        }

        & h2 {
            align-self: start;
            font-weight: 900;
            font-size: 16px;
            font-family: system-ui;
            color: #0043a5;
            grid-column-start: 2;
            font-optical-sizing: auto;
            transform: scale(1, 0.9);
            text-align: center;
            background: linear-gradient(to right, transparent calc(10% - 1px), rgb(255, 255, 255) calc(20% - 1px), rgb(255, 255, 255) calc(80% + 1px), transparent calc(90% + 1px)), linear-gradient(transparent calc(50% - 1px), #0056d2 calc(50% - 1px), #0056d2 calc(50% + 1px), transparent calc(50% + 1px));
            
            @media (width <= 500px)
            {
                &{
                    font-size: 14px;
                }
            }
        }
    }

    & > nav {
        background: none;
        position: relative;
        margin-top: 20px;

        & > :is(ol, ul) {

            & > li {

                & a:not(:only-child):after {
                    background: #0056d0;
                }

                & > li > a:not(:only-child):hover:after {
                    background: black !important;
                }

               &:after {
                position: relative;
                content: "";
                height: 4px;
                width: calc(100% - 10px);
                inset: 0;
                border-radius: 10px;
                transition: background-color .3s;
                z-index: 0;
                display: block;
                margin: 0 auto;
                margin-bottom: -4px;
                top: -7px;
                }

                &:hover:after, &:focus-within:after {
                    background: #0070ff;

                }
                
                &:focus-within:after {
                    box-shadow: 
                    0px -5px 0px 0px var(--focus-within-background-color),
                    0px -6px 0px 0px var(--focus-within-background-color),
                    0px -7px 0px 0px var(--focus-within-background-color),
                    0px -8px 0px 0px var(--focus-within-background-color),
                    0px -9px 0px 0px var(--focus-within-background-color),
                    0px -10px 0px 0px var(--focus-within-background-color),
                    0px -11px 0px 0px var(--focus-within-background-color),
                    0px -12px 0px 0px var(--focus-within-background-color),
                    0px -13px 0px 0px var(--focus-within-background-color),
                    0px -14px 0px 0px var(--focus-within-background-color),
                    0px -15px 0px 0px var(--focus-within-background-color),
                    0px -16px 0px 0px var(--focus-within-background-color),
                    0px -17px 0px 0px var(--focus-within-background-color),
                    0px -18px 0px 0px var(--focus-within-background-color),
                    0px -19px 0px 0px var(--focus-within-background-color),
                    0px -20px 0px 0px var(--focus-within-background-color),
                    0px -21px 0px 0px var(--focus-within-background-color),
                    0px -22px 0px 0px var(--focus-within-background-color),
                    0px -23px 0px 0px var(--focus-within-background-color),
                    0px -24px 0px 0px var(--focus-within-background-color),
                    0px -25px 0px 0px var(--focus-within-background-color),
                    0px -26px 0px 0px var(--focus-within-background-color),
                    0px -27px 0px 0px var(--focus-within-background-color),
                    0px -28px 0px 0px var(--focus-within-background-color)
                }

                & :is( a:hover )
                {
                    color: #0056d2 !important;
                    background: none !important;
                    text-shadow: none !important;
                }

                &:focus-within > a {
                    color: #000000 !important;
                    text-shadow: none !important;
                }

                &:focus-within > :is(ol, ul) {
                    visibility: visible;
                    background: white;
                    /*position: absolute;
                    transform: translate3d(-48px, 0px, 0px);*/
                    padding-top: 12px;
                    box-shadow: rgb(0 0 0 / 56%) 0px 9px 14px -6px;
                    opacity: 1;
                    top: 100%;

                    & li {

                        & > a {
                            color: #ffffff;
                            text-shadow: none;
                            font-size: 15px;
                            font-weight: 300;
                        }
                    }
                }

            }

        }
    }

    & div {
        /* position: relative; */
        /* top: 13px; */
        /* margin-top: calc(10* var(--anouncement-height)); */
        height: var(--anouncement-height);
        z-index: 999;
        display: grid;
        /* background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(13, 85, 187, 1) 100%); */
        grid-auto-flow: column dense !important;
        padding: unset;
        grid: none / 1fr auto;
        grid-column: 1 / -1;
        justify-items: end;
        /* height: auto; */
        mix-blend-mode: multiply;
        /* align-items: start; */
        font-family: 'fnt-eng';

        /*&:before {
            content: '';
            inset: 0 clamp(-100vw, calc(((100vw - (var(--content-width)) ) / -2)), calc(var(--sides-gap) * -1) );
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            position: absolute;
            z-index: -2;
            background: inherit;

        }*/





        
        & [role="alert"] {
            font-size: 14px;
            color: #fff;
            padding: 5px 24px 5px 20px;
            border-radius: 0 0 0 7px;
            box-shadow: inset 0px 1px 0 #000;
            background: #000000;
            grid-gap: 7px !important;

            @media (width > 780px)
            {
                &{
                    padding: 5px 24px 5px 20px !important;
                }
            }

            & span {
                color: #d5a338;
                user-select: none;
            }


        }

        & [role="alert"], & nav
        {
            margin: 0;
            padding: 0;
            grid-row: none;
            grid-gap: 15px;
            display: grid;
            grid-auto-flow: column;
        }

        & nav {
            background: #0255cf;
            color: #000;
            padding: 5px 12px 5px 12px;
            border-radius: 0 0 7px 0;
            box-shadow: inset 0px 1px 0 #000;

            @media (width > 780px)
            {
                &{
                    padding: padding: 5px 12px 5px 12px; !important;
                }
            }

            & > a:not(:last-child):after {
                content: '\2B24';
                position: relative;
                font-size: 4px;
                color: #a1781d;
                inset: -3px 0 0 7px;
            }
        }

        & nav a, &:visited {
            color: #ffffff;
            transition: .3s;
            font-size: 13px;

            &:hover {
                color:white
            }

            &:active {
                color: #ff6d14
            }
        }
    }
}
/***** //Top Header *****/

body > main {
    grid: none / auto !important;
    display: contents !important;

    & > * {
        padding: 0 clamp( var(--sides-gap), calc((100vw - var(--content-width)) / 2), 100vw);
        overflow-x: clip;
    }

/*    & > article {
        background: url(../images/bg3.jpg) top center no-repeat;
        background-size: 1600px auto;
        height: 460px;
    }*/
}




main > article
{
    display: grid;

    & > header
    {
        display: grid;
        height: clamp(290px, 32vw, 440px);
        margin-bottom: 0px;
        position: relative;
        background: #fff;
        margin-bottom: -20px;
        grid-column: 1 / 3;
        align-content: center;

        & > *
        {
            position: relative;
            z-index: 1;
        }

        &:before
        {
            content: '';
            background-image: url(../images/bg-3.png);
            width: 100vw;
            height: inherit;
            position: absolute;
            z-index: 0;
            background-position: center;
            background-size: clamp(1180px, 90vw, 1540px) auto;
            background-repeat: no-repeat;
            background-color: #fafafa;
            background-blend-mode: multiply;
            justify-self: center;

            @media (width <= 980px)
            {
                &{
                    background-size: 115%;
                }
            }

            @media (width <= 880px)
            {
                &{
                    background-size: 122%;
                }
            }

            @media (width <= 800px)
            {
                &{
                    background-size: 135%;
                }
            }

            @media (width <= 720px)
            {
                &{
                    background-size: 145%;
                }
            }

            @media (width <= 630px)
            {
                &{
                    background-size: 160%;
                }
            }

            @media (width <= 565px)
            {
                &{
                    background-size: 190%;
                }
            }

            @media (width <= 430px)
            {
                &{
                    background-size: 1000px;
                }
            }
        }


    }
}


main
{
    overflow-x: clip;
    background: none !important;
}

main.home article.banner
{


    /*
    & > section:first-of-type
    {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-auto-flow: column;
        gap: 18px;

        & > article
        {
            overflow: hidden;
        }

        & > article:nth-of-type(2)
        {
            background: green;
            height: 190px;
        }

        & > article:nth-of-type(3)
        {
            background: yellow;
            height: 190px;
        }

        @media (width <= 760px)
        {
            max-width: 85vw;
            justify-self: center;
            margin:0 auto;
            height: auto;
            grid-template-columns: 1fr 1fr;

            & > article:nth-of-type(1)
            {
                grid-column-start: 1;
                grid-row-start: 1;
                background: rgb(0, 255, 55);
            }
        
            & > article:nth-of-type(2)
            {
                grid-column-start: 2;
                grid-row-start: 1;
                background: rgb(191, 16, 245);
            }
        
            & > article:nth-of-type(3)
            {
                grid-column-start: 2;
                grid-row-start: 2;
                background: rgb(230, 90, 199);
            }

            @media (width <= 500px)
            {
                background: red;
                grid-template-rows: repeat(3, 1fr);
                grid-template-columns: 1fr;
        
                & > article:nth-of-type(1)
                {
                    grid-column-start: 1;
                    grid-row-start: 1;
                    background: rgb(0, 255, 55);
                }
            
                & > article:nth-of-type(2)
                {
                    grid-column-start: 1;
                    grid-row-start: 2;
                    background: rgb(191, 16, 245);
                }
            
                & > article:nth-of-type(3)
                {
                    grid-column-start: 1;
                    grid-row-start: 3;
                    background: rgb(230, 90, 199);
                }
            }
        }
    }

    & > section:nth-of-type(2)
    {
        height: 50px;
        display: grid;
        align-items: center;
        align-content: center;
        grid-auto-flow: column dense !important;
        padding: unset;
        grid: none / 1fr auto;

        &:before
        {
            content: '';
            background: #e8e8e8;
            position: absolute;
            z-index: -5;
            height: inherit;
            width: 150vw;
            left: -50vw;
            margin: 0;
            padding: 0;
        }
    }

    & > section:nth-of-type(3)
    {
        background: rgb(230, 90, 199);
    }
    */

    & > section:nth-of-type(1)
    {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 12px;
        /* max-width: 90%; */
        margin: 0 auto;
        position: relative;
        z-index: 1;
        grid-column: 1 / 3;

        @media (width <= 780px)
        {
            &{
                grid-template-columns: repeat(2, 1fr) !important;
            }
        }

        @media (width <= 540px)
        {
            &{
                grid-template-columns: repeat(1, 1fr) !important;
                max-width: 90%;
                grid-gap: 4vw;
            }
        }

        & > article
        {
            display: grid;
            align-items: stretch;
            grid: repeat(1, clamp(170px, 15vw, 250px)) / 1fr;
            /* border-top: 7px solid #0253cc; */
            background: #001a3b;
            /* mix-blend-mode: inherit; */
            overflow: hidden;
            border-radius: 6px;


            &:hover
            {
                background: #000;

                & > header
                {
                    background: #fff;
                    color: #000;

                    & h1
                    {
                        color: #000;
                    }
                }
            }

            & > header
            {
                order: 2;
                background: #0253cc;
                position: relative;
                left: 0;
                padding: 12px;
                max-width: 100%;
                height: clamp(64px, 5.335vw, 100px);
                transition: all 0.3s;

                & > a
                {
                    color: #ffffff;
                    transition: color 0.3s;

                    &:hover
                    {
                        color: #000000;
                    }
                }

                & a > h1
                {
                    
                    /* text-shadow: 1px 1px 0 #ffffff; */
                    font-size: clamp(16px, 1.85vw, 21px);
                    line-height: 1.5;
                    /* padding: 4px 0; */
                    font-weight: 900;
                    -webkit-box-orient: vertical;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -moz-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    line-height: 1.35;
                    transition: all 0.3s;
                }

                & > time
                {
                    display: block;
                    color: #4d94ff;;
                    margin-bottom: 5px;
                    position: absolute;
                    bottom: -35px;
                }
            }

            & > p
            {
                order: 3;
                margin: 36px 18px 40px 18px;
                color: #ffffff;
                /* padding-bottom: 51px; */
                -webkit-box-orient: vertical;
                display: -webkit-box;
                -webkit-line-clamp: 5;
                line-clamp: 3;
                -moz-line-clamp: 3;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 1.4;
            }

            & > figure
            {
                overflow: hidden;
                order: 1;
                margin: 0;

                & a > img
                {
                    max-width: inherit;
                    object-fit: cover;
                    width: 100%;
                    min-height: 100%;
                    mix-blend-mode: exclusion;
                }
            }

            & a.readmore
            {
                position: relative;
                color: #cb9d38;
                /* z-index: 17; */
                /* background: #ffff00; */
                display: block;
                /* overflow: visible; */
                order: 3;
                /* height: 0; */
                justify-self: right;
                padding: 0 20px 20px;
                transition: color 0.3s;

                &:hover
                {
                  color: #0253cc;
                }
            } 
        }

        & > article:nth-of-type(4)
        {
            background: #000;

            & > header
            {
                background: #cb9d38;

                & > h1
                {
                    color: #000;
                }
            }
        }
    }



    & > section.special
    {
        display: grid;
        align-items: stretch;
        grid-auto-flow: column;
        padding: unset;
        grid: none / 1fr;
        margin: 80px 0 60px 0;
        align-content: center;
        grid-column: 1 / 3;
        --bg: #fef3e1;
        background: var(--bg);
        box-shadow: -10vw 0 var(--bg), -20vw 0 var(--bg), -30vw 0 var(--bg), -40vw 0 var(--bg), -50vw 0 var(--bg), -60vw 0 var(--bg), -70vw 0 var(--bg), -80vw 0 var(--bg), -90vw 0 var(--bg), -100vw 0 var(--bg), 10vw 0 var(--bg), 20vw 0 var(--bg), 30vw 0 var(--bg), 40vw 0 var(--bg), 50vw 0 var(--bg), 60vw 0 var(--bg), 70vw 0 var(--bg), 80vw 0 var(--bg), 90vw 0 var(--bg), 100vw 0 var(--bg);

        & > article
        {
            display: grid;
            grid: auto / 2fr 1fr;
            overflow: hidden;
            padding: 30px 0;

            & > header
            {
                grid-column: 1 / 3;
                grid-row: 1;
                margin: 0 0 10px 0;
                order: 1;

                & > a
                {
                  displayL contents;
                }

                & a > h1
                {
                    color: #000;
                    /* text-shadow: 1px 1px 0 #ffffff; */
                    font-size: clamp(22px, 3vw, 28px);
                    line-height: 1.5;
                    /* padding: 4px 0; */
                    font-weight: 900;
                    -webkit-box-orient: vertical;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -moz-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    line-height: 1.2;
                    margin-bottom: 10px;
                }

                & > time
                {
                    float: inline-end;
                    color: #b7861c;
                }
            }

            & > p
            {
                grid-column: 1;
                grid-row: 2;
                margin: 0;
                padding: 0 18px;
                color: #2a2a2a;
                line-height: 1.4;
                font-size: clamp(16px, 1.4vw, 17px);
            }

            & > figure
            {
                grid-row: 2;
                grid-column: 2;
                margin: 0;
                overflow: hidden;
                max-height: 100%;
                background: #001a3b;
                border-radius: 6px;

                & > a
                {
                  display: grid;
                }

                & a > img
                {
                    object-fit: cover;
                    width: 100%;
                    height: 100%;
                    mix-blend-mode: exclusion;
                }
            }

            & > a.readmore
            {
                color: #0056d0;
                justify-self: right;
            }
        }
    }

    & > section.videos,
    & > section.articles
    {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 12px;
        align-content: start;

        & > h2
        {
            margin-bottom: 20px;
            background-image: linear-gradient(#0068ff, #0068ff);
            background-repeat: no-repeat;
            background-size: 40% 4px;
            background-position-y: 100%;
            padding: 10px 0;
        }

        @media (width <= 760px)
        {
            &{
                grid-column: 1 / 3;
                grid-gap: 6px;
            }

            & > iframe
            {
                grid-column: 1 / 3;
                width: 100%;
                aspect-ratio: 16 / 9;
                border: 5px solid #001a3b;
                border-radius: 5px;
                width: unset;
            }

            & > article > header > h4
            {
                line-height: 1.5 !important;
                min-height: 65px !important;
            }

        }

        @media (width <= 540px)
        {
            /*grid-template-columns: repeat(1, 1fr) !important;
            max-width: 90%;
            grid-gap: 4vw;*/
        }

        & > article
        {

            & > header
            {

                & > h4
                {
                    font-size: 21px;
                }
            }

            & > figure
            {
                display: contents;

                & > img
                {
                    display: inline-block;
                    max-width: 100%;
                    height: auto;
                }
            }
        }
    }

    & > section.videos
    {
        grid-gap: 5px;

        & > h2
        {
            grid-row: 1;
            grid-column: 1 / -1;
        }

        & > iframe
        {
            grid-column: 1 / -1;
            width: 100%;
            aspect-ratio: 16 / 9;
            border: 5px solid #001a3b;
            border-radius: 5px;
        }

        & > article
        {
            display: grid;
            padding: 5px;
            background: #001a3b;
            border-radius: 5px;
            transition: all 0.2s;

            & > header
            {
                padding: 12px 10px;
                order: 2;
                display: grid;

                & > h4
                {
                    color: #fff;
                    -webkit-box-orient: vertical;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -moz-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    line-height: 1.5;
                    font-size: clamp(14px, 1.3vw, 18px);
                    min-height: 56px;
                    font-family: system-ui;
                    direction: rtl;
                }

                & > time
                {
                    font-size: 12px;
                    color: #4d94ff;
                    order: -1;
                    margin: 6px 0;
                }
            }

            & > p
            {
                order: 3;
                padding: 0 10px;;
                margin: 0;

                & > a
                {
                    color: rgb(213, 163, 56);
                    margin: 10px 0px !important;
                    display: block;
                    font-weight: 500;
                    color: #d5a338;

                    &:hover
                    {
                        color: red;
                    }
                }
                
            }


            &:hover, &.active
            {
                cursor: pointer;
                background: #d5a338;

                & > header
                {
                    & > h4
                    {
                        color: #000;
                    }
                    
                    & > time
                    {
                        color: #000;
                    }
                }

                & > p > a
                {
                    color: #000;

                    &:hover
                    {
                        color: #0253cb;
                    }
                }
            }
        }
    }

    & > section.articles
    {
        grid-template-columns: 1fr;


        & > article
        {
            display: grid;
            padding: 12px;
            background: #0056d217;
            background-clip: padding-box;
            border-radius: 8px;
            transform: scale(0.98);
            transform-origin: right;
            transition: background 0.3s;

            &:hover
            {
                background: #fef3e1 !important;

                & > header > a > h1
                {
                    color:black;
                }
            }


            & > header
            {
                & > a
                {
                    color: #0056d2;
                    font-size: 18px;

                    & h1
                    {   
                        transition: all 0.3s;

                        &:hover
                        {
                            color:#f81e38;
                        }
                    }
                }

                & > time
                {
                    font-size: clamp(13px, 1.55vw, 13px);
                    line-height: 1.5;
                    direction: rtl;
                    font-weight: 400;
                    color: #9e7c32;
                    margin-top: 6px;
                    display: block;
                    float: left;
                }

            }

            & > p
            {
                margin: 0;
                line-height: 1.4;
                color: #1a1a1a;
            }

            & > a.readmore
            {
                text-align: right;
                margin-top: 10px;
                color: #0067ff;
            }
        }

    }



    & > section.embed
    {
        display: grid;
        grid-column: 1 / 3;
        grid-template-columns: repeat(2, minmax(0px, 1fr));
        grid-gap: 10px;
        margin: 80px 0;
        box-shadow: 0px -47px 0px 0px #fff, 0px -48px 0px 0px rgba(27, 127, 204, .8);
        align-items: stretch;

        @media (width < 600px)
        {
            &{
                grid-template-columns: 1fr !important;
            }
        }

        & > iframe
        {
            width: calc(100% - 2px);
            height: auto;
            border-radius: 3px;
            box-shadow: none;
            display: block;
            margin: 0px 0px 12px;
            padding: 0px;
            overflow: hidden;
            aspect-ratio: 1/1;

            @media (width < 600px)
            {
                &{
                    height: 110vw !important;
                }
            }
        }



        & > div
        {
            display: grid;
            grid-template-columns: 1fr;
            grid-gap: 10px;

            & > div
            {
                padding: 0 10px;
                margin: 0 !important;
                max-width: unset !important;

                & iframe
                {
                    width: 100% !important;
                }
            }
        }
    }

    & > section.last
    {
        display: grid;
        align-items: stretch;
        grid-auto-flow: column;
        padding: unset;
        grid: none / repeat(2, 1fr);
        padding: 80px 0;
        grid-column: 1 / 3;
        grid-gap: 20px;
        --bg: #fef3e1;
        background: var(--bg);
        box-shadow: -10vw 0 var(--bg), -20vw 0 var(--bg), -30vw 0 var(--bg), -40vw 0 var(--bg), -50vw 0 var(--bg), -60vw 0 var(--bg), -70vw 0 var(--bg), -80vw 0 var(--bg), -90vw 0 var(--bg), -100vw 0 var(--bg), 10vw 0 var(--bg), 20vw 0 var(--bg), 30vw 0 var(--bg), 40vw 0 var(--bg), 50vw 0 var(--bg), 60vw 0 var(--bg), 70vw 0 var(--bg), 80vw 0 var(--bg), 90vw 0 var(--bg), 100vw 0 var(--bg);


        @media (width <= 560px)
        {
            &
            {
                grid: none / 1fr !important;
                grid-auto-flow: column;
                grid-column: 1/3;
            }
        }

        & > article
        {
            text-align: center;

            & > p
            {
                display: grid;
                grid-template-columns: repeat(auto-fit, 64px);
                /* padding: 0 100%; */
                grid-gap: 50px;
                /* max-width: 30%; */
                align-content: center;
                justify-content: center;

                    @media (width <= 560px)
                    {
                        &
                        {
                            grid-template-columns: minmax(64px, 64px) minmax(64px, 64px);
                        }
                    }

                & > a
                {
                    text-align: center;
                    font-size: clamp(13px, 1.55vw, 14px);
                    color: #707070;
                    white-space: nowrap;
                    display: grid;
                    grid-gap: 8px;

                    & > img
                    {

                    }
                }

                &.donate
                {
                    grid-template-columns: 1fr;
                    justify-self: center;
                    justify-items: center;
                    justify-content: center;

                    img
                    {
                            max-width: 80%;
                    }
                }
            }
        }
    }
}

body > footer
{
    grid: none / repeat(4, 1fr);
    background: #0253cc;
    position: relative;
    z-index: 3;
    margin-top:40px;

    & > div.footer-column
    {

        padding: 64px 0px;

        & > h3
        {
            color: #001a3b;
            margin-bottom: 20px;
        }

        & > ul
        {

            & > li
            {
                margin-bottom: 10px;

                & > a
                {
                    color: white;
                    font-size: 14px;
                    transition: all 0.1s;

                    &:hover
                    {
                        color: #70a9ff;
                    }
                }
            }
        }
    }

    & .copyright
    {
        grid-column: 1 / 5;
        color: #77a8f1;
        font-size: 14px;
    }
}


main:not(.home)
{
    & > article
    {
        display: grid;
        grid: auto / 60% 40%;

        @media (width <= 780px)
        {
            &{
                grid-column: 1/3 !important;
            }
        }

        & > header
        {
            height: clamp(100%, 24vw, 100%);
            position: relative;
            z-index: 2;
            margin-bottom: 0;
            padding: clamp(24px, 4vw, 3.5vw) 20px;

            &:before
            {
                background-image: url(../images/bg-2.png) !important;
            }

            & > h1
            {
                color: #000000;
                font-size: clamp(22px, 1.7vw, 2vw);
                font-weight: 900;
                mix-blend-mode: multiply;
                line-height: 1.6;
            }

            & > time
            {
                color: #0056d0;
                order: -1;
                font-size: clamp(14px, 0.9vw, 1vw);
            }

            &:before
            {
                background-size: clamp(1180px, 110vw, 2000px) auto;
            }
        }

        & > section
        {
            --bg: #fafafa;
            order: 1;
            padding: 0 clamp(4px, 20px, 1vw);
            background: var(--bg);
            box-shadow: -100vw 0px 0 100vw var(--bg);
            position: relative;
            z-index: 0;
            line-height: 1.65 !important;
            font-size: 17px !important;

            @media (width <= 780px)
            {
                &{
                    grid-column: 1/3 !important;
                    --bg: transparent !important;
                }
            }

            & > figure
            {
                margin:20px 0;
                padding: 0;

                * iframe
                {
                    width: 100% !important;
                    height: auto !important;
                    aspect-ratio: 16/9;
                }
            }

/*            & img
            {
                max-width: 100%;
            }*/

            & > div.social-media
            {
                direction: ltr;
                display: grid;
                grid-auto-flow: column;
                justify-content: start;
                grid-gap: 7px;
                background: #cb9d391c;
                padding: 3px 10px 3px 10px;
                margin-top: 15px;

                &:before
                {
                    content: attr(data-content);
                    position: absolute;
                    justify-self: right;
                    color: #bababa;
                    mix-blend-mode: multiply;
                }

                @media (width <= 1228px)
                {
                    &:before
                    {
                        content: '' !important;
                    }
                }

                @media (width <= 960px)
                {
                    &
                    {
                        padding-top: 30px;
                    }

                    &:before
                    {
                        top: 17px;
                        content: attr(data-content) !important;
                    }
                }

                & > a
                {
                    margin: 0;
                    padding: 0;
                    line-height: normal;
                    display: grid;
                    grid-auto-flow: column;
                    direction: ltr;
                    align-items: center;
                    align-content: center;
                    grid-gap: 5px;
                    padding: 3px 10px 3px 3px;
                    border-radius: 5px;
                    color: #919191;
                    transition: all 0.3s;
                    mix-blend-mode: multiply;

                    &:hover
                    {
                        background: #cef4fb;
                        color: #0253cc;
                    }

                    & > img
                    {
                        width: 24px;
                        max-width: 24px;
                    }

                    & > span
                    {
                        line-height: normal;
                        font-size: 14px;
                        white-space: nowrap;
                    }

                    @media (width <= 960px)
                    {
                        &{
                            padding: 3px 0px 3px 3px;
                        }

                        & > span
                        {
                            font-size: 9px;
                        }
                    }
                }
            }
        }

        & > aside
        {
            @media (width <= 780px)
            {
                &{
                    grid-column: 1/3 !important;
                    order: 2 !important;
                    z-index: 1;
                }
            }
        }
    }
}


aside
{
    order: 2;

    & > section
    {
        & > dl
        {
            margin-bottom: 15px;
            padding: 0 clamp(4px, 20px, 1vw);

            &.videos
            {
                & > dd > a
                {
                    display: grid;
                    grid-gap: 10px;
                    grid: auto / min-content;
                    max-width: min-content;
                    background: #001a3b;
                    padding: 10px;
                    border-radius: 7px;
                    color: white;

                    &:hover
                    {
                        color: #cb9d38;
                    }

                    &:before
                    {
                        content: '' !important;
                    }

                    & > img
                    {
                        max-width: 320px;
                    }
                }
            }

            & > dt
            {
                /* direction: rtl; */
                background-image: linear-gradient(#0068ff, #0068ff);
                background-repeat: no-repeat;
                background-size: 40% 4px;
                background-position: left 100%;
                padding: 10px 0;
                margin-bottom: 20px;

                & > a
                {
                    color: black;
                    transition: all 0.3s;
                    font-weight: 900;
                    font-size: 20px;

                    &:hover
                    {
                        color: blue;
                    }
                }
            }

            & > dd
            {
                margin: 5px clamp(4px, 20px, 1vw) 14px clamp(4px, 20px, 1vw);

                & > a
                {
                    color: #003f9c;
                    transition: all 0.3s;
                    font-size: 15px;
                    font-weight: 500;

                    &:before
                    {
                        content: '-';
                        position: absolute;
                        font-weight: 900;
                        margin-left: -12px;
                        margin-right: -12px;
                        color: #f81e38;
                    }

                    &:hover
                    {
                        color: black;
                    }


                }

            }
        }
    }
}


:is(main.category, main.search) > article > section
{
    

    & > article
    {
        display: grid;
        grid: auto / 4fr 2fr;
        direction: ltr;
        align-items: start;
        gap: 10px;
        margin-bottom: 15px;
        margin-top: 15px;
        background: #f1f7ff;
        padding: 10px;
        border-radius: 7px;
        transition: background 0.3s;

        &:hover
        {
            background: #fef3e1;
        }

        & > header
        {
            grid-column: 1 / -1;

            & > h1
            {

                & > a
                {
                    font-weight: 700;
                    color: #003f9c;
                    transition: all 0.3s;
                    font-size: 18px;

                    &:hover
                    {
                        color: #000;
                    }
                }
            }

            & > time
            {

            }
        }

        & > figure
        {
            margin: 0;
            padding: 0;
            overflow: hidden;
            order: 2;
            max-height: 160px;

            & > a
            {
                display: contents;

                & > img
                {
                    max-width: inherit;
                    object-fit: contain;
                    width: 100%;
                    min-height: 100%;
                }
            }
        }

        & > div
        {
            -webkit-box-orient: vertical;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            line-clamp: 4;
            -moz-line-clamp: 4;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.7;
            font-size: clamp(14px, 1.3vw, 15px);
            color: #1e1e1e;
        }

        & > a
        {
            grid-column: 1 / -1;
            grid-row: 3;
            text-align: left;
            display: grid;
            font-size: 14px;
            color: #0056d0;
        }
    }
}

main.post,
main.page
{
    & > article
    {
        & > section
        {
            & img{ max-width: 100%; }
        }
    }
}

p#response
{
    color: white;
    text-align: center;
    padding: 10px;
    border-radius: 7px;
}


main.page
{
    & > article
    {
        & > section
        {
            margin-top: 20px;
        }

        &> section.links
        {
            margin-bottom: 40px;
            &>ul
            {
                &> li
                {
                    list-style: inside;
                    color: #f81e38;

                    & > a
                    {
                        color: #0253cc;
                        font-weight: 600;
                        transition: all 0.3s;

                        &:hover
                        {
                            color: #f81e38;
                        }
                    }
                }
            }
        }

        & > section.books
        {
            & > article
            {
                background: white;
                padding: 12px;
                border-radius: 7px;
                box-shadow: 0 0 1px;
                margin-top: 20px;

                &> header
                {
                    & > a
                    {
                        color: #0253cc;
                        transition: all 0.3s;

                        &:hover
                        {
                            color: #9e7c32;
                        }
                    }

                    &>p
                    {
                        color: #9e7c32;
                        margin: 0 0 10px 0;
                    }
                }

                & > a{

                    display: block;

                    & > img
                    {
                        max-height: 250px;
                        width: 100%;
                        background: white;
                        object-fit: contain;
                    }
                }
                &> p
                {
                    color: #000;
                    -webkit-box-orient: vertical;
                    display: -webkit-box;
                    -webkit-line-clamp: 7;
                    line-clamp: 7;
                    -moz-line-clamp: 7;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-size: clamp(13px, 1.5vw, 16px) !important;
                    margin-top: 0;

                    &>a
                    {
                        direction: rtl;
                        display: block;
                        color: red;
                        margin: 0 0 10px 0;
                        font-weight: 600;
                    }
                }
            }
        }

        & > section.videos
        {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 12px;
            align-content: start;
            grid-gap: 5px;


            & > h2
            {
                grid-row: 1;
                grid-column: 1 / -1;
                            margin-bottom: 20px;
            background-image: linear-gradient(#0068ff, #0068ff);
            background-repeat: no-repeat;
            background-size: 40% 4px;
            background-position: left 100%;
            padding: 10px 0;
            }

            & > iframe
            {
                grid-column: 1 / -1;
                width: 100%;
                aspect-ratio: 16 / 9;
                border: 5px solid #001a3b;
                border-radius: 5px;
            }

            & > article
            {
                display: grid;
                padding: 5px;
                background: #001a3b;
                border-radius: 5px;
                transition: all 0.2s;

                & > header
                {
                    padding: 12px 10px;
                    order: 2;
                    display: grid;

                    & > h4
                    {
                        color: #fff;
                        -webkit-box-orient: vertical;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        line-clamp: 2;
                        -moz-line-clamp: 2;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        line-height: 1.5;
                        font-size: clamp(14px, 1.3vw, 18px);
                    }

                    & > time
                    {
                        font-size: 12px;
                        color: #4d94ff;
                        order: -1;
                        margin: 6px 0;
                    }
                }
                & > figure
                {
                    display: contents;

                    & > img
                    {
                        display: inline-block;
                        max-width: 100%;
                        height: auto;
                    }
                }
                & > p
                {
                    order: 3;
                    padding: 0 10px;;
                    margin: 0;

                    & > a
                    {
                        color: rgb(213, 163, 56);
                        margin: 10px 0px !important;
                        display: block;
                        font-weight: font-size: clamp(12px, 1.3vw, 14px);;
                        color: #d5a338;
                    }
                    
                }


                &:hover, &.active
                {
                    cursor: pointer;
                    background: #d5a338;

                    & > header
                    {
                        & > h4
                        {
                            color: #000;
                        }
                        
                        & > time
                        {
                            color: #000;
                        }
                    }

                    & > p > a
                    {
                        color: #000;

                        &:hover
                        {
                            color: #0253cb;
                        }
                    }
                }
            }
        }
    }
}

div.pagination
{
    text-align: center;
    margin-top:20px;
    margin-bottom:40px;

    & > .page-numbers
    {
        padding: 0 12px;
        display: inline-grid;
        vertical-align: middle;
        background: #4d94ff;
        color: white;
        border-radius: 6px;
        margin: 0;
        justify-content: center;
        font-size: 14px;
        align-items: center;
        align-content: center;

        &.current{ background: gray; }
        &.dots{background: #4e94ff8c;}
        &:not(.current, .dots):hover{ background: #0056d0; }
    }
}

#searchform
{
    & label{ display: none; }
    & input[type="text"]
    {
        border: 1px solid #bcbcbc;
        box-shadow: inset 2px 2px 0 #f0f0f0;
        border-radius: 5px;
        background: white;
        padding: 6px 12px;
        resize: none;
        font-family: var(--font);
        width: 300px;        
    }
    & input[type="submit"]
    {
        border-radius: 5px;
        background: #0056d2;
        padding: 8px 12px;
        border: none;
        color: white;       
    }
}