/* Enter Your Custom CSS Here */

/*css Start of coding for Teaching Programs at BH */

#boxholder{
	border: 1px solid #a81e29;
	background-color: white;
	overflow: hidden;
	}
	
.banner{
	padding:0;
  text-align:center;
  width:100%;
  background-color:#a81e29;
  color: white;
  font-size:20px;
	}

	
	.box{
  text-align:top;
	padding:0;
	margin-right:3px;
	margin-left: 4px;
	float: left;
	width:140px;
  background-color:green;
	}
	
/*css End of coding for Teaching Programs at BH */

/*Beginning css for custom sidebars */

#boxholderA{
	overflow: hidden;
	margin-left: 64px;
  margin-bottom:0px;
	text-align: center;
	width:161px;
		}
	
	.boxA{
	float: left;
	margin-left:0px;
	text-align:center;	
	}

/*End Sidebar*/

/* Start Teaching & Regular Program*/
.boxholderX{
	width:100%;
	background-color: lightyellow;
  border: 3px solid gold;
	overflow: hidden;
	}
	
.bannerX{
	text-align:center;
  font-family: Arial Black;
  padding: 10px 0 0 0;
	color: black;
	width:100%;
	height:30px;
	background-color:#ffc266;
	overflow: hidden;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
} 
  

.bannerX h3{
animation: color 30s linear infinite;
}

.boxX{
	width: 148px;
  height:199px;
	margin-left: 2px;
	margin-bottom:0px;
	margin-top:0px;
	float: left;
	}
.boxX:hover{
	transform:scale(1.1);
	}

.boxY{
	width: 117px;
  height:195px;
	margin-left: 2px;
	margin-bottom:0px;
	float: left;
	}
.boxY:hover{
	transform:scale(1.2);
	}	
.boxZ{
	width: 117px;
	margin: 0 1px;
	float:left;
	}
	

.flip_pic{
  position: relative;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  transform-style: preserve-3d;
  transition: all 0.8s ease;
}

/* THE PSUEDO CLASS CONTROLS THE FLIP ON MOUSEOVER AND MOUSEOUT */
.flip_pic:hover{
  transform: rotateY(180deg);
}

/* THE FRONT FACE OF THE CARD, WHICH SHOWS BY DEFAULT */
 .thefront{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  overflow: hidden;
  
}

/* THE BACK FACE OF THE CARD, WHICH SHOWS ON MOUSEOVER */

.theback{
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  overflow: hidden;
  background: #9DC3E7;
  color: #333;
  text-align: center;
  transform: rotateY(180deg);
}

@keyframes color{
  0% {color:red;}
  25%{color: black;}
  50% {color: green;}
  75% {color:white;}
  100% {color: blue;}
}

/* End Teaching & Regular Program*/

/* Adjusting bottom margin of posts */
.post{
	margin-bottom: 5px
}
/* bottom margin of post */
/* Adjusting bottom margin of table */
.table{
	margin: 0px
}
/* bottom margin of table */
.scale-up{width:100%;height:100%;animation:X5A 20s ease;}
@keyframes X5A{
	10% {transform:scale(0)}
	100% {transform: scale(1)}
	}