@import url('https://fonts.googleapis.com/css?family=Rajdhani:500,700&display=swap');
 *, *:before, *:after {
	 box-sizing: border-box;
}
 body {
	 align-items: center;
	 background: linear-gradient(145deg, #eef5ff 0%, #f8fbff 52%, #edf3fb 100%);
	 display: flex;
	 font-family: 'Rajdhani', sans-serif;
	 min-height: 100vh;
	 justify-content: center;
	 margin: 0;
	 padding: 1.5rem;
}
 .contact-wrapper {
	 background: #fff;
	 border: 1px solid #dfe9f5;
	 box-shadow: 0 24px 65px rgba(31, 70, 120, .14);
	 border-radius: 1em;
	 padding: clamp(1.5rem, 5vw, 2.25rem);
	 width: min(100%, 25em);
}
 .login-cta > h2 {
	 color: #3e3f5e;
	 font-size: 1.75rem;
	 text-align: center;
}
 .socials-wrapper > header > h2 {
	 background: #fff;
	 color: #3e3f5e;
	 font-size: 1rem;
	 position: relative;
	 text-align: center;
	 z-index: 10;
}
 .socials-wrapper > header > h2:after, .socials-wrapper > header > h2:before {
	 background: #d3d3e2;
	 content: '';
	 display: block;
	 height: 0.1em;
	 position: absolute;
	 top: 50%;
	 transform: translatey(-50%);
	 width: 17.5%;
}
 .socials-wrapper > header > h2:after {
	 right: 0;
}
 .socials-wrapper > header > h2:before {
	 left: 0;
}
 .socials-wrapper > ul {
	 display: flex;
	 list-style: none;
	 justify-content: center;
	 padding: 0;
}
 .socials-wrapper > ul > li {
	 margin: 0.5em;
}
 .socials-wrapper > ul > li > a {
	 align-items: center;
	 border-radius: 0.5em;
	 color: #fff;
	 display: flex;
	 height: 2em;
	 justify-content: center;
	 text-align: center;
	 text-decoration: none;
	 transition: all 300ms ease;
	 width: 2em;
}

 form {
	 margin: 2em 0;
}
 form > .form-row {
	 display: flex;
	 margin: 0.75em 0;
	 position: relative;
}
 form > .form-row > span {
	 background: #fff;
	 color: #adafca;
	 display: inline-block;
	 font-weight: 400;
	 left: 1em;
	 padding: 0 0.5em;
	 position: absolute;
	 pointer-events: none;
	 transform: translatey(-50%);
	 top: 50%;
	 transition: all 300ms ease;
	 user-select: none;
}
 form > .form-row > input, form > .form-row > button {
	 border-radius: 0.5em;
	 font-family: inherit;
	 padding: 1em 0.5em;
	 width: 100%;
}
 form > .form-row > input {
	 background: #fbfdff;
	 color: #173253;
	 font-weight: bold;
	 transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
	 width: 100%;
}
 form > .form-row > input[type=email], form > .form-row > input[type=password] {
	 border: 0.075em solid #ddd;
}
 form > .form-row > input:valid + span {
	 top: 0;
	 font-size: 0.9rem;
}
 form > .form-row > input:invalid + span {
	 top: 50%;
}
 form > .form-row > input:focus + span {
	 top: 0;
}
 form > .form-row > input:required {
	 box-shadow: none;
}
 form > .form-row > input:focus {
	 border-color: #1769e8;
	 background: #fff;
	 box-shadow: 0 0 0 0.2rem rgba(23, 105, 232, .1);
	 outline: none;
}
 form > .form-row > input:focus:invalid {
	 box-shadow: none;
	 top: 50%;
}
 form > .form-row > input:focus:valid {
	 top: 0;
}
 form > .form-row > button {
	 min-height: 3.25rem;
	 background-color: #1769e8;
	 border: 0.1em solid #1769e8;
	 color: #fff;
	 cursor: pointer;
	 font-weight: bold;
	 transition: all 300ms ease;
}
 form > .form-row > button:focus {
	 border: 0.1em solid #532cf8;
	 outline: none;
}
 form > .form-row > button:hover {
	 background-color: #0d4fc1;
	 border-color: #0d4fc1;
}

.invalid-feedback{
     display: block;
     color: #d83c50;
     font-size: .9rem;
     font-weight: 700;
}

@media (max-width: 480px) {
	body { align-items: flex-start; padding: 1rem; }
	.contact-wrapper { margin-top: 4vh; }
	form { margin-bottom: 0; }
}