/*  header */
/*.article-body p a:after, .recipe-ingredients a:after  {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    width: 100%;
    height: 8px;
    background-color: #FBDD66;
    z-index: -1;
}*/
body .article-body p a , .recipe-ingredients a {
    position: relative;
    z-index: 1;
    color: #000;
    text-decoration: underline;
    text-decoration-color: #fbdd66;/*#bebebe*/
    font-weight: 700;
}
.article-header{
    align-items: center;
    padding-bottom: 3.625rem;
    position: relative;
    border-bottom: unset;
}
.article-header.image{
    padding-bottom: 5.125rem;
}

.article-header .split{
    height: 719px;
    background-color: #FBDD66;
    align-items: center;
}
.article-header.video .split{
    height: 479px;
    position: relative;
}
.article-header .split > div{
    flex : 1;
}

.article-header .split .header-image{
    height: 100%;
}
.article-header.video .split .header-image{
    height: 100%;
    position: relative;
}


.article-header .split .header-info-wrapper{
    height: 100%;
}
.article-header .split .header-info{
    align-items: center;
    height: 100%;
    justify-content: center;
    padding: 3.5rem 2rem;
}
.article-header.video .split .header-info{
    padding: 2.125rem 2rem;
}

.article-header .category-wrapper{
    margin-bottom: 1.25rem;
}
.article-header .category{
    color: #999999;
    font-size: 1rem;
    line-height: 1.1875rem;
    letter-spacing: 0.8px;
    padding: 0 1rem;
    position: relative;
}
.article-header .split .category-wrapper,
.article-header .split .social{
    margin-bottom: auto;
}
.article-header .split .category{
    color: #666666;
    font-size: 0.9375rem;
    text-transform: uppercase;
}

.article-header .category:not(:first-child):before{
    content: "";
    position: absolute;
    left: -2px;
    top: 3px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 4px solid #999999;
}


.article-header .title{
    font-size: 2.25rem;
    line-height: 2.625rem;
    margin-bottom: 2.25rem;
    max-width: 726px;
    text-align: center;
}

.article-header .split .title{
    font-size: 2.0625rem;
    line-height: 2.625rem;
}

.article-header .details{
    font-size: 0.75rem;
    line-height: 0.875rem;
    letter-spacing: 0.6px;
    margin-bottom: 1.75rem;
}

.article-header .lead{
    font-size: 1.0625rem;
    line-height: 1.5rem;
    letter-spacing: 0.17px;
    color: #666;
    max-width: 623px;
    margin:0 auto 1.25rem;
    text-align: center;
}

.article-header .details > *{
    padding: 0 1rem;
}
h4.author {
    text-transform: uppercase;
}

.article-header .date{
    border-left: 1px solid #A1A1A1;
    text-align: center;
}

.article-header .social li{
    margin-right: 2rem;
}

.article-header .time{
    color: #000;
    font-size: 1.125rem;
    letter-spacing: 0.9px;
    margin-bottom: 2.375rem;
    align-items: center;
}

.article-header .time .icon{
    margin-right: 0.5rem;
    filter: brightness(0);
    width: 22px;
}

.article-header .main-image{
    width: 100%;
     margin-top: 2.125rem;
}


@media screen and (max-width: 1020px) {
    .article-header{
        padding-bottom: 2.375rem;
    }
    .article-header.image{
        padding-bottom: 3rem;
    }
}
@media screen and (max-width: 980px) {
    .article-header .main-image{
        width: calc(100% + 3.25rem);
    } 
    .article-header .title,
    .article-header .split .title{
        font-size: 1.875rem;
        line-height: 2rem;
        margin-bottom: 2rem;
    }  
}

