.wrap-clicker{  
  position: relative;
  width: 80px;
  height: 80px;
  &:last-child {
    margin-bottom: 0;
  }
}

.clicker{
  background-color: white !important;
  outline: none;  
  font-weight: 600;
	  position:absolute;
  cursor: pointer;
  padding: 0;
	  border: none;
	height: 68px;
    width: 68px;
    left: 3px;
    top: 3px;
    border-radius: 100px;
    z-index: 2;
    color: #F79B2C;
    line-height: 15px;
}
.clicker{
	cursor: inherit;
}

.light .clicker{
    /*background-image: url("../img/section2/step2/light.png");*/
    background-repeat: no-repeat;
    background-position: 20px 11px;
    background-color: transparent !important;
}
.light .angled.second {
    border-color:#FDBC2A;
    border-width: 3px;
    background-color:rgba(255, 255, 255, 0.75);
}

.clicker:active{
	background-color:#FFF0D3 !important;
}

.circle{
    position: relative;
    border-radius:40px;
    width: 75px;
	height: 75px;
	z-index: 1;
	animation: rotator linear 2s infinite;
}

.circle.third{
  border-radius: 0;
}

.clicker.faster:hover + .circle, .clicker.faster:active + .circle {
	-webkit-animation-duration: .4s;
    animation-duration: .4s;
}

.clicker.fast:hover + .circle, .clicker.fast:active + .circle {
	  -webkit-animation-duration: .5s;
    animation-duration: .5s;
}

.clicker:hover + .circle, .clicker:active + .circle {
	  -webkit-animation-duration: .8s;
    animation-duration: .8s;
}

.clicker span {
    position: relative;
    top: 0;
    margin: 0 auto;
    font-size: 30px;
    border-radius: 50%;
    /* background-color: #F3B025; */
    width: 30px;
    height: 30px;
    display: block;
    line-height: 29px;
    color: #F3B025;
    text-align: center;
}


.light1 .clicker {
    background-image: url("../img/section3/step1/light1.png") !important;
}
.light2 .clicker {
    background-image: url("../img/section3/step1/light2.png") !important;
}
.light3 .clicker {
    background-image: url("../img/section3/step1/light3.png") !important;
}
.light4 .clicker {
    background-image: url("../img/section3/step1/light4.png") !important;
}
.light5 .clicker {
    background-image: url("../img/section2/step1/light5.png") !important;
}

.light6 .clicker {
    background-image: url("../img/section2/step1/light6.png") !important;
}

.light7 .clicker {
    background-image: url("../img/section2/step1/light7.png") !important;
}

.light8 .clicker {
    background-image: url("../img/section2/step1/light8.png") !important;
}


.lht1 .clicker {
	background-image: url("../img/section3/step1/light1_1.png") !important;
}
.lht2 .clicker {
    background-image: url("../img/section3/step1/light1_2.png") !important;
}
.lht3 .clicker {
    background-image: url("../img/section3/step1/light1_3.png") !important;
}
.lht4 .clicker {
    background-image: url("../img/section3/step1/light2_4.png") !important;
}
.lht5 .clicker {
    background-image: url("../img/section3/step1/light2_5.png") !important;
}
.lht6 .clicker {
    background-image: url("../img/section3/step1/light3_6.png") !important;
}
.lht7 .clicker {
    background-image: url("../img/section3/step1/light3_7.png") !important;
}
.lht8 .clicker {
    background-image: url("../img/section3/step1/light3_8.png") !important;
}
.lht9 .clicker {
    background-image: url("../img/section3/step1/light4_9.png") !important;
}
.lht10 .clicker {
    background-image: url("../img/section3/step1/light4_10.png") !important;
}
.lht11 .clicker {
    background-image: url("../img/section3/step1/light4_11.png") !important;
}
.lht12 .clicker {
    background-image: url("../img/section3/step1/light5_12.png") !important;
}
.lht13 .clicker {
    background-image: url("../img/section3/step1/light5_13.png") !important;
}

.light1 .angled.second {
    border-color: #47ACEA !important;
}
.light1 .clicker span{
	background-color: #47ACEA;
}
.light2 .angled.second {
    border-color: #FF95A8 !important;
}
.light2 .clicker span{
	background-color: #E84A66;
}
.light3 .angled.second {
    border-color: #F4A106 !important;
}
.light3 .clicker span{
	background-color: #F4A106;
}
.light4 .angled.second {
    border-color: #9BC556 !important;
}
.light4 .clicker span{
	background-color: #9BC556;
}
.light5 .angled.second {
    border-color: #0D81A3!important;
    /*border-color: #888B8D!important;*/
}
.light5 .clicker span{
	background-color: #0D81A3;
}

.light6 .angled.second {
    border-color: #EE8BD8 !important;
}
.light6 .clicker span{
	background-color: #93B9D8;
}

.light7 .angled.second {
    border-color: #FF513B !important;
}
.light7 .clicker span{
	background-color: #FF513B;
}

.light8 .angled.second {
    border-color: #00CE97 !important;
}
.light8 .clicker span{
	background-color: #00CE97;
}
.light9 .angled.second {
    /*border-color: #0D81A3!important;*/
    border-color: #888B8D!important;
}
@keyframes rotator{
	  from{ transform: rotate(0deg); }
	  to{ transform: rotate(360deg); }
}

		
.angled {
			background-image: linear-gradient(45deg, 
                white 0%,
                white 30%,
                rgb(20,190,235) 30%,
								rgb(20,190,235) 70%, 
                white 70%, 
                white 100%);
		}

/*.angled.second{
  			background-image: linear-gradient( 
                white 0%,
                white 30%,
                rgb(247, 155, 44) 30%, rgb(19, 174, 155) 70%, 
                white 70%, 
                white 100%);
}*/
.angled.second {
   background-image: none;
    border: solid 3px #13AE9B;
    border-style: dashed;
}

.angled.third{
			background-image: linear-gradient(45deg, 
                white 0%,
                white 30%,
                rgb(130,230,135) 30%,
								rgb(130,230,135) 70%, 
                white 70%, 
                white 100%);
}