/***** Small Phone Portrait Mode *****/
@media only screen and (max-width : 735px) and (orientation: portrait) {
    .topNavigationBarContainer {
        width: 100%;
        display: block;
        height: 60px;
    }

    .topNavigationBanner {
        width: 100%;
        height: 55px;
        margin: 0;
        padding: .5% 0;
        background-color: yellow;
        text-align: center;
    }

    .topNavigationBanner p {
        color: #000;
        font-size: 1.8em;
        font-family: 'Monda', sans-serif;
        font-weight: 400;
    }

    .topNavigationNewsletter {
        display: none;
    }

    .topNavigationProfileCircle {
        display: none;
    }

    .topNavigationIconsContainer {
        float: left;
        width: 98%;
    }

    .topNavigationIcons {
        width: 30%;
        float: right;
        margin: 3% 1% 0 0;
        overflow: hidden;
        display: flex;
        justify-content: end;
    }

    .topNavigationHomeIcon {
        width: 15%;
        margin: 2.5% 5% 0 5%;
    }

    .topNavigationBellIcon {
        width: 20%;
        margin: 4% 5% 0 5%;
    }

    .topNavigationSettingsIcon {
        width: 15%;
        margin: 3% 5% 0 5%;
    }

    .topNavigationHamburgerIcon {
        width: 15%;
        margin: 3% 1% 0 5%;
    }

    .topNavigationDropDownMenu {
        width: 15% !important;
        margin: 0 0 0 86%;
        top: 92% !important;
        left: 0 !important;
        position: absolute !important;
        z-index: 1200 !important;
        display: none;
    }

    .topNavigationDropDownMenuRow {
        border-bottom: 3px solid #dddddd;
        background-color: #f2f2f2;
        cursor: pointer;
        position: relative;
    }

    .topNavigationDropDownMenuRow p {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        font-size: 1em;
        color: #7b7b7b;
        text-align: left;
        text-transform: capitalize;
    }

    .topNavigationDropDownMenuRow p:hover {
        background-color: #ddd;
    }

    .topNavigationDropDownMenuRow a {
        color: #7b7b7b;
    }

    .topNavigationDropDownMenuRow a:hover {
        text-decoration: none;
    }

    #menu_items_program_options P {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    #menu_items_resource_options p {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    #menu_items_recipe_options p {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    .topNavigationDropDownNewsletter {
        display: block;
    }

    .topNavigationDropDownMenu {
        width: 25% !important;
        margin: 0 0 0 74%;
        top: 14% !important;
        left: 0 !important;
        position: absolute !important;
        z-index: 10 !important;
        display: none;
    }

    .topNavigationDropDownMenuRow p {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        font-size: 1em;
        color: #7b7b7b;
        text-align: left;
        text-transform: capitalize;
    }

    .topNavigationSettingsDropDownMenu {
        width: 35% !important;
        margin: 0 0 0 64%;
        padding: 0 0 3% 0;
        top: 14% !important;
        left: 0 !important;
        background-color: #f2f2f2 !important;
        position: absolute !important;
        z-index: 10 !important;
        display: none;
    }

    .topNavigationMySettingsIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationLogoutIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationSiteTourIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationSettingsBottomRow {
        margin-top: 6%;
    }

    .topNavigationNotificationsDropDownMenu {
        width: 30% !important;
        padding: 0 0 3% 0;
        margin: 0 0 0 71%;
        top: 127% !important;
        left: 0 !important;
        background-color: #f2f2f2 !important;
        position: absolute !important;
        z-index: 10 !important;
        display: none;
    }

    .topNavigationManageDeviceIconRow {
        float: left;
        width: 100%;
        margin: 3% 0;
        padding: 0 0 3% 0;
        border-bottom: solid 3px #ddd;
        cursor: pointer;
    }

    .topNavigationManageDeviceIconContainer {
        overflow: hidden;
        width: 70%;
        margin: 2% auto;
        background-color: #fff;
        cursor: pointer;
    }

    .topNavigationSettingsTopRow {
        width: 100%;
        overflow: hidden;
        margin-top: 3%;
    }

    .topNavigationMySettingsIconContainer {
        float: left;
        width: 33%;
        margin: 0 3%;
        cursor: pointer;
    }

    .topNavigationMySettingsIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationMySettingsIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationDietitianIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 1%;
        cursor: pointer;
    }

    .topNavigationDietitianIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationDietitianIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSiteHelpIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 1%;
        cursor: pointer;
    }

    .topNavigationSiteHelpIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationSiteHelpIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSettingsBottomRow {
        width: 100%;
        overflow: hidden;
        margin-top: 2%;
    }

    .topNavigationLogoutIconContainer {
        float: left;
        width: 20%;
        margin: 0 3% 0 8%;
        cursor: pointer;
    }

    .topNavigationLogoutIcon {
        width: 70%;
    }

    .topNavigationLogoutIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSiteTourIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 8%;
        cursor: pointer;
    }

    .topNavigationSiteTourIcon {
        width: 70%;
    }

    .topNavigationSiteTourIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationNotificationsDropDownMenu {
        width: 30% !important;
        padding: 0 0 3% 0;
        margin: 0 0 0 69%;
        overflow: hidden;
        top: 14% !important;
        left: 0 !important;
        background-color: #f2f2f2 !important;
        position: absolute !important;
        z-index: 1200 !important;
        display: none;
    }

    .topNavigationNotificationsContainer {
        margin: 1% 0 0 0;
        width: 100%;
        background-color: #f2f2f2;
    }

    .topNavigationNotificationsLeftColumn {
        float: left;
        width: 48%;
    }

    .topNavigationNotificationsRightColumn {
        float: right;
        width: 48%;
    }

    .topNavigationNotificationsLeftColumn p {
        margin: 0;
        font-size: .9em;
        text-align: center;
        text-decoration: underline;
        color: #7b7b7b !important;
        cursor: pointer;
    }

    .topNavigationNotificationsRightColumn p {
        margin: 0;
        font-size: .9em;
        text-align: center;
        text-decoration: underline;
        color: #7b7b7b !important;
        cursor: pointer;
    }

    .topNavigationProfileCircle {
        width: 100px;
        height: 100px;
        margin: .5% 0 0 78%;
        position: absolute;
        z-index: 5;
        border-radius: 50%;
        cursor: pointer;
        background-color: #000;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
        -moz-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
        box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
    }

    .topNavigationProfileName {
        float: left;
        width: 46%;
        margin: -4% 0 0 22%;
        padding: 0 0 0 0;
    }

    .topNavigationProfileName > h1 {
        margin: 0;
        font-size: 1.2em;
        color: #fff;
        font-weight: 700 !important;
        text-transform: uppercase;
        text-align: left;
    }
}

