@charset "utf-8";

/* ============================== =blocks - base styles ============================== */

/* =CalloutBox - base */

.CalloutBox {
    color: #fff;
    background-color: #888;
    margin: 2em auto;
    padding: 1px 4%;
}

.CalloutBox p {
    margin: 1em 0;
}

/* =ReminderBox - base */

.ReminderBox {
    color: #fff;
    background-color: #888;
    width: 50%;
    float: right;
    padding: 1px 4%;
    margin: 1em 0 1em 2em;
}

.ReminderBox h4 {
    margin-top: 0.5em;
}

.ReminderBox p {
    margin: 1em 0;
}

/* =AdSense - base */

.AdSenseBoxLeft, .AdSenseBoxRight, .AdSenseBoxCenter468, .AdSenseBoxExtraColumn {
    padding: 1%;
}

.AdSenseBoxLeft {
    float: left;
    margin-right: 2%;
    margin-bottom: 2%;
}

.AdSenseBoxRight {
    float: right;
    margin-left: 2%;
    margin-bottom: 2%;
}

.AdSenseResponsiveBox {
    width: 50%;
}

@media only screen and (max-width: 447px) {
    .AdSenseResponsiveBox {
        margin: 0;
        float: none;
        width: 100%;
    }
}

.AdSenseBoxCenter {
    text-align: center;
    clear: both;
}

.AdSenseBoxCenter468 {
    width: 468px;
    margin: 2% auto;
    clear: both;
}

.AdSenseBoxExtraColumn {
    padding: 0;
    margin: 2% auto;
    clear: both;
}

/* =FBI - base */

.formBarGraphBar {
    border: 0;
    background-color: #eee;
}

#PageWrapper .formwrapper .formBuilderForm-Throbber {
    border: 0;
}
#PageWrapper .FormBlockLeft .formwrapper {
    float: left;
    margin-right: 5px;
}

#PageWrapper .FormBlockRight .formwrapper {
    float: right;
    margin-left: 5px;
}

#PageWrapper .FormBlockCenter .formwrapper {
    margin-left: auto;
    margin-right: auto;
}

/* =WhatsNew - base */

.WhatsNew {
    border: 1px solid #eee;
    margin: 1em 0;
    position: relative;
    box-sizing: border-box;
}

.WhatsNewLeft {
    float: left;
    margin-right: 0.5em;
}

.WhatsNewRight {
    float: right;
    margin-left: 0.5em;
}

.WhatsNewCenter {
    margin-left: auto;
    margin-right: auto;
}

#PageWrapper .WhatsNew img {
    border: 0;
}

#PageWrapper .WhatsNew h2 {
    margin: 0;
    padding: 0.3em 24px 0.3em 4px;
    background: #eee;
    line-height: 1.2;
    font-size: 125%;
    text-align: center;
    color: #888;
}

#PageWrapper .WhatsNew ol,
#PageWrapper .WhatsNew ul,
#PageWrapper .WhatsNew li {
    margin: 0;
    padding: 0;
    list-style: none;
    background: transparent;
}

#PageWrapper .WhatsNew ol {
    margin: 0 4%;
    overflow: hidden;
}

#PageWrapper .WhatsNew ol li {
    display: block;
    padding-bottom: 1px;
    border-top: 1px solid #ECF0F1;
    margin-top: -1px;
}

#PageWrapper .WhatsNew h3 {
    font-size: 125%;
    line-height: 1.2;
    margin-top: 1em;
    margin-bottom: 0;
}

.WhatsNew-time {
    font-size: 75%;
    color: #888;
    margin-top: 0.5em;
}

.WhatsNew-more {
    text-align: right;
    margin: 1em 0;
}

.WhatsNew-subscribe {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    text-align: right;
}

.WhatsNew-icon {
    padding: 4px 4px 2px;
    width: 24px;
    height: 22px;
}

#PageWrapper .WhatsNew-subscribe ul {
    display: none;
    padding: 2px 4px;
    background: #eee;
}

#PageWrapper .WhatsNew-subscribe ul li {
    display: block;
    background-image: none;
}

#PageWrapper .WhatsNew-subscribe:hover ul {
    display: block;
}

#PageWrapper .WhatsNew-subscribe ul img {
    display: block;
    padding: 2px 0;
    width: 91px;
    height: 21px;
}

@media only screen and (max-width: 768px) {
    #PageWrapper .WhatsNew h2 {
        padding-right: 4px;
    }

    .WhatsNew-subscribe {
        position: static;
    }

    .WhatsNew-icon {
        display: none;
    }

    #PageWrapper .WhatsNew-subscribe ul {
        display: block;
        text-align: center;
    }

    #PageWrapper .WhatsNew-subscribe ul img {
        display: inline-block;
    }
}

/* =RSSbox - base */

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

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

.RSSbox li {
    background-image: none;
    padding: 0;
    margin: 0 0 5px 0;
}

/* BEGIN =Text\Image Block - base */
.text_image_block {
    margin: 0.5em 0 0 0;
}

.text_image_not_floated.text_image_left .ImageBlock img {
    float: left;
}

.text_image_not_floated.text_image_right .ImageBlock img {
    float: right;
}

.text_image_not_floated.text_image_center .ImageBlock {
    text-align: center;
}

#PageWrapper .text_image_floated .ImageBlock {
    margin: 0.3em 0 0 0;
}

#PageWrapper .text_image_floated.text_image_left .ImageBlock {
    float: left;
    margin-right: 10px;
}

#PageWrapper .text_image_floated.text_image_right .ImageBlock {
    float: right;
    margin-left: 10px;
}

.text_image_top_cleared,
.text_image_both_cleared {
    clear: both;
}

.text_image_bottom_cleared p:last-of-type:after,
.text_image_both_cleared p:last-of-type:after {
    content: "";
    clear: both;
    display: block;
    width: 100%;
}
/* END =Text\Image Block - base */

/* BEGIN =Text\Image Block - responsive */
@media (max-width: 768px) {
    #PageWrapper .text_image_floated.text_image_left .ImageBlock,
    #PageWrapper .text_image_floated.text_image_right .ImageBlock {
        float: none;
        margin: 0 0 15px 0;
    }

    div#PageWrapper .text_image_floated .ImageBlock {
        max-width: 100%;
    }
}
/* END =Text\Image Block - responsive */

/* =Ezine - base */

.Ezine {
    padding: 4%;
    margin-bottom: 2em;
    background: #eee;
}

.Ezine table {
    width: 100%;
}

.Ezine td {
    width: 50%;
    text-align: center;
    vertical-align: top;
}

.Ezine .EzineInputAbove {
    width: 100%;
}

.EzineInput input {
    width: 85%;
    max-width: 350px;
    padding: 5px;
}

.Ezine input:focus[type="text"] {
    background-color: #ffffcc;
}

td.EzineLabel {
    text-align: right;
    vertical-align: middle;
}

td.EzineLabelAbove {
    text-align: center;
}

.EzineDescription {
    text-align: center;
}

/* =Ezine2 - base */

.Ezine2 {
    margin: 1em 0;
    padding: 0.5em;
    border: 1px solid #eee;
}

.EzineRow {
    padding: 0.5em 0;
    max-width: 100%;
    box-sizing: border-box;
}

.EzineVertical label {
    display: block;
}

.EzineHorizontal .EzineRow,
.EzineHorizontal label {
    display: inline-block;
}

.Ezine2 label,
.Ezine2 input[type="text"],
.Ezine2 input[type="email"],
.EzineButton {
    vertical-align: middle;
    max-width: 100%;
    box-sizing: border-box;
}

.Ezine2 input:focus[type="text"],
.Ezine2 input:focus[type="email"] {
    background-color: #ffffcc;
}

.EzineLeft,
body #PageWrapper .Ezine2.EzineLeft,
html.mobile body #PageWrapper .Ezine2.EzineLeft {
    text-align: left;
}

.EzineCenter,
body #PageWrapper .Ezine2.EzineCenter,
html.mobile body #PageWrapper .Ezine2.EzineCenter {
    text-align: center;
}

.EzineRight,
body #PageWrapper .Ezine2.EzineRight,
html.mobile body #PageWrapper .Ezine2.EzineRight {
    text-align: right;
}

/* =ImageBlock - base */

a .Caption {
    color: inherit;
}

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

.CaptionCenter {
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
}

.CaptionRight {
    text-align: right !important;
}

.Caption {
    font-size: 85%;
    display: block;
}

img {
    max-width: 100%;
    box-sizing: border-box;
}

/* none-JavaScript fix for too large images */
#PageWrapper .ImageBlock img {
    max-width: 100%;
}

/* IE9 and Chrome (~20) margin fix for block images with margin: auto */
.ImageBlock img {
    margin: 0;
}

#PageWrapper .ImageBlock {
    overflow: hidden;
    max-width: 100%;
}

#PageWrapper .ImageBlockLeft {
    float: left;
    text-align: center;
    margin-bottom: 10px;
}

#PageWrapper .ImageBlockLeft img {
    margin-right: 15px;
}

#PageWrapper .ImageBlockRight {
    float: right;
    text-align: center;
    margin-bottom: 10px;
}

#PageWrapper .ImageBlockRight img {
    margin-left: 15px;
}

#PageWrapper .ImageBlockRight .Caption {
    margin-left: 15px;
}
#PageWrapper .ImageBlockCenter {
    margin: 15px 0;
    text-align: center;
}

/* BEGIN =Media Block */
#PageWrapper .MediaBlock {
    margin-top: 15px;
    margin-bottom: 15px;
}

#PageWrapper .MediaBlockLeft {
    float: left;
    margin-right: 15px;
}

#PageWrapper .MediaBlockRight {
    float: right;
    margin-left: 15px;
}

#PageWrapper .MediaBlockCenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    margin-bottom: 15px;
}
/* END =Media Block */

/* BEGIN =GDPR consent cookie bar */
.eucookiebar button, .eucookiebar p{
    display:inline-block;
    margin:.25em .5em;
    font-family:"Lucida Grande",Geneva,Arial,Verdana,sans-serif;
}

.eucookiebar{
    text-align:center;
    position:absolute;
    top:-250px;
    left:0;
    right:0;
    background:#fff;
    padding:.5% 2%;
    box-shadow:0 4px 10px 1px rgba(0,0,0,.2);
    z-index:9999;
    font-size:12px;
    font-family:"Lucida Grande",Geneva,Arial,Verdana,sans-serif;
    color:#666;
    transition:top .5s ease,bottom .5s ease, opacity .5s ease
}
.eucookiebar a{
    color:#00f;
    font-weight:400;
    text-decoration:underline
}
.eucookiebar a:visited{
    color:#551A8B
}
.eucookiebar a:active{
    color:red
}
.eucookiebar button{
    background:#eee;
    border:1px solid #888;
    border-radius:4px;
    font-size:100%;
    font-weight:700;
    color:#666
}
.eucookiebar button:hover{
    background:#666;
    color:#fff
}
.eucookiebar.show{
    top:0;
    opacity:1;
}
.eucookiebar.hide{
    top:-250px;
    opacity:0;
    pointer-events:none;
}
.eucookiebar.bottom{
    top:auto;
    bottom:-250px;
    position:fixed;
}
.eucookiebar.bottom.show{
    bottom:0;
}
.eucookiebar.bottom.hide{
    bottom:-250px;
}
/* END =GDPR consent cookie bar */

#PageWrapper .noalignment {
    float: left;
}

#PageWrapper .pinit {
    text-align: center;
}

/* -- Related Pages Block -- */
#PageWrapper .RelatedPagesBlock ul {
    padding:0;
    margin:0;
    list-style:none;
}
/* down with thumbnail */
#PageWrapper .RelatedPagesBlock ul.down .relatedPagesThumbnail {
    float:left;
    margin-right:10px;
 }
 #PageWrapper .RelatedPagesBlock ul.down .relatedPagesThumbnail a {
    display: block;
    width:50px;
    height:50px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

 }
 #PageWrapper .RelatedPagesBlock ul.down h3 {
    margin-top:0;
    margin-bottom:0;
 }
 #PageWrapper .RelatedPagesBlock ul.down p {
    margin:0;
 }
 #PageWrapper .RelatedPagesBlock ul li {
    border:none !important;
    list-style-type: none!important;
 }
 #PageWrapper .RelatedPagesBlock ul.down  li {
    clear: both;
    overflow: hidden;
    padding-top:10px;
    padding-bottom:10px;
 }

/* 4 across */
#PageWrapper .RelatedPagesBlock ul.across {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  justify-content: space-between;
}

#PageWrapper .RelatedPagesBlock ul.across .relatedPagesThumbnail a {
    display: block;
    width:100%;
    height:200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

 }

#PageWrapper .RelatedPagesBlock ul.across li {
    box-sizing: border-box;
    padding:10px 0;
    width: 200px;
}

/* text */
#PageWrapper .RelatedPagesBlock ul.text li {
    padding-top:10px;
    padding-bottom:10px;
}
#PageWrapper .RelatedPagesBlock ul.text li .relatedPagesThumbnail{
    display: none;
}
#PageWrapper .RelatedPagesBlock ul.text li p {
    margin:0;
}
#PageWrapper .RelatedPagesBlock .text h3 {
    margin-top:0;
}

/* =TOC - base */

.TOC dt {
    font-weight: bold;
}
.TOC dd {
    margin-bottom: 20px;
}

/* =C2 - base */

table#comments {
    table-layout: fixed;
    max-width: 100%;
}

#PageWrapper .formbody td {
    padding: 2px;
}

#NavColumn .formbody input[type="text"],
#NavColumn .formbody textarea,
#NavColumn .formbody img {
    box-sizing: border-box;
}

#NavColumn .formbody img.captcha_img {
    margin-bottom: 10px;
}

/* remove graphical bullets in the C2 Thank you notifications section */
#notificationOptions,
#notificationOptions li {
    list-style-type: none;
}

.socializeIt,
.formbody,
.c2_invitation {
    margin-top: 12px;
    margin-bottom: 12px;
}

.googlePlusOne {
    margin-top: 8px;
    margin-bottom: 8px;
}

.with_images .othervisitors p {
    margin-left:56px;
}

.thumb_container {
    float:left;
    width:50px;
    height:50px;
    overflow:hidden;
    margin-top:3px;
}

.with_images .othervisitors .submission_thumbnail {
    width:100%;
}

.othervisitors {
    clear: both;
}

.othervisitors img {
    border: 0;
}

/* -- Grid Block -- */

.grid_block {
    table-layout: fixed;
    border-collapse: collapse;
}

.grid_block td {
    padding: 0;
}

/* -- Responsive Grid Block -- */

.mobile .responsive-row img,
.bb1mobile .responsive-row img {
    max-width: 100% !important;
    box-sizing: border-box;
}

@media only screen and (max-width: 768px) {
    .responsive-row img {
        max-width: 100% !important;
        box-sizing: border-box;
    }
}

.responsive-row,
div[class*='responsive_grid_block-'] {
    overflow: hidden;
}

div[class*='responsive_col-'] {
    float: left;
    min-height: 1px;
    box-sizing: border-box;
}

.responsive_grid_block-12 div[class*='responsive_col-'] {
    width: 8.333%;
}

.responsive_grid_block-11 div[class*='responsive_col-'] {
    width: 9.0909%;
}

.responsive_grid_block-10 div[class*='responsive_col-'] {
    width: 10%;
}

.responsive_grid_block-9 div[class*='responsive_col-'] {
    width: 11.111%;
}

.responsive_grid_block-8 div[class*='responsive_col-'] {
    width: 12.5%;
}

.responsive_grid_block-7 div[class*='responsive_col-'] {
    width: 14.285%;
}

.responsive_grid_block-6 div[class*='responsive_col-'] {
    width: 16.666%;
}

.responsive_grid_block-5 div[class*='responsive_col-'] {
    width: 20%;
}

.responsive_grid_block-4 div[class*='responsive_col-'] {
    width: 25%;
}

.responsive_grid_block-3 div[class*='responsive_col-'] {
    width: 33.333%;
}

.responsive_grid_block-2 div[class*='responsive_col-'] {
    width: 50%;
}

@media only screen and (max-width: 768px) {
    .responsive_grid_block-12 div[class*='responsive_col-'] {
        width: 16.666%;
    }

    .responsive_grid_block-12 > .responsive-row > .responsive_col-7 {
        clear: left;
    }

    .responsive_grid_block-10 div[class*='responsive_col-'] {
        width: 20%;
    }

    .responsive_grid_block-10 > .responsive-row > .responsive_col-6 {
        clear: left;
    }

    .responsive_grid_block-9 div[class*='responsive_col-'] {
        width: 33.333%;
    }

    .responsive_grid_block-9 > .responsive-row > .responsive_col-4,
    .responsive_grid_block-9 > .responsive-row > .responsive_col-7 {
        clear: left;
    }

    .responsive_grid_block-8 div[class*='responsive_col-'] {
        width: 25%;
    }

    .responsive_grid_block-8 > .responsive-row > .responsive_col-5 {
        clear: left;
    }

    .responsive_grid_block-6 div[class*='responsive_col-'] {
        width: 33.333%;
    }

    .responsive_grid_block-6 > .responsive-row > .responsive_col-4 {
        clear: left;
    }

    .responsive_grid_block-4 div[class*='responsive_col-'] {
        width: 50%;
    }

    .responsive_grid_block-4 > .responsive-row > .responsive_col-3 {
        clear: left;
    }
}

@media only screen and (max-width: 447px) {

    .responsive_grid_block-12 div[class*='responsive_col-'] {
        width: 25%;
    }

    .responsive_grid_block-12 > .responsive-row > .responsive_col-5,
    .responsive_grid_block-12 > .responsive-row > .responsive_col-9 {
        clear: left;
    }

    .responsive_grid_block-12 > .responsive-row > .responsive_col-7 {
        clear: none;
    }

    .responsive_grid_block-8 div[class*='responsive_col-'],
    .responsive_grid_block-6 div[class*='responsive_col-'] {
        width: 50%;
    }

    .responsive_grid_block-8 > .responsive-row .responsive_col-3,
    .responsive_grid_block-8 > .responsive-row .responsive_col-5,
    .responsive_grid_block-8 > .responsive-row .responsive_col-7 {
        clear: left;
    }

    .responsive_grid_block-6 > .responsive-row > .responsive_col-3,
    .responsive_grid_block-6 > .responsive-row > .responsive_col-5 {
        clear: left;
    }

    .responsive_grid_block-6 > .responsive-row > .responsive_col-4 {
        clear: none;
    }

    .responsive_grid_block-11 div[class*='responsive_col-'],
    .responsive_grid_block-10 div[class*='responsive_col-'],
    .responsive_grid_block-7 div[class*='responsive_col-'],
    .responsive_grid_block-5 div[class*='responsive_col-'],
    .responsive_grid_block-4 div[class*='responsive_col-'],
    .responsive_grid_block-3 div[class*='responsive_col-'],
    .responsive_grid_block-2 div[class*='responsive_col-'] {
        width: 100%;
    }
}

/* Responsive videos */

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0; 
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed,
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* center Facebook like and comment widgets */
#PageWrapper .fb-like,
#PageWrapper .fb-comments {
    display: block;
    text-align:center;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* =Navigation - base */

.Navigation ul {
    margin: 1em 0 2em;
    padding: 0;
    list-style: none;
}

.Navigation li {
    padding: 0;
    margin: 0;
}

#PageWrapper div.Navigation a,
.Navigation a,
#PageWrapper div.Navigation a:visited,
.Navigation a:visited {
    font-size: 20px;
    background: #eee;
    color: #888;
    padding: 5px 10px;
    text-decoration: none;
    display: block;
}

#PageWrapper div.Navigation a:hover,
.Navigation a:hover {
    background: #888;
    color: #fff;
}

/* =HorizontalNavBar - base */

#PageWrapper div.HorizontalNavBar ul.root {
    display: inline-block;
    vertical-align: top;
    *display: inline;
    *zoom: 1;
    margin: 0 auto;
    padding: 0;
    line-height: 18px;
    font-size: 16px;
}

#PageWrapper div.HorizontalNavBar ul ul {
    display: none;
    position: absolute;
    top: 27px;
    left: 1px;
    z-index: 2;
    margin: 0 0 0 -1px;
    padding: 0;
    *zoom: 1;
    background: #fff;
    width: 200px;
}

#PageWrapper div.HorizontalNavBar ul ul ul {
    top: 0;
    left: 200px;
    margin: 0 0 0 -2px;
    _top: 1px;
}

#PageWrapper div.HorizontalNavBar li {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    float: left;
    white-space: nowrap;
    border: 0;
}

#PageWrapper div.HorizontalNavBar li.li1 {
    z-index: 1;
}

#PageWrapper div.HorizontalNavBar li.hover {
    z-index: 2;
}

#PageWrapper div.HorizontalNavBar li li {
    float: none;
    white-space: normal;
    border: 1px solid #fff;
    background: #fff;
    margin-top: -1px;
}

#PageWrapper div.HorizontalNavBar span.navheader,
#PageWrapper div.HorizontalNavBar a {
    display: block;
    padding: 4px 8px;
    text-decoration: none;
    _float: left;
}

#PageWrapper div.HorizontalNavBar ul ul span.navheader,
#PageWrapper div.HorizontalNavBar ul ul a {
    _float: none;
}

#PageWrapper div.HorizontalNavBar span.navheader {
    cursor: default;
    *zoom: 1;
    position: relative;
    padding-left: 18px;
}

#PageWrapper div.HorizontalNavBar ul ul span.navheader {
    padding-left: 8px;
    padding-right: 18px;
}

#PageWrapper div.HorizontalNavBar span.navheader ins {
    display: block;
    width: 0;
    height: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    margin-top: -2px;
    left: 2px;
    border: 6px solid transparent;
    border-top-color: #000;
}

#PageWrapper div.HorizontalNavBar ul ul span.navheader ins {
    left: auto;
    top: 50%;
    right: 2px;
    margin-top: -6px;
    border: 6px solid transparent;
    border-left-color: #000;
}

#PageWrapper div.HorizontalNavBar li.hover ul,
#PageWrapper div.HorizontalNavBarCSS li:hover ul {
    display: block;
}

#PageWrapper div.HorizontalNavBar li.hover li ul,
#PageWrapper div.HorizontalNavBarCSS li:hover li ul {
    display: none;
}

#PageWrapper div.HorizontalNavBar li li.hover ul,
#PageWrapper div.HorizontalNavBarCSS li li:hover ul {
    display: block;
}

#PageWrapper div.HorizontalNavBar li li.hover li ul,
#PageWrapper div.HorizontalNavBarCSS li li:hover li ul {
    display: none;
}

#PageWrapper div.HorizontalNavBar li li li.hover ul,
#PageWrapper div.HorizontalNavBarCSS li li li:hover ul {
    display: block;
}

#PageWrapper div.HorizontalNavBar li li li.hover li ul,
#PageWrapper div.HorizontalNavBarCSS li li li:hover li ul {
    display: none;
}

#PageWrapper div.HorizontalNavBar li li li li.hover ul,
#PageWrapper div.HorizontalNavBarCSS li li li li:hover ul {
    display: block;
}

/* .wide */
#PageWrapper div.HorizontalNavBarWide ul.root {
    width: 100%;
    display: table;
}

#PageWrapper div.HorizontalNavBarWide li {
    display: table-cell;
    float: none;
    text-align: center;
}

#PageWrapper div.HorizontalNavBarWide li li {
    text-align: left;
    display: block;
}

/* alignment */
#PageWrapper div.HorizontalNavBarLeft,
#PageWrapper div.HorizontalNavBarLeft li {
    text-align: left;
}

#PageWrapper div.HorizontalNavBarCenter,
#PageWrapper div.HorizontalNavBarCenter li {
    text-align: center;
}

#PageWrapper div.HorizontalNavBarRight,
#PageWrapper div.HorizontalNavBarRight li {
    text-align: right;
}

#PageWrapper div.HorizontalNavBarCenter li li,
#PageWrapper div.HorizontalNavBarRight li li {
    text-align: left;
}

/* touch devices */
html.touch #PageWrapper div.HorizontalNavBar ul.root > li {
    z-index: 2;
}

html.touch #PageWrapper div.HorizontalNavBar ul.root > li.hover {
    z-index: 3;
}

.ResponsiveNavButton {
    display: none;
}

table#ColumnsWrapper,
table#ContentWrapper {
    border-collapse: collapse;
    width: 100%;
}

/* =SocializeIt - base */

@media only screen and (max-width: 550px) {
    .socializeIt,
    .socializeIt img,
    .socializeIt textarea {
        width: 100% !important;
    }

    .socializeIt td[rowspan="2"],
    .socializeIt td[rowspan="1"] {
        white-space: normal !important;
    }
}

/* =misc */

iframe {
    max-width: 100%;
}

.fb-like iframe {
    max-width: none !important;
}

hr {
    clear: both;
}

/* ============================== =generic ============================== */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    color: #999;
    background: #ebebeb url('sd/image-files/body.png') repeat-y center;
    font-size: 16px;
    line-height: 1.5;
    font-family: Lato, Arial, Helvetica, sans-serif;
    text-rendering: optimizeLegibility;
}

a {
    color: #aed0ed;
    text-decoration: none;
}

a:visited {
    color: #aed0ed;
}

a:focus {
    outline: 1px dotted;
}

a:active,
a:hover {
    color: #3498db;
    outline: 0;
}

a:hover {
    text-decoration: underline;
}

a img {
    border: 0;
}

hr {
    border-style: solid;
    width: 75%;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
    color: #333;
    margin: 1em 0;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

h1 {
    font-size: 150%;
}

h2 {
    font-size: 130%;
}

h3 {
    font-size: 110%;
}

h4 {
    font-size: 100%;
}

h5 {
    font-size: 100%;
}

h6 {
    font-size: 100%;
}

p {
    margin: 0.5em 0 1em;
}

/* ============================== =layout ============================== */

#PageWrapper {
    overflow: hidden;
}

#PageWrapper.legacy {
    min-width: 980px;
}

#ColumnsWrapper {
    max-width: 980px;
    margin: 0 auto;
    background: #fff;
}

.legacy #ColumnsWrapper {
    min-width: 768px;
}

#Header .Liner,
#Footer .Liner {
    padding: 1px 0;
}

#ExtraWrapper {
    display: none;
}

/* =Header */

#HeaderWrapper {
    background: #4d4d4d;
}

#Header {
    max-width: 980px;
    margin: 0 auto;
}

#Header .Liner {
    min-height: 47px;
    padding: 25px 2%;
    position: relative;
    z-index: 2;
}

#Header .WebsiteName {
    color: #fff;
    text-transform: uppercase;
    margin: 0;
    max-width: 30%;
    font-weight: bold;
    line-height: 1.3;
    letter-spacing: 1px;
}

#Header .WebsiteName { /* SiteDesigner inheritance prevention */
    font-family: Lato, Arial, Helvetica, sans-serif;
    font-size: 21px;
    font-weight: bold;
    font-style: normal;
    font-variant: normal;
    color: #FFFFFF;
    text-align: left;
    border: 0;
    margin: 0;
    padding: 0;
    background: none;
}

#Header .WebsiteName a {
    color: #fff;
}

#Header .Tagline {
    font-size: 13px;
    margin: 0;
    max-width: 30%;
}

/* =ContentColumn */

#ContentColumn {
    width: 70%;
    float: right;
}

#ContentColumn .Liner {
    padding: 61% 7% 7%;
    background: #fff url(sd/image-files/header.jpg) no-repeat;
    background-size: 100%;
    border-left: 50px solid #ebebeb;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

/* =NavColumn */

#NavColumn {
    width: 30%;
    float: left;
    font-size: 13px;
    color: #a9a9a9;
}

#NavColumn .Liner {
    padding: 10% 15%;
    background: #3498db;
}

#NavColumn h1,
#NavColumn h2,
#NavColumn h3,
#NavColumn h4,
#NavColumn h5,
#NavColumn h6 {
    color: #fff;
}

#NavColumn {
    color: #aed0ed;
}

/* =Footer */

#FooterWrapper {
    clear: both;
    background-color: #4d4d4d;
}

#Footer {
    text-align: center;
    max-width: 980px;
    margin: 0 auto;
}

#Footer .Liner {
    padding: 5%;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

#Footer p {
    font-size: 16px;
    color: #fff;
}

/* ============================== =blocks - custom styles ============================== */

/* =CalloutBox - custom */

.CalloutBox {
    background: #ebebeb;
    color: #fff;
}

#PageWrapper .CalloutBox p { /* SiteDesigner inheritance prevention */
    font-family: Lato, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-variant: normal;
    color: #808080;
}

/* =ReminderBox - custom */

.ReminderBox {
    background: #F2F2F2;
    color: #999;
}

.ReminderBox h4 {
    margin-top: 1em;
}

#PageWrapper .ReminderBox h4 { /* SiteDesigner inheritance prevention */
    font-family: Lato, Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    font-style: normal;
    font-variant: normal;
    color: #111111;
    text-align: left;
    border: 0;
    margin: 17px 0px 17px 0px;
    background: none;
}

#PageWrapper .ReminderBox p { /* SiteDesigner inheritance prevention */
    font-family: Lato, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-variant: normal;
    color: #999999;
}

/* =Navigation - custom */

.Navigation {
    margin: 2em 0;
    padding: 1px 0;
}

#PageWrapper div.Navigation a,
.Navigation a,
#PageWrapper div.Navigation a:visited,
.Navigation a:visited {
    font-size: 100%;
    background: none;
    color: #aed0ed;
    padding: 2% 0;
    text-decoration: none;
    text-transform: uppercase;
    display: block;
}

#PageWrapper div.Navigation a:hover,
.Navigation a:hover {
    background: transparent;
    color: #1c5275;
    text-decoration: underline;
}

.Navigation h3 {
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 120%;
}

/* =HorizontalNavBar - custom */

#Header .HorizontalNavBar {
    width: 70%;
        position: absolute;
        top: 25px;
        right: 0;
}

#PageWrapper div.HorizontalNavBar ul.root {
    font-size: 14px;
    text-transform: uppercase;
    padding: 4px 0 0 0;
}

#PageWrapper div.HorizontalNavBar ul ul {
    top: 40px;
    left: 1px;
    background-color: transparent;
}

#PageWrapper div.HorizontalNavBar li li {
    border: 2px solid #333;
    background: transparent;
    margin-top: -2px;
}

#PageWrapper div.HorizontalNavBar span.navheader,
#PageWrapper div.HorizontalNavBar a {
    padding-left: 25px;
    padding-right: 25px;
    margin: 0;
    color: #909090;
    line-height: 30px;
    background: #4d4d4d;
}

#PageWrapper div.HorizontalNavBar span.navheader {
    padding-left: 25px;
    padding-right: 25px;
}

#PageWrapper div.HorizontalNavBar .hover > span.navheader,
#PageWrapper div.HorizontalNavBar span.navheader:hover,
#PageWrapper div.HorizontalNavBar a:hover {
    color: #fff;
    background: #111;
}

#PageWrapper div.HorizontalNavBar span.navheader ins {
    left: 9px;
    border-top-color: #909090;
    border-width: 4px;
}

#PageWrapper div.HorizontalNavBar .hover > span.navheader ins,
#PageWrapper div.HorizontalNavBar span.navheader:hover ins {
    border-top-color: #fff;
}

#PageWrapper div.HorizontalNavBar ul ul span.navheader,
#PageWrapper div.HorizontalNavBar ul ul a {
    background: #333;
    padding-left: 8px;
    padding-right: 8px;
}

#PageWrapper div.HorizontalNavBar ul ul span.navheader ins {
    border-color: transparent;
    border-left-color: #909090;
    border-width: 4px;
}

#PageWrapper div.HorizontalNavBar ul ul .hover > span.navheader ins,
#PageWrapper div.HorizontalNavBar ul ul span.navheader:hover ins {
    border-color: transparent;
    border-left-color: #fff;
}

