/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/


.triangles {
    position: relative;
    height: 100%;
	overflow: hidden;
}

.triangles svg {
    transform-origin: 50% 50%;
    overflow: visible;
    position: absolute;
    animation-direction: normal;
    animation-iteration-count: infinite;
}

.triangles svg:nth-of-type(1) {
    animation-name: triangle-animate1;
    animation-duration: 6s;
    left: 0;
    top: 0;
}

.triangles svg:nth-of-type(2) {
    left: 44px;
    top: 0;
    transform: rotate(180deg);
    animation-name: triangle-animate2;
    animation-duration: 8s;
}

.triangles svg:nth-of-type(3) {
    left: 90px;
    top: 52px;
    animation-name: triangle-animate3;
    animation-duration: 8s;
}

.triangles svg:nth-of-type(4) {
    left: 134px;
    top: 0px;
    transform: rotate(180deg);
    animation-name: triangle-animate2;
    animation-duration: 6s;
}

.triangles svg:nth-of-type(5) {
    left: 179px;
    top: 51px;
    animation-name: triangle-animate5;
    animation-duration: 8s;
}

.triangles svg:nth-of-type(6) {
    left: 224px;
    top: 0px;
    transform: rotate(180deg);
    animation-name: triangle-animate2;
    animation-duration: 12s;
}

.triangles svg:nth-of-type(7) {
    left: 269px;
    top: 26px;
    transform: rotate(180deg);
    animation-name: triangle-animate2;
    animation-duration: 6s;
}

.triangles svg:nth-of-type(8) {
    left: 358px;
    top: 25px;
    transform: rotate(180deg);
    animation-name: triangle-animate4;
    animation-duration: 8s;
}

.triangles svg:nth-of-type(9) {
    left: 448px;
    top: 24px;
    transform: rotate(180deg);
    animation-name: triangle-animate6;
    animation-duration: 12s;
}

.triangles svg:nth-of-type(10) {
    left: 538px;
    top: 23px;
    animation-name: triangle-animate3;
    animation-duration: 6s;
}

.triangles svg:nth-of-type(11) {
    left: 0px;
    top: 79px;
    transform: rotate(180deg);
    animation-name: triangle-animate2;
    animation-duration: 12s;
}

.triangles svg:nth-of-type(12) {
    left: 224px;
    top: 77px;
    animation-name: triangle-animate5;
    animation-duration: 8s;
}

.triangles svg:nth-of-type(13) {
    left: 314px;
    top: 76px;
    animation-name: triangle-animate1;
    animation-duration: 6s;
}

.triangles svg:nth-of-type(14) {
    left: 403px;
    top: 76px;
    animation-name: triangle-animate2;
    animation-duration: 12s;
}

.triangles svg:nth-of-type(15) {
    left: 449px;
    top: 76px;
    transform: rotate(180deg);
    animation-name: triangle-animate2;
    animation-duration: 8s;
}

.triangles svg:nth-of-type(16) {
    left: 0px;
    top: 128px;
    transform: rotate(180deg);
    animation-name: triangle-animate2;
    animation-duration: 12s;
}

.triangles svg:nth-of-type(17) {
    left: 44px;
    top: 128px;
    animation-name: triangle-animate1;
    animation-duration: 6s;
}

.triangles svg:nth-of-type(18) {
    left: 91px;
    top: 128px;
    transform: rotate(180deg);
    animation-name: triangle-animate2;
    animation-duration: 6s;
}

.triangles svg:nth-of-type(19) {
    left: 269px;
    top: 103px;
    animation-name: triangle-animate4;
    animation-duration: 8s;
}

.triangles svg:nth-of-type(20) {
    left: 315px;
    top: 129px;
    animation-name: triangle-animate5;
    animation-duration: 8s;
}

.triangles svg:nth-of-type(20) {
    left: 494px;
    top: 128px;
    animation-name: triangle-animate3;
    animation-duration: 12s;
}

.triangles svg:nth-of-type(21) {
    left: 0px;
    top: 207px;
    animation-name: triangle-animate1;
    animation-duration: 12s;
}

.triangles svg:nth-of-type(22) {
    left: 46px;
    top: 223px;
    animation-name: triangle-animate3;
    animation-duration: 8s;
}

