/**
	Sprite 88
	2015 - sovoboys.net
**/
html {
	height: 100%;
}

body, #wrapper{
	position: absolute;
	overflow: hidden;
	display: table;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	padding:0;
	margin:0;
}

body{
	height: 100%;
	margin: 0;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background: rgba(255,255,255,1);
	background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(236,236,236,1) 47%, rgba(217,217,217,1) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(236,236,236,1)), color-stop(100%, rgba(217,217,217,1)));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(236,236,236,1) 47%, rgba(217,217,217,1) 100%);
	background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(236,236,236,1) 47%, rgba(217,217,217,1) 100%);
	background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(236,236,236,1) 47%, rgba(217,217,217,1) 100%);
	background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(236,236,236,1) 47%, rgba(217,217,217,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=1 );
}

.layer{
	width:100%;
	height:100%;
}

#sprite88-frame.init{display:none;}
#sprite88-frame:not(.init){display:auto;}

#sprite88-frame{
	margin:0;
	padding:0;
	list-style-type: none;
}

#sprite88-frame .sprite88{
	background-image:url(sprite_88_v1.0.3.png?build=2015-12-13-14-15) !important;
	background-repeat:no-repeat;
	overflow:hidden;
	position:absolute;
	left: 50%;
	top: 50%;
}
#sprite88-frame .sprite88.sprite88-0{
	background-position:0 0 !important;
	width:374px !important;
	margin-left: -187px;
	height:524px !important;
	margin-top: -262px;
	z-index:10;
}
#sprite88-frame .sprite88.sprite88-1{
	background-position:0 -3141px !important;
	width:596px !important;
	margin-left: -298px;
	height:137px !important;
	margin-top: -36px;
	-webkit-animation: vertical_move 12s linear infinite;
	-moz-animation: vertical_move 12s linear infinite;
	-o-animation: vertical_move 12s linear infinite;
	animation: vertical_move 12s linear infinite;
	z-index:9;
}
#sprite88-frame .sprite88.sprite88-2{
	background-position:0 -2900px !important;
	width:566px !important;
	margin-left: -283px;
	height:241px !important;
	margin-top: -186px;
	-webkit-animation: vertical_move 8s linear infinite;
	-moz-animation: vertical_move 8s linear infinite;
	-o-animation: vertical_move 8s linear infinite;
	animation: vertical_move 8s linear infinite;
	z-index:8;
}
#sprite88-frame .sprite88.sprite88-3{
	background-position:0 -2626px !important;
	width:436px !important;
	margin-left: -218px;
	height:274px !important;
	margin-top: -266px;
	-webkit-animation: vertical_move 4s linear infinite;
	-moz-animation: vertical_move 4s linear infinite;
	-o-animation: vertical_move 4s linear infinite;
	animation: vertical_move 4s linear infinite;
	z-index:7;
}
#sprite88-frame .sprite88.sprite88-4{
	background-position:-350px -2004px !important;
	width:169px !important;
	margin-left: -84px;
	height:169px !important;
	margin-top: -84px;
	-webkit-animation: rotate_cw 3s linear infinite;
	-moz-animation: rotate_cw 3s linear infinite;
	-o-animation: rotate_cw 3s linear infinite;
	animation: rotate_cw 3s linear infinite;
	z-index:6;
}
#sprite88-frame .sprite88.sprite88-5{
	background-position:0 -2354px !important;
	width:272px !important;
	margin-left: -136px;
	height:272px !important;
	margin-top: -136px;
	-webkit-animation: rotate_ccw 5s linear infinite;
	-moz-animation: rotate_ccw 5s linear infinite;
	-o-animation: rotate_ccw 5s linear infinite;
	animation: rotate_ccw 5s linear infinite;
	z-index:5;
}
#sprite88-frame .sprite88.sprite88-6{
	background-position:0 -2004px !important;
	width:350px !important;
	margin-left: -175px;
	height:350px !important;
	margin-top: -175px;
	-webkit-animation: rotate_cw 15s linear infinite;
	-moz-animation: rotate_cw 15s linear infinite;
	-o-animation: rotate_cw 15s linear infinite;
	animation: rotate_cw 15s linear infinite;
	z-index:4;
}
#sprite88-frame .sprite88.sprite88-7{
	background-position:0 -1090px !important;
	width:480px !important;
	margin-left: -240px;
	height:480px !important;
	margin-top: -240px;
	-webkit-animation: rotate_cw 9s linear infinite;
	-moz-animation: rotate_cw 9s linear infinite;
	-o-animation: rotate_cw 9s linear infinite;
	animation: rotate_cw 9s linear infinite;
	z-index:3;
}
#sprite88-frame .sprite88.sprite88-8{
	background-position:0 -1570px !important;
	width:434px !important;
	margin-left: -217px;
	height:434px !important;
	margin-top: -217px;
	-webkit-animation: rotate_ccw 11s linear infinite;
	-moz-animation: rotate_ccw 11s linear infinite;
	-o-animation: rotate_ccw 11s linear infinite;
	animation: rotate_ccw 11s linear infinite;
	z-index:2;
}
#sprite88-frame .sprite88.sprite88-9{
	background-position:0 -524px !important;
	width:566px !important;
	margin-left: -283px;
	height:566px !important;
	margin-top: -283px;
	-webkit-animation: rotate_ccw 27s linear infinite;
	-moz-animation: rotate_ccw 27s linear infinite;
	-o-animation: rotate_ccw 27s linear infinite;
	animation: rotate_ccw 27s linear infinite;
	z-index:1;
}

