.vertical-body,
button { vertical-align: middle; }
button.learn-more .button-text,
button.learn-more .circle,
button.learn-more .circle .icon,
button.learn-more .circle .icon.arrow { transition: 0.45s cubic-bezier(0.65, 0, 0.076, 1); }
body, html { margin: 0; height: 100%; }
body { font-family: "Roboto Condensed", sans-serif; overflow: hidden; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -o-user-select: none; }
.vertical-container { display: table; width: 100%; height: 100%; }
.vertical-body { display: table-cell; width: 100%; }
.container { padding: 0 10px; margin: 0 auto; max-width: 960px; text-align: center; -webkit-animation: 2s blur; animation: 2s blur; }
.title { font-size: 40px; margin-bottom: 0; -webkit-animation: 2s popup; animation: 2s popup; }
@-webkit-keyframes blur { 0% { filter: blur(12px); } 100% { filter: blur(0px); } }
@keyframes blur { 0% { filter: blur(12px); } 100% { filter: blur(0px); } }
@-webkit-keyframes popup { 0% { transform: scale(1.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes popup { 0% { transform: scale(1.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@media (min-width: 768px) { .title { font-size: 50px; } }
@media (min-width: 1200px) { .title { font-size: 70px; } }
.background { background: #fff; -webkit-animation: 2s popup; animation: 2s popup; }
button { position: relative; display: inline-block; margin-top: 20px; cursor: pointer; outline: 0; border: 0; text-decoration: none; background: 0 0; padding: 0; font-size: inherit; font-family: inherit; }
button.learn-more { width: 20rem; height: auto; }
button.learn-more .circle { position: relative; display: block; margin: 0; width: 3rem; height: 3rem; background: #282936; border-radius: 1.625rem; }
button.learn-more .circle .icon { position: absolute; top: 0; bottom: 0; margin: auto; background: #fff; }
button.learn-more .circle .icon.arrow { left: 0.625rem; width: 1.125rem; height: 0.125rem; background: 0 0; }
button.learn-more .circle .icon.arrow::before { position: absolute; content: ""; top: -0.25rem; right: 0.0625rem; width: 0.625rem; height: 0.625rem; border-top: 0.125rem solid #fff; border-right: 0.125rem solid #fff; transform: rotate(45deg); }
button.learn-more .button-text { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0.75rem 0; margin: 0 0 0 1.85rem; color: #282936; font-weight: 700; line-height: 1.6; }
button:hover .circle { width: 100%; }
button:hover .circle .icon.arrow { background: #fff; transform: translate(1rem, 0); }
button:hover .button-text { color: #fff; }