@media screen and (max-width: 1500px){
    .diesease-buttons-wrapper button{
        font-size: 15px;
        padding: 6px 15px;
    }
    .step-1, .step-2, .step-3, .step-4{
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
    .annotation-glaukom-s1, .annotation-glaukom-s2, .annotation-glaukom-s3, .annotation-glaukom-s4, 
    .annotation-diabet-s1, .annotation-diabet-s2, .annotation-diabet-s3, .annotation-diabet-s4,
    .annotation-dryeye-s1, .annotation-dryeye-s2, .annotation-dryeye-s3, .annotation-dryeye-s4{
        font-size: 13px !important;
    }
    .reset-button-wrapper{
        top: 245px;
    }
}


@media screen and (max-width: 992px) {
    
    header .header .site-logo .logo img{
        height: 25px;
    }
    
    .switch{
        font-size: 11px;
    }

    .text-de, .text-fr{
        font-size: 14px;
    }

    .reset-button-wrapper{
        top: 215px;
    }
    .reset{
        width: 30px;
        height: 30px;
    }
    .reset svg{
        width: 30px;
        height: 30px;
    }
    .diesease-wrapper{
        left: 15px;
        top: 55px;
        width: 33px;
    }
    .diesease-wrapper.opened{
        width: 250px;
    }
    .diesease-wrapper:hover{
        width: 250px;
    }
    .glaukom-title, .diabet-title, .dryeye-title {
        font-size: 18px;
    }
    .diesease-buttons-wrapper{
        top: 85px;
    }
    .diesease-buttons-wrapper button{
        font-size: 14px;
        padding: 5px 14px;
    }
  
    .arrow-down{
        width: 25px;
        height: 25px;
    }
    .zoom-in{
        width: 25px;
        height: 25px;
        right: 15px;
        bottom: 45px;
    }
    .zoom-out{
        width: 25px;
        height: 25px;
        right: 15px;
        bottom: 15px;
    }

    .step-1, .step-2, .step-3, .step-4{
        bottom: 15px;
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    .step-2 {
        left: 65px;
    }
    .step-3 {
        left: 115px;
    }
    .step-4 {
        left: 165px;
    }
    .annotation-glaukom-s1, .annotation-glaukom-s2, .annotation-glaukom-s3, .annotation-glaukom-s4, 
    .annotation-diabet-s1, .annotation-diabet-s2, .annotation-diabet-s3, .annotation-diabet-s4,
    .annotation-dryeye-s1, .annotation-dryeye-s2, .annotation-dryeye-s3, .annotation-dryeye-s4{
        position: absolute;
        width: 80%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        background: rgba(0, 0, 0, 0.8);
        color: #fff;
        border-radius: .5em;
        font-size: 12px !important;
        line-height: 1.2;
        overflow: hidden;
        transition: opacity, height ease .5s;
    }
    .wrapper{
        max-width: 100%;
    }
    #indicatorCanvas{
        display: none;
    }
    
}

@media screen and (max-width: 768px){
    header{
        min-height: 70px;
        max-height: 70px;
    }
    header .header{
        height: 0;
    }
    header .header .site-logo{
        padding-top: 19px;
        padding-left: 30px;
        padding-bottom: 15px;
    }
    
    .switch{
        font-size: 9px;
        top: 20px;
        right: 40px;
    }
    .text-de, .text-fr{
        font-size: 12px;
    }
    .text-de{
        left: -22px;
    }
    .text-fr{
        right: -22px;
    }

    .pt-wrapper{
        height: calc(100dvh - 65px);
        min-height: -webkit-fill-available;
    }
    #model-holder{
        height: calc(100dvh - 65px);
        min-height: -webkit-fill-available;
    }

    @supports (-webkit-touch-callout: none) {
        .pt-wrapper {
            height: calc(100dvh - 105px);
        }
        #model-holder {
            height: calc(100dvh - 105px);
        }
    }

    .step-1, .step-2, .step-3, .step-4{
        width: 30px;
        height: 30px;
        font-size: 15px;
        left: 10px;
    }
    .step-2{
        left: 50px;
    }
    .step-3{
        left: 90px;
    }
    .step-4{
        left: 130px;
    }
    .ripple-button{
        width: 25px;
        height: 25px;
        border: 2px solid black;
    }
    .ripple-button > svg{
        width: 12px;
        height: 12px;
    }
    
    .reset{
        width: 25px;
        height: 25px;
    }
    .reset svg{
        width: 25px;
        height: 25px;
    }

    .diesease-wrapper{
        background: transparent;
        position: relative;
        width: auto;
        top: 0;
        left: 0;
        padding: 0;
        border: none;
        white-space: initial;
        overflow: visible;
    }
    .diesease-wrapper.opened{
        width: auto;
    }
    .diesease-wrapper:hover{
        width: auto;
    }

    .diesease-buttons-wrapper{
        top: 75px;
    }

    .diesease-buttons-wrapper button{
        font-size: 12px;
        font-weight: 500;
        padding: 3px 12px;
    }

    .reset-button-wrapper{
        top: 185px;
        height: 35px;
    }

    .zoom-in {
        width: 20px;
        height: 20px;
        bottom: 40px;
    }
    .zoom-out{
        width: 20px;
        height: 20px;
    }

    .annotation h2{
        font-size: 18px;
    }

    .annotation p{
        font-size: 13px;
    }

}

@media screen and (max-width: 425px){
    header .header.in-view{
        height: 60px;
    }
    header .header .site-logo .logo img{
        height: 20px;
    }
    header .header .site-logo{
        padding-left: 20px;
    }
    header .header.h-sticky .site-logo{
        padding-left: 20px;
    }

    header .header.h-sticky .site-logo .logo{
        width: 85%;
    }

    .diesease-buttons-wrapper{
        top: 65px;
        left: 10px;
    }

    .reset-button-wrapper{
        top: 175px;
        left: 15px;
    }

}

@media screen and (max-height: 700px) and (min-width: 768px) {
    header .header.in-view{
        height: 65px;
    }

    header .header .site-logo{
        padding-top: 10px;
        padding-bottom: 10px;
    }

    header .header .site-logo .logo img{
        height: 25px;
    }

    .diesease-buttons-wrapper{
        top: 75px;
    }

    .diesease-buttons-wrapper button{
        font-size: 14px;
    }

    .reset-button-wrapper{
        top: 215px;
    }

    .step-1, .step-2, .step-3, .step-4{
        bottom: 15px;
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .annotation-glaukom-s1, .annotation-glaukom-s2, .annotation-glaukom-s3, .annotation-glaukom-s4,
    .annotation-diabet-s1, .annotation-diabet-s2, .annotation-diabet-s3, .annotation-diabet-s4,
    .annotation-dryeye-s1, .annotation-dryeye-s2, .annotation-dryeye-s3, .annotation-dryeye-s4{
        font-size: 12px !important;
    }
}

@media screen and (max-height: 600px) and (min-width: 768px) {
    .annotation-glaukom-s1, .annotation-glaukom-s2, .annotation-glaukom-s3, .annotation-glaukom-s4, 
    .annotation-diabet-s1, .annotation-diabet-s2, .annotation-diabet-s3, .annotation-diabet-s4,
    .annotation-dryeye-s1, .annotation-dryeye-s2, .annotation-dryeye-s3, .annotation-dryeye-s4{
        position: absolute;
        width: 80%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        background: rgba(0, 0, 0, 0.8);
        color: #fff;
        border-radius: .5em;
        font-size: 12px !important;
        line-height: 1.2;
        overflow: hidden;
        transition: opacity, height ease .5s;
    }

    .wrapper{
        max-width: 100%;
    }
}