#problem {
  z-index: 10;
  bottom: -200vh;
}

#problem_content {
  position: relative;
  z-index: 12;
  top: 100vh;
}

#problem_layer_1-transform {
  z-index: 11;
}

#problem_layer_1 {
  background: #114D52;
  background: linear-gradient(150deg, #5ca3a3 0%, #104c52 66%);
  height: 55vh;
  min-height: 55vh;
  -webkit-transform: rotate(-19deg) translate(-15vw);
          transform: rotate(-19deg) translate(-15vw);
  width: 130vw;
  min-width: 800px;
  overflow: hidden;
  z-index: 11;
  position: absolute;
}

#problem_layer_1 #fabric_img {
  position: absolute;
  bottom: 10%;
  width: 81%;
}

@media (orientation: portrait) {
  #problem_layer_1 {
    width: 200vw;
    -webkit-transform: rotate(-19deg) translate(-25%);
            transform: rotate(-19deg) translate(-25%);
  }
}

@media (min-width: 576px) {
  #problem_layer_1 #fabric_img {
    width: 81%;
  }
}

@media (min-width: 900px) {
  #problem_layer_1 #fabric_img {
    width: 71%;
  }
}

@media (min-width: 1200px) {
  #problem_layer_1 #fabric_img {
    width: 61%;
  }
}

#problem_layer_2 {
  z-index: 10;
  position: absolute;
  top: 25vh;
}

#problem_layer_canvas {
  /*  width:130vw;
    height: 100vw;*/
  position: relative;
  top: -16.2vw;
}

.problem_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  max-width: 510px;
  margin-top: 30px;
  min-height: 400px;
}

.problem_list .column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.problem_list .column::before {
  content: "";
  height: 0rem;
  width: 1px;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  border-left: dashed 1px #FFE1BC;
  -webkit-transition: height 1s ease-out;
  transition: height 1s ease-out;
  -webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}

.problem_list .column::after {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  content: "";
  width: 0px;
  height: 0px;
  background: #FFE1BC;
  border-radius: 100%;
  -webkit-transition: width 1s ease-out , height 1s ease-out;
  transition: width 1s ease-out , height 1s ease-out;
  -webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}

.problem_list .column span {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
  margin-top: 13px;
  font-size: 13px;
  font-weight: 300;
  text-align: center;
  opacity: 0;
  -webkit-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
  -webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}

.problem_list .column.index_2::before {
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}

.problem_list .column.index_2::after {
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}

.problem_list .column.index_2 span {
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}

.problem_list .column.index_3::before {
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}

.problem_list .column.index_3::after {
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}

.problem_list .column.index_3 span {
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}

@media (min-width: 900px) {
  .problem_list .column span {
    margin-top: 1.4vw;
    font-size: 1.4vw;
  }
}

@media (min-width: 1200px) {
  .problem_list {
    margin-top: 2.5vw;
  }
  .problem_list .column span {
    margin-top: 1vw;
    font-size: 1vw;
  }
}

.section_2 .column::before, .visited .column::before {
  height: 16rem;
}

.section_2 .column::after, .visited .column::after {
  width: 1.2vw;
  height: 1.2vw;
  /*  min-width:14px;
            min-height: 14px;
            max-width: 21px;;
            max-height: 21px;;*/
}

.section_2 .column span, .visited .column span {
  opacity: 1;
}

.section_2 #problem_content .section_heading, .visited #problem_content .section_heading {
  opacity: 1;
}

.section_2 #problem_content .section_description, .visited #problem_content .section_description {
  opacity: 1;
}

#problem_icon {
  right: 3.1vw;
  bottom: -50vw;
  width: 30vw;
  min-width: 420px;
  max-width: 800px;
  z-index: 12;
  display: none;
}

#problem_icon img {
  width: 100%;
}

@media (min-width: 900px) {
  #problem_icon {
    display: none;
  }
}

#diagonal_mask {
  z-index: 80;
  margin-top: 0px;
  position: relative;
}

#problem_mask {
  -webkit-transform: rotate(-19deg) translate(-10%);
          transform: rotate(-19deg) translate(-10%);
  height: 55vh;
  background: #114D52;
  -webkit-transform: rotate(-19deg) translate(-15vw);
          transform: rotate(-19deg) translate(-15vw);
  width: 130vw;
  min-width: 800px;
  /*position: absolute;
    z-index:10;
    bottom:-520px;*/
}
/*# sourceMappingURL=problem.css.map */