/*Website Main Styles | Overall Appearance or General Purpose*/
/*************************************************
*** Original Stylesheet Author: Jullian Anthony Sy-Lucero
*** Contact Information: jsyluc123@hotmail.com
**************************************************/
/* IMPORTING CSS CODE */
@import url(footer.css);
@import url(media.screen.inc.css);

@viewport {
	min-width: 0px;
	max-width: 600px;
	zoom: 1.5;
	min-zoom: 1.0;
	max-zoom: 2.0;
}

/* Main Page Styles */
body 
{ font-family: Myriad, Helvetica, Arial, sans-serif; }

/*General Use Styles*/
.display-none
{ display: none !important; }

.display-inline-block
{ display: inline-block !important; }

.visibility-hidden
{ visibility: hidden !important; }

#CENTER_ALIGNMENT,
.center {
	margin: 0 auto;
	text-align: center;
}

.text-decoration-none 
{ text-decoration: none !important; }

#DISPLAY_FLEX,
.display-flex,
.footerNavDiv,
.form-input-group {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
/*End of General Use Styles*/

/* Site Title */
.siteTitleLink, .siteTitleLink img {
	min-width: 30px !important;
	max-width: 960px !important;
	width: 100% !important;
	height: auto !important;
}
/* End of Site Title */

/*General Button Styles*/
/*Translucent White Button*/
.btn {
	color: white !important;
	text-decoration: none !important;
	text-align: center;
	display: inline-block;
	padding: 10px;
	background: rgba(255,255,255,0.2);
	border: 1px solid rgba(255,255,255,0.75);
	border-radius: 4px;
	transition: all 0.125s ease-in;
}

.btn:hover, .btn:focus {
	background: rgba(255,255,255,0.5);
}

.btn:active {
	background: rgba(0,0,0,0.20);
}

#BUTTON_TRANSITION, .btn:hover, .btn:focus, .btn-active
.btn-green:hover, .btn-green:focus, .btn-green:active,
.btn-green-gradient:hover, .btn-green-gradient:focus, .btn-green-gradient:active,
.footerNavLinks a:hover, .footerNavLinks a.currentPage:hover,
.footerNavLinks a:focus, .footerNavLinks a.currentPage:focus,
.footerNavLinks a:active, .footerNavLinks a.currentPage:active {
	transition: all ease-in 0.2s;
	-webkit-transition: all ease-in 0.2s;
	-moz-transition: all ease-in 0.2s;
	-ms-transition: all ease-in 0.2s;
	-o-transition: all ease-in 0.2s;
}

/*Solid Green Button*/
.btn-green {
	color: white !important;
	text-decoration: none !important;
	text-align: center;
	display: block;
	width: 80%;
	padding: 10px;
	padding-left: 10%;
	padding-right: 10%;
	background: rgba(45,168,49,1.0);
	border: 1px solid rgba(255,255,255,0.75);
	border-radius: 4px;
	transition: all 0.125s ease-in;
}

.btn-green:hover, .btn-green:focus {
	background: rgba(45,168,49,0.75);
}

.btn-green:active {
	background: rgba(25,118,29,1.0);
}

/*Green Gradient Button*/
.btn-green-gradient {
	color: white !important;
	text-decoration: none !important;
	text-align: center;
	display: block;
	width: 80%;
	padding: 10px 10%;
	background: linear-gradient(to bottom, rgba(45,168,49,1.0), rgba(25,118,29,1.0));
	border: 1px solid rgba(0,0,0,0.15);
	border-top-color:rgba(255,255,255,0.75);
	border-bottom-color: rgba(0,0,0,0.3);
	border-radius: 4px;
	transition: all ease-in 0.125s;
	font-size: 1.5em;
	text-shadow: inset 0 0 1px rgba(0,0,0,0.2);
	box-shadow: 0 3px 5px rgba(0,0,0,0.3);
}

.btn-green-gradient:hover, .btn-green-gradient:focus {
	background: linear-gradient(to bottom, rgba(25,118,29,1.0), rgba(45,168,49,0.75));
}

.btn-green-gradient:active {
	background: linear-gradient(to bottom, rgba(25,118,29,1.0), rgba(25,118,29,0.60));
	box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
}
/*End of General Button Styles*/

/* Front Links Styles */
#front-links > *,
#front-links-mobile > * {
	margin: 7.5px 0;
}

#front-links > *:first-child {
	margin: 7.5px 0 0;
}

/* Email Contact Form */
#email-form {
	width: 100%;
	font-family: Lucida Grande, Lucida Sans Unicode, 
							 Lucida Sans, Myriad, 
							 Helvetica, Arial, 
							 sans-serif;
}

#email-form-container {
	width: 100%;
}

#email-form-container * {
	box-sizing: border-box;
}

#email-form-container > * {
	margin: 5px auto;
}

#email-form-container > h3,
#email-form-container > span {
	display: block;
	text-align: center;
}

.form-input-group {
	max-width: 600px;
	height: fit-content;
	justify-content: flex-start;
	text-align: left;
}

.form-input-group > label,
.form-input-group > input,
.form-input-group > textarea {
	padding: .375rem .75rem;
	color: #495057;
	border: 1px solid #ced4da;
}

.form-input-group > label {
	user-select: none;
	flex-basis: 100%;
	max-width: 600px;
	background-color: #e9ecef;
}

/*.form-input-group > label:first-child {
	border-radius: .25rem 0 0 .25rem;
}*/

.form-input-group.phone > label.area-code {
	flex-basis: 20%;
	max-width: 30px;
	line-height: 28px;
	vertical-align: middle;
	text-align: center;
	background: #f9fcff;
	border-radius: 0 0 0 .25rem;
	padding-left: 0;
	padding-right: 0;	
	font-weight: bold;
}

.form-input-group > label:first-child {
	flex-basis: 100%;
	max-width: 600px;
	border-radius: .25rem .25rem 0 0;
}

/*.form-input-group > input:last-child {
	flex-basis: 75%;
	min-height: 28px;
	max-width: 450px;
	background: #fbfbfb;
	border-radius: 0 .25rem .25rem 0;
	transition: all .15s ease-in-out;
	box-shadow: inset 2px 0 4px -2px rgba(0,0,0,0.2);
}*/

.form-input-group.phone > input:last-child {
	flex-basis: 80%;
	flex-grow: 1;
	min-width: 150px;
	max-width: 570px;
	border-radius: 0 0 .25rem 0;
}

.form-input-group > input:last-child,
.form-input-group > textarea:last-child {
	max-width: 600px;
	min-height: 28px;
	flex-basis: 100%;
	background: #fbfbfb;
	border-radius: 0 0 .25rem .25rem;
	font-family: Lucida Grande, Lucida Sans Unicode, 
							 Lucida Sans, Myriad, 
							 Helvetica, Arial, 
							 sans-serif;
}

.form-input-group > input:focus,
.form-input-group > textarea:focus {
	color: #495057;
	background-color: #fff;
	border-color: #80bdff;
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

#form-buttons.form-input-group > .btn-green-gradient {
	margin: 0 auto;
}