:root {

    /* COLORS - official */
    --gween:#688B15;
    --owange:#C89E45;
    --darktxt:#2E2C2C;
    --bggreen1:#DEEAE2;
    --bggreen2:#BEFFC7;
    --darkgreen:#0E402D; /* rgb: 14, 64, 45 */

    /* COLORS - additional */
    --greenish:#ECF1EE;
    --white:#ffffff;
    --black:#000000;
    --smgradient: linear-gradient(180deg, rgba(28, 23, 22, 0), rgba(28, 23, 22, .55), rgba(28, 23, 22, 1));
    --smgradient-50: linear-gradient(180deg, rgba(28, 23, 22, 0) 50%, rgba(28, 23, 22, .5), rgba(28, 23, 22, 1));
    --infogradient: linear-gradient(180deg, rgba(28, 23, 22, 0) 0%, rgba(28, 23, 22, .55) 65%, rgba(28, 23, 22, 1) 100%);
    --whitegradient: linear-gradient(180deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 1));
    --toxicgreen:#BBF814;
    --midgreen:#224433;
    --gwey:#C4C4C4;

    /* misc specific */
    --productODD:#ffffff;
    --productEVEN:#ECF1EE;
    --gween15:rgba(104, 139, 21,.15);
    --bggreen150:rgba(222, 234, 226, .65);
    --blacque50:rgba(0, 0, 0, .75);
    --owangeL:#ffe3a6;

    /* FONTS */
    --manrope: 'Manrope';

    /* CORNERS */
    --romtund: .75rem;
    --rghtund: 1rem;
    --rotund: 2rem;
    --rotunder: 3rem;
    --crk: 25px;

    /* Source - https://stackoverflow.com/a/78604383
    # Posted by Mika G., modified by community. See post 'Timeline' for change history
    # Retrieved 2026-02-09, License - CC BY-SA 4.0 */
    
    --n1: -.25rem;
    --n2: -.5rem;
    --n3: -1rem;
    --n4: -1.5rem;
    --n5: -3rem;
    
    --p1: .25rem;
    --p2: .5rem;
    --p3: 1rem;
    --p4: 1.5rem;
    --p5: 3rem;
    
  }

  /* ---------------- */

/* negative margins :| */

    /* 1 */
    .mt-n1 {
        margin-top: var(--n1);
    }
    .me-n1 {
        margin-right: var(--n1);
    }
    .mb-n1 {
        margin-bottom: var(--n1);
    }
    .ms-n1 {
        margin-left: var(--n1);
    }
    .mx-n1 {
        margin-left: var(--n1);
        margin-right: var(--n1);
    }
    .my-n1 {
        margin-top: var(--n1);
        margin-bottom: var(--n1);
    }
    /* 1 END */

        /* 2 */
        .mt-n2 {
            margin-top: var(--n2);
        }
        .me-n2 {
            margin-right: var(--n2);
        }
        .mb-n2 {
            margin-bottom: var(--n2);
        }
        .ms-n2 {
            margin-left: var(--n2);
        }
        .mx-n2 {
            margin-left: var(--n2);
            margin-right: var(--n2);
        }
        .my-n2 {
            margin-top: var(--n2);
            margin-bottom: var(--n2);
        }
        /* 2 END */

    /* 3 */
    .mt-n3 {
        margin-top: var(--n3);
    }
    .me-n3 {
        margin-right: var(--n3);
    }
    .mb-n3 {
        margin-bottom: var(--n3);
    }
    .ms-n3 {
        margin-left: var(--n3);
    }
    .mx-n3 {
        margin-left: var(--n3);
        margin-right: var(--n3);
    }
    .my-n3 {
        margin-top: var(--n3);
        margin-bottom: var(--n3);
    }
    /* 3 END */

        /* 4 */
        .mt-n4 {
            margin-top: var(--n4);
        }
        .me-n4 {
            margin-right: var(--n4);
        }
        .mb-n4 {
            margin-bottom: var(--n4);
        }
        .ms-n4 {
            margin-left: var(--n4);
        }
        .mx-n4 {
            margin-left: var(--n4);
            margin-right: var(--n4);
        }
        .my-n4 {
            margin-top: var(--n4);
            margin-bottom: var(--n4);
        }
        /* 4 END */

    /* 5 */
    .mt-n5 {
        margin-top: var(--n5);
    }
    .me-n5 {
        margin-right: var(--n5);
    }
    .mb-n5 {
        margin-bottom: var(--n5);
    }
    .ms-n5 {
        margin-left: var(--n5);
    }
    .mx-n5 {
        margin-left: var(--n5);
        margin-right: var(--n5);
    }
    .my-n5 {
        margin-top: var(--n5);
        margin-bottom: var(--n5);
    }
    /* 5 END */

