﻿body {
    text-align: right;
}

.mobileNav {
    right: 0;
}

td, th {
    text-align: right;
}

/* New header and nav */

.desktopNavButton {
    float: left;
    margin-left: 0;
    margin-right: 24px;
}

.desktopNavButton.localSelect {
    background: url("../images/icons/iconStack.svg?v=2#WorldYellow") right center no-repeat transparent;
    padding: 10px 44px 10px 0;
}

.iconizedNavButton {
    padding: 10px 44px 10px 0;
}


.iconizedNavButton.favourites,
.iconizedNavButton.promotions,
.iconizedNavButton.signIn,
.iconizedNavButton.profile {
    background-position: right center;
}

.burgerNavOptions .localSelect {
    float: left;
}

@media only screen and (min-width: 1280px) {
    .desktopNav li {
        float: right;
        margin-left: 0;
        margin-right: 42px;
    }

    .desktopNav li:first-child {
        margin-right: 0;
    }
}

.menuTierHolder .menuButton {
    background: url("../../images/icons/iconStack.svg?v=2#ShowHideArrowLeft") left center no-repeat transparent;
    background-size: auto 44px;
    text-align: right;
}

nav .menuBackLink {
    color: #1C3775;
    padding: 0 36px 0 0;
}

nav .menuBackLink:before {
    background: url("../../images/icons/iconStack.svg?v=2#SmallBlueArrowRight") center center no-repeat transparent;
    background-size: auto 44px;
    left: auto;
    right: -8px;
}

.menuTierHolder .menuInternalClose {
    float: left;
}

.menuTierHolder .desktopTierClose {
    padding: 0 32px 0 0;
}

.menuTierHolder .desktopTierClose:before {
    background: url("../../images/icons/iconStack.svg?v=2#SmallBlueArrowRight") center center no-repeat transparent;
    background-size: auto 44px;
    left: auto;
    right: -12px;
}

@media only screen and (min-width: 768px) {
    .iconizedNavButton {
        margin-left: 0;
        margin-right: calc(44% + 40px);
    }

    .tier .menuImagery {
        right: auto;
        left: 0;
        background-position: 50% 0;
    }

    .menuTierHolder .contentHolder {
        padding: 0 40px 0 0;
    }
}

@media only screen and (min-width: 960px) {
    .menuTierHolder .contentHolder {
        padding-left: 0;
        padding-right: calc((100% - 864px) / 2);
    }
}

@media only screen and (min-width: 1024px) {
    .iconizedNavButton {
        margin-left: 0;
        margin-right: calc(55% + 40px);
    }
}

@media only screen and (min-width: 1280px) {
    
    .iconizedNavButton {
        margin-left: 0;
        margin-right: 32px;
    }

    .menuTierHolder .tierLeft {
        padding-right: calc((100% - 1120px) / 2);
        padding-left: 24px;
    }

    .tierRight {
        left: auto;
        right: calc(((100% - 1120px) / 2) + 360px);
    }

    .active .active .menuButton:before {
        left: auto;
        right: -16px;
        background: url("../../images/icons/iconStack.svg?v=2#ShowHideArrowLeft") 1% center no-repeat #F1EFEB;
        background-size: auto 44px;
    }
}

.desktopNavButton.active:after {
    left: auto;
    right: 16px;
}


header .navLeft {
    margin-left: 100px;
    margin-right: 0px;
}

header .navRight {
    margin-right: 100px;
    margin-left: 0px;
}

header .desktopNavItem.profile,
header .desktopNavItem.signIn {
    border-right: 1px #fff solid;
    border-left: 0px;
}
/*
 *   Locale display and selection
 */

nav .mobileLocaleTakeover .menuBackLink:before {
    background: url("../../images/icons/iconStack.svg?v=2#SmallWhiteArrowRight") 6px center no-repeat transparent;
}

.currentLocale {
    padding: 10px 60px 10px 10px;
}

.localeButton {
    padding: 8px 46px 8px 16px;
}

.localeButton:before {
    left: auto;
    right: 0;
}

.currentLocale:before {
    left: auto;
    right: 10px;
}

@media only screen and (min-width: 768px) {
    .menuTierHolder .currentLocaleDisplay {
        max-width: 50%;
        padding: 10px 40px 40px 26px;
    }
}

@media only screen and (min-width: 960px) {
    .menuTierHolder .currentLocaleDisplay {
        padding-left: 26px;
        padding-right: calc((100% - 864px) / 2);
    }
}

