body{
    margin: 0;
    margin-top: 20px;
}


.container{
    max-width:1000px;
    margin:0 auto;
}
/******** Menu ********/
/**********************/

.menu{
    width: 100%;
    background: linear-gradient(to right, rgba(13,63,110,1) 0%, rgba(11,48,91,1) 100%);
    padding: 10px 0;
    margin-bottom: 5px;
    height: 100px;
    border-radius: 20px 20px 0 0;
    overflow-x:scroll;
}

.menu div{
    height: 80px;
    width: 15.5%;
    overflow: hidden;
    float: left;
    text-align: center;
    display: table;
    background-color: white;
    box-shadow:  inset 0 0 6px #ccc;
    transition: box-shadow 1s;
    border-radius: 5%;
    font-size: 18px;
    margin-top: 10px;
    margin-left: 0.5%;
    margin-right: 0.5%;
}
.menu div:hover{
    box-shadow:  inset 0 0 15px  rgba(35,62,83,1);
}
.menu div:active{
    box-shadow:  inset 0 0 15px  rgba(35,62,83,1);
    background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    background-color: lightgrey;
}
.menu div a{
    display: table-cell;
    vertical-align: middle;
    color: rgba(13,63,110,1);
    overflow: hidden;
    text-decoration: none;
}
.menu div:first-of-type{
    margin-left: 1%;
    margin-right: 0.5%;
}
.menu div:last-of-type{
    margin-left: 0.5%;
    margin-right: 1%;
}
#menuButton {
    display: none;
}



/******** responsive ********/
/*******************+++******/

/* When the screen is less than 800 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 800px) {
    .menu div:not(:first-child) {display: none;}
    #menuButton {
      float: right;
      padding: 0;
      display: table;
    }
  }
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 800px) {
    .responsive{
        width: 100%;
        height: auto;
    }
    
    .responsive div{
        height: 80px;
        width: 100%;
        text-align: center;
        display: table !important;
        background-color: white;
        box-shadow:  inset 0 0 6px #ccc;
        transition: box-shadow 1s;
        border-radius: 5%;
        font-size: 18px;
        margin: 0% !important;
    }
    
  }






/******** content ********/
/*************************/

.infotext{
    margin:20px 0;
    padding: 20px;
    border-radius: 20px;
    display: block;
    box-shadow:  inset 0 0 15px rgba(66,121,173,1);
}

.infoSpalten{
    margin:20px 0;
    padding: 20px;
    border-radius: 20px;
    display: flex;
    box-shadow:  inset 0 0 15px rgba(66,121,173,1);
}
.centeredText{
    display: flex;
    margin: 0 20px;
height: 100%;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  /* Column | row */
}

.content-container{
    max-width:1000px;
    margin:0;
    display: table;
}
.content{
    width: 80%;
    display: table-cell;
    height: 900px;
    padding: 0 2%;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    box-shadow: inset 0px 0px 5px 5px rgba(0,0,0,0.25);
}
.left{
    width: 20%;
    padding: 0 2%;
    display: table-cell;
    color: white;
    height: 100%;
    background: linear-gradient(to left, rgba(66,121,173,1) 0%, rgba(13,63,110,1) 100%);
    }
.left h2{
    margin-top: 50px;
    }
.left li{
        list-style: none;
        margin-bottom: 20px;
        }
ul{
            padding-left: 0;
            }

.left .button{
    background-color: white;
    box-shadow:  inset 0 0 6px #ccc;
    text-align: center;
    border-radius: 5%;
    margin-top: 10px;
    padding: 5px;
    transition: box-shadow 1s;
    }
.left .button:hover{
    box-shadow:  inset 0 0 15px  rgba(35,62,83,1);
}
.left .button:active{
    box-shadow:  inset 0 0 15px  rgba(35,62,83,1);
    background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    background-color: lightgrey;
}


/******** footer ********/
/**********************/

.footer{
    max-width:1000px;
    margin:5px auto;
    color: white;
    background: linear-gradient(to right, rgba(13,63,110,1) 0%, rgba(11,48,91,1) 100%);
    height: 80px;
    text-align: center;
    border-radius: 0 0 20px 20px;
    
}
.footer a{
    color: white;
    text-decoration: none;
    line-height: 80px;
}



.clearfix {
    overflow: auto;
  }

  .clearfix::after {
    content: "";
    clear: both;
    display: table;
  }