.pc-chart {
    position: relative;
    margin: 35px 0 24px;
    border-radius: 2px;
    background: #FFF;
}

.pf-chart-wrapper {
    padding:  160px 0 180px;
    background: #FFF;
    border-radius: 2px;
    overflow: hidden;
}

@media screen and (min-width:  960px) {
    .pc-chart {
        background: #FFF;
        padding-bottom: 0px;
    }

    .pf-chart-wrapper {
        margin-bottom: 0;
        padding:  70px 0 50px 0;
        background: transparent;
        overflow: initial;
    }
}


.pf-chart {
    --chartWidth:  250px; /* Used for labels */
    --halfChartWidth:  calc(var(--chartWidth)/2);
    position: relative;
    margin:  0 auto;
    box-shadow: 0px 0px 41px rgba(0, 0, 0, 0.11);
    border-radius: 500px;
    width: 130px;
}

.pf-chart canvas {
    overflow: visible;
    position: relative;
    z-index: 2;
}

.pf-chart__initlabel {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #FFF;
    border-radius: 500px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    padding:  0 12%;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    transition:  opacity 150ms;
}

.pf-chart__initlabel.hidden {
    opacity: 0;
}

@media screen and (min-width:  960px) {
    .pf-chart__initlabel {
        font-size: 1.8rem;
    }
}

.pf-chart .chart-scroll-down {
    position: absolute;
    z-index: 1;
    left:  50%;
    transform:  translateX(-50%);
    bottom: -54%;
    font-size: 34px;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border:  none;
    padding:  0;
    -webkit-tap-highlight-color: transparent;
}


.pf-chart__label-checkbox {
    opacity: 0;
    position: absolute;
}

.pf-chart__loader {
    position: absolute;
    top: 0;
    left: 0;
    width:  100%;
    height: 100%;
    z-index: 2;
    background-color: #FFF;
    border-radius: 500px;
    opacity: 0;
    transition: opacity 200ms;
    pointer-events: none;
    user-select: none;
}

.pf-chart__loader span.atc-icon {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform:  translate(-50%, -50%);
    opacity: 0.8;
    animation-name: atc-load-centered;
    width: 35%;
    height: 35%;
    border-width: 4px;
}

.pf-chart__loader.loading {
    opacity: 1;
}

.pf-chart__labels {
    position: absolute;
    top: 0;
    left: 0;
    width:  100%;
    height: 100%;
    transform: rotate(90deg);
}

