/*Whole page css*/
Body{font-size:16px}
Img{max-width:100%;}

/*Page Containers*/
.hnm-brand .wrapper {width: 100%; max-width: 1240px; padding: 0 40px;  margin: 0 auto;  }
  @media screen and (max-width: 1240px) {.hnm-brand .wrapper {padding: 0 20px; } }
  @media screen and (max-width: 600px) {.hnm-brand .wrapper {padding: 0 10px; } }      

.hnm-brand .page-content {padding-left: 10px; padding-right: 10px; display: block; margin: auto; width: 100%;}

/*Links*/
.hnm-brand .cta::after{content:url(/shared/images/arrow-link.png);margin-left:.5em}

/*Margins and Alignment*/
.hnm-brand .hp-row{margin-top:64px}
.hnm-brand .margin-bottom{margin-bottom: 88px;}
.hnm-brand .margin-top{margin-top: 88px;}  
.hnm-brand .margin-med{height: 88px;}
.hnm-brand .margin-sm{height:40px;}

@media screen and (max-width:900px){.hnm-brand .text-center-mobile{text-align: center !important;}}

.hnm-brand .left-align{text-align: left;}
.hnm-brand .right-align{text-align: right;}


/*-------------------------------------------------CSS for sections within each page-------------------------------------------------------------------------------------------------*/
/*Hero Sections*/
.hero-dark.hero-dark-blue{background-color:#09436B;overflow:auto; padding:88px 0}
.hero-dark.hero-dark-red{background-color:#5B0D10;overflow:auto; padding:88px 0}
.hero-dark .flex-container div:first-child{flex:0 1 auto;align-content:center;margin-right:64px}
.hero-dark .flex-container div:last-child{flex:1 1 0;align-content:center}
@media screen and (max-width:900px){.hero-dark-blue .flex-container div:first-child, .hero-dark-red .flex-container div:first-child{flex:0 1 auto;align-content:center;margin:0 auto;text-align:center}}

.hero-dark h1{color:#fff;font-size:3rem;line-height:3.5rem;margin:0 0 2rem 0;font-weight:700;font-family:"Open Sans","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif!important}
@media screen and (max-width:900px){.hero-dark-blue h1, .hero-dark-red h1{font-size:1.75rem;line-height:2rem;margin:0 0 1.5rem 0!important}}

.hero-dark p{color:#fff;font-size:1.25rem;font-family:"Open Sans","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif!important;margin:0;line-height:1.75rem}


/*Content Sections*/
.hnm-brand .flex-container {display: flex; flex-direction: row; flex-wrap: wrap;}

.content-section{display:block;margin:auto;width:100%}

.content-section .flex-container div{align-content:center}

.content-section h2{color:#09436B;font-family:"Open Sans","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif!important;font-size:2.5rem;line-height:3rem;margin:0 0 40px 0 !important;font-weight:700;text-align:center}
@media screen and (max-width:900px){.content-section h2{font-size:2.25rem !important;line-height: 2.75rem !important;}}
@media screen and (max-width:600px){.content-section h2{font-size:2rem !important;line-height: 2.5rem !important;}}

.content-section h3{color:#09436B;font-family:"Open Sans","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif!important;font-size:2rem;line-height:2.5rem;margin:0 0 24px 0 !important;font-weight:700;border-bottom:none}
@media screen and (max-width:900px){.content-section h3{font-size:1.75rem !important;line-height: 2.25rem !important;}}
@media screen and (max-width:600px){.content-section h3{font-size:1.5rem !important;line-height: 2rem !important;}}

.content-section h4{font-size:1.25rem;line-height:1.5rem;color:#09436B;font-weight:700;text-align:center;margin:0 0 24px 0;font-family:"Open Sans","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif!important}

.content-section h5{color:#000;padding:0 0 1.25rem;font-weight:600;font-size:1.15rem;font-family:"Open Sans","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;line-height:1.25rem;margin:0 0 18px 0;}

.content-section a,.content-section a:active,.content-section a:link,.content-section a:visited{color:#000;text-decoration:underline;font-weight:700}
.content-section .flex-container{display:flex;flex-direction:row;flex-wrap:wrap}
@media screen and (max-width:900px){
.content-section .flex-container{flex-direction:column;}
.content-section .flex-container.flex-reverse{flex-direction:column-reverse}

.content-section .flex-container .two-columns-flex:last-child{margin-bottom:unset}
.content-section .flex-container .two-columns-flex{margin:0; text-align: unset; width:100%;;}}
@media screen and (max-width:900px){.content-section .flex-container .two-columns-flex{margin:0; text-align: unset; width:100%;}}

.content-section .intro-section p{font-size:1.25rem;margin:0 0 2rem;line-height:1.75rem;text-align:center}

/*Greige Wave*/
.greige-wave-section{position:relative;background-color:#efebe7}
.greige-wave-top{position:absolute;top:0;left:0;width:100%;height:150px;z-index:1}
.greige-wave-content{background-color:#efebe7;padding-top:88px;z-index:2;}


/*Blue Wave, Blue Bkg*/
.blue-wave-section, .blue-bkg{position:relative;background-color:#09436B;box-shadow: inset 0 5px 0 0 white;}
.blue-wave-top{position:absolute;top:0;width:100%;z-index:1;}
.blue-wave-content{z-index:2; margin-top:-2px;padding-top:213px; position: relative;}
@media screen and (min-width:1600px){.blue-wave-content{padding-top:296px;}}
@media screen and (max-width:1100px){.blue-wave-content{padding-top:128px;}}
@media screen and (max-width:600px){.blue-wave-content{padding-top:88px;}}

.blue-wave-content,.blue-wave-content h2,.blue-wave-content h3,.blue-wave-content p, .blue-bkg,.blue-bkg h2,.blue-bkg h3,.blue-bkg p{color:#fff}*

/*Buttons*/
.hnm-brand .white-btn{background:#fff;color:#09436b!important;border:none;border-radius:6px;font-size:1.25rem;font-weight:600; margin-top:2.5rem; margin-bottom:2.5rem; padding:8px 18px;text-align:center;transition:all 100ms ease-in-out;text-decoration:none!important; display: inline-block;}
.hnm-brand .white-btn:hover{background:#efebe7;color:#09436b!important;outline:#A4CDED solid 1px;outline-offset:2px;text-decoration:underline;transition:all 100ms ease-in-out}

.hnm-brand .btn{background:#09436b;color:#fff!important;border:none;border-radius:6px;font-size:1.25rem !important;font-weight:600 !important; margin-top:2.5rem; margin-bottom:2.5rem; padding:8px 18px !important;text-align:center;transition:all 100ms ease-in-out;text-decoration:none!important;display: inline-block;}
.hnm-brand .btn:hover{background:#00529B;color:#efebe7!important;outline:#A4CDED solid 1px;outline-offset:2px;text-decoration:underline;transition:all 100ms ease-in-out}


/*Cards*/
.hnm-brand .card-section{justify-content: center;}
.hnm-brand .card{background-color:#fff;text-align:left;padding:0;display:flex;flex-direction:column;flex-grow:1;flex-shrink:0;flex-basis:calc(33% - 4rem);margin:0 2rem;position:relative;width:31%}
@media screen and (max-width:1100px){.hnm-brand .card{flex-grow:0;flex-shrink:1;flex-basis:calc(50% - 4em);margin:0 2rem 2rem;position:relative}}
@media screen and (max-width:900px){.hnm-brand .card{width:75%;max-width:500px;flex-grow:0;flex-shrink:1;flex-basis:calc(100% - .5em);margin:1rem auto;position:relative}}

.hnm-brand .card .thumbnail{flex-grow:0;max-height:200px;overflow:hidden;margin:0;position:relative}
.hnm-brand .card .thumbnail img{padding:unset;max-height:unset;width:100%;max-width:500px;position:relative}
@media screen and (max-width:900px){.card .thumbnail{max-height:unset;}}

.hnm-brand .card .content{display:flex;margin:20px;flex-direction:column;flex:1}
.hnm-brand .card .card-title{min-height:60px;margin:0 0 20px;display:flex;align-items:center}
.hnm-brand .card p{font-size:1em;flex:1;line-height:1.5em;text-align:left;margin:0 0 1.25rem;color:#000}
.hnm-brand .card p.card-title{color:#000;padding:0 0 1.25rem;font-weight:600;font-size:1.15em;font-family:"Open Sans","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;line-height:1.25;margin:0}

/*Footer*/
footer.footer .social-icons li a {background:none; border-radius:0;height:unset; width:unset; padding-top:0;} footer.footer .social-icons li {margin-right: 18px;}
.footer{background-color:#efebe7;}


/*HR*/
.white-hr{border:1px solid #fff;box-sizing:content-box;height:auto;margin:0 1rem 80px;padding:0;background:#fff;color:#fff; margin:88px 0;}
.greige-hr{border:1px solid #CBC8C4;box-sizing:content-box;height:auto;margin:0 1rem 80px;padding:0;background:#CBC8C4;color:#CBC8C4; margin:88px 0;}

/*Icon Section*/
.icon-section div{text-align:center; align-content: start !important;}
.icon-section img{margin:0 auto 1.5rem}
.icon-section .icon-title{font-size:1.25rem;line-height:1.5rem;color:#09436B;font-weight:700;text-align:center;margin:0 auto 1.5rem;font-family:"Open Sans","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif!important}
@media screen and (max-width:900px){.icon-section div{margin-bottom:80px}
.icon-section img{margin:0 auto 1rem}}

/*Display Chips*/
.chip-group{display: flex; gap:0 16px; margin-bottom:2rem; flex-wrap:wrap;}
@media screen and (max-width:900px){.chip-group{justify-content: center;}}
.chip{display: inline-flex; align-items: center; font-weight: bold; }
.chip.dark-blue::before {content: url('/shared/images/dark-blue.png'); margin-top:8px; margin-right: 4px; display: inline-block;}
.chip.med-blue::before {content: url('/shared/images/med-blue.png'); margin-top:8px; margin-right: 4px; display: inline-block;}
.chip.teal::before {content: url('/shared/images/teal.png'); margin-top:8px; margin-right: 4px; display: inline-block;}
.chip.green::before {content: url('/shared/images/green.png'); margin-top:8px; margin-right: 4px; display: inline-block;}
.chip.orange::before {content: url('/shared/images/orange.png'); margin-top:8px; margin-right: 4px; display: inline-block;}
.chip.red::before {content: url('/shared/images/red.png'); margin-top:8px; margin-right: 4px; display: inline-block;}
.chip.brown::before {content: url('/shared/images/brown.png'); margin-top:8px; margin-right: 4px; display: inline-block;}
.chip.black::before {content: url('/shared/images/black.png'); margin-top:8px; margin-right: 4px; display: inline-block;}

/*Tables*/
.hnm-brand table {border: 1px solid #cbc8c4; border-collapse: collapse; margin: 0.75em 0; border-spacing: 0; width:auto; }
.hnm-brand table tr:nth-of-type(odd) {background: #dddcda;}
.hnm-brand th, .hnm-brand td {padding: 16px;bottom: 1px solid #cbc8c4;}
.hnm-brand table tr td:nth-of-type(even) {border-left: 1px solid #cbc8c4;}
.hnm-brand table li:not(:last-child){margin-bottom:8px;}
.hnm-brand table a, .hnm-brand table a:active, .hnm-brand table a:link, .hnm-brand table a:visited{font-weight: unset;}
@media screen and (max-width: 900px) {
  /* FOR TABLES ON BRAND PAGES -----YOU MUST DEFINE CONTENT ON THE PAGE FOR MOBILE
    Force table to not be like tables anymore */
  .hnm-brand table, .hnm-brand thead, .hnm-brand tbody, .hnm-brand th, .hnm-brand td, .hnm-brand tr {display: block; text-align:left; font-size:14px; }

    /* Hide table headers (but not display: none;, for accessibility) */
  .hnm-brand thead tr {position: absolute; top: -9999px;left: -9999px;}
  .hnm-brand tr {border: 1px solid #ccc;}
  .hnm-brand td {
    /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; padding-top:8px; clear: right; word-wrap: break-word; padding-bottom:4px;}
    .hnm-brand td:before {/* Now like a table header */ position: absolute;
      /* Top/left values mimic padding */ top: 8px; left: 8px; width: 50%; padding-right: 10px; font-weight:600; }
    .hnm-brand table .chip{margin-top:-8px} 
}
