/*
	Site colors: 
	#2A9A47 - green
	#207494 - blue
	#B92025 - red
	#E6C217 - yellow
*/

/* General styling*
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap'); */

body {
	margin: 0 auto;
	background: #fff;
	line-height: 1.7em;
	word-wrap: break-word;
	animation: intro 12s linear forwards;
}
/*
@keyframes intro {
	0% { overflow: hidden; }
	100% { overflow: auto; }
} */
body * {
	font-family: 'Helvetica', Arial, sans-serif;
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
}
section {
	max-width: 980px;
	margin: 50px auto;
	padding: 0 20px;
}
h1, h2, h3 { 
	font-family: Lobster, serif; 
	padding-bottom: 25px;
	color: #2a9a47;
}
h1 { font-size: 2.5rem; }
a, a:visited { color: #2a9a47; }
a:hover { color: #207494; }
section p { padding-bottom: 10px; }

/* Header */
/* header {
	position: relative;
	height: 100vh;
	background: #000;
	overflow: hidden;
} */
.lights {
	position: relative;
	max-width: 920px;
	margin: auto;
}
.beam {
	position: absolute;
	height: 100vh;
	opacity: 0;
	animation: beams 100ms linear forwards;
}
.beam-1 {
	left: 0;
	top: 0;
	transform: translateX(-25%) rotateY(180deg);
	animation-delay: 2s;
}
.beam-2 {
	left: 50%;
	transform: translateX(-50%);
	animation-delay: 4s;
}
.beam-3 {
	right: 0;
	transform: translateX(25%);
	animation-delay: 3s;
}
@keyframes beams {
	100% {opacity: .3;}
}
/*
.logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	max-width: 350px;
	opacity: 0;
	animation: logo 3s ease-in-out 1s forwards;
	animation-timing-function: step-end;
}
@keyframes logo {
	33% { opacity: .05; }
	66% { opacity: .15; }
	100% { opacity: 1; }
}
@keyframes zoom {
	100% {transform: scale(1); }
}*/
.logo {
	display: table;
	margin: 50px auto;
}

/* About */
#about h1, 
#about p {
	max-width: 780px;
	margin: auto;
	text-align: center;
}

/* Contact form */
#contact {
	max-width: 780px;
	margin: 50px auto;
}
input, 
textarea {
	width: 100%;
	margin: 5px 0;
	padding: 15px;
	border: 1px solid #A1A1A1;
	box-sizing: border-box;
}
input:focus::placeholder, 
textarea:focus::placeholder {
	color: transparent;
}
input:focus, 
textarea:focus {
	outline: none;
	border-color: #2a9a47;
}
.submit-row {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
.g-recaptcha, 
button {
	margin: 5px 0 15px;
}
@media (max-width: 580px) {
	.g-recaptcha, 
	button {
		margin: 5px auto 15px;
	}
}
button {
	padding: 25px 60px;
	background: #2a9a47;
	border: none;
	font-weight: 600;
	color: #FFF;
	cursor: pointer;
	transition: background .2s ease;
}
button:hover {
    background: #207494;
}
#message {
	padding: 0px 40px 0px 0px;
}
#mail-status {
	display: none;
	width: 100%;
	padding: 12px 20px;
	color: #FFF;
}
.error {
	background-color: #b92025;
	margin-bottom: 40px;
}
.success {
	background-color: #2a9a47;
}
.grayed-out {
	opacity: .5;
	pointer-events: none;
}

/* Footer */
footer {
	padding: 25px;
	background: #000;
	color: #999;
	text-align: center;
}
footer:not(:hover) #credits {
    opacity: .5;
    transition: all .3s ease;
}