@media only screen and (min-width: 1280px) {
    .menuTierHolder .currentLocaleDisplay,
    .menuTierHolder .currentLocaleDisplay + .contentHolder {
        padding-right: calc((100% - 1120px) / 2);
        padding-left: 24px;
    }
}

@media only screen and (min-width: 1280px) {
    .currentLocaleDisplay + .contentHolder .sectionToggleContent.shown {
        right: calc(((100% - 1120px) / 2) + 360px);
        left: 0;
    }

    .localeButton {
        float: right;
        text-align: right;
    }

    .currentLocaleDisplay + .contentHolder .sectionToggleButton:before {
        left: auto;
        right: -16px;
        background: url("../../images/icons/iconStack.svg?v=2#ShowHideArrowLeft") 0.5% center no-repeat #F1EFEB;
        background-size: auto 44px;
    }
}

@media only screen and (min-width: 1024px) {
    .header-legacy .desktopSiteSelect {
        background-position: 0 center;
        padding: 5px 5px 5px 44px;
        right: auto;
        left: 0;
        text-align: left;
    }
}

.helpLink a {
    padding-left: 0;
    padding-right: 44px;
    left: auto;
    right: 50%;
    transform: translate(50%);
}

.helpLink a:before {
    left: auto;
    right: 0;
}

.socialLinks li {
    float: right;
}

.socialLinks a {
    text-align: right;
}

.logo {
    direction: ltr;
    text-align: left;
}

nav .mobileSiteSelect,
.siteSelect, .mobileSiteSelect {
    background-position: 0 center;
    padding-left: 44px;
    padding-right: 0;
}

.selectStyleHolder {
    padding-left: 0;
    padding-right: 54px;
}

.selectStyleHolder:before {
    right: 6px;
    left: auto;
}

.navSectionList li {
    text-align: right;
}

@media only screen and (min-width: 1024px) {
    footer .address {
        float: right;
    }    
    
    .selectStyleHolder {
        float: left;
    }

    nav {
        right: 0;
    }

    nav .contentHolder {
        padding-right: calc((100vw - 864px) / 2);
    }

    .navSectionTitle {
        text-align: right;
    }
}

@media only screen and (min-width: 1280px) {
    nav .contentHolder {
        padding-right: calc((100vw - 1120px) / 2);
    }
}

@media only screen and (min-width: 768px) {
    .squareCarousel {
        padding-right: calc((100% - 486px) / 2);
        padding-left: 0;
    }
}

@media only screen and (min-width: 1024px) {
    .squareCarousel {
        padding-right: 20px;
    }
}

.hintCarouselHolder {
    padding: 0 16px 0 0;
}

.hintCarouselHolder h2 {
    float: right;
}

.hintCarouselHolder a.allLink {
    float: left;
    padding: 6px 0 0 16px;
}

.hintCarousel .carousel-cell {
    float: right;
}

@media only screen and (min-width: 768px) {
    .hintCarouselHolder a.allLink {
        padding: 6px 0 0 calc((100% - 358px) / 2);
    }
}

@media only screen and (min-width: 1024px) {
    .hintCarouselHolder a.allLink {
        padding: 6px 0 0 calc((100% - 825px) / 2);
    }
    
    .fullSlideImageTextCarousel .fullSlideImageTitle {
        padding: 32px 32px 0 0;
        float: right;
    }

    .fullSlideImageTextCarousel .fullSlideMainImage {
        float: left;
    }

    .fullSlideImageTextCarousel .fullSlideDescription {
        padding: 0 32px 0 0;
        float: right;
    }
}

.contentHolder .flickity-prev-next-button,
.hintCarouselHolder .flickity-prev-next-button {
    transform: rotate(180deg);
    right: auto;
    left: 6px;
}

.contentHolder .flickity-prev-next-button.previous,
.hintCarouselHolder .flickity-prev-next-button.previous {
    transform: rotate(0);
    right: auto;
    left: 50px;
}

.contentHolder .flickity-page-dots li,
.hintCarouselHolder .flickity-page-dots li {
    float: right;
}

