/*

Theme Name: mielwellens
Theme URI: www.mielwellens.com
Author: Miel Wellens
Author URI: www.mielwellens.com
Description: theme for mielwellens by mielwellens

*/

:root {
    /* Font Family */
    --font-primary: "Titillium Web", sans-serif;
    --font-secondary: "Titillium Web", sans-serif;

    --color-darkgrey: #474544;
    --color-lightgreywarm: #e4e4e4;
    --color-lightgreycold: #f6f9fb;
    --color-lightgreycold-transparent: #eef3f7;
    --color-darkgreycold: #c1d3e0;
    --color-red: #bd504e;

    --box-shadow-short:
        0px 0.2px 0.6px rgba(0, 0, 0, 0.02),
        0px 0.5px 1.3px rgba(0, 0, 0, 0.028),
        0px 1px 2.5px rgba(0, 0, 0, 0.035),
        0px 1.8px 4.5px rgba(0, 0, 0, 0.042),
        0px 3.3px 8.4px rgba(0, 0, 0, 0.05),
        0px 8px 20px rgba(0, 0, 0, 0.07)
        ;

    --box-shadow-long:
        0px 0.6px 1.1px rgba(0, 0, 0, 0.02),
        0px 1.3px 2.7px rgba(0, 0, 0, 0.028),
        0px 2.5px 5px rgba(0, 0, 0, 0.035),
        0px 4.5px 8.9px rgba(0, 0, 0, 0.042),
        0px 8.4px 16.7px rgba(0, 0, 0, 0.05),
        0px 20px 40px rgba(0, 0, 0, 0.07)
        ;

}

*{
    box-sizing: border-box;
}

a{
    color: inherit;
}

h1, h2, h3, h4, h5, h6,
b, strong{
    font-weight: 600;
}

/*fontsizes golden ratio:
https://grtcalculator.com

42, 33, 26, 20, 16
44, 33, 25, xx, 16

lineheight for titillium: 1.875 @ 16px font
*/

/* nice shadows from brumm: https://shadows.brumm.af */
.faketraceshadow,
.faketraceshadow_short{
    box-shadow:
        0px 0.2px 0.6px rgba(0, 0, 0, 0.02),
        0px 0.5px 1.3px rgba(0, 0, 0, 0.028),
        0px 1px 2.5px rgba(0, 0, 0, 0.035),
        0px 1.8px 4.5px rgba(0, 0, 0, 0.042),
        0px 3.3px 8.4px rgba(0, 0, 0, 0.05),
        0px 8px 20px rgba(0, 0, 0, 0.07)
        ;
}

.faketraceshadow_long,
.faketraceshadow:hover,
.faketraceshadow_short:hover{
    box-shadow:
        0px 0.6px 1.1px rgba(0, 0, 0, 0.02),
        0px 1.3px 2.7px rgba(0, 0, 0, 0.028),
        0px 2.5px 5px rgba(0, 0, 0, 0.035),
        0px 4.5px 8.9px rgba(0, 0, 0, 0.042),
        0px 8.4px 16.7px rgba(0, 0, 0, 0.05),
        0px 20px 40px rgba(0, 0, 0, 0.07)
        ;
}


*{
    transition: all .14s ease-in-out;
}

html {
    border-top: 8px solid var(--color-red);
    background-color: var(--color-lightgreycold);

    font-family: var(--font-primary);
    font-weight: 200;

    color: var(--color-darkgrey);
    font-size: 16px;
    line-height: 1.875;
}

.wrapper{

    position: relative;
    max-width: 1004px;
    width: auto;
    margin: 0px auto;

}


header {
    position: relative;
    padding-top: 43px;
}

header a{
    font-size: 26px;
    color: var(--color-darkgrey);
    text-decoration: none;
    padding: 0;
    margin:0;

}


header ul{
    list-style: none;

    margin:0;
    padding:0;

    text-align:right;

}

.section{
    clear:both;
}

header li{
    display: inline-block;
    padding: 0px 0px ;
    margin: 0px 16px;
}

header li:first-of-type{
    float:left;
    margin:0px;

    font-weight: 600;
}

header li:last-of-type{
    margin-right:0;
}

header li.active{
    font-weight: 600;
    border-bottom: 1px solid var(--color-darkgrey);
}

