/******************************************************
 *                     Welcome                        *
*******************************************************/
/* #welcome.background-black {
    position: fixed;
}
*/

#welcome {
    width: 100%;
}

.float-wrapper {
    margin-top: 54%;
}


/******************************************************
 *                   Welcome Text                 *
*******************************************************/

.section-text h1 {
    margin-left: 0;
}

.section-text h3 {
    margin-bottom: 25px;
    margin-left: 0;
}

.section-text p, .section-text ul, .section-text .sub-heading {
    margin-left: 0;
}

/******************************************************
 *                   Scroll Down Arrow                *
*******************************************************/

.scroll {
    text-align: center;
    /*margin-left: 46.5%;*/
}

.downArrow {
    /*margin-left: 52%;*/
    margin: auto;
    border-right:2px solid white;
    border-bottom:2px solid white;
    width:20px;
    height:20px;
    transform: rotate(45deg);
    z-index: 9999;
}

.downTriangle {
    /*margin-left: 52%;*/
    margin: -3% auto auto;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid white;
    z-index: 9999;
}


/******************************************************
 *                   INTRO ANIMATION                  *
*******************************************************/


section.spin_gears {
    position: fixed;
    width: 33%;
    top: 5%;
    /*left: 7%;*/
}

section.gears {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 5%;
    /*left: -8%;*/
}

section.float_gears {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    /*left: 3%;*/
}

/******************************************************
 *                  Spinning Gears                    *
*******************************************************/


#lGear01 {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50px;
    left: -1px;
    background-image: url(../img/welcome/flGearXXLg.png);
    opacity: .15;

    -webkit-animation: flGear01 7s infinite linear;
    -moz-animation: flGear01 7s infinite linear;
    -o-animation: flGear01 7s infinite linear;
    -ms-animation: flGear01 7s infinite linear;
    animation: flGear01 7s infinite linear;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

@-webkit-keyframes flGear01 {
    0% { -webkit-transform: rotate3d(0,0,15,0deg);}
    100% { -webkit-transform: rotate3d(0,0,15,360deg);}
}
@-moz-keyframes flGear01 {
    0% { -moz-transform: rotate3d(0,0,15,0deg); }
    100% { -moz-transform: rotate3d(0,0,15,360deg);}
}
@-o-keyframes flGear01 {
    0% { -o-transform: rotate3d(0,0,15,0deg);}
    100% { -o-transform: rotate3d(0,0,15,360deg);}
}
@-ms-keyframes flGear01 {
    0% { -ms-transform: rotate3d(0,0,15,0deg);}
    100% { -ms-transform: rotate3d(0,0,15,360deg);}
}

#lGear02 {
    position: absolute;
    width: 120px;
    height: 120px;
    top: 180px;
    left: 166px;
    background-image: url(../img/welcome/flGearXLg.png);
    opacity: .9;

    -webkit-animation: flGear02 7s infinite linear;
    -moz-animation: flGear02 7s infinite linear;
    -o-animation: flGear02 7s infinite linear;
    -ms-animation: flGear02 7s infinite linear;
    animation: flGear02 7s infinite linear;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

@-webkit-keyframes flGear02 {
    0% { -webkit-transform: rotate3d(0,0,15,360deg);}
    100% { -webkit-transform: rotate3d(0,0,15,0deg);}
}
@-moz-keyframes flGear02 {
    0% { -moz-transform: rotate3d(0,0,15,360deg); }
    100% { -moz-transform: rotate3d(0,0,15,0deg);}
}
@-o-keyframes flGear02 {
    0% { -o-transform: rotate3d(0,0,15,360deg);}
    100% { -o-transform: rotate3d(0,0,15,0deg);}
}
@-ms-keyframes flGear02 {
    0% { -ms-transform: rotate3d(0,0,15,360deg);}
    100% { -ms-transform: rotate3d(0,0,15,0deg);}
}

#lGear03 {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 290px;
    left: 188px;
    background-image: url(../img/welcome/flGearLg.png);
    opacity: .2;


    -webkit-animation: flGear03 7s infinite linear;
    -moz-animation: flGear03 7s infinite linear;
    -o-animation: flGear03 7s infinite linear;
    -ms-animation: flGear03 7s infinite linear;
    animation: flGear03 7s infinite linear;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

