/**
* jQuery asPieProgress v0.4.6
* https://github.com/amazingSurge/jquery-asPieProgress
*
* Copyright (c) amazingSurge
* Released under the LGPL-3.0 license
*/
.pie_progress {
  position: relative;
  text-align: center;

  -webkit-transform-style: preserve-3d;

          transform-style: preserve-3d;
}
.pie_progress__svg {
  position: relative;
  display: inline-block;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  vertical-align: middle;
}
.pie_progress__svg svg {
  border-radius: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block; 
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.pie_progress__content, .pie_progress__number, .pie_progress__label, .pie_progress__icon {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.pie_progress__number {
  font-size: 42px;
}

.pie_progress__label {
  margin-top: 32px;
  font-size: 12px;
}

.completed_task ellipse {
    /*fill: #0070AF;*/
}

@media only screen and (max-width: 360px) {
  .completed_task::after {
/*      left: 16%;
      top: 5%;*/
    font-size: 12px;
    left: 0;
  }
  .completed_task{
    background: #0070af url("../images/ic_check.png") no-repeat scroll center center / 11px auto;
  }
  .lesson_progress {
      height: 16px;
      width: 16px;
  }
}

@media only screen and (max-width: 400px) and (min-width: 450px){
  .completed_task::after {
    left: -5%;
    top: 12%;
  }
}

@media only screen and (max-width: 362px) and (min-width: 480px){
    .pie_progress__svg svg {
      height: 80%;
      width: 80%;
    }
  .completed_task::after {
      font-size: 12px;
      left: 16%;
      position: absolute;
      top: 2%;
  }
}


@media only screen and (min-width: 481px) and (max-width: 800px){
  .pie_progress__svg svg {
      height: 65%;
      width: 65%;
    }
    .completed_task::after {
      font-size: 22px;
      /*left: 15%;*/
        left: 0;
      position: absolute;
      top: 23%;
    }
  .completed_task {
/*    background: #0070af url("../images/ic_check.png") no-repeat scroll center bottom / 19px auto;
    height: 70%;
    width: 70%;*/
    background: #0070af url("../images/ic_check.png") no-repeat scroll center center / 13px auto;
    height: 63%;
    width: 63%;
  }
  .completed_task ellipse {
    /*stroke: #0070af;*/
    stroke: none;
  }  
  .lesson_progress {
      height: 30px;
      width: 30px;
  }
}

@media only screen and (min-width: 801px) and (max-width: 1000px){
    .pie_progress__svg svg {
      height: 80%;
      width: 80%;
    }
    .completed_task::after {
    font-size: 22px;
    /*left: 15%;*/
      left: 0;
    position: absolute;
    top: 23%;
  }
  .lesson_progress {
      height: 20px;
      width: 20px;
  }
  .completed_task::after {
    left: 10%;
    top: 23%;
  }

}

@media only screen and (min-width: 801px) and (max-width: 1000px){
  .completed_task::after {
      bottom: 0;
      color: white;
/*      content: "\f147";
      font-family: dashicons;*/
      font-size: 16px;
      left: 0;
      position: absolute;
      top: 10%;
  }
  .completed_task {
    background: #0070af url("../images/ic_check.png") no-repeat scroll center center / 12px auto;
    height: 85%;
    width: 85%;
  }
  .completed_task ellipse {
    /*stroke: #0070af;*/
    stroke: none;
  }
}

@media only screen and (min-width: 1001px) and (max-width: 1200){
  .completed_task {
    background: #0070af url("../images/ic_check.png") no-repeat scroll center bottom / 11px auto;
  }
}

@media only screen and (min-width: 1280px) and (max-width: 1920px){
  .completed_task::after {
  /*    bottom: 0;
      color: white;
      content: "✓";
      font-size: 14px;
      left: 23%;
      position: absolute;
      top: 23%;*/

      bottom: 0;
      color: white;
/*      content: "\f147";
      font-family: dashicons;*/
      font-size: 16px;
      left: 0;
      position: absolute;
      top: 20%;
  }
  .completed_task {
    /*background: #0070af url("../images/ic_check.png") no-repeat scroll center bottom / 15px auto;*/
    background: #0070af url("../images/ic_check.png") no-repeat scroll center center / 14px auto;
  }
  .completed_task ellipse {
    /*stroke: #0070af;*/
    stroke: none;
  }
}