@media only screen and (max-width: 1440px) {
    .intro-route-link svg{
        width: 70px;
    }
}

@media only screen and (max-width: 1024px) {
    :root{
	    font-size: 15px;
        --header-width: 80px;
    }
    .header-menu-wrapper,
    .header-right{
        border: none;
    }
    .main:not(:has(.section-intro-wrapper)){
        padding-top: 0;
    }
    .pad-left{
        padding-left: 0;
    }
    .pad-right{
        padding-right: 0;
    }
    .padded{
        padding: 20px;
    }
    .section-wrapper{
        padding-left: 10px;
        padding-right: 10px;
        overflow-x: clip;
    }
    .sided-section{
        flex-direction: column;
    }
    .sided-section .primary-side,
    .sided-section .secondary-side,
    .sided-section > .half-width,
    .section-intro:has(.intro-container) .secondary-side,
    .section-intro:has(.intro-container) .primary-side{
        width: 100%;
    }
    .text-container{
        max-width: unset;
    }
    .check-up-side{
        padding-right: 40px;
    }
    .check-up-band{
        width: 40px;
        padding: 10px;
        font-size: 1.1rem;
    }



    /*------------------------------------*\
    # INTRO
    \*------------------------------------*/

    body > .logo{
        position: static;
        margin-top: var(--header-width);
        padding-left: 10px;
    }
    .section-intro .text-side{
        padding-top: 0;
    }
    body > .media{
        height: fit-content;
        flex-direction: row;
        top: calc(var(--header-width) / 2);
        left: var(--header-width);
        margin-left: 20px;
        transform: translateY(-50%);
        width: fit-content;
        z-index: 70;
    }
    body:has(.header-menu-wrapper.active) > .media{
        left: var(--header-width);
    }
    .breadcrumb{
        padding-left: 0;
    }
    .section-intro .text-side{
        margin-top: 20px;
    }
    .intro-router{
        margin: 20px 0;
    }
    .intro-route-link svg{
        width: 60px;
    }
    .section-intro:has(.intro-attachment-link) .img-side{
        margin: 0;
    }
    .intro-img video{
        height: 500px;
    }
    .intro-img-logos{
        padding-top: 20px;
    }
    .intro-img-logos img{
        max-width: 170px;
        max-height: 100px;
    }
    .intro-container{
        min-width: unset;
        width: 100%;
        padding: 20px;
    }


    /*------------------------------------*\
    # TYPOGRAPHY
    \*------------------------------------*/
    
    .header-menu-item{
        font-size: 1.5rem;
        font-weight: bold;
    }
    .header-menu-item .sub-menu{
        font-size: 1rem;
    }



    /*------------------------------------*\
    # HEADER
    \*------------------------------------*/
    
    .header-menu{
        padding: 200px 100px 20px 10px;
        border: none;
    }
    .header-menu-container{
        padding: 0;
    }
    .header-menu-wrapper .logo{
        top: 110px;
        left: 10px;
    }
    .header-menu-item.active .sub-menu{
        padding: 20px 0
    }
    .dsg-button, .intro-img-buttons .dsg-button{
        top: 70vh;
    }



    /*------------------------------------*\
    # INTRO
    \*------------------------------------*/
    
    .section-intro{
        padding-left: 0;
    }
    .section-intro .logo{
        padding-top: var(--header-width);
    }
    .intro-img-buttons{
        display: flex;
    }
    .intro-img-buttons a{
        padding: 10px;
    }
    .intro-img img{
        display: block;
    }



    /*------------------------------------*\
    # HOMEPAGE
    \*------------------------------------*/
    
    .news-container{
        padding-right: 40px !important;
        padding-bottom: 40px !important;
    }
    .news-container .slider-navigator{
        position: static !important;
        padding: 20px 0 0 60px;
        margin: 0 auto;
        transform: none;
    }
    .news-img{
        display: none;
    }
    .text-container:has( ~ .news-container){
        padding-right: 40px !important;
    }
    .quality-box{
        margin-left: 0;
        padding-left: 0;
    }
    .quality-box:after{
        content: none;
    }
    .innovative-slider .slider-navigator-container{
        position: static;
        transform: none;
        width: 100%;
    }
    .section-anouncements{
        flex-direction: column;
    }
    .section-anouncements .foreground-secondary{
        height: fit-content;
        width: 100%;
    }
    .anouncements .denipol-red{
        height: fit-content;
    }
    .section-anouncements .foreground-secondary span{
        writing-mode: unset;
        transform: none;
        display: inline-block;
        text-align: center;
        width: 100% !important;
    }
    .anouncement-routes .route-item{
        padding: 20px;
    }
    .anouncement-routes .route-item img{
        height: 70px;
    }



    /*------------------------------------*\
    # APPOINTMENT & E-RESULTS MODALS
    \*------------------------------------*/

    .appointment-modal-wrapper,
    .e-results-modal-wrapper{
        left: 0 !important;
        display: block;
        place-content: end;
    }
    
    .appointment-modal-container,
    .e-results-modal-container{
        position: absolute;
        bottom: 0;
        left: 0;
        max-width: calc(100% - 60px);
    }

    .appointment-modal,
    .e-results-modal{
        width: 100%;
        padding: 20px;
    }

    .appointment-modal-container:before, .e-results-modal-container:before{
        transform: scale(.7);
        margin-left: 5px;
    }
    .appointment-modal-container .band-item, .e-results-modal-container .band-item{
        width: 60px;
    }
    .appointment-modal-container .band-item:before, .e-results-modal-container .band-item:before, .band-item{
        width: 50px;
        height: 50px;
    }
    .appointment-modal-wrapper:has(.appointment-personal-info-modal.active) .appointment-modal-container:before{
        opacity: 1 !important;
    }
    .appointment-modal-wrapper:has(.appointment-personal-info-modal.active) .appointment-modal-container:after{
        height: calc(100% - 50px) !important;
        padding: 20px 0 !important;
    }


    /* Personal Info Modal */

    .appointment-personal-info-modal.active{
        z-index: 2;
        position: absolute;
        left: 0;
        background-color: var(--denipol-foreground-secondary);
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, .25);
    }
    .appointment-modal-wrapper:has(.appointment-personal-info-modal.active) .appointment-modal-container{
        z-index: -1;
    }
    .appointment-modal-wrapper:has(.appointment-personal-info-modal.active):before{
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(5, 59, 98, 0.5);
    }



    /*------------------------------------*\
    # DOCTORS
    \*------------------------------------*/
    
    .doctor-item-wrapper{
        padding: 20px 20px 10px 20px;
    }
    .doctor-img{
        pointer-events: all;
    }
    .doctor-img-buttons{
        font-size: .85rem;
    }
    .doctor-info .name{
        display: block;
    }



    /*------------------------------------*\
    # MEDICAL DEPARTMENTS
    \*------------------------------------*/
    
    .section-medical-departments{
        gap: 20px;
    }
    .medical-department-item-wrapper{
        padding: 20px 20px 10px 20px;
    }
    .medical-department-img .inspect{
        background-size: 70%;
    }



    /*------------------------------------*\
    # TREATMENT METHODS
    \*------------------------------------*/
    
    .section-treatment-methods .primary-side .text-container{
        padding-top: 0 !important;
    }



    /*------------------------------------*\
    # FOOTER
    \*------------------------------------*/

    footer{
        padding: 0 !important;
    }
    footer .footer-main{
        flex-direction: column;
    }
    .footer-router,
    .footer-departments{
        width: 100%;
    }
    .footer-router > *{
        padding-left: 0;
    }
    .footer-router > ul:before{
        content: none;
    }
    .footer-bottom{
        position: static;
    }
    .footer-departments{
        padding: 40px 10px 0 10px;
    }
    .footer-department-wrapper{
        width: 50% !important;
    }
}