/*  */
/* 
*/
.mastercontainer {
  text-align: center
}

.imgcontainer {
  height: 500px;
  width: 300px;
  float: left
}

.imgcontainer img {
  width: 300px;
  margin-top: 100px
}

.barcontainer {
  display: flex;
  overflow: hidden;
  vertical-align: middle;
}

.container1, .container2, .container3 {
  height: 180px;
  display: flex;
  color: #fff
}

.container1 .bar p, .container2 .bar p, .container3 .bar p {
  margin: auto;
  margin-left: 100px;
  margin-right: 40px;
}

.container1 .circ p {
  padding-top: 60px
}

.container2 .circ p {
  padding-top: 60px
}

.container3 .circ p {
  padding-top: 45px
}

.container1 .bar, .container2 .bar, .container3 .bar {
  height: 140px;
  left: -90px;
  top: 20px;
  flex: 1;
  display: flex;
  position: relative;
  z-index: -1;
  justify-content: center
}

.container1 .circ, .container2 .circ, .container3 .circ {
  width: 180px;
  border-radius: 100px;
  margin-right: 20px;
  text-align: center;
  border: 10px solid #fff
}

.container1 .circ, .container1 .bar {
  background: #1a9c38
}

.container2 .circ, .container2 .bar {
  background: #0f886c
}

.container3 .circ, .container3 .bar {
  background: #148087
}

@media screen and (max-width:1000px) {
  .imgcontainer {
    height: auto;
    width: auto;
    text-align: center;
    float: none
  }
  .imgcontainer img {
    width: 300px;
    margin-top: 0px;
    margin-bottom: 10px;
  }
}

@media screen and (max-width:700px) {
  .circ {
    width: 90px;
    display: none
  }
  .mastercontainer, .container1, .container2, .container3, .container1 .bar, .container2 .bar, .container3 .bar {
    left: 0px;
    top: 0px;
    text-align: center
  }
  .container1 .bar p, .container2 .bar p, .container3 .bar p {
    margin: auto;
    padding: 20px;
  }
  .container1, .container2, .container3 {
    display: inline
  }
  .bar {
    margin-top: 10px;
    padding: 10px
  }
}

.marker {
  display: inline-block;
  color: #00876c;
  font-family: "kit-icons";
  font-size: 0.8em;
  font-weight: 300
}
/*  */