.hero-item {color: white;}
/* 
#hero h1 {
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #fff;
	margin-bottom: 0.1em;
}
#hero .primary-content > h1 {
	margin: 0;
	padding: 20px 0 0 20px;
}
*/
#hero .primary-content {
	padding: 10px 0;
	margin-bottom: 20px;
}

/* ---- big buttons ---- */
.hero-masonry .button {
	display: block;
	font-size: 1.3em;
	line-height: 1.2em;
	position: relative;
	padding-left: 50px;
	background: #ea0b8c;
}
.hero-masonry .button:hover { background: #8f489c; }
.hero-masonry .button .icon {
	font-size: 32px;
	position: absolute;
	left: 10px;
	top: 10px;
}

/* ---- hero masonry ---- */
.hero-masonry:after { content: ''; display: block; clear: both; }
.hero-masonry .grid-sizer { position: absolute; }
.hero-item, .hero-masonry .grid-sizer { float: left; }

/* define the different content styles */
.tacenter {
	text-align: center;
}
.hero-item {
	/* background-color: #333; */
	background-color: #fff;
}
.heroPadded {
	padding: 0 16px 16px 16px;
}
.heroPadded h3 {
	margin-left: 0;
	padding-left: 0;
}


/*  exapanding / collapsing blocks */
.allowToggle {
	cursor: pointer;
}
.allowToggle .expandBlock {
        font-size: 20px;
        display: block;
        position: absolute;
        top: 4px;
        right: 10px;
}
.allowToggle.w2 .expandBlock {
        display: none;
}
.allowToggle.w2 .collapseBlock {
        font-size: 20px;
        display: block;
        position: absolute;
        top: 4px;
        right: 10px;
}
.allowToggle .collapseBlock {
        display: none;
}

/* -------- */
/* get the boxes to be the right height, and make the content fill them */
.hero-item {
	overflow: hidden;
}
.boxSquare:before {
	content: "";
	display:block;
	/* aspect 1:1, the height should equal width for any size square */
	padding-top: 100%;
}
.box2x1:before {
	content: "";
	display:block;
	/* A 2x1 box includes the width of two blocks plus the full margin between them */
	/* So when the margin is 0.5%, then the size of the margin between them is 1.0% */
	/* 	Resulting in the aspect ration of: 	*/
	/* 	15.66 / (15.66 + 15.66 + .5 + .5 ) 	*/
	/* the correct value */
	/* padding-top: 48.45%; */

	/* the fudged for safari value */
	padding-top: 48.95%;
}
.box4x3:before {
	content: "";
	display:block;
	/* just a guess */
	padding-top: 74.95%;
}
.hero-content {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}
.hero-content .belowImg {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 0 10% 5% 10%;
	text-align: center;
	z-index: 50;
}
.hero-content .aboveImg {
	position: absolute;
	top: 0;
	width: 100%;
	padding: 5% 10% 0 10%;
	text-align: center;
	z-index: 50;
}
/* 
.hero-content  h1,
.hero-content  h2 {
	margin: 0;
	padding: 0;
	color: white;
	text-transform: none;
}
*/
.hero-content img.insetBoxBottom80 {
	position: absolute;
	bottom: 50%;
	left: 50%;
	margin-left: -40%;
	margin-bottom: -40%;
	width: 80%;
	z-index: 100;
}
.hero-content img.insetBoxBottom70 {
	position: absolute;
	bottom: 50%;
	left: 50%;
	margin-left: -40%;
	margin-bottom: -40%;
	width: 70%;
	z-index: 100;
}
.hero-content img.insetBox60 {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -30%;
	margin-top: -30%;
	width: 60%;
	z-index: 100;
}
.hero-content img.insetBox40 {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -20%;
	margin-top: -20%;
	width: 40%;
	z-index: 100;
}
.hero-content img.fillBox {
	width: 100%;
}
/* for images that are not filling the box all the way to the bottom. (Vertically challenged) */
.hero-content img.fillBoxV {
	height: 100%;
	width: auto;
	max-width: none;
}
.pad20 {
	padding: 20px;
}
/* -------- */


/***** flipping panels *****/
/* entire container, keeps perspective */
.flip-container .back {
	z-index: 10;
	cursor: pointer;
}
.flip-container .front {
	z-index: 20;
	cursor: pointer;
}
.flip-container .front:hover {
	z-index: 5;
}
.flip-container .back:hover {
	z-index: 25;
}
.flip-container {
	z-index: 1000;
	overflow: visible;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	-o-perspective: 1000px;
	perspective: 1000px;
}
.flip-container .flipperY, .flip-container .flipperX {
	overflow: visible;
}
.flip-container .front, .flip-container .back {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;
}
.flip-container .flipperY .front, .flip-container .flipperY .back {
	-webkit-transition: 1.0s;
	-moz-transition: 1.0s;
	-o-transition: 1.0s;
	transition: 1.0s;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;

	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
}
.flip-container .flipperY .front {
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	transform: rotateY(0deg);
}
.flip-container .flipperY .back {
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}
.flip-container:hover .flipperY .front, .flip-container.hover .flipperY .front {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}
.flip-container:hover .flipperY .back, .flip-container.hover .flipperY  .back {
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	transform: rotateY(0deg);
}
.flip-container .flipperX .front, .flip-container .flipperX .back {
	-webkit-transition: 1.0s;
	-moz-transition: 1.0s;
	-o-transition: 1.0s;
	transition: 1.0s;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;

	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
}
.flip-container .flipperX .front {
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	-o-transform: rotateX(0deg);
	transform: rotateX(0deg);
}
.flip-container .flipperX .back {
	-webkit-transform: rotateX(-180deg);
	-moz-transform: rotateX(-180deg);
	-o-transform: rotateX(-180deg);
	transform: rotateX(-180deg);
}
.flip-container:hover .flipperX .front, .flip-container.hover .flipperX .front {
	-webkit-transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
	-o-transform: rotateX(180deg);
	transform: rotateX(180deg);
}
.flip-container:hover .flipperX .back, .flip-container.hover .flipperX  .back {
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	-o-transform: rotateX(0deg);
	transform: rotateX(0deg);
}
.clicktoflip .flip-container:hover .flipperX .front {
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	-o-transform: rotateX(0deg);
	transform: rotateX(0deg);
}
.clicktoflip .flip-container:hover .flipperX .back {
	-webkit-transform: rotateX(-180deg);
	-moz-transform: rotateX(-180deg);
	-o-transform: rotateX(-180deg);
	transform: rotateX(-180deg);
}
.clicktoflip .flip-container.hover .flipperX .front {
	-webkit-transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
	-o-transform: rotateX(180deg);
	transform: rotateX(180deg);
}
.clicktoflip .flip-container.hover .flipperX  .back {
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	-o-transform: rotateX(0deg);
	transform: rotateX(0deg);
}


/* hero item sizes */
/* main grid as 6 columns */
/* This is what it should be but some browsers don't handle subpixel filtering very well. */
/* 
.hero-item, .hero-masonry .grid-sizer {
		width: 15.66%; margin: 0.5%; }
.hero-item.w2 { width: 32.32%; } 
*/
.hero-item, .hero-masonry .grid-sizer {
		width: 15.66%; margin: 0.5%;}
.hero-item.w2 { width: 32.00%; }

.lt-ie9 .hero-item,
.lt-ie9 .hero-masonry .grid-sizer {
			width: 15.66%; }
.lt-ie9 .hero-item.w2 { width: 32.32%; }


@media (max-width: 860px) {
	.hero-item, .hero-masonry .grid-sizer { 
			width: 18.0%; margin: 1.0%}
	.hero-item.w2 { width: 37.5%; } /* should be 38.0 */
	.box2x1:before { content: ""; display:block; padding-top: 48.00%;}
	.flip-container { perspective: 600px; -webkit-perspective: 600px; }
}
	
@media (max-width: 767px) {
}
@media (max-width: 720px) {
	.hero-item, .hero-masonry .grid-sizer { 
			width: 23.0%; margin: 1.0%}
	.hero-item.w2 { width: 47.5%; } /* should be 48.0 */
	.box2x1:before { content: ""; display:block; padding-top: 48.00%;}
	.flip-container { perspective: 700px; -webkit-perspective: 700px; }
}
@media (max-width: 620px) {
	.hero-item, .hero-masonry .grid-sizer { 
			width: 30.33%; margin: 1.5%}
	.hero-item.w2 { width: 62.66%; } /* should be 63.66 */
	.box2x1:before { content: ""; display:block; padding-top: 48.00%;}
	.flip-container { perspective: 800px; -webkit-perspective: 800px; }
}
@media (max-width: 480px) {
	.hero-item, .hero-masonry .grid-sizer { 
			width: 46.00%; margin: 2.0%}
	.hero-item.w2 { width: 96.00%; } /* should be 63.66 */
	.box2x1:before { content: ""; display:block; padding-top: 48.00%;}
	.flip-container { perspective: 800px; -webkit-perspective: 1000px; }
}
@media (max-width: 360px) {
}