@media only screen and (min-width: 768px) {
    .hintCarouselHolder {
        padding: 0 56px 0 0;
        margin-left: 0;
        margin-right: calc((100% - 502px) / 2);
    }

    .contentHolder .flickity-page-dots,
    .hintCarouselHolder .flickity-page-dots {
        width: 360px;
        right: 16px;
    }

    .contentHolder .flickity-prev-next-button,
    .hintCarouselHolder .flickity-prev-next-button {
        left: auto;
        right: 430px;
    }

    .contentHolder .flickity-prev-next-button.previous,
    .hintCarouselHolder .flickity-prev-next-button.previous {
        left: auto;
        right: 386px
    }
}

@media only screen and (min-width: 1024px) {
    .hintCarouselHolder {
        margin: 0 auto;
        padding: 0;
    }

    .contentHolder .flickity-page-dots,
    .hintCarouselHolder .flickity-page-dots {
        left: auto;
        right: calc(52% - 72px);
        transform: translateX(50%);
    }

    .contentHolder .flickity-prev-next-button,
    .hintCarouselHolder .flickity-prev-next-button {
        right: calc(52% + 198px);
        transform: translateX(50%) rotate(180deg);
    }

    .contentHolder .flickity-prev-next-button.previous,
    .hintCarouselHolder .flickity-prev-next-button.previous {
        right: calc(52% + 128px);
    }
}

@media only screen and (min-width: 1280px) {
    .hintCarouselHolder a.allLink {
        padding: 6px 0 0 calc((100% - 996px) / 2);
    }
}

.titleCampaign.leftTextAlign p {
    text-align: right;
}

.diagonalCover {
    text-align: right;
}

.diagonalCover:before {
    clip-path: polygon(0 0, 100% 66%, 100% 100%, 0 100%);
}

.recipeHero:before {
    background: linear-gradient(290deg, rgba(0, 0, 0, 0.35) 100%,  rgba(0, 0, 0, 0) 33%);
}


/*
 *   breadcrumb nav elements
 */

.singleForwardLink {
    padding-right: 0;
    padding-left: 38px;
}

.singleBackLink {
    padding-left: 0;
    padding-right: 38px;
}

.singleForwardLink:before {
    background: url("../../images/icons/iconStack.svg?v=2#SmallWhiteArrow") center center no-repeat transparent;
    background-size: auto 44px;
    left: -4px;
    right: auto;
}

.singleBackLink:before {
    background: url("../../images/icons/iconStack.svg?v=2#SmallWhiteArrowRight") center center no-repeat transparent;
    background-size: auto 44px;
    right: -4px;
    left: auto;
}

.noImageHeader .singleBackLink:before {
    transform: rotate(180deg);
}

@media only screen and (min-width: 1024px) {
    .singleBackLink {
        margin-left: 0;
        margin-right: -8px;
    }
    
    .breadcrumb li {
        float: right;
        padding-left: 0;
        padding-right: 4px;
        margin-left: 0;
        margin-right: 8px;
    }

    .breadcrumb li:first-child {
        padding-right: 0;
        margin-right: 0;
    }
}

.typeTag a.original,
.typeTag a.open,
.typeTag a.kosher,
.typeTag a.halal,
.typeTag a.vegetarian,
.typeTag a.glutenFree,
.typeTag a.lactoseFree {
    padding: 10px 34px 0 14px;
    background-position: 107% center;
}

.typeTag:first-child a {
    margin-right: 16px;
    margin-left: 5px;
}

.recipeTags li {
    height: 32px;
    margin: 0 0 10px 10px;
    float: right;
}

.methodStep li {
    float: right;
    margin: 0 0 8px 8px;
}

@media only screen and (min-width: 1024px) {
    .recipeOverview .recipeDetailLeft {
        float: right;
    }

    .recipeCollection {
        float: left;
    }

    .recipeCollection .leftItems {
        float: right;
    }

    .recipeCollection .curveHolder {
        top: -72px;
    }

    .recipeCollection .cmsImageHolder {
        float: left;
    }
}

.ingredients h2.ingredientTitle {
    float: right;
}

.ingredients .serves {
    background-position: 100% center;
    float: left;
    padding: 10px 44px 10px 0;
}

.ingredients table td {
    padding: 10px 0 10px 5px;
}

@media only screen and (min-width: 1024px){
    .ingredients {
        float: right;
    }
}

.recipeTipBox {
    padding: 20px 77px 20px 28px;
}

.recipeTipBox.health,
.recipeTipBox.utensil,
.recipeTipBox.generic {
    background-position: 96% 22px;
}

.productHero li {
    float: right;
}