/* =ResponsiveNav - custom */

@media only screen and (max-width: 768px) {
    .ResponsiveNavWrapper .HorizontalNavBar {
        display: none !important;
    }

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

    .ResponsiveNavReady .ResponsiveNavWrapper:after {
        content:'';
        display:block;
        clear: both;
    }

    .ResponsiveNavReady .ResponsiveNav {
        text-align: left;
        padding-top: 40px;
        padding-bottom: 40px;
        background: #000;
        width: 100%;
        position: absolute;
        left: -100%;
        top: 0;
        z-index: 2;
        min-height: 100%;
        box-sizing: border-box;
    }

    .ResponsiveNavReady .ResponsiveNav {
        transition: left 0.5s ease;
    }

    .ResponsiveNavActive .ResponsiveNav {
        left: 0;
    }

    .ResponsiveNavActivated #PageWrapper {
        overflow: hidden;
    }

    .ResponsiveNavReady .ResponsiveNav ul {
        margin-bottom: 10px;
        padding-left: 30px;
        list-style: none;
    }

    .ResponsiveNavReady .ResponsiveNav ul ul {
        border-left: 1px solid #444;
    }

    .ResponsiveNavReady .ResponsiveNav .navheader {
        font-size: 16px;
        font-weight: normal;
        font-style: normal;
        text-align: left;
        text-transform: uppercase;
        background: transparent;
        margin: 10px 0;
        letter-spacing: 1px;
    }

    .ResponsiveNavReady .ResponsiveNav a {
        display: block;
    }

    .ResponsiveNavReady .ResponsiveNavButton {
        position: absolute;
        top: 18px;
        right: 10px;
        display: table;
        height: 45px;
        font-size: 16px;
        text-transform: uppercase;
        text-align: center;
        cursor: pointer;
        z-index: 1;
        padding: 0 0.5em;
        margin: 8px;
        line-height: 1.4;
        color: #fff;
        background: #3498db;
        border: none;
    }

    .ResponsiveNavReady .ResponsiveNavButton span {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

    .ResponsiveNavReady .ResponsiveNavButton:hover {
        color: #fff;
        background-color: #1c5275;
    }

    .ResponsiveNavActive .ResponsiveNavButton {
        position: fixed !important;
        font-size: 18px;
        width: 45px;
        padding: 0;
        z-index: 3;
        color: #fff;
        background-color: #1c5275;
    }
}

/* =FBI - custom */

#NavColumn .formbody input[type="text"],
#NavColumn .formbody textarea,
#NavColumn .formbody img {
    max-width: 155px;
}

input[type=text] {
    background-color: #f2f2f2;
}

/* =WhatsNew - custom */

#PageWrapper .WhatsNew h2 { /* SiteDesigner inheritance prevention */
    font-family: Lato, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-style: normal;
    font-variant: normal;
    color: #FFFFFF;
    border: 0;
    background: none;
}

#PageWrapper .WhatsNew h3 { /* SiteDesigner inheritance prevention */
    font-family: Lato, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    text-align: left;
    border: 0;
    margin: 13px 0 0 0;
    padding: 0;
    background: none;
}

#PageWrapper .WhatsNew a,
#PageWrapper .WhatsNew a:visited {
    color: #fff;
}

#PageWrapper .WhatsNew a:hover,
#PageWrapper .WhatsNew a:active {
    color: #1c5275;
}

.WhatsNew {
    border: none;
}

.WhatsNew,
#PageWrapper .WhatsNew ol li {
    border-color: #aed0ed;
}

#PageWrapper .WhatsNew h2 {
    color: #fff;
    font-size: 120%;
    background: transparent;
    text-align: left;
    padding-left: 0;
}

#PageWrapper .WhatsNew ol {
    margin: 0;
}

#PageWrapper .WhatsNew h3 {
    font-size: 100%;
}

.WhatsNew-time {
    color: #aed0ed;
}

#PageWrapper .WhatsNew-subscribe ul {
    background: #3498db;
}

.questionMark {
    font-size: 120%;
    text-transform: uppercase;
    font-weight: bold;
    color: #fff;
    letter-spacing: 1px;
}

/* =Ezine - custom */

.Ezine {
    padding: 6%;
    background: #f2f2f2;
}

#NavColumn .Ezine {
    color: #fff;
    background: #3498db;
    border: 1px solid #aed0ed;
}

.EzineInput input {
    width: 67%;
    padding: 10px;
    border: 1px solid #d9d9d9;
}

#NavColumn .EzineInput input {
    padding: 5px;
    border: 1px solid #aed0ed;
    background: #3498db;
}

td.EzineLabel {
    font-size: 16px;
    color: #a8a8a8;
    text-transform: uppercase;
}

#NavColumn td.EzineLabel {
    color: #fff;
}

td.EzineLabelAbove {
    text-align: center;
}

.EzineDescription {
    text-align: center;
}

.TOC dt {
    font-size: 18px;
}

/* =Ezine2 - custom */

.Ezine2 {
    padding: 4%;
    background: #f2f2f2;
    border: 0;
}

.Ezine2 label {
    font-size: 16px;
    color: #a8a8a8;
    text-transform: uppercase;
    margin: 5px;
}

.Ezine2 input[type=text],
.Ezine2 input[type=email] {
    margin: 5px;
    padding: 10px;
    border: 1px solid #d9d9d9;
    background-color: #f2f2f2;
}

.EzineButton {
    font-size: 16px;
    text-transform: uppercase;
    padding: 0.5em;
    margin: 5px;
    line-height: 1.4;
    color: #fff;
    background: #3498db;
    border: 0;
}

.EzineButton:hover {
    background-color: #1c5275;
}

#NavColumn .Ezine2 {
    color: #fff;
    background: #3498db;
    border: 1px solid #aed0ed;
}

#NavColumn .Ezine2 input[type=text],
#NavColumn .Ezine2 input[type=email] {
    padding: 5px;
    border: 1px solid #aed0ed;
    background: #3498db;
    color: #fff;
}

#NavColumn .Ezine2 label {
    color: #fff;
}

#NavColumn .EzineButton {
    background-color: #1c5275;
}

#NavColumn .EzineButton:hover {
    background-color: #aed0ed;
}

#NavColumn .Ezine2 input::-webkit-input-placeholder {
    color: #ccc;
}

#NavColumn .Ezine2 input::-moz-placeholder {
    color: #ccc;
}

#NavColumn .Ezine2 input:-ms-input-placeholder {
    color: #ccc;
}

/* ============================== =responsive ============================== */

.mobileOnly {
    display: none !important;
}

@media only screen and (max-width: 447px) {
    .desktopOnly {
        display: none !important;
    }

    .mobileOnly {
        display: block !important;
    }
}

@media only screen and (max-width: 768px) {
    .modern #NavColumn,
    .modern #ContentColumn {
        float: none;
        width: 100%;
    }

    .modern #NavColumn .Liner {
        padding: 5%;
    }

    .modern #ContentColumn .Liner {
        border-left: none;
        padding-top: 66%;
    }

    .modern #Header,
    .modern #Footer {
        width: 100%;
    }

    .modern #Header .WebsiteName {
        max-width: 100%;
    }

    .modern #Header .Tagline {
        max-width: 100%;
    }

    .modern #Footer .Liner {
        padding: 5%;
    }
}

/* =Breadcrumbs */
#PageWrapper .BreadcrumbBlock .BreadcrumbTiers {
    list-style: none;
    margin:30px 0 0;
    padding:0;
}
#PageWrapper .BreadcrumbBlock .BreadcrumbTiers .BreadcrumbItem { 
    display: inline-block;
}
#PageWrapper .BreadcrumbBlock .BreadcrumbTiers .BreadcrumbItem + .BreadcrumbItem::before {
    color: black;
    content: ">";
}
#PageWrapper .BreadcrumbBlock.BreadcrumbBlockRight .BreadcrumbTiers {
    text-align:right;
}
#PageWrapper .BreadcrumbBlock.BreadcrumbBlockLeft .BreadcrumbTiers {
    text-align:left;
}
#PageWrapper .BreadcrumbBlock.BreadcrumbBlockCenter .BreadcrumbTiers {
    text-align:center;
}

/* socialize it 3.0 */
.SocialDestinations span {
    display: none;
}
.SocialShare .socialIcon:hover {
    text-decoration: none;
}
.SocialShare .socialIcon {
    line-height: 2em;
    white-space: nowrap;
    display: inline-block;
}
#PageWrapper .SocialShare .socialIcon.twitter {
    color: #000000;
}
#PageWrapper .SocialShare .socialIcon.facebook {
    color: #3b579d;
}
#PageWrapper .SocialShare .socialIcon.pinterest {
    color: #CD1D1F;
}
#PageWrapper .SocialShare .socialIcon.tumblr {
    color: #35465c;
}
#PageWrapper .SocialShare .socialIcon.reddit {
    color: #ff4500;
}
#PageWrapper .SocialShare .socialIcon.whatsapp {
    color: #25D366;
}
#PageWrapper .SocialShare .socialIcon.messenger {
    color: #0078FF;
}
#PageWrapper .SocialShare .socialIcon.google-plus {
    color: #df4a32;
}

.SocialShare.SocialShareSticky.SocialShareStickyRightNoTranslation a, 
.SocialShare.SocialShareSticky.SocialShareStickyRight a, 
.SocialShare.SocialShareSticky.SocialShareStickyLeft a,
.SocialShare.SocialShareSticky label
{
    display: block;
}
.SocialShare.SocialShareSticky.SocialShareStickyTop a, 
.SocialShare.SocialShareSticky.SocialShareStickyBottom a,
.SocialShare.SocialShareSticky label
{
    display: inline-block;
    vertical-align: middle;
}
/* social sticky show/hide button */
.SocialShare.SocialShareSticky.SocialShareStickyRight.hidden,
.SocialShare.SocialShareSticky.SocialShareStickyRightNoTranslation.hidden {
      transform: translateY(-50%) translateX(100%);
}
.SocialShare.SocialShareSticky.SocialShareStickyLeft.hidden {
      transform: translateY(-50%) translateX(-100%);
}
.SocialShare.SocialShareSticky.SocialShareStickyTop.hidden {
      transform: translateY(-100%) translateX(-50%);
}
.SocialShare.SocialShareSticky.SocialShareStickyBottom.hidden {
      transform: translateY(100%) translateX(-50%);
}

.SocialShareSticky.SocialShareStickyRight.hidden .hideButton,
.SocialShareSticky.SocialShareStickyRightNoTranslation.hidden .hideButton 
{
    left: -35px;
    -ms-transform: rotate(0.75turn);
    transform: rotate(0.75turn);
}

.SocialShareSticky.SocialShareStickyLeft.hidden .hideButton
{
    right: -35px;
    -ms-transform: rotate(-0.75turn);
    transform: rotate(-0.75turn);
}
.SocialShareSticky.SocialShareStickyTop.hidden .hideButton
{
    top: 30px;
    -ms-transform: rotate(0.5turn);
    transform: rotate(0.5turn);
}
.SocialShareSticky.SocialShareStickyBottom.hidden .hideButton
{
    bottom: 30px;
    -ms-transform: rotate(1turn);
    transform: rotate(1turn);
}
.SocialShareSticky .hideButton {
    cursor: pointer; 
    border: 0; 
    position: absolute; 
    right: 0px;
    width: 51px; 
    height: 51px; 
    padding: 20px; 
}
.SocialShareStickyRight .hideButton,
.SocialShareStickyRightNoTranslation .hideButton {
    -ms-transform: rotate(0.25turn);
    transform: rotate(0.25turn);
}
.SocialShareStickyLeft .hideButton {
    -ms-transform: rotate(-0.25turn);
    transform: rotate(-0.25turn);
}
.SocialShareSticky.SocialShareStickyTop .hideButton {
    right:-47px;
    top:0;
}
.SocialShareSticky.SocialShareStickyBottom .hideButton {
    right:-47px;
    bottom:0;
    -ms-transform: rotate(0.50turn);
    transform: rotate(0.50turn);
}
.SocialShareSticky {
    position: fixed;
    right: 0;
    top: 50%;
    padding: 5px;
    z-index: 9999;
    background: #fff;
    text-align:center;
}
.SocialShare.SocialShareMini span, .SocialShare.SocialShareSticky span{
    display: none;
}
.SocialShareSticky.SocialShareStickyRightNoTranslation {
    right:0;
    left: auto;
    top: 25%;
    border-radius: 5px 0 0 5px;
    border-right: none !important;
}
.SocialShareSticky.SocialShareStickyRight {
    right:0;
    left: auto;
    border-radius: 5px 0 0 5px;
    transform: translateY(-50%);
    border-right: none !important;
}
.SocialShareSticky.SocialShareStickyTop {
    right:auto;
    left: 50%;
    top:0;
    border-radius: 0 0 5px 5px;
    transform: translateX(-50%);
    border-top: none !important;
}
.SocialShareSticky.SocialShareStickyBottom {
    right:auto;
    left: 50%;
    bottom:0;
    top: auto;
    border-radius: 5px 5px 0 0;
    transform: translateX(-50%);
    border-bottom: none !important;
}
.SocialShareSticky.SocialShareStickyLeft {
    left:0;
    right: auto;
    border-radius: 0 5px 5px 0;
    transform: translateY(-50%);
    border-left: none !important;
}
.socialize-pay-it-forward-wrapper {
    padding:0.5em;
    margin:2px;
}
.socialize-pay-it-forward-wrapper details {
    text-align:left;
}
.socialize-pay-it-forward-wrapper summary {
    cursor:pointer;
    text-align:center;
    outline:none;
    list-style:none;
    text-decoration: none;
}
.socialize-pay-it-forward-wrapper summary:hover {
    text-decoration: underline;
}
.socialize-pay-it-forward-wrapper summary::-webkit-details-marker {
    display:none;
}
.socialIcon svg {
    margin-left: 3px;
    margin-right: 3px;
    height: 2em;
    width: 2em;
    display: inline-block;
    vertical-align: middle;
}

/* FAQ and Accordion block */
.FAQContainer {
    padding: 20px 0;
}
.FAQContainer .AccordionContainer summary {
    font-size: 22px;
    margin-top: 0;
    padding: 10px 0;
    list-style: none;
}
.FAQContainer .AccordionContainer summary .AccordionHeader {
    cursor: pointer;
}
.FAQContainer .AccordionContainer summary::-webkit-details-marker {
    display: none;
}
.FAQContainer .AccordionContainer summary .AccordionHeader:before {
    content: "\25BA";
    float: left;
    margin-right: 5px;
    font-size: 0.7em;
    line-height: 2em;
}
.FAQContainer .AccordionContainer[open] .AccordionHeader:before {
    content: "\25BC";
}
.FAQContainer.disabled .AccordionContainer summary .AccordionHeader:before {
    display: none;
}
.FAQContainer .AccordionContainer summary .AccordionHeader p {
    display: block;
    margin: 0;
    padding: 0;
}

.FAQContainer.disabled .AccordionContainer summary::marker {
    content: '';
    display: block;
}
.FAQContainer.disabled .AccordionContainer summary {
    pointer-events: none;
}

/* submission block fix - #42174*/
@media (max-width: 768px) {
    .imagePreview img {
        height: auto;
    }
}

/* BEGIN = YT Facade - #43415 */
.YtFacade {
    position: relative;
}
.YtFacade iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.YtFacade img {
    width: 100%;
    height: 100%;
    z-index: 2;
    object-fit: cover;
}
.YtFacade svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 48px;
    margin-top: -24px;
    margin-left: -34px;
    z-index: 3;
}
.YtFacadeButton {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    cursor: pointer;
}
/* END = YT Facade - #43415 */

/* BEGIN = WhatsNew layout fixes - #43571 */
#PageWrapper .WhatsNew-subscribe ul {
    padding: 4px;
}
#PageWrapper .WhatsNew-subscribe ul img {
    margin: 4px;
}
/* END = WhatsNew layout fixes - #43571 */

/* BEGIN = YT Facade mobile fix - #43731 */
.YtFacade {
    max-width: 100%;
}
@media (max-width: 768px) {
    .YtFacade {
        height: auto !important;
        aspect-ratio: 16 / 9;
    }
}
/* END = YT Facade mobile fix - #43731 */
/* =styles-combo.css temp= */

/***** C2 styles *****/
.c2Form {
padding:8px;
border:1px solid #ddd;
}

.c2Form input[type=text] {
max-width: 100%;
}

@media only screen and (max-width: 440px) {
.c2Form table,
.c2Form tr,
.c2Form tbody,
.c2Form td {
display: block;
}
.c2Form table p {
text-align: left !important;
}
.otherText {
display: block;
}
}

.InvShelp {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #ffc;
}

.InvShelpT {
background:#ddd;
padding:0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin:0px;
padding:0px;
text-align:left;
}

a:link.InvShelp {text-decoration:none; color:#000;}

.InvShelpbox {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #ffc;
padding: 2px;
border: 1px solid #666;
}

.InvSquestions {
font-weight:bold;
font-size:14px;
margin:0;
}

.titleInput {
width:80%;
padding-top:4px;
margin:0;
}

.storyInput {
width:98%;
padding-top:4px;
margin:0;
}

.otherText {
}

.dividerRule {
border-top:1px solid #ddd;
}

/***** Blog It! styles *****/

.blogItItem .blogItThumbnail {
float: left;
margin-right: 10px;
margin-bottom: 10px;
max-width: 150px;
}

.blogItItem .blogItReadMore {
clear: both;
}

/* additional styles */

/***********************************************/
/* Customizations from SiteDesigner start here */
/***********************************************/

/* font Lato definition */
@font-face {
    font-family: Lato;
    font-display: fallback;
    src: url('css_webfonts/lato-webfont.eot');
    src: url('css_webfonts/lato-webfont.eot?iefix') format('eot'),
         url('css_webfonts/lato-webfont.woff') format('woff'),
         url('css_webfonts/lato-webfont.ttf') format('truetype'),
         url('css_webfonts/lato-webfont.svg#latoregular') format('svg');
    font-weight: normal;
    font-style: normal;
} 

/* font Lato bold definition */
@font-face {
    font-family: Lato;
    font-display: fallback;
    src: url('css_webfonts/lato-bold-webfont.eot');
    src: url('css_webfonts/lato-bold-webfont.eot?iefix') format('eot'),
         url('css_webfonts/lato-bold-webfont.woff') format('woff'),
         url('css_webfonts/lato-bold-webfont.ttf') format('truetype'),
         url('css_webfonts/lato-bold-webfont.svg#latobold') format('svg');
    font-weight: bold;
        font-style: normal;
} 

/* font Lato italic definition */
@font-face {
    font-family: Lato;
    font-display: fallback;
    src: url('css_webfonts/lato-italic-webfont.eot');
    src: url('css_webfonts/lato-italic-webfont.eot?iefix') format('eot'),
         url('css_webfonts/lato-italic-webfont.woff') format('woff'),
         url('css_webfonts/lato-italic-webfont.ttf') format('truetype'),
         url('css_webfonts/lato-italic-webfont.svg#latoitalic') format('svg');
    font-weight: normal;
        font-style: italic;
} 

/* font Lato bold-italic definition */
@font-face {
    font-family: Lato;
    font-display: fallback;
    src: url('css_webfonts/lato-bold-italic-webfont.eot');
    src: url('css_webfonts/lato-bold-italic-webfont.eot?iefix') format('eot'),
         url('css_webfonts/lato-bold-italic-webfont.woff') format('woff'),
         url('css_webfonts/lato-bold-italic-webfont.ttf') format('truetype'),
         url('css_webfonts/lato-bold-italic-webfont.svg#latobold_italic') format('svg');
    font-weight: bold;
        font-style: italic;
} 
/* regular */body, html.mobile body {
	background-color : #e2dbd4;
	background-image : none;
	background-repeat : repeat;
	color : #4d4d4d;
	font-family : Lato, Arial, Helvetica, sans-serif;
}
#PageWrapper #Footer .Liner p, html.mobile #PageWrapper #Footer .Liner p {
	color : #2b2b2b;
	font-family : Arial, Helvetica;
	font-size : 17px;
	text-align : left;
	text-transform : none;
}
body, html.mobile body {
	background-color : #e2dbd4;
	background-image : none;
	background-repeat : repeat;
	color : #4d4d4d;
	font-family : Lato, Arial, Helvetica, sans-serif;
}
#PageWrapper #Footer .Liner p, html.mobile #PageWrapper #Footer .Liner p {
	color : #2b2b2b;
	font-family : Arial, Helvetica;
	font-size : 17px;
	text-align : left;
	text-transform : none;
}
#PageWrapper #NavColumn .Liner, html.mobile #PageWrapper #NavColumn .Liner {
	background-color : #f5eee8;
	background-image : none;
	color : #4d4d4d;
	font-size : 18px;
}
#PageWrapper #ContentColumn .Liner, html.mobile #PageWrapper #ContentColumn .Liner {
	background-color : transparent;
}
#PageWrapper #ContentColumn , html.mobile #PageWrapper #ContentColumn  {
	font-size : 24px;
}
#PageWrapper, html.mobile #PageWrapper {
	background-color : #ffffff;
	background-image : none;
}
#PageWrapper h1, html.mobile #PageWrapper h1 {
	color : #594d4e;
	font-size : 40px;
	font-style : normal;
	font-weight : normal;
	letter-spacing : -1px;
	line-height : 48px;
	margin-bottom : 35px;
	text-transform : none;
}
#PageWrapper h2, html.mobile #PageWrapper h2 {
	color : #594d4e;
	font-size : 32px;
	font-weight : normal;
	letter-spacing : 0px;
	text-transform : none;
}
#PageWrapper h3, html.mobile #PageWrapper h3 {
	color : #594d4e;
	font-size : 28px;
	font-weight : normal;
	letter-spacing : 0px;
	text-align : left;
	text-transform : none;
}
#PageWrapper h4, html.mobile #PageWrapper h4 {
	color : #333333;
	font-size : 21px;
	font-weight : normal;
	letter-spacing : 0px;
	text-transform : none;
}
#PageWrapper #Header .HorizontalNavBar, html.mobile #PageWrapper #Header .HorizontalNavBar {
	border-bottom-width : 0;
	border-color : rgb(255, 255, 255);
	border-left-width : 0;
	border-right-width : 0;
	border-style : solid;
	border-top-width : 0;
}
#PageWrapper div.HorizontalNavBar ul a, html.mobile #PageWrapper div.HorizontalNavBar ul a {
	font-family : Arial, Helvetica;
	font-size : 20px;
	font-weight : normal;
	text-transform : none;
}
#PageWrapper div.HorizontalNavBar ul a:link, html.mobile #PageWrapper div.HorizontalNavBar ul a:link {
	background-color : transparent;
	color : #000000;
}
#PageWrapper div.HorizontalNavBar ul a:visited, html.mobile #PageWrapper div.HorizontalNavBar ul a:visited {
	color : #000000;
}
#PageWrapper div.HorizontalNavBar ul a:hover, html.mobile #PageWrapper div.HorizontalNavBar ul a:hover {
	background-color : transparent;
	color : #f5e8de;
}
#PageWrapper div.HorizontalNavBar ul span.navheader, html.mobile #PageWrapper div.HorizontalNavBar ul span.navheader {
	background-color : transparent;
	color : #000000;
	font-family : Arial, Helvetica;
	font-size : 20px;
	font-weight : normal;
	text-transform : none;
}
#PageWrapper div.HorizontalNavBar ul span.navheader:hover, #PageWrapper div.HorizontalNavBar li:hover > span.navheader, #PageWrapper div.HorizontalNavBar .hover > span.navheader, html.mobile #PageWrapper div.HorizontalNavBar ul span.navheader:hover, #PageWrapper div.HorizontalNavBar li:hover > span.navheader, #PageWrapper div.HorizontalNavBar .hover > span.navheader {
	background-color : transparent;
	color : #f5e8de;
}
#PageWrapper div.HorizontalNavBar ul span.navheader ins, html.mobile #PageWrapper div.HorizontalNavBar ul span.navheader ins {
	border-bottom-color : transparent;
	border-left-color : transparent;
	border-right-color : transparent;
}
#PageWrapper div.HorizontalNavBar ul span.navheader:hover ins, #PageWrapper div.HorizontalNavBar ul li:hover > span.navheader ins, #PageWrapper div.HorizontalNavBar ul .hover > span.navheader ins, html.mobile #PageWrapper div.HorizontalNavBar ul span.navheader:hover ins, #PageWrapper div.HorizontalNavBar ul li:hover > span.navheader ins, #PageWrapper div.HorizontalNavBar ul .hover > span.navheader ins {
	border-bottom-color : transparent;
	border-left-color : transparent;
	border-right-color : transparent;
}
#PageWrapper div.HorizontalNavBar .li1 .li2, html.mobile #PageWrapper div.HorizontalNavBar .li1 .li2 {
	border-bottom-width : 0;
	border-color : rgb(51, 51, 51);
	border-left-width : 0;
	border-right-width : 0;
	border-style : solid;
	border-top-width : 0;
}
#PageWrapper div.HorizontalNavBar .li1 .li2 .li3, html.mobile #PageWrapper div.HorizontalNavBar .li1 .li2 .li3 {
	border-bottom-width : 0;
	border-color : rgb(51, 51, 51);
	border-left-width : 0;
	border-right-width : 0;
	border-style : solid;
	border-top-width : 0;
}
#PageWrapper div.HorizontalNavBar ul ul a, html.mobile #PageWrapper div.HorizontalNavBar ul ul a {
	font-family : Arial, Helvetica;
	font-size : 14px;
	font-weight : normal;
	padding-right : undefinedpx;
}
#PageWrapper div.HorizontalNavBar ul ul a:link, html.mobile #PageWrapper div.HorizontalNavBar ul ul a:link {
	background-color : transparent;
	color : #000000;
}
#PageWrapper div.HorizontalNavBar ul ul a:visited, html.mobile #PageWrapper div.HorizontalNavBar ul ul a:visited {
	color : #000000;
}
#PageWrapper div.HorizontalNavBar ul ul a:hover, html.mobile #PageWrapper div.HorizontalNavBar ul ul a:hover {
	background-color : transparent;
	color : #c5181e;
}
#PageWrapper div.HorizontalNavBar ul ul span.navheader, #PageWrapper div.HorizontalNavBar ul ul .hover > span.navheader, html.mobile #PageWrapper div.HorizontalNavBar ul ul span.navheader, #PageWrapper div.HorizontalNavBar ul ul .hover > span.navheader {
	background-color : transparent;
	color : #000000;
	font-family : Arial, Helvetica;
	font-size : 14px;
	font-weight : normal;
	padding-right : undefinedpx;
}
#PageWrapper div.HorizontalNavBar ul ul span.navheader:hover, #PageWrapper div.HorizontalNavBar ul ul li:hover > span.navheader, html.mobile #PageWrapper div.HorizontalNavBar ul ul span.navheader:hover, #PageWrapper div.HorizontalNavBar ul ul li:hover > span.navheader {
	background-color : transparent;
	color : #c5181e;
}
#PageWrapper div.HorizontalNavBar ul ul span.navheader ins, html.mobile #PageWrapper div.HorizontalNavBar ul ul span.navheader ins {
	border-bottom-color : #222222;
	border-left-color : #222222;
	border-right-color : #222222;
	border-top-color : #222222;
	border-width : 0px;
	margin-top : 0px;
}
#PageWrapper div.HorizontalNavBar ul ul span.navheader:hover ins, html.mobile #PageWrapper div.HorizontalNavBar ul ul span.navheader:hover ins {
	border-bottom-color : transparent;
	border-right-color : transparent;
	border-top-color : transparent;
}
#PageWrapper .RSSbox .questionMark, html.mobile #PageWrapper .RSSbox .questionMark {
	color : #594d4e;
	font-size : 15px;
}
#PageWrapper .ImageBlock, html.mobile #PageWrapper .ImageBlock {
	margin-top : 10px;
}
#PageWrapper .ImageBlockRight, html.mobile #PageWrapper .ImageBlockRight {
	margin-left : 10px;
}
#PageWrapper .ImageBlockLeft, html.mobile #PageWrapper .ImageBlockLeft {
	margin-right : 10px;
}
#PageWrapper .CalloutBox p, html.mobile #PageWrapper .CalloutBox p {
	color : #242424;
	font-family : Lato, Arial, Helvetica, sans-serif;
	font-size : 21px;
}
#PageWrapper .CalloutBox, html.mobile #PageWrapper .CalloutBox {
	background-color : #ede6e0;
	border-bottom-left-radius : 12px;
	border-bottom-right-radius : 12px;
	border-bottom-width : 0;
	border-color : #d6cdc4;
	border-left-width : 0;
	border-right-width : 0;
	border-style : solid;
	border-top-left-radius : 12px;
	border-top-right-radius : 12px;
	border-top-width : 0;
	color : #242424;
	font-size : 21px;
	padding-bottom : 10px;
	padding-left : 5%;
	padding-right : 5%;
	padding-top : 10px;
}
#PageWrapper .ReminderBox, html.mobile #PageWrapper .ReminderBox {
	background-color : #a22e2a;
	border-bottom-left-radius : 4px;
	border-bottom-right-radius : 4px;
	border-top-left-radius : 4px;
	border-top-right-radius : 4px;
	padding-bottom : 10px;
	padding-left : 5%;
	padding-right : 5%;
	padding-top : 10px;
}
#PageWrapper .ReminderBox h4, html.mobile #PageWrapper .ReminderBox h4 {
	color : #ffffff;
	font-family : Lato, Arial, Helvetica, sans-serif;
	font-size : 20px;
	letter-spacing : 0px;
	text-transform : none;
}
#PageWrapper .ReminderBox ul, html.mobile #PageWrapper .ReminderBox ul {
	color : #ffffff;
	font-family : Lato, Arial, Helvetica, sans-serif;
	font-size : 18px;
}
#PageWrapper .ReminderBox ol, html.mobile #PageWrapper .ReminderBox ol {
	color : #ffffff;
	font-family : Lato, Arial, Helvetica, sans-serif;
	font-size : 18px;
}
#PageWrapper .ReminderBox p, html.mobile #PageWrapper .ReminderBox p {
	color : #ffffff;
	font-family : Lato, Arial, Helvetica, sans-serif;
	font-size : 18px;
}
#ContentColumn a, html.mobile #ContentColumn a {
	font-weight : normal;
	text-decoration : underline;
}
#ContentColumn a:not([data-pin-href]):link, html.mobile #ContentColumn a:not([data-pin-href]):link {
	color : #045db5;
}
#ContentColumn a:visited, html.mobile #ContentColumn a:visited {
	color : #045db5;
}
#ContentColumn a:not([data-pin-href]):hover, html.mobile #ContentColumn a:not([data-pin-href]):hover {
	color : #c5181e;
}
#PageWrapper #Footer a, html.mobile #PageWrapper #Footer a {
	font-weight : bold;
	text-decoration : none;
}
#PageWrapper #Footer a:link, html.mobile #PageWrapper #Footer a:link {
	color : #c5181e;
}
#PageWrapper #Footer a:visited, html.mobile #PageWrapper #Footer a:visited {
	color : #c5181e;
}
#PageWrapper #Footer a:hover, html.mobile #PageWrapper #Footer a:hover {
	color : #c5181e;
	text-decoration : underline;
}
#NavColumn a, html.mobile #NavColumn a {
	font-weight : normal;
	text-decoration : underline;
}
#NavColumn a:link, html.mobile #NavColumn a:link {
	color : #045db5;
}
#NavColumn a:visited, html.mobile #NavColumn a:visited {
	color : #045db5;
}
#NavColumn a:hover, html.mobile #NavColumn a:hover {
	color : #c5181e;
	font-weight : normal;
}
#PageWrapper .ReminderBox a:link, html.mobile #PageWrapper .ReminderBox a:link {
	color : #ffffff;
}
#PageWrapper .ReminderBox a:visited, html.mobile #PageWrapper .ReminderBox a:visited {
	color : #ffffff;
}
#PageWrapper .ReminderBox a:hover, html.mobile #PageWrapper .ReminderBox a:hover {
	color : #ffffff;
}
hr, html.mobile hr {
	background-color : #d6cdc4;
	color : #d6cdc4;
}
#PageWrapper .WhatsNew, html.mobile #PageWrapper .WhatsNew {
	border-bottom-left-radius : 10px;
	border-bottom-right-radius : 10px;
	border-bottom-width : 1px;
	border-color : #bdb3aa;
	border-left-width : 1px;
	border-right-width : 1px;
	border-style : solid;
	border-top-left-radius : 10px;
	border-top-right-radius : 10px;
	border-top-width : 1px;
}
#PageWrapper .WhatsNew h2, html.mobile #PageWrapper .WhatsNew h2 {
	background-color : #f6f3f0;
	color : #594d4e;
	font-family : Arial, Helvetica;
	font-size : 28px;
	font-weight : bold;
	letter-spacing : 0px;
	text-align : left;
	text-transform : none;
}
#PageWrapper .WhatsNew .WhatsNew-time, html.mobile #PageWrapper .WhatsNew .WhatsNew-time {
	color : #9c9c9c;
	font-size : 11px;
}
#PageWrapper .WhatsNew .WhatsNew-content, html.mobile #PageWrapper .WhatsNew .WhatsNew-content {
	text-align : left;
}
#PageWrapper .WhatsNew h3 a, html.mobile #PageWrapper .WhatsNew h3 a {
	font-weight : bold;
	text-decoration : underline;
}
#PageWrapper .responsive-row div[class*="responsive_col-"], html.mobile #PageWrapper .responsive-row div[class*="responsive_col-"] {
	box-sizing : border-box;
	padding-bottom : 1px;
	padding-left : 10px;
	padding-right : 10px;
	padding-top : 1px;
}
#PageWrapper .WhatsNew h3 a:link, html.mobile #PageWrapper .WhatsNew h3 a:link {
	color : #045db5;
}
#PageWrapper .WhatsNew h3 a:visited, html.mobile #PageWrapper .WhatsNew h3 a:visited {
	color : #045db5;
}
#PageWrapper .WhatsNew h3 a:hover, html.mobile #PageWrapper .WhatsNew h3 a:hover {
	color : #c5181e;
	font-weight : bold;
}
#PageWrapper .WhatsNew ol li, html.mobile #PageWrapper .WhatsNew ol li {
	border-top-color : #cccccc;
}
#PageWrapper .WhatsNew h3, html.mobile #PageWrapper .WhatsNew h3 {
	font-family : Lato, Arial, Helvetica, sans-serif;
	font-size : 17px;
	letter-spacing : 0px;
	text-align : left;
	text-transform : none;
}
#PageWrapper .WhatsNew .WhatsNew-more a, html.mobile #PageWrapper .WhatsNew .WhatsNew-more a {
	color : #ffffff;
	font-weight : normal;
	text-decoration : underline;
}
#PageWrapper .WhatsNew .WhatsNew-more a:link, html.mobile #PageWrapper .WhatsNew .WhatsNew-more a:link {
	color : #ffffff;
	font-weight : normal;
	text-decoration : underline;
}
#PageWrapper .WhatsNew .WhatsNew-more a:visited, html.mobile #PageWrapper .WhatsNew .WhatsNew-more a:visited {
	color : #c92d2e;
}
#PageWrapper .WhatsNew .WhatsNew-more a:hover, html.mobile #PageWrapper .WhatsNew .WhatsNew-more a:hover {
	color : #000000;
}
#PageWrapper .WhatsNew h2 a, html.mobile #PageWrapper .WhatsNew h2 a {
	font-weight : bold;
	text-decoration : underline;
}
#PageWrapper .WhatsNew h2 a:link, html.mobile #PageWrapper .WhatsNew h2 a:link {
	color : #045db5;
}
#PageWrapper .WhatsNew h2 a:visited, html.mobile #PageWrapper .WhatsNew h2 a:visited {
	color : #045db5;
}
#PageWrapper .WhatsNew h2 a:hover, html.mobile #PageWrapper .WhatsNew h2 a:hover {
	color : #c5181e;
}
#PageWrapper #HeaderWrapper, html.mobile #PageWrapper #HeaderWrapper {
	background-color : #f5eee8;
	background-image : none;
	background-position : 50% 0%;
	background-repeat : repeat-x;
	background-size : auto 100%;
}
#PageWrapper #FooterWrapper, html.mobile #PageWrapper #FooterWrapper {
	background-color : transparent;
}
#PageWrapper .Caption, html.mobile #PageWrapper .Caption {
	font-size : 14px;
}
#PageWrapper .ImageBlock a:hover span, html.mobile #PageWrapper .ImageBlock a:hover span {
	color : #c5181e;
}
body #PageWrapper .Ezine2 .EzineRow label, html.mobile body #PageWrapper .Ezine2 .EzineRow label {
	font-family : Arial, Helvetica;
}
body #PageWrapper .Ezine2 .EzineRow input[type=text], html.mobile body #PageWrapper .Ezine2 .EzineRow input[type=text] {
	font-family : Arial, Helvetica;
}
body #PageWrapper .Ezine2 .EzineRow input[type=email], html.mobile body #PageWrapper .Ezine2 .EzineRow input[type=email] {
	font-family : Arial, Helvetica;
}
body .eucookiebar, html.mobile body .eucookiebar {
	background-color : #a22e2a;
}
body .eucookiebar p, html.mobile body .eucookiebar p {
	font-family : Arial, Helvetica;
}
#PageWrapper .BreadcrumbBlock .BreadcrumbTiers .BreadcrumbItem + .BreadcrumbItem::before, html.mobile #PageWrapper .BreadcrumbBlock .BreadcrumbTiers .BreadcrumbItem + .BreadcrumbItem::before {
	color : #ada9a5;
	content : ">";
	margin-left : 2px;
	margin-right : 5px;
}
#PageWrapper .BreadcrumbBlock .BreadcrumbTiers .BreadcrumbItem, html.mobile #PageWrapper .BreadcrumbBlock .BreadcrumbTiers .BreadcrumbItem {
	font-size : 14px;
	font-style : normal;
}
body #PageWrapper .SocialShareRegular, html.mobile body #PageWrapper .SocialShareRegular {
	text-align : center;
}
body #PageWrapper .SocialShareRegular a span, html.mobile body #PageWrapper .SocialShareRegular a span {
	color : #333333;
}
body #PageWrapper .SocialShare.SocialShareMini, html.mobile body #PageWrapper .SocialShare.SocialShareMini {
	text-align : center;
}
body #PageWrapper .SocialShare.SocialShareMini a:link, html.mobile body #PageWrapper .SocialShare.SocialShareMini a:link {
	color : #333333;
}
#PageWrapper .FAQContainer .AccordionContainer summary, html.mobile #PageWrapper .FAQContainer .AccordionContainer summary {
	background-color : #f5eee8;
	border-bottom-width : 0;
	border-color : #d9c7b9;
	border-left-width : 1px;
	border-right-width : 1px;
	border-style : solid;
	border-top-width : 1px;
}
#PageWrapper .FAQContainer .AccordionContainer .AccordionContent, html.mobile #PageWrapper .FAQContainer .AccordionContainer .AccordionContent {
	background-color : #ffffff;
}

