@charset "utf-8";
/* CSS Document */

a:hover {
    text-decoration: none;
}

.wheel {
    --border: calc(var(--size) * 0.02);
    --offset-x: calc(50vw - var(--border) - 0.5 * var(--size) + 10 * var(--vh));
    --offset-y: calc(50 * var(--vh) - var(--border) - 0.5 * var(--size));

    position: fixed;
    left: var(--offset-x);
    top: var(--offset-y);
    width: var(--size);
    height: var(--size);
    /*    border: white solid var(--border);
        border-radius: 50%;
        background-color: white;
    
        overflow: hidden;*/
    box-sizing: content-box;
    cursor: default;
    max-width: 100%;
}

.wheel {
    /*--vh: 0px;*/
    /*--slicesAngle: 0deg;*/
    /*--slices: 0deg;*/
    --size: calc(66.6 * var(--vh));

}

.kkl-logo {
    position: fixed;
    left: calc(50vw + 2 * var(--vh));
    top: calc((50 - 7.5) * var(--vh));
    height: calc(15 * var(--vh));
}

.wheel-arrow {
    position: fixed;
    left: calc(var(--offset-x) + var(--size) * 0.95);
    top: calc(var(--offset-y) + var(--border) + var(--size) * (0.5 - 0.5 / 6));
    /*    top: calc(var(--offset-y) + var(--border) + var(--size) * (0.5 - 0.5 / 6));
   */
    width: calc(var(--size) / 3);
    height: calc(var(--size) / 6);

}


/*-------------------------------------------*/


.wheel-sectors wheel-sector {
    /*skew formula : 90 - (360/ slices)*/
    transform: rotate(calc(var(--slicesAngle) - var(--angle) - (180deg / var(--nslices)))) skew( calc(90deg - (360deg/ var(--nslices) )));
    background-color: var(--color);
    position: absolute;
    transform-origin: 0% 0%;
    width: calc(var(--size));
    height: calc(var(--size));
    left: 50%;
    top: 50%;
    /*transform: translate(calc(-33.3 * var(--vh)),calc(-33.3 * var(--vh))) rotate(calc(var(--index) * 36deg + var(--angle) - 198deg)) skew(54deg);*/
}

.wheel-texts {
    text-align: right;
}

.wheel-texts text {
    text-align: right;
    position: absolute;
    width: calc(33.3 * var(--vh));
    transform-origin: 0 calc(3 * var(--vh));
    transform: translateY(calc(30.3 * var(--vh))) rotate(calc(var(--slicesAngle, 0) - (var(--sliceSpace) / var(--nslices)) - var(--angle)));

    /*transform: translateY(calc(30.3 * var(--vh))) rotate(calc(var(--slicesAngle, 0) - var(--angle, 0) - var(--angle, 0)  ));*/
    /*var(--index) **/

    line-height: calc(6 * var(--vh));
    font-size: calc(3 * var(--vh));
    color: white;
    /*transform: translateY(calc(30.3 * var(--vh))) rotate(calc(var(--index) * 36deg + var(--angle)));*/
}


.wheel-texts text div {
    width: calc(6 * var(--vh));
    height: calc(6 * var(--vh));

    margin-right: calc(2 * var(--vh));
    margin-left: calc(1 * var(--vh));
    float: right;
    display: inline-block;
    text-align: center;
}

.wheel-texts text div.wheel-texts-circle {
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
}

.wheel-texts text div i {
    font-size: calc(3 * var(--vh));
    line-height: calc(6 * var(--vh));
    cursor: default;
}


/*-------------------------------------------*/


.wheel-left-div {
    position: fixed;
    top: calc(33.3 * var(--vh));
    left: calc(50vw - 60 * var(--vh));
    width: calc(30 * var(--vh));
}

.wheel-left-div p {
    font-size: calc(3.5 * var(--vh));
    font-weight: 500;
    text-align: center;
    cursor: default;
}


.wheel-left-text1 {
    margin: 0;
    color: #ffffff;
}

.wheel-left-text2 {
    margin: 0 0 calc(3.5 * var(--vh)) 0;
    color: #fcee21;
}

.wheel-left-text3 {
    margin: 0 0 calc(3.5 * var(--vh)) 0;
    color: white;
}


.wheel-left-spin {
    color: #fff;
    background-color: #ff8138;
    font-size: calc(5 * var(--vh));
    border: none;
    width: 100%;
    height: calc(10 * var(--vh));
    border-radius: calc(2 * var(--vh));
    font-weight: bold;
    transition: 0.3s background-color;
    cursor: pointer;
}

.wheel-left-spin:hover {
    background-color: #ca351e;
}

.wheel-left-spin:active {
    background-color: #f73517;
}

.wheel-left-spin:disabled {
    background-color: #d68e65;
    cursor: default;
}

#wheelangle {
    max-width: 100%;
    transition-duration: 7s;
    overflow: hidden;
    border-radius: 100%;
    left: var(--offset-x);
    top: var(--offset-y);
    width: var(--size);
    height: var(--size);
    position: fixed;
    border: white solid var(--border);
    background-color: white;
    box-sizing: content-box;
}