.productHero li.shape,
.productHero li.time,
.productHero li.size,
.productHero li.range {
    background-position: 100% center;
}

@media only screen and (min-width: 1024px) {
    .productHero p,
    .productHero li {
        text-align: right;
    }
}

@media only screen and (min-width: 1280px) {
    .productDescription {
        margin-left: -60px;
        margin-right: 0;
    }

    .productHero li {
        padding-left: 0;
        padding-right: 44px;
    }
}

/*.curveHolder svg.textCurve {*/
/*    display: none;*/
/*}*/

.textStraight {
    display: block;
    height: 120px;
    padding-top: 74px;
    color: white;
    font-size: 1.125rem;
}

@media only screen and (min-width: 768px){
    .textStraight {
        height: 134px;
        padding-top: 86px;
    }
}

@media only screen and (min-width: 1280px){
    .textStraight {
        height: 140px;
        padding-top: 90px;
    }
}

.filterOptions {
    left: auto;
    right: 0;
}

 .filterButton {
     background-position: 100% 0;
     padding: 10px 40px 10px 14px;
     float: right;
 }

.sortOptions {
    float: left;
}

.sortOptions label {
    float: right;
}

.sortOptions select {
    background-position: 0 center;
    padding: 10px 10px 10px 44px;
}

.listingResults .listingNumber {
    text-align: right;
}

@media only screen and (min-width: 1024px) {
    .sortOptions {
        float: right;
        padding-right: 42px;
    }
}

.listingContent.listingResults h1 {
    text-align: right;
}

.filterHeader button {
    right: auto;
    left: 0;
}

.checkRadioHolder {
    float: right;
}

.checkRadioHolder span.pillStyle {
    margin: 0 0 8px 8px;
}

.filterBottomClose {
    float: right;
}

.filterFooter button {
    float: left;
}

.listingContent .hintCarousel .recipeCard {
    margin-left: 0;
}

.listingContent .hintCarousel .recipeCardContent {
    margin-left: 0;
}

@media only screen and (min-width: 518px) {
    .listingContent .hintCarousel .recipeCard {
        float: right;
    }

    .listingContent .hintCarousel .recipeCard:nth-child(odd) .recipeCardContent {
        margin-left: 16px;
        margin-right: 0;
    }
}

@media only screen and (min-width: 1024px) {
    .listingContent .hintCarousel .recipeCard .recipeCardContent {
        margin-left: 0;
    }

    .listingContent .hintCarousel .recipeCard:nth-child(2n) .recipeCardContent,
    .listingContent .hintCarousel .recipeCard:nth-child(1n) .recipeCardContent {
        margin-left: 16px;
        margin-right: 0;
    }
}

@media only screen and (min-width: 1280px) {
    .listingContent .hintCarousel .recipeCard {
        float: right;
    }
}

