/* Main */

html, body {
    padding:0;
    margin:0;
    height:100%;
    font-family: 'Lato';
    color: var(--main-font-color);
    z-index: 1;
}
    
body {
    top:0;
    left:0;
    height:100%;
    width:100%;
    -moz-hyphens:auto;
    -o-hyphens:auto;
    -webkit-hyphens:auto;
    -ms-hyphens:auto;
    hyphens:auto;
    background-color: var(--main-bg-fill-color);
}
    
.grid {
    float:left;
    padding:0px;
    min-height:0;
}
    
*, *:before, *:after {
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}
    
.clearfix::before,.clearfix::after {
    content:" ";
    display:table;
}
    
.clearfix::after {
    clear:both;
}
    
.clearfix {
    *zoom:1; /* Für den IE6 und IE7 */
}

.container {
    position: relative;
}
    
    
::selection {
    background:var(--main-highlight-color);
}

::-moz-selection {
    background:var(--main-highlight-color);
}    
    
.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
    
.responsive-video {
    position: relative;
    width:100%;
    padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
    padding-top: 0px;
    height: 0;
}
    
.sponsorenevents{
    width:75px;
    height:auto;
    margin:2.5%;
    float:left;
    text-align:center;
    vertical-align:middle;
    line-height:0;
}

a:link {text-decoration:none; color:var(--link-bg-color);}
a:focus { color:var(--link-focus-color); }
a:visited { color:var(--link-bg-color); }
a:hover { color:var(--link-hover-color); }
a:active { color:var(--link-active-color); }

a.invert:link {text-decoration:none; color:var(--link-bg-color);}
a.invert:focus { color:var(--link-focus-color); }
a.invert:visited { color:var(--link-bg-color); }
a.invert:hover { color:var(--link-hover-color); }
a.invert:active { color:var(--link-active-color); }

/* Main Div Sizes */
.w10 {width:10%;}
.w15 {width:15%;}
.w20 {width:20%;}
.w25 {width:25%;}
.w30 {width:30%;}
.w50 {width:50%;}
.w60 {width:60%;}
.w70 {width:70%;}
.w100 {width:100%;}

.hi10 {height: 10%;}
.hi20 {height: 20%;}
.hi30 {height: 30%;}
.hi40 {height: 40%;}
.hi50 {height: 50%;}
.hi60 {height: 60%;}
.hi80 {height: 80%;}

div#imageMain {
    display: table-cell;
    background-image: url("https://klaviermitdir.de/Bilder/main_1024_trans_v3.png");
    background-repeat: no-repeat;
    min-height:65.25vw;
    background-size: 100%;
    background-position: bottom;
}

p {
    font-size: var(--main-font-size);
    line-height: 1.8em;
}

/* Lists */
ul.standard {
    font-size: var(--main-font-size);
    line-height: 1.8em;
}


.header{
    padding-top: 5%;
    height: auto;
    z-index: 2;
    background-color: var(--main-bg-fill-color);
}

.headermenu {
    display:none;
    float:left;
    min-width: 50px;
    width:50px;
    min-height: 50px;
    position: relative;
    left:0px;
    right:0px;
    background-image: url("https://klaviermitdir.de/Bilder/Menu_50_50.png");
    background-repeat: no-repeat;
    background-size: auto;
}

.headerhandytext {
    display: none;
    float:left;
    text-align: center;
    font-size: 1.8em;
    padding-left:5%;
    padding-top: 5%;
}

.headermenuhandy{
    position: absolute;
    padding:2% 2% 2% 5%;
    left:-110vw;
    width:100%;
    min-width:400px;
    border: 1px solid var(--main-bg-color);
    background-color: var(--main-bg-fill-color);
    z-index: 9;
}

.headermenuhandybox{
    position: relative;
    width:100%;
    display: table-cell;
    padding:2%;
    font-size: 1.5em;
    text-align: left;
}

