@keyframes slideDown{
	0%{
	top:-2000px;
	}
	50%{
	top:-1000px;
	}
	100%{
	top:0;
	}
}

@keyframes flickerOne{
	0%{
	opacity:0;
	/*top:-2000px;*/
	}
	1%{
	/*top:0;*/ 
	}
	15%{
	opacity:1;
	}
	20%{
	opacity:0.4;
	}
	40%{
	opacity:0.7;
	}
	50%{
	opacity:1;
	}
	55%{
	opacity:0;
	}
	70%{
	opacity:1;
	}
	90%{
	opacity:0.7;
	}
	100%{
	opacity:1;
	/*top:0;*/
	}
}

@keyframes flickerTwo{
	0%{
	opacity:0;
	/*top:-2000px;*/
	}
	1%{
	/*top:0;*/ 
	}
	15%{
	opacity:0.3;
	}
	20%{
	opacity:0.8;
	}
	40%{
	opacity:0.7;
	}
	50%{
	opacity:1;
	}
	85%{
	opacity:0;
	}
	100%{
	opacity:1;
	/*top:0;*/ 
	}
}

@keyframes flickerThree{
	0%{
	opacity:0;
	/*top:-2000px;*/
	}
	1%{
	/*top:0;*/ 
	}
	15%{
	opacity:0.8;
	}
	30%{
	opacity:0.3;
	}
	45%{
	opacity:0;
	}
	60%{
	opacity:0.8;
	}
	75%{
	opacity:0.3;
	}
	90%{
	opacity:0.6;
	}
	100%{
	opacity:1;
	/*top:0;*/
	}
}

@keyframes rotateCart{
  	0%{
	transform:rotate(0deg);
  	}
  	50%{
    transform:rotate(180deg);
  	}
  	100%{
    transform:rotate(360deg);
  	}
}

@keyframes spookyHov{
 	0%{
    transform: scale(1,1);
  	}
  	100%{
    transform: scale(1.15,1.15);
 	}
}

body{
	background-color:black;
}

.logo{
	position:relative;
	/*top:-2000px;*/
	opacity:0;
	animation-delay:2000ms;
	width:300px;
	float:left;
	padding:20px;
	margin-left:2%;
	animation-name:flickerTwo;
	animation-duration:4000ms;
	animation-fill-mode: forwards; 
	-webkit-animation-fill-mode: forwards; 
}

h1{
	font-family: 'Creepster', cursive;
	text-shadow: 5px 5px 25px rgba(255, 255, 255, 0.6);
	float:left;
	text-transform:uppercase;
	color:#F47A00;
	font-size:4.5em;
	padding:5px;
	margin-top:100px;
}

.let1{
	position:relative;
	/*top:-2000px;*/
	opacity:0;
	animation-delay:1500ms;
	animation-name:flickerTwo;
	animation-duration:1500ms;
	animation-fill-mode: forwards; 
	-webkit-animation-fill-mode: forwards; 
	}
.let2{
	position:relative;
	/*top:-2000px;*/
	opacity:0;
	animation-name:flickerTwo;
	animation-duration:1500ms;
	animation-fill-mode: forwards; 
	-webkit-animation-fill-mode: forwards; 
	}
.let3{
	position:relative;
	/*top:-2000px;*/
	opacity:0;
	animation-delay:600ms;
	animation-name:flickerOne;
	animation-duration:3500ms;
	animation-fill-mode: forwards; 
	-webkit-animation-fill-mode: forwards; 
	}
.let4{
	position:relative;
	/*top:-2000px;*/
	opacity:0;
	animation-delay:500ms;
	animation-name:flickerThree;
	animation-duration:2500ms;
	animation-fill-mode: forwards; 
	-webkit-animation-fill-mode: forwards; 
	}
.let5{
	position:relative;
	/*top:-2000px;*/
	opacity:0;
	animation-name:flickerTwo;
	animation-duration:4000ms;
	animation-fill-mode: forwards; 
	-webkit-animation-fill-mode: forwards; 
	}
