body{
	overflow:hidden;
	background-color:#f1b3a7;
	transition-duration:2s;
	height:100%;
	width:100%;
	
}

.container{
	position:absolute;
	top:50%;
	left:50%;
}

h1{
	color:white;
	font-size:.8em;
	font-family:montserratReg;
	line-height:1.5em;
	letter-spacing:.1em;
}

h2{
	color:white;
	font-size:.75em;
	font-family:montserratHair;
	line-height:1.5em;
	letter-spacing:.1em;
}
a{
	text-decoration:none;
}

@font-face{
	font-family:montserratReg;
	src:url(../fonts/montserrat-regular-webfont.eot);
	src:url(../fonts/montserrat-regular-webfont.svg)format('svg');
	src:url(../fonts/montserrat-regular-webfont.ttf)format('truetype');
	src:url(../fonts/montserrat-regular-webfont.woff)format('woff');
}

@font-face{
	font-family:montserratHair;
	src:url(../fonts/montserrat-hairline-webfont.eot);
	src:url(../fonts/montserrat-hairline-webfont.svg)format('svg');
	src:url(../fonts/montserrat-hairline-webfont.ttf)format('truetype');
	src:url(../fonts/montserrat-hairline-webfont.woff)format('woff');
}

/****NAV START****/
/*.nav2{
	z-index:1001;
	width:100%;
	height:60px;
	position:fixed;
	top:-60;
	
	opacity:0;
	
	background-color:green;	
	transition-duration:1s;
}

#navContainer{
	perspective:1500px;
	perspective-origin:top center;
	z-index:10000;
	position:absolute;
	width:100vw;
}

.nav{
	height:60px;
	width:978px;
	margin-left:auto;
	margin-right:auto;
	
	z-index:10000;
	
	
	transition: 400ms transform cubic-bezier(0.355, 0.110, 0.200, 1.605);
	transform:rotateX(-90deg);
	transform-origin:top;
	
	background-color:rgba(200,200,200,0.6);
	border:white solid 2px;
	border-top:none;
}

.navAnimate{
	-webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.navActive{
	-webkit-animation-name: navActive;
  animation-name: navActive;
  -webkit-transform-origin: center top;
  transform-origin: center top;
}

@-webkit-keyframes navActive {
	
	0%{
		transform:rotateX(-90deg);
	}
	
	100%{
		transform:rotateX(0deg);
	}
}

.navDeactive{
	-webkit-animation-name: navDeactive;
  animation-name: navDeactive;
  -webkit-transform-origin: center top;
  transform-origin: center top;
}

@-webkit-keyframes navDeactive {
	
	0%{
		transform:rotateX(0deg);
	}
	
	100%{
		transform:rotateX(-90deg);
	}
}*/

#instructions{
	position:absolute;
	top:50%;
	left:50%;
	transform:scale(0) translate(-50%,-50%);
	padding:1em;
	border:solid white 2px;
	opacity:0;
	z-index:100;
}

.instructionAct{
	-webkit-animation-name: instructionAct;
  animation-name: instructionAct;
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

@-webkit-keyframes instructionAct {
	
	0%{
		transform:scale(0) translate(-50%,-50%);
		opacity:0;
	}
	
	100%{
		transform:scale(1) translate(-50%,-50%);
		opacity:1;
	}
}

.animateHalf {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* SHARE */

#share{
	position:absolute;
	top:92.5%;
	left:50%;
	z-index:103;
	
}

.smedia{
	position:absolute;
	height:5vh;
	width:5vh;
	border-radius:50%;
	animation:ease-in-out;
	transform:translate(-50%, 10vh);
	transition: transform 0.5s cubic-bezier(.58,-0.39,.54,1.45);
	
}

#fb{
	margin-left:-7.5vh;
	background-image:url(../images/circle-fb-01.png);
	background-size:contain;
}

#twit{
	transition-delay:.1s;
	background-image:url(../images/circle-twitter-01.png);
	background-size:contain;
}

#link{
	margin-left:7.5vh;
	transition-delay:.2s;
	background-image:url(../images/circle-link-01.png);
	background-size:contain;
}

.smActive{
	transform:translate(-50%, 0);
	-moz-transform:translate(-50%, 0);
  -ms-transform:translate(-50%, 0);
  -webkit-transform:translate(-50%, 0);
  -o-transform:translate(-50%, 0);
  transition: transform 0.5s cubic-bezier(.58,-0.39,.54,1.45);	
  -moz-transition: transform 0.5s cubic-bezier(.58,-0.39,.54,1.45);
  -ms-transition: transform 0.5s cubic-bezier(.58,-0.39,.54,1.45);
  -webkit-transition: transform 0.5s cubic-bezier(.58,-0.39,.54,1.45);
  -o-transition: transform 0.5s cubic-bezier(.58,-0.39,.54,1.45);	
}

.clicked{
	transform:translateY(-5vh) rotateY(180deg);
}

/****NAV END****/

/****BROWSER SUPPORT*****/

#switchBrowser{
	position:absolute;
	height:100%;
	width:100%;
	background-color:#f1b3a7;
	z-index:101;
	display:none;
}

#switchBrowserCont{
	padding:1em;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

.switch{
	text-align:center;
	line-height:2em;
}

.chromeLine{
	display:block;
	background-color:white;
	width:0vh;
	height:.25vh;
	margin-top:.75em;
	margin-left:auto;
	margin-right:auto;
	transition: all .3s cubic-bezier(.58,-0.39,.54,1.45);
	

}

.chromeLineAct{
	width:25vh;
}

.chromeLogo{
	display:block;
	height:20vh;
	width:20vh;
	background-image:url(../images/google-Chrome-Logo.png);
	background-size:contain;
	margin-top:1em;
	margin-right:auto;
	margin-left:auto;
	transition: all .3s ease-in-out;
	transform:scale(.3) rotate(-90deg);
	opacity:1;
	transition-delay:.25s;
}