@-webkit-keyframes flGear03 {
    0% { -webkit-transform: rotate3d(0,0,15,0deg);}
    100% { -webkit-transform: rotate3d(0,0,15,360deg);}
}
@-moz-keyframes flGear03 {
    0% { -moz-transform: rotate3d(0,0,15,0deg); }
    100% { -moz-transform: rotate3d(0,0,15,360deg);}
}
@-o-keyframes flGear03 {
    0% { -o-transform: rotate3d(0,0,15,0deg);}
    100% { -o-transform: rotate3d(0,0,15,360deg);}
}
@-ms-keyframes flGear03 {
    0% { -ms-transform: rotate3d(0,0,15,0deg);}
    100% { -ms-transform: rotate3d(0,0,15,360deg);}
}

/***********************************************
 *                pearls                       *
***********************************************/

/*----------------------------------------------------- pearls -------------------------------------------------------*/
#pearl01 {
    position: absolute;
    margin-top: -5px;
    margin-left: 100px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: white;
    background-image: radial-gradient(
            circle at top right,
            rgb(207, 219, 218),
            rgb(113, 135, 133),
            rgb(39, 62, 72)
    );

    -webkit-animation-name: pearl01; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1.8s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: pearl01;
    animation-duration: 1.8s;
    animation-iteration-count: 1;

}

/* Chrome, Safari, Opera */
@-webkit-keyframes pearl01{
    0%   {margin-left:100px; top:500px;}
    100% {margin-left:100px; top:0;}
}

/* Standard syntax */
@keyframes pearl01{
    0%   {margin-left:100px; top:500px;}
    100% {margin-left:100px; top:0;}
}

#pearl02 {
    position: absolute;
    margin-top: 20px;
    margin-left: 170px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: white;
    background-image: radial-gradient(
            circle at top right,
            rgb(207, 219, 218),
            rgb(113, 135, 133),
            rgb(39, 62, 72)
    );
    -webkit-animation-name: pearl02; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1.25s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: pearl02;
    animation-duration: 1.25s;
    animation-iteration-count: 1;
}


/* Chrome, Safari, Opera */
@-webkit-keyframes pearl02{
    0%   {margin-left:170px; top:600px;}
    100% {margin-left:170px; top:0;}
}

/* Standard syntax */
@keyframes pearl02{
    0%   {margin-left:170px; top:600px;}
    100% {margin-left:170px; top:0;}
}

#pearl03 {
    position: absolute;
    margin-top: 52px;
    margin-left: 100px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: white;
    background-image: radial-gradient(
            circle at top right,
            rgb(207, 219, 218),
            rgb(113, 135, 133),
            rgb(39, 62, 72)
    );

    -webkit-animation-name: pearl03; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2.1s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: pearl03;
    animation-duration: 2.1s;
    animation-iteration-count: 1;

}

/* Chrome, Safari, Opera */
@-webkit-keyframes pearl03{
    0%   {margin-left:100px; top:700px;}
    100% {margin-left:100px; top:0;}
}

/* Standard syntax */
@keyframes pearl03{
    0%   {margin-left:100px; top:700px;}
    100% {margin-left:100px; top:0;}
}

#pearl04 {
    position: absolute;
    margin-top: 120px;
    margin-left: 170px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: white;
    background-image: radial-gradient(
            circle at top right,
            rgb(207, 219, 218),
            rgb(113, 135, 133),
            rgb(39, 62, 72)
    );

    -webkit-animation-name: pearl04; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1.75s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: pearl04;
    animation-duration: 1.75s;
    animation-iteration-count: 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes pearl04{
    0%   {margin-left:170px; top:800px;}
    100% {margin-left:170px; top:0;}
}

/* Standard syntax */
@keyframes pearl04{
    0%   {margin-left:170px; top:800px;}
    100% {margin-left:170px; top:0;}
}


