@charset "UTF-8";
/* CSS Document */
/* copyright Paul Lock Vancouver Canada */

/* everything scales and wraps at every size - no need for port sizes */

/* contact page styles */

#popup-container {
		padding: 40px 0;
	}

	.contact-popup {
		max-width: 700px;
		min-width: 280px;
		
		-moz-border-radius: 15px;
		-webkit-border-radius: 15px;
		border-radius: 15px;
	}
	
	.closebutton {
		width: 40px;	
	}
	
	
/*contact form*/
		input[type=text], select, textarea {
		  font-family : Arial, Helvetica, sans-serif;
		  font-size   : 100%;
		
		  width: 100%;
		  margin: 10px auto;
		
		  -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
			 -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
				  box-sizing: border-box;
		}
		
		input[type=text], textarea {
			padding:5px; 
			border:2px solid #ccc; 
			-webkit-border-radius: 8px;
			border-radius: 8px;
		}
		
		input[type=text]:focus {}
		
		.error {color: #FF0000;}
		
		
/* Contact info */
	#popup-container {
		background: rgba(181,181,181,0.75);
		display: none;
		
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;

		z-index: +1;
	}

	.contact-popup {
		background: #fff;
		
		width: 100%;
		margin: auto;
	}
	
	.closebutton {
		display: block;
		float: right;
		
		width: 30px;
		margin: 20px 20px 0 0;
		padding: 0;	
	}

	.showcase {
		display: none;
		width: 80%;
		margin: auto;
	}
	
	.stepone {
	display: none;
	}
		
	.contactbuttonbar {
		display: -webkit-flex;
		display: flex;
		width: 100%;
	}
	
.button,
input[type=submit] {
	position: relative;
	font-size: 16px;
	color: black;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	padding: 5px 10px;
    background-color: #ddd;
	border-radius: 8px;
	margin: 40px auto;
	border: 5px;
	border-style: outset;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 15px 0 rgba(0, 0, 0, 0.19);
}






/* make the content go to the edges of the entire page */
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	height: 100%;
	background: #ffffff;
}

/* font work for phones*/
/* adjust the style of my headings and links */
h1  {
	position: absolute;
	top: 225px;
	right: 25px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #bacf0f;
	font-weight: 400;
}
tagline {
	color: #bacf0f;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16pt;
	font-weight: 400;
}
orangetagline {
	color: #eaa742;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16pt;
	font-weight: 400;
}
h3 {
	color: #555555;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
	font-weight: bold;
}

/* RESPONSIVE IMAGES */
img{
	max-width:100%;
	height:auto;
	border-color: #FFFFFF;
}

/* set up flex containers for relative scaling */
.flex-container > * {
    padding: opx;
    flex: 1 100%;
	margin: 0 auto;
}

/* use container to hold the header and span max width */
#headwrapper {
    display: -webkit-flex;
    display: flex; 
	margin-top: 0px;
	max-width: 1400px; 
	margin: auto;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}
/* use sub container to hold the body to a suitable max width */
#mainwrapper {
    display: -webkit-flex;
    display: flex; 
	margin-top: 0px;
	max-width: 900px; 
	margin: auto;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}

#header {
	width: 100%;
	/*max-height: 131px;*/
	background-color:#bacf0f;
}

#spalsh {
	width: 100%;
	/*max-height: 131px;*/
	background-color:#000000;
}

#logo {
	 max-height: 100%;
	 margin: 0px;
}

#main {
	max-height: 400px;

}

#bodytext {
	max-width: 90%;
	color: #999999;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11pt;
	font-weight: 100;
	text-align: left;
}

#footer  {
	bottom: 0px;
	width: 100%;
	max-height: 100px;
	background-color: #bacf0f;
	max-width: 90%;
	color: #999999;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	font-weight: 100;
	text-align: center;
}
#contact {
	max-width: 90%;
	color: #999999;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11pt;
	font-weight: 100;
	text-align: center;
}

/* this width covers everything larger than phones */
@media all and (min-width: 500px) {

/* font work for everything but phones*/
/* adjust the style of my headings and links */
h1  {
	position: absolute;
	top: 225px;
	right: 25px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 21px;
	color: #bacf0f;
	font-weight: 400;
}
tagline {
	color: #bacf0f;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 23pt;
	font-weight: 400;
}
orangetagline {
	color: #eaa742;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 21pt;
	font-weight: 400;
	max-width: 90%;
}
h3 {
	color: #555555;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16pt;
	font-weight: bold;
}
#bodytext {
	max-width: 90%;
	color: #999999;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15pt;
	font-weight: 100;
	text-align: left;
}

#footer  {
	bottom: 0px;
	width: 100%;
	max-height: 100px;
	background-color: #bacf0f;
	max-width: 90%;
	color: #999999;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	font-weight: 100;
	text-align: center;
}

}