.headbox{
    display: table-cell;
    padding:2%;
    font-size: 1.5em;
    text-align: center;
    height: 100%;
    vertical-align: auto;
}

.headbox:hover{
    background-color: #b64545;
}

.footer{
    background-color: var(--main-warm-color);
    padding: 0% 2% 5% 2%;
    z-index: 2;
}


.footerbox{
    display: table-cell;
    padding:5%;
    font-size: 1.5em;
    text-align: center;
    vertical-align: middle;
}

/*.footerbox:hover{
    background-color: var( --main-div-hover-color);
    color: var(--main-bg-color);
}*/

.form {
    text-align: center;
    background-color: var(--main-warm-color);
    padding-top:50px;
    padding-bottom:50px;
}

.left-banner {
    display:block;
    width:20%;
    text-align: center;
}

.middle-banner {
    width: 70%;
    padding:0% 0% 5% 5%;
    text-align: justify;
    hyphens: auto;

}


/* Map */
#mapbox{
    display: none;
}

.maintitle {
    padding-left:20%; 
    color:#EA5F4B;
}

.Kalenderabsatz {
    padding-left:2%; 
    padding-right:120px;
}

.mapbox {
    position:absolute;
    z-index:2;
}

.glassbox {
    position:absolute;
    background-color:#000000;
    opacity:0.01;
    z-index:9;
}

.height {
    height:50vw;
    min-height: 50vw;
}

/* Scrolling wrappers */
.fixedimg_first {
    position: fixed;
    background-image: url('https://klaviermitdir.de/Bilder/Erste_Stunde_1.jpg');
    background-repeat: no-repeat;
    background-size:contain;
    min-height: 40vw;
    width:46%;
    top:30%;
    left:22%;
    z-index: -1;
}

.fixedimg_me {
    position: absolute;
    background-image: url('https://klaviermitdir.de/Bilder/Ji_Young_Kang_457.jpg');
    background-repeat: no-repeat;
    background-size:contain;
    min-height: 40vw;
    width:28%;
    max-width:457px;
    top:50%;
    left:72%;
    opacity: 0.82;
    z-index: 3;
    padding-top:0%;
    padding-bottom: 0%;
}

.main-content {
    background-color: var(--main-bg-fill-color);
    padding:2%;
}

.main-glass {
    min-height: 50vw;
    width:100%;
}   


@media screen and (max-width :1028px) {
    
    .noPC {
        display:none;
    }
    
    .headbox {
        font-size: 1.2em;
    }

    .w15,.w20,.w25{
        width: 15%;
    }
    .w50,.w60{
        width:70%;
    }
    
    .fixedimg_me {
        position: relative;
        float:left;
        left:10%;
        min-height: 80vw;
        width:80%;
        padding-top:5%;
        padding-bottom: 5%;
    }

    .left-banner{
        display: block;
        width:20%;
    }
    .middle-banner{
        padding:0% 5% 5% 5%;
        width: 80%;
    }
}

@media screen and (max-width :720px) {
    .w15,.w20,.w25 {
        width:5%;
    }
    
    .w50,.w60,.w70 {
        width: 80%;
    }
    
    .footerelement{
        width: 100%;
    }

    .header{
        padding: 5%;
        height: auto;
    }
    
    .headermenu{
        display:block;
    }
    
    .headerhandytext {
        display: block;
    }

    .headbox{
        display: none;
    }
    
    .Handy {
        display:none;
    }

    .fixedimg {
        min-height: 40vw;
        width:88%;
        top:30%;
        left:6%;
    }

    .main-content {
        background-color: var(--main-bg-fill-color);
        padding-bottom:10%;
        margin-bottom:-8%;
    }

    .height {
        height:80vw;
        min-height: 80vw;
    }

    .fixedimg_me {
        left:12.5%;
    }

    .left-banner{
        display: none;
    }
    .middle-banner{
        width: 100%;
    }
}