html { -webkit-text-size-adjust: 100%;
    height: 100%;       
 }

body{
 font-family:Palatino Linotype;
 margin-top: 2em;
}

p{
 font-family:Palatino Linotype;
 font-size:1.2em;
}


p span {
 font-size:1.5em;
  font-weight: lighter;

}
a{
 text-decoration: none;
 color: black;
}

.content{
  width: 50%;
  display:inline;
}

td { 
width: 100%;
heigh:auto;
}

h1{
  font-weight: lighter;
  font-size: 1.5em;
}

h2{
font-family:Palatino Linotype;
font-weight:lighter;
margin-top: 0;
}

h3 {
  font-weight: lighter;
  font-size: 1em;
  border-bottom: 1px black solid;
}

.border{
   border:1px solid black;
   padding:0.2em;
   width:100%;
   }

#allen img {
  width: auto;
  height: 20%;
  padding-top: 1em;
  margin-bottom: -0.5em;
  float:left;
}

#sturtevant img{
  width: auto;
  height: 50%;
  padding-top: 1em;
  margin-bottom: -0.5em;
  float:right;
}

/*— P A G E -*/
.page{
  width: 100%;
  margin-top: -0.5em;
}

#page{
  width: 40%;
}

p{
  width: 50%;
}

#legende p{
  font-size: 0.6em;
  width: 30%;
}

#legende{
  margin-bottom: 1em;
}

	.gallerie {
		position: relative;
        margin-top: 4em;
        margin-bottom:13em;
	}

	.gallerie img {
		display: block;
		max-width: 100%;
		margin: auto;
		cursor: pointer;
	}
     .gallerie .caption {
        font-size:1em;
        font-style:light;
		position: absolute;
		background-color: white;
	}
    .gallerie .button {
		position: absolute;
		background-color: white;
		top: -1rem;
		right: 0;
	}
		.button span { cursor: pointer; }
		.button span:hover { border-bottom: 1px solid; }

/*I P H O N E*/

@media only screen and (max-width: 550px) and (min-width: 0px) {

#allen img, #sturtevant img{
  width: 100%;
}

body{
  font-size: 80%;
}

.page{
  font-size: 100%;
}

#page{
  width: 100%;
}

p{
  width: 90%;
}

#legende p{
  width: 80%;
}
}

/*I P A D*/

@media only screen and (max-width: 1000px) and (min-width: 550px) {

#allen img, #sturtevant img{
  width: 80%;
}

.page{
  font-size: 90%;
}

#page{
  width: 70%;
}

p{
  width: 80%;
}

#legende p{
  width: 40%;
}
}