/* General Reset */
*, #page, #header, .content {
	margin: 0;
	padding: 0;
	border: 0px solid pink;
	}


/* STRUCTURE */
html, body, #page {
	height: 100%;
	}


.content, #header, #content_top, #content_bottom 	{
	width: calc(100% - 20px);
	max-width: 940px;
	xmax-width: 80%;
	min-width: 300px;
	margin: 0px auto;
	padding: 10px;
	}

#header {
	padding-top: 10px;
	min-height: 80px;
	}
.menu	{
	float: right;
	margin-top: 00px;
	margin-right: 10px;
	overflow: auto;
	}

.menu ul {
	text-align: center;
	}
.menu li {
	display: inline;
	padding: 0px 0px 0px 10px;
	}
/* See below for small screen adjustments to the menu! */


#hi	{
	position: relative;
	width: 100%;
	max-width: 100%;
	min-height: 525px;
	height: 100%;
	margin: 0px auto;
	padding: 0px;
	}

#hi .reallybig {
	position: relative;
	top: 15%;
	}
#hi .big {
	position: relative;
	top: 15%;
	}
.columns {
	columns: 350px 2;
	}

#about > *, #contact > * {
	vertical-align: top;
	}
#about .columns {
	margin-bottom: 80px;
	}


#webergarage {

	}

#webergarage .content {
	min-height: calc(35vw);
 	display: flex;			/* establish flex container */
	flex-direction: row;		/* stack flex items horizontally */
	justify-content: center;	/* center items vertically, in this case */
	align-items: center;		/* center items horizontally, in this case */
	}


#webergarage .left, #webergarage .right {
	display: inline-block;
	padding-bottom: 10px;
	}

#webergarage .left {
	left: 0%;
	width: calc(38% - 10px);
	text-align: center;
	padding-right: 10px;
	}
#webergarage .left img {
	max-width: 100%;
	}

#webergarage .right {
	left: calc(38% + 10px);
	width: calc(61% - 10px);
	}


#contact .left, #contact .right {
	display: inline-block;
	width: 49%;
	padding-bottom: 80px;
	}
#contact .left {
	float: left;
	apadding-right: 2%;
	}
#contact .right {
	float: right;
	apadding-left: 2%;
	}

/* See below for small screen adjustments to the left/ right text blocks! */

.form_row {
	clear: both;
	}
.form_row_submit {
	height: 50px;
	}
.form_row label {
        float: left;
	text-align: right;
	width: 70px;	
	padding: 3px;
	margin-top: 5px;
	}
label.error {
	width: 275px;
	text-align: left;
	}
#contact_form	{
	width: 450px;
	max-width: 97.2222222%;
	margin: 0 auto;
	}
#contact_form input, #contact_form textarea {
	float: left;
	width: 350px;
	max-width: 97.2222222%;
	height: 25px;
	padding: 3px;
	margin-top: 5px;
	}
#contact_form textarea {
	height: 200px;
	}
#contact_form .output {
	float: left;
	width: 350px;
	max-width: 100%;
	padding: 3px;
	margin-top: 5px;
	}
#contact_form #submit_btn {
	width: 356px;
	max-width: 100%;
	height: 30px;
	}


/* COLORS */
body	{
	background: #80a5b3;
	color: #fff;
	}

#hi:before {
	content: ' ';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
	opacity: .6;
	background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.0)), url(img/DSC_2233_edited_1600.jpg) no-repeat center center ;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	}


#webergarage {
	background-color:rgba(0, 0, 0, 0.3);
	}
#webergarage {
	xcontent: ' ';
	xdisplay: block;
	xposition: relative;
	xleft: 0;
	xtop: 0;
	xwidth: 100%;
	xheight: calc(50vw);
	xz-index: -2;
	xopacity: .6;
	background:linear-gradient(rgba(128, 165, 179, 0.8),rgba(128, 165, 179, 0.4)), url(img/garageinterior_1600.jpg) no-repeat center center;
	background:linear-gradient(rgba(64, 82, 89, .9),rgba(64, 82, 89, 0.6)), url(img/garageinterior_color_1600.jpg) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	}


input, textarea {
	color: #4C7280;
	}

a	{
	color: #fff;
	}
a:hover	{
	color: #ECE9DF;
	}
.menu a {
	color: #fff;
	}
.menu a:hover {
	color: #ECE9DF;
	}
.warning {
	color: red;
	}

.content {
	
	}
#contact_form input, #contact_form textarea {
	border: 0px solid #9a906e;
	}
#contact_form #submit_btn {
	background: #fff;
	}
#contact_form input:focus, #contact_form textarea:focus, #contact_form #submit_btn:hover {
    background: #ECE9DF;
    }
#contact_form #submit_btn:active {
	background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.1)), #ECE9DF;
	}
.error	{
	color: #f00;
	}


/* TEXT */
body, input, textarea	{
	
	font: normal 0.938em 'Open Sans', 'Arial', sans-serif;
	
	}
p, h1, h2 {
	margin: 0px 0px 10px 0px;
	}
p	{
	text-align: justify;
	}
.menu a	{
	text-decoration: none;
	}
h1	{
	margin: 0px;
	text-indent: -9999px;
	width: 150px;
	height: 80px;
	background: url("img/JW.png") no-repeat;
	float: left;
	}
h2	{
	font-family: 'Fjalla One', sans-serif;
	text-transform: uppercase;
	font-size: 3em;
	letter-spacing: 0.05em;
	line-height: 1.5em;
	font-weight: 700;
	clear: both;
	}

#hi .reallybig, #hi .big, #gallery h2, #hi p {
	max-width: 940px;
	margin: 0px auto 0px auto;
	padding: 10px 10px 0px 10px;
	overflow: hidden;
	}

.reallybig {
	font-family: 'Fjalla One', sans-serif;
	// text-transform: uppercase;
	text-align: left;
	font-size: 6em;
	// letter-spacing: 0.05em;
	// font-weight: 900;
	}
.big	{
	font-family: 'Fjalla One', sans-serif;
	// text-transform: uppercase;
	text-align: left;
	font-size: 4em;
	// letter-spacing: 0.05em;
	// font-weight: 700;
	}

/* OTHER */


/* SMALL SCREEN ADJUSTMENTS */
@media screen and (max-width: 480px){

#hi img {
	max-width: 50%;
	}

#webergarage .content {
	flex-direction: column;     /* stack flex items horizontally */
	}

#contact .left, #contact .right, #webergarage .left, #webergarage .right {
	width: 95%;
	padding: 0px 2% 20px 2%;
	}

#contact .left {
	padding-left: 2%;
	padding-right: 2%;
	}
#contact .right {
	padding-left: 2%;
	padding-right: 2%;
	}


h2 {
	width: 100%;
	text-align: center;
	font-size: 2em;
	}

}

@media screen and (max-width:940px) {
	.form_row label {
	text-align: left;
}