.chromeLogoAct{
	transform:scale(1) rotate(0deg);
	opacity:1;
}



/****BROWSER SUPPORT END*****/

/****SHAPES START****/

#circle1{
	width:50vh;
	height:50vh;
	
	position:absolute;
	top:50%;
	left:50%;
	
	transform:scale(0) translate(-50%, -50%);
	
	opacity:.5;
	background-color:blue;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	
	z-index:10;
}

.james{
	-webkit-animation-name: james;
  animation-name: james;
  -webkit-transform-origin: center center;
  transform-origin: center center;
	
}

@-webkit-keyframes james {
	0%, 100%{
		transform:scale(0);
		margin-top:-25vh;
		margin-left:-25vh;
		
	}
	
	50%{
		transform:scale(1);
		margin-top:-25vh;
		margin-left:-25vh;
		
	}
}

.horizontalLine{
	height:10vh;
	width:50vw;
	clear:both;
	
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
}

.lineLR{
	height:100%;
	width:0%;
	background-color:rgba(103,103,103,0.50);
}

.lineRL{
	height:100%;
	width:0%;
	background-color:rgba(103,103,103,0.50);
}

.leftLine{
	float:left;
}

#line1{
	z-index:12;
	margin-top:-20vh;
}

#line2{
	z-index:8;
}

#line3{
	z-index:12;
	margin-top:20vh;
}

#frameLrgCont{
	position:absolute;
	
	height:100vh;
	width:100vw;
}

.frame{
	background-color:#C783DD;
	
	-webkit-animation-duration: 2s;
  	animation-duration: 2s;
 	-webkit-animation-fill-mode: both;
 	animation-fill-mode: both;
	animation: all 3s ease-in-out;
}

#frameBottom{
	height:10px;
	width:100%;
	position:absolute;
	bottom:-10px;
}

#frameTop{
	height:10px;
	width:100%;
	position:absolute;
	top:-10px;
}

#frameRight{
	width:10px;
	height:100vh;
	position:absolute;
	right:-10px;
}

#frameLeft{
	width:10px;
	height:100vh;
	position:absolute;
	left:-10px;
}

#square1{
	background-color:#72DFA6;
	width:60vh;
	height:60vh;
	z-index:1;
	opacity:.5;
	
	position:absolute;
	top:50%;
	left:50%;
	/*transform:translate(50%,50%);*/
	
	transform:scale(0);
}

.bg{
	-webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

#bg1{
	height:100vh;
	width:100vw;
	
	position:absolute;
	transform:scale(0);
	
	background-color:#a7d9c0;
	
}

#bg2{
	height:80vh;
	width:80vw;
	
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%) scale(0);
	
	background-color:#6ac39b;
	/*box-shadow:inset 0px 0px 20px 0px;*/
	
}

#bg3{
	height:60vh;
	width:60vw;
	
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%) scale(0);
	
	background-color:#2aa36a;
	/*box-shadow:inset 0px 0px 20px 0px;*/
	

}

#bg4{
	height:40vh;
	width:40vw;
	
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%) scale(0);
	
	background-color:#167746;
	/*box-shadow:inset 0px 0px 20px 0px;*/
	
}

#bg5{
	height:20vh;
	width:20vw;
	
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%) scale(0);
	
	background-color:#0a4f2b;
	
}



/* END SHAPES */



/****Animation Start****/

.is-paused{
	animation-play-state:paused;
}

