@media screen, print
{
	body {
		font-family: 'Open Sans', sans-serif;
	}

	img { border: none; }
	textarea { font-family: 'Open Sans', Verdana, sans-serif; }
	abbr { cursor: help; }

	a.link-button {
		display: inline-block;
		background-color: #39673D;
		color: white;
		text-align: center;
	}

	a.link-button:hover,
	a.link-button:visited {
		color: white;
		text-decoration: none;
	}



	#top {
		display: flex;
		background-color: #39673D;
		position: relative;
	}

	#top p {
		margin-bottom: 0;
	}

	#top a {
		color: #F0FFF0;
	}

	#top a:hover,
	#top a:visited {
		color: #F0FFF0;
	}

	#top-logo {
		flex: 0 1 auto;
	}

	#top-logo {

	}

	#top-middle {
		flex: 0 1 auto;
	}

	#top-middle-links {
		list-style-type: none;
		display: flex;
	}

	#top-middle-links li {
		flex: 1 0 auto;
		font-size: 1.2em;
	}

	#top-middle-links a {
		color: white;
	}

	#top-middle-links .dropdown-menu {
		background-color: #39673D;
	}

	#top-middle-links .dropdown-item,
	#top-middle-links .dropdown-item:hover,
	#top-middle-links .dropdown-item:visited {
		background-color: #39673D;
		color: white;
	}

	#top-spacer {
		flex: 1 0 auto;
	}

	#top-user {
		flex: 0 1 auto;
		padding: 1em 1em 0 1em;
	}

	#top-user .fa {
		font-size: 1.5em;
		margin-right: 0.2em;
	}

	#user-login {
		color: white;
		font-weight:bold;
	}

	#vendor-login:hover {
		text-decoration:none;
	}

	#user-login:hover,
	#user-login:visited {
		color: white;
		text-decoration: none;
	}

	#content-header-descr {
		color: #39673D;
	}

	#navigation-spaced {
		padding: 1em 0;
	}

	#navigation .half-navigation-link {
		background-color: #39673D;
		color: white;
		padding: 1em;
		font-size: 1.5em;
	}

	#navigation .half-navigation-link:hover,
	#navigation .half-navigation-link:visited {
		color: white;
		text-decoration: none;
	}

	#navigation .half-navigation-link .fa {
		margin-right: 0.2em;
		font-size: 1.5em;
		vertical-align: -0.1em;
		color: #e8cb1f;
	}

	#navigation .special-navigation-link {
		background-color: #2d8b1d;
		position:relative;
	}

	#navigation .new-notice {
		position:absolute;
		right:10px;
		top:-10px;
		background-color: #fff;
		box-shadow: 1px 1px 4px #000;
		color: #39673d;
		padding: 2px 7px;
		font-size: 0.8em;
		font-weight: bold;
	}

	#contact-me-form-spaced {
		background-color: rgba( 255, 255, 255, 0.5 );
		text-align: center;
		color: #39673D;
	}

	#contact-me-form input {
		padding: 0.5em;
	}

	#contact-me-form input.failed-validation {
		border-color: red;
	}

	#contact-me-name,
	#contact-me-phone,
	#contact-me-email {
		border: 1px solid #CCCCCC;
	}

	#contact-me-name {
		width: 24.33em;
	}

	#contact-me-phone,
	#contact-me-email {
		width: 12em;
	}

	#contact-me-notices {
		display: none;
	}

	#contact-me-notices.show {
		display: block;
	}

	#contact-me-notices.error {
		color: red;
	}

	#contact-me-notices.notice {
		color: green;
	}

	#contact-me-submit {
		background-color: #39673D;
		border: none;
		padding: 0.5em 2em;
		color: white;
	}

	#mail-offer {
		padding: 2em;
		display: none;
	}

	#mail-offer-spaced a {
		text-align: center;
		color: #39673D;
	}

	#mail-offer-spaced a:hover,
	#mail-offer-spaced a:visited {
		color: #39673D;
		text-decoration: none;
	}

	#mission {
		color: white;
		margin-top: 2em;
	}

	#mission-spacer-left {
		/*background-color: #39673D;*/
	}

	#mission-verbiage {
		background-color: #39673D;
	}

	#mission-logo {
		text-align: center;
	}

	#mission-logo:before {

	}

	#mission-spacer-right {

	}

	#hoa {
		background-color: white;
		color: #39673D;
	}

	#mail-offer {
		background-color: #FFF9E6;
		color: #39673D;
	}

	#mail-offer h3 {
		text-align: center;
		font-size: 2em;
	}

	.spaced-verbiage .section-links {
		padding-left: 0;
		list-style-type: none;
	}

	.spaced-verbiage .section-links li {
		text-align: center;
	}

	#homeowners {
		background-color: #FFE599;
		display: flex;
	}

	#circulars {
		padding: 1em;
	}

	#circulars .circle {
		background-color: #30593B;
		color: white;
		margin: 0 auto;
		padding-top: 1em;
		width: 5em;
		height: 5em;
		border-radius: 5em;
		text-align: center;
	}

	#circulars .circle .fa {
		font-size: 3em;
	}

	#circulars p {
		text-align: center;
		margin-top: 1em;
		font-size: 1.33em;
	}

	#quotation {
		font-size: 1.2em;
		background-color: #30593B;
		color: white;
		padding: 3em 0 2em;
		text-align: center;
	}

	#quotation-spaced {
		position: relative;
	}

	#quotation-spaced::before {
		content: '\f10d';
		font-family: FontAwesome !important;
		font-style: normal;
		font-size: 72px;
		position: absolute;
		top: -20px;
		left: -20px;
		opacity: 0.15;
	}

	#pm {
		background-color: white;
		color: #39673D;
	}




	footer {
		padding: 1em;
		background-color: #39673D;
		margin-bottom: 0;
		color: #F0FFF0;
	}

	footer p {
		margin-bottom: 0;
	}

	footer a {
		color: #F0FFF0;
	}

	footer a:hover,
	footer a:visited {
		color: #F0FFF0;
	}

	#footer-container {

	}

	#footer-links {

	}

	#footer-links h3 {
		font-size: 1.1em;
	}

	#footer-links ul {
		list-style-type: none;
		padding-left: 0;
	}

	#footer-social li {
		display: inline-block;
		font-size: 2em;
		margin-right: 0.5em;
	}

	#copyright {
		text-align: center;
	}

	#modals .modal-content {
		border-radius: 0;
	}

	#modals .modal-header {
		border-radius: 0;
		background-color: #30593B;
		color: white;
		padding: 0.5em 1em;
	}

	#modals .close {
		color: white;
	}

	#modal-confirmation .link-button {
		width: 100%;
		padding: 0.5em;
	}

	#modal-contact .circular {
		text-align: center;
		padding: 1em 0;
		font-size: 1.5em;
	}

	#modal-contact .circle {
		background-color: #30593B;
		color: white;
		margin: 0 auto;
		padding-top: 1em;
		width: 5em;
		height: 5em;
		border-radius: 5em;
		text-align: center;
	}

	#modal-contact .circular a,
	#modal-contact .circular a:hover,
	#modal-contact .circular a:visited {
		color: white;
		text-decoration: none;
	}

	#modal-contact .circle .fa {
		font-size: 3em;
	}
}


