/* Minification failed. Returning unminified contents.
(1563,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1564,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1565,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1981,43): run-time error CSS1039: Token not allowed after unary operator: '-animate-duration'
(1982,35): run-time error CSS1039: Token not allowed after unary operator: '-animate-duration'
 */
BUTTON[type="button"], BUTTON {
    /*
    line-height: normal;
    font-size: 1em;
    cursor: pointer;
    border: 0;
    background: transparent;
    -moz-appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
    outline-color: #22a7ee;
 */
}

.button {
    line-height: normal;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    -moz-appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
    position: relative;
    display: inline-block;
    zoom: 1;
    vertical-align: baseline;
    margin: 0.125em;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    line-height: 120%;
    font-size: 1em;
    padding: .85em 1.2em .8em;
    font-weight: 600;
    -webkit-border-radius: 4em;
    -moz-border-radius: 4em;
    border-radius: 4em;
    /*
	box-shadow: 0 0.0625em 0.125em rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 0.125em 0.1875em rgba(0,0,0,.3);
	-moz-box-shadow: 0 0.125em 0.1875em rgba(0,0,0,.3);
	box-shadow: 0 0.125em 0.1875em rgba(0,0,0,.3);
	text-shadow: 0 0.0625em 0.0625em rgba(0,0,0,.5);
	background-position:center;
	 box-shadow: 0 0.125em 0.125em rgba(0, 0, 0, 0.05) inset, 0 0.0625em 0.125em rgba(0, 0, 0, 0.05), 0 0 0.0625em 0.0625em rgba(255, 255, 255, 0.2) inset, 0 0.0625em 0 rgba(255, 255, 255, 0.25) inset;
	 box-shadow: 0 0.125em 0.125em rgba(0, 0, 0, 0.05) inset, 0 0.0625em 0.125em rgba(0, 0, 0, 0.3), 0 0 0.0625em 0.0625em rgba(255, 255, 255, 0.1) inset, 0 0.0625em 0 rgba(255, 255, 255, 0.25) inset;
	*/
    line-height: normal;
    color: white;
}

.block {
    display: block;
    text-align: center;
}

.inline {
    display: inline;
    /*
    margin: 0 !important;
    padding: 0 !important;
    */
}

.blockCenter {
    display: block;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center;
    outline: none;
}

.round {
    -webkit-border-radius: 4em;
    -moz-border-radius: 4em;
    border-radius: 4em !important;
    outline: none !important;
}

.big {
    font-size: 1.2rem;
    font-weight: 600;
    padding: .6rem 1rem .6rem;
}

.big_wide {
    font-size: 1rem;
    font-weight: bold;
    padding: .6rem 2rem .6rem;
}

.big_wide2 {
    font-size: 1rem;
    font-weight: bold;
    padding: 1rem 2rem 1rem;
}

.fl_right {
    float: right;
}

.bigger {
    font-size: 1.4rem;
    font-weight: 600;
    padding: .7rem 1.3rem .7rem;
}

.medium {
    font-size: 1rem;
}

/*
.small {
    font-size: .8rem;
    padding: .45rem .8rem .45rem;
}
*/
.smaller {
    font-size: .625rem;
    font-weight: normal;
    padding: .4rem .6rem .4rem;
}

.gray {
    color: #333;
    border: solid 0.0625em #999999;
    background-color: #999999;
}

.white {
    text-shadow: none;
    color: #333;
    border: solid 0.0625em #D9DBF0;
    background: #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#F2F2F2));
    background: -moz-linear-gradient(top, #fff, #F2F2F2);
    background: -o-linear-gradient(top, #fff, #F2F2F2);
}

.xwhite {
    font-weight: 600;
    box-shadow: none;
    text-shadow: 0 0.0625em 0.0625em rgba(0,0,0,0);
    color: #0161A7;
    background: #f1f1f1;
    /*
	border: solid 0.0625em #D9DBF0;
	background-repeat:no-repeat;
	background: #E7E7E7;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#E7E7E7));
	background: -moz-linear-gradient(top,  #fff,  #E7E7E7);
	background: -o-linear-gradient(top,  #fff,  #E7E7E7);
	background: linear-gradient(to bottom, #fff 0%, #E7E7E7 100%);
	*/
}

.blank, .link {
    color: #2B71BD;
    text-shadow: none;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

.nocolor {
    color: #000;
    text-align: inherit;
}

.black {
    color: white;
    background-color: #333;
    text-align: inherit;
}

.yellow {
    color: black;
    background-color: #FBFF53;
    font-weight: 400;
    text-shadow: none;
    box-shadow: none;
}

.orange {
    color: black; /*background-color: #E18806;*/
    background-color: #F8B106;
    font-weight: 600;
}

.red {
    color: white;
    background-color: #CC2027;
    text-align: inherit;
}

.blue {
    color: white;
    background-color: #2B71BD;
    text-align: inherit;
}

.aqua {
    color: white;
    background-color: #78b6d8;
    background-color: #0F7D91;
    text-align: inherit;
}

.greenb {
    color: white;
    background-color: #00CA65;
}

.green {
    color: white;
    background-color: #00C161;
}

.button-disabled {
    color: white;
    background-color: #777;
}

/*@media only screen and (min-device-width: 64em) {*/
@media (hover: hover) {
    .button:hover {
        text-decoration: none;
        color: white;
        filter: alpha(opacity=90);
        opacity: 0.90;
        -moz-opacity: 0.90;
        /*box-shadow: 0 0 0.25em rgba(0,0,0,.5);
		transition: box-shadow .6s;
		*/
        transition: background-color .6s;
    }

    .gray:hover {
        color: #e9e9e9;
        filter: alpha(opacity=100);
        opacity: 1;
        -moz-opacity: 1;
    }

    .gray:active {
        position: relative;
        top: 0;
    }

    .white:hover {
        color: #5a5ab5;
        background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#F2F2F2));
        background: -moz-linear-gradient(top, #fff, #F2F2F2);
        background: -o-linear-gradient(top, #fff, #F2F2F2);
    }

    .white:active {
        color: #22a7ee;
        background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#F2F2F2));
        background: -moz-linear-gradient(top, #fff, #F2F2F2);
        background: -o-linear-gradient(top, #fff, #F2F2F2);
    }

    .xwhite:hover {
        box-shadow: none;
        text-decoration: none;
        color: #22A7EE;
    }

    .xwhite:active {
        box-shadow: none;
        color: #0080C4;
    }

    .blank:hover,
    .link:hover {
        box-shadow: none;
        text-decoration: none;
        color: #22A7EE;
    }

    .blank:active,
    .link:active {
        box-shadow: none;
        color: #0174C6;
    }

    .blank:visited,
    .link:visited {
        box-shadow: none;
        color: #0174C6;
    }

    .nocolor:hover {
        font-weight: normal;
        box-shadow: none;
        text-decoration: none;
        color: #22A7EE;
    }

    .nocolor:active {
        font-weight: normal;
        box-shadow: none;
        color: #000;
    }

    .yellow:hover {
        color: black;
    }

    .orange:hover {
        font-weight: 600;
        color: black;
    }

    .disabled:hover {
        filter: alpha(opacity=100);
        opacity: 1;
        -moz-opacity: 1;
    }
}

.nobr {
    white-space: nowrap;
}

.r_align {
    text-align: right;
}

.button_icon {
    border: 0;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    display: inline-block;
    margin-left: .3em;
}

.button_icon2 {
    border: 0;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
    display: inline-block;
    margin-right: .3rem;
}

.button_icon_white {
    border: 0;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    display: inline-block;
    margin-left: .3em; /*-webkit-filter: invert(180%); filter: invert(180%);*/
}

.button_icon_black {
    border: 0;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    display: inline-block;
    margin-left: .3em;
    -webkit-filter: invert(180%);
    filter: invert(180%);
}

.button SPAN {
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    border: 0;
    margin: 0;
}

.button_plus {
    font-weight: 300;
    font-size: 1.8rem;
    display: inline-block;
    vertical-align: middle;
}

.button_text {
    display: inline-block;
    vertical-align: middle;
}

.text-uppercase {
    text-transform: uppercase;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

@media screen and (max-width: 34em) {
    /*mobile fixes*/
    .btn-block-mobile {
        display: block;
        padding-right: 0;
        padding-left: 0;
        margin-left: 0;
        margin-right: 0;
        text-align: center;
        width: 100%;
    }
}
html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

BODY, INPUT, SELECT, OPTION, DIV, P, SPAN, BR, TD, TH, A, TEXTAREA, BUTTON {
    font-family: 'Montserrat','Helvetica Neue',roboto, helvetica, arial, verdana, sans-serif;
}

INPUT, TEXTAREA {
    font-size: 1em;
}

BODY {
    margin: 0;
    padding: 0;
    background-color: #F4F5F7;
    width: 100%; /* overflow-x:hidden;*/
}

.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
}

FORM {
    display: inline;
}

a, a:active, a:visited, a:focus {
    text-decoration: none;
}

IFRAME, IMG {
    border: 0;
}

BUTTON {
    outline-color: #22a7ee; /*outline:0;*/
}

.skip, a.skip:link {
    position: absolute;
    top: -999em;
    left: -999em;
    height: 0.06em;
    width: 0.06em;
    text-align: left;
    overflow: hidden;
    background-color: black;
}

a.skip:active, a.skip:focus, a.skip:hover {
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    overflow: visible;
    color: white;
    background-color: black;
    z-index: 5000999;
}

.h1_w {
    padding: 2em 5% 0.5em 5%;
}

H1.title {
    font-size: 3em;
    color: #333;
    font-weight: 300;
    margin: 0em auto 0em auto;
    padding: 0;
    display: block;
    line-height: normal;
    font-style: normal;
    text-align: left;
}

h1.title_nobg {
    margin: 1rem auto 1.5rem auto;
}

H1.title2 {
    color: #333;
    font-size: 1.6em;
    margin: 0 0 .5em 0;
    padding: 0;
    font-weight: 700;
    line-height: 115%;
}

    H1.title2 SUP {
        font-size: .3em;
        line-height: 0;
        vertical-align: super;
        top: -0.5em;
        position: relative;
    }

H1.hwhite {
    color: white;
}

H2.title {
    color: #333;
    font-family: 'Oswald';
    font-size: 1.3em;
    margin: 0.5em auto 0.5em auto;
    padding: 0;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
}

    H2.title span {
        font-family: 'Oswald';
    }

H3.title {
    color: #666666;
    font-size: 1.9em;
    margin: 0 0 .5em 0;
    padding: 0;
    font-weight: 300;
    line-height: 115%;
}

    H3.title SUP {
        font-size: .3em;
        line-height: 0;
        vertical-align: super;
        top: -0.5em;
        position: relative;
    }

INPUT {
    font-size: 1em;
    box-sizing: border-box;
}

SELECT, TEXTAREA {
    font-size: 1em;
    background-color: #FFF;
    border-collapse: collapse;
    box-sizing: border-box;
}

SELECT {
    border: 0.0625em solid #A9A9A9;
}

FIELDSET {
    border: 0;
    display: inline;
}

MAIN {
    display: block;
    min-height: 38em;
}

.iframe_inv {
    overflow: hidden;
    width: 0.0625em;
    height: 0.0625em;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.center_tag {
    text-align: center !important;
}

#page_center {
    text-align: left;
    margin: auto; /*overflow-x:hidden; height:100%;*/
}

#page_bg {
    text-align: left;
    /*margin-left: 15em;*/
    box-sizing: border-box;
    position: relative;
    /*overflow: auto;*/
    max-height: auto;
    min-height: 100%;
    transition: transform 0.3s;
    transform: translateX(0);
    top: auto; /*width: calc(100% - 15rem); float:left; */
    box-shadow: 0 -0.5em 0.5em rgba(0,0,0,.15);
}

.page_width {
    text-align: center;
    padding: 1em 5% 1em 5%;
}
/*
.nav_and_page { display:flex; align-items:flex-start; flex-wrap:nowrap; justify-content:flex-start;
}
*/
/*masthead*/
#nav_top_w {
    width: 100%;
    padding-top: .7em;
    padding-bottom: .7em;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    /*
    box-shadow: 0 0 0.5em rgba(0,0,0,.15);
    background-color: #fff;
        */
    text-align: left;
    font-size: 1em;
    position: relative;
    z-index: 5000998;
}

.modal-open #nav_top_w,
.modal-open .sticky-top {
    position: relative;
    z-index: 1000;
}

.modal {
    z-index: 5000999 !important;
}

.nav_logo {
    flex: 1 1 auto;
    margin: auto;
}

.logo {
    height: 3.2em;
    margin: auto 3em auto 1em
}

.nav_side_a {
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: block;
}

.nav_points_bar_w {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin: auto;
    flex: 1 4 auto;
}

.nav_points_bar_c1 {
    margin: auto;
    flex: 1 6 auto;
}

.nav_points_bar_c2 {
    margin: auto 1em;
    flex: 1 1 auto;
}

.nav_points_bar_bg {
    background-color: #F4F5F7;
    margin: .2rem auto;
    height: 0.8rem;
    border-radius: 0.8rem;
    text-align: left;
    overflow: hidden;
    width: 100%;
    font-size: .1em;
}

.nav_points_bar_solid {
    background-color: #00DF70;
    height: 0.8rem;
    border-radius: 0.8rem;
}

.nav_points_bar_t1 {
    font-size: 1.1em;
    font-weight: 600;
    color: #333;
}

.nav_points_bar_t2 {
    font-size: 1.9em;
    font-family: 'Oswald';
    font-weight: 500;
    color: #333;
}

.nav_points_bar_t3 {
    font-size: 0.7em;
    text-transform: uppercase;
    font-weight: 600;
    color: #333;
}

.nav_tokens_w {
    text-align: center;
    margin: auto 2em;
    flex: 1 1 auto;
    max-width: 10em;
}

.nav_tokens_t1 {
    font-size: 1.9em;
    font-family: 'Oswald';
    font-weight: 500;
    color: #333;
}

.nav_tokens_t2 {
    font-size: 0.7em;
    text-transform: uppercase;
    font-weight: 600;
    color: #333;
}

.nav_notifications_w {
    align-self: flex-end;
    margin: auto 2em auto auto;
    position: relative;
    text-align: center;
}

.nav_notifications_a {
    display: block;
}

.nav_notifications {
    background-color: #EB062C;
    line-height: 1.4em;
    height: 1.4em;
    min-width: 1.4em;
    border-radius: 1.4em;
    text-align: center;
    position: absolute;
    top: -.5em;
    right: -.5em;
}

.nav_notifications_t1 {
    color: white;
    font-size: .9em;
    font-weight: 700;
    margin: auto;
}

.nav_notifications_bell {
    display: inline-block;
    vertical-align: middle;
    height: 2em;
    width: 2em;
}

.nav_login {
    margin: auto 1em auto auto !important;
    text-transform: uppercase;
}

.center {
    text-align: center;
    margin: auto;
}
/* hide mobile sections
#mobileNav {
    display: none;
}
 */
#mobileNav {
    display: block;
    position: relative;
    text-align: left;
}

#nav_list_icon_img {
    width: 1.5em;
    padding: 0.75em 0;
    margin-left: 1em;
    margin-right: 0.5em;
    box-sizing: border-box;
    display: inline-block;
}

.nav_sublist_icon_img {
    position: absolute;
    top: 0.75em;
    right: 4%;
    width: 1.5em;
    height: 1.5em;
    opacity: .5;
    transition: transform 0.3s;
    -webkit-transition: transform 0.3s;
}

.nav_close_menu {
    width: 1.5em;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    right: 1em;
    top: 1.4em;
}

.nav_close_menu_a {
    display: block;
}

.logo_open {
    height: 2.3em;
    margin-right: 2em;
    display: inline-block;
    vertical-align: middle;
}

#nav_bg {
    background-color: rgba(0,0,0,.5);
    overflow: auto;
    width: 100%;
    max-width: 100%;
    height: 100%;
    position: fixed;
    z-index: 5999998;
    display: none;
}

/* Styles for Menu Items */
#nav_w {
    max-width: 15em;
    min-width: 15em;
    width: 15em;
    margin: 0;
    background-color: #F4F5F7;
    text-align: left;
    font-size: 1em;
    position: absolute;
    -webkit-transform: translateX(0);
    transition: transform 0.3s;
    transform: translateX(0);
    display: block;
}

#nav_w {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: scroll;
    width: 18em;
    max-width: 18em;
    height: 100%;
    max-height: 100%;
    -webkit-text-size-adjust: 100%;
    position: fixed;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform: translateX(-102%);
    transform: translateX(-102%);
    box-shadow: 0 0.4em 0.5em rgba(0,0,0,.2);
    z-index: 5999999;
    top: 0;
    bottom: 0;
}

#nav {
    list-style: none;
    padding: 0;
    margin: 0 auto 0 auto;
    padding: 0;
    width: 100%;
}

    #nav LI {
        display: block;
        position: relative;
        margin: 0;
    }

        #nav LI.n0 {
            /*display: none;*/
            padding: 1em;
        }

        #nav LI.nlast {
            text-align: center;
            padding: 1em;
        }

    #nav sup {
        top: 0.2em;
        font-size: 60%;
        line-height: 0;
        vertical-align: super;
    }
/*icon*/
.nav_i {
    width: 1.5em;
    height: 1.5em;
    display: inline-block;
    vertical-align: middle;
}

.nav_link {
    display: inline-block;
    vertical-align: middle;
    max-width: 12.5em;
    margin-left: 0.5em;
}

/*first level nav*/
.nav_a1, .nav_a2, .nav_a3, .nav_a4, .nav_a5, .nav_a6, .nav_a7, .nav_a8, .nav_a9, .nav_a10,
.nav_asec {
    transition: color .3s ease-in, background-color .3s ease-in;
    padding: 0.8em 0.5em 0.8em 1em;
    display: block;
    color: #000 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    position: relative;
}

.selected {
    color: #000 !important;
    background-color: #E8E9F0;
}

a.nav_a1:active, a.nav_a3:active, a.nav_a4:active, a.nav_a5:active, a.nav_a7:active, a.nav_a8:active, a.nav_a9:active, a.nav_a10:active,
a.nav_asec:active {
    /*-webkit-tap-highlight-color: #00DF70 !important;*/
    background-color: #00DF70 !important;
}

/*no icon links, and second level*/
.nav_a7, .nav_a8, .nav_a9, .nav_a10,
.nav_asec {
    font-weight: 500 !important;
}

/*second level*/
#sub_vault, #sub_healthy, #sub_mytrackers, #sub_city {
    /*
    display: none;
    */
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: rgba(255,255,255,0.5);
}

#sub_content {
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: rgba(255,255,255,0.5);
}

.nav_asec {
    padding-left: 2em;
    padding-right: 2em;
}

/*company logo and seperating line*/
.nav_company_logo {
    max-width: 9em;
    max-height: 9em;
}

.nsep {
    border-top: 0.0625rem solid rgba(0,0,0,0.1);
}

.subnav-open ul {
    display: block;
}

.nav_sublist_icon_img {
    transform: rotate(0deg);
}

.subnav-closed ul {
    display: none;
}

.collapsed .nav_sublist_icon_img {
    transform: rotate(180deg);
}

#footer {
    clear: both;
    display: block;
    margin: 0em auto 0em auto;
    padding: 2em 0 6em 0;
    text-align: center;
}

    #footer .disclaimer {
        font-size: .9rem;
        color: #666;
        display: inline-block;
        margin: 1em auto 0em auto;
    }

    #footer .footer_links {
        display: inline-block;
        margin: 0 1em;
        color: #666;
        font-size: .9rem;
    }

.footer_presented_by {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.75em;
}

.footer_partner {
    margin: 1em auto;
    width: 10em;
    display: block;
    opacity: .5;
}

.icon_i {
    display: inline-block;
    vertical-align: middle;
    width: 1.5em;
    height: 1.5em;
    margin-right: 0.5em;
    line-height: 1;
}

.icon_text {
    display: inline-block;
    vertical-align: middle;
}

video {
    width: 100% !important;
    height: auto !important;
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    /*padding-top: 25px;*/
    height: 0;
    margin: 0;
    box-sizing: border-box;
}

    .videoWrapper iframe, .videoWrapper object,
    .videoWrapper embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

.profile_alert .alert {
    border-radius: 0 !important;
}

.sticky-top {
    position: absolute !important;
    width: 100%;
}

.nav_login SVG, .nav_contact SVG, .nav_linkedin SVG, .nav_list_icon_img_a SVG {
    width: 2rem;
    height: 2rem;
}

.nav_list_icon_img_a {
    padding: .5em .5em .5em 1em;
}

#nav_list_icon_img {
    width: 100%;
    fill: #fff;
}

.bnav_list_icon_img, .bnav_home, .bnav_back, .bnav_mail, .bnav_notifications {
    width: 1.5em;
    padding: 0.8em 0;
    margin-left: 1em;
    margin-right: 1em;
    box-sizing: border-box;
    display: inline-block;
}
/*
.siteBackBtn {
    align-self: center;
    align-content: center;
    justify-content: center;
    display: flex;
    margin: auto;
    position: fixed;
    bottom: 0.5em;
    right: 0.5em;
    z-index: 999;
    background-color: rgba(255,255,255,0.8);
    border-radius: 5em;
    border: 1px solid #ccc;
    width: 3em;
    height: 3em;
    box-shadow: 0 0.2em 1em rgba(0,0,0,0.2);
}

    .siteBackBtn i {
        align-self: center;
        align-content: center;
        justify-content: center;
        margin: auto;
    }
*/
.offscreen, .offscreenHeader {
    left: -999em;
    position: absolute;
}

