/* SM Nav - Default */
.sm-nav {

}

.fill .sm-nav, .sm-nav.fill {
}

.sm-nav > li {
    position: relative;
}

.sm-nav > li input[type=radio],
.sm-nav > li input[type=checkbox] {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    -webkit-appearance: none;
    opacity: 0;
}

.sm-nav > li > a:not(.btn),
.sm-nav > li > label,
.sm-nav > a:not(.btn),
.sm-nav > label {
    display: block;
    line-height: 1;
    position: relative;
    font-weight: 600;
    cursor: pointer;
}

.sm-nav > li > a:not([class*="color-"]),
.sm-nav > li > label:not([class*="color-"]),
.sm-nav > a:not([class*="color-"]),
.sm-nav > label:not([class*="color-"]) {
    color: rgb(12,106,254);
}

.sm-nav > li > a.btn.action:not([class*="color-"]),
.sm-nav > a.btn.action:not([class*="color-"]) {
    color: #FFFFFF;
}

.sm-nav > li > a:not([class*="pad-"]),
.sm-nav > li > label:not([class*="pad-"]),
.sm-nav > a:not([class*="pad-"]),
.sm-nav > label:not([class*="pad-"]) {
    padding: .875em 0;
}

.sm-nav > li > a.btn.action:not([class*="pad-"]),
.sm-nav > a:not([class*="pad-"]) {
    padding: .87em 2.25em .6em;
}

.sm-nav > li > a[data-note]:not([data-note="0"]),
.sm-nav > li > label[data-note]:not([data-note="0"]),
.sm-nav > a[data-note]:not([data-note="0"]),
.sm-nav > label[data-note]:not([data-note="0"]) {
    padding-right: 2.5em;
}

.sm-nav > li > a:not(.btn)[class*="flex-"],
.sm-nav > li > label[class*="flex-"],
.sm-nav > a:not(.btn)[class*="flex-"],
.sm-nav > label[class*="flex-"] {
    display: flex;
}

.sm-header .sm-nav > li > a,
.sm-header .sm-nav > li > label,
.sm-header .sm-nav > a,
.sm-header .sm-nav > label {
    color: rgb(255,255,255);
}

.sm-nav > li > a:not(.btn):before,
.sm-nav > li > label:before,
.sm-nav > a:not(.btn):before,
.sm-nav > label:before {
    content: '';
    width: 100%;
    border-radius: 1em;
    height: 4px;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: scale(0, 1);
    opacity: 0;
    transition: transform .3s ease, opacity .3s ease;
    background-color: rgb(63,160,255);
}

.sm-header .sm-nav > li > a:before,
.sm-header .sm-nav > li > label:before,
.sm-header .sm-nav > a:before,
.sm-header .sm-nav > label:before {
    background-color: rgb(90,245,255);
}

.sm-header .sm-nav > li > a:before,
.sm-header .sm-nav > li > label:before,
.sm-header .sm-nav > a:before,
.sm-header .sm-nav > label:before {
    bottom: .5em;
}

@supports (-ms-grid-columns:auto) {
    .sm-nav > li > a:before,
    .sm-nav > li > label:before,
    .sm-nav > a:before,
    .sm-nav > label:before {
        background-color: #8ae7ff; /* variable borks the pseudo element for some reason */
    }
}

.sm-nav > li.selected > a:before,
.sm-nav > li > input:checked + label:before,
.sm-nav > li > a.ui-tab.active:before,
.sm-nav > input:checked + label:before,
.sm-nav > a.ui-tab.active:before {
    transform: none;
    opacity: 1;
}

.sm-nav > li > a:hover:before,
.sm-nav > li > label:hover:before,
.sm-nav > a:hover:before,
.sm-nav > label:hover:before {
    opacity: .5;
    transform: none;
}

.sm-nav > li > label svg,
.sm-nav > li > a svg,
.sm-nav > label svg,
.sm-nav > a svg {
    color: inherit;
}


.sm-nav > li + li:empty {
    display: none;
}

/* SM Nav - Default */
/* SM Nav - Capsule */
.sm-nav.capsule {

}

.sm-nav.capsule > li > a,
.sm-nav.capsule > li > label {
    padding: 10px 30px 8px;
    color: rgb(12,106,254);
    border-radius: 100px;
    background-color: transparent;
    transition: background-color .3s ease, color .3s ease;
}

.sm-nav.capsule > li > icon[svg="266320"],
.sm-nav.capsule > li > svg {
    position: absolute;
    top: 50%;
    margin-top: calc(-.5em - 2px);
    right: .3125rem;
    font-size: 1.5em;
    z-index: 1;
    border: solid 2px #FFFFFF;
    background-color: #FFFFFF;
    border-radius: 50%;
    opacity: 0;
    transform: scale(.6);
    transition: transform .3s cubic-bezier(.3, 1, .6, 1), opacity .3s ease;
}

