/*  **  zappo4.css  for zappo4  November 2015  **  */

body {

}

#index-x {
	overflow:hidden;
	animation: bkg1 2s linear 0s 1 forwards;
}

#band-x, #code-x, #links-x {
	background-color: #800080;
}

a {
	color:orange;
	text-decoration:none;
	font-wieght:bold;
}

.contentSM {
	position:relative;
	width:30vw;
	min-width:300px;
	margin:auto;
	font-family:Arial, Calibri, Verdana, Geneva, sans-serif;
	color:#c0c0c0;
	padding:20px;
}

#ccCont {
	min-height:80vh;
}


/*  **  index.html specific stuff  **  */

.indexStage {
	width:100vw;
	height:88vh;
	overflow:hidden;
}

.display-1 {
	position:relative;
	top:25vh;
	width:25vw;
	height:auto;
	margin:auto;
	text-align:center;
	font-family:Arial, Calibri, Verdana, Geneva, sans-serif;
	font-size:4vw;
	color:#c0c0c0;	
	animation: fadeDisp1Out 2s linear 0s 1 forwards;
}


.display-2 {
	position:absolute;
	top:110vh;
	width:25vw;
	text-align:center;
	font-family:Arial, Calibri, Verdana, Geneva, sans-serif;
	font-size:4vw;
	color:#c0c0c0;	
	animation: 	moveZappo 20s 2.5s 1 ease forwards, tiltLetter 12s 2.5s 1 ease forwards;
}

.display-2::after {
	position: relative;
	top:-2.5vw;
	left:8vw;
	content:' ';
	padding-left:3vw;
	padding-right:2.7vw;
	padding-bottom:100vw;
	width:10vw;
	height:100vh;
	background-image:url('../images/vaptrail2.png');
	background-size:cover;
	border-top-left-radius:70%;
	border-top-right-radius:70%;
	box-shadow:inset 0 0 50px 20px #528ccc, 0 0 50px 20px #528ccc;
	opacity:1;
	animation: 	moveTrail 3s infinite linear;
}

.display-2::before {
	position: relative;
	top:19vw;
	left:-8vw;
	content:' ';
	padding-left:3vw;
	padding-right:2.7vw;
	padding-bottom:100vw;
	width:10vw;
	height:100vh;
	background-image:url('../images/vaptrail2.png');
	background-size:cover;
	border-top-left-radius:70%;
	border-top-right-radius:70%;
	box-shadow:inset 0 0 50px 20px #528ccc, 0 0 50px 20px #528ccc;
	opacity:1;
	animation: 	moveTrail 3s infinite linear;
}


.display-3 {
	position:absolute;
	top:25vh;
	width:25vw;
	height:auto;
	left:10vw;
	text-align:center;
	font-family:Arial, Calibri, Verdana, Geneva, sans-serif;
	font-size:4vw;
	color:#c0c0c0;	
	animation: fadeDisp3In 1s linear 30s 1 forwards;
	opacity:0;
}

.display-4 {
	position:absolute;
	top:55vh;
	width:25vw;
	height:auto;
	left:3vw;
	text-align:left;
	font-family:Arial, Calibri, Verdana, Geneva, sans-serif;
	font-size:2vw;
	color:#c0c0c0;	
	animation: fadeDisp3In 1s linear 30s 1 forwards;
	opacity:0;
}

.peaceSign {
	position:absolute;
	top:0;
	left:10vw;
	width:6vw;
	height:6vw;
	background-image:url('../images/peace.png');
	opacity:0;
	animation: 	dropBomb 6s 18s 1 linear;
}

