/*
 * Theme Name: kiri Theme
 * Author: Mirko Radtke
 * Author URI: https://codednetsolutions.de
 * Version: 1.2
 */

:root {
    --lightblue: #009DDA;
    --darkblue: #084387;
    --yellow: #ffcd36;
    --grey: #707070;
    --green: #39AA40;
    --red : #ED1B2F;
}

@font-face {
    font-family: 'kimchi';
    src: url('./assets/fonts/kimchi/kimchi-style.eot');
    src: url('./assets/fonts/kimchi/kimchi-style.eot?#iefix') format('embedded-opentype'),
    url('./assets/fonts/kimchi/kimchi-style.woff2') format('woff2'),
    url('./assets/fonts/kimchi/kimchi-style.woff') format('woff'),
    url('./assets/fonts/kimchi/kimchi-style.ttf') format('truetype'),
    url('./assets/fonts/kimchi/kimchi-style.svg#youworkforthem') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Oakes Grotesk Regular';
    src: url('./assets/fonts/oakesgrotesk/regular/oakes-grotesk-regular.eot');
    src: url('./assets/fonts/oakesgrotesk/regular/oakes-grotesk-regular.eot?#iefix') format('embedded-opentype'),
    url('./assets/fonts/oakesgrotesk/regular/oakes-grotesk-regular.woff2') format('woff2'),
    url('./assets/fonts/oakesgrotesk/regular/oakes-grotesk-regular.woff') format('woff'),
    url('./assets/fonts/oakesgrotesk/regular/oakes-grotesk-regular.ttf') format('truetype'),
    url('./assets/fonts/oakesgrotesk/regular/oakes-grotesk-regular.svg#youworkforthem') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'Oakes Grotesk Bold';
    src: url('./assets/fonts/oakesgrotesk/bold/oakes-grotesk-bold.eot');
    src: url('./assets/fonts/oakesgrotesk/bold/oakes-grotesk-bold.eot?#iefix') format('embedded-opentype'),
    url('./assets/fonts/oakesgrotesk/bold/oakes-grotesk-bold.woff2') format('woff2'),
    url('./assets/fonts/oakesgrotesk/bold/oakes-grotesk-bold.woff') format('woff'),
    url('./assets/fonts/oakesgrotesk/bold/oakes-grotesk-bold.ttf') format('truetype'),
    url('./assets/fonts/oakesgrotesk/bold/oakes-grotesk-bold.svg#youworkforthem') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Oakes Grotesk Medium';
    src: url('./assets/fonts/oakesgrotesk/medium/oakes-grotesk-medium.eot');
    src: url('./assets/fonts/oakesgrotesk/medium/oakes-grotesk-medium.eot?#iefix') format('embedded-opentype'),
    url('./assets/fonts/oakesgrotesk/medium/oakes-grotesk-medium.woff2') format('woff2'),
    url('./assets/fonts/oakesgrotesk/medium/oakes-grotesk-medium.woff') format('woff'),
    url('./assets/fonts/oakesgrotesk/medium/oakes-grotesk-medium.ttf') format('truetype'),
    url('./assets/fonts/oakesgrotesk/medium/oakes-grotesk-medium.svg#youworkforthem') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'Oakes Grotesk Semi-Bold';
    src: url('./assets/fonts/oakesgrotesk/semi-bold/oakes-grotesk-semi-bold.eot');
    src: url('./assets/fonts/oakesgrotesk/semi-bold/oakes-grotesk-semi-bold.eot?#iefix') format('embedded-opentype'),
    url('./assets/fonts/oakesgrotesk/semi-bold/oakes-grotesk-semi-bold.woff2') format('woff2'),
    url('./assets/fonts/oakesgrotesk/semi-bold/oakes-grotesk-semi-bold.woff') format('woff'),
    url('./assets/fonts/oakesgrotesk/semi-bold/oakes-grotesk-semi-bold.ttf') format('truetype'),
    url('./assets/fonts/oakesgrotesk/semi-bold/oakes-grotesk-semi-bold.svg#youworkforthem') format('svg');
    font-weight: normal;
    font-style: normal;
}

.kimchi {
    font-family: 'kimchi';
}