header li.active-subpage{
    border-bottom: 1px dotted var(--color-darkgrey);
}


header li:hover{
    border-bottom: 1px solid var(--color-darkgrey);
}


footer {
    position: relative;
    padding:100px 0px;

    background-color: var(--color-darkgrey);
    color: var(--color-lightgreycold);

    line-height:1.4;
}

footer a{
    text-decoration: none;
}


footer *{
    margin:0;
    padding:0;
}


footer hr.divider{
    border: 0px solid white;
    margin: 40px;
}

footer h3 {
    margin: 0;
    margin-bottom: 80px;
    font-size: 42px;
    font-weight: 200;
}

.label{
    font-size: 13px;
    text-transform: uppercase;

    opacity: 0.6;
}

footer .value,
.value{
    font-size: 28px;
}


footer .contact{
    box-sizing: border-box;
    display:inline-block;
    width: 59%;
}

.contact-information{
    position: relative;
    margin-bottom: 16px;
}

footer .menu,
footer .wechatqr{
    box-sizing: border-box;
    float:right;
    width: 40%;

    list-style: none;
}

footer .wechatqr img{
    width: 100%;
    max-width: 154px;
}

footer .menu ul{
    list-style: none;
}

footer .menu ul a{
    color:inherit;
    text-decoration: none;
    font-size: 26px;
}

footer .menu ul a:hover,
footer a:hover{
    text-decoration: underline;
}

footer .social{
    margin-top: 80px;
}

footer .social img{
    width: 65px;
    margin-right: 20px;
}



/* PORTFOLIO PAGE*/

.page-submenu,
.pagetitle{
    margin-top: 160px;
}

.portfolio .carousel,
.portfolio .wrapper{
    position: relative;
    width:100%;
}
.portfolio .carousel img{
    display:block;
    width:100%;
}

.portfolio-filter{
    margin-bottom: 40px;
}

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

.page-submenu li{
    display: inline-block;
    margin-right: 16px;
    border-bottom: 1px solid rgba(0,0,0,0);
}

.portfolio-breadcrumbs li{
    margin-right: 0px;
}

.page-submenu li:hover{
    border-bottom: 1px dotted var(--color-darkgrey);
}

.page-submenu li.active{
    font-weight: 600;
    border-bottom: 1px solid var(--color-darkgrey);
}

.page-submenu li a{
    text-decoration: none;
    color:inherit;
}

.portfolio-items{
    padding-bottom: 80px;
}

.portfolio-items .wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
}


.portfolio-item {
    transition: none;
    transform: scale(1);
    transition: transform .3s ease-in-out;

    position: relative;
    aspect-ratio: 1;

    display:block;
    background:white;

    overflow:hidden;

}

.portfolio-item a{
    position: absolute;

    width: 100%;
    height: 100%;

    color:inherit;
}

.portfolio-item h3{
    position: absolute;

    display:block;
    width:100%;
    bottom: -60px;

    margin:0;
    padding:0px 10px;

    text-align: center;

    font-weight: 300;
    font-size: 16px;
    line-height: 1.4;
    color:inherit;

    z-index:666;
}

.portfolio-item a img{
    position: absolute;
    top:0px;

    width: 100%;
    height: 100%;

    margin:0% 0%;

    object-fit: contain;
}

.portfolio-item a:hover h3{
    bottom:10px;
}

.portfolio-item a:hover img{
    top: -10px;

    width:90%;
    height: 90%;

    opacity:0.8;

    margin: 0% 5%;
}


.portfolio-item .tags{
    display:none;
}

.portfolio-item-single h2{
    margin:0;
    margin-bottom: 40px;
    padding:0;
    font-size: 33px;
}


.image-overlap{
    position: absolute;
}

.wrapper-height-300{
    height: 300px;
}

.wrapper-height-400{
    height: 400px;
}

.wrapper-height-500{
    height: 500px;
}


.image-contain{
    object-fit: contain;
    width:100%;
    height: 100%;
}


/* PORTFOLIO SUBPAGE SINGLE ITEM*/
.text-and-picture,
.picture-and-text{
    margin: 160px 0px;
}

.title-and-text{
    margin-top: 160px;
}

.text-and-picture p,
.picture-and-text p{
    width: 90%;
}

.order-sent .text-and-picture{
    margin: 0px;
}