@media screen and (max-width: 920px) {
    .article-header .split{
        flex-direction: column-reverse;
        height: auto;
    }    
    .article-header.video .split{
        height: auto;
    }    
    .article-header .split .header-image{
        width: 100%;
        aspect-ratio: 16/9;
    }
    .article-header .split .header-info-wrapper{
        height: 50%;
    }
    .article-header .split .social{
        margin-bottom: 0;
    }
    .article-header .split .category-wrapper{
        margin-bottom: 1.75rem;    
    }
}
@media screen and (max-width: 780px) {
    .article-header.image{
        padding-bottom: 2.75rem;
    }
    .article-header .split .category,
    .article-header .category{
        font-size: 0.65rem;
        line-height: 0.875rem;
    }
    .article-header .split .time{
        margin-bottom: 1.25rem;
    }
    .article-header .details{
        margin-bottom: 1.125rem;
    }
}
@media screen and (max-width: 720px) {
    .article-header .split{
        width: calc(100% + 52px);
        margin-left: -26px;
    }
    .article-header .split .header-info{
        padding: 2rem 2rem 2.625rem;
    }
    .article-header .split .title,
    .article-header .title{
        font-size: 1.5rem;
        line-height: 1.625rem;
        margin-bottom: 1.75rem;
    }    
}
@media screen and (max-width: 520px) {
    .article-header .split .header-image{
        aspect-ratio: 0.93;
    }
    .article-header .split .header-info{
        padding: 2rem 1.625rem 2.625rem;
    }
    .article-header.image{
        padding-bottom: 2.25rem;
    }
    .article-header .main-image{
        --aspect-ratio: 1.37!important;
    }
    .article-header .details{
        margin-bottom: 0.875rem;
    }
}
@media screen and (max-width: 480px) {
    .article-header .split .title,
    .article-header .title{
        font-size: 1.3125rem;
        line-height: 1.6875rem;
        margin-bottom: 1.5rem;
    }
    .article-header .split .details,
    .article-header .details{
        margin-bottom: 0.75rem;
    }
}

/*  recipe section  */

.recipe-section{
    margin-bottom: 4.5rem;
    position: relative;
}


.recipe-section .recipe-info aside:not(:last-of-type){
    margin-bottom: 2.875rem;
}

/*
.recipe-section .recipe-info{
    flex: 0 0 300px;
}

.recipe-section .info-block{
    border-right: 1px solid  #e6e6e6;
    padding: 0 3.375rem 2rem 0;
}

.recipe-section .info-block:last-of-type{
    margin-bottom: 3.125rem;
}
.recipe-section .info-block > div{
    margin:0 auto;
}

.recipe-section .info-block .headers{
    margin-bottom: 1.875rem;
}

.recipe-section .recipe-wrapper{
    padding-left: 2.125rem;
}
*/
.recipe-section h2{
    background-color: #FBDD66;
    width: fit-content;
    padding: 0.25rem 0.75rem;
    font-size: 1.1875rem;
    line-height: 1;
    font-family: "PFDasGroteskProBold"!important;
}

.recipe-ingredients h3{
    background-color: #F1EFE2;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.25rem 0.75rem;
    width: fit-content; 
    margin-top: 0.75rem;   
}

.ingredient-list .ingredient:not(:last-child){
    margin-bottom: 0.5rem;
}

.recipe-tips .tip{
    padding-left: 1rem;
    position: relative;
    font-family: "PFDasGroteskProRegular";
}

.recipe-tips .tip span{
    font-family: "PFDasGroteskProMedium";
}

.recipe-tips .tip:not(:last-child){
    margin-bottom: 2rem;
}

.recipe-tips .tip::before{
    content: "\2023";
    position: absolute;
    left: 0;
    top: 0;
}

.recipe aside{
    margin-bottom: 2rem
}
.recipe  .ad{
    margin: 0;
}

/*  recipe - alt */
.recipe-section .desk-left{
    float: left;
    width: 300px;
}
.recipe-section .desk-right{
    width:  calc(100% - 300px);
    margin-left: auto;
    padding-left: 2.125rem;
}

.recipe-ingredients .headers{
    margin-bottom: 1.875rem;    
}
.recipe-ingredients ul .headers{
    margin-top: 1.875rem;    
}
.recipe-ingredients .ingredients-wrapper{
    padding-right: 2.25rem;  
    margin-bottom: 2rem;
    border-right: 1px solid #e6e6e6;
    position: relative;
}

.recipe-ingredients .ingredients-wrapper:after{
    content: "";
    height: 2rem;
    position: absolute;
    right: -1px;
    top: 100%;
    border-right: 1px solid #e6e6e6;
}

