/**Steps**/

 #background-image-fader{
    background-image: url("../../../assets/HR/hr-5.png");
}
.bg-white-trans{
    background-color: rgba(255, 255, 255, .3)
}
/**Step 1**/
 .step1 .background-image, .step1 #background-image-fader{
    background-image: url("../../../assets/HR/hr-4.png");
}

#step-1-content h1{
    position: absolute;
    top: 323px;
    left: 615px;
    font-size: 48px;
    font-weight: bold;
}
/**Step 2**/

.step2 #background-image-fader{
    background-image: url("../../../assets/HR/hr-5.png");
}


/**Step 3**/
.step3 #background-image-fader{
    background-image: url("../../../assets/HR/hr-6.png");
}

#hover-help-step-3{
    top: 176px;
    width: 582px;
}

/**Step 4**/
.step4 #background-image-fader{
    background-image: url("../../../assets/HR/hr-7.png");
}

#hover-help-step-4{
      top: 175px;
    width: 586px;
}
/**Step 5 **/
.step5 #background-image-fader{
    background-image: url("../../../assets/HR/hr-8.png");
}
#step-5-content{
    position: absolute;
    top: 120px;
    left: 230px;
    width:940px
}
#step-5-content .content-right{
    width: 645px;
    position: absolute;
    right: 21px;
    top: -4px;
}
#step-5-content ul{
    padding-top: 8px;
}
#step-5-content ul li{
    padding-top: 10px;
    padding-bottom: 15px;
    margin-bottom: 6px;
    padding-right: 45px;
    padding-left: 15px;
    
}
#step-5-content .clear-bttn{
    margin-left: 0px;
}
/**Step 6 **/
.step6 #background-image-fader{
    background-image: url("../../../assets/HR/hr-9.png");
}

#hover-help-step-6{
    top: 128px;
    left: 730px;
    width: 600px;
    z-index: 5;
}
#hover-help-step-6.second-pos{
       top:236px;
    left: 723px;
}
#hover-help-step-6 .helper-arrow-up{
    left: 550px;
}
#step6a-pop{
    background-image: url(../../../assets/HR/hr-09-popup.png);
    width: 203px;
    height: 254px;
    left: 1130px;
    top: 83px;
    
}
#step-6a-click{
    top: 48px;
    left: 140px;
    width: 56px;
    height: 56px;
}
/**Step 7 **/
.step7 #background-image-fader{
    background-image: url("../../../assets/HR/hr-10.png");
}
#hover-help-step-7{
    left:725px;
    top:473px;
}
#hover-help-step-7 .helper-arrow-down{
    left:91%    
}
.step7-bttn{
    top: 610px;
    left: 1210px;
    background-image: url(../../../assets/HR/hr-07-bttn.png);
    width: 83px;
    height: 28px;
    background-position: center;
}
/**Step 8 **/
.step8 #background-image-fader{
    background-image: url("../../../assets/HR/hr-11.png");
}
#hover-help-step-8{
    width: 600px;
    left: 420px;
    top: 136px;
}
#step8-bttn{
    left: 240px;
    top: 141px;
    width: 122px;
    height: 55px;
}
.plus-bttn{
    background-image: url(../../../assets/HR/step8-bttn.png);
    width: 24px;
    height: 52px;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    right: 0px;
}
.plus-bttn:hover{
    background-image: url(../../../assets/HR/step8-bttn-over.png);
    opacity: 1;
}
/**Step 9 **/
.step9 #background-image-fader{
    background-image: url("../../../assets/HR/hr-12.png");
}
#hover-help-step-9{
    left:517px;
    top:187px;
}
#step9-click{
    top: 195px;
    left: 405px;
    width: 56px;
    height: 56px;
}
/**Step 10 **/
.step10 #background-image-fader{
    background-image: url("../../../assets/HR/hr-13.png");
}
#hover-help-step-10{
    left:668px;
    top:135px;
}
#step10-bttn{
    left: 487px;
    top: 140px;
    width: 124px;
    height: 55px;
}
/**Step 11 **/
.step11 #background-image-fader{
    background-image: url("../../../assets/HR/hr-14.png");
}
#hover-help-step-11{
    left:882px;
    top:136px;
}
#step11-bttn{
    background-image: url(../../../assets/HR/hr-11-bttn.png);
    width: 103px;
    height: 46px;
    left: 721px;
    top: 145px;
    background-position: center;
    background-size: contain;

}
/**Step 12 **/
.step12 #background-image-fader{
    background-image: url("../../../assets/HR/hr-15.png");
}
#step-12-content, #step-25-content{
    position: absolute;
    top: 180px;
    left: 230px;
    width:940px
}
#step-12-content h2, #step-25-content h2{
    font-size: 42px;
    font-weight: bold;
}
#step-12-content p, #step-25-content p{
    font-size: 24px;
    line-height: 36px;
}
#step-12-content .content-right, #step-25-content .content-right{
    width: 653px;
    position: absolute;
    left: 272px;
    top: 80px;
}
#step-12-content .clear-bttn{
    margin-top: 27px;
}
/**Step 13 **/
.step13 #background-image-fader{
    background-image: url("../../../assets/HR/hr-16.png");
}

