// Contextual backgrounds
.bg-white {
    background-color: @white  !important;
}

.bg-black {
    background-color: @black  !important;
}

.bg-primary {
    background-color: @brand-primary  !important;
}

.bg-gray {
    background-color: @gray-lightest  !important;
}

.bg-silver {
    background-color: @Silver_b  !important;
}

.revolution-slider {
    .shape_effect {
        div {
            z-index: 2;

            @media (max-width: 480px) {
                z-index: 1;
            }
        }
    }
}

.shape_effect {
    div {
        // z-index: 2;
    }

    .shape1 {
        position: absolute;
        top: 7%;
        left: 55%;

        img {
            animation: rotation 5s infinite linear;
            transform: translateZ(0);
        }
    }

    .sun2 {
        position: absolute;
        top: 15%;
        left: 3%;
        width: 3%;

        img {
            animation: rotation 5s infinite linear;
            transform: translateZ(0);
        }
    }

    .shape2 {
        position: absolute;
        top: 35%;
        left: 2%;
        width: 5%;

        img {
            animation: rotation 8s infinite linear;
            transform: translateZ(0);
        }
    }

    .shape3 {
        position: absolute;
        top: 75%;
        left: 3%;
        width: 5%;
        -webkit-animation: mover 1s infinite alternate;
        animation: mover 1s infinite alternate;
        transform: translateZ(0);
    }

    .shape4 {
        position: absolute;
        top: 5%;
        left: 90%;
        -webkit-animation: mover2 1.2s infinite alternate;
        animation: mover2 1.2s infinite alternate;
        transform: translateZ(0);
    }

    .shape5 {
        position: absolute;
        top: 5%;
        right: 10%;
        -webkit-animation: mover 1s infinite alternate;
        animation: mover 1s infinite alternate;
        transform: translateZ(0);
    }

    .asteroid {
        position: absolute;
        top: 5%;
        right: 40%;
        width: 6%;
        -webkit-animation: mover 1.5s infinite alternate;
        animation: mover 1.5s infinite alternate;
        transform: translateZ(0);
    }

    .shape6 {
        position: absolute;
        bottom: 10%;
        right: 10%;
        -webkit-animation: mover 1s infinite alternate;
        animation: mover 1s infinite alternate;
        transform: translateZ(0);
    }

    .shape8 {
        position: absolute;
        top: 35%;
        left: 2%;
        width: 5%;

        img {
            animation: rotation 8s infinite linear;
            transform: translateZ(0);
        }
    }

    .sun {
        position: absolute;
        bottom: 13%;
        left: 10%;
        width: 70px;

        img {
            animation: rotation 8s infinite linear;
            transform: translateZ(0);
        }
    }


    .plane {
        position: absolute;
        bottom: 5%;
        right: -7%;
        width: 15%;
        -webkit-animation: mover2 1s infinite alternate;
        animation: mover2 1s infinite alternate;
        transform: translateZ(0);
    }   

    .family {
        position: absolute;
        bottom: 0%;
        left: -5%;
        -webkit-animation: mover3 5s infinite alternate-reverse;
        animation: mover3 5s infinite alternate-reverse;
        transform: translateZ(0);
    }

    .paper-plane {
        position: absolute;
        margin: 0 auto;
        left: 0;
        bottom: 14%;
        right: -45%;
        width: 15%;
        -webkit-animation: mover2 1s infinite alternate;
        animation: mover2 1s infinite alternate;
        transform: translateZ(0);
    }

    .arrow {
        position: absolute;
        bottom: 20%;
        right: 10%;
        width: 15%;
        -webkit-animation: mover2 1s infinite alternate;
        animation: mover2 1s infinite alternate;
        transform: translateZ(0);
    }

    .support {
        position: absolute;
        bottom: 3%;
        left: 33%;
        margin: 0 auto;
        right: 0;
        width: 15%;
        -webkit-animation: mover 1s infinite alternate;
        animation: mover 1s infinite alternate;
        transform: translateZ(0);

        @media (max-width: 900px) {
            width: 21%;
        }

        @media (max-width: 600px) {
            width: 30%;
        }
    }

    .star {
        position: absolute;
        top: 15%;
        right: 10%;
        width: 3%;

        img {
            animation: rotation 7s infinite linear;
            transform: translateZ(0);
        }
    }

    &.effect-shape7 {
        .star {
            top: 12%;
            left: 55%;
            width: 3%;
            right: inherit;
        }
    }

    &.effect-shape6 {
        .sun {
            top: 12%;
            left: 55%;
            width: 3%;
            right: inherit;
        }
    }

    &.effect-shape2 {
        .shape1 {
            position: absolute;
            bottom: 5%;
            top: auto;
            left: 6%;
            width: 5%;
        }

        .shape2 {
            left: unset;
            position: absolute;
            top: 40%;
            right: 2%;
            width: 2%;
            animation: rotation 5s infinite linear;
            transform: translateZ(0);
        }

        .shape4 {
            position: absolute;
            top: unset;
            bottom: 12%;
            right: 5%;
            width: 5%;
            -webkit-animation: mover 1s infinite alternate;
            animation: mover 1s infinite alternate;
            transform: translateZ(0);
        }
    }

    &.effect-news2 {
        .paper-plane {
            position: absolute;
            margin: 0 auto;
            left: 0;
            top: 14%;
            right: -45%;
            width: 15%;
            -webkit-animation: mover2 1s infinite alternate;
            animation: mover2 1s infinite alternate;
            transform: translateZ(0);
        }
    }

    &.effect-shape4 {
        .shape4 {
            position: absolute;
            top: unset;
            bottom: 12%;
            left: 5%;
            width: 5%;
            -webkit-animation: mover 1s infinite alternate;
            animation: mover 1s infinite alternate;
            transform: translateZ(0);
        }

        .shape6 {
            position: absolute;
            bottom: 5%;
            right: 5%;
            width: 10%;
            -webkit-animation: mover 1s infinite alternate;
            animation: mover 1s infinite alternate;
            transform: translateZ(0);
        }
    }
}

