<div class="fullScreenExpand">               
    <div class="phoneFrame">
        <div class="screenRap">
            <div class="burger">
                <svg viewBox="0 0 64 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <g id="drink-and-food" transform="translate(0.000000, -617.000000)" fill="#ffffff">
                            <g id="burger" transform="translate(0.000000, 617.000000)">
                                <path d="M50.7,29.3 C50.3,29.3 50,29.2 49.7,28.9 L47,26.3 L44.3,28.9 C43.7,29.5 42.8,29.5 42.2,28.9 L39.5,26.3 L36.8,28.9 C36.2,29.5 35.3,29.5 34.7,28.9 L32,26.3 L29.3,28.9 C28.7,29.5 27.8,29.5 27.2,28.9 L24.5,26.3 L21.8,28.9 C21.2,29.5 20.3,29.5 19.7,28.9 L17,26.3 L14.3,28.9 C13.7,29.5 12.8,29.5 12.2,28.9 L9.4,26.3 L6.6,28.5 C6.3,28.8 5.9,28.9 5.5,28.8 C5.1,28.8 4.7,28.5 4.5,28.2 L0.8,23.4 C0.6,23.1 0.5,22.7 0.5,22.3 C1.5,10.1 11.8,0.9 24.4,0.9 L39.6,0.9 C52,0.9 62.5,10.4 63.5,22.4 C63.5,22.8 63.4,23.1 63.2,23.4 L59.5,28.2 C59.2,28.5 58.9,28.7 58.5,28.8 C58.1,28.8 57.7,28.7 57.4,28.5 L54.7,26.2 L51.9,28.8 C51.5,29.1 51.1,29.3 50.7,29.3 L50.7,29.3 Z M39.1,23 L39.8,23 C40.2,23 40.6,23.1 40.8,23.4 L43.2,25.7 L45.6,23.4 C45.9,23.1 46.2,23 46.6,23 L47.3,23 C47.7,23 48.1,23.1 48.3,23.4 L50.7,25.7 L53.1,23.4 C53.4,23.1 53.7,23 54.1,23 L54.8,23 C55.2,23 55.5,23.1 55.8,23.4 L58,25.3 L60.3,22.3 C59.1,12 50.1,4.1 39.4,4.1 L24.3,4.1 C13.5,4.1 4.6,11.8 3.4,22.1 L5.8,25.2 L8,23.4 C8.3,23.2 8.6,23.1 8.9,23.1 L9.6,23.1 C10,23.1 10.4,23.2 10.6,23.5 L13,25.8 L15.4,23.5 C15.7,23.2 16,23.1 16.4,23.1 L17.1,23.1 C17.5,23.1 17.9,23.2 18.1,23.5 L20.5,25.8 L22.9,23.5 C23.2,23.2 23.5,23.1 23.9,23.1 L24.6,23.1 C25,23.1 25.4,23.2 25.6,23.5 L28,25.8 L30.4,23.5 C30.7,23.2 31,23.1 31.4,23.1 L32.1,23.1 C32.5,23.1 32.9,23.2 33.1,23.5 L35.5,25.8 L37.9,23.5 C38.4,23.1 38.7,23 39.1,23 L39.1,23 Z" id="Shape"></path>
                                <path d="M46.1,54 L17.7,54 C9.3,54 7,50.2 4.2,45.4 C3.6,44.4 2.9,43.3 2.2,42.1 C1.9,41.6 1.9,40.9 2.2,40.4 L4.6,37.1 C4.9,36.7 5.3,36.5 5.7,36.5 C6.1,36.5 6.6,36.6 6.9,36.9 L9.6,39.6 L12.3,37 C12.9,36.4 13.8,36.4 14.4,37 L17.1,39.6 L19.8,37 C20.4,36.4 21.3,36.4 21.9,37 L24.6,39.6 L27.3,37 C27.9,36.4 28.8,36.4 29.4,37 L32.1,39.6 L34.8,37 C35.4,36.4 36.3,36.4 36.9,37 L39.6,39.6 L42.3,37 C42.9,36.4 43.8,36.4 44.4,37 L47.1,39.6 L49.8,37 C50.4,36.4 51.3,36.4 51.9,37 L54.6,39.6 L57.3,36.8 C57.6,36.5 58,36.3 58.4,36.4 C58.8,36.4 59.2,36.6 59.5,37 L62,40.1 C62.4,40.6 62.4,41.2 62.2,41.7 C61.9,42.2 56.1,54 46.1,54 L46.1,54 Z M5.2,41.3 C5.8,42.2 6.3,43.1 6.7,43.8 C9.5,48.6 10.9,51 17.6,51 L46.1,51 C52.8,51 57.6,43.7 59,41.2 L58.2,40.2 L55.8,42.6 C55.5,42.9 55.1,43 54.7,43 L54.3,43 C53.9,43 53.5,42.9 53.3,42.6 L50.8,40.2 L48.3,42.6 C48,42.9 47.7,43 47.3,43 L46.9,43 C46.5,43 46.1,42.9 45.9,42.6 L43.4,40.2 L40.9,42.6 C40.6,42.9 40.3,43 39.9,43 L39.5,43 C39.1,43 38.7,42.9 38.5,42.6 L36,40.2 L33.5,42.6 C33.2,42.9 32.9,43 32.5,43 L32.1,43 C31.7,43 31.3,42.9 31.1,42.6 L28.6,40.2 L26.1,42.6 C25.8,42.9 25.5,43 25.1,43 L24.7,43 C24.3,43 23.9,42.9 23.7,42.6 L21.2,40.2 L18.7,42.6 C18.4,42.9 18.1,43 17.7,43 L17.3,43 C16.9,43 16.5,42.9 16.3,42.6 L13.8,40.2 L11.3,42.6 C11,42.9 10.7,43 10.3,43 L9.9,43 C9.5,43 9.1,42.8 8.8,42.6 L6.5,40.3 L5.2,41.3 L5.2,41.3 Z" id="Shape"></path>
                                <path d="M60.6,34 L2.6,34 C1.8,34 1.1,33.3 1.1,32.5 C1.1,31.7 1.8,31 2.6,31 L60.6,31 C61.4,31 62.1,31.7 62.1,32.5 C62.1,33.3 61.4,34 60.6,34 L60.6,34 Z" id="Shape"></path>
                                <circle id="Oval" cx="42.8" cy="47.2" r="1.6"></circle>
                                <circle id="Oval" cx="30" cy="47.2" r="1.6"></circle>
                                <circle id="Oval" cx="45" cy="11.9" r="1.6"></circle>
                                <circle id="Oval" cx="48.2" cy="17.2" r="1.6"></circle>
                                <circle id="Oval" cx="32.1" cy="8.6" r="1.6"></circle>
                                <circle id="Oval" cx="30" cy="18.3" r="1.6"></circle>
                                <circle id="Oval" cx="18.2" cy="12.9" r="1.6"></circle>
                                <circle id="Oval" cx="11.8" cy="18.3" r="1.6"></circle>
                            </g>
                        </g>
                    </g>
                </svg>
              <span>BURGER</span>
              <p>
                <a tabindex="-1"></a>
                <img src="http://bullguard.com/marketingfiles/ext/umbracoLanding/demo/images/listopen/burgerPic.png">
                <b>
                    <i>The Humble Hamburger</i>
                    A hamburger (also called a beef burger, hamburger sandwich, burger, hamburg, cheeseburger) is a sandwich consisting of one or more cooked patties of ground meat, usually beef, placed inside a sliced bun.<br><br> Hamburgers are often served with lettuce, bacon, tomato, onion, pickles, cheese and condiments such as mustard, mayonnaise, ketchup, relish, and green chile.
                </b>
              </p>
            </div>
            <div class="pizza">
                <svg viewBox="0 0 63 61" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <g id="drink-and-food" transform="translate(-898.000000, -615.000000)" fill="#ffffff">
                            <g id="pizza" transform="translate(898.000000, 615.000000)">
                                <path d="M52.2,56 C52,56 51.7,55.9 51.5,55.8 L0.8,28.6 C0.3,28.3 0,27.8 0,27.2 C0,26.6 0.3,26.1 0.9,25.9 L54.1,1 C54.8,0.7 55.6,0.9 56,1.5 C56.2,1.8 73.2,27.6 53.5,55.3 C53.1,55.8 52.6,56 52.2,56 L52.2,56 Z M4.8,27.4 L51.7,52.6 C67.1,29.8 57,9.3 54.1,4.4 L4.8,27.4 L4.8,27.4 Z" id="Shape"></path>
                                <path d="M50.9,60.8 C50.7,60.8 50.4,60.7 50.2,60.6 L14.7,42.1 C14,41.7 13.7,40.8 14.1,40.1 C14.5,39.4 15.4,39.1 16.1,39.5 L51.6,58 C52.3,58.4 52.6,59.3 52.2,60 C52,60.5 51.4,60.8 50.9,60.8 L50.9,60.8 Z" id="Shape"></path>
                                <path d="M49.3,19.1 C48.8,19.1 48.3,18.8 48,18.3 C47.6,17.6 47.9,16.7 48.6,16.3 C48.8,16.2 52.3,14.2 51.2,11.3 C50.9,10.5 51.3,9.7 52,9.3 C52.7,8.9 53.6,9.4 54,10.1 C55.7,14.3 52.2,17.6 50.1,18.8 C49.8,19.1 49.6,19.1 49.3,19.1 L49.3,19.1 Z" id="Shape"></path>
                                <path d="M53.5,37.7 L53.2,37.7 L47.3,36.4 C46.5,36.2 46,35.4 46.1,34.6 C46.3,33.8 47.1,33.3 47.9,33.4 L53.8,34.7 C54.6,34.9 55.1,35.7 55,36.5 C54.9,37.2 54.2,37.7 53.5,37.7 L53.5,37.7 Z" id="Shape"></path>
                                <path d="M40.6,43.1 C40.1,42 40.7,40.7 41.9,40.2 C43,39.8 44.3,40.3 44.8,41.4 C45.3,42.5 44.7,43.8 43.5,44.3 C42.3,44.8 41,44.3 40.6,43.1 L40.6,43.1 Z" id="Shape"></path>
                                <path d="M52.2,24.3 C51.7,23.2 52.3,21.9 53.5,21.4 C54.6,21 55.9,21.5 56.4,22.6 C56.9,23.7 56.3,25 55.1,25.5 C54,26 52.7,25.4 52.2,24.3 L52.2,24.3 Z" id="Shape"></path>
                                <path d="M32.4,22.3 C31.9,22.3 31.4,22 31.1,21.5 C30.7,20.8 31,19.9 31.7,19.5 L31.7,19.5 C31.9,19.4 35.4,17.4 34.3,14.5 C34,13.7 34.4,12.9 35.1,12.5 C35.9,12.2 36.7,12.6 37.1,13.3 C38.8,17.5 35.3,20.8 33.2,22 C32.9,22.2 32.7,22.3 32.4,22.3 L32.4,22.3 Z" id="Shape"></path>
                                <path d="M36.7,40.8 L36.4,40.8 L30.5,39.5 C29.7,39.3 29.2,38.5 29.3,37.7 C29.5,36.9 30.3,36.4 31.1,36.5 L37,37.8 C37.8,38 38.3,38.8 38.2,39.6 C38,40.3 37.3,40.8 36.7,40.8 L36.7,40.8 Z" id="Shape"></path>
                                <path d="M35.3,27.5 C34.8,26.4 35.4,25.1 36.6,24.6 C37.7,24.2 39,24.7 39.5,25.8 C40,26.9 39.4,28.2 38.2,28.7 C37,29.2 35.8,28.6 35.3,27.5 L35.3,27.5 Z" id="Shape"></path>
                                <path d="M1.5,48.5 C0.7,48.5 0,47.8 0,47 L0,27 C0,26.2 0.7,25.5 1.5,25.5 C2.3,25.5 3,26.2 3,27 L3,47 C3,47.8 2.3,48.5 1.5,48.5 L1.5,48.5 Z" id="Shape"></path>
                                <path d="M8.5,52.5 C7.7,52.5 7,51.8 7,51 L7,31 C7,30.2 7.7,29.5 8.5,29.5 C9.3,29.5 10,30.2 10,31 L10,51 C10,51.8 9.3,52.5 8.5,52.5 L8.5,52.5 Z" id="Shape"></path>
                                <path d="M19.5,27.5 C19,26.4 19.6,25.1 20.8,24.6 C21.9,24.2 23.2,24.7 23.7,25.8 C24.2,26.9 23.6,28.2 22.4,28.7 C21.3,29.2 20,28.6 19.5,27.5 L19.5,27.5 Z" id="Shape"></path>
                            </g>
                        </g>
                    </g>
                </svg>
              <span>PIZZA</span>
              <p>
                <a tabindex="-1"></a>
                <img src="http://bullguard.com/marketingfiles/ext/umbracoLanding/demo/images/listopen/pizzaPic.png">
                <b>
                    <i>The Fantastic Pizza</i>
                    Pizza is an oven-baked flat bread generally topped with tomato sauce and cheese. It is commonly supplemented with a selection of meats, vegetables and condiments.<br><br>The term was first recorded in the 10th century, in a Latin manuscript from Gaeta in Central Italy.<br> The modern pizza was invented in Naples, Italy, and the dish and its variants have since become popular in many areas of the world.
                </b>
              </p>
            </div>
            <div class="soup">
                <svg viewBox="0 0 63 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <g id="drink-and-food" transform="translate(-899.000000, -874.000000)" fill="#ffffff">
                            <g id="soup" transform="translate(898.000000, 874.000000)">
                                <path d="M31.2,24.9 C16.5,24.9 1,20.7 1,12.9 C1,5.1 16.6,0.9 31.2,0.9 C45.9,0.9 61.4,5.1 61.4,12.9 C61.4,20.7 45.8,24.9 31.2,24.9 L31.2,24.9 Z M31.2,3.9 C15.1,3.9 4,8.6 4,12.9 C4,17.2 15.2,21.9 31.2,21.9 C47.3,21.9 58.4,17.2 58.4,12.9 C58.4,8.6 47.2,3.9 31.2,3.9 L31.2,3.9 Z" id="Shape"></path>
                                <path d="M40.4,7.3 C38.1,6.8 35.5,6.5 32.7,6.5 C27.7,6.5 21.9,7.5 19.8,9.6 L19.7,9.5 L19.7,9.7 C19.5,9.9 19.4,10.1 19.3,10.3 C18.9,11.1 19,11.9 19.4,12.6 C19.4,13.3 19.6,13.9 20.1,14.5 L20.2,14.7 L20.4,14.8 C22,15.9 25.3,16.7 28.8,16.9 L27.1,16.9 C24.8,16.9 22.7,16.8 20.7,16.5 C20.1,16.4 19.5,16.8 19.4,17.4 L19.4,17.4 C19.3,18 19.7,18.7 20.3,18.8 C22.3,19.2 24.5,19.3 27.2,19.3 C28.5,19.3 29.8,19.3 31.1,19.2 C32.4,19.2 33.7,19.1 35.1,19.1 C42.6,18.4 47,16.3 47.3,13.2 C47.5,10.8 45,8.5 40.4,7.3 L40.4,7.3 Z M29.6,8.9 L29.6,9.2 C29.6,9.5 29.5,9.8 29.6,10.1 C28.7,10.4 28,10.7 27.4,11 L27.2,11.1 C26.4,12 26.5,12.7 26.6,13.1 C26.7,13.3 26.8,13.6 27,13.8 C25.7,13.5 24.5,13.1 23.2,12.6 C22.6,12.3 22.2,12 21.9,11.8 C22.6,10.8 25.1,9.3 29.6,8.9 L29.6,8.9 Z M36,12.7 C36,12.9 35.9,13.1 35.6,13.4 C35.6,13.4 35.6,13.4 35.5,13.4 C34.7,13.1 33.5,12.6 32.7,11.9 C33.4,11.8 34,11.7 34.6,11.5 C35.6,11.9 36,12.4 36,12.7 L36,12.7 Z M35.7,16.1 C35.7,16.1 36.6,15.8 36.7,15.6 L38.2,14.1 C38.4,13.7 38.5,13.2 38.5,12.9 C38.5,12.3 38.3,11.5 37.5,10.7 C37.5,10.7 36.1,9.6 36,9.5 C40.7,10.4 43.7,12 44.2,13 C43.2,14.3 39.8,15.6 35,16.3 C35.2,16.2 35.7,16.1 35.7,16.1 L35.7,16.1 Z" id="Shape"></path>
                                <path d="M37,41 L25.3,41 C23.2,41 21.2,40.2 19.7,38.9 C19.1,38.4 3.5,25.4 1,13.2 C0.8,12.4 1.4,11.6 2.2,11.4 C3,11.2 3.8,11.8 4,12.6 C6.3,23.7 21.6,36.5 21.7,36.6 C22.7,37.5 24,38 25.4,38 L37,38 C38.4,38 39.6,37.5 40.6,36.6 C40.8,36.4 56.1,23.7 58.4,12.5 C58.6,11.7 59.4,11.2 60.2,11.3 C61,11.5 61.5,12.3 61.4,13.1 C58.9,25.3 43.3,38.3 42.6,38.8 C41.1,40.2 39.1,41 37,41 L37,41 Z" id="Shape"></path>
                                <path d="M15.6,51.6 C14.9,51.6 14.2,51.1 14.1,50.3 C14,49.5 14.5,48.7 15.3,48.6 L53.4,42.6 C54.2,42.5 55,43 55.1,43.8 C55.2,44.6 54.7,45.4 53.9,45.5 L15.8,51.5 C15.8,51.6 15.7,51.6 15.6,51.6 L15.6,51.6 Z" id="Shape"></path>
                                <path d="M24.3,55.5 C23.6,55.5 22.9,55 22.8,54.2 C22.7,53.4 23.2,52.6 24,52.5 L62.1,46.5 C62.9,46.4 63.7,46.9 63.8,47.7 C63.9,48.5 63.4,49.3 62.6,49.4 L24.5,55.4 C24.5,55.5 24.4,55.5 24.3,55.5 L24.3,55.5 Z" id="Shape"></path>
                            </g>
                        </g>
                    </g>
                </svg>
              <span>SOUP</span>
              <p>
                <a tabindex="-1"></a>
                <img src="http://bullguard.com/marketingfiles/ext/umbracoLanding/demo/images/listopen/soupPic.png">
                <b>
                    <i>The Hangover Curing Soup</i>
                    Soup is a primarily liquid food, generally served warm (but may be cool or cold), that is made by combining ingredients such as meat and vegetables with stock, juice, water, or another liquid.<br><br>Hot soups are additionally characterized by boiling solid ingredients in liquids in a pot until the flavors are extracted, forming a broth.
                </b>
              </p>
            </div>
            <div class="hotDog">
                <svg viewBox="0 0 64 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <g id="drink-and-food" transform="translate(-384.000000, -630.000000)" fill="#ffffff">
                            <g id="hotdog" transform="translate(384.000000, 630.000000)">
                                <path d="M9.3,11.1 C6.9,11.1 7,9.4 7,9.1 L7,8.3 C7,4.2 10.9,0.1 15.3,0.1 L50.5,0.1 C54.6,0.1 58.1,3.5 58.1,8.3 L58.1,8.3 C58.1,9.7 57.4,11.1 55,11.1 L10.5,11.1 L10.2,11.1 C9.8,11 9.6,11.1 9.3,11.1 L9.3,11.1 Z M15.3,3 C12.6,3 9.7,5.6 9.6,8 L9.8,8 L10.4,8 L54.6,8 C54.5,5.6 53.2,3 50.5,3 L15.3,3 L15.3,3 Z" id="Shape"></path>
                                <path d="M50.6,27 L16.5,27 C11.9,27 8.9,24.2 8.7,20 C8.7,19.9 8.9,19.9 8.9,19.8 L8.9,19.6 C8.9,19.5 8.7,19.3 8.7,19.2 C8.9,17.5 9.8,16 11.5,16 L55.5,16 C56.3,16 56.8,16.4 57.1,16.7 C57.7,17.4 57.6,18.4 57.5,19 C57.5,19.2 57.4,19.4 57.4,19.6 C57.6,24.3 55,27 50.6,27 L50.6,27 Z M11.8,19 C11.7,19.2 11.6,19.5 11.6,19.8 C11.7,22.4 13.5,24 16.6,24 L50.7,24 C53.5,24 54.7,22.7 54.7,19.6 L54.7,19 L11.8,19 L11.8,19 Z" id="Shape"></path>
                                <path d="M58.1,19 L6.1,19 C3.1,19 0.6,16.5 0.6,13.5 C0.6,10.5 3.1,8 6.1,8 L58.1,8 C61.1,8 63.6,10.5 63.6,13.5 C63.6,16.5 61.1,19 58.1,19 L58.1,19 Z M6.1,11 C4.7,11 3.6,12.1 3.6,13.5 C3.6,14.9 4.7,16 6.1,16 L58.1,16 C59.5,16 60.6,14.9 60.6,13.5 C60.6,12.1 59.5,11 58.1,11 L6.1,11 L6.1,11 Z" id="Shape"></path>
                                <path d="M9.7,16.4 C9.6,16.4 9.4,16.3 9.3,16.2 C9.1,16 9.2,15.7 9.4,15.5 C14.6,11.5 21,13.4 21.3,13.5 L21.4,13.5 C21.4,13.5 25.9,16.1 30.8,14.4 C36.1,12.6 41.1,13.8 41.3,13.8 C41.3,13.8 41.4,13.8 41.4,13.9 C41.4,13.9 44.4,15.6 49.6,14.7 C55,13.8 56.6,14.1 56.7,14.1 C57,14.2 57.1,14.4 57.1,14.7 C57,15 56.8,15.1 56.5,15.1 C56.5,15.1 55,14.8 49.8,15.7 C44.6,16.6 41.5,15.1 41,14.8 C40.4,14.7 35.8,13.8 31.1,15.4 C26,17.1 21.5,14.7 21,14.4 C20.4,14.2 14.7,12.7 10.1,16.2 C9.9,16.4 9.8,16.4 9.7,16.4 L9.7,16.4 Z" id="Shape"></path>
                                <circle id="Oval" cx="48.2" cy="6.9" r="1.3"></circle>
                                <circle id="Oval" cx="33.9" cy="6.9" r="1.3"></circle>
                                <circle id="Oval" cx="19.5" cy="6.9" r="1.3"></circle>
                                <circle id="Oval" cx="48.2" cy="22.8" r="1.3"></circle>
                                <circle id="Oval" cx="33.9" cy="22.8" r="1.3"></circle>
                                <circle id="Oval" cx="19.5" cy="22.8" r="1.3"></circle>
                            </g>
                        </g>
                    </g>
                </svg>
              <span>HOT DOG</span>
              <p>
                <a tabindex="-1"></a>
                <img src="http://bullguard.com/marketingfiles/ext/umbracoLanding/demo/images/listopen/hotdogPic.png">
                <b>
                    <i>The Weiner With Ketchup</i>
                    A hot dog (also spelled hotdog) is a cooked sausage, traditionally grilled or steamed and served in a sliced bun as a sandwich.<br><br>Hot dog variants include the corn dog dipped in corn batter and deep fried, pigs in blankets wrapped in dough, baked, and served as hors d'oeuvres, and Beanie Weenies chopped and mixed with baked beans.<br>Typical hot dog garnishes include mustard, ketchup, onions, mayonnaise, relish, cheese, chili, and sauerkraut.
                </b>
              </p>
            </div>
        </div>
    </div>
                        
                    </div>
