/*Page Fade In*/
.PageFadeIn{
	opacity:0;
	-webkit-animation: pagefadein 1s ease-in-out forwards;
	-moz-animation: pagefadein 1s ease-in-out forwards;
	-o-animation: pagefadein 1s ease-in-out forwards;
	-ms-animation: pagefadein 1s ease-in-out forwards;
	animation: pagefadein 1s ease-in-out forwards;
}
#textsection1{
	opacity: 0;
}
#textsection2{
	opacity: 0;
}
@-webkit-keyframes pagefadein {
  0%{opacity:0;}
  100% {opacity:1;}
}
@keyframes pagefadein {
  0%{opacity:0;}
  100% {opacity:1;}
}
@-webkit-keyframes pagefadeout {
  0%{opacity:1;}
  100% {opacity:0;}
}
@keyframes pagefadeout {
  0%{opacity:1;}
  100% {opacity:0;}
}

@keyframes label {
    0% {
		width:0%;
		opacity:0;
		margin-left:-300px;				
    	}
	100% {
		width:auto;
		opacity:1;
		margin-left:0;
    	}
}

/*Page Header*/
.Letter{
	display: inline-flex;
	margin-left:0px;
	overflow: visible;
	opacity: 0;
	vertical-align: middle !important;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	-webkit-animation: lettermove 0.5s forwards ease-in-out;
  -moz-animation: lettermove 0.5s forwards ease-in-out;
  -o-animation: lettermove 0.5s forwards ease-in-out;
  animation: lettermove 0.5s forwards ease-in-out;
}
.LetterScroll{
	display: inline-flex;
	transform: translateX(0px);
	position: relative;
	margin-left:0px;
	overflow: visible;
	opacity: 1;
	vertical-align: middle !important;
	left: 0px;
}
.horizontalscroll{
	transform: translateX(0px);
}

@-webkit-keyframes lettermove { 
	0% {opacity: 0;  -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); }
	25% {opacity: 0; }
    100% {opacity: 1; -webkit-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0);}
}
@-moz-keyframes lettermove { 
	0% {opacity: 0;  -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); }
	25% {opacity: 0; }
    100% {opacity: 1; -webkit-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0);}
}
@-o-keyframes lettermove { 
	0% {opacity: 0;  -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); }
	25% {opacity: 0; }
    100% {opacity: 1; -webkit-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0);}
}
@keyframes lettermove { 
	0% {opacity: 0;  -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); }
	25% {opacity: 0; }
    100% {opacity: 1; -webkit-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0);}
}


