html {
    background: #383f47;
    color: #86b6dd;
    font-family: Comfortaa, monospace;
    min-height: 100%;
    height: 100%;
}
body {
    min-height: 100%;
    position: relative;
	display: -ms-flexbox;
    display: flex;
	-ms-flex-direction: column;
    flex-direction: column;
	-ms-flex-pack: center;
    justify-content: center;
}
.content {
    text-align: center;
	padding: 3rem 0
}
.logo {
	display: -ms-inline-flexbox;
    display: inline-flex;
	-ms-flex-direction: column;
    flex-direction: column;
	transform: translate3d(0, 25px, 0);
	visibility: hidden;
	opacity: 0;
}
.logo-title {
    font-size: 2em;
    margin: 0;
}
.logo-subtitle {
    margin: 0;
    font-size: 0.75em;
    display: inline-block;
    position: relative;
}
.logo-subtitle:before {
	content: '';
	display: block;
	border-bottom: 1px solid #86adb6;
	position: absolute;
	top: 50%;
	left: 3px;
	right: 3px;
}
.logo-subtitle span{
    display: inline-block;
    position: relative;
    z-index: 3;
    background: #383f47;
    padding-left: 5px;
    padding-right: 5px;
}
.links {
    list-style: none;
    margin: 3rem 0 0;
    padding: 0 0 0 34px;
}
.links li {
    padding: 0.75rem 0;
}
.links li a {
    color: #cfe8eb;
    text-decoration: none;
    display: inline-block;
    position: relative;
	transform: translate3d(0, 25px, 0);
	visibility: hidden;
	opacity: 0;
	
}
.links li a:before {
	content: '';
	display: block;
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	left: -34px;
	margin-top: -12px;
	background-position: center;
	background-size: contain;
}
.links li a.link-skype:before 	  { background-image: url(icons/skype.svg) }
.links li a.link-vk:before 		  { background-image: url(icons/vk.svg) }
.links li a.link-email:before 	  { background-image: url(icons/envelope.svg) }
.links li a.link-forum:before 	  { background-image: url(icons/simpla.svg) }
.links li a.link-templates:before { background-image: url(icons/templates.svg) }
.links li a.link-pornhub:before   { background-image: url(icons/pornhub-2.svg) }
.links li a span {
	transition: color .3s ease
}
.links li a span:hover {
	color: #ffe792
}
.footer {
    text-align: center;
    padding: 0 25px 3rem;
    font-size: 0.75em;
    color: #74889e;
	visibility: hidden;
	opacity: 0;
	
}
.state-ready .logo,
.state-ready .link,
.state-ready .footer {
	transition: all .3s ease;
    transform: translate3d(0, 0, 0);
	visibility: visible;
	opacity: 1;
}
.state-ready .footer {
	transition-delay: 1.3s;
}
.state-ready .links li a.link-skype 	{ transition-delay: .4s }
.state-ready .links li a.link-vk 	    { transition-delay: .5s }
.state-ready .links li a.link-pornhub   { transition-delay: .6s }
.state-ready .links li a.link-email 	{ transition-delay: .7s }
.state-ready .links li a.link-forum 	{ transition-delay: .8s }
.state-ready .links li a.link-templates	{ transition-delay: .9s }

@media (min-width: 576px) {
	.footer {
		position: absolute;
		bottom: 2rem;
		left: 0;
		right: 0;
	}

}

@media (min-width: 992px) {
	.content {
		display: -ms-flexbox;
		display: flex;
		height: 100%;
		justify-content: center;
		align-items: center;
	}
	.content-left {
		padding-right: 5rem;
	}
	.content-right {
		text-align: left;
	}
	.logo {
		transform: translate3d(-25px, 0, 0);
	}
	.links {
		margin-top: 0
	}
	.links li a {
		transform: translate3d(25px, 0, 0);
	}
}

@media (min-width: 1200px) {
	.logo-title {
		font-size: 3em;
		font-weight: 300;
	}
	.logo-subtitle {
		font-size: 1em;
	}

}