@charset "UTF-8";
/* CSS Document */
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
body {
	background-color:#2B22A;
	background:linear-gradient(#8513B2, #2B22A9);
	width: 100%;
	height:100%;
	font-size:20px;
	line-height: 1.3em;
	padding:0 0 240px 0;
	margin:0;
	text-align: left;
	font-family: "Didact Gothic", sans-serif;
  	font-weight: 400;
  	font-style: normal;
	text-rendering: optimizelegibility;
	color:rgba(255,255,255,.7);
	transition: ease;
}
p, ul {max-width:444px;}
h1, h2, a {
	font-family: "Poiret One", sans-serif;
 	font-weight: 400;
 	font-style: normal;
	text-rendering: optimizelegibility;
	margin-top:32px;
	padding-bottom:12px;
}
a {
	font-size:24px;
	color:rgba(255,255,255,.7);
	text-decoration: none;
}
a.textlink {
    font-size:20px; 
    text-decoration:underline;
    font-family: "Didact Gothic", sans-serif;
  	font-weight: 400;
	font-style: normal;
}
.bookmarks a {
	display: block;
    margin-bottom: 12px;
}
a:hover, a:focus, a:active {
	font-size:25px;
	color:rgba(255,255,255,1);
	text-decoration: none;
	transition: ease;
}
a.textlink:hover, a.textlink:focus, a.textlink:active {
	color:rgba(255,255,255,1);
	text-decoration: decoration;
	font-size:21px;
	transition: ease;
}
a:after {
	font-family: sans-serif;
	 display:inline-block;
    height:14px;
    width:14px;
    margin-left: 7px;
    content: "";
}
a.textlink:after {margin:0; width:0;}
a:hover:after {
	font-family: sans-serif;
	 display:inline-block;
    height:14px;
    width:14px;
    margin-left: 7px;
    content: "";
    background:url(circle.svg) no-repeat 0 0;
    background-size: 14px 14px;
}
a.textlink:hover:after{
	background:none; 
	width:0;
	margin-left:0;
}
ul {
	margin:0;
	padding:0 0 0 20px;
}
li {
	margin:0;
	padding:0;
	font-size:20px;
	line-height: 1.3em;
}
section {
	margin:0;
	padding:0;
	position: relative;
	transition: ease;
}
.bookmarks {
	position: fixed;
	width:200px;
	right:100px;
	top:100px;
	z-index: 4;
}
/* animation sets */
/*
@keyframes slidedown {
  0% {top:-200px;}
  100% {top:140px;}
}

@keyframes slides {
  0%   {background: url(screengrabs/1.jpg) center center no-repeat; background-size:90px 53px;  opacity: 0.1;width:270px;height:203px;}
  1%   {background: url(screengrabs/1.jpg) center center no-repeat; background-size:270px 203px;  opacity: 1;width:270px;height:203px;}
  5%   {background: url(screengrabs/31.jpg) center center no-repeat; background-size:270px 203px;  opacity: 1;}
  10%  {background: url(screengrabs/27.jpg) center center no-repeat; background-size:270px 203px;  opacity: 1;}
  15%  {background: url(screengrabs/4.jpg) center center no-repeat; background-size:270px 203px;  opacity: 1;}
  20%  {background: url(screengrabs/5.jpg) center center no-repeat; background-size:270px 203px;  opacity: 1;}
  25%  {background: url(screengrabs/6.jpg) center center no-repeat; background-size:270px 203px;  opacity: 1;}
  30%  {background: url(screengrabs/7.jpg) center center no-repeat; background-size:270px 203px;  opacity: 1;}
  35%  {background: url(screengrabs/8.jpg) center center no-repeat; background-size:270px 203px;  opacity: 1;}
  40%  {background: url(screengrabs/9.jpg) center center no-repeat; background-size:270px 203px;  opacity: 1;}
  45% {background: url(screengrabs/55.gif) center center no-repeat; background-size:270px 203px;  opacity: 1;}
  50%   {background: url(screengrabs/10.jpg) center center no-repeat; background-size:270px 203px;  opacity: 1;}
  55%   {background: url(screengrabs/14.jpg) center center no-repeat; background-size:270px 203px;  opacity: 1;}
  60%  {background: url(screengrabs/26.jpg) center center no-repeat; background-size:270px 203px;  opacity: 1;}
  65%  {background: url(screengrabs/11.jpg) center center no-repeat; background-size:270px 203px;  opacity: 1;}
  70%  {background: url(screengrabs/24.jpg) center center no-repeat; background-size:270px 203px;  opacity: 1;}
  75%  {background: url(screengrabs/20.jpg) center center no-repeat; background-size:270px 203px;  opacity: 1;}
  85%  {background: url(screengrabs/17.jpg) center center no-repeat; background-size:270px 203px;  opacity: 1;}
  89%  {background: url(screengrabs/15.jpg) center center no-repeat; background-size:270px 203px;  opacity: 1;}
  91%  {background: url(screengrabs/12.png) center center no-repeat; background-size:270px 203px;  opacity: 1;}
  94% {background: url(screengrabs/22.jpg) center center no-repeat; background-size:270px 203px;  opacity: 1;}
  97% {background: url(screengrabs/21.jpg) center center no-repeat; background-size:270px 203px;  opacity: 1;width:270px;height:203px;}
  100% {background: url(screengrabs/21.jpg) center center no-repeat; background-size:90px 53px;  opacity: .1;width:0; height:0;}
}*/

.skillz {
	overflow-x: hidden;
}

.pseudo-scroller {
	pointer-events: none;
}

.isolayer {
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	z-index:-1;
}

.js .grid,
.js .grid__item,
.js .grid__link {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.grid {
	position: relative;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.grid__item {
	width: 300px;
}

.js .grid__item {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid__link {
	position: relative;
	z-index: 0;
	display: block;
	width:240px; height:180px;
}

.grid__img {
	display: block;
	max-width: 97%;
	max-height: 97%;
}

.grid__title {

	position: absolute;
	z-index: 2;
	width: 100%;
	text-align: center;
	opacity: 0;
	-webkit-transform: translate3d(0,-20px,0);
	transform: translate3d(0,-20px,0);
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
}

.grid__item:hover .grid__title {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.layer {
	position: relative;
	display: block;
}

.layer:not(:first-child) {
	position: absolute;
	top: 0;
	left: 0;
}

/* Shadow effect */
.isolayer--shadow .grid__link::before {
	content: '';
	position: absolute;
	z-index: -2;
	top: 5px;
	right: 5px;
	bottom: 5px;
	left: 5px;
	opacity: 0.6;
	background: rgba(0,0,0,0.8);
	box-shadow: 0 0 0 0 rgba(0,0,0,0.8);
	-webkit-transform: translateZ(-1px) scale(0.95);
	transform: translateZ(-1px) scale(0.95);
	-webkit-transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s;
	transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.isolayer--shadow .grid__item:hover .grid__link::before {
	opacity: 0.2;
	box-shadow: 0 0 20px 10px rgba(0,0,0,0.8);
	-webkit-transform: translateZ(-1px) scale(1);
	transform: translateZ(-1px) scale(1);
}

/* All individual isometric grid layouts (static and scrollable) */
.isolayer--scroll1 {
	width: 70vw;
	max-width: 1200px;
	height: calc(100vh - 580px);
}

.isolayer--scroll1 .grid__item {
	
	padding: 15px;
}


@-webkit-keyframes moveUp {
	100% {
		opacity: 1; 
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
	}
}

@keyframes moveUp {
	100% {
		opacity: 1; 
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
	}
}

/* Loading effect */
.js .grid {
	opacity: 0;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.js .grid.grid--loaded {
	opacity: 1;
}

.js body::after {
	content: '';
	position: fixed;
	z-index: 1000;
	top: 50%;
	left: 50%;
	width: 70px;
	height: 70px;
	margin: -35px 0 0 -35px;
	pointer-events: none;
	border: 3px solid #fff;
	border-right-color: #323f5c;
	border-radius: 50%;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	-webkit-animation: rotateCircle 0.7s linear infinite forwards;
	animation: rotateCircle 0.7s linear infinite forwards;
}

@-webkit-keyframes rotateCircle {
	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes rotateCircle {
	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}


.js body.grid-loaded::after {
	opacity: 0;
}


@keyframes balldrop {
  0%   {position:fixed;bottom: 210%;left:3%;background-size:24px 24px;height:24px;width:24px;}
  5%  {position:fixed;bottom: 210%;left:3%;background-size:24px 24px;height:24px;width:24px;}
  10%  {position:fixed;bottom: 0;left:4%;;background-size:14px 14px;height:14px;width:14px;}
  15%  {position:fixed;bottom: 80%;left:5%;background-size:24px 24px;height:24px;width:24px;}
  20%  {position:fixed;bottom: 0;left:6%;background-size:14px 14px;height:14px;width:14px;}
  26%  {position:fixed;bottom: 50%;left:7%;background-size:24px 24px;height:24px;width:24px;}
  40%  {position:fixed;bottom: 0;left:8%;background-size:12px 12px;height:12px;width:12px;}
  46%  {position:fixed;bottom: 30%;left:9%;background-size:24px 24px;height:24px;width:24px;}
  60%  {position:fixed;bottom: 0;left:11%;background-size:14px 14px;height:14px;width:14px;}
  100% {position:fixed;bottom: 0;left:15%;background-size:14px 14px;height:14px;width:14px;transition-timing-function: ease-out;}
}

@keyframes starry1 {
  0%  {position:fixed;top: -4%;right:36%;background-size:14px 14px;height:14px;width:14px;}
  100%  {position:fixed;top: 10%;right:73%;background-size:4px 4px;height:4px;width:4px;}
		}
@keyframes starry2 {
  0%  {position:fixed;top: -5%;right:55%;background-size:14px 14px;height:14px;width:14px;}
  100%  {position:fixed;top: 70%;right:85%;background-size:12px 12px;height:12px;width:12px;}
		}
@keyframes starry3 {
  0%  {position:fixed;top: -4%;right:5%;background-size:2px 2px;height:2px;width:2px;}
  100%  {position:fixed;top: 55%;right:97%;background-size:2px 2px;height:2px;width:2px;}
		}
@keyframes starry4 {
  0%  {position:fixed;top: -8%;right:84%;background-size:4px 4px;height:4px;width:4px;}
  100% {position:fixed;top: 68%;right:150%;background-size:1px 1px;height:1px;width:1px;}
}
@keyframes starry5 {
  0%   {position:fixed;top: -2%;right:13%;background-size:24px 24px;height:24px;width:24px;}
  100%  {position:fixed;top: 90%;right:93%;background-size:4px 4px;height:4px;width:4px;}
}
@keyframes starry6 {
  0%  {position:fixed;top: 14%;right:16%;background-size:14px 14px;height:14px;width:14px;}
  100%  {position:fixed;top: 22%;right:73%;background-size:4px 4px;height:4px;width:4px;}
		}
@keyframes starry7 {
  0%  {position:fixed;top: -5%;right:-5%;background-size:14px 14px;height:14px;width:14px;}
  100%  {position:fixed;top: 70%;right:85%;background-size:12px 12px;height:12px;width:12px;}
		}
@keyframes starry8 {
  0%  {position:fixed;top: -4%;right:5%;background-size:12px 12px;height:12px;width:12px;}
  100%  {position:fixed;top: 55%;right:97%;background-size:2px 2px;height:2px;width:2px;}
		}
@keyframes starry9 {
  0%  {position:fixed;top: 8%;right:-4%;background-size:4px 4px;height:4px;width:4px;}
  100% {position:fixed;top: 38%;right:150%;background-size:1px 1px;height:1px;width:1px;}
}
@keyframes starry10 {
  0%   {position:fixed;top: -2%;right:-13%;background-size:24px 24px;height:24px;width:24px;}
  100%  {position:fixed;top: 10%;right:5%;background-size:4px 4px;height:4px;width:4px;}
}

.slides {
	position: absolute;
	bottom:30%;
	right:18%;
	opacity: .5;
	background-size: 270px 203px;
    transition: all .2s allow-discrete;
	animation-name: "slides";
  	animation-duration: 90s;
	animation-delay: 4s;
}
.circle {
	font-family: sans-serif;
	 display:inline-block;
    height:1px;
    width:1px;
    margin-left: 7px;
    content: "";
    background:url(circle.svg) no-repeat 0 0;
    background-size: 14px 14px;
	position:absolute; 
	z-index: 90;
	animation-name: "balldrop";
	animation-delay: 2s;
  	animation-duration: 9s;
}
.circle1, .circle2, .circle3, .circle4, .circle5, .circle6, .circle7, .circle8, .circle9, .circle10 {
	font-family: sans-serif;
	 display:inline-block;
    height:1px;
    width:1px;
    margin-left: 7px;
    content: "";
    background:url(circle.svg) no-repeat 0 0;
    background-size: 1px 1px;
	position:absolute; 
	z-index: 90;
	opacity: .3;
}
.circle1 {
	animation-name: "starry1";
	animation-delay: 27s;
  	animation-duration: 2s;
	transition-timing-function: ease-in-out;
	
}
.circle2 {
	animation-name: "starry2";
	animation-delay: 17s;
  	animation-duration: 3s;
	transition-timing-function: ease-in-out;
	
}
.circle3 {
	animation-name: "starry3";
	animation-delay: 9s;
  	animation-duration: 2s;
	transition-timing-function: ease-in-out;
	
}
.circle4 {
	animation-name: "starry4";
	animation-delay: 25s;
  	animation-duration: 3s;
	transition-timing-function: ease-in-out;
	
}
.circle5 {
	animation-name: "starry5";
	animation-delay: 48s;
  	animation-duration:2s;
	transition-timing-function: ease-in-out;
	
}
.circle6 {
	animation-name: "starry6";
	animation-delay: 55s;
  	animation-duration: 2s;
	transition-timing-function: ease-in-out;
	
}
.circle7 {
	animation-name: "starry7";
	animation-delay: 77s;
  	animation-duration: 3s;
	transition-timing-function: ease-in-out;
	
}
.circle8 {
	animation-name: "starry8";
	animation-delay: 129s;
  	animation-duration: 2s;
	transition-timing-function: ease-in-out;
	
}
.circle9 {
	animation-name: "starry9";
	animation-delay: 33s;
  	animation-duration: 3s;
	transition-timing-function: ease-in-out;
	
}
.circle10 {
	animation-name: "starry10";
	animation-delay: 66s;
  	animation-duration:2s;
	transition-timing-function: ease-in-out;
	
}
.star, .star1, .star2, .star3, .star4, .star5, .star6, .star7, .star8 {
	font-family: sans-serif;
    display:inline-block;
    height:6px;
    width:6px;
    margin-left: 3px;
    content: "";
    background:url(circle.svg) no-repeat 0 0;
    background-size: 6px 6px;
	position:fixed; 
	z-index: 1;
	top:5%;
	right:16%;
	opacity: .25;
}
.star1 {
	top:5%;
	right:59%;
	height:3px;
    width:3px;
    margin-left: 1px;
    background-size: 3px 3px;
}
.star2 {
	top:20%;
	right:3%;
	height:1px;
    width:1px;
    margin-left: 1px;
    background-size: 1px 1px;
}
.star3 {
	top:18%;
	right:35%;
	height:4px;
    width:4px;
    margin-left: 2px;
    background-size: 4px 4px;
}
.star4 {
	top:33%;
	right:80%;
	height:3px;
    width:3px;
    margin-left: 1px;
    background-size: 3px 3px;
}
.star5 {
	top:67%;
	right:54%;
	height:6px;
    width:6px;
    margin-left: 3px;
    background-size: 6px 6px;
}
.star6 {
	top:78%;
	right:34%;
	height:6px;
    width:6px;
    margin-left: 3px;
    background-size: 6px 6px;
}
.star7 {
	top:2%;
	right:94%;
	height:33px;
    width:33px;
    margin-left: 13px;
    background-size: 33px 33px;
}
.star8 {
	top:65%;
	right:-20%;
	height:633px;
    width:633px;
    margin-left: 313px;
    background-size: 633px 633px;
	opacity:.3;
	z-index:0;
}
/* sections */
.intro {
	top:140px;
	animation-name: "slidedown";
  	animation-duration: 2s;
	padding:0 0 40px 0;
	margin-left:19%;
}
.skillz, .appdesign, .webdesign, .innovation, .research {
	
	top:140px;
	animation-name: "slidedown";
  	animation-duration: 2s;
	padding:30px 0 100px 0;
	margin-left:19%;
}

.skillz a {
	display:block;
	transition: ease-out;
}

.stickycontacts {
	position:fixed;
	z-index: 50;
	bottom:0;
	width:100%;
	background:#1A1919;
	text-align: center;
	padding: 0;
	margin:0 auto;
}
.stickycontacts a {
	display:inline-block;
	padding: 4px;
	margin: 12px 12px 24px 12px;
}
.stickycontacts a:after, .stickycontacts a:hover:after {
	background:none;
	width:0;
	height:0;
}


@media (max-width: 979px) {
	body {
		color:rgba(255,255,255,.9);
		margin-bottom: 400px;
	}
	.intro, .skillz, .appdesign, .webdesign, .innovation, .research {
		top:80px;
		padding:0 0 40px 0;
		margin-left:80px;
	}
	.slides {
		position: relative;
		top:48px;
		bottom:0;
		right:0;
		width:100%;
		display: block;	
	}
	a, a:hover, a:active, a:visited {color:#fff;}
	.star8 {
		top:85%;
		right:-30%;
		opacity:.1;
		z-index:0;
		}
	p, ul {max-width:72%;}
	.bookmarks {width:160px;right:0;top:24px;}
	.bookmarks a {font-size:18px;margin-bottom: 0;}
	.bookmarks a:hover, .bookmarks a:visited, .bookmarks a:active {font-size:19px;}
	.grid__item.hidesmall {display:none;}
	.skillz {
		margin: 0 -14px 0 0;
    	padding: 0 0 0 0;
    	height: 0;
	}
	p, li {font-size:18px;}
	h1 {font-size:32px;color:#fff;}
}
@media (min-width: 768px) and (max-width: 979px) {
	/*any tablet or landscape*/
}
@media (max-width: 767px) {

.star8 {
		top:88%;
		right:-20%;
		opacity:.1;
		z-index:0;
		}
.bookmarks {
	display: none;
	}
p, ul {max-width:80%;}
ul.grid.grid--effect-flip {max-width:auto;top:300px;}
a.hidesmall, .grid__item.hidesmall {display:none;}
.grid__item {
	width: 200px;
}
.grid__link {
	width:97%; 
	height:97%;
}
.isolayer--scroll1 .grid__item {
	padding: 8px;
}
}
@media print {
  * {
    color: #000 !important;
    background: transparent !important;
	}
}