/* ------------------------------------------------------------------ */
/* c. CYO
 ------------------------------------------------------------------ */
/* 1. normal CYO */
.ir224-cyo-bar { margin-bottom: 10px;}
.wizard2-steps-heading, .wizard2-steps-heading h1, .wizard2-steps-heading h2 { font-family: inherit; margin: 0; color: inherit; font-size: 16px; text-align: center;}
.wizard2-steps-heading-full { font-family: 'ZapfHumanist601BT-Roman'; color: inherit; text-align: center; font-size: 18px; text-transform: capitalize; background-color: #f7f7f7; padding: 10px 10px 10px;}
.wizard2-steps { font-family: 'ZapfHumanist601BT-Roman'; color: #333333; letter-spacing: .8px; margin: 20px 0px 0px 0px; padding: 0px; position: relative; clear: both; display: table; width: 100%; height: 80px; margin: 0 auto; border: 1px solid #e2e2e2; border-collapse: separate; table-layout: fixed; line-height: 1.3; position: relative; background-color: #e2e2e2;}
.wizard2-steps a { color: inherit;}
.wizard2-steps a:hover { color: #3e9f8e;}
.wizard2-steps .step { position: relative; width: 33.3%; display: table-cell; vertical-align: top;}
/* DEFAULT STEPS */
.wizard2-steps .node { position: relative; display: block; width: auto; height: 80px; margin-right: 16px; background: #ffffff; text-decoration: none;}
.wizard2-steps .node:before { width: 0px; height: 0px; border-top: 40px solid #ffffff; border-bottom: 40px solid #ffffff; border-left: 15px solid transparent; position: absolute; content: ""; top: 0px; left: -15px;}
.wizard2-steps .node:after { width: 0; height: 0; border-top: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 15px solid #ffffff; position: absolute; content: ""; top: 0px; right: -15px;}
.wizard2-steps .node-skin { position: relative; z-index: 2; display: table; table-layout: fixed; width: 100%; height: inherit; vertical-align: middle;}
.wizard2-steps .node-skin > div { display: table-cell; vertical-align: middle;}
/* STEP num,boy,pho */
.wizard2-steps .num { font-size: 36px; text-align: center; width: 70px; line-height: 80px; }
.wizard2-steps .heading { font-size: 16px; text-transform: capitalize;}
.wizard2-steps .data {text-transform: capitalize;}
.wizard2-steps .data, .wizard2-steps .action {font-family: 'Avenir Roman';font-size: 12px;letter-spacing: 0.075em;}
.wizard2-steps .action a { margin-right: 10px;}
.wizard2-steps .action a:last-child { margin-right: 0;}
.wizard2-steps .pho { width: 70px; text-align: center;}
.wizard2-steps .pho > img, .wizard2-steps .pho .modal-product-superposition { width: 70px; height: auto;}
.wizard2-steps .step:last-child .pho { width: 100px;}
.wizard2-steps .node-skin { background-color: inherit;}
.wizard2-steps .nostyle-heading{text-transform: none;letter-spacing: 0.05em;}
/* COMPLETED STEPS first A{nd last child */
.wizard2-steps .step:first-child { width: 220px;}
.wizard2-steps .step:first-child .node { padding-left: 0; font-size: 16px;}
.wizard2-steps .step:last-child .node { margin-right: 0;}
.wizard2-steps .step:first-child .node:before, .wizard2-steps .step:last-child .node:after { display: none;}
/* ACTIVE STEPS */
.wizard2-steps .active-step .node { background: #f7f7f7;}
.wizard2-steps .active-step .node:before { border-top-color: #f7f7f7; border-bottom-color: #f7f7f7;}
.wizard2-steps .active-step .node:after { border-left-color: #f7f7f7;}
/* HOVER STATES */
/*invariant-color*/
.wizard2-steps .step:not(.invariant-color):hover .node, .wizard2-steps .active-step:not(.invariant-color):hover .node { background: #f9f8f8;}
.wizard2-steps .step:not(.invariant-color):hover .node:before { border-top-color: #f9f8f8; border-bottom-color: #f9f8f8;}
.wizard2-steps .step:not(.invariant-color):hover .node:after { border-left-color: #f9f8f8;}
@media (max-width: 1289px) {
    .wizard2-steps .data .set { display: none;}
    .wizard2-steps .step:first-child { display: none;}
    .wizard2-steps .step:nth-child(2) .node:before { display: none;}
}
/* small tablet STATES */
.wizard2-steps-heading-full { display: none;}
@media (max-width: 1289px) {
    .wizard2-steps-heading { display: none !important;}
}
/* MOBILE STATES */
@media (max-width: 1023px) {
    .wizard2-steps-heading-full { display: block;}
    .wizard2-steps, .wizard2-steps .node { height: 72px; line-height: 1.2;}
    .wizard2-steps, .wizard2-steps .heading { font-size: 13px;}
    .wizard2-steps-heading-full { font-size: 13px; text-transform: capitalize;}
    .wizard2-steps .num { font-size: 28px; width: 23px; line-height: 68px;}
    .wizard2-steps .cont { padding-right: 5px;}
    .wizard2-steps .action { font-size: 13px; white-space: nowrap;}
    .wizard2-steps .action a { margin-right: 3px;}
    .wizard2-steps .node:after, .wizard2-steps .node:before { border-top-width: 36px; border-bottom-width: 36px;}
}
@media (max-width: 767px) {
    .wizard2-steps-heading-full,.wizard2-steps .heading{font-size:15px;}
    .wizard2-steps .node-skin .pho, .wizard2-steps .data, .wizard2-steps .help-tips { display: none;}
    .wizard2-steps .heading{ text-transform: capitalize; max-width:70px;}
    .wizard2-steps .action{padding-top:3px;}
    .wizard2-steps, .wizard2-steps .node { height: 64px;}
    .wizard2-steps .num{ height:64px; line-height: 64px;}
    .wizard2-steps .step:last-child { width: 27%;}
    .wizard2-steps .node-skin { width:auto; background:transparent;}
    .wizard2-steps .step:nth-child(2)  .node-skin{ margin: 0 auto;}
    /*.wizard2-steps .step:nth-child(3) .cont{ padding-left: 3px;}*/
    /*    .wizard2-steps .keep-left .node-skin { width: 100%;}*/
    .wizard2-steps .node:after, .wizard2-steps .node:before { border-top-width: 32px; border-bottom-width: 32px;}
    .wizard2-steps-heading-full{ padding:12px 10px 10px;}
}
@media (max-width: 374px) {
    .wizard2-steps-heading-full,.wizard2-steps .heading{font-size:14px;}
    .wizard2-steps .action { font-size: 11px;}
}
/*find my match wedding rings*/
.ir295-fmmwb-bar .wizard2-steps .step:last-child .pho{
    width: 70px;
}
.ir295-fmmwb-bar .wizard2-steps .step{
    width: 50%;
}
.ir295-fmmwb-bar .wizard2-steps .step .node-skin{
    width: auto;
    margin: auto;
}
.ir295-fmmwb-bar .wizard2-steps .step:hover .node{
    background-color: #fff;
}
.ir295-fmmwb-bar .wizard2-steps .step:hover .node:before{
    border-top-color: #fff;
    border-bottom-color: #fff;
}
.ir295-fmmwb-bar .wizard2-steps .step.active-step:hover .node:before{
    border-top-color: #f7f7f7;
    border-bottom-color: #f7f7f7;
}
.ir295-fmmwb-bar .wizard2-steps .step:hover .node:after{
    border-left-color: #fff;
}
.ir295-fmmwb-bar .wizard2-steps .step.active-step:hover .node:after{
    border-left-color: #f7f7f7;
}
.ir295-fmmwb-bar .wizard2-steps .step.active-step:hover .node{
    background-color: #f7f7f7
}
@media(max-width:1289px){
    .ir295-fmmwb-bar .wizard2-steps .step:first-child{
        display: table-cell;
    }
    .ir295-fmmwb-bar .wizard2-steps .step:nth-child(2) .node:before { display: block;}
}
@media(max-width: 767px){
    .ir295-fmmwb-bar .wizard2-steps .heading{
        max-width: 100%;
    }
    .ir295-fmmwb-bar .wizard2-steps .help-tips{
        display: block;
    }
}
/*colored gemstones CYO popover*/
.popover-cyo-gr .popover-content{
    overflow: hidden;
    padding:9px;
}
.popover-cyo-gr img{
    margin-top: -12px;
    margin-bottom: -12px;
}
.popover-cyo-gr.bottom{
    text-align: center;
    font-family: 'Avenir Book', Arial, Helvetica, sans-serif;
    max-width: 300px;
    width:300px;
    border:2px solid #3E9F8E;
    top: 73%;
    position: absolute;
    left:50%;
    margin-left:-140px;
}
.popover-cyo-gr.bottom .iconfont-close1{
    position:absolute;
    color:#3E9F8E;
    right: 10px;
    top: 7px;
    cursor:pointer;
}
.popover-cyo-gr .foot-link{
    font-family: 'Avenir Roman';
    text-align: center;
    padding-top:10px;
    padding-bottom:5px;
}
.popover-cyo-gr.bottom .arrow:after {
    top: 3px;
}
.popover-cyo-gr.bottom .arrow{
    left:50%;
}
.wizard2-steps .step:nth-child(3) .popover-cyo-gr.bottom{
    left: auto;
    width:260px;
    right: -80px;
    margin-left:0;
}
@media(max-width:767px){
    .popover-cyo-gr.bottom{
        /*min-width: 290px;*/
        left: -95px;
    }
    .wizard2-steps .step:nth-child(2) .popover-cyo-gr.bottom{
        left: 160px;
    }
    .wizard2-steps .step:nth-child(2) .popover-cyo-gr.bottom .arrow {
        left: 17%;
    }
    .wizard2-steps .step:nth-child(3) .popover-cyo-gr.bottom{
        right:-30px;
        width:240px;
    }
}
.popover-cyo-gr + .modal-backdrop{
    z-index: 1009;
    background: #fff;
    opacity: 0.4;
}