* {
	margin: 0;
	padding: 0;
}

h1 {	
	font-family: "Courgette", cursive;
}
h3 {	
	font-family: "Raleway", sans-serif;
	font-weight: bold;
}
p {	
	font-family: "Raleway", sans-serif;
}

.black-screen {
	position: fixed;
	display: none;
	left:0;
	top:0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background-color: rgba(0,0,0,0.75);
}
.black-screen > .check-container {
	background-color: white;
	text-align: center;
	position: relative;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	width: 80%;
	max-width: 800px;
	border-radius: 25px;
	overflow: hidden;
	min-height: 250px;
}
.black-screen > .check-container > .loading {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border:6px solid lightgray;
	border-right: 6px solid #2b3c43;
	position: relative;
	left:50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	margin: 128px 0;
	animation: loadingRotate 0.5s infinite linear;
	-webkit-animation: loadingRotate 0.5s infinite linear;
}
.black-screen > .check-container > .thanks-container, .captcha-error-container {
	position: relative;
	left:50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	opacity: 0;
	display: none;
}
.black-screen > .check-container > .thanks-container > h1, .captcha-error-container > h1 {
	color:white;
	background: url("../imgs/textures/woodplank_texture.jpg") repeat center;
	padding: 32px 0;
}
.black-screen > .check-container > .thanks-container > p, .captcha-error-container > p {
	padding-top: 32px;
}
.black-screen > .check-container > .thanks-container > button, .captcha-error-container > button {
	margin: 24px 0;
	width: 180px;
	height: 48px;
	border:1px solid #2b3c43;
	background-color:#2b3c43;
	color:white;
	transition: all 0.25s ease-in-out;
}
.black-screen > .check-container > .thanks-container > button:hover, .captcha-error-container > button:hover {
	background-color:white;
	color:#2b3c43;
	cursor: pointer;
}

#content {
	margin-top: 136px;
}

#title-container {
	background: url("../imgs/textures/back-1.jpg") no-repeat center;
	background-size: cover;
	padding: 8px 0;
	color: white;
	text-align: center;
}

#hello-container {
	text-align: center;
	position: relative;
	left:50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	width:80%;
	min-width: 264px;
}
#hello-container > * {
	margin: 8px 0;
}
#hello-container > img {
	position: relative;
	margin-bottom: -8px;
	animation: bottomAppear 0.5s ease-in-out;
	-webkit-animation: bottomAppear 0.5s ease-in-out;
  	animation-fill-mode: forwards;
  	-webkit-animation-fill-mode: forwards;
}
#hello-container > h3 {
	position: relative;
	color:#7f2e2f;
	opacity: 0;
	animation: bottomAppear 0.5s ease-in-out 0.25s;
	-webkit-animation: bottomAppear 0.5s ease-in-out 0.25s;
  	animation-fill-mode: forwards;
  	-webkit-animation-fill-mode: forwards;
}
#hello-container > p {
	position: relative;
	opacity: 0;
	animation: bottomAppear 0.5s ease-in-out 0.5s;
	-webkit-animation: bottomAppear 0.5s ease-in-out 0.5s;
  	animation-fill-mode: forwards;
  	-webkit-animation-fill-mode: forwards;
}

#form-container {
	position: relative;
	left:50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	width: 80%;
	min-width: 256px;
}
#form-container > form > input {
	margin: 6px 0;
	width: calc(100% - 16px);
	height: 16px;
	padding: 8px;
	border: 1px dotted #2b3c43;
}
#form-container > form > textarea {
	resize: none;
	width: calc(100% - 16px);
	padding: 8px;
	height: 256px;
	border: 1px dotted #2b3c43;
}
#form-container > form > .submit-button {
	position: relative;
	left:calc(100% - 64px);
	width: 64px;
	color: white;
	background-color: #2b3c43;
	height: 32px;
	border: none;
	transition: background-color 0.25s ease-in-out;
}
#form-container > form > .submit-button:hover {
	cursor:pointer;
	background-color:#7f2e2f;
}
.g-recaptcha {
	position: relative;
	left:50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	width:304px;
}

#location-container {
	position: relative;
	left:50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	width: 80%;
	min-width: 264px;
}
#location-container > #map-location {
	display: inline-block;
	width: calc(100% - 256px - 16px);
	height: 400px;
	margin-right: 12px;
}
#location-container > #direction-list {
	vertical-align: top;
	display: inline-block;
	width: 256px;
	list-style: none;
}
#location-container > #direction-list > li {
	padding: 6px 0;
}
#location-container > #direction-list > li > h3 {
	color: #7f2e2f;
}
#location-container > #direction-list > li > p {
	padding-left: 12px;
	font-size: 14px;
}

.dotted-separator {
	margin: 16px 0;
	position: relative;
	width: 90%;
	left:50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	border-top: 1px dotted #2b3c43;
}

@media screen and (max-width:840px) {
	#location-container > #map-location {
		display: block;
		width: 100%;
		margin-right: 0px;
		margin-bottom: 12px;
	}
	#location-container > #direction-list {
		display: block;
		width: 100%;
	}		
}

@keyframes bottomAppear {
	0% {
		top:25px;
		opacity: 0;
	}
	100% {
		top: 0;
		opacity: 1;
	}
}

@-webkit-keyframes bottomAppear {
	0% {
		top:25px;
		opacity: 0;
	}
	100% {
		top: 0;
		opacity: 1;
	}
}

@keyframes loadingRotate {
	0% {
		transform: translateX(-50%) rotate(0deg);
		-webkit-transform: translateX(-50%) rotate(0deg);
	}
	100% {
		transform: translateX(-50%) rotate(0deg);
		-webkit-transform: translateX(-50%) rotate(360deg);
	}
}

@-webkit-keyframes loadingRotate {
	0% {
		transform: translateX(-50%) rotate(0deg);
		-webkit-transform: translateX(-50%) rotate(0deg);
	}
	100% {
		transform: translateX(-50%) rotate(0deg);
		-webkit-transform: translateX(-50%) rotate(360deg);
	}
}