/* cmsms stylesheet: Main Navigation modified: Saturday, December 16, 2023 5:09:05 PM */
<a href="#main-menu-container"
     class="menu-toggle"
     role="button"
     id="main-menu-toggle"
     aria-expanded="false"
     aria-controls="main-menu"
     aria-label="Open main menu">
    <span class="sr-only">Open main menu</span>
    <span class="fa fa-bars" aria-hidden="true"></span>
  </a>

<div id="main-menu-container"
       class="main-menu"
       role="navigation"
       aria-expanded="false"
       aria-label="Main menu">
    <a href="#main-menu-toggle"
       class="menu-close"
       role="button"
       id="main-menu-close"
       aria-expanded="false"
       aria-controls="main-menu"
       aria-label="Close main menu">
      <span class="sr-only">Close main menu</span>
      <span class="fa fa-close" aria-hidden="true"></span>
    </a>


{$main_id = ' id=\'main-menu\''}
{function do_class}
    {if count($classes) > 0} class='{implode(' ',$classes)}'{/if}
{/function}

{function name='Simplex_menu' depth='1'}
    <ul{$main_id}{if isset($ul_class) && $ul_class != ''} class="{$ul_class}"{/if}>
        {$main_id = ''}
        {$ul_class = ''}
        {foreach $data as $node}
            {* setup classes for the anchor and list item *}
            {$list_class = []}
            {$href_class = ['cf']}
            {$parent_indicator = ''}
            {$aria_support = ''}
    
            {if $node->current || $node->parent}
                {* this is the current page *}
                {$list_class[] = 'current'}
                {$href_class[] = 'current'}
            {/if}
    
            {if $node->children_exist}
                {$list_class[] = 'parent'}
                {$aria_support = ' aria-haspopup=\'true\''}
                {$parent_indicator = ' <i class=\'icon-arrow-left\' aria-hidden=\'true\'></i>'}
            {/if}
    
            {* build the menu item node *}
            {if $node->type == 'sectionheader'}
                {$list_class[] = 'sectionheader'}
                <li{do_class classes=$list_class}{$aria_support}><span>{$node->menutext}{$parent_indicator}</span>
                {if isset($node->children)}
                    {Simplex_menu data=$node->children depth=$depth+1}
                {/if}
                </li>
            {else if $node->type == 'separator'}
                {$list_class[] = 'separator'}
                <li{do_class classes=$list_class}'><hr class='separator'/></li>
            {else}
                {* regular item *}
                <li{do_class classes=$list_class}{$aria_support}>
                    <a{do_class classes=$href_class} href='{$node->url}'{if $node->target != ''} target='{$node->target}'{/if}>{$node->menutext}{$parent_indicator}</a>
                    {if isset($node->children)}
                        {Simplex_menu data=$node->children depth=$depth+1}
                    {/if}
                </li>
            {/if}
        {/foreach}
    </ul>
{/function}

{if isset($nodes)}
    {Simplex_menu data=$nodes depth='0' ul_class='cf'}
{/if}


</div>
<a href="#main-menu-toggle"
     class="backdrop"
     tabindex="-1"
     aria-hidden="true"
     hidden></a>
/* cmsms stylesheet: Simple Mobile Friendly modified: Thursday, May 9, 2024 10:08:47 PM */
* {
	padding:0;
	margin:0;
}



body {
    background-color:#fff;
    background-image:url('/uploads/images/banners/Candlenut_tree_crown.jpg');
    background-repeat:repeat;
    background-attachment:fixed;
    background-size:cover;
    color:#666;
    font-size:1em;
    font-family: Futura, sans-serif;
    margin:0;
    padding:0;
    letter-spacing:1px;
}

h1, h2, h3, h4, h5, h6 {
    font-weight:900;
    letter-spacing:5px;
    font-family:Futura; 
    color:#ff963a;
    margin:1em auto;
    line-height:150%;
    text-transform:uppercase;
    text-align:center;
}

h1 {
    font-size:250%;
    color:#fff;


}

.section h1 {color:#000;}

h2 {
    font-size:160%;
    color:#2f6324;

}

h3 {
    font-size:120%;
    margin:1em auto 0 auto;
    color:#091eaf;
}

h4 {
    font-size:110%;
}

a {
    color:#e37305;
    text-decoration:none;
}


p, li, div, blockquote {
    margin:.75em auto;
    line-height:150%;
}

blockquote {
     text-align:left;
     margin:1em 3em;
     font-size:90%;
     font-style:italic;
}

ul, ol {
     margin:1em auto 1em 2em;
     text-align:left;
}

em {font-style:italic;}

strong {font-weight:700;}

.clear {clear:both;}

#container {
     border:none;
     width:100%;
     margin:0 auto;
     overflow:auto;
 }

