*{font-family:'Titillium Web', sans-serif;box-sizing:border-box;}
.clear{clear: both;}

body{background:#fff;overflow-x:hidden;}
#topbluebar{position:fixed;width:100%;height:3px;top:0;background:#1f77f4;display:block;z-index:5;box-shadow:0 10px 50px 50px #fff; }
a.logowrap{background:rgba(19,25,29,1);box-shadow:0 20px 30px rgba(19,25,29,1);height:40px;width:100%;display:block;position:fixed;top:0;right:0;z-index:3;}
#logo{position:absolute;top:0;right:0;width:60px;}

.wrapper{width:100vw;height:100%;padding-bottom:40px;position:relative;background-size:cover;background-position:center center;display:block;}
.mbldsktp-img{position:absolute;bottom:60px;margin:0;text-align:center;display:block;width:100%;}
.mbldsktp-img img{width:75%;max-width:450px;display:block;margin:0 auto;}

h1{color:#ccc;font-family:'Circularstd', sans-serif;font-size:5em;line-height:1;font-weight:500;text-align:center;width:100%;position:absolute;top:12vh;display:block;letter-spacing:-5px;}
h1 .one{font-size:.5em;display:block;}
h1 .three{font-size:.25em;margin-top:.75em;display:block;font-family:'Titillium Web', sans-serif;letter-spacing:1px;color:#333;}

.about{position:absolute;top:27vh;width:100%;color:#333;font-size:1.2em;font-family:'Titillium Web', sans-serif;font-weight:300;z-index:2;}
.about article{width:100%;max-width:450px;margin:0 auto;padding:0 20px;text-align:left;display:block;}

.slideP{position:absolute;top:70px;width:100%;color:#999;font-size:1.2em;font-family:'Titillium Web', sans-serif;font-weight:300;line-height:1.5;}

.gradient-icon {height:26px;width:25px;display:block;background:linear-gradient(to bottom, #1f77f4 0%, #1f77f4 15%, transparent 15%, transparent 42.5%, #1f77f4 42.5%, #1f77f4 57.5%, transparent 57.5%, transparent 85%, #1f77f4 85%, #1f77f4 100%);position:fixed;top:20px;left:20px;cursor:pointer;z-index:5;}
.gradient-icon:hover{background:linear-gradient(to bottom, #999 0%, #999 15%, transparent 15%, transparent 42.5%, #999 42.5%, #999 57.5%, transparent 57.5%, transparent 85%, #999 85%, #999 100%);}
.x-icon{height:30px;width:35px;display:block;font-size:35px;color:#ccc;font-family:Verdana, sans-serif;font-weight:100;position:absolute;top:10px;right:20px;cursor:pointer;}
.x-icon:hover{color:#1f77f4;}
.minus-icon{display:block;font-size:35px;color:#ccc;font-family:Verdana, sans-serif;font-weight:500;position:absolute;top:0;right:20px;cursor:pointer;}
.minus-icon:hover{color:#1f77f4;}

.angdown{position: absolute;left:50%;bottom:10px;margin:0 0 0 -25px;width:50px;height:50px;vertical-align: middle;text-align:center;color:#eee;font-size:50px;display: block;text-decoration: none;}
.angdown:hover{color:#1f77f4;}

.menunav{width:250px;height:100%;display:block;;position:fixed;left:0;top:0;background:rgba(255,255,255,.95);z-index:10;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);}
.menunav ul{width:100%;margin-top:50px;list-style:none;color:#000;font-size:1.25em;font-weight:300;}
.menunav li a{padding:10px 12px;margin-bottom:4px;border-left:#1f77f4 5px solid;display:block;width:100%;color:#000;text-decoration:none;background:rgba(0,0,0,0.05);}
.menunav li a:hover{color:#fff;background:#1f77f4;}

#menu-checkbox {display:none;}
#overlay {display:none;width:100%;height:100%;background-color:rgba(0,0,0,0);position:fixed;top:0;left:0;z-index:2;opacity:0;filter:alpha(opacity=0);}
#menu-checkbox:checked ~ #overlay {display:block;opacity:1;filter:alpha(opacity=100);}
#menu-checkbox:checked ~ .menunav {visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1;filter:alpha(opacity=100);box-shadow:5px 0 5px rgba(0,0,0,0.3);}
#menu-checkbox:checked ~ .gradient-icon{background:#fff;}

.contactP {text-align:center;padding:0 5%;max-width:480px;margin:0 auto;position:relative;}
.contactP .box{width:70px;height:70px;margin:15px 15px 15px 11px;display:inline-block;-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none;background-size:100%;background-position:0 0;}

.icon{width:25vw;height:25vw;margin:.25em;display:inline-block;font-size:15vw;padding:5vw 0;color:#558fff;text-decoration: none;text-align:center;vertical-align: middle;background:none;border-radius:25vw;}
#phone{background:url(../images/contact/cb-phone.png) no-repeat;background-size:70px;}
#email{background:url(../images/contact/cb-email.png) no-repeat;background-size:70px;}
#resume{background:url(../images/contact/cb-resume.png) no-repeat;background-size:70px;}
#linkedin{background:url(../images/contact/cb-linkedin.png) no-repeat;background-size:70px;}
#behance{background:url(../images/contact/cb-behance.png) no-repeat;background-size:70px;}
#blog{background:url(../images/contact/cb-blog.png) no-repeat;background-size:70px;}
#phone:hover, #email:hover, #resume:hover, #linkedin:hover, #behance:hover, #blog:hover {background-position:0 100%;}

.cpyr{font-size:1em;color:#999;position:absolute;bottom:25px;width:100%;text-align:center;font-family:Arial, sans-serif;}
.btt, .back{display:block;font-family:'Titillium Web', sans-serif;border-radius:3em;position:absolute;bottom:4em;left:50%;margin-left:-2em;background:rgba(0,0,0,.25);color:#fff;font-size:1.5em;font-weight:600;padding:.5em 1em;text-decoration:none;z-index:2;cursor: pointer;}

.easeanim{-webkit-transition: all 0.3s;transition: all 0.3s}
.boldblue{font-weight:600;color:#1f77f4;display:block;}
h2{margin-bottom:1em;font-size:1em;}
.aboutlink{display:inline-block;margin:0 1em;}
.openlink{margin-top:1em;color:#1f77f4;display:block;text-decoration:none;}
.aboutlink:hover, .openlink:hover, .boldblue:hover{color:#558fff;}
.extlnk{margin-left:.5em;}

#dot-nav{display:none;}

img#me{display:block;margin:0 auto 20px auto;width:100px;}

.content-wrap{width:100%;max-width:480px;margin:0 auto;padding:0 2em;}
.content{width:100%;position:relative;display:block;font-family:'Titillium Web', sans-serif;margin:0 auto;font-size:1.3em;}
h3.prj_name{display:block;margin:3.5em auto 0;font-size:1.7em;color:#1f77f4;font-weight:600;text-align:center;}
.blurb{width:100%;text-align:center;color:#333;line-height:1.7;font-weight:300;margin:2em auto;}
.sm3wrap{width:100%;}
.bighero{width:100%;max-width:480px;background:#fff;margin:1em auto;display:block;}
.sm3hero{width:100%;max-width:480px;background:#fff;margin:1em auto;display:block;border:2px solid #eee;}
.bighero:hover{transform:scale(1.02,1.02)}
.sm3hero:hover{transform:scale(1.02,1.02);border:2px solid #1f77f4}
.bighero img, .sm3hero img{width:100%;vertical-align:middle;}

#openprj{margin-bottom:2.5em;text-align: center;}


@media only screen and (min-width: 480px) {
	.icon{width:120px;height:120px;font-size:72px;padding:24px 0;}
	.content-wrap{max-width:660px;}
}

@media only screen and (min-width: 769px) {
	#logo{width:75px;}
	a.logowrap{background:none;box-shadow:none;}
	.wrapper{display:block;vertical-align:middle;width:100%;}
	.mbldsktp-img{position:relative;float:right;bottom:auto;width:50%;top:50%;transform: translate(0, -50%);}
	.mbldsktp-img img{max-width:900px;width:73%;}
	.mbldsktp-img img:hover{width:75%;}
	.about{position:relative;float:right;top:50%;width:50%;transform: translate(0, -50%);}
	.slideP{float:left;}
	.slideP article{float:right;max-width:320px;}
	h1{font-size:6.5vw;letter-spacing:-.08em;float:left;top:50%;width:50%;transform: translate(0, -50%);color:#ccc;}
	.contactP{padding:50px 0 0 0;float:none;margin:0;max-width:683px;left:50%;}
	.icon{width:8vw;height:8vw;font-size:4vw;padding:2vw 0;margin:0;color:#558fff;}
	.icon:hover{color:#1f77f4;background:rgba(0,0,0,0.05)}
	.btt{bottom:20px;right:20px;left:auto;margin:0;background:rgba(0,0,0,.15);}
	.btt:hover{background:#1f77f4;}
	.back:hover{background:#1f77f4;}
	.cpyr{bottom:5px}
	
	#dot-nav{right:10px;top:50%;margin-top:-100px;height:200px;z-index:10;position:fixed;display:block;}

	#dot-nav ul {
		list-style: none;
		margin:0;
		padding: 0;
	}
	#dot-nav li {
		position: relative;
		background-color: #ccc;
		border-radius: 15px 15px 15px 15px;
		cursor: pointer;
		padding: 2px;
		height: 8px;
		margin: 10px 10px 0px 0px;
		width: 8px;
		vertical-align:bottom;
	}
	#dot-nav li.active, #dot-nav li:hover {
		background-color: #1f77f4;
	}
	
	#dot-nav a {
		outline: 0;
		vertical-align:top;
		margin: 0px 0px 0px 25px;
		position: relative;
		top:-5px;
	}

}

@media only screen and (min-width: 1025px) {
	a.logowrap{z-index:11}
	#logo{width:100px;left:0;right:auto;}
	#topbluebar{height:6px;}
	h1{text-align:right;}
	.about{font-size:1.4em;}
	.openlink{font-size:.8em;}
	.gradient-icon {display:none;}	
	.menunav{position:fixed;box-shadow:none;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);background:none;}
	#menu-checkbox:checked ~ .menunav {box-shadow:none;}
	.menunav ul{margin-top:10px;}
	.menunav li a{background:rgba(0,0,0,0.1);border-left:#1f77f4 5px solid;}
	.x-icon{display:none;}
	.minus-icon{display:none;}
	
	.content-wrap{padding:0 3em 0 298px;text-align:center;max-width:1200px;}
	.content{font-size:1.25em;}
	.blurb{max-width:1200px;text-align:left;}
	.bighero{width:100%;max-width:1024px;}
	.sm3hero{width:32%;max-width:340px;margin:0 .5%;display:inline-block;}
	img#me{width:10vw;max-width:150px;}
	img#me:hover{width:11vw;max-width:160px;margin:10px auto;}
	
	.lrwrap{width:100%;position:relative;vertical-align: top;}
	.lrwrap .onleft{float:left;width:45%;}
	.lrwrap .onright{float:right;width:45%;}
}

@media only screen and (min-width: 1367px) {
	.about article{max-width:600px;}
	.slideP article{max-width:440px;}

	.icon{width:110px;height:110px;font-size:55px;padding:27.5px 0;margin:0 .25em;}
}