@font-face { font-family: "TikTokText"; src: url("../fonts/TikTokText-Regular.otf") format("OpenType"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "TikTokText-Medium"; src: url("../fonts/TikTokText-Medium.otf") format("OpenType"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "TikTokText-Bold"; src: url("../fonts/TikTokText-Bold.otf") format("OpenType"); font-weight: normal; font-style: normal; font-display: swap; }

.login-action-login {background-color: #fff; font-family: "TikTokText";}
.wp-core-ui .button.button-submit-login {width: 100%; margin-top: 16px; margin-bottom: 20px; padding: 2px 12px; background: #234141;}
.user-pass-wrap label, #login form p:nth-child(2) label {display: none;}
#login .info--wrap .information-company .image {background-image: url(../img/1.png);}
#login .info--wrap .information-company {background-color: #234141;}
#login .info--wrap { box-shadow: 0 0 60px rgba(0, 0, 0, 0.2); border-radius: 24px; overflow: hidden; width: 1000px; height: 560px;}
#login form {width: 60%; overflow: unset; padding: 0;}
#login .info--wrap .information-company {width: 40%; background-image: url(../img/map.webp); background-position: center;  background-repeat: no-repeat;  background-size: cover; position: relative; z-index: 1; justify-content: space-around; padding: 0;}
#login .info--wrap .information-company:before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #234141; opacity: 0.92; z-index: -1;}
#login form .wrapper{background-color: #fff;  border-radius: 20px;  transform: translateX(25px); z-index: 2; padding: 25px 55px 25px 25px; display: flex; flex-direction: column;}
#login .info--wrap .information-company .image {background-size: 62%; background-position: center; width: 100%;}
#login form p label {margin-top: 12px;}
#login form h3 {margin-bottom: 12px;}
.user-pass-wrap {margin-top: 6px;}
#login form p.contact .contact-title{ display: block; font-size: 16px; color: #234141; text-align: center; font-family: "TikTokText-Bold";}
#login form p.contact .separate {transform: translateY(3px); margin: 0 12px;}
#login .icon {width: 80px; height: 80px; border-radius: 50%; background-color: #fff; margin: 8px auto 0; display: flex; justify-content: center; align-items: center;}
#login .icon span {background-image: url(../img/paper-plane.png); width: 50px; height: 50px; display: block; background-repeat: no-repeat;background-size: contain; background-position: center;}
#login .text {margin: 0 auto; text-align: center;}
#login .text h4{color: #fff; font-size: 16px; font-weight: 100;}
#login .text h4:nth-child(2){margin-top: 0;}
.socials {margin: 0 auto;}
.socials a {  margin: 0 6px; color: #fff; position: relative; text-decoration: none; font-size: 13px;}
.socials a + a::before { content: ""; position: absolute; top: 60%; left: -8px; transform: translateY(-50%); width: 3px; height: 3px; border-radius: 50%; background-color: #fff;}
.wp-core-ui .button.button-submit-login {transition: .4s; border: 1px solid #234141;}
.wp-core-ui .button.button-submit-login:hover {background-color: #fff; color: #234141; background: unset;}
.login #login_error, .login .message {left: 0;}
#login {max-width: 1000px; height: calc(100% - 60px);}
#login form .contact a {text-decoration: none;}
#login form .socials  {display: none;}

@media screen and (max-width: 1024px){
	#login {width: calc(100% - 24px); padding: 0;}
	#login .info--wrap {width: 100%; height: auto; padding: 50px 0;}
	#login .info--wrap .information-company {display: none;}
	#login form .wrapper {transform: unset; padding: 12px;}
}

@media screen and (max-width: 810px) {
	#login form p.contact .contact-title + span {flex-wrap: wrap;}
	#login form p.contact .contact-title + span > span {display: block; width: 100%; text-align: center;}
	#login form p.contact .contact-title + span > .separate {display: none;}
}

@media screen and (max-width: 576px){
	#login .info--wrap {overflow: unset;}
	#login .info--wrap .information-company .image {background-size: contain; width: 36%; margin: 0 auto;}
	#login .info--wrap {padding: 0;}
	#login {width: 100%;}
	#login .info--wrap .information-company {display: flex; width: 100%; padding: 36px 0; min-height: 155px; justify-content: flex-start;}
	#login .icon {width: 60px; height: 60px; display: none;}
	#login .icon span {width: 36px; height: 36px;}
	#login .info--wrap {padding: 0; box-shadow: unset; border-radius: unset; flex-direction: column-reverse;}
	#login form {width: 100%;}
	input[type=checkbox]:checked:before { width: 25px;height: 25px; margin: -3px -5px;}
	#login .info--wrap .information-company .socials {display: none;}
	#login form .wrapper {padding: 24px 24px 12px;}
	#login form p.contact .contact-title + span > span {font-size: 15px !important;}
	#login form .wrapper {border-radius: 0;}
	#login {height: auto; min-height: calc(100vh - 65px);} 
	#login form .socials {display: block; margin-top: 5px;}
	#login form .socials a {color: #234141;}
	#login form .socials a + a::before {background-color: #234141;}
	#login form .socials a {margin: 0 4px; }
	.wp-core-ui .language-switcher .button {margin-bottom: 0;}
	.login #nav {display: none; margin: 0;}
	#login .text h4 {margin-top: 10px !important;}
	#login .text h4:nth-child(2) {margin-top: 0 !important;}
/* 	#login .text {display: none;} */
}

@media screen and (max-width: 395px) {
	#login form .wrapper {padding: 24px 12px 12px;}
}