*{
    box-sizing: border-box;
}
html{
    background: linear-gradient(to bottom,#eadafe, white, white) no-repeat center fixed;
    background-size: cover;
    
}
.mainFlex{
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: column;
}

.pageTitle{
    text-align: center;
    margin-top: 10px;
    margin-bottom: 2px;
}
.nav-header{
    width: 500px;
    display: flex;
    justify-content: center;
}
.mobile-nav-header{
    display: none;
}
.nav-table-element{
    text-align: center;
}
.nav-table-element-L{
    text-align: right;
}
.nav-table-element-R{
    text-align: left;
}
.nav-link{
    font-size: 18px;
    
}
a{
    color: #5b228f;
}
a:hover{
    filter: drop-shadow(0px 0px 1px #8a4fc4);
}
.Ballettschule{
    margin-bottom: 0px;
    margin-top: 0px;
    font-size: 30pt;
    color: #6600CC;
    font-family: CharlemagneSTD;
}
.Fouette{
    margin-bottom: 0px;
    margin-top: 0px;
    font-size: 70pt;
    color: #6600CC;
    font-family: Rage-ItalicSTD;
    transform: skew(-10deg, 0deg) rotateZ(-5deg);
    filter: drop-shadow(3px 3px 3px #8a4fc4);
}
.Logo-img{
    width: 150px;
    margin-top: -80px;
    transform-origin: 57% 50%;
    transform: rotateY(3600deg);
    animation: 5s ease-out 0s 1 spin;
}
@keyframes spin { 100% { transform:rotateY(360deg);}}
@font-face {
    font-family: CharlemagneSTD;
    src: url(fonts/CharlemagneStd-Bold.otf);
}
@font-face {
    font-family: Rage-ItalicSTD;
    src: url(fonts/Rage\ Italic\ Std\ Regular.otf);
}
.Important-Information{
    color: red;
    font-size: 10pt;
    text-align: center;
    font-family: Georgia, Times, serif;
    font-weight: bold;
    margin-bottom: 0px;
}
.Information{
    color: #6600CC;
    font-size: 13pt;
    text-align: center;
}
.Information-header{
    color: #6600CC;
    font-size: 16pt;
    text-align: center;
    font-weight: bold;
    margin-top: 0px;
}
.Information-header-2{
    color: #6600CC;
    font-size: 16pt;
    text-align: center;
    font-weight: bold;
    margin-top: 0px;
}
.middle-Link{
    transform: translateY(20px);
}
.Timetable-top-Row{
    height: auto;
}
.Timetable-top-Cell{
    border: solid #6600CC 3px;
    width: 200px;
    padding: 5px;
    text-align: center;
}
.Timetable-Day{
    color: #551a8b;
    font-size: 18pt;
    font-weight: bold;
    margin: 2px;
}
.Timetable-Adress{
    color: red;
    font-size: 12pt;
    margin: 2px;
}
.Timetable-Cell{
    border: solid #6600CC 3px;
    width: 200px;
    padding: 5px;
    text-align: center;
}
.Timetable-Time{
    color: #6600CC;
    font-size: 13pt;
    margin: 2px;
}
.Timetable-Class{
    color: #6600CC;
    font-size: 16pt;
    margin: 2px;
    font-weight: bold;
}
.Timetable-Information{
    color: #6600CC;
    font-size: 12pt;
    margin: 2px;
}
.Timetable-Element{
    border-bottom: #8a4fc4 3px solid;
    border-top: #8a4fc4 3px solid;
    height: 100px;
    vertical-align: middle;
}
.Timetable{
    border: #d3acfa 3px double;
}
.Rabatt-Div{
    width: 420px;
}
.Information-2{
    color: #6600CC;
    font-size: 13pt;
    text-align: center;
    font-weight: bold;
}
.Ferien-Art{
    margin-bottom: 0px;
    color: red;
    font-size: 12pt;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    text-align: right;
}
.Ferien-Zeit{
    margin-bottom: 0px;
    color: red;
    font-size: 12pt;
    text-align: center;
    text-decoration: none;
    text-align: left;
}
.Ferien-Table{
    margin-top: -30px;
}
.Anmeldeformular{
    display: flex;
    width: 400px;
    height: 275px;
    align-items: center stretch;
    justify-content: space-between;
    flex-direction: column;
}
.Form-Input{
    border: #6600CC solid 1px;
    color: #6600CC;
    resize:none
}
.Form-Input-Selection{
    width: 200px;
    border: #6600CC solid 1px;
    color: #6600CC;
}
.Form-Input-Selection::selection{
    background-color: white;
}
.Text{
    color: #6600CC;
    font-size: 13pt;
    text-align: center;
}
.AboutMe-Pic-Flex{
    display: flex;
    flex-direction: column;
}
.AboutMe-Picture{
    margin: 4px;
    filter: drop-shadow(3px 3px 3px #584a6a);
}
.AboutMe-Picture-Mobile{
    display: none;
}
.AboutMe-table{
    width: 500px;
}
.Angebot-flex{
    display: none;
}
.Angebot-header{
    color: #6600CC;
    font-size: 18pt;
    text-align: center;
    font-weight: bold;
    margin-bottom: 6px;
}
.Angebot-Pic-Flex{
    display: flex;
    justify-content: space-around;
}
.Angebot-img{
    margin: 20px;
    margin-bottom: 0px;
    width: 250px;
}
.Angebot-Info-Table{
    width: 500px;
}
.Angebot-Sufix{
    width: 600px; 
    border-top: #d3acfa double 3px; 
    margin-left: -50px;
    margin-right: -50px;
}
.Kontakt-Art{
    color: #6600CC;
    font-size: 12pt;
    font-weight: bold;
    text-decoration: none;
    text-align: right;
    margin: 0px;
    margin-top: 10px;
}
.Kontakt-Information{
    color: #6600CC;
    font-size: 12pt;
    text-decoration: none;
    text-align: left;
    margin: 0px;
    margin-top: 10px;
    margin-left: 5px;
}
.Kontakt-Table{
    margin-top: 0px;
}
.Kontakt-Flex{
    display: flex;
    flex-direction: row;
}
.Distingtion-Line{
    width: 400px;
}
.History-Grid{
    display: grid;
    grid-template-areas:
      "Pic-1    Pic-2  Pic-3 	Pic-4   main-pic   main-pic"
      "Pic-5  	Pic-6  Pic-7 	Pic-8 	main-pic   main-pic"
      "Pic-9    Pic-10 Pic-11 	Pic-12 	main-pic   main-pic"
      "Pic-13   Pic-14 Video 	Video 	main-pic   main-pic"
      "Pic-17   Pic-18 -  		-  	main-pic   main-pic";
}
.History-Pic:hover{
    filter: drop-shadow(3px 3px 3px #8a4fc4);
}
.History-Pic{
    filter: saturate(0) drop-shadow(3px 3px 3px #545156);
    width: 100px;
}
.History-Pic-1{
    grid-area: Pic-1;
    
    padding: 10px;
}
.History-Pic-2{
    grid-area: Pic-2;
    
    padding: 10px;
}
.History-Pic-3{
    grid-area: Pic-3;
    
    padding: 10px;
}
.History-Pic-4{
    grid-area: Pic-4;
    
    padding: 10px;
}
.History-Pic-5{
    grid-area: Pic-5;
    
    padding: 10px;
}
.History-Pic-6{
    grid-area: Pic-6;
    
    padding: 10px;
}
.History-Pic-7{
    grid-area: Pic-7;
    
    padding: 10px;
}
.History-Pic-8{
    grid-area: Pic-8;
    
    padding: 10px;
}
.History-Pic-9{
    grid-area: Pic-9;
    
    padding: 10px;
}
.History-Pic-10{
    grid-area: Pic-10;
    
    padding: 10px;
}
.History-Pic-11{
    grid-area: Pic-11;
    
    padding: 10px;
}
.History-Pic-12{
    grid-area: Pic-12;
    
    padding: 10px;
}
.History-Pic-13{
    grid-area: Pic-13;
    
    padding: 10px;
}
.History-Pic-14{
    grid-area: Pic-14;
    
    padding: 10px;
}
.History-Pic-15{
    grid-area: Pic-15;
    
    padding: 10px;
}
.History-Pic-16{
    grid-area: Pic-16;
    
    padding: 10px;
}
.History-Pic-17{
    grid-area: Pic-17;
    
    padding: 10px;
}
.History-Pic-18{
    grid-area: Pic-18;
    
    padding: 10px;
}
.History-Video{
    grid-area: Video;
    padding: 10px;
    width: 200px;
    filter: saturate(0) drop-shadow(3px 3px 3px #545156);
}
.History-Video:hover{
    filter: drop-shadow(3px 3px 3px #8a4fc4);
}
.History-MainPic{
    grid-area: main-pic;
    width: 478px;
    padding: 10px;
    filter: drop-shadow(3px 3px 3px #8a4fc4)
}
.footer-img{
    width: 350px;
    margin-top: 20px;
}
.anons-img{
	width: 350px;
}
@media (max-width: 768px) {
    .footer-img{
        width: 90%;
        margin-top: 20px;
    }
	.anons-img{
		width: 90%;
	}
    *{
        box-sizing: border-box;
    }
    html{
        background: linear-gradient(to bottom,#eadafe, white, white) no-repeat center fixed;
        background-size: cover;
    }
    .mainFlex{
        display: flex;
        width: 100%;
        align-items: left;
        flex-direction: column;
        margin: 0px;
    }
    
    .pageTitle{
        text-align: center;
        margin-top: 10px;
        margin-bottom: 2px;
    }
    .nav-header{
        display: none;
    }
    .nav-table-element{
        width: 40%;
        margin: 0px;
    }
    .nav-table-element-L{
        width: 10%;
        margin: 0px;
    }
    .nav-table-element-R{
        width: 10%;
        margin: 0px;
    }
    .mobile-nav-header{
        display: table;
        background-image: url(images/fon\ geschnitten.png);
        height: 60px;
        margin: -8px;
        margin-bottom: 10px;
    }
    .Menu-Button{
        padding: 0px;
        border: none;
        background-color: transparent;
    }
    .Menu-Icon{
        width: 100%;
        margin: 0px;
        background-color: transparent;
    }
    .Logo-img{
        width: 100%;
        margin: 0px;
    }
    .Title-img{
        width: 90%;
        margin-bottom: -10px;
    }
    .MainMenu-Content{
        flex-direction: column;
        justify-content: space-between;
        background-color: #2a0d45;
        border: #2a0d45 4px solid;
        border-radius: 20px;
        height: 220px;
        width: fit-content;
        z-index: 100;
        margin-bottom: -220px;
        margin-left: auto;
    }
    .nav-link{
        color: white;
        margin-left: 20px;
        font-size: 20pt;
    }
    .Ballettschule{
        margin-bottom: 0px;
        margin-top: 0px;
        font-size: 20pt;
        color: #6600CC;
        font-family: CharlemagneSTD;
        text-align: center;
    }
    .Fouette{
        margin-bottom: 0px;
        margin-top: 0px;
        font-size: 25pt;
        color: #6600CC;
        font-family: Rage-ItalicSTD;
        transform: skew(-10deg, 0deg) rotateZ(-5deg);
        filter: drop-shadow(3px 3px 3px #8a4fc4);
        text-align: center;
    }
    @keyframes spin { 100% { transform:rotateY(360deg);}}
    @font-face {
        font-family: CharlemagneSTD;
        src: url(fonts/CharlemagneStd-Bold.otf);
    }
    @font-face {
        font-family: Rage-ItalicSTD;
        src: url(fonts/Rage\ Italic\ Std\ Regular.otf);
    }
    .Important-Information{
        color: red;
        font-size: 12pt;
        text-align: center;
        font-family: Georgia, Times, serif;
        font-weight: bold;
        margin-bottom: 0px;
    }
    .Information{
        color: #6600CC;
        font-size: 15pt;
        text-align: center;
    }
    .Information-header{
        color: #6600CC;
        font-size: 18pt;
        text-align: center;
        font-weight: bold;
        margin-top: 0px;
    }
    .Timetable-top-Row{
        height: auto;
    }
    .Timetable-top-Cell{
        border: solid #6600CC 3px;
        width: 30%;
        padding: 5px;
        text-align: center;
    }
    .Timetable-Day{
        color: #551a8b;
        font-size: 15pt;
        font-weight: bold;
        margin: 2px;
        word-break: break-all;
    }
    .Timetable-Adress{
        color: red;
        font-size: 12pt;
        margin: 2px;
        hyphens: auto
    }
    .Timetable-Cell{
        border: solid #6600CC 3px;
        width: 30%;
        padding: 5px;
        text-align: center;
    }
    .Timetable-Time{
        color: #6600CC;
        font-size: 13pt;
        margin: 2px;
    }
    .Timetable-Class{
        color: #6600CC;
        font-size: 15pt;
        margin: 2px;
        font-weight: bold;
        hyphens: auto
    }
    .Timetable-Information{
        color: #6600CC;
        font-size: 12pt;
        margin: 2px;
        hyphens: auto
    }
    .Timetable-Element{
        border-bottom: #8a4fc4 3px solid;
        border-top: #8a4fc4 3px solid;
        vertical-align: middle;
        height: fit-content;
    }
    .Timetable{
        border: #d3acfa 3px double;
        width: 100%;
    }
    .Rabatt-Div{
        width: 100%;
    }
    .Information-2{
        color: #6600CC;
        font-size: 15pt;
        text-align: center;
        font-weight: bold;
        hyphens: auto
    }
    .Ferien-Art{
        margin-bottom: 0px;
        color: red;
        font-size: 14pt;
        text-align: center;
        font-weight: bold;
        text-decoration: none;
        text-align: right;
    }
    .Ferien-Zeit{
        margin-bottom: 0px;
        color: red;
        font-size: 14pt;
        text-align: center;
        text-decoration: none;
        text-align: left;
    }
    .Ferien-Table{
        margin-top: -30px;
    }
    .Anmeldeformular{
        display: flex;
        width: 100%;
        height: 500px;
        align-items: center stretch;
        justify-content: space-between;
        flex-direction: column;
    }
    .Form-Input{
        border: #6600CC solid 1px;
        color: #6600CC;
        resize:none;
        height: 15%;
        font-size: 15pt;
    }
    .Form-Input-Selection{
        width: 100%;
        border: #6600CC solid 1px;
        color: #6600CC;
        font-size: 15pt;
        height: 12%;
    }
    .Form-Input-Selection::selection{
        background-color: white;
    }
    .Text{
        color: #6600CC;
        font-size: 16pt;
        text-align: center;
        margin-left: 10px;
        margin-right: 10px;
    }
    .AboutMe-table{
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
    }
    .AboutMe-Pic-Flex{
        display: flex;
        flex-direction: column;
    }
    .AboutMe-Picture{
        margin: 4px;
        filter: drop-shadow(3px 3px 3px #584a6a);
    }
    .AboutMe-Picture-td{
        display: none;
    }
    .AboutMe-Picture-Mobile{
        display: block;
        width: 80%;
        align-self: center;
    }
    .Angebot-flex{
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    .Angebot-header{
        color: #6600CC;
        font-size: 23pt;
        text-align: center;
        font-weight: bold;
        margin-bottom: 6px;
    }
    .Angebot-Pic-Flex{
        display: flex;
        justify-content: space-around;
        flex-direction: column;
    }
    .Angebot-table{
        display: none;
    }
    .Angebot-Info-Table{
        width: 100%;
    }
    .Angebot-Sufix{
        width: 100%; 
        border-top: #d3acfa double 3px;
        margin: 0px;
    }
    .Information-header-2{
        color: #6600CC;
        font-size: 15pt;
        text-align: center;
        font-weight: bold;
        margin-top: 0px;
    }
    .Kontakt-Art{
        margin-bottom: 0px;
        color: #6600CC;
        font-size: 15pt;
        text-align: center;
        font-weight: bold;
        text-decoration: none;
        margin: 0px;
        margin-top: 10px;
    }
    .Kontakt-Information{
        margin-bottom: 0px;
        color: #6600CC;
        font-size: 15pt;
        text-align: center;
        text-decoration: none;
        margin: 0px;
    }
    .Kontakt-Table{
        margin-top: 0px;
    }
    .Kontakt-Flex{
        flex-direction: column;
    }
    .Distingtion-Line{
        width: 100%;
    }
}