/***** Small Phone Landscape Mode *****/
@media only screen and (max-width : 735px) and (orientation: landscape) {
    .topNavigationBarContainer {
        width: 100%;
        display: block;
        height: 60px;
    }

    .topNavigationBanner {
        width: 100%;
        height: 55px;
        margin: 0;
        padding: .5% 0;
        background-color: yellow;
        text-align: center;
    }

    .topNavigationBanner p {
        color: #000;
        font-size: 1.8em;
        font-family: 'Monda', sans-serif;
        font-weight: 400;
    }

    .topNavigationNewsletter {
        display: none;
    }

    .topNavigationProfileCircle {
        display: none;
    }

    .topNavigationIconsContainer {
        float: left;
        width: 98%;
    }

    .topNavigationIcons {
        width: 30%;
        float: right;
        margin: 3% 1% 0 0;
        overflow: hidden;
        display: flex;
        justify-content: end;
    }

    .topNavigationHomeIcon {
        width: 15%;
        margin: 2.5% 5% 0 5%;
    }

    .topNavigationBellIcon {
        width: 20%;
        margin: 4% 5% 0 5%;
    }

    .topNavigationSettingsIcon {
        width: 15%;
        margin: 3% 5% 0 5%;
    }

    .topNavigationHamburgerIcon {
        width: 15%;
        margin: 3% 1% 0 5%;
    }

    .topNavigationDropDownMenu {
        width: 15% !important;
        margin: 0 0 0 86%;
        top: 92% !important;
        left: 0 !important;
        position: absolute !important;
        z-index: 1200 !important;
        display: none;
    }

    .topNavigationDropDownMenuRow {
        border-bottom: 3px solid #dddddd;
        background-color: #f2f2f2;
        cursor: pointer;
        position: relative;
    }

    .topNavigationDropDownMenuRow p {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        font-size: 1em;
        color: #7b7b7b;
        text-align: left;
        text-transform: capitalize;
    }

    .topNavigationDropDownMenuRow p:hover {
        background-color: #ddd;
    }

    .topNavigationDropDownMenuRow a {
        color: #7b7b7b;
    }

    .topNavigationDropDownMenuRow a:hover {
        text-decoration: none;
    }

    #menu_items_program_options P {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    #menu_items_resource_options p {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    #menu_items_recipe_options p {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    .topNavigationDropDownNewsletter {
        display: block;
    }

    .topNavigationDropDownMenu {
        width: 25% !important;
        margin: 0 0 0 74%;
        top: 14% !important;
        left: 0 !important;
        position: absolute !important;
        z-index: 10 !important;
        display: none;
    }

    .topNavigationDropDownMenuRow p {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        font-size: 1em;
        color: #7b7b7b;
        text-align: left;
        text-transform: capitalize;
    }

    .topNavigationSettingsDropDownMenu {
        width: 35% !important;
        margin: 0 0 0 64%;
        padding: 0 0 3% 0;
        top: 14% !important;
        left: 0 !important;
        background-color: #f2f2f2 !important;
        position: absolute !important;
        z-index: 10 !important;
        display: none;
    }

    .topNavigationMySettingsIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationLogoutIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationSiteTourIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationSettingsBottomRow {
        margin-top: 6%;
    }

    .topNavigationNotificationsDropDownMenu {
        width: 30% !important;
        padding: 0 0 3% 0;
        margin: 0 0 0 71%;
        top: 127% !important;
        left: 0 !important;
        background-color: #f2f2f2 !important;
        position: absolute !important;
        z-index: 10 !important;
        display: none;
    }

    .topNavigationManageDeviceIconRow {
        float: left;
        width: 100%;
        margin: 3% 0;
        padding: 0 0 3% 0;
        border-bottom: solid 3px #ddd;
        cursor: pointer;
    }

    .topNavigationManageDeviceIconContainer {
        overflow: hidden;
        width: 70%;
        margin: 2% auto;
        background-color: #fff;
        cursor: pointer;
    }

    .topNavigationSettingsTopRow {
        width: 100%;
        overflow: hidden;
        margin-top: 3%;
    }

    .topNavigationMySettingsIconContainer {
        float: left;
        width: 33%;
        margin: 0 3%;
        cursor: pointer;
    }

    .topNavigationMySettingsIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationMySettingsIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationDietitianIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 1%;
        cursor: pointer;
    }

    .topNavigationDietitianIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationDietitianIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSiteHelpIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 1%;
        cursor: pointer;
    }

    .topNavigationSiteHelpIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationSiteHelpIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSettingsBottomRow {
        width: 100%;
        overflow: hidden;
        margin-top: 2%;
    }

    .topNavigationLogoutIconContainer {
        float: left;
        width: 20%;
        margin: 0 3% 0 8%;
        cursor: pointer;
    }

    .topNavigationLogoutIcon {
        width: 70%;
    }

    .topNavigationLogoutIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSiteTourIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 8%;
        cursor: pointer;
    }

    .topNavigationSiteTourIcon {
        width: 70%;
    }

    .topNavigationSiteTourIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationNotificationsDropDownMenu {
        width: 30% !important;
        padding: 0 0 3% 0;
        margin: 0 0 0 69%;
        overflow: hidden;
        top: 14% !important;
        left: 0 !important;
        background-color: #f2f2f2 !important;
        position: absolute !important;
        z-index: 1200 !important;
        display: none;
    }

    .topNavigationNotificationsContainer {
        margin: 1% 0 0 0;
        width: 100%;
        background-color: #f2f2f2;
    }

    .topNavigationNotificationsLeftColumn {
        float: left;
        width: 48%;
    }

    .topNavigationNotificationsRightColumn {
        float: right;
        width: 48%;
    }

    .topNavigationNotificationsLeftColumn p {
        margin: 0;
        font-size: .9em;
        text-align: center;
        text-decoration: underline;
        color: #7b7b7b !important;
        cursor: pointer;
    }

    .topNavigationNotificationsRightColumn p {
        margin: 0;
        font-size: .9em;
        text-align: center;
        text-decoration: underline;
        color: #7b7b7b !important;
        cursor: pointer;
    }

    .topNavigationProfileCircle {
        width: 100px;
        height: 100px;
        margin: .5% 0 0 78%;
        position: absolute;
        z-index: 5;
        border-radius: 50%;
        cursor: pointer;
        background-color: #000;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
        -moz-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
        box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
    }

    .topNavigationProfileName {
        float: left;
        width: 46%;
        margin: -4% 0 0 22%;
        padding: 0 0 0 0;
    }

    .topNavigationProfileName > h1 {
        margin: 0;
        font-size: 1.2em;
        color: #fff;
        font-weight: 700 !important;
        text-transform: uppercase;
        text-align: left;
    }
}

/***** Phone Portrait Mode *****/
@media only screen and (min-width: 320px) and (max-width: 735px) and (orientation: portrait) {
    .topNavigationBarContainer {
        width: 100%;
        display: block;
        height: 50px;
    }

    .topNavigationBanner {
        width: 100%;
        height: 55px;
        margin: 0;
        padding: .5% 0;
        background-color: yellow;
        text-align: center;
    }

    .topNavigationBanner p {
        color: #000;
        font-size: 1.8em;
        font-family: 'Monda', sans-serif;
        font-weight: 400;
    }

    .topNavigationNewsletter {
        display: none;
    }

    .topNavigationProfileCircle {
        display: none;
    }

    .topNavigationProfileName {
        position: absolute;
        width: 35%;
        margin: 4% 0 0 18%;
        padding: 0;
    }

    .topNavigationProfileName > h1 {
        margin: 0;
        font-size: .9em;
        color: #fff;
        font-weight: 700 !important;
        text-transform: uppercase;
        text-align: right;
    }

    .topNavigationIconsContainer {
        float: left;
        width: 98%;
        margin: 1.5% 3% 0 0;
        position: relative;
        z-index: 20;
    }

    .topNavigationIcons {
        width: 40%;
        float: right;
        margin: 1% 0;
        overflow: hidden;
        display: flex;
        justify-content: end;
    }

    .topNavigationHomeIcon {
        width: 15%;
        margin: 2.5% 5% 0 5%;
        cursor: pointer;
    }

    .topNavigationBellIcon {
        width: 20%;
        margin: 4% 5% 0 5%;
        cursor: pointer;
    }

    .numberCircle {
        border-radius: 50% !important;
        position: absolute !important;
        margin: -1% 0 0 0;
        width: 15px !important;
        height: 15px !important;
        background: #990000 !important;
        color: #fff !important;
        text-align: center !important;
        font-family: Arial, sans-serif !important;
        font-size: 10px !important;
        font-weight: bold !important;
    }

    .topNavigationSettingsIcon {
        width: 15%;
        margin: 3% 5% 0 5%;
        cursor: pointer;
    }

    .topNavigationHamburgerIcon {
        width: 15%;
        margin: 3% 1% 0 5%;
        cursor: pointer;
    }

    .topNavigationDropDownMenu {
        width: 15% !important;
        margin: 0 0 0 86%;
        top: 92% !important;
        left: 0 !important;
        position: absolute !important;
        z-index: 1200 !important;
        display: none;
    }

    .topNavigationDropDownMenuRow {
        border-bottom: 3px solid #dddddd;
        background-color: #f2f2f2;
        cursor: pointer;
        position: relative;
    }

    .topNavigationDropDownMenuRow p {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        font-size: 1em;
        color: #7b7b7b;
        text-align: left;
        text-transform: capitalize;
    }

    .topNavigationDropDownMenuRow p:hover {
        background-color: #ddd;
    }

    .topNavigationDropDownMenuRow a {
        color: #7b7b7b;
    }

    .topNavigationDropDownMenuRow a:hover {
        text-decoration: none;
    }

    #menu_items_program_options P {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    #menu_items_resource_options p {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    #menu_items_recipe_options p {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    .topNavigationDropDownNewsletter {
        display: block;
    }

    .topNavigationDropDownMenu {
        width: 60% !important;
        margin: 0 0 0 41%;
        top: 125% !important;
        left: 0 !important;
        position: absolute !important;
        z-index: 10 !important;
        display: none;
    }

    .topNavigationDropDownMenuRow p {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        font-size: 1em;
        color: #7b7b7b;
        text-align: left;
        text-transform: capitalize;
    }

    .topNavigationSettingsDropDownMenu {
        width: 60% !important;
        margin: 0 0 0 40%;
        padding: 0 0 3% 0;
        top: 125% !important;
        left: 0 !important;
        background-color: #f2f2f2 !important;
        position: absolute !important;
        z-index: 10 !important;
        display: none;
    }

    .topNavigationManageDeviceIconRow {
        float: left;
        width: 100%;
        margin: 3% 0;
        padding: 0 0 3% 0;
        border-bottom: solid 3px #ddd;
        cursor: pointer;
    }

    .topNavigationManageDeviceIconContainer {
        overflow: hidden;
        width: 70%;
        margin: 2% auto;
        background-color: #fff;
        cursor: pointer;
    }

    .topNavigationSettingsTopRow {
        width: 100%;
        overflow: hidden;
        margin-top: 3%;
    }

    .topNavigationMySettingsIconContainer {
        float: left;
        width: 33%;
        margin: 0 3%;
        cursor: pointer;
    }

    .topNavigationMySettingsIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationMySettingsIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationDietitianIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 1%;
        cursor: pointer;
    }

    .topNavigationDietitianIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationDietitianIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSiteHelpIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 1%;
        cursor: pointer;
    }

    .topNavigationSiteHelpIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationSiteHelpIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSettingsBottomRow {
        width: 100%;
        overflow: hidden;
        margin-top: 2%;
    }

    .topNavigationLogoutIconContainer {
        float: left;
        width: 20%;
        margin: 0;
        cursor: pointer;
    }

    .topNavigationLogoutIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationLogoutIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSiteTourIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 8%;
        cursor: pointer;
    }

    .topNavigationSiteTourIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationSiteTourIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSettingsBottomRow {
        margin-top: 6%;
    }

    .topNavigationNotificationsDropDownMenu {
        width: 55% !important;
        overflow: hidden;
        padding: 0 0 3% 0;
        margin: 0 0 0 45%;
        top: 125% !important;
        left: 0 !important;
        background-color: #f2f2f2 !important;
        position: absolute !important;
        z-index: 10 !important;
        display: none;
    }

    .topNavigationNotificationsContainer {
        margin: 1% 0 0 0;
        width: 100%;
        background-color: #f2f2f2;
    }

    .topNavigationNotificationsLeftColumn {
        float: left;
        width: 48%;
    }

    .topNavigationNotificationsRightColumn {
        float: right;
        width: 48%;
    }

    .topNavigationNotificationsLeftColumn p {
        margin: 0;
        font-size: .9em;
        text-align: center;
        text-decoration: underline;
        color: #7b7b7b !important;
        cursor: pointer;
    }

    .topNavigationNotificationsRightColumn p {
        margin: 0;
        font-size: .9em;
        text-align: center;
        text-decoration: underline;
        color: #7b7b7b !important;
        cursor: pointer;
    }
}