/* start: MOBILE OPTIMISATION */

/* PC */
@media only screen and (min-width: 768px) {

    /* 1 */
    .mt-md-n1 {
        margin-top: var(--n1);
    }
    .me-md-n1 {
        margin-right: var(--n1);
    }
    .mb-md-n1 {
        margin-bottom: var(--n1);
    }
    .ms-md-n1 {
        margin-left: var(--n1);
    }
    .mx-md-n1 {
        margin-left: var(--n1);
        margin-right: var(--n1);
    }
    .my-md-n1 {
        margin-top: var(--n1);
        margin-bottom: var(--n1);
    }
    /* 1 END */

        /* 2 */
        .mt-md-n2 {
            margin-top: var(--n2);
        }
        .me-md-n2 {
            margin-right: var(--n2);
        }
        .mb-md-n2 {
            margin-bottom: var(--n2);
        }
        .ms-md-n2 {
            margin-left: var(--n2);
        }
        .mx-md-n2 {
            margin-left: var(--n2);
            margin-right: var(--n2);
        }
        .my-md-n2 {
            margin-top: var(--n2);
            margin-bottom: var(--n2);
        }
        /* 2 END */

    /* 3 */
    .mt-md-n3 {
        margin-top: var(--n3);
    }
    .me-md-n3 {
        margin-right: var(--n3);
    }
    .mb-md-n3 {
        margin-bottom: var(--n3);
    }
    .ms-md-n3 {
        margin-left: var(--n3);
    }
    .mx-md-n3 {
        margin-left: var(--n3);
        margin-right: var(--n3);
    }
    .my-md-n3 {
        margin-top: var(--n3);
        margin-bottom: var(--n3);
    }
    /* 3 END */

        /* 4 */
        .mt-md-n4 {
            margin-top: var(--n4);
        }
        .me-md-n4 {
            margin-right: var(--n4);
        }
        .mb-md-n4 {
            margin-bottom: var(--n4);
        }
        .ms-md-n4 {
            margin-left: var(--n4);
        }
        .mx-md-n4 {
            margin-left: var(--n4);
            margin-right: var(--n4);
        }
        .my-md-n4 {
            margin-top: var(--n4);
            margin-bottom: var(--n4);
        }
        /* 4 END */

    /* 5 */
    .mt-md-n5 {
        margin-top: var(--n5);
    }
    .me-md-n5 {
        margin-right: var(--n5);
    }
    .mb-md-n5 {
        margin-bottom: var(--n5);
    }
    .ms-md-n5 {
        margin-left: var(--n5);
    }
    .mx-md-n5 {
        margin-left: var(--n5);
        margin-right: var(--n5);
    }
    .my-md-n5 {
        margin-top: var(--n5);
        margin-bottom: var(--n5);
    }
    /* 5 END */

}

/* mobile */
@media only screen and (max-width: 768px) {

    /* 1 */
    .mt-md-n1 {
        margin-top: auto;
    }
    .me-md-n1 {
        margin-right: auto;
    }
    .mb-md-n1 {
        margin-bottom: auto;
    }
    .ms-md-n1 {
        margin-left: auto;
    }
    .mx-md-n1 {
        margin-left: auto;
        margin-right: auto;
    }
    .my-md-n1 {
        margin-top: auto;
        margin-bottom: auto;
    }
    /* 1 END */

        /* 2 */
        .mt-md-n2 {
            margin-top: auto;
        }
        .me-md-n2 {
            margin-right: auto;
        }
        .mb-md-n2 {
            margin-bottom: auto;
        }
        .ms-md-n2 {
            margin-left: auto;
        }
        .mx-md-n2 {
            margin-left: auto;
            margin-right: auto;
        }
        .my-md-n2 {
            margin-top: auto;
            margin-bottom: auto;
        }
        /* 2 END */

    /* 3 */
    .mt-md-n3 {
        margin-top: auto;
    }
    .me-md-n3 {
        margin-right: auto;
    }
    .mb-md-n3 {
        margin-bottom: auto;
    }
    .ms-md-n3 {
        margin-left: auto;
    }
    .mx-md-n3 {
        margin-left: auto;
        margin-right: auto;
    }
    .my-md-n3 {
        margin-top: auto;
        margin-bottom: auto;
    }
    /* 3 END */

        /* 4 */
        .mt-md-n4 {
            margin-top: auto;
        }
        .me-md-n4 {
            margin-right: auto;
        }
        .mb-md-n4 {
            margin-bottom: auto;
        }
        .ms-md-n4 {
            margin-left: auto;
        }
        .mx-md-n4 {
            margin-left: auto;
            margin-right: auto;
        }
        .my-md-n4 {
            margin-top: auto;
            margin-bottom: auto;
        }
        /* 4 END */

    /* 5 */
    .mt-md-n5 {
        margin-top: auto;
    }
    .me-md-n5 {
        margin-right: auto;
    }
    .mb-md-n5 {
        margin-bottom: auto;
    }
    .ms-md-n5 {
        margin-left: auto;
    }
    .mx-md-n5 {
        margin-left: auto;
        margin-right: auto;
    }
    .my-md-n5 {
        margin-top: auto;
        margin-bottom: auto;
    }
    /* 5 END */

    }
