<footer class=“footer”>

{% assign color = page.theme_style | default: site.theme_style   %}

<section class="grad-{{ color }} ">
  {% if page.url == "/" && site.cta_gs_url %}

  <div class="container-fluid py-5">
    <div class="row">
      <div class="col-12  my-auto">
        <h3 class="display-5 text-center sr-contact" style="font-weight:900;">{{ site.footer-cta-text }}</h3>
      </div>
      <div class="col-12 my-auto text-center pt-3">
        {% if site.footer-cta-link-target == '_blank' %}
        <!-- TODO: update to stable from alpha format -->
        <button type="button" class="btn btn-outline-light sr-button" onclick="window.open('{{ site.footer-cta-link-url }}', '_blank');" >{{ site.footer-cta-link-text }}</button>
        {% else %}    
        <button type="button" class="btn btn-outline-light sr-button" onclick="location.href = '{{ site.footer-cta-link-url }}';" >{{ site.footer-cta-link-text }}</button>
        {% endif %}
      </div>
    </div>
  </div>
  {% endif %}
  <hr class="grad">

  <div class="container-fluid py-5">
    <div class="row justify-content-center">
      <div class="col-md-4 col text-center my-auto sr-easeInOut">

        <!-- <h4><small>This site was brought to you by</small></h4> -->
        <a href="{{ site.footer-brand_url }}">
          <img src="{{ site.footer-brand_img_url }}" alt="{{ site.footer-brand_img_alt }}" class="img-fluid  sr-contact">
        </a>
      </div>
    </div>
  </div>
</section>

<div class="container-fluid" style=" padding-top:3%;">
  <div class="row">

    <div py-2 class="col-12 order-3 order-md-1 col-md-4 my-auto">
        <div class="container-fluid text-center list-unstyled">
          <div class="row">   
            {% if site.twitter %}
            <div class="col-3 py-2">
              <a target="_blank" alt="Twitter"   href="https://twitter.com/{{ site.twitter }}">
                <i class="fab fa-twitter-square fa-3x icon-grey sr-pop-a" aria-hidden="true"></i>
              </a>
            </div>
            {% endif %}
            {% if site.pinterest %}              
            <div class="col-3 py-2">
              <a class="grey"   target="_blank" alt="Pinterest"   href="https://www.pinterest.com/{{ site.pinterest }}/">
                <i class="fab fa-pinterest fa-3x sr-pop-b" aria-hidden="true"></i>
              </a>
            </div>
            {% endif %}
            <div class="col-3 py-2">
              <a target="_blank" alt="Facebook"  href="https://www.facebook.com/{{ site.facebook }}/">
                <i class="fab fa-facebook-square fa-3x icon-grey sr-pop-c" aria-hidden="true"></i>
              </a>
            </div>
            <div class="col-3 py-2">
              <a class="grey"   target="_blank" alt="Instagram"   href="https://www.instagram.com/{{ site.instagram }}/">
                <i class="fab fa-instagram fa-3x sr-pop-d" aria-hidden="true "></i>
              </a>
            </div>
            <div class="col-3 py-2">
              <a class="grey"   target="_blank" alt="Houzz"  href="https://www.houzz.com/pro/{{ site.houzz }}">
                <i class="fab fa-houzz fa-3x sr-pop-a" aria-hidden="true"></i>
              </a>
            </div>
            <div class="col-3 py-2">
              <a target="_blank"  alt="LinkedIn" href="https://www.linkedin.com/company/{{ site.linkedin }}/">
                <i class="fab fa-linkedin fa-3x icon-grey sr-pop-b" aria-hidden="true"></i>
              </a>
            </div>
            <div class="col-3 py-2">
              <a class="grey"   target="_blank"  alt="Youtube" href="https://www.youtube.com/channel/{{ site.youtube }}">
                <i class="fab fa-youtube fa-3x sr-pop-c" aria-hidden="true"></i>
              </a>
            </div>
            <div class="col-3 py-2">
              <a target="_blank" alt="Google Plus" href="https://plus.google.com/+{{ site.google_plus }}/">
                <i class="fab fa-google-plus-square fa-3x icon-grey sr-pop-d" aria-hidden="true"></i>
              </a>
            </div>
          </div>
        </div>
    </div>
    <div class="py-2 col-12 order-1 order-md-2 col-md-4 my-auto text-center sr-button">
      <address>
          <p class="grey">{{ site.address_1 }}<br>{{ site.address_2 }}</p>
      </address>
      <a href="tel:{{ site.phone }}">{{ site.phone }}</a>
    </div>
    <div class="py-2 col-12 order-2 order-md-3 col-md-4 my-auto">
      <ul class="list-unstyled sr-icons">

        {% assign nav-section = site.footer-nav  | sort: 'weight' %}
        {% for section in nav-section %}
          {% if forloop.first == false and section.weight > 0 %}
            <li><hr class="{{ color }}-right"></li>
          {% endif %}

          {% for link in section.nav %}
            <li> 
            {% if forloop.first == false %}
            <a class="grey" href="{{ link.url }}">  
              {{ link.title }}
            </a>
            {% else %}
            <a href="{{ link.url }}"><strong >
              {{ link.title }} 
            </strong></a>
            {% endif %}
          </li>
          {% endfor %}
        {% endfor %}
      </ul>
    </div>

  </div>
