/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	section {
		min-height: 100vh;
		padding: 2em .5em;
		border-radius: 0;
		box-sizing: border-box;
	}

	form .form-row {
		flex-direction: column;
	}

	form .form-col {
		margin: 10px 0;
	}

	form input[type=number]{
		width: 93%;
	}

	form .txt-label{
		font-size: 13pt;
	}

	.checkmark {
		width: 15px;
		height: 15px;
		border-radius: 3px;
		margin-right: 15px;
	}

	.cb-container .checkmark:after{
		left: 5px;
		top: 1px;
		width: 4px;
		height: 8px;
		border-width: 0 2px 2px 0;
	}

	#pattern_display {
		font-size: 13pt;
	}

	.form-row.checkbox {
		padding: .5em 0;
	}

	.cb-container {
		margin: 0;
	}

	form .cb-container{
		font-size: 13pt;
	}

	#pattern_display .cb-container{
		font-size: 13pt;
	}

	img.center-image{
		margin-top: 1em;
		margin-bottom: 1em;
	}

	.cb-container:hover input + .checkmark {
		background-color: unset;
		transition: unset;
	}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 768px) {
	section {
		padding: 2em 0;
	}
	.error {
		font-size: 14pt;
	}

}

@media (hover: none) {
	.cb-container:hover input + .checkmark {
		background-color: unset;
		transition: unset;
	}
}