.container-fluid {
    width: 100%;
    margin: 0 auto;
    max-width: 1920px;

    padding:0;


}


h1 , .h1 {
    font-size:90px;
    line-height:70%;
    font-family: 'kimchi';
    color:var(--lightblue);
}


h2, .h2 {
    color:var(--lightblue);
}
.flatblue h2,  .flatblue .h2,
.flatgreen h2,  .flatgreen .h2 {
    color:#fff
}


h2, .h2, h3, .h3 {
    font-size : 40px;
    font-family: kimchi;

}




h1 sup {
    font-size:45px;
}

header h1,
header h2 {
    color:#fff;

}

header p {
    color:#fff;
    line-height : 34px;

}










body {
    font-family: 'Oakes Grotesk Medium';
    font-size: 20px;

    color: var(--grey);
    line-height: 34px;
    font-weight: 400;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    counter-reset: item;
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition-timing-function: ease;
    background: #ffffff;
    min-height: 100%;
}


@media(min-width: 992px) AND (max-width: 1600px) {
    body {

        font-size: 1.4vw;

    }

    h1 {
        font-size:5vw;
    }


    h1 sup {
        font-size:45px;
    }

    p sup {
        font-size:14px;

    }

    header p {
        color:#fff;
        line-height : 1.8vw;

    }

}

#header-text {
    background :var(--lightblue);
    border:1px solid transparent;

}

@media (min-width: 992px) {

    #header-text {
        position: absolute;
        left:3%;
        top :3%;
        max-width:32%;
        background:transparent;

    }

}


picture img {
    border:0 solid transparent;
}

table.nutri_info {
    width:80%;

}

table.nutri_info th {
    text-align:left;
}

table.nutri_info tr:nth-child(2n) {

    background: rgb(0,157,218, 15%);
}

table.nutri_info tr:nth-child(2n+3) {
    background: rgb(0,157,218, 5%);

}

table.nutri_info tr:first-child th {
    color: rgb(0, 165, 226);
}


.kiri-btn {
    border:1px solid var(--lightblue);
    border-radius:25px;
    display: inline-block;
    padding:10px 50px;
    color: var(--lightblue);
    font-size:18px;
    font-family: "Oakes Grotesk Bold";
    letter-spacing: 1px;

}

.btn-inverted {
    color: #fff;
    background :var(--lightblue);
}


ol li::marker {
    color: var(--lightblue);
    font-family: kimchi;
    font-size:200%;
}

ol li {
   
}

nav.kiri {
    background: var(--lightblue);

}

body {
    margin-top:84px
}



nav.kiri a {
    font-size:20px;
    color:#fff;
    font-family: "Oakes Grotesk Semi-Bold";
}

nav.kiri-top {
    text-transform: uppercase;
    height:70px;
    line-height:70px;
}

nav.kiri-top a.active,
nav.kiri-top a:hover {

    background: #FFFFFF;
    background: linear-gradient(45deg, rgba(255, 255, 255, .4) 0%, rgba(90, 204, 246, .4) 100%);

}



footer.links
{ background: var(--lightblue);
    height:112px
}


footer.social-footer {
    background: url('./assets/images/footer_bg.webp');
    aspect-ratio: 160/61;
    background-size: cover;

}

.kiri-footer {
    height:112px;
    padding-top:45px;
}


.container-md {
    max-width: 840px;
}

.container-lg {
    max-width: 1360px;
}

.container-xl {
    max-width: 1600px;
}

strong {
    font-family: 'Oakes Grotesk Bold';
}




.text-color-highlight {
    color: var(--lightblue);
}

header h2 {
    color:#ffffff;
}

.recipe-card {
    height: 100px;
    background-color : var(--lightblue);
    color:#ffffff;
    border-bottom-left-radius : 10px;
    border-bottom-right-radius :10px;
    border:none;

}

body.produkte footer.social-footer,
body.nachhaltigkeits-engagement footer.social-footer {
    background-color:var(--lightblue);
    border:1px solid var(--lightblue);
}

body.produkte footer.social-footer svg rect ,
body.nachhaltigkeits-engagement footer.social-footer svg rect {
    fill : #fff;
}

body.produkte footer.social-footer svg path ,
body.nachhaltigkeits-engagement footer.social-footer svg path {
    fill: var(--lightblue);
}