/***** Phone Landscape Mode *****/
@media only screen and (min-width : 736px) and (max-width : 1023px) and (orientation: portrait) {
    .topNavigationBarContainer {
        width: 100%;
        display: block;
        height: 60px;
    }

    .topNavigationBanner {
        width: 100%;
        height: 55px;
        margin: 0;
        padding: .5% 0;
        background-color: yellow;
        text-align: center;
    }

    .topNavigationBanner p {
        color: #000;
        font-size: 1.8em;
        font-family: 'Monda', sans-serif;
        font-weight: 400;
    }

    .topNavigationNewsletter {
        display: none;
    }

    .topNavigationIconsContainer {
        float: left;
        width: 98%;
    }

    .topNavigationIcons {
        width: 20%;
        float: right;
        margin: 1.5% 0 0 0;
        overflow: hidden;
        display: flex;
        justify-content: end;
    }

    .topNavigationHomeIcon {
        width: 15%;
        margin: 2.5% 5% 0 5%;
    }

    .topNavigationBellIcon {
        width: 20%;
        margin: 4% 5% 0 5%;
    }

    .topNavigationSettingsIcon {
        width: 15%;
        margin: 3% 5% 0 5%;
    }

    .topNavigationHamburgerIcon {
        width: 15%;
        margin: 3% 1% 0 5%;
    }

    .topNavigationDropDownMenu {
        width: 15% !important;
        margin: 0 0 0 86%;
        top: 92% !important;
        left: 0 !important;
        position: absolute !important;
        z-index: 1200 !important;
        display: none;
    }

    .topNavigationDropDownMenuRow {
        border-bottom: 3px solid #dddddd;
        background-color: #f2f2f2;
        cursor: pointer;
        position: relative;
    }

    .topNavigationDropDownMenuRow p {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        font-size: 1em;
        color: #7b7b7b;
        text-align: left;
        text-transform: capitalize;
    }

    .topNavigationDropDownMenuRow p:hover {
        background-color: #ddd;
    }

    .topNavigationDropDownMenuRow a {
        color: #7b7b7b;
    }

    .topNavigationDropDownMenuRow a:hover {
        text-decoration: none;
    }

    #menu_items_program_options P {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    #menu_items_resource_options p {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    #menu_items_recipe_options p {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    .topNavigationDropDownNewsletter {
        display: block;
    }

    .topNavigationDropDownMenu {
        width: 25% !important;
        margin: 0 0 0 74%;
        top: 15% !important;
        left: 0 !important;
        position: absolute !important;
        z-index: 10 !important;
        display: none;
    }

    .topNavigationDropDownMenuRow p {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        font-size: 1em;
        color: #7b7b7b;
        text-align: left;
        text-transform: capitalize;
    }

    .topNavigationSettingsDropDownMenu {
        width: 25% !important;
        margin: 0 0 0 74%;
        padding: 0 0 3% 0;
        top: 15% !important;
        left: 0 !important;
        background-color: #f2f2f2 !important;
        position: absolute !important;
        z-index: 10 !important;
        display: none;
    }

    .topNavigationMySettingsIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationLogoutIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationSiteTourIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationSettingsBottomRow {
        margin-top: 6%;
    }

    .topNavigationNotificationsDropDownMenu {
        width: 30% !important;
        padding: 0 0 3% 0;
        margin: 0 0 0 71%;
        top: 127% !important;
        left: 0 !important;
        background-color: #f2f2f2 !important;
        position: absolute !important;
        z-index: 10 !important;
        display: none;
    }

    .topNavigationManageDeviceIconRow {
        float: left;
        width: 100%;
        margin: 3% 0;
        padding: 0 0 3% 0;
        border-bottom: solid 3px #ddd;
        cursor: pointer;
    }

    .topNavigationManageDeviceIconContainer {
        overflow: hidden;
        width: 70%;
        margin: 2% auto;
        background-color: #fff;
        cursor: pointer;
    }

    .topNavigationSettingsTopRow {
        width: 100%;
        overflow: hidden;
        margin-top: 3%;
    }

    .topNavigationMySettingsIconContainer {
        float: left;
        width: 33%;
        margin: 0 3%;
        cursor: pointer;
    }

    .topNavigationMySettingsIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationMySettingsIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationDietitianIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 1%;
        cursor: pointer;
    }

    .topNavigationDietitianIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationDietitianIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSiteHelpIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 1%;
        cursor: pointer;
    }

    .topNavigationSiteHelpIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationSiteHelpIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSettingsBottomRow {
        width: 100%;
        overflow: hidden;
        margin-top: 2%;
    }

    .topNavigationLogoutIconContainer {
        float: left;
        width: 20%;
        margin: 0 3% 0 8%;
        cursor: pointer;
    }

    .topNavigationLogoutIcon {
        width: 70%;
    }

    .topNavigationLogoutIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSiteTourIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 8%;
        cursor: pointer;
    }

    .topNavigationSiteTourIcon {
        width: 70%;
    }

    .topNavigationSiteTourIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationNotificationsDropDownMenu {
        width: 30% !important;
        padding: 0 0 3% 0;
        margin: 0 0 0 69%;
        overflow: hidden;
        top: 15% !important;
        left: 0 !important;
        background-color: #f2f2f2 !important;
        position: absolute !important;
        z-index: 1200 !important;
        display: none;
    }

    .topNavigationNotificationsContainer {
        margin: 1% 0 0 0;
        width: 100%;
        background-color: #f2f2f2;
    }

    .topNavigationNotificationsLeftColumn {
        float: left;
        width: 48%;
    }

    .topNavigationNotificationsRightColumn {
        float: right;
        width: 48%;
    }

    .topNavigationNotificationsLeftColumn p {
        margin: 0;
        font-size: .9em;
        text-align: center;
        text-decoration: underline;
        color: #7b7b7b !important;
        cursor: pointer;
    }

    .topNavigationNotificationsRightColumn p {
        margin: 0;
        font-size: .9em;
        text-align: center;
        text-decoration: underline;
        color: #7b7b7b !important;
        cursor: pointer;
    }

    .topNavigationProfileCircle {
        width: 100px;
        height: 100px;
        margin: .5% 0 0 66%;
        position: absolute;
        z-index: 5;
        border-radius: 50%;
        cursor: pointer;
        background-color: #000;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
        -moz-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
        box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
    }

    .topNavigationProfileName {
        float: left;
        width: 55%;
        margin: -3% 0 0 20%;
        padding: 0 0 0 0;
    }

    .topNavigationProfileName > h1 {
        margin: 0;
        font-size: 1.2em;
        color: #fff;
        font-weight: 700 !important;
        text-transform: uppercase;
        text-align: left;
    }
}