@-webkit-keyframes bordermove { 
	0% { border-image: linear-gradient(to bottom right, #000000, #000000, #000000, #000000, #000000) 1; } 
	20% { border-image: linear-gradient(to bottom right, #000000, #000000, #000000, #000000, #000000) 1; }
	25% { border-image: linear-gradient(to bottom right, #51349B, #000000, #000000, #000000, #000000) 1; }
	30% { border-image: linear-gradient(to bottom right, #9166ff, #51349B, #000000, #000000, #000000) 1; }
	35% { border-image: linear-gradient(to bottom right, #51349B, #9166ff, #51349B, #000000, #000000) 1; }
	40% { border-image: linear-gradient(to bottom right, #000000, #51349B, #9166ff, #51349B, #000000) 1; }
	45% { border-image: linear-gradient(to bottom right, #000000, #000000, #51349B, #9166ff, #51349B) 1; }
	50% { border-image: linear-gradient(to bottom right, #000000, #000000, #000000, #51349B, #9166ff) 1; }
	55% { border-image: linear-gradient(to bottom right, #000000, #000000, #000000, #000000, #51349B) 1; }
	60% { border-image: linear-gradient(to bottom right, #000000, #000000, #000000, #000000, #000000) 1; }
	100% { border-image: linear-gradient(to bottom right, #000000, #000000, #000000, #000000, #000000) 1; }
}
@-moz-keyframes bordermove { 
	0% { border-image: linear-gradient(to bottom right, #000000, #000000, #000000, #000000, #000000) 1; } 
	20% { border-image: linear-gradient(to bottom right, #000000, #000000, #000000, #000000, #000000) 1; }
	25% { border-image: linear-gradient(to bottom right, #51349B, #000000, #000000, #000000, #000000) 1; }
	30% { border-image: linear-gradient(to bottom right, #9166ff, #51349B, #000000, #000000, #000000) 1; }
	35% { border-image: linear-gradient(to bottom right, #51349B, #9166ff, #51349B, #000000, #000000) 1; }
	40% { border-image: linear-gradient(to bottom right, #000000, #51349B, #9166ff, #51349B, #000000) 1; }
	45% { border-image: linear-gradient(to bottom right, #000000, #000000, #51349B, #9166ff, #51349B) 1; }
	50% { border-image: linear-gradient(to bottom right, #000000, #000000, #000000, #51349B, #9166ff) 1; }
	55% { border-image: linear-gradient(to bottom right, #000000, #000000, #000000, #000000, #51349B) 1; }
	60% { border-image: linear-gradient(to bottom right, #000000, #000000, #000000, #000000, #000000) 1; }
	100% { border-image: linear-gradient(to bottom right, #000000, #000000, #000000, #000000, #000000) 1; }
}
@-o-keyframes bordermove { 
	0% { border-image: linear-gradient(to bottom right, #000000, #000000, #000000, #000000, #000000) 1; } 
	20% { border-image: linear-gradient(to bottom right, #000000, #000000, #000000, #000000, #000000) 1; }
	25% { border-image: linear-gradient(to bottom right, #51349B, #000000, #000000, #000000, #000000) 1; }
	30% { border-image: linear-gradient(to bottom right, #9166ff, #51349B, #000000, #000000, #000000) 1; }
	35% { border-image: linear-gradient(to bottom right, #51349B, #9166ff, #51349B, #000000, #000000) 1; }
	40% { border-image: linear-gradient(to bottom right, #000000, #51349B, #9166ff, #51349B, #000000) 1; }
	45% { border-image: linear-gradient(to bottom right, #000000, #000000, #51349B, #9166ff, #51349B) 1; }
	50% { border-image: linear-gradient(to bottom right, #000000, #000000, #000000, #51349B, #9166ff) 1; }
	55% { border-image: linear-gradient(to bottom right, #000000, #000000, #000000, #000000, #51349B) 1; }
	60% { border-image: linear-gradient(to bottom right, #000000, #000000, #000000, #000000, #000000) 1; }
	100% { border-image: linear-gradient(to bottom right, #000000, #000000, #000000, #000000, #000000) 1; }
}
@keyframes bordermove { 
	0% { border-image: linear-gradient(to bottom right, #000000, #000000, #000000, #000000, #000000) 1; } 
	20% { border-image: linear-gradient(to bottom right, #000000, #000000, #000000, #000000, #000000) 1; }
	25% { border-image: linear-gradient(to bottom right, #51349B, #000000, #000000, #000000, #000000) 1; }
	30% { border-image: linear-gradient(to bottom right, #9166ff, #51349B, #000000, #000000, #000000) 1; }
	35% { border-image: linear-gradient(to bottom right, #51349B, #9166ff, #51349B, #000000, #000000) 1; }
	40% { border-image: linear-gradient(to bottom right, #000000, #51349B, #9166ff, #51349B, #000000) 1; }
	45% { border-image: linear-gradient(to bottom right, #000000, #000000, #51349B, #9166ff, #51349B) 1; }
	50% { border-image: linear-gradient(to bottom right, #000000, #000000, #000000, #51349B, #9166ff) 1; }
	55% { border-image: linear-gradient(to bottom right, #000000, #000000, #000000, #000000, #51349B) 1; }
	60% { border-image: linear-gradient(to bottom right, #000000, #000000, #000000, #000000, #000000) 1; }
	100% { border-image: linear-gradient(to bottom right, #000000, #000000, #000000, #000000, #000000) 1; }
}

@-webkit-keyframes bordermovepurple { 
	0% { border-image: linear-gradient(to bottom right, #23154c, #23154c, #23154c, #23154c, #23154c) 1; } 
	20% { border-image: linear-gradient(to bottom right, #23154c, #23154c, #23154c, #23154c, #23154c) 1; }
	25% { border-image: linear-gradient(to bottom right, #51349B, #23154c, #23154c, #23154c, #23154c) 1; }
	30% { border-image: linear-gradient(to bottom right, #9166ff, #51349B, #23154c, #23154c, #23154c) 1; }
	35% { border-image: linear-gradient(to bottom right, #51349B, #9166ff, #51349B, #23154c, #23154c) 1; }
	40% { border-image: linear-gradient(to bottom right, #23154c, #51349B, #9166ff, #51349B, #23154c) 1; }
	45% { border-image: linear-gradient(to bottom right, #23154c, #23154c, #51349B, #9166ff, #51349B) 1; }
	50% { border-image: linear-gradient(to bottom right, #23154c, #23154c, #23154c, #51349B, #9166ff) 1; }
	55% { border-image: linear-gradient(to bottom right, #23154c, #23154c, #23154c, #23154c, #51349B) 1; }
	60% { border-image: linear-gradient(to bottom right, #23154c, #23154c, #23154c, #23154c, #23154c) 1; }
	100% { border-image: linear-gradient(to bottom right, #23154c, #23154c, #23154c, #23154c, #23154c) 1; }
}
@-moz-keyframes bordermovepurple { 
	0% { border-image: linear-gradient(to bottom right, #23154c, #23154c, #23154c, #23154c, #23154c) 1; } 
	20% { border-image: linear-gradient(to bottom right, #23154c, #23154c, #23154c, #23154c, #23154c) 1; }
	25% { border-image: linear-gradient(to bottom right, #51349B, #23154c, #23154c, #23154c, #23154c) 1; }
	30% { border-image: linear-gradient(to bottom right, #9166ff, #51349B, #23154c, #23154c, #23154c) 1; }
	35% { border-image: linear-gradient(to bottom right, #51349B, #9166ff, #51349B, #23154c, #23154c) 1; }
	40% { border-image: linear-gradient(to bottom right, #23154c, #51349B, #9166ff, #51349B, #23154c) 1; }
	45% { border-image: linear-gradient(to bottom right, #23154c, #23154c, #51349B, #9166ff, #51349B) 1; }
	50% { border-image: linear-gradient(to bottom right, #23154c, #23154c, #23154c, #51349B, #9166ff) 1; }
	55% { border-image: linear-gradient(to bottom right, #23154c, #23154c, #23154c, #23154c, #51349B) 1; }
	60% { border-image: linear-gradient(to bottom right, #23154c, #23154c, #23154c, #23154c, #23154c) 1; }
	100% { border-image: linear-gradient(to bottom right, #23154c, #23154c, #23154c, #23154c, #23154c) 1; }
}
@-o-keyframes bordermovepurple { 
	0% { border-image: linear-gradient(to bottom right, #23154c, #23154c, #23154c, #23154c, #23154c) 1; } 
	20% { border-image: linear-gradient(to bottom right, #23154c, #23154c, #23154c, #23154c, #23154c) 1; }
	25% { border-image: linear-gradient(to bottom right, #51349B, #23154c, #23154c, #23154c, #23154c) 1; }
	30% { border-image: linear-gradient(to bottom right, #9166ff, #51349B, #23154c, #23154c, #23154c) 1; }
	35% { border-image: linear-gradient(to bottom right, #51349B, #9166ff, #51349B, #23154c, #23154c) 1; }
	40% { border-image: linear-gradient(to bottom right, #23154c, #51349B, #9166ff, #51349B, #23154c) 1; }
	45% { border-image: linear-gradient(to bottom right, #23154c, #23154c, #51349B, #9166ff, #51349B) 1; }
	50% { border-image: linear-gradient(to bottom right, #23154c, #23154c, #23154c, #51349B, #9166ff) 1; }
	55% { border-image: linear-gradient(to bottom right, #23154c, #23154c, #23154c, #23154c, #51349B) 1; }
	60% { border-image: linear-gradient(to bottom right, #23154c, #23154c, #23154c, #23154c, #23154c) 1; }
	100% { border-image: linear-gradient(to bottom right, #23154c, #23154c, #23154c, #23154c, #23154c) 1; }
}
@keyframes bordermovepurple { 
	0% { border-image: linear-gradient(to bottom right, #23154c, #23154c, #23154c, #23154c, #23154c) 1; } 
	20% { border-image: linear-gradient(to bottom right, #23154c, #23154c, #23154c, #23154c, #23154c) 1; }
	25% { border-image: linear-gradient(to bottom right, #51349B, #23154c, #23154c, #23154c, #23154c) 1; }
	30% { border-image: linear-gradient(to bottom right, #9166ff, #51349B, #23154c, #23154c, #23154c) 1; }
	35% { border-image: linear-gradient(to bottom right, #51349B, #9166ff, #51349B, #23154c, #23154c) 1; }
	40% { border-image: linear-gradient(to bottom right, #23154c, #51349B, #9166ff, #51349B, #23154c) 1; }
	45% { border-image: linear-gradient(to bottom right, #23154c, #23154c, #51349B, #9166ff, #51349B) 1; }
	50% { border-image: linear-gradient(to bottom right, #23154c, #23154c, #23154c, #51349B, #9166ff) 1; }
	55% { border-image: linear-gradient(to bottom right, #23154c, #23154c, #23154c, #23154c, #51349B) 1; }
	60% { border-image: linear-gradient(to bottom right, #23154c, #23154c, #23154c, #23154c, #23154c) 1; }
	100% { border-image: linear-gradient(to bottom right, #23154c, #23154c, #23154c, #23154c, #23154c) 1; }
}

/*Menu Button SVG*/
#MobileMenuButton{
	display:inline-block;
	position: relative;
	top:0;
	right:0;
	width:40%;
	max-width:50px;
	min-width: 50px;
	padding:10px;
	padding-top:25px;
	padding-right: 25px;
	padding-left: 30px;
	padding-bottom: 20px;
	z-index:999999;
	color:#47ea89;
	fill:#47ea89;
	-webkit-transition: all .8s ease-in-out;
	-moz-transition: all .8s ease-in-out;
	-o-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;
}
#MobileMenuButton.stick{
	color:#47ea89;
	fill:#47ea89;
	-webkit-transition: all .8s ease-in-out;
	-moz-transition: all .8s ease-in-out;
	-o-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;
}
#MobileMenuButton2{
	display:block;
	position: fixed;
	top:0;
	left:0;
	width:40%;
	max-width:50px;
	padding:10px;
	margin:10px;
	z-index:600;
	color:#000;
	fill:#000;
	-webkit-transition: all .8s ease-in-out;
	-moz-transition: all .8s ease-in-out;
	-o-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;
}
#PhoneNavButtonContainer {
	position: absolute;
	top: 0px;
	margin-right:110px;
	right: 0;
}
#PhoneButton{
	display:inline-block;
	position: relative;
	top:0;
	right:0;
	width:40%;
	max-width:50px;
	min-width: 50px;
	padding:12px;
	margin-top:10px;
	margin-right: 10px;
	z-index:600;
	color:#47ea89;
	fill:#47ea89;
	-webkit-transition: all .8s ease-in-out;
	-moz-transition: all .8s ease-in-out;
	-o-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;
}
#PhoneButton.stick{
	color:#fff;
	fill:#fff;
	-webkit-transition: all .8s ease-in-out;
	-moz-transition: all .8s ease-in-out;
	-o-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;
}
#PhoneButton2{
	display:block;
	position: fixed;
	top:0;
	right:0;
	width:40%;
	max-width:50px;
	padding:10px;
	margin:10px;
	z-index:600;
	color:#000;
	fill:#000;
	-webkit-transition: all .8s ease-in-out;
	-moz-transition: all .8s ease-in-out;
	-o-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;
}
#PhoneButtonsContainer:hover #MobileMenuButton{
	color:#47ea89 !important;
	fill:#47ea89 !important;
	-webkit-transition: all .8s ease-in-out;
	-moz-transition: all .8s ease-in-out;
	-o-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;
}
.menulinetop{
	-webkit-animation: menulineT 0.5s ease-in-out forwards;
	-moz-animation: menulineT 0.5s ease-in-out forwards;
	-o-animation: menulineT 0.5s ease-in-out forwards;
	-ms-animation: menulineT 0.5s ease-in-out forwards;
	animation: menulineT 0.5s ease-in-out forwards;
	animation-delay:0s;
	width:0%;
}
@keyframes menulineT {
  0%{ width:0%; }
  100% { width: 100%; }
}
.menulinetopfull{
	-webkit-animation: menulineTfull 0.75s ease-in-out forwards;
	-moz-animation: menulineTfull 0.75s ease-in-out forwards;
	-o-animation: menulineTfull 0.75s ease-in-out forwards;
	-ms-animation: menulineTfull 0.75s ease-in-out forwards;
	animation: menulineTfull 0.75s ease-in-out forwards;
	animation-delay:0s;
	width:40%;
	transform-origin: 50% 50%;
}
@keyframes menulineTfull {
  	0%{ width:100%; transform: rotate(0deg) translateY(0%) translateX(0%); }
	70% { width: 100%; transform: rotate(0deg) translateY(0%) translateX(0%); }
	100% { width: 100%; transform: rotate(-45deg) translateY(48%) translateX(0%);}
}
.menulinemiddle{
	-webkit-animation: menulineM 0.5s ease-in-out forwards;
	-moz-animation: menulineM 0.5s ease-in-out forwards;
	-o-animation: menulineM 0.5s ease-in-out forwards;
	-ms-animation: menulineM 0.5s ease-in-out forwards;
	animation: menulineM 0.5s ease-in-out forwards;
	animation-delay:0s;
	width:0%;
}
@keyframes menulineM {
  0%{ width:0%; }
  100% { width: 60%; }
}
.menulinemiddlefull{
	-webkit-animation: menulineMfull 0.5s ease-in-out forwards;
	-moz-animation: menulineMfull 0.5s ease-in-out forwards;
	-o-animation: menulineMfull 0.5s ease-in-out forwards;
	-ms-animation: menulineMfull 0.5s ease-in-out forwards;
	animation: menulineMfull 0.5s ease-in-out forwards;
	animation-delay:0s;
	width:40%;
}
@keyframes menulineMfull {
  0%{ width:60%; opacity: 1; }
  50% { width: 100%; opacity: 1; }
	80% { width: 100%; opacity: 1; }
	100% { width: 100%; opacity: 0; }
}
.menulinebottom{
	-webkit-animation: menulineB 0.5s ease-in-out forwards;
	-moz-animation: menulineB 0.5s ease-in-out forwards;
	-o-animation: menulineB 0.5s ease-in-out forwards;
	-ms-animation: menulineB 0.5s ease-in-out forwards;
	animation: menulineB 0.5s ease-in-out forwards;
	animation-delay:0s;
	width:0%;
}
@keyframes menulineB {
  0%{ width:0%; }
  100% { width: 40%; }
}
.menulinebottomfull{
	-webkit-animation: menulineBfull 0.75s ease-in-out forwards;
	-moz-animation: menulineBfull 0.75s ease-in-out forwards;
	-o-animation: menulineBfull 0.75s ease-in-out forwards;
	-ms-animation: menulineBfull 0.75s ease-in-out forwards;
	animation: menulineBfull 0.75s ease-in-out forwards;
	animation-delay:0s;
	width:40%;
	transform-origin: 50% 50%;
}
@keyframes menulineBfull {
  	0%{ width:40%; opacity: 1; transform: rotate(0deg); }
	70% { width: 100%; opacity: 1; transform: rotate(0deg) translateY(0%) translateX(0%);  }
	100% { width: 100%; opacity: 1; transform: rotate(45deg) translateY(-48%) translateX(0%);}
}

/* Mouse Wheel */
.mouse {
	position:relative;
	border: 4px solid #47ea89;
	width:50px;
	height:80px;
	border-radius:85px;
	left:50%;
	transform: translateX(-50%);
}
.wheel {
	position:absolute;
	background:#47ea89;
	left:50%;
	width:10px;
	height:15px;
	border-radius:15px;
	-webkit-animation: mousewheel 1.5s ease infinite;
	-moz-animation: mousewheel 1.5s ease infinite;
	-o-animation: mousewheel 1.5s ease infinite;
	-ms-animation: mousewheel 1.5s ease infinite;
	animation: mousewheel 1.5s ease infinite;
}

@keyframes mousewheel {
    0% {
		top:15%;
		transform: translate(-50%,15%);
		opacity:1;				
    	}
	100% {
		top:40%;
		transform: translate(-50%,-40%);
		opacity:0;
    	}
}

/*Finger Print*/
.fppathmove{
	fill-rule:evenodd;
	fill: transparent;
	stroke: transparent;
	stroke-width: 0px;
	stroke-dashoffset: 200%;
	stroke-dasharray: 200%;
	opacity: 0;
	stroke: #47ea89;
	-webkit-animation: fingerprints 2s ease-in-out infinite;
	-moz-animation: fingerprints 2s ease-in-out infinite;
	-o-animation: fingerprints 2s ease-in-out infinite;
	-ms-animation: fingerprints 2s ease-in-out infinite;
	animation: fingerprints 2s ease-in-out infinite;
	animation-delay: 2s;
	transform: translateY(1000px);
}

@keyframes fingerprints {
  0%{
	  stroke-width: 0px;
	  fill: transparent;
	  stroke-dashoffset: 200%;
	  opacity:0;
	  transform: translateY(1400px);
  }
  50%{
	  stroke-width: 10px;
	  fill: transparent;
	  stroke-dashoffset: 0;
	  opacity:1;
	  transform: translateY(1400px);
  }
85%{
	  opacity:1;
	transform: translateY(1500px);
  }
  100% {
	  stroke-width: 10px;
	  fill: transparent;
	  stroke-dashoffset: 0;
	  opacity:0;
	  transform: translateY(0px);
  }
}

/* Phone Nav Logo */
@keyframes logothrob {
  0%{
	-webkit-filter: drop-shadow(0 0 0.5rem #5b37cc);
	filter: drop-shadow(0 0 0.5rem #5b37cc);
  }
  10%{
	-webkit-filter: drop-shadow(0 0 0.5rem #5b37cc);
	filter: drop-shadow(0 0 0.5rem #5b37cc);
  }
  30%{
	  -webkit-filter: drop-shadow(0 0 1rem #7448ff);
	filter: drop-shadow(0 0 1rem #7448ff);
  }
  100% {
	 -webkit-filter: drop-shadow(0 0 0.5rem #5b37cc);
	filter: drop-shadow(0 0 0.5rem #5b37cc);
  }
}
/* Spider Background */
.eyebackground{
	fill-rule:evenodd;
	fill:#ffffff;
	-webkit-animation: none;
	-moz-animation: none;
	-o-animation: none;
	-ms-animation: none;
	animation: none;
	animation-delay:0s;
}
.eyebackground-animation{
	fill-rule:evenodd;
	fill:#ffffff;
	-webkit-animation: spidereyesbackground 2s ease-in-out forwards;
	-moz-animation: spidereyesbackground 2s ease-in-out forwards;
	-o-animation: spidereyesbackground 2s ease-in-out forwards;
	-ms-animation: spidereyesbackground 2s ease-in-out forwards;
	animation: spidereyesbackground 2s ease-in-out forwards;
	animation-delay:0s;
}
@-webkit-keyframes spidereyesbackground { 
 0%{
	  opacity:0;
  }
  100% {
	  opacity:1;
  }
}
@-moz-keyframes spidereyesbackground { 
0%{
	  opacity:0;
  }
  100% {
	  opacity:1;
  }
}
@-o-keyframes spidereyesbackground { 
 0%{
	  opacity:0;
  }
  100% {
	  opacity:1;
  }
}
@keyframes spidereyesbackground {
  0%{
	  opacity:0;
  }
  100% {
	  opacity:1;
  }
}



.bodybackground {
	stroke: transparent;
	stroke-width: 0px;
	-webkit-animation: none;
	-moz-animation: none;
	-o-animation: none;
	-ms-animation: none;
	animation: none;
	fill: transparent;
	animation-delay:0.2s;
	fill-rule:evenodd;
	filter: none;
}
.bodybackground-animation {
	stroke: transparent;
	stroke-width: 0px;
	-webkit-animation: spiderbodybackground 2s ease-in-out forwards;
	-moz-animation: spiderbodybackground 2s ease-in-out forwards;
	-o-animation: spiderbodybackground 2s ease-in-out forwards;
	-ms-animation: spiderbodybackground 2s ease-in-out forwards;
	animation: spiderbodybackground 2s ease-in-out forwards;
	fill: transparent;
	animation-delay:0.2s;
	fill-rule:evenodd;
}
@-webkit-keyframes spiderbodybackground { 
 0%{
	  opacity:0;
	  fill: #ffffff;
  }
  100% {
	  opacity:1;
	  fill: #efefef;
  }
}
@-moz-keyframes spiderbodybackground { 
0%{
	  opacity:0;
	  fill: #ffffff;
  }
  100% {
	  opacity:1;
	  fill: #efefef;
  }
}
@-o-keyframes spiderbodybackground { 
 0%{
	  opacity:0;
	  fill: #ffffff;
  }
  100% {
	  opacity:1;
	  fill: #efefef;
  }
}
@keyframes spiderbodybackground {
  0%{
	  opacity:0;
	  fill: #ffffff;
  }
  100% {
	  opacity:1;
	  fill: #efefef;
  }
}

.rightleg4background {
	stroke: #fff;
	stroke-width: 500px;
	stroke-dashoffset: 250%;
	stroke-dasharray: 250%;
	-webkit-animation: none;
	-moz-animation: none;
	-o-animation: none;
	-ms-animation: none;
	animation: none;
	fill: transparent;
	animation-delay:1.6s;
	fill-rule:evenodd;
	opacity:0;
}
.rightleg4background-animation {
	stroke: #fff;
	stroke-width: 500px;
	stroke-dashoffset: 250%;
	stroke-dasharray: 250%;
	-webkit-animation: rightdrawbackground 2s ease-in-out forwards;
	-moz-animation: rightdrawbackground 2s ease-in-out forwards;
	-o-animation: rightdrawbackground 2s ease-in-out forwards;
	-ms-animation: rightdrawbackground 2s ease-in-out forwards;
	animation: rightdrawbackground 2s ease-in-out forwards;
	fill: transparent;
	animation-delay:1.6s;
	fill-rule:evenodd;
	opacity:0;
}
.rightleg3background {
	stroke: #fff;
	stroke-width: 500px;
	stroke-dashoffset: 250%;
	stroke-dasharray: 250%;
	-webkit-animation: none;
	-moz-animation: none;
	-o-animation: none;
	-ms-animation: none;
	animation: none;
	fill: transparent;
	animation-delay:1.4s;
	fill-rule:evenodd;
	opacity:0;
}
.rightleg3background-animation {
	stroke: #fff;
	stroke-width: 500px;
	stroke-dashoffset: 250%;
	stroke-dasharray: 250%;
	-webkit-animation: rightdrawbackground 2s ease-in-out forwards;
	-moz-animation: rightdrawbackground 2s ease-in-out forwards;
	-o-animation: rightdrawbackground 2s ease-in-out forwards;
	-ms-animation: rightdrawbackground 2s ease-in-out forwards;
	animation: rightdrawbackground 2s ease-in-out forwards;
	fill: transparent;
	animation-delay:1.4s;
	fill-rule:evenodd;
	opacity:0;
}
.rightleg2background {
	stroke: #fff;
	stroke-width: 500px;
	stroke-dashoffset: 250%;
	stroke-dasharray: 250%;
	-webkit-animation: none;
	-moz-animation: none;
	-o-animation: none;
	-ms-animation: none;
	animation: none;
	fill: transparent;
	animation-delay:1.2s;
	fill-rule:evenodd;
	opacity:0;
}
.rightleg2background-animation {
	stroke: #fff;
	stroke-width: 500px;
	stroke-dashoffset: 250%;
	stroke-dasharray: 250%;
	-webkit-animation: rightdrawbackground 2s ease-in-out forwards;
	-moz-animation: rightdrawbackground 2s ease-in-out forwards;
	-o-animation: rightdrawbackground 2s ease-in-out forwards;
	-ms-animation: rightdrawbackground 2s ease-in-out forwards;
	animation: rightdrawbackground 2s ease-in-out forwards;
	fill: transparent;
	animation-delay:1.2s;
	fill-rule:evenodd;
	opacity:0;
}
.rightleg1background {
	stroke: #fff;
	stroke-width: 500px;
	stroke-dashoffset: 250%;
	stroke-dasharray: 250%;
	-webkit-animation: none;
	-moz-animation: none;
	-o-animation: none;
	-ms-animation: none;
	animation: none;
	fill: transparent;
	animation-delay:1s;
	fill-rule:evenodd;
	opacity:0;
}
.rightleg1background-animation {
	stroke: #fff;
	stroke-width: 500px;
	stroke-dashoffset: 250%;
	stroke-dasharray: 250%;
	-webkit-animation: rightdrawbackground 2s ease-in-out forwards;
	-moz-animation: rightdrawbackground 2s ease-in-out forwards;
	-o-animation: rightdrawbackground 2s ease-in-out forwards;
	-ms-animation: rightdrawbackground 2s ease-in-out forwards;
	animation: rightdrawbackground 2s ease-in-out forwards;
	fill: transparent;
	animation-delay:1s;
	fill-rule:evenodd;
	opacity:0;
}


@keyframes rightdrawbackground {
  0%{
	  stroke: #efefef;
	  fill: transparent;
	  stroke-dashoffset: 0;
	  opacity:0;
  }
  90% {
  }
  100% {
	  stroke: #efefef;
	  fill: #efefef;
	  stroke-dashoffset: 0;
	  opacity:1;
  }
}





/* Web Animation */

#Web1 {
  stroke: transparent;
  fill: transparent;
}
.webleg{
	stroke-miterlimit:10;
}
.webleg-animation {
	stroke: #51349B;
	stroke-width: 5px;
	stroke-dashoffset: 250%;
	stroke-dasharray: 250%;
	-webkit-animation: web 90s linear 1 forwards;
	-moz-animation: web 90s linear 1 forwards;
	-o-animation: web 90s linear 1 forwards;
	-ms-animation: web 90s linear 1 forwards;
	animation: web 90s linear 1 forwards;
	fill: transparent;
}
.webarm1{
	stroke-miterlimit:10; 
}
.webarm1-animation {
	stroke: #51349B;
	stroke-width: 5px;
	stroke-dashoffset: 250%;
	stroke-dasharray: 250%;
	-webkit-animation: web 30s linear 1 forwards;
	-moz-animation: web 30s linear 1 forwards;
	-o-animation: web 30s linear 1 forwards;
	-ms-animation: web 30s linear 1 forwards;
	animation: web 30s linear 1 forwards;
	animation-delay:1s;
	fill: transparent;
}
.webarm2{
	stroke-miterlimit:10; 
}
.webarm2-animation {
	stroke: #51349B;
	stroke-width: 5px;
	stroke-dashoffset: 250%;
	stroke-dasharray: 250%;
	-webkit-animation: web 30s linear 1 forwards;
	-moz-animation: web 30s linear 1 forwards;
	-o-animation: web 30s linear 1 forwards;
	-ms-animation: web 30s linear 1 forwards;
	animation: web 30s linear 1 forwards;
	animation-delay:2s;
	fill: transparent;
}
.webarm3{
	stroke-miterlimit:10; 
}
.webarm3-animation {
	stroke: #51349B;
	stroke-width: 5px;
	stroke-dashoffset: 250%;
	stroke-dasharray: 250%;
	-webkit-animation: web 30s linear 1 forwards;
	-moz-animation: web 30s linear 1 forwards;
	-o-animation: web 30s linear 1 forwards;
	-ms-animation: web 30s linear 1 forwards;
	animation: web 30s linear 1 forwards;
	animation-delay:3s;
	fill: transparent;
}
.webarm4{
	stroke-miterlimit:10; 
}
.webarm4-animation {
	stroke: #51349B;
	stroke-width: 5px;
	stroke-dashoffset: 250%;
	stroke-dasharray: 250%;
	-webkit-animation: web 30s linear 1 forwards;
	-moz-animation: web 30s linear 1 forwards;
	-o-animation: web 30s linear 1 forwards;
	-ms-animation: web 30s linear 1 forwards;
	animation: web 30s linear 1 forwards;
	animation-delay:4s;
	fill: transparent;
}
.webarm5{
	stroke-miterlimit:10; 
}
.webarm5-animation {
	stroke: #51349B;
	stroke-width: 5px;
	stroke-dashoffset: 250%;
	stroke-dasharray: 250%;
	-webkit-animation: web 30s linear 1 forwards;
	-moz-animation: web 30s linear 1 forwards;
	-o-animation: web 30s linear 1 forwards;
	-ms-animation: web 30s linear 1 forwards;
	animation: web 30s linear 1 forwards;
	animation-delay:5s;
	fill: transparent;
}
.webarm6{
	stroke-miterlimit:10; 
}
.webarm6-animation {
	stroke: #51349B;
	stroke-width: 5px;
	stroke-dashoffset: 250%;
	stroke-dasharray: 250%;
	-webkit-animation: web 30s linear 1 forwards;
	-moz-animation: web 30s linear 1 forwards;
	-o-animation: web 30s linear 1 forwards;
	-ms-animation: web 30s linear 1 forwards;
	animation: web 30s linear 1 forwards;
	animation-delay:6s;
	fill: transparent;
}
.webarm7{
	stroke-miterlimit:10; 
}
.webarm7-animation {
	stroke: #51349B;
	stroke-width: 5px;
	stroke-dashoffset: 250%;
	stroke-dasharray: 250%;
	-webkit-animation: web 30s linear 1 forwards;
	-moz-animation: web 30s linear 1 forwards;
	-o-animation: web 30s linear 1 forwards;
	-ms-animation: web 30s linear 1 forwards;
	animation: web 30s linear 1 forwards;
	animation-delay:7s;
	fill: transparent;
}
@keyframes web {
    0%{stroke-dashoffset: 250%;}
  100% {stroke-dashoffset: 0;}
}
/* Phone Home Logo */
.textpitphone{
	font-size:125.51px;
	font-family:Pittsburgh;
	fill:#44ef44;
	-webkit-animation: pitttextphone 2s ease-in-out forwards;
	-moz-animation: pitttextphone 2s ease-in-out forwards;
	-o-animation: pitttextphone 2s ease-in-out forwards;
	-ms-animation: pitttextphone 2s ease-in-out forwards;
	animation: pitttextphone 2s ease-in-out forwards;
	animation-delay:5.5s;
	opacity:0;
}
@keyframes pitttextphone {
    0% {
		stroke: #44ef44;
		opacity:0;
		fill: #44ef44;
    	}
	100% {
		stroke: #44ef44;
		opacity:1;
		fill:#44ef44;
    	}
}

/* Spider Logo Animation */

.textweb{
	font-size:220.19px;
	font-family:WebDesigns;
	fill:transparent;
	stroke-dashoffset: 125%;
  stroke-dasharray: 125%;
	-webkit-animation: webdesigns 4s ease-in-out forwards;
	-moz-animation: webdesigns 4s ease-in-out forwards;
	-o-animation: webdesigns 4s ease-in-out forwards;
	-ms-animation: webdesigns 4s ease-in-out forwards;
	animation: webdesigns 4s ease-in-out forwards;
	animation-delay:5.5s
}
.textwebheader{
	font-size:220.19px;
	font-family:WebDesigns;
	fill:transparent;
	stroke-dashoffset: 125%;
  stroke-dasharray: 125%;
	-webkit-animation: webdesigns 4s ease-in-out forwards;
	-moz-animation: webdesigns 4s ease-in-out forwards;
	-o-animation: webdesigns 4s ease-in-out forwards;
	-ms-animation: webdesigns 4s ease-in-out forwards;
	animation: webdesigns 4s ease-in-out forwards;
	animation-delay:3.5s
}

@keyframes webdesigns {
    0% {
		stroke-dashoffset: 125%;
		stroke: #fff;
		opacity:0;
		fill: transparent;
    	}
	70% {
		stroke: #ffffff;
		fill: transparent;
		}
    100% {
		stroke: #ffffff;
		stroke-dashoffset:0%;
		opacity:1;
		fill:#ffffff;
    	}
}

.textpit{
	font-size:125.51px;
	font-family:Pittsburgh;
	fill:#44ef44;
}

.textpitmove{
	transform: translateX(-300px);
	-webkit-animation: pittsburgh 1s ease-in-out forwards;
	;
	-moz-animation: pittsburgh 1s ease-in-out forwards;
	-o-animation: pittsburgh 1s ease-in-out forwards;
	-ms-animation: pittsburgh 1s ease-in-out forwards;
	animation: pittsburgh 1s ease-in-out forwards;
	animation-delay:5s;
	opacity:0;
	}

@keyframes pittsburgh {
    0% {
		transform:translateX(-300px);
		opacity:0;				
    	}
	100% {
		transform:translateX(0px);
		opacity:1;
		
    	}
}
.eye{
	fill-rule:evenodd;
	fill:#523996;
	-webkit-animation: spidereyes 4s ease-in-out;
	-moz-animation: spidereyes 4s ease-in-out;
	-o-animation: spidereyes 4s ease-in-out;
	-ms-animation: spidereyes 4s ease-in-out;
	animation: spidereyes 4s ease-in-out;
	-webkit-transition: all 1s ease-in-out;	
	transition: all 1s ease-in-out;
	animation-delay:0s;
}
@keyframes spidereyes {
  0%{opacity:0; fill:#523996;}
  40%{opacity:0.5; fill:#44ef44;}
  50%{opacity:0.5; fill:#47ea89;}
  50%{opacity:0.5; fill:#44ef44;}
  100% {opacity:1; fill:#523996;}
}
#Spider{
	width: 100%;
	transform-origin: 50% 50%;
	padding: 0px;
	overflow: visible;
	-webkit-filter: drop-shadow(0 0 0.4rem #7448ff); 
	filter: drop-shadow(0 0 0.4rem #7448ff); 
	-webkit-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	-webkit-touch-action: auto;
	touch-action: auto;
}
#Spider:hover { 
	-webkit-filter: drop-shadow(0 0 1rem #7448ff); 
	filter: drop-shadow(0 0 1rem #7448ff); 
	transition: all 1s ease-in-out; 
}
.body {
	stroke: transparent;
	stroke-width: 0px;
	-webkit-animation: spiderbody 2s ease-in-out forwards;
	-moz-animation: spiderbody 2s ease-in-out forwards;
	-o-animation: spiderbody 2s ease-in-out forwards;
	-ms-animation: spiderbody 2s ease-in-out forwards;
	animation: spiderbody 2s ease-in-out forwards;
	animation-delay:0.2s;
	fill-rule:evenodd;
    fill: #000;
	opacity:0;
}
@keyframes spiderbody {
  0%{opacity:0;}
  100% {opacity:1;}
}


.leftleg4 {
	stroke: #000;
	stroke-width: 100px;
	stroke-dashoffset: 250%;
	stroke-dasharray: 250%;
	-webkit-animation: legdraw 4s ease-in-out forwards;
	-moz-animation: legdraw 4s ease-in-out forwards;
	-o-animation: legdraw 4s ease-in-out forwards;
	-ms-animation: legdraw 4s ease-in-out forwards;
	animation: legdraw 4s ease-in-out forwards;
	fill: transparent;
	animation-delay:2.2s;
	fill-rule:evenodd;
}
.leftleg3 {
	stroke: #000;
	stroke-width: 100px;
	stroke-dashoffset: 250%;
	stroke-dasharray: 250%;
	-webkit-animation: legdraw 2s ease-in-out forwards;
	-moz-animation: legdraw 2s ease-in-out forwards;
	-o-animation: legdraw 2s ease-in-out forwards;
	-ms-animation: legdraw 2s ease-in-out forwards;
	animation: legdraw 2s ease-in-out forwards;
	fill: transparent;
	animation-delay:2s;
	fill-rule:evenodd;
}
.leftleg2 {
	stroke: #000;
	stroke-width: 100px;
	stroke-dashoffset: 250%;
	stroke-dasharray: 250%;
	-webkit-animation: legdraw 2s ease-in-out forwards;
	-moz-animation: legdraw 2s ease-in-out forwards;
	-o-animation: legdraw 2s ease-in-out forwards;
	-ms-animation: legdraw 2s ease-in-out forwards;
	animation: legdraw 2s ease-in-out forwards;
	fill: transparent;
	animation-delay:1.8s;
	fill-rule:evenodd;
}
.leftleg1 {
	stroke: #000;
	stroke-width: 100px;
	stroke-dashoffset: 250%;
	stroke-dasharray: 250%;
	-webkit-animation: legdraw 2s ease-in-out forwards;
	-moz-animation: legdraw 2s ease-in-out forwards;
	-o-animation: legdraw 2s ease-in-out forwards;
	-ms-animation: legdraw 2s ease-in-out forwards;
	animation: legdraw 2s ease-in-out forwards;
	fill: transparent;
	animation-delay:1.6s;
	fill-rule:evenodd;
}
.rightleg4 {
	stroke: #000;
	stroke-width: 100px;
	stroke-dashoffset: 250%;
	stroke-dasharray: 250%;
	-webkit-animation: legdraw 4s ease-in-out forwards;
	-moz-animation: legdraw 4s ease-in-out forwards;
	-o-animation: legdraw 4s ease-in-out forwards;
	-ms-animation: legdraw 4s ease-in-out forwards;
	animation: legdraw 4s ease-in-out forwards;
	fill: transparent;
	animation-delay:2.2s;
	fill-rule:evenodd;
}
.rightleg3 {
	stroke: #000;
	stroke-width: 100px;
	stroke-dashoffset: 250%;
	stroke-dasharray: 250%;
	-webkit-animation: legdraw 2s ease-in-out forwards;
	-moz-animation: legdraw 2s ease-in-out forwards;
	-o-animation: legdraw 2s ease-in-out forwards;
	-ms-animation: legdraw 2s ease-in-out forwards;
	animation: legdraw 2s ease-in-out forwards;
	fill: transparent;
	animation-delay:2s;
	fill-rule:evenodd;
}
.rightleg2 {
	stroke: #000;
	stroke-width: 100px;
	stroke-dashoffset: 250%;
	stroke-dasharray: 250%;
	-webkit-animation: legdraw 2s ease-in-out forwards;
	-moz-animation: legdraw 2s ease-in-out forwards;
	-o-animation: legdraw 2s ease-in-out forwards;
	-ms-animation: legdraw 2s ease-in-out forwards;
	animation: legdraw 2s ease-in-out forwards;
	fill: transparent;
	animation-delay:1.8s;
	fill-rule:evenodd;
}
.rightleg1 {
	stroke: #000;
	stroke-width: 100px;
	stroke-dashoffset: 250%;
	stroke-dasharray: 250%;
	-webkit-animation: legdraw 2s ease-in-out forwards;
	-moz-animation: legdraw 2s ease-in-out forwards;
	-o-animation: legdraw 2s ease-in-out forwards;
	-ms-animation: legdraw 2s ease-in-out forwards;
	animation: legdraw 2s ease-in-out forwards;
	fill: transparent;
	animation-delay:1.6s;
	fill-rule:evenodd;
}

@keyframes legdraw {
  0%{stroke-dashoffset: 250%;}
  100% {stroke-dashoffset: 0;}
}


/* Portfolio */

@keyframes labeltext {
    0% {
		opacity:0;				
    	}
	100% {
		opacity:1;
    	}
}

/*Image Appear Animation*/

.imagescrollanimationin{
	-webkit-animation: imagescrollanimation 0.5s ease-in-out forwards;
	-moz-animation: imagescrollanimation 0.5s ease-in-out forwards;
	-o-animation: imagescrollanimation 0.5s ease-in-out forwards;
	-ms-animation: imagescrollanimation 0.5s ease-in-out forwards;
	animation: imagescrollanimation 0.5s ease-in-out forwards;
	animation-delay: 0.5s;
}
@-webkit-keyframes imagescrollanimation { 
	0% {transform: scaleY(0%);}
  100% {transform: scaleY(100%);}
}
@-moz-keyframes imagescrollanimation { 
	0% {transform: scaleY(0%);}
  100% {transform: scaleY(100%);}
}
@-o-keyframes imagescrollanimation { 
	0% {transform: scaleY(0%);}
  100% {transform: scaleY(100%);}
}
@keyframes imagescrollanimation {
    0% {transform: scaleY(0%);}
  100% {transform: scaleY(100%);}
}


@-webkit-keyframes slideInLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}




/*Image Slider/Fader*/
 #stage {
    margin: 0;
    width: 100%;
    height: 100%;
	 overflow: hidden;
	 position: absolute;
	 top:0;
	 left: 0;
	 z-index: 1;
  }

  #stage a {
    position: absolute;
	min-width: 100%;
    min-height: 100%;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
	background-position:center center;
  }

  #stage a:nth-of-type(1) {
    animation-name: fader;
    animation-delay: 4s;
    animation-duration: 1s;
    z-index: 20;
  }
  #stage a:nth-of-type(2) {
    z-index: 10;
  }
  #stage a:nth-of-type(n+3) {
    display: none;
  }

  @keyframes fader {
    from { opacity: 1.0; }
    to   { opacity: 0.0; }
  }