body { text-align: center; padding: 150px; }
h1 { font-size: 50px; }
body { font: 20px Helvetica, sans-serif; color: #333; background-color: #fff; }
header, footer { position:relative; width: 730px; margin: 0 auto; background-color: #fff; box-shadow: 0 0 40px 30px #fff; z-index: 100; }
article { background: linear-gradient(to bottom, rgba(0, 183, 234, 0.05) 0%,rgba(0, 158, 195, 0.05) 100%); position:relative; display: block; text-align: justify; width: 650px; margin: 0 auto; border-left: 4px solid rgba(0, 158, 195, 0.2); border-right: 4px solid rgba(0, 158, 195, 0.2);; padding: 40px; box-shadow: 0 0 20px #ddd; z-index: 0; }
a { color: #dc8100; text-decoration: none; }
a:hover { color: #333; text-decoration: none; }
.corner { position:absolute; top: -150px; left: -150px; width: 300px; height: 300px; transform: rotate(-45deg); background: linear-gradient(to bottom, #00b7ea 0%,#009ec3 100%); box-shadow: 0 0 0 10px #eee; }
.corner a { display:block; color: rgba(255, 255, 255, 0.8); margin-top: 265px; }
.spinner { margin: 10px auto 0; width: 70px; text-align: center; }
.spinner > div { width: 18px; height: 18px; background-color: #f9a11e; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; }
.spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }
.spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; }
@-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1.0) } }
@keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1.0); transform: scale(1.0); } }