@charset "UTF-8";
/* CSS Document */

/* COLOURS
green: #20aa50
dark blue: #223651
blue tint 1: #2c4568
blue tint 2: #385173
light grey: #dbdee2
*/

body { overflow-y: scroll; }
.grid-container { max-width: 1440px;  }

header { position: fixed; background: #2c4568; height: 150px; width: 100%;  z-index: 999; }
    header.home { height: 850px; position: relative; }
    .logo { position: absolute; z-index: 10; top: 60px; }
        .home .logo { top: 25%; }
    .logo img { width: 358px; }
        .home .logo img { width: 471px; }

    .top-nav { position: absolute; top: 0; right: 0; z-index: 9; width: 100%; }
        .top-nav .btn { float: right; display: block;  background: #223651; height: 30px; padding: 15px 10px 5px 2em; }        

    nav {}
        .homenav { display: block; width: 100%; position: absolute; bottom: 0; height: 80px; background:#20aa50; text-align: center; padding-top: 20px; right: 0; }
            .homenav > li { display: inline-block; border-right: 1px solid #33dc7f; float:none; }
            .homenav > li:nth-last-child(-n + 2) { border-right: none; }
            /*.homenav > li:last-child { border-right: none; }*/

        .subnav { padding-top:95px; text-align: right;  }
            .subnav > li { display: inline-block; }
                .subnav > li > a { padding: 10px 1.5em; display: block; height:35px; }
                 .subnav > li:hover { background:#385173; }

/*.drop-down { width: 100%; position: absolute; left: 0; background:#385173; z-index: 9; top: 150px; text-align: left; overflow: hidden; -webkit-box-shadow: 0 5px 5px 0 rgba(0,0,0,0.1); box-shadow: 0 5px 5px 0 rgba(0,0,0,0.1); height: 0; opacity: 0; visibility: hidden; }*/

        .drop-down { width: 100%; position: absolute; left: 0; background:#385173; z-index: 9; top: 150px; text-align: left; overflow: hidden; -webkit-box-shadow: 0 5px 5px 0 rgba(0,0,0,0.1); box-shadow: 0 5px 5px 0 rgba(0,0,0,0.1); height: 0; opacity: 0; visibility: hidden; }
            .homenav .drop-down { top: 0; }
            .drop-down ul, .drop-down p { display: block; padding: 0 1.5em 0 0; margin-top: 25px; }
                .drop-down .right ul { padding-left: 2em; padding-right: 0; }
            .drop-down ul { border-right:1px solid #20aa50; }
                .drop-down .right ul { border-right:none; border-left:1px solid #20aa50; }
                .drop-down li { float: none; }
            .drop-down p { width: 150px; border-left:1px solid #20aa50; margin-left: -1px; padding: 0 2em;  }
                .drop-down .right p { border-left: none; border-right:1px solid #20aa50;  margin-right: -1px; margin-left: 20px; }
            .drop-down img { width: 200px; height: 200px; }  
        nav li:hover .drop-down { height: 200px; opacity: 1; visibility: visible; z-index: 99; }
            .homenav li:hover .drop-down { top:-200px; }
            .drop-down .offset { display: block; position: absolute; box-sizing:padding-box; }
                .drop-down .left ul, .drop-down .left p, .drop-down .left img { float:left; }
                .drop-down .right ul, .drop-down .right p, .drop-down .right img { float:right; }
                .homenav .offset { padding-left: 2em; }
                .subnav .offset { padding-left: 0; }
        nav .contact-us { display: none; }

    #menu-toggle { position: absolute;  opacity: 0; display: none; }
    #menu-toggle-label { display: none; position: fixed; z-index: 999; top: 20px; right: 20px; z-index: 999; background: #20aa50; width: 44px; height: 36px; text-align: center; color: #fff; font-size: 28px; padding-top:8px; }
        #menu-toggle-label:hover { cursor: pointer; background: #36b261; }
         #menu-label { position: absolute; z-index: 99; right: 70px; top: 35px; }
    #menu-toggle:checked ~ #menu-toggle-label { background: #16953c; }
    #menu-toggle:checked ~ .menu ul { right: 0;  z-index: 99; } 
   

    .owl-carousel { height: 600px; }
        .home .owl-carousel { position: absolute; top: 0; width: 100%; height: calc(100% - 100px); z-index: 0; }
        .owl-stage-outer, .owl-stage { height: 100%; overflow: hidden; }
        .owl-item { width: 100%; height: 100%; display: block; background-size: cover; background-position: center; }
        .owl-item aside, .header aside { position: absolute; display: block; bottom: 0; right: 0; background: #223651; background: rgba(34,54,81,0.9); padding: 1.5em 1.5em 1.4em 3em; }
        .owl-controls { position: absolute; bottom: 25px; z-index: 2; width: 100%; text-align: center; }
            .owl-dot { opacity: 0.5; margin: 0 5px; display: inline-block; }
                .owl-dot.active, .owl-dot:hover { opacity: 1; }
            .owl-dot span { display: block; width: 10px; height: 10px; background: #fff; -webkit-border-radius: 50%; border-radius: 50%; }
    
    .home .content { padding:4em 0; }
        .intro { background-color: #223651; position: relative; }
            .intro .grid-container { z-index: 1; position: relative; }
            .intro .bg { position: absolute; display: block; width: 100%; height: 100%; top: 0; z-index: 0; background-position: center; background-size: cover; opacity: 0.06; }
            .home .contact { padding-left: 3em; }

        .testimonial {}
            .intro .mission > div, .home .testimonial  { border-right: 1px solid #20aa50; padding:1em 3em 1em 20px;  }
                .home .testimonial { padding-left: 30px; }
            .col-r .testimonial { position: relative; }
                .col-r .testimonial .bg { display: block; position: absolute; background-position: center; background-position: center; z-index: 0; top:0; left: 0; bottom: 0; right: 0; opacity: 0.1; }
        .news {}
            .home .news li { padding:0 3em; list-style: none; }
            .home .news li:first-child { border-left: 1px solid #20aa50; margin-left: -1px; }


main { padding-top: 150px; }
    main.home { padding-top: 0 !important; }
    main .header { position: relative; z-index: 5; }
    main .header.pic { height: 588px; background-size: cover; background-position: center;  }
    .crumbs { list-style: none; width: 100%; width:calc(100% - 10px); max-width: calc(1440px + (100% - 1440px) / 2 - 10px); }
        .fixed main .header { position: fixed; top: 0; }
        .pic .crumbs { position: absolute; bottom: 0; width: 70%; }
        .crumbs li { float: left; height: 85px; }
        .crumbs, .crumbs li:nth-child(2) a { background:#20aa50; background: rgba(32,170,80,0.7); }
        .crumbs li, .crumbs .home a { display: block; text-decoration: none; }
            .crumbs .home a { width: 85px; font-size: 40px; background:#20aa50; text-align: center; padding-top:20px; height: 65px; color: #90d5a8; }
            .crumbs a { height: 85px; display: table-cell; vertical-align: middle;  }
            .crumbs h1 a { padding: 0 1em; display: block; line-height: 86px; }
            .crumbs li a:hover { background: #223651; }
                .crumbs .home a:hover { color: #fff; }
        .header aside { width: calc(30% - 4.5em); height: calc(85px - 3.6em); padding-top: 2.2em; }
    .content { position: relative; }
        .col-l { float: left; width: 50%; }
            .col-l .pad { max-width: 720px; width: calc(100% - 5em); padding: 5em 3em 5em 2em; display: block; float: right; }
        .col-r { width: 50%; float: right; }
            .col-r .testimonial, .col-r .contact { padding: 4em 20% 4em 3em;  background-color: #223651; }
            .col-r .contact { background: #20aa50; }
        .pic { position: relative; overflow: hidden;  }
            .pic img { width: 100%; position: relative; z-index: 0; }
            .pic .overlay { width: 100%; height: 25%; display: block; position: absolute; bottom: 0; background: #20aa50; left:-100%; padding-right: 10px; z-index: 1; opacity: 1; }
            .pic:hover  .overlay{ left: 0; opacity: 0.9; }
            .pinterest { position: absolute; top: 0.25em; right:0.45em; color: #fff; text-decoration: none; font-size: 3em; opacity: 0.5; }
                .pinterest:hover { opacity: 1; }
    .award { margin-right: 1em; margin-bottom: 1em; float: left; }
    .projects { clear: both; padding-top: 4em; padding-bottom: 3em; }
        .project { margin-bottom: 2em; }
            .project a { border-left: 5px solid #223651; display: block; text-decoration: none; }
            .project .info { background: #dbdee2; padding: 2em 5em 2em 1.5em; position: relative; }
                .project a:hover .info { background: #c7ccd4; }
            .project img { width: 100%; }
            .project span { position: absolute; font-size: 5em; margin-top:-0.5em; right: 0; top: 50%; color: #223651; opacity: 0.15; }
                .project a:hover span { right:-0.15em; opacity: 0.25; }
    .filter { margin-top: -85px; }
        .filter select { float: right; display: block; -webkit-appearance: none; height: 85px; border: 0;  background:#8fd4a7; background: rgba(255,255,255,0.4); padding: 0 1em; -webkit-border-radius: 0;
border-radius: 0; }

.news-posts { margin-top: 4em; margin-bottom: 4em; }
    .news-posts .post { margin-bottom: 3em; }
    .news-posts .post img { width: 100%; margin-bottom: 1.5em; }
    .news-posts .more {}
.enews, .archive { padding: 3em; margin-left: 2em;  background: #405065; }
.archive { background: #dbdee2; }

.downloads { list-style: none; }
    .downloads li { border-bottom: 1px solid #2c4568;}
    .downloads li:last-child { border: none; }
        .downloads a { display: block; padding: 3em 10% 3em 3em; background: #385173; }
        .downloads a:hover { background:#20aa50; }
        .downloads a:before { display: inline-block; margin-right: 0.5em; float: left; margin-top: -0.1em; }
    
        

footer { background: #dbdee2; padding: 0 3em; clear: both;  }
    footer nav {}
        footer ul { float: left; clear: both; width: 100%; margin: 3.75em 0 1em; }
            footer .light { margin: 0; }
        footer li { float: left; margin-right: 1em; padding-left: 1em; border-left: 1px solid #697586; line-height: 1em;  }
            footer .light li { border-left: 1px solid #99a1ad;  }
            footer li:first-child, footer .light .isdd { border-left: none; padding-left: 0; }
        footer .isdd { float: right; }

/* STICKY FOOTER */
* {  margin: 0; }
html, body {  height: 100%; }
.page-wrap {  min-height: 100%; margin-bottom: -120px; }
.page-wrap:after {  content: "";  display: block; }
footer, .page-wrap:after  { height: 120px; }


/* RESPONSIVE */
@media screen and (max-width: 1420px) { 
    .subnav > li > a { padding-left: 1em; padding-right: 1em; }
    .crumbs li, .crumbs a { height: 70px; }
        .crumbs .home a { width: 70px; height: 50px; font-size: 30px; }
        .crumbs h1 a { line-height: 72px; }
    .header aside { height: calc(70px - 3.4em); padding-top: 2em; }
}

@media screen and (max-width: 1210px) { 
    .logo { top: 20px; }
}

/* ipad & mobile */
@media screen and (max-width: 767px), (min-width: 768px) and (max-width: 1024px) {
    main .header { position: relative !important; }
    header { height: 110px; }
        header.home { height: 600px !important;  border-bottom: 5px solid #20aa50; }
        
    main { padding-top: 110px; }
    .home .owl-carousel { height: 100%; }
    .home .logo img { width: 300px; }
    .logo, .home .logo { top: 20px; left: -30px; }
    
    .top-nav { display: none !important; }
    #menu-toggle, #menu-toggle-label { display: block; }
    
    nav.menu { position: relative; z-index: 99; }
        nav.menu > ul, nav.menu .homenav { position: fixed; top: 0; right: -300px; height: 100%; margin: 0;
            width: 250px; overflow-x: hidden; padding: 70px 20px 20px; background: #20aa50; 
            -webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,0.4); box-shadow: 0 0 20px 0 rgba(0,0,0,0.4);
            -webkit-overflow-scrolling: touch; 
        }
        nav.menu li, nav.menu .homenav li { border-right: none; border-bottom: 1px solid #33dc7f; width: 100%; text-align: left; }
        nav.menu li:last-child, nav.menu .homenav li:last-child { border: none; }
            nav.menu > ul > li:hover > a, nav.menu .homenav > li:hover > a { background: #1a9f45 }    
        nav.menu a, nav.menu .homenav a { padding: 1.5em 1em 1.4em; font-size: 1.1em; display: block; }
        nav.menu ul ul, nav.menu .homenav ul { position: relative; padding: 0; margin: 0;
            -webkit-box-shadow:none; box-shadow:none;
        }
        .subnav > li > a { height: auto; }
        nav.menu ul ul li, nav.menu .homenav ul li { background: #16953c; font-size: 0.8em; border-bottom-color: #0f832d; margin: 0;  }
        
        .subnav > li:hover { background:none; }
        .drop-down { background: none; }
        .drop-down, .homenav .drop-down { top: auto; position: relative; }
            .drop-down .offset { position: relative; left:auto !important;  padding-left: 0; }
            .drop-down ul, .drop-down p { float: none; }
            .drop-down ul { border-right:none; width: 100%; }
            .drop-down p, .drop-down img  { display: none; width: 100%; } 
        nav li:hover .drop-down { height: auto;}
            .homenav li:hover .drop-down { top:auto; }
        nav .contact-us { display: block; }
    
    .home .content.intro { padding: 3em 0 0; }
    .intro .mission > div, .home .testimonial {  border-right: none; }
        .intro .mission > div { padding:0 1em 0 10px; }
        .home .testimonial { margin:0 3em 1em; padding: 0 0 1em; border; border-bottom: 1px solid #20aa50;  }
    .intro { padding-bottom: 0; }
        .intro .bg { width: 100% !important; }
        .intro .contact { background:#20aa50; width:calc(100% + 20px); margin-left: -10px; padding: 2em 1em; clear: left; margin-top: 3em; }
    
    .owl-controls { width: auto; left: 20px; }
    .enews, .archive { margin-left: 0; }
    
    footer .light {margin-top: 3em; }
    .page-wrap {  margin-bottom: -80px; }
    footer, .page-wrap:after  { height: 80px; }
    
    .mission:after { content: "."; display: block;	clear: both; visibility: hidden; line-height: 0; height: 0; }
    .mission { display: inline-block; }
}

/* mobile */
@media screen and (max-width: 767px) {
    header.home, main .header.pic { height: 320px !important; }
    header { height: 85px; }
         main { padding-top: 85px; }
    .logo img, .home .logo img { width: 250px; }
    
    .drop-down .offset { display: block; position: relative; box-sizing:padding-box; }
    
    .col-l, .col-r { float: none; width:100%; }
    .crumbs { width: 100%; }
    
    .project .info { padding: 2em 1.5em; }
        .project span { display: none; }
    
    .crumbs li { height: 60px; }
        .crumbs .home a { width: 60px; font-size: 25px; padding-top:15px; height: 45px; }
        .crumbs a { height: 60px; }
        .crumbs h1 a { padding: 0 1em; }
    
    .pic .crumbs { display: none; }
    .header aside { width: 50%; height: auto; }
    
    .filter { margin-top: -50px; }
        .filter select { height: 50px; padding: 0 1em;  }
        .filter select span { display: none; }
    
    footer .light li { width: 100%; text-align: center; margin-bottom: 1em; }
    footer .isdd { float: none; }
}