Column Layout

.o-column-layout

			
				<div class="o-column-layout">
					<div class="o-column-layout__main"></div>
					<div class="o-column-layout__aside"></div>
				</div>

Grid Layout

.o-grid

.o-grid_masonry

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis porro suscipit saepe ex id, architecto doloribus illo perferendis natus accusamus.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis porro suscipit saepe ex id, architecto doloribus illo perferendis natus accusamus.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis porro suscipit saepe ex id, architecto doloribus illo perferendis natus accusamus.

			
				<div class="o-grid">
					<div class="o-grid__item"></div>
				</div>

				<div class="o-grid o-grid_masonry">
					<div class="o-grid__sizer"></div>
					<div class="o-grid__item"></div>
				</div>

Stack Grid

.o-stack

.o-stack_mod

Available Patterns:

'square-100', 'rect-h-75', 'rect-h-75', 'square-50'
'rect-h-100', 'rect-h-75', 'rect-v-75'
'rect-v-75', 'square-100', 'rect-h-100', 'rect-h-100'

			
				<div class="o-stack__item o-stack__item_square-100" >
					<div class="c-image-link js-waypoint">
						<div class="c-image-link__bg" style="background-image: url(http://via.placeholder.com/650x650);"></div>
					</div>
				</div>
				<div class="o-stack__item o-stack__item_rect-h-75" >
					<div class="c-image-link js-waypoint">
						<div class="c-image-link__bg" style="background-image: url(http://via.placeholder.com/490x320);"></div>
					</div>
				</div>
				<div class="o-stack__item o-stack__item_rect-h-75" >
					<div class="c-image-link js-waypoint">
						<div class="c-image-link__bg" style="background-image: url(http://via.placeholder.com/490x320);"></div>
					</div>
				</div>
				<div class="o-stack__item o-stack__item_square-50" >
					<div class="c-image-link js-waypoint">
						<div class="c-image-link__bg" style="background-image: url(http://via.placeholder.com/325x325);"></div>
					</div>
				</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quam, sunt natus at. Aspernatur quasi sint soluta dolorem, iste eos commodi similique necessitatibus at cumque tenetur veritatis incidunt, nostrum ipsa.

			
				<div class="o-stack__item o-stack__item_rect-v-75" >
					<div class="o-stack__item-child js-waypoint">
						<div></div>
					</div>
					<div class="c-image-link js-waypoint">
						<div class="c-image-link__bg" style="background-image: url(http://via.placeholder.com/320x490);"></div>
					</div>
				</div>
				<div class="o-stack__item o-stack__item_square-100" >
					<div class="o-stack__item-child js-waypoint">
						<div></div>
					</div>
					<div class="c-image-link js-waypoint">
						<div class="c-image-link__bg" style="background-image: url(http://via.placeholder.com/650x650);"></div>
					</div>
				</div>
				<div class="o-stack__item o-stack__item_rect-h-100" >
					<div class="o-stack__item-child js-waypoint">
						<div></div>
					</div>
					<div class="c-image-link js-waypoint">
						<div class="c-image-link__bg" style="background-image: url(http://via.placeholder.com/650x425);"></div>
					</div>
				</div>
				<div class="o-stack__item o-stack__item_rect-h-100" >
					<div class="o-stack__item-child js-waypoint">
						<div></div>
					</div>
					<div class="c-image-link js-waypoint">
						<div class="c-image-link__bg" style="background-image: url(http://via.placeholder.com/650x425);"></div>
					</div>
				</div>

Article

.c-article-teaser

				
					<div class="c-article-teaser">
						<a class="c-label" href="#" style="background-color: #111;">Article Label</a>
						<a class="c-article-teaser__link" href="#"></a>
						<div class="c-article-teaser__bg">
							<div class="c-article-teaser__image" style="background-image:url(http://via.placeholder.com/360x300);"></div>
						</div>
						<div class="c-article-teaser__meta">
							<span class="c-article-teaser__subtitle" style="color:">Article Subtitle</span>
							<h3 class="c-article-teaser__title">Article Title</h3>
						</div>
					</div>

				
					<div class="c-ba-widget">
						<div class="c-ba-widget__section">
							<div class="c-ba-widget__image" style="background-image:url();"></div>
						</div>
						<div class="c-ba-widget__section " >
							<div class="c-ba-widget__image" style="background-image:url();"></div>
						</div>
						<div class="c-ba-widget__control">
							<div class="c-ba-widget__control-btn"></div>
						</div>
					</div>