body {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  cursor: default;
  background: url(http://128.199.49.84/codepen/fullScreen/bg.jpg) center center repeat;
}

.fullScreenExpand .phoneFrame 			{ background:url(http://128.199.49.84/codepen/fullScreen/phoneFrame.png) no-repeat; background-size:100%; width: 382px; height: 701px; position: relative; margin:50px auto; padding-top:97px;}
.fullScreenExpand .screenRap 			{ width: 335px; height: 595px; background:#EEE; overflow: hidden; position: relative; margin-left: 24px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -o-user-select: none;}
.fullScreenExpand .screenRap div 		{ width: 100%; height: 150px; position: relative; color: #fff; transition: all .5s cubic-bezier(0.59, 0, 0, 1.01); -moz-transition: all .5s cubic-bezier(0.59, 0, 0, 1.01); -webkit-transition: all .5s cubic-bezier(0.59, 0, 0, 1.01); transform: scale(.95, .95); cursor:pointer;}
.fullScreenExpand .screenRap div span 				{ width: 156px; font-size: 16px; font-weight: 700; letter-spacing: 5px; display: block; padding:65px 0 56px 115px; position: absolute; top: 0; opacity: 0; transition: all .5s, opacity .1s cubic-bezier(1, -0.02, 0, 1.01); -moz-transition: all .5s, opacity .1s cubic-bezier(1, -0.02, 0, 1.01); -webkit-transition: all .5s, opacity .1s cubic-bezier(1, -0.02, 0, 1.01);}
.fullScreenExpand .screenRap div.active 			{ height: 100%;}
.fullScreenExpand .screenRap div.active span, .fullScreenExpand .screenRap div.active svg 		{ position: absolute; top: 60px; opacity: 0 !important; transform: scale(0, 0);}
	.fullScreenExpand .screenRap div.active svg 	{ top:70px; margin-left:80px;}

.fullScreenExpand .screenRap div a 					{ background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAaCAYAAACHD21cAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkVFNUM2OEIxMEE5QzExRTVBMTNGOEZENzFFQ0FFNzk0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkVFNUM2OEIyMEE5QzExRTVBMTNGOEZENzFFQ0FFNzk0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RUU1QzY4QUYwQTlDMTFFNUExM0Y4RkQ3MUVDQUU3OTQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RUU1QzY4QjAwQTlDMTFFNUExM0Y4RkQ3MUVDQUU3OTQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5UYRYGAAABK0lEQVR42pTUz0oCURSAcfUFfIIiKCGMDIIgCFv0EC6iRbQoSFe1iBYGvYXQy7Ro06LCxMQooohcBC6K0P5ev1vn0mGw6cyFn4wzft65M8OknXOpBKOAAzRSPjQqoO1+xpM1mkJLog+ULdGkit5R+V6eIWq437EdjsVFOZyr09vSx+NmqquZdqK/GRZN4FSCT+wO+/PojnGcqZn2/lqK/jKGYwm+UI27cGFjBCdqpup/t8l/jOJIRfvIWMJDCV7j1hSV4YHNqoe4a37cqadxoW70pmXGsJHHlcRvWLeG3gwurXF0xyxu1MXasIbeHK4l7mHNGnrzuFWnvWoNQ3wn8QuWraG3gHuJ+1ixhmHmED+jZA29RXTUaZeSvB6LeJD4MZ3whbyEGpoDAQYAdfUaMZDNVnEAAAAASUVORK5CYII=') no-repeat; width: 14px; height: 26px; position: absolute; top: 15px; left: -50px; opacity: 0; transition: all .6s; -moz-transition: all .6s; -webkit-transition: all .6s; cursor: pointer; padding: 5px;}
.fullScreenExpand .screenRap div.active a 			{ opacity: 1; left: 18px;}
.fullScreenExpand .screenRap div p img 				{ margin: 55px 0 100px 0; display:inline !important; transition: margin .7s; -webkit-transition: margin .7s; -moz-transition: margin .7s;}
.fullScreenExpand .screenRap div.active p img 		{ margin: 25px 0;}
.fullScreenExpand .screenRap div p 					{ position: absolute; top: 150px; left: 0; height: 100%; width: 100%; text-align: center; opacity: 0; transition: top .4s, opacity .8s, filter .5s; -moz-transition: top .4s, opacity .8s, -moz-filter .5s; -webkit-transition: top .4s, opacity .8s, -webkit-filter .5s; -webkit-filter: blur(10px); font-size: 15px; line-height: 1.8; font-family: 'Roboto', sans-serif;}
.fullScreenExpand .screenRap div.active p 			{ opacity: 1; top: 0; -webkit-filter: blur(0px); -moz-filter: blur(0px); filter: blur(0px);}
.fullScreenExpand .screenRap div p b 				{ font-weight: 400; padding: 0 20px; display: block; text-align: left !important;}
.fullScreenExpand .screenRap div i 					{ display: block; text-align: center; margin-bottom: 20px; font-size: 18px; font-style: normal; font-weight: 300; line-height: 1.3; font-family: 'Roboto', sans-serif; font-weight: 700;}

.fullScreenExpand .burger 							{ background: #f3bb72; top: 510px; position: relative; z-index: 1; animation: containerSlideUp .8s 1s forwards; -moz-animation: containerSlideUp .8s 1s forwards; -webkit-animation: containerSlideUp .8s 1s forwards;}
.fullScreenExpand .burger span 						{  animation: btnsSlide .6s 2s forwards; -moz-animation: btnsSlide .6s 2s forwards; -webkit-animation: btnsSlide .6s 2s forwards;}
.fullScreenExpand .burger svg						{ animation: btnsSlide .6s 2.1s forwards; -moz-animation: btnsSlide .6s 2.1s forwards; -webkit-animation: btnsSlide .6s 2.1s forwards; margin:-32px 0 0 9px; width: 72px !important;}

.fullScreenExpand .pizza 					{ background:#ff85a7; top: 380px; position: relative; z-index: 2; animation: containerSlideUp .8s 1s forwards; -moz-animation: containerSlideUp .8s 1s forwards; -webkit-animation: containerSlideUp .8s 1s forwards;}
.pizza span { animation: btnsSlide .6s 1.9s forwards; -moz-animation: btnsSlide .6s 1.9s forwards; -webkitanimation: btnsSlide .6s 1.9s forwards;}
.fullScreenExpand .pizza.active 			{ margin-top: -150px;}
.fullScreenExpand .pizza svg					{ animation: btnsSlide .6s 2s forwards; -moz-animation: btnsSlide .6s 2s forwards; -webkit-animation: btnsSlide .6s 2s forwards; margin:-32px 0 0 9px; width: 72px !important;}

.fullScreenExpand .soup { background: #61e5e6; top: 250px; position: relative; z-index: 3; animation: containerSlideUp .8s 1s forwards; -moz-animation: containerSlideUp .8s 1s forwards; -webkit-animation: containerSlideUp .8s 1s forwards;}
.fullScreenExpand .soup span 				{ animation: btnsSlide .6s 2.1s forwards; -moz-animation: btnsSlide .6s 2.1s forwards; -webkit-animation: btnsSlide .6s 2.1s forwards;}
.fullScreenExpand .soup.active 				{ margin-top: -300px;}
.fullScreenExpand .soup svg					{ animation: btnsSlide .6s 2.2s forwards; -moz-animation: btnsSlide .6s 2.2s forwards; -webkit-animation: btnsSlide .6s 2.2s forwards; margin:-26px 0 0 9px; width: 72px !important;}

.fullScreenExpand .hotDog 					{ background:#b1db73; top: 120px; position: relative; z-index: 4; animation: containerSlideUp .8s 1s forwards; -moz-animation: containerSlideUp .8s 1s forwards; -webkit-animation: containerSlideUp .8s 1s forwards;}

.fullScreenExpand .screenRap svg				{ position: absolute; top: 50%; opacity: 0; transition: all .5s, opacity .1s cubic-bezier(1, -0.02, 0, 1.01); -moz-transition: all .5s, opacity .1s cubic-bezier(1, -0.02, 0, 1.01); -webkit-transition: all .5s, opacity .1s cubic-bezier(1, -0.02, 0, 1.01); fill:#fff; width:90px;}

.fullScreenExpand .hotDog svg				{ animation: btnsSlide .6s 2.3s forwards; -webkit-animation: btnsSlide .6s 2.3s forwards; -moz-animation: btnsSlide .6s 2.3s forwards; margin-top:-18.5px;}
.fullScreenExpand .hotDog span 				{ animation: btnsSlide .6s 2.2s forwards; -webkit-animation: btnsSlide .6s 2.2s forwards; -moz-animation: btnsSlide .6s 2.2s forwards;}
.fullScreenExpand .hotDog.active 			{ margin-top: -450px;}

@keyframes containerSlideUp {
  0% {
    transform: scale(.95, .95);
  }
  50% {
    top: -7px;
    transform: scale(1, 1);
  }
  100% {
    top: 0;
    transform: scale(1, 1);
  }
}

@-moz-keyframes containerSlideUp {
  0% {
    -moz-transform: scale(.95, .95);
  }
  50% {
    top: -7px;
    -moz-transform: scale(1, 1);
  }
  100% {
    top: 0;
    -moz-transform: scale(1, 1);
  }
}

@-webkit-keyframes containerSlideUp {
  0% {
    -webkit-transform: scale(.95, .95);
  }
  50% {
    top: -7px;
    -webkit-transform: scale(1, 1);
  }
  100% {
    top: 0;
    -webkit-transform: scale(1, 1);
  }
}

@keyframes btnsSlide {
  0% {
    left: -100px;
  }
  100% {
    left: 40px;
    opacity: 1;
  }
}

@-moz-keyframes btnsSlide {
  0% {
    left: -100px;
  }
  100% {
    left: 40px;
    opacity: 1;
  }
}

@k-webkit-eyframes btnsSlide {
  0% {
    left: -100px;
  }
  100% {
    left: 40px;
    opacity: 1;
  }
}

$('.screenRap div span').click(function() {
  $(this).parent().addClass('active');
});
$('.screenRap div a').click(function() {
  $(this).parent().parent().removeClass('active');
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.