* {
     text-transform: uppercase;
 }
 
 body {
     -webkit-animation-delay: 0.1s;
     -webkit-animation-name: fontfix;
     -webkit-animation-duration: 0.1s;
     -webkit-animation-iteration-count: 1;
     -webkit-animation-timing-function: linear;
     width: 100%;
     margin: 0;
 }
 
 @-webkit-keyframes fontfix {
     from {
         opacity: 1;
     }
     to {
         opacity: 1;
     }
 }
 
 img {
     width: 60%;
 }
 
 div {}
 
 h1 {
     font-size: 28px;
     width: 60%;
 }
 
 @media(min-width:550px) {}
 
 h1 {
     font-size: 22px;
     color: #0779ff;
 }
 
 .head {
     margin-top: 15px;
     height: 10%;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 .head h1 {
     color: #0779ff;
     font-size: 33px;
     text-align: center;
 }
 
 .head img {
     height: auto;
     width: 60%;
     padding-top: 5px;
     padding-bottom: 15px;
 }
 
 .head2 {
     position: absolute;
     height: 30%;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 .head2 h1 {
     color: #0779ff;
     font-size: 33px;
     text-align: center;
 }
 
 .head2 img {
     height: 35%;
     width: auto;
     margin-left: auto;
     margin-right: auto;
     padding-top: 5px;
     padding-bottom: 15px;
     opacity: 1.0;
     /* For IE8 and earlier */
 }
 
 #Menu {
     margin-top: 55px;
 }
 
 #Menu div img {
     display: block;
     margin: 0 auto;
     border-radius: 100%;
     width: 100%;
     transition: all 0.3s;
 }
 
 #Menu div img:hover {
     -ms-transform: scale(1.08);
     /* IE 9 */
     -webkit-transform: scale(1.08);
     /* Safari */
     transform: scale(1.08);
 }
 
 #Menu div h4 {
     color: black;
     font-size: 1.2em;
     text-align: center;
     margin-top: 10px;
     letter-spacing: normal;
     font-family: "Inconsolata";
 }
 
 #MenuTitel {
     background-color: #141413;
     ;
 }
 
 #MenuTitel h2 {
     color: #ffd200;
     padding-top: 10px;
     padding-left: 30px;
     border-bottom: 1px solid white;
     font-size: 1.8em;
 }
 
 #intro {
     padding: 50px 0;
 }
 
 .wrapper {
     width: 100%;
     height: 100%;
 }
 
 .left {
     background-color: #ED87B6;
     width: 50%;
     height: 100%;
 }
 
 .introT {
     margin: 5px;
     font-size: 1em;
     text-transform: none;
     font-family: "Inconsolata";
     padding-left: 15px;
 }
 
 #intro h2 {
     text-align: center;
     color: #EA5384;
     padding-top: 1px;
     font-size: 1.8em;
 }
 
 #footer {
     background-color: #252525;
     color: white;
     text-transform: none;
 }
 
 #footer .contact {
     margin-right: 20px;
     text-transform: none;
 }
 
 #box {
     width: 1050px;
     max-width: none;
     margin-top: 70px;
     position: relative;
     background-color: #000000;
     overflow: hidden;
     height: auto;
     z-index: 0;
     margin-bottom: 30px;
 }
 
 #box>div {
     float: left;
     display: inline-block;
     width: 50%;
     height: 262.5px;
     transition: all 0.3s;
 }
 
 #box>div.opacity {
     opacity: 0.3;
 }
 
 #box>div>div {
     width: 50%;
     height: 100%;
     display: block;
     float: left;
 }
 
 #box>div>div img {
     width: 100%;
 }
 
 h3 {
     margin: 7px;
     padding: 3px;
     padding-top: 0;
     color: #272727;
     background-color: #ffd200;
     margin-top: 40px;
     font-size: 1.4em;
     width: inherit;
 }
 
 .boxText {
     padding: 10px;
     color: white;
     font-size: 0.9em;
     text-transform: lowercase;
     font-family: "Inconsolata";
 }
 
 @media (max-width: 1060px) and (min-width:600px) {
     #box {
         width: 590px;
     }
     #box>div {
         width: 100%;
         height: 295px;
     }
 }
 
 @media (max-width:600px) and (min-width: 450px) {
     #box {
         width: 440px;
         padding: 0;
     }
     #box>div {
         width: 100%;
         height: 220px;
     }
     h3 {
         margin-top: 6px;
     }
     .boxText {
         font-size: 11px;
     }
 }
 
 @media (max-width:450px) {
     #box {
         width: 320px;
         padding: 0;
     }
     #box>div {
         width: 100%;
         height: 160px;
     }
     h3 {
         margin-top: 5px;
         font-size: 1.2em;
     }
     .boxText {
         font-size: 9px;
     }
 }
 
 @media (max-width: 1060px) {
     #box>div:nth-of-type(4n)>div:nth-of-type(1),
     #box>div:nth-of-type(4n+1)>div:nth-of-type(1),
     #box>div:nth-of-type(4n+2)>div:nth-of-type(2),
     #box>div:nth-of-type(4n+3)>div:nth-of-type(2) {
         float: left;
     }
     #box>div:nth-of-type(4n)>div:nth-of-type(2),
     #box>div:nth-of-type(4n+1)>div:nth-of-type(2),
     #box>div:nth-of-type(4n+3)>div:nth-of-type(1),
     #box>div:nth-of-type(4n+2)>div:nth-of-type(1) {
         float: right;
     }
 }
 
 .top {
     margin-top: 10px;
 }
 
 button.accordion {
     display: block;
     color: #ffd200;
     cursor: pointer;
     padding: 1px;
     width: 45%;
     text-align: center;
     transition: 0.4s;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 17;
     margin-top: 17;
     min-width: 100px;
 }
 /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
 
 button.accordion.active,
 button.accordion:hover {
     color: #ffd200;
     border: solid 0.75px #ffd200;
     margin-bottom: 30px;
 }
 /* Style the accordion panel. Note: hidden by default */
 
 div.panel {
     display: none;
 }