/*** Strategic Planning Goals Display ***/

.goal1 {
        height: 100px;
        width: 550px;
        background: url(../images/strategic_planning/goal_1.jpg);
        position: relative; }

.goal2 {
        height: 100px;
        width: 550px;
        background: url(../images/strategic_planning/goal_2.jpg);
        position: relative; }

.goal3 {
        height: 100px;
        width: 550px;
        background: url(../images/strategic_planning/goal_3.jpg);
        position: relative; }

.goal4 {
        height: 100px;
        width: 550px;
        background: url(../images/strategic_planning/goal_4.jpg);
        position: relative; }

.goal5 {
        height: 100px;
        width: 550px;
        background: url(../images/strategic_planning/goal_5.jpg);
        position: relative; }

.goal6  {
        height: 100px;
        width: 550px;
        background: url(../images/strategic_planning/goal_6.jpg);
        position: relative; }

.goal_text {    
       position: absolute;
       left: 125px;
       top: 0;
       height: 100px;
       width: 425px;
       display: table; }

.goal_text p {
        display: table-cell; 
        vertical-align: middle;
        font-size: .9em;
        line-height: 60%;
        padding-right: 10px; }

.byline {
    font-size: .85em;
    color: #a7a9ac; }
 
/*** Strategic Planning Timeline Hover Animation ***/

.flip-container1 {
    -webkit-perspective: 1000;
  perspective: 1000;
    padding-bottom: 5px
}

.flip-container1, .flip-front1, .flip-back {
    width: 535px;
	height: 50px;
}

.flipper {
    position: relative;
}

.flip-front1, .flip-back {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
  
  -webkit-transition: 0.5s;
  -webkit-transform-style: preserve-3d;
  
  -ms-transition: 0.5s;
  -ms-transform-style: preserve-3d;
  
  transition: 0.5s;
  transform-style: preserve-3d;

	position: absolute;
	top: 0;
	left: 0;
}

.flip-back {
	-webkit-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);

	background: #f8f8f8;
}

	.flip-container1:hover .flip-back, .flip-container1.hover .flip-back {
		-webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
		transform: rotateY(0deg);
	}

	.flip-container1:hover .flip-front1, .flip-container1.hover .flip-front1 {
		-webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
		transform: rotateY(180deg);
	}

.flip-front1 {
	background: #8EBFDD;
	z-index: 2;
}

.flip-container2 {
    -webkit-perspective: 1000;
  perspective: 1000;
padding-bottom: 5px
}

.flip-container2, .flip-front2, .flip-back {
	width: 535px;
	height: 50px;
}

.flipper {
    position: relative;
}

.flip-front2, .flip-back {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
  
  -webkit-transition: 0.5s;
  -webkit-transform-style: preserve-3d;
  
  -ms-transition: 0.5s;
  -ms-transform-style: preserve-3d;
  
  transition: 0.5s;
  transform-style: preserve-3d;

	position: absolute;
	top: 0;
	left: 0;
}

.flip-back {
	-webkit-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);

	background: #f8f8f8;
}

	.flip-container2:hover .flip-back, .flip-container2.hover .flip-back {
		-webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
		transform: rotateY(0deg);
	}

	.flip-container2:hover .flip-front2, .flip-container2.hover .flip-front2 {
		-webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
		transform: rotateY(180deg);
	}

.flip-front2 {
	background: #68A9D1;
	z-index: 2;
}

.flip-container3 {
    -webkit-perspective: 1000;
  perspective: 1000;
padding-bottom: 5px
}

.flip-container3, .flip-front3, .flip-back {
	width: 535px;
	height: 50px;
}

.flipper {
    position: relative;
}

.flip-front3, .flip-back {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
  
  -webkit-transition: 0.5s;
  -webkit-transform-style: preserve-3d;
  
  -ms-transition: 0.5s;
  -ms-transform-style: preserve-3d;
  
  transition: 0.5s;
  transform-style: preserve-3d;

	position: absolute;
	top: 0;
	left: 0;
}

.flip-back {
	-webkit-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);

	background: #f8f8f8;
}

	.flip-container3:hover .flip-back, .flip-container3.hover .flip-back {
		-webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
		transform: rotateY(0deg);
	}

	.flip-container3:hover .flip-front3, .flip-container3.hover .flip-front3 {
		-webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
		transform: rotateY(180deg);
	}

.flip-front3 {
	background: #4294C6;
	z-index: 2;
}

.flip-container4 {
    -webkit-perspective: 1000;
  perspective: 1000;
padding-bottom: 5px
}

.flip-container4, .flip-front4, .flip-back {
	width: 535px;
	height: 50px;
}

.flipper {
    position: relative;
}

.flip-front4, .flip-back {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
  
  -webkit-transition: 0.5s;
  -webkit-transform-style: preserve-3d;
  
  -ms-transition: 0.5s;
  -ms-transform-style: preserve-3d;
  
  transition: 0.5s;
  transform-style: preserve-3d;

	position: absolute;
	top: 0;
	left: 0;
}

.flip-back {
	-webkit-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);

	background: #f8f8f8;
}

	.flip-container4:hover .flip-back, .flip-container4.hover .flip-back {
		-webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
		transform: rotateY(0deg);
	}

	.flip-container4:hover .flip-front4, .flip-container4.hover .flip-front4 {
		-webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
		transform: rotateY(180deg);
	}

.flip-front4 {
	background: #326F95;
	z-index: 2;
}

.flip-container5 {
    -webkit-perspective: 1000;
  perspective: 1000;
padding-bottom: 5px
}

.flip-container5, .flip-front5, .flip-back {
	width: 535px;
	height: 50px;
}

.flipper {
    position: relative;
}

.flip-front5, .flip-back {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
  
  -webkit-transition: 0.5s;
  -webkit-transform-style: preserve-3d;
  
  -ms-transition: 0.5s;
  -ms-transform-style: preserve-3d;
  
  transition: 0.5s;
  transform-style: preserve-3d;

	position: absolute;
	top: 0;
	left: 0;
}

.flip-back {
	-webkit-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);

	background: #f8f8f8;
}

	.flip-container5:hover .flip-back, .flip-container5.hover .flip-back {
		-webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
		transform: rotateY(0deg);
	}

	.flip-container5:hover .flip-front5, .flip-container5.hover .flip-front5 {
		-webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
		transform: rotateY(180deg);
	}

.flip-front5 {
	background: #214A63;
	z-index: 2;
}

.flip-title {
  top: 20%;
  left: 5%;
    text-align: left;
	font-size: 1.35em;
	display: inline-block;
	color: #fff;
	border-radius: 5px;
  position: absolute;}
  
.flip-date {
  top: 55%;
  left: 5%;
	text-align: left;
	font-size: 1em;
	display: inline-block;
	color: #fff;
	border-radius: 5px;
	position: absolute;
}
  
.flip-back {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 50px;
  overflow: auto;
}

.flip-back p {
  text-align: center;
  margin: 0;
  padding: 5px;
  font-size: .9em;
  font-family: arial;
  line-height: 1.3em;
}