#bubble-effect {
    overflow: visible !important;
}

.bubble-effect {
    position: relative;
}


.bubble-effect::before {
    position: absolute;
    content: "";
    left: -30px;
    top: -80px;
    width: 550px;
    height: 550px;
    background: #f78a8b;
    background: -webkit-linear-gradient(to right, #ffde8c, #f78a8b);
    background: linear-gradient(to right, #ffde8c, #f78a8b);
    border-radius: 50% 40% 60% 50% e('/') 20% 40% 70% 10%;
    will-change: border-radius, transform, opacity;
    animation: bubbleShape 6s linear infinite;
    display: block;
    z-index: 0;
    opacity: 0.4;

    @media (max-width: 768px) {
        width: 200px;
        height: 200px;
        top: -10px;
    }
}

.bubble-effect {
    img {
        position: relative;
        z-index: 1;
    }
}

.bubble-effect::after {
    position: absolute;
    content: "";
    left: 10px;
    top: -30px;
    width: 450px;
    height: 450px;
    background: #f05c5c;
    background: -webkit-linear-gradient(to right, #ffd339, #f05c5c);
    background: linear-gradient(to right, #ffd339, #f05c5c);
    border-radius: 50% 40% 60% 50% e('/') 20% 40% 70% 10%;
    will-change: border-radius, transform, opacity;
    animation: bubbleShape2 4s linear infinite;
    display: block;
    z-index: 0;
    opacity: 0.3;

    @media (max-width: 768px) {
        width: 150px;
        height: 150px;
        top: 0;
    }
}

@keyframes bubbleShape {

    0%,
    100% {
        border-radius: 42% 58% 70% 30% e('/') 45% 45% 55% 55%;
        transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    }

    35% {
        border-radius: 70% 30% 46% 54% e('/') 30% 29% 71% 70%;
        transform: translate3d(0, 5px, 0) rotateZ(0.01deg);
    }

    50% {
        transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    }

    65% {
        border-radius: 100% 60% 60% 100% e('/') 100% 100% 60% 60%;
        transform: translate3d(0, -3px, 0) rotateZ(0.01deg);
    }
}

@keyframes bubbleShape2 {

    0%,
    100% {
        border-radius: 42% 58% 70% 30% e('/') 45% 45% 55% 55%;
        transform: translate3d(0, 20px, 0) rotateZ(1deg);
    }

    25% {
        border-radius: 70% 30% 46% 54% e('/') 30% 29% 71% 70%;
        transform: translate3d(-10px, 10px, 0) rotateZ(1deg);
    }

    35% {
        border-radius: 70% 30% 46% 54% e('/') 30% 29% 71% 70%;
        transform: translate3d(-20px, 0px, 0) rotateZ(1deg);
    }

    45% {
        border-radius: 70% 30% 46% 54% e('/') 30% 29% 71% 70%;
        transform: translate3d(-15px, 15px, 0) rotateZ(1deg);
    }

    55% {
        transform: translate3d(-30px, 20px, 0) rotateZ(1deg);
    }

    75% {
        border-radius: 100% 60% 60% 100% e('/') 100% 100% 60% 60%;
        transform: translate3d(-10px, 10px, 0) rotateZ(1deg);
    }
}