* {
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  box-sizing: border-box !important;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  outline: none;
}
*:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
html,body{
	min-height: 100%;
  height: 100%;
  margin: 0;
	background-color: #000;
	font-family: 'Roboto','Helvetica Neue',Helvetica, Arial, sans-serif;
  font-variant-ligatures: no-common-ligatures;
  -webkit-font-variant-ligatures: no-common-ligatures;
}
h1{
	font-size: 4rem;
	font-weight: 200;
	letter-spacing: 4px;
	text-transform: uppercase;
	margin: 0;
	color: #fff;
	opacity: .3;
}
h2{
	font-size: 1.5rem;
	font-weight: 400;
	letter-spacing: 1px;
	margin: 0;
	color: #10131a;
}
h3{
	font-size: 1rem;
	font-weight: 200;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #ddd;
}
h4{
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #FF5216;
}
p{
	/*font-family: 'Open Sans', sans-serif;*/
	font-size: 1rem;
	color: #10131a;
	opacity: 0.4;
	letter-spacing: 0px;
	font-weight: 300px;
	line-height: 25px;
}
a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}
a.button{
  /* text-transform: uppercase; */
  background: #fff;
  display: inline-block;
  height: auto;
  width: auto;
  margin: 30px;
	padding: 10px 20px;
	border-radius: 5px;
	border: 1px solid #fff;
	font-weight: 200;
	text-decoration: none;
  text-align: center;
	font-size: 0.8rem;
  transition: 300ms all;
  box-shadow: 0 0 30px 0 rgba(229,232,235,0.5), 0 0 0 transparent;
  -moz-box-shadow: 0 0 30px 0 rgba(229,232,235,0.5), 0 0 0 transparent;
	-webkit-box-shadow: 0 0 30px 0 rgba(229,232,235,0.5), 0 0 0 transparent;
  /* -webkit-box-shadow: 8px 10px 20px 0 rgba(46,61,73,.15);
  box-shadow: 8px 10px 20px 0 rgba(46,61,73,.15); */
}
a.button:hover{
  transform: translateY(2px);
  transition: 300ms all;
  box-shadow: 0 0 30px 0 rgba(229,232,235,0.1), 0 0 0 transparent;
  -moz-box-shadow: 0 0 30px 0 rgba(229,232,235,0.1), 0 0 0 transparent;
	-webkit-box-shadow: 0 0 30px 0 rgba(229,232,235,0.1), 0 0 0 transparent;
  /* -webkit-box-shadow: 2px 4px 8px 0 rgba(46,61,73,.2);
  box-shadow: 2px 4px 8px 0 rgba(46,61,73,.2); */
}
/* animations */
.animate-opacity-fade-03 {
  -webkit-animation: opacity-fade-03 1s ease-in-out 1 normal;
  -moz-animation: opacity-fade-03 1s ease-in-out 1 normal;
  -o-animation: opacity-fade-03 1s ease-in-out 1 normal;
  animation: opacity-fade-03 1s ease-in-out 1 normal;
}
@keyframes opacity-fade-03 {
  0% {
  	opacity: 0;
  }
  100% {
  	opacity: 0.3;
  }
}
.animate-opacity-fade-1 {
  -webkit-animation: opacity-fade-1 2s ease-in-out 1 normal;
  -moz-animation: opacity-fade-1 2s ease-in-out 1 normal;
  -o-animation: opacity-fade-1 2s ease-in-out 1 normal;
  animation: opacity-fade-1 2s ease-in-out 1 normal;
}
@keyframes opacity-fade-1 {
  0% {
  	opacity: 0;
  }
  30%{
  	opacity: 0;
  }
  100% {
  	opacity: 1.0;
  }
}

/*.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }
.delay-900 { animation-delay: 900ms; }

.delay-1000 { animation-delay: 1000ms; }
.delay-1100 { animation-delay: 1100ms; }
.delay-1200 { animation-delay: 1200ms; }
.delay-1300 { animation-delay: 1300ms; }
.delay-1400 { animation-delay: 1400ms; }
.delay-1500 { animation-delay: 1500ms; }
.delay-1600 { animation-delay: 1600ms; }
.delay-1700 { animation-delay: 1700ms; }
.delay-1800 { animation-delay: 1800ms; }
.delay-1900 { animation-delay: 1900ms; }
.delay-2000 { animation-delay: 2000ms; }

.delay-2100 { animation-delay: 2100ms; }
.delay-2200 { animation-delay: 2200ms; }
.delay-2300 { animation-delay: 2300ms; }
.delay-2400 { animation-delay: 2400ms; }
.delay-2500 { animation-delay: 2500ms; }
.delay-2600 { animation-delay: 2600ms; }
.delay-2700 { animation-delay: 2700ms; }
.delay-2800 { animation-delay: 2800ms; }
.delay-2900 { animation-delay: 2900ms; }
.delay-3000 { animation-delay: 3000ms; }*/

