<!-- HERO CONTENT -->
<div class="flex mx-auto w-full ">
    <div class="container mx-auto bg-grey-light  w-full">
        <img class="" src="/build/img/about-banner.jpg">
    </div>
</div>

<!-- BODY TEXT -->
<div class="lg:flex container mx-auto w-full mt-16">
    <div class="lg:w-2/3 bg-white  mb-6 lg:pr-4">
        <div class="body-content">
            <h1>ACCREDITATION INFORMATION</h1>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
                rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
                explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
                consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
                dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
                incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
                exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
                autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel
                illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
            <h2>EXAMPLE HEADLINE:</h2>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
                rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi</p>
            <ul>
                <li>list</li>
                <li>list</li>
                <li>list</li>
                <li>list</li>
                <li>list</li>
                <li>list</li>
            </ul>
            <h2>EXAMPLE HEADLINE:</h2>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
                rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi</p>
            <h2>EXAMPLE HEADLINE:</h2>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
                rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi</p>
            <h2>EXAMPLE HEADLINE:</h2>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
                rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi</p>
            <h2>EXAMPLE HEADLINE:</h2>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
                rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi</p>
        </div>
        <!-- CACS CHARTS -->
        <img class="mt-12" src="/build/img/CAC-Model-1.png">

        <!-- TWO BUTTONS -->
        <div class="mx-auto flex flex-wrap mt-24 sm:justify-around justify-center">
            <a class="rectangle-button" href="#">
                Find A CAC Near You
            </a>
            <a class="rectangle-button" href="#">
                Donate To CACI
            </a>
        </div>

        <!-- WOMEN 4 CAC / AMAZON AD -->
        <div class="flex mb-4 mt-12 text-center">
            <div class="w-1/2 ">
                <div class="flex justify-center">
                    <div class="bg-grey h-24 w-18 mb-6 flex flex-wrap w-1/2"></div>
                </div>
                <div class="text-xs font-bold flex justify-center">
                    <a class="text-grey-darker" href="#">Mail-in Form</a>
                </div>
            </div>
            <div class="w-1/2 pr-2 md:pr-0">
                <div class="flex justify-center">
                    <img class="h-24 rounded-full mb-6 flex flex-wrap" src="/build/img/amazonsmile.jpg">
                </div>
                <div class="flex justify-center">
                    <div class="text-xs font-bold">
                        <p>AmazonSmile Foundation will donate .5% of your qualifying purchase to the children's
                            Advocacy
                            Centers of Illinois!</p>
                        <p>Just <span class="underline font-normal" href="#">Click Here</span> and start Shopping!</p>
                        <p>Do you already have an Amazon account? No Worries! Just follow the instructions to link your
                            Amazon
                            account to AmazonSmile!</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- THANK YOU IMG -->
        <div class="flex justify-center">
            <img class=" mt-12" src="/build/img/donation.png">
        </div>
        <!-- ORANGE CALLOUT-->
        <div class="bg-orange  w-full text-center mt-12 mb-12 text-white px-2 py-2 leading-normal text-xl">
            <h4>TO REPORT CHILD ABUSE:</h4>
            <p class="text-white">Contact your local authorities or the Illinois Department of Children and Family Services at (800) 252-2873</p>
        </div>
    </div> <!-- end div for left 1/2 column -->



    <!-- SIGN UP FORM -->
    <div class="w-full lg:w-1/3 flex flex-wrap mx-auto justify-center lg:pl-4">
        <div class="bg-blue py-2 h-70 text-left mx-autojustify-center text-white mt-6">
            <p class="text-xl px-4 pt-1 leading-normal text-white">Sign Up To Stay In The Know!</p>
            <p class="text-xs px-4 pt-1 leading-normal text-white">Receive interesting news, updates and opportunities
                to get
                involved.</p>
            <div class="border-b-2 border-green w-full mt-2"></div>
            <form class="px-4 pt-6 pb-8">
                <div class="mb-3">
                    <label class="block text-white text-sm mb-2" for="email">
                        *Email Address
                    </label>
                    <input class="shadow appearance-none border-2 border-green rounded-lg w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline"
                        id="username" type="text" placeholder="">
                </div>
                <div class="mb-3">
                    <label class="block text-white text-sm mb-2" for="firstname">
                        *First Name
                    </label>
                    <input class="shadow appearance-none border-2 border-green rounded-lg w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline"
                        id="password" type="password" placeholder="">
                </div>
                <div class="mb-3">
                    <label class="block text-white text-sm mb-2" for="lastname">
                        *Last Name
                    </label>
                    <input class="shadow appearance-none border-2 border-green rounded-lg w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline"
                        id="password" type="password" placeholder="">
                </div>
                <div class="flex items-center justify-between">
                    <button class="bg-green hover:bg-green-dark text-white font-bold py-2 px-4 mt-3 rounded-lg focus:outline-none focus:shadow-outline"
                        type="button">
                        Sign Up
                    </button>
                </div>
            </form>
            <p class="text-xs px-4 leading-normal text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute.</p>
        </div>

        <!-- STANDARDS PDF-->
        <img class="h-66 mt-12" src="/build/img/NCA2017-Standards-cover-SM.jpg">


        <!-- SINGLE BUTTON -->
        <a class="rectangle-button mt-12" href="#">
            Download PDF
        </a>
        <!-- ORANGE CALLOUT-->
        <div class="bg-orange h-32 w-full text-center text-white px-2 py-2 leading-normal">
            <h4>TO REPORT ABUSE:</h4>
            <p class="text-white">Contact your local authorities or the Illinois Department of Children and Family Services at (800) 252-2873</p>
        </div>
    </div>
