@media only screen and (max-width: 1024px) {
    .progressbar li {
        width: 7% !important;
    }
    .step-img {
        width: 350px;
        float: left;
        margin-right: 40px !important;
        margin-left: 40px !important;
    }

    .step-content {
        padding-right: 60% !important;
    }
    .cooking-prev, .cooking-next {
        cursor: pointer;
        position: absolute;
        top: 16%;
        width: auto;
        font-size: 50px;
    }
}
@media only screen and (max-width: 768px) {
    .progressbar li {
        width: 8% !important;
    }
    .step-img {
        width: 100% !important;
        margin-bottom: 30px;
    }

    .step-content {
        padding-right: 70% !important;
    }
}
@media only screen and (max-width: 425px) {
    .progressbar li {
        width: 15% !important;
    }
    .step-img {
        width: 13% !important;
        margin-bottom: 30px;
    }

    .step-content {
        padding-right: 83% !important;
    }
}
@media only screen and (max-width: 1300px) and (min-width:1025) {
    .step-img {
        width: 350px;
        float: left;
        margin-right: 50px;
        margin-left: 50px;
    }
    .step-content {
        margin-bottom: 15%;
        padding-right: 18%
    }
}
@media only screen and (min-width: 1400px) {
    .progressbar li {
        width: 3.9% !important;
    }
    .step-img {
        width: 350px;
        float: left;
        margin-right: 50px;
        margin-left: 50px;
    }
    .step-content {
        margin-bottom: 15%;
        padding-right: 18%
    }
}

.step-img {
    width: 450px;
    float: left;
    margin-right: 50px;
    margin-left: 50px;
}

.step-content {
    margin-bottom: 15%;
    padding-right: 18%
}

.progressbar {
    counter-reset: step;
}

    .progressbar li {
        list-style-type: none;
        float: left;
        width: 5%;
        position: relative;
        text-align: center;
        color: #8C8C8C; 
        /*font-family: 'Mitr', sans-serif;*/
        font-size: 16px;
        font-weight: 200 !important;
    }

        .progressbar li:before {
            content: counter(step);
            counter-increment: step;
            width: 35px;
            height: 35px;
            line-height: 32px;
            border: 1px solid #A1A1A1;
            display: block;
            text-align: center;
            margin: 0 auto 10px auto;
            border-radius: 50%;
            background-color: #FFF;
            /*box-shadow: 0px 2px 3px 0px #808C8C8C;*/
        }

        .progressbar li.cook-step-last:before {
            content: url(/images/step-flag.svg);
            padding: 4px;
        }
        .progressbar li.cook-step-last-active:before {
            content: url(/images/step-flag-white.svg) !important;
            padding: 4px;
        }

        .progressbar li:after {
            content: '';
            position: absolute;
            width: 100%;
            height: 4px;
            background-color: #DADADA;
            top: 16px;
            left: -50%;
            z-index: -1;
        }

        .progressbar li:first-child:after {
            content: none;
        }

        .progressbar li.first:before {
            border: 1px solid #eb1c22;
            background-color: #eb1c22;
            color: #FFF;
            /*box-shadow: 0px 2px 3px 0px #808C8C8C;*/
        }

        .progressbar li.active:before {
            border: 1px solid #eb1c22;
            background-color: #eb1c22;
            color: #FFF;
        }

        .progressbar li.active + li:after {
            background-color: #eb1c22;
            border: 20px;
        }

        .progressbar li.active + li:before {
            border: 1px solid #eb1c22;
            background-color: #eb1c22;
            color: #FFF;
        }

        .progressbar li.inactive + li:after {
            background-color: #eb1c22;
            border: 20px;
        }

        .progressbar li.inactive + li:before {
            border: 3px solid #eb1c22;
            background-color: #eb1c22;
            color: #FFF;
        }