.let6{
	position:relative;
	/*top:-2000px;*/
	opacity:0;
	animation-delay:1500ms;	
	animation-name:flickerThree;
	animation-duration:750ms;
	animation-fill-mode: forwards; 
	-webkit-animation-fill-mode: forwards; 
	}
.let7{
	position:relative;
	/*top:-2000px;*/
	opacity:0;
	animation-name:flickerOne;
	animation-duration:1000ms;
	animation-fill-mode: forwards; 
	-webkit-animation-fill-mode: forwards; 
	}
.let8{
	position:relative;
	/*top:-2000px;*/
	opacity:0;
	animation-name:flickerThree;
	animation-duration:5000ms;
	animation-fill-mode: forwards; 
	-webkit-animation-fill-mode: forwards; 
	}
.let9{
	position:relative;
	/*top:-2000px;*/
	opacity:0;
	animation-delay:1000ms;
	animation-name:flickerTwo;
	animation-duration:500ms;
	animation-fill-mode: forwards; 
	-webkit-animation-fill-mode: forwards; 
	}
.let10{
	position:relative;
	/*top:-2000px;*/
	opacity:0;
	animation-name:flickerOne;
	animation-duration:600ms;
	animation-fill-mode: forwards; 
	-webkit-animation-fill-mode: forwards; 
	}
.let11{
	position:relative;
	/*top:-2000px;*/
	opacity:0;
	animation-delay:2000ms;
	animation-name:flickerThree;
	animation-duration:3000ms;
	animation-fill-mode: forwards; 
	-webkit-animation-fill-mode: forwards; 
	}
.let12{
	position:relative;
	/*top:-2000px;*/
	opacity:0;
	animation-delay:400ms;
	animation-name:flickerTwo;
	animation-duration:2000ms;
	animation-fill-mode: forwards; 
	-webkit-animation-fill-mode: forwards; 
}

nav{
	position:relative;
	clear:both;
}

#mainList{
	margin: 0;
	padding:0;
	text-align:center;
	list-style-type: none;
}

.mainNav{
	display:inline;
}

.mainNav a{
	display:inline-block;
	padding:20px;
	text-decoration:none;
	font-family: 'Creepster', cursive;
	text-shadow: 0 0 25px #3DF400;
	color:#3DF400;
	font-size:2em;
	text-transform: uppercase;
}

.mainNav a:hover{
	color:pink;
	cursor:pointer;
	animation-name:spookyHov;
  	animation-duration:500ms;
  	animation-timing-function:ease-in;
  	transform: scale(1.15,1.15);
}

#product_section{
	display:inline-block;
	margin-left:2%;
}

[class$="product"]{
	float:left;
	width:200px;
	height:300px;
	padding:20px;
	margin:30px;
	border-radius:5px;
	position:relative;
}

.container{
	height:150px;
	width:150px;
	position:relative;
  	perspective:500px;
  	float:left;
}

.flipImg{
	width:100%;
	height:100%;
	position:absolute;
	transform-style:preserve-3d;
	transition: transform 1s;
}

[class$="front"]{
	position:absolute;
	border:5px solid black;
	border-radius:5px;
}

[class$="back"]{
	border-radius:5px;
	transform:rotateX(180deg);
	position:absolute;
	border:5px solid black;
	border-radius:5px;
}

.flipImg img{
	display:block;
	width:100%;
	height:100%;
	margin:0;
	position:absolute;
	backface-visibility:hidden;
}

.flipImg:hover{
	cursor: url(../IMG/cursorCustom.png), auto;
	transition-delay:2s;
	transform: rotateX(180deg);
}


.cart{
	font-family:FontAwesome, arial, sans;
	float:left;
	font-size: 2em;
	color:white;
	position:absolute;
	top: 40%;
	left:80%;
}

.cart:hover{
	cursor:pointer;
	animation-name:rotateCart;
  	animation-duration:700ms;
  	animation-iteration-count:infinite;
  	animation-timing-function:ease-in;
}