#pearl05 {
    position: absolute;
    margin-top: 130px;
    margin-left: 135px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: white;
    background-image: radial-gradient(
            circle at top right,
            rgb(207, 219, 218),
            rgb(113, 135, 133),
            rgb(39, 62, 72)
    );

    -webkit-animation-name: pearl05; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: pearl05;
    animation-duration: 2s;
    animation-iteration-count: 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes pearl05{
    0%   {margin-left:135px; top:800px;}
    100% {margin-left:135px; top:0;}
}

/* Standard syntax */
@keyframes pearl05{
    0%   {margin-left:135px; top:800px;}
    100% {margin-left:135px; top:0;}
}

#pearl06 {
    position: absolute;
    margin-top: 150px;
    margin-left: 250px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: white;
    background-image: radial-gradient(
            circle at top right,
            rgb(207, 219, 218),
            rgb(113, 135, 133),
            rgb(39, 62, 72)
    );

    -webkit-animation-name: pearl06; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2.25s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: pearl06;
    animation-duration: 2.25s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes pearl06{
    0%   { margin-left: 250px; top:800px;}
    100% { margin-left: 250px; top:0;}
}

/* Standard syntax */
@keyframes pearl06{
    0%   { margin-left: 250px; top:800px;}
    100% { margin-left: 250px; top:0;}
}


#pearl07 {
    position: absolute;
    margin-top: 175px;
    margin-left: 108px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: white;
    background-image: radial-gradient(
            circle at top right,
            rgb(207, 219, 218),
            rgb(113, 135, 133),
            rgb(39, 62, 72)
    );

    -webkit-animation-name: pearl07; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2.5s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: pearl07;
    animation-duration: 2.5s;
    animation-iteration-count: 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes pearl07{
    0%   {margin-left: 108px; top:800px;}
    100% {margin-left: 108px; top:0;}
}

/* Standard syntax */
@keyframes pearl07{
    0%   {margin-left: 108px; top:800px;}
    100% {margin-left: 108px; top:0;}
}

#pearl08 {
    position: absolute;
    margin-top: 230px;
    margin-left: 90px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: white;
    background-image: radial-gradient(
            circle at top right,
            rgb(207, 219, 218),
            rgb(113, 135, 133),
            rgb(39, 62, 72)
    );

    -webkit-animation-name: pearl08; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2.75s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: pearl08;
    animation-duration: 2.75s;
    animation-iteration-count: 1;
}


/* Chrome, Safari, Opera */
@-webkit-keyframes pearl08{
    0%   { margin-left: 90px; top:800px;}
    100% { margin-left: 90px; top:0;}
}

/* Standard syntax */
@keyframes pearl08{
    0%   { margin-left: 90px; top:800px;}
    100% { margin-left: 90px; top:0;}
}

#pearl09 {
    position: absolute;
    margin-top: 265px;
    margin-left: 10px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: white;
    background-image: radial-gradient(
            circle at top right,
            rgb(207, 219, 218),
            rgb(113, 135, 133),
            rgb(39, 62, 72)
    );

    -webkit-animation-name: pearl09; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1.7s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: pearl09;
    animation-duration: 1.7s;
    animation-iteration-count: 1;

}

/* Chrome, Safari, Opera */
@-webkit-keyframes pearl09{
    0%   {margin-left:10px; margin-top:500px;}
    100% {margin-left: 10px; margin-top:265px;}
}

/* Standard syntax */
@keyframes pearl09{
    0%   {margin-left:10px; margin-top:500px;}
    100% {margin-left:10px; margin-top:265px;}
}

#pearl10 {
    position: absolute;
    margin-top: 370px;
    margin-left: 70px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: white;
    background-image: radial-gradient(
            circle at top right,
            rgb(207, 219, 218),
            rgb(113, 135, 133),
            rgb(39, 62, 72)
    );

    -webkit-animation-name: pearl10; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1.8s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: pearl10;
    animation-duration: 1.8s;
    animation-iteration-count: 1;

}

/* Chrome, Safari, Opera */
@-webkit-keyframes pearl10{
    0%   {margin-left:70px; margin-top:500px;}
    100% {margin-left: 70px; margin-top:370px;}
}