.readToggle {
    padding-left: 44px;
    padding-right: 0;
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

.readToggle:after {
    right: auto;
    left: 0;
}

.chosenFilters li {
    float: right;
}

.chosenFilters li span {
    background-position: -4px center;
    padding: 9px 16px 6px 32px;
    margin: 0 0 8px 8px;
}


/*
 *   From typography.css
 */

.cmsRichText ul,
.cmsRichText ol {
    padding-left: 0;
    padding-right: 20px;
}


/*
 *   From categoryListing.css
 */

.checkContent {
    padding-left: 0;
    padding-right: 40px;
}

.checkmark {
    left: auto;
    right: 2px;
}



/*
 *   From baseModules.css
 */


@media only screen and (min-width: 1024px) {
    .navigationOverlay {
        padding-right: 74px;
        padding-left: 0;
    }
}

.rModule .leftHeader h2 {
    float: right;
}

.rModule .leftHeader a.allLink {
    float: left;
}

.rModule .hintCarouselHolder .leftHeader a.allLink {
    padding: 6px 0 0 16px;
}

.rModule .standardControls .flickity-prev-next-button {
    transform: rotate(180deg);
    right: auto;
    left: 0;
}

.rModule .standardControls .flickity-prev-next-button.previous {
    transform: rotate(0);
    right: auto;
    left: 46px;
}

.rModule .standardControls .flickity-page-dots li {
    float: right;
}

@media only screen and (min-width: 768px){
    .rModule .wholeCardCarousel.standardControls .flickity-prev-next-button {
        right: 412px;
        left: auto;
    }

    .rModule .wholeCardCarousel.standardControls .flickity-prev-next-button.previous {
        right: 372px;
        left: auto;
    }

    .rModule .wholeCardCarousel.standardControls .flickity-page-dots {
        left: auto;
        right: 0;
    }
}

@media only screen and (min-width: 1024px){
    .rModule .wholeCardCarousel.standardControls .flickity-prev-next-button {
        right: calc(52% + 202px);
        left: auto;
        transform: translateX(50%) rotate(180deg);
    }

    .rModule .wholeCardCarousel.standardControls .flickity-prev-next-button.previous {
        right: calc(52% + 158px);
        left: auto;
        transform: translateX(50%) rotate(0deg);
    }

    .rModule .wholeCardCarousel.standardControls .flickity-page-dots {
        right: calc(52% - 68px);
        left: auto;
        transform: translateX(50%);
    }
}

.rModule .featureCardInfo span {
    color: #fff;
    padding-left: 0;
    border-left: none;
    padding-right: 14px;
    border-right: 1px solid #fff;
}

.rModule .featureCardInfo span:first-child {
    padding-right: 0;
    padding-left: 11px;
    border-right: none;
}

@media only screen and (min-width: 1024px) {
    .rModule .featureDetails {
        float: right;
        transform: translateY(-50%);
    }
    
    .rModule .featureImage {
        float: left;
    }
}

.rModule .tabAndCarouselHolder {
    padding: 20px 16px 0 0;
}

.rModule .cellLifestyleItem {
    margin-right: 0;
    margin-left: 16px;
}

.rModule .cellIngredientShapeItem {
    margin-right: 0;
    margin-left: 16px;
}

@media only screen and (min-width: 768px) {
    .rModule .carouselTabCategories .tabsActive li {
        float: right;
    }

    .rModule .tabCarouselOptionTab.smallSquares {
        padding: 0 20px 0 0;
    }

    .rModule .cellLifestyleItem {
        float: right;
        margin-right: 0;
        margin-left: 8px;
    }

    .rModule .cellLifestyleItem:nth-child(even) {
        margin-left: 0;
        margin-right: 8px;
    }

    .rModule .cellIngredientShapeItem {
        float: right;
        margin-right: 0;
        margin-left: 20px;
    }
}

@media only screen and (min-width: 1024px) {
    .rModule .cellLifestyleItem {
        margin-right: 0;
        margin-left: 10px;
    }

    .rModule .cellLifestyleItem:nth-child(even) {
        margin-left: 0;
        margin-right: 10px
    }
}

@media only screen and (min-width: 768px) {
    .rModule .ingredientList li {
        float: right;
    }

    .rModule .ingredientList li:nth-child(even) {
        float: left;
    }
}

@media only screen and (min-width: 1024px) {
    .rModule .ingredientList li:nth-child(even) {
        float: right;
    }

    .rModule .ingredientList li {
        margin-right: 0;
        margin-left: 16px;
    }

    .rModule .ingredientList li:nth-child(4n+4) {
        margin-left: 0;
    }

    .rModule .ingredientList li:nth-child(even) {
        float: right;
    }
}

.rModule .pictureBgCard h2:after,
.rModule .pictureBgCard h3:after,
.rModule .pictureBgCard h4:after {
    left: auto;
    right: 0;
}

.rModule .pictureBgCard .button {
    left: auto;
    right: 24px;
}

.rModule .pageHeroCarousel .flickity-page-dots li {
    float: right;
}


/*
 *   From contentList.css
 */

.rModule .hintCarousel .cardBase .basicCard {
    margin-right: 0;
    margin-left: 16px;
}

.rModule .articleCta {
    left: auto;
    right: 16px;
}

.rModule .readTime {
    right: 15px;
    left: auto;
}

@media only screen and (min-width: 1024px){
    .rModule .hintCarousel .articleCard {
        margin-right: 0;
        margin-left: 18px;
    }
}

.rModule .recipeCard span {
    left: auto;
    right: 14px
}

.rModule .recipeCard .recipeTitles {
    padding-right: 0;
    padding-left: 22px;
}

@media only screen and (min-width: 1280px) {
    .rModule .recipeCard .recipeTitles {
        padding-right: 0;
        padding-left: 50px;
    }
}

.rModule .favouriteButton {
    right: auto;
    left: 20px;
}

@media only screen and (min-width: 1024px){
    .rModule .hintCarousel .favouriteButton {
        right: auto;
        left: 4px;
    }
}

.rModule .favouriteSnackbar {
    left: auto;
    right: 10px;
    padding: 10px 62px 10px 10px;
}

@media only screen and (min-width: 1024px){
    .rModule .grid2Wide .recipeTitles h4 {
        padding-right: 0;
        padding-left: 22px
    }
}

@media only screen and (min-width: 540px){
    .rModule .grid3WideNew .cardBase {
        float: right;
        margin-left: 16px;
        margin-right: 0;
    }

    .rModule .grid3WideNew .cardBase:nth-child(even) {
        margin-left: 0;
    }
}

@media only screen and (min-width: 1024px){
    .rModule .grid3WideNew .cardBase:nth-child(even) {
        margin-left: 16px;
        margin-right: 0;
    }
    .rModule .grid3WideNew .cardBase:nth-child(3n) {
        margin-left: 0;
    }
}

.rModule .grid2Wide .cardBase {
    float: right;
    margin-right: 0;
    margin-left: 8px;
}

.rModule .grid2Wide .cardBase:nth-child(even) {
    margin-right: 8px;
    margin-left: 0;
}


/*
 *   From keyModules.css
 */

.rModule .hintCarouselHolder .titleText h2,
.rModule .hintCarouselHolder .titleText h3,
.rModule .hintCarouselHolder .titleText h4,
.rModule .hintCarouselHolder .titleText p {
    text-align: right;
    float: none;
}

@media only screen and (min-width: 1024px){
    .rModule .hintCarouselHolder .titleText h2,
    .rModule .hintCarouselHolder .titleText h3,
    .rModule .hintCarouselHolder .titleText h4,
    .rModule .hintCarouselHolder .titleText p {
        text-align: center;
    }
}

.rModule .hintCarouselHolder {
    padding: 32px 16px 16px 0;
}

@media only screen and (min-width: 768px) {
    .rModule .hintCarouselHolder {
        padding: 48px 56px 0 0;
        margin-left: 0;
        margin-right: calc((100% - 622px) / 2);
    }
}

@media only screen and (min-width: 1024px) {
    .rModule .hintCarouselHolder {
        margin: 0 auto;
        padding: 58px 0 0;
    }

    .rModule .hintCarouselHolder .leftHeader a.allLink {
        padding: 14px 0 0 calc((100% - 825px) / 2);
    }
}

@media only screen and (min-width: 1280px) {
    .rModule .hintCarouselHolder .leftHeader a.allLink {
        padding: 14px 0 0 calc((100% - 996px) / 2);
    }
}


/*
 *   From productSection.css
 */

.productCollectionCard li {
    padding-right: 0;
    margin-right: 0;
    border-right: none;
    padding-left: 11px;
    margin-left: 10px;
    border-left: 1px solid white;
}

.productCollectionCard li:last-child {
    padding-left: 0;
    margin-left: 0;
    border-left: none;
}

.themeCard a.singleForwardLink {
    left: auto;
    right: 53%;
    transform: translateX(50%);
}

.productDetailContent .cmsProductDetails ul {
    padding: 0 20px 0 0;
}

.productDetailContent .cmsProductDetails hr {
    left: auto;
    right: -16px;
}

.productPopRecipe {
    padding: 25px 14px 0 56px;
}

.productPopRecipe:after {
    right: auto;
    left: 6px;
    transform: translateY(-50%) rotate(180deg);
}

.productPopRecipe img {
    float: right;
    margin-right: 0;
    margin-left: 15px;
}

.sectionToggleButton {
    background: url("../../images/icons/iconStack.svg?v=2#ShowHideArrow") 0 center no-repeat #FAF8F5;
    background-size: auto 44px;
    text-align: right;
    padding: 12px 0 12px 50px;
}

.sectionToggleButton.opened {
    background: url("../../images/icons/iconStack.svg?v=2#ShowHideArrowUp") 0 center no-repeat #FAF8F5;
    background-size: auto 44px;
}

.productDetailContentHolder .sectionToggleContent th:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 8px;
}

