/* transition animation 1 of 1 */
#main-header:hover {
	animation: color-animation 6s ease-in-out 5;
}

@keyframes color-animation {
	0% { background:#2A8195; }
	20% { background:#48DDFF; }	
	40% { background:#4A767F; }	
	60% { background:#3AB1CC; }	
	80% { background:#2A8195; }		
}

header img {
	position:relative; /* to position hgroup to the right */
	/*display:block;*/ /* gets rid of baseline area at the bottom of images that is inherint (and the default) with display:inline */

	-moz-transition: all 1s ease;
	-webkit-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;		
}
			
/* transform 1 of 2 */			
header img:hover {
	-moz-transform:scale(1.02);
	-webkit-transform:scale(1.02);
	-o-transform:scale(1.02);
	-ms-transform:scale(1.02);
	transform:scale(1.02); /* one parameter is x only */ /* makes image scale larger on hover, then back on non-hover */
	/*animation: none;*/
}

/* trying to turn of the animation when hovering over the logo */
.no-animation:hover {
	animation: color-animation 0s none;
	color-animation:none;
	transition:none;
	animation:none;
}


/***** *****/


/* TWO COLUMN LAYOUT TRANSFORM AND TRANSITIONS */

/* transition 1 of 1 */
.image-container {
	float:left; /* takes the image out of the block level flow and lets the text wrap around it. */
	margin: 0 3.19148% 2.12765% 0; /* puts space between image and text */ /* 15 /940 =  1.59574% */  /* 10 /940 = 1.06382 */ /* 15 / 470 = 3.19148% */  /* 10 / 470 = 2.12765 */
	position:relative; /* box cover will be relative to .image-container */
	overflow:hidden;  /* makes the cover disappear on mouse-out rather than briefly appearing below the image */
	width:14.89361%; /* 140 / 940 px */
	/*height:200px;*/ /* gets rid of baseline at bottom of image due to being read like inline text */
}

.cover {
  opacity:0; /* by default, the cover plus text is not shown */
  position:absolute; /* cover positioned absolutely over .image-container */
  top: 60%; /*130px;*/ /* tells where to absolute position the cover. placing here also will allow transition fade out as opposed to being placed in :hover */
  padding:.625em; /* padding around text */ /* 10 / `6px = .625em; */
  /*width:140px;*/ /* stretches the cover the full length of the image */
  /*width:14.89361%;*/ /* 140 / 940 px */
  width:100%;
  /*margin: 0 3.19148% 2.12765% 0; */
  font-size:.625em;
  background:rgba(255,255,255,.35); /* controls the opacity of cover element only, not the text */
  -moz-transition:1.5s;
  -webkit-transition:1.5s;
  -o-transition:1.5s;
  -ms-transition:1.5s;
  transition: 1.5s; /* slows down cover appearing and disappearing over the image */	
  }

.image-container:hover .cover {
	opacity:1; /* controls the opacity of the text *and* the cover */
	overflow:hidden;

}

/* transform 2 of 2 */
#image2-div {
	display:block;
	width:25%;
	/*animation: image-move 10s ease;*/ /* for on-load animation only */
	float:left;	
}

#image2-div:hover {
	animation: image-move 10s ease-in-out;
}

#col2of2-text {
	width:70%;
	float:right;
	display:block;	
}

@-moz-keyframes image-move {
	0% { -moz-transform:translate(0px,0px); }
	50% { -moz-transform:translate(0px,325px); }
	100% { -moz-transform:translate(0px,0px); }
}