.progress-bg {
	margin: 0 auto;
	width: 100%;
	height: 12px;
	border-radius: 10px;
  text-align: center;
	-moz-box-shadow:    inset 0 0 10px #ccc;
	-webkit-box-shadow: inset 0 0 10px #ccc;
	box-shadow:         inset 0 0 10px #ccc;
}
.progressHalf {
	height: 12px;
	border-radius: 10px;
	float: left;
	width: 50%;
	background-color: #83f39c; 
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-size: 2rem 2rem;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  -webkit-animation: progress-bar 2s ease forwards;
	-moz-animation: progress-bar 2s ease forwards;
	-o-animation: progress-bar 2s ease forwards;
	animation: progress-bar 2s ease forwards;
}
.raised{
  display: contents;
}
.progressHalf .yellow-star{
  position: absolute;
  margin-top: -29px;
  margin-right: -32px;
  -webkit-animation: glitter 2s ease-in-out infinite 2s normal backwards;
  -moz-animation: glitter 2s ease-in-out infinite 2s normal backwards;
  -o-animation: glitter 2s ease-in-out infinite 2s normal backwards;;
  animation: glitter 2s ease-in-out infinite 2s normal backwards;
  
}

@-webkit-keyframes progress-bar {
    from { width: 0%; }
    to { width: 50%; }
}

@-moz-keyframes progress-bar {
    from { width: 0%; }
    to { width: 50%; }
}

@-o-keyframes progress-bar {
    from { width: 0%; }
    to { width: 50%; }
}

@keyframes progress-bar {
    from { width: 0%; }
    to { width: 50%; }
}

@-webkit-keyframes glitter {
  0% { -webkit-transform: scale(1); }
  50% { -webkit-transform: scale(1.2); }
  100% { -webkit-transform: scale(1); }
}
@-moz-keyframes  glitter {
  0% { -moz-transform: scale(1); }
  50% { -moz-transform: scale(1.2); }
  100% { -moz-transform: scale(1); }
}
@keyframes glitter {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
@-o-keyframes glitter {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
@-webkit-keyframes glitter {
  0% { -webkit-transform: scale(1); }
  50% { -webkit-transform: scale(1.2); }
  100% { -webkit-transform: scale(1); }
}

.bar-contain{
  background-color: #38AB4F;
}
.bar-item{
  text-align: left;
  padding: 10px 20px;
  color: white;
  align-items: center;
}
.gray-star{
  position: absolute;
  right: -14px;
  margin-top: -29px;
}

.progressFull {
  height: 12px;
	border-radius: 10px;
	float: left;
	width: 100%;
	background-color: #fdd835; 
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-size: 2rem 2rem;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
	-webkit-animation: progressFull 1s ease-out forwards;
	-moz-animation: progressFull 1s ease-out forwards;
	-o-animation: progressFull 1s ease-out forwards;
	animation: progressFull 1s ease-out forwards;
}

@-webkit-keyframes progressFull {
    from { width: 50%; }
    to { width: 100%; }
}

@-moz-keyframes progressFull {
  from { width: 50%; }
  to { width: 100%; }
}

@-o-keyframes progressFull {
  from { width: 50%; }
  to { width: 100%; }
}

@keyframes progressFull {
  from { width: 50%; }
  to { width: 100%; }
}
.progressFull .yellow-star{
  position: absolute;
  margin-top: -30px;
  margin-right: -24px;
  z-index: 2;
  animation: glitter 1s ease-in-out 1 1s normal backwards;
  -webkit-animation: glitter 1s ease-in-out 1 1s normal backwards;
  -moz-animation: glitter 1s ease-in-out 1 1s normal backwards;
}
.bar-contain{
  background-color: #38AB4F;
}
.icon-lightning{
  color: yellow; 
  font-weight:bold;
  text-shadow: 2px 2px 4px green;
}
.txtHalf{
  font-size: 17px;
  line-height: normal;
  text-align: center;
  display: block;
  font-weight: bold;
  padding-bottom: 1.8rem !important;
}
.svg-popper{
  width: 2%;
}
.txtFull{
  font-size: 17px;
  line-height: normal;
  text-align: center;
  display: block;
  font-weight: bold;
  padding-bottom: 0.7rem !important;
}
@media all and (max-width: 767px) 
{
  .txtFull{
    margin-bottom: -7px !important;
    line-height: 1.2rem !important;
    font-size: 3vw;
  }
  .svg-popper{
    width: 5%;
  }
  .txtHalf{
    margin-bottom: -1px !important;
    line-height: 1.5rem !important;
    font-size: 3vw;
  }
  .yellow-star{
    width: 20%;
  }
  .gray-star{
    width: 20%;
  }
  .icon-popper{
    width: 8%;
    margin-bottom: -7px;
  }
}

/**Gunluk Lens Style **/


@font-face {
    font-family: AvenirNextLTPro;
    src:url("https://www.lensmarket.com/fonts/AvenirNextLTPro-Bold.otf");
}

.avenir{
    font-family: AvenirNextLTPro;
}

.gnlkProgress{
  background: url('https://www.lensmarket.com/sablon/lensmarket6/images/green-bg.png') no-repeat;
  background-size: cover;
  display: flex;
  padding: 20px 10px;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 20px;
  border-radius: 10px;
}
.gnprog1{
  display: flex;
  align-items: center;
  column-gap: 10px;
}
.gnprog1 span{
  background: -webkit-linear-gradient(#FFF8BD, #FFE500);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gnprog1 .title{
  font-size: 60px;
}
.gnprog1 .text{
  font-size: 20px;
}
.gnlkProgress .col-6{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.des-text{
  color: #fff;
  font-size: 16px;
}
.leftIcon{
  position: absolute;
  margin-top: -8px;
  margin-right: -18px;
}
.gnlkProgress .progressHalf{
  background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(242,255,97,1) 100%);
}
.gnlkProgress button{
  background: rgb(255,102,0);
  background: linear-gradient(90deg, rgba(255,102,0,1) 0%, rgba(255,153,0,1) 100%);
  border: none;
  font-size: 18px;
  color: #fff;
  padding: 1.3rem 2rem;
}
.gnlkProgress .progressFull{
  background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(242,255,97,1) 100%);
}
.doneIcon{
  position: absolute;
    margin-top: -8px;
    margin-right: -18px;
}
.confetti{
  width: 100%;
  position: absolute;
  height: 8rem;
  top: -1rem;
}
.cong-text{
  color: #fff;
  font-size: 18px;
  text-align: center;
}
.cong-text strong{
  font-size: 22px;
}

@media all and (max-width: 767px) 
{
  .gnlkProgress{
    background: url('https://www.lensmarket.com/sablon/lensmarket6/images/bg-mobile.png') no-repeat;
    background-size: cover;
    flex-direction: column;
  }
  .des-text {
    text-align: center;
    line-height: 1.5rem;
  }
  .gnlkProgress button{
    margin-top: 2rem;
  }
  .gnlkProgress .col-3{
    width: 100%;
    margin-top: 1rem;
  }
  .gnlkProgress .col-6{
    width: 100%;
  }
  .gnlkProgress .col-11{
    width: 100%;
  }
}