html
{
    font-size:14px;
}
body
{
    font-family: 'Segoe UI', sans-serif;
    background-color:gray;
}

.maincontent
{
    text-align:center;
}

#banner
{
    display:block;
    max-width:100%;
    width:816px;
    margin-left:auto;
    margin-right:auto;
    border-radius:6px;
}

.section
{
    padding-top:50px;
    max-width: 1000px;    
}

.bluecontent
{
    color:white;
    background-color: blue;    
}

.whitecontent
{
    color:white;
}
.smallmenu
{
   padding-left: 50px;
   padding-top: 3px;
   padding-bottom: 3px; 
   display: block;
   text-align: left;
   font-size: 20px;
}
ul
{
   -webkit-padding-start:0px;
   -webkit-margin-before:0px;
   -webkit-margin-after:0px;
   color:blue;
}

li
{
    display:inline-block;
    padding-left:10px;
    padding-right:10px;
}

a
{
    text-decoration:none;
}

.menu_linie
{
    width:50px;
    height:50px;
    font-size:20px;
    font-weight:bold;
    background-color:green;
    cursor:pointer;
    padding:5px;
    margin:0px;
    text-align:center;
    border:0px;
    border-radius:6px;
}

#linien
{
    max-width:100%;
    width:816px;
    margin-left:auto;
    margin-right:auto;
    background-color:gray;
    padding:5px;
}

#ALLE
{
    color:black;
    background-color:gray;
    border-color:black;
    border-style:solid;
    border-width:1px;
}

#U1
{
    color:white;
                      /*background-color:#7DAD4C;*/
    background-color:green;
}

#U2,#U12
{
    color:white;
    background-color:#DA421E;
}

#U3
{
    color:white;
    background-color:#007A5B;
}

#U4
{
    color:black;
    background-color:#F0D722;
}

#U5,#U55
{
    color:white;
    background-color:#7E5330;
}

#U6
{
    color:white;
    background-color:#8C6DAB;
}

#U7
{
    color:white;
    background-color:#528DBA;
}

#U8
{
    color:white;
    background-color:#224F86;
}

#U9
{
    color:white;
    background-color:#F3791D;
}

img.U1,img.U12,img.U2,img.U3,img.U4,img.U5,img.U55,img.U6,img.U7,img.U8,img.U9
{
    max-width:100%;
    width:200px;
    
    margin:0px;
    padding:0px;
    border:none;
    border-width:0px;
    border-style:solid;
    border-width:3px;
}

img.U1 {border-color:green;}
img.U12{border-color:#DA421E;}
img.U2 {border-color:#DA421E;}
img.U3 {border-color:#007A5B;}
img.U4 {border-color:#F0D722;}
img.U5 {border-color:#7E5330;}
img.U55{border-color:#7E5330;}
img.U6 {border-color:#8C6DAB;}
img.U7 {border-color:#528DBA;}
img.U8 {border-color:#224F86;}
img.U9 {border-color:#F3791D;}

#burger
{
    display: inline-block;
    cursor: pointer;
}
.bar1, .bar2, .bar3 
{
    width: 20px;
    height: 3px;
    margin: 4px 0;
    transition: 0.4s;
    background-color: white;
}
.change .bar1
{
    opacity: 0;
}
.change .bar2
{
    transform: rotate(-45deg)
}
.change .bar3
{
    -webkit-transform: rotate(45deg) translate(-5px, -5px) ;
    transform: rotate(45deg) translate(-5px, -5px) ;
}