/***** Phone Landscape Mode *****/
@media only screen and (min-width : 736px) and (max-width : 1023px) and (orientation: landscape) {
    .topNavigationBarContainer {
        width: 100%;
        display: block;
        height: 60px;
    }

    .topNavigationBanner {
        width: 100%;
        height: 55px;
        margin: 0;
        padding: .5% 0;
        background-color: yellow;
        text-align: center;
    }

    .topNavigationBanner p {
        color: #000;
        font-size: 1.8em;
        font-family: 'Monda', sans-serif;
        font-weight: 400;
    }

    .topNavigationNewsletter {
        display: none;
    }

    .topNavigationIconsContainer {
        float: left;
        width: 98%;
    }

    .topNavigationIcons {
        width: 20%;
        float: right;
        margin: 1.5% 0 0 0;
        overflow: hidden;
        display: flex;
        justify-content: end;
    }

    .topNavigationHomeIcon {
        width: 15%;
        margin: 2.5% 5% 0 5%;
    }

    .topNavigationBellIcon {
        width: 20%;
        margin: 4% 5% 0 5%;
    }

    .topNavigationSettingsIcon {
        width: 15%;
        margin: 3% 5% 0 5%;
    }

    .topNavigationHamburgerIcon {
        width: 15%;
        margin: 3% 1% 0 5%;
    }

    .topNavigationDropDownMenu {
        width: 15% !important;
        margin: 0 0 0 86%;
        top: 92% !important;
        left: 0 !important;
        position: absolute !important;
        z-index: 1200 !important;
        display: none;
    }

    .topNavigationDropDownMenuRow {
        border-bottom: 3px solid #dddddd;
        background-color: #f2f2f2;
        cursor: pointer;
        position: relative;
    }

    .topNavigationDropDownMenuRow p {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        font-size: 1em;
        color: #7b7b7b;
        text-align: left;
        text-transform: capitalize;
    }

    .topNavigationDropDownMenuRow p:hover {
        background-color: #ddd;
    }

    .topNavigationDropDownMenuRow a {
        color: #7b7b7b;
    }

    .topNavigationDropDownMenuRow a:hover {
        text-decoration: none;
    }

    #menu_items_program_options P {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    #menu_items_resource_options p {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    #menu_items_recipe_options p {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    .topNavigationDropDownNewsletter {
        display: block;
    }

    .topNavigationDropDownMenu {
        width: 25% !important;
        margin: 0 0 0 74%;
        top: 15% !important;
        left: 0 !important;
        position: absolute !important;
        z-index: 10 !important;
        display: none;
    }

    .topNavigationDropDownMenuRow p {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        font-size: 1em;
        color: #7b7b7b;
        text-align: left;
        text-transform: capitalize;
    }

    .topNavigationSettingsDropDownMenu {
        width: 25% !important;
        margin: 0 0 0 74%;
        padding: 0 0 3% 0;
        top: 15% !important;
        left: 0 !important;
        background-color: #f2f2f2 !important;
        position: absolute !important;
        z-index: 10 !important;
        display: none;
    }

    .topNavigationMySettingsIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationLogoutIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationSiteTourIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationSettingsBottomRow {
        margin-top: 6%;
    }

    .topNavigationNotificationsDropDownMenu {
        width: 30% !important;
        padding: 0 0 3% 0;
        margin: 0 0 0 71%;
        top: 127% !important;
        left: 0 !important;
        background-color: #f2f2f2 !important;
        position: absolute !important;
        z-index: 10 !important;
        display: none;
    }

    .topNavigationManageDeviceIconRow {
        float: left;
        width: 100%;
        margin: 3% 0;
        padding: 0 0 3% 0;
        border-bottom: solid 3px #ddd;
        cursor: pointer;
    }

    .topNavigationManageDeviceIconContainer {
        overflow: hidden;
        width: 70%;
        margin: 2% auto;
        background-color: #fff;
        cursor: pointer;
    }

    .topNavigationSettingsTopRow {
        width: 100%;
        overflow: hidden;
        margin-top: 3%;
    }

    .topNavigationMySettingsIconContainer {
        float: left;
        width: 33%;
        margin: 0 3%;
        cursor: pointer;
    }

    .topNavigationMySettingsIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationMySettingsIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationDietitianIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 1%;
        cursor: pointer;
    }

    .topNavigationDietitianIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationDietitianIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSiteHelpIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 1%;
        cursor: pointer;
    }

    .topNavigationSiteHelpIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationSiteHelpIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSettingsBottomRow {
        width: 100%;
        overflow: hidden;
        margin-top: 2%;
    }

    .topNavigationLogoutIconContainer {
        float: left;
        width: 20%;
        margin: 0 3% 0 8%;
        cursor: pointer;
    }

    .topNavigationLogoutIcon {
        width: 70%;
    }

    .topNavigationLogoutIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSiteTourIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 8%;
        cursor: pointer;
    }

    .topNavigationSiteTourIcon {
        width: 70%;
    }

    .topNavigationSiteTourIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationNotificationsDropDownMenu {
        width: 30% !important;
        padding: 0 0 3% 0;
        margin: 0 0 0 69%;
        overflow: hidden;
        top: 15% !important;
        left: 0 !important;
        background-color: #f2f2f2 !important;
        position: absolute !important;
        z-index: 1200 !important;
        display: none;
    }

    .topNavigationNotificationsContainer {
        margin: 1% 0 0 0;
        width: 100%;
        background-color: #f2f2f2;
    }

    .topNavigationNotificationsLeftColumn {
        float: left;
        width: 48%;
    }

    .topNavigationNotificationsRightColumn {
        float: right;
        width: 48%;
    }

    .topNavigationNotificationsLeftColumn p {
        margin: 0;
        font-size: .9em;
        text-align: center;
        text-decoration: underline;
        color: #7b7b7b !important;
        cursor: pointer;
    }

    .topNavigationNotificationsRightColumn p {
        margin: 0;
        font-size: .9em;
        text-align: center;
        text-decoration: underline;
        color: #7b7b7b !important;
        cursor: pointer;
    }

    .topNavigationProfileCircle {
        width: 100px;
        height: 100px;
        margin: .5% 0 0 66%;
        position: absolute;
        z-index: 5;
        border-radius: 50%;
        cursor: pointer;
        background-color: #000;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
        -moz-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
        box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
    }

    .topNavigationProfileName {
        float: left;
        width: 55%;
        margin: -3% 0 0 20%;
        padding: 0 0 0 0;
    }

    .topNavigationProfileName > h1 {
        margin: 0;
        font-size: 1.2em;
        color: #fff;
        font-weight: 700 !important;
        text-transform: uppercase;
        text-align: left;
    }
}