.description{
	display:inline-block;
	margin-top:15px;
	padding:5px;
	color:white;
	font-family:"Trebuchet MS", Helvetica, sans-serif;
	font-size: 0.9em;
}

[class$="-share"]{
	font-family:FontAwesome, arial, sans;
	background-color:black;
	color:#F47A00;
	height:15px;
	width:15px;
	border-radius:50%;
	font-size:18px;
	padding:15px;
	float:left;
}

[class^="facebook-"]{
	position:absolute;
	bottom:8%;
	left:8%;
}
[class^="twitter-"]{
	position:absolute;
	bottom:8%;
	left:39%;
}
[class^="tumblr-"]{
	position:absolute;
	bottom:8%;
	left:70%;
}


[class*="ladies"]{
	background-color:#7B297B;
	box-shadow: 0 0 50px #FF80FF;
}

[class*="mens"]{
	background-color:#005D00;
	box-shadow: 0 0 50px #00E500;

}

[class*="kids"]{
	background-color:#DA6D00;
	box-shadow: 0 0 50px #FFDB4D;
}

footer{
	width:800px;
	margin:0 auto;
	padding-top:20px;
}

footer h2{
	margin:0;
	padding:10px 0;
	color:white;
	font-family:"Trebuchet MS", Helvetica, sans-serif;
	font-size:1em;
	text-transform: uppercase;
}

.footerList{
	margin: 0;

	list-style-type: none;
	column-count:4;
	-webkit-column-count:4;
	column-width:20%;
	-webkit-column-width:20%;
	column-gap:6%;
	-webkit-column-gap:6%;
}

.footerNav a{
	text-decoration:none;
	text-transform: uppercase;
	color:white;
	font-family:"Trebuchet MS", Helvetica, sans-serif;
	font-size:0.8em;
	padding:5px;
}


.footerNav a:hover{
	color:pink;
}

.footerCopy{
	color:white;
	font-family:"Trebuchet MS", Helvetica, sans-serif;
	text-align:center;
}