/* end: MOBILE OPTIMISATION */

/* negative margins END */

/* ---------------- */

/* fonts */
@font-face {
    font-family: 'Manrope';
    src:url("fonts/Manrope-VariableFont_wght.ttf");
    }
/* fonts END */


/* ---------------- */


/* start: MOBILE OPTIMISATION */

/* PC */
@media only screen and (min-width: 768px) {

    .frfr {
        text-align: right;
        }

    .mfw {
        text-align: right;
        }
    
    .hidden-md-up {
        display: none!important;
        }

    .navm-borgir {
        display: none!important;
        }

    h1 {
        font-size: 3rem!important;
        font-weight: 700;
    }

    h2 {
        font-size: 2.5rem!important;
        font-weight: 700;
    }

    .btn.btn-goldie {
        background:var(--owange);
        color: var(--darktxt);
        border:2px solid var(--owange);
        /*  py-2 px-4 m-md-0 m-2 */
        margin-right: var(--p2)!important;
        padding: var(--p2) var(--p4)!important;
        }
    
    .btn.btn-goldie:hover {
        filter: brightness(1.1);
        }
    
    .btn.btn-bnwie {
        background:var(--white);
        color: var(--darktxt);
        border: 2px solid var(--darktxt);
        /*  py-2 px-4 m-md-0 m-2 */
        margin-left: var(--p2)!important;
        padding: var(--p2) var(--p4)!important;
        }
    
    .btn.btn-bnwie:hover {
        filter: brightness(.9);
        }

    .bumtom {
        border-radius:var(--rotund) 0 0 0;
        /*  p-md-4 p-2 */
        padding: var(--p4)!important;
        }

    .bumtomabt {
        border-radius: 0 0 0 var(--rotund);
        /*  p-md-4 p-2 */
        padding: var(--p4)!important;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        }
    
    .abtpara {
        border-radius: 0 var(--rotund) 0 0;
        /*  p-md-4 p-2 */
        padding: var(--p4)!important;
        background: var(--white);
        }

    .heroimg {
        min-height:700px;
        background:url('img/Main_Hero_Image.png') center;
        background-size: cover;
        background-position: center;
        border-radius:var(--rotund);
    }

    .abtimg {
        min-height: 400px;
        background:url('img/arilje3.jpg') center;
        background-size: cover;
        background-position: center;
        border-radius:var(--rotund);
    }

    .abtspace {
        background: transparent;
        padding: 0!important;
        min-height: 14rem;
    }

    .gzzjzb {
        background: url('img/gzjzb.png'), var(--white);
        background-size: cover;
        background-position: 145px center;
        background-repeat: no-repeat;
        margin-top: calc(var(--p5) * 3);
        margin-bottom: var(--n5);
        margin-left: calc(var(--p5) + var(--p3));
        max-width: 290px;
        max-height: max-content;
        overflow: hidden;
        position: relative;
        border-radius:var(--rotund);
        box-shadow: 5px 5px 5px 0 rgba(0,0,0, .65);
    }

    .gzzjzb-overlay {
        background: rgba(255,255,255,.65);
        padding-left: var(--p4)!important;
        padding: var(--p5);
        width: 100%;
        height: 100%;
        font-weight: 600;
    }

    .gzzjzb-overlay h4 {
        font-weight: 700;
    }

    .sciencey {
        flex-grow: 1;
        padding: var(--p2) var(--p3);
        margin: 0!important;
        text-align: center;
    }

    .sciencey h5 {
        min-height: 3rem;
        display:flex;
        align-items: center;
        justify-content: center;
    }

    .rooty {
        background: url('img/Value_Prop_1_Image.png') center; 
        background-size: cover; 
        flex-grow: 1; 
        min-height: 300px;
        /* px-md-5 px-0 py-md-0 pb-4 */
        padding: var(--p5);
        margin-left: var(--p4);
        border-radius: var(--rotund);
    }

    .titleyy {
        margin-right: calc( var(--n5) * 2 );
        margin-top: var(--p4);
        margin-bottom: var(--p4);
        font-size: 3.2rem!important;
        text-align: start;
        /* background-color: #000000; */
    }

    .producc {
        text-align: start;
        margin-right: var(--p4);
    }
    
    .mainhero .tegzd {
        background: var(--white); 
        border-radius:0 0 var(--rotund) 0;
    }

    .multi-column-text {
    column-count: 2; /* Force 2 columns */
    }

}