.bg1{
	-webkit-animation-name: bg1;
  animation-name: bg1;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes bg1 {
	
	0%, 90%{
		transform:scale(0);
	}
	
	50%{
		transform:scale(1);
	}
}

.bg2{
	-webkit-animation-name: bg2;
  animation-name: bg2;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes bg2 {
	
	0%, 100%{
		transform:scale(0);
		margin-top:-40vh;
		margin-left:-40vw;
	}
	
	50%{
		transform:scale(1);
		margin-top:-40vh;
		margin-left:-40vw;
	}
	
}

.bg3{
	-webkit-animation-name: bg3;
  animation-name: bg3;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes bg3 {
	
	0%, 100%{
		transform:scale(0);
		margin-top:-30vh;
		margin-left:-30vw;
	}
	
	50%{
		transform:scale(1);
		margin-top:-30vh;
		margin-left:-30vw;
	}
	
}

.bg4{
	-webkit-animation-name: bg4;
  animation-name: bg4;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes bg4 {
	
	0%, 100%{
		transform:scale(0);
		margin-top:-20vh;
		margin-left:-20vw;
	}
	
	50%{
		transform:scale(1);
		margin-top:-20vh;
		margin-left:-20vw;
	}
	
}

.bg5{
	-webkit-animation-name: bg5;
  animation-name: bg5;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes bg5 {
	
	0%, 100%{
		transform:scale(0);
		margin-top:-10vh;
		margin-left:-10vw;
	}
	
	50%{
		transform:scale(1);
		margin-top:-10vh;
		margin-left:-10vw;
	}
	
}

.square1{
	-webkit-animation-name: square1;
  animation-name: square1;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes square1 {
	0%, 100%{
		transform:scale(0) rotate(0deg);
		-moz-transform:scale(0) rotate(0deg);
		-ms-transform:scale(0) rotate(0deg);
		-o-transform:scale(0) rotate(0deg);
		margin-top:-30vh;
		margin-left:-30vh;
	}
	
	50%{
		transform:scale(1) rotate(90deg);
		-moz-transform:scale(1) rotate(90deg);
		-ms-transform:scale(1) rotate(90deg);
		-o-transform:scale(1) rotate(90deg);
	}
}

.widthLR{
	-webkit-animation-name: widthLR;
  animation-name: widthLR;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  float:left;
}

@-webkit-keyframes widthLR{
	0%{
		width:0;
	}
	
	100%{
		width:100%;
	}
}

.shrinkLR{
	-webkit-animation-name: shrinkLR;
  animation-name: shrinkLR;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  float:right;
}

@-webkit-keyframes shrinkLR{
	0%{
		width:100%;
	}
	
	100%{
		width:0%;
	}
}

.widthRL{
	-webkit-animation-name: widthRL;
  animation-name: widthRL;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  float:right;
}

@-webkit-keyframes widthRL{
	0%{
		width:0;
	}
	
	100%{
		width:100%;
		
	}
}

.shrinkRL{
	-webkit-animation-name: shrinkRL;
  animation-name: shrinkRL;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  float:left;
}

@-webkit-keyframes shrinkRL{
	0%{
		width:100%;
	}
	
	100%{
		width:0%;
		
	}
}

.frameBottom{
	-webkit-animation-name: frameBottom;
  animation-name: frameBottom;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes frameBottom {
	0%{
		transform:translateY(0px);
	}
	
	85%, 90%{
		transform:translateY(-58vh);
		opacity:1;
	}
	
	100%{
		transform:translateY(-50vh);
		opacity:0;
	}
}

.frameTop{
	-webkit-animation-name: frameTop;
  animation-name: frameTop;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes frameTop {
	0%{
		transform:translateY(0px);
	}
	
	85%, 90%{
		transform:translateY(58vh);
		opacity:1
	}
	
	100%{
		transform:translateY(50vh);
		opacity:0;
	}
}

.frameRight{
	-webkit-animation-name: frameRight;
  animation-name: frameRight;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes frameRight {
	0%{
		transform:translateX(0px);
	}
	
	85%, 90%{
		transform:translateX(-58vw);
		opacity:1
	}
	
	100%{
		transform:translateX(-50vw);
		opacity:0;
	}
}

.frameLeft{
	-webkit-animation-name: frameLeft;
  animation-name: frameLeft;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes frameLeft {
	0%{
		transform:translateX(0px);
	}
	
	
	
	85%, 90%{
		transform:translateX(58vw);
		opacity:1;
	}
	
	100%{
		opacity:0;
		transform:translateX(50vw);
	}
}

.poly1{
	height:15vh;
	width:15vh;
	position:absolute;
	
	opacity:0;

	/*background-color:#4A85B3;*/
	background-color:rgba(64,157,192,0.5);
	transition:all ease-in-out;
}

#poly1TL{
	top:0;
	left:0;
	transform:rotate(135deg);
	margin:5vh;
}

#poly1BR{
	right:0;
	bottom:0;
	transform:rotate(-45deg);
	margin:5vh;
}

.animatePoly {
  -webkit-animation-duration: 3.5s;
  animation-duration: 3.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.polyTest{
	-webkit-animation-name: polyTest;
  animation-name: polyTest;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  margin-top:-30vh;
  margin-left:-30vh;
}

@-webkit-keyframes polyTest {
	50%{
		-webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
				clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
	}
	
	
	
	38.5%, 61.5%{
		-webkit-clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%, 17% 12%);
				clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%, 17% 12%);
	}
	
	33%, 67%{
		-webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%, 0% 30%, 0% 30%);				
				clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%, 0% 30%, 0% 30%);
	}
	27.5%, 72.5%{
		-webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%, 10% 20%, 10% 20%, 10% 20%);
				clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%, 10% 20%, 10% 20%, 10% 20%);
		
	}
	
	22%, 78%{
		-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%, 0% 25%, 0% 25%, 0% 25%, 0% 25%);
				clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%, 0% 25%, 0% 25%, 0% 25%, 0% 25%);
	}
	
	16.5%, 83.5%{
		-webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%, 0% 38%, 0% 38%, 0% 38%, 0% 38%, 0% 38%);
				clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%, 0% 38%, 0% 38%, 0% 38%, 0% 38%, 0% 38%);
	}
	
	11%,89%{
		-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);
				clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);
	}
	
	5.5%,94.5%{
		-webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%);
				clip-path: polygon(50% 0%, 100% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%);
	}
	
	0%,100%{
		-webkit-clip-path: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
				clip-path: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
		opacity:1;
		
	}
}