.pf-chart__labels-label {
    display: block;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.pf-chart__labels-label-wrapper {
    --angle: (360 / var(--label-count));
    --labelWidth: 44px;
    display: block;
    position: absolute;
    top:  50%;
    left: 50%;
    width:  var(--labelWidth);
    height: auto;
    text-align: center;
    margin:  calc(var(--labelWidth) / -2);
    user-select: none;
    /*transform: translate(-50%, -50%);*/
}

.pf-chart__labels-label-wrapper:nth-child(1) {
    --anglePlus: calc(0deg * var(--angle));
    --angleMinus: calc(-0deg * var(--angle));
    transform: rotate(0deg) translate(calc(-1* var(--halfChartWidth))) rotate(0deg) rotate(-90deg) ;
    margin-left: -20%;
}

.pf-chart__labels-label-wrapper:nth-child(2) {
    --anglePlus: calc(1deg * var(--angle));
    --angleMinus: calc(-1deg * var(--angle));
    transform: rotate(var(--anglePlus)) translate(calc(-1* var(--halfChartWidth))) rotate(var(--angleMinus)) rotate(-90deg) ;
}

.pf-chart__labels-label-wrapper:nth-child(3) {
    --anglePlus: calc(2deg * var(--angle));
    --angleMinus: calc(-2deg * var(--angle));
    transform: rotate(var(--anglePlus)) translate(calc(-1* var(--halfChartWidth))) rotate(var(--angleMinus)) rotate(-90deg) ;
}

.pf-chart__labels-label-wrapper:nth-child(4) {
    --anglePlus: calc(3deg * var(--angle));
    --angleMinus: calc(-3deg * var(--angle));
    transform: rotate(var(--anglePlus)) translate(calc(-1* var(--halfChartWidth))) rotate(var(--angleMinus)) rotate(-90deg) ;
}

.pf-chart__labels-label-wrapper:nth-child(5) {
    --anglePlus: calc(4deg * var(--angle));
    --angleMinus: calc(-4deg * var(--angle));
    transform: rotate(var(--anglePlus)) translate(calc(-1* var(--halfChartWidth))) rotate(var(--angleMinus)) rotate(-90deg) ;
}

.pf-chart__labels-label-wrapper:nth-child(6) {
    --anglePlus: calc(5deg * var(--angle));
    --angleMinus: calc(-5deg * var(--angle));
    transform: rotate(var(--anglePlus)) translate(calc(-1* var(--halfChartWidth))) rotate(var(--angleMinus)) rotate(-90deg) ;
}

.pf-chart__labels-label-wrapper:nth-child(7) {
    --anglePlus: calc(6deg * var(--angle));
    --angleMinus: calc(-6deg * var(--angle));
    transform: rotate(var(--anglePlus)) translate(calc(-1* var(--halfChartWidth))) rotate(var(--angleMinus)) rotate(-90deg) ;
}

.pf-chart__labels-label-wrapper:nth-child(8) {
    --anglePlus: calc(7deg * var(--angle));
    --angleMinus: calc(-7deg * var(--angle));
    transform: rotate(var(--anglePlus)) translate(calc(-1* var(--halfChartWidth))) rotate(var(--angleMinus)) rotate(-90deg) ;
}

.pf-chart__labels-label i {
    display: block;
    margin:  0 auto;
    background: #F2F2F2;
    width:  44px;
    height: 44px;
    line-height: 44px;
    border-radius: 60px;
    color: #BDBDBD;
    font-size: 30px;
    text-align: center;
    transition: background 120ms, color 120ms;
}

.pf-chart__labels-label span {
    position: absolute;
    top:  100%;
    left: 50%;
    transform:  translateX(-50%);
    display: block;
    text-align: center;
    padding:  8px 0 0 0;
    font-size: 14px;
    width: 90px;
}

.pf-chart__label-checkbox:checked + .pf-chart__labels-label i {
    background-color: #000;
    color: #FFF;
}


@media screen and (min-width:  960px) {
    .pf-chart {
        --chartWidth:  340px; /* Used for labels */
        width: 170px;
        margin:  100px auto 200px auto;
    }

    .pf-chart__labels-label-wrapper {
        --labelWidth: 60px;
    }

    .pf-chart__labels-label i {
        font-size: 44px;
        width: 60px;
        height: 60px;
        line-height: 60px;
    }

    .pf-chart__labels-label span {
        font-size: 18px;
        width: 120px;
        padding:  15px 0 0 0;
    }


    .pf-chart__labels-label:hover i {
        background-color: #444;
        color: #FFF;
    }

    .pf-chart__label-checkbox:checked + .pf-chart__labels-label i {
        background-color: #000;
        color: #FFF;
    }
}



.pf-results {

}

.pf-results .pf-product-block {
    padding:  0 12px;
}

.pf-results .slick-list {
    margin: 0 -12px;
    width:  calc(100% + 24px);
    font-size: 0;
}

@media screen and (max-width:  1159px) {
    .pf-results .slick-prev,
    .pf-results .slick-next {
        top:  100%;
        margin: 8px -12px 0 -12px;
        padding-left: 0 !important;
        padding-right: 0 !important;
        transform: none;
    }
}
@media screen and (min-width:  1260px) {
    .pf-results .slick-prev {
        left: -50px;
    }
    .pf-results .slick-next {
        right:  -50px;
    }
}


#pf-reset {
    color: #4F4F4F;
    font-weight: 400;
    font-size: 1.8rem;
    position: absolute;
    top:  100%;
    margin-top: 15px;
    left: 50%;
    transform:  translateX(-50%);
    margin-top: 20px;
}

@media screen and (min-width: 960px) {
    #pf-reset {
        font-size: 2rem;
        margin-top: 30px;
    }
}