.flash {
	position:absolute;
	width:50vw;
	height:70vh;
	bottom:-25vh;
	left:25vw;
	background: radial-gradient(circle, #fff, #FFA949, #528ccc, #528ccc );
	opacity:0;
	animation: 	flashBang .3s 23.5s 1 linear;
}

.triffidWillBe {
	display:none;
}


.triffid {
	position:absolute;
	display:block;
	width:80vw;
	height:90vh;
	top:0;
	left:20vh;
	background-image:url('../images/triffid.gif');
	background-repeat:no-repeat;
	background-size:contain;
	background-position: center bottom;
}



@media screen and (max-width: 800px) {

	#index-x {
		overflow:visible;
		animation: bkg1 2s linear 0s 1 forwards;
	}
	.display-2::before {
		position: relative;
		top:19vw;
		left:-8vw;
		content:' ';
		padding-left:12vw;
		padding-right:10vw;
		padding-bottom:100vw;
		width:10vw;
		height:100vh;
		background-image:url('../images/vaptrail2.png');
		background-size:cover;
		border-top-left-radius:70%;
		border-top-right-radius:70%;
		box-shadow:inset 0 0 50px 20px #528ccc, 0 0 50px 20px #528ccc;
		opacity:1;
		animation: 	moveTrail 3s infinite linear;
	}
		
	.display-2::after {
		position: relative;
		top:-2.5vw;
		left:8vw;
		content:' ';
		padding-left:12vw;
		padding-right:10vw;
		padding-bottom:100vw;
		width:10vw;
		height:100vh;
		background-image:url('../images/vaptrail2.png');
		background-size:cover;
		border-top-left-radius:70%;
		border-top-right-radius:70%;
		box-shadow:inset 0 0 50px 20px #528ccc, 0 0 50px 20px #528ccc;
		opacity:1;
		animation: 	moveTrail 3s infinite linear;
	}	

	.peaceSign {
		position:absolute;
		top:0;
		left:10vw;
		width:12vw;
		height:12vw;
		background-image:url('../images/peace.png');
		opacity:0;
		animation: 	dropBomb 6s 18s 1 linear;
	}

	.flash {
		position:absolute;
		width:50vw;
		height:60vh;
		bottom:-35vh;
		left:25vw;
		background: radial-gradient(circle, #fff, #FFA949, #528ccc, #528ccc );
		opacity:0;
		animation: 	flashBang .3s 23.5s 1 linear;
	}	
	
	.display-3 {
		font-size:8vw;
		width:35vw;
	}
	
	.display-4 {
		font-size:4vw;
		width:55vw;
	}
	
}


.nav {
	position:relative;
	top:0px;
	background-color: #618768;
	width:100vw;
	min-height:12vh;
	z-index:10;
}

.navItem {
	font-family:Verdana, Geneva, sans-serif;
	font-size:16px;
	color:#B1C4B4;
	padding:15px;
	border:1px solid #B1C4B4;
	margin:20px;
	float:none;
	display: inline-block;
	min-width:70px;
	transition:all .3s;	
}

.navItem:hover {
	background-color: #B1C4B4;
	color:#618768;
	border:1px solid #B1C4B4;
	transition:all .3s;
}

#like {
	float:right;
	width:100px;
	margin-top:35px;
	margin-right:30px;
	cursor:pointer;
}

#index-x #home-x, #band-x #about-x, 
#code-x #clips-x, #links-x #dl-x {
	color:#800080;
}




@keyframes bkg1 { 
0%   {background-color: #800080;}
50%   {background-color: #800080;}
100% {background-color: #528ccc;}
}

@keyframes fadeDisp1Out { 
0%   {opacity:1; z-index:10;}
50%   {opacity:1; z-index:10;}
100% {opacity:0; z-index:-10;}
}


@keyframes moveZappo {
  0% 	{top:110vh; left:6vw;}
  50% 	{top:10vh; left:60vw;}
  100% 	{top:-30vh; left:-20vw;}
}

@keyframes tiltLetter {
  0% 	{transform: rotateX(0deg) rotateY(0deg);}
  80% 	{transform: rotateX(-75deg) rotateY(0deg) rotateZ(-90deg);}
  85% 	{transform: rotateX(-75deg) rotateY(0deg) rotateZ(-90deg);} 
  90% 	{transform: rotateX(-65deg) rotateY(0deg) rotateZ(-90deg);}  
  100% 	{transform: rotateX(-85deg) rotateY(0deg) rotateZ(-90deg);}
}

@keyframes moveTrail {
  0% 	{background-position: 0 0;}
  100% 	{background-position: 0 110vw;}
}

@keyframes dropBomb {
  0% 	{opacity:0; top:0; left:10vw; transform: rotateX(0deg) rotateY(0deg) scale(.1,.1);}
  5%	{opacity:1;}
  99%	{opacity:1;}
  100% 	{opacity:0; top:100vh; left:50vw; transform: rotateX(720deg) rotateY(270deg) scale(1,1);}
}

@keyframes flashBang { 
0%   {opacity:0;}
30%   {opacity:1;}
100% {opacity:0; z-index:-10;}
}

@keyframes fadeDisp3In { 
0%   {opacity:0; z-index:-10;}

100% {opacity:1; z-index:10;}
}