.triangles svg:nth-of-type(23) {
    left: 91px;
    top: 208px;
    animation-name: triangle-animate5;
    animation-duration: 6s;
}

.triangles svg:nth-of-type(24) {
    left: 136px;
    top: 184px;
    animation-name: triangle-animate1;
    animation-duration: 12s;
}

.triangles svg:nth-of-type(25) {
    left: 91px;
    top: 234px;
    transform: rotate(180deg);
    animation-name: triangle-animate4;
    animation-duration: 6s;
}

.triangles svg:nth-of-type(26) {
    left: 225px;
    top: 180px;
    animation-name: triangle-animate3;
    animation-duration: 8s;
}

.triangles svg:nth-of-type(27) {
    left: 180px;
    top: 230px;
    transform: rotate(180deg);
    animation-name: triangle-animate6;
    animation-duration: 8s;
}

.triangles svg:nth-of-type(28) {
    left: 270px;
    top: 206px;
    animation-name: triangle-animate1;
    animation-duration: 12s;
}

.triangles svg:nth-of-type(29) {
    left: 358px;
    top: 182px;
    transform: rotate(180deg);
    animation-name: triangle-animate2;
    animation-duration: 8s;
}

.triangles svg:nth-of-type(30) {
    left: 225px;
    top: 255px;
    transform: rotate(180deg);
    animation-name: triangle-animate4;
    animation-duration: 8s;
}

.triangles svg:nth-of-type(31) {
    left: 447px;
    top: 233px;
    transform: rotate(180deg);
    animation-name: triangle-animate6;
    animation-duration: 6s;
}

.triangles svg:nth-of-type(32) {
    left: 358px;
    top: 259px;
    animation-name: triangle-animate3;
    animation-duration: 12s;
}

.triangles svg:nth-of-type(33) {
    left: 88px;
    top: 310px;
    animation-name: triangle-animate5;
    animation-duration: 6s;
}

.triangles svg:nth-of-type(34) {
    left: 313px;
    top: 284px;
    animation-name: triangle-animate1;
    animation-duration: 8s;
}

.triangles svg:nth-of-type(35) {
    left: 45px;
    top: 388px;
    animation-name: triangle-animate3;
    animation-duration: 12s;
}

.triangles svg:nth-of-type(36) {
    left: 135px;
    top: 362px;
    transform: rotate(180deg);
    animation-name: triangle-animate2;
    animation-duration: 6s;
}

.triangles svg:nth-of-type(37) {
    left: 136px;
    top: 490px;
    animation-name: triangle-animate1;
    animation-duration: 8s;
}

@keyframes triangle-animate1 {
    0% {
        transform: rotate(0deg) scale(1);
    }

    5% {
        transform: rotate(0deg) scale(1);
    }

    60% {
        transform: rotate(180deg) scale(0.3);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes triangle-animate2 {
    0% {
        transform: rotate(180deg) scale(1);
    }

    5% {
        transform: rotate(180deg) scale(1);
    }

    50% {
        transform: rotate(-180deg) scale(0.2);
    }

    100% {
        transform: rotate(180deg) scale(1);
    }
}

@keyframes triangle-animate3 {
    0% {
        transform: rotate(0deg) scale(1);
    }

    5% {
        transform: rotate(0deg) scale(1);
    }

    70% {
        transform: rotate(180deg) scale(0.5);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes triangle-animate4 {
    0% {
        transform: rotate(180deg) scale(1);
    }

    5% {
        transform: rotate(180deg) scale(1);
    }

    50% {
        transform: rotate(-180deg) scale(0.2);
    }

    100% {
        transform: rotate(180deg) scale(1);
    }
}

@keyframes triangle-animate5 {
    0% {
        transform: scale(1);
    }

    5% {
        transform: scale(1);
    }

    40% {
        transform: scale(0.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes triangle-animate6 {
    0% {
        transform: rotate(180deg) scale(1);
    }

    5% {
        transform: rotate(180deg) scale(1);
    }

    60% {
        transform: rotate(-180deg) scale(0.3);
    }

    100% {
        transform: rotate(180deg) scale(1);
    }
}