@media only screen and (max-width: 768px) /* Mobile */
{
	.hide-in-mobile {
		display: none;
	}

	#top {
		height: 4em;
	}

	#top-logo {
		width: 5em;
		position: relative;
	}

	#top-logo-img img {
		width: 7.5em;
	}

	#top-middle-links {
		display: none;
	}

	#top-logo-img .hide-in-screen {
		height: 100%;
		width: auto;
	}

	#top-user {
		padding: 0.5em 0.5em 0 0.5em;
		position: relative;
	}

	#user-login,
	#vendor-login {
		position: absolute;
		right: 0;
		width: 11em;
	}

	#user-login {
		top: 0.25em;
	}

	#vendor-login {
		margin-right: 0;
		top: 2em;
	}

	#content-header-title {
		font-size: 1.33em;
	}

	#content-header-logo {
		text-align: center;
		padding-top: 1em;
	}

	#video-iframe {
		width: 5em;
	}

	#content-header-descr {
		font-size: 1.5em;
		text-align: center;
	}

	#navigation .half-navigation-link {
		display: block;
		font-size: 1.2em;
		margin-bottom: 0.33em;
		padding-left: 1em;
		width: 100%;
	}

	#video {
		margin-bottom: 1em;
	}

	#mail-offer h3 {
		margin-bottom: 1em;
		font-size: 1.5em;
	}

	#mail-offer-spaced {
		text-align: center;
	}

	#mail-offer-spaced img {
		width: 100%;
	}

	#mission {
		margin-bottom: 0;
	}

	#mission-logo img {
		display: none;
	}

	#quotation-spaced::before {
		left: 20px;
	}

	#circulars-spaced {
		padding: 1em 3em 0;
	}

	.spaced-verbiage {
		padding: 1em;
	}

	.spaced-verbiage ul {
		padding-left: 1.5em;
	}

	.spaced-verbiage .section-links li {
		margin-bottom: 0.5em;
	}

	.spaced-verbiage .section-links a {
		padding: 1em;
		width: 100%;
	}

	.spaced-verbiage p {
		text-align: center;
	}
}

