<link href="https://fonts.googleapis.com/css?family=Raleway:800" rel="stylesheet">
<div class="container">
  <div class="row">
      <div class="imac col-xs-12 col-lg-12 ">
        <svg xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 410.1 326.8">
          <g class="base-scr">
            <g>
              <path d="M446.3,340.1a9.4,9.4,0,0,1-9.4,9.5H45.6a9.4,9.4,0,0,1-9.4-9.5V76.1a9.4,9.4,0,0,1,9.4-9.5H436.9a9.4,9.4,0,0,1,9.4,9.5Z" transform="translate(-36.2 -66.6)" fill="#e5e5e5"/>
              <path d="M446.3,312.3V76.1a9.4,9.4,0,0,0-9.4-9.5H45.6a9.4,9.4,0,0,0-9.4,9.5V312.3Z" transform="translate(-36.2 -66.6)" fill="#28292a"/>
              <g id="Apple">
                <path d="M244.1,322.9a4.1,4.1,0,0,0,.9-3,4.4,4.4,0,0,0-2.8,1.5,3.8,3.8,0,0,0-.9,3A3.7,3.7,0,0,0,244.1,322.9Z" transform="translate(-36.2 -66.6)" fill="#231f20" fill-rule="evenodd"/>
                <path d="M247.2,331.3a4.2,4.2,0,0,1-.3-2.4,3.9,3.9,0,0,1,1.3-2.4l.7-.5a4.7,4.7,0,0,0-3.6-1.9c-1.7,0-2.4.8-3.6.8s-2.1-.8-3.6-.8a4.9,4.9,0,0,0-3.9,2.4h0a5.6,5.6,0,0,0-.8,2.4,9,9,0,0,0,.1,2.4,11.2,11.2,0,0,0,.7,2.4,12.1,12.1,0,0,0,1.1,2.2v.2c.8,1.1,1.8,2.4,3.1,2.4s1.6-.8,3.2-.8,2,.8,3.2.8,2.3-1.2,3-2.4l.2-.3a12.7,12.7,0,0,0,1.1-2.1v-.2A4.1,4.1,0,0,1,247.2,331.3Z" transform="translate(-36.2 -66.6)" fill="#231f20" fill-rule="evenodd"/>
              </g>
            </g>
          </g>

          <g class="talp">
            <g>
              <path d="M310.4,391.2c-.7-.2-14-2.7-14.8-3.1s-2-.6-2.4-1.4c-3.4-8.3-5.9-37.2-5.9-37.2h-92s-2.5,28.8-5.9,37.2c-.3.8-1.5,1.1-2.4,1.4s-14.1,2.9-14.8,3.1-.6.6-.6.6H311S311.1,391.4,310.4,391.2Z" transform="translate(-36.2 -66.6)" fill="#bababa"/>
              <rect x="135.7" y="325.1" width="139.1" height="0.97" fill="#494949"/>
              <rect x="175.4" y="325.1" width="59.8" height="0.97" fill="#e5e5e5"/>
              <rect x="136.4" y="326.1" width="137.9" height="0.72" fill="#28292a"/>
            </g>
          </g>

          <g id="page">
            <rect x="15.1" y="13.3" width="380" height="217.9" fill="#e5e5e5"/>
            <g>
              <rect x="105.4" y="93.7" width="199.2" height="10.98" rx="5.5" ry="5.5" fill="#fff"/>
              <rect x="105.4" y="76.3" width="199.2" height="10.98" rx="5.5" ry="5.5" fill="#fff"/>
              <rect x="105.4" y="59.1" width="199.2" height="10.98" rx="5.5" ry="5.5" fill="#fff"/>
              <rect x="105.4" y="199.5" width="199.2" height="10.98" rx="5.5" ry="5.5" fill="#fff"/>
              <rect x="61.1" y="112.5" width="179.5" height="78.77" rx="8.3" ry="8.3" fill="#fff"/>
              <rect x="251.2" y="112.5" width="97.6" height="33.46" rx="8.3" ry="8.3" fill="#fff"/>
              <rect x="251.2" y="157.8" width="97.6" height="33.46" rx="8.3" ry="8.3" fill="#fff"/>
            </g>
            <g>
              <rect id="fejlec" x="15.1" y="13.3" width="380" height="26.59" fill="#aaa"/>
              <circle cx="31.3" cy="28.4" r="4.8" fill="#dd686f"/>
              <circle cx="46.1" cy="28.4" r="4.8" fill="#ebc81a"/>
              <circle cx="61.4" cy="28.4" r="4.8" fill="#9ccb4c"/>
              <rect x="96.6" y="19.3" width="270.9" height="16.25" rx="3.3" ry="3.3" fill="#fff"/>
            </g>
          </g>

          <g class="black">
            <rect x="15.1" y="13.3" width="380" height="217.9" fill="#28292a" fill-opacity="0.7"/>
          </g>

          <g class="popup">
              <g id="popup-base">
                <rect x="80.4" y="39.4" width="249.3" height="169.68" rx="14" ry="14" fill="#87c8d2"/>
                <g id="szoveg">
                  <rect x="107.6" y="92.5" width="195.8" height="6.75" rx="2.9" ry="2.9" fill="#bfeaef"/>
                  <rect x="107.6" y="106" width="195.8" height="6.75" rx="2.9" ry="2.9" fill="#bfeaef"/>
                  <rect x="107.6" y="61.6" width="195.8" height="19.97" rx="8.5" ry="8.5" fill="#bfeaef"/>
                </g>
                <g id="input">
                  <rect x="107.6" y="133.8" width="94.3" height="19.97" rx="8.3" ry="8.3" fill="#fff"/>
                  <rect x="209.1" y="133.8" width="94.3" height="19.97" rx="8.3" ry="8.3" fill="#fff"/>
                </g>
              </g>

              <g id="button">
                  <rect id="shadow" x="141.1" y="166.5" width="128.9" height="22.13" rx="9.4" ry="9.4" fill="#639ca8"/>
                  <rect id="btn-base" x="141.1" y="160.6" width="128.9" height="25.51" rx="10.8" ry="10.8" fill="#fff"/>
                <text transform="translate(171.9 177.9)" font-size="12" fill="#639ca8" font-family="Raleway-ExtraBold, Raleway" font-weight="700">SUBSCRIBE</text>
              </g>

              <g>
                <path class="somaemail" d="M257.2,212.6a2,2,0,0,1-.6,1.5,2.3,2.3,0,0,1-1.6.5,3.1,3.1,0,0,1-1.6-.4v-1.4l.8.4h.8l.6-.2a.6.6,0,0,0,.2-.5.8.8,0,0,0-.2-.5l-.7-.5a3,3,0,0,1-1-.9,2,2,0,0,1-.3-1.1,1.6,1.6,0,0,1,.6-1.3,2.3,2.3,0,0,1,1.6-.5,3.1,3.1,0,0,1,1.6.5l-.5,1.1-1.1-.3-.4.2a.5.5,0,0,0-.1.4.7.7,0,0,0,.2.5l.7.5.9.6.4.6A2,2,0,0,1,257.2,212.6Z" transform="translate(-36.2 -66.6)" fill="#28292a"/>
                <path class="somaemail" d="M263,211.2a4,4,0,0,1-.7,2.5,2.4,2.4,0,0,1-3.2.5,2.6,2.6,0,0,1-.9-1.2,4.8,4.8,0,0,1-.3-1.8,4,4,0,0,1,.7-2.5,2.2,2.2,0,0,1,1.9-.9,2.2,2.2,0,0,1,1.8.9A4,4,0,0,1,263,211.2Zm-3.5,0a4.1,4.1,0,0,0,.2,1.5.7.7,0,0,0,.7.5q.9,0,.9-2.1a4,4,0,0,0-.2-1.5.8.8,0,0,0-1.4,0A4,4,0,0,0,259.5,211.2Z" transform="translate(-36.2 -66.6)" fill="#28292a"/>
                <path class="somaemail" d="M270.6,214.5v-3.9q0-1.4-.7-1.4a.8.8,0,0,0-.7.5,4.4,4.4,0,0,0-.2,1.6v3.2h-1.6v-3.9q0-1.4-.7-1.4a.8.8,0,0,0-.7.5,4.5,4.5,0,0,0-.2,1.7v3.1h-1.6v-6.5h1.2l.2.8h.1a1.6,1.6,0,0,1,.6-.7l.9-.2a1.6,1.6,0,0,1,1.6,1.1h.1a1.7,1.7,0,0,1,1.6-1.1,1.5,1.5,0,0,1,1.3.6,3,3,0,0,1,.4,1.8v4.3Z" transform="translate(-36.2 -66.6)" fill="#28292a"/>
                <path class="somaemail" d="M276.6,214.5l-.3-.9h0a2.2,2.2,0,0,1-.7.8l-.9.2a1.4,1.4,0,0,1-1.1-.5,2.4,2.4,0,0,1-.4-1.5,1.9,1.9,0,0,1,.6-1.5,2.7,2.7,0,0,1,1.7-.6h.9V210q0-.9-.8-.9a2.7,2.7,0,0,0-1.3.5l-.5-1.1a3.9,3.9,0,0,1,2.1-.6,2,2,0,0,1,1.6.6,2.4,2.4,0,0,1,.5,1.7v4.4Zm-1.4-1.1a.8.8,0,0,0,.7-.4,1.8,1.8,0,0,0,.3-1v-.6h-.5a1.1,1.1,0,0,0-.8.3,1.2,1.2,0,0,0-.2.8Q274.7,213.4,275.2,213.4Z" transform="translate(-36.2 -66.6)" fill="#28292a"/>
                <path class="somaemail" d="M286.6,210.1a4.3,4.3,0,0,1-.5,2.2,1.5,1.5,0,0,1-1.4.8l-.7-.2a1,1,0,0,1-.4-.6h0l-.5.6-.7.2a1.3,1.3,0,0,1-1.1-.5,2.7,2.7,0,0,1-.4-1.6,3.4,3.4,0,0,1,.6-2.1,1.8,1.8,0,0,1,1.5-.8l1.5.3v3a1.5,1.5,0,0,0,.1.7l.3.2q.3,0,.5-.5a5.2,5.2,0,0,0,.2-1.5,3.8,3.8,0,0,0-.6-2.4,2.2,2.2,0,0,0-1.8-.8,2.5,2.5,0,0,0-1.6.5,3.3,3.3,0,0,0-1,1.5,5.7,5.7,0,0,0-.4,2.1,4,4,0,0,0,.7,2.6,2.4,2.4,0,0,0,2,.9,4.9,4.9,0,0,0,2.1-.5v1.1a4.5,4.5,0,0,1-2.2.5,3.9,3.9,0,0,1-2.1-.5,3.5,3.5,0,0,1-1.4-1.5,5.6,5.6,0,0,1-.5-2.4,6.6,6.6,0,0,1,.5-2.7,4.1,4.1,0,0,1,1.5-1.8,3.9,3.9,0,0,1,2.2-.6,3.3,3.3,0,0,1,2.7,1.1A4.7,4.7,0,0,1,286.6,210.1Zm-4.5.8a2.3,2.3,0,0,0,.1.9.4.4,0,0,0,.4.3q.3,0,.4-.4a4.8,4.8,0,0,0,.2-1.2v-1.3h-.4q-.4,0-.6.5A3.3,3.3,0,0,0,282.1,210.9Z" transform="translate(-36.2 -66.6)" fill="#28292a"/>
                <path class="somaemail" d="M294.2,214.5v-3.9q0-1.4-.7-1.4a.8.8,0,0,0-.7.5,4.4,4.4,0,0,0-.2,1.6v3.2h-1.6v-3.9q0-1.4-.7-1.4a.8.8,0,0,0-.7.5,4.5,4.5,0,0,0-.2,1.7v3.1h-1.6v-6.5h1.2l.2.8h.1a1.6,1.6,0,0,1,.6-.7l.9-.2a1.6,1.6,0,0,1,1.6,1.1h.1a1.7,1.7,0,0,1,1.6-1.1,1.5,1.5,0,0,1,1.3.6,3,3,0,0,1,.4,1.8v4.3Z" transform="translate(-36.2 -66.6)" fill="#28292a"/>
                <path class="somaemail" d="M300.2,214.5l-.3-.9h0a2.2,2.2,0,0,1-.7.8l-.9.2a1.4,1.4,0,0,1-1.1-.5,2.4,2.4,0,0,1-.4-1.5,1.9,1.9,0,0,1,.6-1.5,2.7,2.7,0,0,1,1.7-.6h.9V210q0-.9-.8-.9a2.7,2.7,0,0,0-1.3.5l-.5-1.1a3.9,3.9,0,0,1,2.1-.6,2,2,0,0,1,1.6.6,2.4,2.4,0,0,1,.5,1.7v4.4Zm-1.4-1.1a.8.8,0,0,0,.7-.4,1.8,1.8,0,0,0,.3-1v-.6h-.5a1.1,1.1,0,0,0-.8.3,1.2,1.2,0,0,0-.2.8Q298.3,213.4,298.8,213.4Z" transform="translate(-36.2 -66.6)" fill="#28292a"/>
                <path class="somaemail" d="M302.6,206.2a.8.8,0,0,1,.2-.6l.6-.2.6.2a.8.8,0,0,1,.2.6.8.8,0,0,1-.2.6l-.6.2-.6-.2A.8.8,0,0,1,302.6,206.2Zm1.6,8.2h-1.6v-6.5h1.6Z" transform="translate(-36.2 -66.6)" fill="#28292a"/>
                <path class="somaemail" d="M307.1,214.5h-1.6v-9.1h1.6Z" transform="translate(-36.2 -66.6)" fill="#28292a"/>
                <path class="somaemail" d="M308.4,213.7a1,1,0,0,1,.2-.7,1,1,0,0,1,.7-.3.9.9,0,0,1,1,1,1,1,0,0,1-.3.7,1,1,0,0,1-.7.3,1,1,0,0,1-.7-.3A1,1,0,0,1,308.4,213.7Z" transform="translate(-36.2 -66.6)" fill="#28292a"/>
                <path class="somaemail" d="M313.8,214.6a2,2,0,0,1-1.8-.8,4.3,4.3,0,0,1-.6-2.5,4.6,4.6,0,0,1,.6-2.6,2,2,0,0,1,1.8-.8h.8l.7.3-.4,1.2-.9-.3a.7.7,0,0,0-.7.5,4.2,4.2,0,0,0-.2,1.6,4,4,0,0,0,.2,1.5.7.7,0,0,0,.7.5,2.3,2.3,0,0,0,1.2-.4v1.4A2.5,2.5,0,0,1,313.8,214.6Z" transform="translate(-36.2 -66.6)" fill="#28292a"/>
                <path class="somaemail" d="M320.9,211.2a4,4,0,0,1-.7,2.5,2.4,2.4,0,0,1-3.2.5,2.6,2.6,0,0,1-.9-1.2,4.8,4.8,0,0,1-.3-1.8,4,4,0,0,1,.7-2.5,2.2,2.2,0,0,1,1.9-.9,2.2,2.2,0,0,1,1.8.9A4,4,0,0,1,320.9,211.2Zm-3.5,0a4.1,4.1,0,0,0,.2,1.5.7.7,0,0,0,.7.5q.9,0,.9-2.1a4,4,0,0,0-.2-1.5.8.8,0,0,0-1.4,0A4,4,0,0,0,317.4,211.2Z" transform="translate(-36.2 -66.6)" fill="#28292a"/>
                <path class="somaemail" d="M328.5,214.5v-3.9q0-1.4-.7-1.4a.8.8,0,0,0-.7.5,4.4,4.4,0,0,0-.2,1.6v3.2h-1.6v-3.9q0-1.4-.7-1.4a.8.8,0,0,0-.7.5,4.5,4.5,0,0,0-.2,1.7v3.1H322v-6.5h1.2l.2.8h.1a1.6,1.6,0,0,1,.6-.7l.9-.2a1.6,1.6,0,0,1,1.6,1.1h.1a1.7,1.7,0,0,1,1.6-1.1,1.5,1.5,0,0,1,1.3.6,3,3,0,0,1,.4,1.8v4.3Z" transform="translate(-36.2 -66.6)" fill="#28292a"/>
              </g>

              <g>
                <path class="soma" d="M158,212.1a2.6,2.6,0,0,1-.6,1.8,2.3,2.3,0,0,1-1.7.6,3.8,3.8,0,0,1-1.9-.4v-1.6a3.3,3.3,0,0,0,1.8.6.9.9,0,0,0,.7-.3,1,1,0,0,0,.2-.7,1.2,1.2,0,0,0-.3-.8l-.9-.8-.8-.7a2.6,2.6,0,0,1-.4-.8,3,3,0,0,1-.2-1,2.4,2.4,0,0,1,.6-1.7,2.2,2.2,0,0,1,1.6-.6,3.6,3.6,0,0,1,1.9.6l-.5,1.3-.6-.3h-.7a.7.7,0,0,0-.6.3,1.1,1.1,0,0,0-.2.7,1.2,1.2,0,0,0,.2.8l.9.7a3.6,3.6,0,0,1,1.2,1.1A2.7,2.7,0,0,1,158,212.1Z" transform="translate(-36.2 -66.6)" fill="#28292a"/>
                <path class="soma" d="M163.8,211.2a4,4,0,0,1-.7,2.5,2.4,2.4,0,0,1-3.2.5,2.6,2.6,0,0,1-.9-1.2,4.8,4.8,0,0,1-.3-1.8,4,4,0,0,1,.7-2.5,2.2,2.2,0,0,1,1.9-.9,2.2,2.2,0,0,1,1.8.9A4,4,0,0,1,163.8,211.2Zm-3.5,0a4.1,4.1,0,0,0,.2,1.5.7.7,0,0,0,.7.5q.9,0,.9-2.1a4,4,0,0,0-.2-1.5.8.8,0,0,0-1.4,0A4,4,0,0,0,160.3,211.2Z" transform="translate(-36.2 -66.6)" fill="#28292a"/>
                <path class="soma" d="M171.4,214.5v-3.9q0-1.4-.7-1.4a.8.8,0,0,0-.7.5,4.4,4.4,0,0,0-.2,1.6v3.2h-1.6v-3.9q0-1.4-.7-1.4a.8.8,0,0,0-.7.5,4.5,4.5,0,0,0-.2,1.7v3.1h-1.6v-6.5h1.2l.2.8h.1a1.6,1.6,0,0,1,.6-.7l.9-.2a1.6,1.6,0,0,1,1.6,1.1h.1a1.7,1.7,0,0,1,1.6-1.1,1.5,1.5,0,0,1,1.3.6,3,3,0,0,1,.4,1.8v4.3Z" transform="translate(-36.2 -66.6)" fill="#28292a"/>
                <path class="soma" d="M177.4,214.5l-.3-.9h0a2.2,2.2,0,0,1-.7.8l-.9.2a1.4,1.4,0,0,1-1.1-.5,2.4,2.4,0,0,1-.4-1.5,1.9,1.9,0,0,1,.6-1.5,2.7,2.7,0,0,1,1.7-.6h.9V210q0-.9-.8-.9a2.7,2.7,0,0,0-1.3.5l-.5-1.1a3.9,3.9,0,0,1,2.1-.6,2,2,0,0,1,1.6.6,2.4,2.4,0,0,1,.5,1.7v4.4Zm-1.4-1.1a.8.8,0,0,0,.7-.4,1.8,1.8,0,0,0,.3-1v-.6h-.5a1.1,1.1,0,0,0-.8.3,1.2,1.2,0,0,0-.2.8Q175.5,213.4,176,213.4Z" transform="translate(-36.2 -66.6)" fill="#28292a"/>
              </g>
          </g> <!--   End of popup id Zone   -->

          <g class="thx">
            <rect id="popup-alap-2" data-name="popup-alap" x="80.4" y="39.4" width="249.3" height="169.68" rx="14" ry="14" fill="#87c8d2"/>
            <g id="button2">
              <rect id="shadow" x="141.1" y="166.5" width="128.9" height="22.13" rx="9.4" ry="9.4" fill="#639ca8"/>
              <rect id="btn-base2" x="141.1" y="160.6" width="128.9" height="25.51" rx="10.8" ry="10.8" fill="#fff"/>
              <g id="checkout">
                <text transform="translate(171.9 177.9)" font-size="12" fill="#639ca8" font-family="Raleway-ExtraBold, Raleway" font-weight="700">CHECKOUT</text>
              </g>
            </g>
            <g>
              <path d="M202.5,146.3h-3.1v-8.9h-2.8v-2.5h8.7v2.5h-2.8Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M212.3,146.3v-4.8q0-1.8-1.1-1.8a1.2,1.2,0,0,0-1.1.6,4.5,4.5,0,0,0-.4,2.1v3.9h-3.1V134.1h3.1v1.7q0,1.2-.1,2.7h.1a2.5,2.5,0,0,1,1-1,3.3,3.3,0,0,1,1.4-.3,3.1,3.1,0,0,1,2.3.9,3.3,3.3,0,0,1,.8,2.4v5.8Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M223.3,146.3l-.6-1.2h-.1a3.5,3.5,0,0,1-1.3,1,4.2,4.2,0,0,1-1.7.3,2.6,2.6,0,0,1-2-.7,2.9,2.9,0,0,1-.7-2.1,2.4,2.4,0,0,1,1-2.1,5.4,5.4,0,0,1,2.9-.8h1.5a1,1,0,0,0-1.1-1.1,6.4,6.4,0,0,0-2.5.7l-.9-2a8.5,8.5,0,0,1,3.9-.8,3.8,3.8,0,0,1,2.6.8,3,3,0,0,1,.9,2.4v5.8Zm-2.3-2a1.4,1.4,0,0,0,.9-.4,1.2,1.2,0,0,0,.4-.9v-.7h-.7q-1.5.1-1.5,1.1T221,144.3Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M233,146.3v-4.8a2.8,2.8,0,0,0-.3-1.3.9.9,0,0,0-.8-.4,1.2,1.2,0,0,0-1.1.6,4.7,4.7,0,0,0-.3,2.1v3.9h-3.1v-8.9h2.3l.4,1.1h.2a2.4,2.4,0,0,1,1.1-.9,3.8,3.8,0,0,1,1.6-.3,3,3,0,0,1,2.3.9,3.3,3.3,0,0,1,.8,2.4v5.8Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M241.1,141.3l.9-1.4,2-2.5h3.4l-3.1,3.8,3.3,5.1h-3.5l-1.9-3.2-1,.8v2.4h-3.1V134.1h3.1v4.8a16.6,16.6,0,0,1-.2,2.4Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M251.8,137.4H255l1.5,5.1a5,5,0,0,1,.1,1h.1a5.4,5.4,0,0,1,.2-.9l1.5-5.1h3.1l-3.5,9.4a5.5,5.5,0,0,1-1.7,2.5,4.1,4.1,0,0,1-2.6.7h-1.2v-2.4h.9l.7-.2.5-.4a3.9,3.9,0,0,0,.5-.9Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M271.1,141.8a4.7,4.7,0,0,1-1.2,3.4,4.3,4.3,0,0,1-3.3,1.2,4.2,4.2,0,0,1-3.2-1.2,5.4,5.4,0,0,1,0-6.7,4.4,4.4,0,0,1,3.3-1.2,4.7,4.7,0,0,1,2.3.6,3.8,3.8,0,0,1,1.5,1.6A5.1,5.1,0,0,1,271.1,141.8Zm-5.7,0a3.9,3.9,0,0,0,.3,1.7,1.1,1.1,0,0,0,1,.6,1,1,0,0,0,1-.6,4.1,4.1,0,0,0,.3-1.7,3.9,3.9,0,0,0-.3-1.7,1.2,1.2,0,0,0-2,0A3.8,3.8,0,0,0,265.4,141.8Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M279.1,146.3l-.4-1.1h-.2a2.5,2.5,0,0,1-1.1.9,3.7,3.7,0,0,1-1.6.3,3,3,0,0,1-2.3-.8,3.3,3.3,0,0,1-.8-2.4v-5.8h3.1v4.8a2.8,2.8,0,0,0,.2,1.3.9.9,0,0,0,.8.4,1.2,1.2,0,0,0,1.1-.6,4.7,4.7,0,0,0,.3-2.1v-3.9h3.1v8.9Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M286.1,142.3h-2.6l-.4-7.4h3.4Zm-2.9,2.7a1.4,1.4,0,0,1,.4-1.1,1.7,1.7,0,0,1,1.2-.4,1.7,1.7,0,0,1,1.2.4,1.5,1.5,0,0,1,.4,1.1,1.4,1.4,0,0,1-.4,1.1,1.7,1.7,0,0,1-1.2.4,1.7,1.7,0,0,1-1.2-.4A1.4,1.4,0,0,1,283.2,145Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M173.2,173.3h-3.1v-4.7h-3.6v4.7h-3.1V161.9h3.1v4.2h3.6v-4.2h3.1Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M179.7,173.4a4.7,4.7,0,0,1-3.4-1.2,4.4,4.4,0,0,1-1.2-3.3,4.8,4.8,0,0,1,1.1-3.4,4.2,4.2,0,0,1,3.2-1.2,4.3,4.3,0,0,1,3.1,1,4,4,0,0,1,1.1,3v1.4h-5.5a1.5,1.5,0,0,0,.5,1.2,2.1,2.1,0,0,0,1.4.4l1.5-.2,1.5-.5v2.2l-1.5.5Zm-.2-7.1a1.3,1.3,0,0,0-.9.3,1.6,1.6,0,0,0-.4,1.1h2.6a1.5,1.5,0,0,0-.4-1A1.2,1.2,0,0,0,179.6,166.4Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M190.7,164.3h.9l-.3,2.9h-1a2,2,0,0,0-1.5.5,1.8,1.8,0,0,0-.5,1.3v4.4h-3.1v-8.9h2.3l.5,1.4h.1a3.1,3.1,0,0,1,1.1-1.1A2.6,2.6,0,0,1,190.7,164.3Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M197.1,173.4a4.7,4.7,0,0,1-3.4-1.2,4.4,4.4,0,0,1-1.2-3.3,4.8,4.8,0,0,1,1.1-3.4,4.2,4.2,0,0,1,3.2-1.2,4.3,4.3,0,0,1,3.1,1,4,4,0,0,1,1.1,3v1.4h-5.5a1.5,1.5,0,0,0,.5,1.2,2.1,2.1,0,0,0,1.4.4l1.5-.2,1.5-.5v2.2l-1.5.5Zm-.2-7.1a1.3,1.3,0,0,0-.9.3,1.6,1.6,0,0,0-.4,1.1h2.6a1.5,1.5,0,0,0-.4-1A1.2,1.2,0,0,0,197,166.4Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M206.9,162.2a1.3,1.3,0,0,1,.4-1,2.4,2.4,0,0,1,2.5,0,1.3,1.3,0,0,1,.4,1q0,1.3-1.6,1.3T206.9,162.2Zm3.1,11.1h-3.1v-8.9H210Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M219,170.6a2.5,2.5,0,0,1-1,2.1,4.6,4.6,0,0,1-2.8.7h-1.7L212,173v-2.4l1.6.5,1.5.2q1,0,1-.5a.5.5,0,0,0-.3-.4l-1.6-.7a4,4,0,0,1-1.7-1.1,2.6,2.6,0,0,1-.5-1.6,2.2,2.2,0,0,1,1-1.9,4.6,4.6,0,0,1,2.7-.7l1.6.2,1.6.6-.8,2-1.3-.5-1.1-.2q-.7,0-.7.4a.5.5,0,0,0,.3.4l1.5.7,1.4.8a2.3,2.3,0,0,1,.7.9A3,3,0,0,1,219,170.6Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M229.1,171l1.5-.3V173l-1.2.4h-1.3a2.9,2.9,0,0,1-2.2-.8,3.4,3.4,0,0,1-.7-2.3v-3.6h-1.1v-1.2l1.4-1,.8-1.9h2v1.8h2.2v2.3h-2.2v3.4Q228.3,171,229.1,171Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M237.7,173.3v-4.8q0-1.8-1.1-1.8a1.2,1.2,0,0,0-1.1.6,4.5,4.5,0,0,0-.4,2.1v3.9h-3.1V161.1h3.1v1.7q0,1.2-.1,2.7h.1a2.5,2.5,0,0,1,1-1,3.3,3.3,0,0,1,1.4-.3,3.1,3.1,0,0,1,2.3.9,3.3,3.3,0,0,1,.8,2.4v5.8Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M247.2,173.4a4.7,4.7,0,0,1-3.4-1.2,4.4,4.4,0,0,1-1.2-3.3,4.8,4.8,0,0,1,1.1-3.4,4.2,4.2,0,0,1,3.2-1.2,4.3,4.3,0,0,1,3.1,1,4,4,0,0,1,1.1,3v1.4h-5.5a1.5,1.5,0,0,0,.5,1.2,2.1,2.1,0,0,0,1.4.4l1.5-.2,1.5-.5v2.2l-1.5.5Zm-.2-7.1a1.3,1.3,0,0,0-.9.3,1.6,1.6,0,0,0-.4,1.1h2.6a1.5,1.5,0,0,0-.4-1A1.2,1.2,0,0,0,247,166.4Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M261,173.4a4.3,4.3,0,0,1-3.3-1.2,4.7,4.7,0,0,1-1.1-3.4,4.6,4.6,0,0,1,1.2-3.4,4.7,4.7,0,0,1,3.4-1.2,6.5,6.5,0,0,1,2.9.7l-.9,2.3-1-.4h-1a1.3,1.3,0,0,0-1.1.6,2.8,2.8,0,0,0-.4,1.6q0,2.1,1.6,2.1a4.8,4.8,0,0,0,2.6-.8v2.4A5,5,0,0,1,261,173.4Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M274,168.8a4.7,4.7,0,0,1-1.2,3.4,4.3,4.3,0,0,1-3.3,1.2,4.2,4.2,0,0,1-3.2-1.2,5.4,5.4,0,0,1,0-6.7,4.4,4.4,0,0,1,3.3-1.2,4.7,4.7,0,0,1,2.3.6,3.8,3.8,0,0,1,1.5,1.6A5.1,5.1,0,0,1,274,168.8Zm-5.7,0a3.9,3.9,0,0,0,.3,1.7,1.1,1.1,0,0,0,1,.6,1,1,0,0,0,1-.6,4.1,4.1,0,0,0,.3-1.7,3.9,3.9,0,0,0-.3-1.7,1.2,1.2,0,0,0-2,0A3.8,3.8,0,0,0,268.3,168.8Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M282.1,173.3l-.4-1.1h-.2a2.5,2.5,0,0,1-1.1.9,3.7,3.7,0,0,1-1.6.3,3,3,0,0,1-2.3-.8,3.3,3.3,0,0,1-.8-2.4v-5.8h3.1v4.8a2.8,2.8,0,0,0,.2,1.3.9.9,0,0,0,.8.4,1.2,1.2,0,0,0,1.1-.6,4.7,4.7,0,0,0,.3-2.1v-3.9h3.1v8.9Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M291.8,173.4l-1.2-.2a3.1,3.1,0,0,1-1.1-.8h-.1a11.2,11.2,0,0,1,.1,1.2v3.6h-3.1V164.4H289l.4,1.1h.1a2.7,2.7,0,0,1,2.4-1.3,2.6,2.6,0,0,1,2.3,1.2,5.8,5.8,0,0,1,.8,3.3,5.7,5.7,0,0,1-.9,3.4A2.7,2.7,0,0,1,291.8,173.4Zm-1-6.8a1,1,0,0,0-.9.5,3.1,3.1,0,0,0-.3,1.4v.2a3.3,3.3,0,0,0,.3,1.6,1,1,0,0,0,1,.5.9.9,0,0,0,.9-.5,3.8,3.8,0,0,0,.3-1.7,3.7,3.7,0,0,0-.3-1.6A.9.9,0,0,0,290.8,166.7Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M305.2,168.8a4.7,4.7,0,0,1-1.2,3.4,4.3,4.3,0,0,1-3.3,1.2,4.2,4.2,0,0,1-3.2-1.2,5.4,5.4,0,0,1,0-6.7,4.4,4.4,0,0,1,3.3-1.2,4.7,4.7,0,0,1,2.3.6,3.8,3.8,0,0,1,1.5,1.6A5.1,5.1,0,0,1,305.2,168.8Zm-5.7,0a3.9,3.9,0,0,0,.3,1.7,1.1,1.1,0,0,0,1,.6,1,1,0,0,0,1-.6,4.1,4.1,0,0,0,.3-1.7,3.9,3.9,0,0,0-.3-1.7,1.2,1.2,0,0,0-2,0A3.8,3.8,0,0,0,299.5,168.8Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M312.5,173.3v-4.8a2.8,2.8,0,0,0-.3-1.3.9.9,0,0,0-.8-.4,1.2,1.2,0,0,0-1.1.6,4.7,4.7,0,0,0-.3,2.1v3.9H307v-8.9h2.3l.4,1.1h.2a2.4,2.4,0,0,1,1.1-.9,3.8,3.8,0,0,1,1.6-.3,3,3,0,0,1,2.3.9,3.3,3.3,0,0,1,.8,2.4v5.8Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M317.3,165.8a1.4,1.4,0,0,1,.4-1.1,1.8,1.8,0,0,1,1.2-.4,1.7,1.7,0,0,1,1.2.4,1.7,1.7,0,0,1,0,2.2,1.7,1.7,0,0,1-1.2.4,1.8,1.8,0,0,1-1.2-.4A1.4,1.4,0,0,1,317.3,165.8Zm0,6.2a1.4,1.4,0,0,1,.4-1.1,1.8,1.8,0,0,1,1.2-.4,1.7,1.7,0,0,1,1.2.4,1.5,1.5,0,0,1,.4,1.1,1.4,1.4,0,0,1-.4,1.1,1.7,1.7,0,0,1-1.2.4,1.8,1.8,0,0,1-1.2-.4A1.4,1.4,0,0,1,317.3,172Z" transform="translate(-36.2 -66.6)" fill="#fff"/> <!--   Thank you! Here is the coupon:   --> <!--   Thank you! Here is the coupon   -->
            </g>
            <g>
              <path d="M201.2,194.6a2.3,2.3,0,0,0-2,1.1,5.2,5.2,0,0,0-.7,3q0,3.9,3,3.9l1.7-.3,1.7-.6v3.1a9.4,9.4,0,0,1-3.8.8,6.1,6.1,0,0,1-4.7-1.8,7.3,7.3,0,0,1-1.6-5.1,8.2,8.2,0,0,1,.8-3.7,5.7,5.7,0,0,1,2.3-2.5,6.9,6.9,0,0,1,3.5-.9,9.7,9.7,0,0,1,4.2,1l-1.1,2.9-1.5-.6Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M220.2,198.5a7.3,7.3,0,0,1-1.7,5.2,7.6,7.6,0,0,1-9.8,0,8.8,8.8,0,0,1,0-10.4,7.7,7.7,0,0,1,9.8,0A7.3,7.3,0,0,1,220.2,198.5Zm-9.3,0q0,3.9,2.7,3.9a2.4,2.4,0,0,0,2.1-1,6.9,6.9,0,0,0,0-6,2.3,2.3,0,0,0-2-1Q210.9,194.6,210.9,198.5Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M234.2,191.8v8.2a5.5,5.5,0,0,1-1.5,4.1,6,6,0,0,1-4.3,1.5,5.9,5.9,0,0,1-4.3-1.4,5.4,5.4,0,0,1-1.5-4.1v-8.2h3.7v8a3.3,3.3,0,0,0,.5,2.1,2.3,2.3,0,0,0,3.2,0,3.4,3.4,0,0,0,.5-2.1v-7.9Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M246.9,196.1a4.5,4.5,0,0,1-1.3,3.5,5.4,5.4,0,0,1-3.8,1.2h-1v4.5H237V191.8h4.7a5.7,5.7,0,0,1,3.9,1.1A4,4,0,0,1,246.9,196.1Zm-6.2,1.8h.7a1.8,1.8,0,0,0,1.3-.5,1.7,1.7,0,0,0,.5-1.3q0-1.4-1.5-1.4h-.9Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M261.7,198.5a7.3,7.3,0,0,1-1.7,5.2,7.6,7.6,0,0,1-9.8,0,8.8,8.8,0,0,1,0-10.4,7.7,7.7,0,0,1,9.8,0A7.3,7.3,0,0,1,261.7,198.5Zm-9.3,0q0,3.9,2.7,3.9a2.4,2.4,0,0,0,2.1-1,6.9,6.9,0,0,0,0-6,2.3,2.3,0,0,0-2-1Q252.4,194.6,252.4,198.5Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M277.1,205.3h-4.8l-5-9.6h-.1q.2,2.3.2,3.4v6.1h-3.2V191.8H269l4.9,9.4h.1q-.1-2.1-.1-3.3v-6.1h3.3Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
              <path d="M287.3,205.3h-3.7v-7.2q0-1.3.1-2.4l-.9.9-1.5,1.3-1.9-2.3,4.7-3.8h3.3Z" transform="translate(-36.2 -66.6)" fill="#fff"/>
            </g>
        </g>

        <g class="cursor">
          <path d="M397.3,285.3,385,273l8.8-5.1a2.1,2.1,0,0,0-.3-3.7l-39.1-15.6a2.1,2.1,0,0,0-2.7,2.7l15.6,39.2a2.1,2.1,0,0,0,3.7.3l5.1-8.8,12.3,12.3a2.1,2.1,0,0,0,2.9,0l6-6A2.1,2.1,0,0,0,397.3,285.3Z" transform="translate(-36.2 -66.6)"/>
        </g>
        </svg>
      </div> <!--   End of imac div Zone   -->
    </div>
  </div>