.bg-blue {
    background-color: var(--lightblue);
}


.productline-1 {
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 1054 633' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M187.545 6.87045C55.0807 -28.3127 7.32157 80.1686 0 138.807C0 208.774 20.2751 256.751 25.3439 312.724C30.4127 368.697 -35.4814 502.374 43.9294 594.589C123.34 686.804 231.474 580.595 427.467 606.583C575.379 626.195 563.433 569.989 617.5 548C671.567 526.011 714 491 798 498C898.879 506.407 924.3 439.966 936.5 411.5C953 373 935.036 348.837 853 247C838.5 229 851.27 131.183 808 89C738.199 20.9524 621.77 28.8599 479.845 50.8494C337.919 72.8389 353.125 50.8494 187.545 6.87045Z' fill='white'/%3E%3Cpath d='M974.758 192.801C1018.39 178.975 1029.51 144.631 1029.62 129.187C1037.68 101.741 997.67 62.2817 950.415 73.342C903.16 84.4023 871.905 121.568 873.877 153.378C875.848 185.187 920.218 210.085 974.758 192.801Z' fill='white'/%3E%3C/svg%3E%0A");

    background-repeat: no-repeat;

    background-size: 70.5% 100%;
}

.productline-1  .productline-text {

    padding:3% 12% 3% 4%;
}


.productline-2 {
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 878 519' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M191.241 28.5611C122.195 2.39553 83.3354 66.9269 72.5368 102.463C64.9014 157.412 27.6779 229.237 8.08381 280.046C-9.93445 326.768 1.54826 439.421 48.7665 490.514C95.9847 541.607 186.736 503.078 244.584 492.373C302.432 481.668 357.448 504.699 436.421 516.703C515.395 528.708 579.982 469.297 625.313 454.722C670.644 440.147 678.068 451.471 755.857 455.962C813.512 459.289 841.611 421.926 852.629 400.482C864.14 378.077 878.527 305.031 866.42 258.023C854.312 211.015 884.625 183.136 876.372 126.785C864.51 45.7823 808.516 66.3096 759.561 65.8448C710.607 65.38 649.671 4.77752 574.392 0.3113C499.113 -4.15492 466.05 40.5492 403.074 62.46C340.098 84.3709 277.55 61.268 191.241 28.5611Z' fill='white'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
   /* padding:3% 4% 0 10%;*/
    background-size: 55.5% 100%;
    background-position: 100% 0%



}

.productline-2 :first-child {
    order: 2 !important;
}

.productline-2 :last-child {
    order: 1 !important;
}



.productline-2  .productline-text {

    padding:5% 8% 3% 20%;
}




.productline-3 {


    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 871 488' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M205.009 7.2727C98.2092 -2.21399 31.4876 -22.7779 3.13729 105.44C-6.60816 149.515 8.70624 191.586 17.0595 271.722C22.8695 327.46 -13.8822 343.08 22.5 420.235C51.5 481.735 165.5 504.235 245.5 473.235C312.67 447.207 312 433.735 437 447.235C596.239 464.433 616.997 374.564 688 381.235C756.832 387.702 820.117 350.803 841 310.735C857.914 278.282 897.973 244.803 841 124.235C793.666 24.0649 681.257 29.1975 620 51.235C558.743 73.2724 554.5 84.7349 458.391 35.3204C339.928 -25.5875 317.778 17.2897 205.009 7.2727Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 60% 100%;
}

.productline-3  .productline-text {


    padding:2% 10% 4% 4%;
}


.text-image-section-3.geschichte > div > div > div:first-child,
.text-image-section-6.geschichte > div > div > div:first-child,
.text-image-section-7.geschichte > div > div > div:first-child
{
    order: 2 !important;
}

.text-image-section-3.geschichte > div > div > div:last-child,
.text-image-section-6.geschichte > div > div > div:last-child,
.text-image-section-7.geschichte > div > div > div:last-child

{
    order: 1 !important;
}


.text-image-section-2.geschichte > div > div > div:last-child {
    background:url(./assets/images/histroy-bg1.svg)  center center no-repeat;
     color:#fff;

}

