/*
D&F custom CSS / CSS overwrites
*/

/* ===========================
   ======= color palette ===== 
   =========================== 
	brown d&f: #895c31
	dark brown: #4c3723
	green: #23996a 
	light gray: #e3e3e3
	yellow: #cbd321
	brown-workshop: #927914
	purple: #6e2a5f
   ===========================*/
   
 
 		div#wrapper {
			width: 100%; 
			margin: 0 auto;
			background-color: #fff;  /* white */
			}
			
/* --		@font-face
			{
			font-family: Garvis Pro;
			src: url(Garvis_Pro_Semibold-webfont.ttf);
			src: url(Garvis_Pro_Italic-webfont.ttf);
			src: url(Garvis_Pro_Book-webfont.ttf);
			src: url(Garvis_Pro_Bold-webfont.ttf);
			}
--*/
		
		body {
			padding: 0;
			margin: 0;
			font-family: Garvis Pro, sans-serif;
			font-family: "Garvis Pro", sans-serif,Georgia,Serif;
			font-weight: normal;
			font-style: normal;
			line-height: 1;
			position: relative;
			cursor: default;
			width: 100%;
			margin: 0 auto;
			max-width:1100px;	
			background-color: #fff; /* white */
			}
			
		div.width_100 {
			width: 100%;
			clear: both;}
			
		.show_and_hide {
			display: none;
			}



/* -- links -- */

		a {
			text-decoration: none;
			}
		
		a.inline-link {
			color: #23996a;
			text-decoration: none;
			}
		
		a.inline-link:hover {
			text-decoration: underline;
			}
		
		

/* -- top menu -- */

		.dropdown, .top-bar.expanded, .title-area, ul.title-area, nav.top-bar, .top-bar-section li:not(.has-form) a:not(.button) {
			color: #895c31;
			/* --background-color: #895c31;-- */
			}
			
		.top-bar, ul.right, ul.title-area, .top-bar.expanded {
			/* --color: #895c31;-- */
			color: #895c31;
			}
		
		
		.top-bar-section ul li:hover:not(.has-form) > a, .top-bar-section .dropdown li:hover:not(.has-form) > a:not(.button) {
			background: #23996a; 
			}
		
		.top-bar-section .dropdown li a {
			background: #23996a; 
			}
			
		.top-bar-section li:not(.has-form) a:not(.button):hover {
			background: #23996a; 
			}
				
		.top-bar.expanded .toggle-topbar a {
			/* --color: #fff;-- */
			color: #895c31;
			}
			
		.top-bar.expanded .toggle-topbar a:after{
			/* --color: #fff;-- */
			color: #895c31;
			}
			
		.top-bar-section ul li:hover:not(.has-form) > a, .top-bar-section .dropdown li:hover:not(.has-form) > a:not(.button) {
			background-color: #1c7e57;
			}


/* -- image/logo/intro-copy -- */
   
		img {
			display: block;
			float: left;
			width: 100%;
			}
		 
		.main_img {
			width: 100%;
			}
			
		.img_extra_top_space {
			padding-top: 30px;
			}
   
		.main_logo { 
		   width: 50%; 
		   padding: 0;
		   margin-left: 2.5%;
		   }
		   
		.intro_copy { 
			float: left;  
			width: 96%; 
			line-height: 1.3em;
			font-size; 4em;
			color: #895c31;
			margin: 2%;
			}
		
		.icon {width: 22px;
			padding-top: 6px;
			margin-left: -100%;
			}
   


/* -- type treatment -- */

		@font-face { font-family: Garvis Pro; src: url('Garvis_Pro_Bold-webfont.ttf'); } 
		
		h1, h2, h3, h4, h5, p, span, .publish, li, a {
			font-family: "Garvis Pro";
			}
		
		h1, h2, h3, h4 {
			font-weight: bold;
			color: #23996a;
			hyphens: auto;
			-webkit-hyphens: auto;
			-moz-hyphens: auto;
			}
		
		.df_brown {
			color: #895c31;
			}
		
		h2.df_green {
			color: #23996a;
			}
		
		p {
			color: #895c31;
			hyphens: auto;
			-webkit-hyphens: auto;
			-moz-hyphens: auto;
			line-height: 1.4;
			width: 100%;
			font-size: 1.1em;
			}
		
		.publish {
			color: #895c31;
			font-size: .8em;
			display: block;
			}
		
		.bold-copy, .yellow, .brown, .purple {
			font-weight: bold;
			}
		
		.yellow, .brown, .purple, .contact_hear_from_you, .italic {
			font-style: italic;
			}
		
		.contact_hear_from_you {
			margin: 0;
			padding: 0;
			background-color: ;
			}
		
		.yellow {
			color: #cbd321;
			}
		
		.brown {
			color: #927914;
			}
		
		.purple {
			color: #6e2a5f;
			}