/* mobile */
/* media queries */@media (max-width:768px) {#PageWrapper #Footer .Liner p {
	font-size : 16px;
}
#PageWrapper #Footer .Liner p {
	font-size : 16px;
}
#PageWrapper h1 {
	font-size : 34px;
}
#PageWrapper h2 {
	font-size : 30px;
}
#PageWrapper h4 {
	font-size : 22px;
}
}@media (max-width:447px) {#PageWrapper h1 {
	font-size : 27px;
}
#PageWrapper h2 {
	font-size : 25px;
}
#PageWrapper h3 {
	font-size : 22px;
}
#PageWrapper h4 {
	font-size : 19px;
}
}.Navigation h3, html.mobile .Navigation h3{font-weight:normal;
}html.mobile .Navigation h3{
}@media (max-width:768px) {.Navigation h3{
}}@media (max-width:447px) {.Navigation h3{
}}#PageWrapper .Navigation h3, html.mobile #PageWrapper .Navigation h3{font-weight:normal;
}html.mobile #PageWrapper .Navigation h3{
}@media (max-width:768px) {#PageWrapper .Navigation h3{
}}@media (max-width:447px) {#PageWrapper .Navigation h3{
}}body #PageWrapper div.Navigation h3, html.mobile body #PageWrapper div.Navigation h3{font-weight:normal;
}html.mobile body #PageWrapper div.Navigation h3{
}@media (max-width:768px) {body #PageWrapper div.Navigation h3{
}}@media (max-width:447px) {body #PageWrapper div.Navigation h3{
}}.Navigation a, html.mobile .Navigation a{text-transform:none;font-weight:bold;font-size:16px;font-family:Arial, Helvetica;font-family:Arial, Helvetica;
}html.mobile .Navigation a{
}@media (max-width:768px) {.Navigation a{
}}@media (max-width:447px) {.Navigation a{
}}#PageWrapper div.Navigation a, html.mobile #PageWrapper div.Navigation a{text-transform:none;font-weight:bold;font-size:16px;font-family:Arial, Helvetica;font-family:Arial, Helvetica;
}html.mobile #PageWrapper div.Navigation a{
}@media (max-width:768px) {#PageWrapper div.Navigation a{
}}@media (max-width:447px) {#PageWrapper div.Navigation a{
}}.Navigation a,
#PageWrapper div.Navigation a {}
html.mobile .Navigation a,
html.mobile #PageWrapper div.Navigation a {}.Navigation a:link, html.mobile .Navigation a:link{color:#c5181e;
}html.mobile .Navigation a:link{
}@media (max-width:768px) {.Navigation a:link{
}}@media (max-width:447px) {.Navigation a:link{
}}#PageWrapper div.Navigation a:link, html.mobile #PageWrapper div.Navigation a:link{color:#c5181e;
}html.mobile #PageWrapper div.Navigation a:link{
}@media (max-width:768px) {#PageWrapper div.Navigation a:link{
}}@media (max-width:447px) {#PageWrapper div.Navigation a:link{
}}.Navigation a:visited, html.mobile .Navigation a:visited{color:#c5181e;
}html.mobile .Navigation a:visited{
}@media (max-width:768px) {.Navigation a:visited{
}}@media (max-width:447px) {.Navigation a:visited{
}}#PageWrapper div.Navigation a:visited, html.mobile #PageWrapper div.Navigation a:visited{color:#c5181e;
}html.mobile #PageWrapper div.Navigation a:visited{
}@media (max-width:768px) {#PageWrapper div.Navigation a:visited{
}}@media (max-width:447px) {#PageWrapper div.Navigation a:visited{
}}.Navigation a:hover, html.mobile .Navigation a:hover{color:#000000;text-decoration:none;
}html.mobile .Navigation a:hover{
}@media (max-width:768px) {.Navigation a:hover{
}}@media (max-width:447px) {.Navigation a:hover{
}}#PageWrapper div.Navigation a:hover, html.mobile #PageWrapper div.Navigation a:hover{color:#000000;text-decoration:none;
}html.mobile #PageWrapper div.Navigation a:hover{
}@media (max-width:768px) {#PageWrapper div.Navigation a:hover{
}}@media (max-width:447px) {#PageWrapper div.Navigation a:hover{
}}
#PageWrapper .Ezine {
padding: 4px 0;
}
/* footer css */
/* font AgendaRegular definition */
@font-face {
    font-family: AgendaRegular;
    font-display: fallback;
    src: url('css_webfonts/agenda-webfont.eot');
    src: url('css_webfonts/agenda-webfont.eot?iefix') format('eot'),
         url('css_webfonts/agenda-webfont.woff') format('woff'),
         url('css_webfonts/agenda-webfont.ttf') format('truetype'),
         url('css_webfonts/agenda-webfont.svg#webfont6mJSzLPU') format('svg');
    font-weight: normal;
    font-style: normal;
} 
.page_footer_container {
    width:100%; max-width: 500px;
    margin: 12px auto;
}

.page_footer_content {
    width: 100%;
    text-align:center;background-color:#FFFFFF;}

.page_footer_liner {
    padding: 12px;	
}

.page_footer_divider_above {
    margin: 0 auto;}

.page_footer_divider_below {
    margin: 0 auto;}

.page_footer_text,
.page_footer_text a {
    font-family:AgendaRegular,'Lucida Sans Unicode', 'Lucida Grande', sans-serif;font-size:10px;color:#000066;text-align:center;padding: 12px 0;
}

.powered_by_sbi_banner{
    width:100%; 
    max-width: 500px;
    margin: 0 auto;
    text-align: center;	
}/* footer css */
/* Advanced CSS provided by user *//* --- FONTS --- */

@font-face {
font-display: swap;
font-family: 'Meow Script';
font-style: normal;
font-weight: 400;
src: url('https://www.quick-german-recipes.com/support-files/meow-script-v5-latin-regular.woff2') format('woff2');
}

@font-face {
font-display: swap;
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 400;
src: url('https://www.quick-german-recipes.com/support-files/source-serif-4-v8-latin-regular.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Source Serif 4';
font-style: italic;
font-weight: 400;
src: url('https://www.quick-german-recipes.com/support-files/source-serif-4-v8-latin-italic.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 700;
src: url('https://www.quick-german-recipes.com/support-files/source-serif-4-v8-latin-700.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Source Serif 4';
font-style: italic;
font-weight: 700;
src: url('https://www.quick-german-recipes.com/support-files/source-serif-4-v8-latin-700italic.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Figtree';
font-style: normal;
font-weight: 400;
src: url('https://www.quick-german-recipes.com/support-files/figtree-v6-latin-regular.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Figtree';
font-style: italic;
font-weight: 400;
src: url('https://www.quick-german-recipes.com/support-files/figtree-v6-latin-italic.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Figtree';
font-style: normal;
font-weight: 700;
src: url('https://www.quick-german-recipes.com/support-files/figtree-v6-latin-700.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Figtree';
font-style: italic;
font-weight: 700;
src: url('https://www.quick-german-recipes.com/support-files/figtree-v6-latin-700italic.woff2') format('woff2');
}

/* --- TYPOGRAPHY --- */

body {
font-family: 'Figtree', Arial, sans-serif;
line-height: 1.6;
color: #222;
}

p {
margin: 1em 0;
}

ul li,
ol li {
margin-top: 15px;
margin-bottom: 15px;
line-height: 1.5;
}

h1, h2, h3, h4,
#PageWrapper h1,
#PageWrapper h2,
#PageWrapper h3,
#PageWrapper h4,
#PageWrapper .ReminderBox h2,
#PageWrapper .ReminderBox h3,
#PageWrapper .ReminderBox h4,
#PageWrapper .CalloutBox h2,
#PageWrapper .CalloutBox h3,
#PageWrapper .CalloutBox h4,
#PageWrapper .WhatsNew h2 {
font-family: 'Source Serif 4', Georgia, sans-serif;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.2;
}

h1+h2 {
margin-top: -1.1em !important;
}

#PageWrapper h4 {
margin-top: 30px;
}

#PageWrapper h1 u,
#PageWrapper h2 u,
#PageWrapper h3 u,
#PageWrapper h4 u {
text-decoration: none;
line-height: 0.7;
}

#PageWrapper .CalloutBox p,
#PageWrapper .ReminderBox p {
font-family: 'Figtree', Arial, sans-serif;
}

a img {
transition: ease opacity 250ms;
opacity: 1;
}

a img:hover {
opacity: 0.8;
transition: ease opacity 250ms;
}

#ContentColumn a,
#NavColumn a,
.eucookiebar a {
text-underline-offset: 0.3rem;
text-decoration-thickness: 0.07em !important;
}

a:link img,
a:visited img,
a:hover img,
#ContentColumn a:link img,
#ContentColumn a:visited img,
#ContentColumn a:hover img,
#NavColumn a:link img,
#NavColumn a:visited img,
#NavColumn a:hover img {
background: none;
text-decoration: none;
}

#PageWrapper #Footer .Liner a:link,
#PageWrapper #Footer .Liner a:visited,
#PageWrapper #Footer .Liner a:hover,
#PageWrapper #SecondFooter .Liner a:link,
#PageWrapper #SecondFooter .Liner a:visited,
#PageWrapper #SecondFooter .Liner a:hover {
text-decoration: underline;
text-underline-offset: 0.3rem;
text-decoration-thickness: 0.07em !important;
}

#ContentColumn ul li,
#NavColumn ul li {
list-style-type: none;
background: url('image-files/bullet-star-60.webp') no-repeat transparent left 7px;
background-size: 20px 20px;
padding-left: 29px;
background: url('https://www.quick-german-recipes.com/image-files/bullet-checked-60.webp') no-repeat transparent left 9px;
background-size: 18px 18px;
padding-left: 32px;
}

@media all {
h1, h2, h3, h4,
#PageWrapper h1,
#PageWrapper h2,
#PageWrapper h3,
#PageWrapper h4 {
color: #222;
}
}

@media only screen and (max-width: 768px) {
#PageWrapper h1 {
line-height: 1.1;
margin-top: 20px;
text-align: center;
}
#PageWrapper h1 {
margin-top: 30px;
}
#ContentColumn p,
#ContentColumn ul li,
#NavColumn ul li,
#ContentColumn ol li,
#NavColumn ol li {
font-size: 22px;
}
#ContentColumn ul,
#PageWrapper .CalloutBox ul,
#NavColumn ul {
padding-left: 15px;
}
#ContentColumn ul li,
#NavColumn ul li {
background-position: left 8px;
}
}

@media only screen and (max-width: 600px) {
#ContentColumn p,
#ContentColumn ul li,
#NavColumn ul li,
#ContentColumn ol li,
#NavColumn ol li {
font-size: 20px;
}
#ContentColumn ul li,
#NavColumn ul li {
background-position: left 6.5px;
}
}

/* --- SITE STRUCTURE --- */

body {
background: #fff; 
}

.SS_BB2 #PageWrapper {
margin-top: 60px;
}

#PageWrapper {
background: #fff;
}

#PageWrapper #HeaderWrapper {
width: 100%;
background: #fff7f1;
background: #f5eee8;
position: relative;
z-index: 1001;
border-bottom: 1px solid #0001;
}

#Header {
width: 100%;
max-width: 1450px;
}

#PageWrapper #Header .Liner {
min-height: 50px;
padding: 0 40px;
display: block;
}

.SS_BB2 #PageWrapper #Header .Liner {
display: block;
}

#ColumnsWrapper {
display: flex;
align-items: stretch;
max-width: 1300px;
padding: 20px 20px 40px;
box-sizing: border-box;
width: 100%;
background: none;
}

#ContentWrapper {
max-width: calc(100% - 380px);
background: #fff; 
border-radius: 10px;
width: 100%;
}

#ContentColumn {
margin: 0;
float: left;
width: 100%;
max-width: 100%;
}

.modern #ContentColumn .Liner {
padding: 0 30px 70px !important;
background: #fff;
border-radius: 10px;
border: none;
display: block;
}

#NavWrapper {
max-width: 380px;
min-width: 380px;
margin-left: 20px;
border-radius: 10px;
background: #f5eee8;
width: 380px;
display: table;
}

#NavColumn {
margin: 0;
width: 100%;
max-width: 100%;
padding: 0;
background: none;
float: right;
box-sizing: border-box;
}

.modern #NavColumn .Liner {
padding: 15px 30px 50px;
border-radius: 10px;
background: #f5eee8;
display: block;
}

@media only screen and (max-width: 1024px) {
#PageWrapper #Header .Liner {
padding: 0 15px;
}
#ColumnsWrapper {
flex-direction: column;
}
#ContentWrapper {
max-width: 100%;
}
#ContentColumn {
float: none;
max-width: 100%;
}
.modern #ContentColumn .Liner {
padding: 0 25px 50px !important;
}
#NavWrapper {
max-width: 380px;
margin: 20px auto;
}
#NavColumn {
max-width: 380px;
margin: 0 auto;
padding: 30px 0;
float: none;
}
}

@media only screen and (max-width: 768px) {
#PageWrapper {
padding-top: 106px;
}
#PageWrapper #HeaderWrapper {
background: #fff7f1;
position: fixed;
top: 0;
z-index: 999999999;
box-shadow: 0 0 12px #000a;
}
.SS_BB2 #PageWrapper #HeaderWrapper {
position: relative;
}
#PageWrapper #Header .Liner {
display: block;
padding: 0;
}
#ColumnsWrapper {
padding: 20px 20px 50px;
}
.modern #ContentColumn .Liner {
padding: 0 20px 40px !important;
}
#NavWrapper {
max-width: 380px;
}
#NavColumn {
max-width: 380px;
padding: 20px 0;
}
.modern #NavColumn .Liner {
padding: 15px 20px 40px;
}
}

@media only screen and (max-width: 640px) {
#PageWrapper #Header .Liner {
width: 100%;
box-sizing: border-box;
}
#ColumnsWrapper {
padding: 0;
}
.modern #ContentColumn .Liner {
padding: 0 18px 30px !important;
border-radius: 0;
}
.modern #Footer .Liner,
.modern #SecondFooter .Liner {
padding: 70px 30px 0;
}
#NavWrapper {
min-width: initial;
}
}

@media only screen and (max-width: 400px) {
#NavWrapper {
margin: 0 auto 20px;
max-width: 100%;
}
#NavColumn {
max-width: 100%;
padding: 0;
}
.modern #NavColumn .Liner {
padding: 20px 10px 40px;
border-radius: 0;
}
}

@media only screen and (max-width: 359px) {
.modern #ContentColumn .Liner {
padding: 0 16px 30px !important;
}
}

/* --- WEBSITE NAME / LOGO --- */

#PageWrapper #Header .WebsiteName {
font-size: 0;
color: transparent;
float: left;
margin: 22px 0;
width: 235px;
height: 74px;
}

.SS_BB2 #PageWrapper #Header .WebsiteName {
float: none;
}

#PageWrapper #Header .WebsiteName a {
display: block;
margin: 0;
padding: 0;
background: url(https://www.quick-german-recipes.com/image-files/logo-qgr-715x244a.webp) no-repeat center center transparent;
background-size: 100%;
opacity: 1;
width: 235px;
height: 74px;
}

#PageWrapper #Header .WebsiteName a:hover {
opacity: 0.8;
}

#PageWrapper #Header .Tagline {
display: none;
}

@media only screen and (max-width: 768px) {
#PageWrapper #Header .WebsiteName {
margin: 11px 0 9px 12px;
}
#PageWrapper #Header .WebsiteName,
#PageWrapper #Header .WebsiteName a {
width: 167px;
height: 55px;
}
}

@media only screen and (max-width: 450px) {
#PageWrapper #Header .WebsiteName {
margin: 11px 0 9px 7px;
}
}

/* --- FIX FOR FULL-WIDTH 1-COLUMN PAGES --- */

.variantFullSizeContentColumn #ContentWrapper {
max-width: 1000px;
margin: 0 auto;
}

/* --- NAVIGATION --- */

.ResponsiveNavWrapper {
margin: 0 auto 0 0;
overflow-x: clip;
}

#PageWrapper div.HorizontalNavBar,
#PageWrapper #Header .HorizontalNavBar {
float: none;
width: auto;
position: relative;
top: initial;
left: initial;
margin: 0 -2000px;
clear: both;
background: #e02229;
padding: 13px 2000px;
box-sizing: border-box;
font-family: 'Figtree', Arial, sans-serif;
}

#PageWrapper div.HorizontalNavBar ul.root {
padding: 0;
}

#PageWrapper div.HorizontalNavBar li {
display: inline-block;
float: none;
}

#PageWrapper div.HorizontalNavBar li li {
display: block;
float: left;
width: 100%;
border: 0;
}

#PageWrapper div.HorizontalNavBar ul ul {
background: #ffce00;
padding: 10px 15px;
border-radius: 4px;
border: 0 !important;
top: 42px;
text-align: left;
width: 280px;
}

#PageWrapper div.HorizontalNavBar ul .li1:last-child ul,
#PageWrapper div.HorizontalNavBar ul .li1:nth-last-child(2) ul,
#PageWrapper div.HorizontalNavBar ul .li1:nth-last-child(3) ul,
#PageWrapper div.HorizontalNavBar ul .li1:nth-last-child(4) ul {
left: 0;
right: auto;
}

#PageWrapper div.HorizontalNavBar ul ul ul {
top: 2px;
left: 205px !important;
width: 165px;
}

#PageWrapper div.HorizontalNavBar ul span.navheader,
#PageWrapper div.HorizontalNavBar ul a,
#PageWrapper div.HorizontalNavBar ul a:visited {
padding: 3px 18px 6px;
font-weight: 400;
color: #fff;
font-family: 'Figtree', Arial, sans-serif;
letter-spacing: 0.015em;
}

#PageWrapper div.HorizontalNavBar ul > li:first-child span.navheader,
#PageWrapper div.HorizontalNavBar ul > li:first-child a {
padding-left: 0 !important;
}

#PageWrapper div.HorizontalNavBar ul ul > li:first-child span.navheader,
#PageWrapper div.HorizontalNavBar ul ul > li:first-child a {
padding-left: 8px !important;
}

#PageWrapper div.HorizontalNavBar ul span.navheader {
padding-right: 18px;
}

#PageWrapper div.HorizontalNavBar ul span.navheader:hover,
#PageWrapper div.HorizontalNavBar ul a:hover {
color: #f5eee8;
font-weight: 400;
letter-spacing: 0.015em;
}

#PageWrapper div.HorizontalNavBar ul ul span.navheader,
#PageWrapper div.HorizontalNavBar ul ul a {
line-height: 1.2;
padding-top: 10px;
padding-bottom: 10px;
font-family: 'Figtree', Arial, sans-serif;
text-shadow: 1px 1px 1px #fff5;
}

#PageWrapper div.HorizontalNavBar ul ul .li2 a {
font-size: 16px;
transition: ease padding 200ms;
}

#PageWrapper div.HorizontalNavBar ul ul span.navheader,
#PageWrapper div.HorizontalNavBar ul ul span.navheader:hover,
#PageWrapper div.HorizontalNavBar ul ul a:link,
#PageWrapper div.HorizontalNavBar ul ul a:visited,
#PageWrapper div.HorizontalNavBar ul ul a:hover {
font-weight: normal;
}

#PageWrapper div.HorizontalNavBar ul ul .li2 a:hover
#PageWrapper div.HorizontalNavBar ul ul > li:first-child a:hover {
transition: ease padding 200ms;
padding-left: 10px !important;
padding-right: 6px;
}

#PageWrapper div.HorizontalNavBar ul span.navheader:hover,
#PageWrapper div.HorizontalNavBar li:hover > span.navheader,
#PageWrapper div.HorizontalNavBar .hover > span.navheader,
#PageWrapper div.HorizontalNavBar li:hover > span.navheader,
#PageWrapper div.HorizontalNavBar .hover > span.navheader {
color: #f5eee8;
}

/* UPDATED FIRST DROP-DOWN */

#PageWrapper div.HorizontalNavBar ul li:nth-child(2) ul {
width: 330px;
}

#PageWrapper div.HorizontalNavBar ul li:nth-child(2) ul .li2 a {
font-size: 18px !important;
font-weight: 700 !important;
}

@media only screen and (min-width: 769px) {
#PageWrapper div.HorizontalNavBar ul li:nth-child(2) ul .li2.submenu {
width: 50%;
float: left;
}
#PageWrapper div.HorizontalNavBar ul li:nth-child(2) ul ul {
border: 0;
background: none;
padding: 0;
margin: 0;
position: relative;
top: initial;
left: initial !important;
width: 100%;
display: block !important;
box-shadow: none;
}
#PageWrapper div.HorizontalNavBar ul li:nth-child(2) ul .li2 span.navheader,
#PageWrapper div.HorizontalNavBar ul li:nth-child(2) ul .li2 span.navheader:hover {
color: #db3509;
color: #0005;
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
font-family: 'Figtree', Arial, sans-serif;
padding-top: 20px;
border-top: 1px solid #0003;
margin-top: 15px;
font-weight: 700;
}
#PageWrapper div.HorizontalNavBar ul li:nth-child(2) ul .li2 span.navheader ins {
display: none !important;
}
#PageWrapper div.HorizontalNavBar ul li:nth-child(2) ul .li3 a {
font-size: 16px !important;
font-weight: 400 !important;
}
#PageWrapper div.HorizontalNavBar .li1:nth-child(2) .li2:last-child {
border-top: 1px solid #0003;
margin-top: 15px;
padding-top: 10px;
}
}

/* SHOP LINK BUTTON AS 'LAST' LINK IN SITE NAV */

#PageWrapper div.HorizontalNavBar ul .li1:last-child {
padding-left: 8px;
}

#PageWrapper div.HorizontalNavBar ul .li1:last-child a:link,
#PageWrapper div.HorizontalNavBar ul .li1:last-child a:visited,
#PageWrapper div.HorizontalNavBar ul .li1:last-child a:hover {
border-radius: 100px;
padding-right: 17px;
padding-left: 17px;
border: 1px solid #fff;
padding-bottom: 3px;
font-weight: 400;
font-size: 19px;
letter-spacing: 0.015em;
}

#PageWrapper div.HorizontalNavBar ul .li1:last-child a:hover {
background: #fff;
color: #e02229;
}

#PageWrapper div.HorizontalNavBar ul span.navheader ins,
#PageWrapper div.HorizontalNavBar ul ul span.navheader ins {
left: auto;
content: " ";
height: 5px;
width: 5px;
border: 1px solid #fff;
display: inline-block;
transform: rotate(45deg);
margin: 0 0 5px 0;
border-width: 0 0.1em 0.1em 0;
top: 34%;
right: 5px;
}

#PageWrapper div.HorizontalNavBar ul ul span.navheader ins {
border-color: #222;
}

#PageWrapper div.HorizontalNavBar ul li:hover > span.navheader ins,
#PageWrapper div.HorizontalNavBar ul .hover > span.navheader ins {
border-color: #f5eee8;
opacity: 1;
}

#PageWrapper div.HorizontalNavBar ul ul li:hover > span.navheader ins,
#PageWrapper div.HorizontalNavBar ul ul .hover > span.navheader ins {
border-color: #e02229;
opacity: 1;
}

@media only screen and (max-width: 950px) {
#PageWrapper #Header .HorizontalNavBar {
clear: both;
}
}

@media only screen and (min-width: 769px) {
#PageWrapper div.HorizontalNavBar ul ul span.navheader,
#PageWrapper div.HorizontalNavBar ul ul a:link,
#PageWrapper div.HorizontalNavBar ul ul a:visited {
color: #000;
}
#PageWrapper div.HorizontalNavBar ul ul a:hover {
color: #e02229;
}
#PageWrapper div.HorizontalNavBar ul li:nth-child(2) ul .li2 a:link,
#PageWrapper div.HorizontalNavBar ul li:nth-child(2) ul .li2 a:visited {
color: #e02229;
}
#PageWrapper div.HorizontalNavBar ul li:nth-child(2) ul .li2 a:hover {
color: #000;
}
#PageWrapper div.HorizontalNavBar ul li:nth-child(2) ul .li3 a:link,
#PageWrapper div.HorizontalNavBar ul li:nth-child(2) ul .li3 a:visited {
color: #000;
}
#PageWrapper div.HorizontalNavBar ul li:nth-child(2) ul .li3 a:hover {
color: #e02229;
}
#PageWrapper div.HorizontalNavBar ul ul {
background: #fff;
}
/* Prevent dropdowns from opening on hover */
.HorizontalNavBar .submenu.hover > ul {
display: none !important;
}
/* Only show if manually activated by JS */
.HorizontalNavBar .submenu.active > ul {
display: block !important;
}
/* Hide all desktop dropdowns by default */
.HorizontalNavBar .submenu > ul {
display: none;
position: absolute;
background: white;
z-index: 1001;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
/* Show submenu when active */
.HorizontalNavBar .submenu.active > ul {
display: block;
}
/* Backdrop styles */
#nav-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(24, 22, 21, 0.8);
z-index: 1000;
}
/* Show backdrop */
#nav-backdrop.active {
display: block;
}
}