/***** Tablet: Portrait *****/
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation : portrait) {
    .topNavigationBarContainer {
        width: 100%;
        display: block;
        height: 60px;
    }

    .topNavigationBanner {
        width: 100%;
        height: 55px;
        margin: 0;
        padding: .5% 0;
        background-color: yellow;
        text-align: center;
    }

    .topNavigationBanner p {
        color: #000;
        font-size: 1.8em;
        font-family: 'Monda', sans-serif;
        font-weight: 400;
    }

    .topNavigationNewsletter {
        display: none;
    }

    .topNavigationProfileCircle {
        display: block;
    }

    .topNavigationIconsContainer {
        float: right;
        width: 68%;
        margin: 0 3% 0 0;
        position: relative;
        z-index: 20;
    }

    .topNavigationIcons {
        width: 35%;
        float: right;
        margin: 2% 0 0 0;
        overflow: hidden;
        display: flex;
        justify-content: end;
    }

    .topNavigationHomeIcon {
        width: 15%;
        margin: 2.5% 5% 0 5%;
        cursor: pointer;
    }

    .topNavigationBellIcon {
        width: 20%;
        margin: 4% 5% 0 5%;
        cursor: pointer;
    }

    .topNavigationSettingsIcon {
        width: 15%;
        margin: 3% 5% 0 5%;
        cursor: pointer;
    }

    .topNavigationHamburgerIcon {
        width: 15%;
        margin: 3% 1% 0 5%;
        cursor: pointer;
    }

    .topNavigationDropDownMenu {
        width: 15% !important;
        margin: 0 0 0 86%;
        top: 92% !important;
        left: 0 !important;
        position: absolute !important;
        z-index: 1200 !important;
        display: none;
    }

    .topNavigationDropDownMenuRow {
        border-bottom: 3px solid #dddddd;
        background-color: #f2f2f2;
        cursor: pointer;
        position: relative;
    }

    .topNavigationDropDownMenuRow p {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        font-size: 1em;
        color: #7b7b7b;
        text-align: left;
        text-transform: capitalize;
    }

    .topNavigationDropDownMenuRow p:hover {
        background-color: #ddd;
    }

    .topNavigationDropDownMenuRow a {
        color: #7b7b7b;
    }

    .topNavigationDropDownMenuRow a:hover {
        text-decoration: none;
    }

    #menu_items_program_options P {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    #menu_items_resource_options p {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    #menu_items_recipe_options p {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    .topNavigationDropDownNewsletter {
        display: block;
    }

    .topNavigationDropDownMenu {
        width: 50% !important;
        margin: 0 0 0 53%;
        top: 150% !important;
        left: 0 !important;
        position: absolute !important;
        z-index: 10 !important;
        display: none;
    }

    .topNavigationDropDownMenuRow p {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        font-size: 1em;
        color: #7b7b7b;
        text-align: left;
        text-transform: capitalize;
    }

    .topNavigationSettingsDropDownMenu {
        width: 50% !important;
        margin: 0 0 0 54%;
        padding: 0 0 3% 0;
        top: 150% !important;
        left: 0 !important;
        background-color: #f2f2f2 !important;
        position: absolute !important;
        z-index: 10 !important;
        display: none;
    }

    .topNavigationManageDeviceIconRow {
        float: left;
        width: 100%;
        margin: 3% 0;
        padding: 0 0 3% 0;
        border-bottom: solid 3px #ddd;
        cursor: pointer;
    }

    .topNavigationManageDeviceIconContainer {
        overflow: hidden;
        width: 70%;
        margin: 2% auto;
        background-color: #fff;
        cursor: pointer;
    }

    .topNavigationSettingsTopRow {
        width: 100%;
        overflow: hidden;
        margin-top: 3%;
    }

    .topNavigationMySettingsIconContainer {
        float: left;
        width: 33%;
        margin: 0 3%;
        cursor: pointer;
    }

    .topNavigationMySettingsIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationMySettingsIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationDietitianIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 1%;
        cursor: pointer;
    }

    .topNavigationDietitianIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationDietitianIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSiteHelpIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 1%;
        cursor: pointer;
    }

    .topNavigationSiteHelpIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationSiteHelpIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSettingsBottomRow {
        width: 100%;
        overflow: hidden;
        margin-top: 2%;
    }

    .topNavigationLogoutIconContainer {
        float: left;
        width: 20%;
        margin: 0;
        cursor: pointer;
    }

    .topNavigationLogoutIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationLogoutIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSiteTourIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 8%;
        cursor: pointer;
    }

    .topNavigationSiteTourIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationSiteTourIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSettingsBottomRow {
        margin-top: 6%;
        overflow: hidden;
    }

    .topNavigationNotificationsDropDownMenu {
        width: 55% !important;
        overflow: hidden;
        padding: 0 0 3% 0;
        margin: 0 0 0 48%;
        top: 150% !important;
        left: 0 !important;
        background-color: #f2f2f2 !important;
        position: absolute !important;
        z-index: 10 !important;
        display: none;
    }

    .topNavigationNotificationsContainer {
        margin: 1% 0 0 0;
        width: 100%;
        background-color: #f2f2f2;
    }

    .topNavigationNotificationsLeftColumn {
        float: left;
        width: 48%;
    }

    .topNavigationNotificationsRightColumn {
        float: right;
        width: 48%;
    }

    .topNavigationNotificationsLeftColumn p {
        margin: 0;
        font-size: .9em;
        text-align: center;
        text-decoration: underline;
        color: #7b7b7b !important;
        cursor: pointer;
    }

    .topNavigationNotificationsRightColumn p {
        margin: 0;
        font-size: .9em;
        text-align: center;
        text-decoration: underline;
        color: #7b7b7b !important;
        cursor: pointer;
    }

    .topNavigationProfileCircle {
        width: 100px;
        height: 100px;
        margin: .5% 0 0 45%;
        position: absolute;
        z-index: 20;
        border-radius: 50%;
        cursor: pointer;
        background-color: #000;
        display: none;
    }

    .topNavigationProfileName {
        float: left;
        width: 35%;
        margin: -3% 0 0 2%;
        padding: 0 0 0 0;
    }

    .topNavigationProfileName > h1 {
        margin: 0;
        font-size: 1.2em;
        color: #fff;
        font-weight: 700 !important;
        text-transform: uppercase;
        text-align: right;
    }
}

/***** Tablet/iPad: Portrait 2 
@media only screen and (min-width: 1025px) and (max-width: 1200px) and (orientation : portrait) {
    .topNavigationBarContainer {
        width: 100%;
        display: block;
        height: 60px;
    }

    .topNavigationBanner {
        width: 100%;
        height: 55px;
        margin: 0;
        padding: .5% 0;
        background-color: yellow;
        text-align: center;
    }
    
    .topNavigationBanner p {
        color: #000;
        font-size: 1.8em;
        font-family: 'Monda', sans-serif;
        font-weight: 400;
    }
    
    .topNavigationNewsletter {
        display: block;
    }

    .topNavigationProfileCircle {
        display: block;
    }

    .topNavigationIconsContainer {
        float: right;
        width: 68%;
    }

    .topNavigationIcons {
        width: 35%;
        float: right;
        margin: 2% 0 0 0;
        overflow: hidden;
        display: flex;
        justify-content: end;
    }

    .topNavigationHomeIcon {
        width: 15%;
        margin: 2.5% 5% 0 5%;
    }

    .topNavigationBellIcon {
        width: 20%;
        margin: 4% 5% 0 5%;
    }

    .topNavigationSettingsIcon {
        width: 15%;
        margin: 3% 5% 0 5%;
    }

    .topNavigationHamburgerIcon {
        width: 15%;
        margin: 3% 1% 0 5%;
    }
    
    .topNavigationDropDownNewsletter {
        display: block;
    }

    .topNavigationDropDownMenu  {
        width: 35% !important;
        margin: 0 0 0 65%;
        top: 135% !important;
        left: 0 !important;
        position: absolute !important;
        z-index: 10 !important;
        display: none;
    }

    .topNavigationDropDownMenuRow {
        border-bottom: 3px solid #dddddd;
        background-color: #f2f2f2;
        cursor: pointer;
        position: relative;
    }

    .topNavigationDropDownMenuRow p {
        margin-top: 0; 
        margin-bottom: 0; 
        padding-top: 10px; 
        padding-bottom: 10px;
        padding-left:20px;
        font-size: .8em;
        color: #7b7b7b;
        text-align: left;
    }

    .topNavigationSettingsDropDownMenu {
        width: 50% !important;
        margin: 0 0 0 50%;
        padding: 0 0 3% 0;
        top: 135% !important;
        left: 0 !important;
        background-color: #f2f2f2 !important;
        position: absolute !important;
        z-index: 10 !important;
        display: none;
    }

    .topNavigationDropDownMenuRow p:hover {
        background-color:#ddd;
    }
    
    .topNavigationDropDownMenuRow a {
        color:#7b7b7b;
    }
    
    .topNavigationDropDownMenuRow a:hover {
        text-decoration: none;
    }
    
    #menu_items_program_options P {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }
    
    #menu_items_resource_options p {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }
    
    #menu_items_recipe_options p {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    .topNavigationManageDeviceIconRow {
        float: left;
        width: 100%;
        margin: 3% 0;
        padding: 0 0 3% 0;
        border-bottom: solid 3px #ddd;
        cursor: pointer;
    }
    
    .topNavigationManageDeviceIconContainer {
        overflow: hidden;
        width: 70%;
        margin: 2% auto;
        background-color: #fff;
        cursor: pointer;
    }
     
    .topNavigationSettingsTopRow {
        width: 100%;
        overflow: hidden;
        margin-top: 3%;
    }
    
    .topNavigationMySettingsIconContainer {
        float: left;
        width: 33%;
        margin: 0 3%;
        cursor: pointer;
    }

    .topNavigationMySettingsIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationMySettingsIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }
    
    .topNavigationDietitianIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 1%;
        cursor: pointer;
    }
    
    .topNavigationDietitianIcon {
        width: 70%;
        margin: 0 auto;
    }
    
    .topNavigationDietitianIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }
    
    .topNavigationSiteHelpIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 1%;
        cursor: pointer;
    }
    
    .topNavigationSiteHelpIcon {
        width: 70%;
        margin: 0 auto;
    }
    
    .topNavigationSiteHelpIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }
    
    .topNavigationSettingsBottomRow {
        width: 100%;
        overflow: hidden;
        margin-top: 2%;
    }
    
    .topNavigationLogoutIconContainer {
        float: left;
        width: 20%;
        margin: 0 3% 0 8%;
        cursor: pointer;
    }

    .topNavigationLogoutIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationLogoutIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }
    
    .topNavigationSiteTourIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 8%;
        cursor: pointer;
    }
    
    .topNavigationSiteTourIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationSiteTourIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSettingsBottomRow {
        margin-top: 6%;
    }

    .topNavigationNotificationsDropDownMenu {
        width: 40% !important;
        padding: 0 0 3% 0;
        margin: 0 0 0 60%;
        top: 127% !important;
        left: 0 !important;
        background-color: #f2f2f2 !important;
        position: absolute !important;
        z-index: 10 !important;
        display: none;
    }

    .topNavigationNotificationsContainer {
        margin: 1% 0 0 0;
        width: 100%;
        background-color: #f2f2f2;
    }
    
    .topNavigationNotificationsLeftColumn {
        float: left;
        width: 48%;
    }
    
    .topNavigationNotificationsRightColumn {
        float: right;
        width: 48%;
    }
    
    .topNavigationNotificationsLeftColumn p {
        margin: 0;
        font-size: .9em;
        text-align: center;
        text-decoration: underline;
        color: #7b7b7b !important;
        cursor: pointer;
    }
    
    .topNavigationNotificationsRightColumn p {
        margin: 0;
        font-size: .9em;
        text-align: center;
        text-decoration: underline;
        color: #7b7b7b !important;
        cursor: pointer;
    }

    .topNavigationProfileCircle {
        width: 100px;
        height: 100px;
        margin: .5% 0 0 45%;
        position: absolute;
        z-index: 20;
        border-radius: 50%;
        cursor: pointer;
        background-color: #000;
        display: none;
    }

    .topNavigationProfileName {
        float: left;
        width: 35%;
        margin: 4% 0 0 6%;
        padding: 0 0 0 0;
    }

    .topNavigationProfileName > h1 {
        margin: 0;
        font-size: 1em;
        color: #fff;
        font-weight: 700;
        text-transform: uppercase;
        text-align: right;
    }
} *****/