.sm-nav.capsule > li > svg {
    margin-top: -.5em;
}

.sm-nav.capsule > li.complete > icon[svg="266320"],
.sm-nav.capsule > li.complete > svg {
    opacity: 1;
    transform: scale(1);
}

.sm-nav.capsule > li > a:hover,
.sm-nav.capsule > li > label:hover {
    background-color: rgba(138,231,255, .5);
}

.sm-header .sm-nav.capsule > li > a,
.sm-header .sm-nav.capsule > li > label {
    color: rgb(255,255,255);
}

.sm-nav.capsule > li > a.active,
.sm-nav.capsule > li > input:checked + label {
    background-color: rgb(138,231,255);
    color: rgb(12,106,254);
}

.sm-nav.capsule > li > a:before,
.sm-nav.capsule > li > label:before {
    display: none;
}

.sm-nav.capsule > li > input:checked + label h4 {
    color: rgb(12,106,254);
}

.sm-nav.capsule > li > a h4,
.sm-nav.capsule > li > label h4 {
    color: inherit;
    font-size: 1.25em;
    line-height: 1;
    padding: 0;
}

/* SM Nav - Capsule Outline Nav (replace ul.mode) */
.sm-nav.capsule-outline,
.sm-nav.mode {
    border: solid 1px #d7dce0;
    border-radius: 15em; /* capsulates! */
}

.sm-nav.capsule-outline:not([class*="pad-"]),
.sm-nav.mode:not([class*="pad-"]) {
    padding: 2px;
}

.sm-nav.capsule-outline li,
.sm-nav.mode li { position: relative; }

.sm-nav.capsule-outline:not([class*="space-"]) > li + li,
.sm-nav.mode:not([class*="space-"]) > li + li { margin-left: .625em; }

.sm-nav.capsule-outline li a,
.sm-nav.capsule-outline li label,
.sm-nav.mode li a,
.sm-nav.mode li label {
    color: #889aa7;
    transition: color .3s;
}

.sm-nav.capsule-outline li a:not([class*=" r-"]):not([class^="r-"]):not([class*=" e-"]):not([class^="e-"]),
.sm-nav.capsule-outline li label:not([class*=" r-"]):not([class^="r-"]):not([class*=" e-"]):not([class^="e-"]),
.sm-nav.mode li a:not([class*=" r-"]):not([class^="r-"]):not([class*=" e-"]):not([class^="e-"]),
.sm-nav.mode li label:not([class*=" r-"]):not([class^="r-"]):not([class*=" e-"]):not([class^="e-"]) {
    font-size: .875em;
}

.sm-nav.capsule-outline li a:hover,
.sm-nav.capsule-outline li label:hover,
.sm-nav.capsule-outline li a.active,
.sm-nav.capsule-outline li input:checked ~ label,
.sm-nav.mode li a:hover,
.sm-nav.mode li label:hover,
.sm-nav.mode li a.active,
.sm-nav.mode li input:checked ~ label {
    color: #1787fb;
}

.sm-nav.capsule-outline li a:not([class*="pad-"]),
.sm-nav.capsule-outline li label:not([class*="pad-"]),
.sm-nav.mode li a:not([class*="pad-"]),
.sm-nav.mode li label:not([class*="pad-"]) {
    padding: .85em 1.8em .6em;
}

.sm-nav.capsule-outline li input[type="checkbox"],
.sm-nav.capsule-outline li input[type="radio"],
.sm-nav.mode li input[type="checkbox"],
.sm-nav.mode li input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.sm-nav.capsule-outline li a::before,
.sm-nav.capsule-outline li label::before,
.sm-nav.mode li a::before,
.sm-nav.mode li label::before {
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 15em; /* capsulates! */
    top: 0;
    left: 0;
    box-shadow: inset 0 0 0 2px #1787fb;
    opacity: 0;
    transition: transform .3s cubic-bezier(0, 2, 0.63, 1), opacity .2s ease;
    background-color: transparent;
    transform: scale(.7);
    will-change: transform, box-shadow;
} 

.sm-nav.capsule-outline li a.active::before,
.sm-nav.capsule-outline li input:checked ~ label::before,
.sm-nav.mode li a.active::before,
.sm-nav.mode li input:checked ~ label::before {
    transform: none;
    opacity: 1;
}

/* Selectable List */
.sm-select-list > li {
	flex: 1 1 100%;
	position: relative;
    border-radius: 5px;
    box-shadow: 0 0 0 0 transparent;
    transition: box-shadow .3s ease;
}

.sm-select-list[class*="flex-"][class*="-wrap"] > li {
    flex: 0 0 auto;
}