Breadcrumbs

.c-breadcrumbs

With optional Card Icon

				
					<div class="c-breadcrumbs" style="color:" data-icon="">
						<?php if(function_exists('bcn_display')) { bcn_display();} ?>
					</div>

Link

Backlink

				
					<a href="" class="c-call-btn">
					<a href="" class="c-link">Link</a>
					<a href="" class="c-link-back">Backlink</a>
					<a class="c-btn" style="background: <?php echo $brand_color; ?>">Load More</a>

Callout

.c-callout

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde tempora repudiandae fuga omnis distinctio deserunt, repellendus doloribus expedita maxime in.

Lorem ipsum.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde tempora repudiandae fuga omnis distinctio deserunt, repellendus doloribus expedita maxime in.

Lorem ipsum.

				
					<div class="c-callout">
						<div class="c-callout__bg" style="background-image:url()"></div>
						<div class="c-callout__content">
							<h3 class="c-callout__title"></h3>
							<p class="c-callout__text"></p>
							<a href="#" target="" class="c-callout__link"></a>
						</div>
					</div>

Card

.c-card

Optional Card Icon

Variative Backgrounds

				
					<div class="c-card" style="background-color:;">
						<a href="#" class="c-card__link"></a>
						<div class="c-card__background" style="background-image:url();"></div>
						<div class="c-card__content">
							<img src="" alt="" class="c-card__icon">
							<h3 class="c-card__title"></h3>
							<p class="c-card__excerpt"></p>
						</div>
					</div>

Card Slider

.c-card-slider

Styles depend on the type of collection (project, post, service, sub) passed to the data-collection-type

.c-card-slider_post

				
					<div class="c-card-slider c-card-slider_post" >
						<div class="c-card-slider__bg"></div>
						<div class="c-card-slider__container js-slider" data-slider="card" data-card-type="project">
							<div class="c-card-slider__wrapper">
								<div class="c-card-slider__item c-card-slider__item_no-shadow">
									<div class="c-article-teaser"></div>
								</div>
							</div>
							<div class="c-card-slider__arrow c-card-slider__arrow_prev"></div>
							<div class="c-card-slider__arrow c-card-slider__arrow_next"></div>
						</div>
						<a href="<?php echo get_the_permalink(get_option( 'page_for_posts' )); ?>" class="c-link-back" style="color: <?php echo $brand_color; ?>;">BACK TO ALL POSTS</a>
					</div>

Label

SUBTITLE

Title

Label

SUBTITLE

Title

Label

SUBTITLE

Title

BACK TO ALL POSTS

.c-card-slider_project

				
					<div class="c-card-slider c-card-slider_project" >
						<div class="c-card-slider__bg" style="background-image: url()"></div>
						<a
							href="<?php echo get_the_permalink(get_page_by_path('projects')); ?>"
							class="c-card-slider__archive-link"
							style="color: <?php echo $brand_color; ?>; border-color: <?php echo $brand_color; ?>">
							MORE CASE STUDIES
						</a>
						<div class="c-card-slider__container js-slider" data-slider="card" data-card-type="project">
							<div class="c-card-slider__wrapper">
								<div class="c-card-slider__item c-card-slider__item_no-shadow">
									<div class="c-article-teaser"></div>
								</div>
							</div>
							<div class="c-card-slider__arrow c-card-slider__arrow_prev"></div>
							<div class="c-card-slider__arrow c-card-slider__arrow_next"></div>
						</div>
					</div>

MORE CASE STUDIES

SUBTITLE

Title

SUBTITLE

Title

SUBTITLE

Title