.animated2S {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.goey{
	-webkit-filter: url("#goo");
          filter: url("#goo");
		  animation:cubic-bezier(0.77, 0, 0.175, 1);
}

.gooDots{
	position:absolute;
	width:50vh;
	height:50vh;
	border-radius:50%;
	top:50%;
	left:25%;
	transform:translate(-50%,-50%);
	z-index:9;
	
	
	
}

.gooDot{
	position:absolute;
	height:10vh;
	width:10vh;
	
	top:50%;
	left:50%;
	margin-left:-5vh;
	margin-top:-5vh;
	
	/*background-color:#C63157;*/
	background-color:#E5898B;
	border-radius:100%;
	
	transform:scale(0);
	
}

.gooDotAn1{
	-webkit-animation-name: gooDotAn1;
  animation-name: gooDotAn1;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes gooDotAn1 {
	0%,100%{
		transfrom:scale(0);
		margin-top:-5vh;
		margin-left:-5vh;
	}
	
	20%,80%{
		transform:scale(1);
		margin-top:-5vh;
		margin-left:-5vh;
	}
	
	
}

.gooDotAn2{
	-webkit-animation-name: gooDotAn2;
  animation-name: gooDotAn2;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes gooDotAn2 {
	0%,100%{
		transfrom:scale(0);
		margin-top:-5vh;
		margin-left:-5vh;
	}
	
	20%,80%{
		transform:scale(1);
		margin-top:-5vh;
		margin-left:-5vh;
	}
	40%,70%{
		transform:scale(1);
		margin-top:-15vh;
		margin-left:-5vh;
	}
	
	
}

.gooDotAn3{
	-webkit-animation-name: gooDotAn3;
  animation-name: gooDotAn3;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes gooDotAn3 {
	0%,100%{
		transfrom:scale(0);
		margin-top:-5vh;
		margin-left:-5vh;
	}
	
	20%,80%{
		transform:scale(1);
		margin-top:-5vh;
		margin-left:-5vh;
	}
	40%,70%{
		transform:scale(1);
		margin-top:-5vh;
		margin-left:-15vh;
	}
	
}

.gooDotAn4{
	-webkit-animation-name: gooDotAn4;
  animation-name: gooDotAn4;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes gooDotAn4 {
	0%,100%{
		transfrom:scale(0);
		margin-top:-5vh;
		margin-left:-5vh;
	}
	
	20%,80%{
		transform:scale(1);
		margin-top:-5vh;
		margin-left:-5vh;
	}
	40%,70%{
		transform:scale(1);
		margin-top:-5vh;
		margin-left:5vh;
	}
	
}

.gooDotAn5{
	-webkit-animation-name: gooDotAn5;
  animation-name: gooDotAn5;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes gooDotAn5 {
	0%,100%{
		transfrom:scale(0);
		margin-top:-5vh;
		margin-left:-5vh;
	}
	
	20%,80%{
		transform:scale(1);
		margin-top:-5vh;
		margin-left:-5vh;
	}
	40%,70%{
		transform:scale(1);
		margin-top:5vh;
		margin-left:-5vh;
	}
	
}

#spinnyCont{
	transform:translate(-50%,-50%);
}

#spinny{
	height:110vh;
	width:110vh;
	border-radius:50%;
	
	border:solid 2vh transparent;
	border-top:solid 2vh #DF232C;
	border-bottom:solid 2vh #DF232C;
	
	transform:scale(0);
}

.spinny{
	-webkit-animation-name: spinny;
  animation-name: spinny;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes spinny {
	0%{
		transform:scale(0) rotate(0deg);
	}
	
	20%{
		transform:scale(1) rotate(-180deg);
	}
	
	80%{
		transform:scale(1) rotate(180deg);
	}
	
	100%{
		transform:scale(0) rotate(0deg);
	}
	
	
	
}



.pulse1{
	position:absolute;
	height:7.5vh;
	width:7.5vh;
	
	border-radius:50%;
	border:solid 3vh #EB09E6;
	transform:scale(0);
	opacity:1;
	
}

.pulseAn{
	-webkit-animation-name: pulseAn;
  animation-name: pulseAn;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes pulseAn {
	0%{
		transform:scale(0);
		opacity:1;
	}
	
	100%{
		transform:scale(1);
		opacity:0;
	}
}

.fancyGoo{
	-webkit-filter: url("#fancy-goo");
          filter: url("#fancy-goo");
}

#gooTris{
	position:absolute;
	
	width:30vh;
	padding:5vh;
	height:60vh;
	top:-10vh;
	left:50%;
	margin-left:-20vh;
	
}

#topTri{
	height:30vh;
	width:30vh;
	position:absolute;
	top:20vh;
	transform:scale(0);
	-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
		clip-path: polygon(50% 100%, 0 0, 100% 0);
	background-color:#8EC3EC;
}

#bottomTri{
	height:30vh;
	width:30vh;
	position:absolute;
	top:20vh;
	transform:scale(0);
	-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
			clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	background-color:#8EC3EC;
}

.topTriAn{
	-webkit-animation-name: topTriAn;
  animation-name: topTriAn;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes topTriAn {
	0%{
		opacity:1;
		top:20vh;
		transform:scale(0);
	}
	
	20%{
		transform:scale(1);
	}
	
	80%{
		opacity:1;
	}
	
	100%{
		opacity:0;
		top:0vh;
		
	}
}

.bottomTriAn{
	-webkit-animation-name: bottomTriAn;
  animation-name: bottomTriAn;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes bottomTriAn {
	0%{
		opacity:1;
		top:20vh;
		transform:scale(0);
	}
	
	20%{
		transform:scale(1);
	}
	
	80%{
		opacity:1;
	}
	
	100%{
		opacity:0;
		top:30vh;
		
	}
}

#goeyBackCont{
	position:absolute;
	padding:5vh;
	top:-5vh;
	height:100vh;
	width:100vw;
}

#gooLeft{
	position:absolute;
	background-color:#21BAA4;
	height:0vh;
	width:5vw;
	left:75vw;
	bottom:0;
}

#gooMid{
	position:absolute;
	background-color:#21BAA4;
	height:0vh;
	width:5vw;
	left:75vw;
	bottom:0;
}

#gooRight{
	position:absolute;
	background-color:#21BAA4;
	height:0vh;
	width:5vw;
	left:75vw;
	bottom:0;
}

.leftGooAn{
	-webkit-animation-name: leftGooAn;
  animation-name: leftGooAn;
  -webkit-transform-origin: bottom center;
  transform-origin: bottom center;
}

@-webkit-keyframes leftGooAn {
	0%{
		transform:rotate(0deg);
	}
	
	10%{
		height:110vh;
		transform:rotate(0deg);
	}
	
	50%{
		height:110vh;
		transform:rotate(-9deg);
		border-radius:0%;
	}
	
	100%{
		border-radius:100%;
	}
	
}

.midGooAn{
	-webkit-animation-name: midGooAn;
  animation-name: midGooAn;
  -webkit-transform-origin: bottom center;
  transform-origin: bottom center;
}

@-webkit-keyframes midGooAn {
	0%{
		height:0vh;
	}
	
	10%{
		height:100vh;
	}
	
	50%{
		height:100vh;
		border-radius:0%;
	}
	
	100%{
		border-radius:100%;
	}
	
}

.rightGooAn{
	-webkit-animation-name: rightGooAn;
  animation-name: rightGooAn;
  -webkit-transform-origin: bottom center;
  transform-origin: bottom center;
}

@-webkit-keyframes rightGooAn {
	0%{
		transform:rotate(0deg);
	}
	
	10%{
		height:110vh;
		transform:rotate(0deg);
	}
	
	50%{
		height:110vh;
		transform:rotate(9deg);
		border-radius:0%;
	}
	
	100%{
		border-radius:100%;
	}
	
}

#strippedCont{
	position:absolute;
	height:100vh;
	width:100vw;
	perspective:1500px;
	perspective-origin:center center;
	z-index:0;
}