.sm-select-list > li:hover {
    box-shadow: 0 4px 20px -4px rgba(3,30,60, .4);
}

.sm-select-list > li > a,
.sm-select-list > li > label {
	padding: 1.25em 2.5em;
	display: block;
	border: solid 1px rgba(202,211,217, .5);
	border-radius: 5px;
    transition: box-shadow .3s ease, background-color .3s ease, color .3s ease, border .3s ease;
    cursor: pointer;
}

.sm-select-list > li > a:not([class*="fill-"]),
.sm-select-list > li > label:not([class*="fill-"]) {
    _background-color: #FFFFFF;
}

.sm-select-list > li > a[class*='flex-'],
.sm-select-list > li > label[class*='flex-'] {
    display: flex;
}

.sm-select-list > li:hover > a,
.sm-select-list > li:hover > label {
	border-color: transparent;
}

.sm-select-list > li > a.ui-tab.active,
.sm-select-list > li > input:checked ~ label {
    border: solid 1px transparent;
	background-color: rgb(63,160,255);
	color: rgb(255,255,255);
}

.sm-select-list > li > a > * > * > *,
.sm-select-list > li > label > * > * > * {
    pointer-events: none; /* Looks dumb, amiright? - ui-tabs helper, prevent bubbling problems */
}

.sm-select-list > li > a.has-tip:not(.active) .tip,
.sm-select-list > li > label.has-tip:not(.active) .tip,
.sm-select-list > li > a.has-tip:not(.active):hover .tip,
.sm-select-list > li > label.has-tip:not(.active):hover .tip {
    transform: translate(-50%,-10px);
    opacity: 0;
    visibility: hidden;
}

.sm-select-list > li > a > svg:only-child,
.sm-select-list > li > label > svg:only-child {
    display: block;
}

.sm-select-list > li > a.ui-tab.active h4,
.sm-select-list > li > input:checked ~ label h4,
.sm-select-list > li > a.ui-tab.active icon,
.sm-select-list > li > input:checked ~ label icon,
.sm-select-list > li > a.ui-tab.active svg,
.sm-select-list > li > input:checked ~ label svg,
.sm-select-list > li > a.ui-tab.active .sm-title,
.sm-select-list > li > input:checked ~ label .sm-title {
    color: #FFFFFF;
}

.sm-select-list > li > a.ui-tab.active .sm-title sub,
.sm-select-list > li > input:checked ~ label .sm-title sub {
    color: rgba(255,255,255,.8);
}

.sm-select-list a.ui-tab.active .excellent,
.sm-select-list input:checked ~ label .excellent,
.sm-select-list a.ui-tab.active .aight,
.sm-select-list input:checked ~ label .aight,
.sm-select-list a.ui-tab.active .bogus,
.sm-select-list input:checked ~ label .bogus {
	--status-color: rgb(138,231,255);
}

.sm-select-list a.ui-tab.active .sm-trend.excellent:after,
.sm-select-list input:checked ~ label .sm-trend.excellent:after {
	background-image: url(/cms/svg/icon_279273.8ae7ff.svg);
}

.sm-select-list a.ui-tab.active .sm-trend.excellent.reverse:after,
.sm-select-list input:checked ~ label .sm-trend.excellent.reverse:after {
	background-image: url(/cms/svg/icon_279274.8ae7ff.svg);
}

.sm-select-list a.ui-tab.active .sm-trend.aight:after,
.sm-select-list input:checked ~ label .sm-trend.aight:after {
	background-image: url(/cms/svg/icon_279434.8ae7ff.svg);
}

.sm-select-list a.ui-tab.active .sm-trend.bogus:after,
.sm-select-list input:checked ~ label .sm-trend.bogus:after {
	background-image: url(/cms/svg/icon_279274.8ae7ff.svg);
}

.sm-select-list a.ui-tab.active .sm-trend.bogus.reverse:after,
.sm-select-list input:checked ~ label .sm-trend.bogus.reverse:after {
	background-image: url(/cms/svg/icon_279273.8ae7ff.svg);
}

.sm-select-list .compare {
	position: absolute;
	top: 0;
	right: 0;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    background-color: transparent;
    color: rgb(202,211,217);
    border: none;
    border-radius: 0 5px;
	cursor: default;
}

.sm-select-list .compare:not([class*="pad-"]) {
    padding: 10px;
}

.sm-select-list li .compare.available {
    opacity: 1;
    visibility: visible;
}

.sm-select-list li:hover .compare.available {
    color: rgb(63,160,255);
}

.sm-select-list li .compare.available.active {
    opacity: 1;
    color: rgb(255,255,255);
    background-color: rgb(63,160,255);
}

a.ui-tab.active + a.compare,
input:checked ~ label + a.compare {
	display: none;
}

