@font-face {
    font-family: 'ProximaNovaRegular';
    src: url('proximanova-reg-webfont.eot');
    src: url('proximanova-reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('proximanova-reg-webfont.woff') format('woff'),
         url('proximanova-reg-webfont.ttf') format('truetype'),
         url('proximanova-reg-webfont.svg#ProximaNovaRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ProximaNovaSemibold';
    src: url('proximanova-sbold-webfont.eot');
    src: url('proximanova-sbold-webfont.eot?#iefix') format('embedded-opentype'),
         url('proximanova-sbold-webfont.woff') format('woff'),
         url('proximanova-sbold-webfont.ttf') format('truetype'),
         url('proximanova-sbold-webfont.svg#ProximaNovaSemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {
	background: #fff;
	font: 17px 'ProximaNovaRegular';
	color: #8e919a;
	line-height: 10px;
	-webkit-font-smoothing: antialiased;
}

a {
	color: #61646c;
	text-decoration: none;
	transition: 0.1s color;
	-moz-transition: 0.1s color;
	-webkit-transition: 0.1s color;
	-o-transition: 0.1s color;
}
a:hover {color: #525d83}

b {
	color: #565962;
	font-family: 'ProximaNovaSemibold';
	font-weight: normal;
}

div#loading {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0; left: 0;
	background: url(loading.gif) no-repeat center center;
	opacity: 1;
	transition: 0.3s opacity;
	-moz-transition: 0.3s opacity;
	-webkit-transition: 0.3s opacity;
	-o-transition: 0.3s opacity;
	z-index: -1;
}
div#loading.hide {opacity: 0}

div#container {
	width: 550px;
	margin: 80px auto;
	text-align: center;
	opacity: 0;
	
}

a.logo {
	display: inline-block;
	background: url(logo.png) no-repeat center center;
	width: 415px;
	height: 69px;
	margin-bottom: 80px;
	opacity: 0;
	transition: 1.3s opacity;
	-moz-transition: 1.3s opacity;
	-webkit-transition: 1.3s opacity;
	-o-transition: 1.3s opacity;
}
body.animate-done a.logo {
	opacity: 0.8;
	transition: 0.3s opacity;
	-moz-transition: 0.3s opacity;
	-webkit-transition: 0.3s opacity;
	-o-transition: 0.3s opacity;
}
body.animate a.logo {opacity: 0.8;}
body.animate-done a.logo:hover, body.animate-done a.logo:active {opacity: 1}

div.about p.welcome, div.about span, div.about p b {
	opacity: 0;
	transition: 1.3s opacity;
	-moz-transition: 1.3s opacity;
	-webkit-transition: 1.3s opacity;
	-o-transition: 1.3s opacity;
	transition-delay: 0.7s;
	-moz-transition-delay: 0.7s;
	-webkit-transition-delay: 0.7s;
	-o-transition-delay: 0.6s;
}
div.about p b {
	transition-delay: 0.4s;
	-moz-transition-delay: 0.4s;
	-webkit-transition-delay: 0.4s;
	-o-transition-delay: 0.4s;
}
body.animate div.about p.welcome,
body.animate div.about b,
body.animate div.about span,
body.animate-done div.about b,
body.animate-done div.about span,
body.animate-done div.about p.welcome {
	opacity: 1;
}

div.projects {
	height: 65px;
	margin: 70px auto;
	background: url(fade.png) no-repeat bottom center;
	padding-bottom: 9px;
	opacity: 0;
	width: 0;
	transition: 1s opacity, 1s width;
	transition-delay: 1.3s;
	-moz-transition: 1s opacity, 1s width;
	-moz-transition-delay: 1.3s;
	-webkit-transition: 1s opacity, 1s width;
	-webkit-transition-delay: 1.3s;
	-o-transition: 1s opacity, 1s width;
	-o-transition-delay: 1.3s;
	overflow: hidden;
}
div.projects .buttons {
	opacity: 0;
	transition: 1s opacity, 1s width;
	transition-delay: 2.3s;
	-moz-transition: 1s opacity, 1s width;
	-moz-transition-delay: 2.3s;
	-webkit-transition: 1s opacity, 1s width;
	-webkit-transition-delay: 2.3s;
	-o-transition: 1s opacity, 1s width;
	-o-transition-delay: 2.3s;
}
body.animate div.projects, body.animate-done div.projects {
	opacity: 1;
	width: 567px;
}
body.animate div.projects .buttons, body.animate-done div.projects .buttons {
	opacity: 1;
}
div.projects a {
	height: 72px;
	display: inline-block;
	position: relative;
}
div.projects a:hover span.normal {opacity: 0}
div.projects a:hover span.hover {opacity: 1}
div.projects a span {
	margin: 25px;
	background: url(projects.png) no-repeat;
	display: inline-block;
	transition: 0.2s opacity;
	-moz-transition: 0.2s opacity;
	-webkit-transition: 0.2s opacity;
	-o-transition: 0.2s opacity;
}
div.projects a span.hover {
	position: absolute;
	opacity: 0;
	left: -4px;
}
div.projects a.daeit span.normal {background-position: 0px 0px; width: 49px; height: 16px}
div.projects a.daeit span.hover {top: 2px; background-position: 0px -26px; width: 57px; height: 23px}
div.projects a.favtv span.normal {background-position: 0px -59px; width: 54px; height: 17px}
div.projects a.favtv span.hover {top: -4px; background-position: 0px -86px; width: 62px; height: 25px}
div.projects a.gifture span.normal {margin: 23px 25px 20px 25px; background-position: 0px -121px; width: 62px; height: 30px}
div.projects a.gifture span.hover {top: -5px; background-position: 0px -161px; width: 69px; height: 37px}
div.projects a.toaast span.normal {background-position: 0px -208px; width: 68px; height: 16px}
div.projects a.toaast span.hover {top: 2px; background-position: 0px -234px; width: 76px; height: 23px}

div.projects a.toaast:after, div.projects a.gifture:after, div.projects a.daeit:after {
	width: 1px;
	height: 72px;
	content: '';
	display: inline-block;
	background: url(separator.png) no-repeat center center;
}

div.footer {
	line-height: 8px;
	font-size: 13px;
	opacity: 0;
	transition: 1.3s opacity;
	-moz-transition: 1.3s opacity;
	-webkit-transition: 1.3s opacity;
	-o-transition: 1.3s opacity;
}
div.footer .links span {
	font-size: 20px;
	color: #cdd0d8;
	vertical-align: middle;
}
div.footer .links a {
	padding: 0 6px;
	font-size: 14px;
}
body.animate div.footer, body.animate-done div.footer {opacity: 1}