/* For customizations to HOMELOANS site for interim */

[id*="innerContent"] *, #tier4innerContent * { font-size: 14px; }

[id$="innerContent"] h3, #tier4innerContent h3 { font-size: 1.55em; }
[id$="innerContent"] h4, #tier4innerContent h4 { font-size: 1.33em; }
[id$="innerContent"] h5, #tier4innerContent h5 { font-size: 1.15em; }
[id$="innerContent"] h6, #tier4innerContent h6 { font-size: 1.05em; }

[id*="innerContent"] sup, #tier4innerContent sup { font-size: 0.85em; line-height: 1em; }


[id$="innerContent"] a[href$=".pdf"], 
[id$="innerContent"] a[href$=".ppt"], 
[id$="innerContent"] a[href$=".pptx"], 
[id$="innerContent"] a[href$=".doc"], 
[id$="innerContent"] a[href$=".docx"], 
[id$="innerContent"] a[href$=".xls"], 
[id$="innerContent"] a[href$=".xlsx"], 
[id$="innerContent"] a[href$=".csv"], 
[id$="innerContent"] a[href$=".vsd"], 
[id$="innerContent"] a[href$=".vdw"], 
[id$="innerContent"] a[href$=".mp3"], 
[id$="innerContent"] a[href$=".zip"], 
[id$="innerContent"] a[href$=".rar"] {
    display: unset;
	padding-right: unset;
	margin-right: unset;
	line-height: inherit;
    background-image: none !important;
}

[id$="innerContent"] > h3 {
    margin-top: 1.5em;
}
[id$="innerContent"] > h3:first-of-type { margin-top: 0px; }

[id$="innerContent"] [href]:focus,
[id$="innerContent"] [tabindex]:focus,
[id$="innerContent"] input:not([disabled]):focus,
[id$="innerContent"] textarea:not([disabled]):focus,
[id$="innerContent"] select:not([disabled]):focus,
[id$="innerContent"] button:not([disabled]):focus,
[id$="innerContent"] textarea:not([disabled]):focus,
[id$="innerContent"] textarea:not([disabled]):focus {
    outline:2px solid #f9c642;
    outline-offset:2px
}

[id*="innerContent"] .center, #tier4innerContent .center { text-align: center !important; }

[id$="innerContent"] .intro-text,
#tier4innerContent .intro-text {
	font-size: 1.15em;
	color: #666;
	line-height: 1.75em;
}

/* Reset custom list rules */
[id$="innerContent"] ul.link-group, #tier4innerContent ul.link-group, 
[id$="innerContent"] ul.news.news-list, #tier4innerContent ul.news.news-list, 
[id$="innerContent"] ul.list-infographic, #tier4innerContent ul.list-infographic {
    box-sizing: border-box !important;
    list-style: none !important;
    list-style-image: none !important;
    list-style-type: none !important;
    list-style-position: outside !important;
    margin: 0px;
    padding: 0px;
}
[id$="innerContent"] ul.link-group li, #tier4innerContent ul.link-group li,
[id$="innerContent"] ul.news.news-list li, #tier4innerContent ul.news.news-list li,  
[id$="innerContent"] ul.list-infographic li, #tier4innerContent ul.list-infographic li {
    box-sizing: border-box !important;
    list-style: none !important;
    list-style-image: none !important;
    list-style-type: none !important;
    list-style-position: outside !important;
    margin: 0px;
    padding: 0px;
}

/* Link Group */

.link-group {
    box-sizing: border-box !important;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    height: auto;
    margin: 2em 0px 1em 0px !important;
    padding: 0px !important;
}

.link-group.link-group--stack { flex-direction: column; }

.link-group > li {
    flex-basis: 32%;
    margin: 0px 0px 2% 0px !important;
    padding: 2px !important;
}

.link-group.link-group--stack > li {
    flex-basis: content;
}

[id$="innerContent"] .link-group > li > a, 
#tier4innerContent .link-group > li > a {
    box-sizing: border-box;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;
    width: 100% !important;
    height: 100% !important;
    padding: 6px;
    background-color: #ffffff;
    font-size: 1em;
    line-height: 1.21em;
    font-weight: bold;
    transition-property: background-color;
    transition-duration: 0.25s;
}

