﻿/**
 * 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: futura-pt, sans-serif; }

#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/95pc_10x10.png'); background-repeat:repeat; }
    #masthead .inner { max-width:950px; margin:0px auto; height:100%; border-bottom:1px solid #949191; }
    #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:#1b2a3b; font-weight:600; font-size:18px; text-decoration:none; transition: 0.3s; }
                    #masthead #global-nav #wrapper ul li a:hover { color:#e68b22; }
                    #masthead #global-nav #wrapper ul li a.active { color:#e68b22; }

.nav-icon { position:fixed; bottom:30px; right:30px; 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: #fff; 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:#e68b22; }
.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; }
    .filter-nav-icon .filter-logo { position:relative; width:25px; padding:5px; float:left; }
    .filter-nav-icon span { display:block; width:115px; font-size: 18px; font-weight:500; color: #5f5c5c; text-align: left; line-height: 35px; vertical-align: middle; float:right; }
.filter-logo div { background-color: #5f5c5c; 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; }
#footer { position:relative; width:100%; background-color:#1b2a3b; border-top:5px solid #e68b22; }
    #footer .block a { color:#fff; text-decoration:underline; font-size:20px; font-weight:500; }
        #footer .block a:hover { color:#e68b22; }
    #footer .block p { font-size:20px; font-weight:500; }
        #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:100px; width:100px; margin:30px auto 40px auto; }
#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 { text-align:center; font-size:21px; font-weight:500; color:#5f5c5c; }
h2 { text-align:center; font-size:21px; font-weight:500; color:#5f5c5c; margin-bottom:0px; font-weight:600; }
p { text-align:center; font-size:21px; font-weight:400; color:#5f5c5c; margin-bottom:10px; }
    p.blog-date { font-size:18px; text-transform:uppercase; }
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; }
ul { margin-bottom:10px; }
    ul li { text-align:center; font-size:21px; font-weight:400; color:#5f5c5c; }
.margin-bottom { margin-bottom:30px; }

/*picture block stuff*/

.image-block { width:50%; margin-bottom:10px; float:left; }
    .image-block .inner { padding:0px 5px; }
    .image-block .inner 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:635px; margin:0px auto; }
    #filter-nav ul.blog-filter-button-group { display:block; width:460px; margin:0px auto; }
        #filter-nav ul li { float:left; padding:0px 5px; font-size:18px; font-weight:500; color:#5f5c5c; }
            #filter-nav ul li a { color:#1b2a3b; text-decoration:none; }
                #filter-nav ul li a:hover, #filter-nav ul li a.active { color:#e68b22; }

#side-nav { position:fixed; top:0px; right:0px; width:275px; height:100%; background-color:#1b2a3b; z-index:1; display:none; }
    #side-nav ul { margin-top:70px; }
        #side-nav ul.hidden li { display:none; }
        #side-nav ul li { float:none; margin-left:0; margin-bottom:20px; }
            #side-nav ul li a { display:block; color:#fff; text-align:center; font-size:21px; text-decoration:none; font-weight:600; }
                #side-nav ul li a.active { color:#e68b22; }
                #side-nav ul li a:hover { color:#e68b22; }

#filter-side-nav { position:fixed; top:0px; left:0px; width:275px; height:100%; background-color:#1b2a3b; z-index:1; display:none; }
    #filter-side-nav ul { margin-top:70px; }
            #filter-side-nav ul.hidden li { display:none; }
            #filter-side-nav ul li { float:none; margin-left:0; margin-bottom:20px; color:#fff; text-align:center; font-size:21px; text-decoration:none; font-weight:600; }
                #filter-side-nav ul li a { display:block; color:#fff; text-align:center; font-size:21px; text-decoration:none; font-weight:600; }
                    #filter-side-nav ul li a:hover { color:#e68b22; }
                    #filter-side-nav ul li a.active { color:#e68b22; }


@media only screen and (max-width: 1050px) {
    #masthead .inner { margin:0px 25px; }
}

@media only screen and (max-width: 700px) {
    body { padding-top:0px;  background-color:#1b2a3b; }
    #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; }

    #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: 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%; }
}

