

.compare__items {
    position: relative;
    display: table;
    width: 100%
}

.compare__items:before {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 19px;
    margin: auto;
    content: ''
}

.compare__item {
    position: relative;
    display: table-cell;
    width: 50%
}

.compare-item {
    padding-bottom: 155px
}

.compare-item:before {
    position: absolute;
    bottom: 0;
    content: ''
}

.compare-item_before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-right: -6px
}

.compare-item_before:before {
    right: 15px
}

.compare-item_after {
    padding-left: 30px
}

.compare-item_after:before {
    left: 43px
}

.compare-item__information-wrapper {
    margin-bottom: 200px
}


.compare-item__information {
    position: relative;
    padding-top: 31px;
    padding-bottom: 31px;
    display: inline-block;
    width: 462px;
    font-size: 24px;
    line-height: 1.2;
    text-transform: uppercase
}

.compare-item__information_before {
    padding-right: 35px;
    padding-left: 59px;
/*    background-image: url('../img/logo-bg-rev.png');*/
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    text-align: left;
}


.compare-item__information_after {
    padding-right: 65px;
    padding-left: 38px;
    background-image: url('../img/logo-bg.png');
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}

.compare-item__information span {
    font-weight: 700
}

.compare-item__time-wrapper {
    padding: 0 20px
}

.compare-item__time-wrapper_after {
    text-align: right
}

.compare-item__time {
    position: relative;
    padding-top: 41px;
    padding-bottom: 23px;
    display: inline-block;
    width: 222px
}

.compare-item__time:after {
    position: absolute;
    top: -168px;
    right: 0;
    left: 0;
    margin: auto;
    content: ''
}

.compare-item__time_before {
    padding-right: 15px;
    padding-left: 47px;
    background-image: url('../img/figure-bg1.png');
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-image: -webkit-linear-gradient(10deg, transparent 15%, #ffbf00 0);
    background-image: -o-linear-gradient(10deg, transparent 15%, #ffbf00 0);
    background-image: linear-gradient(80deg, transparent 15%, #ffbf00 0)
}



.compare-item__time_before:after {
    background-image: url('../img/retina.png');
    background-position: -720px 0;
    width: 150px;
    height: 200px
}

.compare-item__time_after {
    padding-right: 47px;
    padding-left: 15px;
    background-image: url('../img/figure-bg1-rev.png');
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-image: -webkit-linear-gradient(350deg, #ffbf00 85%, transparent 0);
    background-image: -o-linear-gradient(350deg, #ffbf00 85%, transparent 0);
    background-image: linear-gradient(100deg, #ffbf00 85%, transparent 0)
}

.compare-item__time_after:after {
    background-image: url('../img/retina.png');
    background-position: -378px -318px;
    width: 150px;
    height: 200px
}

.compare-item__time-title {
    margin-bottom: 12px;
    font-size: 20px;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase
}

.compare-item__time-value {
    font-size: 30px;
    font-weight: 700;
    text-align: center
}

.compare-item__time-value span {
    text-transform: lowercase
}

.compare-item__length {
    position: absolute;
    font-size: 30px;
    color: #ffffff;
    font-weight: 700
}

.compare-item__length:after {
    position: absolute;
    top: 7px;
    width: 155px;
    height: 1px;
    content: '';
    background-color: #000000
}

.compare-item__length_before {
    right: 163px;
    bottom: 365px
}

.compare-item__length_before:after {
    right: 120%
}

.compare-item__length_after {
    left: 185px;
    bottom: 465px
}

.compare-item__length_after:after {
    left: 120%
}

.compare-item__width {
    position: absolute;
    bottom: 113px;
    font-size: 36px;
    color: #ffffff;
    font-weight: 700;
    text-align: center
}

.compare-item__width_before {
    right: 49px;
    width: 106px
}

.compare-item__width_after {
    left: 76px;
    width: 124px
}

.compare-item__label {
    position: absolute;
    bottom: 80px;
    padding-right: 10px;
    padding-left: 10px;
    min-width: 90px;
    font-size: 20px;
    font-weight: 700;
    line-height: 51px;
    text-align: center;
    color: #ffffff;
    background-color: #ff7612
}

.compare-item__label_before {
    right: 155px;
}

.compare-item__label_after {
    left: 197px
}



@media only screen and (min-width: 992px) {
    .compare__items:before {
        background-image: url('../img/retina.png');
        background-position: -642px 0;
        width: 76px;
        height: 477px
    }
    .compare-item_before:before {
        background-image: url('../img/retina.png');
        background-position: -199px -318px;
        width: 171px;
        height: 382px
    }
    .compare-item_after:before {
        background-image: url('../img/retina.png');
        background-position: 0 -318px;
        width: 191px;
        height: 487px
    }
  
}

@media only screen and (max-width: 991px) {
  
    .compare__items:before {
        bottom: 15px;
        background-image: url('../img/retina-m.png');
        background-position: -238px 0;
        width: 50px;
        height: 291px
    }
    .compare__item {
        text-align: center
    }
    .compare-item {
        padding-top: 5px;
        padding-bottom: 0
    }
    .compare-item:before {
        position: static;
        display: inline-block
    }
    .compare-item_before {
        padding-right: 0
    }
    .compare-item_before:before {
        background-image: url('../img/retina-m.png');
        background-position: -127px 67px;
        width: 105px;
        height: 304px;
    }
    .compare-item_after {
        padding-left: 0
    }
    .compare-item_after:before {
        background-image: url('../img/retina-m.png');
        background-position: 0 0;
        width: 117px;
        height: 298px;
    }
    .compare-item__information-wrapper,
    .compare-item__time-wrapper {
        display: none
    }
    .compare-item__length:after {
        width: 92px
    }
    .compare-item__length_before {
        right: auto;
        left: 0;
        bottom: 237px
    }
    .compare-item__length_after {
        right: 0;
        left: auto;
        bottom: 301px
    }

    .compare-item__length {
        font-size: 20px;
        white-space: nowrap
    }
    .compare-item__width {
        bottom: 71px;
        margin: auto;
        font-size: 22px
    }
    .compare-item__width_before {
        right: 0;
        left: 0;
        width: auto
    }
    .compare-item__width_after {
        right: 0;
        left: 0;
        width: auto
    }
    .compare-item__label {
        min-width: 60px;
        font-size: 14px;
        line-height: 28px;
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg)
    }
    .compare-item__label_before {
        left: 0;
        right: auto;
    }
    .compare-item__label_after {
        left: auto;
        right: -6px;
    }

   
  
   
   
    .compare-item__information {
        width: 418px
    }
    .compare-item__information_before {
        background-image: -webkit-linear-gradient(10deg, transparent 6%, #ffffff 0);
        background-image: -o-linear-gradient(10deg, transparent 6%, #ffffff 6%);
        background-image: -o-linear-gradient(10deg, transparent 6%, #ffffff 0);
        background-image: linear-gradient(80deg, transparent 6%, #ffffff 0)
    }
    .compare-item__information_before:before {
        border-right: 418px solid #ffffff
    }
    .compare-item__information_after {
        background-image: -webkit-linear-gradient(350deg, #ffffff 94%, transparent 0);
        background-image: -o-linear-gradient(350deg, #ffffff 94%, transparent 94%);
        background-image: -o-linear-gradient(350deg, #ffffff 94%, transparent 0);
        background-image: linear-gradient(100deg, #ffffff 94%, transparent 0)
    }

   
}
