body{
	background: url(backt.jpg) #a4a7d9;
	background-size: cover;
	height: 100%;
	width: 100%;
	
	/*  */
	
	margin: 0;
	padding: 0;
	min-width: 1177px;
	overflow: hidden;
	font-family: "Courier New", Courier, mono;
}
.ease {
		-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
#numbers {
	display: flex;
	width: 100%;
	height: 10px;
	overflow: hidden;
	background-color: #000000;
	color: #2b2d12;
	font-size: 50px;
	font-variant: normal;
}
#numbers{
	position: fixed;
	bottom: 0;
	width: 100%;
	padding: 20px 30px 20px 20px;
	right: 0;
	left: 0;
	z-index: 9000;
}
  
@keyframes shake {
  0% { transform: translate(0px, 0px) rotate(0deg); }
  10% { transform: translate(0px, 0px) rotate(-4deg); }
  20% { transform: translate(0px, 0px) rotate(1deg); }
  30% { transform: translate(0px, 0px) rotate(4deg); }
  40% { transform: translate(0px, 0px) rotate(-1deg); }
  50% { transform: translate(0px, 0px) rotate(-4deg); }
  60% { transform: translate(0px, 0px) rotate(0deg); }
  70% { transform: translate(0px, 0px) rotate(-4deg); }
  80% { transform: translate(0px, 0px) rotate(0deg); }
  90% { transform: translate(0px, 0px) rotate(0deg); }
  100% { transform: translate(0px, 0px) rotate(4deg); }
}

#content {
	width: 209px;
	background-color: rgba(255, 255, 255, 0.07);
	float: left;
	padding: 20px 2% 2%;
	height: 787px;
}
#content span {
	color: #e7ee3a;
	background-color: #000000;
	font-size: 11px;
	padding: 4%;
	display: block;
}
#content img {
	width: 100%;
	height: auto;
}
 #content:hover img{
	/* Start the shake animation and make the animation last for 0.5 seconds */
	animation: shake 10s;
	
	/* When the animation is finished, start again */
	animation-iteration-count: infinite;
  }
.bbox, div.sq, div.sq p  {
	margin:0px;
	padding: 0px;
} 
.bbox{
/* main  */
cursor: crosshair;
	width: 860px ;
	height: 860px;
	display: line-block;
	float: left;
	overflow: hidden;
	margin: 15px auto 0;
background-color: rgba(255, 255, 255, 0);
}
.bbox:hover{
	opacity: 1;
		-webkit-transition: all 5s ease-in-out;
	-moz-transition: all 5s ease-in-out;
	-o-transition: all 5s ease-in-out;
	transition: all 5s ease-in-out;
}
div.sq {
	width: 209px;
    height: 209px;
	display: inline-block;
	background-color: rgba(248, 248, 248, 0.13);
	float: left;
	border: 1px solid rgba(225, 219, 196, 0);
}

div.sq p {
	width: 50px;
    height: 50px;
	border: 1px solid rgba(210, 210, 210, 0);
	display: inline-block;
	float: left;
	background-color: rgba(253, 250, 237, 0);
		animation-timing-function: ease-out;
 	-webkit-transition: all 160s ease-out;
	-moz-transition: all 160s ease-out;
	-o-transition: all 160s ease-out;
	transition: all 160s ease-out;
}
div.sq p.i{

	background-color: rgba(5, 5, 5, 0.6);
}
div.sq p.o {
		background-color: rgba(233, 226, 197, 0);
}
div.sq p:hover {
	border: 1px dotted rgba(255, 255, 255, 0.91);
	display: inline-block;
	float: left;
	background-color: rgba(255, 255, 254, 0.22);
	transition-timing-function: ease;

  /* Also the same as animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0);*/
  -webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	transition: all 1s ease-out;
	
}


.art-banner {
	background-image: url(https://dakotapyramid.com/pyico_IMG_5639.JPG);
	
}


/*  */


.ease {
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
.ease-in {
	 animation-timing-function: ease-in ;
 	-webkit-transition: all 10s ease-in ;
	-moz-transition: all 10s ease-in ;
	-o-transition: all 10s ease-in ;
	transition: all 10s ease-in ;
}
.ease-out {
	 animation-timing-function: ease-out;
 	-webkit-transition: all 10s ease-out;
	-moz-transition: all 10s ease-out;
	-o-transition: all 10s ease-out;
	transition: all 10s ease-out;
}

.links{ 
    padding: 4px;
	border: 1px none #cbcac9;
}

.links a{
    text-align: center;
    margin-top: 1%;
    padding: 4%;
    max-width: 500px;
    display: block;
    margin-left: auto;
	margin-right: auto;
	background-color: #413c3c;
    color: #e7ee3a;
    text-decoration:none;
	border-radius: 5px;
	font: 14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

.links a:hover{
	transform: scale(1.02);
	background-color: #22242a;
	color: #e7ee3a;
}
.art-banner {
			width: 100%;
			height: 400px;
			
			
		background: url(https://dakotapyramid.com/pyico_IMG_5639.JPG) center center no-repeat scroll;
	

	background-size: cover;
		-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;

}