@font-face {
    font-family: 'axaxax'; 
    src: url('fonts/axaxax-bd.ttf') format('truetype');
    }

html{
    width:100vw;
    height:100vh;
    overflow: scroll;
}

body {
    margin: 0;
    padding: 0;
    height:100vh;
    background-image: url("pix/background-hd-3.png"); 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment:fixed;
    font-family: axaxax, arial, sans-serif; 
    /*text-shadow: 0px 2px 3px #555;*/
  }

.header{
    max-width: 100%;
    height: 6vh;
    letter-spacing: 2px;
    color: #cccccc;    
    padding: 0.5em 1em 1em 1em;
    display:flex;
}
#header-left{
    display:flex;
    float: left;
    text-align:right;
    height: 100%;
    width:30%;
    padding-left: 2vw;
}
/*
#header-right{
    float: right;
    max-height: 100%;
    width:70%;
    text-align: left;
    margin:auto;
}
#header-right > p{
    font-size: 1.2vh;
    text-align:right; 
    margin:auto;
}
*/
#header-right{
    float: right;
    width:100%;
    vertical-align:middle; 
    text-align:right;
    margin-right:2vw;
}
#psl-logo{
    width:auto;
    max-height: 20vh;
    opacity: 1; 
}
#psl-logo:hover {
    transition: 0.70s;
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

#logo{
    color: #cccccc;
    position: relative; 
    width: 100% ;
    border-top:    2px solid #f00;
    border-bottom: 2px solid #f00;
    text-align: center;
    background-color: black;
    font-size: 2.5vh ;
    letter-spacing: 1.2vw;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    vertical-align: middle;
    block-size: fit-content;
    text-shadow: 0px 2px 3px #555;
    z-index:-1;
}

#toppic{
    display:flex;
    
    width:100%;
    height:5vh ;
    margin:auto;
    margin-top:1vh;
    margin-bottom: 2vh;

}
#toppic > h2{
    margin:auto;
    font-size: 2.0vh;
    color: #cc6600;
}
.parent {
    position: relative;
    height: 450px;
    width: 85%;
    margin: 6% auto; 
    margin-top:4vh;
    margin-bottom: 2%;
    background: #070707;
    border: 1px solid #f00;
    object-fit: cover;

}
.child{
    position: absolute;
    top:-5%;
    bottom:-5%;
    margin-left:5%;
    margin-right:5%;
    width: 90%;
    border: 1px solid #555;
    background-color: rgba(0,0,0,0.6);
    color: #cccccc;

    padding-top: 2vh;
    padding-bottom: 2vh;
    font-size: 2.5vh;
    text-align: center;

    line-height: 3.5vh;
    font-family: Open Sans; 
    font-style: bold; 
    font-variant: small-caps; 

}
.child > h2{
    font-size: 3.5vh;
    font-family: Open Sans; 
    font-style: bold; 
    font-variant: small-caps; 
}
.child > h4 {
    font-size: 2.8vh;
    font-family: Open Sans; 
    /*font-style: bolder;*/ 
    font-variant: small-caps; 
}
#impress-div{
       overflow:scroll;
       color:#cccccc;
       font-size: smaller;
       text-align: center; 
       overflow-y: scroll;
       overflow-x: hidden;

}
#impress-div a{
    color: #cc6600;
}
#impress-div p{
    text-align: center;
    font-size: 2vh;
}
#mail-done-cont{
    overflow: hidden;
}
#psl-logo-mail{
    margin-bottom: 54vh;
    width: 14vw;
    height:auto;

}
.cont-div{
    height: 100%;  

    left: 1%; 
    right: 1%; 
    font-size: 3vh;
    line-height: 3.3vh;
    text-align: center;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: Open Sans; 
    font-variant: small-caps;
}
#contact-form{

    width: auto; height:auto; 
    display:block;
    
}
#kontakt-cont{
    font-size: 1.8vh;
}
#radio0_1{

    margin-left:5vw;
}
#k-table {

    color:whitesmoke;
    border-spacing: 3vh;
    margin:auto;
}
#k-table tr{
   line-height: 6vh;
   font-size: 2.2vh;

}
#k-table a{
color: #cc6600;

}
.contactTextarea{

    resize: none;
    width:40vw;
    height:10vh;
    font-size: 1.8vh;

}
.contactSubjectTd{

    text-align: right;
    padding-left: 5vw;
    width:10vw;

}
.contactInputTd{

    text-align: left;
}
.contactField{

    height: 5vh;
    width: 40vw;
    font-size: 2.0vh;
    padding-right:2vw;
}
.contact-txt{

    font-size: 1.5vh;
}
#einwilligung-id{

    vertical-align: text-top;
}
#captcha_code-pix{
    width: auto;
    height: 9vh;
    opacity: 0.8;
}
#submit-btn{
 
    padding-bottom: 2vh;
    height:3.5vh;
    background-color: rgb(8, 8, 8);
    text-align: center;
    text-decoration: none;
    font-size: 2.0vh;
    font-weight: small;

}
#mail-p{

    font-size:2.8vh;
    font-style: bolder; 
    font-variant: small-caps;
}
img{
    width: 100%;
    max-height: 100%;
    height: 500px;
    object-fit: cover;
    opacity: 0.7;
}

h1, h2, h3, h4{
    opacity: 1.0;
    text-align: center;
}
#mainbox{
    font-size: 2.5vh;
    height: auto;
    cursor: pointer;
    transition: all .2s;
    margin:auto;
    margin-left:2%;
    text-align: left;
}
#mainbox:hover{
    color: white;
    transform: scale(1.2);
  }