/***** Tablet: Landscape *****/
@media only screen and (min-width: 1024px) and (max-width: 1280px) and (orientation : landscape) {
    .topNavigationBarContainer {
        width: 100%;
        display: block;
        height: 60px;
    }

    .topNavigationBanner {
        width: 100%;
        height: 55px;
        margin: 0;
        padding: .5% 0;
        background-color: yellow;
        text-align: center;
    }

    .topNavigationBanner p {
        color: #000;
        font-size: 1.8em;
        font-family: 'Monda', sans-serif;
        font-weight: 400;
    }

    .topNavigationNewsletter {
        display: none;
    }

    .topNavigationProfileCircle {
        display: block;
    }

    .topNavigationIconsContainer {
        float: right;
        width: 46%;
        margin: .5% 2% 0 0;
    }

    .topNavigationIcons {
        width: 35%;
        float: right;
        margin: 1.5% 0 0 0;
        overflow: hidden;
        display: flex;
        justify-content: end;
    }

    .topNavigationHomeIcon {
        width: 15%;
        margin: 2.5% 5% 0 5%;
    }

    .topNavigationBellIcon {
        width: 20%;
        margin: 4% 5% 0 5%;
    }

    .topNavigationSettingsIcon {
        width: 15%;
        margin: 3% 5% 0 5%;
    }

    .topNavigationHamburgerIcon {
        width: 15%;
        margin: 3% 1% 0 5%;
    }

    .topNavigationDropDownNewsletter {
        display: block;
    }

    .topNavigationDropDownMenu {
        width: 25% !important;
        margin: 0 0 0 74%;
        top: 8% !important;
        left: 0 !important;
        position: absolute !important;
        z-index: 10 !important;
        display: none;
    }

    .topNavigationDropDownMenuRow {
        border-bottom: 3px solid #dddddd;
        background-color: #f2f2f2;
        cursor: pointer;
        position: relative;
    }

    .topNavigationDropDownMenuRow p {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        font-size: 1em;
        color: #7b7b7b;
        text-align: left;
        text-transform: capitalize;
    }

    .topNavigationDropDownMenuRow p:hover {
        background-color: #ddd;
    }

    .topNavigationDropDownMenuRow a {
        color: #7b7b7b;
    }

    .topNavigationDropDownMenuRow a:hover {
        text-decoration: none;
    }

    #menu_items_program_options P {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    #menu_items_resource_options p {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    #menu_items_recipe_options p {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    .topNavigationSettingsDropDownMenu {
        width: 20% !important;
        margin: 0 0 0 79%;
        padding: 0 0 3% 0;
        top: 8% !important;
        left: 0 !important;
        background-color: #f2f2f2 !important;
        position: absolute !important;
        z-index: 10 !important;
        display: none;
    }

    .topNavigationManageDeviceIconRow {
        float: left;
        width: 100%;
        margin: 3% 0;
        padding: 0 0 3% 0;
        border-bottom: solid 3px #ddd;
        cursor: pointer;
    }

    .topNavigationManageDeviceIconContainer {
        overflow: hidden;
        width: 70%;
        margin: 2% auto;
        background-color: #fff;
        cursor: pointer;
    }

    .topNavigationSettingsTopRow {
        width: 100%;
        overflow: hidden;
        margin-top: 3%;
    }

    .topNavigationMySettingsIconContainer {
        float: left;
        width: 33%;
        margin: 0 3%;
        cursor: pointer;
    }

    .topNavigationMySettingsIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationMySettingsIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationDietitianIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 1%;
        cursor: pointer;
    }

    .topNavigationDietitianIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationDietitianIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSiteHelpIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 1%;
        cursor: pointer;
    }

    .topNavigationSiteHelpIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationSiteHelpIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSettingsBottomRow {
        width: 100%;
        overflow: hidden;
        margin-top: 2%;
    }

    .topNavigationLogoutIconContainer {
        float: left;
        width: 20%;
        margin: 0;
        cursor: pointer;
    }

    .topNavigationLogoutIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationLogoutIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSiteTourIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 8%;
        cursor: pointer;
    }

    .topNavigationSiteTourIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationSiteTourIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationNotificationsDropDownMenu {
        width: 20% !important;
        padding: 0 0 3% 0;
        margin: 0 0 0 81%;
        top: 98% !important;
        left: 0 !important;
        background-color: #f2f2f2 !important;
        position: absolute !important;
        z-index: 1200 !important;
        display: none;
    }

    .topNavigationNotificationsContainer {
        margin: 1% 0 0 0;
        width: 100%;
        background-color: #f2f2f2;
    }

    .topNavigationNotificationsLeftColumn {
        float: left;
        width: 48%;
    }

    .topNavigationNotificationsRightColumn {
        float: right;
        width: 48%;
    }

    .topNavigationNotificationsLeftColumn p {
        margin: 0;
        font-size: .9em;
        text-align: center;
        text-decoration: underline;
        color: #7b7b7b !important;
        cursor: pointer;
    }

    .topNavigationNotificationsRightColumn p {
        margin: 0;
        font-size: .9em;
        text-align: center;
        text-decoration: underline;
        color: #7b7b7b !important;
        cursor: pointer;
    }

    .topNavigationSettingsBottomRow {
        margin-top: 6%;
    }

    .topNavigationNotificationsDropDownMenu {
        width: 30% !important;
        padding: 0 0 3% 0;
        margin: 0 0 0 69%;
        overflow: hidden;
        top: 8% !important;
        left: 0 !important;
        background-color: #f2f2f2 !important;
        position: absolute !important;
        z-index: 10 !important;
        display: none;
    }

    .topNavigationProfileCircle {
        width: 100px;
        height: 100px;
        margin: .5% 0 0 72%;
        position: absolute;
        z-index: 5;
        border-radius: 50%;
        cursor: pointer;
        background-color: #000;
        border: solid 5px #007C9D;
    }

    .topNavigationProfileName {
        position: absolute;
        width: 50%;
        margin: 2% 0 0 20%;
        padding: 0 0 0 0;
    }

    .topNavigationProfileName > h1 {
        margin: 0;
        font-size: 1.4em;
        color: #fff;
        font-weight: 700 !important;
        text-transform: uppercase;
        text-align: right;
    }
}