.strip{
	height:100vh;
	width:12.5vw;
	position:absolute;
	
	background-color:rgba(112,188,187,0.5);
	transform:rotateX(90deg) scale(0);
}

#strip1{
}

#strip2{
	left:12.5vw;
}
#strip3{
	left:25vw;
}
#strip4{
	left:37.5vw;
}
#strip5{
	left:50vw;
}
#strip6{
	left:62.5vw;
}
#strip7{
	left:75vw;
}
#strip8{
	left:87.5vw;
}

.strip1{
	-webkit-animation-name: strip1;
  animation-name: strip1;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes strip1 {
	0%{
		transform:rotateX(90deg);
	}
	100%{
		transform:rotateX(-90deg);
	}
}

.strip2{
	-webkit-animation-name: strip2;
  animation-name: strip2;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes strip2 {
	0%{
		transform:rotateX(-90deg);
	}
	100%{
		transform:rotateX(90deg);
	}
}

#hexagon{
	-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	height:20vh;
	width:20vh;
	position:absolute;
	background-color:white;
	transform:translate(-50%,-50%) scale(0);
	opacity:.4;
}

.hexagon{
	-webkit-animation-name: hexagon;
  animation-name: hexagon;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes hexagon {
	0%{
		transform:translate(-50%,-50%) scale(0);
	}
	90%{
		transform:translate(-50%,-50%) scale(5);
	}
	92%{
		transform:translate(-50%,-50%) scale(0);
	}
	94%{
		transform:translate(-50%,-50%) scale(5);
	}
	96%{
		transform:translate(-50%,-50%) scale(0);
	}
	98%{
		transform:translate(-50%,-50%) scale(5);
	}
	100%{
		transform:translate(-50%,-50%) scale(0);
	}	
}

.verticalLine{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	height:60vh;
	width:2vw;
	
	z-index:11;
}

#vLine1{
	margin-left:-10vw;
}

#vline2{
}

#vLine3{
	margin-left:10vw;
}

.lineTD{
	height:0%;
	width:100%;
	position:fixed;
	top:0;
	
	background-color:rgba(245,4,40,0.5);
}

.lineDT{
	height:0%;
	width:100%;
	position:fixed;
	bottom:0;
	
	background-color:rgba(245,4,40,0.5);
}

.tdAn{
	-webkit-animation-name: tdAn;
  animation-name: tdAn;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes tdAn {
	0%{
		hight:0%;
	}
	
	
	50%{
		height:100%;
		margin-top:0vh;
	}	
	
	100%{
		height:0%;
		margin-top:60vh;
	}
}

.dtAn{
	-webkit-animation-name: dtAn;
  animation-name: dtAn;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes dtAn {
	0%{
		hight:0%;
	}
	50%{
		height:100%;
		margin-bottom:0vh;
	}
	100%{
		height:0%;
		margin-bottom:60vh;
	}	
}

.slash{
	height:30vh;
	width:2vw;
	position:absolute;
	background-color:#EA5887;
	transform:skewX(45deg) scale(0);
	left:25%;
}

#slash1{
	top:15%;
}

#slash2{
	top:25%;
	animation-delay:.2s;
}

#slash3{
	top:35%;
	animation-delay:.3s;
}

#slash4{
	top:45%;
	animation-delay:.4s;
}

.slash1An{
	-webkit-animation-name: slash1An;
  animation-name: slash1An;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes slash1An {
	/*0%{
		transform:skewX(0deg) scale(0,1);
	}
	45%{
		transform:skewX(45deg) scale(1,1);
	}
	55%{
		transform:skewX(45deg) scale(1,1);
	}
	100%{
		transform:skewX(90deg) scale(0,1);
	}*/
	
	0%,100%{
		transform:skewX(45deg) scale(0)
	}
	
	50%{
		transform:skewX(45deg) scale(1)
	}
}

.xShape{
	height:15vh;
	width:15vh;
	margin:5vh;
	position:absolute;	
	-webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
			clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
	
	background-color:#C72414;
	transform:scale(0);
}

#shapeTR{
	top:0;
	right:0;
}
#shapeBL{
	bottom:0;
	left:0;
}

.xShapeAn{
	-webkit-animation-name: xShapeAn;
  animation-name: xShapeAn;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes xShapeAn {
	0%{
		-webkit-clip-path: polygon(50% 30%, 30% 50%, 30% 50%, 30% 50%, 50% 70%, 50% 70%, 50% 70%, 70% 50%, 70% 50%, 70% 50%, 50% 30%, 50% 30%);
				clip-path: polygon(50% 30%, 30% 50%, 30% 50%, 30% 50%, 50% 70%, 50% 70%, 50% 70%, 70% 50%, 70% 50%, 70% 50%, 50% 30%, 50% 30%);
		transform:scale(0) rotate(45deg);
	}
	
	50%{
		-webkit-clip-path: polygon(50% 30%, 30% 50%, 30% 50%, 30% 50%, 50% 70%, 50% 70%, 50% 70%, 70% 50%, 70% 50%, 70% 50%, 50% 30%, 50% 30%);
				clip-path: polygon(50% 30%, 30% 50%, 30% 50%, 30% 50%, 50% 70%, 50% 70%, 50% 70%, 70% 50%, 70% 50%, 70% 50%, 50% 30%, 50% 30%);
		transform:scale(1) rotate(180deg);
	}
	
	75%{
		-webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
				clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
		transform:scale(1) rotate(180deg);
	}
	
	100%{
		-webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
				clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
		transform:scale(0) rotate(360deg);
	}	
}

#miniExesCont{
	z-index:20;
}