/* Standard syntax */
@keyframes pearl10{
    0%   {margin-left:70px; margin-top:500px;}
    100% {margin-left:70px; margin-top:370px;}
}

#pearl11 {
    position: absolute;
    margin-top: 430px;
    margin-left: 50px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: white;
    background-image: radial-gradient(
            circle at top right,
            rgb(207, 219, 218),
            rgb(113, 135, 133),
            rgb(39, 62, 72)
    );
    -webkit-animation-name: pearl1; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2.3s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: pearl11;
    animation-duration: 2.3s;
    animation-iteration-count: 1;

}

/* Chrome, Safari, Opera */
@-webkit-keyframes pearl11{
    0%   {margin-left:50px; margin-top:500px;}
    100% {margin-left: 50px; margin-top:430px;}
}

/* Standard syntax */
@keyframes pearl11{
    0%   {margin-left:50px; margin-top:500px;}
    100% {margin-left:50px; margin-top:430px;}
}


/*------------------------------------------------- flowers ----------------------------------------------------------*/
#flower01 {
    position:absolute;
    margin-top: 20px;
    margin-left: 90px;

    -webkit-animation-name: flower01; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1.1s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: flower01;
    animation-duration: 1.1s;
    animation-iteration-count: 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes flower01{
    0%   {margin-left: 90px; top:800px;}
    100% {margin-left: 90px; top:0;}
}

/* Standard syntax */
@keyframes flower01{
    0%   {margin-left: 90px; top:800px;}
    100% {margin-left: 90px; top:0;}
}

#flower02 {
    position:absolute;
    margin-top: 95px;
    margin-left: 120px;

    -webkit-animation-name: flower02; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1.3s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: flower02;
    animation-duration: 1.3s;
    animation-iteration-count: 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes flower02{
    0%   {margin-left: 120px; top:800px;}
    100% {margin-left: 120px; top:0;}
}

/* Standard syntax */
@keyframes flower02{
    0%   {margin-left: 120px; top:800px;}
    100% {margin-left: 120px; top:0;}
}

#flower03 {
    position:absolute;
    margin-top: 110px;
    margin-left: 215px;

    -webkit-animation-name: flower03; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1.7s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: flower03;
    animation-duration: 1.7s;
    animation-iteration-count: 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes flower03{
    0%   {margin-left: 215px; top:800px;}
    100% {margin-left: 215px; top:0;}
}

/* Standard syntax */
@keyframes flower03{
    0%   {margin-left: 215px; top:800px;}
    100% {margin-left: 215px; top:0;}
}

#flower04 {
    position:absolute;
    margin-top: 140px;
    margin-left: 100px;

    -webkit-animation-name: flower04; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2.2s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: flower04;
    animation-duration: 2.2s;
    animation-iteration-count: 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes flower04{
    0%   {margin-left: 100px; top:800px;}
    100% {margin-left: 100px; top:0;}
}

/* Standard syntax */
@keyframes flower04{
    0%   {margin-left: 100px; top:800px;}
    100% {margin-left: 100px; top:0;}
}

#flower05 {
    position:absolute;
    margin-top: 200px;
    margin-left: 100px;

    -webkit-animation-name: flower05; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2.7s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: flower05;
    animation-duration: 2.7s;
    animation-iteration-count: 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes flower05{
    0%   {margin-left: 100px; top:800px;}
    100% {margin-left: 100px; top:0;}
}

/* Standard syntax */
@keyframes flower05{
    0%   {margin-left: 100px; top:800px;}
    100% {margin-left: 100px; top:0;}
}

#flower06 {
    position:absolute;
    margin-top: 205px;
    margin-left: 275px;
    transform: rotate(30deg);

    -webkit-animation-name: flower06; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2.3s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: flower06;
    animation-duration: 2.3s;
    animation-iteration-count: 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes flower06{
    0%   {margin-left: 275px; top:800px;}
    100% {margin-left: 275px; top:0;}
}

/* Standard syntax */
@keyframes flower06{
    0%   {margin-left: 275px; top:800px;}
    100% {margin-left: 275px; top:0;}
}

