/* Main */

html, body {
    padding:0;
    margin:0;
    height:100%;
    font-family: var(--main-font-familiy);
    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 */
}


.movingbox {
    position: absolute;
    padding: 10px; 
    border-radius: 3px;
    z-index:4;
}

.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;
}

/* 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%;}

.hi5{height:5vh;}
.hi10 {height: 10vh;}
.hi20 {height: 20vh;}
.hi30 {height: 30vh;}
.hi40 {height: 40vh;}
.hi50 {height: 50vh;}
.hi60 {height: 60vh;}
.hi80 {height: 80vh;}
.hi100 {height:100vh;}

.PC {
    display:block;
}
.tablet {
    display:none;
}
.handy {
    display:none;
}

/*Styling of Elements*/

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

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

/*site classes */
.title {
    position: absolute;
    top:40%;
    font-size: 3.4vw;
    line-height: normal;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
}

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

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

}

.footer {
    position: absolute;
    bottom:0%;
    padding:2%;
    text-align: center;
}
.footer-relativ {
    padding:2%;
    text-align: center;
}


@media screen and (max-width :1028px) {
    
    .PC {
        display:none;
    }
    .tablet {
        display:block;
    }
    .handy {
        display:none;
    }

    .title {  
        font-size: 6vw;
    }

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

@media screen and (max-width :720px) {
    .PC {
        display:none;
    }
    .tablet {
        display:none;
    }
    .handy {
        display:block;
    }
    
    .title {  
        font-size: 7vw;
    }

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