* {
  box-sizing: border-box;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
  Helvetica, Arial, "Lucida Grande", sans-serif;";
  font-size: 14.5px;
  line-height: 25px;
}

h1 {
  color: #58899d;
  font-size: 22px;
  margin-bottom: 40px
}


.body {
  margin: 0;
  font-family: Palatino;
}

h2 {
  color: #58899d;
  font-size: 18px;
  margin bottom: 10px;
}

h3 {
  /*color: #f2ecde; schrift im header 'beppe schiavetta'*/
  color: #800f00;
  font-size: 30px;
  margin bottom: 20px;
}

h4 {
  /*color: #6B7A89;*/
  color: #6B7A89;
  font-size: 30px;
  margin bottom: 20px;
}

text-red {
  text-decoration: none;
  color: #58899d;
}

sup, sub {
  height: 0;
    line-height: 1;
    vertical-align: baseline;
    _vertical-align: bottom;
    position: relative;
    font-size: 10px;
}
sup { bottom: 1ex; }
sub { top: .5ex; }


/* Farbe der Links*/
a {
  color: #a01300;
  text-decoration: none;
}

/* Style the top navigation bar - dort wo die Links drinn stehen */
.topnav {
  overflow: hidden;
  background-color: #f2ecde; /*beige*/
  font-size : 16px;
  /*position: relative;
  top: 0;
  left: 0;
  transform: none;


    display: flex;
    justify-content: center;
    align-items: center;  */
}



/* Style the topnav links, die wörter selber */

.topnav a {
  float: left;
  display: block;
  color: #58899d;
  text-align: center;
  padding: 10px;
  text-decoration: none;
}


/*alles betreffend dropdown*/
.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: #58899d; /* der drop button, farbe grau */
  padding: 10px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* hover alle ausser die dropdowns */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #dcca63; /*ocker*/
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #dcca63;  /*beige von Ampere*/
  /*width: 73px;*/
  width: auto;
  /*z-index: 1;*/
}

.dropdown-content a {
  float: none;
  color: #58899d;
  padding: 10px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content :hover {
  background-color: #dcca63;
}

.dropdown-content a :hover {
  background-color: #dcca63;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/*Ende alles betreffend dropdown*/


/* Change color on hover, die farbe hinter den link wenn ich drüber fahre*/

.topnav a:hover {
  background-color: #dcca63; /*das oker vom hover */

}

/* Style the content, dort wo das logo ist*/
.content {
  background-color: #f9b425;
  padding: 13px;
  /*padding-top: 13px;
  padding-right: 3px;
  padding-bottom: 3px;
  padding-left: 3px;*/
  height: 100px;
}


/*damit das logo zentriert wird
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 150px;
}*/


/*content nach den links*/
.content2 {
  background-color: #ffffff;
  padding: 10px;
  color: #434343;
  height: auto;
  max-width: 800px
}



/* Create three equal columns that float next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 20px;
  height: auto /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Responsive layout - makes the three columns stack on top of each
other instead of next to each other */
@media (max-width: 600px) {
  .column {
    width: 100%;
  }
}

.row_b {
  padding-left: 20px;
  }

/*die input fields*/
.input[type=submit] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 2px;
  box-sizing: border-box;
  text-decoration: none;
  font-size: 14.5;

  cursor: pointer
}

.button {
  color: #f2ecde;
}

/*die input fields ENDE*/

/*um die images per klick zu vergrössern*/
.imageContainer > img:hover {
  width: 70%;
  height: 70%;
}
/*fertig images klick vergrössern*/


.footer {
  background-color: #f2ecde;
  padding: 20px;
  height: auto;
  color: #58899d;

}