.square-cursor {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 1;
    z-index: 5000;
    width: 100px;
    height: 100px;
}

.square-cursor.rotate .square-cursor__inner {
    transform: rotate(90deg);
}

.square-cursor__inner {
    display: block;
    position: relative;
    width: 30px;
    height: 30px;
    left: 35px;
    top: 35px;
    border: 1px solid #fff;
    z-index: 5000;
    border-radius: 50%;
}

.square-cursor__inner:before,
.square-cursor__inner:after {
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    width: 10px;
    height: 10px;
    background-color: #fff;
    transition: opacity ease 0.5s;
    opacity: 0;
}

.square-cursor__inner:after {
    right: -20px;
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 50%);
            clip-path: polygon(0 0, 0 100%, 100% 50%);
}

.square-cursor__inner:before {
    left: -20px;
    -webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%);
            clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.square-cursor.slide .square-cursor__inner:before,
.square-cursor.slide .square-cursor__inner:after {
    opacity: 1;
}

.square-cursor:before {
    content: '';
    color: #fff;
    z-index: 2;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: all ease 0.5s;
}
.square-cursor.faq-open:before {
    content: 'OPEN';
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
.square-cursor.faq-close:before {
    content: 'CLOSE';
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
.square-cursor:after {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transition: all ease 0.5s;
    opacity: 0;
    transform: translate(-50%, -50%);
}
.square-cursor.faq-close:after, .square-cursor.faq-open:after {
    width: 60px;
    height: 60px;
    opacity: 1;
}
.square-cursor.faq-close .square-cursor__inner, .square-cursor.faq-open .square-cursor__inner {
    border-color: transparent;
}


@media (max-width:991px) {
    .square-cursor {
        display: none;
    }
}