@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,900|Poppins:400,500');
	* {
	  margin: 0;
	  padding: 0;
	  text-decoration: none;
	  box-sizing: border-box;
	  -webkit-tap-highlight-color:rgba(0,0,0,0);
	  -webkit-text-size-adjust:none;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	body {
	  margin: 0;
	  padding: 0;
	  background: #f6f6f6;
	  font-family: 'Poppins', sans-serif;
	  overflow-x: hidden;
	  height: 100%;
	  margin: auto;
	  -webkit-box-align: center;
	      -ms-flex-align: center;
	          align-items: center;
	  display: -webkit-box;
	  display: -ms-flexbox;
	  display: flex;
	  -webkit-box-pack: center;
	      -ms-flex-pack: center;
	          justify-content: center;
	  flex-flow: row wrap;
	  -ms-flex-flow: row wrap;
	}

	img {
		max-width: 100%;
	}

	.app {
	  background-color: #fff;
	  width: 100%;
	  height: 100%;
	  margin: 0 auto;
	  border-radius: 5px;
	  padding: 1em;
	  position: relative;
	  overflow: hidden;
	  box-shadow: 0 6px 31px -2px rgba(0, 0, 0, .3);
	}

	a {
		text-decoration: none;
		color: #ffffff;
	}

	p {
		font-size: 13px;
		color: #fff;
		line-height: 2;
	}
		.light {
			text-align: center;
			color: #fff;
		}
			.light a {
				color: #fff;
			}

	.bg {
		width: 100%;
		height: 100%;
		background: #257aa6;
		position: absolute;
		top: -5em;
		left: 0;
		right: 0;
		margin: auto;
		background-image: url("https://png.pngtree.com/thumb_back/fw800/background/20190221/ourmid/pngtree-blue-creative-gradient-decoration-image_11175.jpg");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		-webkit-clip-path: ellipse(69% 46% at 48% 46%);
		clip-path: ellipse(69% 46% at 48% 46%);
	}
    .input-group {
        position: relative;
        display: flex;
        align-items: stretch;
        width: 100%;
        margin: 10px 0;
        flex-wrap: nowrap;
    }
    .input-group-text {
        display: flex;
        align-items: center;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #009ec0;
        text-align: center;
        white-space: nowrap;
        background-color: rgb(255 255 255 / 52%);
        border: none;
        border-radius: 25px;
    }
	form {
		/* position: absolute; */
		/* top: 0; */
		/* left: 0; */
		/* right: 0; */
		/* width: 100%; */
		text-align: center;
		padding: 15px 10px;
	}

	header {
	    width: 220px;
	    height: 220px;
	    margin: 0em auto;
	  }

	form input, select {
	    width: 100%;
	    padding: 13px 15px;
	    border-radius: 100px;
	    border: none;
	    background: rgb(255 255 255 / 47%);
	    font-family: 'Poppins', sans-serif;
	    outline: none;
	    color: #000;
	    border-left: 0;
	}
	input::placeholder {
	    color: #fff;
	    font-size: 13px;
	}

	.inputs {
		margin-top: -4em;
	}

	footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 14px 20px;
		text-align: center;
	}

	button {
		width: 100%;
		padding: 13px 15px;
		border-radius: 100px;
		border: none;
		background: #004ec1;
		font-family: 'Poppins', sans-serif;
		outline: none;
		color: #fff;
	}
	
	@media screen and (max-width: 640px) {
			.app {
				width: 100%;
				height: 100%;
				border-radius: 0;
			}

			.bg {
				top: -7em;
				width: 100%;
				height: 100%;
			}
			header {
				width: 40%;
				height: 156px;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 25px;
			}
			.inputs {
				margin: 0;
			}
			input, button {
				padding: 18px 15px;
			}
		}