.background-image-responsive {height: 285px;}
.hero {height: 285px; min-height: 285px;}

@media only screen and (max-width:48em) {
    .background-image-responsive {height: 185px;}
.hero {height: 285px; min-height: 185px;}
}

@media only screen and (max-width:64em) {
    .background-image-responsive {height: 185px;}
.hero {height: 185px; min-height: 185px;}
}

.inverted p.accent {color: #fff;}
.inverted p.accent span {color: #FFD51D;}
.article-right img {max-width: 70%; vertical-align: top; float: right;}
@media only screen and (max-width:48em){.article-left {width: 60% !important;}}
@media only screen and (max-width:48em){.article-right a {max-width: 70%; overflow-x: hidden; float: right;}}
@media only screen and (max-width:48em){.article-right img {max-width: 70%; vertical-align: top; float: right; overflow-x: hidden;}}
.article-right p a {position: relative;}
.article-right .new-article {position: absolute; top: 30px; left: 113px; height: 20px; width: 55px; background: url('../img/articles/new-article-ribbon.png') top left no-repeat;}
@media only screen and (max-width:63em){
.article-right .new-article {position: absolute; top: 30px; left: 86px; height: 20px; width: 55px; background: url('../img/articles/new-article-ribbon.png') top left no-repeat;}
}
@media only screen and (max-width:48em){
.article-right .new-article {position: absolute; top: 10px; left: 35px; height: 20px; width: 55px; background: url('../img/articles/new-article-ribbon.png') top left no-repeat;}
}
.article-left h4 {margin-bottom: 0px;}
.article-left p {margin-top: 5px; font-family: "Roboto"; font-size: 18px; color: #5A5C63; line-height: 21px;}
.page-header--primary-nav--link {font-size: 14px; font-weight: bold;}
.page-header--primary-nav--item {
    margin: 0 0 0 1rem;
}
@media only screen and (max-width:48em){
.page-header--mobile-nav-toggle + nav {margin-top: -60px;}
}
@media only screen and (max-width:48em){
.page-header--primary-nav--list {
    float: none;
    display: block;
    width: 220px;}
}
@media only screen and (max-width:63em){
.page-header--primary-nav--list {
    float: none;
    display: block;
    width: 220px;}
}

.hero--title {text-transform: capitalize; margin-bottom: 0px;}

.value-prop--promo.half {
    *zoom: 1;
    float: left;
    clear: none;
    text-align: inherit;
    width: 29.382%;
    margin-left: 0%;
    margin-right: 0;
    padding-left: 0%;
    padding-right: 0%;
}

.value-prop--promo.half h4 {font-family: Montserrat; font-weight: bold; font-size: 34px; color: #054FA0;}
.value-prop--promo a {text-decoration: none;}
hr {color: #fff; margin-top: 26px;}


.logo-element {height: 50px;}
.body-content a {font-family: "Roboto"; font-size: 18px; color: #054FA0; text-decoration: underline;}
.body-content a:hover {color: #77C2E6;}
.body-content a.cta {font-family: "Montserrat"; font-size: 16px; color: #012648; background: url('../icons/icon-chevron-right.svg') right 6px no-repeat;
padding-right: 11px; text-decoration: none;}
.body-content a.cta:hover {color: #77C2E6;}

.body-content a.btn--pill {font-family: "Montserrat"; font-size: 14px; color: #012648; font-weight: bold;}

.bc {font-family: "Montserrat"; font-size: 14px; color: #054FA0;}
.bc a {font-family: "Montserrat"; font-size: 14px; color: #797979;}
.bc a:after {background-image: url('icons/icon-chevron-right.svg');}
@media only screen and (max-width:48em){.bc{display:none;} 
 
} 

.pill-cta {clear: both; padding-top: 20px;}
.body-content a.btn--pill {background-image: url('../icons/icon-chevron-right.svg'); background-repeat: no-repeat; background-position: 97% 10px;
padding-right: 21px;}
.steps h4 {font-family: "Montserrat"; font-weight: bold; font-size: 14px; color: #5A5C63; line-height: 17px;}
.subs {font-family: Montserrat; font-weight: bold; font-size: 14px; color: #5A5C63; line-height: 17px;
}
.title--on {color: #77C2E6;}
@media only screen and (max-width:63em){
.title--on {color: #021648;}
    }
@media only screen and (max-width:48em){
.title--on {color: #021648;}
}
.headline-title.with-subnav {margin-bottom: 0px;}
.hrule {clear: both; border-bottom: solid 1px #f2f2f2; margin: 40px 0px 10px 0px;}
.question-answer--question {margin-top: 20px; margin-bottom: 3rem;}
.highlight {font-family: "Montserrat"; font-size: 14px; color: #012648; font-weight: bold; margin-top: 20px;}
.btn-yellow {font-family: "Montserrat" !important; text-transform: uppercase; color: #012648 !important;}
@media only screen and (max-width:48em){
.value-prop--promo.half {width: 100%; margin: 0 auto; text-align: center;}
}
.article-header--category {
    color: #77c2e6;
    font-size: .875rem;
    font-family: Montserrat,'Trebuchet MS',Helvetica,sans-serif;
    text-transform: uppercase;
    display: block;
    margin-top: 40px;
}

.article-left {
    float: left;
    width: 57%;
}

.article-right {
    float: right;
    width: 39%;
}

iframe {margin-top: 30px;}

@media only screen and (max-width:48em){
.article-left {
    float: left;
    width: 57%;
}

.article-right {
    float: right;
    width: 39%;
}
iframe {margin-top: 0px;}
}
@media only screen and (max-width:48em){
.article-left {
    float: left;
    width: 100% !important;
}

.article-right {
    float: left;
    width: 100%;
}
iframe {margin-top: 0px;}
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    overflow: hidden;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.page-footer--logo-container a {display: block;}

.kmx-button, .kmx-toolbar__icon--primary {

    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: .875rem !important;
    line-height: 2.25rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-decoration: none;
    text-transform: uppercase;
    --mdc-ripple-fg-size: 0;
    --mdc-ripple-left: 0;
    --mdc-ripple-top: 0;
    --mdc-ripple-fg-scale: 1;
    --mdc-ripple-fg-translate-end: 0;
    --mdc-ripple-fg-translate-start: 0;
    -webkit-tap-highlight-color: transparent;
    will-change: transform,opacity;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    min-width: 64px;
    height: 36px;
    padding: 0 16px;
    border: none;
    outline: none;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    overflow: hidden;
    vertical-align: middle;
    border-radius: 2px;
    font-family: Montserrat,Trebuchet MS,Helvetica,sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: .05em;
    text-decoration: none !important;

}

.kmx-button--raised, .kmx-toolbar__icon--primary {

    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
    transition: box-shadow .28s cubic-bezier(.4,0,.2,1);

}

.kmx-button--primary:not(:disabled), .kmx-toolbar__icon--primary:not(:disabled) {

    background-color: gold;
    color: #036;

}

.kmx-button::before, .kmx-toolbar__icon--primary::before {

    transition: opacity 15ms linear;

}

.kmx-button::after, .kmx-button::before, .kmx-toolbar__icon--primary::after, .kmx-toolbar__icon--primary::before {

    position: absolute;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    content: "";

}

.kmx-button--raised:focus, .kmx-button--raised:hover, .kmx-toolbar__icon--primary:focus, .kmx-toolbar__icon--primary:hover {

    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);

}

.kmx-button--primary:focus, .kmx-button--primary:hover, .kmx-toolbar__icon--primary:focus, .kmx-toolbar__icon--primary:hover {

    background-color: #ffe559 !important;
    transition: background-color 20ms linear;
    color: #036 !important;
}

@media (max-width: 480px) {
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
}