.productDetailContentHolder .sectionToggleContent th:last-child {
    border-top-right-radius: 0;
    border-top-left-radius: 8px;
}

.productDetailContentHolder .sectionToggleContent tr:last-child td:first-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 8px;
}

.productDetailContentHolder .sectionToggleContent tr:last-child td:last-child {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 8px;
}

.productDetailContentHolder .sectionToggleContent ol li:before {
    float: right;
    margin: 4px 16px 32px 32px;
}

@media only screen and (min-width: 1024px) {
    .themedLinkCards h2 {
        float: right;
        text-align: right;
    }

    .themeCard {
        float: right;
        margin-right: 0;
    }

    .themeCard:nth-child(odd) {
        margin-left: 0;
        float: left;
    }
}


/*
 *   Account housing, header and form container
 */

.accountPage .basicHeader h2 {
    padding-left: 0;
    padding-right: 22px;
}

.accountPage .signOut {
    margin: 0 24px 0 0;
}

.accountPage .accountSectionTabs {
    margin: 0 11px 0 0;
}

.accountPage .accountSectionTabs li {
    float: right;
}

.accountTag a.accountHome,
.accountTag a.accountFavourites,
.accountTag a.accountProfile,
.accountTag a.accountPreferences {
    padding: 11px 40px 0 14px;
}