</div>

</footer>

{% if site.asset_cdn == 2 %}

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js" integrity="sha384-feJI7QwhOS+hwpX2zkaeJQjeiwlhOP+SdQDqhgvvo1DsjtiSQByFdThsxO669S2D" crossorigin="anonymous"></script>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script src="/assets/solar-flair.min.js" media="nope!" onload="this.media='all'"></script>

{% elsif site.asset_cdn == 1 }

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.js" integrity="sha384-feJI7QwhOS+hwpX2zkaeJQjeiwlhOP+SdQDqhgvvo1DsjtiSQByFdThsxO669S2D" crossorigin="anonymous"></script>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.js"></script>
<script src="/assets/solar-flair.js" media="nope!" onload="this.media='all'"></script>

{% else %}

{% if jekyll.environment == "production" %}
  <script src="https://flair.planning.solar/assets/jquery/dist/jquery.min.js" media="nope!" onload="this.media='all'"></script>
  <script src="https://flair.planning.solar/assets/jquery.easing/jquery.easing.min.js" media="nope!" onload="this.media='all'"></script>
  <script src="https://flair.planning.solar/assets/bootstrap/dist/js/bootstrap.bundle.min.js" media="nope!" onload="this.media='all'"></script>
  <script src="https://flair.planning.solar/assets//scrollreveal/dist/scrollreveal.min.js" media="nope!" onload="this.media='all'"></script>
  <script src="https://flair.planning.solar/assets/solar-flair.min.js" media="nope!" onload="this.media='all'"></script>

  {% if page.layout == "timeline" %}
    <!-- Timeline Dependentcies -->
    <script src="https://flair.planning.solar/assets/timeliner/js/timeliner.min.js" media="nope!" onload="this.media='all'"></script>
    <script>
      $(document).ready(function() {
              $.timeliner({});
      });
    </script>
  {% endif %}
{% else %}
  <script src="http://flair.planning.localhost/assets/jquery/dist/jquery.js" media="nope!" onload="this.media='all'"></script>
  <script src="http://flair.planning.localhost/assets/jquery.easing/jquery.easing.js" media="nope!" onload="this.media='all'"></script>
  <script src="http://flair.planning.localhost/assets/bootstrap/dist/js/bootstrap.bundle.js" media="nope!" onload="this.media='all'"></script>
  <script src="http://flair.planning.localhost/assets//scrollreveal/dist/scrollreveal.js" media="nope!" onload="this.media='all'"></script>
  <script src="http://flair.planning.localhost/assets/solar-flair.js" media="nope!" onload="this.media='all'"></script>
  {% if page.layout == "timeline" %}
    <!-- Timeline Dependentcies -->
    <script src="http://flair.planning.localhost/assets/timeliner/js/timeliner.js" media="nope!" onload="this.media='all'"></script>
    <script>
      $(document).ready(function() {
        $.timeliner({});
      });
    </script>
  {% endif %}
{% endif %}

{% endif %}