:root {
    --green: #3a7a99;
    --cream: #f2efe8;
    --lgreen: #3a7a99;
}

body 
{
    -webkit-transform: translateZ(0); /* Triggers GPU rendering */
}

.na-color-green
{
    color: var(--green) !important;
}

.na-color-cream
{
    color: var(--cream) !important;
}

.na-color-lgreen
{
    color: var(--lgreen) !important;
}

.uk-button-primary
{
    background-color: var(--green);
    color: var(--cream) !important;
}

.uk-button-primary:hover
{
    background-color: var(--lgreen);
    color: rgb(50, 50, 50) !important;
}
.uk-navbar-nav, ul, li, a 
{
    color: #333 !important;
    text-transform: none !important;
    text-decoration: none !important;
    transition: color 0.2s, transform 0.1s !important;
    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: lighter !important;
}

.uk-button
{
    text-transform: none !important;
    border-radius: 25px !important;
}

.uk-subnav li p
{
    color: var(--cream) !important;
}

.uk-section-small 
{
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* .uk-navbar-dropdown 
{
    width: auto !important;
} */

.uk-icon-button 
{
    background-color: var(--green) !important;
    color: var(--cream) !important;
}
.na-nav-bc 
{
    background-color: var(--white) !important;
    color: var(--cream) !important;
}

a:hover 
{
    color: #3a7a99 !important; 
}

.na-header-circle
{
    border-radius: 50%;
    height: revert-layer !important;
    object-fit: cover;
}

.na-image-background-color
{
  background-color: #aeb3ad;
}

.na-image-background-color img 
{
    mix-blend-mode: multiply;
}

.na-card-border 
{
    position: relative;
    border: 1px solid #aaa;
    width: 100%;
    height: 100%;
    padding: 24px 24px;
    border-radius: 20px;
}

.na-header-color
{
    color: black !important;
}


.na-card-border {
    position: relative;
    border: 1px solid #aaa;
    width: 100%;
    height: 100%;
    padding: 24px 24px;
    border-radius: 20px;
}

#stage {
    width: 100%;
    height: 100%;
    transition: transform 2s;
    transform-style: preserve-3d;
}

#shape {
    margin: 0 auto;
    height: 100px;
    width: 100px;
    transform-style: preserve-3d;
    animation: cube 8s infinite linear;
}

.plane {
    position: absolute;
    max-height: 100px;
    width: 100px;
    transition: transform 2s, opacity 2s;
    backface-visibility: hidden;
}

.backfaces .plane {
    backface-visibility: visible;
}

@keyframes cube {
    from { transform: rotateY(0); }
    to   { transform: rotateY(-315deg); }
}

.ring > .one {
    transform: rotateY(0deg) translateZ(200px);
}

.ring > .two {
    transform: rotateY(45deg) translateZ(200px);
}

.ring > .three {
    transform: rotateY(90deg) translateZ(200px);
}

.ring > .four {
    transform: rotateY(135deg) translateZ(200px);
}

.ring > .five {
    transform: rotateY(180deg) translateZ(200px);
}

.ring > .six {
    transform: rotateY(225deg) translateZ(200px);
}

.ring > .seven {
    transform: rotateY(270deg) translateZ(200px);
}

.ring > .eight {
    transform: rotateY(315deg) translateZ(200px);
}

@media screen and (max-width: 640px) 
{

}