.desktop_show {
    display: block !important;
}

.desktop_show_inline_block {
    display: inline-block !important;
}

.desktop_show_flex {
    display: flex !important;
}

.desktop_only, .desktop_hide {
    display: none !important;
}

@media (hover: hover) {
    /*hovers*/

    input[type="button"]:hover, BUTTON[type="button"]:hover, BUTTON:hover {
        opacity: 0.80;
    }

    #footer .footer_links:hover {
        color: #22a7ee;
    }

    a:hover,
    a:active,
    .nav_tokens_w {
        text-decoration: none !important;
    }

    /*first level hovers*/
    .nav_a1:hover,
    .nav_a2:hover,
    .nav_a3:hover,
    .nav_a4:hover,
    .nav_a5:hover,
    .nav_a6:hover,
    .nav_a7:hover,
    .nav_a8:hover,
    .nav_a9:hover,
    .nav_a10:hover,
    .nav_asec:hover {
        color: #000 !important;
        background-color: #E8E9F0;
        background-color: #FFF;
        text-decoration: none !important;
    }
    /*second level hovers*/
    .nsec A:hover {
        color: #000 !important;
        background-color: #E8E9F0;
        background-color: #FFF;
        text-decoration: none !important;
    }
}

.bnav {
    display: none;
}

.nav_notifications {
    background-color: #EB062C;
    line-height: 1.4em;
    height: 1.4em;
    min-width: 1.4em;
    border-radius: 1.4em;
    text-align: center;
    position: absolute;
    top: 0.4em;
    right: 0.4em;
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) {
    /* IPAD ONLY*/
    html, body {
        font-size: .9rem;
    }
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) and (orientation : portrait) {
    /* IPAD VERTICAL ONLY*/
}

@media screen and (max-width: 63em) {
    /*just under the width of ipad*/

    html, body {
        font-size: .9rem;
    }

    H1.title {
        font-size: 2em;
    }

    H1.title2 {
        font-size: 1.4em;
    }

    H2.title {
        font-size: 1.2em;
        text-align: center;
        margin: 0 auto .5em auto;
    }

    H3.title {
        font-size: 1.1em;
    }

    #footer .disclaimer {
        font-size: .7em;
        display: block;
    }

    #footer .footer_links {
        margin: 0 .5em;
        font-size: .7em;
    }

    #page_center {
        width: 100%;
        /*overflow-x: hidden;*/
        margin: 0;
    }

    #page_bg {
        margin: 0;
        max-width: 100%;
        padding: 0 0;
        text-align: center;
        overflow-x: hidden !important;
    }

    #nav_top_w {
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }

    .logo {
        height: 2.3em;
        margin: auto 1em;
    }

    .nav_tokens_w, .nav_points_bar_w {
        font-size: .8rem;
    }

    .nav_notifications_w {
        margin-right: 1em;
    }

    .nav_and_page {
        display: block;
    }

    #mobileNav {
        display: block;
        position: relative;
        text-align: left; /*z-index:5000999;*/
    }
    /*
    .nav_mobile_menu { position:absolute; right:.25em; top:.25em;
    }
    */
    .nav_mobile_icon {
        height: 1.5em;
        width: 1.5em;
        padding: .75em;
        display: inline-block;
        vertical-align: middle;
    }

    .nav_list_icon_img_a {
        display: block;
    }

    #nav LI.n0 {
        display: block;
    }

    #nav LI.nlast {
        padding-bottom: 5em;
    }

    #nav_w {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
        margin: 0;
        padding: 0;
        list-style: none;
        overflow: scroll;
        width: 18em;
        max-width: 18em;
        height: 100%;
        max-height: 100%;
        -webkit-text-size-adjust: 100%;
        position: fixed;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        -webkit-transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
        -webkit-transform: translateX(-102%);
        transform: translateX(-102%);
        box-shadow: 0 0.4em 0.5em rgba(0,0,0,.2);
        z-index: 5999999;
        top: 0;
        bottom: 0;
    }
}

@media screen and (max-width: 46em) {
    /*mobile fixes and ipad narrow*/

    html, body {
        font-size: 1rem;
    }

    .h1_w {
        padding: 1em 5% 1em 5%;
    }

    h1.title_nobg {
        margin: 0rem auto 1rem auto;
    }

    H1.title {
        font-size: 1.6em;
    }

    H1.title2 {
        margin-left: 5%;
    }

    .logo {
        height: 2.3em;
        margin: auto 1em auto 0.25em;
    }

    .nav_tokens_w {
        font-size: .75em;
        margin: auto;
    }

    .nav_notifications_w {
        margin-right: 1em;
        margin-left: 1em;
    }

    .nav_points_bar_w {
        display: none;
    }

    .nav_and_page {
        display: block;
    }

    .footer_partner {
        width: 8em;
    }

    .nav_login {
        font-size: 0.8em !important;
        margin: auto 1em auto auto !important;
    }

    .tablet_show {
        display: block !important;
    }

    .tablet_show_inline_block {
        display: inline-block !important;
    }

    .tablet_show_flex {
        display: flex !important;
    }

    .tablet_hide {
        display: none !important;
    }
}

@media screen and (max-width: 36em) {
    #mobileNav {
        display: none;
    }

    .logo {
        margin: auto 1em auto 1em;
    }

    .nav_list_icon_img_a {
        padding: 0 1em;
    }

    .bnav {
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: white;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
        z-index: 6999999;
        width: 100%;
        height: 3em;
        display: flex;
        justify-content: space-between;
        align-content: center;
    }

    .bnav_mail_a {
        position: relative;
    }

    #nav_w {
        width: 80%;
        max-width: 80%;
        -webkit-transform: translateX(602%);
        transform: translateX(602%);
    }

    #nav_top_w {
        /*
        box-shadow: 0 0 0.5em rgba(0,0,0,.1);
            */
    }

    .nav_login {
        margin: auto 0em auto auto !important;
    }

    .nav_login_text {
        color: #333;
    }

    .nav_login_i {
        stroke: #333;
    }

    .mobile_show {
        display: block !important;
    }

    .mobile_show_inline_block {
        display: inline-block !important;
    }

    .mobile_show_flex {
        display: flex !important;
    }

    .mobile_hide {
        display: none !important;
    }
}

@media screen and (max-width: 24em) {
    /*iphone 7*/
    .nav_tokens_t1 {
        font-size: 1.2rem;
    }

    .logo {
        height: 2.2em;
    }
}

@media screen and (max-width: 20em) {
    /*iphone 5*/
    html, body {
        font-size: 0.9rem;
    }

    H1.title {
        font-size: 1.4em;
        margin: 0 auto .5em 5%;
    }
}

@media print {
    #page_bg {
        margin-left: 0;
        top: 0 !important;
    }

    #nav_bg, .skip {
        display: none !important;
    }

    .sticky-top {
        position: relative !important;
    }

    .row {
        display: block !important;
    }
}
:root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1;
}