#hover-help-step-13{
    top: 128px;
    left: 736px;
    width: 600px;
}
#hover-help-step-13.second-pos{
    top: 237px;
    left: 598px;
}
#hover-help-step-13 .helper-arrow-up{
    left: 550px
}
#step13a-pop{
    background-image: url(../../../assets/HR/hr-16-popup.png);
    width: 203px;
    height: 254px;
    left: 1130px;
    top: 83px;
}
#step-13a-click{
    top: 48px;
    left: 13px;
    width: 56px;
    height: 56px;
}
/**Step 14 **/
.step14 #background-image-fader{
    background-image: url("../../../assets/HR/hr-17.png");
}
#step14-bttn{
    top: 571px;
    left: 700px;
    width: 113px;
    height: 43px;
    background-image: url("../../../assets/HR/hr-14-bttn.png");
}
#hover-help-step-14{
    top:403px;
    left:253px;
    width: 530px;
}
#hover-help-step-14 .helper-arrow-down{
   left: 90%;
}

/**Step 15 **/
.step15 #background-image-fader{
    background-image: url("../../../assets/HR/hr-18.png");
}
#hover-help-step-15{
    top:240px;
    left:320px;
    width: 580px;
}
#hover-help-step-15 .helper-arrow-down{
    left:90%;
}
#step-15-ants{
    width: 980px;
    height:520px;
    left:400px;
    top:160px;
}
#step-15-click{
    width: 215px;
    height: 31px;
    top:403px;
    left:792px;
}
#step-15-dragger{
    background-image: url(../../../assets/HR/hr-18-dragger.png);
    width: 152px;
    height: 245px;
    left: 61px;
    top: 248px;
    background-position: center;
}
/**Step 16 **/
.step16 #background-image-fader{
    background-image: url("../../../assets/HR/hr-19.png");
}
#hover-help-step-16{
    top:143px;
    left:110px;
    width: 580px;
}

#hover-help-step-16.second-pos{
    top:100px;
    left:235px;
}
#hover-help-step-16.third-pos{
    left:400px;
}
#step-16a-pop{
    width: 195px;
    height: 109px;
    left: 208px;
    top: 400px;
}
#step-16b-pop{
    background-image: url("../../../assets/HR/hr-19-popup-2.png");
    width: 271px;
    height: 315px;
    left: 404px;
    top: 400px;
}

#step-16-bttn{
    background-image: url(../../../assets/HR/step-16-bttn.png);
    width: 142px;
    height: 28px;
    top: 443px;
    left: 68px;
    background-position: center;
}
#step-16b-click{
    width: 34px;
    height: 34px;
    left: 5px;
    top:5px;
}
/**Step 17 **/
.step17 #background-image-fader{
    background-image: url("../../../assets/HR/hr-20.png");
}
#hover-help-step-17{
    top:160px;
    left:272px;
    width: 580px;
}
#hover-help-step-17.second-pos{
        top:190px;
        left:460px;
}
#step-17a-pop{
    width: 195px;
    height: 109px;
    left: 208px;
    top: 180px;
}
#step-17-bttn{
    background-image: url(../../../assets/HR/hr-20-bttn.png);
    width: 148px;
    height: 26px;
    top: 179px;
    left: 67px;
}
/**Step 18 **/
.step18 #background-image-fader{
    background-image: url("../../../assets/HR/hr-21.png");
}
#hover-help-step-18{
    top:500px;
    left:115px;
    width: 580px;
}
#step-18-dragger{
    background-image: url(../../../assets/HR/hr-21-bttn.png);
    background-position: center;
    width: 146px;
    height: 25px;
    top: 427px;
    left: 66px; 
}
#step-18-ants{
    width: 235px;
    height: 33px;
    left:225px;
    top:100px;
}
/**Step 19 **/
.step19 #background-image-fader{
    background-image: url("../../../assets/HR/hr-22.png");
}
#hover-help-step-19{
    top:230px;
    left:268px;
    width: 620px;
}
#hover-help-step-19.second-pos{
    top:260px;
    left:392px; 
}
#step-19-dragger{
    background-image: url(../../../assets/HR/hr-22-dragger.png);
    background-position: center;
    width: 146px;
    height: 28px;
    top: 249px;
    left: 66px;
}
#step-19-ants{
    width: 165px;
    height: 46px;
    left: 225px;
    top: 565px;
}
#step19b-pop{
    background-image: url(../../../assets/HR/hr-22-popup.png);
    width: 264px;
    height:379px;
    top:105px;
    left:205px
}
#step-19-arrow{
    width: 51px;
    height: 304px;
    background-image: url(../../../assets/HR/step-19-arrow.png);
    position:absolute;
    left:210px;
    top:260px;
}
#step-19b-click{
    width:125px;
    height:35px;
    left:5px;
    top:170px;
}
/**Step 20 **/
.step20 #background-image-fader{
    background-image: url("../../../assets/HR/hr-23.png");
}
#step-20-click{
    width: 134px;
    height: 30px;
    top: 670px;
    left: 184px;
}
#hover-help-step-20{
    top:321px;
    left:228px;
    width: 590px;
}
/**Step 21 **/
.step21 #background-image-fader{
    background-image: url("../../../assets/HR/hr-26.png");
}
#hover-help-step-21{
    top: 121px;
    left: 89px;
    width: 580px;
}
#step-21-highlight{
    width: 661px;
    height: 560px;
    top: 111px;
    left: 726px;
}

