[[doctype]]
<title>[[!title_tag]]</title>
<base href="[[!++site_url]]">

[[!meta]]
[[head]]
[[!header]]



<!--
<div class="cover">
    <div id="video-wrapper">
        <video autoplay poster="/assets/foundation/dist/assets/img/hero-1.jpg" loop muted>
            <source src="assets/resources/public/amca-hompage-video-extended.mp4" type="video/mp4">
        </video>
        <div class="shade"></div>
    </div> /#video-wrapper -->
<!--
    <div class="hero">
        <img class="hero__header-img" src="[[++site_url]]/assets/foundation/dist/assets/img/hero-headline.png">
        <form action="[[~56]]" method="get" id="hero-search" class="hero__search">
            <input data-typeahead type="text" class="hero__search__input" name="search" value="" placeholder="Search certifications, members and more…">
            <button class="button primary hero__search__submit"> <i class="fa fa-search" aria-hidden="true"></i> </button>
        </form>
    </div> /.hero -->
<!--</div> /.cover -->

<script>
	var bgCount = 0;
	
	[[*homepage_hero_background:is=``:then=``:else=`
				
	bgCount = bgCount + 1;
`]]

[[*homepage_hero_background_2:is=``:then=``:else=`
				
	bgCount = bgCount + 1;
`]]

[[*homepage_hero_background_3:is=``:then=``:else=`
				
	bgCount = bgCount + 1;
`]]

[[*homepage_hero_background_4:is=``:then=``:else=`
				
	bgCount = bgCount + 1;
`]]

[[*homepage_hero_background_5:is=``:then=``:else=`
				
	bgCount = bgCount + 1;
`]]

[[*homepage_hero_background_6:is=``:then=``:else=`
				
	bgCount = bgCount + 1;
`]]

[[*homepage_hero_background_7:is=``:then=``:else=`
				
	bgCount = bgCount + 1;
`]]

[[*homepage_hero_background_8:is=``:then=``:else=`
				
	bgCount = bgCount + 1;
`]]

[[*homepage_hero_background_9:is=``:then=``:else=`
				
	bgCount = bgCount + 1;
`]]

[[*homepage_hero_background_10:is=``:then=``:else=`
				
	bgCount = bgCount + 1;
`]]

</script>

<style>
	#hero {
		background-color: #84171a;
    	-webkit-transition: background 0.25s;
    	-moz-transition: background 0.25s;
    	-o-transition: background 0.25s;
    	transition: background 0.25s;
	}
	[[*homepage_hero_background:is=``:then=``:else=`
				
	.bg1 {
      background-image: url('[[*homepage_hero_background]]');
    }
`]]

	[[*homepage_hero_background_2:is=``:then=``:else=`
				
	.bg2 {
      background-image: url('[[*homepage_hero_background_2]]');
    }
	`]]
	
    [[*homepage_hero_background_3:is=``:then=``:else=`
				
	.bg3 {
      background-image: url('[[*homepage_hero_background_3]]');
    }
	`]]
	
	[[*homepage_hero_background_4:is=``:then=``:else=`
				
	.bg4 {
      background-image: url('[[*homepage_hero_background_4]]');
    }
	`]]
	
	[[*homepage_hero_background_5:is=``:then=``:else=`
				
	.bg5 {
      background-image: url('[[*homepage_hero_background_5]]');
    }
	`]]
	
	[[*homepage_hero_background_6:is=``:then=``:else=`
				
	.bg6 {
      background-image: url('[[*homepage_hero_background_6]]');
    }
	`]]
	
	[[*homepage_hero_background_7:is=``:then=``:else=`
				
	.bg7 {
      background-image: url('[[*homepage_hero_background_7]]');
    }
	`]]
	
	[[*homepage_hero_background_8:is=``:then=``:else=`
				
	.bg8 {
      background-image: url('[[*homepage_hero_background_8]]');
    }
	`]]
	
	[[*homepage_hero_background_9:is=``:then=``:else=`
				
	.bg9 {
      background-image: url('[[*homepage_hero_background_9]]');
    }
	`]]
	
	[[*homepage_hero_background_10:is=``:then=``:else=`
				
	.bg10 {
      background-image: url('[[*homepage_hero_background_10]]');
    }
	`]]
</style>