.grow {
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

@media (hover: hover) {
    .grow:hover {
        -webkit-transform: scale(1.3);
        -moz-transform: scale(1.3);
        -ms-transform: scale(1.3);
        -o-transform: scale(1.3);
        transform: scale(1.3);
    }
}

.growSmall {
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

@media (hover: hover) {
    .growSmall:hover {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
    }
}

@-webkit-keyframes slideInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-25%);
        transform: translateX(-25%);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-moz-keyframes slideInLeft {
    0% {
        opacity: 0;
        -moz-transform: translateX(-25%);
        transform: translateX(-25%);
    }

    100% {
        -moz-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        -moz-transform: translateX(-25%);
        -webkit-transform: translateX(-25%);
        -ms-transform: translateX(-25%);
        transform: translateX(-25%);
    }

    100% {
        -moz-transform: translateX(0);
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

.slideInLeft {
    animation: slideInLeft 1s ease-in-out;
    -moz-animation: slideInLeft 1s ease-in-out;
    -webkit-animation: slideInLeft 1s ease-in-out;
    -ms-animation: slideInLeft 1s ease-in-out;
}

@-webkit-keyframes slideInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(25%);
        transform: translateX(25%);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-moz-keyframes slideInRight {
    0% {
        opacity: 0;
        -moz-transform: translateX(25%);
        transform: translateX(25%);
    }

    100% {
        -moz-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        -moz-transform: translateX(25%);
        -webkit-transform: translateX(25%);
        -ms-transform: translateX(25%);
        transform: translateX(25%);
    }

    100% {
        -moz-transform: translateX(0);
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

.slideInRight {
    animation: slideInRight 1s ease-in-out;
    -moz-animation: slideInRight 1s ease-in-out;
    -webkit-animation: slideInRight 1s ease-in-out;
    -ms-animation: slideInRight 1s ease-in-out;
}

@-webkit-keyframes slideInTop {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-80px);
        transform: translateY(-80px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-moz-keyframes slideInTop {
    0% {
        opacity: 0;
        -moz-transform: translateY(-80px);
        transform: translateY(-80px);
    }

    100% {
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes slideInTop {
    0% {
        opacity: 0;
        -moz-transform: translateY(-80px);
        -webkit-transform: translateY(-80px);
        -ms-transform: translateY(-80px);
        transform: translateY(-80px);
    }

    100% {
        -moz-transform: translateY(0);
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.slideInTop {
    animation: slideInTop 1s ease-in-out;
    -moz-animation: slideInTop 1s ease-in-out;
    -webkit-animation: slideInTop 1s ease-in-out;
    -ms-animation: slideInTop 1s ease-in-out;
}

@-webkit-keyframes slideInBottom {
    0% {
        opacity: 0;
        -webkit-transform: translateY(80px);
        transform: translateY(80px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-moz-keyframes slideInBottom {
    0% {
        opacity: 0;
        -moz-transform: translateY(80px);
        transform: translateY(80px);
    }

    100% {
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes slideInBottom {
    0% {
        opacity: 0;
        -moz-transform: translateY(80px);
        -webkit-transform: translateY(80px);
        -ms-transform: translateY(80px);
        transform: translateY(80px);
    }

    100% {
        -moz-transform: translateY(0);
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.slideInBottom {
    animation: slideInBottom 1s ease-in-out;
    -moz-animation: slideInBottom 1s ease-in-out;
    -webkit-animation: slideInBottom 1s ease-in-out;
    -ms-animation: slideInBottom 1s ease-in-out;
}

@-webkit-keyframes largeToSmall {
    0% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-moz-keyframes largeToSmall {
    0% {
        -moz-transform: scale(1.2);
        transform: scale(1.2);
    }

    100% {
        -moz-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes largeToSmall {
    0% {
        -moz-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
    }

    100% {
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

.largeToSmall {
    animation: largeToSmall 1s ease-in-out;
    -moz-animation: largeToSmall 1s ease-in-out;
    -webkit-animation: largeToSmall 1s ease-in-out;
    -ms-animation: largeToSmall 1s ease-in-out;
}

@-webkit-keyframes smallToLarge {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@-moz-keyframes smallToLarge {
    0% {
        -moz-transform: scale(1);
        transform: scale(1);
    }

    100% {
        -moz-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@keyframes smallToLarge {
    0% {
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    100% {
        -moz-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
    }
}

.smallToLarge {
    animation: smallToLarge 1s ease-in-out forwards;
    -moz-animation: smallToLarge 1s ease-in-out forwards;
    -webkit-animation: smallToLarge 1s ease-in-out forwards;
    -ms-animation: smallToLarge 1s ease-in-out forwards;
}

@-webkit-keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}

@keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}

.animate__bounceIn {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
    animation-duration: calc(var(--animate-duration) * 0.75);
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}
.challenge_alert .alert {
    border-radius: 0 !important;
}

.ch_bg1 {
    background-color: #144B76;
}

.curve_btm_bg1 {
    background-image: url(/content/images/challenge/challenge_water_bg2.svg);
}

.ch_bg2 {
    background-color: #3D6C31;
}

.curve_btm_bg2 {
    background-image: url(/content/images/challenge/challenge_all_bg2.svg);
}

.ch_bg3 {
    background-color: #375177;
}

.curve_btm_bg3 {
    background-image: url(/content/images/challenge/challenge_all_bg2.svg);
}

.ch_bg4 {
    background-color: #EB5A00;
}

.curve_btm_bg4 {
    background-image: url(/content/images/challenge/challenge_all_bg2.svg);
}

.ch_bg5 {
    background-color: #008888;
}

.curve_btm_bg5 {
    background-image: url(/content/images/challenge/challenge_all_bg2.svg);
}

.ch_bg6 {
    background-color: #9F0909;
}

.curve_btm_bg6 {
    background-image: url(/content/images/challenge/challenge_all_bg2.svg);
}

.ch_bg7 {
    background-color: #144B76;
}

.curve_btm_bg7 {
    background-image: url(/content/images/challenge/challenge_water_bg2.svg);
}

.ch_bg {
    padding: 2em 5% 0em 5%;
    background-size: cover;
    background-repeat: repeat;
    position: relative;
    text-align: center;
}

.ch_curve_btm {
    bottom: -0.1em;
    left: 0;
    background-position: bottom;
}

.ch_curve_btm, .ch_curve_top {
    width: 100%;
    position: absolute;
    background-size: 103%;
    background-repeat: no-repeat;
    height: 7rem;
    z-index: 1;
}

.chdesc_w IMG {
    max-width: 100% !important;
}

.feat_text2 {
    font-size: 1.2em;
    display: inline-block;
    vertical-align: middle;
    width: 85%;
    display: inline !important;
}

.steps_title {
    font-weight: 600;
    text-align: left;
}

.steps_input {
    font-size: 3em;
    width: 4.5em;
    font-weight: 600;
}

.steps_fs {
    font-size: 3em;
    width: 45%;
    font-weight: 600;
}

.steps_input2 {
    font-size: 3em;
    width: auto;
    font-weight: 600;
}

.steps_input.form-control:disabled, .steps_input.form-control[readonly] {
    background-color: #f4f5f7;
    border: 0 !important;
    color: #333;
    text-align: center;
}

.steps_btn {
    font-size: 1.4em;
    font-family: Oswald;
    font-weight: 500;
    padding: 0.7em 1.5em;
}

.refresh_btn {
    font-size: 1em;
    font-family: Oswald;
    font-weight: 500;
    padding: 0.7em 1em;
}

#DeviceDescription_temp {
    display: none;
}

.device_logo_icon {
    width: 10em;
}

.custom_title {
    font-weight: 600;
    text-align: left;
}

.custom_input {
    font-size: 3em;
    width: 6em;
    font-weight: 600;
}

.custom_btn {
    font-size: 1.4em;
    font-family: Oswald;
    font-weight: 500;
    padding: 0.7em 1.5em;
}

.ch_progress_w {
    background-color: rgba(0,0,0,0.1);
    height: 1.4rem;
    position: relative;
    border-radius: 1.4rem;
    min-width: 30em;
    flex-shrink: 1;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.ch_progress {
    top: 0;
    height: 100%;
    left: 0;
    background: #22a7ee;
    position: absolute;
    border-radius: 1.4rem;
    transition: width 0.5s;
    -webkit-transition: width 0.5s;
}

.enroll_btn, .challenge_team_clickable {
    cursor: pointer;
}

.ch_btn {
    border: 0 !important;
}

.or_w {
    position: relative;
    height: 100%;
}

.orline {
    position: absolute;
    left: 49%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #ccc;
    z-index: 1;
}

.orwordwrapper {
    text-align: center;
    height: 1em;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin-top: -1em;
    z-index: 2;
}

.orword {
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 1em;
    background: #fff;
}
/*
#page_bg {
    background-color: white;
}
*/
.ch_page_width {
    text-align: center;
    padding: 1em 4%;
}

.active .bs-stepper-circle {
    background-color: #22a7ee !important;
}

.input-group > .form-control .dp-challenge,
.dp-challenge {
    display: inline-block !important;
    width: 7em !important;
    flex: 0 0 auto !important;
    font-family: Oswald !important;
}

@media screen and (min-width: 80em) {
    .gj-datepicker-bootstrap [role="separator"] button .gj-icon,
    .gj-datepicker-bootstrap [role="separator"] button .material-icons {
        top: 12px !important;
    }
}

.h2_w2 .gj-datepicker-bootstrap [role="separator"] button .gj-icon,
.h2_w2 .gj-datepicker-bootstrap [role="separator"] button .material-icons {
    top: 14px !important;
}

.h2_w3 .gj-datepicker-bootstrap [role="separator"] button .gj-icon,
.h2_w3 .gj-datepicker-bootstrap [role="separator"] button .material-icons {
    top: 14px !important;
}

.challenge_flex {
    flex-wrap: nowrap;
}

.challenge_col1 {
    flex: 4 1 auto;
    /*
    width: 65%;*/
    z-index: 3;
    padding-bottom: 2em;
    margin-top: 0;
    margin-bottom: 0;
}

.main_challenge_bg .challenge_col1 {
    padding-bottom: 6em;
}

.challenge_icon {
    /*
    position: absolute;

    right: 1em;
    top: 0.8em;*/
    width: 100%;
    z-index: 2;
    margin-left: auto;
    margin-right: 0;
    max-width: 25em;
    flex: 1 1 auto;
    display: inline-flex;
}

.icon_index {
    max-width: 10em;
}

.h2_w {
    text-align: center;
    margin: 2em 0 1em 0;
}

.h2_w2 {
    display: flex;
    align-content: center;
    justify-content: center;
    text-align: center;
    align-items: center;
    position: relative;
    margin: 0.1em 0 1em 0;
}

.h2_w3 {
    text-align: center;
    position: relative;
    /*
        display: flex;
        align-items: center;
        align-content: flex-start;
        margin: 0.1em 0 0 0;
    */
}

h2.title2 {
    color: #333;
    font-family: 'Oswald';
    font-size: 1.3em;
    margin: 0.5em auto 0.5em auto;
    padding: 0;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    margin-bottom: 1em;
}

    h2.title2:before {
        content: "";
        display: block;
        border-top: solid .1em rgba(0,0,0,0.1);
        width: 100%;
        height: 0.1em;
        position: absolute;
        top: 50%;
        z-index: 1;
    }

    h2.title2 span {
        background: #fff;
        padding: 0 1.5em;
        position: relative;
        z-index: 5;
        font-family: Oswald;
    }

.line_trackfor {
    border-top: solid .1em rgba(0,0,0,0.1);
    height: 0.1em;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    flex: 1 1 auto;
}

h2.track_for {
    margin-right: 0 !important;
    margin-left: 1.5em !important;
    flex: 1 0 auto;
    margin-top: auto;
    margin-bottom: auto;
}

    h2.track_for:before {
        display: none;
    }

h2.track_for2 {
    margin-right: 1em !important;
    margin-left: 1em !important;
    flex: 1 0 auto;
    margin-top: auto;
    margin-bottom: auto;
}

    h2.track_for2:before {
        display: none;
    }

h2.track_for3 {
    margin-right: 0em !important;
    margin-left: 0em !important;
    flex: 1 0 auto;
    margin-top: auto;
    margin-bottom: auto;
    text-align: center !important;
}

    h2.track_for3:before {
        display: none;
    }

.h2_w2 .gj-datepicker.input-group {
    width: auto !important;
    margin-left: 0.5em !important;
    margin-right: 1.5em !important;
    flex: 1 0 auto;
    margin-top: auto;
    margin-bottom: auto;
}

.h2_w3 .gj-datepicker.input-group {
    width: auto !important;
    margin-left: 0;
    margin-right: 0.5em;
    margin-top: auto;
    margin-bottom: auto;
}

.flex-row-history {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.gray-med {
    color: #777;
}

.challenge-entry {
    font-weight: 600;
    font-size: 1.4em;
    margin-left: 0.5em;
}

.days-ago {
    color: #888;
    display: inline-block;
    margin-left: 1em;
}

.history-row {
    display: flex;
}

.history-c1 {
    padding: .7rem 1.5rem .7rem 1rem;
    margin-top: auto;
    margin-bottom: auto;
    min-width: 10em;
    font-size: 1.1em;
    text-align: left;
}

.history-c2 {
    padding: .7rem 0rem;
    margin-top: auto;
    margin-bottom: auto;
    font-size: 1.1em;
}

.gray-light {
    color: #888;
}

.leader_ol {
    counter-reset: numList;
    padding: 0 0 0 0em;
    list-style: none;
    margin: 0;
    width: 100%;
}

.flex-row-leader {
    display: flex;
    flex-wrap: nowrap;
}

.leader_ol LI {
    width: 100%;
    position: relative;
    padding: 1em 1em 1em 3em;
    font-size: 1rem;
}

    .leader_ol LI:before {
        counter-increment: numList;
        content: counter(numList);
        position: absolute;
        left: 1em;
        top: 0.75em;
        font-size: 1em;
        font-weight: 400;
        text-align: center;
        color: #000;
        line-height: 2em;
        width: 2em;
        height: 2em;
        background: #FFBD57;
        border-radius: 3em;
    }

.leader-c1 {
    flex-grow: 1;
    text-align: left;
    max-width: 22em;
}

.leader-c2 {
    justify-content: flex-end;
    white-space: nowrap;
}

.leaderboard_sel {
    background-color: #f5f5fe;
}

.leader_min_mobile {
    display: none;
}

.background-light-orange-light {
    background-color: #FFFFE1 !important;
    border-radius: 0;
    margin: 0;
}

.ques_list .ques {
    border-bottom: 0.0625rem solid rgba(0,0,0,0.1);
}

    .ques_list .ques:last-of-type {
        border-bottom: 0;
    }

.check {
    display: inline-block;
    vertical-align: middle;
    width: 1.5em;
    height: 1.5em;
    background-image: url(/content/images/challenge/spch_check.png);
    background-size: 100%;
    margin-left: 5px;
}

.banner {
    position: relative;
    min-height: 16.5em;
    background: rgb(215,215,249);
    background: -moz-radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(215,215,249,1) 100%);
    background: -webkit-radial-gradient(circle, rgba(255,255,255,1) 0%,rgba(215,215,249,1) 100%);
    background: radial-gradient(circle, rgba(255,255,255,1) 0%,rgba(215,215,249,1) 100%);
}

.banner_after {
    font-size: .2em;
    display: block;
    width: 100%;
    height: 1em;
    border-bottom: 1em solid #DADBF9;
}

.main_pic1 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 19em;
}

.challenge_title {
    margin-bottom: .5rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
}

.main_challenge_bg .challenge_title {
    font-size: 2.5em;
}

.top_title1 {
    width: 30%;
    margin-left: 4%;
    max-height: 15em;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: center;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

    .top_title1 H1 {
        line-height: 110%;
        color: #333;
    }

.top_title2 {
    width: 29%;
    color: #333;
    margin-left: 1%;
    margin-right: 4%;
    font-size: 1.6em;
    text-align: center;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: inline-block;
    line-height: 110%;
}

.my_link {
    font-size: 1rem;
    display: block;
    margin-top: .3rem;
    text-decoration: none;
}

.new_posts_link {
    font-size: 1rem;
    display: block;
    margin-top: .3rem;
    text-decoration: none;
    color: red;
}

.encourage_others_link {
    font-size: 1rem;
    display: block;
    margin-top: .3rem;
    text-decoration: none;
    color: green;
}

.date_and_desc {
    position: relative;
}

.top_text1 {
    width: 38%;
    margin-left: 2%;
    font-size: 1.1em;
    text-align: left;
    display: inline-block;
    margin-top: .8em;
}

.challenge_over {
    margin-left: 2%;
    font-size: 1.1em;
    text-align: left;
    display: inline-block;
    margin-top: .8em;
    font-weight: 900;
}
/*
#date {
    width: 38%;
    position: absolute;
    right: 3.5em;
    top: 1.5em;
    text-align: right;
}
*/
.settings_btn {
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    right: .5em;
    top: 1.4em;
    cursor: pointer;
}

.settings_img {
    width: 100%;
}

.ttr_w {
    text-align: center;
    margin: 2em auto;
    width: 100%;
}

.ttr_circ_w {
    position: relative;
    width: 8em;
    height: 8em;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

.ttr_circ {
    border: .6em solid #22A7EE;
    color: #333;
    border-radius: 8em;
    position: relative;
    width: 8em;
    height: 8em;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

.ttr_circ_num {
    z-index: 2;
    height: 100% !important;
    position: relative;
    font-family: 'Open Sans','Helvetica Neue',roboto, helvetica, arial, verdana, sans-serif;
    border: 0;
    outline: 0;
    text-align: center;
    padding: 0 0 !important;
    box-shadow: none !important;
    background-color: rgba(255,255,255,0);
    -webkit-appearance: none;
    font-size: 3.2em; /*position:absolute; top:50%; transform:translateY(-50%);*/
    width: 100%;
    color: inherit;
    display: inline-block;
    line-height: 100%;
    margin: 0 auto !important;
}

.ttr, .ttr_over, .ttrv, .ttrv_over, .ttrf, .ttrf_over, .ttrg, .ttrg_over {
    padding: 0 !important;
    display: inline-block;
    vertical-align: middle;
    width: 7%;
    text-align: center;
    margin-left: auto;
    margin-right: .5%;
    background-color: transparent !important;
    border: 0 !important;
    outline: none !important;
}

.ttr_i, .ttr_i_over, .ttr_add_i, .ttr_minus_i {
    width: 100%;
    border: 0;
    display: block;
    cursor: pointer;
    outline: none !important;
}

.ttr_add, .ttrf_add, .ttrg_add, .ttr_minus, .ttrf_minus, .ttrg_minus {
    padding: 0 !important;
    display: inline-block;
    vertical-align: middle;
    width: 5%;
    text-align: center;
    margin-right: 1%;
    position: relative;
    z-index: 1;
    cursor: pointer;
    background-color: transparent !important;
    border: 0 !important;
    outline: none !important;
}

.empty {
}

.ttrv {
    width: 11%;
}

.ttrf {
    width: 11%;
}

.ttrg {
    width: 11%;
}

.range_slider {
    width: 52%;
    margin: 0 0.5% 0 4%;
    display: inline-block;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.ttr_confetti {
    position: absolute;
    width: 220%;
    left: -60%;
    top: -60%;
    display: none;
    z-index: 0;
}

.fave_hide {
    display: none;
}

.fave {
    left: -75px;
    top: -55px;
    width: 260px;
    height: 200px;
    z-index: 0;
    background: url(/content/images/challenge/spch_fave.png) no-repeat;
    background-position: 0 0;
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    font-weight: 900;
    color: white;
    font-size: 26px;
    line-height: 125px;
    text-align: center;
    overflow: hidden;
}

.fave {
    animation: fave_action 0.6s steps(35);
    animation-fill-mode: forwards;
    display: inline-block;
}

.fave_pos {
    position: relative;
}

@keyframes fave_action {
    to {
        background-position: -9131px 0;
    }
    /*Length of image minus first step*/
}

.fave_text {
    padding: 3%;
    width: 360px;
    margin: 3% 3% 3% 0;
    border: 1px solid #d7d7f9;
    background-color: white;
    box-shadow: 0px 0px 6px #CCC;
    border-radius: 5px;
    font-size: 16px;
    color: #eb5a00;
    font-weight: 200;
    vertical-align: middle;
    display: none;
}

.fave_text_show {
    display: inline-block;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.ttr_pop {
    z-index: 2;
    position: absolute;
    top: 9em;
    left: -3.5em;
    font-weight: 700;
    width: 12em;
    padding: 1em;
    box-shadow: 0px 0px 10px rgba(0,0,0,.1);
    background-color: white;
    color: #666;
    font-size: .8em;
}

.ttr_pop2 {
    position: relative;
    margin: 0 auto;
    width: 20em;
    text-align: center;
    padding: 1em;
    box-shadow: 0px 0px 10px rgba(0,0,0,.1);
    background-color: white;
}

.ttr_pop_arrow {
    position: relative;
    background: #ffffff;
    top: -1em;
}

    .ttr_pop_arrow:after {
        bottom: 100%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(255, 255, 255, 0);
        border-bottom-color: #ffffff;
        border-width: 10px;
        margin-left: -10px;
    }

.ttr_pop_arrow_down {
    position: relative;
    background: #00C462;
    margin: .5em 0 1em 0;
    display: block;
}

    .ttr_pop_arrow_down:after {
        top: 100%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(0, 196, 98, 0);
        border-top-color: #00C462;
        border-width: 12px;
        margin-left: -12px;
    }

.sc_ptr_hand {
    cursor: pointer;
}

.myp_container {
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    white-space: nowrap;
    margin-left: 2%;
    margin-right: 2%;
    width: 90%;
}

.myp_w {
    margin: 2em auto;
}

.myp {
    display: inline-block;
    vertical-align: middle;
    width: 14%;
    text-align: center;
    margin: 0 auto;
    padding-left: 0.1%;
}

.myp_date {
    color: #888;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 1em;
    text-align: center;
    display: block;
}

.myp_b {
    font-weight: 700;
}

.myp_date_viewing {
    color: black;
    font-weight: 700;
}

.myp_circ {
    background-color: #CCC;
    color: white;
    border-radius: 7em;
    position: relative;
    width: 7em;
    height: 7em;
    display: block;
    text-align: center;
    margin: .2em auto;
}

.myp_circ_num {
    font-size: 3em;
    color: inherit;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: inline-block;
    line-height: 100%;
    text-align: center;
    font-weight: 600;
}

.myp_ptr_hand {
    cursor: pointer;
}

.myp_circ_missed {
    background-color: #DF0000 !important;
}

.myp_circ_met {
    background-color: #00C462 !important;
}

.myp_circ_started {
    background-color: #DFA700 !important;
}

.myp_arrow1 {
    display: inline-block;
    padding: 0 !important;
    vertical-align: middle;
    width: 2%;
    min-width: 2%;
    margin-left: 0;
    text-align: center;
    cursor: pointer;
    background-color: transparent !important;
    border: 0;
}

.myp_arrow2 {
    display: inline-block;
    padding: 0 !important;
    vertical-align: middle;
    width: 2%;
    min-width: 2%;
    margin-right: 0;
    text-align: center;
    cursor: pointer;
    background-color: transparent !important;
    border: 0;
}

.myp_arrow1_img {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    text-align: center;
}

.myp_arrow2_img {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    text-align: center;
}

.friend_arrow1, .friend_arrow2 {
    display: inline-block;
    padding: 0 !important;
    vertical-align: middle;
}

.friend_table {
    display: table;
    width: 96%;
    margin: 1em auto;
    padding: 0;
    border: 0;
}

.friend_table_hrow, .friend_table_row {
    display: table-row;
}

.friend_table_hrow, .friend_table_hcell {
    background-color: #E2E2E2;
    vertical-align: middle;
}

.friend_table_hcell, .friend_table_cell {
    display: table-cell;
    padding: 0.3em 0.5%;
}

.friend_table_arrow1, .friend_table_arrow2 {
    height: 1em;
    border: 0;
    display: block;
}

.hcell0 {
    width: 20%;
    text-align: left;
}

.hcell1 {
    color: #666;
    text-transform: uppercase;
    font-weight: 600;
    font-size: .8em;
    text-align: center;
    width: 10%
}

.hcell2 {
    text-align: center;
    width: 4.8%
}

.hcell3 {
    color: #666;
    font-weight: 600;
    font-size: .8em;
    text-align: center;
    width: 8.6%
}

.hcell10 {
    text-align: center;
    width: 4.8%
}

.cell0 A {
    text-decoration: none;
}

.cell0 {
    width: 20%;
    text-align: left;
}

.cell1 {
    font-weight: 700;
    text-align: center;
    color: #000;
    width: 10%
}

.cell2 {
    text-align: center;
    width: 4.8%
}

.cell3 {
    text-align: center;
    color: #333;
    width: 8.6%
}

.cell10 {
    text-align: center;
    width: 4.8%
}

.r2 {
    background-color: #F8F8F8;
}

.tip_text {
    font-size: 1.1em;
    margin: 1em 4% 2em 4%;
}

.top_p2 {
    text-align: center;
    margin: 0 0 1em 0;
    padding: 0;
}

.friend_msg {
    text-align: center;
}

.sp_friend_btns {
    margin: .3em 2%;
    text-align: right;
}

.sp_include_me {
    margin: .3em 2%;
    text-align: right;
}

.sp_friend_w {
    text-align: left;
    width: 100%;
    height: 15em;
    overflow: hidden;
    border: 1px solid #d5d5d5;
    padding: 0 0;
    margin: 0 0%;
    background-color: white;
}

.friend_user_w {
    width: 14.2%;
    margin: 1em 0;
    display: inline-block;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.friend_user {
    display: block;
    text-decoration: none;
    color: #22a7ee;
    font-size: .9em;
    margin-top: .2em;
}

.friend_pic {
    width: 4em;
    height: 4em;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 4em;
    background-position: center center;
    background-size: cover;
    display: block;
    vertical-align: top;
    position: relative;
    z-index: 2;
}

input[type=checkbox].friend_checkbox {
    position: absolute;
    width: 9em;
    height: 5.5em;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    opacity: 0;
    left: 0em;
    top: 0em;
}

    input[type=checkbox].friend_checkbox + label:before {
        display: inline-block;
        padding: 0 0 0 0px;
        border: 0;
        cursor: pointer;
        width: 9em;
        height: 5.5em;
        margin: 0 auto;
        content: " ";
        vertical-align: top;
        position: absolute;
        z-index: 4;
        left: 0em;
        top: 0em;
    }

    input[type=checkbox].friend_checkbox:checked + label:before {
        background: url(/content/images/challenge/spch_check.png) no-repeat;
        background-size: 3em;
        background-position: center .8em;
    }

.callout_facebook2 {
    padding: .6em 1em .6em 3em !important;
    background: #3C5A99 !important;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
}

    .callout_facebook2 EM {
        background: url(/content/images/challenge/lss1_facebook_f.png) center no-repeat;
        width: 2.4em;
        height: 2.4em;
        position: absolute;
        top: 0em;
        left: 0em;
        display: block;
        border-right: 1px solid #22448B;
    }

.unique_w {
    position: relative;
}

.uniqueLinkInput {
    width: 80%;
    padding: .5em;
    height: 1.5em;
    border-radius: 2em;
    border: 1px solid #09F;
    outline: 0;
    font-weight: 600;
    color: #C00;
}

.uniqueLinkAnim {
    width: 80%;
    padding: .5em;
    height: 1.5em;
    position: absolute;
    top: 1px;
    opacity: 0;
    font-weight: 600;
    color: #C00;
    text-align: left;
}

.section2 {
}

.invite_btn {
    color: #007fc4;
    width: 6em;
    display: inline-block;
    vertical-align: middle;
    margin-left: 1em;
    position: absolute;
    right: 1.5%;
    top: .6em;
    z-index: 4;
    background-color: #EBEBEB;
    padding: .6em;
    border-radius: 2em;
    cursor: pointer;
}

.invite_arrow {
    width: .9em;
    display: inline-block;
    vertical-align: middle;
    margin-left: .3em;
}

.friend_total_text_w {
    text-align: center;
    display: block;
}

.friend_total_text1 {
    font-size: 1.1em;
    font-weight: 600;
    display: inline-block;
    vertical-align: middle;
    margin: .5em auto .5em auto;
    color: #666;
    text-align: center;
}

.friend_total_text2 {
    font-size: 1.6em;
    font-weight: 700;
    margin: .5em 0 .5em 0;
    color: #333;
    display: inline-block;
    vertical-align: middle;
}

.tracking_additions {
    text-decoration: none;
    outline: none;
    margin: 0 2% 0 2%;
    text-align: center;
}

.tracking_info_sc {
    display: block;
    margin: .2em 2% 0 2%;
    text-align: left;
    white-space: nowrap;
}

.info_btn {
    display: inline-block;
    text-decoration: none;
    outline: none;
}

.jt_btn {
    text-decoration: none;
    outline: none;
    color: #00C462;
}

.more_info {
    margin: 1em 4% 0 2%;
    display: block;
    text-align: left;
}

.more_hidden {
    display: none;
}

.invite_hidden {
    display: none;
}

.just_tracked {
    display: inline-block;
    margin: 0 auto;
    vertical-align: top;
    text-align: center;
}

.just_tracked_hidden {
    display: none;
}

/*new feats section*/
.number_input_w {
    background-color: #Fff;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #ccc;
    width: 9em;
    margin-top: .1em;
    margin-bottom: .1em;
}

.plus_and_minus {
    height: 5em;
    vertical-align: middle;
    display: inline-block;
    width: 25%;
    overflow: hidden;
}

.numbertype {
    font-size: 3em;
    font-weight: 400;
    width: 75%;
    vertical-align: middle;
    display: inline-block;
    z-index: 2;
    height: 1.6em;
    position: relative;
    font-family: 'Open Sans','Helvetica Neue',roboto, helvetica, arial, verdana, sans-serif;
    border: 0;
    outline: 0;
    text-align: center;
    padding: 0 0 !important;
    box-shadow: none !important;
    background-color: rgba(255,255,255,0);
    -webkit-appearance: none;
    color: inherit;
    line-height: 100%;
    margin: 0 auto !important;
}

.minus, .plus {
    box-sizing: border-box;
    width: 100%;
    max-height: 50%;
    overflow: hidden;
    padding: 20% 18%;
    background-color: #Fff;
    display: block;
    text-decoration: none;
    border-left: 1px solid #ccc;
}

.plus {
    border-bottom: 1px solid #ccc;
}

.arrow_up, .arrow_down {
    width: 100%;
    border: 0;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.text_big {
    font-size: 1.8em;
    display: inline;
    vertical-align: middle;
    line-height: 200%;
}

fieldset:last-child {
    margin-bottom: 0;
}

input[type="checkbox"].feat_cb_enabled {
    cursor: pointer;
}

input[type="checkbox"].ch_feat_checkbox {
    position: absolute;
    height: 2em;
    width: 2em;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    opacity: 0;
    line-height: 2em;
}

    input[type="checkbox"].ch_feat_checkbox + label {
        cursor: pointer;
        padding: .5em 0;
    }

        input[type="checkbox"].ch_feat_checkbox + label:before {
            background-color: #f2f2f2;
            height: 2em;
            width: 2em;
            display: inline-block;
            vertical-align: middle;
            padding: 0 0 0 0px;
            border-radius: 2px;
            border: 1px solid #ccc;
            cursor: pointer;
            content: " ";
            -webkit-transition: all 0.30s ease-in-out;
            -moz-transition: all 0.30s ease-in-out;
            -ms-transition: all 0.30s ease-in-out;
            -o-transition: all 0.30s ease-in-out;
            outline: none;
            margin: .2em .5em .2em 0px;
            border: 1px solid #DDDDDD;
        }

        input[type="checkbox"].ch_feat_checkbox + label:before {
        }

    input[type="checkbox"].ch_feat_checkbox:focus + label:before {
        box-shadow: 0 0 5px rgba(81, 203, 238, 1);
        margin: .2em .5em .2em 0px;
        border: 1px solid rgba(81, 203, 238, 1);
    }

    input[type="checkbox"].ch_feat_checkbox:checked + label:before {
        background: url(/content/images/challenge/spch_check.png) no-repeat;
        background-size: contain;
        background-color: #Fff;
    }

    input[type="checkbox"].ch_feat_checkbox:checked:focus + label:before {
        background: url(/content/images/challenge/spch_check.png) no-repeat;
        background-size: contain;
        background-color: #Fff;
    }

    input[type="checkbox"].ch_feat_checkbox:checked + label {
        font-weight: 700;
    }

input[type="checkbox"][disabled].ch_feat_checkbox + label:before {
    background-color: #f2f2f2;
}

.food_text {
    font-size: 1.4em;
}

.number_input_text1 {
    font-size: 1.2em;
    display: inline-block;
    vertical-align: middle;
    font-weight: 700;
    margin-left: .8em;
}

.number_input_text2 {
    font-size: 1.2em;
    display: inline-block;
    vertical-align: middle;
    font-weight: 700;
}

.number_input_div {
    display: inline-block;
    vertical-align: middle;
}

.number_input_description {
    font-size: 1.0em;
    display: inline-block;
    vertical-align: middle;
    margin-left: .8em;
}

.feat_ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .feat_ul li {
        margin: 0;
        padding: .5em 0;
        display: block;
    }

.feat_col1 {
    width: 46%;
    margin: 0 1% 0 7%;
    display: inline-block;
    vertical-align: top;
}

.feat_col2 {
    width: 46%;
    margin: 0 0% 0 0%;
    display: inline-block;
    vertical-align: top;
}

.bar_a {
    outline: 0;
    cursor: pointer;
}

.bar_w {
    background-color: rgba(0,0,0,0.1);
    height: 1.2rem;
    position: relative;
    border-radius: 1.2rem;
    text-align: left;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
    display: inline-block;
    width: 100%;
    overflow: hidden;
}

.bar {
    background-color: #22a7ee;
    height: 1.2rem;
    display: inline-block;
    border-radius: 1.2rem;
    position: relative;
}

.bar_num_w {
    color: #333;
    height: 1.2rem;
    position: relative;
    text-align: center;
    display: block;
}

.bar_num {
    color: #333;
    height: 1.2rem;
    display: inline-block;
    position: relative;
}

.bar_num_goal {
    color: #999;
    font-size: .8em;
    font-weight: 700;
    position: absolute;
    right: 0;
    top: 0;
}

.bar_num_desc {
    color: #999;
    font-size: .8em;
    font-weight: 700;
    display: inline-block;
    vertical-align: middle;
}

.bar_num_begin {
    color: #999;
    font-size: .8em;
    font-weight: 700;
    position: absolute;
    left: 0;
    top: 0;
}

.ttr_square {
    background-color: white;
    border: .2em solid rgba(0,0,0,.1);
    color: #333;
    position: relative;
    width: 12em;
    padding: .7em;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

.ttr_square_text1 {
    z-index: 1;
    text-align: left;
    width: 70%;
    display: inline-block;
    vertical-align: middle;
    font-size: 1.1em;
    color: #333;
    font-weight: 600;
}

.ttr_square_text2 {
    z-index: 1;
    text-align: center;
    width: 30%;
    display: inline-block;
    vertical-align: middle;
    color: #22a7ee;
    font-weight: 900;
}

.tcs_w {
    z-index: 1;
    text-align: center;
    font-size: 1.1em;
    font-weight: 600;
    display: block;
    margin: 1em auto 1em auto;
    color: #666;
}

.tcs1 {
    z-index: 1;
    text-align: center;
    display: inline;
    vertical-align: middle;
}

.ttr_square_num {
    z-index: 2;
    height: 1.8em;
    position: relative;
    color: #22a7ee;
    font-family: 'Open Sans','Helvetica Neue',roboto, helvetica, arial, verdana, sans-serif;
    border: 0;
    outline: 0;
    text-align: center;
    padding: 0 0 !important;
    box-shadow: none !important;
    background-color: rgba(255,255,255,0);
    -webkit-appearance: none;
    font-size: 2.2em;
    font-weight: 900;
    width: 100%;
    color: inherit;
    display: inline-block;
    line-height: 100%;
    margin: 0 auto !important;
}

.tcs2 {
    color: #000;
    font-size: 1.4em;
    font-weight: 900;
    color: #000;
    display: inline-block;
    vertical-align: middle;
}

.spin_wheel_a {
    display: block;
    text-decoration: none;
    color: #000;
}

.spin_wheel_text {
    display: inline-block;
    vertical-align: middle;
    font-size: 1.3em;
    width: 70%;
    font-weight: 700;
}

.spin_wheel {
    display: inline-block;
    vertical-align: middle;
    font-size: 1em;
    color: white;
    width: 4em;
    height: 4em;
    border-radius: 4em;
    margin-right: .5em;
    background-color: #ff7b08;
    text-align: center;
}

    .spin_wheel SPAN {
        line-height: 4em;
    }

.sleep_w {
    width: 100%;
    display: block;
    margin: 2.5em auto 1em auto !important;
}

.fd_w {
    max-width: 34em;
    margin: auto;
    background-color: #f4f5f7;
    border-radius: 0.5em;
    padding: 1em 2em;
    box-sizing: border-box;
    position: relative;
    /*
    border: 0.0625rem solid #d0d0d0;
    */
}

.fdg_icon {
    width: 8em;
}

.fdg_icon_sm {
    width: 4em;
}

.offscreen {
    left: -999em;
    position: absolute;
}

@media screen and (hover) {
    .HistoryRow:hover {
        background-color: rgba(0,0,0,0.03);
    }
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) {
    /* IPAD ONLY*/
    .challenge_flex {
        flex-wrap: nowrap;
    }

    .challenge_col1 {
        padding-bottom: 0;
        /*
        width: 65%;

        */
        margin-bottom: 3rem;
        margin-top: 0;
    }

    .main_challenge_bg .challenge_col1 {
        padding-bottom: 3rem;
    }

    .challenge_list .challenge_title {
        font-size: 1.3rem !important;
    }

    .challenge_icon {
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: auto;
        display: inline-flex;
        max-width: 35%;
        max-height: 15em;
    }

    .icon_index {
        max-height: 5rem;
    }
}

@media screen and (max-width: 80em) {
    .myp_circ {
        border-radius: 5em;
        width: 5em;
        height: 5em;
    }

    .myp_circ_num {
        font-size: 2em;
        font-weight: bold;
    }

    .steps_title {
        font-size: 1em;
        display: none !important;
    }
}

@media screen and (max-width: 75em) {
    .ch_progress_w {
        min-width: 20em;
    }

    .or_w {
        position: relative;
        height: 2em;
        padding: 2em;
        display: block;
    }

    .orline {
        top: 49%;
        left: 0;
        width: 100%;
        height: 1px;
    }

    .orwordwrapper {
        height: 2em;
        margin-top: -2em;
    }

    .orword {
        display: inline-block;
    }
}

@media screen and (max-width: 46em) {
    .myp {
        width: 13.1%;
        padding-left: 0;
    }

    .myp_circ {
        border-radius: 4em;
        width: 4em;
        height: 4em;
    }

    .myp_circ_num {
        font-size: 1.4em;
        font-weight: bold;
    }

    .myp_b {
        display: block;
        line-height: 100%;
    }

    .steps_flex_w {
        flex-wrap: wrap;
    }

    .ch_progress_w {
        min-width: 20em;
    }
}

@media screen and (max-width: 32em) {
    .h2_w3 .gj-datepicker.input-group {
        flex-shrink: 0;
    }

    .ch_page_width {
        padding: 0 0;
    }

    .feat_text {
        font-size: 1em;
    }

    .about_link {
        vertical-align: baseline;
    }

    .sleep_w {
        margin: 2.5em auto 2em auto !important;
    }

    .steps_input_w {
        flex: 0 0 100%;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center;
    }

    .steps_input {
        font-size: 2em;
        width: 7em;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .steps_fs {
        font-size: 2em;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .steps_input2_w {
        flex: 0 0 100%;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center;
    }

    .steps_input2 {
        font-size: 2em;
        width: auto;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .steps_btn_w {
        flex: 0 0 100%;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 1em !important;
        padding: 0 2em;
    }

    .steps_btn {
        font-size: 1em;
    }

    .refresh_btn_w {
        /*
        flex: 0 0 100%;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 1em !important;
        padding: 0 2em;
            */
    }

    .refresh_btn {
        font-size: 0.8em;
    }

    .device_logo_icon {
        width: 8em;
    }

    .custom_title {
        font-size: 1em;
        flex: 1 1 100%;
        margin-left: 0 !important;
        display: none !important;
    }

    .custom_input_w {
        margin-right: auto !important;
    }

    .custom_input {
        font-size: 1.8em;
        width: 100%;
        flex: 1 1 100%;
    }

    .custom_btn {
        font-size: 1em;
        flex: 1 1 100%;
        display: block !important;
        margin-top: 1em !important;
    }

    .ch_top_date {
        font-size: 1rem;
        margin-bottom: 0;
    }

    .ch_bg {
        padding: 1em 5% 0rem 5%;
    }

    .ch_curve_btm, .ch_curve_top {
        height: 2.5rem;
    }

    .challenge_col1 {
        padding-bottom: 0;
        /*
        width: 65%;

        */
        margin-bottom: 2rem;
    }

    .challenge_title {
        font-size: 1.3rem !important;
    }

    .main_challenge_bg .challenge_col1 {
        padding-bottom: 0;
    }

    .challenge_flex {
        flex-wrap: nowrap;
    }

    .challenge_icon {
        /*
        flex: 1 1 100%;

        width: 30%;
        max-width: 30%;
            */
        max-width: 30%;
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: auto;
        display: inline-flex;
        max-height: 5em;
    }

    .icon_index {
    }

    .icon_spacer {
        width: 10%;
        max-width: 10%;
    }

    .about_btn {
        font-size: 0.75em;
    }

    .minutes_w {
        flex-wrap: wrap;
    }

    .ttr_w {
        position: relative;
        margin: 1em auto;
        flex: 0 0 100%;
        width: 100%;
    }

    .ttr_circ_w {
        margin: 1em auto;
        width: 7em;
        height: 7em;
        display: block;
        z-index: 0;
        position: relative;
    }

    .ttr_circ {
        margin: 1em auto;
        border-radius: 7em;
        width: 7em;
        height: 7em;
        border-width: 0.6em;
        display: block;
        z-index: 0;
        position: relative;
    }

    .ttr, .ttr_over, .ttrv, .ttrv_over, .ttrf, .ttrf_over, .ttrg, .ttrg_over {
        padding: 0 !important;
        display: inline-block;
        z-index: 2;
        position: relative;
        vertical-align: middle;
        width: 8%;
        text-align: center;
        margin-left: auto;
        margin-right: .5%;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

    .ttr_add, .ttr_minus, .ttrf_add, .ttrg_add, .ttrf_minus, .ttrg_minus {
        padding: 0 !important;
        display: inline-block;
        width: 12%;
        text-align: center;
        position: absolute;
        z-index: 1;
    }

    .ttr_add, .ttr_minus {
        bottom: 3.5em;
    }

    .ttrg_add, .ttrg_minus {
        top: 4.5em;
    }

    .ttrf_add, .ttrf_minus {
        top: 7.5em;
    }

    .ttr_add, .ttrf_add, .ttrg_add {
        right: 14%;
    }

    .ttr_minus, .ttrf_minus, .ttrg_minus {
        left: 14%;
    }

    .ttrv {
        width: 15%;
    }

    .ttrf, .ttrg {
        width: 11%;
    }

    .myp_arrow1 {
        width: 3%;
        min-width: 2%;
    }

    .myp_arrow2 {
        width: 3%;
        min-width: 2%;
    }

    .myp_circ {
        background-color: #CCC;
        color: white;
        border-radius: 2.75em;
        position: relative;
        width: 2.75em;
        height: 2.75em;
        display: block;
        text-align: center;
        margin: .2em auto;
    }

    .myp_circ_num {
        font-size: 1em;
        color: inherit;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        font-weight: bold;
    }

    .myp_w {
        overflow-x: hidden;
    }

    .myp_container {
        width: 86%;
    }

    .myp_date {
        font-size: 0.8em;
    }

    .leader_ol li {
        font-size: 0.9em;
    }

        .leader_ol LI:before {
            /*
            left: 1em;
                 */
            top: 0.9em;
            font-size: 0.9em;
            /*
            line-height: 1.4em;
            width: 1.4em;
            height: 1.4em;
            border-radius: 1.4em;
                */
        }

    .leader_min_mobile {
        display: block;
        text-align: right;
        text-transform: uppercase;
        font-size: 0.75rem;
        margin-right: 1rem;
        color: #999;
        font-weight: bold;
    }

    .leader_min {
        position: absolute;
        left: -999em;
    }

    .history-c1 {
        padding: .5rem 1.5rem .5rem 1.5rem;
        font-size: 1em;
    }

    .history-c2 {
        padding: .5rem 0;
        font-size: 1em;
    }

    .fd_w {
        padding: 1em;
    }

    .fdg_icon {
        width: 4em;
    }

    .fdg_icon_sm {
        width: 2em;
    }
}
.justify-content-space-evenly {
    justify-content: space-evenly !important;
}

H1.articleTitle {
    font-size: 3em;
    color: black;
    font-weight: 300;
    margin: 0 auto 0 auto;
    padding: 0;
    line-height: normal;
    font-style: normal;
    text-align: left;
}

    H1.articleTitle A {
        color: black;
        font-weight: 700;
        text-decoration: none;
    }

H2.articleSub {
    font-size: 1.2em;
    text-align: center;
    letter-spacing: 0.0625em;
    color: #007D7D;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0 auto 0.5em auto;
    padding: 0.8em 0 0.1em 0;
    display: block;
}

.hpad3 {
    margin-bottom: 0.1em !important;
}

.hl_subtitle {
    font-weight: 700;
    font-size: 1em;
    color: #d7d7f9;
    text-align: left;
    margin-left: 0.1em;
    margin-right: auto;
    margin-bottom: 1em;
    text-transform: uppercase;
}

#see_more_tags {
    margin: 0 auto 1em auto;
    font-size: .8em;
    text-align: left;
    font-weight: 700;
    color: #007D7D;
}

    #see_more_tags A {
        text-transform: uppercase;
        color: #007D7D;
        text-decoration: none;
    }

.see_more_tags_line {
    border-bottom: 0.0625rem solid rgba(0,0,0,0.1);
    padding-bottom: 1em;
    flex-grow: 1;
    display: block;
}

.see_more_tags_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
}

.see_more_tags_first {
    flex-grow: 1;
}

.h_icon {
    width: 2.5rem;
    height: 2.5rem;
    margin: auto 0 auto 0.5em;
}

H2.h2_cat {
    text-align: left;
    border-top: 0.0625rem solid rgba(0,0,0,0.1);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    padding-top: 1.5em;
    margin-top: 1em;
    font-size: 1.4em;
}

    H2.h2_cat:first-of-type {
        border-top: 0;
        padding-top: 0;
        margin-top: 0;
    }

.h2_a {
    display: block;
}

.h2_title {
    color: #007D7D;
    text-transform: capitalize;
}

.h2_btn_right {
    position: absolute;
    right: 5%;
    letter-spacing: 0;
    text-transform: uppercase;
}

.text-left-desktop {
    text-align: left;
}

.bg-aqua {
    background-color: #C8E9FB;
}

.bg1 {
    background-color: #E7F1F8;
    padding: 2em 5%;
}

.bg_article_cat {
    background-image: url(/content/images/article_cat_bg1.svg);
    padding: 2em 5% 4em 5%;
    background-size: cover;
    background-repeat: repeat;
    position: relative;
    background-color: #230F57;
    text-align: center;
}

.bg_sparkpoints {
    background-image: url(/content/images/SparkPoints/sparkpoints_bg.png);
    padding: 2em 5% 4em 5%;
    background-size: cover;
    background-repeat: repeat;
    position: relative;
    background-color: #570404;
    text-align: center;
}

.bg_birthday_sparkpoints {
    background-image: url(/content/images/SparkPoints/sparkpoints_birthday_bg.svg);
    padding: 2em 5% 4em 5%;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    background-color: #FFF;
    text-align: center;
}

.bg_bonus_sparkpoints {
    background-image: url(/content/images/SparkPoints/sparkpoints_wheel_overall_bg.png);
    background-size: cover;
    background-repeat: repeat;
    position: relative;
    background-color: #7A4805;
    text-align: center;
}

.bg_hiker_sparkpoints {
    background-image: url(/content/images/SparkPoints/hiker_sunset.png);
    background-size: cover;
    background-repeat: repeat;
    position: relative;
    background-color: #85CAED;
    text-align: center;
    background-position: center;
}

.bg_comm_cat {
    background-image: url(/content/images/Community/community_bg1.svg);
    padding: 2em 5% 4em 5%;
    background-size: cover;
    background-repeat: repeat;
    position: relative;
    background-color: #038135;
    text-align: left;
}

.bg_goals_cat {
    background-image: url(/content/images/Goals/goals_bg1.svg);
    padding: 2em 5% 4em 5%;
    background-size: cover;
    background-repeat: repeat;
    position: relative;
    background-color: #371364;
    text-align: left;
}

.bg-dk-green {
    background-image: url(/content/images/LeafLines1_bg.svg);
    background-size: cover;
    background-repeat: repeat;
    background-color: #003535;
}

.bg_summary {
    background-image: url(/content/images/waves_bg.svg);
    padding: 2em 5% 4em 5%;
    background-size: cover;
    background-repeat: repeat;
    position: relative;
    background-color: #5B2D77;
    text-align: center;
}

.bg_simple_lines {
    background-image: url(/content/images/simple_lines_bg.svg);
    background-size: 100%;
    background-position: 0 20em;
    background-repeat: no-repeat;
    position: relative;
}

.bg_article_cat h2,
.bg_summary H2 {
    color: white;
    font-size: 1.4em;
}

.bg_gray {
    background-color: #F4F5F7;
    padding: 2em 5%;
}

.icons_w {
    display: inline-block;
    width: 18%;
    margin-left: 3%;
    margin-right: 3%;
    text-align: center;
    color: #fff;
    vertical-align: top;
}

.icon_pic {
    width: 55%;
    margin: 0 auto;
    border: 0;
}

.icon_p {
    font-size: 1rem;
    display: block;
    margin: 1em auto;
    font-weight: 700;
    line-height: 115%;
    width: 80%;
}

.icons_a {
    display: block;
    color: #fff !important;
    padding: 0;
    width: 100%;
    outline: none;
    background-color: transparent;
    border: 0;
    outline: none !important;
}

.page_title_w {
    padding: .5em 0 0 0;
    margin: 0 0 0 1rem;
    text-align: center;
}

    .page_title_w EM {
        display: inline-block;
        vertical-align: middle;
        height: 3em;
        width: 3em;
        margin-right: .5em;
        background-size: 100%;
        background-image: url(/content/images/mbart_s_list_all_v3.svg);
    }

.page_title {
    text-transform: uppercase;
    font-size: 1.8rem;
    font-weight: 700;
    display: inline-block;
    vertical-align: middle;
    color: #3f3f3f;
    margin: 0 auto;
}

.page_tagline {
    font-weight: 400;
    font-size: 1.1rem;
    text-transform: none;
    display: block;
    vertical-align: middle;
    color: #666;
    margin-left: 1.4em;
    margin-top: .1em;
}

.categories {
    padding: 1em 2em;
    position: relative;
    display: block;
    background-color: #E7F1F8;
    border-radius: 0.5em;
}

    .categories UL {
        margin: 0;
        padding: 0;
    }

    .categories LI {
        display: block;
        font-size: 1em;
        position: relative;
        list-style: none;
        z-index: 5;
    }

        .categories LI.row1 {
        }

        .categories LI:last-child {
            border-bottom: none;
        }

        .categories LI A {
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: center;
            font-weight: bold;
            text-decoration: none;
            color: black;
            padding: 0.8em 0 0.8em 0;
        }

.cat_pic_w {
    position: relative;
    width: 8em;
    vertical-align: middle;
    margin: auto 1em auto 0;
    z-index: 90;
}

.cat_pic {
    width: 8em;
    border: 0;
}

.cat_i {
    width: 1.5em;
    height: 1.5em;
    margin-right: 0.5em;
}

.cat {
    margin: auto auto auto 0;
    text-align: left;
    margin-left: 0.5em;
}

.catb_icon_w {
    margin-right: 0.6em;
    margin-left: auto;
}

.catb_t {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.catb_t2 {
    margin-left: 0;
    margin-right: auto;
}

.art_post_w {
    margin: 1em auto 2em auto;
    width: 29.3%;
    box-sizing: border-box;
    background-color: white;
    display: inline-block;
    vertical-align: top;
}

.art_a {
    color: black;
    display: block;
    text-decoration: none !important;
    transition: all 0.3s
}

.art_pic_w {
    vertical-align: top;
    display: inline-block;
    width: 100%;
}

.art_pic_w {
    width: 100%;
    margin: 0 auto;
}

.art_pic_i {
    width: 100%;
    padding-bottom: 65.166%;
    position: relative;
    overflow: hidden;
}

.art_pic2 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
}

.art_pic {
    width: 100%;
    vertical-align: top;
    display: inline-block;
}

.art_post {
    padding: 0.5em 3% 1em 3%;
    text-align: center;
    box-sizing: border-box;
}

.art_icon_w {
    border-radius: 2.4em;
    width: 2.4em;
    height: 2.4em;
    position: absolute;
    text-align: center;
    display: inline-block;
    z-index: 3;
}

.art_icon {
    width: 100%;
}

.art_headline {
    color: #446820;
    font-size: .8em;
    font-weight: 700;
    text-transform: uppercase;
    margin: 1em 0;
    display: none;
}

.art_title {
    font-size: 1.2rem;
    color: black;
    padding: 0;
    display: block;
    text-decoration: none;
    font-weight: 600;
    line-height: 120%;
}

.art_cc {
    border-left: 0.2em dotted #00df70;
    padding-left: 0.8em;
    margin-top: 0.8em;
    margin-left: 0.8em;
    color: #666;
    text-align: left;
    font-size: 0.8em;
    font-weight: 600;
}

.art_intro {
    display: none;
}

.art_author {
    font-size: .8em;
    background: none;
    border: none;
    padding: 0;
    color: #666;
    display: none;
}

    .art_author EM {
        font-family: Georgia, "Times New Roman", Times, serif;
        text-transform: lowercase;
        color: #999;
    }

.art_date {
    color: #666;
    margin-top: 0.5em;
    text-align: center;
    display: none;
    font-size: 0.8em;
}

.round_w {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    display: inline-block;
    vertical-align: middle;
    display: none;
}

.round_time {
    display: inline-block;
    vertical-align: middle;
    background-color: #207D88;
    width: 3.5em;
    height: 3.5em;
    border-radius: 3.5em;
    overflow: hidden;
    box-shadow: 0.0625rem 0.1em 0.2em rgba(0,0,0,.2);
}

.round_cals {
    display: inline-block;
    vertical-align: middle;
    background-color: #009F9F;
    width: 3.5em;
    height: 3.5em;
    border-radius: 3.5em;
    overflow: hidden;
    box-shadow: 0.0625rem 0.1em 0.2em rgba(0,0,0,.2);
}

.round_t1 {
    font-size: 0.7em;
    line-height: 100%;
    font-weight: 700;
    display: block;
    text-align: center;
    color: white;
    margin-top: 0.5rem;
}

.round_t2 {
    font-size: 1.5em;
    line-height: 100%;
    font-weight: 400;
    display: block;
    text-align: center;
    color: white;
}

.nutrients {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    display: inline-block;
    vertical-align: middle;
    display: none;
}

    .nutrients A {
        color: #555;
    }

.ncals, .nfat, .nprotein, .ncarbs, .nfiber {
    border-right: 0.0625rem solid #f2f2f2;
    padding: 0 0.7em;
    font-size: 0.7em;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

.nfiber {
    border-right: 0;
}

    .ncals EM, .nfat EM, .nprotein EM, .ncarbs EM, .nfiber EM {
        font-size: 0.7em;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-style: normal;
    }

.nutrients B {
    font-size: 1.2rem;
    display: block;
    font-weight: 400;
}

.ncals {
    color: #555;
    display: none;
}

.nfat {
    color: #555;
}

.nprotein {
    color: #555;
}

.ncarbs {
    color: #555;
}

.nfiber {
    color: #555;
}
/*uses some of the same stuff from above, changes block just by adding the .calch class*/
.calch .art_post_w {
    position: relative;
    width: 100%;
    margin: 1em auto 1em auto;
    display: block;
}

.calch .art_post {
    width: 65%;
    padding: 1em 3% 1em 3%;
    text-align: left;
    display: inline-block;
    vertical-align: top;
}

.calch .art_pic_w {
    width: 35%;
    display: inline-block;
    vertical-align: top;
    position: relative;
}

.calch .art_intro {
    color: black !important;
    display: block;
    margin: 1em 0;
    font-size: 1.1em;
    line-height: 160%;
}

.calch .art_headline {
    display: block;
}

.calch .art_title {
    font-size: 2.4rem;
    text-align: left;
    font-weight: 300;
}

.calch .art_icon_w {
    left: 1em;
    top: 1em;
    display: none;
}

.calch .art_date {
    display: block;
    text-align: left;
    font-size: 0.9rem;
    color: #444;
}

.calch_date {
    text-align: left !important;
}

.calch_btn {
    font-size: 1.4em;
    font-weight: 500;
    padding: 1em 3em;
}

.calch .art_cc {
    /*
    font-size: 1rem;
    line-height: 1.6;

    */
    margin-left: 0;
}

.calch_border_bottom {
    border-bottom: 0.08625rem solid rgba(0,0,0,0.1);
}

    .calch_border_bottom:last-of-type {
        border-bottom: 0;
    }
/*uses some of the same stuff from above, changes block just by adding the feature class*/
.feature .art_post_w {
    position: relative;
    background-color: #EBECED;
    width: 100%;
    margin: 1em auto 1.5em auto;
    display: block;
}

.feature .art_post {
    width: 40%;
    padding: 1em 3% 1em 3%;
    text-align: left;
    display: inline-block;
    vertical-align: top;
}

.feature .art_pic_w {
    width: 60%;
    display: inline-block;
    vertical-align: top;
    position: relative;
}

.feature .art_intro {
    color: black !important;
    display: block;
    margin: 1em 0;
    font-size: 1.1em;
    line-height: 160%;
}

.feature .art_headline {
    display: block;
}

.feature .art_title {
    font-size: 1.8rem;
}

.feature .art_icon_w {
    left: 1em;
    top: 1em;
    display: none;
}

.feature .art_date {
    display: block;
    text-align: left;
    font-size: 0.9rem;
    color: #444;
}

/*uses some of the same stuff from above, changes block just by adding the feature2 class*/
.feature2 .art_post_w {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin: 1em auto 0 auto;
    display: block;
}

.feature2 .art_post {
    position: relative;
    width: 100%;
    padding: 1em 3% 1em 3%;
    text-align: left;
    display: inline-block;
    vertical-align: top;
}

.feature2 .art_pic_w {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    position: relative;
}

.feature2 .art_intro {
    color: black !important;
    display: block;
    margin: 1em 0;
    font-size: 1.1em;
    line-height: 160%;
}

.feature2 .art_headline {
    display: none;
}

.feature2 .art_title {
    font-size: 1.4rem;
}

.feature2 .art_icon_w {
    border-radius: 3em;
    width: 3em;
    height: 3em;
    right: 1.5em;
    left: auto;
    bottom: auto;
    top: -1.5em;
    display: none;
}

/*uses some of the same stuff from above, changes block just by adding the shopall class*/
.shopall {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    text-align: left;
}

    .shopall .art_post_w {
        position: relative;
        margin: 1em auto 2em 0;
        width: 29.3%;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
        -ms-transition: all 0.5s ease-out;
        -o-transition: all 0.5s ease-out;
        transition: all 0.5s ease-out;
    }

    .shopall .art_post {
        position: relative;
        padding: 1em 3% 1em 3%;
        text-align: center;
    }

    .shopall .art_title {
        font-size: 1.1em;
    }

    .shopall .art_icon_w {
        top: 0;
        right: auto;
        bottom: auto;
        left: 50%;
        margin-left: -1.2em;
        margin-top: -1.2em;
        display: none;
    }

    .shopall .round_w {
        position: absolute;
        top: -3.5em;
        right: 0.5em;
        display: inline-block;
    }

    .shopall .nutrients {
        margin-top: 1em;
        display: inline-block;
        display: flex;
        justify-content: space-between;
        margin: auto;
        align-items: flex-start;
        align-content: flex-start;
        flex-wrap: nowrap;
    }

    .shopall .ncals, .shopall .nfat, .shopall .nprotein, .shopall .ncarbs, .shopall .nfiber {
        padding: 0 0;
        margin: 1em auto 0.5em auto;
        flex: 0 1 auto;
        width: 25%;
    }

/*uses some of the same stuff from above, changes block just by adding the shop3col class*/
.shop3col {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    text-align: left;
}

    .shop3col .art_post_w {
        position: relative;
        /*margin-left: 0;*/
    }

    .shop3col .art_post {
        position: relative;
        padding: 0.7em 3% 1em 3%;
        text-align: center;
    }

    .shop3col .art_title {
        margin-top: 1em;
    }

    .shop3col .art_icon_w {
        top: 0;
        right: auto;
        bottom: auto;
        left: 50%;
        margin-left: -1.2em;
        margin-top: -1.2em;
        display: inline-block;
    }

    /*recipe hack for 3 column*/
    .shop3col > .recipe .art_title {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

    .shop3col > .recipe .art_icon_w {
        display: none;
    }

    .shop3col > .recipe .round_w {
        position: absolute;
        top: -3.5em;
        right: 0.5em;
        display: inline-block;
    }

    .shop3col > .recipe .nutrients {
        margin-top: 1em;
        display: inline-block;
        display: flex;
        justify-content: space-between;
        margin: auto;
        align-items: flex-start;
        align-content: flex-start;
        flex-wrap: nowrap;
    }

    .shop3col > .recipe .ncals, .shopall .nfat, .shopall .nprotein, .shopall .ncarbs, .shopall .nfiber {
        padding: 0 0;
        margin: 1em auto 0.5em auto;
        flex: 0 1 auto;
        width: 25%;
    }

    /*category hack for 3 column*/
    .shop3col.category .art_icon_w {
        display: none;
    }

    .shop3col.category .art_title {
        margin-top: 0;
    }

    .shop3col.category .art_date { /*display:block;*/
    }

/*uses some of the same stuff from above, changes block just by adding the bloglist class*/
.bloglist {
    text-align: left;
}

    .bloglist .art_post_w {
        position: relative;
        margin-left: 2em;
        background-color: transparent;
        width: 100%;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

        .bloglist .art_post_w:last-of-type {
            border-bottom: 0;
        }

    .bloglist .art_post {
        position: relative;
        padding: 0.7em 3% 1em 3%;
        text-align: center;
    }

    .bloglist .art_title {
        text-align: left;
    }

    .bloglist .art_pic_w {
        display: none;
    }

    .bloglist .art_title::before {
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        font-family: "Font Awesome 5 Free";
        content: "\f249";
        color: #333;
        font-weight: 500;
        position: absolute;
        left: -1.5em;
    }

    .bloglist .art_icon_w {
        top: 0;
        right: auto;
        bottom: auto;
        left: 50%;
        margin-left: -1.2em;
        margin-top: -1.2em;
        display: inline-block;
    }

    /*category hack for 3 column*/
    .bloglist.category .art_icon_w {
        display: none;
    }

    .bloglist.category .art_title {
        margin-top: 0;
    }

    .bloglist.category .art_date {
        display: block;
    }
/*uses some of the same stuff from above, changes block just by adding the shop4col class*/
.shop4col {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    text-align: left;
}

    .shop4col .art_post_w {
        position: relative;
        width: 23%;
        margin: 0 1% 1em 1%;
        display: inline-block;
        vertical-align: top;
    }

    .shop4col .art_post {
        position: relative;
        padding: 1.7em 3% 1em 3%;
        text-align: center;
    }

    .shop4col .art_pic_w {
    }

    .shop4col .art_intro {
        color: black;
        margin: 1em 0;
        font-size: 1.1em;
        display: none;
    }

    .shop4col .art_headline {
        display: none;
    }

    .shop4col .art_title {
        font-size: 1rem;
        margin-top: 0;
    }

    .shop4col .art_icon_w {
        top: 0;
        right: auto;
        bottom: auto;
        left: 50%;
        margin-left: -1.2em;
        margin-top: -1.2em;
        display: inline-block;
    }

    .shop4col .art_author {
        display: none !important;
    }

/*uses some of the same stuff from above, changes block just by adding the list-pic-left class*/
.list-pic-left .art_post_w {
    position: relative;
    width: 100%;
    margin: 1em auto;
    display: block;
    padding: 0 0 1em 0;
    border-bottom: 0.0625rem solid rgba(0,0,0,0.1);
}

.list-pic-left .art_post {
    width: 70%;
    padding: 0 3% 0 3%;
    text-align: left;
    display: inline-block;
    vertical-align: top;
}

.list-pic-left .art_pic_w {
    width: 30%;
    display: inline-block;
    vertical-align: top;
    position: relative;
}

.list-pic-left .art_intro {
    color: black !important;
    display: block;
    margin: 1em 0 0.3em 0;
    font-size: 0.9em;
}

.list-pic-left .art_headline {
    display: none;
}

.list-pic-left .art_title {
    font-size: 1.2rem;
}

.list-pic-left .art_icon_w {
    top: auto;
    right: 1em;
    bottom: 1em;
    left: auto;
    margin-left: -1.2em;
    margin-top: -1.2em;
    display: none;
}

.list-pic-left .art_date {
    display: block;
}

.list-pic-left .round_w {
    display: inline-block;
}

.list-pic-left .nutrients {
    display: inline-block;
}

.art_heading {
    display: block;
    padding: 1em 2% 1em 2%;
    font-size: 1.2em;
    letter-spacing: 0.0625em;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Oswald';
    font-weight: 500;
    color: #999;
}

.art_cat {
    text-transform: uppercase;
    display: block;
    margin: 2em auto 1.2em auto;
    position: relative;
}

    .art_cat .art_title {
        font-size: 1.5rem;
        margin: 0;
        padding: 0;
        color: #666;
        font-family: 'Oswald';
        font-weight: 500;
    }

    .art_cat:first-of-type {
        margin-top: .5em;
    }

.fancy {
    line-height: 0.4;
    text-align: center;
}

    .fancy h2 {
        display: inline-block;
        position: relative;
    }

        .fancy h2:before, .fancy h2:after {
            content: "";
            position: absolute;
            height: 0.2em;
            border-bottom: 0.0625rem solid #ccc;
            border-top: 0.0625rem solid #ccc;
            top: 0;
            width: 21.25em;
        }

        .fancy h2:before {
            right: 100%;
            margin-right: 1em;
            width: 26.25em;
        }

        .fancy h2:after {
            left: 100%;
            margin-left: 1em;
        }

.see_all {
    position: absolute;
    right: 1%;
    font-size: .7em;
    letter-spacing: .1em;
    font-weight: 500;
    top: -.8em;
}

.cat_all_btn {
    text-transform: uppercase;
    font-weight: 600;
}

.black_to_blue {
    color: #212529;
}

.cust-title {
    font-size: 1.3em;
    font-weight: 600;
}

.welcome_series_a {
    display: flex;
    align-content: center;
    margin: auto;
    max-height: 6em;
}

.welcome_series_thumb {
    max-width: 10em;
    margin: auto 0 auto auto;
    align-self: center;
}

.welcome_series_title {
    margin: auto auto auto 1.5em;
    color: #333;
    font-weight: 600;
    text-align: left;
    align-self: center;
}

.likert_statement {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.likert {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0em 0 2em 0;
    display: block;
    border-bottom: 0.1em solid #efefef;
}

    .likert:last-of-type {
        border-bottom: 0;
    }

    .likert:before {
        content: '';
        position: relative;
        top: 0.5em;
        left: 9.5%;
        display: block;
        background-color: #efefef;
        height: 0.3em;
        width: 76%;
    }

    .likert li {
        display: inline-block;
        width: 18.5%;
        text-align: center;
        vertical-align: top;
    }

        .likert li input[type=radio] {
            display: block;
            position: relative;
            top: 0;
            left: 50%;
            margin-left: -0.3em;
        }

        .likert li label {
            width: 100%;
            font-size: 0.9em;
        }

    .likert label > input:checked + span.likert_text {
        font-weight: 600;
    }

/*check image radio buttons*/

.likert_checks {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0 0 2em;
    display: flex;
}

    .likert_checks:last-of-type {
        border-bottom: 0;
    }

    .likert_checks li {
        display: flex;
        width: 19%;
        margin: 0.5%;
        text-align: center;
        vertical-align: top;
    }

        .likert_checks li label {
            width: 100%;
            font-size: 0.9em;
        }

    .likert_checks .likert_img {
        background-image: url(/Content/Images/likert_circle.svg);
    }

    .likert_checks .likert_btn {
        display: block;
        box-sizing: border-box;
        text-align: center;
        margin: auto;
        border: 0.1em solid transparent;
        border-radius: 0.8em;
        padding: 1em 0.5em;
        height: 100%;
        background-color: white;
    }

    .likert_checks .likert_img {
        width: 4em;
        height: 4em;
        display: block;
        vertical-align: middle;
        background-repeat: no-repeat;
        background-size: 100%;
        box-sizing: border-box;
        text-align: center;
        margin: auto;
    }

    .likert_checks .likert_text {
        display: block;
        padding-top: 0.1em;
        margin: auto;
    }

    .likert_checks input { /* HIDE RADIO */
        /* visibility: hidden; Makes input not-clickable */
        opacity: 0;
        position: absolute; /* Remove input from document flow */
    }

    .likert_checks label > input + img { /* IMAGE STYLES */
        cursor: pointer;
    }

    .likert_checks input[type="radio"]:checked + label span.likert_btn {
        font-weight: 600;
        /*
        box-shadow: 0 0 0.5em rgba(0,0,0,0.1);*/
    }

    /* (RADIO CHECKED) IMAGE STYLES */

    .likert_checks input[type="radio"]:checked + label span span.likert_img {
        background-image: url(/Content/Images/likert_circle_checked.svg);
    }

    .likert_checks input[type="radio"]:focus + label span.likert_btn {
        opacity: 0.9;
        border-color: #CCC;
    }

/*faces radio buttons*/
.likert_faces {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0 0 2em;
    display: flex;
}

    .likert_faces:last-of-type {
        border-bottom: 0;
    }

    .likert_faces li {
        display: flex;
        width: 19%;
        margin: 0.5%;
        text-align: center;
        vertical-align: top;
    }

        .likert_faces li label {
            width: 100%;
            font-size: 0.9em;
        }

    .likert_faces .Disagree_Strongly {
        background-image: url(/Content/Images/likert_disagree_strongly.svg);
    }

    .likert_faces .Agree_Strongly {
        background-image: url(/Content/Images/likert_agree_strongly.svg);
    }

    .likert_faces .Disagree {
        background-image: url(/Content/Images/likert_disagree.svg);
    }

    .likert_faces .Agree {
        background-image: url(/Content/Images/likert_agree.svg);
    }

    .likert_faces .Not_Applicable {
        background-image: url(/Content/Images/likert_neutral.svg);
    }

    .likert_faces .likert_btn {
        display: block;
        box-sizing: border-box;
        text-align: center;
        margin: auto;
        border: 0.1em solid transparent;
        border-radius: 0.8em;
        padding: 1em 0.5em;
        height: 100%;
    }

    .likert_faces .likert_img {
        width: 4em;
        height: 4em;
        display: block;
        vertical-align: middle;
        background-repeat: no-repeat;
        background-size: 100%;
        box-sizing: border-box;
        text-align: center;
        margin: auto;
    }

    .likert_faces .likert_text {
        display: block;
        padding-top: 0.1em;
        margin: auto;
    }

    .likert_faces input { /* HIDE RADIO */
        /* visibility: hidden; Makes input not-clickable */
        opacity: 0;
        position: absolute; /* Remove input from document flow */
    }

    .likert_faces label > input + img { /* IMAGE STYLES */
        cursor: pointer;
    }

    .likert_faces input[type="radio"]:checked + label span.likert_btn,
    .likert_faces input[type="radio"]:focus + label span.likert_btn {
        border-color: #22a7ee;
        font-weight: 600;
        background-color: #f4f5f7;
    }

.assessment_bg1 {
    background-image: url(/content/images/assessment_bg1.jpg);
    padding: 2em 5% 4em 5%;
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    position: relative;
    background-color: #C4E6DD;
    text-align: center;
}

.likert_btn {
    position: relative;
}

.likert_faces input[type="radio"]:checked + label span.likert_btn::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f058";
    color: #22a7ee;
    display: inline-block;
    position: absolute;
    left: 50%;
    margin-left: -0.5em;
    bottom: -0.5em;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-size: 2em;
    border-radius: 2em;
    height: 1em;
    width: 1em;
    line-height: 100%;
    overflow: hidden;
    background-color: white;
    z-index: 2;
}

[role="radiogroup"] {
    padding: 0;
    margin: 0;
    list-style: none;
}

    [role="radiogroup"]:focus {
        outline: none;
    }

.likert_faces [role="radio"][aria-checked="true"] .likert_sel::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f058";
    color: #22a7ee;
    display: inline-block;
    position: absolute;
    left: 50%;
    margin-left: -0.5em;
    bottom: -0.5em;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-size: 2em;
    border-radius: 2em;
    height: 1em;
    width: 1em;
    line-height: 100%;
    overflow: hidden;
    background-color: white;
    z-index: 2;
}

.likert_checks [role="radio"][aria-checked="true"] .likert_sel::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f00c";
    color: #22a7ee;
    display: inline-block;
    position: absolute;
    left: 50%;
    margin-left: -0.2em;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-size: 3em;
    height: 1em;
    width: 1em;
    z-index: 2;
    display: none;
}

.likert_checks [role="radio"][aria-checked="true"] .likert_img {
    background-image: url(/Content/Images/likert_circle_checked.svg);
}

.likert_faces div, .likert_checks div {
    width: 19%;
    margin-left: 0.5% !important;
    margin-right: 0.5% !important;
    font-size: 0.9em;
    border: 0.1em solid transparent;
    border-radius: 0.8em;
    position: relative;
    box-sizing: border-box !important;
}

[role="radio"]:active {
    border-color: #E4E4E4;
}

[role="radio"]:focus {
    outline: none;
    border-color: #22a7ee;
}

[role="radio"][aria-checked="true"] {
    border-color: #22a7ee;
    font-weight: 600;
    background-color: #f4f5f7;
}

@media (hover: hover) {
    /*hovers only*/

    H1.articleTitle A:hover {
        color: #22a7ee;
        font-weight: 700;
        text-decoration: none;
    }

    .popular LI A:hover {
        text-decoration: none;
        color: #22a7ee;
    }

    .categories LI A:hover {
        text-decoration: none;
        color: #22a7ee;
    }

    .feature .art_a:hover,
    .shopall .art_a:hover,
    .shop3col .art_a:hover,
    .shop4col .art_a:hover {
        box-shadow: 0 0 1em rgba(0,0,0,0.15);
    }

    .art_a:hover .art_pic {
        opacity: 0.90;
    }

    .art_a:hover .art_title {
        color: #22a7ee;
    }

    .art_title:hover {
        color: #22a7ee;
        text-decoration: none;
    }

    #see_more_tags A:hover {
        color: #22a7ee;
        text-decoration: none;
    }

    .shopall .art_post_w:hover {
        -webkit-transform: scale(1.08);
        -moz-transform: scale(1.08);
        -ms-transform: scale(1.08);
        -o-transform: scale(1.08);
        transform: scale(1.08);
    }

    .icons_a:hover,
    .icons_a:active {
        color: white !important;
        text-decoration: none !important;
        opacity: 0.9;
    }

    .black_to_blue:hover {
        color: #22a7ee;
    }

    .likert_checks .likert_btn:hover,
    .likert_checks input[type=radio]:focus .likert_btn {
        opacity: 0.9;
        border-color: #E4E4E4;
        /* box-shadow: 0 0 0.5em rgba(0,0,0,0.1);*/
    }

    .likert_faces .likert_btn:hover,
    .likert_faces input[type=radio]:focus .likert_btn {
        opacity: 0.9;
        border-color: #E4E4E4;
    }
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) {
    /*uses some of the same stuff from above, changes block just by adding the .calch class*/

    .calch .art_intro {
        font-size: 0.85em;
    }

    .calch .art_title {
        font-size: 2rem;
    }
}

@media screen and (max-width: 80em) {
}

@media screen and (max-width: 50em) {
}

@media screen and (max-width: 47em) {
    .assessment_bg1 {
        background-image: none;
    }

    .likert_faces div,
    .likert_checks div {
        font-size: 0.6em;
    }
}

@media screen and (max-width: 46em) {
    /*mobile fixes & ipad narrow*/
    .mflex {
        flex-wrap: wrap;
        min-height: 1em;
    }

    .article_mcol1 {
        width: 100%;
        margin: 1em 5% 1em 5%;
        float: none;
    }

    .article_mcol2 {
        width: 100%;
        margin: 0 5% 1em 5%;
        float: none;
    }

    H1.articleTitle {
        font-size: 1.6em;
        font-weight: 700;
        margin: 0.5rem auto 0 auto;
    }

    .see_more_tags_flex {
        display: block;
    }

    .see_more_tags_first {
        flex-grow: 1;
    }

    .h_icon {
        width: 1.5rem;
        height: 1.5rem;
        position: absolute;
        top: 0.5em;
        right: 5%;
    }

    H2.articleSub {
        text-align: center;
    }

    H2.h2_cat {
        padding-top: 1em;
        font-size: 1.1em;
    }

    .h2_a {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .h2_title {
        flex: 0 3 auto;
        margin: auto 1em auto 0;
    }

    .h2_btn_right {
        font-size: 0.7rem;
        margin: 0.2em 0 0.2em auto;
        right: 0;
        text-align: right;
        position: relative;
        align-self: flex-end;
        white-space: nowrap;
        flex: 0 1 auto;
    }

    .bg1 {
        padding: 1em 5%;
    }

    .bg_article_cat, .bg_summary, .bg_comm_cat, .bg_sparkpoints, .bg_goals_cat {
        padding: 1em 5% 2em 5%;
    }

    .text-left-desktop {
        text-align: center;
    }

    #see_more_tags {
        font-size: .7em;
    }

    .icons_w {
        display: inline-block;
        width: 22%;
        margin-right: 1%;
        margin-left: 1%;
        text-align: center;
        color: #333;
        vertical-align: top;
    }

    .icon_p {
        font-size: 0.8em;
        margin: 0.5em auto 0 auto;
        width: 100%;
    }

    .catb_t {
        font-size: 0.8em !important;
        margin: 0 auto 0 auto !important;
    }

    .page_title_w {
        padding: .5em 0 .3em 0;
        margin: .5rem 3% 0 3%;
        text-align: center;
    }

    .page_title {
        text-transform: uppercase;
        font-size: 1.4rem;
        font-weight: 700;
        display: inline-block;
        vertical-align: middle;
        color: #3f3f3f;
    }

    .page_tagline {
        font-weight: 400;
        font-size: .8rem;
        text-transform: none;
        display: block;
        color: #666;
        margin: .5em 3% 1em 3%;
    }

    .page_title_w EM {
        display: inline-block;
        vertical-align: middle;
        height: 3em;
        width: 3em;
        margin-right: .5em;
        background-size: 100%;
        background-image: url(/content/images/mbart_s_list_all_v3.svg);
    }

    .art_post_w {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 1em;
    }

    .art_post {
        position: relative;
        padding: 1em 3%;
        text-align: center;
    }

        .art_post IMG, .art_post OBJECT, .art_post EMBED, .art_post IFRAME {
            max-width: 100% !important;
        }

    .art_pic {
        width: 100%;
        max-width: 100%;
    }

    .art_a {
        display: block;
        text-decoration: none;
    }

    .art_title {
        font-size: 1.1rem;
        line-height: 120%;
        border: 0;
        color: black;
        padding: 0;
        display: block;
        text-align: center;
    }

    .art_author {
        font-size: .7em;
        background: none;
        border: none;
        padding: 0;
        color: #666;
        display: none;
    }

        .art_author EM {
            font-family: Georgia, "Times New Roman", Times, serif;
            text-transform: lowercase;
            color: #999;
        }

    .art_headline {
        display: none;
    }

    .art_intro {
        display: none;
    }

    .art_heading {
        display: none;
    }

    .calch .art_post {
        width: 100%;
    }

    .calch .art_pic_w {
        width: 100%;
        margin: 0 0 0 0;
    }

    .calch .art_title {
        font-size: 1.6em;
    }

    .calch .art_intro {
        font-size: 1em;
    }

    /*uses some of the same stuff from above, changes block just by adding the feature class*/
    .feature .art_post_w {
        width: 100%;
        margin: 0 0 0 0;
    }

    .feature .art_post {
        width: 100%;
    }

    .feature .art_headline {
        margin: 0 0 0.5em 0;
    }

    .feature .art_pic_w {
        width: 100%;
        display: block;
    }

    .feature .art_icon_w {
        right: 1em;
        top: -1.2em;
        left: auto;
    }

    .feature .art_title {
        font-size: 1.4rem;
        text-align: left;
    }

    /*uses some of the same stuff from above, changes block just by adding the feature2 class*/
    .feature2 .art_post_w {
        width: 100%;
        margin: 0 0 0 0;
    }

    .feature2 .art_post {
        width: 100%;
    }

    .feature2 .art_pic_w {
        width: 100%;
        display: block;
    }

    .feature2 .art_icon_w {
        right: 1em;
        top: -1.2em;
        left: auto;
    }

    .feature2 .art_title {
        text-align: left;
    }

    /*uses some of the same stuff from above, changes block just by adding the shopall class*/
    .shopall .art_post_w {
        width: 100%;
        margin: 1em auto 1em auto;
    }

    /*uses some of the same stuff from above, changes block just by adding the shop3col class*/
    .shop3col .art_post_w {
    }

    .nobr3col .art_post_w {
        width: 29%;
        margin: 0 2% 1em 2%;
    }
    /*uses some of the same stuff from above, changes block just by adding the shop4col class*/
    .shop4col .art_post_w {
        width: 46%;
        margin: 0 2% 1em 2%;
    }

    .shop4col .art_post {
        padding: 1.5em 3% 0.5em 3%;
    }

    .shop4col .art_pic_w {
    }

    .shop4col .art_title {
        font-size: 0.9rem;
    }

    .shop4col .art_icon_w {
        top: 0;
        right: auto;
        width: 2em;
        height: 2em;
        bottom: auto;
        left: 50%;
        margin-left: -1em;
        margin-top: -1em;
    }

    /*uses some of the same stuff from above, changes block just by adding the list-pic-left class*/
    .list-pic-left .art_post_w {
        width: 100%;
        margin: 1em auto;
        padding: 0 0 1em 0;
    }

    .list-pic-left .art_post {
        width: 70%;
        padding: 0 3% 0 3%;
        text-align: left;
        vertical-align: middle;
    }

    .list-pic-left .art_pic_w {
        width: 30%;
        vertical-align: middle;
    }

    .list-pic-left .art_intro {
        margin: 1em 0 0.3em 0;
        font-size: 0.8em;
        display: none;
    }

    .list-pic-left .art_title {
        font-size: 1rem;
    }

    .list-pic-left .art_date {
        font-size: 0.8rem;
        display: none;
    }

    .list-pic-left .round_w {
        display: none;
    }

    .list-pic-left .nutrients {
        display: none;
    }

    .list-pic-left .art_icon_w {
        display: none;
    }

    .art_cat {
        text-transform: uppercase;
        display: block;
        margin: 2em auto 2em auto;
        position: relative;
    }

        .art_cat H2 {
            font-size: 1.4em;
            color: #666;
            font-family: 'Oswald';
            font-weight: 500;
            font-style: normal;
            margin: 0;
            padding: 0;
            line-height: 0.4;
        }

        .art_cat:first-of-type {
            margin-top: 2em;
        }

    .fancy {
        line-height: 0.4;
        text-align: center;
    }

        .fancy h2 {
            display: inline-block;
            position: relative;
        }

            .fancy h2:before, .fancy h2:after {
                content: "";
                position: absolute;
                height: 0.2em;
                border-bottom: 0.0625rem solid #ccc;
                border-top: 0.0625rem solid #ccc;
                top: 0;
                width: 6.875em;
            }

            .fancy h2:before {
                right: 100%;
                margin-right: 1em;
            }

            .fancy h2:after {
                left: 100%;
                margin-left: 1em;
            }

    .see_all {
        position: absolute;
        right: 1%;
        font-weight: 400;
        top: -1.2em;
        font-size: .7em;
        border-radius: 2em;
    }

    .popular {
        margin: 2em 0 0 0;
    }

    .likert:before {
        width: 78%;
    }

    .likert li label {
        font-size: 0.8em;
    }

    .likert_checks li label {
        font-size: 0.6em;
    }

    .likert_faces li label {
        font-size: 0.6em;
    }
}

@media screen and (min-width:34em) and (max-width: 46em) {
}

@media screen and (max-width: 34em) {
    .icon_pic {
        width: 70%;
    }

    .catb_icon_w {
        margin: 0 auto 0.5em auto;
    }

    .catb_t {
        flex-direction: column;
        text-align: center;
        justify-content: center !important;
    }

    .mobile_br {
        display: block;
    }

    .catb_t2 {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .icon_pic2 {
        margin: auto;
    }

    .catb_photo {
        display: none;
    }

    .cust-title {
        font-size: 1em;
    }

    .hl_subtitle {
        font-size: 0.7em;
    }
}
.article_mcol1 {
    width: 54%;
    margin: 1em auto 1em 5%;
    box-sizing: border-box;
    text-align: left;
}

.article_mcol2 {
    width: 31%;
    margin: 1em 5% 1em auto;
    box-sizing: border-box;
}
/*
H1 {
    font-size: 3em;
    color: black;
    font-weight: 300;
    margin: 0em auto 0em auto;
    padding: 0;
    display: block;
    line-height: normal;
    font-style: normal;
    text-align: left;
}

    H1 A {
        color: black;
        font-weight: 900;
        text-decoration: none;
    }

H2 {
    font-size: 1.1em;
    text-align: left;
    letter-spacing: 0.0625em;
    color: #007D7D;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0 0 0.5em 0;
    padding: 0.8em 0 0.1em 0;
    display: block;
}

H3 {
    font-size: 1.2em;
    color: #333;
    font-weight: 900;
    margin: 1.25em 0 0.5em 0;
    padding: 0;
    line-height: normal;
    display: block;
}

H4 {
    font-size: 1.1em;
    color: black;
    border-bottom: none;
    font-style: normal;
    font-weight: bold;
    margin: 1.25em 0 0.5em 0;
    padding: 0 0 0.15em 0;
    display: block;
}

H6 {
    font-size: 1.2em;
    margin: 0 0 0.5em 0;
    padding: 0;
    line-height: normal;
    display: block;
}
*/
.blog_post_w {
    z-index: 2;
    position: relative;
    margin: auto;
}
/*
.blog_post {
    font-family: 'Montserrat','Helvetica Neue',roboto, helvetica, arial, verdana, sans-serif !important;
    line-height: 200% !important;
    position: relative;
    font-size: 1em;
}

    .blog_post DIV, .blog_post P, .blog_post SPAN, .blog_post STRONG {
        font-family: 'Montserrat','Helvetica Neue',roboto, helvetica, arial, verdana, sans-serif !important;
    }

    .blog_post TD, .blog_post th, .blog_post TD DIV, .blog_post TD P, .blog_post TD SPAN, .blog_post TD STRONG {
        line-height: 120% !important;
        font-size: 0.9em;
    }

    .blog_post P {
        position: relative;

        display: block;
    }

    .blog_post LI {
        position: relative;
        font-size: 1em;
        margin: 0;
    }

    .blog_post H3 A {
        color: #109462;
        text-decoration: none;
    }

.blog_post_body A {
    color: #006AA4;
    text-decoration: underline;
}

.blog_post_body {
    font-size: 1.2em;
    margin-top: 2em;
}

    .blog_post_body ol,
    .blog_post_body ul,
    .blog_post_body dl {
        margin-top: 1em;
        margin-bottom: 1em;
    }

    .blog_post_body li {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

    .blog_post_body H2,
    .blog_post_body H2 A {
        font-size: 1.5em !important;
        color: black !important;
        font-weight: bold !important;
        font-family: 'Montserrat','Helvetica Neue',roboto, helvetica, arial, verdana, sans-serif !important;
        text-transform: none;
        font-style: italic !important;
        letter-spacing: 0 !important;
        margin: 1em 0 0 0 !important;
        padding: 0.8em 0 0.15em 0 !important;
        line-height: normal !important;
        text-align: left !important;
    }

        .blog_post_body H2 b,
        .blog_post_body H2 b span {
            font-size: 1em !important;
            line-height: normal !important;
        }

    .blog_post_body H3 {
        font-size: 1.2em;
        color: black;
    }

    */
.blog_post_body IMG {
    max-width: 100%;
}

.main_layout {
    z-index: 2;
    position: relative;
}

.blog_pic {
    display: block;
    width: 100%;
    max-width: 100%;
    top: 0;
}

a.blog_more {
    color: #006AA4;
    font-weight: bold;
    text-decoration: none;
}

.author {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    font-size: .8em;
    color: #666666;
    margin: 0 auto 1em 0;
}

.author_text {
    text-align: left;
    font-weight: 700;
    margin: auto auto auto 0;
}

.author A {
    color: #333;
    font-weight: 700;
}

.author_pic_w {
    height: 3.125rem;
    border-radius: 3.125rem;
    width: 3.125rem;
    min-width: 3.125rem;
    overflow: hidden;
    margin: .6em 1em .6em 0em;
}

.author_pic {
    width: 3.125rem;
}

.author_pic_bio_w {
    height: 10rem;
    /*
    border-radius: 5rem;*/
    width: 10rem;
    min-width: 10rem;
    overflow: hidden;
    margin: 0em 2em .6em 0em;
    float: left;
}

.author_pic_bio {
    width: 100%;
}

.author_title {
    font-size: 1.1em;
    font-weight: bold;
    margin: auto auto auto 0;
}

.points_w {
    margin-top: 1em;
}

.points_c1 {
}

.points_c2 {
}

/*sidebar styles*/
.popular {
    padding: 0em 0 0 0;
    position: relative;
    display: block;
}

    .popular UL {
        margin: 0;
        padding: 0;
    }

    .popular LI {
        display: block;
        font-size: 1em;
        position: relative;
        list-style: none;
        z-index: 5;
        border-bottom: 0.0625em solid #e5e5e5;
    }

        .popular LI.row1 {
        }

        .popular LI:last-child {
            border-bottom: none;
        }

.pop_a, .track_a {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    font-weight: bold;
    text-decoration: none;
    color: black;
    padding: 0.8em 0 0.8em 0;
}

.track_a {
    padding: 0.1em 0 0.1em 0;
}

.pop_pic_w {
    position: relative;
    /*
    width: 8em;
    vertical-align: middle;
        */
    margin: auto 1em auto 0;
    z-index: 90;
}

.pop_pic {
    width: 8em;
    border: 0;
}

.pop {
    margin: auto auto auto 0;
    text-align: left;
    flex: 1 1 75%;
}

.track_title, .track_title_sidebar, .track_title_sm {
    color: #777;
    font-size: 1em !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
}

.track_title_sidebar {
    margin-bottom: 1em;
}

.track_title_sm {
    font-size: 0.8em;
    line-height: 110%;
}

.track_pic_w {
    position: relative;
    width: 5em;
    vertical-align: middle;
    margin: auto 0.5em auto 0.5em;
    z-index: 90;
}

.track_pic {
    width: 5em;
    border: 0;
}

.border-track {
    border-left: 0.2em solid #F8C206;
}

.print_btn {
    font-size: 0.9em;
    text-transform: uppercase;
    color: #007D7D;
    text-decoration: none;
    font-weight: 700 !important;
    padding: 0.8em 1.2em;
    margin: -0.8em 0;
    background-color: transparent;
    line-height: 100%;
}
/*@media only screen and (min-device-width: 64em) {*/
@media (hover: hover) {
    /*hovers only*/

    .author A:hover {
        color: #22a7ee;
        text-decoration: none;
    }

    /*
    .blog_post H3 A:hover {
        color: #62A7EC;
        text-decoration: none;
    }

    .blog_post_body A:hover {
        color: #62A7EC;
        text-decoration: none;
    }
     */
    a.blog_more:hover {
        color: #22a7ee;
        font-weight: bold;
        text-decoration: none;
    }

    a.author_product_pic_w:hover {
        border: 0.0625em solid #d7d7f9;
    }

    .popular LI A:hover {
        text-decoration: none;
        color: #22a7ee;
    }

    .popular .comments A:hover {
        text-decoration: none;
        color: #5a5ab5;
    }

    .print_btn:hover {
        color: #fff;
        background-color: #0082CA;
    }
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) {
    /* IPAD ONLY*/
}

@media screen and (max-width: 80em) {
}

@media screen and (max-width: 50em) {
}

@media screen and (max-width: 48em) {
    /*mobile fixes & ipad narrow*/
    .mflex {
        flex-wrap: wrap !important;
        min-height: 1em;
    }

    .article_mcol1 {
        width: 90%;
        margin: 1em 5% 1em 5%;
        float: none;
    }

    .article_mcol2 {
        width: 100%;
        margin: 0em 5% 1em 5%;
        float: none;
    }

    #see_more_tags {
        font-size: .7em;
    }
    /*
    .blog_post_body {
        font-size: 1em;
    }

        .blog_post_body H2 {
            font-size: 1.2em !important;
            text-align: left;
        }
    */
    .points_w {
        text-align: center;
    }

    .points_c1 {
        margin: auto;
    }
}

@media screen and (min-width:34em) and (max-width: 46em) {
}

@media screen and (max-width: 34em) {
    /*mobile fixes*/
    .track_title {
        font-size: 0.7em !important;
    }

    .track_title_sidebar {
        font-size: 0.8em !important;
    }

    .blog_post table, .blog_post td, .blog_post th {
        max-width: 100% !important;
    }

    .hscroll {
        overflow-x: auto;
    }

    .blog_post TD, .blog_post th, .blog_post TD DIV, .blog_post TD P, .blog_post TD SPAN, .blog_post TD STRONG {
        font-size: 0.8em;
    }
}
H2.recipeSub,
H2.videoSub {
    font-size: 1.1em;
    text-align: left;
    letter-spacing: 0.0625em;
    color: #007D7D;
    text-transform: uppercase;
    font-weight: 500;
    font-family: Oswald;
    margin: 1em 0 1em 0;
    padding: 0.8em 0 0.2em 0;
    display: block;
}

h2.videoIntro {
    font-size: 1.1em;
    text-align: left;
    letter-spacing: 0.0625em;
    color: #007D7D;
    text-transform: uppercase;
    font-weight: 500;
    font-family: Oswald;
    margin: 0em 0 1em 0;
    padding: 0em 0 0.2em 0;
    display: block;
}

.h2_line {
    border-bottom: 0.0625rem solid #ccc;
    margin-bottom: 1.5em;
    text-align: left;
}

#directions_w {
}

#tips_w {
    font-size: 0.9em;
}

#ingredients {
    margin: 0 0 0 0;
    padding: 0;
    position: relative;
    clear: left;
}

    #ingredients SPAN {
    }

    #ingredients ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #ingredients li {
        list-style: none;
        padding: 0.4em;
        margin: 0 0 0.2em 0;
    }

        #ingredients li.row2 {
            list-style: none;
            padding: 0.4em;
            margin: 0 0 0 0;
        }

#scale_recipe {
    border-top: 0.0625rem solid;
    border-bottom: 0.0625rem solid;
    border-color: #66CC99;
    padding: 0.4em;
}

.recipe_main_text,
.video_main_text {
    display: inline;
    text-align: left;
}

.pic_btn {
    padding: 0 !important;
}

.det_pic_size {
    padding: 0;
    margin: 0.1em 0 1em 0;
    max-width: 100%;
    border: 0;
    position: relative;
}

.prep_box_w {
}

.prep_box {
    text-align: left;
    font-weight: 600;
    font-size: 0.9em;
    margin: 0.3em 0.3em 0 0;
    display: block;
}

    .prep_box B {
        font-weight: 900;
    }

.submited_by {
    font-size: .8em;
}

#tags_w {
    margin: 0.25em 0 0 0;
    clear: left;
    border: 0.0625rem solid #E0E0E0;
    padding: 0.1em;
    text-align: left;
}

#tags {
    padding: 0.5em;
}

    #tags A {
        color: #6384BD;
        font-size: 0.8em;
        text-decoration: none;
    }

        #tags A:hover {
            color: #ff7b08;
            text-decoration: none;
        }

    #tags SPAN {
        font-weight: normal;
        color: #d7d7f9;
        font-size: 0.8em;
    }

    #tags .tags_t {
        font-weight: 600;
        color: #666;
        font-size: 0.8em;
    }

.right_bar {
    float: right;
    box-sizing: border-box;
    width: 14em;
    background-color: white;
    text-align: center;
    padding: 1em 0 1em 2em;
    position: relative;
    z-index: 98;
}

#nut_info_w {
    border: 0.0625rem solid #CCCCCC;
    padding: 0.1em;
    text-align: center;
    margin: 0.5em 0 0.5em 0;
}

#nut_info {
    border: 0.15em solid #CCCCCC;
    padding: 0.5em;
    text-align: left;
}

    #nut_info .title {
        border-bottom: 0.3em solid black;
        font-size: 1.1em;
        font-weight: 600;
        margin-bottom: 0.5em
    }

    #nut_info ul {
        margin: 0;
        padding: 0;
    }

    #nut_info li {
        border-bottom: 0.0625rem solid black;
        list-style: none;
        font-size: 0.8em;
        padding-top: 0.2em;
        padding-bottom: 0.2em;
        padding-left: 0.1em;
    }

        #nut_info li.servings {
            border: none;
            list-style: none;
            font-size: 0.8em;
            padding-top: 0.1em;
            padding-bottom: 0.1em;
            padding-left: 0.1em;
        }

        #nut_info li.indent {
            border-bottom: 0.0625rem solid black;
            list-style: none;
            font-size: 0.8em;
            padding-top: 0.1em;
            padding-bottom: 0.1em;
            padding-left: 1em;
        }

    #nut_info A {
        font-weight: 600;
        color: #FF6600;
        text-decoration: underline;
    }

        #nut_info A:hover {
            font-weight: 600;
            color: #F4C92D;
            text-decoration: none;
        }

#ingred_info {
    text-align: center;
    font-size: 0.8em;
}

    #ingred_info A {
        font-size: 0.8em;
        font-weight: 600;
        color: black;
        text-decoration: underline;
    }

        #ingred_info A:hover {
            font-weight: 600;
            color: #ff7b08;
            text-decoration: none;
        }

/*sidebar styles*/
.related {
    padding: 0 0 0 0;
    position: relative;
    display: block;
}

    .related UL {
        margin: 0;
        padding: 0;
    }

    .related LI {
        display: block;
        font-size: 1em;
        position: relative;
        list-style: none;
        z-index: 5;
        border-bottom: 0.0625em solid #e5e5e5;
    }

        .related LI.row1 {
        }

        .related LI:last-child {
            border-bottom: none;
        }

        .related LI A {
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: center;
            font-weight: bold;
            text-decoration: none;
            color: black;
            padding: 0.8em 0 0.8em 0;
        }

.pop_pic_w {
    position: relative;
    width: 8em;
    vertical-align: middle;
    margin: auto 1em auto 0;
    z-index: 90;
}

.pop_pic {
    width: 8em;
    border: 0;
}

.pop {
    margin: auto auto auto 0;
    text-align: left;
}

/*@media only screen and (min-device-width: 64em) {*/
@media (hover: hover) {
    /*hovers only*/

    H1 A:hover {
        color: #22a7ee;
        font-weight: 900;
        text-decoration: none;
    }

    .related LI A:hover {
        text-decoration: none;
        color: #22a7ee;
    }

    .related .comments A:hover {
        text-decoration: none;
        color: #5a5ab5;
    }
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) {
    /* IPAD ONLY*/
}

@media screen and (max-width: 80em) {
}

@media screen and (max-width: 50em) {
}

@media screen and (max-width: 46em) {
    /*mobile fixes & ipad narrow*/

    H2.recipeSub {
        text-align: center;
    }

    .right_bar {
        float: none;
        clear: both;
        width: 100%;
        padding: 0em 0 1em 0em;
    }
}

@media screen and (min-width:34em) and (max-width: 46em) {
}

@media screen and (max-width: 34em) {
    /*mobile fixes*/
}
.city_logo {
    max-width: 40rem;
    max-height: 10rem;
}

.city_logo_vs {
    z-index: 2;
    position: relative;
    margin-top: 0.5em;
}

.city_dash_logo {
    max-width: 30rem;
    max-height: 10rem;
    margin: auto;
}

.top_city_title {
    width: 100%;
    text-align: center;
    left: 0;
    position: absolute;
    top: 1em;
}

.top_city_btns {
    width: 100%;
    text-align: center;
    left: 0;
    position: absolute;
    bottom: 4em;
}

.btn-outline-dark.city_btn {
    border-color: black !important;
    color: black !important;
}

.city_join_top_btn {
    font-size: 1.3em;
    padding: 0.8em 2.5em !important;
    text-transform: uppercase;
    transition: background-color 1s;
}

.city_btn_unscrolled {
    background-color: transparent;
    border-color: white !important;
}

.city_btn_scrolled {
    background-color: #28a745;
    border-color: transparent;
}

.city_join_p_btn {
    font-size: 1.3em;
    padding: 0.8em 2.5em !important;
    text-transform: uppercase;
    transition: background-color 1s;
}

.bg_city {
    /*
    padding: 2em 5% 4em 5%;
        */
    background-size: 110%;
    background-repeat: repeat;
    background-position: top center;
    position: relative;
    background-color: #42638A;
    text-align: center;
    overflow: hidden;
    background-attachment: fixed;
}

    .bg_city H1 {
        text-align: center;
    }

.city_dash_w {
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    background-color: #699FDB;
    background-color: white;
    text-align: center;
    /*
    border-top: 0.1em solid #22a7ee;
    border-bottom: 0.1em solid #22a7ee;
        */
}

.city_dash_border {
    border: 0.0625rem solid rgba(0,0,0,.2);
    border-radius: .5em;
}

.city_dash_bg {
    background-attachment: scroll;
    background-size: cover;
}

.city_dash_box {
    background-color: #fff;
    box-shadow: 0 0 0.4em rgba(0,0,0,.1);
    border-radius: .5em;
    padding: 2em 4% 2em 4%;
    margin-top: 5em;
    margin-bottom: 5em;
}

.city_dash_img {
    min-width: 36%;
    width: 36%;
    height: 22em;
    max-height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center;
    position: relative;
    background-color: #42638A;
    text-align: center;
    flex: 1;
    padding: 0;
    margin: 0;
}

.city_img_dash {
    display: none !important;
}

.city_minute_bg {
    /*
    padding: 2em 5% 6em 5%;
    background-image: url('/Content/Images/CityImages/fitness_game_people.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    background-color: #FFD300;
    background-color: #F4f5f7;
    text-align: center;
    overflow: hidden;
    background-attachment: fixed;
*/
    padding: 5em 5% 4em 5%;
    background-image: url('/Content/Images/CityImages/fitness_equipment_blue.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center -4em;
    position: relative;
    background-color: #019AF2;
    text-align: center;
    overflow: hidden;
    /*
    background-attachment: fixed;
        */
}

.city_leaderboard_bg {
    /*
        background-image: url('/Content/Images/CityImages/city_leaderboard_bg.jpg');
    background-color: #991A02;
    color: white;

    background-image: url('/Content/Images/CityImages/triangles_bg1.jpg');*/
    background-color: #f4f5f7;
    color: #333;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    text-align: center;
    overflow: hidden;
}

.city_official_title {
    font-size: 2em;
    color: #333;
}

.last_updated2 {
    /*
    color: white !important;
        */
}

.city_img {
    width: 100%;
    max-width: 100%;
}

.city_img_size {
    visibility: hidden;
    position: relative;
    top: 0;
    width: 100%;
    left: 0;
    max-width: 100%;
}

.city_sponsor {
    display: flex;
    max-width: 10em;
    max-height: 10em;
    margin: auto;
}

.city_sponsor_presenting {
    max-width: 14em;
    max-height: 14em;
    margin: auto;
}

.city_sponsor_img {
    width: 100%;
    max-height: 100%;
    max-width: 100%;
    align-self: center;
}

.spark360_sponsor_footer {
    display: flex;
    max-width: 7em;
    max-height: 7em;
}

.spark360_sponsor_footer_img {
    width: 100%;
    max-height: 100%;
}

.city_sponsor_presenting_t {
}

.city_feature_logo {
    width: 100%;
}

.city_feature_text {
}

.city_minute_total_w {
    position: relative;
    display: inline-block;
    padding: 0 1em;
    min-width: 32em;
}

.city_minute_total_w2 {
    position: relative;
    display: inline-block;
    padding: 0 1em;
    background-color: rgba(0,0,0,0.3);
    border-radius: 0.5em;
}

.city_total_min_title {
    color: white !important;
    font-size: 2em;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 115% !important;
}

.city_total_min_title2 {
    color: white !important;
    font-size: 1.6em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.2em !important;
}

.city_minute_total {
    font-size: 5em;
    font-weight: 900;
    z-index: 2;
    position: relative;
    color: white;
}

.city_minute_total2 {
    font-size: 2em;
    font-weight: 900;
    z-index: 2;
    position: relative;
    color: white;
}

.city_minute_total3 {
    font-family: Oswald;
    z-index: 2;
    position: relative;
    color: white;
}

.city_minute_extra_text {
    color: white;
    font-weight: 700;
}

.city_total_min_title_first {
    /*
    display: block;
    font-size: 2.8em;*/
    font-family: Oswald;
}

.min_total_bg {
    z-index: 3;
    border-radius: 1em;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    /*
    border: 0.0625rem solid rgba(255,255,255,0.1);
    background-color: white;
    background: -moz-linear-gradient(top, rgba(255,255,255,0.4) 0%, rgba(229,229,229,0) 48%, rgba(255,255,255,0.2) 51%, rgba(229,229,229,0) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(229,229,229,0) 48%,rgba(255,255,255,0.2) 51%,rgba(229,229,229,0) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%,rgba(229,229,229,0) 48%,rgba(255,255,255,0.2) 51%,rgba(229,229,229,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66ffffff', endColorstr='#00e5e5e5',GradientType=0 );
        */
    border: 0.0625rem solid rgba(0,0,0,0.1);
    background-color: black;
    background: -moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 48%, rgba(0,0,0,0.1) 49%, rgba(0,0,0,0.2) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 48%,rgba(0,0,0,0.1) 49%,rgba(0,0,0,0.2) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 48%,rgba(0,0,0,0.1) 49%,rgba(0,0,0,0.2) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#80e5e5e5',GradientType=0 );
}

.min_total_bg_sub {
    border-radius: 1em;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.2);
    z-index: 1;
}

.bg_social {
    /*
    background-color: #007fc4;
        */
}

.city_social_border {
    border-color: rgba(0,0,0,0.1);
}

.fa-instagram {
    /*
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
    border-radius: 6em;
    padding: 0.4rem;
    width: 1em;
    height: 1em;
    box-sizing: border-box;
        */
    color: #E30066;
}

.fa-facebook {
    color: #0152A6;
    /*color: white;*/
}

.fa-twitter {
    color: #01ADEB;
}

.fa-linkedin {
    color: #0075BA;
    /*color: white;*/
}

@media (hover: hover) {
    /*hovers only*/
    /*
    .city_btn:hover {
        opacity: 1 !important;
    }
        */
    .city_join_top_btn:hover {
        background-color: rgba(255,255,255,0.2) !important;
        background-color: rgba(0,0,0,0.8) !important;
        color: white !important;
        border-color: white !important;
    }
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) {
    /* IPAD ONLY*/
    .city_minute_bg {
        padding: 6em 5% 2em 5%;
        background-size: cover;
        background-attachment: scroll;
    }
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) and (orientation : portrait) {
    /* IPAD VERTICAL ONLY*/
    .city_minute_bg {
        background-position: center;
    }
}

@media screen and (max-width: 80em) {
    .city_minute_bg {
        background-position: center;
    }
}

@media screen and (max-width: 50em) {
    .city_logo {
        max-width: 25rem;
        max-height: 7rem;
    }

    .city_logo_vs {
        max-width: 20rem;
        max-height: 7rem;
    }

    .city_dash_logo {
        max-width: 20rem;
        max-height: 7rem;
    }

    .city_join_top_btn {
        font-size: 1em;
        padding: 0.8em 2.5em !important;
    }

    .top_city_btns {
        bottom: 3em;
    }
}

@media screen and (max-width: 46em) {
    /*mobile fixes & ipad narrow*/
}

@media screen and (min-width:36em) and (max-width: 46em) {
}

@media screen and (max-width: 36em) {
    .city_img_size {
        position: relative;
        visibility: visible !important;
    }

    .city_dash_img {
        display: none !important;
    }

    .city_img_dash {
        display: block !important;
    }

    .city_dash_bg {
        border-top: 0.1em solid #d7d7f9;
        border-bottom: 0.1em solid #d7d7f9;
    }

    .city_dash_box {
        box-shadow: none;
        border-radius: 0;
        padding: 1em 4% 1em 4%;
        margin-top: 0em;
        margin-bottom: 0em;
        text-align: center;
    }

    .bg_city {
        background-color: white;
        background-image: url('') !important;
    }

        .bg_city .curve_white_btm {
            display: none !important;
        }

        .bg_city .curve_white_btm_vs {
            display: block !important;
            z-index: 2;
        }

    .city_logo, .city_dash_logo {
        max-width: 80%;
        max-height: 10rem;
    }

    .city_logo_vs {
        max-width: 70%;
        max-height: 10rem;
        margin: -0.5em auto 1em auto !important;
    }

    .city_dash_logo {
        margin-bottom: 1em;
    }

    .top_city_title {
        position: relative;
        top: 0em;
        margin: 1em auto 1em auto;
    }

    .top_city_btns {
        position: relative;
        bottom: 0;
    }

    .city_join_top_btn {
        font-size: 1.2em;
        margin: 1em auto;
        padding: 0.8em 2em !important;
        background-color: #22a7ee !important;
    }

    .city_btn_unscrolled {
        background-color: #22a7ee !important;
    }

    .city_btn_scrolled {
        background-color: #00df70 !important;
    }

    .city_sponsor_presenting {
        max-width: 8em;
        max-height: 8em;
    }

    .city_sponsor {
        max-width: 5em;
        max-height: 5em;
        margin: auto;
    }

    .city_minute_bg {
        padding: 0em 5% 5em 5%;
    }

    .city_minute_total {
        font-size: 2.6em;
    }

    .city_minute_total2 {
        font-size: 1.6em;
    }

    .city_desc h3 {
        font-size: 1.2em;
    }

    .city_official_title {
        font-size: 1.2em;
    }

    .city_minute_total_w {
        min-width: 18rem;
    }

    .city_total_min_title {
        font-size: 1.2em;
        max-width: 19rem;
    }

    .city_total_min_title2 {
        font-size: 1em;
    }

    .city_minute_extra_text {
        max-width: 20rem;
    }

    .city_desc {
        font-size: 80%;
    }

    #nav_list_icon_img {
        fill: #000;
    }

    .bg_city {
        background-attachment: scroll;
    }

    .city_minute_bg {
        background-attachment: scroll;
        background-position: center;
        padding: 4em 5% 2em 5%;
        /*
        background-position-x: -15em;
            */
    }

    .city_join_p_btn {
        font-size: 1em;
        padding: 0.8em 1.5em !important;
    }
}

@media screen and (max-width: 24em) {
    .nav_login SVG, .nav_contact SVG, .nav_linkedin SVG, .nav_list_icon_img_a SVG {
        width: 1.5rem;
        height: 1.5rem;
    }
}
/*bootstrap hacks*/
.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.text-ccc {
    color: #ccc !important;
}

.flex-break-row {
    flex: 0 0 100%;
}

@media (max-width: 36em) {
    .flex-break-row-mobile {
        flex: 0 0 100%;
    }

    .bg-white-mobile {
        background-color: white !important;
    }
}

.text-warning2 {
    color: #FF7B08 !important;
}

.flex-break {
    flex-basis: 100%;
    height: 0;
}

.btn-circle {
    padding: 0.5em 1em;
}

.vertical-align-center, .vertical-align-middle {
    vertical-align: middle;
}

.bg-f4f5f7 {
    background-color: #f4f5f7;
}

.rounded-lg {
    border-radius: 0.8rem !important;
}

.border-dotted {
    border-style: dotted;
}

.font-weight-900, .fw900 {
    font-weight: 900;
}

.font-weight-700, .fw700 {
    font-weight: 700;
}

.font-weight-600, .fw600 {
    font-weight: 600;
}

.font-weight-400, .fw400 {
    font-weight: 400;
}

.font-weight-500, .fw500 {
    font-weight: 500;
}

.font-weight-300, .fw300 {
    font-weight: 300;
}

.underline {
    text-decoration: underline;
}

.vertical-align-top {
    vertical-align: top;
}

.oswald {
    font-family: Oswald;
    font-weight: 500;
}

.fs28 {
    font-size: 2.8em;
}

.fs24 {
    font-size: 2.4em;
}

.fs20 {
    font-size: 2.0em;
}

.fs18 {
    font-size: 1.8em;
}

.fs16 {
    font-size: 1.6em;
}

.fs15 {
    font-size: 1.5em;
}

.fs14 {
    font-size: 1.4em;
}

.fs13 {
    font-size: 1.3em;
}

.fs12 {
    font-size: 1.2em;
}

.fs11 {
    font-size: 1.1em;
}

.fs1 {
    font-size: 1em;
}

.fs095 {
    font-size: 0.95em;
}

.fs09 {
    font-size: 0.9em;
}

.fs085 {
    font-size: 0.85em;
}

.fs08 {
    font-size: 0.8em;
}

.fs075 {
    font-size: 0.75em;
}

.fs07 {
    font-size: 0.7em;
}

.fs065 {
    font-size: 0.65em;
}

.fs06 {
    font-size: 0.6em;
}

.lh100 {
    line-height: 100%;
}

.lh110 {
    line-height: 110%;
}

.lh120 {
    line-height: 120%;
}

.lh130 {
    line-height: 130%;
}

.lh150 {
    line-height: 150%;
}

.close_thin {
    font-size: 1.4rem;
    font-weight: 300;
    color: #333;
}

.modal-header {
    border-bottom: 0;
}

.modal-footer {
    border-top: 0;
}

.modal-header .close {
    font-weight: 400;
}

.btn-wrap {
    white-space: normal;
}

.btn-link {
    border: 0;
}

.btn-blank {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    font-weight: normal !important;
}

.btn-blank2 {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.line-height-normal {
    line-height: 120%;
}

.text-primary-dark, .text-primary-dark a {
    color: #114F99;
}

.text-999 {
    color: #999;
}

.opacity5 {
    opacity: 0.5;
}

.opacity8 {
    opacity: 0.8;
}

.btn-text-link {
    color: #006da8;
    padding: 0 !important;
    margin: 0 !important;
    display: inline !important;
    /*font-size: inherit !important;*/
    font-weight: inherit !important;
    vertical-align: baseline !important;
    background-color: transparent !important;
}

.btn-text-link2 {
    color: #006da8;
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: baseline !important;
}

.btn-text-link3 {
    color: #006da8;
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: baseline !important;
}

.btn-text {
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    vertical-align: baseline !important;
}

.btn-text-white {
    color: white !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline !important;
    vertical-align: baseline !important;
}

.btn-text-black {
    color: black !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline !important;
    vertical-align: baseline !important;
}

.text-success2 {
    color: #00df70 !important;
}

.btn-success2 {
    color: #fff;
    background-color: #00df70 !important;
    border-color: #00C161;
}

/*
 .btn-success2:not(:disabled):not(.disabled):active, .btn-success2:not(:disabled):not(.disabled).active, .show > .btn-success2.dropdown-toggle {
    color: #fff;
    background-color: #00df70;
    border-color: #00C161;
}
*/
.line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.btn-wrap {
    white-space: normal;
}

.badge {
    min-width: 1.5em;
}

.min_page_height {
    min-height: 40em;
}

.w-10 {
    width: 10%;
}

.w-20 {
    width: 20%;
}

.w-33 {
    width: 33.3333333%;
}

.mx-negative {
    margin-left: -15px !important;
    margin-right: -15px !important;
}

@media screen and (max-width: 34em) {
    .mobile-mx-negative {
        margin-left: -15px !important;
        margin-right: -15px !important;
    }
}

@media (hover: hover) {
    .btn-text:hover {
        color: #22a7ee !important;
    }
}
/*SPINNER*/
.spinner_w {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 100%;
    background: rgba(255,255,255,0.8);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5000;
    text-align: center;
}

.spinner_w2 {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    z-index: 5000;
    text-align: center;
}

.spinner_center {
    margin: auto;
}

.spinner {
    -webkit-animation: rotator 1.4s linear infinite;
    animation: rotator 1.4s linear infinite;
}

@-webkit-keyframes rotator {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
}

@keyframes rotator {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
}

.path {
    stroke-dasharray: 187;
    stroke-dashoffset: 0;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
    animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}

@-webkit-keyframes colors {
    0% {
        stroke: #4285F4;
    }

    25% {
        stroke: #DE3E35;
    }

    50% {
        stroke: #F7C223;
    }

    75% {
        stroke: #1B9A59;
    }

    100% {
        stroke: #4285F4;
    }
}

@keyframes colors {
    0% {
        stroke: #4285F4;
    }

    25% {
        stroke: #DE3E35;
    }

    50% {
        stroke: #F7C223;
    }

    75% {
        stroke: #1B9A59;
    }

    100% {
        stroke: #4285F4;
    }
}

@-webkit-keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }

    50% {
        stroke-dashoffset: 46.75;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    100% {
        stroke-dashoffset: 187;
        -webkit-transform: rotate(450deg);
        transform: rotate(450deg);
    }
}

@keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }

    50% {
        stroke-dashoffset: 46.75;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    100% {
        stroke-dashoffset: 187;
        -webkit-transform: rotate(450deg);
        transform: rotate(450deg);
    }
}

@media screen and (min-width: 46em) {
    .modal-body, .modal-footer, .modal-header {
        padding: 1em 2em;
    }

    .modal-header {
        padding-top: 2em;
    }

    .modal-footer {
        padding-bottom: 2em;
    }

    .modal-title {
        font-weight: 400;
        font-size: 1.6em;
        line-height: 110%;
    }
}

#ProfileTabs .nav-link {
    color: white;
    border-bottom-width: 0.3em;
    color: rgba(255,255,255,0.8);
}

    #ProfileTabs .nav-link:hover {
        border-color: rgba(255,255,255,0);
        background-color: rgba(0,0,0,0.1);
        color: rgba(255,255,255,1);
    }

    #ProfileTabs .nav-link.active {
        background-color: rgba(255,255,255,0);
        border-color: rgba(255,255,255,0);
        color: rgba(255,255,255,1);
        border-bottom: 0.3em solid #FF9900;
    }

@media screen and (max-width: 34em) {
    /*mobile fixes*/
    .mobile-mx-negative-pw {
        margin-left: -5% !important;
        margin-right: -5% !important;
    }

    #ProfileTabs .nav-link .h5 {
        font-size: 1em;
    }

    .btn-block-mobile {
        display: block;
        padding-right: 0;
        padding-left: 0;
        margin-left: 0;
        margin-right: 0;
        text-align: center;
        width: 100%;
    }
}

.h2title {
    color: #333;
    font-family: 'Oswald';
    font-size: 1.3em;
    margin: 0.5em auto 0.5em auto;
    padding: 0;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
}

.h3title {
    color: #777;
    font-size: 0.85em;
    letter-spacing: 0.05em;
    /*
    margin: 0.5em auto 0.5em auto;
    padding: 0;
        text-align: center;
        */
    font-weight: 700;
    text-transform: uppercase;
}

.round-arrow-btn i {
    padding-left: 0.1em;
    padding-right: 0.1em;
}

.btn { /*border-radius:3em;*/
    font-weight: 600;
}

.round {
    border-radius: 3em;
}

.shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
}