.text-image-section-2.geschichte > div > div > div:last-child h2,
.text-image-section-4.geschichte > div > div > div:last-child h2,
.text-image-section-6.geschichte > div > div > div:last-child h2 {

    color:#fff;

}


.text-image-section-4.geschichte > div > div {

    background:url(./assets/images/history-bg2.svg) center center no-repeat;
    color:#fff;

}

.text-image-section-6.geschichte > div > div {

    background:url(./assets/images/history-bg3.svg)  center center no-repeat;
    color:#fff;

}

.box {
    width: 280px;
    height: 280px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    color : #fff;

    text-align: center;
    position: relative;
}

.box h2 {
    font-size: 56px;
    line-height :45px;
    color : #fff;
}


.box-deco {
    position: absolute;
    content: '';
    width:70px;
    height:70px;
    left:-36px;
    top:32px;
    background-position: center center;
    background-repeat: no-repeat;
}

body.home .box1 .box-deco {
    left: 22px;
    top: -32px;
    background-image:url(./assets/images/deco1.png);
}

body.home .box2 .box-deco {
    left: 22px;
    top: -32px;
    background-image:url(./assets/images/deco2.png);
}

body.nachhaltigkeits-engagement .text-image-section-2 .box3 .box-deco  {
    left:  auto;
    right:24px;
    top: -32px;
    background-image:url(./assets/images/deco2.png);
}


body.home .box3 .box-deco {
    left:auto;
    top: -38px;
    right: 10px;
    background-image:url(./assets/images/deco3.png);

}

body.home .box4 .box-deco {
    left:auto;
    top:auto;
    bottom:-35px;
    right:25px;
    background-image:url(./assets/images/deco4.png);

}


.blue {
    background: radial-gradient(circle,rgba(136, 216, 255, 1) 0%, rgba(0, 157, 218, 1) 92%);

}

.green {
    background: radial-gradient(circle,rgba(122, 199, 38, 1) 0%, rgba(92, 167, 10, 1) 92%);
}

.orange  {
    background: radial-gradient(circle,rgba(255, 144, 74, 1) 0%, rgba(239, 93, 0, 1) 92%);
}

.flatblue {
    background: #009DDA
}

.flatgreen {
    background: #5CA70A
}

.flatorange {
    background: #EF5D00
}

section.flatblue,
section.flatgreen,
section.flatorange,
section.flatblue h1,
section.flatgreen h1,
section.flatorange h1,
section.flatblue h2,
section.flatgreen h2,
section.flatorange h2


{
    color:#fff


}

.box-section a {
    text-decoration: none;
}

.box-button {
    width: 280px;
    display:inline-block;
    color:#fff;
    height:54px;
    padding-top:11px;
}

.box-button:hover {

    color:#fff;

}

footer,
section {
    max-width:1920px;
    margin: 0 auto;
}

section:not(.block-section) {
    padding-top:2em;
    padding-bottom:2em;

}

.block-section .row  {
    --bs-gutter-x : 0
}


body.nachhaltigkeits-engagement .boxes-section-3 {
    background: #EF5D00 url(./assets/images/bg_ernaehrung.png) center center no-repeat;
    background-size: cover;
    padding:260px 0

}

body.nachhaltigkeits-engagement .boxes-section-3 .flatorange {
    opacity:0.8}


body.nachhaltigkeits-engagement .text-section h2,
body.nachhaltigkeits-engagement .text-section .h2

{
    text-align:center;
    font-size: 100px;
    line-height:60%;

}

body.nachhaltigkeits-engagement .text-section {
    text-align:center;

    font-size:30px;
    line-height:42px;
}

body.nachhaltigkeits-engagement .boxes-section-2 p {

    font-size:18px;
}

.text-image-section-1.nachhaltigkeitsengagement > div > div > div:first-child,
.text-image-section-4.nachhaltigkeitsengagement > div > div > div:first-child

{
    order: 2 !important;
}

.text-image-section-1.nachhaltigkeitsengagement > div > div > div:last-child,
.text-image-section-4.nachhaltigkeitsengagement > div > div > div:last-child


{
    order: 1 !important;
}



.text-image-section-2.nachhaltigkeitsengagement > div > div > div:first-child img {
    position:relative;
    top:-200px;
}