/*** Other Pages ***/
div.col-break {
    break-after: column;
}

div#otherpage > div > div,
body.cke_editable > div {
    padding: 20px 15%;
}

div.white h1,
div.lblue h1,
div.lgreen h1,
div.lgray h1,
div.blue h1,
div.white h2,
div.lblue h2,
div.lgreen h2,
div.lgray h2,
div.blue h2,
div.white h3,
div.lblue h3,
div.lgreen h3,
div.lgray h3,
div.blue h3,
div.white h4,
div.lblue h4,
div.lgreen h4,
div.lgray h4,
div.blue h4,
div.white h5,
div.lblue h5,
div.lgreen h5,
div.lgray h5,
div.blue h5 {
    margin-top: 0;
}

div.blue {
    background-color: #09354D;
    color: white;
}

div.lblue {
    background-color: rgb(0, 121, 148);
    color: white;
}

div.white {
    color: rgb(9, 53, 77);
}

div.lgreen {
    background-color: rgb(165, 216, 82);
    color: rgb(9, 53, 77);
}

div.lgray {
    background-color: rgb(247, 249, 250);
}

    div.lgray h1,
    div.lgray h2 {
        color: rgb(1, 147, 177);
    }

    div.lgray h3,
    div.lgray h4,
    div.lgray h5 {
        color: #111;
    }

.yellow {
    background-color: #ffd83c;
}

.sky {
    background-color: hsl(207, 66%, 37%);
    color: white;
}

.dblue {
    background-color: hsl(207, 61%, 22%);
    color: white;
}

.aqua {
    background-color: hsl(173, 48%, 34%);
    color: white;
}

.purple {
    background-color: hsl(272, 34%, 53%);
    color: white;
}

.orange {
    background-color: hsl(9, 83%, 48%);
    color: white;
}

.bgreen {
    background-color: hsl(98, 50%, 33%);
    color: white;
}

div.left-col,
div.right-col {
    display: inline-block;
    vertical-align: top;
    width: 49%;
    box-sizing: border-box;
}

div.left-col {
    padding-right: 8px;
}

div.right-col {
    padding-left: 8px;
}

    div.left-col.small,
    div.right-col.small {
        width: 29%;
    }

    div.left-col.large,
    div.right-col.large {
        width: 70%;
    }

div.two-col {
    columns: 2;
}


div.vcenter,
div.vcenter div.left-col,
div.vcenter div.right-col {
    vertical-align: middle;
}

