body {
    overflow-x: hidden;
}
#butterfly {
    position: relative;
    width: 800px;
    max-width: 100%;
    margin: 0 auto;
    z-index: 5;
}
#butterfly.page {
    transform: scale(0.75);
}
#butterfly img {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    max-width: 100%;
    height: auto;
}
#butterfly .logo {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

#butterfly canvas {
    position: absolute;
    top: -65px;
    left: 384px;
    -webkit-animation: orbit 9s linear infinite;
    animation: orbit 9s linear infinite;
}

/* https://www.useragentman.com/blog/2013/03/03/animating-circular-paths-using-css3-transitions/ */
@keyframes orbit {
    0% {
        top: -65px;
        left: 384px;
        transform: rotate(360deg) translateX(150px) rotate(-360deg) rotate(15deg);
    }
    29.5%   {
        top: -20px;
        left: -75px;
        transform: rotate(180deg) translateX(150px) rotate(-180deg) rotate(30deg);
    }
    30%   {
        top: -20px;
        left: -75px;
        transform: rotate(180deg) translateX(150px) rotate(-180deg) scaleX(-1) rotate(30deg);
    }
    59.5%   {
        top: 0px;
        left: 600px;
        transform: rotate(0deg) translateX(150px) rotate(0deg) scaleX(-1) rotate(30deg);
    }
    60%   {
        top: 0px;
        left: 600px;
        transform: rotate(0deg) translateX(150px) rotate(0deg) scaleX(1) rotate(10deg);
    }
    68%   {
        top: -65px;
        left: 384px;
        transform: rotate(0deg) translateX(150px) rotate(0deg) scaleX(1) rotate(45deg);
    }
    100%   {
        top: -65px;
        left: 384px;
        transform: rotate(0deg) translateX(150px) rotate(0deg) scaleX(1) rotate(30deg);
    }
}

#butterfly.page canvas {
    position: absolute;
    top: -125px;
    left: 480px;
    animation: orbit-page 9s linear infinite;
}

@keyframes orbit-page {
    0% {
        top: -125px;
        left: 480px;
        transform: rotate(360deg) translateX(150px) rotate(-360deg) rotate(15deg);
    }
    29.5%   {
        top: -20px;
        left: -75px;
        transform: rotate(180deg) translateX(150px) rotate(-180deg) rotate(30deg);
    }
    30%   {
        top: -20px;
        left: -75px;
        transform: rotate(180deg) translateX(150px) rotate(-180deg) scaleX(-1) rotate(30deg);
    }
    59.5%   {
        top: -70px;
        left: 600px;
        transform: rotate(0deg) translateX(150px) rotate(0deg) scaleX(-1) rotate(30deg);
    }
    60%   {
        top: -70px;
        left: 600px;
        transform: rotate(0deg) translateX(150px) rotate(0deg) scaleX(1) rotate(10deg);
    }
    68%   {
        top: -125px;
        left: 480px;
        transform: rotate(0deg) translateX(150px) rotate(0deg) scaleX(1) rotate(45deg);
    }
    100%   {
        top: -125px;
        left: 480px;
        transform: rotate(0deg) translateX(150px) rotate(0deg) scaleX(1) rotate(30deg);
    }
}