@media only screen and (max-width: 768px) {
.ResponsiveNavReady .ResponsiveNavButton {
position: absolute;
border-radius: 100px;
border: 2px solid #555;
background: #fff;
width: 58px;
height: 58px;
padding: 13px;
left: initial;
box-sizing: border-box;
top: 1px;
right: 10px;
}
.ResponsiveNavActive .ResponsiveNavButton {
top: 30px;
}
.ResponsiveNavReady .ResponsiveNavButton span {
color: #0000;
font-size: 0;
width: 0;
height: 18px;
text-align: left;
background-image: url("https://www.quick-german-recipes.com/image-files/menu-black.webp");
background-repeat: no-repeat;
background-position: 100% center;
background-size: 30px 25px;
}
.ResponsiveNavActive .ResponsiveNavButton {
background: #fff;
}
.ResponsiveNavReady .ResponsiveNavButton:hover,
.ResponsiveNavActive .ResponsiveNavButton:hover {
background: #fff;
border-color: #c5181e;
}
.ResponsiveNavReady .ResponsiveNav {
background: #fff;
overflow: scroll;
height: 100vh;	
}
.ResponsiveNavReady .ResponsiveNav a {
color: #c5181e;
font-weight: bold;
font-size: 22px;
}
.ResponsiveNavReady .ResponsiveNav a:hover {
color: #333;
}
.ResponsiveNavReady .ResponsiveNav ul {
padding-bottom: 30px;
}
.ResponsiveNavReady .ResponsiveNav ul ul {
padding-bottom: 0;
}
}

@media only screen and (max-width: 640px) {
.ResponsiveNavReady .ResponsiveNavButton {
right: 10px;
}
}

@media only screen and (max-width: 450px) {
.ResponsiveNavReady .ResponsiveNavButton {
right: 0px;
}
}

@media only screen and (max-width: 425px) {
.ResponsiveNavButton {
max-width: 100% !important;
}
}

/* --- FIXED HEADER --- */

.HeaderPopup {
top: -500px;
transition: ease all 300ms;
background: #e02229;
position: fixed;
width: 100%;
left: 0;
padding: 0 5%;
z-index: 9999;
box-shadow: 0 -4px 15px #0006;
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 20px;
}

#PageWrapper .HeaderPopup .HorizontalNavBar {
padding: 10px 0 10px 14px;
margin: 0;
}

#PageWrapper .HeaderPopup div.HorizontalNavBar li {
float: left;
background: none;
}

#PageWrapper div.HorizontalNavBar .li1:first-child {
display: none;
}

#PageWrapper .HeaderPopup.BecomeSticky div.HorizontalNavBar .li1:first-child {
display: inline-block;
}

#PageWrapper .HeaderPopup div.HorizontalNavBar li li {
float: none;
float: left;
}

.HeaderPopup.BecomeSticky {
top: 0;
transition: ease all 300ms;
}

@media only screen and (min-width: 769px) {
#PageWrapper .HeaderPopup div.HorizontalNavBar .li1:nth-child(2) .li2:last-child {
margin-top: 12px;
padding-top: 10px;
display: table-caption;
}
}

@media only screen and (max-width: 1550px) {
.HeaderPopup {
padding: 0 50px;
}
}

@media only screen and (max-width: 1440px) {
.HeaderPopup {
padding: 0 30px;
}
}

@media only screen and (max-width: 1000px) {
.HeaderPopup {
padding: 0 20px;
}
}

@media only screen and (max-width: 768px) {
.HeaderPopup,
#PageWrapper .HeaderPopup .ResponsiveNavWrapper {
display: none !important;
}
}

/* --- NAV SEARCH SHOP --- */

.NavSearchShop {
position: relative;
padding: 0;
display: flex;
justify-content: space-between;
align-items: center;
float: none;
margin: 0;
clear: both;
width: 100%;
max-width: 100%;
}

.HeaderPopup .NavSearchShop {
padding: 0;
display: table;
width: auto;
max-width: none;
margin: 0;
}

.NavSearchShopMobile {
display: none;
}

@media only screen and (max-width: 768px) {
.NavSearchShopMobile .NavSearchShop {
clear: both;
padding: 0;
display: block;
width: 40px;
position: initial;
}
.NavSearchShop {
display: none;
}
.NavSearchShopMobile {
display: flex;
align-items: center;
float: right;
padding-right: 82px;
}
.NavSearchShopMobile a.TopArrow:link,
.NavSearchShopMobile a.TopArrow:visited,
.NavSearchShopMobile a.TopArrow:hover {
display: none;
}
}

@media only screen and (max-width: 450px) {
.NavSearchShopMobile {
padding-right: 65px;
}
}

/* --- CUSTOM SEARCH --- */

.CustomSearch {
display: none;
float: right;
}

.CustomSearch .ss360-custom-search {
padding: 2px;
float: right;
box-shadow: none;
border: 0 !important;
border-radius: 50px !important;
max-width: 220px !important;
background: #fff !important;
height: 40px;
display: flex;
align-items: center;
}

.ss360-layer ul li {
margin-top: 0;
margin-bottom: 0;
}

.ss360-layer a:link {
color: #222 !important;
}

.ss360-layer a:visited {
color: #777 !important;
}

.ss360-layer a:hover {
color: #aa1d22 !important;
}

.ss360-layer__heading {
font-family: 'Figtree', Arial, sans-serif !important;
font-weight: 700 !important;
}

.ss360-suggests__image {
width: 100% !important;
aspect-ratio: 16 / 9;
object-fit: cover !important;
object-position: center;
border-radius: 4px !important;
}

.CustomSearch .ss360-custom-search input.ss360-custom-search__searchbox,
.CustomSearch input {
box-shadow: none;
font-size: 15px !important;
height: 35px;
border: 0 !important;
background: none !important;
border-radius: 0 !important;
padding-left: 20px !important;
}

.CustomSearch .unibox__selectable-title {
color: #333 !important;
font-size: 16px !important;
}

.CustomSearch #unibox-suggest-box .unibox-tc-c,
.CustomSearch #unibox-suggest-box .unibox-tc-c--hover:hover,
.CustomSearch #unibox-suggest-box .unibox-tc-c--hover:focus,
#unibox-suggest-box .unibox-ac-c,
#unibox-suggest-box .unibox-ac-c--hover:hover,
#unibox-suggest-box .unibox-ac-c--hover:focus {
color: #c5181e !important;
}

.CustomSearch .unibox__selectable--active:not(.unibox__selectable--show-all):not(.unibox__selectable--cta),
.CustomSearch .unibox__selectable:hover:not(.unibox__selectable--show-all):not(.unibox__selectable--cta) {
background: #f5f1ec;
}

.CustomSearch .ss360-custom-search button.ss360-custom-search__searchbutton,
.CustomSearch button#searchButton {
height: 40px;
border: 2px solid transparent !important;
box-sizing: border-box;
border-radius: 100px !important;
box-shadow: none !important;
padding: 10px !important;
margin-right: 12px !important;
background: url(https://www.quick-german-recipes.com/image-files/search-icon-grey.png) no-repeat center center transparent !important;
background-size: 25px !important;
height: 25px !important;
width: 25px !important;
margin-top: 0 !important;
}

.CustomSearch button#searchButton:focus,
.CustomSearch button#searchButton:hover {
background-color: #f6e4d5 !important;
border: 2px solid transparent !important;
box-sizing: border-box;
}

#PageWrapper h2.unibox__suggest-heading,
#PageWrapper .CustomSearch h2 {
font-size: 17px;
padding: 5px 15px
}

#PageWrapper h2.ss360-no-results__subtitle,
.ss360-no-results__subtitle {
text-transform: none;
font-weight: 400 !important;
border-bottom: 9px solid #f9f0cb;
display: inline-block !important;
clear: both;
line-height: 0.2 !important;
}

#PageWrapper h2.ss360-no-results__subtitle,
#PageWrapper h2.ss360-no-results__title,
.ss360-no-results__subtitle,
.ss360-no-results__title {
text-transform: none;
letter-spacing: -0.01em;
}

#ss360-layer .ss360-ac-c,
#ss360-layer .ss360-ac-c--hover:hover,
#ss360-layer .ss360-ac-c--hover:focus {
color: #000 !important;
}

#ss360-layer .ss360-ac-bg,
#ss360-layer .ss360-ac-bg--hover:hover,
#ss360-layer .ss360-ac-bg--hover:focus,
#ss360-layer .ss360-ac-bg--focus:focus {
background-color: #b21d22 !important;
border-color: #b21d22 !important;
}

#ss360-layer .ss360-acd-bg--hover:hover,
#ss360-layer .ss360-acd-bg--hover:focus {
background-color: #333 !important;
border-color: #333 !important;
}

.OpenSearch {
cursor: pointer;
display: inline-block;
content: "";
height: 32px;
width: 32px;
background: url('image-files/search-icon-white.png') no-repeat transparent center center;
background-size: 100% 100%;
position: relative;
}

.OpenSearch.clicked {
background-image: url('image-files/search-icon-x-white.png');
}

.OpenSearch.clicked + .CustomSearch {
position: absolute;
right: 0;
top: 58px;
background: #e02229;
padding: 10px;
border-radius: 0 0 5px 5px;
}

#searchButton {
cursor: pointer;
}

#searchButton img {
opacity: 0;
}

.HeaderPopup .OpenSearch {
top: 4px;
}

.HeaderPopup .OpenSearch.clicked + .CustomSearch {
top: 38px;
width: 220px;
}

.CustomSearch.FeaturedSearch {
clear: both;
display: table !important;
width: 100%;
margin: 0 auto 1em;
}

.CustomSearch.FeaturedSearch .ss360-custom-search {
padding: 2px;
float: none;
box-shadow: none;
border: 2px solid #777 !important;
border-radius: 50px !important;
max-width: 600px !important;
background: #fff !important;
height: 50px;
display: flex;
align-items: center;
margin: 35px auto;
}

.CustomSearch.FeaturedSearch .ss360-custom-search .ss360-custom-search__searchbox {
max-width: 530px;
}

.CustomSearch {
display: block !important;
}

.clicked + .CustomSearch .ss360-custom-search {
border: 1px solid #e2d5cb !important;
}

@media only screen and (max-width: 768px) {
.CustomSearch {
padding-bottom: 0;
display: none;
float: none;
overflow-x: visible;
max-width: 80%;
width: 170px;
height: 44px;
}
.CustomSearch .ss360-custom-search button.ss360-custom-search__searchbutton,
.CustomSearch button#searchButton {
height: 30px;
margin-right: 3px !important;
margin-top: 0px !important;
}
.CustomSearch .ss360-custom-search input.ss360-custom-search__searchbox,
.CustomSearch input {
padding-left: 14px !important;
height: 30px;
}
.CustomSearch .ss360-custom-search {
max-width: 170px !important;
border: none;
background: none;
border-radius: 50px;
}
.CustomSearch input#searchBox {
overflow-x: scroll !important;
max-width: 130px !important;
width: 125px !important;
height: 40px;
}
.HeaderPopup .CustomSearch {
max-width: 100%;
width: 100%;
background: #fff;
border-radius: 100px;
}
.HeaderPopup .CustomSearch .ss360-custom-search {
box-shadow: none;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
height: 56px;
max-width: 100% !important;
}
.OpenSearch {
top: 25px;
background-image: url('image-files/search-icon-grey.png');
}
.OpenSearch.clicked {
background-image: url('image-files/search-icon-x-grey.png');
}
.OpenSearch.clicked + .CustomSearch {
position: absolute;
right: 0;
top: 38px;
}
.OpenSearch.clicked + .CustomSearch {
right: 10px;
top: 70px;
width: calc(100% - 20px);
max-width: calc(100% - 20px);
background: #fff7f1;
box-shadow: 0px 10px 10px #0005;
padding: 5px 0;
overflow-x: visible !important;
}
.CustomSearch .ss360-custom-search {
max-width: calc(100% - 20px) !important;
margin: 0 auto;
float: none;
}
.CustomSearch input#searchBox {
max-width: calc(100% - 50px) !important;
width: calc(100% - 50px) !important;
}
.CustomSearch {
display: none !important;
}
.OpenSearch.clicked + .CustomSearch {
display: block !important;
}
}

/* --- BB2 BREADCRUMBS & BACK TO TOP BREADCRUMB --- */

.BreadcrumbBlock {
background: #f5eee8;
margin: 0 -30px;
padding: 5px 30px;
border-radius: 7px;
}

.LittleNibblesBreadcrumb .BreadcrumbBlock {
border-radius: 0;
background: none;
margin: 0;
padding: 0;
}

#PageWrapper .BreadcrumbBlock .BreadcrumbTiers {
margin-top: 0;
font-size: 15px;
padding: 8px 0;
}

#PageWrapper #ContentColumn .Breadcrumb,
#PageWrapper #ContentColumn .Breadcrumb p {
color: #777;
font-size: 14px;
margin: 0;
border: 0;
background: #f5eee8;
display: table;
float: left;
padding: 0;
}

#PageWrapper #ContentColumn .Breadcrumb {
padding: 12px 20px 15px;
border-radius: 10px;
clear: both;
position: relative;
margin: 0 0 1em;
}

#PageWrapper #ContentColumn .Breadcrumb::after {
position: absolute;
content: " ";
width: 20px;
height: 20px;
rotate: 45deg;
background: #f5eee8;
border-radius: 5px;
top: -8px;
left: 23px;
display: table;
}

#PageWrapper .BreadcrumbBlock .BreadcrumbTiers li {
margin-top: 3px;
margin-bottom: 3px;
}

@media only screen and (max-width: 1024px) {
.BreadcrumbBlock {
margin: 0 -25px;
padding: 5px 25px;
}
.LittleNibblesBreadcrumb .BreadcrumbBlock {
margin: 0;
padding: 0;
}
}

@media only screen and (max-width: 768px) {
.BreadcrumbBlock {
margin: 10px -37px;
padding: 5px 20px;
}
.LittleNibblesBreadcrumb .BreadcrumbBlock {
margin: 0;
padding: 0;
}
}

@media only screen and (max-width: 640px) {
.BreadcrumbBlock {
margin: 10px -20px;
padding: 3px 15px;
border-radius: 8px;
}
.LittleNibblesBreadcrumb .BreadcrumbBlock {
padding: 0;
}
}

/* --- HORIZONTAL LINE --- */

hr {
border-style: solid;
width: 100%;
border-width: 1px 0 0 0;
margin: 3.5em auto;
}

@media only screen and (max-width: 1000px) {
hr {
margin: 2.75em auto;
}
}

@media only screen and (max-width: 768px) {
hr {
margin: 1.75em auto;
}
}

/* --- EU COOKIE BAR --- */

.eucookiebar.show {
background-color: #c5181e;
color: #ffffff;
}

.eucookiebar.show a {
color: #ffffff;
}

/* --- DISCLAIMER / AUTHOR DATE --- */

.Disclaimer {
margin: -15px 0 0 65px;
}

#ContentColumn .Disclaimer p {
margin: 0;
font-size: 16px;
line-height: 1.5;
text-align: left;
color: #000;
display: table;
/*
background: #f9f0cb;
padding: 0 10px;
*/
}

/* --- ANCHOR/TARGET POSITIONING --- */

:target {
scroll-margin-top: 3em;
}

.TableOfContents h2:target {
scroll-margin-top: 6em;
}

#JumpToRecipe:target {
scroll-margin-top: 5em;
}

@media only screen and (min-width: 769px) {
:target {
scroll-margin-top: 4em;
}
.TableOfContents h2:target {
scroll-margin-top: 8em;
}
#JumpToRecipe:target {
scroll-margin-top: 6em;
}
}

/* --- ARTICLES LIST --- */

.ArticleList {
width: 100% !important;
display: flex;
row-gap: 20px;
column-gap: 20px;
flex-wrap: wrap;
}

#PageWrapper .ArticleList .ImageBlock {
max-width: calc(50% - 10px);
margin: 0;
padding: 0;
line-height: 1;
}

@media only screen and (min-width: 700px) and (max-width: 1024px) {
#PageWrapper .ArticleList .ImageBlock {
max-width: calc(34% - 20px);
}
}

@media only screen and (max-width: 400px) {
#PageWrapper .ArticleList .ImageBlock {
max-width: 100%;
}
}

/* --- INLINE QUOTE 1 & 2 --- */

.InlineQuote {
width: calc(100% - 30px);
border-left: 5px solid #f0efec;
padding: 1px 10px 1px 20px;
margin: 1em auto;
border-radius: 5px;
}

#ContentColumn .InlineQuote p {
margin: 0.5em 0;
font-family: 'Georgia', Times, serif;
font-style: italic;
}

@media only screen and (max-width: 600px) {
.InlineQuote {
width: calc(100% - 15px);
padding: 1px 5px 1px 10px;
}
}

.InlineQuote2 {
box-sizing: border-box;
padding-left: 4%;
margin: 1em auto;
}

#ContentColumn .InlineQuote2 p {
font-family: 'Georgia', Times, serif;
font-style: italic;
background: #fff6ac;
display: inline;
padding: 3px 0;
}

/* --- TEXT RIBBON --- */

#ContentColumn .TextRibbon p {
background: #b21d22;
display: table;
margin: 1.5em 0 0;
color: #fff;
padding: 10px 37px 9px 20px;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.06em;
border-radius: 4px;
line-height: 1.8; /* control the height */
width: fit-content;
clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%, calc(100% - 20px) 50%);
}

@media only screen and (max-width: 768px) {
#ContentColumn .TextRibbon p {
margin-bottom: 0;
}

}
@media only screen and (max-width: 640px) {
#ContentColumn .TextRibbon p {
font-size: 14px;
}
}

/* --- SMOOTH SCROLLING --- */

html {
scroll-behavior: smooth;
}

/* --- JLO ADS --- */

.JLOad {
background: #ffce00;
border-radius: 4px;
width: 70%;
margin: 2em auto 0;
display: table;
padding: 0 0 30px;
}

#PageWrapper #ContentColumn .JLOad h2,
#PageWrapper #NavColumn .JLOad h2 {
text-align: center;
width: 90%;
margin: 0 auto;
padding: 20px 0 0;
color: #333;
line-height: 1.05;
}

#ContentColumn .JLOad p,
#NavColumn .JLOad p {
color: #333;
width: 90%;
margin: 0 auto;
line-height: 1.3;
padding: 10px 0 0;
font-size: 19px;
font-weight: bold;
}

.JLOad .responsive-row, div[class*="responsive_grid_block-"] {
overflow: visible;
}

#PageWrapper .JLOad .ImageBlock {
margin: 0 -10px -20px 0 !important;
}

#PageWrapper .JLOad .responsive-row, 
.JLOad .FullWidthImage {
width: 140%;
margin: 0 0 0 -20%;
}

#PageWrapper .JLOad .responsive-row div[class*="responsive_col-"] {
padding: 0;
}

#ContentColumn .JLOad .responsive_grid_block-2 div[class*="responsive_col-"] {
width: 25% !important;
}

.JLOad .responsive_grid_block-2 div[class*="responsive_col-"] {
width: 50% !important;
}

@media only screen and (max-width: 768px) {
#ContentColumn .JLOad .responsive_grid_block-2 div[class*="responsive_col-"] {
width: 25% !important;
}
}

@media only screen and (max-width: 380px) {
.JLOad {
width: 80%;
}
}

/* --- CENTERING IMAGES ON MOBILE --- */

@media only screen and (max-width: 447px) {
#PageWrapper .ImageBlockRight,
#PageWrapper .ImageBlockLeft {
float: none;
text-align: center;
margin: 10px;
}
#PageWrapper .ImageBlock .ImageBlockRight img,
#PageWrapper .ImageBlock .ImageBlockLeft img {
margin: 0 auto;
}
}

/* --- ANCHOR LINKS EXTRA TOP SPACING --- */

:target {
padding-top: 2.5em;
}

/* --- SOCIAL ICONS --- */

#NavColumn .SocialDestinations {
text-align: center;
}

#NavColumn .SocialDestinations a:link,
#NavColumn .SocialDestinations a:visited {
color: #333;
}

#NavColumn .SocialDestinations a:hover {
color: #c5181e;
}

/* --- TESTIMONIALS --- */

.Testimonial {
padding: 0 0 20px;
}

#ContentColumn .Testimonial p,
#NavColumn .Testimonial p {
font-family: Courier;
letter-spacing: -0.02em;
line-height: 1.4;
}

#ContentColumn .Testimonial p:last-child,
#NavColumn .Testimonial p:last-child {
font-family: Arial, sans-serif;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.09em;
line-height: 1.5;
margin-top: 2em;
color: #595959;
}

.TestimonialSource {
display: flex;
align-items: center;
column-gap: 15px;
margin: -10px 0 20px -5px;
}

#PageWrapper .TestimonialSource .ImageBlock img {
max-width: 60px;
max-height: 60px;
margin: 0;
}

#ContentColumn .CustomTestimonials div[class*="responsive_col-"] .TestimonialSource p {
font-family: 'Figtree', Arial, sans-serif;
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: .05em;
font-style: normal;
color: #e02229;
word-break: break-word;
margin: 0;
}

#ContentColumn .CustomTestimonials div[class*="responsive_col-"] .TestimonialSource p:last-child {
color: #444;
font-size: 14px;
text-transform: none;
font-weight: normal;
letter-spacing: 0.02em;
margin-top: -5px;
}

#PageWrapper .TestimonialSource .ImageBlock {
margin: 0 !important;
height: 60px;
width: 60px;
}

.CustomTestimonial .TestimonialSourceText {
}

/* --- CREDIT --- */

.Credit {
display: flex;
align-items: center;
margin: -20px 0 7px;
}

#ContentColumn .Credit p {
margin: 0 0 10px 10px;
font-size: 15px;
color: #595959;
}

#ContentColumn .Credit .ImageBlock {
margin: 0;
float: left;
transition: margin ease 200ms;
min-width: 55px;
width: 55px;
}

#ContentColumn .Credit .ImageBlock img {
width: 55px !important;
border-radius: 100px;
border: 3px solid #e3dbd4;
}

@media only screen and (max-width: 640px) {
#ContentColumn .Credit .ImageBlock img {
width: 50px !important;
border: 2px solid #e3dbd4;
}
}

/* --- IMAGES & CAPTIONS --- */

#PageWrapper .ImageBlock {
overflow: visible;
border-radius: 4px;
transition: ease border-radius 500ms;
transition: ease all 500ms;
}

#PageWrapper .ImageBlock img {
max-width: 100%;
border-radius: 4px;
transition: ease border-radius 350ms;
transition: ease all 350ms;
}

#PageWrapper .ImageBlock a:hover,
#PageWrapper .ImageBlock a img:hover {
border-radius: 25px;
transition: ease border-radius 200ms;
transition: ease all 200ms;
/* opacity: 1; */
}

.Caption,
.Caption.CaptionLeft,
.Caption.CaptionRight,
#ContentColumn .ImageBlock a:link,
#ContentColumn .ImageBlock a:visited,
#ContentColumn .ImageBlock a:hover,
#NavColumn .ImageBlock a:link,
#NavColumn .ImageBlock a:visited,
#NavColumn .ImageBlock a:hover,
#ContentColumn a:link span.Caption,
#ContentColumn a:visited span.Caption,
#ContentColumn a:hover span.Caption,
.SeasonalBanner a:link span.Caption,
.SeasonalBanner a:visited span.Caption,
.SeasonalBanner a:hover span.Caption,
#NavColumn a:link span.Caption,
#NavColumn a:visited span.Caption,
#NavColumn a:hover span.Caption {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
display: block;
text-align: center !important;
margin-left: auto;
margin-right: auto;
text-decoration: none !important;
color: #444;
}

#ContentColumn a:hover span.Caption,
#ContentColumn .ImageBlock a:hover,
.SeasonalBanner a:hover span.Caption,
.SeasonalBanner .ImageBlock a:hover,
#NavColumn a:hover span.Caption,
#NavColumn .ImageBlock a:hover,
#ContentColumn .ImageBlock a:hover,
.SeasonalBanner .ImageBlock a:hover,
#NavColumn .ImageBlock a:hover {
color: #c5181e;
}

#PageWrapper .JLOad .ImageBlock img:hover {
opacity: 0.7;
}

@media only screen and (max-width: 415px) {
#PageWrapper .ImageBlockRight img,
#PageWrapper .ImageBlockLeft img,
#PageWrapper .ImageBlockRight .Caption,
#PageWrapper .ImageBlockLeft .Caption {
margin-left: 0;
margin-right: 0;
}
}

/* ------ PHOTO GRID ------ */

.PhotoGrid {
display: flex;
column-gap: 40px;
flex-wrap: wrap;
justify-content: flex-start;
}

.PhotoGrid.Center {
justify-content: center;
}

#PageWrapper .PhotoGrid .ImageBlock {
max-width: calc(20% - 32px);
}

#PageWrapper .PhotoGrid .ImageBlock img {
border: none !important;
background: none !important;
aspect-ratio: 1 / 1;
object-fit: cover;
}

#PageWrapper .PhotoGrid .Caption {
border: none !important;
background: none !important;
padding-top: 5px;
font-size: 14px;
text-transform: none;
letter-spacing: 0.02em;
line-height: 1.4;
font-weight: 400;
}

#PageWrapper .PhotoGrid .Caption b {
font-size: 24px;
font-family: 'Source Serif 4';
letter-spacing: -0.03em;
text-transform: none;
line-height: 1.1;
color: #222;
display: inline-block;
padding-bottom: 5px;
}

#PageWrapper .PhotoGrid .Caption:hover, 
#PageWrapper .PhotoGrid img:hover .Caption,
#PageWrapper .PhotoGrid a:hover .Caption {
color: #e02229 !important;
}

#PageWrapper .PhotoGrid .Caption b:hover, 
#PageWrapper .PhotoGrid img:hover .Caption b,
#PageWrapper .PhotoGrid a:hover .Caption b {
color: #222 !important;
}

#PageWrapper .PhotoGrid a:hover img,
#PageWrapper .PhotoGrid img:hover {
/* opacity: 1; */
}

.PhotoGridTOC {
display: flex;
column-gap: 20px;
flex-wrap: wrap;
justify-content: center;
}

#PageWrapper .PhotoGridTOC .ImageBlock,
#PageWrapper .PhotoGridTOC .Caption {
min-width: 120px;
}

#PageWrapper .PhotoGridTOC .ImageBlock img {
border: none !important;
background: none !important;
max-width: 80px;
}

#PageWrapper #ContentColumn .PhotoGridTOC .Caption {
border: none !important;
background: none !important;
padding-top: 0px;
font-size: 17px;
text-transform: none !important;
letter-spacing: .02em !important;
line-height: 1.4;
font-weight: 700 !important;
}

#PageWrapper .PhotoGridTOC .Caption:hover, 
#PageWrapper .PhotoGridTOC img:hover .Caption,
#PageWrapper .PhotoGridTOC a:hover .Caption {
color: #e02229 !important;
}

#PageWrapper .PhotoGridTOC a:hover img,
#PageWrapper .PhotoGridTOC img:hover {
opacity: 1;
filter: saturate(0.1) hue-rotate(-20deg) brightness(110%);
}

a.GotoTop:link,
a.GotoTop:visited,
a.GotoTop:hover {
display: inline-block;
content: "";
height: 18px;
width: 18px;
background: url(image-files/back-to-top-2.png) no-repeat transparent center center;
background-size: 16px 16px;
border-radius: 100px;
background-color: #e02229;
border: 3px solid #e02229;
margin-left: 5px;
}

a.GotoTop:hover {
background-color: #333;
border-color: #333;
}

#PageWrapper .PhotoGridHeadline h2 {
display: inline-block;
margin: 3em 0 1.25em;
}

#PageWrapper .PhotoGridTOC a .Caption, 
#PageWrapper .PhotoGridTOC a img .Caption,
#PageWrapper .PhotoGridTOC a,
#PageWrapper .PhotoGrid a .Caption, 
#PageWrapper .PhotoGrid a img .Caption,
#PageWrapper .PhotoGrid a {
cursor: pointer;
font-size: 16px;
letter-spacing: 0.03em !important;
font-weight: 400 !important;
text-transform: none !important;
}

#ContentColumn a.back-to-top-link:link,
#ContentColumn a.back-to-top-link:visited,
#ContentColumn a.back-to-top-link:hover {
display: table;
border: 1px solid #444;
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.06em;
font-weight: bold;
padding: 5px 13px 3px;
margin: -1.5em 0 3em;
color: #444;
}

#ContentColumn a.back-to-top-link:hover {
background: #444;
color: #fff;
}

@media only screen and (max-width: 1060px) {
#PageWrapper .PhotoGrid .ImageBlock {
max-width: calc(25% - 30px);
}
#PageWrapper .PhotoGrid .Caption b {
font-size: 21px;
line-height: 1.1;
padding-bottom: 4px;
}
}

@media only screen and (max-width: 800px) {
#PageWrapper .PhotoGrid .ImageBlock {
max-width: calc(33.33% - 27px);
}
}

@media only screen and (max-width: 768px) {
#PageWrapper .PhotoGrid .Caption {
word-break: break-word;
}
#PageWrapper .PhotoGrid .Caption b {
font-size: 18px;
line-height: 1.2;
padding-bottom: 2px;
}
}

@media only screen and (max-width: 500px) {
.PhotoGrid {
column-gap: 20px;
}
#PageWrapper .PhotoGrid .ImageBlock {
max-width: calc(50% - 10px);
}
#PageWrapper .PhotoGridTOC .ImageBlock {
max-width: calc(50% - 25px);
}
}

@media only screen and (max-width: 400px) {
.PhotoGrid {
column-gap: 10px;
}
#PageWrapper .PhotoGrid .ImageBlock {
max-width: calc(50% - 5px);
}
}

/* -- GRIDS -- */

.responsive-row, div[class*='responsive_grid_block-'] {
overflow: visible;
display: table;
width: 100%;
}

/* -- NARROW CONTENT -- */

.NarrowContent {
display: table;
clear: both;
width: 100%;
max-width: 800px;
margin: 0 auto;
}

/* --- MOBILE & DESKTOP ONLY --- */

.OnlyMobile {
display: none;
}

@media only screen and (max-width: 850px) {
.OnlyDesktop {
display: none;
}
.OnlyMobile {
display: block;
}
}

/* --- PROMO --- */

#Header .Promo {
position: absolute;
right: 50px;
top: 21px;
max-width: 210px;
}

#ContentColumn .Promo {
display: none;
}

.Promo p {
font-size: 16px;
color: #000;
margin: 0;
text-align: right;
}

.Promo a:link,
.Promo a:visited,
.Promo a:hover {
color: #AA1D22;
text-underline-offset: 0.3rem;
text-decoration-thickness: 0.07em !important;
text-decoration: underline;
}

.Promo a:hover {
color: #000;
}

@media only screen and (max-width: 768px) {
#Header .Promo {
display: none;
}
#ContentColumn .Promo {
display: block;
position: relative;
padding: 12px 15px 13px;
background: #e02229;
border-radius: 5px;
margin: -5px -37px 0;
}
.Promo p {
color: #fff;
text-align: center;
}
#ContentColumn .Promo a:link,
#ContentColumn .Promo a:visited,
#ContentColumn .Promo a:hover {
color: #fff;
}
}

