@charset "utf-8";

#scratch-card {
	position: relative;
	display: flex;
    margin-top: 20px;
	min-height: 400px;
	justify-content: center;
	align-items: center;
}

	.scratch-card-left {
		flex: 0 0 500px;
	}
	
		.scratch-card-left i {
			color: #be372e;
			vertical-align: bottom;
			margin-bottom: 2px;
		}

	.scratch-card-right {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		flex: 0 0 500px;
		margin: 0;
	}

		.scratch-card {
			position: relative;
			width: 500px;
			max-width: 95vw;
		}

		.scratch-card img {
			width: 100%;
			display: block;
		}

		#scratchCanvas {
			position: absolute;
			top: 112px;
			left: 175px;
			width: 264px;
			height: 89px;
			transform: rotate(2deg);
			cursor: pointer;
		}

@media screen and (max-width: 1024px) {
	#scratch-card {
		padding: 30px;
		flex-direction: column;
	}
	
		.scratch-card {
			width: 400px;
		}
		
		.scratch-card-right {
			padding: 40px 0;
			flex: initial;
		}
		
		#scratchCanvas {
		    top: 50%;
			left: 50%;
			width: 210px;
			height: 70px;
			margin-left: -60px;
			margin-top: -20px;
		}
}

#contact-section {
	position: relative;
    text-align: center;
    background: #f3be22;
    padding: 40px 0;
    margin: 0 26px;
	color: #222;
    min-height: 200px;
    height: auto;
    z-index: 1;
}

	#contact-section .content-wrap {
		margin: 60px auto;
	}
	
	.contact-form {
		margin-top: 20px;
	}
	
		.contact-form .double {
			display: flex;
			gap: 20px;
			align-items: center;
		}
		
		.contact-form .double>div {
			flex: 1;
		}
		
		.contact-form .single {
			margin-top: 20px;
		}
		
		.contact-input {
			font: 400 14px 'Source Sans Pro', sans-serif;
			width: 100%;
			padding: 10px;
			background-color: #fff;
			border: 1px dotted #ccc;
		}

		.contact-textarea {
			resize: none;
			height: 100px;
		}
		
	.contact-paragraph {
		margin-top: 20px;
	}
	
		.contact-paragraph a {
			color: #be372e;
			text-decoration: underline;
		}
		
		.contact-paragraph a:hover {
			color: #be372e;
		}

.generic-button {
	display: inline-block;
	cursor: pointer;
	font: 400 16px 'Source Sans Pro', sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 10px 20px;
	background-color: #be372e;
	color: #fff;
	text-align: center;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
}

.generic-button i {
	font-size: 26px;
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 1px;
}

.generic-button:hover {
	background-color: #ad2c24;
}

.generic-button.disabled {
	background-color: #eee;
    color: #999;
    cursor: default;
}

@media screen and (max-width: 1024px) {
	.generic-button {
		font: 400 12px 'Source Sans Pro', sans-serif;
		padding: 10px 10px;
	}
}

.site-frame {
  position: fixed;
  inset: 0;
  pointer-events: none;
  margin: 20px;
  z-index: 999999;
}

body {
	background-color: #f4f4f4;
}