/* html element 62.5% font-size for REM use */
html {
	font-size:62.5%;
        margin: 0;
        padding: 0;
}
body {
        line-height: 1;
        min-width: 300px;
        margin: 0;
        padding: 0;
        background: @pale-bg;
}


@red: #f56c59;
@red-opacity: rgba(245, 108, 89, .3);
@green: #64c881;
@green-opacity: rgba(100, 200, 129, .3);
@purple: #6f64b9;
@grey: #7d7877;
@light-grey: #ccc;
@dark-grey: #3a3a3b;


@light-blue: #0098d2; 
@dark-blue: #1574c4;
@pale-bg: #f5f6f3;
@home-heading-font: 'Raleway', sans-serif;
@heading-font: 'Raleway', sans-serif;
@body-font:  'Raleway', sans-serif;

@transparent-bg: rgba(100, 200, 129, 0.64);
.cb, .CB {
    clear:both;
}
.cl, .CL {
    clear: left;
}

img {
	max-width:100%;
	vertical-align:bottom;
}
img.alignright {float:right; margin:7px 0 15px 30px}
img.alignleft {float:left; margin:7px 30px 15px 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:7px 0 15px 30px}
a img.alignleft {float:left; margin:7px 30px 15px 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}
strong{ font-weight: bold;}
body, div, span, p{
    font: 300 16px/25px @body-font;
    color: @grey;
}

p{
    margin: 0px 0 13px;
    /*clear: left;*/
}
a {
    color: @green;
    text-decoration: underline;
    transition: color 0.5s ease;
    
}
a:hover {
        color: @green;
}


h1{
    font: bold 40px/50px @heading-font;
    color:@grey;
    margin: 30px 0 8px;
    letter-spacing: 2px;
   /* text-shadow: 1px 1px 1px @light-grey;*/
}

h1 a{
    color: @grey;
    text-decoration: none;
}
h2{
    font: 500 30px/36px @heading-font;
    color: @grey;
    margin: 12px 0 8px;
    /*text-shadow: 1px 1px 1px @light-grey;*/
}

h2 a{
    color: @grey;
    text-decoration: none;
}

h3{
    font: 500 20px/26px @heading-font;
    color: @grey;
    margin: 12px 0 8px;
   /* text-shadow: 1px 1px 1px @light-grey;*/

}
h3 a{
    color: @grey;
    text-decoration: none;
 }
h4{
    font: normal 16px/18px @heading-font;
    color: @grey;
    margin: 8px 0 6px;
    /*text-shadow: 1px 1px 1px @light-grey;*/

}
h4 a{
    color: grey;
    text-decoration: none;
}

.center{
    text-align: center;
}
.container {
    max-width: 1200px;
   /* margin: 0 auto;*/
}

/*.container.main{
    .col-md-3{
        background: #fff;
    }
    .col-md-9 {
        background: #fff none repeat scroll 0 0;
        margin-right: 3%;
        width: 71.667%;
        padding: 10px 30px 30px 30px;
        .col-md-3{
            background: transparent;
        }
    }
}*/