/* helpers */
.accent-text{
	color: #FF5216;
}
.center-flex{
	display: flex;
  justify-content: center;
  align-items: center;
}

/* preloader styles */
.loading{
  text-align: center;
}
#preloader {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 101;
  background-color: #000;
  font-weight: 200;
  color: #ffffff;
}
#preloader .preloader-text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
#preloader .preloader-percentage {
	color: #fff;
  font-size: 35px;
  opacity: 1;
  margin: 0 0 6px 0;
  max-width: 400px;
  text-align: center;
}
#preloader .preloader-progress {
  width: 100px;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 0 auto 15px auto;
}
#preloader .preloader-progress span {
  display: block;
  width: 0;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
}
#preloader.is-hidden {
  visibility: hidden;
  opacity: 0;
}
.is-loading {
  overflow: hidden;
}
.hidden {
  display: none !important;
  visibility: hidden; }

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }

.invisible {
  visibility: hidden;
}

/* .icon{
  position: absolute;
  top: 13px;
  left: 13px;
  background: url('../img/icon.png') no-repeat center center;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;;
  width: 30px;
  height: 30px;
  z-index: 10;
} */

/* navbar styles */
ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* border-bottom: 1px solid #777; */
}
.section-topnav{
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 5;
}
.topnav li{
  float: left;
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 0.8rem;
}
.topnav li a{
  display: inline-block;
  color: #fff;
  text-align: center;
  padding: 20px 20px;
  text-decoration: none;
  opacity: 0.3;
  /* background-color: #fff; */
  transition: 300ms all;
}
.topnav li a:hover{
  /* background-color: #fff; */
  opacity: 0.9;
}
.topnav li a::after {
  content: '';
  display: block;
  width: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 1px;
  background: #009EEB;
  transition: width .3s;
}
.topnav li a:hover::after {
  width: 100%;
}
.topnav .active{
  opacity: 0.7;
}

.sidenav-adj{
  margin-left: 20px;
  margin-right: 20px;
}

.section-leftnav{
  position: absolute;
  height: 100%;
  left: 0;
  z-index: 5;
}
.leftnav li{
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 1rem;
}
.leftnav li a{
  display: inline-block;
  color: #fff;
  text-align: center;
  padding: 20px 20px;
  text-decoration: none;
  opacity: 0.7;
  /* background-color: #fff; */
  transition: 300ms all;
}
.leftnav li a:hover{
  /* background-color: #fff; */
  opacity: 0.9;
}


.section-leftnav2{
  position: fixed;
  width: 100%;
  right: 0;
  top: calc(50% - 200px);
  z-index: 5;
  -webkit-transform-origin: left top;
  -webkit-transform:rotate(-90deg) translateX(-100%);
}
.leftnav2 li{
  float: right;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 0.8rem;
}
.leftnav2 li a{
  display: inline-block;
  color: #000;
  text-align: center;
  padding: 20px 20px;
  text-decoration: none;
  opacity: 0.3;
  transition: 300ms all;
}
.leftnav2 li a:hover{
  opacity: 0.9;
}
.leftnav2 li a::after {
  content: '';
  display: block;
  width: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 1px;
  background: #009EEB;
  transition: width .3s;
}
.leftnav2 li a:hover::after {
  width: 100%;
}
.leftnav2 .active{
  opacity: 0.7;
}