#header {
    width:auto;
    height:auto;
    margin:.25em auto;
    border:none;
    overflow:auto;
    text-align:center;
}

.logo {
    margin:1em;
    text-align:center;
}

.logo img {width:300px;}

.tagline {
     letter-spacing:1px;
     color:#48712e;
     font-family:Futura, sans-serif;
     font-size:140%;
     font-style:italic;
     font-weight:600;
     margin:0  20%;
     padding-bottom:1em;
     border:none;
     text-align:center;
}

#nav {
     height:auto;
     width:auto;
     border:none;
     margin:0 auto 0 0;
     padding:0;
     font-size:1.1em;
     letter-spacing:2px;
     font-weight:500;
     text-transform:uppercase;
}

#follow {
     height:32px;
     width:150px;
     border:none;
     margin:0 auto;
     padding:0;
     position:relative;
     left:0;
     top:0;
}

#follow div {
     width:30px;
     height:30px;
     float:right;
     margin:0 2px 0 0;
     padding:0;
}

#follow div img {
      width:30px;
      height:30px;
}



#main-parallax {
     border:none;
     margin:0;
     padding:0;
     color:#fff;
     background-color:transparent;
     width:auto;
     overflow:auto;
     opacity:1.0;
}

.spacer {
    border:none;
    background-color:transparent;
    opacity:0.5;
    height:0;
}


.section {
    text-align:center;
    border:none;
    margin: -2em 0 -2em 0;
    padding:1em 2em;
    background-color:#fff;
    color:#000;
    font-size:1em;
    position:relative;
    z-axis:100;
    line-height:1.5em;
    opacity:1.0;
    overflow:auto;

}

.section > p, .section > div, .section > h2 {}

.parallax {
     border: none;
     width:auto;
/* Set a specific height */
     min-height: 250px; 

/* Create the parallax scrolling effect */
     background-position: center;
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: 100%;

}



#content-parallax  {
     margin:0 auto;
     width:100%;
     padding:0;
     border:none;
}


#content-parallax div img {
     width:300px;
     margin:0 1em 1em 1em;
     border:1px solid #ccc;
     border-radius:0;

}

#content-parallax p {
     text-align:left;
     line-height:1.5em;
}



#content-parallax div form {
     border:1px solid black;
}

#content-parallax div form img {
     border:none;
     width:auto;
     border-radius:0;
     box-shadow:none;
}


#footer {
    clear:both;
    text-align:center;
    font-size:80%;
    padding:5px;
     margin:1em auto;
    border:none;
    overflow:auto;
}



.copyright {
    color:#ccc;
    padding-top:60px;
}




.float-r {float:right;}
.float-l {float:left;}



form, form table, form input, form input [type=image] {
     margin:1em auto;
     padding:5px;
     text-align:center;
     font-size:1em;
border:none;

}

form .row {
     border:none;
}


form label {
     border:none;
}

form input, form textarea {
     border:1px solid #333;
     border-radius:5px;
}



table {border-collapse:collapse;}
tbody {vertical-align:top;}


.button {
     margin:1em auto;
     text-align:center;
     background:#eee;
     border-radius:10px;
     font-weight:700;
     color:#000;
     padding:1em 2em;
     display:block;
     width:300px;
}

.button a {color:#d93d0e;}
.button a:hover {color:#f2da49;}



/* FLEX 1 */


/* =====================================
 SCREENS IPAD 700px - 1000px
 ===================================== */


@media screen and (min-width: 700px) and (max-width: 1000px)  {

#container {
     
}

#header {
    
}

.tagline {


}

#nav {
     
}

#follow {
     
}



#content-parallax  {
     
}

.spacer {
    
}

.section {
    
}

.parallax {
     
}



}


/* FLEX 2 */



/* =====================================
 SCREENS BIGGER THAN 1000px
 ===================================== */

@media screen and (min-width: 1000px) {



#container {
     
     
}

#header {
    
}



.tagline {
     
}

#nav {
     
}

.logo {float:left;}

#follow {
     
}




#content-parallax  {
     
}

#content-parallax p {
     
}

.spacer {
    
}


.section {
    
}

.parallax {
    
}

#content-parallax div img {
     float:left;

}




}