.nav-container{
    background-color:#fff;
    border-bottom: 1px solid @red;
    height: 80px;
/*max-width: 1200px;*/
    header{
        margin: 0 auto;
        max-width: 1200px;
        padding: 10px 0 3px;
        .logo {
            display: inline-block;
            float: left;
            height: 60px;
            img{
                height: auto;
                width: 100%;
                max-height: 60px;
            }
        }
        .client-login{
            width: 100%;
            text-align: right;
            a{
                float: right;
                color: black;
                text-decoration: none;
                padding: 0;
                margin: 7px 0 -6px 3px;
            }
        }
        /*.navnav{ position: relative; }*/
        .navbar{
            clear: both;        
            background: white;
            float: right;
            margin-bottom: 0;
            min-height: 35px;
            margin-top: 6px;
            width: 190px;
            z-index: 100;
            position: right;
            right: 0;
            position: relative;
            border: none;
            .navbar-collapse{
                position: absolute;
                right: 0;
                top: 38px;
                background: white;
            
                ul{
                    width: 100%;
                    float: right;
                    padding: 0;
                    margin: 0;
                    list-style: none;
                    li{
                        float: left;
                        display: block;
                        width: 100%;
                        a{
                            display: block;
                            width: 100%;
                            color: @grey;
                            font: 500 19px/30px @body-font;
                            padding: 0 9px;
                            text-decoration: none;
                            text-transform: uppercase;
                            &:hover{
                                color: @green;
                                text-decoration: none;
                            }
                        }

                        ul.sub-menu {
                            display: block;
                            float: left;
                            padding-bottom: 0;
                            padding-left: 20px;
                            width: 250px;
                            z-index: 100;
                            li{
                                float: left;
                                height: 30px;
                                width: 100%;
                                padding: 0 5px;

                                a{
                                    border-bottom: none;
                                    color: @dark-grey;
                                    font-size: 16px;
                                    display: block;
                                    width: 100%;
                                    line-height: 30px;

                                    &:hover{
                                        color: @green;
                                    }
                                }
                                &:last-child a{
                                    border: none;
                                }
                            }
                            li.current-menu-item a{
                                color: @green;
                            }
                        }
                        &:hover{
                            ul{
                                display: block;  
                            }
                        }

                    }
                    li.current_page_parent a, li.current-menu-item a{
                        color: @green;
                    }

                }
            }
        }

    }
}




.home {


    .home-video{
        .video-wrap {
            width: 100%;
            overflow: hidden;
            position: absolute;
            top: 0;
            right: 0;
            z-index: -100;
            #video-bg {
                position: relative;
                width: auto;
                min-width: 100%;
                min-height: 100%;
                height: auto;
                display: block;
            }        
        }
        
        .scroll-down {
            color: #fff;
            bottom: 0;
            height: 115px;
            left: 0;
            position: absolute;
            text-align: center;
            text-transform: uppercase;
            width: 100%;
            display: block;
            text-decoration: none;
        }
        
        .slogan-wrapper{
            
            text-align: center;
            text-transform: uppercase;
            z-index: 1;
            margin: 0 auto;
            position: absolute;
            left: 5%;
            width: 30%;
            bottom: 40%;
            .slogan-content-wrapper{
                background-color: rgba(0, 0, 0, 0.4);
                bottom: 10%;
                padding: 0px 20px 10px 20px;
                text-align: left;
                width: auto;
                
                p{
                    font: 400 20px/30px 'Merriweather', serif;
                    color: #fff;
                    margin: 0 0 15px 0;
                    text-shadow: 1px 1px 2px #000;
                    text-transform: none;
                }
            }

            .call-to-action {
                margin:30px  auto 0;
                color: #fff;
                font: bold 13px / 15px @home-heading-font;
                padding: 18px 30px;
                border: 1px sold #fff;
                border-radius: 2px;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
                cursor: pointer;
                display: inline-block;
                text-shadow: none;
                text-transform: uppercase;
                transition: all 0.2s ease 0s;
                background: @red;
                text-decoration: none;
                &:hover{
                    opacity: 0.70;
                }

            }
        }
    }
    #home-sub{
        padding: 45px 20px;
        p{
            font-size: 22px;
        }
    }
    .home-blocks {
        margin-bottom: 30px;
        a{
            position: relative;
            display: block;
            h3 {
                bottom: 0;
                color: #fff;
                font: 500 30px/35px "Raleway",sans-serif;
                margin: 0;
                padding: 2% 0 2% 2%;
                position: absolute;
                text-shadow: 1px 1px 2px #000;
                width: 100%;
                background: @transparent-bg none repeat scroll ;
            }
            .grayImg{
                width: 100%;
                height: auto;
                -webkit-filter: grayscale(1) ;
                filter: grayscale(1);
                transition: all 0.2s ease 0s;
            }
        }

        a:hover{
            .grayImg{
                -webkit-filter: grayscale(0);
                filter: grayscale(0);
            }
            
        }
    }

}


