/* Please note: Twitter Bootrap files located under the framework folder of website. There are other CSS files found under that folder attached via the template */
/* For more information/documentation please visit: http://twitter.github.io/bootstrap/ */

/* Insert Viewport declorations Here */

 /* Extra small devices Phones   */

 /* Small devices Tablets  */

 /* Medium devices Desktops */

 /* Large devices Desktops  */

/* Insert Global Vars Here */



/* Insert Main Styles Here */

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap - its a 'mobile first/inherit' approach */
body {font-size:18px;background-color:#DDDDDD;}

div#content a, a:link, a:hover, a:focus, a:active, a:visited {color: #D9AE00;} 

.btn{border-radius:0;}

.btn-default { 
  color: #000000; 
  background-color: #FFCA00; 
  border-color: #FFCA00; 
} 
 
.btn-default:hover, 
.btn-default:focus, 
.btn-default:active, 
.btn-default.active, 
.open .dropdown-toggle.btn-default { 
  color: #000000; 
  background-color: #D9AE00; 
  border-color: #FFCA00; 
} 
 
.btn-default:active, 
.btn-default.active, 
.open .dropdown-toggle.btn-default { 
  background-image: none; 
} 
 
.btn-default.disabled, 
.btn-default[disabled], 
fieldset[disabled] .btn-default, 
.btn-default.disabled:hover, 
.btn-default[disabled]:hover, 
fieldset[disabled] .btn-default:hover, 
.btn-default.disabled:focus, 
.btn-default[disabled]:focus, 
fieldset[disabled] .btn-default:focus, 
.btn-default.disabled:active, 
.btn-default[disabled]:active, 
fieldset[disabled] .btn-default:active, 
.btn-default.disabled.active, 
.btn-default[disabled].active, 
fieldset[disabled] .btn-default.active { 
  background-color: #FFCA00; 
  border-color: #FFCA00; 
} 
 
.btn-default .badge { 
  color: #FFCA00; 
  background-color: #000000; 
}

.col-special-25 {
    width: 25%;
    margin:0 10px;
}

.navbar{
    border:0;
    border-radius: 0;
    -webkit-border-radius: 0;

}
.menu {background:#332F30;}

h1, h2, h3 {
    color: #332F30;
}

h1 {

    margin-bottom: 20px;
   
}

a {
    color: #332F30;
}

header {
    position: relative;
    font-weight: bold;
    background:none;
}

#phone {
    color: #166AA7;
    font-size: 30px;
    font-weight: bold;
    position: absolute;
    top: 111px;
    z-index: 9999;

}


#facebook
{
    display: block;
    float:left;
    height: 48px;
    width:48px;
    font-size:0;
    text-indent: -9999em;
    margin-left:20px;
    background: url(http://www.willscontracting.co.nz/uploads/wills/facebook.png) no-repeat center center;
}

#content
{margin:7.5% auto;}

#content h1 {font-weight:bold;}

#content h1.home {text-align:center;}

#logo a {
    /* you can set your own image here */
    background: url(http://www.willscontracting.co.nz/uploads/wills/logo.png) no-repeat center center;
    display: block;
    height: 112px;
    text-indent: -999em; /* this hides the text */
    text-decoration: none; /* old firefox would have shown underline for the link, this explicitly hides it */
    font-size: 0px;
    line-height: 0px;
    top: 0px;
    left: 10px;
    max-width: 700px; /* adjust according your image size */
    background-size: 100% auto;
}

#menuSection{
    background:#000;
}

#menuSection .link {
    background: #000 no-repeat center center;
    height: 240px;
    float: left;
}

#menuSection h1{
    text-align:center;
    color:#fff;
    padding: 0 10px;
    padding-top:20px;
    padding-bottom:40px;
    margin-bottom:0;
}

.navbar-nav > li > a {
    text-transform: uppercase;
    padding: 10px 15px;

}

.navbar{
    margin:0;
}

.navbar-nav > li > a:hover, .navbar-nav > li > a:active, .navbar-nav > li > a:focus, li.active a, .nav .open > a, .nav .open > a:hover, .nav .open > a:focus{
    background:#FFCA00;
    color:#000;
}

