/************************ Default CSS ***************************/
::selection {
    color: #fff;
}

::-moz-selection {
    color: #fff;
}

::selection {
    background-color: #CA9A67;
}

::-moz-selection {
    background-color: #CA9A67;
}

.over-hide {
    overflow: hidden;
}

/************************ Animation CSS ***************************/
@keyframes shutters {
    0% {
        clip-path: polygon(0% 0%, 20% 0%, 20% 100%, 20% 100%, 20% 0%, 40% 0%, 40% 100%, 40% 100%, 40% 0%, 60% 0%, 60% 100%, 60% 100%, 60% 0%, 80% 0%, 80% 100%, 80% 100%, 80% 0%, 100% 0%, 100% 100%, 0% 100%);
    }

    100% {
        clip-path: polygon(20% 0%, 20% 0%, 20% 100%, 40% 100%, 40% 0%, 40% 0%, 40% 100%, 60% 100%, 60% 0%, 60% 0%, 60% 100%, 80% 100%, 80% 0%, 80% 0%, 80% 100%, 100% 100%, 100% 0%, 100% 0%, 100% 100%, 20% 100%);
    }
}

@keyframes rotate {
    0% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        border-radius: 100% 45% 65% 100% / 95% 85% 40% 40%;
    }

    25% {
        clip-path: polygon(87.5% 12.5%, 87.5% 87.5%, 12.5% 87.5%, 12.5% 12.5%);
    }

    50% {
        clip-path: polygon(75% 75%, 25% 75%, 25% 25%, 75% 25%);
    }

    75% {
        clip-path: polygon(37.5% 62.5%, 37.5% 37.5%, 62.5% 37.5%, 62.5% 62.5%);
    }

    100% {
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    }
}

@keyframes circle {
    0% {
        clip-path: circle(75%);
    }

    50% {
        clip-path: circle(25%);
    }

    100% {
        clip-path: circle(75%);
    }
}

@keyframes color-shape-movement {
    0% {
        clip-path: polygon(0 0, 50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%);
    }

    100% {
        clip-path: polygon(50% 50%, 50% 25%, 50% 50%, 75% 50%, 50% 50%, 50% 75%, 50% 50%, 25% 50%);
    }
}

@keyframes rotate {
    0% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }

    25% {
        clip-path: polygon(87.5% 12.5%, 87.5% 87.5%, 12.5% 87.5%, 12.5% 12.5%);
    }

    50% {
        clip-path: polygon(75% 75%, 25% 75%, 25% 25%, 75% 25%);
    }

    75% {
        clip-path: polygon(37.5% 62.5%, 37.5% 37.5%, 62.5% 37.5%, 62.5% 62.5%);
    }

    100% {
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    }
}

@keyframes slots {
    0% {
        clip-path: polygon(0% 0%, 14% 0%, 14% 0%, 28% 0%, 28% 0%, 42% 0%, 42% 0%, 56% 0%, 56% 0%, 70% 0%, 70% 0%, 84% 0%, 84% 0%, 100% 0, 100% 100%, 0% 100%);
    }

    50% {
        clip-path: polygon(0% 0%, 14% 0%, 14% 100%, 28% 100%, 28% 0%, 42% 0%, 42% 100%, 56% 100%, 56% 0%, 70% 0%, 70% 100%, 84% 100%, 84% 0%, 100% 0, 100% 100%, 0% 100%);
    }

    100% {
        clip-path: polygon(0% 100%, 14% 100%, 14% 100%, 28% 100%, 28% 100%, 42% 100%, 42% 100%, 56% 100%, 56% 100%, 70% 100%, 70% 100%, 84% 100%, 84% 100%, 100% 100%, 100% 100%, 0% 100%);
    }
}

@keyframes morph {
    0% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }

    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }

    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
}