@media (max-width: 1024px) {
    #butterfly {
        width: 400px;
    }

    #butterfly.page {
        transform: none;
    }

    #butterfly-container {
        -webkit-transform: scale(0.75);
        -ms-transform: scale(0.75);
        transform: scale(0.75);
    }

    #butterfly canvas {
        top: -265px;
        left: 75px;

        -webkit-animation: orbit 7s linear infinite;

        animation: orbit 7s linear infinite;
    }

    @keyframes orbit {
        0% {
            top: -265px;
            left: 75px;
            transform: rotate(360deg) translateX(150px) rotate(-360deg) rotate(15deg);
        }
        29.5% {
            top: -200px;
            left: -125px;
            transform: rotate(180deg) translateX(150px) rotate(-180deg) rotate(30deg);
        }
        30% {
            top: -200px;
            left: -125px;
            transform: rotate(180deg) translateX(150px) rotate(-180deg) scaleX(-1) rotate(30deg);
        }
        59.5% {
            top: -180px;
            left: 230px;
            transform: rotate(0deg) translateX(150px) rotate(0deg) scaleX(-1) rotate(30deg);
        }
        60% {
            top: -180px;
            left: 230px;
            transform: rotate(0deg) translateX(150px) rotate(0deg) scaleX(1) rotate(10deg);
        }
        68% {
            top: -265px;
            left: 75px;
            transform: rotate(0deg) translateX(150px) rotate(0deg) scaleX(1) rotate(45deg);
        }
        100% {
            top: -265px;
            left: 75px;
            transform: rotate(0deg) translateX(150px) rotate(0deg) scaleX(1) rotate(30deg);
        }
    }

    #butterfly.page .logo {
        padding-top: 60px;
    }

    #butterfly.page canvas {
        top: -200px;
        left: 145px;

        -webkit-animation: orbit-page 7s linear infinite;

        animation: orbit-page 7s linear infinite;
    }

    @keyframes orbit-page {
        0% {
            top: -200px;
            left: 145px;
            transform: rotate(360deg) translateX(150px) rotate(-360deg) rotate(15deg);
        }
        29.5% {
            top: -140px;
            left: -125px;
            transform: rotate(180deg) translateX(150px) rotate(-180deg) rotate(30deg);
        }
        30% {
            top: -140px;
            left: -125px;
            transform: rotate(180deg) translateX(150px) rotate(-180deg) scaleX(-1) rotate(30deg);
        }
        59.5% {
            top: -120px;
            left: 230px;
            transform: rotate(0deg) translateX(150px) rotate(0deg) scaleX(-1) rotate(30deg);
        }
        60% {
            top: -120px;
            left: 230px;
            transform: rotate(0deg) translateX(150px) rotate(0deg) scaleX(1) rotate(10deg);
        }
        68% {
            top: -200px;
            left: 145px;
            transform: rotate(0deg) translateX(150px) rotate(0deg) scaleX(1) rotate(45deg);
        }
        100% {
            top: -200px;
            left: 145px;
            transform: rotate(0deg) translateX(150px) rotate(0deg) scaleX(1) rotate(30deg);
        }
    }
}

@media (max-width: 1024px) {
    #home-header {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}


@media (max-width: 576px) {
    #butterfly {
        width: 300px;
    }
    #butterfly-container {
        -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
        transform: scale(0.5);
    }
    #butterfly canvas {
        left: 207px;
        top: -264px;
        -webkit-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
        transform: rotate(35deg);

        -webkit-animation: none;

        animation: none;
    }

    #butterfly.page canvas {
        left: 126px;
        top: -178px;

        -webkit-animation: none;

        animation: none;
    }

    @keyframes orbit {
        0% {
            top: -25px;
            left: 105px;
            transform: rotate(360deg) translateX(40px) rotate(-360deg);
        }
        29.5%   {
            top: 25px;
            left: -10px;
            transform: rotate(180deg) translateX(40px) rotate(-180deg);
        }
        30%   {
            top: 25px;
            left: -10px;
            transform: rotate(180deg) translateX(40px) rotate(-180deg) scaleX(-1);
        }
        59.5%   {
            top: 10px;
            left: 130px;
            transform: rotate(0deg) translateX(40px) rotate(0deg) scaleX(-1);
        }
        60%   {
            top: 10px;
            left: 130px;
            transform: rotate(0deg) translateX(40px) rotate(0deg) scaleX(1);
        }
        68%   {
            top: -35px;
            left: 105px;
            transform: rotate(0deg) translateX(40px) rotate(0deg) scaleX(1);
        }
        100%   {
            top: -35px;
            left: 105px;
            transform: rotate(0deg) translateX(40px) rotate(0deg) scaleX(1);
        }
    }
}