.c-card-slider_service / .c-card-slider_sub

				
					<div class="c-card-slider c-card-slider_service" >
						<div class="c-card-slider__bg" style="background-image: url()"></div>
						<div class="c-card-slider__container js-slider" data-slider="card" data-card-type="service">
							<div class="c-card-slider__wrapper">
								<div class="c-card-slider__item">
									<div class="c-card"></div>
								</div>
							</div>
							<div class="c-card-slider__arrow c-card-slider__arrow_prev"></div>
							<div class="c-card-slider__arrow c-card-slider__arrow_next"></div>
						</div>
						<a class="c-link c-card-slider__view-more" style="color: <?php echo $brand_color; ?>; border-color: <?php echo $brand_color; ?>">View More Services</a>
					</div>

Optional Title

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae laboriosam ipsum dolores dolorem, numquam velit delectus adipisci culpa quo recusandae.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae laboriosam ipsum dolores dolorem, numquam velit delectus adipisci culpa quo recusandae.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae laboriosam ipsum dolores dolorem, numquam velit delectus adipisci culpa quo recusandae.

View More Services

Categories Navigation

.c-category-nav

				
					<div class="c-category-nav">
						<h3 class="c-heading" style="color:; "></h3>
						<ul class="c-category-nav__list">
							<li class="c-category-nav__item c-category-nav__item_parent">
								<a class="c-category-nav__link" href="#"></a>
								<ul class="c-category-nav__list">
									<li class="c-category-nav__item">
										<a href="#" class="c-category-nav__link" style="color:;"></a>
									</li>
								</ul>
								<div class="c-decorator c-decorator_horizontal"  style="fill:;" >
									<div class="c-decorator__line" style="background-color:;"></div>
								</div>
							</li>
						</ul>
					</div>

Decorator

.c-decorator

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur non odit, atque a reiciendis. Iusto laboriosam suscipit quidem possimus animi eaque accusantium, nostrum ex odit optio ullam corporis facilis maxime sed sit dolorem voluptates eius soluta, nemo quaerat explicabo at, quas, saepe culpa officiis! Odio natus dignissimos, aliquam porro. Nulla!

.c-decorator_vertical

				
					<div class="c-decorator c-decorator_vertical"  style="fill: <?php echo $brand_color;?>;" >
						<div class="c-decorator__line" style="background-color:<?php echo $brand_color; ?>"><span></span></div>
					</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus vitae totam animi nam veniam reprehenderit.

.c-decorator_horizontal

				
					<div class="c-decorator c-decorator_horizontal"  style="fill: <?php echo $brand_color;?>;" >
						<div class="c-decorator__line" style="background-color:<?php echo $brand_color; ?>"><span></span></div>
					</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum laudantium, asperiores beatae molestiae veritatis voluptatibus possimus, molestias quam quod! Suscipit.

.c-decorator_mixed

				
					<div class="c-decorator c-decorator_horizontal c-decorator_mixed"  style="fill: <?php echo $brand_color;?>;" >
						<div class="c-decorator__line" style="background-color:<?php echo $brand_color; ?>"><span></span></div>
						<img class="c-decorator__icon svg" src="<?php echo get_template_directory_uri() ?>/images/decorative-icon-01.svg" alt="">
						<div class="c-decorator__line" style="background-color:<?php echo $brand_color; ?>"><span></span></div>
					</div>

Featured Services