</div> <!-- end div for right 1/2 column-->




<!-- GREEN LINE BREAK WITHOUT TITLE-->
<div class="container mx-auto w-full border-b-4 border-green mt-6 mb-6"></div>


<!-- SAVE THE DATE FULL ROW-->
<div class="container mx-auto">
    <div class="bg-grey h-48 w-64 mb-6 ml-4 lg:ml-0"></div>
    <!-- <img class="" src=""> -->
    <div class="body-content">
        <h1>SAVE THE DATE!</h1>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
            rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi</p>
    </div>
</div>

<!-- TEXT FULL ROW-->
<div class="flex mb-4">
    <div class="container mx-auto  body-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet,
            consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</div>
<!-- SINGLE BUTTON FULL ROW -->
<div class="container mx-auto  w-full">
    <div class="flex mb-4 mt-16 mb-24">
        <div class="w-full  flex flex-wrap justify-center">
            <a class="rectangle-button" href="#">
                Contact CACI
            </a>
        </div>
    </div>
</div>

<!-- IMG FULL ROW-->
<div class="flex mb-4">
    <div class="container mx-auto  flex justify-center">
        <img src="/build/img/NCA_CACmodel_ForWebsite-1.jpg">
    </div>
</div>

<!-- TEXT FULL ROW-->
<div class="flex mb-12">
    <div class="container mx-auto  body-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet,
            consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
</div>

<!-- SINGLE BUTTON FULL ROW -->
<div class="container mx-auto  w-full">
    <div class="flex mb-4 mt-12 mb-12">
        <div class="w-full  flex flex-wrap justify-center">
            <a class="rectangle-button" href="#">
                Locate A CAC Near You
            </a>
        </div>
    </div>
</div>


<!-- GREEN 'LEARN MORE' DROPDOWN & CONTENT -->
<div class="container mx-auto  w-full flex justify-end">
    <div class="body-content container mx-auto  w-full flex justify-start">
        <h1><i class="fas fa-circle text-green fa-xs pr-4"></i>SIGNS OF PHYSICAL ABUSE</h1>
    </div>
    <button class="flex items-center bg-green flex justify-center text-white w-48 h-10" id="learn-more">LEARN
        MORE&nbsp;&nbsp;<i class="fas fa-caret-down fa-2x"></i></button>