[id$="innerContent"] .link-group.link-group--stack > li > a, 
#tier4innerContent .link-group.link-group--stack > li > a {
    width: auto !important;
}

[id$="innerContent"] .link-group > li > a:hover, #tier4innerContent .link-group > li > a:hover {
    background-color: #f6f6f6;
}
[id$="innerContent"] .link-group > li > a:focus, #tier4innerContent .link-group > li > a:focus {
    outline: 2px solid #f9c642; 
    outline-offset:2px;
}

[id$="innerContent"] .link-group > li > a > i:before { 
/* #tier4innerContent .link-group > li > a > i:before { */
    box-sizing: border-box;
    display: inherit;
    font-style: normal !important;
    font-family: Font Awesome\ 5 Free, Font Awesome;
    font-size: 18px;
    font-weight: 200;
    line-height: 20px;
    text-align: center;
    color: #fff;
    content: '\f02e';
    width: 36px;
    height: 36px;
    margin: 0px 8px 0px 0px;
    padding: 8px;
    border-radius: 50% 50%; 
    background-color: #485dd1;
}

#tier4innerContent .link-group > li > a[href^='#'] > i:before {  content: '\f02e'; }
/*#tier4innerContent .link-group > li > a[href*='/homeloans/'] > i:before {  content: '\f249'; }

#tier4innerContent .link-group > li > a[href*='http'] > i:before {  content: '\f35d'; }
#tier4innerContent .link-group > li > a[href*='.pdf'] > i:before {  content: '\f1c1'; }
#tier4innerContent .link-group > li > a[href*='.doc'] > i:before {  content: '\f1c2'; }
#tier4innerContent .link-group > li > a[href*='.xls'] > i.icon:before {  content: '\f1c3'; }
#tier4innerContent .link-group > li > a[href*='.csv'] > i.icon:before {  content: '\f6dd'; }
#tier4innerContent .link-group > li > a[href*='.ppt'] > i:before {  content: '\f1c4'; }
#tier4innerContent .link-group > li > a[href*='.zip'] > i:before, 
#tier4innerContent .link-group > li > a[href*='.rar'] > i:before, 
#tier4innerContent .link-group > li > a[href*='.tar'] > i:before,
#tier4innerContent .link-group > li > a[href*='.gz'] > i:before {  content: '\f1c6'; } 
#tier4innerContent .link-group > li > a[href*='tel:'] > i:before {  content: '\f095'; }
#tier4innerContent .link-group > li > a[href*='sms:'] > i:before {  content: '\f7cd'; } */

#tier4innerContent .link-group > li > a.toolkit > i:before {  content: '\f552'; }
#tier4innerContent .link-group > li > a.house > i:before {  content: '\f015'; }
#tier4innerContent .link-group > li > a.books > i:before {  content: '\f518'; }
#tier4innerContent .link-group > li > a.cert > i:before {  content: '\f0a3'; }
#tier4innerContent .link-group > li > a.check > i:before {  content: '\f058'; }
#tier4innerContent .link-group > li > a.full > i:before {  content: '\f2c9'; }
#tier4innerContent .link-group > li > a.options > i:before {  content: '\f542'; }
#tier4innerContent .link-group > li > a.note > i:before {  content: '\f249'; }


/* News List */


.news {
    box-sizing: border-box;
    padding: 1em 0px 0px 0px !important;
    /* border-left: 8px solid #6385ff; */
    background-color: #f5f7fd;
}

ul.news-list, ol.news-list {
    box-sizing: border-box;
    margin: 0px !important;
    padding: 0px !important;
}

ul.news-list li, ol.news-list li {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    margin: 0px !important;
    padding: 1em 1em 1em 2em !important;
    /* background-color: #f3f3f3; */
    border-left: 8px solid #ccc;
    border-bottom: 1px solid #ccc;
    font-size: initial;
    line-height: initial;
}

ul.news-list li p, ol.news-list li p {
    font-size: unset;
    line-height: unset;
}

.news-list li.new {
    position: relative;
    border-left: 8px solid #108b00;
}

.news-list li:only-child, 
.news-list li:first-child {
    position: relative;
    border-left: 8px solid #6385ff;
}

.news-list li:only-child {
    border-bottom: 0px;
}

.news-list li:last-child {
    position: relative;
    border-bottom: 0px;
    border-bottom: 0px;
}