.wechatqr img{
    max-width: 50%;
}

.portfolio-item-single hr,
hr.divider{
    border: 0px solid white;
    margin: 80px;
}

.portfolio-item-single hr.divider-double,
hr.divider-double{
    border: 0px solid white;
    margin: 160px;
}

.topbacknavigation{
    margin: 80px 0px;
    font-size: 22px;
}

.topbacknavigation-link{
    display: block;
}

.topbacknavigation a{
    display:block;
    padding: 10px;
    margin-bottom: 10px;
    text-decoration: none;
}

.video-full .wrapper-height-16-9{
    min-height: 300px;
}
.wrapper-height-16-9{
    aspect-ratio: 1.77;
}

.video-full iframe{
    width: 100%;
    height: 100%;


}




.column-2{
    position: relative;

    width: 49%;
    display:block;
    float:left;
}

.column-2:last-of-type{
    float:right;
}

.text-and-picture .column-2 img,
.picture-and-text .column-2 img,
.column-2 img{
    display: block;
    width: 100%;
}


/* ABOUT */

/*extra margins for these sections*/
.about .section{
    margin: 140px 0px;
}

.quote{
    max-width: 540px;
    position: absolute;
    right: 0px;
    top: 30%;

    font-size: 42px;
}

.thequote{
    font-size:99px;
    font-family: Georgia;
    position: absolute;
    left: -40px;
    top: -40px;
}

p.quote em{
    font-weight: 600;

    border-bottom: 4px solid var(--color-red);
}

.about h3{
    font-size: 42px;
}

.textinfo p{
    max-width: 750px;
    /*max-width: 544px;*/
}

.textinfo p a{
    display:inline-block;
    color: var(--color-red);
    text-decoration: underline;
}

.textinfo p a:hover{
    color: var(--color-red);
    text-decoration: underline;
    transform: scale(0.9);
}

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

.about-clients.align-right ul,
.about-awards.align-right ul{
    margin-left: auto;
    margin-right: 0;
}

.about-clients ul{
    display:inline-block;
    list-style: none;

    margin:0;
    padding:0;

    max-width: 800px;

}

.about-clients li{
    margin:0;
    padding:0;

    display:inline-block;
    margin: 0px 0px 20px 20px;

    width: 132px;
    height: 52px;

    background:var(--color-lightgreycold-transparent);

    text-align: center;
    vertical-align: middle;
}

.about-clients li img{
    width: 100%;
    height: 100%;

    object-fit:scale-down;
}

.about-awards ul{
    display:inline-block;
    list-style: none;

    margin:0;
    padding:0;

    max-width: 820px;
}

.about-awards li{
    margin:0;
    padding:0;

    position: relative;
    display:inline-block;

    width: 180px;
    height: 238px;

    margin:0px 20px 20px 0px;

    background:var(--color-lightgreycold-transparent);
}

.about-awards li img{
    width: 100%;
    height: 100%;
    object-fit:scale-down;
    position: relative;
}

.about-awards li p{
    text-align: center;
    position: absolute;
    width: 100%;
    bottom:0px;

    line-height: 1.4 !important;
}

.about .image-full img{
    filter: grayscale(100%);
    opacity: 0.8;
}

.about .image-full img:hover{
    filter: grayscale(50%);
    opacity: 1;
}

.section.image-full img{
    object-fit: cover;
    width:100%;
    height: 100%;
}

.image-full > p{
    margin-bottom: 80px;
}

.caption{
    text-align: center;
}


/* CONTACT */

.section.contact{
    line-height:1.4;
}

.columns-2{
    width: 49%;
    display: inline-block;
}

.timezones{
    margin-top: 160px;
}

.darker{
    background-color: var(--color-lightgreycold-transparent);
}

.nolinkshow{
    text-decoration: none;
}

.timezone{
    width: 320px;
    display: inline-block;
    background: white;

    position: relative;

    padding: 10px 10px 20px 10px;


    margin: -56px 80px 40px 80px;
}

.timezone .label{
    font-size: 22px;
    margin-bottom: 10px;
}

.timezone .time{
    font-size: 66px;
    font-weight: 600;

    line-height: 40px;
    text-align:right;
    padding: 0;
}

.creativecoffee{
    padding: 160px 0px;
}