.recipe-ingredients .tips-wrapper{
    padding-top: 1.125rem;
    padding-right: 2.25rem;
    margin-top: 2rem;
    position: relative;
    padding-bottom: 4rem;
    margin-bottom: 2rem;
    border-right: 1px solid #e6e6e6;
}

.recipe-ingredients .tips-wrapper::after{
    content: "";
    position: absolute;
    top: -2rem;
    border-right: 1px solid #e6e6e6;
    right: -1px;
    height: 2rem;
}

.recipe-ingredients .tips-wrapper::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 2.25rem);
    border-top: 1px solid #e6e6e6;
}

.recipe-tips.mob{
    display: none;
}

@media screen and (max-width: 1020px) {
    .recipe-ingredients .tips-wrapper::after{
        display: none;
    }
}
@media screen and (max-width: 840px) {
    .recipe-section.wrapper{
        display: flex;
        flex-wrap: wrap;
        max-width: 620px;
    }
    .recipe-ingredients .tips-wrapper{
        display: none;
    }
    .recipe-tips.mob{
        display: block;
        font-size: 1.0625rem;
        line-height: 1.75rem;
        position: relative;
        margin: 2rem auto;
    }
    .recipe-tips.mob:after{
        content: "";
        width: 100%;
        position: absolute;
        left: 0;
        top: -2rem;
        border-top: 1px solid #e6e6e6;
    }


    .recipe-section .desk-left{
        float: none;
        width: 100%;
        padding-right: 0;
        margin: 2rem auto;
    }
    .recipe-section .desk-right{
        width: 100%;
        padding-left: 0;
    }

    .recipe-ingredients .ingredients-wrapper{
        padding-right: 0;
        border-right: 0;
        font-size: 1.0625rem;
        line-height: 1.75rem;
        position: relative;
        margin-bottom: 2rem;
        padding-bottom: 2rem;
    }
    .recipe-ingredients .ingredients-wrapper:before,
    .recipe-ingredients .ingredients-wrapper:after{
        content: '';
        width: 100%;
        border-top: 1px solid #e6e6e6;
        position: absolute;
        left: 0;
    }

    .recipe-ingredients .ingredients-wrapper:before{
        top: -2rem;
    }
    .recipe-ingredients .ingredients-wrapper:after{
        bottom: -2rem;
        border-right: none;
    }

    .recipe-tips.mob .headers{
        margin-bottom: 1.25rem;
    }

    .recipe-section .recipe-info{order: 1;}
    .recipe-section .recipe-ingredients{order: 2;}
    .recipe-section .recipe-steps{order: 3;}
    .recipe-section .recipe-tips{order: 4;}
    .recipe-section .article-footer{order: 5;}

    .recipe .ad{
        margin: 0 auto 2rem;
    }
}

@media screen and (max-width: 520px) {
    .recipe-ingredients .ingredients-wrapper:before,
    .recipe-ingredients .ingredients-wrapper:after,
    .recipe-tips.mob:after{
        width: calc(100% + 52px);
        left: -26px;
    }    
}

/*  article body */

.single .article-section {
    margin-bottom: 5.125rem;
    position: relative;
}

.article-column{
    padding-right: 1.625rem;
}

.article-column .main-image{
    margin-bottom: 2.625rem;
}
.article-body{
    font-family: 'PFDasGroteskProRegular';
}

.article-body > *, .article-body .inarticle-add {
    margin-bottom: 2rem;
}
.article-body > div {
    margin-bottom: 0;
}

.article-body :is(h1, h2, h3, h4, h5, h6){
    font-family: 'PFDasGroteskProMedium';
}

.article-body h1{
    font-size: 1.75rem;
}
.article-body h2{
    margin-bottom: 1.5rem;
}
.article-body h3{
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
}
.article-body h4{
    margin-bottom: 1rem;
}
.article-body h5{
    font-size: 0.75rem;
    margin-bottom: 1rem;
}
.article-body h6{
    font-size: 0.625rem;
    margin-bottom: 1rem;
}