@media only screen and (max-width: 640px) {
#ContentColumn .Promo {
margin: 10px -20px 0;
}
}

@media only screen and (max-width: 400px) {
#ContentColumn .Promo {
padding: 7px 10px 8px;
}
.Promo p {
line-height: 1.5;
}
}

/* -- SEARCH LINKS / IMAGES -- */

.SearchLinks {
margin: 2em auto;
display: table;
}

#PageWrapper .SearchLinks .ImageBlock img {
border-radius: 500px;
aspect-ratio: 1;
}

#PageWrapper .SearchLinks .responsive-row {
display: flex;
width: 100%;
flex-wrap: wrap;
}

#PageWrapper .SearchLinks .responsive-row div[class*="responsive_col-"] {
padding: 1px 10px;
display: flex;
}

#PageWrapper .SearchLinks .Caption {
font-size: 19px;
letter-spacing: 0.08em;
padding-top: 10px;
}

#PageWrapper .SearchLinks a:hover img,
#PageWrapper .SearchLinks a img:hover {
border-radius: 500px;
}

#PageWrapper .SearchLinks .Caption:hover,
#PageWrapper .SearchLinks a:hover .Caption,
#PageWrapper .SearchLinks a img:hover .Caption {
color: #e02229 !important;
opacity: 1 !important;
}

@media only screen and (max-width: 600px) {
#PageWrapper .SearchLinks .Caption {
font-size: 16px;
}
}

/* -- BROWSE BY SECTION -- */

#PageWrapper .SectionHeadline h2 {
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.06em;
text-align: center;
font-family: 'Figtree', Arial, sans-serif;
margin: 3.75em auto 2em;
}

/* -- SIDE-BY-SIDE -- */

.SideBySide {
clear: both;
margin: 4em auto;
}

.SideBySide .responsive-row {
display: flex;
align-items: flex-start;
flex-direction: row-reverse;
column-gap: 5%;
}

@media only screen and (max-width: 600px) {
.SideBySide .responsive-row {
display: block;
}
.SideBySide {
margin: 2.5em auto;
}
#PageWrapper .SideBySide .responsive-row div[class*="responsive_col-"] {
width: 100%;
}
}

/* -- CUSTOM CAPTION -- */

.CustomCaption {
display: table;
margin: 0 auto;
clear: both;
}

#PageWrapper .CustomCaption .ImageBlock {
position: relative;
}

#PageWrapper .CustomCaption .ImageBlock .Caption {
display: block;
position: absolute;
bottom: 40px;
right: -15px;
background: #fff !important;
color: #000;
padding: 6px 18px 6px;
border-radius: 2px 0 0 2px;
font-size: 18px;
text-transform: none;
letter-spacing: 0.01em;
font-weight: 400;
font-style: italic;
font-family: 'Source Serif 4', Georgia, sans-serif;
transition: ease padding 300ms, ease border-radius 500ms;
}

#PageWrapper .CustomCaption .ImageBlock .Caption:hover,
#PageWrapper .CustomCaption .ImageBlock a:hover .Caption,
#PageWrapper .CustomCaption .ImageBlock a img:hover .Caption {
color: #e02229;
border-radius: 10px 0 0 10px;
padding-right: 15px;
transition: ease padding 300ms, ease border-radius 500ms;
}

/* -- CUSTOM TESTIMONIALS -- */

.CustomTestimonials {
clear: both;
display: table;
width: 100%;
margin: 3em 0;
}

#PageWrapper .CustomTestimonials .responsive-row div[class*="responsive_col-"] {
padding-right: 2%;
padding-left: 2%;
}

#ContentColumn .CustomTestimonials div[class*="responsive_col-"] p {
font-family: 'Source Serif 4', Georgia, serif;
font-style: italic;
}

@media only screen and (max-width: 768px) {
#PageWrapper .CustomTestimonials .responsive-row div[class*="responsive_col-"] {
width: 50%;
}
}

@media only screen and (max-width: 640px) {
#PageWrapper .CustomTestimonials .responsive-row div[class*="responsive_col-"] {
width: 100%;
}
}

/* --- JUMP TO RECIPE BUTTON --- */

.TopButtons {
margin: 20px auto 30px;
background: none !important;
}

.TopButtons .Disclaimer {
margin: 20px auto 10px;
/* background: #f6e9de; */
padding: 10px 20px 8px;
border-radius: 4px;
display: table;
}

#ContentColumn .TopButtons a:link,
#ContentColumn .TopButtons a:visited,
#ContentColumn .TopButtons a:hover {
display: table;
margin: 0 auto;
border-radius: 100px;
padding: 7px 20px;
color: #444;
background: none;
border: 2px solid #444;
font-size: 16px;
clear: both;
font-weight: 400;
letter-spacing: 0.01em;
text-transform: none;
}

#ContentColumn .TopButtons a:hover {
color: #fff;
background: #e02229;
border-color: #e02229;
}

#ContentColumn .TopButtons .Disclaimer p {
margin: 0;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #0007;
display: block;
}

@media only screen and (max-width: 640px) {
.TopButtons .Disclaimer {
margin-top: 17px
}
}

/* =================================== */
/* =================================== */
/* ===== CSS FOR BELOW PAGE FOLD ===== */
/* =================================== */
/* =================================== */

/* --- SITE STRUCTURE --- */

#PageWrapper #FooterWrapper {
background: #ffce00;
background: #ffdd50;
position: relative;
clear: both;
}

#PageWrapper #SecondFooterWrapper {
background: #ffce00;
position: relative;
clear: both;
}

#Footer,
#SecondFooter {
text-align: center;
max-width: 1400px;
margin: 0 auto;
}

.modern #Footer .Liner,
.modern #SecondFooter .Liner {
padding: 50px 50px 0;
}

@media only screen and (max-width: 768px) {
.modern #Footer .Liner,
.modern #SecondFooter .Liner {
padding: 50px 30px 0;
}
}

@media only screen and (max-width: 640px) {
.modern #Footer .Liner,
.modern #SecondFooter .Liner {
padding: 70px 30px 0;
}
}

@media only screen and (max-width: 400px) {
.modern #Footer .Liner,
.modern #SecondFooter .Liner {
padding: 70px 20px 0;
}
}

@media only screen and (max-width: 359px) {
.modern #ContentColumn .Liner {
padding: 0 10px 30px;
}
}

/* --- FORMS --- */

table.formwrapper input[type="text"],
table.formwrapper input[type="tel"],
table.formwrapper textarea {
border-radius: 2px;
border: 0.1em solid #ddd;
padding: 10px;
line-height: 23px;
font-size: 17px;
width: 100%;
box-sizing: border-box;
font-weight: 400;
font-family: 'Figtree', Arial, sans-serif;
background: #fff;
}

table.formwrapper h2 {
text-align: left !important;
}

table.formwrapper label {
padding-top: 20px;
float: left;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.08em;
word-spacing: 0.04em;
color: #444;
}

table.formwrapper p input {
min-width: 250px;
clear: both;
float: left;
width: 250px;
}

table.formwrapper p a {
float: left;
clear: both;
display: block;
}

table.formwrapper input[type="submit"] {
float: left;
padding: 13px 25px 12px;
border-radius: 50px;
border: 2px solid #c5181e;
background: #c5181e;
color: #fff;
text-transform: uppercase;
font-weight: 400;
font-size: 15px;
letter-spacing: 0.07em;
font-family: 'Figtree', Arial, sans-serif;
margin: 20px 0;
cursor: pointer;
-webkit-appearance: none;
}

table.formwrapper input[type="submit"]:hover {
background: none;
color: #c5181e;
}

/* --- BLOG IT STYLING --- */

.blogItItem {
margin: 18px 0;
padding: 0 12px;
border: 1px solid #ccc;
background: #ddd;
box-shadow: 4px 4px 4px #ccc;
border-radius: 4px;
}

/* --- SOCIAL DESTINATIONS FOR FOOTER AREA --- */

.FooterAbout .SocialDestinations {
margin: 15px 0 15px -4px;
text-align: left;
}

.SocialFollow {
clear: both;
display: table;
width: 100%;
margin: 1em 0;
}

#PageWrapper #Footer .Liner .SocialFollow a:link,
#PageWrapper #Footer .Liner .SocialFollow a:visited,
#PageWrapper #Footer .Liner .SocialFollow a:hover,
#PageWrapper #SecondFooter .Liner .SocialFollow a:link,
#PageWrapper #SecondFooter .Liner .SocialFollow a:visited,
#PageWrapper #SecondFooter .Liner .SocialFollow a:hover {
color: #fff;
background: #c5181e;
border-radius: 100px;
padding: 6px 25px 5px 17px;
text-decoration: none;
margin: 0.5em 10px 0.5em 0;
float: left;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 14px;
line-height: 30px;
box-sizing: border-box;
display: flex;
}

#PageWrapper #Footer .Liner .SocialFollow a:hover,
#PageWrapper #SecondFooter .Liner .SocialFollow a:hover {
background: #333;
}

.SocialFollow a::before {
content: "";
width: 30px;
height: 25px;
display: inline-block;
background: url("image-files/social-icons-2025.webp") no-repeat center left transparent;
background-size: 130px 30px;
margin-right: 3px;
}

.SocialFollow a.Instagram::before {
background-position: 0 0;
}

.SocialFollow a.YouTube::before {
background-position: -33px 0;
}

.SocialFollow a.Facebook::before {
background-position: -66px 0;
}

.SocialFollow a.Pinterest::before {
background-position: -101px 0;
}

/* --- AS SEEN ON --- */

.AsSeenOnWrapper {
width: 100%;
border-bottom: 1px solid #e1b600;
margin: 2em auto 4em;
padding-bottom: 2em;
}

.AsSeenOn {
margin: -20px auto 0;
}

#PageWrapper #Footer .AsSeenOn p,
#PageWrapper #SecondFooter .AsSeenOn p {
display: block;
margin: 0 auto 1.5em;
font-style: italic;
color: #2b2b2b;
font-family: 'Source Sans Serif', Georgia, Times, serif;
font-size: 20px;
width: 100%;
max-width: 700px;
}

#PageWrapper #Footer .AsSeenOn .ImageBlock img,
#PageWrapper #SecondFooter .AsSeenOn .ImageBlock img {
border: 0;
}

.AsSeenOn ul {
display: flex;
flex-wrap: wrap;
gap: 3%;
justify-content: center;
}

.AsSeenOn ul li {
list-style-type: none;
margin: 0;
padding: 0;
}

.AsSeenOn ul li img {
height: 45px;
width: auto;
object-fit: contain;
}

/* --- RELATED PAGES --- */

.RelatedPagesBlock {
margin: -0.5em 0 3em;
}

#PageWrapper .RelatedPagesBlock ul.across {
gap: 20px;
justify-content: normal;
}

#PageWrapper .RelatedPagesBlock ul.across li {
width: calc(34% - 20px);
background: #ffce00;
border-radius: 5px;
padding: 0 0 10px;
margin: 0;
justify-content: center;
}

#PageWrapper .relatedPagesThumbnail  img {
width: 100% !important;
height: 200px !important;
border-radius: 5px;
border: 7px solid #ffce00;
}

.RelatedPagesContainer H3 a {
color: #e02229;
text-decoration: underline;
font-size: 14px;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.03em;
line-height: 1.4;
}

#PageWrapper .RelatedPagesBlock h3 {
margin: 0 auto;
width: 100%;
background: #ffce00;
font-family: 'Figtree', Arial, sans-serif;
display: inline-block;
padding: 6px 15px 0;
box-sizing: border-box;
text-align: center;
font-size: 14px;
}

#ContentColumn .RelatedPagesBlock h3 a:link,
#ContentColumn .RelatedPagesBlock h3 a:visited,
#ContentColumn .RelatedPagesBlock h3 a:hover {
color: #000;
text-decoration: none;
}

#ContentColumn .RelatedPagesBlock h3 a:hover {
color: #c5181e;
}

.RelatedPagesBlock p {
display: none;
}

@media only screen and (max-width: 1200px) {
#PageWrapper .RelatedPagesBlock ul.across li {
width: calc(51% - 20px);
}
}
@media only screen and (max-width: 1024px) {
#PageWrapper .RelatedPagesBlock ul.across li {
width: calc(34% - 20px);
}
}
@media only screen and (max-width: 768px) {
#PageWrapper .RelatedPagesBlock ul.across li {
width: calc(51% - 20px);
}
}
@media only screen and (max-width: 500px) {
#PageWrapper .RelatedPagesBlock ul.across li {
width: 100%;
}
}

@media only screen and (max-width: 447px){
#PageWrapper .RelatedPagesBlock ul.across {
justify-content: center;
}
#PageWrapper .RelatedPagesBlock ul.across li {
width: 100%;
}      
}

/* --- BUTTON ELEMENTS --- */

.ss-ui-bootstrap .btn-primary {
color: #fff !important;
background-color: #c5181e !important;
border-color: #c5181e !important;
text-decoration: none !important;
padding: 13px 25px 12px !important;
border-radius: 50px !important;
border-width: 2px !important;
font-weight: 700 !important;
font-size: 20px !important;
letter-spacing: 0.02em !important;
font-family: 'Figtree', Arial, sans-serif;
margin: 0.5em 0;
white-space: initial !important;
text-transform: none;
}

#ContentColumn .ss-ui-bootstrap .btn {
white-space: normal;
}

.ss-ui-bootstrap .btn-primary:hover {
color: #c5181e !important;
background-color: #fff !important;
}	

/* --- REMINDER BOX --- */

#PageWrapper .ReminderBox {
box-sizing: border-box;
padding: 15px 30px;
background: #ffce00;
box-shadow: 3px 3px 0 3px #ffb912;
color: #333 !important;
width: 100%;
max-width: 100%;
margin: 2em auto;
float: none;
}

#PageWrapper .ReminderBox p {
color: #333;
}

/* --- CALLOUT BOX --- */

#PageWrapper .CalloutBox {
background: #fff2ba;
padding: 1em 5%;
border: 1px solid #fde891aa;
box-shadow: 0 0 50px #ffea95 inset;
position: relative;
display: table;
margin: 3em 0;
}

#PageWrapper .CalloutBox h2 {
font-style: normal;
font-weight: 700;
text-decoration: none;
line-height: 1.1;
padding: 15px 18px 0;
display: inline-block;
background: #fff2b9 !important;
margin: 0;
letter-spacing: -0.03em;
position: relative;
top: -1.5em;
left: 0;
font-size: 31px;
border-radius: 10px 10px 0 0;
}

#PageWrapper .CalloutBox h2 + ul,
#PageWrapper .CalloutBox h2 + ol {
margin-top: -1.5em;
}

#PageWrapper .CalloutBox h2 + p {
margin-top: -1em !important;
}

#PageWrapper .CalloutBox h3 {
margin: 0 0 1em;
}

#PageWrapper .CalloutBox h4 {
position: absolute;
color: #fff7f1;
background: #333;
border-radius: 2px;
top: calc(-1em - 6px);
margin: 0;
text-transform: uppercase;
letter-spacing: 0.07em;
padding: 10px 15px 8px;
display: table;
font-size: 12px;
font-style: normal;
font-family: 'Figtree', Arial, sans-serif;
}

#PageWrapper .CalloutBox.Gold {
background: #ffce00;
box-shadow: initial;
}

@media only screen and (max-width: 640px) {
PageWrapper .CalloutBox h2 {
font-size: 28px;
}
}

/* --- SIGNUP AT BOTTOM --- */

.CalloutBox.Gold .ff-6617ca174f0a00258902150b .ff-6617ca174f0a00258902150b__container {
background: #ffce00 !important;
}

[data-ff-el="root"].ff-6617ca174f0a00258902150b .ff-6617ca174f0a00258902150b__left {
align-items: flex-start !important;
}

.CalloutBox.Gold .ff-6617ca174f0a00258902150b .ff-6617ca174f0a00258902150b__control {
color: #555 !important;
background: #fff !important;
}

.CalloutBox.Gold .ff-6617ca174f0a00258902150b .ff-6617ca174f0a00258902150b__button {
border-radius: 100px;
border: 0;
padding: 14px 20px 13px;
}

.CalloutBox.Gold .responsive-row {
/* display: flex; */
align-items: center;
text-align: center;
}

#PageWrapper .CalloutBox.Gold hr {
color: #d9af00 !important;
margin: 0.5em auto !important;
}

#ContentColumn .CalloutBox.Gold a:not([data-pin-href]):link,
#ContentColumn .CalloutBox.Gold a:link,
#ContentColumn .CalloutBox.Gold a:visited {
color: #333;
}

/* --- PINTEREST CALLOUT BOX --- */

#PageWrapper .CalloutBox.Pin {
background: #3a3a3a;
box-shadow: none;
}

#PageWrapper .CalloutBox.Pin .ImageBlock::before {
content: "Pin this to your Pinterest Board!";
color: #fff;
font-family: 'Figtree', Arial, sans-serif;
text-align: center;
text-transform: uppercase;
font-size: 16px;
letter-spacing: 0.07em;
padding-bottom: 1.5em;
display: table;
width: 100%;
}

/* --- RECIPE CARDS --- */

#ContentColumn .Recipe p,
#ContentColumn .Recipe ul li,
#ContentColumn .Recipe ol li {
font-size: 20px;
}

.Recipe {
border: 5px solid #333;
padding: 20px;
border-radius: 5px;
position: relative;
margin: 4em 0 2.5em;
margin: 2.5em 0;
}

/*
.Recipe::before {
background: #333;
color: #fff;
border-radius: 50%;
border-radius: 4px;
content: 'Recipe Card';
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 18px;
letter-spacing: .05rem;
line-height: 1.1;
text-align: center;
text-transform: uppercase;
width: 70px;
height: 70px;
width: 130px;
height: 3px;
padding: 20px 16px 12px 16px;
padding: 16px 16px 12px 16px;
position: absolute;
top: -57px;
left: 30px;
top: -34px;
left: 15px;
}
*/

.RecipeImage {
float: right;
width: 200px;
margin-left: 20px;
margin-bottom: 15px;
}

#PageWrapper .RecipeImage .ImageBlock {
margin: 0 !important;
}

#ContentColumn .RecipeImage a:link,
#ContentColumn .RecipeImage a:visited,
#ContentColumn .RecipeImage a:hover {
text-decoration: none !important;
}

button.RecipeButton {
width: 100%;
max-width: 200px;
box-sizing: border-box;
padding: 11px 15px 10px;
text-transform: uppercase;
border-radius: 100px;
border: 2px solid #db0e15;
color: #fff;
background: #db0e15;
font-size: 12px;
text-decoration: none;
display: block;
margin: 0 0 15px;
text-align: center;
letter-spacing: 0.06em;
font-weight: bold;
cursor: pointer;
}

button.RecipeButton:hover {
color: #db0e15;
background: none;
}

#PageWrapper .Recipe h2 {
margin: 40px 0 8px;
margin: 0 0 8px;
word-break: break-word;
}

#PageWrapper .Recipe h2,
#PageWrapper .Recipe h2 span {
color: #C92D2E !important;
font-size: 30px;
text-align: left !important;
}

#PageWrapper .Recipe h3 {
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: bold;
margin-top: 2em;
margin-bottom: 20px;
font-size: 22px;
}

#PageWrapper .Recipe h4 {
text-transform: uppercase;
font-weight: bold;
letter-spacing: 0.04em;
margin-bottom: -5px;
}

.RecipeDetails {
margin: 0 0 1.5em;
display: table;
}

#ContentColumn .RecipeDetails p {
float: left;
display: inline-block;
margin: 0 0 10px;
}

#ContentColumn .RecipeDetails p:nth-child(odd) {
clear: both;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 6px;
font-weight: 700;
color: #db0e15;
}

#ContentColumn .RecipeDetails p:nth-child(even) {
margin-left: 6px;
font-size: 18px;
font-weight: 400;
}

.Recipe .column_1 {
border: 1px solid #ccc;
}

.Recipe table {
margin: 12px 0;
}

.Recipe .column_0,
.Recipe .column_1,
.Recipe .column_2 {
float: left;
width: 33% !important;
clear: none;
display: block;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
padding: 12px 2px 11px;
}

#PageWrapper .Recipe .column_0 h4,
#PageWrapper .Recipe .column_1 h4,
#PageWrapper .Recipe .column_2 h4 {
margin: 0 0 5px;
text-align: center;
letter-spacing: 0.04em;
font-size: 14px;
color: #000;
}

#PageWrapper .Recipe .column_0 p,
#PageWrapper .Recipe .column_1 p,
#PageWrapper .Recipe .column_2 p {
font-size: 11px;
margin: 0;
text-align: center;
font-style: normal;
letter-spacing: 1px;
color: #000;
}

#ContentColumn .Recipe ul li {
line-height: 1.4;
padding-top: 5px;
padding-bottom: 5px;
background: none;
padding-left: 0;
}

.NutritionConversions {
margin: -55px 0 50px;
background: #333;
border: 1px solid #333;
border-radius: 0 0 5px 5px;
padding: 0px 20px 5px;
}

#PageWrapper .NutritionConversions h4 {
font-size: 15px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #aaa;
line-height: 1.5;
margin-top: 19px;
font-weight: normal;
}

.NutritionConversions p {
font-size: 70%;
color: #ccc;
}

#ContentColumn .NutritionConversions a:link,
#ContentColumn .NutritionConversions a:visited,
#ContentColumn .NutritionConversions a:hover {
color: #fff;
}

#ContentColumn .NutritionConversions a:hover {
color: #ddd;
}

button.RecipeButton {
text-transform: none;
letter-spacing: 0;
font-size: 14px;
}
a:nth-child(3) button.RecipeButton {
background: #219d00;
border-color: #219d00;
}
a:nth-child(3) button.RecipeButton:hover {
background: #fff;
color: #219d00;
border-color: #219d00;
}

@media only screen and (max-width: 768px) {
#PageWrapper .Recipe h2 {
font-size: 24px;
}
#PageWrapper .Recipe h3 {
clear: both;
}
.RecipeImage {
margin-bottom: 0;
}
}

@media only screen and (max-width: 500px) {
.RecipeImage {
width: 140px !important;
width: 160px !important;
}
.Recipe .column_0,
.Recipe .column_1 {
border-bottom: 0;
border-right: 0;
width: 50% !important;
}
.Recipe .column_2 {
width: 100% !important;
}
button.RecipeButton {
font-size: 12px;
}
}

@media only screen and (max-width: 400px) {
.Recipe {
padding-left: 15px !important;
padding-right: 15px !important;
}
/*
.Recipe::before {
top: -36px;
left: calc(50% - 95px);
border-radius: 5px 5px 0 0;
padding: 10px 15px 8px;
box-sizing: border-box;
width: 190px;
height: auto;
font-size: 16px;
}
*/
.RecipeImage {
float: none;
margin: 0 auto;
width: 200px !important;
}
#PageWrapper .Recipe h2 {
clear: both;
margin-top: 15px;
}
button.RecipeButton {
font-size: 14px;
}
}

@media only screen and (max-width: 359px) {
#ContentColumn .Liner .Recipe {
background: #fff;
margin: 3em -10px 1em;
padding: 20px 10px !important;
border-top: 3px solid #000 !important;
border-radius: 5px;
border-bottom: 1px solid #ddd !important;
}
}

/* --- RECIPE NUMBERED LISTS --- */

#ContentColumn ol > li {
list-style-type: none;
position: relative;
}

#ContentColumn ol > li::before {
content: counter(list-item);
position: absolute;
left: -32px;
top: 6px;
width: 24px;
height: 24px;
background: #e02229;
border-radius: 50%;
color: #fff;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Figtree', Arial, sans-serif;
}

#ContentColumn .Recipe ol > li::before {
top: 3px;
}

#ContentColumn .BreadcrumbBlock ol > li {
list-style-type: decimal;
}
#ContentColumn .BreadcrumbBlock ol > li::before {
color: #ada9a5;
content: ">";
margin-left: 2px;
margin-right: 5px;
position: initial;
left: initial;
top: initial;
width: initial;
height: initial;
border-radius: initial;
font-size: 14px;
font-weight: initial;
display: initial;
background: none;
}
#ContentColumn .BreadcrumbBlock ol > li:first-child::before {
display: none;
}

@media only screen and (max-width: 768px) {
#ContentColumn ol > li::before {
top: 5px;
font-size: 13px;
}
}

@media only screen and (max-width: 600px) {
#ContentColumn ol > li::before {
top: 4px;
width: 23px;
height: 23px;
font-size: 12px;
}
}

/* --- ADDING CHECKBOXES TO RECIPE CARDS --- */

.Recipe ul {
list-style: none;
padding: 0;
}

#ContentColumn .Recipe ul li {
padding-top: 0;
padding-bottom: 0;
}

.Recipe ul li {
margin: 10px 0;
display: flex;
align-items: flex-start;
gap: 8px;
}

#ContentColumn .Recipe ul li, 
#ContentColumn .Recipe ul li label {
margin: 5px 0;
display: flex;
align-items: flex-start;
gap: 8px;
}

#ContentColumn .Recipe ol {
list-style-position: outside;
padding-left: 1.2em;
}

#ContentColumn .Recipe ol li {
margin: 10px 0;
}

.Recipe .text {
margin-right: 4px;
line-height: 1.4;
word-break: break-word;
flex: 1;
}

.Recipe .checkbox-wrapper {
display: inline-flex;
align-items: center;
padding: 8px;
margin: -8px;
cursor: pointer;
}

.Recipe input[type="checkbox"] {
cursor: pointer;
margin-top: 0;
bottom: 2px;
position: relative;
}

.Recipe ol input[type="checkbox"] {
margin: 0 8px 0 3px;
}

.Recipe ul input[type="checkbox"] {
margin: 10px 0 0 8px;
}

.Recipe ul li.completed .text,
.Recipe ol li.completed .text {
text-decoration: line-through;
text-decoration-color: #c5181e !important;
text-decoration-thickness: 2px !important;
color: #666;
}

.Recipe li.completed .text a {
color: #666;
}

.Recipe table::after {
content: "Track progress by clicking on each line or by using the checkboxes";
margin: 30px 0 0;
background: #fbe587;
color: #000;
font-size: 16px;
padding: 8px 15px;
border-radius: 3px;
letter-spacing: 0.01em;
display: inline-block;
font-family: Georgia;
font-style: italic;
}

/* --- FAQ CONTAINER --- */

.FAQContainer {
margin: 1em 0 2em;
padding: 0;
}

.FAQContainer details {
margin-bottom: 0.5em;
}

.FAQContainer details summary {
background: none;
cursor: pointer;
padding: 0.4em 1em;
box-sizing: border-box;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
transition: ease all 500ms;
border: 1px solid #d9c7b9;
border-radius: 2px;
}

.FAQContainer .AccordionContainer summary .AccordionHeader::before {
display: none;
}

.FAQContainer details summary:hover {
background: #ead9cd !important;
}

.FAQContainer details[open] summary {
background: #fff;
color: #333;
border-bottom: 0;
border-radius: 2px 2px 0 0;
}

.FAQContainer details[open] summary:hover {
background: #ead9cd !important;
color: #000;
}

.FAQContainer details p {
margin: 0.75em 0;
}

.FAQContainer .AccordionContainer summary p {
margin: 0.25em 0;
}

.FAQContainer .AccordionContainer summary {
font-size: 22px;
padding: 0.5em 1em;
margin: 0;
background: #e6d7cc;
}

.FAQContainer details summary::after,
.FAQContainer details[open] summary::after {
font-size: 26px;
font-family: monospace;
color: #333;
content: "+";
transition: ease all 450ms;
line-height: 1;
width: 40px;
height: 40px;
border-radius: 100px;
text-align: center;
line-height: 40px;
}

.FAQContainer details summary::after {
transform: rotate(0deg);
color: #333;
}

.FAQContainer details summary:hover::after {
color: #000;
}

.FAQContainer details[open] summary::after {
transform: rotate(315deg);
color: #333;
}

.FAQContainer details[open] summary:hover::after {
color: #000;
}

.FAQContainer details .AccordionContent {
border: 1px solid #d9c7b9;
border-top: 0;
padding: 0.25em 1.25em;
transition: ease all 500ms;
border-radius: 0 0 2px 2px;
background: #fff;
}

#PageWrapper .FAQContainer .AccordionContainer summary {
border-bottom-width: 1px;
}

/* ---- SIGNATURE IMAGE BLOCK --- */

#PageWrapper .Signature .ImageBlock {
margin: -1em 0 2em 0;
}

/* --- EXPAND BOX --- */

div[class*='Expand'] {
margin: 2em 0;
background: #f0efed;
display: table;
border-radius: 2px;
padding: 20px 30px 0;
position: relative;
width: 100%;
box-sizing: border-box;
transition: ease all 300ms;
}

div[class*='Expand'].tshow {
padding-bottom: 15px;
}

#PageWrapper div[class*='Expand'] h4 {
display: table;
font-weight: 700;
font-size: 30px;
box-sizing: border-box;
border-bottom: 1px solid #0002;
border-radius: 2px 2px 0 0;
padding: 15px 30px;
margin: -20px -30px 5px;
text-transform: none;
letter-spacing: 0;
width: calc(100% + 60px);
cursor: pointer;
background: #e6e3de;
}

#PageWrapper div[class*='Expand'] h4:hover,
#PageWrapper div[class*='Expand'].tshow h4 {
color: #fff;
transition: ease all 300ms;
background: #c0212f;
}

#PageWrapper div[class*='Expand'] h4::after {
content: '+';
float: right;
}

#PageWrapper div[class*='Expand'].tshow h4::after {
content: '-';
}

#ContentColumn div[class*='Expand'] ul {
list-style-type: none;
margin: 0;
padding: 0;
}

#ContentColumn div[class*='Expand'] ul li,
#ContentColumn div[class*='Expand'] p {
font-size: 18px;
color: #222;
margin: 0.5em 0;
}

#ContentColumn div[class*='Expand'] a:link,
#ContentColumn div[class*='Expand'] a:visited {
color: #444;
font-size: 18px;
}

#ContentColumn div[class*='Expand'] a:hover {
color: #d35400;
}

div[class*='Expand']:after {
background: rgb(255,255,255);
background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 16%, rgba(255,255,255,1) 67%);
background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 16%, rgba(255,255,255,1) 67%);
background: linear-gradient(180deg, rgba(255,255,255,0) 16%, rgba(255,255,255,1) 67%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
content: "";
height: 120px;
width: calc(100% + 60px);
width: 100%;
display: table;
border-radius: 0;
left: -30px;
left: 0;
bottom: -15px;
position: absolute;
transition: ease background 300ms;
}

.expand-content {
display: block;
position: relative;
overflow: hidden;
max-height: 100px;
width: 100%;
transition: ease all 300ms;
}

.tshow {
max-height: initial;
}

div[class*='Expand'].tshow:after {
background: none;
height: 0;
transition: ease all 300ms;
}

.expand-content.tshow {
max-height: initial;
transition: ease all 300ms;
}

/* --- HIGHLIGHT BOX --- */

.HighlightBox { 
background: #f9e6b1;
border-radius: 5px;
padding: 6px 5% 30px;
clear: both;
width: 100%;
display: table;
}

#PageWrapper .HighlightBox h2 u,
#PageWrapper .HighlightBox h3 u {
text-decoration: none;
background: #FFE70F;
}

/* --- OUTLINED CALLOUT BOX --- */

#PageWrapper .CalloutBox.Outlined {
background: none;
border: 1px solid #ccc;
width: 90%;
max-width: 700px;
border-radius: 10px;
}

/* --- WHAT'S NEW --- */

#PageWrapper .WhatsNew {
padding: 0 0 20px;
background: none;
border: 0;
}

.WhatsNew-subscribe {
top: 15px;
right: 23px;
}

