.mobile-only { display: none; }

@media screen and (max-width:1100px){ /* Unter 1100px Bildschirmbreite */
    .content, .pricing {
        padding-left: 40px;
        padding-right: 40px;
    }
    .content.narrow { padding-left: 0!important; padding-right: 0!important }
    
    .rightfloat {
        right: 40px;
    }

    .calendar-header h1 { display: block!important; }
    .week-navigation {
        position: static!important;
        display:inline-block;
        margin: 0em 0 3em;    
    }
    
    .preise .content { display: block }
    .pricing { display: block;  }
    
    .equipment-list+.equipment-list { margin-left: 0 }
    .equipment-list { max-width: 100%; width:auto }
    
    .gallery-wrapper {
        left: -40px;
    }
}

@media screen and (min-width:800px){ /* Über 800px Bildschirmbreite */
    #menu:not(.overlaymenu) .hamburger {
        width:0!important; border-width:0!important;
        margin:0!important; padding-left:0!important; padding-right:0!important;
    }
    #menulinks { display: none }
}

@media screen and (max-width:800px){ /* Unter 800px Bildschirmbreite */
    .typo-heading { font-size: 6em }

    .mobile-only { display: initial; }
    .desktop-only { display: none; }
    
    #l1,#l2,#l3,#l4,#l5,#l6 { margin: 20px 10px 0!important; width: auto; left: 0; top: 0 }
    #l6 { margin-top: 0!important }
    .level-description { font-size: 20px }
    #lasermaster { padding: 0!important }
    #lasermaster .content { padding: 40px }
    .level-p { display: none }
    .level-p.level-p-copy { display: block; padding: 40px }

    .half {
        display: block;
        width: 100%;
        margin: 0; padding: 0 0 1.5em!important;
    }

    .slider { padding: 0 30px; }

    .break {
        display: block;
        width: 100%
    }
    
    .rightfloat {
        position: static;
        display: block;
        margin-top:40px;
    }
    
    article h2, article h4 { padding: 0 24px }

    
    .loginform .button {
        width: 100%;
    }
    
    .overlap .dann {
        left: 0;
        text-align: center;
        width: 100%;
    }
    h1.game-heading { margin-right:30px; font-size:2.6em }
    .description { width: auto }
    .jopo, .copyright { padding: 1em 0; position: static; display: block; }
    /*.responsive-margin { display: none }*/

    .half-column { width: 100% }
    .half-column+.half-column { padding-left: 0 }

    .hamburger { display: inline-block }
    #menu .desktop-menu { display: none }
    .userinfo { border-left: none }
    
    .gallery-item {
        width: 100vw;
    }
    .gallery-item img {
        width: 100%; height: 100%;
        object-fit: cover;
    }
}

@media screen and (max-width:480px){ /* Unter 480px Bildschirmbreite */
    h1 { font-size: 2.6em }
    h2 { font-size: 1.2em }
    #menulinks { padding-top: 70px }
    .menulinks li { 
        -webkit-transition: none;
        -ms-transition: none;
        transition: none;
    }
    #menulinks a { font-size: 0.7em; }
    .section-slider-picker { bottom: 20px }


    #gallery-thumbnails a {
        max-width: calc(50% - 20px);
    }
    
    li.gallery-item {
        background-color: #000;
    }
    li.gallery-item img {
        object-fit: contain;
        max-width: 100%;
        min-width: 100%;
    }
    .gallery-controls i {
        font-size: 3.7em;
    }

    /*.images { width: 80% }*/
    .typo-heading {
        font-size: 4em;
        font-size: 3.2em;
        line-height: 0.8em;
    }
    .typo button {
        font-size: .9em;
    }
    
    .hamburger { padding: 9px 6px; width: 40px; }
    #menu .logo { width: 133px; height: 36px; margin-top:3px }
    #menu { font-size: .7em; padding: 20px 25px }

    #booking .overlay-content { margin-top: 70px }
}

@media screen and (max-width:480px) and (orientation: portrait){ /* Unter 480px Bildschirmbreite / Hochformat */
    #withlogo { display: none }
    #withoutlogo { display: block }
    .logo { display: block; }
}

@media screen and (max-width:480px) and (orientation: landscape){ /* Unter 480px Bildschirmbreite / Querformat */
    #withlogo { display: block }
    #withoutlogo { display: none }
    .logo { display: none; }
}

@media screen and (max-width:320px){ /* Unter 320px Bildschirmbreite */
    .calendar-header {
        padding-left:0;
        padding-right:0;
    }
    .calendar-header h1 { font-size: 1.3em }
    #menu .logo { background-image: url(../images/logo.small.svg); width: 40px!important; height: 40px!important; margin: 0!important }
    #menu.invert .logo { background-image: url(../images/logo.small.black.svg); }
    .oeffnungszeiten h4 { font-size: 0.9em }
    .overlap { padding-top:3em }
    .equipment-list h1 { margin-top:.7em }

    
    #gallery-thumbnails {
        position: relative; left: -40px;
        width: calc(100% + 80px);
        white-space:nowrap;
        overflow-x: auto;
        margin-top: 40px;
    }
    #gallery-thumbnails a {
        max-width: 100%; width: 100%;
        margin: 0;
        display:inline-block:
    }
    
    .overlay.visible ~ * {
        display:none!important;
    }
}



@media screen and (orientation: portrait){  /* Hochformat */
    /*.images { width: 80% }*/
    .description { width: auto }
    .jopo, .copyright { padding: 1em 0; position: static; display: block; }
    .login-actions {
        position: static;
        transform: none;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:1.1) { /* Min. dpr von 1.1 */
    #menu { padding: 15px }
    #facebook_embed:before { margin-left:40px; }
}

@media screen and (-webkit-min-device-pixel-ratio:2.0) { /* Min. dpr von 2.0 */
    body { font-size: 17px }
    #menu { padding: 15px }
    #menulinks { font-size: 2em }
    .button { font-size:1.25em }
    h1 { font-size: 2em }
    
    .calendar-header { padding: 0 }
    .calendar-header h1 { padding: 0 1em; width: 100% }
    .navigate i.material-icons { width: 1em; font-size: 1.5em; }
}

@media screen and (-webkit-min-device-pixel-ratio:2.0) and (min-width:768px) {
    .calendar {
/*        width: 80%;*/
    }
}

@media screen and (-webkit-min-device-pixel-ratio:2.0) and (max-width:800px){ /* Min. dpr von 2.0 / höchstens 800px Breite */
    .hamburger { padding: 9px 6px; width: 40px }
    #menu .logo { width: 133px; height: 36px; margin-top:3px }
    #menu { font-size: .7em }    
    
    /*.images { max-width: none }*/
    .description { width: auto }
    .rightfloat {
        position: static;
        display: block;
        margin-top:40px;
    }
    .jopo, .copyright { padding: 1em 0; position: static; display: block; }
}

/* iphone 6 */
@media only screen and (max-device-width: 667px), only screen and (max-width: 480px){
    .booking-details {
        max-width: 100%!important;
    }
    
    .overlay.visible ~ * {
        display:none!important;
    }
}