@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin-ext);
@import url(http://fonts.googleapis.com/css?family=Kalam:400,300,700&subset=latin-ext);

* {
margin: 0;
padding: 0;
list-style: none;
}

a,
*:focus {
outline: 0;
}

body>div:before,
section:after,
section>ul:after {
content: "";
display: table;
clear: both;
}

html,
body {
height: 100%;
}

body>div {
min-height: 100%;
margin: 0 auto -39px auto;
}

body>div:after {
content: "";
display: table;
height: 39px;
}

body {
margin: 0;
padding: 0;
font-size: 15px;
font-family: roboto;
color: #333;
background: url(../images/bg.jpg) center no-repeat;
background-size: cover;
background-attachment: fixed;
overflow-y: scroll;
}

header>strong {
display: block;
margin: 30px 0 0 0;
color: #fff;
font-size: 50px;
font-family: kalam;
text-align: center;
text-shadow: #333 1px 1px, #333 2px 2px, #333 3px 3px, #333 4px 4px, #333 5px 5px;
animation-name: fadeindown;
animation-duration: .5s;
animation-fill-mode: both;
}

header>ul {
margin-bottom: 10px;
font-size: 0;
text-align: center;
animation-name: fadeinup;
animation-duration: .5s;
}

header>ul>li {
display: inline-block;
margin: 10px;
font-size: 15px;
height: 70px;
background: #337ab7;
overflow: hidden;
}

header>ul>li:after {
content: "";
display: block;
height: 90px;
margin-top: 10px;
transform: skewY(-10deg);
transition: margin .5s;
background: #315e85;
}

header>ul>li:hover:after {
margin-top: -80px;
}

header>ul>li>a {
display: block;
width: 70px;
height: 70px;
padding: 10px;
color: #fff;
text-align: center;
text-decoration: none;
transition: background .3s;
position: relative;
z-index: 1;
box-sizing: border-box;
}

header>ul>li>a>i {
margin-bottom: 5px;
}

header>ul>li>a>i:before {
font-size: 30px;
}

h1,
.splash form strong {
display: block;
margin: 30px 0 10px 0;
font-size: 20px;
font-weight: 500;
animation-name: fadeinup;
animation-duration: 1s;
animation-fill-mode: both;
}

section>h1:first-of-type {
margin-top: 0;
}

section {
max-width: 700px;
margin: 0 auto 30px auto;
padding: 10px;
background: rgba(255,255,255,.5);
}

section>ul>li {
margin: 2px 0;
padding: 10px;
color: #666;
background: rgba(255,255,255,.7);
animation-name: bounceinleft;
animation-duration: 1s;
animation-fill-mode: both;
}

section>ul>li:nth-of-type(1) {
animation-delay: .2s;
}

section>ul>li:nth-of-type(2) {
animation-delay: .4s;
}

section>ul>li:nth-of-type(3) {
animation-delay: .6s;
}

section>ul>li:nth-of-type(4) {
animation-delay: .8s;
}

section>ul>li:nth-of-type(5) {
animation-delay: 1s;
}

section>ul>li>strong {
width: 100px;
float: left;
margin-right: 20px;
font-weight: 500;
text-align: right;
}

section>ul>li>strong>i {
height: 1px;
float: right;
margin-left: 7px;
}

section a,
footer a {
color: #337ab7;
}

section a:hover,
footer a:hover {
color: #315e85;
}

footer {
line-height: 39px;
font-size: 13px;
text-align: center;
background: rgba(255,255,255,.85);
animation-name: bounceinleft;
animation-duration: 1s;
animation-fill-mode: both;
animation-delay: 1.4s;
}

footer span {
padding: 0 15px;
}

form>div {
animation-name: bounceinleft;
animation-duration: 1s;
animation-fill-mode: both;
animation-delay: 1.2s;
}

input,
button {
display: block;
float: left;
border: 0;
}

input {
width: 170px;
height: 39px;
padding: 10px;
background: rgba(255,255,255,.7);
box-sizing: border-box;
}

input:focus {
background: rgba(255,255,255,.9);
}

button {
width: 110px;
height: 39px;
line-height: 39px;
color: #fff;
background: transparent;
position: relative;
z-index: 1;
cursor: pointer;
background: #337ab7;
overflow: hidden;
}

button:after {
content: "";
display: block;
height: 60px;
margin-top: 10px;
transform: skewY(-10deg);
transition: margin .5s;
background: #315e85;
}

button:hover:after {
margin-top: -50px;
}

button>span {
position: relative;
z-index: 1;
}

button>span>i:before {
margin-right: 2px;
vertical-align: -2px;
font-size: 20px;
}

::-webkit-input-placeholder {
color: #333;
}

::-moz-placeholder {
color: #333;
opacity: 1;
}

:-ms-input-placeholder {
color: #333;
}

.content {
min-height: 100vh;
}

section {
animation-name: fadein;
animation-duration: 1s;
animation-fill-mode: both;
}

section>div {
float: left;
}

section>div:first-of-type {
margin-right: 20px;
}

section>div>div {
width: 340px;
text-align: left;
animation-name: fadeinup;
animation-duration: 1s;
animation-fill-mode: both;
animation-delay: 1.2s;
}

section>div>div>ul {
padding: 5px 15px;
background: rgba(255,255,255,.7);
}

section>div>div>ul>li {
padding: 5px 0;
font-size: 15px;
}

section>div>div>ul>li:not(:last-of-type):after {
content: "";
display: block;
height: 2px;
margin-top: 10px;
background: linear-gradient(to right, transparent 0, rgba(0,0,0,.1) 50%, transparent 100%);
}

@keyframes fadeindown {
0% {
opacity: 0;
transform: translateY(-50px);
}

100% {
opacity: 1;
transform: translateY(0);
}
}

@keyframes fadeinup {
from {
opacity: 0;
transform: translateY(50px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes bounceinleft {
from {
opacity: 0;
transform: translateX(-2000px);
}

to {
transform: translateX(0);
}
}

@keyframes fadein {
from {
opacity: 0;
}

to {
opacity: 1;
}
}

@media (max-width: 740px) {
header>strong {
font-size: 21px;
text-shadow: #333 1px 1px, #333 2px 2px;
}

section>div,
section>div>div {
width: 100%;
}

section>ul>li>strong>i {
float: left;
margin: 0 7px 0 0;
}

section>ul>li>strong {
display: block;
float: none;
text-align: left;
}
}

@media (max-width: 500px) {
footer {
padding: 10px;
line-height: 1;
}

footer span {
display: block;
padding: 5px;
}
}