.creativecoffee .coffeecup{
    max-width: 100%;
    position: relative;
    left: -100px;
}

.creativecoffee ul{
    width: 50%;
    margin-top: 180px;
    float:right;

    font-size:22px;

}

.creativecoffee ul a{
    text-decoration: none;
}

.creativecoffee ul a:hover{
    text-decoration: underline;
}

.circletime, .circletimearrow, .circletimecurrentlyhere{
    position: absolute;
    left: -20px;
    top: -15px;

    z-index:-1;
}

.circletimearrow{

    left: 50%;
    top: -90px;
}

.circletimecurrentlyhere{
    left: 40%;
    top: -180px;
}


.timezone{
}
.timezone .circletimearrow, .circletimecurrentlyhere{
    position: absolute;
    left: 40%;

    z-index:5;
}

.timezone .circletimearrow{
    transform: scale(-1);
    transform: rotate(120deg);
    top: 110px;
}

.timezone .circletimecurrentlyhere{
    transform: scale(-1);
    transform: rotate(-20deg);
    top: 170px;
    left: 60%;
}




/* the lab */


.lab-items{
    padding-bottom: 80px;
}

.lab-items .wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
}

.lab-item {
    position: relative;
    aspect-ratio: 1;

    display:block;

}

.lab-item:hover a{
    transform: scale(0.94);
    opacity: 0.8;
}

.lab-item:hover #the-lab-arrow{
    right: -20px;
}

#the-lab-arrow{
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.lab-item a{
    position: absolute;

    width: 100%;
    height: 100%;

    color:inherit;
}

.lab-item h3{
    position: absolute;

    margin: 8px;
    font-weight: 300;
    color:inherit;

    z-index:666;
}

.lab-item a img{
    position: absolute;
    width: 100%;
    height: 100%;

    left: 0%;
    top: 0%;

    object-fit: cover;
    object-position: 50% 50%;
}

.lab-item a:hover img{
    width: 100%;
    height: 100%;

    left: 0;
    top: 0;

    object-fit: cover;
    object-position: 50% 50%;
}

.lab-item div{
    position: absolute;
    left:0;
    top:0;
}

.lab-item-single h2{
    margin:0;
    margin-bottom: 40px;
    padding:0;
    font-size: 33px;
}


/* home */

.buttons{
    text-align: center;
}

.button{
    position: relative;
    display: inline-block;
    margin:40px 10px;

    padding: 20px 40px;

    background:white;
    min-width: 240px;

    text-align: center;
    border-radius: 100px;

    text-decoration: none;
    color:inherit;
}

.button:hover{
    transform: scale(0.9);
}

.button-textonly{
    position: relative;
    display: inline-block;
    margin:40px 10px;

    padding: 20px 40px;

    background:none;
    width: auto;

    text-align: center;
    border-radius: 0px;

    text-decoration: underline;
    color:inherit;
}


.home .lab-items .wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
}

.home .lab-item{
    position: relative;

    display:block;
    aspect-ratio:0;

    height: 500px;
}

.home .lab-item:nth-child(6){

}

.service-items .wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
}

.service-item {
    position: relative;
    aspect-ratio: 1;

    display:block;
    background:white;

}

.service-item-intro .column-2:nth-of-type(2){
    z-index: -1;
}

.service-item-title{
    text-align: center;
    font-weight: 200;

    padding:10px 20px;

    position:absolute;
    right:0px;
    width: 60%;

    margin:0;

    aspect-ratio:1;
    background:white;
}

.service-item-intro img{
    position:relative;
    left:-40%;
    top: -40px;

    width: 120%;
}

.service-item-intro img.normal{
    position: relative;
    left: 0px;
    top: -40px;
    width: 100%;
}

.service-item:hover {
    position: relative;
    aspect-ratio: 1;

    display:block;
    background:white;

    transform: scale(1.04);

    box-shadow: var(--box-shadow-long);

}

.service-item:hover img {

    transform: scale(1.1);

}

.service-item h3{
    display:block;
    width:100%;

    margin:0;
    margin-top: 10px;
    padding:10px;

    text-align: center;

    font-weight: 200;
    font-size: 22px;
    color:inherit;

}

.service-item img{
    display:block;
    position: absolute;

    left:0;
    top:0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    z-index: 0;
}

