.step-wrap.shape .step-container{
    width: 716px;
}

.step-wrap.shape .step-content{
    padding-left: 30px;
    padding-right: 30px;
}

.step-wrap.shape .options{
    font-size: 0;
}

.step-wrap.shape .option-wrap{
    margin-bottom: 30px;
}

.step-wrap.shape label{
    display: block;
    border: 1px solid #b7bcc7;
    border-radius: 4px;
    width: 147px; height: 107px;
    text-align: center;
    font-size: 16px;
    vertical-align: bottom;
    padding-top: 72px;
    background: url("/resources/images/products/shapes/1.svg") no-repeat center 35%;
    background-size: 48px;
}

.step-wrap.shape .option-wrap label:hover,
.step-wrap.shape .option-wrap label.active{
    padding-top: 71px;
    color: #0094ff;
    border: 2px solid #0096ff;
    background-image: url('/resources/images/products/shapes/1-a.svg');
    background-repeat: no-repeat;
    background-position: center 34%;
    background-size: 48px;
}

.options.shape label[for$=shape_2]{ background-image: url('/resources/images/products/shapes/2.svg'); }
.options.shape label[for$=shape_2]:hover, .options.shape label.active[for$=shape_2]{ background-image: url('/resources/images/products/shapes/2-a.svg'); }

.options.shape label[for$=shape_3]{ background-image: url('/resources/images/products/shapes/3.svg'); }
.options.shape label[for$=shape_3]:hover, .options.shape label.active[for$=shape_3]{ background-image: url('/resources/images/products/shapes/3-a.svg'); }

.options.shape label[for$=shape_4]{ background-image: url('/resources/images/products/shapes/4.svg'); }
.options.shape label[for$=shape_4]:hover, .options.shape label.active[for$=shape_4]{ background-image: url('/resources/images/products/shapes/4-a.svg'); }

.options.shape label[for$=shape_5]{ background-image: url('/resources/images/products/shapes/5.svg'); }
.options.shape label[for$=shape_5]:hover, .options.shape label.active[for$=shape_5]{ background-image: url('/resources/images/products/shapes/5-a.svg'); }

.options.shape label[for$=shape_6]{ background-image: url('/resources/images/products/shapes/6.svg'); }
.options.shape label[for$=shape_6]:hover, .options.shape label.active[for$=shape_6]{ background-image: url('/resources/images/products/shapes/6-a.svg'); }

.options.shape label[for$=shape_7]{ background-image: url('/resources/images/products/shapes/7.svg'); }
.options.shape label[for$=shape_7]:hover, .options.shape label.active[for$=shape_7]{ background-image: url('/resources/images/products/shapes/7-a.svg'); }

.options.shape label[for$=shape_8]{ background-image: url('/resources/images/products/shapes/8.svg'); }
.options.shape label[for$=shape_8]:hover, .options.shape label.active[for$=shape_8]{ background-image: url('/resources/images/products/shapes/8-a.svg'); }

.options.shape label[for$=shape_9]{ background-image: url('/resources/images/products/shapes/9.svg'); }
.options.shape label[for$=shape_9]:hover, .options.shape label.active[for$=shape_9]{ background-image: url('/resources/images/products/shapes/9-a.svg'); }

.options.shape label[for$=shape_10]{ background-image: url('/resources/images/products/shapes/10.svg'); }
.options.shape label[for$=shape_10]:hover, .options.shape label.active[for$=shape_10]{ background-image: url('/resources/images/products/shapes/10-a.svg'); }

@media (max-width: 767px){

    .step-wrap.shape .step-header{
        margin: 0;
    }

    .step-wrap.shape .step-container{
        width: auto;
    }

    .options.shape .option-wrap{
        float: none;
        margin: 10px auto;
        position: relative;
        text-align: center;
    }

    .options.shape label{
        display: inline-block;
        width: 100%;
    }
}

@media (max-width: 424px){
    .shape .step-content{
        padding-left: 20px;
        padding-right: 20px;
    }
}