<div class="sso-view-wrap">
  <div class="logo-animation-wrap">

    <!-- ********************* -->
    <!-- Marqeta Quality Icons -->
    <!-- ********************* -->    
    <div class="logo-animation-quality-icons">
      <!-- Empower Icon -->
      <div class="quality-icon quality-icon-empower" style="margin-top: -1px;">
        <svg xmlns="http://www.w3.org/2000/svg" width="74" height="74" viewBox="0 0 74 74">
          <path fill="white" d="M37,43 C33.6862915,43 31,40.3137085 31,37 C31,33.6862915 33.6862915,31 37,31 C40.3137085,31 43,33.6862915 43,37 C42.9963901,40.3122121 40.3122121,42.9963901 37,43 Z M73.9999998,37.0014522 C73.9990545,41.4719771 71.1843315,45.457947 66.9734169,46.9537236 C66.1568462,47.2446239 65.5016603,47.8677264 65.1701602,48.668679 C64.8386597,49.4696327 64.8618568,50.3735102 65.233767,51.1559046 C67.1543233,55.1933253 66.3253541,60.0025618 63.1639288,63.1639963 C60.0025012,66.3254331 55.1932714,67.1544059 51.1552689,65.2335617 C50.3732971,64.8612718 49.470142,64.8379996 48.6700347,65.1695229 C47.8699262,65.5010466 47.2479027,66.1562755 46.9577722,66.9742951 C45.4595136,71.1861225 41.4730844,73.9995154 37.0027154,74 C32.5323465,74.0004846 28.5453074,71.1879561 27.0455165,66.9747116 C26.7555429,66.1577224 26.1328592,65.5019323 25.331976,65.1700655 C24.5310939,64.8381992 23.627074,64.8613588 22.8441656,65.2338308 C18.8072407,67.1542245 13.9985715,66.3255978 10.8372294,63.164804 C7.6758897,60.0040126 6.84641855,55.1954828 8.7661984,51.1579898 C9.13870938,50.3748106 9.16187458,49.4704518 8.82994814,48.6692282 C8.49802218,47.8680058 7.84210139,47.2449792 7.02409952,46.9544043 C2.81209229,45.4562324 -0.000944984187,41.4690727 2.37756073e-07,36.9985478 C0.000945459699,32.5280228 2.81566853,28.542053 7.02658306,27.0462763 C7.84315384,26.7553761 8.49833973,26.1322735 8.8298398,25.331321 C9.16134034,24.5303673 9.13814324,23.6264898 8.76623298,22.8440954 C6.8456767,18.8066746 7.67464587,13.9974381 10.8360712,10.8360037 C13.9974988,7.67456688 18.8067286,6.84559408 22.8447311,8.7664383 C23.6267029,9.13872813 24.529858,9.16200035 25.3299653,8.83047708 C26.1300738,8.49895334 26.7520973,7.8437245 27.0422278,7.02570487 C28.5404864,2.81387746 32.5269156,0.000484612628 36.9972846,0 C41.4676535,-0.000484612628 45.4546926,2.81204387 46.9544835,7.02528836 C47.2444571,7.84227758 47.8671408,8.49806766 48.668024,8.82993446 C49.4689061,9.16180079 50.372926,9.13864115 51.1558092,8.76618117 C55.192783,6.84569534 60.0015585,7.67432497 63.1629354,10.835202 C66.32431,13.9960768 67.1537103,18.8047256 65.2338016,22.8421852 C64.8612906,23.6253644 64.8381254,24.5297232 65.1700519,25.3309468 C65.4977493,26.1219622 66.1412393,26.739293 66.9439676,27.0342374 C71.1879077,28.5437675 74.000945,32.5309273 73.9999998,37.0014522 Z M61.4746133,26.8618725 C60.7093622,25.0146644 60.7627691,22.9296807 61.6215064,21.1242436 C62.8143847,18.6156878 62.2990396,15.6278499 60.3347319,13.6638528 C58.3704265,11.699858 55.3825214,11.1849937 52.8742145,12.3782558 C51.0687661,13.2372054 48.9838391,13.2906181 47.136778,12.5252403 C45.289718,11.759863 43.8536384,10.2474308 43.1854997,8.36497394 C42.2537982,5.74761981 39.7759461,3.9996988 36.9977182,3.99999998 C34.2194902,4.00030115 31.7420172,5.74875934 30.8115093,8.36455266 C30.1433467,10.2484353 28.7077434,11.7606752 26.8611247,12.5258189 C25.0145048,13.2909631 22.930053,13.2372516 21.1258775,12.3782996 C18.6171766,11.1849315 15.6288988,11.7000246 13.6645024,13.6644267 C11.7001037,15.6288311 11.1850109,18.6171247 12.3786161,21.1263389 C13.2364875,22.9310578 13.289961,25.0146623 12.5257907,26.8610095 C11.7616199,28.7073578 10.2512891,30.1437303 8.367206,30.8149269 C5.74958359,31.7447441 4.00058749,34.2215226 4.00000015,36.9993935 C3.99941281,39.7772644 5.74736141,42.2547823 8.36381115,43.1854294 C10.2479147,43.85471 11.7601351,45.2910932 12.5253867,47.1383025 C13.2906378,48.9855106 13.2372309,51.0704943 12.3785187,52.8758786 C11.1857361,55.3844223 11.7011252,58.3721863 13.6654112,60.3361316 C15.6296949,62.3000746 18.617534,62.8149371 21.1257855,61.6217442 C22.9312339,60.7627946 25.0161609,60.7093818 26.863222,61.4747596 C28.710282,62.240137 30.1463616,63.7525692 30.8145003,65.635026 C31.7462018,68.2523802 34.2240539,70.0003012 37.0022818,70 C39.7805098,69.9996988 42.2579828,68.2512406 43.1884907,65.6354473 C43.8566533,63.7515647 45.2922566,62.2393248 47.1388753,61.4741811 C48.9854952,60.7090369 51.069947,60.7627484 52.8741225,61.6217004 C55.3828234,62.8150685 58.3711012,62.2999754 60.3354976,60.3355733 C62.2998963,58.3711689 62.8149891,55.3828753 61.6213839,52.8736611 C60.7635125,51.0689421 60.710039,48.9853377 61.4742093,47.1389905 C62.2383801,45.2926421 63.7487109,43.8562697 65.632794,43.1850731 C68.2504164,42.2552559 69.9994125,39.7784774 69.9999999,37.0006065 C70.0005841,34.2374399 68.2710947,31.771455 65.6768983,30.8292066 C63.7520853,30.145465 62.2398649,28.7090818 61.4746133,26.8618725 Z" />
        </svg>
      </div>

      <!-- Performant Icon -->
      <div class="quality-icon quality-icon-performant">
        <svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="0 0 70 70">
          <path fill="white" d="M31.1998432,30.356622 L31.1643066,30.3295898 L52.0480616,16.5177557 L40.7017876,36.8732604 C39.9149633,39.2696113 37.6595586,41 35,41 C31.6862915,41 29,38.3137085 29,35 C29,33.1284087 29.8569324,31.4569647 31.1998432,30.356622 Z M35,70 C15.6700338,70 0,54.3299662 0,35 C0,15.6700338 15.6700338,0 35,0 C54.3299662,0 70,15.6700338 70,35 C70,54.3299662 54.3299662,70 35,70 Z M35,66 C52.1208272,66 66,52.1208272 66,35 C66,17.8791728 52.1208272,4 35,4 C17.8791728,4 4,17.8791728 4,35 C4,52.1208272 17.8791728,66 35,66 Z" />
        </svg>
      </div>

      <!-- Quality Icon -->
      <div class="quality-icon quality-icon-targeted">
        <svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="0 0 70 70">
          <path fill="white" d="M4.1432976,32 L11.5,32 L11.5,37 L4.06347955,37 C5.04157265,52.3604992 17.2065843,64.6802224 32.5,65.9006552 L32.5,58.5 L37.5,58.5 L37.5,65.9006552 C52.7934157,64.6802224 64.9584273,52.3604992 65.9365205,37 L58.5,37 L58.5,32 L65.8567024,32 C64.4266307,17.1077192 52.4600721,5.29317635 37.5,4.0993448 L37.5,11 L32.5,11 L32.5,4.0993448 C17.5399279,5.29317635 5.57336934,17.1077192 4.1432976,32 Z M35,70 C15.6700338,70 0,54.3299662 0,35 C0,15.6700338 15.6700338,0 35,0 C54.3299662,0 70,15.6700338 70,35 C70,54.3299662 54.3299662,70 35,70 Z M35,41 C31.6862915,41 29,38.3137085 29,35 C29,31.6862915 31.6862915,29 35,29 C38.3137085,29 41,31.6862915 41,35 C41,38.3137085 38.3137085,41 35,41 Z" />
        </svg>
      </div>

      <!-- Inspired Icon -->
      <div class="quality-icon quality-icon-inspired">
        <svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="0 0 70 70">
          <path fill="white" d="M35,70 C15.6700338,70 0,54.3299662 0,35 C0,15.6700338 15.6700338,0 35,0 C54.3299662,0 70,15.6700338 70,35 C70,54.3299662 54.3299662,70 35,70 Z M35,66 C52.1208272,66 66,52.1208272 66,35 C66,17.8791728 52.1208272,4 35,4 C17.8791728,4 4,17.8791728 4,35 C4,52.1208272 17.8791728,66 35,66 Z M31.9393583,37.1159987 C32.517421,37.1159987 32.9601763,37.6301046 32.8744438,38.2017745 L30.8012453,52.0259933 L46.1658052,31.7405251 L36.4259625,31.6357736 C35.855085,31.6296339 35.419817,31.1228304 35.4999489,30.5575715 L37.3499472,17.5074811 L22.8243998,37.1159987 L31.9393583,37.1159987 Z" />
        </svg>
      </div>
    </div>

    <!-- ************ -->
    <!-- Marqeta Logo -->
    <!-- ************ -->
    <div class="logo-animation-mq-logo-wrap">
      <svg xmlns="http://www.w3.org/2000/svg" width="176" height="27" viewBox="0 0 176 27">
        <g fill="none" fill-rule="evenodd" transform="translate(.032)">
          <!-- Logo Icon -->
          <polyline class="mq-logo-element logo-animation-marq" fill="#FFFFFF" points="0 .04 8.808 13.145 0 26.25 4.926 26.25 13.735 13.145 7.1 3.316 12.026 3.316 18.635 13.145 9.853 26.25 24.633 26.25 33.414 13.145 26.84 3.316 31.767 3.316 38.341 13.145 29.559 26.25 34.459 26.25 43.267 13.145 34.459 .04 19.703 .04 28.488 13.145 21.88 22.974 16.98 22.974 23.561 13.145 14.779 .04 0 .04" />

          <!-- M -->
          <polyline class="mq-logo-element draw logo-animation-m" fill="#FFFFFF" points="64.283 22.011 64.283 9.883 60.788 17.652 58.761 17.652 55.266 9.913 55.266 22.011 52.182 22.011 52.182 4.279 55.707 4.279 59.819 13.026 63.872 4.279 67.367 4.279 67.367 22.011 64.283 22.011" />
          <polyline class="mq-logo-element fill logo-animation-m" fill="#FFFFFF" points="64.283 22.011 64.283 9.883 60.788 17.652 58.761 17.652 55.266 9.913 55.266 22.011 52.182 22.011 52.182 4.279 55.707 4.279 59.819 13.026 63.872 4.279 67.367 4.279 67.367 22.011 64.283 22.011" />

          <!-- A -->
          <polyline class="mq-logo-element draw logo-animation-first-a logo-animation-first-a-center" fill="#FFFFFF"
            points="80.0661628 8.28218023 77.6871802 15.2796366 82.415843 15.2796366 80.0661628 8.28218023 80.0661628 8.28218023" />
          <polyline class="mq-logo-element draw logo-animation-first-a logo-animation-first-a-outline" fill="#FFFFFF"
            points="84.6776163 22.010625 83.3852616 18.2449709 76.7177616 18.2449709 75.425407 22.010625 72.1359157 22.010625 78.2744477 4.27936047 81.8578779 4.27936047 87.9671076 22.010625 84.6776163 22.010625 84.6776163 22.010625" />
          <polyline class="mq-logo-element fill logo-animation-first-a" fill="#FFFFFF" points="80.0661628 8.28218023 77.6871802 15.2796366 82.415843 15.2796366 80.0661628 8.28218023 80.0661628 8.28218023 84.6776163 22.010625 83.3852616 18.2449709 76.7177616 18.2449709 75.425407 22.010625 72.1359157 22.010625 78.2744477 4.27936047 81.8578779 4.27936047 87.9671076 22.010625 84.6776163 22.010625 84.6776163 22.010625" />

          <!-- R -->
          <polyline class="mq-logo-element draw logo-animation-r logo-animation-r-center" fill="#FFFFFF" points="102.246497 8.43052326 102.246497 8.43052326 102.246497 8.25257267 102.217195 8.22296512 102.04077 7.89667151 101.571017 7.30390988 101.277078 7.27430233 101.130262 7.27430233 95.960843 7.27430233 95.960843 12.0182267 101.130262 12.0182267 101.394593 12.0182267 101.982166 11.4251599 102.217195 11.0100436 102.217195 11.0100436 102.246497 10.9508285 102.246497 10.8916134 102.246497 8.43052326 102.246497 8.43052326" />
          <polyline class="mq-logo-element draw logo-animation-r logo-animation-r-outline" fill="#FFFFFF" points="102.71625 22.010625 98.7805814 14.9832558 95.960843 14.9832558 95.960843 22.010625 92.8767733 22.010625 92.8767733 4.30927326 101.130262 4.30927326 101.835349 4.30927326 102.657645 4.54643895 103.245218 4.96155523 103.656366 5.25793605 104.537573 6.20690407 104.801599 6.59210756 105.154142 7.1259593 105.330567 7.77824128 105.330567 8.4009157 105.330567 10.9508285 105.330567 11.6031105 105.154142 12.2257849 104.801599 12.7596366 104.537573 13.1448401 103.656366 14.034593 103.245218 14.3309738 103.010189 14.5089244 102.510828 14.7164826 102.158285 14.7756977 106.35859 22.010625 102.71625 22.010625 102.71625 22.010625" />
          <polyline class="mq-logo-element fill logo-animation-r" fill="#FFFFFF" points="102.246497 8.43052326 102.246497 8.43052326 102.246497 8.25257267 102.217195 8.22296512 102.04077 7.89667151 101.571017 7.30390988 101.277078 7.27430233 101.130262 7.27430233 95.960843 7.27430233 95.960843 12.0182267 101.130262 12.0182267 101.394593 12.0182267 101.982166 11.4251599 102.217195 11.0100436 102.217195 11.0100436 102.246497 10.9508285 102.246497 10.8916134 102.246497 8.43052326 102.246497 8.43052326 102.71625 22.010625 98.7805814 14.9832558 95.960843 14.9832558 95.960843 22.010625 92.8767733 22.010625 92.8767733 4.30927326 101.130262 4.30927326 101.835349 4.30927326 102.657645 4.54643895 103.245218 4.96155523 103.656366 5.25793605 104.537573 6.20690407 104.801599 6.59210756 105.154142 7.1259593 105.330567 7.77824128 105.330567 8.4009157 105.330567 10.9508285 105.330567 11.6031105 105.154142 12.2257849 104.801599 12.7596366 104.537573 13.1448401 103.656366 14.034593 103.245218 14.3309738 103.010189 14.5089244 102.510828 14.7164826 102.158285 14.7756977 106.35859 22.010625 102.71625 22.010625 102.71625 22.010625" />

          <!-- Q -->
          <polyline class="mq-logo-element draw logo-animation-q logo-animation-q-center" fill="#FFFFFF" points="114.225959 17.6815116 114.225959 17.6815116 114.225959 17.7703343 114.255567 17.8002471 114.607805 18.3337936 115.22468 18.9860756 115.547922 19.1640262 115.606526 19.1936337 115.665131 19.1936337 115.694738 19.1936337 116.370218 19.1936337 115.932515 18.1555378 118.752253 17.2065698 119.601105 19.1936337 119.982951 19.1936337 119.982951 19.1936337 120.070858 19.1936337 120.129767 19.1640262 120.452703 18.9860756 121.010974 18.3337936 121.363212 17.8002471 121.39282 17.7407267 121.39282 17.6815116 121.39282 17.6815116 121.39282 8.51934593 121.39282 8.51934593 121.39282 8.43052326 121.363212 8.4009157 121.010974 7.86736919 120.452703 7.33351744 120.129767 7.15556686 120.070858 7.1259593 120.012253 7.1259593 119.982951 7.1259593 115.694738 7.1259593 115.694738 7.1259593 115.577224 7.1259593 115.547922 7.15556686 115.22468 7.33351744 114.607805 7.86736919 114.255567 8.4009157 114.225959 8.46013081 114.225959 8.51934593 114.225959 8.51934593 114.225959 17.6815116 114.225959 17.6815116" />
          <polyline class="mq-logo-element draw logo-animation-q logo-animation-q-outline" fill="#FFFFFF" points="120.717035 22.1586628 121.862573 24.7384884 118.602384 24.7384884 117.515756 22.1586628 115.577224 22.1586628 114.931047 22.1586628 114.225959 21.9214971 113.756206 21.6251163 113.139331 21.2692151 111.964491 19.9942587 111.611948 19.4903198 111.259404 18.956468 111.14189 18.3634012 111.14189 17.8002471 111.14189 8.51934593 111.14189 7.95619186 111.259404 7.363125 111.611948 6.82927326 111.964491 6.3253343 113.139331 5.05037791 113.756206 4.69447674 114.225959 4.39809593 114.931047 4.16093023 115.577224 4.16093023 120.041555 4.16093023 120.65843 4.16093023 121.39282 4.39809593 121.862573 4.69447674 122.479448 5.05037791 123.624985 6.3253343 124.006831 6.82927326 124.359375 7.363125 124.476584 7.95619186 124.476584 8.51934593 124.476584 17.8002471 124.476584 18.3634012 124.359375 18.956468 124.006831 19.4903198 123.624985 19.9942587 122.479448 21.2692151 121.862573 21.6251163 121.422122 21.862282 121.128488 22.0402326 120.687733 22.0994477 120.717035 22.1586628 120.717035 22.1586628" />
          <polyline class="mq-logo-element fill logo-animation-q" fill="#FFFFFF" points="114.225959 17.6815116 114.225959 17.6815116 114.225959 17.7703343 114.255567 17.8002471 114.607805 18.3337936 115.22468 18.9860756 115.547922 19.1640262 115.606526 19.1936337 115.665131 19.1936337 115.694738 19.1936337 116.370218 19.1936337 115.932515 18.1555378 118.752253 17.2065698 119.601105 19.1936337 119.982951 19.1936337 119.982951 19.1936337 120.070858 19.1936337 120.129767 19.1640262 120.452703 18.9860756 121.010974 18.3337936 121.363212 17.8002471 121.39282 17.7407267 121.39282 17.6815116 121.39282 17.6815116 121.39282 8.51934593 121.39282 8.51934593 121.39282 8.43052326 121.363212 8.4009157 121.010974 7.86736919 120.452703 7.33351744 120.129767 7.15556686 120.070858 7.1259593 120.012253 7.1259593 119.982951 7.1259593 115.694738 7.1259593 115.694738 7.1259593 115.577224 7.1259593 115.547922 7.15556686 115.22468 7.33351744 114.607805 7.86736919 114.255567 8.4009157 114.225959 8.46013081 114.225959 8.51934593 114.225959 8.51934593 114.225959 17.6815116 114.225959 17.6815116 120.717035 22.1586628 121.862573 24.7384884 118.602384 24.7384884 117.515756 22.1586628 115.577224 22.1586628 114.931047 22.1586628 114.225959 21.9214971 113.756206 21.6251163 113.139331 21.2692151 111.964491 19.9942587 111.611948 19.4903198 111.259404 18.956468 111.14189 18.3634012 111.14189 17.8002471 111.14189 8.51934593 111.14189 7.95619186 111.259404 7.363125 111.611948 6.82927326 111.964491 6.3253343 113.139331 5.05037791 113.756206 4.69447674 114.225959 4.39809593 114.931047 4.16093023 115.577224 4.16093023 120.041555 4.16093023 120.65843 4.16093023 121.39282 4.39809593 121.862573 4.69447674 122.479448 5.05037791 123.624985 6.3253343 124.006831 6.82927326 124.359375 7.363125 124.476584 7.95619186 124.476584 8.51934593 124.476584 17.8002471 124.476584 18.3634012 124.359375 18.956468 124.006831 19.4903198 123.624985 19.9942587 122.479448 21.2692151 121.862573 21.6251163 121.422122 21.862282 121.128488 22.0402326 120.687733 22.0994477 120.717035 22.1586628 120.717035 22.1586628" />

          <!-- E -->
          <polyline class="mq-logo-element draw logo-animation-e" fill="#FFFFFF" points="130.661 22.011 130.661 4.279 141.705 4.279 141.705 7.244 133.745 7.244 133.745 11.722 141.235 11.722 141.235 14.687 133.745 14.687 133.745 19.046 141.705 19.046 141.705 22.011 130.661 22.011" />
          <polyline class="mq-logo-element fill logo-animation-e" fill="#FFFFFF" points="130.661 22.011 130.661 4.279 141.705 4.279 141.705 7.244 133.745 7.244 133.745 11.722 141.235 11.722 141.235 14.687 133.745 14.687 133.745 19.046 141.705 19.046 141.705 22.011 130.661 22.011" />

          <!-- T -->
          <polyline class="mq-logo-element draw logo-animation-t" fill="#FFFFFF" points="154.124 7.244 154.124 22.011 151.04 22.011 151.04 7.244 146.282 7.244 146.282 4.279 158.882 4.279 158.882 7.244 154.124 7.244" />
          <polyline class="mq-logo-element fill logo-animation-t" fill="#FFFFFF" points="154.124 7.244 154.124 22.011 151.04 22.011 151.04 7.244 146.282 7.244 146.282 4.279 158.882 4.279 158.882 7.244 154.124 7.244" />

          <!-- A -->
          <polyline class="mq-logo-element draw logo-animation-second-a logo-animation-second-a-center" fill="#FFFFFF"
            points="167.913009 8.28218023 165.534026 15.2796366 170.262689 15.2796366 167.913009 8.28218023 167.913009 8.28218023" />
          <polyline class="mq-logo-element draw logo-animation-second-a logo-animation-second-a-outline" fill="#FFFFFF"
            points="172.524462 22.010625 171.232108 18.2449709 164.564608 18.2449709 163.272253 22.010625 159.982762 22.010625 166.121294 4.27936047 169.704724 4.27936047 175.813953 22.010625 172.524462 22.010625 172.524462 22.010625" />
          <polyline class="mq-logo-element fill logo-animation-second-a" fill="#FFFFFF" points="167.913009 8.28218023 165.534026 15.2796366 170.262689 15.2796366 167.913009 8.28218023 167.913009 8.28218023 172.524462 22.010625 171.232108 18.2449709 164.564608 18.2449709 163.272253 22.010625 159.982762 22.010625 166.121294 4.27936047 169.704724 4.27936047 175.813953 22.010625 172.524462 22.010625 172.524462 22.010625" />
        </g>
      </svg>
    </div>
  </div>