/* -- desktop sprites -- */

		#div_top_page_tiles {
			float: left;
			width: 100%;
			margin: 0;
			padding: 0;
			}
		
		div.sprites-1 {
			float: left;
			width: 24.5%;
			margin-right: .5%;
			padding-bottom: 24%;
			background-image: url(../img/main_sprites_update-2-brown.jpg) !important;
			background-position: 0 0;
			background-size: 400%;
			display:block;
			}
		
		div.sprites-2 {
			float: left;
			width: 24%;
			margin: 0 .5% 0 .5%;
			padding-bottom: 24%;
			background-image: url(../img/main_sprites_update-2.jpg) !important;
			background-position: 33% 0;
			background-size: 400%;
			display:block;
			}
		
		div.sprites-3 {
			float: left;
			width: 24%;
			margin: 0 .5% 0 .5%;
			padding-bottom: 24%;
			background-image: url(../img/main_sprites_update-2-brown.jpg) !important;
			background-position: 66% 0;
			background-size: 400%;
			display:block;
			}
		
		div.sprites-4 {
			float: left;
			width: 24.5%;
			margin-left: .5%;
			padding-bottom: 24%;
			background-image: url(../img/main_sprites_update-2-brown.jpg) !important;
			background-position: 100% 0;
			background-size: 400%;
			display:block;
			}

		div.sprites-1:hover {
			background-position: 0% 100%; 
			}
		
		div.sprites-2:hover {
			background-position: 33.333% 100%; 
			}
		
		div.sprites-3:hover {
			background-position: 66.666% 100%; 
			}
		
		div.sprites-4:hover {
			background-position: 100% 100%;
			}
		
		#div_top_page_tiles_small {
			display: none;}



/* -- LEFT COLUMN -- */

		.quote {
			background-color: #895c31;
			color: #fff;
			font-size: 4.em;
			font-style: italic;
			text-align: center;
			padding: 20px 4% 20px 4%;
			}
		
		.column-box {
			background-color: #23996a;
			color: #fff;
			font-size: 4.em;
			font-style: bold;
			text-align: left;
			padding: 20px 4% 20px 4%;
			margin-bottom: 0;
			}
		
		h3.column-box {
			margin-bottom: 1%;
			letter-spacing: .05em;}


/* -- form -- */

		input#Field1.field.text.fn, input#Field3 {
			height: 30px;
			}
		
		.form_space {
			margin: 5px 0 5px 5px;
			}


/* -- left column structure -- */

		.column-left-wrapper {
			float: left;
			width: 66%;
			margin: 0 2% 0 2%;
			}
		
		section.column-left {
			float: left;
			}
		
		.column-left-img {
			float: left;
			width: 100%;
			margin: 0;
			display: block;
			padding: 0 0 15px 0;
			}


/* -- video -- */

		.video-responsive{
			overflow:hidden;
			padding-bottom:56.25%;
			position:relative;
			height:0;
			}
			
		.video-responsive iframe{
			left:0;
			top:0;
			height:100%;
			width:100%;
			position:absolute;
			padding: 15px 0 15px 0;
			}


/* -- anchor arrows -- */

		.arrow_space {
			margin: 20px;
			padding-top: 20px;
			}
		
		a.arrow_space {
			color: #23996a;
			}
		
		a.arrow_space:hover {
			color: #895c31;
			}



/* -- RIGHT COLUMN -- */


		.column-right-wrapper {
			float: right;
			width: 26%;
			margin: 0 2% 0 2%;
			}
			
		img.main_logo_small {
		   margin: -5% 0 -5% -16%;
		   }
		   
		.column-right-img {
			width: 100%;
			padding-bottom: 2%;
			}
			
		.space {
			margin-bottom: 0;}

/* -- contact -- */

			#contact {
				width: 100%;
				line-height: 1.4em;
				font-color: #895c31;
				}
			
			.contact_photos {
				clear: both;}
			
			.column-right-img-megan {
				width: 50%;
				display: block;
				padding: 0 1% 2% 0;
				}
			
			.column-right-img-jason {
				width: 50%;
				display: block;
				padding: 0 0 2% 1%;
				clear: right;
				}
			
			.megan_and_jason {
				width: 100%;
				color: #895c31;
				display: block;
				}
			


