/* easy-animation.scss */
/* line 56, ../../sass/_function.sass */
.thom_picture {
  background-image: url("/image/thom.jpg");
}

/* line 56, ../../sass/_function.sass */
.jonny_picture {
  background-image: url("/image/jonny.jpg");
}

/* line 56, ../../sass/_function.sass */
.colin_picture {
  background-image: url("/image/colin.jpg");
}

/* line 56, ../../sass/_function.sass */
.phil_picture {
  background-image: url("/image/phil.jpg");
}

/* line 3, ../../sass/Module/Help.sass */
.hex-k12-help, .hex-k12-helpiframe {
  margin: 50px auto 20px auto !important;
}
/* line 5, ../../sass/Module/Help.sass */
.hex-k12-help > .menuicon, .hex-k12-helpiframe > .menuicon {
  display: none;
}
/* line 7, ../../sass/Module/Help.sass */
.hex-k12-help > .menu, .hex-k12-helpiframe > .menu {
  position: fixed;
  left: calc(7% - 50px - 10px);
  width: 150px;
  height: 450px;
  overflow: auto;
  box-sizing: border-box;
  background-color: #F8F8F8;
  border-radius: 5px;
  padding: 10px 5px;
}
/* line 17, ../../sass/Module/Help.sass */
.hex-k12-help > .menu a, .hex-k12-helpiframe > .menu a {
  width: auto;
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
  font-size: 1em;
  color: #333333;
  height: 30px;
  line-height: 30px;
  margin: 5px 0;
  background-color: #ffffff;
  border-left: 5px solid #D7DCE2;
  padding: 0 5px;
}
/* line 28, ../../sass/Module/Help.sass */
.hex-k12-help > .menu a:hover, .hex-k12-helpiframe > .menu a:hover {
  font-weight: bold;
  border-left: 5px solid #FFA459;
}
/* line 31, ../../sass/Module/Help.sass */
.hex-k12-help > .menu a.active, .hex-k12-helpiframe > .menu a.active {
  font-weight: bold;
  border-left: 5px solid #FFA459;
}
/* line 34, ../../sass/Module/Help.sass */
.hex-k12-help > .menu > .list, .hex-k12-helpiframe > .menu > .list {
  padding-left: 15px;
}
/* line 36, ../../sass/Module/Help.sass */
.hex-k12-help > .menu > .list > a, .hex-k12-helpiframe > .menu > .list > a {
  font-size: 0.875em;
}
/* line 38, ../../sass/Module/Help.sass */
.hex-k12-help .content, .hex-k12-helpiframe .content {
  background-color: #F8F8F8;
  margin-left: 20px;
}
/* line 41, ../../sass/Module/Help.sass */
.hex-k12-help .content > section, .hex-k12-helpiframe .content > section {
  display: block;
  padding: 10px;
}
/* line 44, ../../sass/Module/Help.sass */
.hex-k12-help .content > section > .header, .hex-k12-helpiframe .content > section > .header {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #808080;
}
/* line 50, ../../sass/Module/Help.sass */
.hex-k12-help .content > section > .header > h3, .hex-k12-helpiframe .content > section > .header > h3 {
  display: inline-block;
  font-size: 1.125em;
  color: #333333;
  font-weight: bold;
}
/* line 55, ../../sass/Module/Help.sass */
.hex-k12-help .content > section > .header > .step, .hex-k12-helpiframe .content > section > .header > .step {
  display: inline-block;
  float: right;
}
/* line 58, ../../sass/Module/Help.sass */
.hex-k12-help .content > section > .header > .step > .current-step, .hex-k12-helpiframe .content > section > .header > .step > .current-step {
  font-weight: bold;
  font-size: 1.5em;
  color: #34b27c;
}
/* line 62, ../../sass/Module/Help.sass */
.hex-k12-help .content > section > .header > .step > span, .hex-k12-helpiframe .content > section > .header > .step > span {
  font-weight: bold;
  font-size: 0.875em;
  color: #808080;
}
/* line 66, ../../sass/Module/Help.sass */
.hex-k12-help .content > section > .container, .hex-k12-helpiframe .content > section > .container {
  display: flex;
}
/* line 68, ../../sass/Module/Help.sass */
.hex-k12-help .content > section > .container > .left, .hex-k12-helpiframe .content > section > .container > .left {
  width: 5%;
  cursor: pointer;
}
/* line 71, ../../sass/Module/Help.sass */
.hex-k12-help .content > section > .container > .left > .previous-arrow, .hex-k12-helpiframe .content > section > .container > .left > .previous-arrow {
  width: 100%;
  height: 100%;
  background-image: url("../../images/Help/top_left.png");
  background-position: center;
  background-repeat: no-repeat;
}
/* line 77, ../../sass/Module/Help.sass */
.hex-k12-help .content > section > .container > .right, .hex-k12-helpiframe .content > section > .container > .right {
  width: 5%;
  cursor: pointer;
}
/* line 80, ../../sass/Module/Help.sass */
.hex-k12-help .content > section > .container > .right > .next-arrow, .hex-k12-helpiframe .content > section > .container > .right > .next-arrow {
  width: 100%;
  height: 100%;
  background-image: url("../../images/Help/top_right.png");
  background-position: center;
  background-repeat: no-repeat;
}
/* line 86, ../../sass/Module/Help.sass */
.hex-k12-help .content > section > .container > .content, .hex-k12-helpiframe .content > section > .container > .content {
  flex: 1;
  display: flex;
  background-color: #F8F8F8;
}
/* line 90, ../../sass/Module/Help.sass */
.hex-k12-help .content > section > .container > .content > .step-item, .hex-k12-helpiframe .content > section > .container > .content > .step-item {
  display: none;
  flex: 1;
  padding: 20px;
  -moz-transition: all 2s ease-out;
  -o-transition: all 2s ease-out;
  -webkit-transition: all 2s ease-out;
  transition: all 2s ease-out;
  min-height: 300px;
}
/* line 96, ../../sass/Module/Help.sass */
.hex-k12-help .content > section > .container > .content > .step-item.active, .hex-k12-helpiframe .content > section > .container > .content > .step-item.active {
  display: block;
  background-color: #ffffff;
}
/* line 99, ../../sass/Module/Help.sass */
.hex-k12-help .content > section > .container > .content > .step-item > .text, .hex-k12-helpiframe .content > section > .container > .content > .step-item > .text {
  margin-bottom: 10px;
  border-bottom: 1px solid #cacaca;
  padding-bottom: 5px;
}
/* line 103, ../../sass/Module/Help.sass */
.hex-k12-help .content > section > .container > .content > .step-item > .text > span, .hex-k12-helpiframe .content > section > .container > .content > .step-item > .text > span {
  font-size: 1.125em;
  color: #333333;
}
/* line 107, ../../sass/Module/Help.sass */
.hex-k12-help .content > section > .container > .content > .step-item > .img > img, .hex-k12-helpiframe .content > section > .container > .content > .step-item > .img > img {
  display: block;
  width: 96%;
  margin: 0 auto;
}
/* line 111, ../../sass/Module/Help.sass */
.hex-k12-help .content > section > .container > .content > .step-item > .img > video, .hex-k12-helpiframe .content > section > .container > .content > .step-item > .img > video {
  width: 100%;
}
/* line 114, ../../sass/Module/Help.sass */
.hex-k12-help .content > section > .container > .content > .step-item > .data > .line, .hex-k12-helpiframe .content > section > .container > .content > .step-item > .data > .line {
  margin: 10px 0;
  text-indent: 20px;
  border-bottom: 2px dashed #D7DCE2;
  padding-bottom: 5px;
}
/* line 119, ../../sass/Module/Help.sass */
.hex-k12-help .content > section > .container > .content > .step-item > .data > .line:nth-last-child(1), .hex-k12-helpiframe .content > section > .container > .content > .step-item > .data > .line:nth-last-child(1) {
  border-bottom: none;
}
/* line 121, ../../sass/Module/Help.sass */
.hex-k12-help .content > section > .container > .content > .step-item > .data > .line > span, .hex-k12-helpiframe .content > section > .container > .content > .step-item > .data > .line > span {
  font-size: 1em;
  color: #333333;
  vertical-align: middle;
}
/* line 125, ../../sass/Module/Help.sass */
.hex-k12-help .content > section > .container > .content > .step-item > .data > .line > img, .hex-k12-helpiframe .content > section > .container > .content > .step-item > .data > .line > img {
  margin-left: 15px;
  vertical-align: middle;
}
/* line 128, ../../sass/Module/Help.sass */
.hex-k12-help .content > section > .container > .content > .step-item > .data > .line > .img, .hex-k12-helpiframe .content > section > .container > .content > .step-item > .data > .line > .img {
  margin-top: 10px;
}
/* line 130, ../../sass/Module/Help.sass */
.hex-k12-help .content > section > .container > .content > .step-item > .data > .line > .img > img, .hex-k12-helpiframe .content > section > .container > .content > .step-item > .data > .line > .img > img {
  display: block;
  width: auto;
  margin: 0 auto;
}
/* line 137, ../../sass/Module/Help.sass */
.hex-k12-help .content > section > .container > .phoneheight > .step-item > .img > img, .hex-k12-helpiframe .content > section > .container > .phoneheight > .step-item > .img > img {
  width: auto;
  height: 500px;
}
/* line 140, ../../sass/Module/Help.sass */
.hex-k12-help .content > section > .container > .phoneheight > .step-item > .img > video, .hex-k12-helpiframe .content > section > .container > .phoneheight > .step-item > .img > video {
  height: 500px;
}