</div>
body {
  background: linear-gradient(309deg, #4b0e8d, #13133d, #791ddc, #06dfd9);
  background-size: 800% 800%;
  -webkit-animation: GradientAnimation 47s ease infinite;
  -moz-animation: GradientAnimation 47s ease infinite;
  animation: GradientAnimation 47s ease infinite;
  height: 100vh;
  width: 100%;
  overflow: none;
  position: relative;
}

@-webkit-keyframes GradientAnimation {
  0% {
    background-position: 0% 46%;
  }
  50% {
    background-position: 100% 55%;
  }
  100% {
    background-position: 0% 46%;
  }
}
@-moz-keyframes GradientAnimation {
  0% {
    background-position: 0% 46%;
  }
  50% {
    background-position: 100% 55%;
  }
  100% {
    background-position: 0% 46%;
  }
}
@keyframes GradientAnimation {
  0% {
    background-position: 0% 46%;
  }
  50% {
    background-position: 100% 55%;
  }
  100% {
    background-position: 0% 46%;
  }
}

/* QUALITY ICONS */

.logo-animation-quality-icons {
  display: flex;
}

.quality-icon svg {
  transform: scale(0.46);
}

.quality-icon {
  position: absolute;
  margin-left: -37px;
  opacity: 0;
}

/* 3 second budget */
.quality-icon-empower {
  animation: EmpowerAnimation 3s ease 1;
}

.quality-icon-performant {
  animation: PerformantAnimation 3s ease 1;
}

.quality-icon-targeted {
  animation: TargetedAnimation 3s ease 1;
}

.quality-icon-inspired {
  animation: InspiredAnimation 3s ease 1;
}

@keyframes EmpowerAnimation {
  0% {
    left: 95px;
    opacity: 0;
  }
  15% {
    left: 95px;
    opacity: 1;
  }
  75% {
    left: 95px;
    opacity: 1;
  }
  100% {
    left: 206px;
    opacity: 0;
  }
}

@keyframes PerformantAnimation {
  0% {
    left: 169px;
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  75% {
    left: 169px;
    opacity: 1;
  }
  100% {
    left: 206px;
    opacity: 0;
  }
}

@keyframes TargetedAnimation {
  0% {
    right: 169px;
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  45% {
    right: 169px;
    opacity: 1;
  }
  75% {
    right: 169px;
    opacity: 1;
  }
  100% {
    right: 206px;
    opacity: 0;
  }
}

@keyframes InspiredAnimation {
  0% {
    right: 95px;
    opacity: 0;
  }
  45% {
    opacity: 0;
  }
  60% {
    right: 95px;
    opacity: 1;
  }
  75% {
    right: 95px;
    opacity: 1;
  }
  100% {
    right: 206px;
    opacity: 0;
  }
}

.sso-view-wrap {
  position: absolute;
  width: 440px;
  left: 50%;
  margin-left: -220px;
}

/* MQ LOGO */

.logo-animation-mq-logo-wrap {
  margin-top: -40px;
}
.mq-logo-element.draw {
  fill-opacity: 0;
  stroke: white;
  stroke-width: 0.8;
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  stroke-opacity: 1;
}
/* 1.5 second budget */
.mq-logo-element.draw.logo-animation-m {
  animation: DrawM 1.5s linear 1;
  animation-delay: 3.2s;
}

.mq-logo-element.draw.logo-animation-first-a {
  animation: DrawFirstA 1.5s linear 1;
  animation-delay: 3.2s;
}
.mq-logo-element.draw.logo-animation-r {
  animation: DrawR 1.5s linear 1;
  animation-delay: 3.2s;
}
.mq-logo-element.draw.logo-animation-q {
  animation: DrawQ 1.5s linear 1;
  animation-delay: 3.2s;
}
.mq-logo-element.draw.logo-animation-e {
  animation: DrawE 1.5s linear 1;
  animation-delay: 3.2s;
}
.mq-logo-element.draw.logo-animation-t {
  animation: DrawT 1.5s linear 1;
  animation-delay: 3.2s;
}
.mq-logo-element.draw.logo-animation-second-a {
  animation: DrawSecondA 1.5s linear 1;
  animation-delay: 3.2s;
}

@keyframes DrawM {
  0% {
    stroke-dashoffset: 150;
  }
  /* no delay */
  35% {
    stroke-dashoffset: 0;
  }
  80% {
    stroke-opacity: 1;
  }
  100% {
    stroke-opacity: 0;
    stroke-dashoffset: 0;
  }
}
@keyframes DrawFirstA {
  0% {
    stroke-dashoffset: 150;
  }
  /* 150ms delay */
  10% {
    stroke-dashoffset: 150;
  }
  45% {
    stroke-dashoffset: 0;
  }
  80% {
    stroke-opacity: 1;
  }
  100% {
    stroke-opacity: 0;
    stroke-dashoffset: 0;
  }
}
@keyframes DrawR {
  0% {
    stroke-dashoffset: 150;
  }
  /* 300ms delay */
  20% {
    stroke-dashoffset: 150;
  }
  55% {
    stroke-dashoffset: 0;
  }
  80% {
    stroke-opacity: 1;
  }
  100% {
    stroke-opacity: 0;
    stroke-dashoffset: 0;
  }
}
@keyframes DrawQ {
  0% {
    stroke-dashoffset: 150;
  }
  /* 450ms delay */
  30% {
    stroke-dashoffset: 150;
  }
  65% {
    stroke-dashoffset: 0;
  }
  80% {
    stroke-opacity: 1;
  }
  100% {
    stroke-opacity: 0;
    stroke-dashoffset: 0;
  }
}
@keyframes DrawE {
  0% {
    stroke-dashoffset: 150;
  }
  /* 600ms delay */
  40% {
    stroke-dashoffset: 150;
  }
  75% {
    stroke-dashoffset: 0;
  }
  80% {
    stroke-opacity: 1;
  }
  100% {
    stroke-opacity: 0;
    stroke-dashoffset: 0;
  }
}
@keyframes DrawT {
  0% {
    stroke-dashoffset: 150;
  }
  /* 750ms delay */
  50% {
    stroke-dashoffset: 150;
  }
  85% {
    stroke-dashoffset: 0;
  }
  80% {
    stroke-opacity: 1;
  }
  100% {
    stroke-opacity: 0;
    stroke-dashoffset: 0;
  }
}
@keyframes DrawSecondA {
  0% {
    stroke-dashoffset: 150;
  }
  /* 900ms delay */
  60% {
    stroke-dashoffset: 150;
  }
  80% {
    stroke-opacity: 1;
  }
  100% {
    stroke-opacity: 0;
    stroke-dashoffset: 0;
  }
}
/* 4.7  */
.mq-logo-element.fill {
  fill-opacity: 0;
  animation: Fill 1.5s ease 1;
  animation-delay: 3.2s;
  animation-fill-mode: forwards;
}

@keyframes Fill {
  0% {
    fill-opacity: 0;
  }
  80% {
    fill-opacity: 0;
  }
  100% {
    fill-opacity: 1;
  }
}

.logo-animation-mq-logo-wrap {
  animation: AnimateLogo 4.7s ease 1;
  position: absolute;
  left: 117px;
  bottom: -51px;
  cursor: pointer;
}

@keyframes AnimateLogo {
  0% {
    opacity: 0;
    left: 181px;
  }
  /*  2.5 second mark  (2500 / 4700 = 0.5319) */
  53.19% {
    opacity: 0;
  }
  /*  3 second mark (3000 / 4700 = 0.6382) */
  63.82% {
    opacity: 1;
    left: 181px;
  }
  /*  3.2 second mark (3200 / 4700 = 0.6808) */
  68.08% {
    left: 117px;
  }
  100% {
    opacity: 1;
  }
}
// This is just to replay the animation
setInterval(
  function() {
    var elm = document.querySelector('.sso-view-wrap');
    var newone = elm.cloneNode(true);
    elm.parentNode.replaceChild(newone, elm);
  }, 
7000)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.