/***** Laptop *****/
@media only screen and (min-width: 1281px) and (max-width: 1600px) and (orientation: landscape) {
    .topNavigationBarContainer {
        width: 100%;
        height: 65px;
    }

    .topNavigationBanner {
        width: 100%;
        height: 55px;
        margin: 0;
        padding: .5% 0;
        background-color: yellow;
        text-align: center;
    }

    .topNavigationBanner p {
        color: #000;
        font-size: 1.8em;
        font-family: 'Monda', sans-serif;
        font-weight: 400;
    }

    .topNavigationIconsContainer {
        width: 95%;
        float: right;
        margin: .5% 3% 0 0;
    }

    .topNavigationIcons {
        width: 14%;
        float: right;
        margin: 1% 0 0 0;
        overflow: hidden;
        display: flex;
        justify-content: end;
    }

    .topNavigationHomeIcon {
        width: 20%;
        margin: 2.5% 5% 0 5%;
    }

    .topNavigationBellIcon {
        width: 25%;
        margin: 4% 5% 0 5%;
    }

    .topNavigationSettingsIcon {
        width: 22%;
        margin: 3% 0 0 0;
    }

    .topNavigationHamburgerIcon {
        width: 20%;
        margin: 3% 1% 0 5%;
    }

    .topNavigationDropDownMenu {
        width: 18% !important;
        margin: 0 0 0 80%;
        top: 12% !important;
        left: 0 !important;
        position: absolute !important;
        z-index: 1200 !important;
        display: none;
    }

    .topNavigationDropDownMenuRow {
        border-bottom: 3px solid #dddddd;
        background-color: #f2f2f2;
        cursor: pointer;
        position: relative;
    }

    .topNavigationDropDownMenuRow p {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        font-size: 1em;
        color: #7b7b7b;
        text-align: left;
        text-transform: capitalize;
    }

    .topNavigationDropDownMenuRow p:hover {
        background-color: #ddd;
    }

    .topNavigationDropDownMenuRow a {
        color: #7b7b7b;
    }

    .topNavigationDropDownMenuRow a:hover {
        text-decoration: none;
    }

    #menu_items_program_options P {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    #menu_items_resource_options p {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    #menu_items_recipe_options p {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    .topNavigationDropDownNewsletter {
        display: block;
    }

    .topNavigationSettingsDropDownMenu {
        width: 25% !important;
        margin: 0 0 0 74%;
        padding: 0 0 3% 0;
        top: 12% !important;
        left: 0 !important;
        background-color: #f2f2f2 !important;
        position: absolute !important;
        z-index: 1200 !important;
        display: none;
    }

    .topNavigationManageDeviceIconRow {
        float: left;
        width: 100%;
        margin: 3% 0;
        padding: 0 0 3% 0;
        border-bottom: solid 3px #ddd;
        cursor: pointer;
    }

    .topNavigationManageDeviceIconContainer {
        overflow: hidden;
        width: 70%;
        margin: 2% auto;
        background-color: #fff;
        cursor: pointer;
    }

    .topNavigationSettingsTopRow {
        width: 100%;
        overflow: hidden;
        margin-top: 3%;
    }

    .topNavigationMySettingsIconContainer {
        float: left;
        width: 33%;
        margin: 0 3%;
        cursor: pointer;
    }

    .topNavigationMySettingsIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationMySettingsIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationDietitianIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 1%;
        cursor: pointer;
    }

    .topNavigationDietitianIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationDietitianIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSiteHelpIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 1%;
        cursor: pointer;
    }

    .topNavigationSiteHelpIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationSiteHelpIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSettingsBottomRow {
        width: 100%;
        overflow: hidden;
        margin-top: 2%;
    }

    .topNavigationLogoutIconContainer {
        float: left;
        width: 20%;
        margin: 0;
        cursor: pointer;
    }

    .topNavigationLogoutIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationLogoutIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSiteTourIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 8%;
        cursor: pointer;
    }

    .topNavigationSiteTourIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationSiteTourIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationNotificationsDropDownMenu {
        width: 25% !important;
        margin: 0 0 0 74%;
        padding: 0 0 3% 0;
        overflow: hidden;
        top: 12% !important;
        left: 0 !important;
        background-color: #f2f2f2 !important;
        position: absolute !important;
        z-index: 1200 !important;
        display: none;
    }

    .topNavigationNotificationsContainer {
        margin: 1% 0 0 0;
        width: 100%;
        background-color: #f2f2f2;
    }

    .topNavigationNotificationsLeftColumn {
        float: left;
        width: 48%;
    }

    .topNavigationNotificationsRightColumn {
        float: right;
        width: 48%;
    }

    .topNavigationNotificationsLeftColumn p {
        margin: 0;
        font-size: .9em;
        text-align: center;
        text-decoration: underline;
        color: #7b7b7b !important;
        cursor: pointer;
    }

    .topNavigationNotificationsRightColumn p {
        margin: 0;
        font-size: .9em;
        text-align: center;
        text-decoration: underline;
        color: #7b7b7b !important;
        cursor: pointer;
    }

    .topNavigationSettingsBottomRow {
        width: 100%;
        overflow: hidden;
        margin-top: 6%;
    }

    .topNavigationNewsletter {
        float: left;
        width: 160px;
        height: 150px;
        margin: -5% 0 0 85%;
        position: absolute;
        z-index: 5;
        border-radius: 12px;
        ;
        background-color: #000;
        cursor: pointer;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
        -moz-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
        box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
    }

    .topNavigationProfileName {
        float: left;
        width: 55%;
        margin: -1.5% 0 0 18%;
        padding: 0;
    }

    .topNavigationProfileName > h1 {
        margin: 0;
        font-size: 1.3em;
        color: #fff;
        font-weight: 700 !important;
        text-transform: uppercase;
        text-align: right;
    }

    .topNavigationProfileCircle {
        width: 100px;
        height: 100px;
        margin: 1% 0 0 75%;
        position: absolute;
        z-index: 5;
        border-radius: 50%;
        cursor: pointer;
        background-color: #000;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
        -moz-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
        box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
    }
}

/***** Widescreen Styles *****/
@media only screen and (min-width: 1600px) and (max-width: 2000px) and (orientation: landscape) {
    .topNavigationBarContainer {
        width: 100%;
        height: 65px;
    }

    .topNavigationBanner {
        width: 100%;
        height: 55px;
        margin: 0;
        padding: .5% 0;
        background-color: yellow;
        text-align: center;
    }

    .topNavigationBanner p {
        color: #000;
        font-size: 1.8em;
        font-family: 'Monda', sans-serif;
        font-weight: 400;
    }

    .topNavigationIconsContainer {
        width: 10%;
        float: right;
        margin: 1% 4% 0 0;
    }

    .topNavigationIcons {
        width: 200px;
        float: right;
        margin: 1% 6% 0 0;
        overflow: hidden;
        display: flex;
    }

    .topNavigationHomeIcon {
        width: 20%;
        margin: 2.5% 5% 0 5%;
    }

    .topNavigationBellIcon {
        width: 25%;
        margin: 4% 5% 0 5%;
    }

    .topNavigationSettingsIcon {
        width: 22%;
        margin: 3% 0 0 0;
    }

    .topNavigationHamburgerIcon {
        width: 20%;
        margin: 3% 1% 0 5%;
    }

    .topNavigationDropDownMenu {
        width: 20% !important;
        margin: -2.5% 0 0 78%;
        top: 11% !important;
        left: 0 !important;
        position: absolute !important;
        z-index: 1200 !important;
        display: none;
    }

    .topNavigationDropDownMenuRow {
        border-bottom: 3px solid #dddddd;
        background-color: #f2f2f2;
        cursor: pointer;
        position: relative;
    }

    .topNavigationDropDownMenuRow p {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        font-size: 1em;
        color: #7b7b7b;
        text-align: left;
        text-transform: capitalize;
    }

    .topNavigationDropDownMenuRow p:hover {
        background-color: #ddd;
    }

    .topNavigationDropDownMenuRow a {
        color: #7b7b7b;
    }

    .topNavigationDropDownMenuRow a:hover {
        text-decoration: none;
    }

    #menu_items_program_options P {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    #menu_items_resource_options p {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    #menu_items_recipe_options p {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    .topNavigationDropDownNewsletter {
        display: block;
    }

    .topNavigationSettingsDropDownMenu {
        width: 15% !important;
        margin: -2.5% 0 0 82%;
        padding: 0 0 3% 0;
        top: 11% !important;
        left: 0 !important;
        background-color: #f2f2f2 !important;
        position: absolute !important;
        z-index: 1200 !important;
        display: none;
    }

    .topNavigationManageDeviceIconRow {
        float: left;
        width: 100%;
        margin: 3% 0;
        padding: 0 0 3% 0;
        border-bottom: solid 3px #ddd;
        cursor: pointer;
    }

    .topNavigationManageDeviceIconContainer {
        overflow: hidden;
        width: 70%;
        margin: 2% auto;
        background-color: #fff;
        cursor: pointer;
    }

    .topNavigationSettingsTopRow {
        width: 100%;
        overflow: hidden;
        margin-top: 3%;
    }

    .topNavigationMySettingsIconContainer {
        float: left;
        width: 33%;
        margin: 0 3%;
        cursor: pointer;
    }

    .topNavigationMySettingsIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationMySettingsIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationDietitianIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 1%;
        cursor: pointer;
    }

    .topNavigationDietitianIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationDietitianIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSiteHelpIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 1%;
        cursor: pointer;
    }

    .topNavigationSiteHelpIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationSiteHelpIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSettingsBottomRow {
        width: 100%;
        overflow: hidden;
        margin-top: 2%;
    }

    .topNavigationLogoutIconContainer {
        float: left;
        width: 20%;
        margin: -13% 0 0 28%;
        cursor: pointer;
    }

    .topNavigationLogoutIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationLogoutIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSiteTourIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 8%;
        cursor: pointer;
    }

    .topNavigationSiteTourIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationSiteTourIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationNotificationsDropDownMenu {
        width: 20% !important;
        padding: 0 0 3% 0;
        margin: 0 0 0 81%;
        top: 98% !important;
        left: 0 !important;
        background-color: #f2f2f2 !important;
        position: absolute !important;
        z-index: 1200 !important;
        display: none;
    }

    .topNavigationNotificationsContainer {
        margin: 1% 0 0 0;
        width: 100%;
        background-color: #f2f2f2;
    }

    .topNavigationNotificationsLeftColumn {
        float: left;
        width: 48%;
    }

    .topNavigationNotificationsRightColumn {
        float: right;
        width: 48%;
    }

    .topNavigationNotificationsLeftColumn p {
        margin: 0;
        font-size: .9em;
        text-align: center;
        text-decoration: underline;
        color: #7b7b7b !important;
        cursor: pointer;
    }

    .topNavigationNotificationsRightColumn p {
        margin: 0;
        font-size: .9em;
        text-align: center;
        text-decoration: underline;
        color: #7b7b7b !important;
        cursor: pointer;
    }

    .topNavigationSettingsBottomRow {
        width: 100%;
        overflow: hidden;
        margin-top: 6%;
    }

    .topNavigationNotificationsDropDownMenu {
        width: 20% !important;
        margin: -2.5% 0 0 78%;
        padding: 0 0 3% 0;
        overflow: hidden;
        top: 11% !important;
        left: 0 !important;
        background-color: #f2f2f2 !important;
        position: absolute !important;
        z-index: 1200 !important;
        display: none;
    }

    .topNavigationNewsletter {
        float: left;
        width: 160px;
        height: 150px;
        margin: -3% 0 0 85%;
        position: absolute;
        z-index: 5;
        border-radius: 12px;
        ;
        background-color: #000;
        cursor: pointer;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
        -moz-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
        box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
    }

    .topNavigationProfileName {
        float: left;
        width: 55%;
        margin: 24px 0 0 20%;
        padding: 0;
    }

    .topNavigationProfileName > h1 {
        margin: 0;
        font-size: 1.4em;
        color: #fff;
        font-weight: 700 !important;
        text-transform: uppercase;
        text-align: right;
    }

    .topNavigationProfileCircle {
        width: 100px;
        height: 100px;
        margin: 0 0 0 77%;
        position: absolute;
        z-index: 5;
        border-radius: 50%;
        cursor: pointer;
        background-color: #000;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
        -moz-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
        box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
    }

    .dashboardLogoContainer {
        width: 100%;
        padding: 2% 0;
        overflow: hidden;
        display: flex;
        justify-content: center;
    }
}