.shadow {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
}

.shadow-none {
    box-shadow: none !important;
}

.bootbox-close-button {
    margin-top: 0 !important;
}
/*for datepicker*/
@font-face {
    font-family: 'gijgo-material';
    src: url('/Content/font/gijgo-material.ttf');
}
/*toggle on and off buttons*/
.toggle.ios, .toggle-on.ios, .toggle-off.ios {
    border-radius: 3em;
}

    .toggle.ios .toggle-handle {
        border-radius: 1.5rem;
        width: 2.5rem;
        background-color: white;
        box-shadow: 0 0 0.5em rgba(0,0,0,0.2), inset -0.3em -0.3em 0.5em rgba(0,0,0,0.1);
    }
/* hide the select2 box initial to prevent flicker*/
.js-example-responsive {
    visibility: hidden;
}
/*select2 dropdown in navigation*/
.nav_client_w .select2-container--default .select2-selection--single .select2-selection__rendered {
    background-color: #007fc4;
    color: white;
    /*
    background-color: #BDEFFD;
    color: black;
        */
    border-radius: 3px;
    font-weight: 600;
}

.nav_client_w .select2-selection__rendered {
    line-height: 44px !important;
}

.nav_client_w .select2-container .select2-selection--single {
    height: 45px !important;
}

