@charset "UTF-8";

    sup,
    body {
        margin: 0;
    }

    #container {
        /*Outter most container that could be considered the "Stage"*/
        position: absolute;
        overflow: hidden;
        height: 250px;
        width: 300px;
        cursor: pointer;
        border: 1px solid black;
        box-sizing: border-box;
        background: #00b9ce;
    }

    #svg {
        background-image: url("../images/optim_headline.svg");
        width: 275px;
        height: 201px;
    }

    /*Utilities*/

    .Absolute-Center {
        /*Centers this element within a div*/
        position: absolute;
        top: 50%;
        left: 50%;
        /* IE 9 */
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        /* Chrome, Safari, Opera */
        transform: translate(-50%, -50%);
    }

    div {
        position: absolute;
        background-repeat: no-repeat;
        background-size: contain;
    }

    sub {
        position: relative;
        vertical-align: baseline;
        top: -0.5em;
        font-size: 60%;
    }

    sub {
        top: 0.5em;

    }

    #badge_legobricks {
        visibility: hidden;
        background-image: url("../images/badge_legobricks.png");
        width: 300px;
        height: 250px;
        -ms-transform: scale(0.5, 0.5);
        /* IE 9 */
        -webkit-transform: scale(0.5, 0.5);
        /* Safari */
        transform: scale(0.5, 0.5);
    }

    #badge_legolife {
        /* left: 193px;
        top: 144px; */
        right: 2px;
        bottom: 2px;
        background-image: url("../images/badge_legolife.png");
        width: 66px;
        height: 66px;
        -ms-transform: scale(0.8, 0.8);
        /* IE 9 */
        -webkit-transform: scale(0.8, 0.8);
        /* Safari */
        transform: scale(0.8, 0.8);

    }

    #greyoverlay {
        visibility: hidden;
        top: 0;
        left: 0;
        width: 300px;
        height: 250px;
        background-color: #000;
        opacity: 0.5;
    }

    #frame1_iphone {
        left: -59px;
        top: -293px;
        background-image: url("../images/frame1_iphone.png");
        width: 427px;
        height: 868px;
        /* zoomed dimensions
        width: 109px;
        height: 221px;
        */
    }

    #frame1_tiles {
        /* visibility: hidden; */
        background-image: url("../images/frame1_tiles.jpg");
        width: 412px;
        height: 336px;
        /* zoomed dimensions
        width: 300px;
        height: 250px;
        */
    }


    #frame2_colorstrip1 {
        top: 250px;
        left: 0;
        height: 50px;
        width: 300px;
        background-color: #000;
    }

    #frame2_colorstrip2 {
        top: 300px;
        left: 0;
        height: 50px;
        width: 300px;
        background-color: #0d2d53;
    }

    #frame2_bg {
        background-image: url("../images/frame2_bg.jpg");
        left: 0px;
        top: 350px;
        width: 300px;
        height: 250px;
    }

    #frame3_bg {
        /* visibility: hidden; */
        background-image: url("../images/frame3_bg.jpg");
        top: 250px;
        left: 0;
        width: 300px;
        height: 250px;
    }

    #frame3_copy {
        /* visibility: hidden; */
        top: 250px;
        left: 0px;
        background-image: url("../images/frame3_copy.png");
        width: 300px;
        height: 250px;
    }

    #frame4_bg {
        top: 0;
        left: 300px;
        background-image: url("../images/frame4_bg.jpg");
        width: 300px;
        height: 250px;
    }

    #frame5_bg {
        top: 0;
        left: 600px;
        background-image: url("../images/frame5_bg.jpg");
        width: 300px;
        height: 250px;
    }

    #frame5_copy {
        /* visibility: hidden; */
        top: 0;
        left: 300px;
        background-image: url("../images/frame5_copy.png");
        width: 300px;
        height: 250px;
    }

    #frame6_colorstrip1 {
        top: 250px;
        left: 0;
        height: 50px;
        width: 300px;
        background-color: #000;
    }

    #frame6_colorstrip2 {
        top: 300px;
        left: 0;
        height: 50px;
        width: 300px;
        background-color: #0d2d53;
    }

    #frame6_bg {
        background-image: url("../images/frame6_bg.jpg");
        left: 0px;
        top: 350px;
        width: 300px;
        height: 250px;
    }