@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700);
body { background:#2b2b2b; margin:0; padding:0;}

.parallax-viewport {
    position: relative;     /* relative, absolute, fixed */
    overflow: hidden;
    height:100%;
    width:100%;
}
.parallax-layer {
    position: absolute;
    width:100%;
}

.parallax-layer img { max-width:100%; width:100%}

html, body { height:100%; }

#clouds { width:115%;}
#hills { width:107%; }
#woman { width:100%; }

#fixed {

}
#content { 
    color:#f8f8f8;
    font-family: "Source Sans Pro", Arial, sans-serif;
    font-size:16px;
    padding:110px 100px 0;
    position:absolute;
	top:0;
}
#logo {
	height:76px;
    margin-bottom:30px;
	width:267px;
}
h1 { font-size:16px; font-weight:400; }
p { font-size: 22px; font-weight:300; line-height:1.3em; margin:0; padding:0; }
.error-type { color:#ffce06}

a {color: #f8f8f8}

.message {
    background:rgba(43,43,43,0.7);
    margin:75px 0 0 -25px;
    padding:25px;
    width:280px;
}
.message ul { 
    list-style-type:none; 
    margin:0;
    padding:0;
}
.message ul li { 
    line-height:2em;
}
.message a { 
    color:#d5d5d5;
}
#footer { margin-top:80px; }

#backtrace {
	background:rgba(43,43,43,0.7);
	padding:0 25px 25px 25px;
	position:absolute;
	top:0;
}
#backtrace br:nth-child(2n + 2) { display: none; }​

@media only screen 
and (max-width : 1024px)
and (orientation : portrait) {
    .parallax-layer img {
        max-height:100%; height:100%;
        max-width:none; width:auto;
    }       
}

@media only screen 
and (max-device-width : 767px) {
    .parallax-layer img { display:none; }
    body { background:#2b2b2b url("/img/404/clouds.jpg") no-repeat fixed 50% 50% / cover  }
    #content { padding:1rem 2rem; }
    p { font-size: 16px; line-height:1.3em; margin:0; padding:0; }
    #port { height:auto; }
}