@media(max-width:860px){
	.logo{
		width:50%;
		margin-left:20%;
		cursor:pointer;
	}
	h1{
		display:none;
	}
	.mainNav a{
		padding:12px;
		font-size:1.75em;
	}
	/*
	
	HERE IS A LOT OF HOPELESS EFFORT:
	
	.navBar{
		display:block;
		height:100%;
		position:fixed;
		height:100%;
		padding-top: 3em;
  		-webkit-transform: translate(100%, 0); 
  		transform: translate(100%, 0); 
  		top:200%;
  		transition: top ease-in 300ms;  
	}
	.logo:hover .navBar{
	  	-webkit-transform: translate(0, 0); 
  		transform: translate(0, 0);
  		position: relative;  
 		height:100%;
  		top:0%;
	}
	*/
	/*
	.navBar {
  		position: fixed;
  		padding-top: 3em;
  		-webkit-transform: translate(100%, 0); 
  		transform: translate(100%, 0); 
  		top:200%;
  		transition: top ease-in 300ms;  
	}*/

	/*
	#menuContainer:hover {
		right:0;
		background-color:transparent;
		position:fixed;
		height:100%;
		z-index:99;
		width:50%;
	}

	#product_section,
	#menuContainer:hover .logo ~ .navBar {
  		-webkit-transform: translate(0, 0); 
  		transform: translate(0, 0);
  		position: relative;  
 		height:100%;
  		top:0%;
	}
	
	#menuContainer:hover .logo ~ #product_section {
  		-webkit-transform: translate(-66%, 0);
  		transform: translate(-66%, 0);
	}


	.logo:hover #menuContainer ~ .navBar{
	  	-webkit-transform: translate(0, 0); 
  		transform: translate(0, 0);
  		position: relative;  
 		height:100%;
  		top:0%;
	}
*/

/*
.navBar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.navBar li {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
}
.navBar a {
    display: block;
    text-decoration: none;
    -webkit-transition: all .25s ease;
	transition: all .25s ease;
}


.navBar ul {
    float: left;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 35px;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
}
.navBar button:hover ul {
    opacity: 1;
    top: 50px;
    visibility: visible;
}
.navBar li ul li {
    float: none;
    width: 100%;
}


#mainList:after, #mainList:before {
    content:"";
    display:table;
}
#mainList:after {
    clear:both;
}
#mainList {
    zoom:1;
}​
*/
/*
	---
		.navBar{
		padding-top:0;
		position:static;
	}
	#mainList li{
		display:inline-block;
	}

	#menuContainer{
	display:block;
	height:100%;
	position:fixed;
	}
---
	.mainNav a{
		padding:12px;
		font-size:1.75em;
	}
	#mainList{
		position:relative;
		top:-2000px;
		/*animation-name:slideDown;
		animation-duration:3000ms;
		animation-fill-mode: forwards; 
		-webkit-animation-fill-mode: forwards; 
	}

.stage:hover #mainList{
		position:relative;
		top:-2000px;
		animation-name:slideDown;
		animation-duration:3000ms;
		animation-fill-mode: forwards; 
		-webkit-animation-fill-mode: forwards; 
}
nav{
	position:relative;
	clear:both;
}

#mainList{
	margin: 0;
	padding:0;
	text-align:center;
	list-style-type: none;
}

.mainNav{
	display:inline;
}

.mainNav a{
	display:inline-block;
	padding:20px;
	text-decoration:none;
	font-family: 'Creepster', cursive;
	text-shadow: 0 0 25px #3DF400;
	color:#3DF400;
	font-size:2em;
	text-transform: uppercase;
}

.mainNav a:hover{
	color:pink;
	cursor:pointer;
	animation-name:spookyHov;
  	animation-duration:500ms;
  	animation-timing-function:ease-in;
  	transform: scale(1.15,1.15);
}
*/
	[class*="mens"]{
		display:none;
	}
	.flipImg:hover{
		transform: none;
	}
	.footerNav{
		display:block;
	}
	[class$="hidden"]{
		display:block;
	}
	footer{
		width:400px;
	}
	.footerList{
		margin: 0;
		padding:0;
		list-style-type: none;
		column-count:2;
		-webkit-column-count:2;
		column-width:45%;
		-webkit-column-width:45%;
		column-gap:10%;
		-webkit-column-gap:10%;
	}
	.footerCopy{
	text-align:left;
	}
}

@media(max-width:650px){
	

	.mainNav a{
		display:block;
		width:100%;
		border:#3DF400 solid 5px;
		background-color:green;
		color:black;
		margin:0 auto;
		margin-left:-2%;
		padding:5px;
	}
	.mainNav a:hover{
		color:pink;
		cursor:pointer;
		animation:none;
  		transform: scale(1,1);
	}
	
	#product_section{
		background-image:url("../IMG/bgSpider.jpg");
		background-repeat:repeat;
	}
	[class*="mens"]{
		display:none;
	}
		[class*="ladies"]{
		display:none;
	}
	[class$="-share"]{
		display:none;
	}
	[class$="product"]{
		height:200px;
		width:100%;
		background-color:white;
		box-shadow: 0 0 75px black;
		position:relative;
		margin-left:-5%;
	}
	.container{
		height:200px;
		width:200px;
		float:left;
	}
	.flipImg img{
		width:100%;
		height:100%;
		border:none;
	}
	.description{
		width:25%;
		float:left;
		display:inline-block;
		position:absolute;
		top:14%;
		left:40%;
		color:black;
		font-family:"Trebuchet MS", Helvetica, sans-serif;
		font-size: 1em;
		text-transform: uppercase;
	}
	.cart{
		display:inline-block;
		font-family:FontAwesome, arial, sans;
		float:left;
		font-size: 4em;
		color:#F47A00;
		position:absolute;
		top: 40%;
		left:75%;
	}
	.footerCopy{
		color:#F47A00;
		text-align:center;
	}	
	.footerList{
		display:none;
	}
}