h1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    padding: 10px 10px 10px 20px;
    margin: 0px;
    color:rgb(255, 239, 149);
    min-height:60px;
    text-shadow:3px 3px 10px rgb(2, 0, 198);
}



h2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color:rgb(2, 0, 198);
    padding-top:75px;
}

h2.first
    {
        padding-top:125px;
    }

h3 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: rgb(2, 0, 198);
}

h4 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: rgb(2, 0, 198);
}

li {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

td {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

a {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
}

    nav {
        margin: 0px;
        height:15px;
    }


p {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

a:visited {
    color:rgb(52, 52, 52);
}

a:link {
    color: blue;
}

.angebot {
    color: red;
}

.bild {
    line-height: 166px;
    margin: 0px;
    padding: 0px;
}

.qr{
    display:none;
    position:absolute;
    right:50px;
    top:100px;
    height:100px;
}

.qrprint {
    display: none;
    width: 200px;
    float: right;
}

@media screen and (min-width:801px) {
    .menubutton {
        position:absolute;
        top:100px;
        left:50px;
        visibility:hidden;
        border-bottom: 17px double black; 
        border-top: 6px solid black; 
        content:"";
        height: 5px; 
        width:30px;
        z-index:15;
    }

    .sticky-phone{
        display:none;
    }

    .bigscreen {display:block}
    .smallscreen{display:none}

    .bildgallery {
    display:inline-block;
    margin-left:50px;
    padding: 0px;
    }

  
    .smallimg {
        margin:0px;
        max-height:158px;
        max-width:208px;
        display:inline-block;
        position:relative;
    }

    .smallimg img {
        max-height:inherit;
        max-width:inherit;
    }

    .smallimg figcaption{
        position:absolute;
        width:100%;
        text-align:center;
        padding-top:5px;
        background-color:rgba(255, 255, 255, 0.5);
        height:2em;
        bottom:0em;
        z-index:1;
    }

    .gallerybild {
    margin:0px;
    padding:5px;
    height: 452px;
    display:inline-block;
    font-family:Verdana, Helvetica, sans-serif;
    }
    
        .gallerybild img {
            height: inherit;
            margin:0px;
            padding:0px;
        }

        .gallerybild figcaption {
            padding-top:5px;
            position:relative;
            top:-2em;
            text-align:center;
            height:2em;
            background-color:rgba(255, 255, 224, 0.47);
        }

    .gallerybild:hover{
        font-weight:bold;
    }
    
    nav {
        visibility:visible;
        margin: 0px;
        height:15px;
    }

    .nav li {
        display:inline;
        position:relative;
        top:-25px;
    }
    p {
        margin-left:50px;
        max-width:800px;
    }
    
    ul{
        margin-left:50px;
        max-width:800px;
    }

    div.header {
        background-image: url('images/panorama_lotsenstation.jpg');
        background-size: cover;
        left:0px;
        right:0px;
        top:0px;
        position:fixed;
        z-index:2;
    }
    
    h2 {
        margin-left:50px;
        max-width:800px;
    }
    h3 {
        margin-left: 50px;
        max-width: 800px;
    }
    h4 {
        margin-left: 50px;
        max-width: 800px;
    }

    img.druck {
        height: 156px;
    }

    p.copy {
        font-family: monospace;
        font-size: .8em;
    }
    .nav {
        font-family: Verdana, Geneva, Tahoma, sans-serif
    }
    a.nav {
        padding: 20px 20px 10px 20px;
        line-height:50px;
        transition: background-color .8s ease;
        background-color: rgba(255, 216, 0, 0.36);
    }
        a.nav:hover {
            background-color: rgba(130, 200, 50, 0.8);
     }

    .hidescreen{
        display:none;
    }
}

@media screen and (min-width:800px){
    /* this is for a very wide screnn */
    div.header {
        background-image: url('images/panorama_lotsenstation_wide.jpg');
        background-size: cover;
        left: 0px;
        right: 0px;
        top: 0px;
        position: fixed;
        z-index: 2;
    }

    .qr {
        display:block;
    }

    .qrprint {
        display: block;
    }
}

@media screen and (min-width:480px) and (max-width:800px) {
  /* This is for ipad: screen and (min-width:480px) and (max-width:800px)
 Target landscape smartphones, portrait tablets, narrow desktops   */
     .menubutton {
        position: fixed;
        top: 5px;
        display: block;
        left: 5px;
        visibility: visible;
        border-bottom: 17px double black;
        border-top: 6px solid black;
        content: "";
        height: 5px;
        width: 30px;
        margin: 3px;
        z-index: 15;
        background-color: white;
        box-shadow: 4px 4px 4px rgba(0,0,0,0.4);
    }

    .sticky-phone{
        position:fixed;
        top:0px;
        left: 0px;
        padding-left:50px;
        padding-top:15px;
        padding-right:5px;
        text-align:center;
        font-size:larger;
        right: 0px;
        height: 45px;
        background-image: url('images/panorama_lotsenstation_low.jpg');
        background-size: cover;
        z-index:3;
    }
    .sticky-phone a{
        text-decoration:none;
        color:rgb(255, 239, 149);
        text-shadow: 3px 3px 10px rgb(2, 0, 198);
    }

    h1{
        margin-left:50px;
    }
    
    .touchbutton{
        position:relative;
        min-width:200px;
        min-height:2em;
        background-color:white;
        border:2px solid blue;
        display:block;
        text-align:center;
        vertical-align:middle;
    }

  div.header {
        background-image: url('images/panorama_lotsenstation.jpg');
        background-size: cover;
        left:0px;
        right:0px;
        top:0px;
        position:absolute;
        z-index:4;
    } 

  
    .bigscreen {display:none}
    .smallscreen{display:block}
    
    .bildgallery {
    display:inline-block;
    margin-left:20px;
    margin-right:20px;
    padding: 0px;
    }

    p.copy {
        font-family: monospace;
        font-size: .8em;
    }

    .smallimg {
        margin:0px;
        max-height:158px;
        max-width:208px;
        display:inline-block;
        position:relative;
    }

    .smallimg img {
        max-height:inherit;
        max-width:inherit;
    }

    .smallimg figcaption{
        position:absolute;
        width:100%;
        text-align:center;
        padding-top:5px;
        background-color:rgba(255, 255, 255, 0.5);
        height:2em;
        bottom:0em;
        z-index:1;
    }

    
    .gallerybild {
    margin:0px;
    padding:5px;
    max-width:100%;
    display:block;
    font-family:Verdana, Helvetica, sans-serif;
    }
    
        .gallerybild img {
            width:100%;
            margin:0px;
            padding:0px;
        }

        .gallerybild figcaption {
            padding-top: 5px;
            position: relative;
            top: -2em;
            text-align: center;
            height: 2em;
            background-color: rgba(255, 255, 224, 0.47);
        }

    .nav li {
        display:inline;
        position:relative;
        top:0px;
    }

     .nav {
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        vertical-align: bottom;
    }
    a.nav {
        padding: 20px 20px 10px 20px;
        line-height:50px;
        background-color: rgba(255, 216, 0, 0.36);
    }

    .hidescreen{
        display:none;
    }

}

@media screen and (max-width:479px) {
    /* Target portrait smartphones */
    .menubutton {
        position: fixed;
        top: 5px;
        display: block;
        left: 5px;
        visibility: visible;
        border-bottom: 17px double black;
        border-top: 6px solid black;
        content: "";
        height: 5px;
        width: 30px;
        margin: 3px;
        z-index: 15;
        background-color: white;
        box-shadow: 4px 4px 4px rgba(0,0,0,0.4);
    }

    .sticky-phone{
        position:fixed;
        top:0px;
        left: 0px;
        padding-left:50px;
        padding-top:15px;
        padding-right:5px;
        text-align:center;
        font-size:larger;
        right: 0px;
        height: 45px;
        background-image: url('images/panorama_lotsenstation_low.jpg');
        background-size: cover;
        z-index:3;
    }
    .sticky-phone a{
        text-decoration:none;
        color:rgb(255, 239, 149);
        text-shadow: 3px 3px 10px rgb(2, 0, 198);
    }

    h1{
        margin-left:50px;
    }
    
    .touchbutton{
        position:relative;
        min-width:200px;
        min-height:2em;
        background-color:white;
        border:2px solid blue;
        display:block;
        text-align:center;
        vertical-align:middle;
    }
    
    .bigscreen {display:none}
    .smallscreen{display:block}

    p.copy {
        font-family: monospace;
        font-size: .8em;
    }

    .bildgallery {
    display:inline-block;
    margin-left:20px;
    margin-right:20px;
    padding: 0px;
    }

    .smallimg {
        margin:5px;
        width:70%;
        display:inline-block;
        position:relative;

    }

    .smallimg img {
        width:100%;
    }

    .smallimg figcaption{
        position:absolute;
        width:100%;
        text-align:center;
        padding-top:5px;
        background-color:rgba(255, 255, 255, 0.5);
        height:2em;
        bottom:0em;
        z-index:1;
    }
    
    .gallerybild {
    margin:0px;
    padding:5px;
    max-width:100%;
    display:block;
    font-family:Verdana, Helvetica, sans-serif;
    }
    
        .gallerybild img {
            width:100%;
            margin:0px;
            padding:0px;
        }

        .gallerybild figcaption {
            padding-top: 5px;
            position: relative;
            top: -2em;
            text-align: center;
            height: 2em;
            background-color: rgba(255, 255, 224, 0.47);
        }

    nav.nav{
        font-family: Helvetica, sans-serif;
        vertical-align: bottom;
        height: 100%;
        width: 0;
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        left: 0;
        top: 0;
        background-color: rgb(0,0,0); /* Black fallback color */
        background-color: rgba(0,0,0, 0.60); /* Black w/opacity */
        overflow-x: hidden; /* Disable horizontal scroll */
        transition: ease-in 1s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
    }


    ul.nav {
        position: relative;
        vertical-align:central;
        top:25%;
        left: 0px;
        right: 0px;
        bottom:0px;
        margin-top:30px;
        padding:0px;
        transition: 1s;
    }

    ul.nav li {
        list-style-type: none;
        margin: 0px;
        text-align:center;
    }

        ul.nav li a {
            border: none;
            display: block;
            width: 100%%;
            margin:0px;
            padding: 5px;
        }

    div.header {
        background-image: url('images/lotse-iphone.jpg');
        background-size: cover;
        left: 0px;
        right: 0px;
        top: 0px;
        position: absolute;
        z-index:4;
    }

    a.nav{
        color:white;
        text-decoration:none;
        font-size:larger;
        transition:ease-out 0.5s;
    }

    a.nav:hover {
        color: rgba(255, 239, 0, 0.80);
        transition:linear 0.5s;
    }

    .hidescreen{
        display:none;
    }
}

@media print {
    h1 {
        color:black;
        padding:0px;
        margin:0px;
        min-height:0px;
        font-size:x-small;
    }

    h2.first {
        padding: 0px;
        font-size: x-small;
    }

    h2 {
        padding: 0px;
        font-size: x-small;
    }
    
    div.header {
        position:static;
    }
    .gallerybild {
        display:inline-block;
        max-width:20%;
        float:left;
    }
        .gallerybild img{
            max-height:325px;
            max-width:100%;
        }
        .gallerybild figcaption {
            padding-top:5px;
            text-align:center;
        }

    img.druck {
        height: 325px;
    }

    h2.druck {
        /* 
        page-break-before:always;*/
    }

    p {
        font-size:xx-small;
    }
    p.copy {
        display: none;
        font-family: monospace;
        font-size: .8em;
    }
    .nav {
        display:none;
        font-family: Verdana, Helvetica, sans-serif;
        vertical-align: bottom;
        background-color: #ACE4E4;
        padding: 20px 20px 10px 20px;
    }
    a:link {
        color: black;
        text-decoration: none;
    }
    .keindruck {
        display: none;
    }

    .hidescreen{
        display:normal; 
    }

    .smallimg {
        margin:0px;
        max-height:108px;
        max-width:208px;
        display:inline-block;
        position:relative;
    }

    .smallimg img {
        max-height:inherit;
        max-width:inherit;
    }

    .smallimg figcaption{
        position:absolute;
        width:100%;
        text-align:center;
        padding-top:5px;
        background-color:rgba(255, 255, 255, 0.5);
        height:2em;
        bottom:0em;
        z-index:1;
    }

    .qrprint{
        display:block;
    }
}