/* -- footer -- */

			footer {
				float: left;
				width: 100%;
				padding: 20px 2% 20px 2%;
				background-color: #e3e3e3;
				}
			
			.icon_footer {
				width: 22px;
				display: inline-block;
				margin-top: -1.5%;
				margin-right: 10px;
				padding-bottom: 10%;
				}
			
			.copyright {
				float: left;
				width: 100%;
				color: #666;
				}
			
			.site_nav_footer {
				float: left;
				width: 100%;
				}
			
			.site_nav_ul {
				float: left;
				width: 33.333333%;
				padding: 4% 4% 4% 4%;
				line-height: 1.6em;
				}
			
			.site_nav_li_title a {
				font-style: bold;
				}
			
			.site_nav_li, li {
				list-style-type: none;
				font-size: .8em;
				color: #666;
				}
			
			.site_nav a {
				list-style-type: none;
				color: #666;
				}
			
			.site_nav a:hover{
				color: #23996a;
				}



/* == 64.063em/620px ================== */
@media screen and (max-width: 620px) {

		#div_top_page_tiles, div.sprites-1, div.sprites-2, div.sprites-3, div.sprites-4 {
			display: none;
			}
			
		.main_logo { 
		   width: 100%; 
		   padding-right: 4%;
		   }
		 
		.icon {width: 22px;
			padding-top: 6px;
			margin-left: -7%;
			}
			
		.intro_copy {
			font-size: 1.4em;
			width: 96%;
			}
		
		.column-left-wrapper {
			float: left;
			width: 96%;
			margin: 0 2% 0 2%;
			}
			
		#contact-form {
			width: 100%;
			}
		
		.column-right-wrapper {
			float: right;
			width: 96%;
			margin: 0 2% 0 2%;
			}
		
		#contact {
			background-color: #e3e3e3;
			padding: 1% 3% 1% 3%;
			}
			
		.site_nav_ul {
			float: left;
			width: 33.333333%;
			padding: 0 4% 2% 2%;
			line-height: 1.6em;
			}


/* -- tablet sprites 620px -- */

		#div_top_page_tiles {
			display: none;
			}
		
		#div_top_page_tiles_small {
			display: block;
			float: left;
			width: 100%;
			margin: 0;
			padding: 0;
			}
		
		div.sprites-1_small {
			float: left;
			width: 49.5%;
			margin-right: .5%;
			padding-bottom: 15.8%;
			background-image: url(../img/tile_sprites_2x_small-brown.jpg) !important;
			background-position: 0 0;
			background-size: 400%;
			display:block;
			}
		
		div.sprites-2_small {
			float: left;
			width: 49.5%;
			margin-left: .5%;
			padding-bottom: 15.8%;
			background-image: url(../img/tile_sprites_2x_small-brown.jpg) !important;
			background-position: 33.23996a% 0;
			background-size: 400%;
			display:block;
			}
		
		div.sprites-3_small {
			float: left;
			width: 49.5%;
			margin-top: 1%;
			margin-right: .5%;
			padding-bottom: 15.8%;
			background-image: url(../img/tile_sprites_2x_small-brown.jpg) !important;
			background-position: 66.666666% 0;
			background-size: 400%;
			display:block;
			}
		
		div.sprites-4_small {
			float: left;
			width: 49.5%;
			margin-top: 1%;
			margin-left: .5%;
			padding-bottom: 15.8%;
			background-image: url(../img/tile_sprites_2x_small-brown.jpg) !important;
			background-position: 100% 0;
			background-size: 400%;
			display:block;
			}
		
		
		div.sprites-1_small:hover {
			background-position: 0% 100%; 
			}
		
		div.sprites-2_small:hover {
			background-position: 33.333333% 100%; 
			}
		
		div.sprites-3_small:hover {
			background-position: 66.666666% 100%; 
			}
		
		div.sprites-4_small:hover {
			background-position: 100% 100%;
			}

}


/* == 40.063em/320px ============= */
@media only screen and (max-width: 320px) {

		.icon {width: 22px;
			padding-top: 6px;
			margin-left: -12%;
			}
		
		.intro_copy {
			font-size: 1.3em;
			width: 96%;
			}
		
		.site_nav_ul {
			float: left;
			width: 100%;
			padding: 0 4% 2% 2%;
			line-height: 1.6em;
			}
		
/* --phone sprites -- */
		
		div.sprites-1_small, div.sprites-2_small, div.sprites-3_small, div.sprites-4_small {
			float: left;
			width: 100%;
			display: block;
			padding-bottom: 32.5%;
			margin: 1% 0 1% 0;
			}
}

/*
:)
*/