.accountTag a.accountHome,
.accountTag.current a.accountHome,
.accountTag a.accountFavourites,
.accountTag.current a.accountFavourites,
.accountTag a.accountProfile,
.accountTag.current a.accountProfile,
.accountTag a.accountPreferences ,
.accountTag.current a.accountPreferences {
    background-position: 102% center;
}

@media only screen and (min-width: 768px) {
    .accountPage .basicHeader h2 {
        padding-right: 0;
    }

    .accountPage .signOut {
        margin-right: 0;
    }
}


/*
 *  Contact Us - From base modules and new widget thing
 */

.contactTriageFAQ .singleBackLink,
body .barilla-contactus .singleBackLink {
    margin-right: -8px;
    margin-left: 0;
}

.contactTriageFAQ .singleBackLink:before,
body .barilla-contactus .triageFaq  .backLink:before {
    background: url("../../images/icons/iconStack.svg?v=2#SmallBlueArrowRight") center center no-repeat transparent;
    background-size: auto 44px;
}

body .barilla-contactus .visableHeaderContent .backLink:before {
    background: url("../../images/icons/iconStack.svg?v=2#SmallWhiteArrowRight") center center no-repeat transparent;
    background-size: auto 44px;
}

body .barilla-contactus .triageFaq  .backLink,
body .barilla-contactus .visableHeaderContent .backLink{
    padding-left: 0;
    padding-right: 44px;
}

body .barilla-contactus .triageFaq  .backLink:before,
body .barilla-contactus .visableHeaderContent  .backLink:before{
    left: auto;
    right: 0;
}

.contactTriageStepButton,
body .barilla-contactus .triageStepButton {
    background: url("../../images/icons/iconStack.svg?v=2#ShowHideArrowLeft") 0 center no-repeat #FAF8F5;
    background-size: auto 44px;
    text-align: right;
    padding: 12px 0 12px 50px;
}

