/* CSS Document */

body{font-size: 20px; color:rgb(255,255,255); font-family: "Opens Sans", sans-serif;}
*{box-sizing: border-box; margin:0; padding: 0; font-size: 1em; color:rgb(255,255,255); font-family: "Opens Sans", sans-serif; outline: none;}
.clear{display:block; font-size:1px; height:1px; clear:both; margin:-1px 0 0 0;}
span.keep{white-space: nowrap;}
a{cursor: pointer;}

#bg-con{width:100%; height:auto; position:fixed; bottom:0; left:0; background:url(/img/bg-clouds.jpg) center bottom repeat; background-size: 100% auto; z-index: 1;}
.backtitle{position: relative; padding:0; font-size: 10vw; font-weight:300; letter-spacing:.1em;}
.port-back{text-align: right;}
.res-back{text-align: right;}
.backtitle span{position: absolute; width:100%; padding:0 1% 0 0; /*top:40%;*/ left:0; text-align: inherit;}

#menu-con{position:fixed; top:0; left:0; width:100%; height:auto; padding:.3em 2%; background:rgba(60,60,60,.8); z-index: 10;}
#menu{float:right; text-align: right; width:68%;}
#menu a{display: inline-block; margin:.1em .1em; padding:.2em .4em; background: rgba(0,0,0,.9); font-weight:300;}
#menu a.select{background: rgba(214,129,15,.9); }
#df img{float:left; width:30%; max-width:300px; height:auto;}

/*.container{position:fixed; width:100%; height:100%; top:0; left:0; overflow-x:hidden; overflow-y:auto; z-index:5; }*/
/*.sub-con{position:relative; width:100%; height: 100%;}*/
/*.main-title h1{display:inline-block;font-weight:lighter;font-size:1.6em; padding:.2em .5em; background:rgba(10,10,10,.6); margin:0; white-space: nowrap;}*/
#main-title{position:relative; width:100%; min-height: 400px; z-index:5; background:url(/img/bg-alt2-main.png) bottom center no-repeat; background-size:100% auto;}
#main-header{position: absolute; right:5%; bottom:7%; text-align: right;}
#main-title h1{display:inline-block;font-weight:lighter;font-size:1.4em; padding:.3em .5em; background:rgba(10,10,10,.6); margin:0; white-space: nowrap;}
#main-title h2{display:inline-block;font-weight:lighter;font-size:1.1em; padding:.3em .5em; background:rgba(10,10,10,.6); margin:0; white-space: nowrap;}
#main-title h2 a{text-decoration: none; }

#main-intro{position: absolute; right:5%; top:16%; text-align: right;}
#main-intro h2{display:inline-block;font-weight:lighter;font-size:1.4em; padding:.2em .5em; background:rgba(136,164,36,.6); margin:.1em 0; white-space: nowrap;}
#main-intro h2.or{background:rgba(192,100,31,.6); }
#main-intro h2.bl{background:rgba(30,45,67,.6); }

.sub-con{position:relative; width:100%; height:auto; z-index:5;}
.scrollback{position:absolute; top:0; left:0; width:100%; height:100%; z-index: 1;}
.sub-title{display:none; position: absolute; top:0; left:0; width:100%; height:2em; padding:.5em 3%; z-index: 2; font-weight:300;}

#samples{background:url(/img/bg-alt2-samples.png) bottom right no-repeat; background-size:100% auto;}
#samples .sub-title{color:rgb(255,255,255); background:rgb(30,45,67);}
.samples-con{padding:.2em 2%; z-index: 2; text-align:justify; text-align-last: justify; background:rgba(0,0,0,.75);}
.sample{display:inline-block; width:30%; padding:.3em 0; text-align: center;}
.sample img{width:100%; max-width:400px; height: auto;}

#resume{background:url(/img/bg-alt2-resume.png) bottom center no-repeat; background-size:100% auto;}
#resume .sub-title{color:rgb(255,255,255); background:rgb(61,67,31);}
.resume-con{padding:.2em 2%; z-index: 2; background:rgba(0,0,0,.75);}
.res-title{float:left; width:25%; text-align: right; margin:1em 0 0 0; color:#E6D57A;}
.res-copy{float:left; width:72%; max-width:940px; text-align: left; margin:1em 0 0 3%;}
.res-copy .jtitle{color:rgb(214,129,15)}
.res-copy .jempl{}
.res-copy h3{font-size:.8em; font-weight: normal;}
.res-copy p{font-size: .8em; margin:.5em 0 0 0;color:rgb(220,220,220) }
.fancybox-arrow{top:15%;}

.inner-con{opacity: .1;}

@media screen and (max-width:550px){
	.res-title{float:none; width:100%; text-align: left; margin:1em 0 0 0; color:#E6D57A;}
	.res-copy{float:none; width:100%;  text-align: left; margin:.5em 0 0 0;}
	#menu a{font-size: .8em;}
	.sample{width:45%; }
	#main-title, #samples, #resume{background-size:200% auto;}
	/*#resume{background:url(/img/bg-resume-mob.jpg) center top no-repeat; background-size:cover; padding: 1em 0 1em 0;}*/
}