html, body {
 background:#000;
 height:100%;
}
* {
 padding: 0;
 margin: 0;
}
 
main {
 display:block;
 background: #fdefe4;
 width: 80%;
 height: 0;
 padding-bottom: 60%;
 position:absolute;
 left:10%;
 top:10%;

}
 
@media only screen and (orientation: landscape) {
.wrap {
 height: 100%;
 text-align: center;
}
main {
 display: inline-block;
 position:static;
 position: relative;
 height: 80%;
 width:inherit;
 left:0;
 top: 10%;
 padding-bottom:0;
}
img {
 height: 100%;
 width: auto;
 background:#fdefe4;
}
.content {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 width:100%;
}
.clear {
 clear:both;
}
h2, p {
 float:left;
 max-width:100%;
}
}