<div id="hero" class="bg1 lazy clearfix">
	<div class="hero-left">
		<div class="hero-left-ctr">
			<div class="hero-headline">[[*homepage_hero_headline]]</div>
			<div class="hero-headline-bold">[[*homepage_hero_headline_bold]]</div>
			[[*hero-cta-headline2:is=``:then=``:else=`
				<div class="hero-cta">
				<a href="[[*hero-cta-link]]">
					<span class="hero-cta-headline">[[*hero-cta-headline]]</span>
					<span class="hero-cta-headline2">[[*hero-cta-headline2]]</span>
				</a>
			</div>
			`]]
			
		</div>
	</div>
	<style>
		.advocate .hero-img {
			background-image: url('[[*homepage_callout_1_img]]');
		}
		.certify .hero-img {
			background-image: url('[[*homepage_callout_2_img]]');
		}
		.educate .hero-img {
			background-image: url('[[*homepage_callout_3_img]]');
		}
		.publications .hero-img {
			background-image: url('[[*homepage_callout_4_img]]');
		}
		.members .hero-img {
			background-image: url('[[*homepage_callout_5_img]]');
		}
		.meetings .hero-img {
			height: 40px;
			background-image: url('[[*homepage_callout_6_img]]');
		}
	</style>
	<div class="hero-right">
		<div class="hero-row hero-border clearfix">
			<a href="[[*homepage_callout_1_url]]" class="advocate">
				<span class="hero-img"></span>
				<span class="hero-subheadline">[[*homepage_callout_1_title]]</span>
				<span class="hero-more">More</span>
			</a>
			<a href="[[*homepage_callout_2_url]]" class="certify">
				<span class="hero-img"></span>
				<span class="hero-subheadline">[[*homepage_callout_2_title]]</span>
				<span class="hero-more">More</span>
			</a>
			<a href="[[*homepage_callout_3_url]]" class="educate">
				<span class="hero-img"></span>
				<span class="hero-subheadline">[[*homepage_callout_3_title]]</span>
				<span class="hero-more">More</span>
			</a>
		</div>
		<div class="hero-row">
			<a href="[[*homepage_callout_4_url]]" class="publications">
				<span class="hero-img"></span>
				<span class="hero-subheadline">[[*homepage_callout_4_title]]</span>
				<span class="hero-more">More</span>
			</a>
			<a href="[[*homepage_callout_5_url]]" class="members">
				<span class="hero-img"></span>
				<span class="hero-subheadline">[[*homepage_callout_5_title]]</span>
				<span class="hero-more">More</span>
			</a>
			<a href="[[*homepage_callout_6_url]]" class="meetings">
				<span class="hero-img"></span>
				<span class="hero-subheadline">[[*homepage_callout_6_title]]</span>
				<span class="hero-more">More</span>
			</a>
		</div>
	</div>
</div>


<div id="about">
	<div class="container">
		<div class="about-hd">
			<h2><a href="#">[[*homepage_about_header]]<span class="arrow"></span></a></h2>
		</div>
		<div class="about-message" style="display: none;">
			[[*content]]
		</div>
	</div>
</div>
<div class="mission-statement">
	<div class="container">[[*homepage_mission_statement]]</div>
</div>
[[*homepage_rotator_1:is=``:then=``:else=`
				
	<div id="carousel" class="owl-carousel">
		<div class="item"><img src="[[*homepage_rotator_1]]" /></div>
		[[*homepage_rotator_2:is=``:then=``:else=`
			<div class="item"><img src="[[*homepage_rotator_2]]" /></div>
		`]]
	</div>
`]]

[[*homepage_steering_headline:is=``:then=``:else=`
<div class="steering">
	<div class="container">
		<h2 class="heading text-center" role="heading">
			[[*homepage_steering_headline]]
			<span></span>
		</h2>
		<div class="steering-bios grid-x align-center grid-margin-y">
			[[*homepage_steering_content]]
		</div>
	</div>
</div>
`]]



<!--<div class="section bkgrd-secondary padding-top-4 padding-bottom-4">
    <div class="grid-container">

        <div class="grid-x grid-margin-x grid-margin-y">
            <div class="cell">

[[*content]]

            </div>
        </div> 
    
    </div> /.grid-container
</div> --><!-- /.section -->


<!-- 
<div class="section margin-top-3 margin-bottom-3">
    <div class="grid-container">
        <div class="grid-x grid-margin-x grid-margin-y">

            <div class="cell align-self-stretch medium-6 large-4">
                <div class="gridphoto gridphoto--home">
                    <img src="[[*homepage_callout_1_img]]">
                    <div class="gridphoto__content text-center">
                        <h4 class="gridphoto__content__heading"> [[*homepage_callout_1_title]] </h4>
                        <p class="gridphoto__content__paragraph">[[*homepage_callout_1_caption]]</p>
[[*homepage_callout_1_url:notempty=`<a href="[[*homepage_callout_1_url]]" class="button tiny outline white">Find out more</a>`]]
                    </div>
                </div>
            </div>/.cell -->
            <!--<div class="cell align-self-stretch medium-6 large-4">
                <div class="gridphoto gridphoto--home">
                    <img src="[[*homepage_callout_2_img]]">
                    <div class="gridphoto__content text-center">
                        <h4 class="gridphoto__content__heading"> [[*homepage_callout_2_title]] </h4>
                        <p class="gridphoto__content__paragraph">[[*homepage_callout_2_caption]]</p>
[[*homepage_callout_2_url:notempty=`<a href="[[*homepage_callout_2_url]]" class="button tiny outline white">Find out more</a>`]]
                    </div>
                </div>
            </div> /.cell -->
  <!--           <div class="cell align-self-stretch medium-6 large-4">
                <div class="gridphoto gridphoto--home">
                    <img src="[[*homepage_callout_3_img]]">
                    <div class="gridphoto__content text-center">
                        <h4 class="gridphoto__content__heading"> [[*homepage_callout_3_title]] </h4>
                        <p class="gridphoto__content__paragraph">[[*homepage_callout_3_caption]]</p>
