*, ::after, ::before{ box-sizing:border-box }
div, section, header, nav, main, body, article, aside, dialog, figcaption, figure, footer, hgroup { margin: 0; padding: 0;}
ol, ul, li {margin: 0; padding: 0; list-style: none;}
h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0;}
b, strong, small, sub, sup{margin: 0; padding: 0;}
a, p, span, label, hr { margin: 0; padding: 0; }
button, input, optgroup, select, textarea, option {margin:0; padding: 0}
audio, canvas, progress, video {display:inline-block; vertical-align:baseline}
code, kbd, pre, samp, mark, s, blockquote{ margin:0; padding: 0 }
caption, img, fieldset, svg { margin:0; padding: 0 }
th, table, td, thead, tbody, tr { margin: 0; padding: 0; }

template { display: none; }


/* Background colors */
.bg-lite-yellow {background-color: #f9f6d7!important;}
.bg-lite-green {background-color: #cdf6ce!important;}
.bg-shy-green {background-color: #eef8ee!important;}
.bg-lite-blue {background-color: #c4e0fa!important;}
.bg-lite-purple {background-color: #e0c5e9!important;}
.bg-lite-orange {background-color: #f6decd!important;}
.bg-lite-pink {background-color: #e59dc5!important;}
.bg-red {background-color: #d4142a!important;}
.bg-lite-gray {background-color: rgb(197 194 209 / 89%)!important;}
.bg-skyblue {background-color: rgba(160, 210, 250, 0.7)!important;}
.bg-lite-ash {background-color: #b7bbbe!important;}
.bg-black { background-color: #252222;}
.bg-dark {background-color: #000;}
.bg-white {background-color: white;}
.bg-evengreen { background-color: #028950; }

/* Text Colors */
.c-white{color: #fff!important;}
.c-faint{color: #f9f3f3!important}
.c-black{color: #000!important;}
.c-bgray { color: #615e5e;}
.c-ablue {color: aliceblue;}
.c-evergreen { color: #028950; }
.c-green { color: #005e36;}

/* Height ft Width = Size */
.size8 {height: 8px; width: 8px;}
.size10 {height: 10px; width: 10px;}
.size13 {height: 13px; width: 13px;}
.size14 {height: 14px; width: 14px;}
.size15 {height: 15px; width: 15px;}
.size16 {height: 16px; width: 16px;}
.size17 {height: 17px; width: 17px;}
.size18 {height: 18px; width: 18px;}
.size20 {height: 20px; width: 20px;}
.size24 {height: 24px; width: 24px;}
.size30 {height: 30px; width: 30px;}
.size34 {height: 34px; width: 34px;}
.size40 {height: 40px; width: 40px;}
.size48 {height: 48px; width: 48px;}
.size60 {height: 60px; width: 60px;}
.size80 {height: 80px; width: 80px;}
.size100 {height: 100px; width: 100px;}
.size120 {height: 120px; width: 120px;}
.size150 {height: 150px; width: 150px;}
.size180 {height: 180px; width: 180px;}
.size200 {height: 200px; width: 200px;}
.size240 {height: 240px; width: 240px;}
.size260 {height: 260px; width: 260px;}
.size320 {height: 320px; width: 320px;}
.size340 {height: 340px; width: 340px;}
.size360 {height: 360px; width: 360px;}
.size420 {height: 420px; width: 420px;}
.size460 {height: 460px; width: 460px;}
.size480 {height: 480px; width: 480px;}
.size520 {height: 520px; width: 520px;}
.size560 {height: 560px; width: 560px;}
.size620 {height: 620px; width: 620px;}

/* Font Size */
.af-small-text{font-size: 11px;}
.af-normal-text{font-size: 14px;}
.af-half-text{font-size: 16px;}
.af-full-text{font-size: 24px;}
.af-head-text{font-size: 32px; }
.af-boss-text{font-size: 40px; font-weight: bold;}
.af-heading {font-size: 52px; font-weight: 700;}

.ft-size11 {font-size: 11px;}
.ft-size12 {font-size: 12px;}
.ft-size13 {font-size: 13px;}
.ft-size14 {font-size: 14px;}
.ft-size16 {font-size: 16px;}
.ft-size17 {font-size: 17px;}
.ft-size20 {font-size: 20px;}
.ft-size25 {font-size: 25px;}
.ft-size30 {font-size: 30px;}
.ft-size35 {font-size: 35px;}
.ft-size40 {font-size: 40px;}
.ft-size48 {font-size: 48px;}
.ft-size52 {font-size: 52px;}
.ft-initial{font-size: initial;}

/* Font Weight */
.fw-200 {font-weight: 200 !important;}
.fw-300 {font-weight: 300 !important;}
.fw-400 {font-weight: 400 !important;}
.fw-500 {font-weight: 500 !important;}
.fw-700 {font-weight: 700 !important;}
.fw-800 {font-weight: 800 !important;}
.fw-900 {font-weight: 900 !important;}
.fw-bold {font-weight: bold !important;}

/* Box, Layout and Wrappers */
.af-body-container { min-height: 100vh; display: block;}
.af-container { position: relative; display: block; margin: 0 auto; }
.af-float-container { position: absolute; display: block;}
.af-fix-container { position: fixed; display: block;}
.af-cover-container { position: relative; display: block; }

.af-row { display: flex; flex-wrap: wrap; box-sizing: border-box;}
.af-right-row { display: flex; flex-direction: row-reverse; }
.af-flow-column { display: flex; flex-direction: column; }
.af-fix-row { display: flex;}
.af-center-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }

.af-column { flex: 1 1 auto; max-width: 100%; }
.af-pin-column{ flex-basis: 15%; max-width: 15%; }
.af-qurd-column { flex-basis: 25%; max-width: 25%; }
.af-mini-column { flex-basis: 30%; max-width: 30%; }
.af-half-column { flex-basis: 50%; max-width: 50%; }
.af-major-column { flex-basis: 60%; max-width: 60%; }
.af-qurt-column { flex-basis: 75%; max-width: 75%; }
.af-shalf-column { flex-basis: 45%; max-width: 45%; }
.af-full-column { flex-basis: 90%; max-width: 90%; }
.af-column-by15 { flex-basis: 15%; max-width: 15%; }
.af-column-by30 { flex-basis: 30%; max-width: 30%; }
.af-column-by25 { flex-basis: 25%; max-width: 25%; }
.af-column-by45 { flex-basis: 45%; max-width: 45%; }
.af-column-by50 { flex-basis: 50%; max-width: 50%; }
.af-column-by65 { flex-basis: 65%; max-width: 65%; }
.af-column-by75 { flex-basis: 75%; max-width: 75%; }
.af-column-by90 { flex-basis: 90%; max-width: 90%; }

/* Grid */
.af-grid-by2, .af-grid-by3, .af-grid-by4 {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-rows: auto;
}
.af-grid-by2 {
    grid-template-columns: 1fr 1fr;
}
.af-grid-by3 {
    grid-template-columns: 1fr 1fr 1fr;
}
.af-grid-by4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}


/* Nav Bar */
.af-navbar {
    position: fixed;
    top: 0;
    width: 100%;
    box-shadow: 5px 0 20px -16px rgb(0 0 0 / 65%);
    background-color: #fff;
    z-index: 1;
}

.af-sticky-navbar {
    position: sticky;
    top: 0;
    width: 100%;
    max-width: 100%;
    background-color: #fff;
}

.af-nav { display: flex; }
.af-nav-wrap-around, .af-nav-wrap-between, .af-nav-wrap-end, .af-nav-wrap-center {
    display: flex; align-items: center; /* margin-right: auto; margin-left: auto; */
}
.af-start-nav { display: flex; align-items: flex-start;}
.af-nav-wrap-around { justify-content: space-around; }
.af-nav-wrap-between { justify-content: space-between; }
.af-nav-wrap-end { justify-content: end; }
.af-nav-wrap-center { justify-content: center; }

.af-nav-link {
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-decoration: none;
    padding: 10px 20px;
    text-align: left;
    /* margin-left: auto;
    margin-right: auto; */
}


/* Box Appearance */
.box-raise {
    transition: box-shadow 0.15s ease,transform 0.15s ease;
    will-change: box-shadow,transform;
    box-shadow: 0px 2px 4px rgba(45, 35, 66, 0.4),0px 7px 13px -3px rgba(45, 35, 66, 0.3),inset 0px -3px 0px rgba(54, 57, 90, 0.2);
}
.box-raise:hover {
    box-shadow: 0px 4px 8px rgba(45, 35, 66, 0.4),0px 7px 13px -3px rgba(45, 35, 66, 0.3),inset 0px -3px 0px rgba(54, 57, 90, 0.2);
    transform: translateY(-5px);
}

/* Button */
button { outline: none; border:0px solid white; }
.af-btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    padding: 0.7rem 1rem;
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0px 2px 4px rgba(45, 35, 66, 0.4),0px 7px 13px -3px rgba(45, 35, 66, 0.3),inset 0px -3px 0px rgba(54, 57, 90, 0.2);
}

.af-btn-jump {
    cursor: pointer;
    transition: box-shadow 0.15s ease,transform 0.15s ease;
    will-change: box-shadow, transform;
    box-shadow: 0px 2px 4px rgba(45, 35, 66, 0.4),0px 7px 13px -3px rgba(45, 35, 66, 0.3),inset 0px -3px 0px rgba(54, 57, 90, 0.2);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.af-btn-jump:hover {
    box-shadow: 0px 4px 8px rgba(45, 35, 66, 0.4),0px 7px 13px -3px rgba(45, 35, 66, 0.3),inset 0px -3px 0px rgba(54, 57, 90, 0.2);
    transform: translateY(-5px);
}
.af-btn-jump:focus {
    box-shadow: inset 0 0 0 1.5px rgba(54, 57, 90, 0.2),0px 2px 4px rgba(45, 35, 66, 0.4),0px 7px 13px -3px rgba(45, 35, 66, 0.3),
    inset 0px -3px 0px rgba(54, 57, 90, 0.2);
}
.af-btn-jump:active {
    box-shadow: inset 0px 3px 7px rgba(54, 57, 90, 0.2);
    transform: translateY(2px);
}

.af-btn-flow {
    background-color: #0a2ceb;
    transition: background-color .3s,color .3s,box-shadow .3s,transform .2s ease;
    color: #fff;
    text-decoration: none;
    align-items: center;
}

.af-btn-flow:hover {
    background-color: rgb(28 41 185);
    box-shadow: none;
    transform: scale(0.9);
}
.af-btn-flow:active {
    box-shadow: none;
    transform: scale(1);
}


/* Form and Inputs */
.af-full-form { display: grid; outline: none; box-sizing: border-box; width: 100%;}
.af-full-input { width: 100%; min-height: 4vh; padding: 0.2rem 0.5rem;}
.af-form { display: block; outline: none; box-sizing: border-box; }
.af-input { min-height: 4vh; padding: 0.2rem 0.5rem;}
.af-large-input { min-height: 6vh; padding: 0.3rem 0.6rem; font-size: 100%;}
.af-full-input:focus-visible, .af-input:focus-visible, .af-large-input:focus-visible{
    outline: none;
}
input[type="button"] { cursor: pointer;}

/* Width */
.w-5{ width: 5%; max-width: 5%;}
.w-10{ width:10%; max-width: 10%;}
.w-15{ width:15%; max-width: 15%;}
.w-20{ width:20%;  max-width: 20%;}
.w-25{ width:25%;  max-width: 25%;}
.w-30{ width:30%;  max-width: 30%;}
.w-35{ width:35%;  max-width: 35%;}
.w-40{ width:40%;  max-width: 40%;}
.w-45{ width:45%;  max-width: 45%;}
.w-50{ width:50%;  max-width: 50%;}
.w-55{ width:55%;  max-width: 55%;}
.w-60{ width:60%;  max-width: 60%;}
.w-65{ width:65%;  max-width: 65%;}
.w-70{ width:70%;  max-width: 70%;}
.w-75{ width:75%;  max-width: 75%;}
.w-80{ width:80%;  max-width: 80%;}
.w-85{ width:85%;  max-width: 85%;}
.w-90{ width:90%;  max-width: 90%;}
.w-95{ width:95%;  max-width: 95%;}
.w-100{ width:100%;  max-width: 100%;}


/* Padding */
.by-space {padding: 0.5rem;}
.by-space-top {padding-top: 0.5rem;}
.by-space-bottom {padding-bottom: 0.5rem;}
.by-space-left {padding-left: 0.5rem;}
.by-space-right {padding-right: 0.5rem;}
.by-space-horizon {padding-left: 0.5rem; padding-right: 0.5rem;}
.by-space-vertical {padding-top: 0.5rem; padding-bottom: 0.5rem;}

.af-space {padding: 1rem;}
.af-space-top {padding-top: 1rem;}
.af-space-bottom {padding-bottom: 1rem;}
.af-space-left {padding-left: 1rem;}
.af-space-right {padding-right: 1rem;}
.af-space-horizon {padding-left: 1rem; padding-right: 1rem;}
.af-space-vertical {padding-top: 1rem; padding-bottom: 1rem;}

.af-space-x2 {padding: 2rem;}
.af-space-x2-top {padding-top: 2rem;}
.af-space-x2-bottom {padding-bottom: 2rem;}
.af-space-x2-left {padding-left: 2rem;}
.af-space-x2-right {padding-right: 2rem;}
.af-space-x2-horizon {padding-left: 2rem; padding-right: 2rem;}
.af-space-x2-vertical {padding-top: 2rem; padding-bottom: 2rem;}

.af-space-x3 {padding: 3rem;}
.af-space-x3-top {padding-top: 3rem;}
.af-space-x3-bottom {padding-bottom: 3rem;}
.af-space-x3-left {padding-left: 3rem;}
.af-space-x3-right {padding-right: 3rem;}
.af-space-x3-horizon {padding-left: 3rem; padding-right: 3rem;}
.af-space-x3-vertical {padding-top: 3rem; padding-bottom: 3rem;}

.af-space-x4 {padding: 4rem;}
.af-space-x4-top {padding-top: 4rem;}
.af-space-x4-bottom {padding-bottom: 4rem;}
.af-space-x4-left {padding-left: 4rem;}
.af-space-x4-right {padding-right: 4rem;}
.af-space-x4-horizon {padding-left: 4rem; padding-right: 4rem;}
.af-space-x4-vertical {padding-top: 4rem; padding-bottom: 4rem;}

.af-space-x5 {padding: 5rem;}
.af-space-x5-top {padding-top: 5rem;}
.af-space-x5-bottom {padding-bottom: 5rem;}
.af-space-x5-left {padding-left: 5rem;}
.af-space-x5-right {padding-right: 5rem;}
.af-space-x5-horizon {padding-left: 5rem; padding-right: 5rem;}
.af-space-x5-vertical {padding-top: 5rem; padding-bottom: 5rem;}

/* Margin */
.by-gap {margin: 0.5rem;}
.by-gap-top {margin-top: 0.5rem;}
.by-gap-bottom {margin-bottom: 0.5rem;}
.by-gap-left {margin-left: 0.5rem;}
.by-gap-right {margin-right: 0.5rem;}
.by-gap-horizon {margin-left: 0.5rem; margin-right: 0.5rem;}
.by-gap-vertical {margin-top: 0.5rem; margin-bottom: 0.5rem;}

.af-auto-gap {margin-left: auto; margin-right: auto;}
.af-gap {margin: 1rem;}
.af-gap-top {margin-top: 1rem;}
.af-gap-bottom {margin-bottom: 1rem;}
.af-gap-left {margin-left: 1rem;}
.af-gap-right {margin-right: 1rem;}
.af-gap-horizon {margin-left: 1rem; margin-right: 1rem;}
.af-gap-vertical {margin-top: 1rem; margin-bottom: 1rem;}

.af-gap-x2 {margin: 2rem;}
.af-gap-x2-top {margin-top: 2rem;}
.af-gap-x2-bottom {margin-bottom: 2rem;}
.af-gap-x2-left {margin-left: 2rem;}
.af-gap-x2-right {margin-right: 2rem;}
.af-gap-x2-horizon {margin-left: 2rem; margin-right: 2rem;}
.af-gap-x2-vertical {margin-top: 2rem; margin-bottom: 2rem;}

.af-gap-x3 {margin: 3rem;}
.af-gap-x3-top {margin-top: 3rem;}
.af-gap-x3-bottom {margin-bottom: 3rem;}
.af-gap-x3-left {margin-left: 3rem;}
.af-gap-x3-right {margin-right: 3rem;}
.af-gap-x3-horizon {margin-left: 3rem; margin-right: 3rem;}
.af-gap-x3-vertical {margin-top: 3rem; margin-bottom: 3rem;}

.af-gap-x4 {margin: 4rem;}
.af-gap-x4-top {margin-top: 4rem;}
.af-gap-x4-bottom {margin-bottom: 4rem;}
.af-gap-x4-left {margin-left: 4rem;}
.af-gap-x4-right {margin-right: 4rem;}
.af-gap-x4-horizon {margin-left: 4rem; margin-right: 4rem;}
.af-gap-x4-vertical {margin-top: 4rem; margin-bottom: 4rem;}

.af-gap-x5 {margin: 5rem;}
.af-gap-x5-top {margin-top: 5rem;}
.af-gap-x5-bottom {margin-bottom: 5rem;}
.af-gap-x5-left {margin-left: 5rem;}
.af-gap-x5-right {margin-right: 5rem;}
.af-gap-x5-horizon {margin-left: 5rem; margin-right: 5rem;}
.af-gap-x5-vertical {margin-top: 5rem; margin-bottom: 5rem;}




/* Break Points */
@media screen and (max-width: 998px) {
    .af-grid-by2 , .af-grid-by3 {
        /* grid-auto-columns: 1fr;
        grid-column-gap: 1rem; */
        grid-template-columns: 1fr 1fr;
    }
    
    .af-grid-by4 { grid-template-columns: 1fr 1fr 1fr; }
}

@media screen and (max-width: 720px) {
    .af-grid-by2 , .af-grid-by3, .af-grid-by4 {
        grid-template-columns: 1fr 1fr;
    }

    .af-pin-column{ flex-basis: 20%; max-width: 20%; }
    .af-qurd-column { flex-basis: 50%; max-width: 50%; }
    .af-mini-column { flex-basis: 45%; max-width: 45%; }
    .af-half-column { flex-basis: 95%; max-width: 95%; }
    .af-major-column { flex-basis: 90%; max-width: 90%; }
    .af-qurt-column { flex-basis: 95%; max-width: 95%; }
    .af-shalf-column { flex-basis: 90%; max-width: 90%; }

    /* .af-nav-wrap-around, .af-nav-wrap-between, .af-nav-wrap-end, .af-nav-wrap-center {
        flex-direction: column;
        align-items: normal;
    } */
}

@media screen and (max-width: 576px) {
    .af-grid-by2, .af-grid-by3, .af-grid-by4 {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .af-pin-column{ flex-basis: 25%; max-width: 25%; }
    .af-qurd-column, .af-mini-column , .af-half-column , .af-major-column ,.af-qurt-column ,.af-shalf-column {
        flex-basis: 100%;
        max-width: 100%;
    }
    
}