/* CSS темы */
/* ==========================================
   TERMA 353
   ИНТЕРАКТИВНЫЕ ЧАСТИЦЫ НА ГЛАВНОМ ЭКРАНЕ
   ========================================== */

#slider.cblock-52 {
    position: relative !important;
    overflow: hidden !important;
}


/* Слой эффекта */

#slider.cblock-52 .terma-mouse-effect {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    z-index: 2;

    pointer-events: none;

    overflow: hidden;

    transition: transform 0.15s ease-out;
}


/* ==========================================
   СВЕТОВОЙ ЭФФЕКТ
   ========================================== */

#slider.cblock-52 .terma-mouse-light {

    position: absolute;

    width: 350px;
    height: 350px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 215, 140, 0.14) 0%,
            rgba(255, 215, 140, 0.06) 30%,
            rgba(255, 215, 140, 0) 70%
        );

    opacity: 0.8;

    transition:
        left 0.35s ease-out,
        top 0.35s ease-out;

}


/* ==========================================
   ЧАСТИЦЫ
   ========================================== */

#slider.cblock-52 .terma-dot {

    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: rgba(255, 220, 150, 0.8);

    box-shadow:
        0 0 6px rgba(255, 220, 150, 0.8),
        0 0 14px rgba(255, 190, 90, 0.35);

    transition:
        transform 0.5s ease-out,
        opacity 0.5s ease;

}


/* ==========================================
   ПОЛОЖЕНИЕ ЧАСТИЦ
   ========================================== */

#slider.cblock-52 .dot-1 {
    left: 8%;
    top: 25%;
}

#slider.cblock-52 .dot-2 {
    left: 17%;
    top: 65%;
}

#slider.cblock-52 .dot-3 {
    left: 27%;
    top: 40%;
}

#slider.cblock-52 .dot-4 {
    left: 36%;
    top: 75%;
}

#slider.cblock-52 .dot-5 {
    left: 45%;
    top: 30%;
}

#slider.cblock-52 .dot-6 {
    left: 55%;
    top: 68%;
}

#slider.cblock-52 .dot-7 {
    left: 64%;
    top: 20%;
}

#slider.cblock-52 .dot-8 {
    left: 73%;
    top: 58%;
}

#slider.cblock-52 .dot-9 {
    left: 82%;
    top: 32%;
}

#slider.cblock-52 .dot-10 {
    left: 89%;
    top: 72%;
}

#slider.cblock-52 .dot-11 {
    left: 94%;
    top: 42%;
}

#slider.cblock-52 .dot-12 {
    left: 58%;
    top: 85%;
}


/* ==========================================
   ЗАТЕМНЕНИЕ ПОВЕРХ ФОНА
   ========================================== */

#slider.cblock-52 .overfill {
    z-index: 1;
}


/* ==========================================
   ТЕКСТ И ФОРМА ПОВЕРХ ЭФФЕКТА
   ========================================== */

#slider.cblock-52 .slider-parallax-inner {
    position: relative;

    z-index: 3;
}


/* ==========================================
   МОБИЛЬНЫЕ УСТРОЙСТВА
   ========================================== */

@media (max-width: 768px) {

    #slider.cblock-52 .terma-mouse-effect {
        display: none;
    }

}

/* Индивидуальные стили блоков */