.exes{
	position:absolute;
	height:2vh;
	width:2vh;
	-webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
			clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
	
	background-color:red;
	transform:scale(0);
	opacity:1;
	
}

.exesAn{
	-webkit-animation-name: exesAn;
  animation-name: exesAn;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes exesAn {
	0%{
		transform:scale(0);
		opacity:1;
	}
	
	50%{
		transform:scale(1);
		opacity:1;
	}
	
	100%{
		transform:scale(1);
		opacity:0;
	}
}

.kLine{
	height:0vh;
	width:2vw;
	position:absolute;
	margin-left:25vw;
	border-bottom-left-radius:20px;
	border-bottom-right-radius:20px;
	animation-timing-function:ease-in-out;
	opacity:0.5;
	z-index:20;
	
	background-color:#7F7DD7;
}

#kLine1{
	margin-left:14vw;
	
}

#kLine2{
	margin-left:18vw;
	animation-delay:.1s;
}

#kLine3{
	margin-left:22vw;
	animation-delay:.2s;
	
}

#kLine4{
	margin-left:26vw;
	animation-delay:.3s;
	
}

#kLine5{
	margin-left:30vw;
	animation-delay:.4s;
}

#kLine6{
	margin-left:34vw;
	animation-delay:.5s;
}

.kLineAn{
	-webkit-animation-name: kLineAn;
  animation-name: kLineAn;
  -webkit-transform-origin: top center;
  transform-origin: top center;
}

@-webkit-keyframes kLineAn {
	0%{
		height:0vh;
	}
	
	50%{
		height:100vh;
	}
	
	100%{
		height:0vh;
	}
}

#chevLCont{
	width:45vw;
	float:left;
}

.chevronL{
	height:10vh;
	width:5vw;
	-webkit-clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
	clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
	z-index:9;
	opacity:0;
	float:right;
	margin-top:45vh;
	
	background-color:rgba(248,255,0,0.44);
}

#chevRCont{
	width:45vw;
	float:right;
}

.chevronR{
	height:10vh;
	width:5vw;
	-webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
	clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
	z-index:9;
	opacity:0;
	float:left;
	margin-top:45vh;
	
	background-color:rgba(248,255,0,0.44);
}

.chevronLAn{
	-webkit-animation-name: chevronLAn;
  animation-name: chevronLAn;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}

@-webkit-keyframes chevronLAn {
	0%{
		opacity:0;
		transfrom:scale(0);
	}
	
	50%{
		opacity:1;
		transform:scale(1);
	}
	
	100%{
		opacity:0;
	}
}

.chevronL:nth-child(2){
	animation-delay:.1s;
}

.chevronL:nth-child(3){
	animation-delay:.2s;
}

.chevronL:nth-child(3){
	animation-delay:.3s;
}

.chevronL:nth-child(4){
	animation-delay:.4s;
}

.chevronL:nth-child(5){
	animation-delay:.5s;
}

.chevronL:nth-child(6){
	animation-delay:.6s;
}

.chevronL:nth-child(7){
	animation-delay:.7s;
}

.chevronL:nth-child(8){
	animation-delay:.8s;
}

.chevronL:nth-child(9){
	animation-delay:.9s;
}

.chevronRAn{
	-webkit-animation-name: chevronRAn;
  animation-name: chevronRAn;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}

@-webkit-keyframes chevronRAn {
	0%{
		opacity:0;
		transfrom:scale(0);
	}
	
	50%{
		opacity:1;
		transform:scale(1);
	}
	
	100%{
		opacity:0;
	}
}

.chevronR:nth-child(2){
	animation-delay:.1s;
}

.chevronR:nth-child(3){
	animation-delay:.2s;
}

.chevronR:nth-child(3){
	animation-delay:.3s;
}

.chevronR:nth-child(4){
	animation-delay:.4s;
}

.chevronR:nth-child(5){
	animation-delay:.5s;
}

.chevronR:nth-child(6){
	animation-delay:.6s;
}

.chevronR:nth-child(7){
	animation-delay:.7s;
}

.chevronR:nth-child(8){
	animation-delay:.8s;
}

.chevronR:nth-child(9){
	animation-delay:.9s;
}

#morphingCont{
	transform:translate(-50%,-50%);
	perspective:2000px;
	perspective-origin:center;
}

#morphing{
	height:20vh;
	width:20vh;
	opacity:.5;
	background-color:#E85154;
	transform:scale(0);
	-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
			clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.morphingAct{
	-webkit-animation-name: morphingAct;
  animation-name: morphingAct;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes morphingAct {
	0%{
		transform:rotateX(0deg) scale(0);
		-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%, 0 100%, 0 0);
				clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%, 0 100%, 0 0);
	}
	80%{
		transform:rotateX(180deg) scale(1);
		-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
				clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	}
	
	100%{
		transform:rotateX(-90deg) scale(0);
		-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
				clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	}
}

#unfold{
	height:20vh;
	width:20vh;
	position:absolute;
	top:50%;
	left:75%;
	transform:translate(-50%,-50%);
	perspective:1000px;
	perspective-origin:center;
}

#unfoldT{
	position:absolute;
	height:10vh;
	width:10vh;
	margin-top:-2.5vh;
	margin-left:-2.5vh;
	background-color:white;
	opacity:.5;
	top:50%;
	left:50%;
	
	transform:scale(0);
}

.unfoldTAct{
	-webkit-animation-name: unfoldTAct;
  animation-name: unfoldTAct;
  -webkit-transform-origin: top center;
  transform-origin: top center;
}

@-webkit-keyframes unfoldTAct {
	0%{
		transform:rotateX(0deg);
		opacity:0;
	}
	
	20%{
		opacity:.5;
	}
	
	70%{
		transform:rotateX(180deg);
	}
	
	80%{
		transform:rotateX(180deg);
		opacity:.5;
	}
	
	100%{
		transform:rotateX(0deg);
		opacity:0;
	}
}

