/* Form CSS */

#submit-btn
{
	border-radius: 4px;
    margin: 0;
    background-color: #ccc;
    color: #fff;
    float: left;
    padding: 8px;
    width: 100%;
    text-align: center;

	-webkit-transition: background-color 0.5s; /* Safari */
    transition: background-color 0.5s;

}

#submit-btn:hover
{
	cursor:pointer;
	background-color: #aaa;
}

/* - */

#contact-form
{
	position: relative;
	width: 100%;
	display: grid;
	grid-gap: 32px;
}

@media(min-width: 768px )
{
	#contact-form
	{
		grid-template-columns: auto 768px auto;
	}
}

@media(min-width: 992px )
{
	#contact-form
	{
		grid-template-columns: auto 992px auto;
	}
}

@media(min-width: 1200px )
{
	#contact-form
	{
		grid-template-columns: auto 1200px auto;
	}
}

.form-input
{
	margin: 0;
	margin-bottom:16px;
	width: 100%;

	width: calc(100% - 32px);

	border-radius: 2px;
	background-color: #fff;
	border:solid 1px #ccc;
	color:#000;

	font-size:14px;
	line-height: 22px;
	height:32px;

	padding-left:16px;
	padding-top:8px;
}

.form-input:focus
{
	border-color: #000 !important;
    box-shadow: 0 0 6px #c7c7c7 !important;
	outline:none;
}

#form-message
{
	height:96px;
	resize: none;
}

#caution-text
{
	width:100%;
	color:#DB6E24;
	float:left;
}

/* - */

.grouped
{
	display: grid;
	grid-gap: 8px;
	border: dashed 1px;
  padding: 12px;
}

@media( min-width: 768px )
{
	.grouped
	{
		grid-column: 2;
	}
}

.element
{
	display: grid;
	grid-gap: 8px;
}