.accordion {
  width: 100%;
  max-width: 1280px;
  min-height: 350px;
  overflow: hidden;
  margin: 20px auto;
  cursor:pointer;
  -ms-word-wrap:break-word;
  word-wrap:break-word;

}
.accordion ul {
  width: 100%;
  display: table;
  table-layout: fixed;
  margin: 0;
  padding: 0;
}
.accordion ul li {
  display: table-cell;
  vertical-align: bottom;
  position: relative;
  width: 33.33%;
  height: 350px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
  transition: all 500ms ease;
}
.accordion ul li div {
  display: block;
  overflow: visible;
  width: 100%;
}
.accordion ul li div a {
  display: block;
  height: 350px;
  width: 100%;
  position: relative;
  z-index: 3;
  vertical-align: bottom;
  padding: 5px 20px;
  box-sizing: border-box;
  color: #fff;
  text-decoration: none;
  font-family: Open Sans, sans-serif;
  transition: all 200ms ease;
cursor:pointer;
}
    .accordion ul li div a * {
        opacity: 0;
        margin: 0;
        width: 100%;
        text-overflow: clip;
        position: relative;
        z-index: 5;
        white-space: normal;
        overflow: visible;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);
        -webkit-transition: all 400ms ease;
        transition: all 400ms ease;
        cursor: pointer;
        padding: .2em;
    }
.accordion ul li div a h2 {
  opacity: 1;
  font-family:  Open Sans,sans-serif;
  text-overflow: ellipsis;
  font-size: 1.4em;
  text-transform: uppercase;
  top: 10%;
  color: white;
  text-shadow: -3px 3px 5px #5d5d5d;
  overflow-wrap: break-word;
}
    .accordion ul li div a p {
        top: 5%;
        font-size: 75%;
    }
.accordion ul li:nth-child(1) {
  background-image: url("/~/media/DoMore/3Conditions/3Conditions_01.ashx");
}
.accordion ul li:nth-child(2) {
  background-image: url("/~/media/DoMore/3Conditions/3Conditions_02.ashx");
}
.accordion ul li:nth-child(3) {
  background-image: url("/~/media/DoMore/3Conditions/3Conditions_03.ashx");
}
.accordion ul:hover li {
  width: 8%;
}
.accordion ul:hover li:hover {
  width: 60%;
}
    .accordion ul:hover li:hover a {
        background: rgba(233,236,239,.8);
    }
.accordion ul:hover li:hover a * {
  opacity: .6;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.accordion ul:hover li:hover a h2, .accordion ul:hover li:hover a p {
  opacity: 1;
  color: #00254d;
  text-shadow: none;
  top: 30px;
}
        .accordion ul:hover li:hover a h2 {
            font-size: 36px;
            font-weight: bolder;
            padding-left: 0;
        }

@media screen and (max-width: 600px) {
  body {
    margin: 0;
  }

  .accordion {
    height: auto;
    cursor:pointer;
  }

.accordion ul li {
  height: 150px;
  
}

.accordion ul li div a {

  height: 150px;
}
  .accordion ul li, .accordion ul:hover li {
    position: relative;
    display: table;
    table-layout: fixed;
    width: 100%;
    -webkit-transition: none;
    transition: none;
  }

  .accordion ul li div a h2, .accordion ul li div a p
  {
    margin-left: -2px;
    padding: 2px;
  }
  .accordion ul li a h2, .accordion ul li a p, .accordion ul:hover li a h2, .accordion ul:hover li a p {
    top: 2px;
  }
  .accordion ul li:hover, .accordion ul:hover li:hover {
    position: relative;
    display: table;
    table-layout: fixed;
    width: 100%;
    -webkit-transition: none;
    -webkit-transition: all 400ms ease;
    transition: all 400ms ease;
  }
  .accordion ul:hover li:hover a h2{
    margin-left: 0px;
    font-size: x-large;
  }
  .accordion ul li:hover p, .accordion ul:hover li:hover p {
    font-size: smaller;
  }
  .accordion ul li:hover a, .accordion ul:hover li:hover a {
    height: 700px;
  }
  .accordion ul li:nth-child(2):hover a{
    height: 400px;
  }
  .accordion ul li:nth-child(3):hover a{
    height: 800px;
  }
}

@media screen and (min-width: 996px;){
    .accordion ul li div a h2 {

        font-size: 2.5em;
    }
    }