.nav_client_w .select2-selection__arrow {
    height: 44px !important;
}

.nav_client_w .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #fff transparent transparent transparent;
    /*border-color: #000 transparent transparent transparent;*/
}

.nav_client_w .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #fff transparent;
    /* border-color: transparent transparent #000 transparent;*/
}

.nav_client_w .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: rgba(255,255,255,0.8);
    /*
    color: rgba(0,0,0,0.8);
        */
    font-weight: 400;
}

.nav_client_w .select2-container--default .select2-selection--single {
    background-color: transparent;
    border: 1px solid rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0);
}

.border-radius-1 {
    border-radius: 0.4em;
}

.border-radius-2 {
    border-radius: 0.8em;
}

.border-radius-3 {
    border-radius: 1em;
}

.border-radius-4 {
    border-radius: 1.5em;
}

.border-radius-5 {
    border-radius: 2em;
}
/*cards as buttons*/
.card100 {
    height: 100%;
}

a.card {
    color: inherit;
    text-decoration: inherit;
    height: 100%;
}

    a.card button {
        z-index: 1;
    }

    a.card.disabled,
    a.card[disabled] {
        pointer-events: none;
        opacity: .8;
    }
/*change carousel buttons to black*/
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}
/*change main color temporarily until we can use SASS
.text-primary {
    color: #22a7ee !important;
}
*/
/* arrows for nav accorion*/
.accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: "Font Awesome 5 Free";
    content: "\f106";
    float: right;
    color: rgba(0,0,0,0.4);
    font-weight: 900; /*need this for regular icon set*/
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    right: 0.8em;
    display: block;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    /*
    content:"";
    background-image:url(/content/images/ic_keyboard_arrow_up_black_48px.svg);
    background-size:1.5em;
    height:1.5em;
    width:1.5em;
    */
}

.accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\f107";
    /*transform: rotate(180deg);*/
}
/* arrows for nav accorion*/
.accordion-toggle2 {
    color: black !important;
    text-decoration: none !important;
}

    .accordion-toggle2:before {
        /* symbol for "opening" panels */
        font-family: "Font Awesome 5 Free";
        content: "\f106";
        float: left;
        color: grey;
        font-weight: 900; /*need this for regular icon set*/
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        position: absolute;
        left: 0.8em;
        display: block;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .accordion-toggle2.collapsed:before {
        /* symbol for "collapsed" panels */
        content: "\f107";
    }

@media (min-width: 768px) {
    .modal-cf-lg {
        max-width: 750px;
    }
}
/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .accordion-toggle2:after {
        /* symbol for "opening" panels */
        content: "CLICK TO SEE LESS";
        float: left;
        color: grey;
        font-size: 0.8em;
        font-weight: 400; /*need this for regular icon set*/
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        position: absolute;
        right: 1.5em;
        display: block;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .accordion-toggle2.collapsed:after {
        /* symbol for "collapsed" panels */
        content: "CLICK TO SEE MORE";
    }

    .modal-track-lg {
        max-width: 650px;
    }

    .modal-recipe-lg {
        max-width: 900px;
    }

    .modal-info-xl {
        max-width: 900px;
    }
}

/* xl devices (desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .modal-recipe-lg {
        max-width: 1000px;
    }

    .modal-info-xl {
        max-width: 1100px;
    }
}
/*larger checkbox*/
.custom-control-lg .custom-control-label::before,
.custom-control-lg .custom-control-label::after {
    top: 0rem !important;
    left: -1rem !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
}

.custom-control-lg .custom-control-label {
    margin-left: 1rem !important;
    font-size: 1rem !important;
}
/*block buttons for smaller screens*/
@media(max-width: 768px) {
    button.full-width {
        width: 100%;
    }
}

.header_i {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
}

.header_link {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.3rem;
}

.text-nowrap {
    white-space: nowrap;
}

.text-wrap {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

.a-nostyle A {
    color: black;
    text-decoration: none;
}

    .a-nostyle A:hover, .a-nostyle A:focus {
        color: inherit;
        text-decoration: none;
    }

a.bg-light:focus, a.bg-light:hover, button.bg-light:focus, button.bg-light:hover {
    background-color: #f8f9fa !important;
}
/*
@media (max-width: 768px) {
    .mobile-session-status {
        position: absolute;
        top: 0.5em;
        right: 1em;
        padding-right: 0;
    }
}*/
/* Small devices (landscape phones, 576px and up)*/
@media (max-width: 576px) {
    H1, .h1 {
        font-size: 1.4em;
    }

    .card-text.h2 {
        font-size: 1.6em;
    }

    H5 {
        font-size: 1.1em;
    }

    .card-text.h4 {
        font-size: 1.2em;
    }

    .fa-3x {
        font-size: 2.2em;
    }

    .mobile-nav-tabs {
        font-size: 0.9em;
    }

    h4.card-title {
        margin: 0;
        font-size: 1rem;
        color: #333 !important;
    }

    a.accordion-toggle {
        color: inherit;
    }

    .card-header {
        padding: 0.5em 1em;
    }
}

.btn-link:focus, .btn-link.focus {
    color: #22a7ee;
}

@media (hover: hover) {
    /*hovers only*/
    .btn-link:hover {
        text-decoration: none;
    }

    a:hover {
        text-decoration: none !important;
    }
}
/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
}
/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .btn-xl-lg {
        font-size: 1.1em !important;
    }
}