@media screen and ( min-width: 769px ) /* Desktop/Tablet */
{
	body {
		font-size: 14px;
	}

	.no-screen,
	.hide-in-screen {
		display: none;
	}

	#footer-container,
	#main .spaced-section {
		max-width: 1280px;
		margin: 0 auto;
	}

	#top-logo {
		width: 7em;
		position: relative;
	}

	#top-logo-img img {
		position: absolute;
		top: -1.2em;
		width: 100%;
	}

	#top-middle-links {
		padding-left: 1em;
	}

	#top-middle-links li {
		padding: 0.75em 1em 0 1em;
	}

	#vendor-login {
		margin-right: 1em;
	}


	#main-background {
		background-image: url( '/img/refer/hero_v01.jpg' );
		background-repeat: no-repeat;
		background-position: center top;
		background-attachment: scroll;
		background-size: auto 100em;
	}

	#content-header-spaced {
		display: flex;
		padding: 3em 10em 2em;
	}

	#content-header-logo {
		flex: 1 0 auto;
		text-align: center;
	}

	#logo {
		width: 10em;
	}

	#content-header-descr {
		flex: 1 0 auto;
		padding-top: 1em;
		padding-left: 1em;
		font-size: 2.5em;
	}

	#navigation-spaced {
		display: flex;
		flex-wrap: wrap;
		padding: 0 3em;
	}

	#navigation .half-navigation-link {
		display: inline-block;
		flex: 1 0 20em;
		margin: 0 0.5em 1em;
		text-align: center;
	}

	#contact-me-form {
		padding-bottom: 1.5em;
	}

	#contact-me-form-spaced {
		padding: 1em 7.5em;
	}

	#video {
		padding: 2em;
	}

	#video-spaced {
		width: 960px;
	}

	#mail-offer-spaced {
		display: flex;
	}

	#mail-offer-spaced a {
		padding: 1em 0 0;
		display: inline-block;
		flex: 1 0 auto;
		font-size: 1.5em;
	}

	#mail-offer-spaced img {
		width: 15em;
	}

	#circulars-spaced {
		display: flex;
		padding: 2em 5em 1em;
	}

	#circulars .circular {
		flex: 1 1 auto;
		margin: 0 3em;
	}





	.four-spaced {
		display: flex;
		justify-content: center;
	}

	.spacer-side {
		flex: 1 0 auto;
	}

	.spaced-verbiage {
		padding: 1em;
		flex: 0 0 720px;
		font-size: 1.2em;
		line-height: 2em;
	}

	.spaced-verbiage ul {
		padding-left: 1.5em;
	}

	.spaced-verbiage .section-links li {
		margin-bottom: 0.33em;
	}

	.spaced-verbiage .section-links a {
		padding: 0.25em;
		width: 16em;
	}

	.spaced-img {
		flex: 0 0 560px;
		background-repeat: no-repeat;
		background-position: left top;
		background-attachment: scroll;
		background-size: auto 100%;
	}

	#mission-logo {
		padding-top: 2em;
	}

	#mission-logo img {
		width: 16em;
	}

	#hoas-img.spaced-img {
		background-image: url( '/img/refer/hero_v01.jpg' );
	}

	#homeowners-img.spaced-img {
		background-image: url( '/img/refer/c3img.jpg' );
	}

	#pm-img.spaced-img {
		background-image: url( '/img/refer/c4img.jpg' );
	}

	.spaced-img img {
		width: 100%;
	}







	#footer-links {
		display: flex;
	}

	#footer-links section {
		flex-grow: 1;
	}

	#modal-contact .modal-body {
		display: flex;
	}

	#modal-contact .circular {
		flex: 1 0 50%;
	}
}

@media print
{
	body {
		font-size: 12pt;
		font-family: serif;
	}

	.no-print {
		display: none !important;
	}
}