.carousel-inner{
    max-height: 650px;
    overflow-y: hidden;
    border-bottom: 3px solid @red;
}
.carousel-inner>.item>a>img, .carousel-inner>.item>img {
    width: 100%;
}

.project-landing-page{
    h1{
        margin-top: 40px;
    }
    .filter{
        float: left;
        margin-bottom: 30px;
        margin-top: 30px;
       
        #project-filter{
            float: left;
            background: @red;
            padding: 12px;
            border-radius: 7px;
            h4{
                float: left;
                color: @dark-grey;
                padding: 10px 0 1px 0;
                /* clear: left; */
                width: 100%;
                font-weight: 500;
                text-shadow: none;
            }
            span{
                list-style: none;
                float: left;
                display: block;
                padding-right: 8px;
                color: @dark-grey;
                text-shadow: none;
                input{
                    margin-right: 4px;
                }
            }
        }
    }
    .project-lead{
        padding-right: 1%;
        padding-left: 1%;  
        margin-bottom: 22px;
        height: 385px;
        overflow: hidden;
        a{
            display: block;
            img{
                /*-webkit-filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9));
                filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9));*/
                min-height: 385px;
                min-width: 100%;
            }
            h3{
                background: rgba(100, 200, 129, 0.64) none repeat scroll 0 0;
                color: white;
                display: block;
                height: 100%;
                line-height: 38px;
                /* height: 282px; */
                margin: 0;
                padding: 15px 15px 0 15px;
                position: absolute;
                text-align: center;
                top: 0;
                width: 98%;
                z-index: 50;
                font-size: 26px;
            }
            .project-div{
                min-height: 385px;
                min-width: 100%;
                h3{
                     background: transparent;
                     color: white;
                     display: block;
                     height: 100%;
                     line-height: 40px;
                     margin: 0;
                     padding: 0 15px;
                     position: absolute;
                     text-align: center;
                     top: 40%;
                     width: 94%;
                     z-index: 50;
                     font-size: 26px;
                 }
                
            }

            &:hover{
                h3{
                    /*display: block;*/
                }
            }
        }
    }
}
.related-projects{
    .project-lead{
        padding-right: 1%;
        padding-left: 1%;  
        margin-bottom: 22px;
        height: 250px;
        overflow: hidden;
        a{
            display: block;
            width: 100%;
            height: 100%;
            img{
                min-height: 250px;
                min-width: 100%;
                /*-webkit-filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9));
                filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9));*/
            }
            h3{
                background: rgba(100, 200, 129, 0.64) none repeat scroll 0 0;
                color: white;
                display: block;
                height: 100%;
                line-height: 36px;
                /* height: 282px; */
                margin: 0;
                padding: 0 15px;
                position: absolute;
                text-align: center;
                top: 0;
                width: 98%;
                z-index: 50;
                font-size: 26px;
                padding-top: 29px;
            }
            
            &:hover{
                h3{
                    /*display: block;*/
                }
            }
            
        }
        a.no-image{
            background: transparent;
            display: block;
            h3{
                display: block;
                line-height: 36px;
                top: 10%;
                padding-top: 0px;
            }
        }

    }



}

.project-banner{
    max-height: 650px;
    width: 100%;
    border-bottom: 3px solid @red;
    overflow: hidden;
    margin-bottom: 10px;
    img{
        min-width: 100%;
        min-height: 100%;
    }
    .project-div{
        height: 250px;
        width: 100%;
        position: relative;
        h3{
            background: transparent;
            color: white;
            display: block;
            margin: 0;
            padding: 0 15px;
            position: absolute;
            text-align: center;
            top: 33%;
            width: 94%;
            z-index: 50;
            font-size: 22px;
            line-height: 30px;        
        }
    }
}
.single-projects{
    h1{
        margin-top: 5px;
    }
    h2{
        text-shadow: none;
        font-size: 27px;
        line-height: 32px;
        margin-bottom: 18px;
    }
    .gallery-row{
        margin-top: 25px;
        div{
            padding-bottom: 30px;
        }
        .col-md-4{
            margin-top: 15px;
        }
    }
    .details{
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid @grey;
    }
    .video img{
        width: 100%;
        height: auto;
    }

}

