@keyframes balloon-float {
    0%   { transform: translateY(1000px); animation-timing-function:ease-in;  }
    73%  { transform: translateY(0px); animation-timing-function:ease-out; }
    82%  { transform: translateY(-12px); animation-timing-function:ease-in;  }
    91%  { transform: translateY(0px); animation-timing-function:ease-out; }
    96%  { transform: translateY(-6px); animation-timing-function:ease-in;  }
    100% { transform: translateY(0px); }
}

@keyframes balloon-shadow-float {
    0%   { transform: translateY(1000px) scaleX(.5); animation-timing-function:ease-in;  }
    73%  { transform: translateY(0px) scaleX(1); animation-timing-function:ease-out; }
    82%  { transform: translateY(0px) scaleX(1.5); animation-timing-function:ease-in;  }
    91%  { transform: translateY(0px) scaleX(1); animation-timing-function:ease-out; }
    96%  { transform: translateY(0px) scaleX(1.25); animation-timing-function:ease-in;  }
    100% { transform: translateY(0px) scaleX(1); }
}

#me-scene {
}

#me-scene .text-box {
    margin-left: 40%;
	margin-right: 24px;
    z-index: 1;
}

#me-scene .text-box h2 {
    color: #462445;
}

#me-scene .text-box p {
    color: #333333;
}

#me-scene .parallax-frame.transition-to .text-box {
    transform: translate(-400px, 0px);
    opacity: 0;
}

#me-scene .parallax-frame.transition-from .text-box {
    transform: translate(-400px, 0px);
    opacity: 0;
}

#me-scene .image-box {
    position: absolute;
    left: 50%;
    top: 0px;
    bottom: 0px;
}

#me-scene .parallax-frame.transition-to .image-box {
    transform: translate(800px, 0px);
	opacity: 0;
}

#me-scene .parallax-frame.transition-from .image-box {
    transform: translate(800px, 0px);
	opacity: 0;
}

#me-desk {
    position: absolute;
    left: 0px;
    width: 100%;
    bottom: -20px;
    height: 166px;
    min-width: 1280px;
    z-index: -1;
}

#me-balloon {
    position: absolute;
    left: 18%;
    top: -200px;
}

#me-wall-clock {
    position: absolute;
    right: 0px;
    top: 0px;
}

#me-balloon-shadow {
    position: absolute;
    left: 18%;
    bottom: 77px;
}

#me-coffee-cup {
    position: absolute;
    left: 0px;
    bottom: 102px;
}

#me-headphones {
    position: absolute;
    right: 0px;
    bottom: 77px;
}

#me-pen {
    position: absolute;
    bottom: 65px;
    left: 177px;
}

#me-picture-frame {
    position: absolute;
    right: 0px;
    bottom: 102px;
}

#me-sheet-boxes {
    position: absolute;
    bottom: 111px;
    left: 35px;
}

/* iPad Landscape */
@media (max-width: 1024px) and (orientation: landscape) {
    #me-sheet-boxes {
        left: -35px;
    }
}

#me-cupcake {
    position: absolute;
    bottom: 27px;
    left: -228px;
}

#me-macbook {
    position: absolute;
    bottom: 0px;
}

#me-ipad {
    position: absolute;
    bottom: 27px;
}

#me-printed-purl {
    position: absolute;
    bottom: 0px;
}

.balloon-float {
    -moz-animation: balloon-float 1.5s;
    -webkit-animation: balloon-float 1.5s;
    animation: balloon-float 1.5s;
}

.balloon-float-start {
    transform: translateY(1000px);
}

.balloon-shadow-float {
    -moz-animation: balloon-shadow-float 1.5s;
    -webkit-animation: balloon-shadow-float 1.5s;
    animation: balloon-shadow-float 1.5s;
}

.balloon-shadow-float-start {
    transform: translateY(1000px) scaleX(.5);
	transform-origin: center center;
}


/* iPad (Landscape) */
@media (max-width: 1024px) and (orientation: landscape) {
}

/* iPad (Portrait) */
@media (max-width: 768px) and (orientation: portrait) {
    #me-scene .text-box {
        margin: 20% 10% 0px 10%;
        text-align: center;
    }

    #me-scene .image-box {
        margin: 0% 0%;
        text-align: center;
        left: 0px;
        top: initial;
        bottom: 48px;
        width: 100%;
    }

    #me-scene .image-box img {
        position: relative;
        width: 80%;
        left: 0px;
        height: auto;
    }

    #me-scene .image-box img#me-ipad {
        width: 45%;
    }

    #me-scene .image-box img#me-printed-purl {
        width: 50%;
    }
}

/* iPhone (Landscape) */
@media (max-width: 736px) and (orientation: landscape) {
    #me-scene .text-box {
        margin: 10% 0% 10% 20%;
        text-align: center;
    }

    #me-scene .text-box p {
        color: #000000;
    }

    #me-scene .image-box {
        position: static;
        margin: 10% 5% 0% 5%;
        text-align: center;
    }

    #me-scene .image-box img#me-cupcake {
        position: static;
        width: 100%;
    }

    #me-scene .image-box img#me-macbook {
        position: static;
        width: 100%;
    }

    #me-scene .image-box img#me-ipad {
        position: static;
        width: 50%;
    }

    #me-scene .image-box img#me-printed-purl {
        position: static;
        width: 90%;
    }
}

/* iPhone (Portrait) */
@media (max-width: 414px) and (orientation: portrait) {
    #me-scene #me-frame-c .image-box {
        bottom: 24px;
    }
}

@media (max-width: 320px) and (orientation: portrait) {
    #me-scene .image-box img#me-ipad {
        width: 40%;
    }

    #me-scene .image-box img#me-printed-purl {
        width: 80%;
    }
}

/* Hide images for when below iPad landscape */
@media (max-width: 1023px) {
    #me-balloon {
        display: none;
    }

    #me-wall-clock {
        display: none;
    }

    #me-balloon-shadow {
        display: none;
    }

    #me-coffee-cup {
        display: none;
    }

    #me-headphones {
        display: none;
    }

    #me-pen {
        display: none;
    }

    #me-picture-frame {
        display: none;
    }

    #me-sheet-boxes {
        display: none;
    }
}