/*!
	Theme Name: Backyard Creations
	Author URI: http://nathanshanahan.com
	Description: Designed by Brett Layton at TwofromTwo, developement by Nathan Shanahan
	Version: 1.1
	Author: Nathan Shanahan nathan@nathanshanahan.com
*/
/* ===============================================
		Flexbox
		@include flexbox(row, $mobile);
===============================================	*/
/*  ==========================================================================
		Fonts	
		========================================================================== */
/* weights, 500, 700 */
/*  ==========================================================================
		Line Height	& Margins
		========================================================================== */
/*  ==========================================================================
		Font Weights	
		========================================================================== */
/*  ==========================================================================
		Colors	
		========================================================================== */
/*  ==========================================================================
		Wrap & page setups width	
		========================================================================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

html {
  height: 100%; }

body {
  line-height: 1;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: none;
  margin: 0; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

cite {
  display: block; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

.clear:before, .clear:after {
  content: ' ';
  display: table; }

.clear {
  *zoom: 1; }
  .clear:after {
    clear: both; }

.group:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0; }

.group {
  display: inline-block; }

/* start commented backslash hack \*/
* html .group {
  height: 1%; }

.group {
  display: block; }

/* close commented backslash hack */
img {
  max-width: 100%;
  vertical-align: bottom; }

a:focus {
  outline-width: 0; }

/* Width + Padding = element width */
*,
*:after,
*:before {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box; }

.wf-loading h1, .wf-loading h2, .wf-loading h3, .wf-loading h4, .wf-loading ul, .wf-loading li, .wf-loading a, .wf-loading p {
  visibility: hidden; }

.wf-active h1, .wf-active h2, .wf-active h3, .wf-active h4, .wf-active ul, .wf-active li, .wf-active a, .wf-active p {
  visibility: visible; }

/* =============================================================================
   5. 	Global Styles
   ========================================================================== */
body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  line-height: 36px;
  background: #FFF;
  color: #404041;
  background: none;
  overflow-x: hidden;
  overflow-y: scroll;
  -moz-box-sizing: border-box;
       box-sizing: border-box; }

a {
  text-decoration: none;
  color: inherit; }

a:focus {
  border: none; }

.group:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0; }

/* =============================================================================
   Single Full Width
   ========================================================================== */