#PageWrapper .WhatsNew ol {
margin: 0;
display: flex;
align-items: normal;
flex-wrap: wrap;
padding: 0 0 5%;
column-gap: 5%;
clear: both;
}

#PageWrapper .WhatsNew-subscribe ul {
background: #ffce00;
}

#PageWrapper .WhatsNew ul li {
display: block;
text-align: left;
line-height: 1;
}

#PageWrapper .WhatsNew ol li {
width: 30%;
border: 0;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}

.WhatsNew ol li {
list-styl-type: none !important;
}

.WhatsNew ol li::before {
display: none !important;
}

#PageWrapper .WhatsNew h2 {
margin: 0 -20px;
padding: 15px;
background-color: transparent;
border-radius: 10px 10px 0 0;
text-align: left;
}

#PageWrapper .WhatsNew h3 {
order: 3;
margin: 10px 0;
text-align: left;
font-size: 20px;
}

.WhatsNew .blogItThumbnail {
order: 1;
text-align: left;
margin: 10px 0 0;
}

.WhatsNew-time {
order: 2;
margin: 0;
width: 100%;
}

.WhatsNew .WhatsNew-content {
order: 4;
text-align: center;
width: 100%;
max-width: 320px;
font-size: 18px;
margin: 5px 0;
}

.WhatsNew .WhatsNew-content::after {
content: "...";
}

#PageWrapper .WhatsNew .WhatsNew-more {
order: 5;
text-align: left;
margin-bottom: 30px;
}

#PageWrapper .WhatsNew .WhatsNew-more a::after {
content: " >"
}

#PageWrapper .WhatsNew .WhatsNew-more a:link,
#PageWrapper .WhatsNew .WhatsNew-more a:visited,
#PageWrapper .WhatsNew .WhatsNew-more a:hover {
display: inline-block;
padding: 6px 20px 6px;
border-radius: 100px;
text-decoration: none;
text-transform: none;
font-size: 16px;
font-weight: normal;
color: #fff;
letter-spacing: 0.02em;
background: #c5181e;
border: 2px solid #c5181e;
}

#PageWrapper .WhatsNew .WhatsNew-more a:hover {
color: #c5181e;
background: none;
}

@media only screen and (max-width: 768px) {
#PageWrapper .WhatsNew-subscribe ul {
background: none;
display: flex;
}
}

@media only screen and (max-width: 700px) {
#PageWrapper .WhatsNew ol li {
width: 47%;
}
}

@media only screen and (max-width: 400px) {
#PageWrapper .WhatsNew ol li {
width: 100%;
}
}

/* -- BACK TO TOP -- */

a.Top {
position: absolute;
top: 0;
}

a.TopArrow:link,
a.TopArrow:visited,
a.TopArrow:hover {
display: block;
content: "";
height: 30px;
width: 30px;
background: url('image-files/back-to-top-2.png') no-repeat transparent center center;
background-size: 30px 30px;
}

a.TopArrow:hover {
opacity: 0.7;
}

a.TopArrow:target {
opacity: 1;
}

/* --- GROW ME RECOMMENDED --- */

#grow-me-in-content-recs-root {
clear: both;
padding-top: 4em !important;
float: left !important;
width: 100% !important;
}

@media only screen and (max-width: 1023px) {
#grow-me-in-content-recs-root {
padding-top: 1em !important;
}
}

/* --- FOOTER ABOUT --- */

#PageWrapper .FooterAbout .ImageBlock {
margin: 0 0 -8px;
}

.FooterAbout .responsive-row {
display: flex;
align-items: flex-end;
}

#PageWrapper .FooterAbout .responsive-row div[class*="responsive_col-"] {
padding: 0;
}

.FooterAboutText {
padding: 0 15% 30px 0;
display: table;
text-align: left;
}

#PageWrapper #Footer .Liner .FooterAbout p,
#PageWrapper #SecondFooter .Liner .FooterAbout p {
margin: 0 0 11px;
font-size: 17px;
font-weight: bold;
color: #333;
}

@media only screen and (max-width: 1024px) {
.FooterAbout {
width: 100%;
margin: 0 auto;
max-width: 580px;
}
.FooterAbout .responsive-row {
display: flex;
align-items: center;
flex-direction: column-reverse;
}
#PageWrapper .FooterAbout .responsive-row div[class*="responsive_col-"] {
width: 100% !important;
}
.FooterAboutText {
padding: 0;
}
}

@media only screen and (max-width: 768px) {
#PageWrapper .FooterAbout .ImageBlock {
margin: 0 0 -10px;
max-width: 250px;
}
#PageWrapper .FooterAbout .FooterAboutText .ImageBlock {
margin: 0;
}
}

/* --- FOOTER LINKS --- */

.FooterLinksWrapper {
background: #ca0910;
clear: both;
width: 100%;
display: table;
}

.FooterLinks {
max-width: 1100px;
padding: 65px 50px 60px;
box-sizing: border-box;
margin: 0 auto;
text-align: center;
display: table;
width: 100%;
box-sizing: border-box;
}

#PageWrapper .FooterLinks h4 {
display: block;
width: 100%;
background: #ddd5cd;
padding: 10px 15px 9px;
border-radius: 4px;
box-sizing: border-box;
color: #333;
font-family: 'Figtree', Arial, sans-serif;
font-style: normal;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 15px;
margin: 0 0 20px;
}

.FooterLinks p {
font-size: 16px;
margin: 5px 0;
}

.FooterLinks p a:link,
.FooterLinks p a:visited,
.FooterLinks p a:hover {
text-decoration: none;
text-underline-offset: 0.3rem;
text-decoration-thickness: 0.07em !important;
font-weight: 400 !important;
letter-spacing: 0.02em;
color: #fff;
}

.FooterLinks p a:hover {
text-decoration: underline;
}

.FooterLinks p b {
font-weight: 400 !important;
}

@media only screen and (max-width: 640px) {
.FooterLinks {
padding: 55px 50px 50px;
}
#PageWrapper .FooterLinks .responsive-row div[class*="responsive_col-"] {
width: 100% !important;
}
#PageWrapper .FooterLinks h4 {
margin: 20px 0;
}
}

/* --- FOOTER COPYRIGHT --- */

.FooterCopyrightWrapper {
clear: both;
width: 100%;
display: table;
background: #2e2c2a;
}

.FooterCopyright {
max-width: 1300px;
padding: 50px 50px 40px;
box-sizing: border-box;
margin: 0 auto;
}

.FooterCopyright p {
font-size: 13px;
color: #bdbab2;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 10px 0;
text-align: center;
}

.FooterCopyright p a:link,
.FooterCopyright p a:visited,
.FooterCopyright p a:hover {
color: #bdbab2;
text-decoration: underline;
font-weight: bold;
text-underline-offset: 0.3rem;
text-decoration-thickness: 0.07em !important;
}

.FooterCopyright p a:hover {
color: #fff;
}

.Disclosure {
margin: 40px 0;
}

.FooterCopyright .Disclosure p {
font-size: 16px;
text-transform: none;
letter-spacing: 0;
}

/* -- BOUNCING ANIMATION STYLE -- */

@keyframes float {
0% { transform: translateY(0); }
50% { transform: translateY(-3px); }
100% { transform: translateY(0); }
}

/* --- DOMAIN BUTTONS --- */

.DomainButtons {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 32px;
width: 100%;
box-sizing: border-box;
padding: 5px 15px 0;
display: table;
background: #c10007;
z-index: 9999999999;
}

#ContentColumn .DomainButtons ul {
list-style-type: none;
margin: 0 auto;
padding: 4px 30px 0;
width: 100%;
display: flex;
justify-content: left;
column-gap: 5px;
max-width: 1400px;
box-sizing: border-box;
}

#ContentColumn .DomainButtons ul li {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 12px;
letter-spacing: 0.07em;
background: none;
}

#ContentColumn .DomainButtons em,
#ContentColumn .DomainButtons a:link,
#ContentColumn .DomainButtons a:visited,
#ContentColumn .DomainButtons a:hover {
color: #fff;
text-decoration: none;
border-radius: 4px 4px 0 0;
padding: 7px 10px;
transition: ease all 200ms;
text-transform: uppercase;
}

#ContentColumn .DomainButtons a:hover {
background: #d7ccc3;
background: #fff;
color: #000;
transition: ease all 300ms;
}

#ContentColumn .DomainButtons em {
font-style: normal;
background: #fff7f1;
color: #333;
}

#PageWrapper div.HorizontalNavBar ul .li1:last-child a:hover {
color: #333;
}

@media only screen and (max-width: 1000px) {
#ContentColumn .DomainButtons ul {
padding: 4px 20px 0;
}
}

@media only screen and (max-width: 768px) {
.DomainButtons {
position: fixed;
}
#ContentColumn .DomainButtons ul {
padding: 4px 0 0;
}
}

@media only screen and (max-width: 450px) {
.DomainButtons {
padding: 5px 0 0;
}
#ContentColumn .DomainButtons ul {
justify-content: center;
padding: 3px 8px 3px 0;
column-gap: 8px;
}
#ContentColumn .DomainButtons ul li {
letter-spacing: 0;
}
#ContentColumn .DomainButtons em,
#ContentColumn .DomainButtons a:link,
#ContentColumn .DomainButtons a:visited,
#ContentColumn .DomainButtons a:hover {
padding: 8px 5px 9px;
border-radius: 5px 5px 0 0;
}
.DomainButtons ul li:nth-child(1) em {
border-radius: 5px 5px 0 0 !important;
padding: 8px 10px 9px !important;
}
}

#PageWrapper #HeaderWrapper #Header {
padding-top: 30px !important;
}

/* --- HIDING MEDIAVINE-RELATED BANNER IMAGES IF AD-BLOCKER IN USE --- */

.mv-ad-banner {
visibility: hidden;  /* Initially hidden but still takes up space */
opacity: 0;
transition: opacity 0.3s ease-in-out;
}

/* --- FEATURED RECIPES --- */

.FeaturedRecipe {
clear: both;
display: table;
width: 100%;
position: relative;
margin: 3.5em auto;
}

.FeaturedRecipe::after {
position: absolute;
top: -10px;
left: 30px;
content: "Featured Recipe";
color: #000;
background: #fff7f1;
border-radius: 2px;
text-transform: uppercase;
letter-spacing: .07em;
padding: 10px 15px 8px;
display: table;
font-size: 12px;
font-style: normal;
font-family: 'Figtree',Arial,sans-serif;
}

.FeaturedRecipe.Article::after {
content: "Featured Article";
}

#PageWrapper .FeaturedRecipe .ImageBlock {
position: relative;
}

#PageWrapper .FeaturedRecipe .ImageBlock .Caption {
display: block;
position: absolute;
bottom: 40px;
right: -30px;
background: #fff !important;
color: #000;
padding: 6px 30px 6px 18px;
border-radius: 2px 0 0 2px;
font-size: 18px;
text-transform: none;
letter-spacing: 0.01em;
font-weight: 400;
font-style: italic;
font-family: 'Source Serif 4', Georgia, sans-serif;
transition: ease all 500ms;
border: 0 !important;
}

#PageWrapper .FeaturedRecipe .ImageBlock .Caption:hover,
#PageWrapper .FeaturedRecipe .ImageBlock a:hover .Caption,
#PageWrapper .FeaturedRecipe .ImageBlock a img:hover .Caption {
color: #e02229;
border-radius: 10px 0 0 10px;
padding-right: 15px;
transition: ease all 500ms;
}

#PageWrapper .FeaturedRecipe .ImageBlock,
#PageWrapper .FeaturedRecipe .ImageBlock img {
border: 0 !important;
background: none !important;
border-radius: 4px;
transition: ease all 500ms;
}

#PageWrapper .FeaturedRecipe .ImageBlock a:hover,
#PageWrapper .FeaturedRecipe .ImageBlock a img:hover {
border-radius: 25px;
transition: ease all 250ms;
}

#PageWrapper .FeaturedRecipe .responsive-row {
display: flex;
column-gap: 4%;
}

#PageWrapper .FeaturedRecipe .responsive-row div[class*="responsive_col-"] {
padding: 0 !important
}

@media only screen and (max-width: 700px) {
#PageWrapper .FeaturedRecipe .responsive-row {
display: block;
}
#PageWrapper .FeaturedRecipe .responsive-row div[class*="responsive_col-"] {
padding: 0 !important;
width: 100%;
max-width: 500px;
margin: 0 auto;
float: none;
clear: both;
}
#PageWrapper .FeaturedRecipe .ImageBlock .Caption {
display: block;
position: relative;
bottom: 0;
border-radius: 0 0 2px 2px;
text-align: center;
width: 100%;
}
#PageWrapper .FeaturedRecipe .ImageBlock .Caption:hover,
#PageWrapper .FeaturedRecipe .ImageBlock a:hover .Caption,
#PageWrapper .FeaturedRecipe .ImageBlock a img:hover .Caption {
padding: 6px 18px 6px;
border-radius: 0 0 2px 2px;
}
}

/* --- TABLE OF CONTENTS --- */

.TableOfContents {
background: #f5eee8;
display: table;
width: 100%;
padding: 10px 5% 1em;
border-radius: 10px;
}

#ContentColumn .TableOfContents li {
font-size: 18px;
}

/* --- PIN IT --- */

#PageWrapper .pinit {
display: table;
margin: 0 auto;
}

/* --- WIDE BANNER --- */

.WideBanner {
clear: both;
display: table;
margin: 2em -2000px 3em;
padding: 2em 2050px;
box-sizing: border-box;
background: #f5eee8;
}

#PageWrapper .WideBanner .ImageBlock img {
border-radius: 500px;
margin: 0 4% 2px;
}

#PageWrapper .WideBanner .ImageBlock a:hover img,
#PageWrapper .WideBanner .ImageBlock a img:hover {
border-radius: 500px;
}

#PageWrapper .WideBanner .ImageBlockRight .Caption {
margin-left: 4%;
font-weight: 400;
font-size: 12px;
}

#PageWrapper .WideBanner .ImageBlockRight .Caption b {
font-size: 14px;
}

.WideBanner .CustomTestimonials {
margin: 2em 0 1em;
}

#PageWrapper .WideBanner h2 {
font-family: 'Figtree', Arial, sans-serif;
font-size: 60px;
letter-spacing: -0.06em;
line-height: 0.9;
margin: 0.5em 0;
}

@media only screen and (max-width: 1024px) {
.WideBanner {
padding: 2em 2000px;
}
}

@media only screen and (max-width: 447px) {
#PageWrapper .WideBanner .ImageBlockRight .Caption {
margin-left: auto;
}
#PageWrapper .WideBanner .ImageBlock img {
margin: 0 auto 2px;
}
}

/* --- YOUTUBE ELEMENT --- */

#PageWrapper .MediaBlockCenter {
width: auto !important;
}

/* --- LARGE PHOTO GRID --- */

.LargePhotoGrid,
.SmallPhotoGrid {
display: flex;
column-gap: 40px;
row-gap: 20px;
flex-wrap: wrap;
justify-content: flex-start;
margin: 2em auto;
}

.LargePhotoGrid.Center,
.SmallPhotoGrid.Center {
justify-content: center;
}

#PageWrapper .LargePhotoGrid div,
#PageWrapper .SmallPhotoGrid div {
max-width: calc(19% - 20px);
transition: ease all 250ms;
margin-bottom: 0;
}

#PageWrapper .LargePhotoGrid div {
max-width: calc(24% - 20px);
}

#PageWrapper .LargePhotoGrid.Center div,
#PageWrapper .SmallPhotoGrid.Center div {
max-width: calc(24% - 20px);
}

.LargePhotoGrid > div,
.SmallPhotoGrid > div {
transition: opacity 0.3s ease, visibility 0.3s ease;
opacity: 1;
visibility: visible;
pointer-events: auto;
height: auto;
margin: initial;
padding: initial;
overflow: visible;
}

.LargePhotoGrid > div.hidden,
.SmallPhotoGrid > div.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
position: absolute;
height: 0 !important;
width: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}

#PageWrapper .LargePhotoGrid div div,
#PageWrapper .SmallPhotoGrid div div,
#PageWrapper .LargePhotoGrid.Center div div,
#PageWrapper .SmallPhotoGrid.Center div div {
max-width: 100%;
width: 100%;
transition: ease all 250ms;
}

#PageWrapper .LargePhotoGrid .ImageBlock,
#PageWrapper .SmallPhotoGrid .ImageBlock {
max-width: 100%;
transition: ease all 250ms;
}

#PageWrapper .LargePhotoGrid .ImageBlock img,
#PageWrapper .SmallPhotoGrid .ImageBlock img {
border: none !important;
background: none !important;
aspect-ratio: 1 / 1;
object-fit: cover;
}

#PageWrapper .LargePhotoGrid h3,
#PageWrapper .SmallPhotoGrid h3 {
font-size: 20px;
margin: 0;
padding: 0;
transition: ease all 250ms;
}

#PageWrapper .LargePhotoGrid .Caption,
#PageWrapper .SmallPhotoGrid .Caption {
border: none !important;
background: none !important;
font-size: 14px;
text-transform: none;
letter-spacing: 0.02em;
line-height: 1.4;
font-weight: 400;
}

#PageWrapper .LargePhotoGrid .Caption,
#ContentColumn .LargePhotoGrid a:link span.Caption,
#ContentColumn .LargePhotoGrid a:visited span.Caption,
#ContentColumn .LargePhotoGrid a:hover span.Caption,
#PageWrapper .SmallPhotoGrid .Caption,
#ContentColumn .SmallPhotoGrid a:link span.Caption,
#ContentColumn .SmallPhotoGrid a:visited span.Caption,
#ContentColumn .SmallPhotoGrid a:hover span.Caption {
padding-top: 5px;
width: calc(100% - 20px);
text-align: left !important;
transition: ease all 250ms;
}

#PageWrapper .LargePhotoGrid .Caption b,
#PageWrapper .SmallPhotoGrid .Caption b {
font-size: 24px;
font-family: 'Source Serif 4';
letter-spacing: -0.03em;
text-transform: none;
line-height: 1.1;
color: #222;
display: inline-block;
padding-bottom: 5px;
}

.LargePhotoGrid .Caption div,
.SmallPhotoGrid .Caption div {
margin-top: -5px;
box-sizing: border-box;
color: #555;
font-size: 16px;
padding: 0;
width: 100%;
transition: ease all 250ms;
letter-spacing: 0;
}

#PageWrapper .LargePhotoGrid .Caption:hover h3,
#PageWrapper .LargePhotoGrid img:hover .Caption h3,
#PageWrapper .LargePhotoGrid a:hover .Caption h3,
#PageWrapper .SmallPhotoGrid .Caption:hover h3,
#PageWrapper .SmallPhotoGrid img:hover .Caption h3,
#PageWrapper .SmallPhotoGrid a:hover .Caption h3 {
color: #e02229;
transition: ease all 250ms;
}

#PageWrapper .LargePhotoGrid .Caption:hover, 
#PageWrapper .LargePhotoGrid img:hover .Caption,
#PageWrapper .LargePhotoGrid a:hover .Caption,
#PageWrapper .SmallPhotoGrid .Caption:hover,
#PageWrapper .SmallPhotoGrid img:hover .Caption,
#PageWrapper .SmallPhotoGrid a:hover .Caption {
color: #e02229 !important;
}

#PageWrapper .LargePhotoGrid .Caption b:hover, 
#PageWrapper .LargePhotoGrid img:hover .Caption b,
#PageWrapper .LargePhotoGrid a:hover .Caption b,
#PageWrapper .SmallPhotoGrid .Caption b:hover, 
#PageWrapper .SmallPhotoGrid img:hover .Caption b,
#PageWrapper .SmallPhotoGrid a:hover .Caption b {
color: #222 !important;
}

#ContentColumn .LargePhotoGrid a:hover span.Caption,
#ContentColumn .LargePhotoGrid .ImageBlock a:hover,
#ContentColumn .SmallPhotoGrid a:hover span.Caption,
#ContentColumn .SmallPhotoGrid .ImageBlock a:hover {
transition: ease all 250ms;
}

/*
#PageWrapper .LargePhotoGrid .ImageBlock a:hover .Caption,
#ContentColumn .LargePhotoGrid .ImageBlock a:hover a:link span.Caption,
#ContentColumn .LargePhotoGrid .ImageBlock a:hover a:visited span.Caption,
#ContentColumn .LargePhotoGrid .ImageBlock a:hover a:hover span.Caption,
#PageWrapper .SmallPhotoGrid .ImageBlock a:hover .Caption,
#ContentColumn .SmallPhotoGrid .ImageBlock a:hover a:link span.Caption,
#ContentColumn .SmallPhotoGrid .ImageBlock a:hover a:visited span.Caption,
#ContentColumn .SmallPhotoGrid .ImageBlock a:hover a:hover span.Caption {
padding-top: 11px;
transition: ease all 250ms;
}
#ContentColumn .LargePhotoGrid .ImageBlock a:hover .Caption div,
#ContentColumn .SmallPhotoGrid .ImageBlock a:hover .Caption div {
margin-top: -4px;
transition: ease all 250ms;
}
*/

#PageWrapper .PhotoGrid a .Caption, 
#PageWrapper .PhotoGrid a img .Caption,
#PageWrapper .PhotoGrid a {
cursor: pointer;
font-size: 16px;
letter-spacing: 0.03em !important;
font-weight: 400 !important;
text-transform: none !important;
}

.LargePhotoGrid .Caption,
.SmallPhotoGrid .Caption {
position: relative;
max-height: 140px;
overflow: hidden;
margin: 0 auto 10px;
}

.LargePhotoGrid .Caption div,
.SmallPhotoGrid .Caption div {
padding-bottom: 80px;
text-transform: none;
font-weight: normal;
text-align: left;
padding-top: 3px;
font-family: 'Source Serif 4', Georgia, sans-serif;
width: 80%;
margin: 0 auto;
color: #a4090f;
color: #555;
}

#PageWrapper .LargePhotoGrid .Caption:hover div,
#PageWrapper .LargePhotoGrid img:hover .Caption div,
#PageWrapper .LargePhotoGrid a:hover .Caption div,
#PageWrapper .SmallPhotoGrid .Caption:hover div,
#PageWrapper .SmallPhotoGrid img:hover .Caption div,
#PageWrapper .SmallPhotoGrid a:hover .Caption div {
color: #e02229;
}

.LargePhotoGrid .Caption::after,
.SmallPhotoGrid .Caption::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 80px;
background: linear-gradient(to bottom, transparent, white);
pointer-events: none;
}

@media only screen and (max-width: 1100px) {
#PageWrapper .LargePhotoGrid div {
max-width: calc(24% - 22px);
}
#PageWrapper .SmallPhotoGrid div {
max-width: calc(19% - 22px);
}
#PageWrapper .LargePhotoGrid.Center div,
#PageWrapper .SmallPhotoGrid.Center div {
max-width: calc(24% - 22px);
}
#PageWrapper .LargePhotoGrid .Caption b,
#PageWrapper .SmallPhotoGrid .Caption b {
font-size: 19px;
line-height: 1.1;
padding-bottom: 4px;
}
}

@media only screen and (max-width: 900px) {
#PageWrapper .LargePhotoGrid div,
#PageWrapper .SmallPhotoGrid div,
#PageWrapper .LargePhotoGrid.Center div,
#PageWrapper .SmallPhotoGrid.Center div {
max-width: calc(33.33% - 27px);
}
}

@media only screen and (max-width: 800px) {
.LargePhotoGrid .Caption div,
.SmallPhotoGrid .Caption div {
width: 90%;
}
}

@media only screen and (max-width: 768px) {
#PageWrapper .LargePhotoGrid .Caption,
#PageWrapper .SmallPhotoGrid .Caption {
word-break: break-word;
}
#PageWrapper .LargePhotoGrid .Caption b,
#PageWrapper .SmallPhotoGrid .Caption b {
font-size: 18px;
line-height: 1.2;
padding-bottom: 2px;
}
}

@media only screen and (max-width: 720px) {
#PageWrapper .LargePhotoGrid div,
#PageWrapper .SmallPhotoGrid div,
#PageWrapper .LargePhotoGrid.Center div,
#PageWrapper .SmallPhotoGrid.Center div  {
max-width: calc(50% - 20px);
}
}

@media only screen and (max-width: 500px) {
.LargePhotoGrid ,
.SmallPhotoGrid {
column-gap: 20px;
}
#PageWrapper .LargePhotoGrid div,
#PageWrapper .SmallPhotoGrid div,
#PageWrapper .LargePhotoGrid.Center div,
#PageWrapper .SmallPhotoGrid.Center div {
max-width: calc(50% - 10px);
}
}

@media only screen and (max-width: 400px) {
.LargePhotoGrid,
.SmallPhotoGrid {
column-gap: 10px;
}
#PageWrapper .LargePhotoGrid div,
#PageWrapper .SmallPhotoGrid div,
#PageWrapper .LargePhotoGrid.Center div,
#PageWrapper .SmallPhotoGrid.Center div {
max-width: 100%;
}
}

/* --- LARGE PHOTO GRID FILTERING BUTTONS --- */

.Starter .ImageBlock a,
.Soup .ImageBlock a,
.Meat .ImageBlock a,
.Side .ImageBlock a,
.Salad .ImageBlock a,
.Bread .ImageBlock a,
.Dessert .ImageBlock a {
position: relative;
}

.Starter .ImageBlock a::after,
.Soup .ImageBlock a::after,
.Meat .ImageBlock a::after,
.Side .ImageBlock a::after,
.Salad .ImageBlock a::after,
.Bread .ImageBlock a::after,
.Dessert .ImageBlock a::after {
position: absolute;
content: " ";
text-transform: uppercase;
font-family: 'Figtree', Arial, sans-serif;
font-size: 12px;
font-weight: bold;
background: #ffce00;
color: #000;
letter-spacing: 0.06em;
padding: 6px 12px 5px 12px;
border-radius: 100px;
top: -15px;
left: 17px;
transition: ease all 250ms;
}

.Starter .ImageBlock a::after {
content: "Starter";
background: #fff;
color: #333;
border: 1px solid #333;
background: #333;
color: #fff;
}

.Soup .ImageBlock a::after {
content: "Soup";
background: #fff;
color: #f18420;
border: 1px solid #f18420;
background: #f18420;
color: #fff;
}

.Meat .ImageBlock a::after {
content: "Meat";
background: #fff;
color: #e02229;
border: 1px solid #e02229;
background: #e02229;
color: #fff;
}

.Side .ImageBlock a::after {
content: "Side";
background: #fff;
color: #045db5;
border: 1px solid #045db5;
background: #045db5;
color: #fff;
}

.Salad .ImageBlock a::after {
content: "Salad";
background: #fff;
color: #e02229;
border: 1px solid #71ad00;
background: #71ad00;
color: #fff;
}

.Bread .ImageBlock a::after {
content: "Bread";
background: #fff;
color: #27b19d;
border: 1px solid #913f33;
background: #913f33;
color: #fff;
}

.Dessert .ImageBlock a::after {
content: "Dessert";
background: #fff;
color: #e6ba02;
border: 1px solid #ad249c;
background: #ad249c;
color: #fff;
}

.FilterButtons {
margin: -0.5em auto 2em;
text-align: center;
}

.FilterButtons button {
margin: 4px;
border-radius: 100px;
padding: 7px 15px 6px;
font-family: 'Figtree', Arial, sans-serif;
text-transform: uppercase;
letter-spacing: 0.04em;
cursor: pointer;
border: 1px solid #444;
background: none;
transition: ease all 250ms;
color: #444;
font-size: 13px;
font-weight: bold;
border: 1px solid #fff;
}

.FilterButtons .BreadButton {
border-color: #913f33;
color: #913f33;
background: #fff;
}
.FilterButtons .BreadButton:hover {
background: #913f3322;
}
.FilterButtons .BreadButton.active {
background: #913f33;
color: #fff;
}

.FilterButtons .SoupButton {
border-color: #f18421;
color: #f18421;
background: #fff;
}
.FilterButtons .SoupButton:hover {
background: #f1842122;
}
.FilterButtons .SoupButton.active {
background: #f18421;
color: #fff;
}

.FilterButtons .MeatButton {
border-color: #e02229;
color: #e02229;
background: #fff;
}
.FilterButtons .MeatButton:hover {
background: #e0222922;
}
.FilterButtons .MeatButton.active {
background: #e02229;
color: #fff;
}

.FilterButtons .SideButton {
border-color: #045db5;
color: #045db5;
background: #fff;
}
.FilterButtons .SideButton:hover {
background: #045db522;
}
.FilterButtons .SideButton.active {
background: #045db5;
color: #fff;
}

.FilterButtons .SaladButton {
border-color: #71ad01;
color: #71ad01;
background: #fff;
}
.FilterButtons .SaladButton:hover {
background: #71ad0122;
}
.FilterButtons .SaladButton.active {
background: #71ad01;
color: #fff;
}

.FilterButtons .DessertButton {
border-color: #ad249c;
color: #ad249c;
background: #fff;
}
.FilterButtons .DessertButton:hover {
background: #ad249c22;
}
.FilterButtons .DessertButton.active {
background: #ad249c;
color: #fff;
}

.FilterButtons button.ShowAllButton {
border: 1px dashed #000;
}

.FilterButtons button:hover,
.FilterButtons button.active {
transition: ease all 250ms;
}

.FilterButtons button.ShowAllButton:hover {
border-style: solid;
}

/* -- HIGHLIGHTED TEXT -- */

#ContentColumn p u,
.HomepageBanner p u {
color: #000;
text-decoration: none;
background-image: url('image-files/highlighter-gold.webp');
background-position: -50px 100%;
background-size: calc(120% + 100px) 60px;
background-repeat: no-repeat;
padding: 3px 5px 17px;
font-weight: 400;
font-style: italic;
}

#ContentColumn p u:nth-of-type(2),
#ContentColumn p u:nth-of-type(5),
#ContentColumn p u:nth-of-type(8) {
background-image: url('image-files/highlighter-gold-2.webp');
}

#ContentColumn p u:nth-of-type(3),
#ContentColumn p u:nth-of-type(6),
#ContentColumn p u:nth-of-type(9) {
background-image: url('image-files/highlighter-gold-3.webp');
}

.HomepageBanner p u {
background-image: url('image-files/highlighter-black.webp');
color: #fff;
}

/* -- HOMEPAGE BANNER -- */

.HomepageBannerWrapper {
display: flex;
width: 100%;
min-height: 50vh;
text-align: center;
align-items: flex-end;
position: relative;
overflow: hidden;
}

.HomepageBanner {
display: table;
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding-top: 5em;
position: relative;
z-index: 1;
}

.HomepageBanner .Liner {
width: 100%;
max-width: 1200px;
padding: 2em 1em;
margin: 0 auto;
display: table;
background: #fff;
border-radius: 20px 20px 0 0;
}

#PageWrapper .HomepageBanner h1 {
text-align: center;
font-family: 'Figtree', Helvetica, Arial, sans-serif;
font-weight: 900;
font-size: 80px;
margin: 0;
-webkit-background-clip: text;
-ms-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-ms-text-fill-color: transparent;
text-fill-color: transparent;
background-image: linear-gradient(to right,#ffd700,#e02229 51%,#ffd700);
}

.HomepageBannerWrapper .bg-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transform: scale(1);
transition: opacity 0.8s ease, transform 12s ease;
z-index: 0;
}

.HomepageBannerWrapper .bg-slide.active {
opacity: 1;
transform: scale(1.07);
}

@media only screen and (max-width: 1000px) {
#PageWrapper .HomepageBanner h1 {
font-size: 35px;
}
}

@media only screen and (max-width: 768px) {
.HomepageBanner .responsive-row {
align-items: flex-start;
flex-direction: column;
}
#PageWrapper .HomepageBanner .responsive_col-1 {
background-size: 60%;
margin-bottom: -1em;
min-height: 300px;
}
#PageWrapper .HomepageBanner .responsive-row div[class*="responsive_col-"] {
width: 80%;
}
}

