/*
*
* ==========================================
* #Farben
* ==========================================
*
*/
@media only screen and (max-width: 1024px) {
    :root {
        --rolex-green: #006039;
        --green: #127749;
        --ocean-green: #61BD93;
        --brown: #452C1E;
        --black: #212121;
        --dark-grey: #767676;
        --dark-grey-op50: rgba(118, 118, 118, 0.5);
        --dark-grey-op30: rgba(118, 118, 118, 0.3);
        --grey: #D4D4D4;
        --grey-op30: rgba(212, 212, 212, 0.3);
        --beige: #F4EFEA;
        --light-beige: #F9F7F4;
        --white: #FFFFFF;
        --white-op80: rgba(255, 255, 255, 0.8);
        --white-op40: rgba(155, 255, 255, 0.4);
        --navigation-gradient: linear-gradient(to right, #0b3e27, #197149);

        --font-weight-bold: 700;
        --font-weight-regular: 400;
        --font-weight-light: 300;
    }


    /*
    *
    * ==========================================
    * #Schriftarten
    * ==========================================
    *
    */
    .rolex-2024 .headline70 {
        font-size: 53px;
        line-height: 1.1;
    }
    .rolex-2024 .headline50 {
        font-size: 40px;
        line-height: 1.2;
    }
    .rolex-2024 .headline36 {
        font-size: 30px;
        line-height: 1.2;
    }
    .rolex-2024 .headline30 {
        font-size: 26px;
        line-height: 1.2;
    }
    .rolex-2024 .headline26 {
        font-size: 24px;
        line-height: 1.2;
    }
    .rolex-2024 .body24-bold {
        font-size: 21px;
        line-height: 1.2;
    }
    .rolex-2024 .body24-light {
        font-size: 21px;
        line-height: 1.2;
    }
    .rolex-2024 .body20-bold {
        font-size: 19px;
        line-height: 1.6;
    }
    .rolex-2024 .body20-light {
        font-size: 19px;
        line-height: 1.6;
    }
    .rolex-2024 .legend16-bold {
        font-size: 14px;
        line-height: 1.1;
    }
    .rolex-2024 .legend16-light {
        font-size: 14px;
        line-height: 1.1;
    }
    .rolex-2024 .legend14-bold {
        font-size: 12px;
        line-height: 1.1;
    }
    .rolex-2024 .fixed22 {
        font-size: 22px;
        line-height: 1.6;
    }
    .rolex-2024 .fixed16 {
        font-size: 16px;
        line-height: 1.1;
    }
    .rolex-2024 .fixed14 {
        font-size: 14px;
        line-height: 1.1;
    }
    .rolex-2024 .quote50 {
        font-size: 40px;
        line-height: 1.6;
    }



    /*
    *
    * ==========================================
    * #Grid
    * ==========================================
    *
    */
    .rolex-2024 .grid {
        /*width: 100%;*/
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 0px 8px;
        margin: 0 8%;
        justify-content: space-between;
    }

    .rolex-2024 .one {
        grid-column: span 1;
    }

    .rolex-2024 .two {
        grid-column: span 2;
    }

    .rolex-2024 .three {
        grid-column: span 3;
    }

    .rolex-2024 .four {
        grid-column: span 4;
    }

    .rolex-2024 .five {
        grid-column: span 5;
    }

    .rolex-2024 .six {
        grid-column: span 6;
    }

    .rolex-2024 .seven {
        grid-column: span 7;
    }

    .rolex-2024 .eight {
        grid-column: span 8;
    }

    .rolex-2024 .nine {
        grid-column: span 9;
    }

    .rolex-2024 .ten {
        grid-column: span 10;
    }

    .rolex-2024 .eleven {
        grid-column: span 11;
    }

    .rolex-2024 .twelve {
        grid-column: span 12;
    }

    .rolex-2024 .one-two-two{
        grid-column: span 2;
    }

    .rolex-2024 .one-twelve-six {
        grid-column: span 12;
    }

    .rolex-2024 .two-three-three{
        grid-column: span 3;
    }

    .rolex-2024 .two-three-six{
        grid-column: span 3;
    }
    .rolex-2024 .two-four-four{
        grid-column: span 4;
    }

    .rolex-2024 .three-one-zero{
        grid-column: span 1;
    }

    .rolex-2024 .three-two-zero {
        grid-column: span 2;
    }

    .rolex-2024 .three-four-six {
        grid-column: span 4;
    }

    .rolex-2024 .three-four-three {
        grid-column: span 4;
    }

    .rolex-2024 .three-five-three{
        grid-column: span 5;
    }

    .rolex-2024 .three-six-three{
        grid-column: span 6;
    }

    .rolex-2024 .three-twelve-twelve{
        grid-column: span 12;
    }

    .rolex-2024 .four-four-three {
        grid-column: span 4;
    }

    .rolex-2024 .four-four-six {
        grid-column: span 4;
    }

    .rolex-2024 .four-five-six{
        grid-column: span 5;
    }

    .rolex-2024 .five-eight-four{
        grid-column: span 8;
    }
    .rolex-2024 .five-nine-six {
        grid-column: span 9;
    }

    .rolex-2024 .five-six-four{
        grid-column: span 6;
    }

    .rolex-2024 .six-twelve-twelve{
        grid-column: span 12;
    }

    .rolex-2024 .five-twelve-six {
        grid-column: span 12;
    }

    .rolex-2024 .six-eight-six, .rolex-2024 .s {
        grid-column: span 8;
    }

    .rolex-2024 .six-twelve-six{        grid-column: span 12;
    }

    .rolex-2024 .six-twelve-six{
        grid-column: span 12;
    }

    .rolex-2024 .six-ten-six{
        grid-column: span 10;
    }

    .rolex-2024 .nine-six-six {
        grid-column: span 6;
    }

    .rolex-2024 .nine-twelve-twelve{
        grid-column: span 12;
    }

    .rolex-2024 .twelve-twelve-six, .rolex-2024 .l {
        grid-column: span 12;
    }


    /*
    *
    * ==========================================
    * #Bildkomponenten
    * ==========================================
    *
    */
    .rolex-2024 .xl {
        width: 100vw;
    }

    .rolex-2024 .m {
        grid-column: span 10;
    }

    /*
*
* ==========================================
* #Navigation
* ==========================================
*
*/

    .rolex-2024 .rolex-navbar-outer {
        height: 100px;
    }

    .rolex-2024 .navigation-items .menu-item {
        display:none;
    }

    .rolex-2024 .navigation-items > .menu {
        display:block;
    }

    .rolex-2024 .rolex-navbar .rolex-mobile-menu {
        display: none;
        background: var(--navigation-gradient);
        padding-top: 40px;
        animation: mobileMenuAnim 1s ease 0s 1 normal forwards;
        opacity: 0;
        transition: opacity 0.5s ease; /* Add a transition for the opacity property */
    }

    .rolex-2024 .rolex-navbar .rolex-mobile-menu.open {
        display: block;
        opacity: 1; /* Set opacity to 1 when the 'open' class is added */
    }
    @keyframes mobileMenuAnim {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes mobileMenuAnimOut {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .rolex-2024 .breadcrumbs {
        display:none;
    }

    .rolex-2024 .rolex-mobile-menu .navigation-items li{
        margin-bottom: 35px;
        list-style-type:none;
        color: var(--white);
        margin-left:unset;
    }


    .rolex-2024 .rolex-mobile-menu .navigation-items > li:hover{
        color:var(--ocean-green);
    }

    .rolex-2024 .rolex-mobile-menu .navigation-items > li.active{
        color:var(--ocean-green);
    }

    .rolex-2024 .mobile-white{
        color: var(--rolex-color-white) !important;
    }
    /*
    *
    * ==========================================
    * #Kollektionsseiten
    * ==========================================
    *
    */
    .rolex-2024 .rolex-kollektion {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 8px;
        margin: 50px 8% 40px 8%;
        justify-content: space-between;
        flex-wrap: unset;
        align-items: unset;
        padding: 0;
    }

    .rolex-2024 .rolex-kollektion-kachel {
        background: var(--beige);
        padding-top: 5%;
        grid-column: span 4;
        margin: 0;
        width: unset;
    }

    .rolex-2024 .rolex-kollektion-kachel-content {
        padding: 0px 30px 50px 30px;
    }

    .rolex-2024 .rolex-kollektion-kachel img{
        max-width: 90%;
    }
    /*
*
* ==========================================
* #Uhrenmerkmale (Produkt-Seite)
* ==========================================
*
*/
    .rolex-2024 .rolex-uhrenmerkmale-content{
        grid-column: span 12;
        grid-template-columns: repeat(12, 1fr);
        margin: 0px 0px 10vh 0px;
        order: 2;
    }
    .rolex-2024 .rolex-uhrenmerkmale-image{
        order: 1;
        grid-column-end: span 8;
        grid-column-start: 3;
        justify-content: center;

    }



    /*
    *
    * ==========================================
    * #Modellverfuegbarkeit
    * ==========================================
    *
    */
    /*.rolex-2024 .modellverfuegbarkeit p{*/
    /*    grid-column-start: 3;*/
    /*    grid-column-end: 11;*/
    /*}*/

    /*.rolex-2024 .hide-mobile {*/
    /*    display:none;*/
    /*}*/

    /*.rolex-2024 .hide-desktop {*/
    /*    display:block;*/
    /*}*/

    /*.rolex-2024 .rolex-modellseiten .rolex-modellseiten-content{*/
    /*    order: 2;*/
    /*}*/
    /*.rolex-2024 .rolex-modellseiten .rolex-modellseiten-image{*/
    /*    height: unset;*/
    /*    position: unset;*/
    /*    top: unset;*/
    /*    left: unset;*/
    /*    align-items: unset;*/
    /*    order: 1;*/
    /*    margin-top: 50px;*/
    /*}*/

    /*.rolex-2024 .first-argument {*/
    /*    border-top: unset;*/
    /*}*/

    /*
    *
    * ==========================================
    * #Weiterlesen
    * ==========================================
    *
    */

    .rolex-2024 .swiper-button-next{
        position:absolute;
        right:50px;
        left:auto;
        width: 44px;
        margin-right: -25px;
        top: 42%;
        transform: translateY(-50%)
    }

    .rolex-2024 .swiper-button-prev{
        position:absolute;
        left: 50px;
        right:auto;
        width: 44px;
        margin-left: -25px;
        top: 42%;
        transform: translateY(-50%)
    }

    /*
    *
    * ==========================================
    * #Slider-Komponente
    * ==========================================
    *
    */

    .rolex-2024 .slide-component-button-next {
        top: 50%;
        transform: translateY(-50%)
    }

    .rolex-2024 .slide-component-button-prev {
        top: 50%;
        transform: translateY(-50%) scaleX(-1);
    }

    /*.rolex-2024 .slider-content .slider-text {*/
    /*    position: absolute;*/
    /*    top: 20%;*/
    /*}*/

    /*
*
* ==========================================
* #Kontakt-Komponente
* ==========================================
*
*/
    /*.rolex-2024 .map {*/
    /*    width:*/
    /*}*/

}