/************************ Cursor CSS ***************************/
.cursor {
    --size: 8px;
    height: var(--size);
    width: var(--size);
    border-radius: 50%;
    position: absolute;
    z-index: 10000;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.cursor.cursor-shadow {
    background-color: transparent;
    border: 1px solid #CA9A67;
    --size: 40px;
    transition: top .2s, left .2s,
        width .2s, height .2s,
        background-color .2s, border-color 0.2s;
    transition-timing-function: ease-out;
}

.cursor.cursor-dot {
    background: #CA9A67;
    transition: width .2s, height .2s;
}

.cursor-shadow.active {
    --size: 80px;
    border-color: rgba(255, 255, 255, 0);
    background-color: rgba(255, 255, 255, .1);
}

.cursor-dot.active {
    --size: 0;
}

/************************ Blog post CSS ***************************/
.blog-post-box {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.blog-post-box h5 {
    position: relative;
    text-transform: none;
    cursor: pointer;
    mix-blend-mode: difference;
    z-index: 3;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.blog-post-box p {
    position: relative;
    cursor: pointer;
    display: inline-block;
    mix-blend-mode: luminosity;
    z-index: 4;
}

/************************ Blog cursor images CSS ***************************/
.cursor.cursor-dot.active-blog-post-1 {
    opacity: 0;
}

.cursor-shadow.active-blog-post-1 {
    --size: 160px;
    border-color: rgba(255, 255, 255, 0) !important;
    border-width: 0;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
}

.cursor-shadow.active-blog-post-2 {
    background-image: url(../images/offer/hover-img-2.png);
    border-radius: unset;
    width: 300px;
    height: 300px;
    border-color: transparent !important;
    background-repeat: no-repeat;
}

.cursor-shadow.active-blog-post-3 {
    background-image: url(../images/offer/hover-img-3.png);
    border-radius: unset;
    width: 300px;
    height: 300px;
    border-color: transparent !important;
    background-repeat: no-repeat;
}

.cursor-shadow.active-blog-post-4 {
    background-image: url(../images/offer/hover-img-1.png);
    border-radius: unset;
    width: 300px;
    height: 300px;
    border-color: transparent !important;
    background-repeat: no-repeat;
}

.cursor-shadow.active-blog-post-5 {
    background-image: url(../images/offer/hover-img-4.png);
    border-radius: unset;
    width: 300px;
    height: 300px;
    border-color: transparent !important;
    background-repeat: no-repeat;
}

.cursor-shadow.active-blog-post-6 {
    background-image: url(../images/offer/hover-img-5.png);
    border-radius: unset;
    width: 300px;
    height: 300px;
    border-color: transparent !important;
    background-repeat: no-repeat;
}

.cursor-shadow.active-blog-post-7 {
    background-image: url(../images/offer/hover-img-6.png);
    border-radius: unset;
    width: 300px;
    height: 300px;
    border-color: transparent !important;
    background-repeat: no-repeat;
}

.cursor-shadow.active-blog-post-8 {
    border-radius: unset;
    width: 300px;
    height: 300px;
    border-color: transparent !important;
}

.cursor-shadow.active-blog-post-9 {
    border-radius: unset;
    width: 300px;
    height: 300px;
    border-color: transparent !important;
}

.cursor-shadow.active-blog-post-10 {
    border-radius: unset;
    width: 300px;
    height: 300px;
    border-color: transparent !important;
}

.cursor-shadow.active-blog-post-11 {
    border-radius: unset;
    width: 300px;
    height: 300px;
    border-color: transparent !important;
}

.cursor-shadow.active-blog-post-12 {
    border-radius: unset;
    width: 300px;
    height: 300px;
    border-color: transparent !important;
}

.cursor-shadow.active-blog-post-13 {
    background-image: url(../images/cases/cases-hover-1.png);
    border-radius: 100% 45% 65% 100% / 95% 85% 40% 40%;
    border-radius: unset;
    width: 420px;
    height: 445px;
    border-color: transparent !important;
    background-repeat: no-repeat;
    animation: morph 8s ease-in-out infinite 1s;
    animation-duration: 5s;
    animation-iteration-count: 3;
}

.cursor-shadow.active-blog-post-14 {
    background-image: url(../images/cases/cases-hover-2.jpg);
    border-radius: 100% 45% 65% 100% / 95% 85% 40% 40%;
    width: 370px;
    height: 410px;
    border-color: transparent !important;
    background-repeat: no-repeat;
    animation: shutters 3s infinite;
    animation-duration: 5s;
    animation-iteration-count: 3;
}

.cursor-shadow.active-blog-post-15 {
    background-image: url(../images/cases/cases-hover-3.jpg);
    border-radius: 100% 45% 65% 100% / 95% 85% 40% 40%;
    width: 370px;
    height: 410px;
    border-color: transparent !important;
    background-repeat: no-repeat;
    animation: rotate 3s infinite;
    animation-duration: 5s;
    animation-iteration-count: 3;
}

.cursor-shadow.active-blog-post-16 {
    background-image: url(../images/cases/cases-hover-4.jpg);
    border-radius: 100% 45% 65% 100% / 95% 85% 40% 40%;
    width: 370px;
    height: 410px;
    border-color: transparent !important;
    background-repeat: no-repeat;
    animation: circle 3s infinite;
    animation-duration: 5s;
    animation-iteration-count: 3;
}

.cursor-shadow.active-blog-post-17 {
    background-image: url(../images/cases/cases-hover-5.jpg);
    width: 370px;
    height: 410px;
    border-color: transparent !important;
    background-repeat: no-repeat;
    animation-name: color-shape-movement;
    animation-duration: 5s;
    animation-iteration-count: 3;
    clip-path: circle(100%);
    border-radius: 100% 45% 65% 100% / 95% 85% 40% 40%;
}

.cursor-shadow.active-blog-post-18 {
    background-image: url(../images/cases/cases-hover-6.jpg);
    border-radius: 100% 45% 65% 100% / 95% 85% 40% 40%;
    width: 370px;
    height: 410px;
    border-color: transparent !important;
    background-repeat: no-repeat;
    animation: 1s slots reverse;
    animation: 1s slots;
    animation-duration: 5s;
    animation-iteration-count: 3;
}

.post-wrap a:hover {
    color: currentColor;
}