/* #pane{
	width: 460px;
	max-width: 460px;
	height: 80px;
	max-height: 80px;
	z-index: 100;
	position: absolute;
	left: 50%;
	bottom: 50%;
	margin-left: -230px;
	margin-bottom: -220px;
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
}
#pane .slider{
	width: auto;
	padding-top:20px;
	overflow-x: auto;
	overflow-y: hidden;
	z-index: 101;
}
#pane .nav{
	position:relative;
	z-index: 102;
	opacity:0.57;
	text-decoration: none;
	-webkit-transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-o-transition: opacity .25s ease-in-out;
	transition: opacity .25s ease-in-out;
}
#pane .nav:hover{opacity:1;} */

#pane{
  display: flex;
  align-items: center;
  justify-content: center;
	flex-flow: column;
	height: 80px;
	max-height: 80px;
	z-index: 100;
	position: absolute;
	left: 50%;
	bottom: 50%;
	margin-left: -230px;
	margin-bottom: -220px;
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
}

#pane .nav:not(:last-child){
  margin-right: 6px;
}

#pane .nav{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Helvetica Neue",sans-serif;
  background-color: #cc33a2;
  color: #fff;
  border-radius: 48px;
  height: 30px;
  max-width: 30px;
  overflow: hidden;
  padding: 9px;
  opacity: .88;
  text-decoration: none;
  transition: background-color .4s, opacity .4s, max-width .4s;
}
#pane .nav, #pane .nav *{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#pane .nav:hover, #pane .nav:focus{
  background-color: #3a88cc;
  max-width: 10rem;
  opacity: .95;
	box-shadow: 0 2px 6px rgba(0,0,0,.3)
}

#pane .nav > img{
  height: 30px;
  width: 30px;
  transition: all .4s;
}

#pane .nav > .attr{
  max-width: 0;
  transition: all .4s;
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  overflow: hidden;
  padding-left: 0;
  font-size: 14px;
}

#pane .nav:hover > .attr, #pane .nav:focus > .attr{
	padding-left: 3px;
	max-width: 14rem;
}

#pane .nav.nav-portfolio{background-color: #348a6b}
#pane .nav.nav-portfolio:hover{background-color: #4f4b86}
#pane .nav.nav-jsfiddle{background-color: #1d2229}
#pane .nav.nav-jsfiddle:hover{background-color: #0183ff}
#pane .nav.nav-deviantart{background-color: #3d4e42}
#pane .nav.nav-deviantart:hover{background-color: #46945f}
#pane .nav.nav-github{background-color: #333}
#pane .nav.nav-github:hover{background-color: #616161}
#pane .nav.nav-youtube{background-color: #c70000}
#pane .nav.nav-youtube:hover{background-color: #ff0002}
#pane .nav.nav-twitter{background-color: #2d86bf}
#pane .nav.nav-twitter:hover{background-color: #1ea1f2}
#pane .nav.nav-blog{background-color: #e65a04}
#pane .nav.nav-blog:hover{background-color: #00b7b9}
#pane .nav.nav-steam{background-color: #0e1720}
#pane .nav.nav-steam:hover{background-color: #49525d}
#pane .nav.nav-linkedin{background-color: #135475}
#pane .nav.nav-linkedin:hover{background-color: #0077b5}

@media screen and (max-width: 768px) {
	#wrapper-scale{
		-moz-transform: scale(.7);
		-webkit-transform: scale(.7);
		scale(.7);
		transform: scale(.7);
	}
	#pane {
		margin-bottom: -230px;
	}

	#pane .nav:not(:last-child){
	  margin-right: 2px;
	}

	#pane .nav{
		opacity:1;
		height: 20px;
	  max-width: 20px;
	  padding: 6px;
	}

	#pane .nav > img{
	  height: 20px;
	  width: 20px;
	}

	#pane .nav:hover > img, #pane .nav:focus > img{
		width: 0;
	}

	#pane .nav > .attr{
		font-size: 12px
	}

	#pane .nav:hover > .attr, #pane .nav:focus > .attr{
		padding-left: 0;
	}
}

@-webkit-keyframes rotate_cw {
	from{-webkit-transform:rotate(0);}
	to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes rotate_cw {
	from{-moz-transform:rotate(0);}
	to{-moz-transform:rotate(360deg);}
}
@-o-keyframes rotate_cw {
	from{-o-transform:rotate(0);}
	to{-o-transform:rotate(360deg);}
}
@keyframes rotate_cw {
	from{transform:rotate(0);}
	to{transform:rotate(360deg);}
}

@-webkit-keyframes rotate_ccw {
	from{-webkit-transform:rotate(360deg);}
	to{-webkit-transform:rotate(0);}
}
@-moz-keyframes rotate_ccw {
	from{-moz-transform:rotate(360deg);}
	to{-moz-transform:rotate(0);}
}
@-o-keyframes rotate_ccw {
	from{-o-transform:rotate(360deg);}
	to{-o-transform:rotate(0);}
}
@keyframes rotate_ccw {
	from{transform:rotate(360deg);}
	to{transform:rotate(0);}
}

@-webkit-keyframes vertical_move {
	0%{-webkit-transform:translate(0px,0px);}
	50%{-webkit-transform:translate(0px,10px);}
	100%{-webkit-transform:translate(0px,0px);}
}
@-moz-keyframes vertical_move {
	0%{-moz-transform:translate(0px,0px);}
	50%{-moz-transform:translate(0px,10px);}
	100%{-moz-transform:translate(0px,0px);}
}
@-o-keyframes vertical_move {
	0%{-o-transform:translate(0px,0px);}
	50%{-o-transform:translate(0px,10px);}
	100%{-o-transform:translate(0px,0px);}
}
@keyframes vertical_move {
	0%{transform:translate(0px,0px);}
	50%{transform:translate(0px,10px);}
	100%{transform:translate(0px,0px);}
}