@media only screen and (max-width: 1240px){
    .container{
        padding-left: 20px;
        padding-right: 20px;
    }
    section.container{
        overflow: hidden;
    }
    .backToTop{
        right: 20px;
    }
    .radio-wrapper-large .input-radio .input-radio-index{
        width: calc(100% - 120px);
    }
}


@media only screen and (max-width: 1070px){
    #hero .content-image {
        flex: 0 0 40%;
    }
}




  
@media only screen and (max-width: 1023px){
    #main .summary-icon {
        grid-template-areas: ". . .";
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr;
    }
    .home-category {
        font-size: 1.2rem;
        padding: 8px 8px 8px 20px;
        line-height: 1.2rem;
    }
    .cubic-radio-wrapper{
        justify-content: flex-start;
    }
    .fieldset-wrapper{
        display: flex;
        flex-direction: column-reverse;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .legend {
        flex-direction: column;
        margin-bottom: 1rem;
        width: 100%;
        position: sticky;
        left: 0px;
    }
    .legend > p > span {
        display: inline-block;
        margin-right: 5px;
    }
}




@media only screen and (max-width: 950px){
    .bodies-wrapper .svg-wrapper{
        flex-wrap: wrap;
    }
}





@media only screen and (max-width: 940px){
    .grid{
        width: 100%;
    }
}



@media(max-width: 859px) {
    h1{
        line-height: 48px;
    }
    .fieldset-wrapper {
        margin-bottom: 1rem;
    }
    .label-radio-wrapper {
        flex-direction: column;
    }
    .label-radio-wrapper .cubic-radio label {
        min-width: 210px;
        text-align: center;
    }
    footer{
        display: flex;
        flex-direction: column;
    }
    footer .footer-wrapper .footer-logo{
        justify-content: left;
    }
    footer .footer-wrapper .footer-logo svg:first-child{
        width: 200px;
        margin-top: -23px;
    }
    footer .footer-wrapper .footer-logo svg:nth-child(2){
        width: 90px;
        margin-top: -13px;
    }
    footer .footer-wrapper{
        flex-wrap: wrap;
        justify-content: left;
    }
    #partnership{
        background-image: none;
        margin: 20px 0px;
    }
    #partnership.partnership-logos-footer p{
        margin-top: 0px;
    }
}




@media only screen and (max-width: 860px){
    .mobile-navigation {
        display: flex;
        justify-content: space-evenly;
        margin-bottom: 3rem;
        margin-top: 0;
        order: 1;
    }
}


@media only screen and (max-width: 780px){
    header{
        height: 65px;
    }
    header, header .header-logo{
        align-items: unset!important;
    }
    header .header-logo .logo-home {
        background-size: 215px;
        height: 65px;
        width: 230px;
    }  
    header .header-logo .logo-home svg {
        width: 130px;
        margin-top: 7px;
        margin-left: 29px;
    }    
    header .kk-logo svg {
        margin-top: 10px;
        width: 150px;
    }
    #main .summary-icon {
        grid-template-areas: ". .";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
    }
    .home-category {
        font-size: 1.1rem;
        padding: 6px 6px 6px 15px;
        line-height: 1.1rem;
    }
    #main .summary-icon a {
        /* width: 180px; */
        width: calc(33% - 36px);
    }
    .button--icon-only svg{
        max-height: 42px;
        max-width: 42px;
        margin-top: 5px;
    }
    #svg-menu-burger button{
        top: 5px;
    }
    .radio-wrapper-large {
        width: 100%;
    }
    .radio-wrapper-large .input-radio .input-radio-index {
        width: calc(100% - 52px);
    }
}

@media only screen and (max-width: 720px){
    h1 {
        font-size: 2rem;
        line-height: 40px;
    }    
    #hero .container{
        flex-wrap: wrap;
    }
    #hero .content-image {
        flex: unset;
    }
    #hero .content-wrapper{
        padding: 20px 0px;
    }
    #svg-menu-burger .nav-menu{
        max-width: calc(100% - 100px);
    }

    .cubic-radio label{
        padding: 1.0rem 1.3rem;
    }
}


@media only screen and (max-width: 620px){
    #main .summary-icon a {
        width: calc(50% - 36px);
    }
}



@media only screen and (max-width: 500px){
    header .header-logo .kk-logo{
        margin-left: -30px;
    }
    .home-categories {
        justify-content: left;
        overflow-x: scroll;
        max-width: 100%;
        margin-right: 6px;
    }
    .home-category{
        margin-right: 0px;
    }

}






@media only screen and (max-width: 440px){
    header .header-logo .logo-home{
        background-size: 200px;
    }
    header .header-logo .logo-home svg{
        width: 110px;
        margin-top: 12px;
    }
    header .header-logo .kk-logo{
        margin-left: -60px;
    }
    header .kk-logo svg{
        width: 120px;
    }
    .radio-wrapper-small .radio-wrapper .radio-button-wrapper label:first-child{
        margin-right: 1rem;
    }
}




@media print {
    #svg-menu-burger,
    .button--primary,
    .button-large-primary,
    #scales-test form .button--primary,
    #test-result .bubble-background>div .close-button,
    .question-wrapper textarea,
    footer{
        display: none !important;
    }
    h1{
        font-size: 1.5rem;
    }
    #hero {
        padding-bottom: 0px;
        padding-top: 0px;
    }    
    #hero .content-image{
        flex-basis: 100px;
    }
    header .header-logo a svg{
        width: 200px;
    }
    header .header-logo a.kk-logo svg{
        width: 150px;
    }
    .container-padding {
        padding-block: 1.2rem;
    }
    #scales-test {
        padding: 1rem 0 0;
    }
    .fieldset-wrapper{
        max-width: 100%;
    }
    .cubic-radio label{
        padding: 1.2rem 1.6rem;
    }
    .cubic-radio-wrapper-percentage .cubic-radio label{
        padding: 1.2rem 0.93rem
    }
    .radio-wrapper-large .input-radio .input-radio-index{
        width: calc(100% - 70px);
    }
    .question,
    #test-result{
        padding-top: 30px;
        page-break-inside: avoid;
    }
    .bodies-wrapper .svg-wrapper .body .body-svg{
        width: 200px;
        height: auto;
    }
    .printTextArea {
        display: block;
        border: 2px solid var(--brightorange);
        width: 100%;
        padding: 10px;
        font-size: 1em;
      }
    *{ 
        color-adjust: exact;  
        -webkit-print-color-adjust: exact; 
        print-color-adjust: exact; 
    }
}