/* hero styles */
.section-hero{
	width: 100%;
	height: 100vh;
  min-height: 70vh;
	/* dark */
  background: rgba(16,19,26,1);
	background: -moz-radial-gradient(center, ellipse cover, rgba(16,19,26,1) 0%, rgba(0,0,0,1) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(16,19,26,1)), color-stop(100%, rgba(0,0,0,1)));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(16,19,26,1) 0%, rgba(0,0,0,1) 100%);
	background: -o-radial-gradient(center, ellipse cover, rgba(16,19,26,1) 0%, rgba(0,0,0,1) 100%);
	background: -ms-radial-gradient(center, ellipse cover, rgba(16,19,26,1) 0%, rgba(0,0,0,1) 100%);
	background: radial-gradient(ellipse at center, rgba(16,19,26,1) 0%, rgba(0,0,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#10131a', endColorstr='#000000', GradientType=1 );
}
.section-hero .portrait{
	width: 100%;
	height: 100vh;
	background: url(../img/portrait_cutout-interlaced.png) no-repeat center center;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.section-hero .content-wrapper{
	width: 100%;
}
.bio{
  margin-top: 60px;
  max-width: 300px;
  opacity: 1;
  line-height: 30px;
}
.bio span{
  color: #fff;
  opacity: 0.5;
  font-weight: 400;
  letter-spacing: 1px;
}
.bio a{
  /* background-color: #fff; */
  color: #fff;
  /* color: #000; */
  /* padding-left: 5px;
  padding-right: 5px; */
  opacity: 0.7;
  transition: 300ms all;
}
.bio a:hover{
  background-color: #FC5328;
  /* color: #fff; */
  opacity: 1;
}
/* SIGNITURE */
.signiture{
}
path.signiture {
	fill: transparent;
	stroke: #FF5216;
	stroke-width: 2;
	stroke-dasharray: 2000;
	stroke-dashoffset: 2000;
	animation: draw 2s ease-in-out forwards;
}
@keyframes draw {
	50% {
		stroke-dashoffset: 1500;
	}
	90% {
		fill: transparent;
		stroke-width: 3;
	}
	to {
		stroke-dashoffset: 0;
		/*fill: #737373;*/
		fill-opacity: 0.5;
	}
}

/* project styles */
.section-projects{
  background-color: #F9FAFC;
  transition: 300ms all;
  padding-bottom: 200px;
}
.content{
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding: 40px;
	padding-top: 80px;
}
.content-chunk{
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
	padding: 40px;
	text-align: center;
}
.content-chunk h2{
	opacity: .3;
	line-height: 40px;
}
#pc-mosquebuddy,#pc-decompressay,#pc-phonology,#pc-spoilerblock,#pc-sparkresume{
  opacity: 0;
  transition: 500ms all;
}
a.project-card{
	/*border: 1px solid rgba(0,0,0,0.2);*/
	display: block;
	text-decoration: none;
	border-radius: 5px;
	background-color: #fff;
	margin: 30px;
  box-shadow: 0 0 30px 0 rgba(229,232,235,0.3), 0 0 0 transparent;
  -moz-box-shadow: 0 0 30px 0 rgba(229,232,235,0.3), 0 0 0 transparent;
	-webkit-box-shadow: 0 0 30px 0 rgba(229,232,235,0.3), 0 0 0 transparent;
  /* udacity style */
  /* -webkit-box-shadow: 5px 5px 25px 0 rgba(46,61,73,.2);
  box-shadow: 5px 5px 25px 0 rgba(46,61,73,.2); */
	transition: 300ms all;
	margin: 0;
	margin-bottom: 30px;
}
a.project-card:hover{
	transform: translateY(-10px);
  box-shadow: 0 0 30px 0 rgba(229,232,235,0.5), 0 0 0 transparent;
  -moz-box-shadow: 0 0 30px 0 rgba(229,232,235,0.5), 0 0 0 transparent;
	-webkit-box-shadow: 0 0 30px 0 rgba(229,232,235,0.5), 0 0 0 transparent;
  /* udacity style */
  /* -webkit-box-shadow: 2px 4px 8px 0 rgba(46,61,73,.2);
  box-shadow: 2px 4px 8px 0 rgba(46,61,73,.2); */
}
/* a.project-card:hover .project-card_thumb{
  transition: 300ms all;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0 90%);
	clip-path: polygon(0 0, 100% 0, 100% 90%, 0 90%);
} */
/* a.project-card:hover .project-card_content{

} */
a.project-card:hover .sparkresume-img{
	background: #FF9E7C url(../img/sparkresume_thumb-min.png) no-repeat center center;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
a.project-card:hover .mosquebuddy-img{
	background: #FFD55F url(../img/mosquebuddy_thumb-min.png) no-repeat center center;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
a.project-card:hover .decompressay-img{
	background: #85D7FF url(../img/decompressay_thumb-min.png) no-repeat center center;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
a.project-card:hover .phonology-img{
	background: #FF9E7C url(../img/phonology_thumb-min.png) no-repeat center center;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
a.project-card:hover .spoilerblock-img{
	background: #A389F4 url(../img/spoilerblock_thumb-min.png) no-repeat center center;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.padding-0{
	padding-left: 10px;
	padding-right: 10px;
}
.project-card_thumb{
	border-radius: 5px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	width: 100%;
	height: 300px;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
	margin-bottom: -40px;
}
.sparkresume-img{
	background: #EFF2F7 url(../img/sparkresume_thumb-min.png) no-repeat center center;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  transition: 500ms all;
}
.mosquebuddy-img{
	background: #EFF2F7 url(../img/mosquebuddy_thumb-min.png) no-repeat center center;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  transition: 500ms all;
}
.decompressay-img{
	background: #EFF2F7 url(../img/decompressay_thumb-min.png) no-repeat center center;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  transition: 500ms all;
}
.phonology-img{
	background: #EFF2F7 url(../img/phonology_thumb-min.png) no-repeat center center;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  transition: 500ms all;
}
.spoilerblock-img{
	background: #EFF2F7 url(../img/spoilerblock_thumb-min.png) no-repeat center center;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  transition: 500ms all;
}
.project-card_content{
	padding: 40px;
}
.overlay{
	/*margin: 30px;*/
	width: calc(100% - 20px);
	height: calc(100% - 30px);
	border-radius: 5px;
	position: absolute;
	z-index: 10;
	background-color: #fff;
	opacity: 0.9;
	text-align: center;
}
.overlay h3{
	color: #000;
	font-weight: 700;
	opacity: 0.9;
}

/* resume styles */
.section-resume{
  transition: 300ms all;
  min-height: 400px;
  overflow-x: hidden;
  overflow-y: hidden;
  margin-top: 150px;
  margin-bottom: 150px;
  background-color: #EFF2F7;
}
.resume-wrapper{
  position: absolute;
  top: -300px;
  right: -350px;
  border: none;
}
iframe{
  transition: 2000ms all ease;
  border: none;
  width: 816px;
  height: 1056px;
  /* scale down + 2d transform */
  -ms-transform: scale(0.6,0.6) rotate(-10deg) translateX(500px) translateY(200px); /* IE 9 */
  -webkit-transform: scale(0.6,0.6) rotate(-10deg) translateX(500px) translateY(200px); /* Safari */
  transform: scale(0.6,0.6) rotate(-10deg) translateX(500px) translateY(200px);
  /* shadow */
  box-shadow: 0 0 500px 20px rgba(0,0,0,0.05), 0 0 0 transparent;
  -moz-box-shadow: 0 0 500px 20px rgba(0,0,0,0.05), 0 0 0 transparent;
	-webkit-box-shadow: 0 0 500px 20px rgba(0,0,0,0.05), 0 0 0 transparent;
}
.slide{
  /* scale down + 2d transform */
  -ms-transform: scale(0.6,0.6) rotate(-30deg) translateX(0px); /* IE 9 */
  -webkit-transform: scale(0.6,0.6) rotate(-30deg) translateX(0px); /* Safari */
  transform: scale(0.6,0.6) rotate(-30deg) translateX(0px);
  /* display: none; */
}

/* project styles */
.section-footer{
  padding-bottom: 200px;
	background-color: #F9FAFC;
  transition: 300ms all;
}
.section-footer .content{
  padding-top: 0;
}
.section-footer .content-chunk h2{
  color: #fff;
}
.social-links{
	letter-spacing: 10px;
	line-height: 40px;
  color: #fff;
	font-size: 1.5rem;
	margin: 0;
}
i{
  transition: 300ms all;
	opacity: .3;
}
a:hover i{
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .content{
  	padding-left: 0;
  	padding-right: 0;
  }
  .section-topnav{
    display: none;
  }
  .section-leftnav{
    display: none;
  }
  .section-leftnav2{
    display: none;
  }
  .resume-wrapper{
    display: none;
  }
}
@media screen and (max-width: 1100px) {
  .resume-wrapper{
    top: -350px;
    right: -250px;
  }
  iframe{
    -ms-transform: scale(0.4,0.4) rotate(-10deg) translateX(500px) translateY(200px); /* IE 9 */
    -webkit-transform: scale(0.4,0.4) rotate(-10deg) translateX(500px) translateY(200px); /* Safari */
    transform: scale(0.4,0.4) rotate(-10deg) translateX(500px) translateY(200px);
  }
  .slide{
    /* scale down + 2d transform */
    -ms-transform: scale(0.4,0.4) rotate(-30deg) translateX(0px); /* IE 9 */
    -webkit-transform: scale(0.4,0.4) rotate(-30deg) translateX(0px); /* Safari */
    transform: scale(0.4,0.4) rotate(-30deg) translateX(0px);
  }
}