#flower07 {
    position:absolute;
    margin-top: 265px;
    margin-left: 70px;
    transform: rotate(13deg);

    -webkit-animation-name: flower07; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1.9s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: flower07;
    animation-duration: 1.9s;
    animation-iteration-count: 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes flower07{
    0%   {margin-left: 70px; top:800px;}
    100% {margin-left: 70px; top:0;}
}

/* Standard syntax */
@keyframes flower07{
    0%   {margin-left: 70px; top:800px;}
    100% {margin-left: 70px; top:0;}
}

#flower08 {
    position:absolute;
    margin-top: 320px;
    margin-left: 40px;
    transform: rotate(20deg);

    -webkit-animation-name: flower08; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1.2s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: flower08;
    animation-duration: 1.2s;
    animation-iteration-count: 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes flower08{
    0%   {margin-left: 40px; top:800px;}
    100% {margin-left: 40px; top:0;}
}

/* Standard syntax */
@keyframes flower08{
    0%   {margin-left: 40px; top:800px;}
    100% {margin-left: 40px; top:0;}
}

#flower09 {
    position:absolute;
    margin-top: 410px;
    margin-left: 100px;
    transform: rotate(30deg);
    z-index: 10;

    -webkit-animation-name: flower09; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1.6s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: flower09;
    animation-duration: 1.6s;
    animation-iteration-count: 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes flower09{
    0%   {margin-left: 100px; top:800px;}
    100% {margin-left: 100px; top:0;}
}

/* Standard syntax */
@keyframes flower09{
    0%   {margin-left: 100px; top:800px;}
    100% {margin-left: 100px; top:0;}
}

#flower10 {
    position:absolute;
    margin-top: 440px;
    margin-left: -80px;
    transform: rotate(30deg);
    z-index: 10;

    -webkit-animation-name: flower10; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2.1s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: flower10;
    animation-duration: 2.1s;
    animation-iteration-count: 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes flower10{
    0%   {margin-left: -80px; top:800px;}
    100% {margin-left: -80px; top:0;}
}

/* Standard syntax */
@keyframes flower10{
    0%   {margin-left: -80px; top:800px;}
    100% {margin-left: -80px; top:0;}
}



/*-------------------------------------------------- Flower Petals ---------------------------------------------------*/
i.sm {
    display: inline-block;
    width: 0;
    height: 0;
    padding: 8px 4px;
    background: rgba(0,0,0,.2);
    transform: rotate(60deg);
    border-top-left-radius: 99px;
    border-bottom-right-radius: 99px;
    background-image:
    radial-gradient(
            circle at top right,
            rgba(207,219,218,.8),
            rgba(113,135,133,.8),
            rgba(39,62,72,.8),
            rgba(207,219,218,.8)
    );
}

i.med {
    display: inline-block;
    width: 0;
    height: 0;
    padding: 8px 4px;
    background: rgba(0,0,0,.2);
    transform: rotate(45deg);
    border-top-left-radius: 99px;
    border-bottom-right-radius: 99px;
    background-image:
    radial-gradient(
            circle at top right,
            rgba(207,219,218,.8),
            rgba(113,135,133,.8),
            rgba(39,62,72,.8),
            rgba(207,219,218,.8)
    );
}

i.lg {
    display: inline-block;
    width: 0;
    height: 0;
    padding: 14px 7px;
    background: rgba(0,0,0,.2);
    transform: rotate(72deg);
    border-top-left-radius: 99px;
    border-bottom-right-radius: 99px;
    background-image:
    radial-gradient(
            circle at top right,
            rgba(207,219,218,.8),
            rgba(113,135,133,.8),
            rgba(39,62,72,.8),
            rgba(207,219,218,.8)
    );
}

/*---------------------------------------------- Gears ---------------------------------------------------------------*/


#gear01 {
    position: absolute;
    margin-top: -10px;
    margin-left: 115px;
    width: 60px;
    height: 60px;
    background-image: url(../img/welcome/gearSm.png);
    z-index: 6;

    -webkit-animation-name: gear01; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1.2s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: gear01;
    animation-duration: 1.2s;
    animation-iteration-count: 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes gear01{
    0%   {margin-left:115px; top:800px;}
    100% {margin-left:115px; top:0;}
}

