body.login {
    border-top: 15px solid #6d1157;
	color:#5c5c5c;
    font: 13px normal Arial, Helvetica, sans-serif;
    height: 100vh;
	background: linear-gradient(-45deg, #a9458f, #6c205a, #6c205a, #a9458f);
	background-size: 400% 400%;
	animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

#login {
    margin-top: 20px;
    width: 485px;
    padding-top: 20px;
    position: relative;
    z-index: 100;
    padding-left: 15px;
    padding-right: 15px;
}

.login form {
    margin-top: 20px;
    margin-left: 0;
    padding: 35px 35px;
    font-weight: 400;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
    border-radius: 4px;
}

.login h1 {
    background: url(../images/logo.png) no-repeat center center;
    background-size: contain;
    width: 100%;
    height: 135px;
    text-indent: -9999px;
    overflow: hidden;
    display: block;
    margin-bottom: 20px;
}

.login h1 a {	
    background-image: none !important; 
    height: 100%; 
    width: 100%;
}

.login #backtoblog, 
.login #nav {
    padding: 0;
}

.login #nav a, 
.login #backtoblog a { 
    color: #cecece;
}

.login #nav a:hover, 
.login #backtoblog a:hover { 
    color:#fff; 
    text-decoration:none 
}

input[type=checkbox]:focus, input[type=color]:focus, 
input[type=date]:focus, input[type=datetime-local]:focus, 
input[type=datetime]:focus, input[type=email]:focus, 
input[type=month]:focus, input[type=number]:focus, 
input[type=password]:focus, input[type=radio]:focus, 
input[type=search]:focus, input[type=tel]:focus, 
input[type=text]:focus, input[type=time]:focus, 
input[type=url]:focus, input[type=week]:focus, 
select:focus, textarea:focus {
    border-color: #ec9fda;
    box-shadow: 0 0 2px rgb(162, 65, 139);
    outline: 2px solid transparent;
}

.wp-core-ui .button-primary {
    box-shadow: 0 1px 0 #5d2152;
    background: rgb(104, 27, 86);
    border-color: #5d2152 #5d2152 #5d2152;
    background: linear-gradient(0deg, rgb(104, 27, 86) 0%, rgb(142, 51, 121) 100%);
    text-shadow: none;
}

.wp-core-ui .button-primary.focus, 
.wp-core-ui .button-primary.hover, 
.wp-core-ui .button-primary:focus, 
.wp-core-ui .button-primary:hover {
    background: #772564;
    border-color: #71215f;
}

.wp-core-ui .button-primary.focus, 
.wp-core-ui .button-primary:focus {
    box-shadow: 0 1px 0 #5d174e, 0 0 2px 1px #5d174e;
}

.login form .forgetmenot {
    margin-bottom: 0;
    float: none;
}

.wp-core-ui .button-group.button-large .button, 
.wp-core-ui .button.button-large {
    height: auto;
    line-height: auto;
    padding: 10px 15px 10px 15px;
}

.wp-core-ui .button {
    font-size: 16px;
    height: auto;
    line-height: auto;
    width: 100%;
    padding: 10px 15px;
    margin-top: 20px;
}

.login #login_error, 
.login .message, 
.login .success {
    border-left: 4px solid #6c1e59;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
}

#login #nav a.ce {
    float:right;
	text-indent: -9990em;
    width: 65px;
    height: 65px;
    background: #fff url(../images/logo-dd.png) no-repeat;
    background-position: center center;
    border-radius: 50%;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);

    -webkit-animation: shake 5s infinite;    
    -ms-animation: shake 5s infinite;    
    -moz-animation: shake 5s infinite;    
    -o-animation: shake 5s infinite;    
    animation: shake 5s infinite;

    -webkit-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;

    -webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

#login #nav a.ce:focus {
    box-shadow: 0 0 0 1px #742361, 0 0 2px 1px rgb(109, 31, 91);
}
  
@-webkit-keyframes shake {
    0%  { -webkit-transform: translate(2px, 1px) rotate(0deg); }
    10% { -webkit-transform: translate(-1px, -2px) rotate(-2deg); }
    20% { -webkit-transform: translate(-3px, 0px) rotate(3deg); }
    30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
    40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
    50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
    60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
    70% { -webkit-transform: translate(2px, 1px) rotate(-2deg); }
    80% { -webkit-transform: translate(-1px, -1px) rotate(3deg); }
    90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
    100%{ -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
@-ms-keyframes shake {
    0%  { -ms-transform: translate(2px, 1px) rotate(0deg); }
    10% { -ms-transform: translate(-1px, -2px) rotate(-2deg); }
    20% { -ms-transform: translate(-3px, 0px) rotate(3deg); }
    30% { -ms-transform: translate(0px, 2px) rotate(0deg); }
    40% { -ms-transform: translate(1px, -1px) rotate(1deg); }
    50% { -ms-transform: translate(-1px, 2px) rotate(-1deg); }
    60% { -ms-transform: translate(-3px, 1px) rotate(0deg); }
    70% { -ms-transform: translate(2px, 1px) rotate(-2deg); }
    80% { -ms-transform: translate(-1px, -1px) rotate(3deg); }
    90% { -ms-transform: translate(2px, 2px) rotate(0deg); }
    100%{ -ms-transform: translate(1px, -2px) rotate(-1deg); }
  }
@-moz-keyframes shake {
    0%  { -moz-transform: translate(2px, 1px) rotate(0deg); }
    10% { -moz-transform: translate(-1px, -2px) rotate(-2deg); }
    20% { -moz-transform: translate(-3px, 0px) rotate(3deg); }
    30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
    40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
    50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
    60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
    70% { -moz-transform: translate(2px, 1px) rotate(-2deg); }
    80% { -moz-transform: translate(-1px, -1px) rotate(3deg); }
    90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
    100%{ -moz-transform: translate(1px, -2px) rotate(-1deg); }
}

@-o-keyframes shake {
    0%  { -o-transform: translate(2px, 1px) rotate(0deg); }
    10% { -o-transform: translate(-1px, -2px) rotate(-2deg); }
    20% { -o-transform: translate(-3px, 0px) rotate(3deg); }
    30% { -o-transform: translate(0px, 2px) rotate(0deg); }
    40% { -o-transform: translate(1px, -1px) rotate(1deg); }
    50% { -o-transform: translate(-1px, 2px) rotate(-1deg); }
    60% { -o-transform: translate(-3px, 1px) rotate(0deg); }
    70% { -o-transform: translate(2px, 1px) rotate(-2deg); }
    80% { -o-transform: translate(-1px, -1px) rotate(3deg); }
    90% { -o-transform: translate(2px, 2px) rotate(0deg); }
    100%{ -o-transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes shake {
    0%  { transform: translate(2px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-2deg); }
    20% { transform: translate(-3px, 0px) rotate(3deg); }
    30% { transform: translate(0px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(2px, 1px) rotate(-2deg); }
    80% { transform: translate(-1px, -1px) rotate(3deg); }
    90% { transform: translate(2px, 2px) rotate(0deg); }
    100%{ transform: translate(1px, -2px) rotate(-1deg); }
}

@media (max-width: 767.98px) { 
    #login {
        width: 100%;
    }
    .login h1 {
        height: 120px;
    }
}