.zqWrap {
  overflow:hidden;
  margin: 0;
  opacity:.9999;
  font-family:sans-serif;
}

.zqUL {
  margin:0 auto;
  padding: 0;
  width: 100%;  
  list-style: none;
}

.zqLI {
  position: relative;
  margin:0 auto .1em;
  text-align: center;
  width: 70%; 
  padding:2%;
}

.zqLeft { 
  float: left;
}
.zqRight {
  float: right;  
}

/*line connecting sections*/
.zqLineWrap {
  z-index: -1;
  /*it's rotated so, width is sorta like height*/
  width: 70em;
  height: 2000%;
  /*the lower the top: number, the further down it will move.  Well, technically higher but.  Move it from 800% to 790% and it will move down.  */
  top: -900%;
  margin: 0;
  background: hsl(0,0%,17%);
  position: absolute;  
}

.zqLeft .zqLineWrap {
  transform: rotate(-75deg) translate(60%,0%);
}

.zqRight .zqLineWrap {
  transform: rotate(75deg) translate(-60%,0%);
}

.zqLine {
  opacity: 0;
  width: 100%;
  height: 0;
  background: hsl(0,0%,10%);
  transition: all 1s ease-out;
} 

.zqJS {
  opacity: 1;
  height: 100%;
}

.zqIcon {
  z-index: 2;
  display: inline-block;
  width: 8em;
  height:8em;
  border-radius: 5%;
  background: hsl(140,50%,50%);
  background-size:cover;
  margin-bottom:1em;
}



.zqH { 
  font-size:3vmax;
  color:#27ae60;
}
.zqP {
  font-size:1.5em;
  line-height:1.8;
  color:#fff; 
}

/*you can lower this to 700 and it will still work great.  Just set it to 900 cause, codepen preview.  */
@media (min-width:0px) and (max-width:900px) {
  .zqIcon {
    z-index: 2;
    display: block;
    margin:1em auto;
    padding:0;
  }
  .zqLI {
    position: relative;
    width: 98%;
    margin:0 auto .1em 0;
    text-align: center;
  } 
  .zqLineWrap {
    top: -800%;
  }
  .zqH{
    font-size:3em;
  }
  
}