.sidemenu{
    position: fixed;
    top:20%;
    left:0%;
    bottom:20%;
    width: 0%;
    background-color: rgba(0,0,0,0.7);
    z-index: 1;
    padding-top: 3vh;
    overflow-x: hidden;
    transition: all .5s;
    border-radius:20px;
   }
   .sidemenu a{
    padding: 8px 8px 8px 6px;
    text-decoration: none;
    margin-top: 50px;
    padding-left: 50px;
    text-align: left;
    font-size: 24px;
    color: #999;
    display: block;
   }
   .sidemenu a:hover{
     color: white;
     transform: scale(1.2);
   }
 #psl-logo-menu{

    width: auto;
    height: 15vh;
    padding-left: 100px;
    opacity: 0.7;
    align-items: center;
}

textarea, input{

    background-color: rgba(0,0,0,0.2);
    color: whitesmoke;

   }

#toppic-name{

    color:#cccccc;
    text-align: center;
    font-size: 1.5vh;

}
#slogan{
    height:5vh;
    margin-top:5vh;
}
#slogan > h2 {

    color:#cc6600;
    text-align: center;
    font-size: 2vh;

}
footer{

    position: relative; 
    max-height:12vh;
    width: 100vw ;
    border-top:2px solid #f00;
    display:flex;
  }
.footer-child{ 
    width: 28vw;
    height: 80%;
    margin-top: 2vh;
    margin-left:2vw;
    margin-right:2vw;
    letter-spacing: 2px;
}
 .footer-child a{
    color:#cccccc;
    text-decoration: underline;
    font-size: 1.8vh;
}
 .footer-child a:hover{
    color: white;
    transform: scale(1.5);
    -webkit-transform:scale(1.5);
 }

 #footer-left{
     text-align: left;
     display:block;
     padding-left: 2vw;
     padding-bottom: 3vh;
 }

 .footer-child p{
     font-size: 1.8vh;
     letter-spacing: 1.5px;
     padding: 0;
     padding-top:0.5%;
     line-height: 1.8vh;
     color:#cccccc;
 }
 .footer-child img{
        width:17%;
        height:auto;
        padding-top:1%;
        padding-inline: 1%;
}
 .footer-child img:hover{
    transform: scale(1.2);
    -webkit-transform:scale(1.2);

}

#footer-middle{
     text-align: center;
     min-width: 40%;
 }
#footer-right{
     text-align: right;
     padding-right: 2vw;
 }

@media only screen and (max-width: 768px) {
    body {
      font-size: 0.4vh;
      display:inline-block;
      height:95vh;
      overflow:scroll;

    }
    #header-right{
        float: right;
        width:100%;
        vertical-align:middle; 
        text-align:right;
        margin-right:2vw;
    }
    #psl-logo{
        width:auto;
        max-height: 7vh;
        opacity: 1; 
    }
   
    .sidemenu{
        position: fixed;
        top:10%;
        left:0%;
        bottom:20%;
        width: 0%;
        background-color: rgba(0,0,0,0.7);
        z-index: 1;
        overflow-x: hidden;
        transition: all .5s;
        border-radius:20px;
        vertical-align: middle;
       }
    .child{
        font-size: 1.8vh;
    }
    .cont-div{
        height: 100%; 
        padding-left:2vw;
        padding-right: 2vw;
        font-size: 2vh;
        text-align: center;
        overflow: scroll;
        overflow-x: hidden;
        font-family: Open Sans; 
        font-variant: small-caps; 
    }
    #contact-form{

            display:block;

    }
    #kontakt-cont{

        width:100%;
    }
    #impress-div{

      font-size:1.2vh;  
    }
    #kontakt-cont{

        width:90%;
        margin:auto;
        display: block;
    }
    #radio0_1{
    
        margin-left:3vw;
    }
    #k-table {
        width:100%;
        color:whitesmoke;
        border-spacing: 2.5vh;
        margin:auto;
        width: 2vw;
    }
    #k-table tr{
       line-height: 4vh;
       font-size: 1.8vh;
     
    }
    #k-table a{
    color: #cc6600;
    
    }
    .contactTextarea{
    
        resize: none;
        width:30vw;
        height:10vh;
        font-size: 1.8vh;
    
    }
    .contactSubjectTd{
        width:auto;
        text-align: left;
        padding-left:0.5vw;
    }
    .contactInputTd{
        width:50%;
        text-align: left;
    }
    .contactField{
    
        height: 3vh;
        width: 30vw;
        font-size: 2.0vh;
    }
    .contact-txt{
    
        font-size: 1.5vh;
    }
    #einwilligung-id{
    
        vertical-align: text-top;
    }
    #captcha_code-pix{
        width: auto;
        height: 7vh;
        opacity: 0.5;
    }
    #submit-btn{
        padding: 1.5vh;
        height: 5vh;
        width: 30vw;;
        text-align: center;
        text-decoration: none;
        font-size: 2vh;
        font-weight: small;
    
    }
    footer {
        flex-direction: column;
        column-width: 100vw;
        text-align: center;
      }
      .footer-child{ 
        height: 10vh;
        width: 90vw;
        margin-top: 2vh;
        letter-spacing: 1.5vw;
        padding-top:2vh;
    }
    .footer-child img{
        /*width:10vw;*/
        width:8%;
        height:auto;
        padding-top:1%;
        padding-inline: 5%;
    }
    #footer-left{
        text-align: center;
        margin:auto;
    }
    #footer-middle{
        text-align: center;
        margin:auto;
    }
    #footer-right{
        text-align: center;
        margin:auto;
        padding-right: 0;
    }
  }