.article-body li,
.article-body p{
    font-size: 1.1875rem;
    line-height: 2rem;
}

.article-body a{
    color: #999;
}
.article-body p strong{
    font-family: 'PFDasGroteskProMedium';
}

.article-body ol{
    list-style:lower-roman;
    padding-left: 1.5rem;
}
.article-body ul{
    list-style:disc;
    padding-left: 1.5rem;
}

.article-body blockquote{
    border-top: 2px solid #FBE19A;
    border-bottom: 2px solid #FBE19A;
    padding:5.5rem 2rem 3rem;
    text-align: center;
    font-size: 1.5625rem;
    line-height: 2.25rem;
    position: relative;
}

.article-body blockquote strong{
    font-family: 'PFDasGroteskProMedium';
    position: absolute;
    width: 100%;
    text-align: center;
    top: 2.5rem;
    left: 0;
    color: #999999;
    font-size: 0.875rem;
    letter-spacing: 0.7px;
    line-height: 1rem;
    padding: 0 2rem;
}

.article-body blockquote:before,
.article-body blockquote:after{
    font-size: 2rem;
}
.article-body blockquote:before{
    content: "\201C";
}
.article-body blockquote:after{
    content: "\201D";
}

.article-body .img-item img{
    width: 100%;
}
.article-body p img {
    max-width: 100%;
    width: auto;
}
.article-body .img-description{
    color: #ABABAB;
    font-size: 0.875rem;
    letter-spacing: -0.14px;
    line-height: 1;
    font-family: 'PFDasGroteskProMedium';
    padding-top: 1rem;
}

.recipe h2{
    margin-bottom: 1.25rem;
}
.recipe h3{
    line-height: 2rem;
    font-family: 'PFDasGroteskProBold';
}

.article-body iframe{
    max-width: 100%;
    /*padding: 1.75rem 0;*/
    border-top: 1px solid #E6E6E6;    
    border-bottom: 1px solid #E6E6E6; 
    border-radius: 0!important;
    margin-bottom: 2rem;
}

/*  settings for particular pages   */

.reportage .article-body > h2{
     border-top :1px solid #E6E6E6;   
     padding-top: 1.5rem; 
}
.reportage .article-body > h5{
     color: #999;
     font-size: 0.8125rem;
     letter-spacing: 0.65px;
     line-height: 1rem;
}

@media screen and (max-width: 1020px) {
    .article-column .article-body{
        max-width: 680px;
        margin:0 auto;
    }
}

@media screen and (max-width: 720px) {
    .article-column .main-image{
        /*width: calc(100% + 3.25rem);
        margin-left: -1.625rem;*/
    }

    .article-body > *{
        margin-bottom: 1.5rem;
    }
    .article-body h1{
        font-size: 1.5rem;
    }
    .article-body h2{
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }
    .article-body h3{
        font-size: 1rem;
        margin-bottom: 1rem;
    }
    .article-body h4{
        font-size: 0.875rem;
        margin-bottom: 1rem;
    }
    .article-body h5{
        margin-bottom: 0.5rem;
    }
    .article-body h6{
        margin-bottom: 0.5rem;
    }
    
    .article-body li,
    .article-body p{
        font-size: 1.0625rem;
        line-height: 1.5rem;
    }  

    .article-body blockquote{
        padding:3rem 2rem 2rem;
        font-size: 1.3125rem;
        line-height: 1.5rem;
    }
    
    .article-body blockquote strong{
        top: 1.5rem;
    }
    
    .article-body blockquote:before,
    .article-body blockquote:after{
        font-size: 1.75rem;
    } 
    
    .article-body .img-description{
        padding-top: 0.625rem;;
    }
}

@media screen and (max-width: 520px) {
    .article-body blockquote{
        padding:3rem 1rem 2rem;
        font-size: 1.3125rem;
        line-height: 1.5rem;
    }
}

/*  double image 
    overrides wp-block-column
*/

.article-body .wp-block-columns{
    display: flex;
    justify-content: space-between;
    height: 466px;
}
.article-body .wp-block-column{
    width: calc((100% - 2.125rem) / 2);
}

