@charset "utf-8";
/* Wordpress Custom Login CSS by olikdesign.de */
@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,700');

:root {
	--trans: all .2s ease;
	--brandclr: #eb5250;
	--sectionbg: #e4ebf0;
	--darkclr: #21303b;
}

		body #login {
			width:100%;
			max-width:800px;
		}
        body.login {
			background: rgb(255,255,255);
			background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(228,235,240,1) 100%);
			background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(228,235,240,1) 100%);
			background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(228,235,240,1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e4ebf0',GradientType=1 );
			font-family: 'Ubuntu', sans-serif;
		}
		body.login div#login form#loginform, body.login div#login form#lostpasswordform {
				position: relative;
				background:url(login_img/bg.jpg) no-repeat left #fff;
				padding: 80px;
				padding-left:380px;
				box-shadow: 0 3px 50px rgba(33,48,59,0.1);
				border-radius:4px;
		}

		body #login form p, body #login form .user-pass-wrap {
			position:relative;
		}
		body.login div#login form#loginform p label, body.login div#login form#lostpasswordform p label {
			color:#213036;
			font-size:16px;
		}
		body #login .button.wp-hide-pw {
			display:none !important;
		}
		body.login div#login form#loginform input, body.login div#login form#lostpasswordform input {
			background:none;
			box-shadow:none;
			border:none;
			border-bottom:2px solid #213036;
			border-radius: 0;
			color:#971855;
			padding-right:25px;
		}
		body.login div#login form#loginform input:focus, body.login div#login form#lostpasswordform input:focus, body.login div#login form#loginform input:hover, body.login div#login form#lostpasswordform input:hover {
			border-color:#971855;
		}
		body.login div#login form#loginform label[for=user_login]:after {
			font-family:'Font Awesome 5 Free';
			content:'\f007';
			color:#213036;
			font-size:20px;
			position:absolute;
			top: 25px;
			right:5px;
			font-weight:normal;
		}
		body.login div#login form#loginform label[for=user_pass]:after {
			font-family:'Font Awesome 5 Free';
			content:'\f084';
			color:#213036;
			font-size:20px;
			position:absolute;
			top: 25px;
			right:5px;
			font-weight:normal;
			-webkit-transform: rotate(90deg);
		    -moz-transform: rotate(90deg);
            -o-transform: rotate(90deg);
		    -ms-transform: rotate(90deg);
		    transform: rotate(90deg);
		}
		body.login div#login form#loginform input#rememberme {
			border:2px solid #213036;
		}
		body.login div#login form#loginform input#rememberme[type="checkbox"]:checked::before { 
			color:#971855;
			margin: -4px 0 0 -5px;
			font: normal 21px/1 dashicons;
		}
		body.login div#login form#loginform p.forgetmenot label {
			font-size:14px;
		}
		body.login div#login form#loginform p.submit input#wp-submit, body.login div#login form#lostpasswordform p.submit input#wp-submit {
	background: #971855;
	background: -moz-linear-gradient(left, #971855 2%, #b91d68 99%);
	background: -webkit-linear-gradient(left, #971855 2%,#b91d68 99%);
	background: linear-gradient(to right, #971855 2%,#b91d68 99%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#971855', endColorstr='#b91d68',GradientType=1 );
	box-shadow: 0px 0px 30px rgba(207, 32, 117, 0.4);
	border:none;
	border-radius:50px;
	color:#fff;
	text-shadow:none;
	font-weight:600;
	text-transform:uppercase;
	font-size:12px;
	letter-spacing: .1em;
	height:auto;
	width:auto;
	padding:5px 20px;
	line-height:25px;
	display:inline-block;
	-webkit-transition: all .2s ease-out;  
	-moz-transition: all .2s ease-out;  
	-o-transition: all .2s ease-out;  
	transition: all .2s ease-out;  	
		}
		body.login div#login form#loginform p.submit input#wp-submit:hover, body.login div#login form#lostpasswordform p.submit input#wp-submit:hover {
	-moz-box-shadow: 0px 0px 30px rgba(207, 32, 117, 0.6), inset 0 2px 20px #df3084;
	-webkit-box-shadow: 0px 0px 30px rgba(207, 32, 117, 0.6), inset 0 2px 20px #df3084;
	box-shadow: 0px 0px 30px rgba(207, 32, 117, 0.6), inset 0 2px 20px #df3084;
	padding:4px 20px 6px 20px;
	text-shadow:1px 2px 4px #cb4442;
	text-decoration:none;
		}
		body.login div#login p#nav {
			float:left;
			width:50%;
			padding:0;
			margin:16px 0;
			z-index:2;
			position:relative;
		}
		body.login div#login p#backtoblog {
			float:left;
			width:50%;
			padding:0;
			text-align:right;
			z-index:2;
			position:relative;
		}
		body.login div#login p#nav a, body.login div#login p#backtoblog a {
			color:#213036;
			font-weight:600;
		}
		body.login #login_error, body.login .message, body.login .success {
			border-left: 4px solid #213036;
			background:#fff;
			color:#213036;
			-webkit-box-shadow: 0 1px 1px 0 rgba(115,149,173,.1);
			-moz-box-shadow: 0 1px 1px 0 rgba(115,149,173,.1);
			box-shadow: 0 1px 1px 0 rgba(115,149,173,.1);
			position:relative;
			z-index:2;
		}
		body.login #login_error {
			border-left: 4px solid #ee6664;
		}
		body.login .success {
			border-left: 4px solid #9ae6a7;
		}
		body.login input[type="checkbox"], body.login input[type="radio"] {
			width:16px;
			height: 16px;
		}
		
		#login h1 {
			padding-left:300px;
		}
		#login h1 a, .login h1 a {
            background-image:url(site-login-logo.png);
			height:65px;
			width:100%;
			background-size: 320px 65px;
			background-repeat: no-repeat;
        	padding-bottom: 30px;
			text-indent:inherit;
			line-height:6.2em;
			font-weight:600;
			color:#213036;
			font-size: 25px;
			position: relative;
			z-index:2;

        }

/* ############# */
/* MEDIA QUERIES */
/* ############# */

@media only screen and (max-width: 1024px) {
		body #login {
			width:100%;
			max-width:700px;
		}
		#login h1 {
			padding-left:200px;
		}		
		body.login div#login form#loginform, body.login div#login form#lostpasswordform {
			background-position:-100px;
			padding-left:280px;
		}
}
@media only screen and (max-width: 768px) {
		body #login {
			width:100%;
			max-width:550px;
		}
		#login h1 {
			padding-left:0px;
		}	
		body.login div#login form#loginform, body.login div#login form#lostpasswordform {
			background-position:-150px;
			padding:40px;
			padding-left:190px;
		}		
}
@media only screen and (max-width: 568px) {
		body #login {
			width:100%;
			max-width:320px;
		}
		body.login div#login form#loginform, body.login div#login form#lostpasswordform {
			background:#fff;
			border-top:20px solid #971855;
			padding:20px;
		}	
		body.login div#login form#loginform p label, body.login div#login form#lostpasswordform p label {
			font-size:14px;
		}
		body.login div#login form#loginform p.forgetmenot label {
			font-size:12px;
		}
		#login h1 a, .login h1 a {
			font-size: 18px;
			line-height:9em;
		}
}