@media only screen and (max-width: 680px) {
#PageWrapper .HomepageBanner .responsive-row div[class*="responsive_col-"] {
width: 100% !important;
}
#PageWrapper .HomepageBanner .responsive_col-1 {
background-size: 50%;
min-height: 280px;
}
}

@media only screen and (max-width: 500px) {
#PageWrapper .HomepageBanner .responsive_col-1 {
background-size: 225px;
min-height: 185px;
}
}

/* -- WITH PIC BESIDE -- */

.PicBeside {
display: flex;
column-gap: 20px;
align-items: center;
margin-bottom: 2em;
}

#PageWrapper .PicBeside .ImageBlock {
width: 180px;
flex-shrink: 0;
}

#PageWrapper .PicBeside img {
border-radius: 300px;
}

/* -- LARGE/SMALL PHOTO GRID -- */

.LargeSmallPhotoGrid {
margin: 3em 0;
}

.LargeSmallPhotoGrid .responsive-row {
display: flex;
column-gap: 20px;
row-gap: 20px;
align-items: center;
}

.SmallGrid {
display: flex;
column-gap: 20px;
row-gap: 20px;
flex-wrap: wrap;
}

#PageWrapper .LargeSmallPhotoGrid .responsive-row div[class*="responsive_col-"] {
padding: 0;
}

#PageWrapper .LargeSmallPhotoGrid .ImageBlock {
position: relative;
line-height: 0;
margin: 0;
border-radius: 10px;
overflow: hidden;
}

#PageWrapper .SmallGrid .ImageBlock {
width: calc(50% - 10px);
}

#ContentColumn .LargeSmallPhotoGrid .Caption,
#ContentColumn .LargeSmallPhotoGrid a .Caption,
.SeasonalBanner .LargeSmallPhotoGrid .Caption,
.SeasonalBanner .LargeSmallPhotoGrid a .Caption {
position: absolute;
background: #f6eee8ee;
bottom: 0;
left: 0;
right: 0;
width: 100%;
border-radius: 0 0 10px 10px;
padding: 10px 15px 7px;
box-sizing: border-box;
color: #000 !important;
line-height: 1.3;
word-break: break-word;
transition: ease all 300ms;
}

#PageWrapper .LargeSmallPhotoGrid .Caption h3 {
margin: 0;
padding: 0 0 5px;
color: #000;
font-size: 18px;
text-align: center;
font-weight: 400;
letter-spacing: 0;
transition: ease all 300ms;
line-height: 1.1;
}

#PageWrapper .LargeSmallPhotoGrid .ImageBlock a img:hover,
#ContentColumn .LargeSmallPhotoGrid .ImageBlock a img:hover,
.SeasonalBanner .LargeSmallPhotoGrid .ImageBlock a img:hover,
#NavColumn .LargeSmallPhotoGrid .ImageBlock a img:hover,
#PageWrapper .LargeSmallPhotoGrid .ImageBlock a:hover img,
#ContentColumn .LargeSmallPhotoGrid .ImageBlock a:hover img,
.SeasonalBanner .LargeSmallPhotoGrid .ImageBlock a:hover img,
#NavColumn .LargeSmallPhotoGrid .ImageBlock a:hover img {
transform: scale(1.05);
border-radius: 10px;
}

#ContentColumn .LargeSmallPhotoGrid .ImageBlock a:hover .Caption,
.SeasonalBanner .LargeSmallPhotoGrid .ImageBlock a:hover .Caption,
#NavColumn .LargeSmallPhotoGrid .ImageBlock a:hover .Caption {
background: #e02229dd;
border-radius: 0 0 10px 10px;
transition: ease all 300ms;
}

#PageWrapper .LargeSmallPhotoGrid .ImageBlock:hover h3,
#PageWrapper .LargeSmallPhotoGrid .ImageBlock a:hover h3 {
color: #fff;
transition: ease all 300ms;
}

.LargeSmallPhotoGrid .ImageBlock + .SmallGrid {
margin-top: 20px;
}

#PageWrapper .LargeSmallPhotoGrid h2 {
margin-top: 0;
}

.TextBlock {
padding-left: 20px;
padding-right: 20px;
margin-bottom: -1em;
}

@media only screen and (max-width: 1024px) {
#PageWrapper .LargeSmallPhotoGrid .Caption h3 {
font-size: 16px;
}
#ContentColumn .LargeSmallPhotoGrid .Caption {
padding: 7px 10px 4px;
}
.LargeSmallPhotoGrid {
margin: 2em 0;
}
}

@media only screen and (max-width: 700px) {
#PageWrapper .LargeSmallPhotoGrid .responsive-row div[class*="responsive_col-"] {
width: 100%;
}
.LargeSmallPhotoGrid .responsive-row {
flex-wrap: wrap;
}
}

@media only screen and (max-width: 600px) {
.PicBeside {
flex-wrap: wrap;
justify-content: center;
}
.LargeSmallPhotoGrid {
margin: 1em 0;
}
}

@media only screen and (max-width: 500px) {
.TextBlock {
padding-left: 0;
padding-right: 0;
}
#ContentColumn .LargeSmallPhotoGrid .Caption,
#ContentColumn .LargeSmallPhotoGrid a .Caption,
.SeasonalBanner .LargeSmallPhotoGrid .Caption,
.SeasonalBanner .LargeSmallPhotoGrid a .Caption {
padding: 5px 5px 2px;
line-height: 1.2;
}
#PageWrapper .LargeSmallPhotoGrid .Caption h3 {
line-height: 1;
}
}

/* -- RECIPE CAPTION LANGUAGE TOGGLE -- */

.Caption h3 eng {
display: none;
}

.ToggleLanguage {
position: relative;
display: table;
background: #333;
width: auto;
height: 35px;
display: block;
border-radius: 0 0 10px 10px;
padding: 4px 10px 4px 16px;
display: flex;
align-items: center;
column-gap: 8px;
}

.ToggleLanguage span {
font-size: 13px;
letter-spacing: 0.01em;
color: #fff;
}

.ToggleLanguage button {
padding: 6px 12px;
margin: 0;
border: none;
cursor: pointer;
background: none;
border: 1px solid #fff;
color: #fff;
border-radius: 100px;
font-size: 13px;
letter-spacing: 0.01em;
}

.ToggleLanguage button.active {
background: #fff;
color: #000;
}

#Header .ToggleLanguage {
display: none;
}

.HeaderPopup .ToggleLanguage {
position: relative;
left: 0;
bottom: 0;
padding: 13px 13px 12px 19px;
border-radius: 0;
}

@media only screen and (max-width: 1403px) {
.HeaderPopup .ToggleLanguage {
box-sizing: border-box;
height: 97px;
min-width: 160px;
box-sizing: border-box;
flex-wrap: wrap;
text-align: center;
padding: 13px 15px;
}
.ToggleLanguage button {
display: block;
width: calc(50% - 4px);
margin-bottom: 5px;
}
.ToggleLanguage span {
font-size: 13px;
letter-spacing: 0.01em;
color: #fff;
width: 100%;
clear: both;
}
}

@media only screen and (max-width: 768px) {
#Header .ToggleLanguage {
display: flex;
clear: both;
border-radius: 0;
text-align: center;
justify-content: center;
padding: 8px 10px 4px;
flex-wrap: nowrap;
z-index: -1;
}
.ToggleLanguage span {
width: auto;
clear: initial;
}
.ToggleLanguage button {
width: auto;
}
}

/* --- IMAGE HOVER STYLE --- */

#PageWrapper .ImageBlock a img,
#ContentColumn .ImageBlock a img,
#NavColumn .ImageBlock a img {
transition: ease all 350ms;
}

#PageWrapper .ImageBlock a img:hover,
#ContentColumn .ImageBlock a img:hover,
#NavColumn .ImageBlock a img:hover,
#PageWrapper .ImageBlock a:hover img,
#ContentColumn .ImageBlock a:hover img,
#NavColumn .ImageBlock a:hover img {
transform: scale(1.05);
transition: ease all 350ms;
opacity: 1 !important;
}

/* -- FAMILY OF WEBSITES - IN FOOTER -- */

#PageWrapper #FooterWrapper {
background: #ffdd50;
}

#PageWrapper #FooterWrapper.SecondFooter {
background: #ffce00;
}

.FamilyOfWebsites {
margin: 0 0 4em;
display: flex;
gap: 5%;
justify-content: center;
flex-wrap: wrap;
}

#PageWrapper .FamilyOfWebsites .ImageBlock img {
width: auto !important;
height: 75px !important;
opacity: 0.8;
}

#PageWrapper #Footer .Liner .FamilyOfWebsites a:link,
#PageWrapper #Footer .Liner .FamilyOfWebsites a:visited,
#PageWrapper #Footer .Liner .FamilyOfWebsites a:hover {
text-decoration: none;
display: table;
}

#PageWrapper .FamilyOfWebsites .ImageBlock a:hover img {
opacity: 1;
}

#PageWrapper .FamilyOfWebsites .Caption {
font-size: 16px;
text-transform: none;
font-weight: 400;
color: #000;
letter-spacing: 0;
line-height: 1.3;
font-family: 'Source Serif 4', Georgia, Times, serif;
transition: ease all 300ms;
}

#PageWrapper .FamilyOfWebsites .ImageBlock,
#PageWrapper .FamilyOfWebsites .ImageBlock span,
#PageWrapper .FamilyOfWebsites .Caption {
width: 250px;
max-width: 250px !important;
}

#PageWrapper .FamilyOfWebsites .Caption h3 {
font-size: 22px;
margin: 0 0 5px;
transition: ease all 300ms;
text-align: center;
}

#PageWrapper #Footer .Liner a:hover .Caption,
#PageWrapper #Footer .Liner a:hover .Caption h3 {
color: #e60000;
transition: ease all 300ms;
}

/* -- SHARE THIS ARTICLE -- */

.ShareThisArticle {
margin: 3em 0;
display: table;
width: 100%;
}

.ShareThisArticle .SocialShare::before {
content: "Share this article:";
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.06em;
text-align: center;
display: block;
margin: 0 auto 15px;
}

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

#PageWrapper .SocialShare .socialIcon.twitter {
font-size: 21px;
}

.SocialShare .socialIcon {
margin: 0 2px;
}

/* -- ABOUT AUTHOR BLOCK -- */

.AboutAuthor {
margin: 3em auto;
display: flex;
width: 100%;
padding: 1em 5%;
background: #f6eee8;
border-radius: 10px;
column-gap: 3%;
justify-content: space-between;
position: relative;
}

#PageWrapper .AboutAuthor .ImageBlock {
min-width: 200px;
}

#PageWrapper .AboutAuthor h2 {
font-size: 24px;
margin-top: 0.5em;
}

#PageWrapper .AboutAuthor h3 {
font-size: 16px;
font-family: 'Figtree', Arial, sans-serif;
letter-spacing: 0.05em;
text-transform: uppercase;
}

#ContentColumn .AboutAuthor p {
font-size: 18px;
}

.AboutAuthor::after {
position: absolute;
top: -17px;
content: "About the Author";
background: #fff7f1;
color: #333;
left: 5%;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: .07em;
padding: 10px 15px 8px;
display: table;
font-size: 12px;
font-style: normal;
font-family: 'Figtree', Arial, sans-serif;
}

@media only screen and (max-width: 640px) {
.AboutAuthor {
justify-content: center;
position: relative;
flex-wrap: wrap;
}
.AboutAuthor::after {
left: calc(50% - 80px);
}
}

/* -- FIXING PHOTO GRID -- */

.LargePhotoGrid,
.SmallPhotoGrid {
margin: 2em auto;
column-gap: 20px;
row-gap: 20px;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}

#PageWrapper .LargePhotoGrid .ImageBlock,
#PageWrapper .SmallPhotoGrid .ImageBlock {
transition: ease all 250ms;
height: auto;
display: block;
max-width: 100%;
flex: 0 1 calc(20% - 16px);  /* (100% / 5) - (80px / 5) */
}

@media only screen and (max-width: 1100px) {
#PageWrapper .LargePhotoGrid .ImageBlock,
#PageWrapper .SmallPhotoGrid .ImageBlock {
flex: 0 1 calc(25% - 15px);  /* (100% / 4) - (60px / 4) */
}
}

@media only screen and (max-width: 800px) {
#PageWrapper .LargePhotoGrid .ImageBlock,
#PageWrapper .SmallPhotoGrid .ImageBlock {
flex: 0 1 calc(33.333% - 13.333px);  /* (100% / 3) - (40px / 3) */
}
}

@media only screen and (max-width: 600px) {
#PageWrapper .LargePhotoGrid .ImageBlock,
#PageWrapper .SmallPhotoGrid .ImageBlock {
flex: 0 1 calc(50% - 10px);  /* (100% / 2) - (20px / 2) */
}
}

@media only screen and (max-width: 420px) {
#PageWrapper .LargePhotoGrid .ImageBlock,
#PageWrapper .SmallPhotoGrid .ImageBlock {
flex: 0 1 100%;
}
}

/* ------ DESKTOP OR MOBILE ONLY ------ */

.MobileOnly {
display: none;
}

@media only screen and (max-width: 640px) {
.DesktopOnly {
display: none;
}
.MobileOnly {
display: block;
}
}

/* ------ ADDING COUNTDOWN TIMER TO HOMEPAGE BANNER ------ */

#PageWrapper .HomepageBanner h2 {
font-size: 52px;
width: 100%;
text-align: center;
margin: 20px 0 5px;
}

@media only screen and (max-width: 1000px) {
#PageWrapper .HomepageBanner h2 {
font-size: 32px;
}
}

#countdown {
font-family: 'Figtree', Arial, sans-serif;
font-size: 40px;
font-weight: 700;
text-align: left;
width: 100%;
letter-spacing: -0.01em;
display: flex;
justify-content: center;
background: #ffde46;
padding: 0.5em 0.5em 1.25em;
margin: -17px 0 -33px;
border-radius: 10px 10px 0 0;
box-sizing: border-box;
flex-wrap: wrap;
justify-content: center;
}

#days, #hours, #minutes, #seconds {
width: 70px;
position: relative;
text-align: center;
}

#days {
width: 35px;
}

#days::after,
#hours::after,
#minutes::after,
#seconds::after {
content: "Days";
font-size: 10px;
text-align: center;
width: 70px;
padding-bottom: 5px;
color: #000a;
text-transform: uppercase;
letter-spacing: 0.03em;
bottom: -10px;
position: absolute;
left: calc(50% - 35px);
text-align: center;
display: block;
}

#days::after {
width: 35px;
left: 0;
}

#hours::after {
content: "Hours";
}

#minutes::after {
content: "Minutes";
}

#seconds::after {
content: "Seconds";
}

@media only screen and (max-width: 640px) {
#countdown {
font-size: 34px;
width: calc(100% + 20px);
padding: 0.25em 0.25em 1em;
margin: -27px -10px -33px;
}
#days, #hours, #minutes, #seconds {
width: 60px;
}
#days {
width: 30px;
}
#days::after, #hours::after, #minutes::after, #seconds::after {
width: 60px;
left: calc(50% - 30px);
}
#days::after {
width: 30px;
left: 0;
}
}

/* ------ PROMO BAR ------ */

.PromoBar {
background: #fece07;
display: table;
width: 100%;
padding: 10px 20px;
box-sizing: border-box;
box-sizing: border-box;
background-image: linear-gradient(to right, #e9b500, #ffd420, #ffd420, #ffd420, #e9b500);
box-shadow: 0px -1px 10px 0px #000a;
box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 10px 0px;
position: relative;
z-index: 999;
}

.PromoBar p {
margin: 2px 0;
text-align: center;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 15px;
text-transform: none;
letter-spacing: 0.015em;
}

.PromoBar a:link,
.PromoBar a:visited,
.PromoBar a:hover {
/*
display: inline-block;
padding: 5px 17px 4px;
border-radius: 50px;
background: #e02229;
border: 2px solid #e02229;
color: #fff;
font-size: 15px;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 0.06em;
border-color: #000;
color: #000;
background: none;
text-decoration: none;
background: #000;
border: 2px solid #000;
color: #fff;
*/
text-decoration: underline;
text-underline-offset: 0.3rem;
text-decoration-thickness: 0.07em !important;
color: #000;
font-weight: bold;
}

.PromoBar a:hover {
/*
background: none;
color: #e02229;
border-color: #e02229;
background: #000;
border-color: #000;
color: #fece07;
color: #fff;
background: none;
border: 2px solid #000;
color: #000;
*/
color: #c10107;
}

@media only screen and (max-width: 768px) {
.PromoBar {
padding: 10px 15px;
background: #fece07;
box-shadow: none;
}
/*
.PromoBar p {
font-size: 16px;
}
.PromoBar a:link,
.PromoBar a:visited,
.PromoBar a:hover {
font-size: 14px;
}
*/
}

@media only screen and (max-width: 600px) {
.PromoBar {
padding: 8px 12px;
}
/*
.PromoBar p {
font-size: 16px;
}
.PromoBar a:link,
.PromoBar a:visited,
.PromoBar a:hover {
font-size: 13px;
}
*/
}

/* ------ BUY RECIPE CARD ------ */

.BuyRecipeCard {
box-sizing: border-box;
background: #ffd421;
display: table;
max-width: 545px;
margin: 0 auto 30px;
padding: 15px 20px;
border-radius: 5px;
position: relative;
}

.BuyRecipeCard::after {
content: "NEW";
background: #e02229;
color: #fff;
font-size: 14px;
font-weight: bold;
padding: 3px 15px 2px;
position: absolute;
top: 19px;
left: -30px;
letter-spacing: 0.04em;
rotate: 270deg;
border-radius: 4px 4px 0;
}

#ContentColumn .BuyRecipeCard p {
margin: 0 0 10px;
font-size: 19px;
font-weight: bold;
line-height: 30px;
text-align: center;
}

#ContentColumn .BuyRecipeCard a:link,
#ContentColumn .BuyRecipeCard a:visited,
#ContentColumn .BuyRecipeCard a:hover {
height: 32px;
display: inline-block;
line-height: 32px;
font-size: 14px;
color: #fff;
background: #219d00;
border-radius: 100px;
padding: 0 20px;
font-weight: 400;
margin: 0 0 0 5px;
text-decoration: none;
bottom: 2px;
position: relative;
}

#ContentColumn .BuyRecipeCard a:hover {
background: #333;
}

.BuyRecipeCard small {
font-size: 14px;
line-height: 1.4;
text-align: center;
display: block;
letter-spacing: 0.03em;
}

/* ----------------------------------------------- */
/* ------ NEW LOOK HEADER & PAGE BACKGROUND ------ */
/* ------------------- JAN 2026 ------------------ */
/* ----------------------------------------------- */

#PageWrapper {
background: #f5eee8;
background: #fcf9f8;
}

#PageWrapper h1 {
margin-top: 0.35em;
}

.BreadcrumbBlock {
margin: 0 -30px;
padding: 0 35px 25px;
border-radius: 0;
position: relative;
background: #fcf9f8;
}

#PageWrapper .BreadcrumbBlock .BreadcrumbTiers {
padding: 7px 0 11px;
}

#PageWrapper #NavWrapper,
#PageWrapper #NavColumn,
#PageWrapper #NavColumn .Liner {
background: #fcf9f8;
}

@media only screen and (min-width: 641px) {
.BreadcrumbBlock::after {
content: " ";
display: table;
width: 100%;
height: 19px;
background: #fff;
border-radius: 8px 8px 0 0;
box-sizing: border-box;
border: 2px solid #fff;
position: absolute;
left: 0;
bottom: 0;
}
#ColumnsWrapper {
padding: 10px 20px 40px;
}
}

.PromoBar {
border-top: 1px solid #0001;
border-bottom: 1px solid #0001;
}

#ContentColumn .DomainButtons em {
background: #f5eee8;
}

#PageWrapper div.HorizontalNavBar ul .li1:last-child a:link,
#PageWrapper div.HorizontalNavBar ul .li1:last-child a:visited {
border-color: #000;
color: #000;
}
#PageWrapper div.HorizontalNavBar ul .li1:last-child a:hover {
border-color: #c10007;
color: #c10007;
background: none;
}

#PageWrapper div.HorizontalNavBar ul span.navheader,
#PageWrapper div.HorizontalNavBar ul a,
#PageWrapper div.HorizontalNavBar ul a:visited {
color: #000;
}

#PageWrapper div.HorizontalNavBar ul span.navheader:hover,
#PageWrapper div.HorizontalNavBar li:hover > span.navheader,
#PageWrapper div.HorizontalNavBar .hover > span.navheader,
#PageWrapper div.HorizontalNavBar li:hover > span.navheader,
#PageWrapper div.HorizontalNavBar .hover > span.navheader {
color: #c10007;
}

#PageWrapper div.HorizontalNavBar ul span.navheader:hover,
#PageWrapper div.HorizontalNavBar ul a:hover {
color: #c10007;
}

#PageWrapper div.HorizontalNavBar ul span.navheader ins,
#PageWrapper div.HorizontalNavBar ul ul span.navheader ins {
border-color: #000;
}

#PageWrapper div.HorizontalNavBar ul li:hover > span.navheader ins,
#PageWrapper div.HorizontalNavBar ul .hover > span.navheader ins {
border-color: #c10007;
}

#PageWrapper div.HorizontalNavBar, #PageWrapper #Header .HorizontalNavBar {
background: none;
}

#PageWrapper div.HorizontalNavBar ul > li:nth-child(2) > span.navheader {
padding-left: 0;
}

@media only screen and (min-width: 769px) {
#PageWrapper #Header .WebsiteName {
margin: 23px 0 2px;
}
}

.NavSearchShop {
border: 0;
padding: 0 5px 12px;
}

#PageWrapper .BecomeSticky div.HorizontalNavBar ul .li1:last-child a:link,
#PageWrapper .BecomeSticky div.HorizontalNavBar ul .li1:last-child a:visited {
border-color: #fff;
color: #fff;
}
#PageWrapper .BecomeSticky div.HorizontalNavBar ul .li1:last-child a:hover {
border-color: #fffc;
color: #fffc;
}

#PageWrapper .BecomeSticky div.HorizontalNavBar ul span.navheader,
#PageWrapper .BecomeSticky div.HorizontalNavBar ul a,
#PageWrapper .BecomeSticky div.HorizontalNavBar ul a:visited {
color: #fff;
}

#PageWrapper .BecomeSticky div.HorizontalNavBar ul span.navheader:hover,
#PageWrapper .BecomeSticky div.HorizontalNavBar li:hover > span.navheader,
#PageWrapper .BecomeSticky div.HorizontalNavBar .hover > span.navheader,
#PageWrapper .BecomeSticky div.HorizontalNavBar li:hover > span.navheader,
#PageWrapper .BecomeSticky div.HorizontalNavBar .hover > span.navheader {
color: #fffc;
}

#PageWrapper .BecomeSticky div.HorizontalNavBar ul span.navheader:hover,
#PageWrapper .BecomeSticky div.HorizontalNavBar ul a:hover {
color: #fffc;
}

#PageWrapper .BecomeSticky div.HorizontalNavBar ul span.navheader ins,
#PageWrapper .BecomeSticky div.HorizontalNavBar ul ul span.navheader ins {
border-color: #fff;
}

#PageWrapper .BecomeSticky div.HorizontalNavBar ul li:hover > span.navheader ins,
#PageWrapper .BecomeSticky div.HorizontalNavBar ul .hover > span.navheader ins {
border-color: #fffc;
}

#PageWrapper .BecomeSticky div.HorizontalNavBar ul ul span.navheader,
#PageWrapper .BecomeSticky div.HorizontalNavBar ul ul a,
#PageWrapper .BecomeSticky div.HorizontalNavBar ul ul a:visited {
color: #000;
}

#PageWrapper .BecomeSticky div.HorizontalNavBar ul ul span.navheader:hover,
#PageWrapper .BecomeSticky div.HorizontalNavBar ul ul li:hover > span.navheader,
#PageWrapper .BecomeSticky div.HorizontalNavBar ul ul .hover > span.navheader,
#PageWrapper .BecomeSticky div.HorizontalNavBar ul ul li:hover > span.navheader,
#PageWrapper .BecomeSticky div.HorizontalNavBar ul ul .hover > span.navheader {
color: #e02229;
}

#PageWrapper .BecomeSticky div.HorizontalNavBar ul ul span.navheader:hover,
#PageWrapper .BecomeSticky div.HorizontalNavBar ul ul a:hover {
color: #e02229;
}

#PageWrapper .BecomeSticky div.HorizontalNavBar ul ul span.navheader ins,
#PageWrapper .BecomeSticky div.HorizontalNavBar ul ul span.navheader ins {
border-color: #000;
}

#PageWrapper .BecomeSticky div.HorizontalNavBar ul ul li:hover > span.navheader ins,
#PageWrapper .BecomeSticky div.HorizontalNavBar ul ul .hover > span.navheader ins {
border-color: #e02229;
}

#PageWrapper .BecomeSticky div.HorizontalNavBar ul > li:nth-child(2) > span.navheader {
padding-left: 10px;
}

@media only screen and (max-width: 768px) {
#ContentColumn .Promo {
margin: 0 -37px 0;
}
#PageWrapper #HeaderWrapper {
box-shadow: none;
}
#PageWrapper .BreadcrumbBlock .BreadcrumbTiers {
padding: 9px 0 7px;
}
}

@media only screen and (max-width: 640px) {
#ContentColumn .Promo {
margin: 10px -20px 0;
}
.BreadcrumbBlock {
margin: 0;
padding: 2px 0;
background: none;
}
#PageWrapper .BreadcrumbBlock .BreadcrumbTiers {
padding: 7px 0 2px;
}
}

.BuyRecipeCard {
background: none;
border: 2px dashed #000;
border-radius: 10px;
}

.BuyRecipeCard::after {
display: none;
}

.Disclaimer {
margin: 0;
}

/* ------ PHOTO COMMENTS ------ */

.ImageBlock .Caption comment {
font-family: 'Source Serif 4', Georgia, sans-serif;
text-transform: none;
font-weight: 400;
letter-spacing: 0;
display: block;
padding: 15px 20px 17px;
background: #fff6af;
border-radius: 4px;
margin: 1em auto;
font-size: 18px;
text-align: left;
}

@media only screen and (max-width: 640px) {
.ImageBlock .Caption comment {
font-size: 17px;
}
}

/* ------ PULL QUOTE ------ */

.PullQuote {
display: table;
width: 100%;
margin: 1em 0;
box-sizing: border-box;
padding: 0.5em 35% 0.5em 1em;
border-left: 5px solid #c20c13;
border-radius: 4px;
}

#PageWrapper .PullQuote h2,
#PageWrapper .PullQuote h3,
#PageWrapper .PullQuote h4 {
margin: 0;
}

#PageWrapper .PullQuote h2 {
font-size: 30px;
line-height: 1.3;
}

/* ------ CENTERING GRID ------ */

.CenteringGrid .responsive-row {
display: flex;
align-items: center;
}

/* ------ LIST TEXT ------ */

#ContentColumn .ListText ul {
display: flex;
gap: 5%;
justify-content: center;
padding: 0;
margin: 1em 0;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
align-items: center;
}

#ContentColumn .ListText ul li {
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.08em;
background-position: center left;
min-width: 130px;
}

@media only screen and (max-width: 768px) {
.CenteringGrid .responsive-row {
flex-wrap: wrap;
}
#PageWrapper .CenteringGrid .responsive-row div[class*="responsive_col-"] {
width: 100%;
}
}

@media only screen and (max-width: 620px) {
#ContentColumn .ListText ul {
flex-wrap: wrap;
padding: 20px 0px;
}
}

/* ------ VERY NARROW CONTENT ------ */

.VeryNarrowContent {
display: table;
margin: 2em auto;
width: 100%;
max-width: 600px;
}

/* ------ SMALL TEXT ------ */

#ContentColumn .SmallText p {
font-size: 16px;
background: #f6eee8;
padding: 15px 20px;
border-radius: 4px;
text-align: center;
margin: 2em auto;
}

/* ------ OMA'S KITCHEN HEADER UPDATE ------ */

/*
#PageWrapper div.HorizontalNavBar ul .li1:nth-last-child(2) a {
padding-left: 8px;
}
*/

#PageWrapper div.HorizontalNavBar ul .li1:last-child a,
#PageWrapper div.HorizontalNavBarOff ul .li1:last-child a {
position: relative;
}

/*
#PageWrapper div.HorizontalNavBar ul .li1:last-child a::after,
#PageWrapper div.HorizontalNavBarOff ul .li1:last-child a::after,
.Promo::after {
position: absolute;
top: -9px;
left: 10px;
background: gold;
display: block;
content: "NEW";
color: #000;
letter-spacing: 0.1em;
padding: 3px 5px 2px;
font-size: 10px;
line-height: 1;
rotate: -6deg;
}
*/

/*
.Promo::after {
top: -11px;
left: 20px;
z-index: 1;
font-weight: bold;
}
*/

@media only screen and (max-width: 768px) {
#PageWrapper div.HorizontalNavBarOff ul .li1:last-child a::after {
top: 8px;
left: 156px;
}
}

@media only screen and (max-width: 1350px) {
#PageWrapper div.HorizontalNavBar ul span.navheader,
#PageWrapper div.HorizontalNavBar ul a {
font-size: 18px;
}
#PageWrapper div.HorizontalNavBar ul .li1:last-child a:link,
#PageWrapper div.HorizontalNavBar ul .li1:last-child a:visited,
#PageWrapper div.HorizontalNavBar ul .li1:last-child a:hover {
font-size: 17.5px;
}
}

@media only screen and (max-width: 768px) {
.ResponsiveNavReady .ResponsiveNav a {
font-size: 22px;
}
}

.Promo {
position: relative;
}

@media only screen and (max-width: 768px) {
.Promo::after {
top: -5px;
left: 28px;
}
}

@media only screen and (min-width: 769px) {
#Header .Promo {
max-width: 240px;
}
.Promo p {
font-size: 16px;
line-height: 22px;
letter-spacing: 0.01em;
}
.Promo p b,
.Promo p strong {
display: block;
color: #e60101;
font-size: 17.5px;
font-weight: bold;
}
}

/* ------ PREVIEW GATING FOR RECIPES ------ */

.PreviewWrapper {
position: relative;
bottom: 0;
left: 0;
right: 0;
width: 100%;
display: table;
background: #fff0b0;
box-shadow: 0 0 0 100vw #fff0b0;
clip-path: inset(0 -100vw);
}

.Preview {
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 3em 2em 3em;
}

#PageWrapper .Preview h2 {
font-size: 27px;
}

#ContentColumn .Preview p {
font-size: 18px;
}

#ContentColumn .Preview p:last-child {
font-size: 16px;
}

.PreviewFade {
position: relative;
margin-top: -40px;
}

