div.anue-heroa {
    background-color:white;
    div.container {
        display:flex;
        flex-direction:column;
        padding:0 !important;
        @media (min-width:768px) {
            flex-direction:row;
        }
    }
    div.content {
        width:100%;
        padding:var(--sp3) var(--sp);
        @media (min-width:768px) {
            width:50%;
            min-width:50%;
            padding-left:0;
            min-height:30rem;
            padding-left:var(--sp1);
            padding-top:var(--sp4);
            padding-bottom:var(--sp5);
        }
        @media (min-width:992px) {
            padding-left:var(--sp4);
            padding-right:var(--sp3);
        }
        @media (min-width:1200px) {
            width:50%;
            min-width:50%;
        }
        p {
            color:black;
            font-size:1.3rem;
            font-family: 'Galano Grotesque';
        }
    }
    div.image {
        display:flex;
        flex-direction:row;
        padding: 0;
        @media (min-width:768px) {
            padding-bottom:0;
        }
        img {
            object-fit: cover;
            max-height: 100%;
        }
    }
    div.scroll {
        img {
            display: none;
        }
        img.show {
            display:block;
        }
    }
}

article.page div.anue-heroa {
    div.content {
        order: 1;
    }
    div.image {
        order: 2;
    }
}

p.cat-links, p.category-links {
    margin:0;
    font-family:"Galano Grotesque";
    font-size:1.3rem !important;
    color: var(--pri) !important;
    a {
        border:none;
    }
    a:hover {
        color: var(--sec);
        border-bottom:1px solid var(--sec);
    }
    @media (min-width:992px) {
        font-size:1.4rem !important;
    }
}

div.anue-heroa div.content div.header {  /*Treatment header, Learn header */
    width:100%;
    overflow:hidden;
    display:flex;
    flex-direction:row;
    align-items:center;
    margin-top:0;
    margin-bottom:var(--sp2);
    img.icon {
        max-height:4rem;
        margin-right: var(--sp1);
        width:auto;
        @media (min-width:992px) {
            max-height:6rem;
        }
    }
    div.hdr-text {
        h1 {
            font-family:"Galano Grotesque Medium";
            font-weight:400;
            font-size:1.6rem;
            line-height: 2rem;
            color:var(--sec) !important;
            @media (min-width:992px) {
                font-size:2rem;
                line-height:2.5rem;                
            }
        }
    }
}

body.home div.anue-heroa {
    h1 {
        font-family: "Begum" !important;
        font-size: 3rem !important;
        line-height: 3.5rem !important;
    }
    h2 {
        color: var(--pri);
        font-size: 1.5rem;
        font-weight: 400;
    }
}


div.anue_heroa div.quickfacts {
    font-family:"Galano Grotesque";
    font-size:1.3rem;
    margin-top:var(--sp2);
    margin-bottom:var(--sp1);
    column-count:1;
    @media (min-width:992px) {
        column-count:2;
        margin-bottom:var(--sp3);
    }
    a {
        color:black;
        border-bottom:1px solid black;
    }
    a:hover {
        color:var(--pri);
        border-bottom:1px solid var(--pri);
    }
    ul {
        padding-left:var(--sp15);
        orphans: 3;
        li {
            font-size:1.2rem;
        }
    }
    p {
        margin:0;
    }
    strong {
        color:var(--pri);
        font-weight:600;
    }
}


div.anue_heroa div.image {
    order:2;
    justify-content: end;
    @media (min-width:768px) {
        order:1;
    }
}

div.anue_heroa div.content {
    padding-top:var(--sp2);
    padding-bottom:var(--sp3);
    order:1;
    @media (min-width:768px) {
        order:2;
        padding-left:var(--sp1);
        padding-top:var(--sp4);
        padding-bottom:var(--sp5);
    }
    @media (min-width:992px) {
        padding-left:var(--sp4);
    }
    p {
        color:black;
    }
}

div.foogallery {
    .fg-selected {
        background-color:var(--pri) !important;
    }
    .fg-panel-info-inner {
        background-color:#ddd !important;
        .fg-media-caption-description {
            text-align: left;
            font-size:1rem;
            line-height:1.5rem;
            font-family:"Galano Grotesque";
            b {
                font-weight:600;
                color:var(--sec);
            }
        }
    }
    .fg-panel {
        border: none !important;
    }
    .fg-panel-thumbs {
        display:none;
        @media (min-width:768px) {
            display:block;
        }
        .fg-panel-thumbs-inner {
            background-color:white !important;
        }
    }
}

/*------ Old ------*/
div.anue-hero {
    width: 100%;
    overflow: hidden;
    div.container {
        display:flex;
        flex-direction:column;
        padding:0 !important;
        @media (min-width:768px) {
            flex-direction:row;
        }
    }
    div.content {
        width:100%;
        padding:var(--sp3) var(--sp);
        @media (min-width:768px) {
            width:50%;
            min-width:50%;
            padding-left:0;
            min-height:30rem;
        }
        @media (min-width:992px) {
            padding-right:var(--sp3);
        }
        @media (min-width:1200px) {
            width:50%;
            min-width:50%;
        }
        p {
            font-size:1.3rem;
        }
        div.wp-block-buttons {
            margin-top:var(--sp3);
        }
    }
    div.image {
        display:flex;
        flex-direction:row;
        padding: 0;
    }
}