.navbar-inverse { background-color: #000000}
.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background-color: #FFCA00}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color: #FFCA00}
.dropdown-menu { background-color: #FFCA00;text-transform: uppercase; border-radius: 0px; border: none;}
.dropdown li a {font-weight:bold;}
.dropdown-menu>li.active>a, .dropdown-menu>li.active>a:hover, .dropdown-menu>li.active>a:focus, .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #FFCA00;}
.navbar-inverse { background-image: none; }
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none; }
.navbar-inverse { border-color: #000000}
.navbar-inverse .navbar-brand { color: #FFFFFF}
.navbar-inverse .navbar-brand:hover { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #000000}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #000000}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #000000}
.dropdown-menu>li.active>a:hover, .dropdown-menu>li.active>a:focus,.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {color: #000000;background-color:#D9AC00;}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #000000}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #000000}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #FFFFFF}


#bodyArea {
    padding-top: 60px;
    padding-bottom: 40px;
}

footer{
    font-size: 12px;
    margin:0;
    line-height:35px;
    color: #fff;
    background:#000;
    padding-top:30px;
}


#subFooter
{margin-top:15px;}

#subFooter span{
    float:left
}

footer a {
    color: #fff;
}

#menuSection .link {
    position: relative;
    padding: 0;
}

#menuSection .link a {
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 100%;
}

#menuSection .link a span {
    position: absolute;
    width: 100%;
    font-size: 30px;
    color: #000;
    background:#FFCA00;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px ;
    font-weight:bold;
}


#mainMenu{
    padding: 0;
    background: ;
    color:#fff;
    position: relative;
    z-index: 1;
}

.navbar-toggle {
    background-color: rgba(255, 255, 255, 0.2);
    background-image: none;
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 4px;
    float: right;
    margin-bottom: 8px;
    margin-right: 15px;
    margin-top: 8px;
    padding: 9px 10px;
    position: relative;
}

.navbar-toggle .icon-bar
{color:#fff;
    background: #fff;
}

.navbar-nav > li > a
{
    color: #fff;
}
.navbar-nav > li.active > a
{
    color: #000;
}

#phone a{
    color: #fff;
    text-decoration: none;

}

#staff h3 {font-size:18px;}


.linetext{
    line-height:1.4em;
    margin:5px 0;
    text-align: center;
    float:left;
    color:#fff;
}

    .linetext{
    padding-right:5px;
    }

.linetext.last{
    padding-right:0;
}

.animatedBlock h3{
    font-size:px;
}

    
    
    .linetext{
    width:100%;
    }

.linetext.last{
    width:100%;
}

/*Some weird bug?!*/
@media (max-width: 768px) {
    
    .dropdown-menu>li>a {color: #FFFFFF !important;}
    a.navbar-btn {padding:7px;text-transform:uppercase;font-weight:bold;color:#000000;width:75%;margin:8px;float:left;}
    
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    
    #menuSection .link {
        background-size: auto 132%;
        background-position: top center;
    }

    #phone {
        color: ;
        font-weight: bold;
        font-size: 30px;
        position: relative;
        top:30px;
    }
    
    #phone a {
        color: ;
    }

    .home header {
        background-size:  auto 125%;
        background-position: top center;
        background-repeat: no-repeat;
    }

    #menuSection .link {
        height: 180px;
    }


    .col-special-20 {
        width: 20%;
    }


    #phone{
        top:20px;
        font-size:30px;
        text-align: right;
    }



    #logo a {
        width: 100%;             /* adjust according your image size */
        top: 10px;
    }


    .navbar-nav > li > a {
        color:#fff;
        text-transform: uppercase;
        padding:15px 7px;
    }
    
    .navbar-nav > li.active > a {
        color:#000;
    }
    
    .navbar-nav > a.navbar-btn, .navbar-nav > li > a.navbar-btn {padding:15px;margin:15px;text-transform:uppercase;font-weight:bold;color:#000000;}


    .home header {
        height:310px;
    }

    #menuSection .link a span
    {
        font-size: 18px;
        padding: 5px 0;
    }
     .staff-box {min-height:650px;}
    
}