@media screen and (max-width: 680px) {
    .article-body .wp-block-columns{
        height: 400px;
    }
    .article-body .wp-block-column{
        width: calc((100% - 1.5rem) / 2);
    }
}
@media screen and (max-width: 580px) {
    .article-body .wp-block-columns{
        height: 300px;
    }
    .article-body .wp-block-column{
        width: calc((100% - 1.25rem) / 2);
    }
}
@media screen and (max-width: 480px) {
    .article-body .wp-block-columns{
        height: 218px;
    }
}

/*  image gallery */

.img-gallery{
    position: relative;
}
.img-gallery-container{
    width: 100%;
}
.img-gallery-wrapper{
    width: calc(100% * var(--size));
}

.img-item{
    width: calc(100% / var(--size));
    scroll-snap-align: start;
}

.img-gallery-navigation .nav-btn{
    position: absolute;
    width: 33px;
    height: 33px;
    border:1px solid #0D0D0D;
    top: 50%;
    display: grid;
    background-color: rgba(255,255,255,0.2);
    border-radius: 50%;
    place-items: center;
    transform: translateY(-50%);
    transform-origin: center;
    transition: background-color 0.3s;
    cursor: pointer;
}

.img-gallery-navigation .nav-btn:hover{
    background-color: rgba(255,255,255,0.4);
}

.img-gallery-navigation .nav-btn .icon{
    width: 11px;
    justify-content: center;
    filter: brightness(0);
}

.img-gallery-navigation .nav-btn.left{
    left: 30px;
    transform: translateY(-50%) rotate(180deg) ;
}
.img-gallery-navigation .nav-btn.right{
    right: 30px;
}

@media screen and (max-width: 580px) {
    .img-gallery-navigation .nav-btn.left{
        left: 1rem;
    }
    .img-gallery-navigation .nav-btn.right{
        right: 1rem;
    }
}

/*  block card */
.article-body .card-block{
    margin-bottom: 3.4375rem;
}
.article-body .card-block-row > h2{
    padding-top: 1.5rem;
    border-top: 1px solid #e9e9e9;
}

@media screen and (max-width: 680px) {
    .article-body .card-block-row .more-btn span{
        display: none;
    }
}

/*  article footer */

.article-footer .tags{
    margin-bottom: 1.875rem;
    padding: 1.3125rem 0 0.8125rem;
    border-top: 1px solid #E6E6E6;
    border-bottom: 1px solid #E6E6E6;
    flex-wrap: wrap;
}
.article-footer .tag{
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.6px;
    background-color: #F7F7F7;
    padding: 0.25rem 0.75rem;
    margin-right: 0.625rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    text-transform: uppercase;
}

.article-footer .tags.yl .tag{
    background-color: #FAF9F0;
}

.article-footer .share{
    align-items: center;
}
.article-footer .share h4{
    margin-right: 1.875rem;
    font-size: 0.8125rem;
    letter-spacing: 0.65px;
    line-height: 1rem;    
}

.article-footer .share li{
    margin-right: 2rem;
}

/*  archive */
.archive-group{
    padding: 3.5rem 0 ;
}
.archive-group.pt-0{
    padding-top:  0; 
}
.archive-group.border{
    border-top: 1px solid #e6E6E6;
}

.archive-group.set-margin .card-wrapper{
    margin-bottom: 3.125rem;
}

@media screen and (max-width: 920px) {
    .archive-group{
        padding: 2rem 0;
    }  
    .archive-group .main-article{
        margin-bottom: 2rem;
    }  
}
@media screen and (max-width: 580px) {
    .archive-group{
        padding: 1.25rem 0;
    }    
}

/*  recipe lists */

.filter-wrapper{
    background-color: #FBDD66;
    padding: 1.625rem 0;
}

.filter-wrapper .filter-inner{
    justify-content: space-between;
    align-items: center;
}

.filter-wrapper .filter-inner .filter-reset{
    font-size: 0.75rem;    
}

.filter-category{
    margin-right: 3rem;
    position: relative;
    cursor: pointer;
}

.filter-name{
    position: relative;
    font-size: 1.0625rem;
    line-height: 1.25rem;
}

