@charset "UTF-8";
/* CSS Document */

#core-values::before {
  content: " "; 
  display: block;
  height: 30px; 
  visibility: hidden;
}

.values-wrap {
  margin-top: 30px;
}

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
	transform-style: preserve-3d;
  margin: 0 0 30px 0;
  line-height: 1.3em;
}
	/*  flip the pane when hovered */
	.flip-container:hover .back-flip {
		transform: rotateY(0deg);
	}
	.flip-container:hover .front-flip {
	    transform: rotateY(180deg);
	}

.flip-container, .front-flip, .back-flip {
	width: 100%;
	height: 250px;
  float: left;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.front-flip, .back-flip {
	backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
	transition: 0.6s;
	transform-style: preserve-3d;
	position: absolute;
	top: 0;
	left: 0;
  border: 2px solid #acc143;
  padding: 20px;
}

/*  front pane, placed above back */
.front-flip {
	z-index: 2;
	transform: rotateY(0deg);
  background-color: #bed065;
  color: #fff;
  font-size: 1.1em;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
  padding-top: 60px;
}

/* back, initially hidden pane */
.back-flip {
	transform: rotateY(-180deg);
  background-color: #e9eae5;
  font-size: .8em;
  line-height: 1.6em;
}

@media (max-width: 1200px) {
  
  .flip-container, .front-flip, .back-flip {
    height: 265px;
  }

}

@media (max-width: 991px) {

  .flip-container, .front-flip, .back-flip {
    height: 115px;
  }
  
  .front-flip {
    padding-top: 44px;
  }
  
}


@media (max-width: 640px) {
  
  .flip-container, .front-flip, .back-flip {
    height: 150px;
  }
  
}

@media (max-width: 480px) {
  
  .flip-container, .front-flip, .back-flip {
    height: 240px;
  }
  
}