.news-list .detail {
    box-sizing: border-box;
    width: 100%;
    margin: 0px;
    padding: 0px;
    font-size: inherit;
}

.news-list .new .detail {
    position: relative;
}
.news-list .new::before {
    content: 'NEW';
    display: block;
    float: left;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0px;
    padding: 4px 4px 4px 2px;
    background-color: #108b00;
    border-radius: 0px 0px 4px 0px;
    font-size: 0.75em;
    line-height: 0.75em;
    font-weight: bold;
    color: #fff;
}

.news-list .detail h4 {
    margin-bottom: 0px !important;
}

.news-list .detail .pub-date {
    display: block;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: flex-start;
    width: auto;
    margin: 0px;
    padding: 0px;
}

.news-list .detail .pub-date > span {
    padding: 4px 0px;
    text-align: center;
    font-size: 1em;
    font-weight: bold;
    letter-spacing: 0.06em;
}

/* Footnotes */
[id$="innerContent"] ol.footnotes, #tier4innerContent ol.footnotes {
    margin-top: 3em;
    margin-left: 0px;
    padding-top: 1em;
    list-style-position: inside !important;
    border-style: solid;
    border-width: 1px 0px 0px 0px;
    border-color: #ccc;
}

[id$="innerContent"] ol.footnotes li, #tier4innerContent ol.footnotes li {
    font-size: 0.90em;
    margin-left: 0px;
    padding-left: 1em;
    text-indent: -1em;
}

/* Callout */

.callout { 
    margin: 2em auto 3em auto;
}


/* Infographic */

[id$="innerContent"] .infographic-block, 
#tier4innerContent .infographic-block  {
    box-sizing: border-box;
    width: 100%;
    padding: 1em;
    background-repeat: no-repeat;
    background-position: 2% 24px;
    background-size: 36% auto;
    background-color: #f3f3f3;
    border-radius: 12px; /* -- change 7/8/24 -- */
}

/* [id$="innerContent"] .infographic-block h3, #tier4innerContent .infographic-block h3, 
[id$="innerContent"] .infographic-block h4, #tier4innerContent .infographic-block h4, 
[id$="innerContent"] .infographic-block h5, #tier4innerContent .infographic-block h5 [id$="innerContent"] .infographic-block h6, #tier4innerContent .infographic-block h6  */
[id$="innerContent"] .infographic-block > *:first-child, 
#tier4innerContent .infographic-block  > *:first-child {
    box-sizing: border-box;
    padding-left: 38%;
    padding-bottom: 0.5em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.15em;
    letter-spacing: -0.02em;
}

[id$="innerContent"] .infographic-block .message, 
#tier4innerContent .infographic-block .message {
    box-sizing: border-box;
    padding-left: 38%;
    /* font-size: 1.25em;
    line-height: 1.25em; */
    font-weight: bold;
}

[id$="innerContent"] ul.list-infographic, #tier4innerContent ul.list-infographic {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    margin: 0px !important;
    padding: 0px !important;
}



[id$="innerContent"] ul.list-infographic li, #tier4innerContent ul.list-infographic li {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    padding: 0.5em 1em 0.5em 38%;
    line-height: 1.1em;
}

ul.list-infographic li img {
    width: 60px;
    height: auto;
    margin-right: 1em;
}

ul.list-infographic li p {
    margin: 0px;
    padding: 0px;
    line-height: 1.31em; /* -- changed 7/2/24 -- */
}


