@media only screen and ((max-width: 1000px) or (orientation: portrait)) {

    /* ----------------- Top ----------------- */

    #top {
        background-image: url("../images/backgrounds/main-top-mobile.png?v=2");
        background-size: cover;
        background-position: center center;
    }

    #top .headerContainer {
        top: 56.3%;
        right: 50%;
        transform: translateY(-50%) translateX(50%);
    }

    #top .h1 {
        color: transparent;
        margin: 0 0 4.0rem 0;
        padding-left: 3rem;
        font-size: 4.4rem;
        line-height: 4.5rem;
        font-weight: 900;
    }

    #top .button {
        margin-left: auto;
        margin-right: auto;
    }


    /* ----------------- Front Products ----------------- */

    #rady {
        min-height: 106vw;
        height: calc(100vh - (2 * var(--page-offset)));
        max-height: 120vw;
    }

    #rady .products.desktop {
        display: none;
    }

    #rady .products.tabletMobile {
        display: block;
    }

    #rady .products {
        position: absolute;
        bottom: 45%;
        left: 50%;
        transform: translateX(-50%) translateY(50%);
        gap: 1.0rem;
        height: auto;
    }

    #rady .products .item {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    #rady .products .itemInner {
        width: 19.1rem;
    }

    #rady .products .h2 {
        margin-bottom: -1.4rem;
        font-size: 3.4rem;
    }

    #rady .products .imgContainer {
        width: 100%;
        height: 54rem;
    }

    #rady .products img {
        max-height: 100%;
        max-width: 94%;
        width: auto;
    }

    #rady .products img:hover {
        max-height: 100%;
        max-width: 94%;
    }

    #rady .products .button {
        padding: 1.5rem 3.2rem 1.5rem 3.2rem;
        width: max-content;
        color: var(--clr-white);
        font-size: 2.0rem;
        line-height: 2.0rem;
        border-radius: 6.3rem;
        border: solid 0.2rem var(--clr-white);
    }

    #rady .products .shadow {
        height: 5.0rem;
        width: 21.1rem;
        background-image: url("../images/assets/shadow-can.svg");
    }


    /* ----------------- Series ----------------- */

    #o-birellu .background,
    #rady .background,
    .seriesPostPage .background,
    .seriesProductsPage .background {
        position: absolute;
        height: 100%;
        width: 100%;
        background-position: center;
    }

    #o-birellu .background.classic,
    .seriesPostPage .background.classic {
        background-size: 110%;
        background-position: top -34rem right -10rem;
        background-image: url("../images/backgrounds/type-description-classic.svg");
    }

    #rady .background.mixed {
        background-size: 100%;
        background-position: top 0 right 0;
        background-image: url("../images/backgrounds/series-selection.png");
    }

    .seriesProductsPage .background.classic {
        background-size: 123%;
        background-position: bottom 12rem left -4rem;
        background-image: url("../images/backgrounds/type-image-classic.svg");
    }

    .seriesPostPage .background.juicy {
        background-size: 105%;
        background-position: top -38rem left 0rem;
        background-image: url("../images/backgrounds/type-description-juicy.svg");
    }

    .seriesProductsPage .background.juicy {
        background-size: 130%;
        background-position: bottom -4rem left -9rem;
        transform: rotate(196deg);
        background-image: url("../images/backgrounds/type-image-juicy.svg");
    }


    /* ----------------- Contact ----------------- */

    #kontakt {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .contact {
        display: flex;
        width: 86%;
        flex-direction: column;
    }

    .contact .formContainer {
        width: 100%;
    }

    .contact .formContainer > * {
        width: 100%;
    }

    .contact .h1 {
        margin-top: 7.6rem;
        margin-bottom: 3.4rem;
        font-size: 6.0rem;
        line-height: 6.8rem;
    }

    .contact .h3 {
        margin-bottom: 2.0rem;
        font-size: 2.6rem;
    }

    .contact .info {
        margin-bottom: 3.4rem;
        
    }

    .contact .info > * {
        padding-left: 3.8rem;
        font-size: 2.0rem;
        line-height: 3.6rem;
    }

    .contact .location {
        background-size: 1.8rem 2.4rem;
    }

    .contact .email {
        background-size: 1.8rem 1.6rem;
    }

    .contact form {
        line-height: 0;
    }

    .contact form p {
        margin: 0;
    }

    .contact form input,
    .contact form input[type=text],
    .contact form input[type=email],
    .contact form input[type=submit],
    .contact form textarea {
        display: block;
        margin: 0 0 1.4rem 0;
        padding: 1.6rem 3.0rem;
        font-size: 2.0rem;
        line-height: 2.4rem;
    }

    .contact form input::placeholder,
    .contact form input[type=text]::placeholder,
    .contact form input[type=email]::placeholder,
    .contact form textarea::placeholder {
        font-size: 1.8rem;
        line-height: 2.4rem;
    }

    .contact form textarea {
        height: 10.6rem !important;
    }

    .contact form input[type=submit] {
        padding: 1.4rem 6.2rem;
    }

    .contact form .wpcf7-not-valid-tip {
        margin: 0;
        margin-top: -2.3rem;
        padding: 0 0.2rem 0 0;
        height: 2.2rem;
        color: #a41818;
        font-size: 1.6rem;
    }

    .contact form .wpcf7-spinner,
    .contact form .wpcf7-response-output {
        padding: 0 3.2rem 0 0;
        font-size: 1.6rem;
    }

    .contact .map {
        width: 100%;
        height: 58rem;
    }


    /* ----------------- Series Products ----------------- */

    .seriesProducts {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .seriesProducts .slider {
        margin: 0;
        max-width: 100%;
        width: 100%;
        gap: 4.0rem;
    }

    .seriesProducts .item {
        width: 100%;
    }

    .seriesProducts .imgContainer {
        display: flex;
        width: 100%;
        height: 48rem;
        align-items: center;
        justify-content: center;
    }

    .seriesProducts img {
        max-height: 100%;
        max-width: 94%;
        width: auto;
    }

    .seriesProducts .item:hover img {
        max-height: 100%;
        max-width: 94%;
    }

    .seriesProducts .item .shadow {
        margin-top: 1rem;
    }

    .seriesProducts .item .button {
        margin-top: 1rem;
        opacity: 1;
    }


    /* ----------------- Birells ----------------- */

    #birell-detail .birellGallery {

    }

    #birell-detail .birellGallery .slider {
        align-items: flex-start;
        overflow-y: hidden;
    }

    #birell-detail .birellGallery .itemInner {
        display: block;
        margin: 16rem 6rem 0rem 6rem;
        width: auto;
        height: auto;
    }

    #birell-detail .birellGallery .arrow {
        top: 8rem;
        transform: translateY(0);
        width: 3.8rem;
        height: 3.8rem;
        cursor: pointer;
    }

    #birell-detail .birellGallery .arrow.left {
        left: 40%;
        transform: translateX(-50%);
    }

    #birell-detail .birellGallery .arrow.right {
        left: 60%;
        transform: translateX(-50%);
    }


    /* ------- Birell Post ------- */
    #birell-detail .birellGallery .post {
        transform: translate(0, 0);
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        max-height: max-content;
    }

    #birell-detail .birellGallery .post a,
    #birell-detail .birellGallery .post a:visited,
    #birell-detail .birellGallery .post a:hover {
        margin-top: 6.2rem;
        color: var(--clr-white);
    }

    #birell-detail .birellGallery .post a:hover {
        text-decoration: underline;
    }

    #birell-detail .birellGallery .navigator.back {
        padding-left: 3.6rem;
        font-size: 1.6rem;
        line-height: 1.8rem;
        font-weight: 400;
        text-transform: uppercase;
        background-image: url("../images/icons/arrow-left-white.svg");
        background-size: 1.8rem 1.8rem;
        background-position: left center;
    }

    #birell-detail .birellGallery .h1 {
        font-size: 4.2rem;
        line-height: 5.0rem;
        margin-top: 5rem;
        margin-bottom: 4rem;
    }

    #birell-detail .birellGallery .body {
        margin-bottom: 2rem;
    }

    #birell-detail .birellGallery .columns {
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        margin: 0;
        flex-direction: column;
    }

    #birell-detail .birellGallery .columns > * {
        width: 100%;
        font-size: 2.0rem;
        font-weight: 400;
        line-height: 2.6rem;
    }

    #birell-detail .birellGallery .columns .ingredients {
        width: 100%;
    }

    #birell-detail .birellGallery .columns .ingredients .text {

    }

    #birell-detail .birellGallery .columns .nutrients {
        margin-top: 3rem;
        font-size: 1.8rem;
        line-height: 2.2rem;
    }


    #birell-detail .birellGallery .columns .nutrients table {
        margin-top: 2rem;
    }

    #birell-detail .birellGallery .columns .nutrients table tr {
        /*border-bottom: solid 0.1rem var(--clr-white);*/
    }

    #birell-detail .birellGallery .columns .nutrients table td {
        padding: 0.6rem 4.8rem 0.8rem 0rem;
        /*border-bottom: solid 0.1rem var(--clr-white);*/
    }

    #birell-detail .birellGallery .titleImage {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-bottom: 3.2rem;
        padding: 3.2rem;
        height: 25.9rem;
        border-radius: 0.8rem;
        overflow: hidden;
    }

    #birell-detail .birellGallery .titleImage .title {
        margin-top: 2.0rem;
        width: 30rem;
        font-size: 3.6rem;
        line-height: 4.0rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    #birell-detail .birellGallery .titleImage .icon {
        width: 5.8rem;
        height: 5.8rem;
    }

    #birell-detail .birellGallery .titleImage .icon.main {
        background-image: url("../images/icons/icon-main.svg");
    }
    
    #birell-detail .birellGallery .titleImage .flavour {
        margin: -0.9rem -0.2rem;
        width: 6.8rem;
        height: 6.8rem;
        background-image: url("../images/icons/icon-flvr.svg");
    }
    
    #birell-detail .birellGallery .titleImage .active {
        margin: -3.5rem;
        width: 10.8rem;
        height: 10.8rem;
        transform: rotate(180deg);
        background-image: url("../images/icons/icon-active.svg");
    }

    #birell-detail .birellGallery .titleImage .imgContainer {
        position: absolute;
        right: 11.4rem;
        top: 3.2rem;
        display: flex;
        width: 20.6rem;
        height: 36.0rem;
        align-items: center;
        justify-content: center;
        opacity: 1;
    }

    #birell-detail .birellGallery .titleImage .imgContainer img {
        width: auto;
        height: auto;
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
    }


    /* ------- Birell Gallery Image ------- */

    #birell-detail .birellGallery .imabeBbackground {
        top: 0;
        left: 0rem;
        height: 50rem;
        width: 25rem;
        background-position: center center;
    }

    #birell-detail .birellGallery .imabeBbackground.classic {
        background-size: contain;
        background-position: center center;
        background-image: url("../images/backgrounds/birell-image-classic.svg");
        transform: scaleX(-1);
    }

    #birell-detail .birellGallery .imabeBbackground.juicy {
        bottom: -9rem;
        right: -30rem;
        height: 100rem;
        width: 138rem;
        background-image: url("../images/backgrounds/birell-image-juicy.svg");
        transform: rotate(9deg);
    }

    #birell-detail .birellGallery .imgContainer {
        display: flex;
        justify-content: center;
        position: absolute;
        top: 0;
        right: 50%;
        height: 74.7rem;
        width: 25.0rem;
        transform: translateX(50%);
        opacity: 0;
        z-index: 10;
    }

    #birell-detail .birellGallery img {
        width: 100%;
        height: auto;
        max-height: 100%;
        object-fit: contain;
    }


    #birell-selection .birellSelection,
    #gamingBirells .birellSelection {
        display: flex;
        margin: 0 6rem 0 6rem;
        padding: 7.3rem 0 6rem 0;
        gap: 2.6rem;
        justify-content: center;
    }


    /* ------- Birell Selection ------- */
    #birell-selection .birellSelection a,
    #birell-selection .birellSelection a:hover,
    #birell-selection .birellSelection a:visited,
    #gamingBirells .birellSelection a,
    #gamingBirells .birellSelection a:hover,
    #gamingBirells .birellSelection a:visited {
        color: var(--clr-white);
        flex: 0 0 100%;
        max-width: 100%;
    }

    #birell-selection .birellSelection .item,
    #gamingBirells .birellSelection .item {
        padding: 4.2rem;
        height: 25.9rem;
        border-radius: 1.6rem;
    }

    #birell-selection .birellSelection .item .title,
    #gamingBirells .birellSelection .item .title {
        max-width: 18.0rem;
        font-size: 3.2rem;
        line-height: 3.6rem;
    }


    #birell-selection .birellSelection .item .link,
    #gamingBirells .birellSelection .item .link {
        padding-left: 5.8rem;
        height: 3.8rem;
        font-size: 1.7rem;
        line-height: 3.8rem;
        background-size: 3.8rem 3.8rem;
    }

    #birell-selection .birellSelection .item .imgContainer,
    #gamingBirells .birellSelection .item .imgContainer {
        right: 10.0rem;
        width: 12.6rem;
        height: 19.0rem;
    }

    #birell-selection .birellSelection .item img,
    #gamingBirells .birellSelection .item img {
        margin-top: 10.6rem;
        max-width: 100%;
        max-height: 34.0rem;
    }

    #birell-selection .birellSelection .item:hover img,
    #gamingBirells .birellSelection .item:hover img {
        max-height: 29.0rem;
    }

    #birell-selection .birellSelection .item .icon {
        position: absolute;
        top: 0;
        right: 0;
        width: 2.8rem;
        height: 2.8rem;
    }

    #birell-selection .birellSelection .item .icon.main {
        top: 1.6rem;
        right: 1.6rem;
        width: 5.6rem;
        height: 5.6rem;
    }

    #birell-selection .birellSelection .item .icon.flavour {
        top: 1.6rem;
        right: 1.9rem;
        width: 5.6rem;
        height: 5.6rem;
        background-image: url("../images/icons/icon-flvr.svg");
    }

    #birell-selection .birellSelection .item .icon.active {
        top: -0.2rem;
        right: -0.6rem;
        width: 9.4rem;
        height: 9.4rem;
        background-image: url("../images/icons/icon-active.svg");
    }

}