/* Standard syntax */
@keyframes gear01{
    0%   {margin-left:115px; top:800px;}
    100% {margin-left:115px; top:0;}
}

#gear02 {
    position: absolute;
    margin-top: 25px;
    margin-left: 155px;
    width: 80px;
    height: 80px;
    background-image: url(../img/welcome/gearMed.png);

    -webkit-animation-name: gear02; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1.6s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: gear02;
    animation-duration: 1.6s;
    animation-iteration-count: 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes gear02{
    0%   {margin-left:155px; top:800px;}
    100% {margin-left:155px; top:0;}
}

/* Standard syntax */
@keyframes gear02{
    0%   {margin-left:155px; top:800px;}
    100% {margin-left:155px; top:0;}
}

#gear03 {
    position: absolute;
    margin-top: 150px;
    margin-left: 120px;
    width: 120px;
    height: 120px;
    background-image: url(../img/welcome/gearXLg.png);
    transform: rotate(25deg);
    z-index: 10;

    -webkit-animation-name: gear03; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1.9s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: gear03;
    animation-duration: 1.9s;
    animation-iteration-count: 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes gear03{
    0%   {left:120px; top:800px;}
    100% {left:120px; top:0;}
}

/* Standard syntax */
@keyframes gear03{
    0%   {margin-left:120px; top:800px;}
    100% {margin-left:120px; top:0;}
}

#gear04 {
    position: absolute;
    margin-top: 60px;
    margin-left: 130px;
    width: 60px;
    height: 60px;
    background-image: url(../img/welcome/gearSm.png);

    -webkit-animation-name: gear04; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2.1s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: gear04;
    animation-duration: 2.1s;
    animation-iteration-count: 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes gear04{
    0%   {margin-left:130px; top:800px;}
    100% {margin-left:130px; top:0;}
}

/* Standard syntax */
@keyframes gear04{
    0%   {margin-left:130px; top:800px;}
    100% {margin-left:130px; top:0;}
}


#gear05 {
    position: absolute;
    margin-top: 160px;
    margin-left: 5px;
    width: 80px;
    height: 80px;
    background-image: url(../img/welcome/gearMed.png);

    -webkit-animation-name: gear05; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1.8s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: gear05;
    animation-duration: 1.8s;
    animation-iteration-count: 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes gear05{
    0%   {margin-left:5px; top:800px;}
    100% {margin-left:5px; top:0;}
}

/* Standard syntax */
@keyframes gear05{
    0%   {margin-left:5px; top:800px;}
    100% {margin-left:5px; top:0;}
}

#gear06 {
    position: absolute;
    margin-top: 200px;
    margin-left: 70px;
    width: 200px;
    height: 200px;
    background-image: url(../img/welcome/gearXXLg.png);
    transform: rotate(35deg);
    z-index: 2;

    -webkit-animation-name: gear06; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2.2s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: gear06;
    animation-duration: 2.2s;
    animation-iteration-count: 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes gear06{
    0%   {margin-left:70px; top:800px;}
    100% {margin-left:70px; top:0;}
}

/* Standard syntax */
@keyframes gear06{
    0%   {margin-left:70px; top:800px;}
    100% {margin-left:70px; top:0;}
}


#gear07 {
    position: absolute;
    margin-top: 350px;
    margin-left: -75px;
    width: 120px;
    height: 120px;
    background-image: url(../img/welcome/gearXLg.png);
    transform: rotate(35deg);
    z-index: 3;

    -webkit-animation-name: gear07; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2.6s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    animation-name: gear07;
    animation-duration: 2.6s;
    animation-iteration-count: 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes gear07{
    0%   {margin-left:-75px; top:800px;}
    100% {margin-left:-75px; top:0;}
}

/* Standard syntax */
@keyframes gear07{
    0%   {margin-left:-75px; top:800px;}
    100% {margin-left:-75px; top:0;}
}