﻿.linklist .grid-lists {
    display:grid;
    gap:.5rem;
    justify-content:center;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/*PANELS*/
.linklist .panels-list {
    display: grid;
    gap: .5rem;
    width: 100%;
}

.linklist .panels-list .list-panel {
    flex: 1;
    padding: .5rem;
    grid-template-rows: auto auto 1fr auto;
    gap: .5rem;
    background-color: rgba(255,255,255,.85);
    color:#000;
    background-blend-mode:overlay;
}

.linklist .panels-list .list-panel .list-icon {
    font-size: 5rem;
    text-align: center;
    line-height: 1;
}

.linklist .panels-list .list-panel h2 {
    font-size:1.5rem;
}

.linklist .panels-list .list-panel ul {
  margin-top:.25rem;
  margin-bottom:.25rem;
  padding:0;
}

.linklist .panels-list .list-panel li {
    margin-bottom: .25rem;
}

.linklist .list-btn a.btn {
    font-family: 'Tungsten-md', sans-serif;
    font-size: 1.5rem;
    letter-spacing: .08rem;
    width: 100%
}

.linklist .panels-list .list-panel.list-red {
    border-color:var(--dfs-red);

}

.linklist .panels-list .list-panel.list-red i {
    color:var(--dfs-red);
}

.linklist .panels-list .list-btn.list-red a.btn, .linklist .panels-list .list-panel.list-red a.btn {
    background-color: var(--dfs-red);
    color: #fff;
}

@media only screen and (min-width:768px) {
    .linklist .panels-list {
        display: flex;
    }

    .linklist .panels-list .list-panel {
        border-top:5px solid #fff;
    }
}


/*VIZ CSS*/

.linklist .viz-list {
    display:flex;
    gap:.5rem;
    flex-wrap:wrap;
    padding:.5rem;
    justify-content:center;
}

.linklist .viz-list .HTML5-BTN {
    max-width:225px;
    margin:0;
}

.linklist .viz-list .HTML5-BTN .BTN-body {
    text-align:center;
}

.linklist .viz-list .HTML5-BTN i {
    font-size:2rem;
}

.linklist .viz-list .HTML5-BTN h3 {
    margin:0;
    font-family:'Tungsten-md', sans-serif;
    line-height:1;
    font-size:1.75rem;
}

/*COLLAPSE*/
.linklist .collapse-buttons {
    margin-bottom: .5rem;
}

.linklist .collapse-buttons a.collapse-head {
    display: grid;
    grid-template-columns: auto fit-content(50px);
    justify-items: center;
    padding:.5rem;
    color:#fff;
    background-color:var(--dfs-blue);
    border:unset;
}

.linklist .collapse-buttons a.collapse-head:hover, .linklist .collapse-buttons a.collapse-head:focus, .linklist .collapse-buttons a.collapse-head:active {
    background-color:var(--dfs-navy);
}

.linklist .collapse-buttons .collapse {
   border: 1px solid var(--dfs-blue);
   height:calc(100% - 2rem);
   padding:.5rem;
}

.linklist .collapse-buttons .collapse ul {
    list-style-type:none;
    margin:0;
    padding:0;
}

/*Btn*/

.linklist a.btn, .linkitem a.btn {
    display:flex;
    flex-wrap:nowrap;
    min-width:fit-content;
    gap:.5rem;
    align-items:center;
    width:100%;
    max-width:500px;
}

.linklist a.btn .btn-i, .linkitem a.btn .btn-i {
    font-size:calc(1.5rem + 2vw);
    min-width:75px;
    width:fit-content;
    text-align:center;
}

.linklist a.btn .btn-header, .linkitem a.btn .btn-i {
    width:100%;
    text-align:center;
}

/*LBtn*/
.linklist .btn-list {
    display: grid;
    gap: .5rem;
    padding: .5rem;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.linklist .s-btn-list {
    display: grid;
    gap: .5rem;
    padding: .5rem;
    justify-content: center;
}

/*CBtn*/
.linklist .cbtn-list {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .5rem;
    justify-content: center;
}


/*THEMES*/
.DFT .def, .linkitem .def {
    background-color: var(--dfs-navy);
    color: #fff;
}

.DFT .blu, .linkitem .blu {
    background-color: var(--dfs-blue);
    color: #fff;
}

.DFT .red, .linkitem .red {
    background-color: var(--dfs-red);
    color: #fff;
}

.DFT .gry, .linkitem .gry {
    background-color: var(--dfs-gray);
    color: #fff;
}

.DFT .teal, .linkitem .teal {
    background-color: var(--ica-teal);
    color: #fff;
}

/*Money Momentum*/

.MoneyMomentum .NList {
    /* display:grid;
    grid-template-columns: minmax(200px, 2fr) minmax(calc(1000px + 2rem), 3fr); */
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    font-weight:500;
}

    .MoneyMomentum .NList .orange-box {
        flex-shrink: 20;
        width: 100%;
        padding: .75rem;
        background-image: url('/sitefinity-images/moneymomentumlibraries/default-album/square-bg.png');
        background-position: right;
        background-size: cover;
        border-radius: .5rem;
        text-align: center;
        color: #fff;
        align-content: center;
        font-weight: 700;
    }

.MoneyMomentum .NList .orange-box h2 {
    font-size:3rem!important;
}

.MoneyMomentum .NList .orange-box p {
    color:var(--mm-navy);
    font-size:1.2rem;
}

.MoneyMomentum .NList .list-wrap {
    width:100%;
}

.MoneyMomentum  .NList ol {
    display: grid;
    gap: .5rem;
    padding:0;
    margin:0;
    list-style-type: none;
    counter-reset: item;
}

.MoneyMomentum .NList ol li {
    counter-increment: item;
}

.MoneyMomentum .NList ol li:before {
    content: counter(item);
    display:block;
    position:relative;
    z-index:2;
    width:80%;
    text-align:center;
    color:#fff;
    font-size:calc(1rem + 3vw);
    font-weight:900;
    line-height:calc(1rem + 2vw);
    margin: 0 10%;
    padding:.5rem;
    background-color:var(--mm-green);
    border:5px solid #fff;
    border-radius: .5rem;
}

.MoneyMomentum .NList ol li .navy-box {
    background-color:var(--mm-navy);
    color:#fff;
    text-align:center;
    padding: 2rem .5rem .5rem;
    border-radius: .5rem;
    margin-top: -2rem;
    height:calc(100% - calc(10px + 2vw));
}

.MoneyMomentum .NList ol li .navy-box p {
    margin:0;
    padding-top:.5rem;
}

.MoneyMomentum .NList ol li .navy-box p.title {
    font-size:1.3rem;
    font-weight:700;
    line-height:2rem;
    align-content:center;
    padding-bottom:.5rem;
    border-bottom:2px solid var(--mm-green);
    min-height: 5rem;
}

@media only screen and (min-width:767px) {
    .MoneyMomentum .NList ol {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media only screen and (min-width:1400px) {
    .MoneyMomentum .NList {
        flex-wrap: nowrap;
    }

    .MoneyMomentum .NList .orange-box {
        flex:1;
        max-width:550px;
    }

    .MoneyMomentum .NList .list-wrap {
        flex:3;
    }

    .MoneyMomentum .NList ol {
        
    }
}