</div>
<div class="container mx-auto border-b-4 border-green  w-full mb-12"></div>
<div class="container mx-auto hidden  w-full" id="drop-down">
    <div class="flex mb-4">
        <div class="body-content">
            <h2>CONSIDER THE POSSIBILITY OF PHYSICAL ABUSE WHEN THE CHILD:</h2>
            <ul>
                <li>list</li>
                <li>list</li>
                <li>list</li>
                <li>list</li>
                <li>list</li>
                <li>list</li>
            </ul>
            <h2>CONSIDER THE POSSIBILITY OF PHYSICAL ABUSE WHEN THE PARENT OR OTHER ADULT CAREGIVER:</h2>
            <ul>
                <li>list</li>
                <li>list</li>
                <li>list</li>
                <li>list</li>
                <li>list</li>
                <li>list</li>
            </ul>
        </div>
    </div>
</div>
<!-- GREEN 'LEARN MORE' DROPDOWN & CONTENT -->
<div class="container mx-auto  w-full flex justify-end">
    <div class="body-content container mx-auto  w-full flex justify-start">
        <h1><i class="fas fa-circle text-green fa-xs pr-4"></i>SIGNS OF NEGLECT</h1>
    </div>
    <button class="flex items-center bg-green flex justify-center text-white w-48 h-10" id="learn-more2">LEARN
        MORE&nbsp;&nbsp;<i class="fas fa-caret-down fa-2x"></i></button>
</div>
<div class="container mx-auto border-b-4 border-green  w-full mb-12"></div>
<div class="container mx-auto hidden  w-full" id="drop-down2">
    <div class="flex mb-4">
        <div class="body-content">
            <h2>CONSIDER THE POSSIBILITY OF PHYSICAL ABUSE WHEN THE CHILD:</h2>
            <ul>
                <li>list</li>
                <li>list</li>
                <li>list</li>
                <li>list</li>
                <li>list</li>
                <li>list</li>
            </ul>
            <h2>CONSIDER THE POSSIBILITY OF PHYSICAL ABUSE WHEN THE PARENT OR OTHER ADULT CAREGIVER:</h2>
            <ul>
                <li>list</li>
                <li>list</li>
                <li>list</li>
                <li>list</li>
                <li>list</li>
                <li>list</li>
            </ul>
        </div>
    </div>
</div>

<!-- CENTERED TITLE WITH GREEN PAGE BREAK - FULL ROW -->
<div class="container mx-auto  w-full">
    <div class="flex mb-6 mt-12">
        <div class="w-full  text-center border-b-4 border-green">
            <div class="body-content">
                <h1>Child Welfare News</h1>
            </div>
        </div>
    </div>
</div>

<!-- THREE IMAGE STACK FULL ROW -->
<div class="container mx-auto  w-full">
    <div class="flex flex-wrap text-center mb-32 mt-6 justify-between">
        <div class="w-full md:w-1/3 ">
            <div class="ml-10">
                <img class="z-50 -mr-30 mb-9 w-20 h-20 rounded-full" src="/build/img/Kathy Murphy.jpg" alt="">
                <img class="z-10 ml-1" src="/build/img/people-background.png">
            </div>
            <p class="mt-3">Information For Social Workers</p>
        </div>
        <div class="w-full md:w-1/3 ">
            <div class="ml-10">
                <img class="z-50 -mr-30 mb-9 w-20 h-20 rounded-full" src="/build/img/Kathy Murphy.jpg" alt="">
                <img class="z-10 ml-1" src="/build/img/people-background.png">
            </div>
            <p class="mt-3">Information For Social Workers</p>
        </div>
        <div class="w-full md:w-1/3 ">
            <div class="ml-10">
                <img class="z-50 -mr-30 mb-9 w-20 h-20 rounded-full" src="/build/img/Kathy Murphy.jpg" alt="">
                <img class="z-10 ml-1" src="/build/img/people-background.png">
            </div>
            <p class="mt-3">Information For Social Workers</p>
        </div>
    </div>
</div>