header {
    padding-top:60px;
}
.flip-card {
  background-color: transparent;
  width: 258px;
  height: 355px;
  perspective: 1000px;
  transform-style: preserve-3d;
  display:inline-block;
}
#one {
    padding:2em 0;
}
/*  UPDATED! flip the pane when hovered */
.flip-card:hover .back {
    transform: rotateY(0deg);
}
.flip-card:hover .front {
    transform: rotateY(180deg);
}
/*
.flip-card, .front {
    width: 100%;
    height: 100%;
}

.flip-card, .back {
    width: 300px;
	height:410px;
}
*/
#four img {
    width:100%;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: absolute;
    width: 100%;
	height: 100%;

}
.back{
  background-color: #DCDDDE;
  color:#000;
  font-size:.85em;
  overflow: hidden;
  /*padding: 15px;*/
}
@media screen and (max-width: 480px) {
	 .back {
		 font-size:auto;
	}
}
/*  UPDATED! front pane, placed above back */
.front {
    z-index: 2;
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(-180deg);
}
.flipper{
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.biocaption {
	padding-top:5px;
}

	#four {
		padding: .5em 1em .5em 1em;
	}

	#four .inner {
		display: -ms-flexbox;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: row;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		-moz-justify-content: space-between;
		-webkit-justify-content: space-between;
		-ms-justify-content: space-between;
		justify-content: flex-start
		-ms-flex-pack: justify;
		flex-wrap:wrap;
	}

	#four .inner article {
        max-width:290px;
		display: block;
		padding-bottom: 20px;
		flex:1 auto;
		-webkit-flex: 1 auto;
		-moz-flex: 1 auto;
		align-self: auto;
	}
	#four .inner article h3 {
		margin:0 0 0 0;
	}
	#four .inner article h5 {
		text-transform:none;
	}
	#four .inner article p {
		color: #000;
		padding: 0px 10px;
		text-align: left;
	}

	#four .inner article .icon {
		color: #b3b3b3;
		font-size: 3em;
	}
	@media screen and (max-width: 980px) {
		.flip-card{
			width: auto 0;
			margin:0 auto;
		}
		.flip-card-back {
		  font-size:.95em;
		}
		
		#four .inner {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
		}

		#four .inner article {
			margin: 0 auto;
		}

		#four {
			padding: 0em;
		}
		.flip-card {
		}

		@media screen and (max-width: 736px) {
			#four {
				padding: 0em;
			}