.wrap {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  width: 1400px;
  background: #FFF; }
  @media (max-width: 1400px) {
    .wrap {
      width: 100%; } }

/* =============================================================================
    Responsive move arounds
   ========================================================================== */
.mobile {
  display: none; }
  @media (max-width: 1024px) {
    .mobile {
      display: block; } }

.desktop {
  display: block; }
  @media (max-width: 1024px) {
    .desktop {
      display: none; } }

/* =============================================================================
   Buttons and other Elements 
   ========================================================================== */
.btn {
  -moz-border-radius: 50em;
       border-radius: 50em;
  padding: 1% 3%;
  border: 1px solid #404041;
  font-family: "Apercu Mono", "Source Code Pro", monospace; }
  .btn:hover {
    background: #FF4337;
    color: #FFF; }
  @media (max-width: 1024px) {
    .btn {
      display: inline;
      text-align: center;
      margin: 0 auto; } }

.btn-primary {
  color: #FF4337;
  border: 1px solid #FF4337; }

/* =============================================================================
   Default Page Sections 
   ========================================================================== */
.page_title {
  float: left;
  width: 100%; }
  @media (max-width: 1024px) {
    .page_title {
      float: none;
      padding-top: 1em; } }

.page_section {
  display: inline-block; }
  .page_section .content {
    width: 66.7%;
    float: left;
    padding: 0 5% 20px 12%;
    position: relative;
    z-index: 4; }
    @media (max-width: 1024px) {
      .page_section .content {
        float: none;
        width: 100%;
        padding: 0 5%;
        margin-bottom: 1em; } }
  .page_section:first-of-type .page_title {
    display: block; }
  .page_section:first-of-type .content {
    padding: 50px 5% 0 12%; }
    @media (max-width: 1024px) {
      .page_section:first-of-type .content {
        padding: 0 5%;
        margin-bottom: 2em; } }
  .page_section:nth-of-type(even) .content {
    padding: 0 12% 0 5%;
    float: right; }
    @media (max-width: 1024px) {
      .page_section:nth-of-type(even) .content {
        float: none;
        padding: 0 5%; } }
  .page_section:nth-of-type(even) figure {
    float: left; }
  .page_section .page_title {
    display: none; }
  .page_section ul {
    padding: 0.5em 0 0 30px; }
    .page_section ul:last-child {
      padding-bottom: 25px; }
      @media (max-width: 1024px) {
        .page_section ul:last-child {
          padding-bottom: 1em; } }
  .page_section .listcolumn {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    -webkit-column-gap: 20px;
       -moz-column-gap: 20px;
            column-gap: 20px; }
    @media (max-width: 768px) {
      .page_section .listcolumn {
        -webkit-column-count: 1;
           -moz-column-count: 1;
                column-count: 1;
        -webkit-column-gap: 0;
           -moz-column-gap: 0;
                column-gap: 0; } }
    .page_section .listcolumn li {
      list-style-position: inside; }
  .page_section li {
    list-style-type: circle;
    list-style-position: outside;
    color: #FF4337;
    font-size: 34px;
    line-height: 34px; }
    .page_section li span {
      display: inline;
      color: #404041;
      font-size: 12px;
      vertical-align: top; }
  .page_section figure {
    float: right;
    width: 33.3%; }
    @media (max-width: 1024px) {
      .page_section figure {
        width: 100%;
        margin-bottom: 2em; } }

/* =============================================================================
   Image
   ========================================================================== */
figure {
  position: relative;
  z-index: 1;
  display: block;
  overflow: visible;
  background: #404041;
  -moz-transition: all 0.85s ease;
  transition: all 0.85s ease; }
  figure img {
    min-width: 100%;
    -moz-transition: opacity 0.75s ease;
    transition: opacity 0.75s ease; }

figcaption {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%; }
  figcaption p {
    -moz-transition: all 0.65s ease;
    transition: all 0.65s ease;
    margin-top: 400px;
    /* 	margin-top: 80vh; */
    color: #FFF;
    padding: 0 15%;
    text-align: center;
    width: 100%; }
    @media (max-width: 1400px) {
      figcaption p {
        padding: 0 2em; } }
  figcaption p a {
    text-decoration: underline; }
    figcaption p a:hover {
      color: #FF4337; }

/* =============================================================================
   Images with rollover 
   ========================================================================== */
li figure {
  overflow: hidden; }

li figure:hover h4 {
  margin-top: 25%; }

li figure:hover img {
  opacity: 0.2; }

li figure:hover p {
  margin-top: 2em; }
  @media (max-width: 1400px) {
    li figure:hover p {
      margin-top: 1.5em; } }

.mobile-nav-icon {
  width: 20px;
  height: 15px; }

.logotype {
  fill: #FFF;
  height: 46px;
  width: 234px; }

.logo {
  fill: #FFF;
  height: 74px;
  width: 278px; }

.instagram-icon {
  fill: #FFF;
  height: 14px;
  width: 14px; }
  .instagram-icon:hover {
    fill: #f2f2f2; }

.facebook-icon {
  fill: #FFF;
  height: 14.8px;
  width: 8px; }
  .facebook-icon:hover {
    fill: #f2f2f2; }

.mail-icon {
  fill: #FFF;
  height: 11px;
  width: 13.5px; }
  .mail-icon:hover {
    fill: #f2f2f2; }

.houzz_icon {
  fill: #FFF;
  height: 20px;
  width: 13px; }
  .houzz_icon:hover {
    fill: #f2f2f2; }

.back-to-top-icon, .scroll-to-content {
  fill: #FFF;
  height: 8.8px;
  width: 14.9px; }
  .back-to-top-icon:hover, .scroll-to-content:hover {
    fill: #f2f2f2; }

.stroked-line {
  fill: #FF4337;
  height: 66.9px;
  width: 10px;
  opacity: 0; }

.rainbow, .rainbowinverted {
  fill: #FF4337;
  height: 215px;
  width: 215px; }

.maru-batsu {
  width: 214px;
  height: 231.9px; }
  @media (max-width: 1400px) {
    .maru-batsu {
      width: 171.2px;
      height: 185.52px; } }

.footer-illustration {
  width: 456.6px;
  height: 403.1px; }

/* =============================================================================
   Annimation
   ========================================================================== */
.stroke {
  position: absolute;
  right: -40px;
  width: 590px;
  bottom: 0px;
  z-index: 3;
  overflow: hidden;
  height: 67px; }
  @media (max-width: 1400px) {
    .stroke {
      right: 10%;
      width: 380px; } }
  @media (max-width: 1024px) {
    .stroke {
      right: 0;
      width: 100%;
      height: 55px; } }

.stroked-line {
  margin-right: 40px;
  text-align: left;
  float: right; }

.rainbow {
  opacity: 0;
  -moz-transition: opacity 1s ease-in;
  transition: opacity 1s ease-in;
  position: absolute;
  right: -5%;
  bottom: -5%;
  z-index: 2; }
  @media (max-width: 1400px) {
    .rainbow {
      max-height: 25vh;
      max-width: 25vh;
      text-align: right; } }

.visible .rainbow {
  opacity: 1; }

.rainbowinverted {
  opacity: 0;
  -moz-transition: opacity 1s ease-in;
  transition: opacity 1s ease-in;
  position: absolute;
  left: -5%;
  bottom: -5%;
  z-index: 10; }
  @media (max-width: 1400px) {
    .rainbowinverted {
      max-height: 25vh;
      max-width: 25vh;
      text-align: right; } }

.visible .rainbowinverted {
  opacity: 1; }

.leaves {
  position: absolute;
  top: 200px;
  right: 5%;
  z-index: 1;
  height: 300px;
  width: 200;
  -moz-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out; }
  @media (max-width: 1024px) {
    .leaves {
      display: none; } }

.visible .leaves {
  height: 357.1px;
  width: 254.4px;
  top: -80px; }
  @media (max-width: 1400px) {
    .visible .leaves {
      height: 35.7vh;
      width: 25.4vh;
      top: -60px; } }

.home_tagline {
  position: absolute;
  top: -40px;
  right: 5%;
  z-index: 1;
  display: block;
  width: 22%;
  fill: #FF4337; }
  @media (max-width: 1400px) {
    .home_tagline {
      width: 36vh;
      top: -60px; } }
  @media (max-width: 768px) {
    .home_tagline {
      position: static;
      text-align: center;
      margin: 1em auto; } }

.services {
  position: relative; }
  .services .group {
    position: relative;
    z-index: 2; }

.maru-batsu {
  fill: #FF4337;
  position: absolute;
  right: 40px;
  bottom: -130px; }
  @media (max-width: 1400px) {
    .maru-batsu {
      bottom: -25px; } }
  .maru-batsu:nth-of-type(2) {
    left: -85px;
    bottom: 140px;
    -webkit-transform: rotate(-135deg);
       -moz-transform: rotate(-135deg);
            transform: rotate(-135deg); }

/* =============================================================================
   Headings
   ========================================================================== */
strong, b, .bold {
  font-weight: 700; }

h1, h2 {
  font-family: "Apercu Mono", "Source Code Pro", monospace;
  font-weight: 500;
  font-size: 37px;
  margin-bottom: 34px;
  text-decoration: underline;
  display: inline-block;
  color: #FF4337; }
  @media (max-width: 1400px) {
    h1, h2 {
      width: 100%;
      font-size: 37px;
      margin: 1em 0; } }
  @media (max-width: 1024px) {
    h1, h2 {
      font-size: 25px;
      text-align: center;
      display: block;
      margin: 0 auto 1em auto;
      width: 100%; } }

h3 {
  color: #FF4337;
  font-size: 20px;
  font-weight: 700; }

h4 {
  font-family: "Apercu Mono", "Source Code Pro", monospace;
  display: inline-block;
  -moz-border-radius: 50em;
       border-radius: 50em;
  font-weight: 700;
  padding: 4px 18px;
  line-height: 1;
  border: 2px solid #FFF;
  color: #FFF; }

h5, h6 {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 500;
  padding-bottom: 34px;
  font-size: 20px;
  font-size: 1.8vw; }
  @media (max-width: 1024px) {
    h5, h6 {
      font-size: 26px;
      font-size: 3.2vw; } }

/* =============================================================================
   Paragraph Styles
   ========================================================================== */
h4, p, ul, li, address {
  font-size: 14px;
  line-height: 36px;
  font-weight: 300;
  letter-spacing: -0.14px; }
  @media (max-width: 1400px) {
    h4, p, ul, li, address {
      font-size: 14px; } }
  @media (max-width: 1024px) {
    h4, p, ul, li, address {
      font-size: 18px;
      line-height: 28.8px; } }

ul + p {
  padding-top: 0.5em; }

p + p {
  padding-top: 1em; }

p + h3 {
  padding-top: 50px; }
  @media (max-width: 1024px) {
    p + h3 {
      padding-top: 1em; } }

p:last-child {
  padding-bottom: 50px; }
  @media (max-width: 1024px) {
    p:last-child {
      padding-bottom: 1em; } }

/* ============ Placeholder Text Color ============*/
::-webkit-input-placeholder {
  color: #59595b; }

:-moz-placeholder {
  /* Firefox 18- */
  color: #59595b; }

::-moz-placeholder {
  /* Firefox 19+ */
  color: #59595b; }

:-ms-input-placeholder {
  color: #59595b; }

/* ============ Placeholder Text Color Focus ============*/
input:focus::-webkit-input-placeholder,
.input:focus::-webkit-input-placeholder {
  color: #4d4d4e; }

input:focus:-moz-placeholder,
.input:focus:-moz-placeholder {
  /* Firefox 18- */
  color: #4d4d4e; }

input:focus::-moz-placeholder,
.input:focus::-moz-placeholder {
  /* Firefox 19+ */
  color: #4d4d4e; }

input:focus:-ms-input-placeholder,
input:focus:-ms-input-placeholder {
  color: #4d4d4e; }

/* ============ Placeholder Text Color Error ============*/
.error::-webkit-input-placeholder {
  color: #cc0000; }

.error:-moz-placeholder {
  /* Firefox 18- */
  color: #cc0000; }

.error::-moz-placeholder {
  /* Firefox 19+ */
  color: #cc0000; }

.error:-ms-input-placeholder {
  color: #cc0000; }

/* ============ Form Styling ============*/
form input:focus,
form .input:focus {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  outline: 0;
  background: #f2f2f2;
  -moz-box-shadow: 1px 1px 2px -6px #272727;
       box-shadow: 1px 1px 2px -6px #272727; }

form .input {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  background: #e6e5e5;
  border: none;
  font-size: 14px;
  padding: 16px;
  margin-bottom: 16px;
  width: 100%; }

form .important {
  display: none; }

.textarea {
  min-height: 125px; }

.submit {
  background: #FF4337;
  border: none;
  color: #FFF;
  font-size: 14px;
  padding: 7px 14px;
  margin-top: 0px;
  float: right;
  -webkit-appearance: none;
  -moz-border-radius: 100em;
       border-radius: 100em; }
  .submit:hover {
    background: #59595b;
    color: #FFF; }

.required {
  float: left; }

/* ============ Form Modal ============*/
.modal-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(64, 64, 65, 0.9);
  z-index: 100;
  pointer-events: auto; }

.modal-form-response {
  margin: 25% auto 0;
  width: 45%;
  padding: 2.5%;
  background: #FFF;
  display: block; }
  @media (max-width: 767px) {
    .modal-form-response {
      width: 75%;
      margin: 10% auto 0; } }

.modal-close {
  background: #FF4337;
  color: #FFF;
  border: none;
  display: block;
  margin: 1em auto;
  padding: 8px 12px; }
  .modal-close:hover {
    background: #d00c00; }

.budget {
  display: block;
  margin: .5em 2.5% 1em; }
  .budget p {
    font-weight: 700;
    line-height: 1; }
  .budget input {
    margin-right: 0.5em; }
  .budget label {
    margin-right: 1.5em;
    font-size: 14px; }

/* =============================================================================
   Header and Nav
   ========================================================================== */
#main_navigation {
  background: #696A6C;
  padding: 18px;
  padding: 1.5vh;
  font-family: "Apercu Mono", "Source Code Pro", monospace;
  color: #FFF;
  width: 100%;
  z-index: 10; }
  #main_navigation ul {
    text-align: center; }
  #main_navigation li {
    display: inline-block;
    vertical-align: middle;
    padding: 18px 0;
    padding: 1.8vh 0;
    font-size: 16px; }
    @media (max-width: 1024px) {
      #main_navigation li {
        padding: 18px 0;
        padding: 1.8vh 0;
        font-size: 14px;
        font-size: 1.6vw; } }
    #main_navigation li:not(:last-of-type):after {
      content: '';
      display: inline-block;
      width: 36px;
      width: 3vw;
      height: 36px;
      height: 4vh;
      margin-bottom: -24px;
      margin-bottom: -1.4vh;
      background: url(img/nav-stripe.png) center center no-repeat;
      padding: 0 24px;
      padding: 0 1.8vw; }
      @media (max-width: 1024px) {
        #main_navigation li:not(:last-of-type):after {
          display: none; } }
    #main_navigation li:last-of-type:after {
      content: '';
      display: inline-block;
      width: 36px;
      width: 3vw;
      height: 36px;
      height: 4vh;
      margin-bottom: -24px;
      margin-bottom: -1.4vh;
      background: none;
      padding: 0 24px;
      padding: 0 1.8vw; }
      @media (max-width: 1024px) {
        #main_navigation li:last-of-type:after {
          display: none; } }
  #main_navigation a {
    display: inline-block;
    vertical-align: middle; }
  #main_navigation a:hover {
    color: #FF4337; }
  #main_navigation a:active, #main_navigation a:focus {
    color: #FF4337; }
  #main_navigation .menu-button {
    display: none;
    /* Hide on large screen devices */
    cursor: pointer; }
    #main_navigation .menu-button .mobile-nav-icon {
      vertical-align: middle;
      fill: #FFF;
      margin-top: -3px; }
    @media (max-width: 1024px) {
      #main_navigation .menu-button {
        /* Make visible on small screen devices */
        display: block; } }

.home #main_navigation {
  position: absolute;
  bottom: 0;
  left: 0; }

/* State of navigation after scrolling past first viewport (on the home page only) Controlled by scripts.js */
.home.scrolled #main_navigation {
  position: fixed;
  bottom: auto;
  top: 0; }

/* Prevent current pages linking back to themselves. */
.current-menu-item {
  pointer-events: none;
  color: #FF4337; }
  @media (max-width: 600px) {
    .current-menu-item {
      color: #cccccc; } }

/* =============================================================================
   Small Screen Navigation Version 
   ========================================================================== */
@media (max-width: 1024px) {
  #main_navigation {
    padding: 12px 0;
    background: #696A6C;
    color: #FFF;
    width: 100%;
    z-index: 9999;
    text-align: center; }
    #main_navigation ul {
      border: none;
      display: block;
      width: 100%;
      text-align: center; }
    #main_navigation li {
      display: none;
      /* hidden until active */
      border-bottom: 1px solid #FFF;
      width: 60%;
      margin: 0 auto;
      font-size: 4vw; }
    #main_navigation li:first-of-type {
      padding-top: 6px; }
    #main_navigation li:last-of-type {
      border-bottom: none; }
    #main_navigation a {
      padding: 6px 0; } }

/* State of mobile nave when clicked */
@media (max-width: 1024px) {
  #main_navigation .active + ul li {
    display: block; } }

.home .page-header {
  display: block;
  width: 100vw;
  height: 100vh;
  text-align: center;
  background-repeat: no-repeat;
  -moz-background-size: cover;
       background-size: cover;
  background-position: center bottom; }

.home .backyard-creations-logo {
  display: inline-block; }

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
  .home .page-header {
    height: 1024px; } }

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
  .home .page-header {
    height: 768px; } }

@media screen and (device-aspect-ratio: 40 / 71) {
  .home .page-header {
    height: 460px; } }

.page-header {
  display: block;
  min-width: 100%; }

.backyard-creations-logo {
  display: block;
  background: #FF4337;
  padding: 34px;
  /* padding: 2.5vw; */ }
  @media (max-width: 1024px) {
    .backyard-creations-logo {
      width: 100%;
      padding: 16px; } }

.backyard_creations_full_logo {
  width: 80%;
  max-width: 240px;
  vertical-align: middle;
  display: block;
  margin: 0 auto;
  fill: #FFF; }
  @media (max-width: 1400px) {
    .backyard_creations_full_logo {
      width: 80%;
      margin: 0 auto; } }
  @media (max-width: 1024px) {
    .backyard_creations_full_logo {
      width: 55%;
      margin: 0 auto; } }

.home .backyard_creations_full_logo {
  max-width: 300px; }

.social-media {
  position: fixed;
  z-index: 11;
  top: 42%;
  right: 0;
  background: #FF4337;
  text-align: center;
  font-size: 0;
  padding: 2px 0;
  -moz-transition: all .3s ease;
  transition: all .3s ease; }
  @media (max-width: 1024px) {
    .social-media {
      position: absolute; } }
  .social-media li {
    -moz-transition: all .3s ease;
    transition: all .3s ease;
    font-size: 0;
    line-height: 0;
    padding: 7px; }
  .social-media:hover li {
    padding: 7px 14px; }
  .social-media li:last-of-type {
    height: 0;
    padding: 0;
    opacity: 0; }

.scroll-hint .social-media .scroll-hide {
  height: 0;
  padding: 0;
  opacity: 0; }

.scrolled .social-media li:last-of-type {
  height: auto;
  padding: 14px 7px 7px;
  opacity: 1; }

/* ===============================================
		Tagline
===============================================	*/
.tagline-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
     -moz-box-orient: horizontal;
     -moz-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  padding-top: 40px;
  -webkit-box-align: end;
     -moz-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
     -moz-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }
  @media (max-width: 1024px) {
    .tagline-container {
      display: block; } }
  @media (max-width: 1024px) {
    .tagline-container {
      display: block; } }
  .tagline-container .footer-illustration {
    -webkit-box-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    fill: #FF4337;
    -ms-flex-item-align: end;
        align-self: flex-end;
    margin-bottom: -135px;
    max-width: 500px; }
    @media (max-width: 1400px) {
      .tagline-container .footer-illustration {
        display: none; } }
  .tagline-container .tagline {
    fill: #FF4337;
    max-width: 500px;
    margin: 2.5%;
    -webkit-box-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center; }
    @media (max-width: 1400px) {
      .tagline-container .tagline {
        max-width: 350px; } }
  .tagline-container .industry_logos {
    padding-bottom: 1em;
    -webkit-box-flex: 0.8;
       -moz-box-flex: 0.8;
        -ms-flex: 0.8;
            flex: 0.8;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    max-width: 500px;
    -webkit-box-pack: end;
       -moz-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: end;
       -moz-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -ms-flex-line-pack: end;
        align-content: flex-end; }
    @media (max-width: 768px) {
      .tagline-container .industry_logos {
        display: block; } }
    @media (max-width: 768px) {
      .tagline-container .industry_logos {
        text-align: center; } }
    .tagline-container .industry_logos li {
      -webkit-box-flex: 1;
         -moz-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      margin: 0 .5em; }
      @media (max-width: 768px) {
        .tagline-container .industry_logos li {
          padding: 1em 0; } }

.landscape_industry_logo, .waterwise_logo, .houzz_2017_logo {
  width: 105px;
  vertical-align: middle; }
  @media (max-width: 1024px) {
    .landscape_industry_logo, .waterwise_logo, .houzz_2017_logo {
      width: 80px; } }

/* ===============================================
		Footer Links
===============================================	*/
.footer-links {
  text-align: center;
  width: 100%; }
  .footer-links li {
    display: inline;
    font-size: 12px; }
    @media (max-width: 768px) {
      .footer-links li {
        font-size: 16px;
        display: block;
        padding-bottom: 16px;
        white-space: nowrap; }
        .footer-links li span {
          display: none; } }
  .footer-links .btn {
    border-color: #FFF; }
    .footer-links .btn:hover {
      color: #FF4337;
      background: #FFF; }

.page-footer {
  display: block;
  text-align: center;
  background: #FF4337;
  color: #FFF;
  padding: 60px;
  width: 100%;
  position: relative; }
  @media (max-width: 1024px) {
    .page-footer {
      padding: 40px 5% 50px; } }
  @media (max-width: 768px) {
    .page-footer {
      padding: 40px 1.5% 50px; } }
  .page-footer .backyard_creations_full_logo {
    fill: #FFF;
    max-width: 256px;
    margin-bottom: 2em; }

.site_credits {
  padding: 2px 10px 0; }
  .site_credits a:hover {
    border-bottom: 1px solid #FF4337; }
  .site_credits p {
    float: left;
    font-size: 11px; }
    @media (max-width: 1024px) {
      .site_credits p {
        font-size: 8px;
        float: none;
        line-height: 10px;
        display: inline; } }
  .site_credits ul {
    float: right;
    font-size: 11px; }
    @media (max-width: 1024px) {
      .site_credits ul {
        float: none;
        display: inline; } }
    .site_credits ul li {
      display: inline-block;
      font-size: 11px; }
      .site_credits ul li:not(:first-of-type):before {
        content: "|";
        display: inline-block;
        padding: 0 5px; }
        @media (max-width: 1024px) {
          .site_credits ul li:not(:first-of-type):before {
            display: none; } }
      @media (max-width: 1024px) {
        .site_credits ul li {
          font-size: 9px;
          padding: 0;
          line-height: 10px; } }

.preload {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 1px;
  height: 1px;
  visibility: hidden;
  overflow: hidden; }

#noscript-warning {
  position: fixed;
  top: 0;
  width: 100%;
  /* For Browser Compatibility */ }

.google-maps-link {
  max-width: 100%; }

.gmnoprint img {
  max-width: none;
  z-index: 9999; }

/* =============================================================================
   Home Page Section
   ========================================================================== */
.home h1.desktop {
  padding: 50px 0 0;
  margin: 0 0 0 -14%; }

.home h1.mobile {
  margin-top: 2em;
  text-align: center; }

.home h2 {
  width: 33%;
  text-align: center; }
  @media (max-width: 768px) {
    .home h2 {
      width: 100%; } }

.home .page_section .content {
  padding: 80px 5% 20px 14%; }
  @media (max-width: 768px) {
    .home .page_section .content {
      padding: 0 5%; } }

.home .page_section figure {
  overflow: visible; }

.home .page_section:nth-of-type(even) .content {
  padding: 50px 12% 0 5%; }
  @media (max-width: 768px) {
    .home .page_section:nth-of-type(even) .content {
      padding: 0 5%; } }

.home .page_section:nth-of-type(even) p {
  padding-bottom: 1.2em; }

/* =============================================================================
   Services and Gallery share same layout
   ========================================================================== */
.services {
  padding: 110px 0; }
  @media (max-width: 768px) {
    .services {
      padding: 2em 0; } }

.services li, .gallery li {
  width: 33.3333%;
  float: left;
  text-align: center; }
  @media (max-width: 768px) {
    .services li, .gallery li {
      width: 100%;
      float: none; } }

.services h4, .gallery h4 {
  -moz-transition: all 0.85s ease;
  transition: all 0.85s ease;
  margin-top: 45%; }

.testimonials {
  position: relative;
  padding-bottom: 110px; }
  .testimonials ul {
    width: 65%;
    margin: 0 auto; }
    @media (max-width: 768px) {
      .testimonials ul {
        width: 80%; } }
  .testimonials p {
    padding-bottom: 1em;
    font-weight: 700;
    line-height: 2em;
    font-size: 16px;
    color: #6d6e70; }

.testimonial_project {
  padding-top: 60px; }
  @media (max-width: 768px) {
    .testimonial_project {
      padding-top: 2em; } }
  .testimonial_project h2 {
    text-align: center !important;
    display: block; }
  .testimonial_project ul {
    width: 65%;
    margin: 0 auto;
    text-align: center; }
    @media (max-width: 768px) {
      .testimonial_project ul {
        width: 80%; } }
  .testimonial_project p {
    padding-bottom: 1em;
    font-weight: 800;
    line-height: 2em;
    font-size: 18px; }

/* =============================================================================
   The Team
   ========================================================================== */
.page_section_alt article .image {
  width: 25%;
  margin-left: 5%;
  float: left; }
  @media (max-width: 1024px) {
    .page_section_alt article .image {
      width: 100%;
      margin: 0;
      float: none; } }

.page_section_alt article > div {
  float: right;
  width: 70%;
  padding: 30px 12% 0 6%; }
  @media (max-width: 1024px) {
    .page_section_alt article > div {
      width: 100%;
      float: none;
      padding: 20px 5% 0; } }

.page_section_alt article:nth-of-type(even) div {
  float: left;
  padding: 30px 6% 0 12%; }
  @media (max-width: 1024px) {
    .page_section_alt article:nth-of-type(even) div {
      padding: 20px 5% 0; } }

.page_section_alt article:nth-of-type(even) .image {
  float: right; }
  @media (max-width: 1024px) {
    .page_section_alt article:nth-of-type(even) .image {
      float: none; } }

/* =============================================================================
   Contact Us
   ========================================================================== */
#googlemap {
  min-height: 380px;
  height: 38vh;
  margin-bottom: 56px; }

@media (max-width: 1400px) {
  #contact-backyard-creations .page_title {
    padding: 0 2.5% 90px; } }

.contact {
  padding: 0 0 90px; }
  @media (max-width: 1400px) {
    .contact {
      padding: 0 2.5% 90px; } }
  .contact .column {
    width: 47.5%;
    float: left; }
    .contact .column:nth-child(n) {
      margin-bottom: 5%;
      margin-right: 5%; }
    .contact .column:nth-child(2n) {
      margin-right: 0;
      margin-bottom: 0; }
    .contact .column:nth-child(2n + 1) {
      clear: left; }
    @media (max-width: 1024px) {
      .contact .column {
        width: 100%;
        padding: 1%; }
        .contact .column:nth-child(n) {
          margin: 0; }
        .contact .column:nth-child(2n) {
          margin: 0; } }
  .contact ul {
    padding: 0.5em 0 0 30px; }
    .contact ul:last-child {
      padding-bottom: 25px; }
      @media (max-width: 1024px) {
        .contact ul:last-child {
          padding-bottom: 1em; } }
  .contact a {
    vertical-align: top; }
    .contact a:hover {
      border-bottom: 1px solid #FF4337; }
  .contact li {
    list-style-type: circle;
    list-style-position: outside;
    color: #FF4337;
    font-size: 34px;
    line-height: 34px; }
    .contact li span {
      display: inline;
      color: #404041;
      font-size: 12px;
      vertical-align: top; }

.the_loop .hero-image {
  width: 25%;
  margin-left: 5%;
  float: left; }
  @media (max-width: 1024px) {
    .the_loop .hero-image {
      width: 100%;
      margin: 0;
      float: none; } }

.the_loop > div {
  float: right;
  width: 70%;
  padding: 30px 12% 0 6%; }
  @media (max-width: 1024px) {
    .the_loop > div {
      width: 100%;
      float: none;
      padding: 20px 5% 0; } }

.the_loop a:hover {
  border-bottom: 1px solid #FF4337; }

.the_loop:nth-of-type(even) > div {
  float: left;
  padding: 30px 6% 0 12%; }
  @media (max-width: 1024px) {
    .the_loop:nth-of-type(even) > div {
      padding: 20px 5% 0; } }

.the_loop:nth-of-type(even) .hero-image {
  float: right; }
  @media (max-width: 1024px) {
    .the_loop:nth-of-type(even) .hero-image {
      width: 100%;
      margin: 0;
      float: none; } }

.projects header {
  padding: 50px 5% 0px 12%; }

.read-more {
  padding-top: 0.2em;
  color: #FF4337;
  text-align: right;
  font-weight: 700;
  padding-right: 2%; }
  @media (max-width: 1024px) {
    .read-more {
      text-align: center; } }

.gallery-single {
  padding: 20px 0; }
  .gallery-single li {
    width: 25%;
    float: left; }
    .gallery-single li:nth-child(n) {
      margin-bottom: 0;
      margin-right: 0; }
    .gallery-single li:nth-child(4n) {
      margin-right: 0;
      margin-bottom: 0; }
    .gallery-single li:nth-child(4n + 1) {
      clear: left; }
    @media (max-width: 768px) {
      .gallery-single li {
        width: 100%;
        padding: 1%; }
        .gallery-single li:nth-child(n) {
          margin: 0; }
        .gallery-single li:nth-child(4n) {
          margin: 0; } }
  .gallery-single a {
    display: block;
    -moz-transition: border 0.8s ease;
    transition: border 0.8s ease; }
  .gallery-single a:hover {
    border: 12px solid #FF4337; }