.filter-name:after{
    content: "";
    width: 0; 
    height: 0; 
    border-left: 0.25rem solid transparent;
    border-right: 0.25rem solid transparent;
    border-top: 0.25rem solid #000;
    position: absolute;
    top: 40%;
    right: -1rem;
}

.filter-list-items{
    position: absolute;
    left:-1.25rem;
    top: calc(100% + 33px);
    background-color: #FAF9F0;
    z-index:5;
    max-height: 0;
    transition: max-height 0.3s;
    overflow: hidden;
}

.filter-category:hover .filter-list-items{
    max-height: 1000px;
}

.filter-list-items > ul{
    padding: 1.25rem;
    width: max-content;
}

.filter-item{
    margin-right: 0;
    padding-left: 2rem;
    position: relative;
    margin-bottom: 5px;
}

.filter-item:before{
    content: "";
    width: 20px;
    height: 20px;
    background-color: #ccc;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
}
.filter-item.selected:before{
    background-color: #FBDD66;
}
.filter-item.selected:after{
    content: "";
    width:4px;
    height: 12px;
    position: absolute;
    top:4px;
    left: 8px;
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
    transform-origin: center;
    transform: rotate(45deg);
}

.selected-filters-wrapper{
    padding-top: 1.5rem;    
    padding-bottom:  1.125rem;
    position: relative;
}

.selected-list{
    flex-wrap: wrap;
}

