/*********************************************
 * Step with icon
**********************************************/
.ws-icon-steps {
    --width:33.33%;
    --gap:60px;
    --space:15px;
    --img-height:125px;
    --img-minus:40px;
    --number-size:58px;
    --nav-size:45px;
    --radius:20px;
}

/* item */
.ws-icon-steps__list-inner {margin:calc(-1 * var(--space)) calc(-1 * var(--gap));}
.ws-icon-steps__item {width:var(--width); padding:var(--space) var(--gap);}
.ws-icon-steps__item-wrap {padding:var(--img-minus) 0 calc(var(--number-size) * 0.5); height:100%;}
.ws-icon-steps__item-inner {
    height:100%; border-radius:var(--radius); position:relative;
    background:var(--ws-color-pink); color:#fff;
    padding:calc(var(--img-height) - var(--img-minus)) 0 calc(var(--number-size) * 0.5);
}

/* image */
.no-image .ws-icon-steps__item-inner {padding-top:calc(var(--number-size) * 0.5);}
.ws-icon-steps__image {
    position:absolute; top:0; left:50%; transform:translate(-50%, calc(-1 * var(--img-minus)));
}
.ws-icon-steps__image img {max-height:var(--img-height); max-width:var(--img-height);}

/* info */
.ws-icon-steps__item-info {
    padding:var(--ws-spacing-15px) 10px var(--ws-spacing-20px);
    line-height:1.5; color:var(--ws-color-light-grey); font-weight:500;
    max-width:240px;
}
.ws-icon-steps__item-info ul {margin:-4px; list-style:none; padding-top:var(--ws-spacing-15px);}
.ws-icon-steps__item-info ul li {padding:4px;}
.ws-icon-steps__item-info ul li span {
    padding:3px 10px; border-radius:6px; border:1px solid var(--ws-color-light-grey);
    font-size:var(--ws-size-16); font-weight:700; display:block;
}

/* number */
.ws-icon-steps__item-number {
    width:var(--number-size); height:var(--number-size); line-height:var(--number-size);
    font-weight:600; font-size:var(--ws-size-22);
    border-radius:50%; background:#fff; color:var(--ws-color-primary);
    box-shadow:0 -2px 47px rgba(77, 15, 33, 0.35);
    position:absolute; bottom:0; left:50%; transform:translate(-50%, calc(var(--number-size) * 0.5));
}

/* buttons */
.ws-icon-steps__buttons {padding:var(--ws-spacing-60px) 15px 0;}


/* nav */
.ws-icon-steps__nav {max-width:480px; margin-left:auto; margin-right:auto; display:none;}
.ws-icon-steps__nav-item {padding:0 15px;}
.ws-icon-steps__nav-item button {
    width:var(--nav-size); height:var(--nav-size); line-height:var(--nav-size);
    background:var(--ws-color-light-grey); color:#d9869f; font-weight:600; font-size:var(--ws-size-16);
    border-radius:50%;
}
.ws-icon-steps__nav-item button.active {color:var(--ws-color-light-grey); background:var(--ws-color-pink);}
.ws-icon-steps__nav-item button:not(.active):hover {color:var(--ws-color-primary);}


/*********************************************
 * Step with icon - Up and Down
**********************************************/
.ws-icon-steps.up-down {
    --width:25%;
    --gap:22px;
    --space:0;
    --offset:180px;
    --img-height:100px;
}
.ws-icon-steps.up-down .ws-icon-steps__list {margin:0 -55px;}
.ws-icon-steps.up-down .ws-icon-steps__item:nth-child(even) {margin-top:var(--offset);}
.ws-icon-steps.up-down .ws-icon-steps__item-wrap {height:auto;}
.ws-icon-steps.up-down .ws-icon-steps__item-inner {min-height:260px;}

/* bg pattern */
.ws-icon-steps.up-down.has-bg-pattern {position:relative; padding-top:var(--ws-spacing-90px);}
.ws-icon-steps__pattern {
    left:50%; transform:translateX(-50%); width:var(--ws-100vw);
    background-repeat:repeat;
}
.ws-icon-steps__pattern:before {
    top:auto; height:70%;
    background:-webkit-linear-gradient(bottom, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
    background:-o-linear-gradient(bottom, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
    background:-ms-linear-gradient(bottom, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
    background:-moz-linear-gradient(bottom, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
    background:linear-gradient(to top, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
}


/* no image */
.no-image {--offset:100px;}
.no-image .ws-icon-steps__item-wrap {padding-top:0;}
.ws-icon-steps.up-down .ws-icon-steps__item:nth-child(even) {margin-top:var(--offset);}


/*********************************************
 * Step with icon Responsive
**********************************************/
@media only screen and (max-width:1280px) {
    .ws-icon-steps {
        --gap:calc(var(--ws-gap-container) * 0.5);
        --space:15px;
        --img-height:70px;
        --img-minus:30px;
        --number-size:50px;
    }
    .ws-icon-steps.up-down {
        --gap:15px;
        --offset:120px;
        --img-height:70px;
    }

    .ws-icon-steps__item-inner {max-width:280px; margin:0 auto;}

    /* Up and Down */
    .ws-icon-steps.up-down .ws-icon-steps__list {margin:0 calc(var(--ws-gap-container) * -0.5);}
    .ws-icon-steps.up-down .ws-icon-steps__item-inner {min-height:200px;}
}
@media only screen and (max-width:1023px) {
    /* SLIDER ACTIVATED */
    .ws-icon-steps, .ws-icon-steps.up-down {
        --width:33.33%;
        --gap:10px;
        --space:0;
        --img-height:70px;
        --img-minus:30px;
        --number-size:45px;
        --radius:15px;

        --offset:0;
    }

    .ws-icon-steps.up-down .ws-icon-steps__list,
    .ws-icon-steps__list {margin:0;}
    .ws-icon-steps__list-inner {margin:0 0 -20px; display:block;}
    .ws-icon-steps__item {padding-bottom:20px;}

    /* number */
    .ws-icon-steps__item-number {box-shadow:0 -2px 20px rgba(77, 15, 33, 0.2);}

    /* no image */
    .no-image {--offset:0;}

    /* nav */
    .ws-icon-steps__nav {display:flex; justify-content:center;}
}
@media only screen and (max-width:767px) {
    .ws-icon-steps, .ws-icon-steps.up-down {
        --width:50%;
    }
    .ws-icon-steps__item-inner {max-width:none;}
}
@media only screen and (max-width:480px) {
    .ws-icon-steps, .ws-icon-steps.up-down {
        --width:100%;
    }

    .ws-icon-steps__item-inner {
        min-height:60vw; flex-direction:column; justify-content:center; align-items:center;
        padding:calc(var(--img-height) - var(--img-minus)) 0;
    }

    /* buttons */
    .ws-icon-steps__buttons.wpb_text_column p.btn-group {display:flex;}
    .ws-icon-steps__buttons.wpb_text_column p.btn-group > a {flex-grow:1;}
    .ws-icon-steps__buttons.wpb_text_column p.btn-group > a:not(:last-child) {margin:0 20px 0 0;}

    /* nav */
    .ws-icon-steps__nav {display:flex; justify-content:space-between;}
    .ws-icon-steps__nav-item {padding:0 5px;}
}