.sm-select-list .compare icon {
	display: block;
	pointer-events: none;
    color: inherit;
}

.sm-select-list .compare svg {
    display: block;
	pointer-events: none;
}

/* End Selectable List */

/* Selectable List - Contents */
.sm-select-list > li p {
    margin: 0;
    color: rgb(77,91,102);
}
    
.sm-select-list > li p .title {
    color: rgb(12,106,254);
    transition: color .3s ease;
}

.sm-select-list > li input[type="radio"]:checked ~ label p .title,
.sm-select-list > li a.active p .title  {
	color: rgb(255,255,255);
}

.sm-select-list > li a:hover p .title,
.sm-select-list > li label:hover p .title {
    color: rgb(63,160,255);
}

.sm-select-list > li .sm-title:first-child + .sm-trend {
    margin-top: .3125rem;
    transition: opacity .3s ease, margin .3s ease;
}

.sm-select-list > li a.active .sm-trend {
    opacity: 0;
}

.sm-select-list > li a.active .sm-title:first-child + .sm-trend {
    margin-top: -1.2em;    
}

/* End Selectable List - Contents */

/* Feed Elements */
img.feed-img,
figure.feed-img {
    height: 9.375em;
    _background-color: #f2f2f2;
    background-color: #eff3f8;
}

figure.feed-img > img {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

img.feed-img,
figure.feed-img > img {
    display: block;
    _background-image: linear-gradient(45deg, rgb(202,211,217), transparent, rgb(202,211,217));
    background-color: #eff3f8;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

img.feed-img + svg, figure.feed-img > img + svg {
    position: absolute;
	top: 5.125rem;
	left: 50%;
	transform: translate(-50%,-50%);
	display: block;
    margin-top: 0 !important;
    font-size: 3em;
}

img.feed-img:first-child,
figure.feed-img:first-child,
figure.feed-img:first-child > img {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

section > img.feed-img,
section > figure.feed-img {
    margin: -2.5rem -2.5rem 0 -2.5rem;
    width: calc(100% + 5rem);
}

.pad-10 > img.feed-img,
.pad-10 > figure.feed-img {
    margin: -.625rem -.625rem 0 -.625rem;
    width: calc(100% + 1.25rem);
}

.pad-20 > img.feed-img,
.pad-20 > figure.feed-img {
    margin: -1.25rem -1.25rem 0 -1.25rem;
    width: calc(100% + 2.5rem);
}

.pad-40 > img.feed-img,
.pad-40 > figure.feed-img {
    margin: -2.5rem -2.5rem 0 -2.5rem;
    width: calc(100% + 5rem);
}

.sm-feed-list [data-promo] {
    position: relative;
    border: solid 1px rgb(91,217,125);
    border-radius: 5px;
}

.sm-feed-list [data-promo=""] {
    border: none;
}

.sm-feed-list a {
    font-weight: 600;
    line-height: 1;
}

.sm-feed-list a sub {
    font-weight: 400;
}

.sm-feed-list [data-promo=""]:after {
    display: none;
}

.sm-feed-list [data-promo]:after {
    content: attr(data-promo);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: .625em 0; 
    background-color: rgb(63,195,91);
    color: rgb(255,255,255);
}

.sm-feed-list a.add-item {
    flex: 1 1 auto;
    border: dashed 2px rgb(202,211,217);
    border-radius: 5px;
    box-shadow: 0 10px 35px 1px rgba(3,30,60, 0);
    transition: box-shadow .3s ease, border .3s ease;
    position: relative;
    min-height: 20em;
}

.sm-feed-list a.add-item:hover {
    box-shadow: 0 10px 35px 1px rgba(3,30,60, 0.2);
    border-color: transparent;
}

.sm-feed-list a.add-item > icon,
.sm-feed-list a.add-item > svg {
    color: rgb(202,211,217);
    transition: color .3s;
}

.sm-feed-list a.add-item:hover > icon,
.sm-feed-list a.add-item:hover > svg {
    color: rgb(91,217,125);
}

.sm-feed-list a.add-item strong {
    color: rgb(202,211,217);
}

.sm-feed-list a.add-item span.btn {
    position: absolute;
    bottom: 2.5em;
    right: 2.5em;
    left: 2.5em;
}

.sm-feed-list a.add-item span.btn ~ *:last-child {
    margin-bottom: 5rem;
}

.sm-feed-list a.add-item:hover span.btn.action {
    background-color: rgb(91,217,125);
    background-color: var(--btn-theme-hover, rgb(91,217,125));
}

/* Feed Elements */
/* Responsive @ 1450 */
@media (max-width: 1450px) {
    .sm-select-list > li > a.ui-tab,
    .sm-select-list > li > label {
        padding: .625rem 1.25rem;
    }
}
/* Responsive @ 1450 */