div.vcenter {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    div.vcenter > p,
    div.vcenter > ul {
        margin-top: 0px;
    }

div.vbottom {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.vid-16-by-9 {
    position: relative;
    padding-top: 27.75%
}

.chpt-links,
ul.std-btns,
ul.nav-btns,
ul.content-list {
    list-style-type: none;
    margin: 10px 0 0 0;
    padding: 0;
}

.chpt-txt-ctnr div.left,
.chpt-txt-ctnr div.right {
    vertical-align: top;
    display: inline-block;
}

.chpt-txt-ctnr div.left {
    width: 29%;
}

.chpt-txt-ctnr div.right {
    width: 70%;
}

.chpt-links li,
ul.nav-btns li,
ul.std-btns li,
ul.content-list li {
    padding: 0;
    margin-bottom: 8px;
}

    .chpt-links li a,
    ul.nav-btns > li a,
    div.nav-btns > a,
    a.nav-btn {
        border-radius: 4px;
        border: 1px solid #eee;
        padding: 10px 28px 10px 10px;
        text-decoration: none;
        width: 100%;
        display: inline-block;
        position: relative;
        box-sizing: border-box;
    }

        .chpt-links li a::after,
        ul.nav-btns > li a::after,
        div.nav-btns > a::after,
        a.nav-btn::after {
            font-family: "FontAwesome";
            font-weight: 900;
            content: "\f138";
            float: right;
            position: absolute;
            top: calc(10px + .5ch);
            right: 10px;
        }

a.btn-link,
a.std-btn {
    display: inline-block;
    text-align: center;
    border: 1px solid #aaa;
    border-radius: 4px;
    font-weight: bold;
    line-height: 26px;
    text-decoration: none;
    height: 40px;
    padding: 2px;
    box-sizing: border-box;
}

a.std-btn {
    height: auto;
    font-size: 14px;
}

div.std-btns > a,
ul.std-btns > li a {
    background: #FFD83C;
    text-align: center;
    border: 1px solid #aaa;
    border-radius: 4px;
    color: #09354D;
    font-weight: bold;
    line-height: 36px;
    text-decoration: none;
    padding: 2px;
    box-sizing: border-box;
    margin: 0 0 0 10px;
    flex-basis: 0;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
}

ul.std-btns > li a {
    margin: 0;
}

div.nav-btns > a {
    margin: 0 0 0 10px;
    flex-basis: 0;
    flex-grow: 1;
    flex-wrap: wrap;
}

    div.nav-btns > a:first-child,
    div.std-btns > a:first-child {
        margin: 0;
    }

a.btn-link:hover,
div.std-btns > a:hover,
ul.std-btns > li a:hover {
    background-color: hsla(48, 100%, 75%, 1);
}

a.set-2 {
    width: 49%;
    margin-right: 2%;
}

a.set-3 {
    width: 32%;
    margin-right: 2%;
    font-size: 14px;
    justify-content: center;
    display: inline-flex;
    line-height: 20px;
    align-items: center;
    height: 44px;
}

a.set-4 {
    width: 24%;
    margin-right: 1.3%;
}

a.set-5 {
    width: 19%;
    margin-right: 1.25%;
}

a.set-6 {
    width: 15.8%;
    margin-right: 1%;
    font-size: 80%;
}

.set-6-row-2 {
    width: 32%;
    margin: 0.6%;
}

a.set-2:last-of-type,
a.set-3:last-of-type,
a.set-4:last-of-type,
a.set-5:last-of-type,
a.set-6:last-of-type {
    margin-right: 0;
}

.psmall {
    font-size: 14px;
}

.plarge {
    font-size: 36px;
}

.pxlarge {
    font-size: 50px;
}

div.constrain {
    max-width: 750px;
    margin: auto;
}

p.flex {
    display: flex;
}

div.flex {
    display: flex;
    flex-wrap: wrap;
}

div.color-grid-left {
    background-image: url(../media/images/color_grid.png);
    background-position-y: 100px;
    background-repeat: no-repeat;
    background-size: 15%;
}

div.idea {
    width: 32%;
    display: inline-block;
    border-radius: 6px;
    margin: 0.6%;
    padding: 10px;
    box-sizing: border-box;
    color: white;
    text-align: center;
    font-size: 12px;
    text-decoration: none;
}

a.icon-btn {
    display: inline-block;
    border-radius: 6px;
    padding: 10px;
    box-sizing: border-box;
    color: white;
    text-align: center;
    font-size: 14px;
    text-decoration: none;
    height: auto;
    position: relative;
}

    a.icon-btn.yellow {
        color: rgb(9, 53, 77);
    }

    a.icon-btn img {
        display: block;
        padding: 4px;
        margin: auto;
    }

    a.icon-btn:hover {
        cursor: pointer;
    }

    a.icon-btn span.title {
        font-size: 16px;
        margin-bottom: 10px;
        margin-top: 10px;
        display: block;
    }

div.idea a {
    color: white;
    text-decoration: none;
}

div.idea h2,
div.idea h3,
a.icon-btn h2,
a.icon-btn h3 {
    color: white;
}

div.idea h3,
a.icon-btn h3 {
    font-size: 16px;
}

a.icon-btn.yellow:hover {
    background-color: hsl(48, 100%, 72%);
}

div.sky.idea:hover,
a.sky.icon-btn:hover {
    background-color: hsl(207, 66%, 27%);
}

div.dblue.idea:hover,
a.dblue.icon-btn:hover {
    background-color: hsl(207, 61%, 12%);
}

div.aqua.idea:hover,
a.aqua.icon-btn:hover {
    background-color: hsl(174, 48%, 24%);
}

div.purple.idea:hover,
a.purple.icon-btn:hover {
    background-color: hsl(272, 34%, 43%);
}

div.orange.idea:hover,
a.orange.icon-btn:hover {
    background-color: hsl(9, 83%, 38%);
}

div.bgreen.idea:hover,
a.bgreen.icon-btn:hover {
    background-color: hsl(98, 50%, 23%)
}

div.two-col h1,
div.two-col h2,
div.two-col h3,
div.two-col h4,
div.two-col h5 {
    column-span: all;
}

ul.fa-ul {
    margin: 0;
}

    ul.fa-ul li {
        margin-left: 40px;
        margin-bottom: 30px;
        break-inside: avoid-column;
    }

ul.fa-li {
    color: green;
    font-size: 40px;
    height: 1em;
    width: 1em;
    top: 0;
    left: -1.2em;
}

    ul.fa-li .fa::before {
        position: absolute;
        top: 0;
        left: 0;
    }

ul ul,
ul ul ul {
    list-style: disc;
}

a.polaroid {
    display: block;
    text-align: center;
    padding: 10px;
    background: white;
    box-sizing: border-box;
    color: #444;
    text-decoration: none;
    max-width: 500px;
}

    a.polaroid img {
        display: block;
    }

    a.polaroid:hover img {
        opacity: .5;
        cursor: pointer;
    }

    a.polaroid:hover span.img-ctnr {
        position: relative;
    }

        a.polaroid:hover span.img-ctnr::before {
            font-family: "FontAwesome";
            font-weight: 900;
            content: "\f055";
            position: absolute;
            top: calc(50% - 10px);
            font-size: 20px;
            color: #A5D852;
            z-index: 2;
            left: calc(50% - 8px);
        }

    a.polaroid:hover {
        cursor: pointer;
    }

    a.polaroid span.img-ctnr {
        background-color: black;
        display: block;
        padding: 0;
    }

    a.polaroid span.label {
        padding-top: 10px;
        display: inline-block;
    }

    a.polaroid:hover span.label {
        color: #188510;
    }

a.num-link {
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
    padding: 0 10px;
}

    a.num-link:hover {
        cursor: pointer;
    }

a span.num {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px #ffd83c solid;
    text-align: center;
    line-height: 50px;
    color: #333;
    display: inline-block;
    margin-bottom: 6px;
    font-size: 22px;
    font-weight: bold;
}

a.num-link:hover span.num {
    background: #ffd83c;
}

a span.num::after {
    content: "\A";
}

a.num-link .label {
    font-size: 14px;
}


div.fifty-fifty,
div.thirty-seventy,
div.seventy-thirty,
div.three-2-1,
div.three-1,
div.many-1,
div.twenty-eighty,
div.eighty-twenty {
    display: flex;
}

    div.fifty-fifty > * {
        width: 50%;
        box-sizing: border-box;
    }


    div.thirty-seventy > *,
    div.seventy-thirty > * {
        box-sizing: border-box;
    }

        div.fifty-fifty > *:first-child,
        div.thirty-seventy > *:first-child,
        div.seventy-thirty > *:first-child {
            padding-right: 8px;
        }

        div.fifty-fifty > *:nth-child(2),
        div.thirty-seventy > *:nth-child(2),
        div.seventy-thirty > *:nth-child(2) {
            padding-left: 8px;
        }

        div.thirty-seventy > *:first-child {
            width: 30%;
        }

        div.thirty-seventy > *:nth-child(2) {
            width: 70%;
        }

        div.seventy-thirty > *:first-child {
            width: 70%;
        }

        div.seventy-thirty > *:nth-child(2) {
            width: 30%;
        }

    div.twenty-eighty > *:first-child {
        width: 20%;
    }

    div.twenty-eighty > *:nth-child(2) {
        width: 80%;
    }

    div.eighty-twenty > *:first-child {
        width: 80%;
    }

    div.eighty-twenty > *:nth-child(2) {
        width: 20%;
    }

div.three-2-1,
div.three-1 {
    flex-wrap: wrap;
}

    div.three-2-1 > *,
    div.three-1 > * {
        width: 33.33%;
        box-sizing: border-box;
    }

    div.three-2-1 > a,
    div.three-1 > a {
        width: 32%;
        margin: .65%;
    }

div.many-1 > * {
    flex-basis: 0;
    flex: 1;
    margin: 0 0 0 10px;
}

div.many-1 > a.std-btn {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
}

div.many-1 > *:first-child {
    margin: 0;
}

div.button-bar {
    display: flex;
    align-content: space-evenly;
}

a.icon-btn.hovdark:hover::after {
    content: "";
    height: 100%;
    width: 100%;
    background: transparent;
    position: absolute;
    left: 0;
    top: 0;
    background: black;
    opacity: .25;
    border-radius: 6px;
}

a.icon-btn.hovlight:hover::after {
    content: "";
    height: 100%;
    width: 100%;
    background: white;
    position: absolute;
    left: 0;
    top: 0;
    opacity: .25;
    border-radius: 6px;
}

ul.cstm-list {
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

    ul.cstm-list li {
        display: flex;
        align-items: flex-start;
        margin-bottom: 12px;
        break-inside: avoid-column;
    }

    ul.cstm-list.center li {
        align-items: center;
    }

    ul.cstm-list.bottom li {
        align-items: flex-end;
    }

    ul.cstm-list li > *:first-child,
    ul.cstm-list li > *:first-child * {
        text-align: right;
        vertical-align: top;
        display: inline-block;
        line-height: 1em;
    }

    ul.cstm-list li > *:nth-child(2) {
        padding-left: 10px;
        display: inline-block;
    }

    ul.cstm-list.right,
    ul.cstm-list.centerh {
        display: table;
    }

    ul.cstm-list.right {
        margin-left: auto;
    }

    ul.cstm-list.centerh {
        margin-left: auto;
        margin-right: auto;
    }

*.col-2 {
    column-count: 2;
}

*.col-3 {
    column-count: 3;
}

a.fa-icon-btn {
    text-align: center;
}

    a.fa-icon-btn > span:first-child {
        display: inline-block;
        border-radius: 60px;
        box-shadow: 0 0 2px #888;
        padding: 0.5em 0.6em;
        font-size: 40px;
        aspect-ratio: 1 / 1;
        text-align: center;
    }

    a.fa-icon-btn > span:nth-child(2) {
        margin: auto;
        text-align: center;
        text-transform: uppercase;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 10px;
        display: block;
    }

.colorClassWhite {
    background-color: #FFF;
    color: #1C203D;
}

.colorClassMedBlue {
    background-color: #286193;
    color: #FFF;
}

.colorClassDarkGrey {
    background-color: #5e5e5e;
    color: #FFF;
}

.colorClassAltWhite {
    background-color: rgba(28, 32, 61, .15);
    color: #1C203D;
}

.colorClassLightGray {
    background-color: #DFDFDF;
    color: #1C203D;
}

.colorClassAltGray {
    background-color: #5e5e5e;
    color: #FFF;
}

.colorClassLightBlue {
    background-color: #868CB3;
    color: #1C203D;
}

.colorClassLightGreen {
    background-color: #6AA884;
    color: #1C203D;
}

.colorClassLightPink {
    background-color: #B39A98;
    color: #1C203D;
}

.colorClassLightPink {
    background-color: #B39A98;
    color: #1C203D;
}

.colorClassDarkBlue {
    background-color: #1C203D;
    color: #FFF;
}

.colorClassDarkGreen {
    background-color: #164228;
    color: #FFF;
}

.colorClassDarkPink {
    background-color: #4D2C2A;
    color: #FFF;
}

.colorClassAltBlue {
    background-color: rgba(28, 32, 61, .15);
    color: #FFF;
}

.colorClassAltGreen {
    background-color: rgba(22, 66, 40, .15);
    color: #FFF;
}

.colorClassAltPink {
    background-color: rgb(77, 44, 42, .15);
    color: #FFF;
}

.colorClassLightOrange {
    background-color: #CA9777;
    color: #1C203D;
}

.colorClassLightYellow {
    background-color: #FADD4B;
    color: #1C203D;
}

.colorClassDarkOrange {
    background-color: #402412;
    color: #FFF;
}

.colorClassDarkYellow {
    background-color: #6E5B00;
    color: #FFF;
}

.colorClassAltOrange {
    background-color: rgb(77, 44, 42, .15);
    color: #FFF;
}

.colorClassAltYellow {
    background-color: rgb(110, 91, 0, .15);
    color: #FFF;
}

/************ Color Classes ****************/

.colorClassWhite, .colorClass1Med, .colorClass1Light, .colorClass1Gray, .colorClass2Med, .colorClass2Light, .colorClass2Gray, .colorClass3Med, .colorClass3Light, .colorClass3Gray, .colorClass4Med, .colorClass4Light, .colorClass4Gray, .colorClass5Med, .colorClass5Light, .colorClass5Gray, .colorClass6Med, .colorClass6Light, .colorClass6Gray, .colorClassWhite a, .colorClass1Med a, .colorClass1Light a, .colorClass1Gray a, .colorClass2Med a, .colorClass2Light a, .colorClass2Gray a, .colorClass3Med a, .colorClass3Light a, .colorClass3Gray a, .colorClass4Med a, .colorClass4Light a, .colorClass4Gray a, .colorClass5Med a, .colorClass5Light a, .colorClass5Gray a, .colorClass6Med a, .colorClass6Light a, .colorClass6Gray a {
    color: #111;
}

.colorClassDarkGray, .colorClass1Dark, .colorClass2Dark, .colorClass3Dark, .colorClass4Dark, .colorClass5Dark, .colorClass6Dark, .colorClassDarkGray a, .colorClass1Dark a, .colorClass2Dark a, .colorClass3Dark a, .colorClass4Dark a, .colorClass5Dark a, .colorClass6Dark a {
    color: #FFF;
}

    .colorClassWhite a, .colorClass1Med a, .colorClass1Light a, .colorClass1Gray a, .colorClass2Med a, .colorClass2Light a, .colorClass2Gray a, .colorClass3Med a, .colorClass3Light a, .colorClass3Gray a, .colorClass4Med a, .colorClass4Light a, .colorClass4Gray a, .colorClass5Med a, .colorClass5Light a, .colorClass5Gray a, .colorClass6Med a, .colorClass6Light a, .colorClass6Gray a, .colorClassDarkGray a, .colorClass1Dark a, .colorClass2Dark a, .colorClass3Dark a, .colorClass4Dark a, .colorClass5Dark a, .colorClass6Dark a {
        font-weight: bold;
    }

.colorClassWhite {
    background-color: #FFF;
}

.colorClassDarkGray {
    background-color: #5e5e5e;
}

.colorClassLightGray {
    background-color: #DFDFDF;
}

.colorClass1Dark {
    background-color: #003B0E;
}

.colorClass1Med {
    background-color: #27A645;
}

.colorClass1Light {
    background-color: #8CD59E;
}

.colorClass1Gray {
    background-color: #E6FFEC;
}

.colorClass2Dark {
    background-color: #003B0E;
}

.colorClass2Med {
    background-color: #219F64;
}

.colorClass2Light {
    background-color: #81DFB3;
}

.colorClass2Gray {
    background-color: #EBFFF5;
}

.colorClass3Dark {
    background-color: #0F3B31;
}

.colorClass3Med {
    background-color: #1D9A7C;
}

.colorClass3Light {
    background-color: #75D8C0;
}

.colorClass3Gray {
    background-color: #E5FFF9;
}

.colorClass4Dark {
    background-color: #074B4D;
}

.colorClass4Med {
    background-color: #169498;
}

.colorClass4Light {
    background-color: #85D8DB;
}

.colorClass4Gray {
    background-color: #E4FBFC;
}

.colorClass5Dark {
    background-color: #003E50;
}

.colorClass5Med {
    background-color: #118DB1;
}

.colorClass5Light {
    background-color: #A4D7E6;
}

.colorClass5Gray {
    background-color: #E3F9FF;
}

.colorClass6Dark {
    background-color: #062A51;
}

.colorClass6Med {
    background-color: #007BFF;
}

.colorClass6Light {
    background-color: #AAC8E8;
}

.colorClass6Gray {
    background-color: #ECF5FF;
}

div#toplink {
    text-align: center;
    padding: 30px;
}

    div#toplink > a {
        text-decoration: none;
    }

.hero {
    background-size: cover;
    display: flex;
    justify-content: center;
}

div.hero > div {
    width: 50%;
    background-color: rgba(255, 255, 255, .5);
    margin: 60px;
}

@media all and (max-width:860px) {
    div.idea {
        width: 48%;
    }

    div.three-2-1 > * {
        width: 50%;
    }

    div.three-2-1 > a {
        width: 48%;
        margin: 1%;
    }

    div.three-1 > *,
    div.three-1 > a {
        width: 100%;
        margin: 1%;
    }

    div.many-1 {
        display: block;
    }

        div.many-1 > * {
            width: 100%;
            margin: 10px 0;
        }
}

@media all and (max-width:800px) {
    div.two-col {
        columns: auto;
    }

    div.fifty-fifty,
    div.thirty-seventy,
    div.seventy-thirty {
        display: block;
    }

        div.left-col,
        div.right-col,
        div.left-col.small,
        div.right-col.large,
        div.right-col.small,
        div.left-col.large,
        div.fifty-fifty > *,
        div.thirty-seventy > *,
        div.seventy-thirty > * {
            display: block;
            width: 100%;
            padding: 0;
        }

            div.thirty-seventy > *:first-child,
            div.thirty-seventy > *:nth-child(2),
            div.seventy-thirty > *:first-child,
            div.seventy-thirty > *:nth-child(2) {
                width: 100%;
            }

            div.fifty-fifty > *:first-child,
            div.thirty-seventy > *:first-child,
            div.seventy-thirty > *:first-child {
                padding-right: 0;
            }

                div.thirty-seventy > *:first-child *[style*="text-align:right"],
                div.thirty-seventy > *:first-child *[style*="text-align: right"],
                div.fifty-fifty > *:first-child *[style*="text-align:right"],
                div.fifty-fifty > *:first-child *[style*="text-align: right"] {
                    text-align: left !important;
                }

            div.fifty-fifty > *:nth-child(2),
            div.thirty-seventy > *:nth-child(2),
            div.seventy-thirty > *:nth-child(2) {
                padding-left: 0;
            }

    .vid-16-by-9 {
        padding-top: 55.5%
    }

    .chpt-links li a {
        width: 99%;
    }

    a.icon-btn {
        width: 100%;
        margin: 14px 0;
    }

    div#otherpage > div > div,
    body.cke_editable > div,
    div.lrpad {
        padding: 20px 10%;
    }

    div.color-grid-left {
        background-size: 10%;
    }

    div a.set-3,
    div a.set-4,
    div a.set-5,
    div a.set-6 {
        width: 100%;
        margin-bottom: 6px;
        margin-right: 0;
        margin-left: 0;
    }

    div a.set-3 {
        display: inline-block;
        line-height: 40px;
    }

    p.flex {
        display: block;
    }
}

@media all and (max-width:600px) {
    div.button-bar {
        flex-direction: column;
    }

    *.col-2,
    *.col-3 {
        column-count: 1;
    }

    a.btn-link,
    div.button-bar > a,
    ul.std-btns > li a {
        margin: 10px 0;
        flex-basis: auto;
        flex-grow: 1;
    }

    div.idea,
    a.icon-btn {
        width: 100%;
        margin: 14px 0;
    }

    div.three-2-1 > *,
    div.three-2-1 > a {
        width: 100%;
    }

    a.polaroid {
        width: 100%;
        margin: 14px 0;
    }

    div a.set-2 {
        width: 100%;
        margin-bottom: 6px;
        margin-right: 0;
        margin-left: 0;
    }
}

#main-body-border {
    position: unset;
}