body .barilla-contactus .triageToggleButton {
    background: url(../../images/icons/iconStack.svg?v=2#ShowHideArrow) 0 center no-repeat #FAF8F5;
    text-align: right;
    padding: 12px 0 12px 50px;
}

body .barilla-contactus .contactWidgetForm .countrySelectHolder {
    background-position: 0 center;
    padding: 2px 54px 2px 0;
}

body .barilla-contactus .contactWidgetForm.contactFormDetails .countrySelectHolder {
    padding-right: 24px
}

body .barilla-contactus .contactWidgetForm .countrySelectHolder:before {
    left: auto;
    right: 6px;
}

body .barilla-contactus .contactWidgetForm select.countrySelect {
    padding: 10px 0 10px 44px;
}

body .barilla-contactus .contactWidgetForm label {
    text-align: right;
}

body .barilla-contactus .contactForms .selectionMarkers h3 {
    text-align:right;
}


/*
 *   Form housing, header and form container - From forms.css
 */

.contactForms .formSteps li,
body .barilla-contactus .formStepper li {
    margin-right: 0;
    margin-left: 69px;
    float: right;
}

.contactForms .formSteps li:last-child,
body .barilla-contactus .formStepper li:last-child {
    margin-left: 0;
}

.contactForms .formSteps li:after,
body .barilla-contactus .formStepper li:after {
    left: auto;
    right: 28px;
}

.contactForms .selectionBuilder li,
body .barilla-contactus .contactForms .selectionMarkers li {
    float: right;
}

.contactForms .selectionBuilder li span,
body .barilla-contactus .contactForms .selectionMarkers li span {
    background-position: -4px center;
    padding: 9px 16px 6px 32px;
    margin: 0 0 8px 8px;
}

@media only screen and (min-width: 375px) {
    .contactForms .formSteps li,
    body .barilla-contactus .formStepper li {
        margin-right: 0;
        margin-left: 82px;
    }
}

@media only screen and (min-width: 768px) {
    .contactForms .formSteps li,
    body .barilla-contactus .formStepper li {
        margin-right: 0;
        margin-left: 96px;
    }

    .contactForms .formSteps li:after,
    body .barilla-contactus .formStepper li:after {
        left: 0;
        right: 32px;
    }
}

body .barilla-contactus .contactWidgetForm h3 {
    text-align: right;
}


/*
 *   Standard forms (e.g. contact us) - From form.css
 */

.panelForms select,
.standardForms select {
    background-position: 0 center;
    padding: 16px 16px 16px 44px;
}

.standardForms label.inputControl {
    text-align: right;
}

.standardForms .countrySelectHolder {
    padding-left: 0;
    padding-right: 54px;
}

.standardForms .countrySelectHolder:before {
    left: auto;
    right: 6px;
}

.standardForms select.countrySelect {
    background-position: 0 center;
    padding: 10px 0 10px 44px;
}

.standardForms .arrowRadio,
body .barilla-contactus .contactWidgetForm .arrowRadio {
    padding: 19px 16px 19px 56px;
    background: url("../../images/icons/iconStack.svg?v=2#ShowHideArrowLeft") 0 center no-repeat #fff;
}

body .barilla-contactus .contactWidgetForm .arrowRadio {
    text-align: right;
}

.standardForms .arrowRadio img,
body .barilla-contactus .contactWidgetForm .arrowRadio img {
    float: right;
    margin-right: 0;
    margin-left: 13px;
}

body .barilla-contactus .contactWidgetForm label.inputControl {
    text-align: right;
}

.standardForms .inputOutroRight {
    float: left;
}

body .barilla-contactus .contactWidgetForm input[type=text],
body .barilla-contactus .contactWidgetForm input[type=email],
body .barilla-contactus .contactWidgetForm input[type=number],
body .barilla-contactus .contactWidgetForm input[type=date],
body .barilla-contactus .contactWidgetForm input[type=datetime-local],
body .barilla-contactus .contactWidgetForm select,
body .barilla-contactus .contactWidgetForm textarea {
    text-align: right;
}

body .barilla-contactus .checkRadioHolder {
    float: right;
}

body .barilla-contactus .checkmark {
    left: auto;
}

body .barilla-contactus .checkContent {
    padding-left: 0;
}




/*
 *  Homepage hero - From keyModules.css
 */

.homeHeroMobile .carouselImageSlide h2 {
    left: auto;
    right: 50%;
    transform: translate(50%, -50%);
    position: absolute;
}

.homeHeroMobile .carouselImageSlide {
    float: right;
}

@media only screen and (min-width: 1024px) {
    .homeHeroDesktop .flickity-prev-next-button {
        left: auto;
        right: calc(50% - 24px);
        transform: translateX(50%) ;
    }

    .homeHeroDesktop .flickity-prev-next-button.previous {
        left: auto;
        right: calc(50% + 24px);
        transform: translateX(50%) rotate(180deg);
    }
}

/*
 *  From typography.css
 */

.cmsRichText ul,
.cmsRichText ol {
    padding: 0 20px 1em 0;
}

.cmsTable thead th:first-child,
.cmsTable tbody tr th:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 8px;
}
.cmsTable thead th:last-child,
.cmsTable tbody tr th:last-child {
    border-top-right-radius: 0;
    border-top-left-radius: 8px;
}

.cmsTable tbody tr:last-child td:first-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 8px;
}
.cmsTable tbody tr:last-child td:last-child {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 8px;
}


/*
 *    favourites- From recipes.css
 */

.favouriteContainer .favouriteButton {
    right: auto;
    left: 20px;
}

@media only screen and (min-width: 1024px) {
    .favouriteContainer .hintCarousel .favouriteButton {
        right: auto;
        left: 4px;
    }
}

.favouriteContainer .snackbarImage {
    left: auto;
    right: 10px;
}

.snackbarImage {
    left: auto;
    right: 10px
}
