@media (min-width: 500px) {
  .modal-dialog {
    max-width: 500px;
	overflow: auto;
  }
}

@media (max-width: 900px) {
  .modal-dialog {
    max-width: 380px;
	margin: 10px auto;
  }
}


	.inputConnect { margin-top: 0; font-style: italic; font-size: 14px!important; font-weight: bold; }


	.name h1{ display: inline-block; font-family: Arial, Verdana, helvetica, sans-serif; font-size: 14px; text-transform: uppercase; font-weight: bold; margin: 0 0 10px 0; text-align: center; color: #000;  }


	.wrapperModal {
		max-width: 80%;
		min-height: 80%;
		margin: 0 auto;
		padding: 40px 30px 30px 30px;
		background-color: #fff;
	}

	.logo {
		width: 80px;
		margin: auto;
	}

	.logo img {
		width: 100%;
		height: 80px;
		object-fit: cover;
		border-radius: 50%;
		box-shadow: 0px 0px 3px #5f5f5f,
			0px 0px 0px 5px #ecf0f3,
			8px 8px 15px #a7aaa7,
			-8px -8px 15px #fff;
	}

	.wrapperModal .name {
		font-weight: 600;
		font-size: 1.4rem;
		letter-spacing: 1.3px;
		padding-left: 10px;
		color: #555;
	}

	.wrapperModal .form-field input {
		width: 100%;
		display: block;
		border: none;
		outline: none;
		background: none;
		font-size: 1.2rem;
		color: #666;
		padding: 10px 15px 10px 10px;
		/* border: 1px solid red; */
	}

	.wrapperModal .form-field {
		padding-left: 10px;
		margin-bottom: 20px;
		border-radius: 20px;
		box-shadow: inset 4px 4px 4px #cbced1, inset -4px -4px 4px #fff;
	}

	.wrapperModal .form-field .fas {
		color: #555;
	}

	.wrapperModal .btn {
		box-shadow: none;
		width: 100%;
		height: 40px;
		/*background-color: #03A9F4;*/
		/*color: #fff;*/
		border-radius: 25px;
		box-shadow: 3px 3px 3px #b1b1b1,
			-3px -3px 3px #fff;
		letter-spacing: 1.3px;
	}

	.wrapperModal .btn:hover {
		background-color: #039BE5;
	}

	.wrapperModal a {
		text-decoration: none;
		font-size: 0.8rem;
		color: #03A9F4;
	}

	.wrapperModal a:hover {
		color: #039BE5;
	}

	@media(max-width: 90%) {
		.wrapperModal {
			margin: 30px 20px;
			padding: 40px 15px 15px 15px;
		}
	}