.service-item ul.info{
    position: absolute;
    bottom: 0px;

    list-style:none;
    margin:0;
    padding: 10px 20px;

    width: 100%;

    text-align:right;
}

.service-item .button-order,
.service-item .moreinfo{
    visibility: visible;
}

.service-item:hover .button-order,
.service-item:hover .moreinfo{
    visibility:visible;
}



.service-item .moreinfo{
    position: absolute;
    display: block;

    top: 17px;

    opacity: 0.6;
}

.service-item .button-order{
    display:inline-block;
    margin: 0px auto;
    padding: 5px 20px;

    background: var(--color-red);

    border: 1px solid #602625;
    border-radius:50px;

    color:white;

    text-decoration: none;

    text-transform: uppercase;
    font-weight:600;
}

.service-item .moreinfo:hover{
    text-decoration:none;
    transform: scale(0.9);
}

.button-order:hover{
    transform: scale(0.9);
}


/* service page services */
.order-service{

}

.order-service .wrapper{
    border: 2px solid var(--color-red);
    background: rgba(189, 80, 78, 0.06);

    padding: 40px 80px;
}

.order-service .column-2{
    text-align: center;
}

.order-service .column-2 h3{
    text-align: left;
}

.cross-link .wrapper{
    border: 2px solid var(--color-darkgreycold);
    background: var(--color-lightgreycold-transparent);

    padding: 40px 80px;
}

.cross-link .client{
    max-width: 150px;
    background: var(--color-lightgreycold);
}

.cross-link p{
    margin:0;
    padding:0;
}


/* ORDER ORDERPAGE*/
select, input[type="checkbox"]{
    zoom:1.6;
    max-width: 100%;
}

.order .order-email-submit{
    cursor: pointer;
}

label{
    font-size:18px;
    font-weight: 600;
}

.order .darker, .extrapadding{
    padding: 80px 0px;
}

.order .column-2 p{
    width: 80%;
}

.order .emailresult{
    background: white;
    padding: 20px;
    font-size: 12px;

    line-height: 1;
}

input{
    max-width: 400px;
    max-width: 100%;
    width: 400px;
    font-size: 22px;

    margin-bottom: 20px;
    padding: 10px;

    border: 1px solid #E0E0E0;
    border-bottom: 2px solid #B1B1B1;
}

input[type=checkbox]{
    width:auto;
    margin: 10px;
}










/* MOBILE RESPONSIVENESS AND SUCH 2021 "mobile trends" hahahha"*/

.mobileordesktop-mobile{
    display:none;

}

@media (max-width: 1010px) {
    .wrapper{
        width: 100%;
        padding: 0px 10px;
    }

}