#unfoldB{
	position:absolute;
	height:10vh;
	width:10vh;
	margin-top:-2.5vh;
	margin-left:-2.5vh;
	background-color:white;
	opacity:.5;
	top:50%;
	left:50%;
	
	transform:scale(0);
}

.unfoldBAct{
	-webkit-animation-name: unfoldBAct;
  animation-name: unfoldBAct;
  -webkit-transform-origin: bottom center;
  transform-origin: bottom center;
}

@-webkit-keyframes unfoldBAct {
	0%{
		transform:rotateX(0deg);
		opacity:0;
	}
	
	20%{
		opacity:.5;
	}
	
	60%{
		transform:rotateX(-180deg);
	}
	
	80%{
		transform:rotateX(-180deg);
		opacity:.5;
	}
	
	100%{
		transform:rotateX(0deg);
		opacity:0;
	}
}

#unfoldL{
	position:absolute;
	height:10vh;
	width:10vh;
	margin-top:-2.5vh;
	margin-left:-2.5vh;
	background-color:white;
	opacity:.5;
	top:50%;
	left:50%;
	
	transform:scale(0);
}

.unfoldLAct{
	-webkit-animation-name: unfoldLAct;
  animation-name: unfoldLAct;
  -webkit-transform-origin: left center;
  transform-origin: left center;
}

@-webkit-keyframes unfoldLAct {
	0%{
		transform:rotateY(0deg);
		opacity:0;
	}
	
	20%{
		opacity:.5;
	}
	
	50%{
		transform:rotateY(-180deg);
	}
	
	80%{
		transform:rotateY(-180deg);
		opacity:.5;
	}
	
	100%{
		transform:rotateY(0deg);
		opacity:0;
	}
}

#unfoldR{
	position:absolute;
	height:10vh;
	width:10vh;
	margin-top:-2.5vh;
	margin-left:-2.5vh;
	background-color:white;
	opacity:.5;
	top:50%;
	left:50%;
	
	transform:scale(0);
}

.unfoldRAct{
	-webkit-animation-name: unfoldRAct;
  animation-name: unfoldRAct;
  -webkit-transform-origin: right center;
  transform-origin: right center;
}

@-webkit-keyframes unfoldRAct {
	0%{
		transform:rotateY(0deg);
		opacity:0;
	}
	
	20%{
		opacity:.5;
	}
	
	40%{
		transform:rotateY(180deg);
	}
	
	80%{
		transform:rotateY(180deg);
		opacity:.5;
	}
	
	100%{
		transform:rotateY(0deg);
		opacity:0;
	}
}

#unfoldC{
	position:absolute;
	height:10vh;
	width:10vh;
	margin-top:-2.5vh;
	margin-left:-2.5vh;
	background-color:white;
	opacity:.5;
	top:50%;
	left:50%;
	
	transform:scale(0);
}

.unfoldCAct{
	-webkit-animation-name: unfoldCAct;
  animation-name: unfoldCAct;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes unfoldCAct {
	0%{
		transform:scale(0)rotate(0deg);
	}
	
	80%{
		transform:scale(1) rotate(180deg);
		opacity:.5;
	}
	
	100%{
		opacity:0;
	}
}

#mitoCont{
	position:absolute;
	height:30vh;
	width:30vh;
	top:75%;
	left:50%;
	transform:translate(-50%,-50%);
	z-index:6;
}

#mito1{
	position:absolute;
	height:10vh;
	width:10vh;
	border-radius:50%;
	top:50%;
	left:50%;
	margin-left:-5vh;
	margin-top:-5vh;
	transform:scale(0);
	
	background-color:#D26E90;
}

#mito2{
	position:absolute;
	height:10vh;
	width:10vh;
	border-radius:50%;
	top:50%;
	left:50%;
	margin-left:-5vh;
	margin-top:-5vh;
	transform:scale(0);
	
	background-color:#D26E90;
}

#mito3{
	position:absolute;
	height:10vh;
	width:10vh;
	border-radius:50%;
	top:50%;
	left:50%;
	margin-left:-5vh;
	margin-top:-5vh;
	transform:scale(0);
	
	background-color:#D26E90;
}

#mito4{
	position:absolute;
	height:10vh;
	width:10vh;
	border-radius:50%;
	top:50%;
	left:50%;
	margin-left:-5vh;
	margin-top:-5vh;
	transform:scale(0);
	
	background-color:#D26E90;
}

