/* *{border: 1px solid #ff11dd;}
 * Base structure
 */

html,
body {
  font-family: "hotel-solid",sans-serif;
  height: 100%;
  background-color: #ee4288;
  background: url('../images/background.png') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
body {
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
ul{ 
width: 100%;
color:#fee;
list-style:none;
font-size: 16px;
}
/* Links */
a,
a:focus,
a:hover {
  color: #fff;
}
a:focus,
a:hover {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff2d95;
text-decoration: none;
}

.pink{color:#da47b9;}
.magento{color:#ba2799;}
.bright-teal{color: #39faf9;}
.grey-teal{color: #538cb9;}
.purple{color: #ad5eb9;}
.blue{color: #3361d1;}

/*
* Bootstrap overrides
*/

.jumbotron {background:none; padding:0px; margin-top: 0px; }

/*
 * Globals
 */

h1, .jumbotron h1 {
  font-size: 18px;
  font-family: "hotel-solid",sans-serif;
  color: #fff;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff2d95, 0 0 30px #ff2d95, 0 0 40px #ff2d95, 0 0 50px #ff2d95, 0 0 75px #ff2d95;
  letter-spacing: 5px;
  margin:0px 0px 0px 0px;
  padding:10px 0px;
  }

h4 {
  font-size: 12px;
  font-family: "hotel-solid",sans-serif;
  color: #fff;
  text-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 8px #564de6, 0 0 10px #564de6, 0 0 15px #564de6, 0 0 20px #564de6, 0 0 25px #564de6, 0 0 18px #564de6;
  letter-spacing: 5px;
  margin:0px 0px 0px 0px;
  padding:5px 0px 0px 0px;
}
h4:hover {
  font-family: "hotel-solid",sans-serif;
  color: #fff;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff2d95, 0 0 30px #ff2d95, 0 0 40px #ff2d95, 0 0 50px #ff2d95, 0 0 75px #ff2d95;
}
.statement{ 
font-size: 8px;
margin-bottom:40px;
margin-top:20px;
}

.glyphicon{
	font-size: 6px;
 	text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff2d95;
}
.glyphicon:hover{
	 text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #ff2d95, 0 0 5px #ff2d95, 0 0 6px #ff2d95, 0 0 15px #fff, 0 0 20px #ff2d95;
}

#card-position-1{
	display: inline-block;
	
}  
#card-position-2{
	float: none;
	display: inline-block;
	margin:0 40px;
}
#card-position-3{
	display: inline-block;

} 
#spread-panel{
  	display: block;
  	height: 150px;
  	margin-top:0px;
  	margin-bottom: 0px;
}
.tarot-card {
    border: 8px solid white;
    padding:5px;
    margin:0px 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; /* future proofing */
    -khtml-border-radius: 5px; /* for old Konqueror browsers */
    height: 150px;
    width: 100px;
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
}

.tarot-card:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by it's height */
  margin: 0 auto -40px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
  height: 40px;
	font-size: 5px;
	line-height:8px;
}
#footer img {
	width: 30px;
	opacity:0.45;
	margin:10px 0 0 0px;
}




/* Small Devices, Tablets */
@media only screen and (min-width : 768px){
.statement{font-size: 10px;}
	.glyphicon{
		font-size: 8px;
	}
	 .container{
	 	font-size: 8px;
	 }
	h1, .jumbotron h1 {
	  font-size: 24px;
	  margin:25px 0px 25px 0px;
	  }

	h4 {
	  font-size: 18px;
	}

	#spread-panel{
	  	height: 150px;
	  	margin-top:0px;
	  	margin-bottom: 25px;
	}
	.tarot-card {
    	    border: 8px solid white;
	    height: 150px;
	    width: 100px;
	}

	/* Wrapper for page content to push down footer */
	#wrap {
	  min-height: 100%;
	  height: auto !important;
	  height: 100%;
	  /* Negative indent footer by it's height */
	  margin: 0 auto -50px;
	}

	/* Set the fixed height of the footer here */
	#push,
	#footer {
	  height: 50px;
		font-size: 6px;
		line-height:6px;
	}
	#footer img {
		width: 60px;
		opacity:0.45;
		margin:0px 0 0 20px;
	}


}
 
/* Medium Devices, Desktops */
@media only screen and (min-width : 1000px){
.statement{font-size: 12px;}
	.glyphicon{
		font-size: 10px;
	}
	 .container{
	 	font-size: 10px;
	 }

	h1, .jumbotron h1 {
	  font-size: 32px;
	  margin:40px 0px 15px 0px;
	  }

	h4 {
	  font-size: 24px;
	}
	#spread-panel{
	  	height: 225px;
	  	margin-top:20px;
	  	margin-bottom: 30px;
	}
	.tarot-card {
            border: 12px solid white;
	    height: 225px;
	    width: 150px;
	}

	/* Wrapper for page content to push down footer */
	#wrap {
	  min-height: 100%;
	  height: auto !important;
	  height: 100%;
	  /* Negative indent footer by it's height */
	  margin: 0 auto -60px;
	}

	/* Set the fixed height of the footer here */
	#push,
	#footer {
	  height: 60px;
		font-size: 12px;
		line-height:12px;
	}
	#footer img {
		width: 80px;
		margin:0px;
	}

}



/* Large Devices, Wide Screens */
@media only screen and (min-width : 1300px){
.statement{font-size: 16px;}
	.glyphicon{
		font-size: 12px;
	}
	 .container{
	 	font-size: 14px;
	 }

	h1, .jumbotron h1 {
	  font-size: 42px;
	  margin:40px 0px 30px 0px;
	  }

	h4 {
	  font-size: 32px;
	}
	#spread-panel{
	  	height: 300px;
	  	margin-top:20px;
	  	margin-bottom: 50px;
	}
	.tarot-card {
    	    border: 15px solid white;
	    height: 300px;
	    width: 200px;
	}

	/* Wrapper for page content to push down footer */
	#wrap {
	  min-height: 100%;
	  height: auto !important;
	  height: 100%;
	  /* Negative indent footer by it's height */
	  margin: 0 auto -90px;
	}

	/* Set the fixed height of the footer here */
	#push,
	#footer {
	  height: 90px;
	  line-height:24px
	}
	#footer img {
		width: 120px;
		margin:0px 0px;
	}
}