div#main-body-footer {
    position: unset;
}


.fa-icon-btn-rect {
    display: grid;
    grid-template-columns: 50px 90px;
    width: 140px;
}

    .fa-icon-btn-rect > span:first-child {
        grid-column: 1;
        grid-row: 1 / span 2;
        font-size: 28px;
        align-items: center;
        justify-content: center;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .fa-icon-btn-rect > span:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        justify-content: left;
        align-items: end;
        font-size: 14px;
    }

    .fa-icon-btn-rect > span:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
        justify-content: left;
        font-size: 12px;
    }

    .fa-icon-btn-rect > span {
        display: flex;
    }


.fa-icon-btn-hover {
}

    .fa-icon-btn-hover > span {
        width: 160px;
        height: 120px;
    }

    .fa-icon-btn-hover .hover1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

        .fa-icon-btn-hover .hover1 > span:first-child {
            font-size: 36px;
        }

        .fa-icon-btn-hover .hover1 > span {
            padding: 5px;
            height: 20px;
            line-height: 20px;
            text-align: center;
        }

    .fa-icon-btn-hover .hover2 {
        display: none;
        text-align: center;
    }

    .fa-icon-btn-hover:hover .hover1 {
        display: none;
    }

    .fa-icon-btn-hover:hover .hover2 {
        display: inline-block;
    }