/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {

    #menuSection .link {
        background-size: auto 100% ;
    }

    #mainMenu {
        margin: 0;
        background: transparent;
    }


    #menuSection .link {
        height: 200px;
    }

    #phone {
        font-size: 20px;
        text-align: left;
        top: 0;
    }

    .navbar-nav > li > a {
        padding: 10px 10px;
        color: ;
    }

    .navbar-nav {
        margin-top: 0px
    }

    #logo a {
        top: 10px
    }

    .home header {
        height: 420px;
    }

    .navbar-nav > li > a {
        font-size: 12px;
        padding: 25px 12px 10px 12px;
    }
    
    .dropdown-menu>li>a,.dropdown-menu>li.active>a { color: #000000;}
    .navbar-nav > a.navbar-btn, .navbar-nav > li > a.navbar-btn {padding:15px;margin:15px;text-transform:uppercase;font-weight:bold;color:#000000;}

    #phone {
        margin-top: 20px;
        font-size: 20px;
        text-align: center;
    }

    #logo a {
    }

    #menuSection .link a span {
        font-size: 22px;
        padding: 8px 0;
    }
    footer .img-responsive {display:inline-block;}
 .staff-box {min-height:540px;}
 
 
    .linetext{
    padding-right:24px;
    font-size:12px;
    }
    
        .linetext{
    width:auto;
    }

.linetext.last{
    width:auto;
}

    .facebook-logo {width:100%;max-width:25px;height:auto;}

}



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

    #menuSection .link {
        background-size: auto 100% ;
    }

    #menuSection .link a span {
        top: -62px;
    }

    #menuSection .link {
        height: 240px;
        width:24%;
        margin-right:1%;
    }
    .home header {
        height: 800px;
        background-size:  cover;
    }


    #phone {
        font-size: 30px;
    }

    .navbar-nav > li > a {
        padding: 20px 15px;
        font-size: 16px;
    }

    .navbar-nav > li > a {
        padding-top: 29px;
    }
    
    .dropdown-menu>li>a,.dropdown-menu>li.active>a { color: #000;}
    .navbar-nav > a.navbar-btn, .navbar-nav > li > a.navbar-btn {padding:15px;margin:15px;text-transform:uppercase;font-weight:bold;color:#000000;}

    #logo a {
        width: 100%;
    }

    #menuSection .link a span {
        font-size: 30px;
        padding: 10px;
    }
 .staff-box {min-height:540px;}
     .linetext{
    padding-right:29px;
    font-size:15px;
    }
    
    .facebook-logo {width:100%;max-width:30px;height:auto;}
}


}
    
/* Stylesheet: wills // TwitterBootsrap Modified On 2014-10-31 13:57:14 */
.jumbotron
{background:#403A33;}

.paralax{
background-size: cover;
}
.paralax.what-we-do {

    background: url(http://www.willscontracting.co.nz/assets/images/paralax.jpg) no-repeat center top;}


.container.paralaxHolder {
    padding: 0;
}

blockquote {
    border:0;
    font-family: "HelveticaNeue", "Helvetica Neue","Helvetica",  "Arial", sans-serif; 
    font-size: 18px;
    line-height: 120%;
    color: #fff;
    text-align: left;
    padding: 30px 30px;
    margin: auto;
    position: relative;

    display:block;

}

blockquote.default {color:#000;}

.paralaxHolder {
    height: 400px;
    position: relative;
}

/* http://css-tricks.com/removing-the-dotted-outline/ */
#meet-the-team .nav-tabs > li > a {outline: 0; }
.text-area {     
    background-color: rgba(255, 255, 255, .5);
    padding:30px;
    }
    
/*ie 8 fix */
.text-area {
    background:rgb(255,255,255);
	background: transparent\9;
	background:rgba(255,255,255,0.5);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fFFFFFF,endColorstr=#7fFFFFFF);
	zoom: 1;
}
.text-area:nth-child(n) {
	filter: none;
}

.text-area a {color: #D9AE00;}
    
#speech {margin-left:40px;}


/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap - its a 'mobile first' approach */


@media (min-width: 480px) { 

.paralaxHolder {
     height: auto;
}
    
}

@-moz-document url-prefix() {
    @media (max-width: 480px) { 

        .paralaxHolder {
             height: auto;
             padding-bottom:10px;
        }
        
    }
}


/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    
    
    
    
blockquote {

    top: 23%;
    padding: 65px 30px;

}

.paralaxHolder {
     height: 570px;
}
    
    }



/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    
    .paralax.what-we-do {

    background-attachment:fixed;
background-size: cover;
}
    
    
     blockquote {

    padding: 65px 30px;

}

.paralaxHolder {
}
    
    
    
    }




/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
    
    blockquote {
    font-size: 28px;
    padding: 65px 30px;

}

.paralaxHolder {
}
    
    
    }



/* Stylesheet: Paralax Modified On 2014-10-23 12:16:54 */