@media (max-width: 380px){.demo-container{font-size:12px;width:90%;margin:0 10%}}.demo-container,.post-header-container.buffer{background:#fff;border-radius:1em;display:inline-block;margin:2em 0;min-width:17em;text-align:center}.demo-container.multiple,.post-header-container.buffer.multiple{margin:1em}.demo-container svg,.post-header-container.buffer svg{margin:1em 2em;max-width:12.5em}.demo-container .layer,.post-header-container.buffer .layer{fill:#4b4b4b;-webkit-animation:4s linear infinite;animation:4s linear infinite}.demo-container .layer1,.post-header-container.buffer .layer1{-webkit-animation-name:layer1;animation-name:layer1}.demo-container .layer2,.post-header-container.buffer .layer2{-webkit-animation-name:layer2;animation-name:layer2}.demo-container .layer3,.post-header-container.buffer .layer3{-webkit-animation-name:layer3;animation-name:layer3}.demo-container.variation1 .layer,.post-header-container.buffer.variation1 .layer{-webkit-animation:2s linear infinite;animation:2s linear infinite}.demo-container.variation1 .layer1,.post-header-container.buffer.variation1 .layer1{-webkit-animation-name:variation1a;animation-name:variation1a}.demo-container.variation1 .layer2,.post-header-container.buffer.variation1 .layer2{-webkit-animation-name:variation1b;animation-name:variation1b}.demo-container.variation1 .layer3,.post-header-container.buffer.variation1 .layer3{-webkit-animation-name:variation1a;animation-name:variation1a}.demo-container.variation2 .layer,.post-header-container.buffer.variation2 .layer{-webkit-animation:3s linear infinite;animation:3s linear infinite}.demo-container.variation2 .layer1,.post-header-container.buffer.variation2 .layer1{-webkit-animation-name:variation2a;animation-name:variation2a}.demo-container.variation2 .layer2,.post-header-container.buffer.variation2 .layer2{-webkit-animation-name:variation2b;animation-name:variation2b}.demo-container.variation2 .layer3,.post-header-container.buffer.variation2 .layer3{-webkit-animation-name:variation2c;animation-name:variation2c}.demo-container.variation3 .layer,.post-header-container.buffer.variation3 .layer{-webkit-animation:4s cubic-bezier(0.75, -0.31, 0.32, 1.41) infinite;animation:4s cubic-bezier(0.75, -0.31, 0.32, 1.41) infinite}.demo-container.variation3 .layer1,.post-header-container.buffer.variation3 .layer1{-webkit-animation-name:variation3a;animation-name:variation3a;fill:#5FB641}.demo-container.variation3 .layer2,.post-header-container.buffer.variation3 .layer2{-webkit-animation-name:variation3b;animation-name:variation3b;fill:#FFB605}.demo-container.variation3 .layer3,.post-header-container.buffer.variation3 .layer3{-webkit-animation-name:variation3c;animation-name:variation3c;fill:#FB8501}.demo-container.variation4 .layer,.post-header-container.buffer.variation4 .layer{-webkit-animation:4s linear infinite;animation:4s linear infinite;stroke-width:1;stroke:#4b4b4b;fill:#fff;stroke-dasharray:697.923583984375 697.923583984375;stroke-dashoffset:697.923583984375;-webkit-transition:stroke-dashoffset 1s ease-out, fill 0.5s 1s linear;transition:stroke-dashoffset 1s ease-out, fill 0.5s 1s linear}.demo-container.variation4 .layer.draw,.post-header-container.buffer.variation4 .layer.draw{stroke-dashoffset:0;fill:#4b4b4b}.demo-container.variation4 .layer1,.post-header-container.buffer.variation4 .layer1{-webkit-animation-name:variation4a;animation-name:variation4a}.demo-container.variation4 .layer2,.post-header-container.buffer.variation4 .layer2{-webkit-animation-name:variation4b;animation-name:variation4b}.demo-container.variation4 .layer3,.post-header-container.buffer.variation4 .layer3{-webkit-animation-name:variation4c;animation-name:variation4c}.post-header{background:#fff}.post-header-container{background:none !important;display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-120%, -50%);transform:translate(-120%, -50%);-webkit-perspective:800px;perspective:800px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.post-header-container span{font-size:148px;display:block;-webkit-transform:rotateY(-45deg) rotateX(-30deg);transform:rotateY(-45deg) rotateX(-30deg)}@-webkit-keyframes layer1{0%,65%{fill:#b2b2b2}75%,82%{fill:#4b4b4b}92%,100%{fill:#b2b2b2}}@keyframes layer1{0%,65%{fill:#b2b2b2}75%,82%{fill:#4b4b4b}92%,100%{fill:#b2b2b2}}@-webkit-keyframes layer2{0%,40%{fill:#b2b2b2}50%,86%{fill:#4b4b4b}96%,100%{fill:#b2b2b2}}@keyframes layer2{0%,40%{fill:#b2b2b2}50%,86%{fill:#4b4b4b}96%,100%{fill:#b2b2b2}}@-webkit-keyframes layer3{0%,15%{fill:#b2b2b2}25%,90%{fill:#4b4b4b}100%{fill:#b2b2b2}}@keyframes layer3{0%,15%{fill:#b2b2b2}25%,90%{fill:#4b4b4b}100%{fill:#b2b2b2}}@-webkit-keyframes variation1a{0%,45%{fill:#4b4b4b}55%,95%{fill:#b2b2b2}100%{fill:#4b4b4b}}@keyframes variation1a{0%,45%{fill:#4b4b4b}55%,95%{fill:#b2b2b2}100%{fill:#4b4b4b}}@-webkit-keyframes variation1b{0%,45%{fill:#b2b2b2}55%,95%{fill:#4b4b4b}100%{fill:#b2b2b2}}@keyframes variation1b{0%,45%{fill:#b2b2b2}55%,95%{fill:#4b4b4b}100%{fill:#b2b2b2}}@-webkit-keyframes variation2a{0%,65%{opacity:0}75%,82%{opacity:1}92%,100%{opacity:0}}@keyframes variation2a{0%,65%{opacity:0}75%,82%{opacity:1}92%,100%{opacity:0}}@-webkit-keyframes variation2b{0%,40%{opacity:0}50%,86%{opacity:1}96%,100%{opacity:0}}@keyframes variation2b{0%,40%{opacity:0}50%,86%{opacity:1}96%,100%{opacity:0}}@-webkit-keyframes variation2c{0%,15%{opacity:0}25%,90%{opacity:1}100%{opacity:0}}@keyframes variation2c{0%,15%{opacity:0}25%,90%{opacity:1}100%{opacity:0}}@-webkit-keyframes variation3a{0%,20%{fill:#009EDF}20%,40%{fill:#974596}40%,60%{fill:#E6433A}60%,80%{fill:#FB8501}80%,100%{fill:#FFB605}}@keyframes variation3a{0%,20%{fill:#009EDF}20%,40%{fill:#974596}40%,60%{fill:#E6433A}60%,80%{fill:#FB8501}80%,100%{fill:#FFB605}}@-webkit-keyframes variation3b{0%,20%{fill:#5FB641}20%,40%{fill:#009EDF}40%,60%{fill:#974596}60%,80%{fill:#E6433A}80%,100%{fill:#FB8501}}@keyframes variation3b{0%,20%{fill:#5FB641}20%,40%{fill:#009EDF}40%,60%{fill:#974596}60%,80%{fill:#E6433A}80%,100%{fill:#FB8501}}@-webkit-keyframes variation3c{0%,20%{fill:#FB8501}20%,40%{fill:#5FB641}40%,60%{fill:#009EDF}60%,80%{fill:#974596}80%,100%{fill:#E6433A}}@keyframes variation3c{0%,20%{fill:#FB8501}20%,40%{fill:#5FB641}40%,60%{fill:#009EDF}60%,80%{fill:#974596}80%,100%{fill:#E6433A}}