body,input {
	font-family:"Roboto",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif
}


.tx-container {
	padding-top:1rem;
	background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: white' /></svg>") no-repeat bottom, 
		linear-gradient(to bottom, var(--md-primary-fg-color), hsla(280deg,67%,55%,1) 99%, #fff 99%)
}

.tx-hero {
	margin:0 .8rem;
	color:var(--md-primary-bg-color);
	display:flex;
	flex-direction: column;
}

.tx-hero h1 {
	margin-bottom:1rem;color:currentColor;font-weight:700
}

.tx-hero .md-button {
	width: 177px;
	text-align: center;
	margin-top:.5rem;
	margin-right:.5rem;
	color:var(--md-primary-bg-color)
}

.tx-hero .md-button--primary {
	background-color:var(--md-primary-bg-color);
	color:hsla(280deg,37%,48%,1);
	border-color:var(--md-primary-bg-color)
}

.tx-hero .md-button:focus,.tx-hero .md-button:hover {
		background-color:var(--md-accent-fg-color);
		color:var(--md-default-bg-color);
		border-color:var(--md-accent-fg-color)
}


.tx-hero__image {
	order:1;
	text-align: center;
	padding-top:50px;
}

.tx-hero__image img {
	max-width: 500px;
	width: 75%;
}


@media screen and (min-width:60em) {
	.tx-hero {
		display:flex;
		flex-direction: row;
		align-items:stretch
	}
	
	.tx-hero__content {
		max-width:19rem;margin-top:3.5rem;padding-bottom:14vw
	}
	
	.tx-hero__image {
		padding-top: 0px;
		width:28rem;
		transform:translateX(4rem)
	}
	
	.tx-hero__image img {
		max-width: 75%;
		width: 75%;
	}
	
}

@media screen and (min-width:76.25em) {
	.tx-hero__image {
		width:28rem;		
		transform:translateX(10rem)
	}
	
	.tx-hero__image img {
		max-width: 100%;
		width: 100%;
		
	}
}