</div>
<!--   End of iMac Zone   -->

<!--   Button Zone   -->

<div class="container">
  <div class="row buttons">
    <div class="col-xs-4 col-lg-4 col-md-4">
      <button id="btnPlay" class="btn btn-primary">Replay</button>
    </div>
    <div class="col-xs-4 col-lg-4 col-md-4">
      <button id="btnSlowMo" class="btn btn-primary">SlowMo</button>
    </div>
    <div class="col-xs-4 col-lg-4 col-md-4">
      <button id="btnReverse" class="btn btn-primary">Reverse</button>
    </div>
  </div>
</div>

<!--   End of Button Zone   -->

body {
  text-align: center;
  margin: auto;
  background: #ffffff;
}

.container {
  margin-top: 60px;
}

.btn,
.btn:visited{
  font-weight: 800;
  height: 40px;
  width: 140px;
  box-shadow: 4px 4px 0 -2px #fff, 4px 4px 0 0 #27af92;
  border-radius: 0;
  border: 2px solid #27af92;
  background-color: #fff;
  color: #27af92;
}

.btn:hover,
.btn:active {
  color: #fff;
  background-color: #27af92;
  border: none;
  text-decoration: none;
}

// OM animation with Greensock  ---------------------------------

$(document).ready(function() {
//  Setup variables
var baseScr = $(".base-scr"),
    page = $(".page"),
    black = $(".black"),
    cursor = $(".cursor"),
    thx = $(".thx"),
    
    popup = $(".popup"),
      popupBase = $("#popup-base"),
      button = $("#btn-base"),
      button2 = $("#btn-base2"),
      emailAdd = $(".somaemail"),
      name = $(".soma"),
    
    $btnPlay = $("#btnPlay"),
    $btnSlowMo = $("#btnSlowMo"),
    $btnReverse = $("#btnReverse");

  //  Creating the Timeline
  var tl = new TimelineMax();

  //  Stage Clear
  tl.set(popup, {yPercent: -150})
    .set(black, {autoAlpha: 0})
    .set(thx, {yPercent: -150});

  //  Animating cursor
  tl.to(cursor, 1, {x: -200, y: -20, ease:Power4.easeOut}, "1.5")
    .to(cursor,1,{x: -30, y: -50, ease:Power4.easeOut})
    .to(cursor,1,{x: -285, y: -152, ease:Power4.easeOut});

  //  Pop Up!
  tl.to(black,0.01,{autoAlpha: 1})
    .add("popUp")
    .to(popup,0.3,{yPercent:0, ease:Bounce.easeOut});
  //tl.to(cursor,1.5,{x: 0, y: 0}, "+=1");

  //  Name and email
  tl.to(cursor, 1, {x: -180, y: -35}, "+=1")
    .staggerFrom(name, 0.03, {autoAlpha: 0}, 0.08)
    .to(cursor, 1, {x: -90}, "+=0.4")
    .staggerFrom(emailAdd, 0.03, {autoAlpha: 0}, 0.08)
    .to(cursor, 0.7, {y: -5});

  //  Popup Hover Button
  tl.to(button, 0.15, {y: 3, ease:Power4.easeO})
    .to(button, 0.2, {y: 0, ease:Power4.easeOut});

  //  Thank you popup
  tl.to(popup, 0.3, {yPercent: -150}, "+=0.3")
    .to(thx, 0.3, {yPercent: 0, ease:Bounce.easeOut}, "+=0.3");

  //  Thank you popup
  tl.to(button2, 0.15, {y: 3, ease:Power4.easeO}, "+=1.2")
    .to(button2, 0.2, {y: 0, ease:Power4.easeOut})
    .to(thx, 0.3, {yPercent: -150}, "+=0.5")
    .to(black, 0.01, {autoAlpha: 0}, "+=0.04")
    .to(cursor, 0.7, {x:0, y: 0}, "+=0.5");

tl.add('end');

//   Buttons
  $btnPlay.click(
    function(){
      tl.timeScale(1).seek(0);
    }
  );

  $btnSlowMo.click(
    function(){
      tl.timeScale(0.2).seek(0.5);
    }
  );

  $btnReverse.click(
    function(){
      tl.timeScale(1).seek("end").reverse();
    }
  );


});