.c-featured-services

				
					<div class="c-featured-services">
						<header class="c-featured-services__header">
							<h3 class="c-featured-services__title"></h3>
						</header>
						<div class="c-featured-services__list">
							<a class="c-featured-services__link" style="fill: #323131;" href="#">
								<img src="" class="svg" alt="">
								<span class="c-featured-services__link-text"></span>
							</a>
						</div>
					</div>

				
					<div class="c-filter-bar">
						<h3 class="c-title">Filter projects</h3>
						<div class="c-filter-bar__select" style="border-color: <?php echo $brand_color; ?>">
							<div class="c-filter-bar__select-title" style="color: <?php echo $brand_color; ?>">
								<h4 class="c-heading">BY SERVICE</h4>
							</div>
							<ul class="c-filter-bar__options">
								<?php
									$services = get_posts(array('post_type' => 'service', 'hide_empty' => false, 'numberposts' => -1));
									foreach($services as $service) :
								?>
									<li class="c-filter-bar__options-entry" data-filter=".<?php echo $service->post_name; ?>">
										<div class="c-decorator c-decorator_horizontal"  style="fill: <?php echo $brand_color;?>;" >
											<div class="c-decorator__line" style="background-color:<?php echo $brand_color; ?>"></div>
										</div>
										<h4 class="c-heading"><?php echo $service->post_title; ?></h4>
									</li>
								<?php endforeach; ?>
							</ul>
						</div>
						<div class="c-filter-bar__select" style="border-color: <?php echo $brand_color; ?>">
							<div class="c-filter-bar__select-title" style="color: <?php echo $brand_color; ?>">
								<h4 class="c-heading">BY MATERIAL</h4>
							</div>
							<ul class="c-filter-bar__options">
								<?php
									$tags = get_terms(array('hide_empty' => false,'taxonomy' => 'project-tags'));
									foreach($tags as $tag) :
								?>
									<li class="c-filter-bar__options-entry" data-filter=".<?php echo $tag->slug; ?>">
										<div class="c-decorator c-decorator_horizontal"  style="fill: <?php echo $brand_color;?>;" >
											<div class="c-decorator__line" style="background-color:<?php echo $brand_color; ?>"></div>
										</div>
										<h4 class="c-heading"><?php echo $tag->name; ?></h4>
									</li>
								<?php endforeach; ?>
							</ul>
						</div>
					</div>

Filter projects

BY SERVICE

Tree & Plant Installation Services
Landscape Architecture & Garden Design
Landscape Lighting
Landscape Structures & Carpentry
Landscape Stonework & Masonry
Lawn Care Services & Maintenance
Outdoor Living Design
Custom Pools, Spas & Water Features

BY MATERIAL

4 season spa
architecture
bar
bluestone
Bocce Ball
cabana
cabana with bathroom
cabana with kitchen
custom pools
fireplace
Garden design
Horticulture
landscape
Landscape architecture
Landscape Design
Landscape Design Team
Landscape Lighting
Landscape Master Plan
Landscape Stonework
Landscaping Architecture
Lap Pool
Lawn care services
Lightening
Masonry
Modern Farmhouse
Norway spruce
old stone wall
Outdoor Entertaining
outdoor kitchen
outdoor living retreat
Outdoor Living Spaces
patio
pergola
plant installation
Planting
Pool
raised deck
Rooftop Pool
seating area
small backyard
stainless steel pool
stone retaining walls
sun shelf
swimming pool on the second story
Terrace
tree services
vanishing edge pool
Water Feature
water features
wood deck

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia rem, tempore illo porro nam nulla minima id aliquam totam eligendi, laborum atque alias placeat quos consectetur expedita nemo sunt perspiciatis praesentium, eius iure vero error. Facere perferendis, labore alias consequuntur aperiam, ut enim recusandae placeat officiis necessitatibus laborum? Iure, voluptates!

				
					<div class="c-landing-intro">
					<h1 class="c-title" style="color: <?php echo $brand_color; ?>"></h1>
					<div class="c-landing-intro__content"></div>
					<div class="c-decorator c-decorator_horizontal c-decorator_mixed"  style="fill: <?php echo $brand_color;?>;" >
						<div class="c-decorator__line" style="background-color:<?php echo $brand_color; ?>"><span></span></div>
						<img class="c-decorator__icon svg" src="<?php echo get_template_directory_uri() ?>/images/decorative-icon-01.svg" alt="decoration">
						<div class="c-decorator__line" style="background-color:<?php echo $brand_color; ?>"><span></span></div>
					</div>
				</div>

Photo Slider