[[*homepage_callout_3_url:notempty=`<a href="[[*homepage_callout_3_url]]" class="button tiny outline white">Find out more</a>`]]
                    </div>
                </div>
            </div>/.cell -->
<!--
            <div class="cell align-self-stretch medium-6 large-3">
                <div class="gridphoto gridphoto--home">
                    <img src="[[*homepage_callout_4_img]]">
                    <div class="gridphoto__content text-center">
                        <h4 class="gridphoto__content__heading"> [[*homepage_callout_4_title]] </h4>
                        <p class="gridphoto__content__paragraph">[[*homepage_callout_4_caption]]</p>
[[*homepage_callout_4_url:notempty=`<a href="[[*homepage_callout_4_url]]" class="button tiny outline white">Find out more</a>`]]
                    </div>
                </div>
            </div> /.cell -->
<!-- 
            <div class="cell align-self-stretch medium-12 large-6">
                <div class="gridphoto gridphoto--home">
                    <img src="[[*homepage_callout_5_img]]">
[[!get_homepage_events? &id=`[[*id]]`]]
                </div>
            </div>/.cell -->

           <!-- <div class="cell align-self-stretch large-3">
                <div class="gridphoto gridphoto--home">
                    <img src="[[*homepage_callout_6_img]]">
                    <div class="gridphoto__content text-center">
                        <h4 class="gridphoto__content__heading"> [[*homepage_callout_6_title]] </h4>
                        <p class="gridphoto__content__paragraph">[[*homepage_callout_6_caption]]</p>
[[*homepage_callout_6_url:notempty=`<a href="[[*homepage_callout_6_url]]" class="button tiny outline white">Find out more</a>`]]
                    </div>
                </div>
            </div> /.cell -->

        <!-- </div>/.grid-x -->
    <!--</div> /.grid-container -->
<!--</div> /.section -->


<div class="section section--regionmap padding-bottom-3 margin-bottom-3 text-center">
    <div class="grid-container">

        <div class="grid-x grid-margin-x grid-margin-y">
            <div class="cell">
                <div class="interactive-map-ctnr">
                    [[$InteractiveMapHomepage]]
                </div>
            </div>
        </div> 
    
    </div><!-- /.grid-container -->
</div><!-- /.section -->



[[!footer]]
[[footer_scripts]]


<script type="text/javascript">
	jQuery(document).ready(function() {
		jQuery('.urgent-message').delay(500).slideDown();
		jQuery('a.urgent-toggle .urgent-closed').delay(500).hide();
		jQuery('a.urgent-toggle .urgent-open').delay(500).show();
		return false;
	});
</script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
  var lazyloadImages;

  if ("IntersectionObserver" in window) {
    lazyloadImages = document.querySelectorAll(".lazy");
    var imageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          var image = entry.target;
          image.classList.remove("lazy");
          imageObserver.unobserve(image);
        }
      });
    });

    lazyloadImages.forEach(function(image) {
      imageObserver.observe(image);
    });
  } else {
    var lazyloadThrottleTimeout;
    lazyloadImages = document.querySelectorAll(".lazy");

    function lazyload () {
      if(lazyloadThrottleTimeout) {
        clearTimeout(lazyloadThrottleTimeout);
      }

      lazyloadThrottleTimeout = setTimeout(function() {
        var scrollTop = window.pageYOffset;
        lazyloadImages.forEach(function(img) {
            if(img.offsetTop < (window.innerHeight + scrollTop)) {
              img.src = img.dataset.src;
              img.classList.remove('lazy');
            }
        });
        if(lazyloadImages.length == 0) {
          document.removeEventListener("scroll", lazyload);
          window.removeEventListener("resize", lazyload);
          window.removeEventListener("orientationChange", lazyload);
        }
      }, 20);
    }

    document.addEventListener("scroll", lazyload);
    window.addEventListener("resize", lazyload);
    window.addEventListener("orientationChange", lazyload);
  }
})

function updateSlide() {
  //const bgCount = 6; //This needs to match the number of background classes - main weakness of this snippet
  //console.log('bgCount: ' + bgCount);
  const bgElem = document.getElementById('hero'); // Background element

  let foundClasses = []; //List of background classes found
  let bgIndex = 0;
  //console.log('bgElem.classList.length: ' + bgElem.classList.length);
  for(let classIndex = 0; classIndex < bgElem.classList.length; classIndex++) { // Using a full for in case the element somehow gets multiple background classes
    const thisClass = bgElem.classList.item(classIndex);
    if(thisClass.substr(0, 2) == 'bg') {
      foundClasses += thisClass;
      bgIndex = parseInt(thisClass.substr(2)) + 1;
    }
  }
  if(bgIndex > bgCount) {
    bgIndex = 1;
  }
  bgElem.classList.add('bg' + bgIndex); //Apply the new class
  bgElem.classList.remove(foundClasses); //Remove all previous background classes
}
if(bgCount > 1){
	setInterval(updateSlide, 5000); // Change every 2 seconds
}
</script>

[[doc_end]]