/**Step 22 **/
.step22 #background-image-fader{
    background-image: url("../../../assets/HR/hr-26.png");
}
#step-22-highlight{
    width: 668px;
    height: 563px;
    left: 50px;
    top: 109px;
}
#hover-help-step-22{
    top: 121px;
    left: 780px;
    width: 590px;
}
/**Step 23 **/
.step23 #background-image-fader{
    background-image: url("../../../assets/HR/hr-26.png");
}
#hover-help-step-23{
    top: 500px;
    left: 365px;
    width: 590px;
}
#step-23-click{
    width: 139px;
    height: 30px;
    top: 670px;
    left: 317px;
}
/**Step 24 **/
.step24 #background-image-fader{
    background-image: url("../../../assets/HR/hr-27.png");
}
#hover-help-step-24{
    top: 140px;
    left: 65px;
    width: 611px;
}
#hover-help-step-24  ol li {
    margin-bottom: 5px;
}
/**Step 25 **/
.step25 #background-image-fader{
    background-image: url("../../../assets/HR/hr-28.png");
}

#step-25-content .content-right{
    top: 65px;
}
#step-25-content .clear-bttn{
    margin-top: 2px;
}
/**Step 26 **/
.step26 #background-image-fader{
    background-image: url("../../../assets/HR/hr-29.png");
}
#hover-help-step-26{
    top: 420px;
    left: 505px;
    width: 611px;
}
#step-26-click{
    width: 127px;
    height: 30px;
    top: 670px;
    left: 465px;
}
/**Step 27 **/
.step27 #background-image-fader{
    background-image: url("../../../assets/HR/hr-30.png");
}
#hover-help-step-27{
    top: 150px;
    left: 135px;
    width: 586px;
}
/**Step 28 **/
.step28 #background-image-fader{
    background-image: url("../../../assets/HR/hr-31.png");
}
#hover-help-step-28{
    top: 308px;
    left: 630px;
    width: 611px;
}
#step-28-click{
    width: 130px;
    height: 30px;
    top: 670px;
    left: 590px;
}
/**Step 29 **/
.step29 #background-image-fader{
    background-image: url("../../../assets/HR/hr-32.png");
}
#hover-help-step-29{
    top: 170px;
    left: 717px;
    width: 611px;
}
#hover-help-step-29 .helper-arrow-left{
    top:166px;
}
#step-29-click{
    width: 240px;
    height: 223px;
    top: 350px;
    left: 420px;
    border-width: 4px;
}
/**Step 30 **/
.step30 #background-image-fader{
    background-image: url("../../../assets/HR/hr-33.png");
}
#hover-help-step-30{
    top: 115px;
    left: 725px;
    width: 620px;
}
#hover-help-step-30 ol{
    width:110%;
}
/**Step 30 **/
.step31 #background-image-fader{
    background-image: url("../../../assets/HR/hr-34.png");

}
#hr-tbnail{
      background-image: url("../../../assets/HR/hr-tbnail.png");
}
#hr-video-popup{
    display: none;
}
/**tests**/