.our-team{
    #team{
        clear: left;

    }
    .oti{
        
        display: block;
        position: relative;
        /*max-width: 150px;*/
        padding-right: 15px;
        overflow: hidden;
        padding: 0;
        cursor: pointer;
        .role {
            display: block;
            margin: 0;
            padding: 5px 8px;
            position: absolute;
            text-align: center;
            bottom: 15px;
            z-index: 50;
            width: 95%;
            background: @transparent-bg none repeat scroll ;
            h2 {
                margin: 0;
                font-size: 17px;
                text-align: center;
                color: #000;
                line-height: 20px
            }
            h3 {
                font-size: 12px;
                color: #000;
                line-height: 14px;
                margin: 3px 0 0 0;
                text-align: center;
            }
        }
        
        
        overflow: hidden;
        padding-bottom: 15px;
        img{
            min-width: 95%;
           /* min-height: 95%;*/
            max-width: 95%;
            height: auto;
            -webkit-filter: grayscale(1) ;
            filter: grayscale(1);
            background-color: transparent;
            transition: all 0.2s ease 0s;
            &:hover{
                -webkit-filter: grayscale(0);
                filter: grayscale(0);
            }
        }
        img.active{
            -webkit-filter: grayscale(0);
            filter: grayscale(0);
            border: solid 1px @dark-grey;
        }
    }
    .team-content{
        display: none;
        img{
            max-width: 95%;
            width: 95%
        }
    }
    .team-content.active{
        display: block;
    }
    
}

/** news page**/
#post-banner{
    width: 100%;
    max-height: 650px;
    overflow: hidden;
    img{
        width: 100%;
    }
}

.referral, .feed-item.juicer.image-post{
    display: none !important;
}
#fbimage{
    height: 38px;
    margin-bottom: 0px;
}

#ga-map{
    float: right;
    width: 100%;
}
.post-title-list{
    margin: 130px 0 0 0;
    padding: 0;
    list-style: none;
    li{
       border-bottom: 1px solid @dark-grey; 
       padding: 10px 0;
        a{
            text-decoration: none;
            color: @dark-grey;
        }
    }
    li.first-post a{
        font-weight: 500;
    }
}
.fb-h1{
    margin-bottom: 18px;
}
.fb-h1 img{
    float: left;
    display: inline-block;
}
.fb-h1 span{
    padding: 21px 9px 0;
    float: left;
    display: inline-block;
}
/*** end news ***/



.supportee{
    padding-bottom: 15px;
    &:hover{
        background: #f9d4cf;
    }
}
.skipnav {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    z-index: 99;
    position: relative;
    li {
        background: @pale-bg;
        float: left;
        list-style: none;
        line-height: 40px;
        
        border-right: solid 1px @dark-grey;
        border-bottom: solid 1px @dark-grey;
        a{
            background: #fff none repeat scroll 0 0;
            display: block;
            font-weight: 500;
            padding: 5px 24px;
            text-decoration: none;            
            color:  @dark-grey;
            &:hover{
                background: @red;
            }
        }
        a.active{
            background: @red;
        }
        
    }
    li.first {
        border-left: solid 1px black;
    }
}
.skipnav.stick {
        position: fixed;
        top: 0;
}
.service-landing-page{
    
    .service-gallery{
        padding-top: 15px;
        padding-bottom: 15px;
    }
    
}

        


.testimonial{
    span{
        float: right;
    }
}
#map{
    width: 500px;
    height: 300px;
}
/***inner pages***/

.bg-banner{
    
    background-position: center top;
    background-size: 100% auto;
    overflow: hidden;
    background-repeat: no-repeat;
    margin-bottom: 30px;
}



.navbar-fixed{
    max-width: 1200px;
    position: fixed;
    top: 0;
    width: 42.3%;
    z-index: 100;
    ul{

    }
}
.fixed-block{
    height: 25px;
    width:10px; 
}