/* ----------------- Mobile 360px ----------------- */
@media only screen and (max-width: 500px) {

    /* ----------------- Top ----------------- */

    #top {
        background-image: url("../images/backgrounds/main-top-mobile.png?v=2");
        background-size: cover;
        background-position: center center;
    }

    #top .headerContainer {
        top: 56.3%;
        right: 50%;
        transform: translateY(-50%) translateX(50%);
    }

    #top .h1 {
        color: transparent;
        margin: 0 0 4.0rem 0;
        padding-left: 3rem;
        font-size: 4.4rem;
        line-height: 4.5rem;
        font-weight: 900;
    }

    #top .button {
        margin-left: auto;
        margin-right: auto;
    }


    /* ----------------- Front Products ----------------- */

    #rady {
        min-height: 180vw;
        height: calc(100vh - (2 * var(--page-offset)));
        max-height: 220vw;
    }

    #rady .products.desktop {
        display: none;
    }

    #rady .products.tabletMobile {
        display: block;
    }

    #rady .products {
        position: absolute;
        bottom: 45%;
        left: 50%;
        transform: translateX(-50%) translateY(50%);
        gap: 1.0rem;
        height: auto;
    }

    #rady .products .item {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    #rady .products .itemInner {
        width: 19.1rem;
    }

    #rady .products .h2 {
        margin-bottom: -1.4rem;
        font-size: 3.2rem;
    }

    #rady .products .imgContainer {
        width: 100%;
        height: 54rem;
    }

    #rady .products img {
        max-height: 100%;
        max-width: 94%;
        width: auto;
    }

    #rady .products img:hover {
        max-height: 100%;
        max-width: 94%;
    }

    #rady .products .button {
        padding: 1.3rem 3.0rem 1.3rem 3.0rem;
        width: max-content;
        color: var(--clr-white);
        font-size: 1.8rem;
        line-height: 1.8rem;
        border-radius: 6.3rem;
        border: solid 0.2rem var(--clr-white);
    }

    #rady .products .shadow {
        height: 5.0rem;
        width: 21.1rem;
        background-image: url("../images/assets/shadow-can.svg");
    }


    /* ----------------- Series ----------------- */

    #o-birellu .background,
    #rady .background,
    .seriesPostPage .background,
    .seriesProductsPage .background {
        position: absolute;
        height: 100%;
        width: 100%;
        background-position: center;
    }

    #o-birellu .background.classic,
    .seriesPostPage .background.classic {
        background-size: 110%;
        background-position: top -34rem right -10rem;
        background-image: url("../images/backgrounds/type-description-classic.svg");
    }

    #rady .background.mixed {
        background-size: 100%;
        background-position: top 0 right 0;
        background-image: url("../images/backgrounds/series-selection.png");
    }

    .seriesProductsPage .background.classic {
        background-size: 123%;
        background-position: bottom 12rem left -4rem;
        background-image: url("../images/backgrounds/type-image-classic.svg");
    }

    .seriesPostPage .background.juicy {
        background-size: 105%;
        background-position: top -38rem left 0rem;
        background-image: url("../images/backgrounds/type-description-juicy.svg");
    }

    .seriesProductsPage .background.juicy {
        background-size: 130%;
        background-position: bottom -4rem left -9rem;
        transform: rotate(196deg);
        background-image: url("../images/backgrounds/type-image-juicy.svg");
    }


    /* ----------------- Contact ----------------- */

    #kontakt {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .contact {
        display: flex;
        width: 86%;
        flex-direction: column;
    }

    .contact .formContainer {
        width: 100%;
    }

    .contact .formContainer > * {
        width: 100%;
    }

    .contact .h1 {
        margin-top: 7.6rem;
        margin-bottom: 2.6rem;
        font-size: 4.2rem;
    }

    .contact .h3 {
        margin-bottom: 1.8rem;
        font-size: 2.5rem;
    }

    .contact .info {
        margin-bottom: 3rem;
        
    }

    .contact .info > * {
        padding-left: 3.8rem;
        font-size: 1.8rem;
        line-height: 3.4rem;
    }

    .contact .location {
        background-size: 1.8rem 2.4rem;
    }

    .contact .email {
        background-size: 1.8rem 1.6rem;
    }

    .contact form {
        line-height: 0;
    }

    .contact form p {
        margin: 0;
    }

    .contact form input,
    .contact form input[type=text],
    .contact form input[type=email],
    .contact form input[type=submit],
    .contact form textarea {
        display: block;
        margin: 0 0 1.4rem 0;
        padding: 1.4rem 3.0rem;
        font-size: 1.8rem;
        line-height: 2.4rem;
    }

    .contact form input::placeholder,
    .contact form input[type=text]::placeholder,
    .contact form input[type=email]::placeholder,
    .contact form textarea::placeholder {
        font-size: 1.8rem;
        line-height: 2.4rem;
    }

    .contact form textarea {
        height: 10.6rem !important;
    }

    .contact form input[type=submit] {
        padding: 1.4rem 6.2rem;
    }

    .contact form .wpcf7-not-valid-tip {
        margin: 0;
        margin-top: -2.3rem;
        padding: 0 0.2rem 0 0;
        height: 2.2rem;
        color: #a41818;
        font-size: 1.6rem;
    }

    .contact form .wpcf7-spinner,
    .contact form .wpcf7-response-output {
        padding: 0 3.2rem 0 0;
        font-size: 1.6rem;
    }

    .contact .map {
        width: 100%;
        height: 33.7rem;
    }


    /* ----------------- Series Products ----------------- */

    .seriesProducts {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .seriesProducts .slider {
        margin: 0;
        max-width: 100%;
        width: 100%;
        gap: 4.0rem;
    }

    .seriesProducts .item {
        width: 100%;
    }

    .seriesProducts .imgContainer {
        display: flex;
        width: 100%;
        height: 48rem;
        align-items: center;
        justify-content: center;
    }

    .seriesProducts img {
        max-height: 100%;
        max-width: 94%;
        width: auto;
    }

    .seriesProducts .item:hover img {
        max-height: 100%;
        max-width: 94%;
    }

    .seriesProducts .item .shadow {
        margin-top: 1rem;
    }

    .seriesProducts .item .button {
        margin-top: 1rem;
        opacity: 1;
    }


    /* ----------------- Birells ----------------- */

    #birell-detail .birellGallery {

    }

    #birell-detail .birellGallery .slider {
        align-items: flex-start;
        overflow-y: hidden;
    }

    #birell-detail .birellGallery .itemInner {
        display: block;
        margin: 16rem 1.6rem 0rem 1.6rem;
        width: auto;
        height: auto;
    }

    #birell-detail .birellGallery .arrow {
        top: 8rem;
        transform: translateY(0);
        width: 3.8rem;
        height: 3.8rem;
        cursor: pointer;
    }

    #birell-detail .birellGallery .arrow.left {
        left: 40%;
        transform: translateX(-50%);
    }

    #birell-detail .birellGallery .arrow.right {
        left: 60%;
        transform: translateX(-50%);
    }


    /* ------- Birell Post ------- */
    #birell-detail .birellGallery .post {
        transform: translate(0, 0);
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        max-height: max-content;
    }

    #birell-detail .birellGallery .post a,
    #birell-detail .birellGallery .post a:visited,
    #birell-detail .birellGallery .post a:hover {
        margin-top: 6.2rem;
        color: var(--clr-white);
    }

    #birell-detail .birellGallery .post a:hover {
        text-decoration: underline;
    }

    #birell-detail .birellGallery .navigator.back {
        padding-left: 3.6rem;
        font-size: 1.4rem;
        line-height: 1.8rem;
        font-weight: 400;
        text-transform: uppercase;
        background-image: url("../images/icons/arrow-left-white.svg");
        background-size: 1.8rem 1.8rem;
        background-position: left center;
    }

    #birell-detail .birellGallery .h1 {
        font-size: 4.2rem;
        line-height: 5.0rem;
        margin-top: 5rem;
        margin-bottom: 4rem;
    }

    #birell-detail .birellGallery .body {
        margin-bottom: 2rem;
    }

    #birell-detail .birellGallery .columns {
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        margin: 0;
        flex-direction: column;
    }

    #birell-detail .birellGallery .columns > * {
        width: 100%;
        font-size: 1.8rem;
        font-weight: 400;
        line-height: 2.6rem;
    }

    #birell-detail .birellGallery .columns .ingredients {
        width: 100%;
    }

    #birell-detail .birellGallery .columns .ingredients .text {

    }

    #birell-detail .birellGallery .columns .nutrients {
        margin-top: 3rem;
        font-size: 1.6rem;
        line-height: 2.0rem;
    }


    #birell-detail .birellGallery .columns .nutrients table {
        margin-top: 2rem;
    }

    #birell-detail .birellGallery .columns .nutrients table tr {
        /*border-bottom: solid 0.1rem var(--clr-white);*/
    }

    #birell-detail .birellGallery .columns .nutrients table td {
        padding: 0.6rem 4.8rem 0.8rem 0rem;
        /*border-bottom: solid 0.1rem var(--clr-white);*/
    }

    #birell-detail .birellGallery .titleImage {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-bottom: 3.2rem;
        padding: 3.2rem;
        height: 25.9rem;
        border-radius: 0.8rem;
        overflow: hidden;
    }

    #birell-detail .birellGallery .titleImage .title {
        margin-top: 2.4rem;
        width: 17rem;
        font-size: 3.2rem;
        line-height: 3.6rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    #birell-detail .birellGallery .titleImage .icon {
        width: 5.8rem;
        height: 5.8rem;
    }

    #birell-detail .birellGallery .titleImage .icon.main {
        background-image: url("../images/icons/icon-main.svg");
    }
    
    #birell-detail .birellGallery .titleImage .flavour {
        margin: -0.9rem -0.2rem;
        width: 6.8rem;
        height: 6.8rem;
        background-image: url("../images/icons/icon-flvr.svg");
    }
    
    #birell-detail .birellGallery .titleImage .active {
        margin: -3.7rem;
        width: 10.8rem;
        height: 10.8rem;
        transform: rotate(180deg);
        background-image: url("../images/icons/icon-active.svg");
    }

    #birell-detail .birellGallery .titleImage .imgContainer {
        position: absolute;
        right: 6.4rem;
        top: 3.2rem;
        display: flex;
        width: 10.6rem;
        height: 28.0rem;
        align-items: center;
        justify-content: center;
        opacity: 1;
    }

    #birell-detail .birellGallery .titleImage .imgContainer img {
        width: auto;
        height: auto;
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
    }


    /* ------- Birell Gallery Image ------- */

    #birell-detail .birellGallery .imabeBbackground {
        top: 0;
        left: 0rem;
        height: 50rem;
        width: 25rem;
        background-position: center center;
    }

    #birell-detail .birellGallery .imabeBbackground.classic {
        background-size: contain;
        background-position: center center;
        background-image: url("../images/backgrounds/birell-image-classic.svg");
        transform: scaleX(-1);
    }

    #birell-detail .birellGallery .imabeBbackground.juicy {
        bottom: -9rem;
        right: -30rem;
        height: 100rem;
        width: 138rem;
        background-image: url("../images/backgrounds/birell-image-juicy.svg");
        transform: rotate(9deg);
    }

    #birell-detail .birellGallery .imgContainer {
        display: flex;
        justify-content: center;
        position: absolute;
        top: 0;
        right: 50%;
        height: 74.7rem;
        width: 25.0rem;
        transform: translateX(50%);
        opacity: 0;
        z-index: 10;
    }

    #birell-detail .birellGallery img {
        width: 100%;
        height: auto;
        max-height: 100%;
        object-fit: contain;
    }


    #birell-selection .birellSelection,
    #gamingBirells .birellSelection {
        display: flex;
        margin: 0 1.6rem 0 1.6rem;
        padding: 7.3rem 0 1.6rem 0;
        gap: 1.6rem;
        justify-content: center;
    }


    /* ------- Birell Selection ------- */
    #birell-selection .birellSelection a,
    #birell-selection .birellSelection a:hover,
    #birell-selection .birellSelection a:visited,
    #gamingBirells .birellSelection a,
    #gamingBirells .birellSelection a:hover,
    #gamingBirells .birellSelection a:visited {
        color: var(--clr-white);
        flex: 0 0 100%;
        max-width: 100%;
    }

    #birell-selection .birellSelection .item,
    #gamingBirells .birellSelection .item {
        padding: 3.2rem;
        height: 25.9rem;
        border-radius: 0.8rem;
    }

    #birell-selection .birellSelection .item .title,
    #gamingBirells .birellSelection .item .title {
        max-width: 18.0rem;
        font-size: 2.6rem;
        line-height: 3.2rem;
    }


    #birell-selection .birellSelection .item .link,
    #gamingBirells .birellSelection .item .link {
        padding-left: 5.0rem;
        height: 3.2rem;
        font-size: 1.5rem;
        line-height: 2.0rem;
        background-size: 3.2rem 3.2rem;
    }

    #birell-selection .birellSelection .item .imgContainer,
    #gamingBirells .birellSelection .item .imgContainer {
        right: 4.0rem;
        width: 10.6rem;
        height: 19.0rem;
    }

    #birell-selection .birellSelection .item img,
    #gamingBirells .birellSelection .item img {
        margin-top: 6.6rem;
        max-width: 100%;
        max-height: 26.0rem;
    }

    #birell-selection .birellSelection .item:hover img,
    #gamingBirells .birellSelection .item:hover img {
        max-height: 29.0rem;
    }

    #birell-selection .birellSelection .item .icon {
        position: absolute;
        top: 0;
        right: 0;
        width: 2.8rem;
        height: 2.8rem;
    }

    #birell-selection .birellSelection .item .icon.main {
        top: 1rem;
        right: 1rem;
        width: 4.1rem;
        height: 4.1rem;
    }

    #birell-selection .birellSelection .item .icon.flavour {
        top: 1rem;
        right: 1.3rem;
        width: 4.1rem;
        height: 4.1rem;
        background-image: url("../images/icons/icon-flvr.svg");
    }

    #birell-selection .birellSelection .item .icon.active {
        top: -0.2rem;
        right: -0.6rem;
        width: 7.4rem;
        height: 7.4rem;
        background-image: url("../images/icons/icon-active.svg");
    }
    
    
}