@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');

* {
  box-sizing: border-box;
}

body {
  position:relative;
  top:0px;
  left:0px;
  margin:0px;
  width:100%;
  height:100%;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: 'Montserrat', sans-serif;
  height: 100vh;
  width:100vw;
}
#background-image-login{
  position: absolute;
  width: 100%;
  height:100%;
  background-image: url(../../files/others/wallpaper_login.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
h1 {
  font-weight: bold;
  margin: 0;
  z-index: 3;
}
#titulo{
  color:#fff;
  margin-top: -20px;
}
#subtitulo{
  margin-bottom: 20px;
  margin-top: 1px;
  color:#fff;
  z-index: 3;
  font-weight: 400;
}
h2 {
  text-align: center;
}
p {
  font-size: 14px;
  font-weight: 100;
  line-height: 20px;
  letter-spacing: 0.5px;
  margin: 20px 0 30px;
}
span {
  font-size: 12px;
}
a {
  color: #333;
  font-size: 14px;
  text-decoration: none;
  margin: 15px 0;
}
button {
  border-radius: 20px;
  border: 1px solid #085fa1;
  background-color: #085fa1;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: bold;
  padding: 12px 45px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor:pointer;
  transition: transform 80ms ease-in;
  margin-top:20px;
}
button:active {transform: scale(0.95);}
button:focus {outline: none;}
button.ghost {
background-color: transparent;
border-color: #FFFFFF;
}
form {
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
}
.container {
background-color: #fff;
border-radius: 3px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25),
    0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 900px;
max-width: 100%;
min-height: 550px;
user-select: none;
}
.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.sign-in-container {
left: 0;
width: 50%;
z-index: 2;
}
.container.right-panel-active .sign-in-container {
transform: translateX(100%);
}
.sign-up-container {
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.container.right-panel-active .sign-up-container {
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}
@keyframes show {
  0%, 49.99% {
    opacity: 0;
    z-index: 1;
  }
  50%, 100% {
    opacity: 1;
    z-index: 5;
  }
}
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.container.right-panel-active .overlay-container{transform: translateX(-100%);}
.overlay {
background: #085fa1;
background: -webkit-linear-gradient(to right, #0079e8, #085fa1);
background: linear-gradient(to right, #0079e8, #085fa1);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #FFFFFF;
position: relative;
left: -100%;
height: 100%;
width: 200%;
  transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.container.right-panel-active .overlay {transform: translateX(50%);}
.overlay-panel {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left {transform: translateX(-20%);}
.container.right-panel-active .overlay-left {transform: translateX(0);}
.overlay-right {
right: 0;
transform: translateX(0);
}
.container.right-panel-active .overlay-right {transform: translateX(20%);}
.social-container {margin: 20px 0;}
.social{
border: 1px solid #dddddd;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
color:#606060;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
}
.social.linkedin:hover{
background-color: #0077B5;
border: 1px solid #0077B5;
color:#fff;
}
.social.google:hover{
background-color: #D44C3D;
border: 1px solid #D44C3D;
color:#fff;
}
.social.facebook:hover{
background-color: #3B5998;
border: 1px solid #3B5998;
color:#fff;
}
.esqueceu_login{
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}
.esqueceu_login:hover{
color:#0077b5
}
.esqueceu_login:hover .linha_esqueceu{
  margin-left:-4px;
  width: 145px;
  height: 1px;
  border-radius: 10PX;
}
.linha_esqueceu{
  position: absolute;
  margin-top:18px;
  margin-left:60px;
  width: 0px;
  height: 1px;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  background-color: #0077b5;
  border-radius: 10PX;
}
/* ESTILIZAÇAO DAS INPUTS */
.join_inputs_default{
  position: relative;
  display: inline-flex;
  height: 40px;
  width: calc(100% - 20px);
  margin: 15px 5px;
}
.tittle_input{
  position: absolute;
  top:10px;
  left:30px;
  font-size: 16px;
  color:#909090;
  background-color: #fff;
  transition:ease 0.2s;
  z-index: 3;
  pointer-events: none
}
.style_input{
  position: relative;
  width:100%;
  height:100%;
  border:0px solid #b0b0b0;
  border:1px solid #b0b0b0;
  color:#505050;
  border-radius: 2px;
	padding:0px 20px 0px 20px;
	font-size: 14px;
	font-weight: bold;
  background-color: transparent;
  transition-duration:0.2s;
	transform-origin: center;
  z-index: 2;
}
.style_input:focus{
  outline:none;
	border:1px solid #909090;
}
.style_input:focus ~ .tittle_input,
.style_input:valid ~ .tittle_input{
  top:-10px;
  left:13px;
  font-size:11px;
  z-index: 3;
  padding: 0px 10px;
  background-color: #fff;
}
.contacts_kraenel{
  position: relative;
  width: 100%;
  height: 230px;
  top:30px;
  font-size: 14px;
}
.div_join_data_contact{
	position: relative;
	width: 100%;
	height: 70px;
	margin: 20px 0px;
	padding: 5px 10px 10px 40px;
	line-height: 29px;
}
.icon_data_contact{
	position: absolute;
	height: 100%;
	width: 30px;
	left:0px;
	top:0px;
	color:#404040;
	stroke-width:1.2;
}
/* ESTILIZAÇAO DAS INPUTS */