#wrapper > article.login {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
    overflow: hidden;
}

article.login .wrapper {
	width: auto !important;
	position: relative;
}

#login-container > section > a.loginCrossLinks {
	position: absolute;
	top:1.6em;
	right:3ex;
}

article.login.register #login-container{
    transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}

#login-container, section#login, section#register {
	height: 25.5em;
	width: 33ex;
	margin: 0;
	box-sizing: border-box;
}

#login-container {
	transition: 0.6s;
    transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	position: relative;
	margin: auto;
}

section#login {
	z-index: 2;
	/* for firefox 31 */
    transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
}

section#register {
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}

section#login form, section#register form, section#login input, section#register input {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

form input[type=submit] {
    transition: background 0.3s;
}

form:valid input[type=submit] {
    background: #060;
}

#login-result, #register-result {
    margin: 1em 0 0 0;
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: 2em;
}

section#login, section#register {
    display: flex;
    flex-direction: column;
    background: #333;
    padding: 0 3ex 2ex 3ex;
    box-shadow: 0 2px 8px #000;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

section#login label, section#register label {
    display: block;
    margin: 2ex 0;
}

section#social-login:before {
    content: 'or login with a social network:';
    display: block;
    margin-top: 1em;
}

section#social-login>p {
    display: inline;
}

div#wrapper.login>header {
	display: none;
}

article.login>header {
    width:100%;
	flex: 1;
    -webkit-flex: 1;
	max-width: 12em;
	margin-bottom: 1ex;
    position: relative;
    display: flex;
    align-items: center;
}

article.login>header>a {
    display:block;
	background: url('/content/images/logo.svg') center no-repeat;
    width:100%;
    max-width: 12em;
    position: absolute;
}

article.login>header>a>h1 {
    text-indent: -3000vw;
}

article.login:after {
    content: "";
    flex: 1;
    -webkit-flex: 1;
}

article.login #blocker{
    visibility: hidden;
    width: 100%;
    height: 100%;
    background: rgba(127, 127, 127, 0.7);
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    transition: visibility 0.4s, opacity 0.4s;
}

article.login #blocker.block {
    visibility: visible;
    opacity: 1;
}


.login_conflict ul#resolve_options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction:row;
    justify-content: center;
    align-items: stretch;
}

.login_conflict ul#resolve_options>li{
	margin: 1%;
	border-radius: 1em;
	padding: 1em;
	flex: 1;
	box-shadow: 0 1px 4px #000, inset 0 0 10px #000;
}

#different_method {
	background: #2ba545;
}
#different_name {
	background: #3b5998;
}

.login_conflict ul#resolve_options>li>a {
	text-decoration: none;
	color: #fff;
	text-align: center;
	text-shadow: 0 1px 1px rgba(0,0,0,0.5);
	cursor: pointer;
}

.login_conflict ul#resolve_options>li h2{
	font-size: 125%;
	margin-top: 0;
	color:#fe0;
}

@media (max-width: 450px) {
	.login_conflict ul#resolve_options {
		flex-direction:column;
	}
}