.PreviewFade:after {
left: -10px;
right: -10px;
content: "";
position: absolute;
top: -25em;
height: 25em;
pointer-events: none;
z-index: 2;
background: linear-gradient(to bottom, #fff0, #fffd 65%, #fffffffa);
}

@media only screen and (max-width: 640px) {
.Preview {
padding: 2em 0 2em;
}
}

/* ------ NEW HOMEPAGE HERO AND LAYOUT ------ */

.HomepageNewBannerWrapper {
clear: both;
display: table;
margin: 0;
width: 100%;
position: relative;
}

.HomepageNewBanner {
max-width: 1200px;
display: table;
width: 100%;
margin: 0 auto;
}

.HomepageNewBanner .Liner {
padding: 5em 3em 8em;
}

#PageWrapper .HomepageNewBanner h1 {
text-align: left;
font-family: 'Figtree', Helvetica, Arial, sans-serif;
font-weight: 900;
font-size: 65px;
margin: 0;
-webkit-background-clip: text;
-ms-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-ms-text-fill-color: transparent;
text-fill-color: transparent;
background-image: linear-gradient(to right, #e0bd02, #e02229 51%, #ffd700);
line-height: 1.1;
}

.HomepageNewBanner p {
font-size: 24px;
}

.HomepageNewBanner p:last-child {
font-family: 'Source Serif 4', Georgia, sans-serif;
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.2;
font-size: 35px;
}

.waves {
pointer-events: none;
bottom: 0;
position: absolute;
left: 0;
right: 0;
overflow: hidden;
display: flex;
}

.waves>span {
transform: rotateX(180deg);
width: 100%;
}

.waves svg {
height: 40px;
}

.waves svg {
display: flex;
position: relative;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 100px;
}

.waves .waves-shape-fill {
fill: #fff;
fill: #f5eee8;
}

.HomepageNewBannerWrapper .ImageBlock {
display: none;
}

@media only screen and (max-width: 768px) {
.HomepageNewBannerWrapper {
background: #f7e7c2 !important;
}
#PageWrapper .HomepageNewBannerWrapper .ImageBlock {
display: block;
margin: -5em 0 0 !important;
z-index: 0;
position: relative;
}
#PageWrapper .HomepageNewBanner .responsive-row div[class*="responsive_col-"] {
width: 100%;
}
.HomepageNewBanner .Liner {
padding: 2em 3em 0;
position: relative;
z-index: 1;
}
#PageWrapper .HomepageNewBanner h1 {
font-size: 45px;
}
.waves {
z-index: 1;
}
.waves svg {
height: 50px;
}
.HomepageNewBanner p {
font-size: 20px;
}
.HomepageNewBanner p:last-child {
font-size: 27px;
}
}

.SeasonalBannerWrapper {
display: table;
width: 100%;
clear: both;
background: #f5eee8;
}

.SeasonalBanner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 3em 0;
}

.SeasonalBanner .Liner {
padding: 0 15px;
}

.SeasonalBanner p {
font-size: 24px;
}

.SeasonalRecipes .ImageBlock {
position: relative;
}

.SeasonalRecipes .ImageBlock::after {
content: "Fall Fave";
font-size: 12px;
color: #fff;
background: #f1131b;
background: #db4e0e;
top: 10px;
left: 0;
border-radius: 0 4px 4px 0;
padding: 2px 10px;
letter-spacing: 0.04em;
text-transform: uppercase;
position: absolute;
display: table;
height: 20px;
line-height: 20px;
}

#PageWrapper .SeasonalBanner h2,
#PageWrapper .SeasonalBanner h3 {
font-family: "Meow Script", script;
font-size: 70px;
font-weight: 400;
letter-spacing: -1px;
rotate: -1deg;
color: #575791;
margin: 0.25em 0;
}

#PageWrapper .SeasonalBanner h3 {
font-size: 55px;
rotate: -0.5deg;
}

#PageWrapper .SeasonalBanner .ImageBlock h3 {
font-family: initial;
rotate: 0deg;
}

@media only screen and (max-width: 768px) {
#PageWrapper .SeasonalBanner h2 {
font-size: 50px;
}
#PageWrapper .SeasonalBanner h3 {
font-size: 35px;
} 
.SeasonalBanner p {
font-size: 22px;
}
}

@media only screen and (max-width: 600px) {
.SeasonalBanner p {
font-size: 20px;
}
}

/* ------ NARROW'ER CONTENT ------ */

.NarrowerContent {
margin: 0 auto;
width: 100%;
max-width: 550px;
}

/* ------ NEW OMA'S KITCHEN POP-UP, AND NEW COOKBOOK BUTTONS FOR RECIPES ------ */

.qgr-extra-recipe-buttons {
width: 100%;
max-width: 200px;
display: block;
margin: 0 0 15px;
}

#ContentColumn a.qgr-extra-recipe-button:link,
#ContentColumn a.qgr-extra-recipe-button:visited,
#ContentColumn a.qgr-extra-recipe-button:hover {
width: 100%;
max-width: 200px;
box-sizing: border-box;
padding: 11px 15px 10px;
border-radius: 100px;
font-size: 14px;
line-height: 1.2;
text-decoration: none !important;
display: block;
margin: 0 0 15px;
text-align: center;
letter-spacing: 0;
font-weight: bold;
cursor: pointer;
text-transform: none;
}

#ContentColumn a.qgr-extra-recipe-button-ok:link,
#ContentColumn a.qgr-extra-recipe-button-ok:visited {
background: #fed702;
color: #222;
border: 2px solid #fed702;
}

#ContentColumn a.qgr-extra-recipe-button-ok:hover,
#ContentColumn a.qgr-extra-recipe-button-ok:focus {
background: #ffee93;
}

#ContentColumn a.qgr-extra-recipe-button-cookbook:link,
#ContentColumn a.qgr-extra-recipe-button-cookbook:visited,
#ContentColumn a.qgr-extra-recipe-button-cookbook:hover {
background: #fff;
border: 2px solid #333;
color: #333;
}

#ContentColumn a.qgr-extra-recipe-button-cookbook:hover,
#ContentColumn a.qgr-extra-recipe-button-cookbook:focus {
background: #333;
color: #fff;
}

#qgr-adfree-popup {
  position: fixed;
  inset: 0;
  z-index: 999999;
}

.qgr-adfree-popup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.qgr-adfree-popup-box {
  position: relative;
  width: calc(100% - 40px);
  max-width: 460px;
  margin: 15vh auto 0;
  background: #fff;
  border-radius: 18px;
  padding: 32px 28px 28px;
  box-sizing: border-box;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

h2#qgr-adfree-popup-title {
margin: 0 0 12px;
color: #db0e15;
font-size: 28px;
line-height: 1.15;
text-transform: none;
}

.qgr-adfree-popup-box p {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.45;
}

.qgr-adfree-popup-close {
  position: absolute;
  top: 10px;
  right: 14px;
  border: 0;
  background: transparent;
  color: #333;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

.qgr-adfree-popup-main-button {
  width: auto;
  box-sizing: border-box;
  padding: 12px 50px;
  border-radius: 100px;
  background: #db0e15;
    background: #333;
    color: #fff !important;
    border: 2px solid #333;
    display: table;
    text-align: center;
    font-weight: bold;
    text-decoration: none !important;
    margin: 0 auto;
}

.qgr-adfree-popup-main-button:hover,
.qgr-adfree-popup-main-button:focus {
  background: #b90c12;
background: #000;
border-color: #000;
  color: #fff !important;
  text-decoration: none !important;
}

.qgr-adfree-popup-text-button {
  margin-top: 14px;
  border: 0;
  background: transparent;
  color: #555;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
/* ------ TURN OFF / HIDE NUTRITIONAL INFO BOX ------ */
/* -------------------------------------------------------- */
/* -------------------------------------------------------- */

.NutritionConversions {
display: none;
}

/* ------ PAIRING BOX ------ */

.qgr-pairs {
border: 2px solid #e02229;
border: 5px solid #333;
border-radius: 10px 10px 0 0;
margin: 1em 0 calc(-2.5em - 5px);
box-sizing: border-box;
overflow: hidden;
}

/* Clickable collapsed/expanded heading */
.qgr-pairs-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 17px 18px;
color: #e02229;
color: #fff;
background: #e02229;
background: #333;
font-size: 22px;
font-weight: 400;
line-height: 1.35;
cursor: pointer;
list-style: none;
box-sizing: border-box;
transition: background-color .15s ease;
letter-spacing: 0.02em;
}

/* Remove the browser's default disclosure triangle */
.qgr-pairs-toggle::-webkit-details-marker {
display: none;
}

.qgr-pairs-toggle::marker {
display: none;
content: "";
}

.qgr-pairs-toggle:hover,
.qgr-pairs-toggle:focus {
background: #f3232a;
background: #ffda05;
color: #fff;
color: #000;
}

.qgr-pairs-toggle:focus-visible {
outline: 2px solid #e02229;
outline-offset: -3px;
}

/* CSS arrow */
.qgr-pairs-arrow {
/*
flex: 0 0 10px;
width: 10px;
height: 10px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
margin-top: -5px;
*/
transition: transform .2s ease, margin .2s ease;
}

.qgr-pairs-arrow {
width: 30px;
height: 30px;
content: "+";
color: #fff;
font-size: 29px;
display: block;
z-index: 9999999;
visibility: visible;
opacity: 1;
overflow: visible;
line-height: 1;
text-align: right;
}

/* Arrow points upward while expanded */
.qgr-pairs[open] .qgr-pairs-arrow {
transform: rotate(225deg);
margin-top: 5px;
color: #000;
}

/* Divider between toggle and expanded content */
.qgr-pairs[open] .qgr-pairs-toggle {
/*border-bottom: 1px solid #e02229;*/
background: #e02229;
background: #ffda05;
color: #fff;
color: #000;
}

.qgr-pairs[open] .qgr-pairs-toggle:hover {
background: #f3232a;
background: #ffda05;
color: #000;
}

/* Expanded recipe content */
.qgr-pairs-content {
padding: 18px 18px 14px;
background: #fff7d4;
}

.qgr-pairs h3 {
margin: 0 0 4px;
font-size: 22px;
line-height: 1.25;
}

.qgr-pairs .qgr-sub {
margin: 0 0 16px;
font-size: 16px;
color: #333;
}

#ContentColumn .qgr-pairs ul {
display: grid;
gap: 12px;
list-style: none;
margin: 0;
padding: 0;
background: 0;
}

#ContentColumn .qgr-pairs li {
margin: 0;
padding: 0;
list-style-type: none;
background: none;
}

.qgr-pairs a.qgr-card {
display: flex;
align-items: center;
gap: 0;
padding: 8px;
border-radius: 8px;
color: inherit;
text-decoration: none;
transition: background-color .15s ease;
}

#ContentColumn .qgr-pairs a {
text-decoration: none !important;
}

#ContentColumn .qgr-pairs a.qgr-card:hover,
#ContentColumn .qgr-pairs a.qgr-card:focus {
text-decoration: none !important;
}

.qgr-pairs .qgr-thumb {
flex: 0 0 84px;
width: 84px;
height: 84px;
border-radius: 8px;
overflow: hidden;
background: #eee;
}

.qgr-pairs .qgr-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

.qgr-pairs .qgr-role {
display: block;
margin-bottom: 3px;
color: #fff;
font-size: 14px;
letter-spacing: .06em;
text-transform: uppercase;
background: #333;
padding: 3px 10px 2px;
}

#ContentColumn .qgr-pairs a.qgr-card:hover .qgr-role, 
#ContentColumn .qgr-pairs a.qgr-card:focus .qgr-role {
background: #e02229;
color: #fff;
}

.qgr-pairs .qgr-name {
display: block;
color: #333;
font-size: 20px;
font-weight: 600;
line-height: 1.35;
text-decoration: none;
}

#ContentColumn .qgr-pairs a.qgr-card:hover .qgr-name, 
#ContentColumn .qgr-pairs a.qgr-card:focus .qgr-name {
color: #e02229;
}

.qgr-pairs .qgr-hub {
margin: 8px 0 5px;
font-size: 20px;
}

#ContentColumn .qgr-pairs .qgr-hub a {
text-decoration: underline !important;
color: #e02229;
}

#ContentColumn .qgr-pairs .qgr-hub a:focus,
#ContentColumn .qgr-pairs .qgr-hub a:hover {
color: #333;
}

@media only screen and (max-width: 635px) {
.qgr-pairs a.qgr-card {
align-items: flex-start;
gap: 12px;
}
.qgr-pairs .qgr-role {
display: inline-block;
}
}

.qgr-pairs ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.qgr-pairs li {
margin: 0 0 12px;
}
.qgr-pairs li:last-child {
margin-bottom: 0;
}

.qgr-marker-wrap {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.qgr-marker-wrap marking {
  position: relative;
  z-index: 2;
}

.qgr-marker-wrap .svg-marker {
position: absolute;
left: -1%;
bottom: -11px;
width: 103%;
height: 12px;
overflow: visible;
pointer-events: none;
z-index: 1;
}

.qgr-marker-wrap .svg-marker path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* Draw the line once the block enters the viewport */
.qgr-marker-wrap.qgr-marker-visible .svg-marker path {
  animation: qgr-marker-draw 0.96s cubic-bezier(.65, 0, .35, 1) 0.7s forwards;
}

@keyframes qgr-marker-draw {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@media (min-width: 635px) {
#ContentColumn .qgr-pairs ul {
display: flex;
flex-direction: row;
}
.qgr-pairs li {
width: 33%;
margin-right: 3.5%;
margin-bottom: 0;
}
.qgr-pairs li:last-child {
margin-right: 0;
}
.qgr-pairs a.qgr-card {
flex-direction: column;
align-items: flex-start;
padding: 0;
text-align: left;
}
.qgr-pairs .qgr-thumb {
flex: none;
width: 100%;
height: 150px;
margin-bottom: 9px;
}
}

@media (prefers-reduced-motion: reduce) {
.qgr-pairs-arrow,
.qgr-pairs-toggle,
.qgr-pairs a.qgr-card {
transition: none;
}
}

@media only screen and (max-width: 450px) {
.qgr-pairs-toggle {
padding: 12px 18px;
font-size: 18px;
line-height: 1.3;
}
}

@media only screen and (max-width: 360px) {
.qgr-pairs a.qgr-card {
flex-wrap: wrap;
}
}

@media only screen and (max-width: 359px) {
.qgr-pairs {
margin: 1em -5px calc(-3em - 5px);
}
}

/* ------ IN COOKBOOK ------ */

.InCookbook {
display: flex;
flex-wrap: nowrap;
gap: 20px;
width: 100%;
margin: 1em 0 2em;
border: 2px solid #000;
border-radius: 5px;
padding: 0.5em 1em;
align-items: center;
}

#PageWrapper .InCookbook .ImageBlock {
margin: 5px 0 !important;
min-width: 128px;
}

#PageWrapper .InCookbookText h2 {
font-size: 22px;
margin: 5px 0 0;
}

#ContentColumn .InCookbookText p {
font-size: 16px;
margin: 0.5em 0 1em;
}

#ContentColumn .InCookbookText a:link,
#ContentColumn .InCookbookText a:visited,
#ContentColumn .InCookbookText a:hover {
background: #fff;
border: 2px solid #333;
color: #333;
width: 100%;
max-width: 200px;
box-sizing: border-box;
padding: 11px 15px 10px;
border-radius: 100px;
font-size: 14px;
line-height: 1.2;
text-decoration: none !important;
display: block;
margin: 0 0 15px;
text-align: center;
letter-spacing: 0;
font-weight: bold;
cursor: pointer;
text-transform: none;
}

#ContentColumn .InCookbookText a:hover {
background: #000;
color: #fff;
}

@media only screen and (max-width: 640px) {
#PageWrapper .InCookbookText h2 {
font-size: 18px;
}
#ContentColumn .InCookbookText p {
font-size: 14px;
}
}

@media only screen and (max-width: 550px) {
.InCookbook {
gap: 5px;
padding: 5px 5px 0 10px;
border-width: 1.5px;
align-items: flex-start;
}
#PageWrapper .InCookbook .ImageBlock {
max-width: 85px !important;
min-width: 75px !important;
margin: 8px 0 -4px !important
}
}

/* ---------------------------------- */
/* ---------------------------------- */
/* ------ RECIPE RATING WIDGET ------ */
/* ---------------------------------- */
/* ---------------------------------- */

/*
gold #eab700 - a rated star
pale #ffefbb - an unrated star
red #db0e15 - hover preview, before the rating is saved */

/* --- COMPACT SUMMARY --- */

.jlo-sum {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 15px;
line-height: 1;
color: #5c5c5c;
}

/* UNDER THE H1
H1 keeps its 35px bottom margin and .Credit keeps its -20px top
margin, so this element absorbs both: negative top pulls it up under
the title, generous bottom pushes .Credit back down. When there are
no ratings the element is display:none, its margins vanish, and
.Credit sits exactly where it does today.

Bottom margin raised from 26px to 36px - 26 left .Credit sitting too
tight under the score. */

.jlo-sum--top {
margin: -20px 0 36px;
}

/* INSIDE THE RECIPE CARD
Different job, different spacing. Nothing negative here - the h2
above it has no margin to cancel, it just needs breathing room. */

.jlo-sum--card {
margin: 10px 0 18px;
}

.jlo-sum a.jlo-sum-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: inherit;
text-decoration: none !important;
cursor: pointer;
}

.jlo-sum a.jlo-sum-link:hover .jlo-sum-count {
text-decoration: underline;
}

.jlo-sum-score {
font-weight: 600;
color: #333;
}

.jlo-sum-count {
color: #6b6b6b;
}

/* --- EMPTY STATE PROMPT --- */
/* Shown only where a recipe has no ratings yet. Quieter than the
score it replaces - it is an invitation, not a claim. */

.jlo-sum-prompt {
display: none;
color: #6b6b6b;
}

.jlo-sum[data-empty="1"] .jlo-sum-prompt {
display: inline;
text-decoration: underline;
text-underline-offset: 0.3rem;
}

.jlo-sum[data-empty="1"] .jlo-sum-score,
.jlo-sum[data-empty="1"] .jlo-sum-count {
display: none;
}

/* Empty outlines, so it reads as "not yet rated" rather than as a

zero-star rating. */
.jlo-sum[data-empty="1"] .jlo-svg {
opacity: 0.75;
}

/* --- SUMMARY STARS (display only) --- */

/* Real SVG stars with a stroked outline, filled from a gradient with
a hard stop. No text-shadow trickery, so the outline stays clean at
any size and 4.3 fills part of the fourth star exactly. */

.jlo-svg {
display: block;
height: 17px;
width: auto;
overflow: visible;
margin-bottom: 2px;
}

/* The outline group only - the fill comes from a clipped rect
underneath, which is why this sets stroke and not fill. */
.jlo-svg g {
stroke: #eab700;
fill: none;
}

/* The gradient stops. Both sit at the same offset, which is what
makes a hard edge instead of a fade. */

.jlo-svg .jlo-stop-on {
stop-color: #eab700;
}

.jlo-svg .jlo-stop-off {
stop-color: #ffefbb;
}

/* --- INTERACTIVE RATING WIDGET --- */

/* A soft cream panel rather than grey (which reads as disabled) or
full gold (which would compete with the brand red and the ads).
Enough to lift it off the page, not enough to shout. */

.jlo-rate {
display: flex;
align-items: center;
gap: 0.55rem;
flex-wrap: wrap;
margin: 1.4rem 0 1rem;
padding: 14px 16px;
background: #fffaea;
border: 1px solid #f2e3b0;
border-radius: 2px;
font-size: 15px;
color: #2b2b2b;
}

.jlo-label {
font-weight: 600;
}

.jlo-meta {
color: #6b6b6b;
font-size: 14px;
}

.jlo-thanks {
color: #db0e15;
font-weight: 600;
}

/* --- ENTRY STARS --- */
/* Real buttons, so every button style the template sets has to be
stripped. The template uses #ContentColumn selectors, which outrank a
plain class, hence the ID prefix and !important. */

.jlo-stars {
display: inline-flex;
gap: 3px;
line-height: 1;
}

#ContentColumn .jlo .jlo-star,
.jlo .jlo-star {
-webkit-appearance: none !important;
appearance: none !important;
background: none !important;
background-color: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
line-height: 0 !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
}

#ContentColumn .jlo .jlo-star:hover,
.jlo .jlo-star:hover {
background: none !important;
}

/* Same machinery as the summary: a gradient-filled rect clipped to the
star, with the outline drawn on top. That is what lets the control show
a half-filled star for a 3.5 average instead of rounding to 4. */

.jlo .jlo-star svg {
display: block;
width: 24px;
height: 24px;
overflow: visible;
}

.jlo .jlo-star svg g {
stroke: #eab700;
fill: none;
}

.jlo .jlo-star .jlo-stop-on {
stop-color: #eab700;
}

.jlo .jlo-star .jlo-stop-off {
stop-color: #ffefbb;
}

.jlo .jlo-star:focus-visible {
outline: 2px solid #eab700;
outline-offset: 2px;
}

/* --- TOUCH TARGETS --- */

/* At 24px each button clears the WCAG 2.2 minimum but is well under
Apple's 44pt and Google's 48dp. On a rating control the neighbouring
target sets a different value, so a mis-tap is a wrong rating.

Padding does the work rather than star size: the stars grow a little,
the tappable area grows a lot, and because the buttons then touch each
other there are no dead gaps between them.

Width-based rather than a pointer query, because SiteDesigner is fussy
about newer media features. A desktop window dragged narrow gets the
bigger targets too, which is harmless. */

@media (max-width: 1024px) {
#ContentColumn .jlo .jlo-star,
.jlo .jlo-star {
padding: 10px 8px !important;
}
.jlo .jlo-star svg {
width: 28px;
height: 28px;
}
.jlo-stars {
gap: 0;
}
/* The summary is a link that jumps to the control, so it is a tap
target as well - and a 17px-tall one. */
.jlo-sum a.jlo-sum-link {
padding: 13px 0;
}
.jlo-svg {
height: 19px;
}
/* Stack the label above the stars when there is no room beside it,
rather than squeezing everything onto one cramped line. */
.jlo-rate {
gap: 0.35rem 0.55rem;
padding: 12px 14px;
}
}

/* --- HOVER CASCADE --- */

/* No JavaScript timers. Timers run on the main thread, which the ad
scripts monopolise, so steps arrived late and unevenly. The browser
drives this on its own timeline and stays smooth however busy the
page is.

Each star changes three things: the red fill, the red outline, and a
small scale pop. The outline is deliberately offset from the other
two - it LEADS going in and TRAILS coming out, so a star appears to
be drawn and then flooded, and to drain and then be erased.

Reversing direction comes free: a transition uses the delay of the
state it is moving TO. Forward delays on the lit state fill outward;
reversed delays on the resting state empty back inward.

Timing: 90ms duration, 25ms between stars, 20ms outline offset.
Scale all three together to change the speed. */

.jlo-hot {
fill: #db0e15;
opacity: 0;
transition: opacity 90ms ease;
}

.jlo .jlo-star svg g {
transition: stroke 90ms ease;
}

.jlo .jlo-star svg {
transition: transform 90ms ease;
}

.jlo-avg {
transition: opacity 90ms ease;
}

/* RESTING - reversed across the row; outline trails by 20ms. */

.jlo-star:nth-child(1) .jlo-hot,
.jlo-star:nth-child(1) .jlo-avg,
.jlo-star:nth-child(1) svg {
transition-delay: 100ms;
}

.jlo-star:nth-child(1) svg g {
transition-delay: 120ms;
}

.jlo-star:nth-child(2) .jlo-hot,
.jlo-star:nth-child(2) .jlo-avg,
.jlo-star:nth-child(2) svg {
transition-delay: 75ms;
}

.jlo-star:nth-child(2) svg g {
transition-delay: 95ms;
}

.jlo-star:nth-child(3) .jlo-hot,
.jlo-star:nth-child(3) .jlo-avg,
.jlo-star:nth-child(3) svg {
transition-delay: 50ms;
}

.jlo-star:nth-child(3) svg g {
transition-delay: 70ms;
}

.jlo-star:nth-child(4) .jlo-hot,
.jlo-star:nth-child(4) .jlo-avg,
.jlo-star:nth-child(4) svg {
transition-delay: 25ms;
}

.jlo-star:nth-child(4) svg g {
transition-delay: 45ms;
}

.jlo-star:nth-child(5) .jlo-hot,
.jlo-star:nth-child(5) .jlo-avg,
.jlo-star:nth-child(5) svg {
transition-delay: 0ms;
}

.jlo-star:nth-child(5) svg g {
transition-delay: 20ms;
}

/* LIT - forward across the row; outline leads by 20ms. */

.jlo-stars[data-hover] .jlo-star:nth-child(1) svg g {
transition-delay: 0ms;
}

.jlo-stars[data-hover] .jlo-star:nth-child(1) .jlo-hot,
.jlo-stars[data-hover] .jlo-star:nth-child(1) .jlo-avg,
.jlo-stars[data-hover] .jlo-star:nth-child(1) svg {
transition-delay: 20ms;
}

.jlo-stars[data-hover] .jlo-star:nth-child(2) svg g {
transition-delay: 25ms;
}

.jlo-stars[data-hover] .jlo-star:nth-child(2) .jlo-hot,
.jlo-stars[data-hover] .jlo-star:nth-child(2) .jlo-avg,
.jlo-stars[data-hover] .jlo-star:nth-child(2) svg {
transition-delay: 45ms;
}

.jlo-stars[data-hover] .jlo-star:nth-child(3) svg g {
transition-delay: 50ms;
}

.jlo-stars[data-hover] .jlo-star:nth-child(3) .jlo-hot,
.jlo-stars[data-hover] .jlo-star:nth-child(3) .jlo-avg,
.jlo-stars[data-hover] .jlo-star:nth-child(3) svg {
transition-delay: 70ms;
}

.jlo-stars[data-hover] .jlo-star:nth-child(4) svg g {
transition-delay: 75ms;
}

.jlo-stars[data-hover] .jlo-star:nth-child(4) .jlo-hot,
.jlo-stars[data-hover] .jlo-star:nth-child(4) .jlo-avg,
.jlo-stars[data-hover] .jlo-star:nth-child(4) svg {
transition-delay: 95ms;
}

.jlo-stars[data-hover] .jlo-star:nth-child(5) svg g {
transition-delay: 100ms;
}

.jlo-stars[data-hover] .jlo-star:nth-child(5) .jlo-hot,
.jlo-stars[data-hover] .jlo-star:nth-child(5) .jlo-avg,
.jlo-stars[data-hover] .jlo-star:nth-child(5) svg {
transition-delay: 120ms;
}

/* The lit state itself. */

.jlo-stars[data-hover="1"] .jlo-star:nth-child(-n+1) .jlo-hot,
.jlo-stars[data-hover="2"] .jlo-star:nth-child(-n+2) .jlo-hot,
.jlo-stars[data-hover="3"] .jlo-star:nth-child(-n+3) .jlo-hot,
.jlo-stars[data-hover="4"] .jlo-star:nth-child(-n+4) .jlo-hot,
.jlo-stars[data-hover="5"] .jlo-star:nth-child(-n+5) .jlo-hot {
opacity: 1;
}

/*
.jlo-stars[data-hover="1"] .jlo-star:nth-child(-n+1) svg g,
.jlo-stars[data-hover="2"] .jlo-star:nth-child(-n+2) svg g,
.jlo-stars[data-hover="3"] .jlo-star:nth-child(-n+3) svg g,
.jlo-stars[data-hover="4"] .jlo-star:nth-child(-n+4) svg g,
.jlo-stars[data-hover="5"] .jlo-star:nth-child(-n+5) svg g { */
.jlo-stars[data-hover] .jlo-star svg g {
stroke: #db0e15;
}

.jlo-stars[data-hover="1"] .jlo-star:nth-child(-n+1) svg,
.jlo-stars[data-hover="2"] .jlo-star:nth-child(-n+2) svg,
.jlo-stars[data-hover="3"] .jlo-star:nth-child(-n+3) svg,
.jlo-stars[data-hover="4"] .jlo-star:nth-child(-n+4) svg,
.jlo-stars[data-hover="5"] .jlo-star:nth-child(-n+5) svg {
transform: scale(1.1);
}

/* --- YOUR OWN RATING STAYS RED --- */

/* Red now means "yours" - your prospective rating while hovering,
your saved rating afterwards. Gold means everyone else's average.
The label text tells the two red states apart.

:not([data-hover]) matters: while the reader is hovering, the preview
must win. Without it, a saved 4 would keep four stars lit even as
they hover the 2nd, and the preview would be unreadable. */

.jlo-stars[data-mine="1"]:not([data-hover]) .jlo-star:nth-child(-n+1) .jlo-hot,
.jlo-stars[data-mine="2"]:not([data-hover]) .jlo-star:nth-child(-n+2) .jlo-hot,
.jlo-stars[data-mine="3"]:not([data-hover]) .jlo-star:nth-child(-n+3) .jlo-hot,
.jlo-stars[data-mine="4"]:not([data-hover]) .jlo-star:nth-child(-n+4) .jlo-hot,
.jlo-stars[data-mine="5"]:not([data-hover]) .jlo-star:nth-child(-n+5) .jlo-hot {
opacity: 1;
}

/* EVERY outline goes red, not just the rated ones, and the unrated
stars lose their fill entirely.

A single red star beside four pale gold ones reads as a five-star
rating with four faded stars - the eye takes the gold as "filled, but
dimmer". Red outlines on an empty background say "one of five" with
no ambiguity, and the whole control belongs to one colour story:
red is yours, gold is everyone's. */

.jlo-stars[data-mine]:not([data-hover]) .jlo-star svg g {
stroke: #db0e15;
}

.jlo-stars[data-mine]:not([data-hover]) .jlo-star .jlo-stop-off {
stop-opacity: 0;
}

/* While previewing, the average underneath fades out on the same
per-star schedule, so each star reads as one gold-to-red change
rather than the whole row going blank at once. */

.jlo-stars[data-hover] .jlo-avg {
opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
.jlo-hot,
.jlo-avg,
.jlo .jlo-star svg,
.jlo .jlo-star svg g {
transition: none;
transition-delay: 0ms;
}
.jlo-stars[data-hover] .jlo-star svg {
transform: none;
}
}

/* --- WHILE RATING IS SAVING --- */

.jlo-rate[data-busy="1"] .jlo-star {
pointer-events: none;
opacity: 0.5;
}

/* --- BRIEF HIGHLIGHT AFTER JUMPING DOWN --- */

/* Without this, clicking the summary stars drops you somewhere in
the middle of a long card with no clue what you were sent to. */

.jlo-flash {
animation: jloFlash 1.6s ease-out 1;
}

@keyframes jloFlash {
0% {
background: #fff6cc;
}
100% {
background: transparent;
}
}

/* --- HIDDEN ELEMENTS --- */

.jlo-hidden {
display: none !important;
}

/* Layout *//* Full size col content */
.variantFullSizeContentColumn #ContentWrapper {
    padding-left:0;
    padding-right:0;
    width: 100%;
}
.variantFullSizeContentColumn #PageWrapper #ContentColumn { 
    width: 100%; 
    float: none; 
}
.variantFullSizeContentColumn #NavWrapper {
    display: none;
}
.variantFullSizeContentColumn #ExtraWrapper {
    display:none;
}

/* hidden header */
.variantNoHeader #HeaderWrapper {
    display: none;
}

/* hidden footer */
.variantNoFooter #FooterWrapper {
    display:none;
}

/* hide extra column */
.variantNoExtraColumn #ExtraWrapper {
    display:none;
}

/* hide navigation column */
.variantNoNavColumn #NavWrapper {
    display: none;
}
/* sedgwick-ave-vietnamese-400-normal*/
@font-face {
  font-family: 'Sedgwick Ave';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/sedgwick-ave/files/sedgwick-ave-vietnamese-400-normal.woff2') format('woff2'), url('fonts/sedgwick-ave/files/sedgwick-ave-all-400-normal.woff') format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
}
/* sedgwick-ave-latin-ext-400-normal*/
@font-face {
  font-family: 'Sedgwick Ave';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/sedgwick-ave/files/sedgwick-ave-latin-ext-400-normal.woff2') format('woff2'), url('fonts/sedgwick-ave/files/sedgwick-ave-all-400-normal.woff') format('woff');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* sedgwick-ave-latin-400-normal*/
@font-face {
  font-family: 'Sedgwick Ave';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/sedgwick-ave/files/sedgwick-ave-latin-400-normal.woff2') format('woff2'), url('fonts/sedgwick-ave/files/sedgwick-ave-all-400-normal.woff') format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}