.mito1Act{
	-webkit-animation-name: mito1Act;
  animation-name: mito1Act;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes mito1Act {
	0%{
		transform:scale(0);
		
	}
	
	10%{
		transform:scale(1);
	}
	
	20%,40%{
		margin-left:-10vh;
		margin-top:-5vh;
	}
	
	60%,80%{
		margin-top:-10vh;
		margin-left:-10vh;
		
	}
	
	95%{
		margin-top:-5vh;
		margin-left:-5vh;
		transform:scale(1);
	}
	
	100%{
		transform:scale(0);
	}
}

.mito2Act{
	-webkit-animation-name: mito2Act;
  animation-name: mito2Act;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes mito2Act {
	0%{
		transform:scale(0);
		
	}
	
	10%{
		transform:scale(1);
	}
	
	20%,40%{
		margin-left:0vh;
		margin-top:-5vh;
	}
	
	60%,80%{
		margin-top:-10vh;
		margin-left:0vh;
		
	}
	
	95%{
		margin-top:-5vh;
		margin-left:-5vh;
		transform:scale(1);
	}
	
	100%{
		transform:scale(0);
	}
}

.mito3Act{
	-webkit-animation-name: mito3Act;
  animation-name: mito3Act;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes mito3Act {
	0%{
		transform:scale(0);
		
	}
	
	10%{
		transform:scale(1);
	}
	
	20%,40%{
		margin-left:-10vh;
		margin-top:-5vh;
	}
	
	60%,80%{
		margin-top:0vh;
		margin-left:-10vh;
		
	}
	
	95%{
		margin-top:-5vh;
		margin-left:-5vh;
		transform:scale(1);
	}
	
	100%{
		transform:scale(0);
	}
}

.mito4Act{
	-webkit-animation-name: mito4Act;
  animation-name: mito4Act;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes mito4Act {
	0%{
		transform:scale(0);
		
	}
	
	10%{
		transform:scale(1);
	}
	
	20%,40%{
		margin-left:0vh;
		margin-top:-5vh;
	}
	
	60%,80%{
		margin-top:0vh;
		margin-left:0vh;
		
	}
	
	95%{
		margin-top:-5vh;
		margin-left:-5vh;
		transform:scale(1)
	}
	
	100%{
		transform:scale(0);
	}
}

.low{
	position:absolute;
	width:100%;
	margin-top:100vh;
	
	transition:ease-in;
	opacity:.5;
	height:10vh;
	background-color:white;
}

#low1{
	height:.4125vh;
}

#low2{
	height:.825vh;
}

#low3{
	height:1.75vh;
}

#low4{
	height:2.5vh;
}

#low5{
	height:5vh;
}

#low6{
}

.low1Act{
	-webkit-animation-name: low1Act;
  animation-name: low1Act;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes low1Act {
	0%{
	}
	
	80%{
		margin-top:62vh;
		opacity:.5;
	}
	
	100%{
		opacity:0;
	}
}

.low2Act{
	-webkit-animation-name: low2Act;
  animation-name: low2Act;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes low2Act {
	0%{
	}
	
	80%{
		margin-top:63.5vh;
		opacity:.5;
	}
	
	100%{
		opacity:0;
	}
}

.low3Act{
	-webkit-animation-name: low3Act;
  animation-name: low3Act;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes low3Act {
	0%{
	}
	
	80%{
		margin-top:66vh;
		opacity:.5;
	}
	
	100%{
		opacity:0;
	}
}

.low4Act{
	-webkit-animation-name: low4Act;
  animation-name: low4Act;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes low4Act {
	0%{
	}
	
	80%{
		margin-top:72.5vh;
		opacity:.5;
	}
	
	100%{
		opacity:0;
	}
}

.low5Act{
	-webkit-animation-name: low5Act;
  animation-name: low5Act;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes low5Act {
	0%{
	}
	
	80%{
		margin-top:80vh;
		opacity:.5;
	}
	
	100%{
		opacity:0;
	}
}

.low6Act{
	-webkit-animation-name: low6Act;
  animation-name: low6Act;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

@-webkit-keyframes low6Act {
	0%{
	}
	
	80%{
		margin-top:90vh;
		opacity:.5;
	}
	
	100%{
		opacity:0;
	}
}

.rightShades{
	position:absolute;
	height:100vh;
	width:2.5vw;
	left:76.25%;
	
	opacity:.5;
	background-color:#EC8082;
}

.shadeOdd{
	transform:rotateY(90deg)
}

.shadeEven{
	transform:rotateY(90deg)
}

#shade1{
	margin-left:-7.1875vw;
}

#shade2{
	margin-left:-4.6875vw;
	
}

#shade3{
	margin-left:-1.25vw;
}

#shade4{
	margin-left:1.25vw;
}

#shade5{
	margin-left:4.6875vw;
}

#shade6{
	margin-left:7.1875vw;
}

.shadesOddAct{
	-webkit-animation-name: shadesOddAct;
  animation-name: shadesOddAct;
  -webkit-transform-origin: left center;
  transform-origin: left center;
}

@-webkit-keyframes shadesOddAct {
	0%{
		transform:rotateY(90deg)
	}
	
	50%{
		transform:rotateY(0deg)
	}
	
	100%{
		transform:rotateY(90deg)
	}
}

.shadesEvenAct{
	-webkit-animation-name: shadesEvenAct;
  animation-name: shadesEvenAct;
  -webkit-transform-origin: right center;
  transform-origin: right center;
}

@-webkit-keyframes shadesEvenAct {
	0%{
		transform:rotateY(90deg)
	}
	
	45%,55%{
		transform:rotateY(0deg)
	}
	
	100%{
		transform:rotateY(90deg)
	}
}

#circle2{
	position:absolute;
	height:100vh;
	width:100vh;
	border-radius:50%;
	left:-150vh;
	
	background-color:#72DFA6;
	opacity:.5;
}

.circle2Act{
	-webkit-animation-name: circle2Act;
  animation-name: circle2Act;
  -webkit-transform-origin: right center;
  transform-origin: right center;
}

@-webkit-keyframes circle2Act {
	0%{
		left:-100vw;
	}
	
	100%{
		left:100vw;
	}
}

#mobile{
	display:none;
}


/* MOBILE STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/

@media only screen and (max-width: 767px){
	.wrapper{
		position:relative;
		overflow:hidden;
		height:100vh;
		width:100vw;
	}
	
	
	
	#mobile{
		height:100vh;
		width:100vw;
		background-color:#f1b3a7;
		display:block;
		position:absolute;
		z-index:102;
	}
	
	#mobileIns{
		position:absolute;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
		padding:5%;
		outline:solid white 2px;
	}
	
	h3{
		font-family:montserratReg;
		color:white;
	}
	svg{
		display:none;
	}
	
	/*.smedia{
	position:absolute;
	height:5vh;
	width:5vh;
	border-radius:50%;
	animation:ease-in-out;
	transform:translateY(10vh);
	transition: transform 0.5s cubic-bezier(.58,-0.39,.54,1.45);
	
	}*/
	
	#share{
		top:75%;
		transform:translate(-50%,0);
	}
	
}