.bio-bg {
  background: url("../images/changing-lives/bio-bg.png") repeat-y center center;
  float: left;
  margin-top: 25px; }

.p15 {
  padding: 15px; }

.bio-left {
  margin-bottom: 30px;
  float: left;
  width: 77%;
  background-color: #fff;
  text-align: left;
  position: relative;
  margin-left: 16px;
  margin-top: 10%; }

.bio-left p {
  color: #666666; }

.story1 {
  background: url("../images/changing-lives/s-left-hover.png") no-repeat center center;
  position: absolute;
  height: 76px;
  width: 130px;
  right: -36%; }

/* .story1 p {
????font-size: 15px;
????font-weight: bold;
????line-height: 21px;
????margin-right: -11px;
????margin-top: -5px !important;
????padding-left: 25px;
????padding-right: 20px;
????text-align: right;
????text-transform: uppercase;
} */
.story-left {
  width: 50%;
  float: left; }

.story-right {
  width: 50%;
  float: left; }

.story-left a:hover > .bio-left {
  background-color: #dafaea; }

.story-left a:hover > .bio-left .story1:hover {
  background: url("../images/changing-lives/s-left.png") no-repeat center center;
  position: absolute;
  height: 76px;
  width: 130px;
  right: -36%; }

.story-right a:hover > .bio-right {
  background-color: #dafaea; }

.story-right a:hover > .bio-right .story2:hover {
  background: url("../images/changing-lives/s-right.png") no-repeat center center; }

.story2 {
  background: url("../images/changing-lives/s-right-hover.png") no-repeat center center;
  position: absolute;
  top: 50%;
  height: 76px;
  width: 130px;
  left: -36%; }

/* .story2 p {
????font-size: 15px;
????font-weight: bold;
????line-height: 21px;
????margin-right: 20px;
????margin-top: -3px !important;
????padding-left: 18px;
????text-align: left;
????text-transform: uppercase;
} */
.bio-right {
  margin-bottom: 30px;
  float: right;
  width: 77%;
  background-color: #fff;
  text-align: left;
  position: relative;
  margin-right: 16px;
  margin-top: 10%; }

.bio-right p {
  color: #666666; }

.story-right .p15 {
  background: #fff; }

.story-right a:hover div.p15 {
  background-color: #dafaea; }

.story1, .story2 {
  z-index: 0 !important; }

.story-right img, .story-left img, .p15 {
  z-index: 2 !important;
  position: relative; }

@media screen and (min-width: 320px) and (max-width: 767px) {
  .story-left {
    width: 100%;
    float: left;
    clear: both; }

  .story-right {
    width: 100%;
    float: left;
    clear: both; }

  .story1 {
    display: none; }

  .story2 {
    display: none; }

  .bio-left {
    width: 100%;
    margin: 0px; }

  .bio-right {
    width: 100%;
    margin: 0px; } }