/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
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; line-height:1.5em; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
textarea, input.text, input[type="text"], input[type="button"], input[type="submit"], .input-checkbox { -webkit-appearance: none; border-radius: 0; }
/*Site Styles below*/

body { padding:100px 0px 0px 0px; font-family: Lato, sans-serif; background-color:#4A9B27; }

#global-wrapper { width: 100%; position: relative; overflow: hidden; }
#canvas { width: 100%; height: 100%; position: relative; background: #fff; z-index:1401; }
#global-wrapper.display-nav #canvas { -webkit-transform:translateX(-275px); -moz-transform:translateX(-275px); -ms-transform:translateX(-275px); -o-transform:translateX(-275px); transform:translateX(-275px); }
#global-wrapper.display-filter-nav #canvas { -webkit-transform:translateX(275px); -moz-transform:translateX(275px); -ms-transform:translateX(275px); -o-transform:translateX(275px); transform:translateX(275px); }

#overlay { position:absolute; width:100%; height:100%; z-index:4; display:none; background-color:#000; opacity: 0.4; }

#masthead { position:fixed; top:0px; left:0px; width:100%; height:100px; z-index:1400; background-image:url('../Images/Elements/100pc_10x10.png'); background-repeat:repeat; }
    #masthead .inner { max-width:950px; margin:0px auto; height:100%; /*border-bottom:1px solid #808080;*/ }
    #masthead #logo { position:relative; float:left; width:200px; margin-top:25px; }
        #masthead #logo img { width:100%; display:block; }
    #masthead #global-nav { position:relative; float:right; margin-top:35px; }
        #masthead #global-nav #wrapper { }
            #masthead #global-nav #wrapper ul li { float:left; margin-left:34px; }
                #masthead #global-nav #wrapper ul li a { color:#808080; font-weight:600; font-size:14px; text-transform:uppercase; text-decoration:none; transition: 0.3s; }
                    #masthead #global-nav #wrapper ul li a:hover { color:#4A9B27; }
                    #masthead #global-nav #wrapper ul li a.active { color:#4A9B27; }

.nav-icon { position:absolute; top:20px; right:20px; padding:10px; width: 25px; /*background-color:#1b2a3b;*/ border:1px solid #fff; border-radius:50%; cursor:pointer; transition: 0.3s; z-index:1501; display:none; }
.nav-icon.hidden { display:none; }
.nav-icon div { background-color: #808080; border-radius: 3px; content: ''; display: block; height: 3px; margin: 4px 0; transition: all .2s ease-in-out; }
.nav-icon .a { width:70%; }
.nav-icon .b { width:100%; }
.nav-icon .c { width:80%; }
.nav-icon.active { background-color:#fff; position:fixed; }
    .nav-icon.active div { background-color:#4A9B27; }
.nav-icon.active .a { transform: translateY(7px) rotate(135deg); width:100%; }
.nav-icon.active .b { transform: scale(0); }
.nav-icon.active .c { width:100%; transform: translateY(-7px) rotate(-135deg); }

.filter-nav-icon { position:relative; width:160px; height:35px; /*border:1px solid #5f5c5c;*/ cursor:pointer; /*margin-left:5px;*/ display:none; background-color:#4A9B27; }
    .filter-nav-icon .filter-logo { position:relative; width:25px; padding:5px; float:left; }
    .filter-nav-icon span { display:block; width:115px; font-size: 14px; font-weight:500; color: #fff; text-align: left; line-height: 35px; vertical-align: middle; float:right; text-transform:uppercase; }
.filter-logo div { background-color: #fff; border-radius: 3px; content: ''; display: block; height: 3px; margin: 4px 0; transition: all .2s ease-in-out; }
.filter-logo .a { width:70%; }
.filter-logo .b { width:100%; }
.filter-logo .c { width:80%; }

.filter-logo.active .a { transform: translateY(7px) rotate(135deg); width:100%; }

.filter-logo.active .b { transform: scale(0); }

.filter-logo.active .c { width:100%; transform: translateY(-7px) rotate(-135deg); }



#container { position:relative; width:100%; /*max-width:1000px;*/ margin:0px auto; padding-top:15px; }

#container .grid { position:relative; margin:0px auto; }
    #container .grid.g_100 { width:100%; max-width:1000px; margin-bottom:50px; }
    #container .grid.g_50 { width:50%; float:left; }
    #container .grid.g_33 { width:33.3333%; float:left; }
    #container .grid.g_66 { width:66.6666%; float:left; }
    #container .grid.hero { border-top:5px solid #4A9B27; background-size:cover; background-position:center center; }
        
        #container .grid .pad { padding:0px 15px; }
        #container .grid .contact_pad { padding:20px 20px; color:#fff; }
            #container .grid .contact_pad { padding:20px 20px; }
                #container .grid .contact_pad p { color:#fff; }
                #container .grid .contact_pad a { color:#fff; text-decoration:none; }
                    #container .grid .contact_pad a:hover { text-decoration:underline; }
                    #container .grid .pad.center p, #container .grid .pad.center h1, #container .grid .pad.center h2, #container .grid .pad.center h3 { text-align:center; }
                    

div.green { background-color:#4A9B27; }
        
#container .grid.hero.home_hero { background-image:url('../Images/Content/home_hero.jpg'); padding:60px 0px; margin-bottom:50px; }
#container .grid.hero.contact_hero { background-image:url('../Images/Content/contact_hero.jpg'); /*padding:60px 0px;*/ margin-bottom:50px; }
#container .grid.hero.green { background-color:#4A9B27; margin-bottom:50px; padding:50px 0px 1px 0px; }
    #container .grid.hero.green h1, #container .grid.hero.green h2, #container .grid.hero.green h3, #container .grid.hero.green p, .grid.hero.green li  { color:#fff; }


#welcome { position:relative; width:90%; margin:60px auto 0px auto; background-color:#000; padding:40px 10px; }
    #welcome p { color:#fff; text-align:center; }
        #welcome p.welcome { font-size:30px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; }
        #welcome p.welcome2 { font-size:20px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; }
        #welcome p.welcome3 { font-size:15px; font-weight:500; margin-bottom:2px; }

#footer { position:relative; width:100%; background-color:#4A9B27; border-top:5px solid #808080; }
    #footer .block a { color:#fff; text-decoration:underline; font-size:16px; font-weight:500; }
        #footer .block a:hover { color:#e68b22; }
    #footer .block p { font-size:16px; font-weight:700; text-align:center; }
        #footer .block p.with-love { color:#fff; font-size:19px; margin-top:25px; vertical-align:middle; }
        #footer .block p .material-icons { vertical-align:middle; }
#roundal { position:relative; /*height:62px;*/ width:150px; margin:0px auto 10px auto; }
    #roundal img { width:100%; }
#social { position:relative; width:165px; margin:30px auto 0px auto; }
    #social .icon { position:relative; height:35px; width:35px; float:left; margin:0px 10px; }
.block { position:relative; padding:30px 0px; margin:0px 25px; }
    .block.kl { border-top:1px solid #949191; border-bottom:1px solid #949191; }
        .block.kl:last-child { border-bottom:0; }

h1 { font-size:21px; font-weight:500; color:#5f5c5c; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:15px; }
h2 { font-size:18px; font-weight:600; color:#4A9B27; margin-bottom:15px; text-transform:uppercase; }
    h2.margin_top_15 { margin-top:15px; }
h3 { font-size:18px; font-weight:600; color:#5f5c5c; margin-bottom:15px; text-transform:uppercase; }
    h3.margin_top_15 { margin-top:15px; }
    h3.white { color:#fff; }
p { font-size:14px; font-weight:400; color:#5f5c5c; margin-bottom:15px; }
    p.blog-date { font-size:18px; text-transform:uppercase; }
b { font-weight:700; }
a.button { display:block; width:170px; height:45px; background-color:#1b2a3b; border-radius:22px; text-align:center; line-height:45px; vertical-align:middle; text-decoration:none; color:#fff; text-transform:uppercase; font-size:16px; margin:30px auto 0px auto; font-weight:500; transition: 0.3s; }
    a.button:hover { background-color:#e68b22; }
.clearfix { clear:both; }
.white { color:#fff; }
a { color:#5f5c5c; text-decoration:underline; }
.messenger { position:fixed; bottom:30px; left:30px; height:50px; width:50px; border-radius:50%; z-index:1501; border:1px solid #fff; }
    .messenger.hidden { display:none; }
.grid ul { list-style-type:disc; list-style-position:inside;  /*margin-bottom:10px;*/  }
    .grid ul li { font-size:14px; font-weight:400; color:#5f5c5c;  }
.grid ul.two_col { width:50%; float:left; }
    .grid ul.two_col li { padding-right:10px; }
.margin-bottom { margin-bottom:30px; }

.material-icons { vertical-align:middle; }

a.green_link_button { display:block; width:170px; height:45px; background-color:#4A9B27; border-radius:5px; text-align:center; line-height:45px; vertical-align:middle; text-decoration:none; color:#fff; text-transform:uppercase; font-size:16px; margin:30px auto 0px auto; font-weight:500; transition: 0.3s; }
    a.green_link_button:hover { background-color:#3C7D1F; }

/*picture block stuff*/

.gallery-image, .gallery-image-video { width:33.333%; margin-bottom:10px; float:left; }
    .gallery-image .inner, .gallery-image-video .inner { padding:0px 5px; }
    .gallery-image .inner img, .gallery-image-video img { width:100%; display:block; }
.full-image-block { width:100%; margin-bottom:10px; }
    .full-image-block img { width:100%; }

/*end picture block stuff*/

/*blog block stuff*/

.blog-block { width:100%; margin-bottom:30px; }
    .blog-block .content-half-left .inner img, .blog-block .content-half-right .inner img { display:block; width:100%; }
    .blog-block.blue { background-color:#1b2a3b; }
    .blog-block.green { background-color:#074442; }
    .blog-block.orange { background-color:#e68b22; }
        .blog-block.orange p, .blog-block.orange h2 { color:black; }
    .blog-block.pink { background-color:#ed71da; }
        .blog-block.pink p, .blog-block.pink h2 { color:black; }

    .blog-block .inner.text { padding:20px; }

    .blog-block.blue h2, .blog-block.orange h2, .blog-block.green h2, .blog-block.pink h2 { color:#fff; }
    .blog-block.blue p, .blog-block.orange p, .blog-block.pink p, .blog-block.green p { color:#fff; }
        .blog-block p.date { font-size:18px; text-transform:uppercase; }

    .blog-block .content-half-left .inner h2, .blog-block .content-half-left .inner p { text-align:right; }
    .blog-block .content-half-right .inner h2, .blog-block .content-half-right .inner p { text-align:left; }

.post p { font-size:19px; }
    .post p.quote { font-style:italic; max-width:80%; margin:0px auto 10px auto; border-left:1px solid #1b2a3b; padding-left:7px; }
.post li { font-size:19px; }
/*.post .content-half-left .inner img, .post .content-half-right .inner img { display:block; width:100%; }
    .post .content-half-left .inner h2, .post .content-half-left .inner p { text-align:right; }
    .post .content-half-right .inner h2, .post .content-half-right .inner p { text-align:left; }*/
            

/*end blog block stuff*/

.contact-list { width:230px; margin:50px auto 0px auto; }
    .contact-list a { padding-left:50px; font-size:18px; font-weight:500; background-position:left center; background-repeat:no-repeat; line-height:40px; display:block; margin-bottom:15px; text-decoration:none; }
        .contact-list a:hover { text-decoration:underline; }
        .contact-list a.phone { background-image:url('../Images/Elements/phone.png'); }
        .contact-list li.email a { background-image:url('../Images/Elements/email.png'); }
        .contact-list a.fbmessenger { background-image:url('../Images/Elements/fbmessenger.png'); }
        .contact-list a.whatsapp { background-image:url('../Images/Elements/whatsapp.png'); }

.content-half-left { position:relative; width:50%; float:left; }
    .content-half-left .inner { padding-right:10px; }
.content-half-right { position:relative; width:50%; float:right; }
    .content-half-right .inner { padding-left:10px; }

.services-icon { position:relative; height:100px; width:100px; margin:0px auto 20px auto; }
    .services-icon img { display:inline; width:100%; }
.nbsl-logo { position:relative; height:130px; width:218px; margin:0px auto 20px auto; }

#filter-nav { padding-bottom:0px; }
    #filter-nav ul.filter-button-group { display:block; width:100%; margin:0px auto; list-style-type:none;  }
    /*#filter-nav ul.blog-filter-button-group { display:block; width:460px; margin:0px auto; }*/
        #filter-nav ul li { float:left; margin:0px 10px 10px 0px; font-size:14px; font-weight:400; color:#fff; text-transform:uppercase; }
            #filter-nav ul li a { display:block; background-color:#4A9B27; padding:10px 10px; color:#fff; text-decoration:none; text-transform:uppercase; }
                #filter-nav ul li a:hover, #filter-nav ul li a.active { color:#fff; background-color:#3C7D1F; }

#side-nav { position:fixed; top:0px; right:0px; width:275px; height:100%; background-color:#4A9B27; z-index:1; display:none; }
    #side-nav ul { margin-top:90px; }
        #side-nav ul.hidden li { display:none; }
        #side-nav ul li { float:none; margin-left:0; margin-bottom:0px; }
            #side-nav ul li a { display:block; color:#fff; text-align:center; font-size:14px; text-transform:uppercase; text-decoration:none; font-weight:600; height:40px; line-height:40px; vertical-align:middle; }
                #side-nav ul li a.active { color:#4A9B27; background-color:#fff; }
                #side-nav ul li a:hover { color:#4A9B27; background-color:#fff; }

#filter-side-nav { position:fixed; top:0px; left:0px; width:275px; height:100%; background-color:#4A9B27; z-index:1; display:none; }
    #filter-side-nav ul { margin-top:90px; }
            #filter-side-nav ul.hidden li { display:none; }
            #filter-side-nav ul li { float:none; margin-left:0; margin-bottom:0px; }
                #filter-side-nav ul li a { display:block; color:#fff; text-align:center; font-size:14px; text-transform:uppercase; text-decoration:none; font-weight:600; height:40px; line-height:40px; vertical-align:middle; }
                    #filter-side-nav ul li a:hover { color:#4A9B27; background-color:#fff; }
                    #filter-side-nav ul li a.active { color:#4A9B27; background-color:#fff; }


@media only screen and (max-width: 1050px) {
    #masthead .inner { margin:0px 25px; }
}

@media only screen and (max-width: 1000px) {
    body { padding-top:0px;  background-color:#4A9B27; }
    #masthead { height:70px; position:relative; margin-bottom:0px; background-image:none; }
        #masthead .inner { margin:0px 25px; }
        #masthead #logo { width:160px; margin-top:17px; }
        #masthead #global-nav { display:none; }
        #side-nav { display:block; }
        #filter-side-nav { display:block; }
        .nav-icon { display:block; }
    .block { padding:30px 0px; }
    #filter-nav ul.filter-button-group, #filter-nav ul.blog-filter-button-group { display:none; }
    .filter-nav-icon { display:block; }

    #container .grid.g_50 { width:100%; float:none; margin-bottom:15px; }
    #container .grid.g_33 { width:100%; float:none; margin-bottom:30px; }
    #container .grid.g_66 { width:100%; float:none; margin-bottom:15px; }


    #footer .block { /*padding-bottom:80px;*/ }

    .content-half-left, .content-half-right { width:100%; float:none; }
    .content-half-left .inner, .content-half-right .inner { padding:0px; }

    .contact-list { margin:0px auto 50px auto; }

    .blog-block h2 { text-align:center; }
    .blog-block p { text-align:center; }
    .blog-block .content-half-left .inner h2, .blog-block .content-half-left .inner p { text-align:center; }
    .blog-block .content-half-right .inner h2, .blog-block .content-half-right .inner p { text-align:center; }
    .blog-block a { text-decoration:none; }

#canvas { -webkit-transform:translateX(0); -moz-transform:translateX(0); -ms-transform:translateX(0); -o-transform:translateX(0); transform:translateX(0); -webkit-transition:.5s ease all; -moz-transition:.5s ease all; -o-transition:.5s ease all; transition:.5s ease all; }

}

@media only screen and (max-width: 600px) {
    .grid ul.two_col { width:100%; margin-bottom:0px; float:none; }
    .gallery-image { width:50%; }
}

@media only screen and (max-width: 300px) {
    .image-block { width:100%; margin-bottom:20px; float:none; }
        .image-block.left .inner, .image-block.right .inner { padding-right:0px; }
}

@media only screen and (max-width: 300px) {
    #masthead #global-nav #wrapper { width:100%; }
}