/*Bilder angeben im img mit tats�chlicher Weite (anpassen!!) und dann im Darstellungs-Tag mit width: 100% height: auto*/


#body{
          font-family: Arial, sans-cerif;
          background-color: #333;
          /*max-width: 1200px;*/
          margin: 0 auto;
         }


#header {
          min-height:100px;
          border-style: none;
          border-width: 2px;
          border-color: red;
          text-align: center;
          line-height: 10px;
          background-color:#408080;
          width: 100%
          height: auto;
          max-height: 200px;
           }

 #footer  {
         width: 100%
         height: auto;
         background-color: #505050;
         color: white;
         text-align: center;
         background-image: linear-gradient(to top, #505050 0%, white 80%)

         }


 /* The animation code */
 @keyframes example1 {
     

     /* rot verlauf */
     1%   {background-color:#FF5F00;}
     10%  {background-color:#FFDF00;}
     20%  {background-color:#C0FF00;}
     30%  {background-color:#40FF00;}
     40%  {background-color:#00FFBF;}

     50%   {background-color:#00E0FF;}
     60%  {background-color:#0060FF;}
     70%  {background-color:#9F00FF;}
     80%  {background-color:#FF00FF;}
     90%  {background-color:#FF00C0;}
     100% {background-color:#FF0040;}

     }

/* The element to apply the animation to */
 div.ani {

    height: 5px;
    background-color: red;
    animation-name: example1;
    animation-duration: 10s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
}


 /* ---------------------------- Navigation -------------------------*/

a.navi, a.navi_first, a.navi_self {
          display:block;
          white-space:nowrap;
          overflow:hidden;
          border:outset;
          border-left:1px solid black;
          border-right:1px solid black;
          border-bottom:1px solid black;
          font-family:Tahoma,sans-serif;
          font-size:14px;
          font-weight:bold;
          text-decoration:none;
          letter-spacing:0.1em;
          padding:3px;
          text-align:center;
          line-height: 40px;
          }
a.navi_first {
         border-top:1px solid black;
}
a.navi:link, a.navi_first:link,
a.navi:visited, a.navi_first:visited {
         background-color:#f0f3f5;
         color:black;
}
a.navi_self:link, a.navi_self:visited {
         background-color:gray;
         color:white;
}
a.navi:hover, a.navi_first:hover, a.navi_self:hover,
a.navi:active, a.navi_first:active, a.navi_self:active {
            background-color:#EBCE94;
            color:black;
}

#navigation {
        /*position:absolute;*/
        margin-top:40px;
        margin-left:30px;
        margin-right:30px;
        min-width:150px;
}


/*---------------*Gesamt - Aufbau ----------------  */

#container {
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
         display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
         display: -ms-flexbox;      /* TWEENER - IE 10 */
         display: -webkit-flex;     /* NEW - Chrome */   /* Safari */
         display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */


          -webkit-flex-direction: column; /* Safari 6.1+ */
           flex-direction: column;
          background-color: white;

 }

#main {
       /*item 1*/

        -webkit-box-ordinal-group: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-ordinal-group: 1;      /* OLD - Firefox 19- */
        -ms-flex-order: 1;              /* TWEENER - IE 10 */
        -webkit-order: 1;               /* NEW - Chrome */
         order: 1;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
                               
        min-height: 600px;
        background-color: white;
        font-size: 12px;
        background-image: linear-gradient(to top, white 0%, #408080 95%);
        text-align:center;

}
#sidebar_l {
         /*item 2*/

        -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
        -ms-flex-order: 2;              /* TWEENER - IE 10 */
        -webkit-order: 2;               /* NEW - Chrome */
        order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
        /*------------ flex ----------*/
        -webkit-box-flex: 2;      /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: 2;         /* OLD - Firefox 19- */
        -webkit-flex: 2;          /* Chrome */
        -ms-flex: 2;              /* IE 10 */
         flex: 2;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
         background:#F4EEDF;
         background-image: linear-gradient(to top, white 0%, #408080 100%)
}
#sidebar_r {
         /*item 3*/
        -webkit-box-ordinal-group: 3;   /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-ordinal-group: 3;      /* OLD - Firefox 19- */
        -ms-flex-order: 3;              /* TWEENER - IE 10 */
        -webkit-order: 3;               /* NEW - Chrome */
         order: 3;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
         /*------------ flex ----------*/
        -webkit-box-flex: 2;      /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: 2;         /* OLD - Firefox 19- */
        -webkit-flex: 2;          /* Chrome */
        -ms-flex: 2;              /* IE 10 */
         flex: 2;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
         background-color:#DDEEEE;
         background-image: linear-gradient(to top, white 0%, #408080 100%)
}
/*gr BS----------------------------*/

@media screen and (min-width:40em) {
/*-------------------------------------------------------------------------------------------------------*/
                #container {
                                   display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
                                   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
                                   display: -ms-flexbox;      /* TWEENER - IE 10 */
                                   display: -webkit-flex;     /* NEW - Chrome */   /* Safari */
                                   display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

                                    background-color: #0060FF;
                                   -webkit-flex-direction: row; /* Safari 6.1+ */
                                    flex-direction: row;
                            }
                #main {

                                   -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
                                  -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
                                  -ms-flex-order: 2;              /* TWEENER - IE 10 */
                                  -webkit-order: 2;               /* NEW - Chrome */
                                  order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */

                                /*--------------------- flex -------------*/
                                 -webkit-box-flex: 4;      /* OLD - iOS 6-, Safari 3.1-6 */
                                  -moz-box-flex: 4;         /* OLD - Firefox 19- */
                                  /*width: 60%;               /* For old syntax, otherwise collapses. */
                                  -webkit-flex: 4;          /* Chrome */
                                  -ms-flex: 4;              /* IE 10 */
                                  flex: 4;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */

                                 /*border: 5px solid red; */
                                 min-height: 600px;
                                 background-color: white;
                                 font-size: 20px;
                                 text-align:center;

                }
 
                #sidebar_l {

                                  -webkit-box-ordinal-group: 1;   /* OLD - iOS 6-, Safari 3.1-6 */
                                      -moz-box-ordinal-group: 1;      /* OLD - Firefox 19- */
                                      -ms-flex-order: 1;              /* TWEENER - IE 10 */
                                      -webkit-order: 1;               /* NEW - Chrome */
                                      order: 1;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */

                                /*------------ flex ----------*/
                                 -webkit-box-flex: 2;      /* OLD - iOS 6-, Safari 3.1-6 */
                                  -moz-box-flex: 2;         /* OLD - Firefox 19- */
                                  /*width: 20%;               /* For old syntax, otherwise collapses. */
                                  -webkit-flex: 2;          /* Chrome */
                                  -ms-flex: 2;              /* IE 10 */
                                  flex: 2;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */

                                 /*border: 5px solid green; */
                                 background-color:#F4EEDF;
                }

                #sidebar_r {
                                /*item 1*/

                                -webkit-box-ordinal-group: 3;   /* OLD - iOS 6-, Safari 3.1-6 */
                                -moz-box-ordinal-group: 3;      /* OLD - Firefox 19- */
                                -ms-flex-order: 3;              /* TWEENER - IE 10 */
                                -webkit-order: 3;               /* NEW - Chrome */
                                order: 3;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */


                                /*------------ flex ----------*/
                                  -webkit-box-flex: 2;      /* OLD - iOS 6-, Safari 3.1-6 */
                                  -moz-box-flex: 2;         /* OLD - Firefox 19- */
                                  /*width: 20%;               /* For old syntax, otherwise collapses. */
                                  -webkit-flex: 2;          /* Chrome */
                                  -ms-flex: 2;              /* IE 10 */
                                  flex: 2;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */

                                 /*border: 5px solid blue; */
                                 background-color:#DDEEEE;/*#ECE1EC;*/
                }

}

#fuss
{
         color: white;/*'#575757*/
         font-size: 1em;
         font-weight: normal;
}

.button {
  height: 100px;
  width: 200px;
  background-color: rgb(10, 128, 118);
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  /*display: inline-block;*/
  font-size: 24px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 12px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}


.button1:hover {
   box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
   color:black;
}
.zentrieren{
  text-align: center;
}