/* CSS für dariolehner.com */
 html {
    overflow-y: scroll;
}
 body{
    background:#000000;
    margin:0px auto;
    font-family: 'dosisregular';
    color:#ffffff;
    font-size:1.4em;
    margin-top:5px
}
 @font-face {
     font-family: 'dosisregular';
     src: url('dosis-regular.woff2') format('woff2'), url('dosis-regular.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
/* Text & Links */
 h1{
    font-size:1em;
    margin-top:0px;
    margin-bottom:0px
}
 a {
     text-decoration: none;
     color: #818181;
     display: block;
     transition: 0.3s;
}
 a:hover {
     color: #f1f1f1;
}
 a.cap {
     text-decoration: none;
     font-size:1.1em;
     color: #818181;
     display: block;
     transition: 0.3s;
     padding-top: 79%;
}
 a.cap:hover {
     color: #f1f1f1;
}
/* Seitennavigation */
 .nav_in{
    display:none
}
 .sidenav {
     height: 100%;
     width: 0;
     position: fixed;
     z-index: 1;
     top: 0;
     left: 0;
     background-color: #ccc;
     overflow-x: hidden;
     transition: 0.5s;
     padding-top: 65px;
}
 .sidenav a {
     padding: 0px 28px 0px 0px;
     text-decoration: none;
     text-align:right;
     color: #818181;
     display: block;
     transition: 0.3s;
}
 .sidenav a:hover {
     color: #f1f1f1;
}
 .sidenav .closebtn {
     position: absolute;
     top: 0;
     right: 0px;
     font-size: 2em;
     margin-left: 18px;
}
 .jsclass body .randomcontent{
    /*Do NOT remove! CSS to hide random contents in JS enabled browsers*/
     display: none;
}
 #page {
     color: #333;
     position: absolute;
     width:1065px;
     height: 600px;
     top: 50%;
     left: 50%;
     margin-top: -300px;
     margin-left: -532px;
     z-index:0
}
 .bild{
    width:33.3333333%;
    float:left;
}
 .person{
    height:auto;
    background:#000;
    float:left;
     width:140px;
    text-align:right;
    padding-right:20px;
    color:#fff;
    position:fixed;
}
 .gallery{
    max-height:595px;
    float:left;
    max-width:910px;
     margin-left:170px;
    font-size:0.7em;
    color:#fff;
    padding-top:3px;
}
 .gallery1{
    height:595px;
    float:left;
    max-width:910px;
     margin-left:170px;
    font-size:0.7em;
    color:#fff;
    overflow:auto;
    text-align:justify;
    padding-left:5px;
    padding-right:15px;
    scrollbar-color: #333333 #000000;
     scrollbar-width: thin;
    padding-top:3px;
}
 img {
     max-width:100%;
     height:auto;
     vertical-align: bottom;
     margin-bottom: 2px;
}
 .pic{
    padding:4px 4px 0px 4px
}
 .bd{
    border:solid 1px #fff
}
 .imageHolder {
     position: relative;
     max-width: 420px;
     max-height: 420px;
     z-index:1
}
 .imageHolder .caption {
     position: absolute;
     width: 100%;
     height: auto;
     top:0%;
     left: 0px;
     text-align:center;
     font-weight:bold;
     opacity:1;
}
/* Responsive */
 @media screen and (max-width: 1062px) {
     .nav_in{
        display:block;
        position:fixed;
        z-index:1;
        top:0;
        left:0;
        background:#000000;
        width:100%;
        height:auto
    }
     .in{
        width:100%
    }
     .nav_sign{
        float:left;
        width:40px;
        padding-bottom:0px;
        cursor:pointer;
    }
     .nav_name{
        float:left;
        width:auto;
    }
     #page{
        width:100%;
        text-align:center;
         margin:0px auto;
         top: 57px;
         left: 0px;
         height:auto;
    }
     .person{
        display:none
    }
     .gallery{
        height:auto;
         margin:0px auto;
         max-width:100%;
         text-align:justify;
         padding:10px
    }
     .gallery1{
        height:auto;
         margin:0px auto;
         max-width:100%;
         text-align:justify;
         padding:13px
    }
     a.cap {
         font-size:2vw;
    }
     .bild{
        width:33.333333333333%;
    }
}
 @media screen and (max-width: 640px) {
     a.cap {
         padding-top: 78%;
    }
}
 .pic{
    padding:4px 4px 4px 4px
}
 @media screen and (max-width: 600px) {
     .bild{
        width:50%;
    }
a.cap {
         font-size:2.6vw;
    }
}
 @media screen and (max-width: 420px) {
     .bild{
        width:100%;
    }
     .nav_name{
        font-size:1.1em;
        padding-top:2px
    }
     a.cap {
         font-size:5vw;
    }
     #page{
        top: 60px;
    }
}
 @media screen and (max-width: 414px) {
     a.cap {
         font-size:5vw;
    }
}
 @media screen and (max-width: 375px) {
     .nav_name{
        font-size:1em;
    }
     a.cap {
         font-size:5vw;
    }
}
 @media screen and (max-width: 360px) {
     .nav_name{
        font-size:1em;
    }
     a.cap {
         font-size:5vw;
    }
     .gallery1{
        text-align:left;
    }
}
 @media screen and (max-width: 320px) {
     .nav_name{
        font-size:1em;
        padding-top:4px
    }
     .nav_sign{
    }
     a.cap {
         font-size:4.5vw;
    }
}