@media (min-width: 2000px) and (orientation: landscape) {
    .topNavigationBarContainer {
        height: 65px;
        width: 100%;
    }

    .topNavigationBanner {
        width: 100%;
        height: 55px;
        margin: 0;
        padding: .5% 0;
        background-color: yellow;
        text-align: center;
        /* display: none; */
    }

    .topNavigationBanner p {
        color: #000;
        font-size: 1.8em;
        font-family: 'Monda', sans-serif;
        font-weight: 400;
    }

    .topNavigationIconsContainer {
        width: 28%;
        float: right;
        margin: 0 12% 0 0;
    }

    .topNavigationIcons {
        width: 200px;
        float: right;
        margin: 2% 0 1% 0;
        overflow: hidden;
    }

    .topNavigationHomeIcon {
        float: left;
        margin: 3% 5% 0 5%;
        cursor: pointer;
    }

    .topNavigationBellIcon {
        float: left;
        margin: 5% 5% 0 5%;
        cursor: pointer;
    }

    .numberCircle {
        border-radius: 50% !important;
        position: absolute !important;
        margin: -.25% 0 0 0;
        width: 15px !important;
        height: 15px !important;
        background: #990000 !important;
        color: #fff !important;
        text-align: center !important;
        font-family: Arial, sans-serif !important;
        font-size: 10px !important;
        font-weight: bold !important;
    }

    .topNavigationSettingsIcon {
        float: left;
        margin: 4% 5% 0 5%;
        cursor: pointer;
    }

    .topNavigationHamburgerIcon {
        float: left;
        margin: 4% 0 0 5%;
        cursor: pointer;
    }

    .topNavigationDropDownMenu {
        width: 15% !important;
        margin: 0 0 0 80%;
        top: 7% !important;
        left: 0 !important;
        position: absolute !important;
        z-index: 1200 !important;
        display: none;
    }

    .topNavigationDropDownMenuRow {
        border-bottom: 3px solid #dddddd;
        background-color: #f2f2f2;
        cursor: pointer;
        position: relative;
    }

    .topNavigationDropDownMenuRow p {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        font-size: 1em;
        color: #7b7b7b;
        text-align: left;
        text-transform: capitalize;
    }

    .topNavigationDropDownMenuRow p:hover {
        background-color: #ddd;
    }

    .topNavigationDropDownMenuRow a {
        color: #7b7b7b;
    }

    .topNavigationDropDownMenuRow a:hover {
        text-decoration: none;
    }

    #menu_items_program_options P {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    #menu_items_resource_options p {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    #menu_items_recipe_options p {
        margin: 0 0 0 8%;
        font-size: 1em;
        color: #7b7b7b;
    }

    .topNavigationDropDownNewsletter {
        display: block;
    }

    .topNavigationSettingsDropDownMenu {
        width: 15% !important;
        margin: 0 0 0 80%;
        padding: 0 0 3% 0;
        top: 7% !important;
        left: 0 !important;
        background-color: #f2f2f2 !important;
        position: absolute !important;
        z-index: 1200 !important;
        display: none;
    }

    .topNavigationManageDeviceIconRow {
        float: left;
        width: 100%;
        margin: 3% 0;
        padding: 0 0 3% 0;
        border-bottom: solid 3px #ddd;
        cursor: pointer;
    }

    .topNavigationManageDeviceIconContainer {
        overflow: hidden;
        width: 70%;
        margin: 2% auto;
        background-color: #fff;
        cursor: pointer;
    }

    .topNavigationSettingsTopRow {
        width: 100%;
        overflow: hidden;
        margin-top: 3%;
    }

    .topNavigationMySettingsIconContainer {
        float: left;
        width: 33%;
        margin: 0 3%;
        cursor: pointer;
    }

    .topNavigationMySettingsIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationMySettingsIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationDietitianIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 1%;
        cursor: pointer;
    }

    .topNavigationDietitianIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationDietitianIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSiteHelpIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 1%;
        cursor: pointer;
    }

    .topNavigationSiteHelpIcon {
        width: 70%;
        margin: 0 auto;
    }

    .topNavigationSiteHelpIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSettingsBottomRow {
        width: 100%;
        overflow: hidden;
        margin-top: 2%;
    }

    .topNavigationLogoutIconContainer {
        float: left;
        width: 20%;
        margin: 0 3% 0 8%;
        cursor: pointer;
    }

    .topNavigationLogoutIcon {
        width: 70%;
    }

    .topNavigationLogoutIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationSiteTourIconContainer {
        float: left;
        width: 25%;
        margin: 0 3% 0 8%;
        cursor: pointer;
    }

    .topNavigationSiteTourIcon {
        width: 70%;
    }

    .topNavigationSiteTourIconContainer p {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: .6em;
        text-transform: uppercase;
    }

    .topNavigationNotificationsDropDownMenu {
        width: 15% !important;
        overflow: hidden;
        padding: 0 0 3% 0;
        margin: 0 0 0 80%;
        top: 7% !important;
        left: 0 !important;
        background-color: #f2f2f2 !important;
        position: absolute !important;
        z-index: 1200 !important;
        display: none;
    }

    .topNavigationNotificationsContainer {
        margin: 1% 0 0 0;
        width: 100%;
        background-color: #f2f2f2;
    }

    .topNavigationNotificationsLeftColumn {
        float: left;
        width: 48%;
    }

    .topNavigationNotificationsRightColumn {
        float: right;
        width: 48%;
    }

    .topNavigationNotificationsLeftColumn p {
        margin: 0;
        font-size: .9em;
        text-align: center;
        text-decoration: underline;
        color: #7b7b7b !important;
        cursor: pointer;
    }

    .topNavigationNotificationsRightColumn p {
        margin: 0;
        font-size: .9em;
        text-align: center;
        text-decoration: underline;
        color: #7b7b7b !important;
        cursor: pointer;
    }

    .topNavigationProfileCircle {
        width: 100px;
        height: 100px;
        margin: 0 0 0 73%;
        padding: .5% 0 0 0;
        position: relative;
        z-index: 5;
        border-radius: 50%;
        cursor: pointer;
        background-color: #000;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
        -moz-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
        box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
    }

    .topNavigationProfileName {
        width: 170px;
        margin: -75px 28% 0 0;
        float: right;
        padding: 0;
    }

    .topNavigationProfileName > h1 {
        margin: 0;
        font-size: 1.4em;
        color: #fff;
        font-weight: 700 !important;
        text-transform: uppercase;
        text-align: right;
    }

    .topNavigationNewsletter {
        float: left;
        width: 160px;
        height: 150px;
        margin: -4% 0 0 82%;
        position: relative;
        z-index: 10;
        border-radius: 12px;
        ;
        background-color: #000;
        cursor: pointer;
        /* background-image: url('../../images/topNavigation/top_nav_placeholder_newsletter.jpg'); */
        -webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
        -moz-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
        box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.55);
    }
}