body {
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff008b+0,fec88b+100 */
		background: linear-gradient(135deg,  #ff008b 0%,#fec88b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		margin: 0;
		position: relative;
		max-width: 100vw;
		background-size: cover;
		background-attachment: fixed;
		min-height: 100vh;
	}

	.container {
	    font-family: "Plus Jakarta Sans", Arial, sans-serif;
		width: 90%;
		max-width: 1600px;
		/*overflow: hidden;*/
		margin: auto;
		display: grid;
		min-height: 100vh;
		grid-template-rows: 5vw auto 1fr 1fr 1fr 1fr;
		align-items: center;
		position: relative;
		grid-template-areas:
		'x'
		'soon'
		'title'
		'form'
		'plug'
		'logo';
	}

	.soon {
		grid-area: soon;
		font-weight: 500;
		margin: 0;
	}
	.title {
		grid-area: title;
		align-self: center;
		margin: .5em 0;
		font-weight: 400;
	}
	.form-wrapper {
		grid-area: form;
		padding: 5vw 0;
	}

	/* start kevin */
	.synaptiform {
      display: flex;
      flex-wrap: wrap;
      max-width: 600px;
      width: 100%;
      /*height: 50px;*/
      margin:0;
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 8px;
    }

    .synaptiform input {
      flex: 1;
      border: none;
      padding: 0 16px;
      font-size: 16px;
      color: #555;
      background-color: white;
      outline: none;
      flex: 2 0 200px;
      height: 50px;
    }

    .synaptiform input::placeholder {
      color: #b3a9a9;
    }

    .synaptiform button {
      background-color: #222;
      color: white;
      flex: 1 0 100px;
      border: none;
      height: 50px;
      padding: 0 20px;
      font-size: 16px;
      cursor: pointer;
      white-space: nowrap;
      box-sizing: border-box;
      text-align: center;
    }

    .synaptiform button:hover {
      background-color: #000;
    }

    .error-message {
      color: #ff2d55;
      font-size: 14px;
      margin-top: 0;
    }
	.plug {
		grid-area: plug;
	}
	.plug-img {
		align-self: flex-end;
		max-width: 100%;
		max-height: 50vh;
	    justify-self: center;
	    display: block;
	}
	.logo {
		grid-area: logo;
		width: 500px;
		max-width: 100%;
		align-self: flex-start;
	    justify-self: center;
	}

	.message {
		font-size: 16px;
		font-weight: bold;
		margin-top: 0;
		padding: 4px;
		color: #fff;
	}

	.message:empty {
		display: none;
	}

	.message.error {
		border: 1px solid #f00;
		background: #fff;
		color: #f00;
	}
	@media screen and (min-width: 400px) {

		.container {
			grid-template-rows: 5vw auto auto auto auto 1fr;
		}
		.title {
			font-size: 2.5em;
		}

		.plug-img {
			min-height: 50vw;
		}
	}
	@media screen and (min-width: 1000px) {
		.container {
			grid-template-rows: auto auto 150px auto 1fr;
			grid-template-columns: 4fr 1fr;
			align-content: flex-start;
			margin-top: 5vw;
			grid-template-areas:
				'soon soon'
				'title plug'
				'form plug'
				'logo plug'
				'logo plug';
		}
		.title {
			/*width: 65vw;*/
			max-width: 14em;
			font-size: 4.5vw;
			margin:0;
		}

		.plug-img {
			position: absolute;
			top: 5vw;
			right: 0;
			height: 100%;
			max-height: 50vw;
			width: auto;
			max-width: unset;
			z-index: -1;
		}

		.form-wrapper {
			align-self: center;
			width: 35vw;
			max-width: 600px;
			margin: 4vw 0;
			/*padding-top: 4vw;
			margin-bottom: 4vw;*/
		}

		.logo {
			max-width: 30vw;
		    
		    justify-self: flex-start;
		}
	}
	@media screen and (min-width: 1200px) {
		.container {
			margin-top: 60px;
		}
		.title {
			font-size: 4.5vw;
		}
	}
	@media screen and (min-width: 1640px) {
		.title {
			font-size: 74px;
		}
		.plug-img {
			top: 80px;
			max-height: 760px;
			min-height: unset;
		}
		.form-wrapper {
			margin: 100px 0;
		}
	}
}