/* 
    Container element for the Hi-U! animation.
    The size defaults to w:500, h:220 but can be changed to anything since
    all measurements are relative so it is fully scalable, including the animation.

    Usage:
            <div class="HiU-Animation-Area">
                <img src="images/Jumbotron/Landscape.png" class="imgLandscape"/>
                <img src="images/Jumbotron/Sun.png" class="imgSun animateSun"/>
                <img src="images/Jumbotron/Balloon.png" class="imgBalloon animateBalloon"/>
                <img src="images/Jumbotron/FrontHill.png" class="imgFrontHill"/>
                <img src="images/Jumbotron/SingleCloud.png" class="imgLeftSingleCloud animateSingleCloud"/>
                <img src="images/Jumbotron/CloudPair.png" class="imgCloudPair animateCloudPair"/>
            </div>

    Note:
    The individual animations can be turned on/off by adding/removing the animate.... class.
    For instance removing 'animateSun' removes sun's animation.            
*/
.HiU-Animation-Area {
    overflow: hidden; /*Important to avoid scrollbars when animating within this container*/
    position: relative; /* Required to keep all children within this container with absolute position */
    height: 220px;
    width: 500px;
}
    /* IMAGES */
    .HiU-Animation-Area .imgLandscape {
        position: absolute;
        bottom: 0px;
        height: auto;
        width: 100%;
        z-index: 2;
    }

    .HiU-Animation-Area .imgSun {
        position: absolute;
        height: 54%;
        width: auto;
        bottom: 0px;
        left: 30%;
        z-index: 1;
    }

    .HiU-Animation-Area .imgFrontHill {
        position: absolute;
        height: 22%;
        width: auto;
        bottom: 0px;
        left: 5%;
        z-index: 5;
    }

    .HiU-Animation-Area .imgBalloon {
        position: absolute;
        height: 50%; /* change of this value with auto-adjust width */
        width: auto;
        bottom: 23%;
        left: 24%;
        z-index: 5;
    }

    .HiU-Animation-Area .imgLeftSingleCloud {
        position: absolute;
        height: 23%;
        width: auto;
        bottom: 50%;
        left: 4%;
        z-index: 4;
    }

    .HiU-Animation-Area .imgCloudPair {
        position: absolute;
        height: 27%;
        width: auto;
        bottom: 50%;
        left: 54%;
        z-index: 4;
    }

    /*Time to animate*/
    .HiU-Animation-Area .animateSingleCloud {
        -webkit-animation: moveSingleCloud 15s linear infinite alternate;
        /*animation-delay: 5s;*/
        -moz-animation: moveSingleCloud 15s linear infinite alternate;
        -o-animation: moveSingleCloud 15s linear infinite alternate;
        opacity: 0.8;
    }

    .HiU-Animation-Area .animateCloudPair {
        -webkit-animation: moveCloudPair 15s linear infinite alternate;
        -moz-animation: moveCloudPair 15s linear infinite alternate;
        -o-animation: moveCloudPair 15s linear infinite alternate;
        opacity: 0.9;
    }
    /* animates the balloon so it goes up first and then into the sun */
    .HiU-Animation-Area .animateBalloonIntoSun {
        -webkit-animation: moveBalloon 30s linear infinite alternate;
        -moz-animation: moveBalloon 30s linear infinite alternate;
        -o-animation: moveBalloon 30s linear infinite alternate;
    }

    .HiU-Animation-Area .animateBalloonAllTheWayUp {
        -webkit-animation: moveBalloonAllUp 10s linear;
        -moz-animation: moveBalloonAllUp 10s linear;
        -o-animation: moveBalloonAllUp 10s linear;
        animation-fill-mode: forwards; /* makes sure animation stops at last frame and doesn't reset back '*/
    }

    .HiU-Animation-Area .animateSun {
        -webkit-animation: moveSun 15s ease-out; /*infinite alternate;*/
        -moz-animation: moveSun 15s ease-out;
        -o-animation: moveSun 15s ease-out;
        animation-fill-mode: forwards; /* makes sure animation stops at last frame and doesn't reset back '*/
    }


/* 
    KeyFrames moveSingleCloud
*/
@-webkit-keyframes moveSingleCloud {
    0% {
        left: 4%;
    }

    100% {
        left: 12%;
    }
}

@-moz-keyframes moveSingleCloud {
    0% {
        left: 4%;
    }

    100% {
        left: 12%;
    }
}

@-o-keyframes moveSingleCloud {
    0% {
        left: 4%;
    }

    100% {
        left: 12%;
    }
}

/* 
    KeyFrames moveCloudPair
*/
@-webkit-keyframes moveCloudPair {
    0% {
        left: 50%;
    }

    100% {
        left: 60%;
    }
}

@-moz-keyframes moveCloudPair {
    0% {
        left: 50%;
    }

    100% {
        left: 60%;
    }
}

@-o-keyframes moveCloudPair {
    0% {
        left: 50%;
    }

    100% {
        left: 60%;
    }
}

/* 
    KeyFrames moveBalloon
*/
@-webkit-keyframes moveBalloon {
    0% {
        bottom: -22%;
        left: 24%;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1);
    }

    30% {
        bottom: 23%;
        left: 24%;
    }

    50% {
        bottom: 23%;
        left: 24%;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1);
    }

    80% {
        bottom: 27%;
        left: 40%;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        transform: scale(0);
    }

    100% {
        bottom: 27%;
        left: 40%;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        transform: scale(0);
    }
}

@-moz-keyframes moveBalloon {
    0% {
        bottom: -22%;
        left: 24%;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1);
    }

    30% {
        bottom: 23%;
        left: 24%;
    }

    50% {
        bottom: 23%;
        left: 24%;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1);
    }

    80% {
        bottom: 27%;
        left: 40%;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        transform: scale(0);
    }

    100% {
        bottom: 27%;
        left: 40%;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        transform: scale(0);
    }
}

@-o-keyframes moveBalloon {
    0% {
        bottom: -22%;
        left: 24%;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1);
    }

    30% {
        bottom: 23%;
        left: 24%;
    }

    50% {
        bottom: 23%;
        left: 24%;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1);
    }

    80% {
        bottom: 27%;
        left: 40%;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        transform: scale(0);
    }

    100% {
        bottom: 27%;
        left: 40%;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        transform: scale(0);
    }
}

/* 
    KeyFrames moveSun
*/
@-webkit-keyframes moveSun {
    0% {
        bottom: 0px;
    }

    100% {
        bottom: 32%;
    }
}

@-moz-keyframes moveSun {
    0% {
        bottom: 0px;
    }

    100% {
        bottom: 32%;
    }
}

@-o-keyframes moveSun {
    0% {
        bottom: 0px;
    }

    100% {
        bottom: 32%;
    }
}


/* 
    KeyFrames moveBalloonAllUp
*/
@-webkit-keyframes moveBalloonAllUp {
    0% {
        bottom: 0%;
        left: 24%;
    }

    100% {
        bottom: 160vh;
        left: 24%;
        -webkit-transform: scale(5);
        -moz-transform: scale(5);
    }
}

@-moz-keyframes moveBalloonAllUp {
    0% {
        bottom: 0%;
        left: 24%;
    }

    100% {
        bottom: 160vh;
        left: 24%;
        -webkit-transform: scale(5);
        -moz-transform: scale(5);
    }
}

@-o-keyframes moveBalloonAllUp {
    0% {
        bottom: 0%;
        left: 24%;
    }

    100% {
        bottom: 160vh;
        left: 24%;
        -webkit-transform: scale(5);
        -moz-transform: scale(5);
    }
}