footer{
    padding: 25px 0;
    background: @grey;
    margin: 50px 0 0;
    div, p, h1, h2,h3,h4{
        color: #fff;
    }
    .footerNumber{
        border: 2px solid @green;
        font-size: 40px;
        font-weight: bold;
        line-height: 60px;
        margin-top: 20px;
        text-align: center;
    }
    ul{
        list-style: outside none none;
        margin: 0px 0 20px 0;
        padding: 0;
        float: left;
        li{
            float: left;
            margin-bottom: 10px;
            width: 100%;
            border-bottom: solid 1px #ccc;
            padding-bottom: 9px;
            a{
                padding: 0 0px;
                text-decoration: none;
                display: block;
                color: #fff;
            }
            
        }
    }
    .logos{
        a{
            display: inline-block;
            /*width: 48%;*/
            img{
                width: auto;
                margin: 0 2px;
                height: 150px;
            }
        }
    }
    
}
#enquireModal {
    .modal-header{
        padding: 0 15px 15px;
    }
    .modal-body{
        padding: 0 15px; 
    }
}


@media (min-width:200px) and (max-width: 430px) {
    .navnav, .navlogo{
        clear: both;
        width: 100%;
        text-align: center;
    }
    .nav-container {
        height: auto;
    }
    
}
@media (min-width:430px) and (max-width: 3000px) {
    .home .home-video{
        border-bottom: 1px solid @red;
    }
    .project-banner .project-div h3{
            font-size: 32px;   
            line-height: 36px;
    }

}

    
@media (min-width:200px) and (max-width: 1105px) {
    .navbar-header {
        float: right;
        width: 100px;
    }
    .navbar-toggle {
        display: block;
        margin-right: 0px;
        margin: 0;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
   .navbar-collapse.collapse.in {  /* NEW */
        display: block!important; 
    }
    
    
    
    #menu-main-menu{
            display: flex;
        flex-direction: column-reverse;
        li{
            flex: 0 0 auto;                        
        }
    }
    
    
    
}




/* Small devices (tablets, 768px and up) */
@media (min-width:768px) { 
    .project-landing-page .project-lead a h3{
        width: 96%;
    }
    .related-projects .project-lead a h3{
        width: 96%;
    }    
    
}

/* Medium devices (desktops, 992px and up) */
@media  (min-width: 992px) { 
    
    .post-title-list {
        margin: 30px 0 0 !important;
    }
    .project-landing-page .project-lead a h3{
        width: 94%;
        display: none;
    }
    .related-projects .project-lead a h3{
        width: 94%;
        display: none;
    }    
    .our-team{
        #team{
            clear: none;
        }
    }
    



}

@media ( min-width: 1106px ){
    
    body .nav-container header .navbar{
        width: 100% ;
        .navbar-collapse{
                position: static;
                right: 0;
                top: 0px;
                background: white;
            ul{
                li{
                    float: right;
                    width: auto !important;
                    a{
                        font: 500 19px/36px @body-font;
                    }

                    ul.sub-menu {
                        width: 260px;
                        float: left;
                        position: absolute;
                        background: #fff;
                        top: 35px;
                        padding-bottom: 0px;
                        display: none;
                        z-index: 100;
                        li{
                            float: left;
                            height: 35px;
                            width: auto;
                            padding: 0 5px;

                            a{
                                border-bottom: solid 1px @dark-grey;
                                color: @dark-grey;
                                font-size: 16px;
                                display: block;
                                width: 100%;
                                line-height: 30px;

                                &:hover{
                                    color: @green;
                                }
                            }
                            &:last-child a{
                                border: none;
                            }
                        }
                        li.current-menu-item a{
                            color: @green;
                        }
                    }
                    &:hover{
                        ul{
                            display: block;  /*show sub menus when hovering over a parent */
                        }
                    }

                }
                li.current_page_parent a, li.current-menu-item a{
                    color: @green;
                }

            }
        }
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 

}