/*  ** slider.css for zappo Novemebr 2015 **  */


/*  **  band.html specific stuff  **  */

/*  ** sandpeople stuff  **  */

.sandPeopleDisplay {
	position:absolute;
	top:0;
	left:0;
	width:100vw;
	height:87vh;
	background-color: #800080;
	z-index:100;
	animation: spFade 2.5s linear 3s 1 forwards;
}

#sp {
	position:relative;
	left:25vw;
	width:50vw;
	min-width:300px;
	opacity:.5;	
}

.notice {
	width:100%;
	text-align:center;
	font-family:Arial, Calibri, Verdana, Geneva, sans-serif;
	font-size:1vw;
	color:#c0c0c0;
}




.rotunda {
	width:100vw;
	height:86vh;
}

.pos-1 {
	position:absolute;
	top:0vh;
	left:5vw;
	height:88vh;
	transition:all 2s;
	z-index:9;
}

.pos-2 {
	position:absolute;
	top:5vh;
	left:50vw;
	height:20vh;
	opacity:.4;
	transform:rotateY(45deg);
	transition:all 2s;
}

.pos-3 {
	position:absolute;
	top:15vh;
	left:80vw;
	height:10vh;
	opacity:.4;
	transform:rotateY(45deg);
	transition:all 2s;
}

.pos-4 {
	position:absolute;
	top:45vh;
	left:80vw;
	height:10vh;
	opacity:.4;
	transform:rotateY(45deg);
	transition:all 2s;
}

.pos-5 {
	position:absolute;
	top:68vh;
	left:50vw;
	height:20vh;
	opacity:.4;
	transform:rotateY(45deg);
	transition:all 2s;
}

#desc {
	position:absolute;
	top:45vh;
	left:45vw;
	font-family:Arial, Calibri, Verdana, Geneva, sans-serif;
	color:#c0c0c0;
	font-size: 25px;
	z-index:20;
}

#switch {
	position:absolute;
	top:82vh;
	left:1vw;
	font-family:Arial, Calibri, Verdana, Geneva, sans-serif;
	color:#c0c0c0;
	font-size: 30px;
	z-index:11;
	cursor:pointer;
}


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

	.pos-1 {
		position:absolute;
		top:20vh;
		left:0vw;
		height:auto;
		width:60vw;
		z-index:9;
		transition:all 2s;
	}

	.pos-2 {
		position:absolute;
		top:5vh;
		left:45vw;
		height:auto;
		width:20vw;
		opacity:.4;
		transition:all 2s;
	}

	.pos-3 {
		position:absolute;
		top:14vh;
		left:70vw;
		height:auto;
		width:10vw;
		opacity:.4;
		transition:all 2s;
	}

	.pos-4 {
		position:absolute;
		top:50vh;
		left:70vw;
		height:auto;
		width:10vw;
		opacity:.4;
		transition:all 2s;
	}

	.pos-5 {
		position:absolute;
		top:68vh;
		left:45vw;
		height:auto;
		width:20vw;
		opacity:.4;
		transition:all 2s;
	}

	#desc {
		position:absolute;
		top:35vh;
		left:50vw;
		font-family:Arial, Calibri, Verdana, Geneva, sans-serif;
		color:#c0c0c0;
		font-size: 20px;
		z-index:20;
	}
	
	#switch {
		position:absolute;
		top:80vh;
		left:1vw;
		font-family:Arial, Calibri, Verdana, Geneva, sans-serif;
		color:#c0c0c0;
		font-size: 30px;
		z-index:11;
		cursor:pointer;
	}

	.notice {
		font-size:3vw;
	}
	
	

}

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