/* mobile */
@media only screen and (max-width: 768px) {
    
    .mfw, .frfr {
        text-align: center;
        }
    
    .mobr {
        text-align: right;
        }
    
    .hidden-md-down {
        display: none!important;
        }

    .navd {
        background:var(--gween);
        border-radius:var(--rotund);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        }

    #navigation_load {
        position: sticky;
        top: var(--p4);
        z-index: 42;
        }

    .navm {
        z-index: 45;
        background:var(--gween);
        display: flex;
        min-height:100vh;
        height:100vh;
        max-height:100vh;
        position: fixed;
        top: 0px;
        width: 100%;
        color: var(--white);
        }

    .navm .nnav a {
        width:100%;
        display: block;
        padding: var(--p1);
        transition: all .5s;
        }

    .navm .nnav a:hover, .navm .nnav a:active {
        background: rgba(255,255,255,.25);
        }

    .navm-borgir {
        flex-grow: 1;
        width: 100%;
        background:var(--gween);
        font-size: 1.2rem;
        }

    .navm-borgir .leab {
        margin: var(--p4) 0 0 var(--p3);
        color: var(--white);
        border-radius: 50%!important;
        border: 2px solid var(--white);
        transition: all .5s;
        }

    .navm-borgir .leab:hover, .navm-borgir .leab:active {
        background: rgba(255,255,255,.25);
        }

    .navd .leab {
        color: var(--white);        
        padding: var(--p2)!important;
        border-radius: var(--rotund)!important;
        border: 2px solid var(--white);
        }

    .navd .leab:hover, .navd .leab:active {
        background: rgba(255,255,255,.25);
        }

    h1 {
        font-size: 2.5rem!important;
        font-weight: 600;
        }

    h2 {
        font-size: 2rem!important;
        font-weight: 600;
        }

    .btn.btn-goldie {
        background:var(--owange);
        color: var(--darktxt);
        border:2px solid var(--owange);
        /*  py-2 px-4 m-md-0 m-2 */
        margin: var(--p2)!important;
        padding: var(--p2) var(--p4)!important;
        }
    
    .btn.btn-goldie:hover {
        filter: brightness(1.1);
        }
    
    .btn.btn-bnwie {
        background:var(--white);
        color: var(--darktxt);
        border: 2px solid var(--darktxt);
        /*  py-2 px-4 m-md-0 m-2 */
        margin: var(--p2)!important;
        padding: var(--p2) var(--p4)!important;
        }
    
    .btn.btn-bnwie:hover {
        filter: brightness(.9);
        }

    .bumtom {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /*  p-md-4 p-2 */
        padding: var(--p4) 0 0 0!important;
    }

    .bumtomabt {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        /*  p-md-4 p-2 */
        padding: var(--p4) 0 0 0!important;
    }

    .abtpara {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /*  p-md-4 p-2 */
        padding: var(--p4) 0 0 0!important;
        background: var(--white);
    }

    .herospace {
        background: transparent;
        padding: 0!important;
    }

    .mainhero .tegzd {
        margin: 0;
        border-radius: 0!important;
        background: var(--white); 
    }

    .heroimg {
        max-height: max-content;
        background:url('img/Main_Hero_Image.png') fixed;
        background-size: cover;
        background-position: center;
        border-radius: 0;
    }

    .abtimg {
        max-height: max-content;
        background: transparent;
        border-radius: 0;
    }

    .keykey { background: var(--white);}

    .abtmobile {
        background:url('img/arilje3.jpg');
        background-size: cover;
        background-position: center;
        border-radius: var(--p4);
        min-height: 12rem;
    }

    .gzzjzb {
        background: url('img/gzjzb.png'), var(--white);
        background-size: contain;
        background-position: 215px center;
        background-repeat: no-repeat;
        margin-top: 0!important;
        margin-bottom: 0px!important;
        max-height: max-content;
        overflow: hidden;
        position: relative;
        border-radius: 0;
    }

    .gzzjzb-overlay {
        background: rgba(255,255,255,.65);
        padding-left: var(--p4)!important;
        padding: var(--p5);
        width: 100%;
        height: 100%;
        font-weight: 600;
    }

    .gzzjzb-overlay h4 {
        font-weight: 700;
    }

    .sciencey {
        flex-grow: 1;
        padding: var(--p2) var(--p3);
        margin: var(--p2) var(--p1);
        text-align: center;
        border-radius: var(--rotund);
    }

    .rooty {
        background: url('img/Value_Prop_1_Image.png') center; 
        background-size: cover; 
        flex-grow: 1; 
        min-height: 350px;
        margin: var(--p4) 0;
        margin-bottom: var(--n5);
        border-radius: var(--rotund);
    }

    .whiteyy {
        background: var(--whitegradient);
        flex-grow: 1; 
        min-height: 350px;
    }

    .titleyy {
        margin-top: var(--p2);
        margin-bottom: var(--p4);
        text-align: center;
    }

    .ingredience {
        text-align: center;
    }

}
/* end: MOBILE OPTIMISATION */


