/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

 .rotem-wheel-mainbox{
    position: relative;
    width: 500px !important;
    height: 500px !important;
    margin-right: calc(50% - 250px);
}

.rotem-wheel-box{
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 50%;
    border: 5px solid #fff;
    overflow: hidden;
    transition: all ease 5s;
    box-shadow: 0px 0px 10px black;
}

.rotem-wheel-spin{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 135px;
    height: 135px;
    border-radius: 50%;
    border: 2px solid #EACB6E;
    background-color: #F8F4EB;
    color: #C57A7B;
    box-shadow: 0 5px 20px #000;
    font-weight: bold;
    font-size: 22px;
    cursor: pointer;
    text-decoration: none;
    padding: 0px;
    outline: 0px;
}
.rotem-wheel-spin:active{
    width: 100px;
    height: 100px;
    font-size: 20px;
}

.rotem-wheel-mainbox.animate:after{
    animation: animateArrow 0.7s ease infinite;
}
@keyframes animateArrow{
    50%{
        right: -40px;
    }
}

.rotem-wheel-littlearrow {
    position: absolute;
    background-color: white;
    top: 0px;
    right: calc(50% - 15px);
    height: 35px;
    width: 30px;
    z-index: 5;
    clip-path: polygon(50% 100%, 80% 0, 20% 0);

}

@media screen and (max-width: 500px) {

    .rotem-wheel-mainbox {
        width: 300px !important;
        height: 300px !important;
        margin-right: calc(50% - 150px);
    }

}