article.page .anue-hero .image, article.category-about  .anue-hero .image,
article.category-treatments .anue-hero .image {
    height:auto;
    width: 100%;
    @media (min-width:768px) {
        overflow:visible;
        width:50%;
        min-width:50%;
    }
    @media (min-width:1200px) {
        width:50%;
        min-width:50%;
    }
    img {
        object-fit:cover;
        width: 100% !important;
        min-width: 100% !important;
        @media (min-width:768px) {
            min-width:50vw !important;
            min-height:100%;
        }
    }
}
article.category-learn div.anue-hero {
    background-image:url("/wp-content/uploads/bokeh3072x1391.jpg");
    background-size:cover;
    div.content {
        width:100%;
        padding:var(--sp3) var(--sp) 0 var(--sp);
        @media (min-width:768px) {
            padding:var(--sp3) var(--sp);
            width:75%;
            min-width:75%;
        }
        @media (min-width:992px) {
            width:65%;
            min-width:65%;
        }
        @media (min-width:1200px) {
            width:50%;
            min-width:50%;
        }
    }
    div.image {
        max-height:20rem;
        align-items: end;
        justify-content: end;
        @media (min-width:768px) {
            max-height:100%;
            width:25%;
            min-width:25%;
        }
        img {
            padding:0;
            width:auto;
            height:20rem;
            max-height:100%;
            min-height:auto;
            @media (min-width:768px) {
                height:auto;
                max-height:80%;
            }
        }
    }
    div.content p {
        color:white;
    }
}
article.category-treatments div.anue-hero {
    background-color:var(--ter-tint);
    div.image {
        order:2;
        justify-content: end;
        padding-bottom:var(--sp2);
        @media (min-width:768px) {
            order:1;
            padding-bottom:0;
        }
    }
    div.content {
        padding-top:var(--sp2);
        padding-bottom:var(--sp3);
        order:1;
        @media (min-width:768px) {
            order:2;
            padding-left:var(--sp1);
            padding-top:var(--sp4);
            padding-bottom:var(--sp5);
        }
        @media (min-width:992px) {
            padding-left:var(--sp4);
        }
        p {
            color:black;
        }
        div.quickfacts {
            font-family:"Galano Grotesque";
            font-size:1.3rem;
            margin-top:var(--sp2);
            margin-bottom:var(--sp1);
            column-count:1;
            @media (min-width:992px) {
                column-count:2;
                margin-bottom:var(--sp3);
            }
            a {
                color:black;
                border-bottom:1px solid black;
            }
            a:hover {
                color:var(--pri);
                border-bottom:1px solid var(--pri);
            }
            ul {
                padding-left:var(--sp15);
                orphans: 3;
                li {
                    font-size:1.2rem;
                }
            }
            p {
                margin:0;
            }
            strong {
                color:var(--pri);
                font-weight:600;
            }
        }
        div.wp-block-buttons {
            margin-top:0;
            a.wp-element-button {
                padding-left:2.2rem !important;
                padding-right:2.2rem !important;
                padding-top:var(--sp1) !important;
                padding-bottom:var(--sp1) !important;
                font-size:1.4rem !important;
                font-weight:600 !important;
                background-color:white;
                color:var(--sec) !important;
                border:3px var(--pri) solid;
            }
            a.wp-element-button:hover,
            a.wp-element-button:focus {
                background-color:var(--sec);
                color:white !important;
            }
            a.wp-element-button:active {
                background:var(--sec-dark);
                color:rgb(255, 255, 255, .7);
            }
        }
    }
}

div.trh, div.lrh {  /*Treatment header, Learn header */
    width:100%;
    overflow:hidden;
    display:flex;
    flex-direction:row;
    align-items:center;
    margin-top:0;
    margin-bottom:var(--sp2);
    img.icon {
        max-height:4rem;
        width:auto;
        @media (min-width:992px) {
            max-height:6rem;
        }
    }
    div.hdr-text {
        padding-left:var(--sp1);
        p.cat-links {
            margin:0;
            font-family:"Galano Grotesque";
            font-size:1.2rem;
            a {
                border:none;
            }
            @media (min-width:992px) {
                font-size:1.4rem;
            }
        }
        h1 {
            font-family:"Galano Grotesque Medium";
            font-weight:400;
            margin:var(--sp05) 0;
            font-size:1.6rem;
            line-height: 2rem;
            @media (min-width:992px) {
                font-size:2rem;
                line-height:2.5rem;                
            }
        }
    }
}
div.trh {
    div.hdr-text {
        p.cat-links {
            a:hover {
                border-bottom:1px solid var(--pri);
            }
        }
        h1 {
            color:var(--sec);
        }
    }
}

div.lrh {
    div.hdr-text {
        p.cat-links {
            a {
                color:white;
            }
            a:hover {
                border-bottom:1px solid white;
            }
        }
        h1 {
            color:white !important;
        }
    }
}
article.page, article.category-about {
    div.anue-hero {
        h1 {
            margin-top:0;
            margin-bottom:var(--sp2);
            letter-spacing:1px;
            font-family:"Galano Grotesque Medium";
            color:var(--pri) !important;
        }
        h1.home {
            font-family:"Begum Regular";
            font-weight:400;
            color:black !important;
            margin-top:0;
        }
        h2 {
            font-family:"Galano Grotesque";
            color:var(--pri);
            font-size:1.4rem;
            letter-spacing:1px;
            margin:0;
            padding-top:0;
        }
        p {
            font-family:"Begum";
            margin-top:var(--sp2);
            margin-bottom:var(--sp2);
            font-size:1.6rem;
            line-height:2.2rem;
            @media (min-width:1200px) {
                width:75%;
            }
        }
        p.home {
            font-family:"Galano Grotesque";
            font-size:1.5rem;
        }
    }
}