/* ---------------- */


/* start: GENERAL */
html {
    font-family: var(--manrope);
    }

body {
    background-color: var(--white);
    color: var(--darktxt);
    font-family: var(--manrope);
    }

p {
    font-family: var(--manrope);
    }

h1, h2, h3, h4, h5 {
    font-family:var(--manrope)!important;
    }

a {
    font-family: var(--manrope);
    }

.card {
    border-radius: var(--rotund)!important;
    border: 0px!important;
    }

.card.smm {
    border-radius: var(--rghtund)!important;
    border: 0px!important;
    }
/* end: GENERAL */


/* ---------------- */


/* start: BUTTONS */
.btn {
    font-family: var(--manrope);
    border-radius: var(--romtund)!important;
    transition: all .5s;
    font-weight: 600;
    }

.btn.btn-gold {
    background:var(--owange);
    color: var(--darktxt);
    border:2px solid var(--owange);
    }

.btn.btn-gold:hover {
    filter: brightness(1.1);
    }

.btn.btn-bnw {
    background:var(--white);
    color: var(--darktxt);
    border: 2px solid var(--darktxt);
    }

.btn.btn-bnw:hover {
    filter: brightness(.9);
    }

.btn.btn-kont {
    background:var(--toxicgreen);
    color: var(--darktxt);
    border: 2px solid var(--toxicgreen);
    font-weight: 600;
    border-radius: var(--rotund)!important;
    height: max-content;
    }

.btn.btn-kont:hover {
    filter: brightness(.9);
    }

.btn.btn-rotund-gr {
    background:var(--white);
    color: var(--darktxt);
    border: 0px;
    border-radius: 50%!important;
    transition: .5s;
    }

.btn.btn-rotund-gr:hover {
    background:var(--toxicgreen)!important;
    }

.btn.btn-rotund-or {
    background:var(--white);
    color: var(--darktxt);
    border: 0px;
    border-radius: 50%!important;
    transition: .5s;
    }

.btn.btn-rotund-or:hover {
    background:var(--owange)!important;
    }
/* end: BUTTONS */


/* ---------------- */

/* start: SPECIFIC STYLES */
.nnav a {
    color:var(--white)!important;
    text-decoration: none;
    transition: all .5s;
    }

.nnav a:hover {
    color:var(--owangeL)!important;
    }

#infobg {
    height: 100%;
    width: 100%;
    display: block;
    object-fit: cover;
    position: absolute; 
    top:0;
    left:0;
    transition: all 1s;
    }

.infopost {
    overflow: hidden!important;
    position: relative;
    flex-grow:1;
    }

