/* CSS Container */
/* PAGENAME: CSS Container - Aruba - juLeu Stepper (vodafone.aruba.juleu.stepper.css) PAGEID: 397982 PUBLISHING DATE: 2017-07-25 14:16:35 */
/* URL-Prefix: [] */
/* -[SNIPPETS >>>]---------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------------------- */
/* CONTENT CLASS: CSS Snippet - Aruba - juLeu - Stepper */
/* PAGENAME: CSS Snippet - Aruba - juLeu - Stepper PAGEID: 397988 */
/* ------------------------------------------------------------------------------------------ */

/* juLeu */

.juLeu.stepperDyn              { position:relative;height:63px;margin:0 21px 12px 3px; }

.juLeu.stepperDyn .step        { position:relative;float:left;height:63px;width:25%; }
.juLeu.stepperDyn span         { position:relative;display:block;height:63px;padding-left:70px;font-family:'VodafoneRgRegular',Arial,Helvetica,sans-serif;font-size:20px;line-height:58px;font-weight:normal;color:#666666; }
.juLeu.stepperDyn a            { text-decoration:none;outline:none; }

.juLeu.step0 .campaign:before {
    position: absolute;
    content: " ";
    width: 15px;
    height: 63px;
    top: 0;
    left: -2px;
    background: url(//www.vodafone.de/images/v5/css/stepper_dyn_leftend_selected_1x.png) no-repeat #ffffff;
}
.juLeu.step0 .campaign span {
    background: url(//www.vodafone.de/images/v5/css/stepper15_icon_kampagne_white_1x.png) no-repeat 20px 11px;
    z-index: 1;
    color: #fff;
}
.juLeu.step1 .offer span {
    background: url(//www.vodafone.de/images/v5/css/stepper16_icon_phone_white_1x.png) no-repeat 26px 10px;
    z-index: 1;
    color: #fff;
}
.juLeu.step2 .check span {
    background: url(//www.vodafone.de/images/v5/css/stepper16_icon_extras_white_1x.png) no-repeat 26px 10px;
    z-index: 1;
    color: #fff;
}
.juLeu.step3 .order:after {
    position: absolute;
    content: " ";
    width: 15px;
    height: 63px;
    top: 0;
    right: -2px;
    background: url(//www.vodafone.de/images/v5/css/stepper_dyn_rightend_selected_1x.png) no-repeat #ffffff;
}
.juLeu.step3 .order span {
    background: url(//www.vodafone.de/images/v5/css/stepper15_icon_angebot_white_1x.png) no-repeat 26px 10px;
    z-index: 1;
    color: #fff;
}
.juLeu.step0 .campaign, .juLeu.step1 .offer, .juLeu.step2 .check, .juLeu.step3 .order {
    background: url(//www.vodafone.de/images/v5/css/stepper_dyn_body_selected_1x.png) no-repeat;
}
.juLeu.step0 .offer, .juLeu.step0 .check, .juLeu.step0 .order, .juLeu.step1 .check, .juLeu.step1 .order, .juLeu.step2 .order {
    background: url(//www.vodafone.de/images/v5/css/stepper_dyn_body_unvisited_1x.png) no-repeat;
}
.juLeu.step0 .offer:before, .juLeu.step1 .check:before, .juLeu.step2 .order:before {
    position: absolute;
    content: " ";
    width: 34px;
    height: 63px;
    top: 0;
    left: -15px;
    background: url(//www.vodafone.de/images/v5/css/stepper_dyn_selected_unvisited_1x.png) no-repeat #ffffff;
}
.juLeu.step0 .check:before, .juLeu.step0 .order:before, .juLeu.step1 .order:before {
    position: absolute;
    content: " ";
    width: 34px;
    height: 63px;
    top: 0;
    left: -15px;
    background: url(//www.vodafone.de/images/v5/css/stepper_dyn_unvisited_unvisited_1x.png) no-repeat #ffffff;
}
.juLeu.step0 .order:after, .juLeu.step1 .order:after, .juLeu.step2 .order:after {
    position: absolute;
    content: " ";
    width: 15px;
    height: 63px;
    top: 0;
    right: -2px;
    background: url(//www.vodafone.de/images/v5/css/stepper_dyn_rightend_unvisited_1x.png) no-repeat #ffffff;
}
.juLeu.step0 .offer span, .juLeu.step2 .offer span, .juLeu.step3 .offer span {
    background: url(//www.vodafone.de/images/v5/css/stepper16_icon_phone_dark_1x.png) no-repeat 26px 10px;
    z-index: 1;
}
.juLeu.step0 .check span, .juLeu.step1 .check span, .juLeu.step3 .check span {
    background: url(//www.vodafone.de/images/v5/css/stepper16_icon_extras_dark_1x.png) no-repeat 26px 10px;
    z-index: 1;
}
.juLeu.step0 .order span, .juLeu.step1 .order span, .juLeu.step2 .order span {
    background: url(//www.vodafone.de/images/v5/css/stepper15_icon_angebot_dark_1x.png) no-repeat 26px 10px;
    z-index: 1;
}
.juLeu.step0 .offer:hover span, .juLeu.step2 .offer:hover span, .juLeu.step3 .offer:hover span {
    background: url(//www.vodafone.de/images/v5/css/stepper16_icon_phone_red_1x.png) no-repeat 26px 10px;
    color: #e60000;
}
.juLeu.step0 .check:hover span, .juLeu.step1 .check:hover span, .juLeu.step3 .check:hover span {
    background: url(//www.vodafone.de/images/v5/css/stepper16_icon_extras_red_1x.png) no-repeat 26px 10px;
    color: #e60000;
}
.juLeu.step0 .order:hover span, .juLeu.step1 .order:hover span, .juLeu.step2 .order:hover span {
    background: url(//www.vodafone.de/images/v5/css/stepper15_icon_angebot_red_1x.png) no-repeat 26px 10px;
    color: #e60000;
}
.juLeu.step1 .campaign, .juLeu.step2 .campaign, .juLeu.step2 .offer, .juLeu.step3 .campaign, .juLeu.step3 .offer, .juLeu.step3 .check {
    background: url(//www.vodafone.de/images/v5/css/stepper_dyn_body_visited_1x.png);
}
.juLeu.step1 .campaign:before, .juLeu.step2 .campaign:before, .juLeu.step3 .campaign:before {
    position: absolute;
    content: " ";
    width: 15px;
    height: 63px;
    top: 0;
    left: -2px;
    background: url(//www.vodafone.de/images/v5/css/stepper_dyn_leftend_visited_1x.png) no-repeat #ffffff;
}
.juLeu.step1 .offer:before, .juLeu.step2 .check:before, .juLeu.step3 .order:before {
    position: absolute;
    content: " ";
    width: 34px;
    height: 63px;
    top: 0;
    left: -15px;
    background: url(//www.vodafone.de/images/v5/css/stepper_dyn_visited_selected_1x.png) no-repeat #ffffff;
}
.juLeu.step1 .campaign span, .juLeu.step2 .campaign span, .juLeu.step3 .campaign span {
    background: url(//www.vodafone.de/images/v5/css/stepper15_icon_kampagne_dark_1x.png) no-repeat 20px 11px;
    z-index: 1;
}
.juLeu.step1 .campaign:hover span, .juLeu.step2 .campaign:hover span, .juLeu.step3 .campaign:hover span {
    background: url(//www.vodafone.de/images/v5/css/stepper15_icon_kampagne_red_1x.png) no-repeat 20px 11px;
    color: #e60000;
}
.juLeu.step2 .offer:before, .juLeu.step3 .offer:before, .juLeu.step3 .check:before {
    position: absolute;
    content: " ";
    width: 34px;
    height: 63px;
    top: 0;
    left: -15px;
    background: url(//www.vodafone.de/images/v5/css/stepper_dyn_visited_visited_1x.png) no-repeat #ffffff;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {    

    .juLeu.step0 .campaign:before {
        background: url(//www.vodafone.de/images/v5/css/stepper_dyn_leftend_selected_2x.png) no-repeat #ffffff;
        background-size: 15px 63px;
    }
    .juLeu.step0 .campaign span {
        background: url(//www.vodafone.de/images/v5/css/stepper15_icon_kampagne_white_2x.png) no-repeat 20px 11px;
        background-size: 33px 33px;
    }
    .juLeu.step1 .offer span {
        background: url(//www.vodafone.de/images/v5/css/stepper16_icon_phone_white_2x.png) no-repeat 26px 10px;
        background-size: 40px 40px;
    }
    .juLeu.step2 .order:after {
        background: url(//www.vodafone.de/images/v5/css/stepper_dyn_rightend_unvisited_2x.png) no-repeat #ffffff;
        background-size: 15px 63px;
    }
    .juLeu.step2 .check span {
        background: url(//www.vodafone.de/images/v5/css/stepper16_icon_extras_white_2x.png) no-repeat 26px 10px;
        background-size: 40px 40px;
    }
    .juLeu.step3 .order:after {
        background: url(//www.vodafone.de/images/v5/css/stepper_dyn_rightend_selected_2x.png) no-repeat #ffffff;
        background-size: 15px 63px;
    }
    .juLeu.step3 .order span {
        background: url(//www.vodafone.de/images/v5/css/stepper15_icon_angebot_white_2x.png) no-repeat 26px 10px;
        background-size: 40px 40px;
    }
    .juLeu.step0 .campaign, .juLeu.step1 .offer, .juLeu.step2 .check, .juLeu.step3 .order {
        background: url(//www.vodafone.de/images/v5/css/stepper_dyn_body_selected_2x.png) no-repeat;
        background-size: 500px 63px;
    }
    .juLeu.step0 .offer, .juLeu.step0 .check, .juLeu.step0 .order, .juLeu.step1 .check, .juLeu.step1 .order, .juLeu.step2 .order {
        background: url(//www.vodafone.de/images/v5/css/stepper_dyn_body_unvisited_2x.png) no-repeat;
        background-size: 500px 63px;
    }
    .juLeu.step0 .offer:before, .juLeu.step1 .check:before, .juLeu.step2 .order:before {
        background: url(//www.vodafone.de/images/v5/css/stepper_dyn_selected_unvisited_2x.png) no-repeat #ffffff;
        background-size: 34px 63px;
    }
    .juLeu.step0 .check:before, .juLeu.step0 .order:before, .juLeu.step1 .order:before {
        background: url(//www.vodafone.de/images/v5/css/stepper_dyn_unvisited_unvisited_2x.png) no-repeat #ffffff;
        background-size: 34px 63px;
    }
    .juLeu.step0 .order:after, .juLeu.step1 .order:after {
        background: url(//www.vodafone.de/images/v5/css/stepper_dyn_rightend_unvisited_2x.png) no-repeat #ffffff;
        background-size: 15px 63px;
    }
    .juLeu.step0 .offer span, .juLeu.step2 .offer span, .juLeu.step3 .offer span {
        background: url(//www.vodafone.de/images/v5/css/stepper16_icon_phone_dark_2x.png) no-repeat 26px 10px;
        background-size: 40px 40px;
    }
    .juLeu.step0 .check span, .juLeu.step1 .check span, .juLeu.step3 .check span {
        background: url(//www.vodafone.de/images/v5/css/stepper16_icon_extras_dark_2x.png) no-repeat 26px 10px;
        background-size: 40px 40px;
    }
    .juLeu.step0 .order span, .juLeu.step1 .order span, .juLeu.step2 .order span {
        background: url(//www.vodafone.de/images/v5/css/stepper15_icon_angebot_dark_2x.png) no-repeat 26px 10px;
        background-size: 40px 40px;
    }
    .juLeu.step0 .offer:hover span, .juLeu.step2 .offer:hover span, .juLeu.step3 .offer:hover span {
        background: url(//www.vodafone.de/images/v5/css/stepper16_icon_phone_red_2x.png) no-repeat 26px 10px;
        background-size: 40px 40px;
    }
    .juLeu.step0 .check:hover span, .juLeu.step1 .check:hover span, .juLeu.step3 .check:hover span {
        background: url(//www.vodafone.de/images/v5/css/stepper16_icon_extras_red_2x.png) no-repeat 26px 10px;
        background-size: 40px 40px;
    }
    .juLeu.step0 .order:hover span, .juLeu.step1 .order:hover span, .juLeu.step2 .order:hover span {
        background: url(//www.vodafone.de/images/v5/css/stepper15_icon_angebot_red_2x.png) no-repeat 26px 10px;
        background-size: 40px 40px;
    }
    .juLeu.step1 .campaign, .juLeu.step2 .campaign, .juLeu.step2 .offer, .juLeu.step3 .campaign, .juLeu.step3 .offer, .juLeu.step3 .check {
        background: url(//www.vodafone.de/images/v5/css/stepper_dyn_body_visited_2x.png) no-repeat;
        background-size: 500px 63px;
    }
    .juLeu.step1 .campaign:before, .juLeu.step2 .campaign:before, .juLeu.step3 .campaign:before {
        background: url(//www.vodafone.de/images/v5/stepper_dyn_leftend_visited_2x.png) no-repeat #ffffff;
        background-size: 15px 63px;
    }
    .juLeu.step1 .offer:before, .juLeu.step2 .check:before, .juLeu.step3 .order:before {
        background: url(//www.vodafone.de/images/v5/css/stepper_dyn_visited_selected_2x.png) no-repeat #ffffff;
        background-size: 34px 63px;
    }
    .juLeu.step1 .campaign span, .juLeu.step2 .campaign span, .juLeu.step3 .campaign span {
        background: url(//www.vodafone.de/images/v5/css/stepper15_icon_kampagne_dark_2x.png) no-repeat 20px 11px;
        background-size: 40px 40px;
    }
    .juLeu.step1 .campaign:hover span, .juLeu.step2 .campaign:hover span, .juLeu.step3 .campaign:hover span {
        background: url(//www.vodafone.de/images/v5/css/stepper15_icon_kampagne_red_2x.png) no-repeat 20px 11px;
        background-size: 40px 40px;
    }
    .juLeu.step2 .offer:before, .juLeu.step3 .offer:before, .juLeu.step3 .check:before {
        background: url(//www.vodafone.de/images/v5/css/stepper_dyn_visited_visited_2x.png) no-repeat #ffffff;
        background-size: 34px 63px;
    }

}



@media only screen and (max-width: 767px) {
 
    .juLeu.stepperDyn                   { margin:0 10px 12px; }
    .juLeu.stepperDyn .step             { width:20%; }
    .juLeu.stepperDyn span.webVersion   { display:none; }
    .juLeu.stepperDyn span.mobilVersion { margin: 0 auto; }
    
    .juLeu.step0 .campaign,
    .juLeu.step1 .offer,
    .juLeu.step2 .check,
    .juLeu.step3 .order           { width:40%; }
    

    .juLeu.step0 .offer span, .juLeu.step2 .offer span, .juLeu.step3 .offer span {
        width: 0;
        overflow: hidden;
        background-position: 15px 10px;
    }
    .juLeu.step0 .check span, .juLeu.step1 .check span, .juLeu.step3 .check span {
        width: 0;
        overflow: hidden;
        background-position: 15px 10px;
    }
    .juLeu.step0 .order span, .juLeu.step1 .order span, .juLeu.step2 .order span {
        width: 0;
        overflow: hidden;
        background-position: 15px 10px;
    }
    .juLeu.step0 .offer:hover span, .juLeu.step2 .offer:hover span, .juLeu.step3 .offer:hover span {
        background-position: 15px 10px;
    }
    .juLeu.step0 .check:hover span, .juLeu.step1 .check:hover span, .juLeu.step3 .check:hover span {
        background-position: 15px 10px;
    }
    .juLeu.step0 .order:hover span, .juLeu.step1 .order:hover span, .juLeu.step2 .order:hover span {
        background-position: 15px 10px;
    }
    .juLeu.step1 .campaign span, .juLeu.step2 .campaign span, .juLeu.step3 .campaign span {
        width: 0;
        overflow: hidden;
        background-position: 16px 11px;
    }
    .juLeu.step0 .campaign span, .juLeu.step1 .offer span, .juLeu.step2 .check span, .juLeu.step3 .order span {
        background: none;
    }
    .juLeu.step1 .campaign:hover span, .juLeu.step2 .campaign:hover span, .juLeu.step3 .campaign:hover span {
        background-position: 16px 11px;
    }
    
    .juLeu.step0 .campaign span    { padding-left:36px; }
    .juLeu.step1 .offer span      { line-height:21px;padding:8px 0 0 17px; }
    .juLeu.step2 .check span     { line-height:21px;padding:8px 0 0 28px; }
    .juLeu.step3 .order span      { padding-left:30px; }

}

 
  
/* -[SNIPPETS <<<]---------------------------------------------------------------------------- */