.c-photo-slider

				
					<div class="c-photo-slider" >
						<div class="c-photo-slider__container js-slider" data-slider="viewport">
							<div class="c-photo-slider__wrapper">
								<div class="c-photo-slider__item" >
									<div class="c-photo-slider__image" style="background-image: url();"></div>
										<div class="c-photo-slider__caption" style="color: <?php echo $brand_color; ?>"><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.31 17.37"><defs><style>.cls-1{fill:<?php echo $brand_color; ?>;}</style></defs><title>caption-icon</title><path class="cls-1" d="M8.06,7.47l.52.08A4.73,4.73,0,0,0,8.5,9.6q.59,1.83.88,1.76v.36H8.94a5.76,5.76,0,0,1-3.58-4,11.9,11.9,0,0,1,2.71-.22Zm1.4.22a6.75,6.75,0,0,1,3.22,1.9,2.08,2.08,0,0,1,.21,1.09,2.41,2.41,0,0,1-1.9.81l-.65-.29-.44-.59L9.31,9V7.7Zm-6-5.42-1-.66A2.33,2.33,0,0,0,.52,2L0,2.71v.07l.52-.51.59-.15.59.51.07.81L1.46,5v.81a1.84,1.84,0,0,0,.59,1.09,1.52,1.52,0,0,0,1.17.22q1-.52,1.25-.37l.15.59A5.32,5.32,0,0,0,2.34,9l-.59.8-.59,1.32A8.23,8.23,0,0,0,1,13.77a8,8,0,0,0,.88,2q1.46,1.68,2.71,1.61a7.43,7.43,0,0,0,.8-1.46,7.39,7.39,0,0,0,.08-2.64q-.29-1.46-2.34-1.9l-.44-.59V10l.51-1A4.14,4.14,0,0,1,4.62,8,7.13,7.13,0,0,0,8.5,12.3l1.32.29q.29.22,2.2-.36l1.17-.73h.37l.65.36.52,1.1-.08,1.46a2.67,2.67,0,0,1-.88,1.17V16l.29.29h.22a1.14,1.14,0,0,0,.73-.59q.95.07,1-.44a9,9,0,0,0-.52-2.57,13.05,13.05,0,0,0-1.09-2.12A9.49,9.49,0,0,0,11.5,8L9.45,7.11q.88-1.69,1-1.61a1.46,1.46,0,0,1,1.09-.08l1.69,1.17.73.15a15.73,15.73,0,0,0,2.93-1.17A1.63,1.63,0,0,1,18,5.94l.29.29V5.64A5.86,5.86,0,0,0,16.92,3.3l-1.25-.73a4.89,4.89,0,0,0-1.76-.22A6.15,6.15,0,0,0,8.64,7a3.73,3.73,0,0,0-1.76-.15l-1.61.29L5.2,6.74l.07-.15,1.54.08q1.39-.22.95-2.42A3.65,3.65,0,0,1,7,1.84q.52-1,1.61-.15A3.14,3.14,0,0,0,7.11.88a2.45,2.45,0,0,0-1.4.52L4.77,2.78a1.6,1.6,0,0,1,.29-1.24L5.57,1,6.23.59,5.13.81l-.8.51A1.74,1.74,0,0,0,4.1,0H4L3.89.59l.29.73A3.62,3.62,0,0,0,2.28,1l-.15.15a3.24,3.24,0,0,1,1.39.52q.59.95.52,1.24Z"/></svg></div>
								</div>
							</div>
							<div class="c-photo-slider__pagination"></div>
							<div class="c-photo-slider__arrow c-photo-slider__arrow_prev"></div>
							<div class="c-photo-slider__arrow c-photo-slider__arrow_next"></div>
						</div>
					</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo architecto temporibus tempora labore iste cupiditate repudiandae cum. Unde, earum, explicabo.

				
					<div class="o-column-layout">
						<div class="c-post-intro" style="background-image: url();">
							<div class="c-label" style="background-color: <?php echo $brand_color; ?>"></div>
							<?php get_template_part('templates/share-list'); ?>
							<?php get_template_part('templates/breadcrumbs'); ?>
						</div>
					</div>

Category label

