@font-face {
    font-family: ubuntu;
    font-style: normal;
    font-weight: regular;
    src: url (ubuntu-B.ttf);
  }

  @font-face {
      font-family: ubuntu;
      font-style: normal;
      font-weight: light;
      src: url (ubuntu-B.ttf);
    }

#wrap {
    min-width: 350px;
    max-width: 880px;
    height: 100%;
    display:flex;
    align-content:center
    margin-top: 12px;
    margin-left: auto;
    margin-right: auto;
}


.flex-container {
  margin:0px;
  padding:0px;
  font:20px ubuntu;
  background:#F5F5F5;
  display:flex;
  align-content:center;
  flex-direction:column;
  flex-wrap:wrap;
  flex-grow:1;
  max-width: 880px;
}

.logo{
  margin:4px;
  padding: 5px;
  border-radius: 5pt;
}

.alexkob{
  padding-top: 10px;
  padding-left: 8px;
}

.language{
font-family:ubuntu;
font-weight:normal;
font-size:15px;
 margin:2px;
 padding:4px;
 border-radius: 3pt;
 -webkit-flex:1 4 10%;
 align-self:flex-end;
 float:right;
}

.boton-english{
  border-radius: 3pt;
  letter-spacing:2px;
  background-color: #F5F5F5;
  border: 1px solid #D3D3D3;
  text-decoration:none;
  padding: 2px;
  color:  #2a373c;
}

.boton-deutsch{
  border-radius: 3pt;
  letter-spacing:2px;
  background-color: #F5F5F5;
  border: 1px solid #D3D3D3;
  text-decoration:none;
  padding: 2px;
  color:  #2a373c;
}

.navigation {
  font-family:ubuntu;
  font-weight:bold;
  font-size:20px;
  margin:0px;
  padding:4px;
  border-radius: 3pt;
  align-self: auto;
  position: relative;
  align-items: center;
  justify-content: space-between;
  flex-basis: 100%;
  flex:1;
  display: flex;
}

.checkbox {
  min-height:20px;
  margin:2px;
  padding:4px 0px 4px 0px;
  text-align:center;
  letter-spacing:4px;
  border-radius: 3pt;
  background:#a7b8be;
  align-items: center;
  justify-content:space-around;
  flex-grow:1;
  flex-flow: column wrap;
}

.link {
  text-decoration: none;
  color:#2a373c;
}

.description{
  margin:4px;
  padding:5px;
  border: 1px solid #D3D3D3;
  border-radius: 3pt;
  order: 2;
}

.title{
  font-family:ubuntu;
  font-weight:lighter;
  font-size:18px;
  text-align:center;
  letter-spacing:4px;
  margin:4px;
  margin-right: 10px;
}

.content{
  font-family:ubuntu;
  font-weight:lighter;
  font-size:14px;
  margin:2px;
  padding:3px;
  letter-spacing: 1px;
  text-align: left;
  line-height: 25px;
  color:#2a373c;
}

.subtitle{
padding-left:25px;
color:#496069;
}

.content-contact{
  font-weight:lighter;
  font-size:18px;
  padding-left: 30px;
}

.footer {
  font-family:ubuntu;
  font-weight:normal;
  font-size:12px;
  letter-spacing:2px;
  margin: 4px;
  padding: 5px;
  text-align:center;
  vertical-align: middle;
  border-radius: 3pt;
  background:#a7b8be;
  order: 3;
  }

.logo, .description,.language, .checkbox,.footer  {
  flex: 1 100%;
   }

@media screen and (max-width: 500px) {
  .navigation {
    flex-direction: column;
  }
  .checkbox {
    max-width: 100%;
    width:100%;
  }
  .language {
    align-self: right;
  }
  .alexkob {
    margin: auto;
    display: block;
  }
}

a:active {
    color: #d3dbde;
}

a:hover {
    color: #627b84;
}