html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}

#full-screen-background-image {
z-index: -999;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}

#wrapper {
position: relative;
width: 800px;
min-height: 400px;
margin: 20px auto;
}

#name {
padding: 20px 0 50px 0;
max-width: 100%;
min-width: 50%;
height: auto;
width: auto\9; /* ie8 */
float: left;
}
  
#what {
color: white;
font-family: Montserrat, Helvetica, sans-serif;
font-weight: normal;
font-size: 2em;
}
  
ul {
list-style-type: none;
font-size:0;
}


li {
display: inline-block;
font-size: 14px;
padding-right: 30px;
text-align: left;
}

a {
padding: 10px;
border: solid white 1px;
font-family: Montserrat, Helvetica, sans-serif;
font-weight: normal;
color:#fff;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
text-decoration: none;
}

a:hover {
padding: 10px;
border: solid white 1px;
font-family: Montserrat, Helvetica, sans-serif;
font-weight: normal;
color: #fff;
background-color: #fff; color:#d87900;
text-decoration: none;
}

#nav {
padding-top: 50px;
padding-bottom: 150px;
margin: 0;
}

#footer {
color: white;
font-family: Montserrat, Helvetica, sans-serif;
font-weight: normal;
font-size: .75em;
/*border-top: solid white 1px;*/
opacity: 0.5;
/*bottom:0;
position:fixed;
z-index:150;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+(document.documentElement.clientHeight-this.offsetHeight)));
height:35px;
clear: both;*/
}

/*iphone portrait*/

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {
html, body {
margin-left:20px;
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {
#name {
padding-bottom: 50px;
width: 100%;
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {
#icon {
width: 100%;
padding: 0;
}
    
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {
li {
display: inline;
padding: 15px;
clear: both;
line-height: 7em;
}
    
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {
#nav {
padding-bottom: 30px;
}
    
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {
a {
border: solid white 2px;
font-size: 40px;
}
    
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {
a:hover {
font-size: 40px;
}
    
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {
#wrapper {
margin-top:20px;
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {
#footer {
font-size: 1.5em;
opacity: 1;
}

/*iphone landscape*/

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) {
html, body {
margin-left:20px;
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) {
#icon {
width: 50%;
padding: 0;
}
    
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) {
#name {
padding-bottom: 50px;
width: 50%;
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) {
li {
display: inline;
padding: 15px;
clear: both;
line-height: 6em;
}
    
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) {
#nav {
padding-bottom: 30px;
}
    
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) {
a {
border: solid white 2px;
font-size: 40px;
}
    
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) {
a:hover {
font-size: 40px;
}
    
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) {
#wrapper {
margin-top:20px;
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) {
#footer {
font-size: 1.5em;
opacity: 1;
}