Template guide

				
					<div class="c-share-list">
						<h4 class="c-share-list__title" style="color: <?php echo $brand_color; ?>" >SHARE</h4>
						<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo get_permalink(); ?>" class="c-share-list__item c-share-list__item_facebook"></a>
						<a target="_blank" href="https://twitter.com/home?status=<?php echo get_permalink(); ?>" class="c-share-list__item c-share-list__item_twitter"></a>
						<a target="_blank" href="mailto:?&subject=<?php echo get_the_title(); ?>&body=<?php echo get_the_permalink(); ?>" class="c-share-list__item c-share-list__item_mail"></a>
					</div>

				
					<div class="c-social-list" style="color: <?php echo $brand_color; ?>">
					<a href="<?php echo $s_facebook; ?>" target="_blank" class="c-social-list__item c-social-list__item_facebook"></a>
					<a href="<?php echo $s_instagram; ?>" target="_blank" class="c-social-list__item c-social-list__item_instagram"></a>
					<a href="<?php echo $s_linkedin; ?>" target="_blank" class="c-social-list__item c-social-list__item_linkedin"></a>
					<a href="<?php echo $s_houzz; ?>" target="_blank" class="c-social-list__item c-social-list__item_houzz"></a>
				</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, vero! Pariatur iure dignissimos, quibusdam porro maiores provident aliquid eum, ullam.

				
					<h2 class="c-subtitle">
						<span class="c-subtitle__text"></span>
						<div class="c-decorator c-decorator_horizontal c-decorator_mixed"  style="fill: <?php echo $brand_color;?>;" >
							<div class="c-decorator__line" style="background-color:<?php echo $brand_color; ?>"><span></span></div>
							<img class="c-decorator__icon svg" src="<?php echo get_template_directory_uri() ?>/images/decorative-icon-01.svg" alt="">
							<div class="c-decorator__line" style="background-color:<?php echo $brand_color; ?>"><span></span></div>
						</div>
					</h2>

Testimonials

.c-testimonials

				
					<div class="c-testimonials">
						<header class="c-sidebar-header">
							<h3 class="c-sidebar-header__title">TESTIMONIALS</h3>
							<div class="c-decorator c-decorator_horizontal"  style="fill: <?php echo $brand_color;?>;" >
								<div class="c-decorator__line" style="background-color:<?php echo $brand_color; ?>"><span></span></div>
							</div>
						</header>
						<div class="c-testimonials__entry">
							<blockquote class="c-testimonials__entry-content" style="color: <?php echo $brand_color; ?>;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nobis. Suscipit molestiae nesciunt, doloremque tempora unde nisi ullam saepe hic!</blockquote>
							<span class="c-testimonials__entry-author">Title</span>
							<span class="c-testimonials__entry-location">Location</span>
						</div>
					</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, consequatur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta esse corporis, cupiditate quas possimus aut id unde iusto aperiam dolorem.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur tenetur asperiores ipsam, dolorum officia modi.

Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Elit lorem ipsum dolor sit amet, consectetur adipiscing.

Lorem ipsum dolor sit amet, consectetur adipisicing.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam perferendis cumque ullam doloremque distinctio, nihil officia maiores tempore inventore recusandae.

Text Editor

.c-text-editor

ACF flexible content 'editor' field is required

				
				<style>
					.c-text-editor h1,
					.c-text-editor h2,
					.c-text-editor h3,
					.c-text-editor h4,
					.c-text-editor h5,
					.c-text-editor h6 {
						color: <?php echo $brand_color; ?>
					}
				</style>
				<div class="c-text-editor">
					get_sub_field('editor');
				</div>

.c-title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, atque.

				
					<h3 class="c-title"></h3>

.c-heading

Lorem ipsum dolor sit amet.

				
					<h3 class="c-heading"></h3>

.c-label

Label

				
					<span class="c-label" style="background-color: <?php echo $brand_color; ?>;">Label</span>

Titles