@media screen and (max-width: 63em) {
    /*just under the width of ipad*/

    .h2title {
        font-size: 1.2em;
        text-align: center;
        margin: 0 auto .5em auto;
    }
}

@media screen and (max-width: 38em) {
    .gj-datepicker .form-control:disabled, .gj-datepicker .form-control[readonly] {
        background-color: #FFF !important;
    }
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) {
    /* IPAD ONLY*/

    .select_mobile_custom {
        position: relative;
    }

        .select_mobile_custom select {
            background: white;
            border: 1px solid #ccc;
            border-radius: 5px;
            color: inherit;
            -webkit-appearance: none;
        }

        .select_mobile_custom::after {
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            content: "\f0d7";
            color: #999;
            position: absolute;
            right: 1em;
            top: 0.8em;
            pointer-events: none;
            z-index: 1;
        }

    .gj-datepicker-bootstrap [role="separator"] button .gj-icon, .gj-datepicker-bootstrap [role="separator"] button .material-icons {
        top: 0.5em !important;
    }
}

@media (min-width: 768px) {
    .col-md-20per {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media screen and (max-width: 48em) {
    .select_mobile_custom {
        position: relative;
    }

        .select_mobile_custom select {
            background: white;
            border: 1px solid #ccc;
            border-radius: 5px;
            color: inherit;
            -webkit-appearance: none;
        }

        .select_mobile_custom::after {
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            content: "\f0d7";
            color: #999;
            position: absolute;
            right: 1em;
            top: 0.6em;
            pointer-events: none;
            z-index: 1;
        }
}

@media screen and (max-width: 36em) {
    .mfs18 {
        font-size: 1.8em;
    }

    .mfs16 {
        font-size: 1.6em;
    }

    .mfs14 {
        font-size: 1.4em;
    }

    .mfs13 {
        font-size: 1.3em;
    }

    .mfs12 {
        font-size: 1.2em;
    }

    .mfs11 {
        font-size: 1.1em;
    }

    .mfs1 {
        font-size: 1em;
    }

    .mfs095 {
        font-size: 0.95em;
    }

    .mfs09 {
        font-size: 0.9em;
    }

    .mfs085 {
        font-size: 0.85em;
    }

    .mfs08 {
        font-size: 0.8em;
    }

    .mfs075 {
        font-size: 0.75em;
    }

    .mfs07 {
        font-size: 0.7em;
    }

    .mfs065 {
        font-size: 0.65em;
    }

    .mfs06 {
        font-size: 0.6em;
    }

    .mfs05 {
        font-size: 0.5em;
    }

    .mobile-border0 {
        border: 0;
        border-radius: 0;
    }

    .mobile-block {
        display: block;
    }
}
.site_bg_gray_dark {
    background-color: #E8E9F0;
    min-height: 25em;
}

.site_bg_gray {
    background-color: #f4f5f7;
}

.mflex {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    min-height: 32em;
    padding-bottom: 2em;
}

.mcol1 {
    width: 50%;
    margin: 1em auto 1em 5%;
    box-sizing: border-box;
}

.mcol2 {
    width: 35%;
    margin: 1em 5% 1em auto;
    box-sizing: border-box;
}

.box, .box1 {
    background-color: white;
    box-shadow: 0 0 0.25em rgba(0,0,0,.1);
    border-radius: 0.5em;
    padding: 1em;
    margin-bottom: 1em;
}

.box2 {
    background-color: #FDFDFD;
    border-radius: 0.5em;
    padding: 1em;
    margin-bottom: 1em;
}

.hwhite {
    color: white !important;
}

.bg_reports {
    background-color: #038135;
    /*background-image: url(/content/images/leaves_bg.png);*/
    padding: 2em 5% 4em 5%;
    background-size: cover;
    background-repeat: repeat;
    position: relative;
    text-align: center;
}

    .bg_reports H2 {
        color: white;
        font-size: 1.4em;
    }

.bg_vault {
    background-color: #42638A;
    background-image: url(/content/images/leaves_bg.png);
    padding: 2em 5% 4em 5%;
    background-size: cover;
    background-repeat: repeat;
    position: relative;
    text-align: center;
}

    .bg_vault H2 {
        color: white;
        font-size: 1.4em;
    }

.bg_course {
    background-color: #213D6D;
    background-image: url(/content/images/course_bg1.png);
    padding: 2em 5% 4em 5%;
    background-size: cover;
    background-repeat: repeat;
    background-position: right;
    position: relative;
    text-align: center;
}

.bg_faq {
    background-color: #42638A;
    background-image: url(/content/images/faq_bg1.jpg);
    padding: 2em 5% 4em 5%;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    text-align: center;
}

    .bg_faq H2 {
        color: white;
        font-size: 1.4em;
    }

.curve_pos_pad1 {
    padding-bottom: 8em;
}

.curve_pos_adj1 {
    margin-top: -10em;
    z-index: 2;
    position: relative;
}

.curve_white_btm, .curve_btm, .curve_top, .curve_white_top, .curve_gray_dark_btm, .curve_coach_btm, .curve_white_btm_flipped {
    width: 100%;
    position: absolute;
    background-size: 103%;
    background-repeat: no-repeat;
    height: 3em;
    z-index: 1;
}

.curve_white_btm {
    bottom: -0.1em;
    left: 0;
    background-image: url(/content/images/curve_white_btm.svg);
    background-position: bottom;
}

.curve_white_btm_flipped {
    bottom: -0.1em;
    left: 0;
    background-image: url(/content/images/curve_white_btm_flipped.svg);
    background-position: bottom;
}

.curve_coach_btm {
    bottom: -0.1em;
    left: 0;
    background-image: url(/content/images/curve_coach_btm.svg);
    background-position: bottom;
}

.curve_btm {
    bottom: -0.1em;
    left: 0;
    background-image: url(/content/images/curve_gray_btm.svg);
    background-position: bottom;
}

.curve_gray_dark_btm {
    bottom: -0.1em;
    left: 0;
    background-image: url(/content/images/curve_gray_dark_btm.svg);
    background-position: bottom;
}

.curve_top {
    top: -0.1em;
    right: 0;
    left: 0;
    background-image: url(/content/images/curve_white_top.svg);
    background-position: top;
}

.curve_white_top {
    top: -0.1em;
    right: 0;
    left: 0;
    background-image: url(/content/images/curve_white_top2.svg);
    background-position: top;
}

.hpad1 {
    margin-bottom: 0.5em !important;
}

.hpad2 {
    margin-bottom: 1em !important;
}

.card_w {
    border: 0.0625em solid #D5D5D5;
    border-radius: 0.5em;
    background-color: white;
    box-shadow: 0 0 0.25em rgba(0,0,0,.1);
    padding: 1em;
    margin-bottom: 1em;
}

.top_w {
    position: relative;
}

.top_acc_bg {
    background-color: #0B57A4;
    width: 100%;
    height: 20em;
    z-index: 1;
    position: absolute;
}

.bg_tokens {
    z-index: 2;
    position: relative;
    background-image: url('/content/images/tokens_bg.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
}

.mcflex {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: space-evenly;
}

.mc1 {
    text-align: center;
    width: 50%;
    margin-bottom: 2em;
}

.mc2 {
    text-align: center;
    width: 50%;
    margin-bottom: 2em;
    border-left: 0.1rem solid rgba(255,255,255,0.5);
}

.mc_token_amt {
    font-size: 5em;
    font-weight: 700;
    display: inline-block;
    vertical-align: middle;
}

    .mc_token_amt .token_i {
        font-size: 0.75em;
    }

.mc_text1 {
    margin: auto;
    color: white;
}

.mc_text2 {
    font-size: 1.4em;
    color: white;
    font-weight: 600;
}

.card_title_left H2 { /*text-align:left; margin-left:5%;*/
    color: white;
}
/*
.card_title {
    margin-bottom: 0.5em;
}

    .card_title H2 {
        margin: 0 auto 0.5em auto;
    }
*/
.cflex {
    padding: 0.7em 0.5em 0.7em 0.5em;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
}

.hc1 {
    margin-left: 0;
    font-size: 0.9em;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 115%;
    color: #007d7d;
    text-align: center;
}

.hc2 {
    margin: auto 1em auto 1.5em;
    text-align: left;
}

.hc3 {
    margin: auto 0 auto auto;
    align-self: flex-end;
    white-space: nowrap;
}

.acflex {
    padding: 1em 0.5em 1em 0em;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    align-content: center;
    justify-content: flex-start;
    border-bottom: 0.0625rem solid rgba(0,0,0,0.1);
}

    .acflex:last-of-type {
        border-bottom: 0;
    }

.ac1 {
    margin: auto 1em auto 1em;
    color: black;
    text-align: left;
    min-width: 60%;
}

.ac2 {
    margin: auto 0 auto auto;
    align-self: flex-end;
    color: black;
    text-align: center; /*white-space:nowrap;*/
}

.ac_pic {
    max-width: 16%;
    margin-left: 1em;
}

.prize_pic {
    width: 100%;
}

.prize_title {
    font-size: 1.2em;
    font-weight: 600;
}

.progress_w {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
}

.my_progress {
    color: #666;
    font-size: 0.7em;
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap;
    margin-right: 1em;
}

.prize_points_bar_bg {
    max-width: 16rem;
    background-color: #E8E9F0;
    margin: .2rem 1em;
    height: 0.6rem;
    border-radius: 0.6rem;
    text-align: left;
    overflow: hidden;
    width: 100%;
    font-size: .1em;
}

.prize_points_bar_solid {
    background-color: #00DF70;
    height: 0.6rem;
    border-radius: 0.6rem;
}

.token_i {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
}

.token_text {
    display: inline-block;
    vertical-align: middle;
}

.token_amt {
    font-weight: 600;
    font-size: 1.2em;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
}

.text_price {
    color: #666;
    display: block;
    text-transform: uppercase;
    font-size: 0.85em;
    font-weight: 700;
}

.small_gray {
    color: #666;
    font-size: 0.85em;
    margin: 0.7em 0;
}

.coach_text {
    word-wrap: break-word;
}

.faq_block {
    height: 100%;
}

.faq_ul {
    list-style: none;
    margin: 0 0 0 0;
    padding: 0;
}

    .faq_ul LI {
        padding: 0 0;
        margin: 0;
        text-align: left;
        border-bottom: .0625em solid rgba(0,0,0,.1);
    }

        .faq_ul LI:last-of-type {
            border-bottom: 0;
        }

.faq_search_ul {
    list-style: none;
    margin: 0 0 0 0;
    padding: 0;
}

    .faq_search_ul LI {
        padding: 1em 0;
        margin: 0;
        text-align: left;
        border-bottom: .0625em solid rgba(0,0,0,.1);
    }

        .faq_search_ul LI:last-of-type {
            border-bottom: 0;
        }

.faq_question_a {
    display: block;
    padding: 0.5em;
}

.faq_subcategory_a, .faq_question_a {
    color: #333;
}

.faq_subcategory_a {
    font-weight: 600;
}

.faq_search {
    padding: .6rem 1rem .6rem 3rem;
    box-shadow: 0 0 1.5em rgba(0,0,0,0.4);
    border-radius: 3em;
}

.faq_search_icon {
    position: absolute;
    left: 1em;
}

.border-top-dotted {
    border-top: 0.1em dotted #ccc;
}

@media only screen and (min-device-width: 64em) {
}

@media (hover: hover) {
    /*hovers only*/

    H1 A:hover {
        color: #22a7ee;
        font-weight: 700;
        text-decoration: none;
    }

    A.faq_question_a:hover {
        color: #007fc4;
        background-color: #f5f5fe;
    }

    .acflex:hover {
        background-color: #F8F9FC;
    }

    a:hover,
    .nav_points_bar_w:hover,
    .nav_tokens_w:hover {
        text-decoration: none !important;
    }
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) {
    /* IPAD ONLY*/
}

@media screen and (max-width: 80em) {
    .top_acc_bg {
        height: 12em;
    }
}

@media screen and (max-width: 50em) {
}

@media screen and (max-width: 48em) {
    /*mobile fixes & ipad narrow*/
    .mflex {
        flex-wrap: wrap;
        min-height: 1em;
    }

    .mcol1 {
        width: 100%;
        margin: 3.5em 0 0em 0;
        float: none;
    }

    .mcol2 {
        width: 100%;
        margin: 0em 0 1em 0;
        float: none;
    }

    .card_w {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 1em;
        margin-bottom: 1em;
    }

    .bg_tokens {
        background-image: url('/content/images/tokens_bg_mobile.jpg');
        background-repeat: no-repeat;
        background-size: 100%;
    }

    .mc_text2 {
        font-size: 1em;
    }

    .mc_token_amt {
        font-size: 2.5em;
    }

    .prize_title {
        font-size: 1.1em;
    }

    .token_amt {
        font-size: 1.1em;
    }

    .ac_pic {
        max-width: 100%;
        width: 100%;
        flex: 0 0 100%;
        margin-bottom: 1em;
        margin-left: auto;
    }

    .prize_pic {
        width: 30%;
    }

    .text_price {
        display: inline-block;
        vertical-align: middle;
    }

    .ac1 {
        margin: auto 0em auto 0em;
        width: 100%;
    }

    .ac2 {
        white-space: normal;
        margin-top: 0.3em;
    }

    .small_gray {
        font-size: 0.8em;
    }

    .hc1 {
        font-size: 0.8em;
    }

    .cflex, .acflex {
        padding: 0.7em 0em 0.7em 0em;
    }

    .acflex {
        flex-wrap: wrap;
    }

    .mc1 {
        margin-bottom: 1em;
    }

    .mc2 {
        margin-bottom: 1em;
    }

    .bg_vault, .bg_course {
        padding: 1em 5% 2em 5%;
    }

    .bg_course {
        background-image: url(/Content/Images/course_mobile_bg1.png);
    }

    .bg_faq {
        padding: 1em 5% 4em 5%;
    }
}

@media screen and (min-width:34em) and (max-width: 48em) {
}

@media screen and (max-width: 34em) {
    /*mobile fixes*/
}

@media print {
    #footer,
    .nav_tokens_w,
    .nav_notifications_w,
    .nav_points_bar_w {
        display: none;
    }

    .vault_block {
        box-shadow: none !important;
        border: 0.0625rem solid #999 !important;
        page-break-inside: avoid;
    }
}