.accordioncontainer label {
    display: block;
    padding: 8px 22px;
    margin: 0 0 1px 0;
    cursor: pointer;
    border-radius: 3px;
    transition: ease .5s;
    position: relative;
}

    .accordioncontainer label::after {
        font-family: "Font Awesome 6 Pro";
        content: '\2b';
        font-size: 22px;
        font-weight: bold;
        position: absolute;
        right: 25px;
        top: 6px;
        padding-left: 25px;
        border-left: 1pt solid;
    }

    .accordioncontainer label > span {
        display: block;
        width: 95%;
        margin: 0;
    }

.accordioncontainer input:checked + label::after {
    content: '\f068';
}

.accordioncontainer div {
    padding: 10px 25px;
    border: 1px solid #A7A7A7;
    margin: 0 0 1px 0;
    border-radius: 3px;
}

.accordioncontainer input + label + div {
    display: none;
}

.accordioncontainer input:checked + label + div {
    display: block;
}

.accordioncontainer input {
    display: none;
}

.accordioncontainer {
    border: 1px solid #ababab;
    padding: 10px 14px 10px 14px;
    margin: 0 auto;
}


.carousel {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
}

.carousel-inner {
    width: 100%;
    display: flex;
    position: relative;
    transform: translate(50%,0);
    left: -200px;
    transition: left .5s ease-in-out;
    margin: 0;
}