@media (max-width: 669px) {
    .wrapper{
        width: 100%;
        min-width: 250px;
        padding: 0px 10px;
    }

    .cross-link{
        margin-left: 5px;
        margin-right: 5px;
    }

    .cross-link .wrapper{
        border: 2px solid var(--color-darkgreycold);
        background: var(--color-lightgreycold-transparent);

        padding: 40px 10px;
    }

    .mobileordesktop-mobile{
        display: unset;
    }
    .mobileordesktop-desktop{
        display: none;
    }

    .section.image-full img{
        object-fit: contain;
    }

    .video-full .wrapper-height-16-9{
        min-height: auto;
    }

    .wrapper-height-300{
        height:auto;
        max-height: 300px;
    }

    .wrapper-height-400{
        height:auto;
        max-height: 400px;
    }

    .wrapper-height-500{
        height:auto;
        max-height: 500px;
    }

    .portfolio-items .wrapper{
        display: grid;
        grid-template-columns: 1fr !important;
        grid-gap: 20px;
    }

    .service-items .wrapper{
        display: grid;
        grid-template-columns: 1fr 1fr !important;
        grid-gap: 20px;
    }

    header{
        padding-top:0;
    }

    header ul{
        list-style: none;
        position: relative;
        left:0px;
        top:0px;
        width:100%;

        margin:0;
        padding:0;


        display: block;

        height:60px;
        overflow:hidden;
    }

    header ul.menu-opened{
        height:100vh;
        overflow:visible;
    }

    header ul li{
        margin: 10px;
        margin-left: 10px;
        display: block;
        width:auto;

        text-align: center;
    }

    header li:hover, header li.active{
        border-bottom:0;
    }

    header li:first-of-type {
        float: none;
        margin: 10px 10px 80px 10px;
        font-weight: 600;
    }

    header li:first-of-type a {
        width:100%;
        display:block;
        text-align:left;

        background: url('/img/mobilemenu_hamburger.png') right center no-repeat;
        background-size: contain;
    }

    header ul.menu-opened li:first-of-type a {
        background: url('/img/mobilemenu_close.png') right center no-repeat;
        background-size: contain;
    }

    header li:last-of-type {
        margin-right: 10px;
    }

    .hero-quote img{
        max-width: 100%;
    }

    p.quote{
        max-width:100%;
        display: block;
        position: relative;
        left:0px;
        top: 0px;

        margin: 20px;

        font-size: 42px;
    }

    footer .menu{
        display:none;
    }

    footer .contact{
        box-sizing: border-box;
        display:block;
        width: 100%;
    }

    footer .value,
    .value{
        font-size: 22px;
    }

    footer .menu{
        box-sizing: border-box;
        float:none;
        width: 100%;

        list-style: none;
        margin-top: 40px;
    }

    footer .menu li{
        padding: 10px 0px;
    }

    .column-2, .columns-2{
        display:block;
        width: 100%
    }

    .circletimecurrentlyhere,
    .circletimearrow{
        left:70%;
    }

    .timezone{
        position: relative;
        margin: 0px auto;
        display:block;
        top: -40px;
    }

    .timezone:first-of-type{
        margin-bottom: 160px;
    }

    .creativecoffee ul{
        width: 100%;
        margin-top: 10px;
        float:none;
    }

    .about .section{
        margin: 80px 0px;
    }


    .about-clients li{
        margin:0;
        padding:0;

        display:inline-block;
        margin: 0px 0px 20px 20px;

        width: 46%;

        background:var(--color-lightgreycold-transparent);

        text-align: center;
        vertical-align: middle;
    }

    .about-clients li:nth-of-type(odd),
    .about-awards li:nth-of-type(odd){
        margin: 0px 0px 20px 0px;
    }

    .about-awards li{
        margin:0;
        padding:0;

        display:inline-block;
        margin: 0px 0px 20px 15px;

        width: 46%;

        background:var(--color-lightgreycold-transparent);

        text-align: center;
        vertical-align: middle;
    }

    .service-item h3{
        display:block;
        width:100%;

        margin:0;
        margin-top: 10px;
        padding:10px;

        text-align: center;

        font-weight: 200;
        font-size: 16px;
        line-height: 16px;
        color:inherit;

        position: absolute;
        z-index: 5;

    }

    .service-item-intro img{
        left:0px;
        top: 0px;
        width:100%;
    }

    .order-service .wrapper{
        padding: 0px 10px;
        margin: 10px;
        box-sizing: border-box;
        width:auto;
    }

    .service-item .button-order,
    .service-item .moreinfo{
        visibility: visible;
        display:block;
        text-align:center;
        float:none;
        position:relative;
        top:0px;
        padding: 5px 0px;
        margin:10px;
    }

    ul.info span{
        display:block;
        padding: 5px 0px;
        margin: 10px;
    }

    .service-item img {
        display: block;
        position: relative;
        left: 0;
        top: 2em;
        width: 100%;
        height: auto;
        object-fit:contain;
        z-index: 0;
    }

    .service-item ul.info {
        position: relative;
        top:0px;
        list-style: none;
        margin: 0;
        padding: 10px 20px;
        width: 100%;
        text-align: right;
    }


}



/* specials */
.section.image-full.krk-app-circle  span{

    position:relative;
    overflow:visible;

    display:inline-block;
}

.section.image-full.krk-app-circle span .circle_small_1,
.section.image-full.krk-app-circle span .circle_small_2{
    object-fit: contain;
    height: 56px;

    position:absolute;
    top: -30%;
    left:-10px;
}

.section.image-full.krk-app-circle span .number_1,
.section.image-full.krk-app-circle span .number_2{
    height: 28px;

    position:absolute;
    right: 0px;
    bottom: -40px;
}

.section.image-full.krk-app-circle  span img{

    display:block;

    position: absolute;
    width:auto;
    height:auto;

    object-fit: contain;
    overflow: visible;

    z-index: -1;
}