.selected-filter{
    align-items: center;
    padding: 2px 8px;
    background-color: #FBDD66;
    font-size: 0.75rem;
    letter-spacing: 0.6px;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.selected-filter .name{
    margin-right: 0.75rem;
}

.filter-btn.mob{
    display: none;
}

.filter-header.mob{
    display: none;
}

@media screen and (max-width: 1120px) {
    .filter-category{
        margin-right: 2.125rem;
    }    
}
@media screen and (max-width: 1030px) {
    .filter-category{
        margin-right: 1.75rem;
    }
}
@media screen and (max-width: 960px) {
    .filter-wrapper{
        margin-top: -1.5rem;
    }
    .filter-header.mob{
        display: flex;
    }
    .filter-btn.mob{
        display: flex;
        align-items: center;
        font-size: 1.0625rem;
        cursor: pointer;
    }
    .filter-btn.mob .icon{
        width: 22px;
        margin-right : 0.75rem;
    }
    .filter-list-wrapper{
        display: none;
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        background-color: #fff;
        padding: 0 22px;
        z-index: 100;
        padding-bottom: 4rem;
    }
    .filter-header,
    .filter-list{
        max-width: 600px;
        margin:0 auto;
    }
    .filter-list{
        flex-direction: column;
    }
    .filter-header{
        justify-content: space-between;
        align-items: center;
        padding-top: 1.625rem;
        padding-bottom: 1.625rem;
        border-bottom: 1px solid #e6e6e6;
    }
    .filter-category{
        border-bottom: 1px solid #e6e6e6;
        margin-right: 0;
    }
    .filter-name{
        padding: 1rem 0;
    }
    .filter-name:after{
        right: 0;
        top: 50%;
    }
    .filter-list-items{
        left: 0;
        top: 0;
        background-color: transparent;
    }
    .filter-list-items > ul{
        width: 100%;
        padding: 0 0 1rem 1rem;
    }
    .filter-item{
        padding-left: 0;
    }
    .filter-item:before{
        left: unset;
        right: 0;
    }
}


.recipes-article-list aside.ad,
.recipes-article-list .card-wrapper{
    margin-bottom: 2.375rem;
}

.recipes-article-list .card-wrapper .card-info{
    min-height: 128px;
}

.recipes-article-list .card-wrapper .title{
    font-family: "PFDasGroteskProBold";
    line-height: 1.375rem;
}

.recipes-article-list .main-article .card .details{
    position: absolute;
    top: 2.5rem;
}

.recipes-article-list .main-article .card .details .icon{
    filter: brightness(0);
}

.recipes-article-list .main-article .card .duration{
    color :#000;
}

/*  letters grid */

.letters-wrapper{
    margin-bottom: 3.435rem;
}

.letters{
    flex-wrap: wrap;
    justify-content: space-between;
}

.letter{
    width: 2.75rem;
    height: 2.75rem;
    background-color: #FAF9F0;
    font-size: 1.3125rem;
    line-height: 2.625rem;
    font-family: 'PFDasGroteskProBold';
    border-radius: 50%;
    margin-right: 16px;
    margin-bottom: 0.75rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s;
}

.letter:nth-of-type(12){
    margin-right: 0;
}

.letter:hover{
    background-color: #FBDD66;
}

.letter.selected{
    background-color: #FBDD66;
}

@media screen and (max-width: 760px) {
    .letter:nth-of-type(12),
    .letter{
        margin-right: calc((100% - (8 * 44px)) / 7);
    }
    .letter:nth-of-type(8n){
        margin-right: 0;
    }
    
}
@media screen and (max-width: 510px) {
    .letter:nth-of-type(8n),
    .letter:nth-of-type(12),
    .letter{
        margin-right: calc((100% - (6 * 44px)) / 5);
    }
    .letter:nth-of-type(6n){
        margin-right: 0;
    }
}
@media screen and (max-width: 350px) {
    .letter:nth-of-type(6n),
    .letter:nth-of-type(8n),
    .letter:nth-of-type(12),

    .letter{
        margin-right: calc((100% - (4 * 44px)) / 3);
    }
    .letter:nth-of-type(4n){
        margin-right: 0;
    }
}

/*  dicionary */

.dictionary{
    margin-bottom: 9rem;
}



.term-value{
    font-size: 1.5625rem;
    line-height: 2rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #E6E6E6;
    font-family: "PFDasGroteskProBold";
}

/*
.term-wrapper{
    max-height: 800px;
    overflow-y: scroll;
    padding-right: 2rem;
}

.term-wrapper::-webkit-scrollbar {
    width: 8px;
  }
  
  .term-wrapper::-webkit-scrollbar-track {
    background: #FAF9F0; 
  }
   
  .term-wrapper::-webkit-scrollbar-thumb {
    background: #FBDD66; 
  }
  
  .term-wrapper::-webkit-scrollbar-thumb:hover {
    background: #B08E5B; 
  }
  */

.term{
    border-bottom: 1px solid #E6E6E6;
    font-family: "PFDasGroteskProRegular";
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}


.term:last-of-type{
    border-bottom: none;
}
.term .term-name{
    font-size: 1.1875rem; 
    line-height: 2rem;
    font-family: "PFDasGroteskProBold";
    margin-bottom: 0.5rem;
}

.term-info{
    font-size: 1.1875rem;    
    line-height: 2rem;
}

.term-info img{
    display: inline;
    float: left;
    margin: 0 1rem 1rem 0;
    width: 230px;
}

.dictionary .article-footer{
    border-top: 1px solid #e6E6E6;
    padding-top: 1.875rem;
}

@media screen and (max-width: 580px) {
    .term{
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
    }
    .term-value{
        font-size: 1.3125rem;
        line-height: 1.5rem;
    }
    .term .term-name,
    .term-info{
        font-size: 1.0625rem;    
        line-height: 1.5rem;
    }
    
    .term-info img{
        margin: 0 0.75rem 0.5rem 0;
        width: 168px;
    }
}

/*  calories */


.cal-section .cal-container{
    flex: 0 0 calc(100% - 300px - 2.875rem);
    margin-bottom: 140px;
}
.cal-section .cal-counter{
    flex: 0 0 300px;
    background-color: #FBDD66;
    padding: 3rem;
    text-align: center;
    margin-left: 2.875rem;
    max-height: 275px;
    position: sticky;
    top: 0;
    margin-bottom: 100px;
}

.cal-counter .title{
    font-size: 1.1875rem;
    line-height: 2rem;
    margin-bottom: 1rem;
    font-family: "PFDasGroteskProRegular";
}

.cal-counter .counter{
    font-size: 2.5rem;
    line-height: 2.625rem;
    margin-bottom: 3rem;
    font-family: "PFDasGroteskProBold";
}
.cal-counter .btn{
    border-radius: 22px;
}

.calory-item{
    justify-content: flex-end;
    align-items: flex-end;
    font-size: 1.1875rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e6e6e6;
    font-family: "PFDasGroteskProRegular";
    cursor: pointer;
}

.calory-item.cal-header{
    padding-top: 0;
}

.cal-wrapper{
    opacity: 1;
    transition: opacity 0.3s;
}

.cal-wrapper.hide{
    opacity: 0;
}

.cal-wrapper .calory-item{
    padding-left: 2rem;
    position: relative;
}


.cal-wrapper .calory-item:before{
    content : "";
    width: 21px;
    height: 21px;
    background-color: #ccc;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.cal-wrapper .calory-item.selected:before{
    background-color: #FBDD66;
}

.cal-wrapper .calory-item.selected:after{
    content: "";
    width:4px;
    height: 12px;
    position: absolute;
    top:50%;
    left: 8px;
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
    transform-origin: center;
    transform: translateY(-50%) rotate(45deg);
}

.calory-item h3{
    font-size: 1.1875rem;
    font-family: "PFDasGroteskProBold";
}

.calory-item .cals{
    flex: 0 0 80px;
    text-align: right;
    margin-left: 1rem;
}
.calory-item .quantity{
    flex: 0 0 150px;
    text-align: right;
}
.calory-item .food{
    flex-basis: 400px;
    text-align: left;
}

@media screen and (max-width: 1080px) {
    .cal-section .cal-container{
        flex: 0 0 calc(100% - 300px - 2rem);
        margin-bottom: 140px;
    }
    .cal-section .cal-counter{
        margin-left: 2rem; 
    }
}
@media screen and (max-width: 980px) {
    .cal-section .cal-container{
        flex: 0 0 calc(100% - 232px - 1.5rem);
    }
    .cal-section .cal-counter{
        flex: 0 0 232px;
        margin-left: 1.5rem;
        padding: 1.5rem; 
        height: fit-content;
    }
}

@media screen and (max-width: 820px) {
    .cal-section .cal-container{
        flex: 0 0 calc(100% - 200px - 1.25rem);
        margin-bottom: 50px;
    }
    .cal-section .cal-counter{
        flex: 0 0 200px;
        margin-left: 1.25rem;
        padding: 1rem; 
    }
    .cal-counter .counter{
        font-size: 2rem;
        line-height: 2.25rem;
        margin-bottom: 1.5rem;
    }
    .cal-counter .title{
        font-size:1rem;
        line-height: 1.5rem;
        margin-bottom: 0.75rem;
    }
}

@media screen and (max-width: 760px) {
    .cal-section{
        flex-direction: column-reverse;
    }
    .cal-section .cal-counter{
        margin-left: 0;
        margin-bottom: 2rem;
        flex: unset;
    }
    .cal-counter .title{
        margin-bottom: 0.25rem;
    }
    .cal-counter .counter{
        margin-bottom: 0.75rem;
    }
    main.category .ad-section.flex {
        flex-direction: column;
    }
}

@media screen and (max-width: 580px) {
    .calory-item{
        padding-top:0,5rem;
        padding-bottom:0.5rem;
    }
    .calory-item,
    .calory-item h3{
        font-size: 1.0625rem;
    }
    .calory-item .cals {
        flex: 0 0 65px;
        margin-left: 0.75rem;
    }
    .calory-item .quantity{
        flex: 0 0 112px;
        margin-left: 0.75rem;
    }
}

@media screen and (max-width: 480px) {
    .cal-wrapper .calory-item{
        padding-left: 1.5rem;
    }
    .calory-item,
    .calory-item h3{
        font-size: 0.875rem;
    } 
    .calory-item .cals {
        flex: 0 0 58px;
        margin-left: 0.5rem;
    }   
    .cal-wrapper .calory-item:before{
        width: 1rem;
        height: 1rem;
    }
    .cal-wrapper .calory-item.selected:after{
        height: 8px;
    }
    .cal-section .cal-counter{
        width: calc(100% + 52px);
        margin-left: -26px;
    }
}