/* line 143, ../../sass/Module/Help.sass */
.hex-k12-helpiframe {
  margin: 0px auto 0px auto !important;
}

/* line 147, ../../sass/Module/Help.sass */
#CustomerService {
  display: block;
  position: absolute;
  left: calc(75% + 200px);
  bottom: 60px;
  background-color: #F8F8F8;
  border: 1px solid #676767;
  border-radius: 2px;
  text-align: center;
  padding-bottom: 10px;
}
/* line 157, ../../sass/Module/Help.sass */
#CustomerService > div {
  width: 100px;
  height: 80px;
  background-image: url("../../images/Help/CustomerService.png");
  background-position: center;
  background-repeat: no-repeat;
}
/* line 163, ../../sass/Module/Help.sass */
#CustomerService > span {
  font-size: 1em;
  color: #ff6c68;
}

@media (max-width: 767px) {
  /* line 170, ../../sass/Module/Help.sass */
  .hex-cmpnt-Header > div {
    width: 95% !important;
  }
  /* line 173, ../../sass/Module/Help.sass */
  .hex-cmpnt-Header > div > .left > .subject {
    display: none;
  }
  /* line 175, ../../sass/Module/Help.sass */
  .hex-cmpnt-Header > div > .left > .lessons {
    display: none;
  }
  /* line 178, ../../sass/Module/Help.sass */
  .hex-cmpnt-Header > div > .right > .myStudy {
    display: none;
  }
  /* line 180, ../../sass/Module/Help.sass */
  .hex-cmpnt-Header > div > .right > .account {
    display: none;
  }

  /* line 182, ../../sass/Module/Help.sass */
  .hex-k12-help {
    width: 95% !important;
  }
  /* line 184, ../../sass/Module/Help.sass */
  .hex-k12-help > .menuicon {
    display: block;
    height: 32px;
    margin-bottom: 5px;
  }
  /* line 188, ../../sass/Module/Help.sass */
  .hex-k12-help > .menuicon > .icon {
    width: 32px;
    height: 100%;
    float: right;
    background-image: url("../../images/Help/open.png");
    background-position: center;
    background-repeat: no-repeat;
  }
  /* line 195, ../../sass/Module/Help.sass */
  .hex-k12-help > .menu {
    display: none;
    position: relative;
    left: 0;
    margin-bottom: 10px;
    width: 100%;
    height: auto;
  }
  /* line 202, ../../sass/Module/Help.sass */
  .hex-k12-help > .menu > a {
    display: inline-block;
    width: 50%;
    box-sizing: border-box;
    margin: 0;
  }
  /* line 207, ../../sass/Module/Help.sass */
  .hex-k12-help > .content {
    margin-left: 0px;
  }
  /* line 211, ../../sass/Module/Help.sass */
  .hex-k12-help > .content > section > .container > .left {
    display: none;
  }
  /* line 213, ../../sass/Module/Help.sass */
  .hex-k12-help > .content > section > .container > .right {
    display: none;
  }

  /* line 215, ../../sass/Module/Help.sass */
  #CustomerService {
    display: none;
  }
}