.frame {
    min-width: 350px;
    max-width: 350px;
    height: 300px;
    margin: 0 5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    .frame h3 {
        margin: 0;
    }

        .frame h3 span {
            color: hsl(232, 38%,39% );
            display: inline-block;
            margin-right: 6px;
        }

    .frame[data-selected="1"] h3 span, .frame[data-selected="1"] span.more {
        color: hsl(232, 38%,1% );
    }

    .frame .img-ctnr {
        height: 150px;
        overflow: hidden;
    }

    .frame .content {
        background: #cacaca;
        color: #333;
        padding: 12px;
        flex: 1 1 auto;
    }

    .frame img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .frame[data-selected] .content {
        background: hsl(213, 51%, 49%);
        color: white;
    }

.car-right, .car-left {
    position: absolute;
    top: calc(50% - 20px);
    background: rgba(0,0,0,.4);
    border: none;
    width: 40px;
    height: 40px;
    color: white;
    border-radius: 20px;
    cursor: pointer;
}

    .car-right:hover, .car-left:hover {
        background: rgba(0,0,0,.7);
    }

.carousel button:focus {
    outline: none;
}

.car-left {
    left: 6px;
}

.car-right {
    right: 6px;
}

.car-nav {
    text-align: center;
}

    .car-nav ul {
        list-style-type: none;
        padding: 0;
    }

    .car-nav li {
        display: inline-block;
    }

        .car-nav li button {
            border-radius: 12px;
            border: 1px solid #999;
            padding: 0;
            width: 24px;
            height: 24px;
            cursor: pointer;
        }

            .car-nav li button.selected {
                background: #3e76bd;
                color: white;
                border-color: #333;
            }

            .car-nav li button:focus {
                outline: 1px dashed #777;
            }

.frame:focus {
    outline: none;
}


.offscreen {
    position: absolute;
    left: -100000px;
}


/*** End Other Pages ***/