.color--med-blue {color: #0162b0;}
.color--lt-blue {color: #208ae2;}
.color--green {color: #328400;}
.color--orange {color: #e28800;}
.color--red {color: #c00000;}


/* Hero image */

.hero {
    box-sizing: border-box;
    position: relative;
    width: 99%;
    /* height: calc(100vw / (7/3)); */
    height: calc(740px / (16/9));
    margin: 1em 0px;
    background-color: #666;
    overflow-y: hidden;
    overflow-x: hidden;
}

.hero img {
    box-sizing: border-box;
    position: absolute;
    bottom: 0%;
    left: 0px;
    width: 100%;
    height: auto;
}

/* Assumes heading element for hero text overlay by default */
[id$="innerContent"] .hero > *:not(img),
#tier4innerContent .hero > *:not(img) {
    box-sizing: border-box;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    margin: 0px !important;
    padding: 0.5em 1em;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 1.75em;
    line-height: 1.125em;
    color: #fff !important;
    text-shadow: #000000dd 0px 2px 4px;
}

/* If hero text is to be more like a caption and is in a paragraph element */
[id$="innerContent"] .hero > p,
#tier4innerContent .hero > p {
    font-size: 1em;
}


.hero-align--top > *:not(img) {
    top: 0px;
    bottom: unset;
    padding-bottom: 2em;
    background: linear-gradient(to bottom, #00000000 100%, #000000ff 20%) 0px 0%/100% 100% no-repeat;
}
.hero-align--bottom > *:not(img) {
    top: unset;
    bottom: 0px;
    padding-top: 3em !important;
    background: linear-gradient(to top, #000000ff 20%, #00000000 100%) 0px 100%/100% 100% no-repeat;
}

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

    /* .hero {
        width: 99%;
        height: calc(100vw / (16/9));
    }

    .hero img {
        box-sizing: border-box;
        position: relative;
        top: 0px;
        left: 0%;
        width: 100%;
        height: auto;
    } */

    [id$="innerContent"] .infographic-block, 
    #tier4innerContent .infographic-block  {
        background-repeat: no-repeat;
        background-position: 10% 36px;
        background-size: 25% auto;
    }

}

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

    .hero {
        width: 99%;
        height: calc(100vw / (3/2));
    }

    .hero img {
        box-sizing: border-box;
        position: relative;
        top: 0px;
        left: 0%;
        width: auto;
        height: 100%;
    }

    [id$="innerContent"] .infographic-block, 
    #tier4innerContent .infographic-block {
        background-repeat: no-repeat;
        background-position: 2% 24px;
        background-size: 28% auto;
    }

    [id$="innerContent"] .infographic-block > *:first-child, 
    #tier4innerContent .infographic-block  > *:first-child {
        padding-left: 30%;
        padding-right: 0%;
    }

    [id$="innerContent"] .infographic-block .message, 
    #tier4innerContent .infographic-block .message {
        padding-left: 30%;
        padding-right: 0%;
    }

    [id$="innerContent"] ul.list-infographic li, #tier4innerContent ul.list-infographic li {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        padding: 0.5em 1em 0.5em 28%;
        line-height: 1.1em;
    }

}

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

    /* Link Group */
    .link-group > li {
        flex-basis: 46%;
    }

    /* Infographic */

    [id$="innerContent"] .infographic-block, 
    #tier4innerContent .infographic-block  {
        background-repeat: no-repeat;
        background-position: 98% 16px;
        background-size: 25% auto;
    }

    [id$="innerContent"] .infographic-block > *:first-child, 
    #tier4innerContent .infographic-block  > *:first-child {
        padding-left: 0%;
        padding-right: 28%;
    }

    [id$="innerContent"] .infographic-block .message, 
    #tier4innerContent .infographic-block .message {
        padding-left: 0%;
        padding-right: 28%;
    }

    [id$="innerContent"] ul.list-infographic li, #tier4innerContent ul.list-infographic li {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        padding: 0.5em 1em 0.5em 0%;
        line-height: 1.1em;
    }

}

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

    /* Link Group */
    .link-group > li {
        flex-basis: 100%;
    }

    /* Infographic */
    [id$="innerContent"] .infographic-block, 
    #tier4innerContent .infographic-block  {
        background-repeat: no-repeat;
        background-position: 2% 12px;
        background-size: 20% auto;
    }

    [id$="innerContent"] .infographic-block > *:first-child, 
    #tier4innerContent .infographic-block  > *:first-child {
        padding-left: 25%;
        padding-right: 0%;
    }

    [id$="innerContent"] .infographic-block .message, 
    #tier4innerContent .infographic-block .message {
        padding-left: 0%;
        padding-right: 0%;
        text-align: center;
    }

    [id$="innerContent"] ul.list-infographic li, #tier4innerContent ul.list-infographic li {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        padding: 1em 0%;
        line-height: 1.1em;
    }

    ul.list-infographic li img {
        width: 33%;
        height: auto;
        margin-right: 0px;
        margin-bottom: 0.5em;
    }
    
    ul.list-infographic li p {
        margin: 0px;
        padding: 0px;
        text-align: center;
    }
}