/* ----------------- Základní pravidla - Technická kvalita ----------------- */

#technicka-kvalita {
    padding-top: 11rem;
    padding-bottom: 4rem;
}

#rules {
    margin: 0 auto;
    width: 80%;
}

#rules > .item {
    margin: 11rem auto 11rem auto;
}

#rules .divider {
    background-image: url('/public/images/page/assets/divider.svg?v=1');
    width: 100%;
    height: 0.6rem;
    z-index: 60;
}

#rules .item .text {
    margin: 6rem auto;
}

#rules .item .list {
    margin-bottom: 8rem;
    width: 64%;
}

#rules .item .box {
    display: flex;
    margin: 4rem auto 0rem auto;
    padding: 3.6rem 4.4rem;
    width: 45.4rem;
    min-height: 14.6rem;
    font-family: 'Roboto', sans-serif;
    font-size: 1.8rem;
    line-height: 2.5rem;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    background-size: 7.2rem 7.2rem;
    background-position: top left;
}

#rules .item .box.gold {
    background-color: var(--clr-gold);
    color: var(--clr-white);
    background-image: url('/public/images/page/icons/post-tick.svg?v=1');
    box-shadow: 0px 1.1rem 2.3rem 0px #0000001A,
    0px 4.2rem 4.2rem 0px #00000017,
    0px 9.5rem 5.7rem 0px #0000000D,
    0px 16.9rem 6.8rem 0px #00000003,
    0px 26.4rem 7.4rem 0px #00000000;

}

#rules .item .box.red {
    padding-right: 18rem;
    background-color: #F0EEEB;
    background-image: url('/public/images/page/icons/post-cros.svg?v=1');
    box-shadow: 0px 1.1rem 2.3rem 0px #0000001A;
}

#rules .item .box.red .bg {
    position: absolute;
    height: 10rem;
    width: 8.4rem;
    right: 4rem;
}

#rules .item .box.red .bg.bg-01 {
    background-image: url('/public/images/page/assets/cleening-01.png?v=1');
}

#rules .item .box.red .bg.bg-02 {
    background-image: url('/public/images/page/assets/cleening-02.png?v=1');
}

#rules .item .box.red .bg.bg-03 {
    background-image: url('/public/images/page/assets/cleening-03.png?v=1');
}

#rules .item .box.red .title {
    margin-bottom: 1.0rem;
    font-family: 'Roboto Bold', sans-serif;
}



/* ----------------- Tablet 720px ----------------- */
@media only screen and ((max-width: 1000px) or (orientation: portrait)) {
    #technicka-kvalita {
        padding-top: 0;
        padding-bottom: 0;
    }
    
    #rules {
        width: 100%;
    }
    
    #rules > .item {
        margin: 8rem auto 8rem auto;
    }
    
    #rules .divider {
        background-image: url('/public/images/page/assets/divider-mobile.svg?v=1');
    }
    
    #rules .item .text {
        margin: 3rem auto;
    }
    
    #rules .item .list {
        margin-bottom: 4rem;
        width: 100%;
    }
    
    #rules .item .box {
        margin: 2.6rem auto 0rem auto;
        padding: 3.6rem 6.2rem;
        width: 100%;
        min-height: 10.3rem;
        font-family: 'Roboto Light', sans-serif;
        font-size: 1.6rem;
        line-height: 2.2rem;
        background-size: 6.6rem 6.6rem;
    }
    
    #rules .item .box.gold {
        box-shadow: 0px 2.4rem 2.4rem 0px #00000017,
        0px 5.5rem 3.3rem 0px #0000000D,
        0px 9.8rem 3.9rem 0px #00000003,
        0px 15.3rem 4.3rem 0px #00000000;
    }
    
    #rules .item .box.red {
        padding-right: 12rem;
        box-shadow: none;
    }
    
    #rules .item .box.red .bg {
        height: 8.3rem;
        width: 7.0rem;
        right: 3.4rem;
    }
    
    #rules .item .box.red .title {
        margin-bottom: 1.0rem;
    }

    #technicka-kvalita .nextCategoryMobile {
        margin-top: 1rem;
        margin-bottom: 6rem;
    }
}


/* ----------------- Mobile 360px ----------------- */
@media only screen and (max-width: 500px) {
    #rules > .item {
        margin: 6rem auto 6rem auto;
    }
    
    #rules .item .text {
        margin: 3rem auto;
    }
    
    #rules .item .list {
        margin-bottom: 4rem;
    }
    
    #rules .item .box {
        margin: 2rem auto 0rem auto;
        padding: 2.2rem 2.2rem;
        min-height: 10.3rem;
        font-size: 1.5rem;
        line-height: 1.9rem;
        background-size: 4.6rem 4.6rem;
    }
    
    #rules .item .box.red {
        padding-right: 11rem;
    }
    
    #rules .item .box.red .bg {
        height: 7.3rem;
        width: 6.2rem;
        right: 2.4rem;
    }
    
    #rules .item .box.red .title {
        margin-bottom: 1.0rem;
    }
}