.infopost:hover {
    #infobg {
        transform: scale(1.1);
        filter: saturate(150%);
        }
    }

/* end: SPECIFIC STYLES */


/* ---------------- */


/* curved corner WHITE // sauce: https://css-tricks.com/the-shapes-of-css/#aa-reverse-corners-via-zberno */
    #curved-corner-whoit {
        width: var(--crk);
        height: var(--crk);
        overflow: hidden;
        position: relative;
    }

    #curved-corner-whoit:before {
        content: "";
        display: block;
        width: 200%;
        height: 200%;
        position: absolute;
        border-radius: 40%;
    }

    #curved-corner-whoit:before {
        top: 0;
        left: 0;
        box-shadow: -25px -25px 0 0 var(--white);
    }
/* end: curved corner WHITE */


/* curved corner gween */
    #curved-corner-gween {
        width: var(--crk);
        height: var(--crk);
        overflow: hidden;
        position: relative;
    }

    #curved-corner-gween:before {
        content: "";
        display: block;
        width: 200%;
        height: 200%;
        position: absolute;
        border-radius: 40%;
    }

    #curved-corner-gween:before {
        top: 0;
        left: 0;
        box-shadow: -25px -25px 0 0 var(--bggreen1);
    }
/* end: curved corner gween */


/* curved corner odd products */
    #curved-corner-oddpr {
        width: var(--crk);
        height: var(--crk);
        overflow: hidden;
        position: relative;
    }

    #curved-corner-oddpr:before {
        content: "";
        display: block;
        width: 200%;
        height: 200%;
        position: absolute;
        border-radius: 40%;
    }

    #curved-corner-oddpr:before {
        top: 0;
        left: 0;
        box-shadow: -25px -25px 0 0 var(--productODD);
    }
/* end: curved corner odd products*/

/* curved corner even products */
    #curved-corner-evenpr {
        width: var(--crk);
        height: var(--crk);
        overflow: hidden;
        position: relative;
    }

    #curved-corner-evenpr:before {
        content: "";
        display: block;
        width: 200%;
        height: 200%;
        position: absolute;
        border-radius: 40%;
    }

    #curved-corner-evenpr:before {
        top: 0;
        left: 0;
        box-shadow: -25px -25px 0 0 var(--productEVEN);
    }
/* end: curved corner even products*/


/* ---------------- */

div.skiptranslate:nth-child(1) {font-size: 0px;}
div.skiptranslate:nth-child(1) > span:nth-child(2) {display: none!important;}

select.goog-te-combo {
    background: transparent!important;
    color: var(--bggreen1)!important;
    border: 1px solid var(--bggreen1);
    padding: var(--p2) var(--p3);
    border-radius: var(--romtund)!important;
    font-family: var(--manrope);
    width: 100%;
}

select.goog-te-combo option {
    background: transparent!important;
    color: var(--gween)!important;
    border: 0px!important;
    padding: var(--p2);
    border-radius: var(--romtund)!important;
}

/* ---------------- */

.aboutimg {
    min-height: 400px;
    background: url(../img/arilje3.jpg) center;
    background-size: cover;
    border-radius: var(--romtund);
    justify-content: start;
    align-items: end;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* PC */
@media only screen and (min-width: 768px) {

    .aboutimg {
        margin-top: calc( var(--n5) + var(--n4) + var(--n3) );
    }

    .aboutimgdecor {
        height: calc( var(--p4) + var(--p4) + var(--p2));
        width: calc( var(--p4) + var(--p2));
        background: var(--productEVEN);
        border-radius: 0 0 0 var(--romtund);
        width:35%;
    }

}

/* mobile */
@media only screen and (max-width: 768px) {
    .aboutimg {
        margin-bottom: var(--p4);
    }

}

/* curved corner GUEEN // sauce: https://css-tricks.com/the-shapes-of-css/#aa-reverse-corners-via-zberno */
    #curved-corner-gueen {
        width: var(--crk);
        height: var(--crk);
        overflow: hidden;
        position: relative;
    }

    #curved-corner-gueen:before {
        content: "";
        display: block;
        width: 200%;
        height: 200%;
        position: absolute;
        border-radius: 40%;
    }

    #curved-corner-gueen:before {
        top: 0;
        left: 0;
        box-shadow: -25px -25px 0 0 var(--productEVEN);
    }
/* end: curved corner WHITE */

/* ---------------- */