.c-sidebar-header

				
					<header class="c-sidebar-header">
						<h3 class="c-sidebar-header__title"></h3>
						<div class="c-decorator c-decorator_horizontal"  style="fill: <?php echo $brand_color;?>;" >
							<div class="c-decorator__line" style="background-color:<?php echo $brand_color; ?>"><span></span></div>
						</div>
					</header>

				
					<div class="c-viewport-image" style="background-image: url(http://via.placeholder.com/1920x1080);">
						<div class="c-viewport-image__caption" style="color: <?php echo $brand_color; ?>"><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.31 17.37"><defs><style>.cls-1{fill:<?php echo $brand_color; ?>;}</style></defs><title>caption-icon</title><path class="cls-1" d="M8.06,7.47l.52.08A4.73,4.73,0,0,0,8.5,9.6q.59,1.83.88,1.76v.36H8.94a5.76,5.76,0,0,1-3.58-4,11.9,11.9,0,0,1,2.71-.22Zm1.4.22a6.75,6.75,0,0,1,3.22,1.9,2.08,2.08,0,0,1,.21,1.09,2.41,2.41,0,0,1-1.9.81l-.65-.29-.44-.59L9.31,9V7.7Zm-6-5.42-1-.66A2.33,2.33,0,0,0,.52,2L0,2.71v.07l.52-.51.59-.15.59.51.07.81L1.46,5v.81a1.84,1.84,0,0,0,.59,1.09,1.52,1.52,0,0,0,1.17.22q1-.52,1.25-.37l.15.59A5.32,5.32,0,0,0,2.34,9l-.59.8-.59,1.32A8.23,8.23,0,0,0,1,13.77a8,8,0,0,0,.88,2q1.46,1.68,2.71,1.61a7.43,7.43,0,0,0,.8-1.46,7.39,7.39,0,0,0,.08-2.64q-.29-1.46-2.34-1.9l-.44-.59V10l.51-1A4.14,4.14,0,0,1,4.62,8,7.13,7.13,0,0,0,8.5,12.3l1.32.29q.29.22,2.2-.36l1.17-.73h.37l.65.36.52,1.1-.08,1.46a2.67,2.67,0,0,1-.88,1.17V16l.29.29h.22a1.14,1.14,0,0,0,.73-.59q.95.07,1-.44a9,9,0,0,0-.52-2.57,13.05,13.05,0,0,0-1.09-2.12A9.49,9.49,0,0,0,11.5,8L9.45,7.11q.88-1.69,1-1.61a1.46,1.46,0,0,1,1.09-.08l1.69,1.17.73.15a15.73,15.73,0,0,0,2.93-1.17A1.63,1.63,0,0,1,18,5.94l.29.29V5.64A5.86,5.86,0,0,0,16.92,3.3l-1.25-.73a4.89,4.89,0,0,0-1.76-.22A6.15,6.15,0,0,0,8.64,7a3.73,3.73,0,0,0-1.76-.15l-1.61.29L5.2,6.74l.07-.15,1.54.08q1.39-.22.95-2.42A3.65,3.65,0,0,1,7,1.84q.52-1,1.61-.15A3.14,3.14,0,0,0,7.11.88a2.45,2.45,0,0,0-1.4.52L4.77,2.78a1.6,1.6,0,0,1,.29-1.24L5.57,1,6.23.59,5.13.81l-.8.51A1.74,1.74,0,0,0,4.1,0H4L3.89.59l.29.73A3.62,3.62,0,0,0,2.28,1l-.15.15a3.24,3.24,0,0,1,1.39.52q.59.95.52,1.24Z"/></svg></div>
					</div>

Page Title

Column Layout

Grid Layout

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Stack Grid

Article

Article Title

Before/After Widget

Breadcrumbs

Buttons

Callout

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Card

Lorem ipsum dolor sit amet.

Card Slider

Title

Title

Title

Title

Title

Title

Optional Title

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Categories Navigation

BLOG CATEGORIES

Decorator

Featured Services

Filter BAR

Filter projects

BY SERVICE

Tree & Plant Installation Services

Landscape Architecture & Garden Design

Landscape Lighting

Landscape Structures & Carpentry

Landscape Stonework & Masonry

Lawn Care Services & Maintenance

Outdoor Living Design

Custom Pools, Spas & Water Features

BY MATERIAL

4 season spa

architecture

bar

bluestone

Bocce Ball

cabana

cabana with bathroom

cabana with kitchen

custom pools

fireplace

Garden design

Horticulture

landscape

Landscape architecture

Landscape Design

Landscape Design Team

Landscape Lighting

Landscape Master Plan

Landscape Stonework

Landscaping Architecture

Lap Pool

Lawn care services

Lightening

Masonry

Modern Farmhouse

Norway spruce

old stone wall

Outdoor Entertaining

outdoor kitchen

outdoor living retreat

Outdoor Living Spaces

patio

pergola

plant installation

Planting

Pool