@charset "utf-8";

/* Custom CSS Document - used to add own custom styles to Bootstrap system */

/* Main page container */
.container {
	margin: 0 auto 0 auto; /* Setting the page margins to 0 */
}

/* Heading styles */
h1, h2, h3, h4, h5, h6 {
    color: #666666; /* heading color */
}

/* More heading styles */
h1, h2 {
    margin-bottom: 20px; /* Extra margin bottom for h1 & h2 */
}

/* Nav-bar styling - start */
#navRow {
    margin-bottom: 70px; /* Added a bottom margin to the nav row */
}

.navbar-inverse {
    background-color: #4d4d4d;
    border-color: #666;
    margin-left: auto;
    margin-right: auto;
    width: 1170px; /* Set width of nav-bar on desktop view */
}

.navbar-nav {
  float: left; /* Makes socila icons display at top-right on mobile view */
  margin-right: 30px;
}

/* Float the nav-bar to the right */
.collapse.navbar-collapse.navbar-ex1-collapse {
    float: right;
}

/* Nav-bar hover/focus/active colours */
.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
  background-color: #666;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: #666;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background-color: #666;
}

/* Styling for contact number displayed on the nav-bar */
.mobileHeaderContactNo {
    font-weight: bold;
    color: #fff;
}

/* Styling for active page link - targeting item by id and using php to find active page */
a#active {
    color: #FFF !important;
}

/* Styling for active drop-down page link */
a#activeDrop {
    background-color: #4d4d4d;
    color: #FFF !important;
}

/* Social media images display inliine with nav links - floated left */
#nav-bar-images {
	float: left;
	margin-top: 12px;
}

/* Nav-bar styling - end */

/* Styling for footer - start */
footer {
	text-align: center; /* Align text center */
	border-top: solid 1px #ccc; /* Set a border */
	margin-bottom: 10px; 
	height: auto;
	padding-top: 10px;
}

/* Location map styling */ 
#mapStyle {
    border: none;
    width: 100%;
    height: 450px ;
}
/* Styling for footer - end */

/* Custom row styles to override Bootstrap default - start */

/* Padding, margin and border set */
#row3 {
    border-top: 1px solid #ccc;
	padding-bottom: 25px;
	margin-bottom: 10px;
}

/* Padding and margin set */
#row4 {
	padding-bottom: 25px;
	margin-bottom: 10px;
}

/* Padding and margin set */
#row5 {
	padding-bottom: 25px;
	margin-bottom: 10px;
}

/* Padding and margin set */
#row6 {
	padding-bottom: 25px;
	margin-bottom: 10px;
}
/* Custom row styles to override Bootstrap default - end */

/* Override standard Bootstrap button colours (in all states) - start */
.promoBtn1 {
	background-color: #666666;
    border-color: #292929;
}

.promoBtn1:hover {
	background-color: #4d4d4d;
    border-color: #292929;
}

.promoBtn1:focus {
	background-color: #4d4d4d;
    border-color: #292929;
}

.promoBtn1:active {
	background-color: #4d4d4d;
    border-color: #292929;
}

.promoBtn2 {
	background-color: #a66559;
    border-color: #292929;
}

.promoBtn2:hover {
	background-color: #75473f;
    border-color: #292929;
}

.promoBtn2:focus {
	background-color: #75473f;
    border-color: #292929;
}

.promoBtn2:active {
	background-color: #75473f;
    border-color: #292929;
}

.promoBtn3 {
	background-color: #8e9ea4;
    border-color: #292929;
}

.promoBtn3:hover {
	background-color: #66787f;
    border-color: #003311;
}

.promoBtn3:focus {
	background-color: #66787f;
    border-color: #003311;
}

.promoBtn3:active {
	background-color: #66787f;
    border-color: #003311;
}

.promoBtn4 {
	background-color: #e67e22;
    border-color: #292929;
}

.promoBtn4:hover {
	background-color: #a15412;
    border-color: #003311;
}

.promoBtn4:focus {
	background-color: #a15412;
    border-color: #003311;
}

.promoBtn4:active {
	background-color: #a15412;
    border-color: #003311;
}

/* Override Bootstrap button settings */ 
.btn-lg {
	width: 100%;
	border-radius: 2px;
	font-size: 1.3em !important;
}
/* Override standard Bootstrap button colours - end */

/* Font awesome styling */
.fa {
    margin-right: 10px;
    color: #f3f3f3; /* Apply colour to font awesome icons - left as default, hyperlink styling applies */
}

/* Styling for various checklists - start */
#whyUsChecklist {
    font-size: 2.8em;
}

#whyUsChecklist li:after
{
    content: '✔'; /* Applying a "✔" to all li's in the checklist   */
    size: 50px;
    margin-left: .5em;
    margin-right: .100em;
}

#whyUsChecklist ul
{
   padding-left: 5px;
   list-style: none;
   list-style-position: outside;
}

#ourGuaranteeChecklist {
    font-size: 1.5em;
}

#ourGuaranteeChecklist p {
    font-size: 1em;
}

#ourGuaranteeChecklist li:after
{
    content: '✔';  /* Applying a "✔" to all li's in the checklist   */
    size: 50px;
    margin-left: .5em;
    margin-right: .100em;
}

#ourGuaranteeChecklist ul
{
   padding-left: 20px;
   text-indent: 2px;
   list-style: none;
   list-style-position: outside;
}
/* Styling for various checklists - end */

/* Center text on form submit success page */
#formSubmit {
	text-align: center;
}

/* Carousel styling for image carousel on home page - start  */
#myCarousel .nav a small {
    display:block;
}

#myCarousel .nav {
	background:#eee;
}

#myCarousel .nav a {
    border-radius:0px; /* Override default Bootstrap settings for border-radius */
}

/* Different background colour for each nav-tab on carousel */ 
.nav-pills>li[data-slide-to="0"].active a { background-color: #666666; }
.nav-pills>li[data-slide-to="1"].active a { background-color: #a66559; }
.nav-pills>li[data-slide-to="2"].active a { background-color: #8e9ea4; }
.nav-pills>li[data-slide-to="3"].active a { background-color: #e67e22; }

/* Set height for carousel images  */
.carousel-inner > .smallerItem {
    height: 320px;
}

/* Carousel styling for image carousel on home page - end  */

/* Hover image effect on "Projects" page - using style from jQuery rain - start */

/* Images display in a ul/li, styled here */
#projectImages ul{margin: 0 -1.5%;}
#projectImages li{float: left; width: 31.33%; margin: 10px 1%; list-style: none;}

.img-effect-ul {
    padding-left: 5px;
}

/* Project images styling */
.img-effect-btn{display: inline-block; padding: 5px 10px; font-size: 14px; color: #fff; border: 2px solid #4d92d9; background-color: #4d92d9; text-decoration: none; transition: 0.4s;}
.img-effect-btn-zinc{display: inline-block; padding: 5px 10px; font-size: 14px; color: #fff; border: 2px solid #333333; background-color: #8e9ea4; text-decoration: none; transition: 0.4s;}
.img-effect-btn-copper{display: inline-block; padding: 5px 10px; font-size: 14px; color: #fff; border: 2px solid #333333; background-color: #e67e22; text-decoration: none; transition: 0.4s;}
.img-effect-btn:hover{background-color: transparent; color: #4d92d9; transition: 0.4s;}
.img-effect-btn-zinc:hover{background-color: transparent; color: #66787f; transition: 0.4s;}
.img-effect-btn-copper:hover{background-color: transparent; color: #a15412; transition: 0.4s;}
.text-desc{position: absolute; left: 0; top: 0; background-color: #fff; height: 100%; opacity: 0; width: 100%; padding: 20px;}

/* Project text overlay styling */
.port-1{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9);} /* Using RGBA colors instead of hex */
.port-1 .text-desc{opacity: 0.9; top: -100%; transition: 0.5s; color: #000; padding: 45px 20px 20px;}
.port-1 img{transition: 0.5s; width: 100%; height: 240px;}
.port-1:hover img{transform: scale(1.2);}

.port-1.effect-2 .text-desc{top: auto; bottom: -100%;}
.port-1.effect-2:hover .text-desc{bottom: 0;}
/* Hover image effect on "Projects" page - using style from jQuery rain - end */

/* animatedModal styling - style are applied from another css sheet, we are overriding some here - start */

/* Make images in modal 100% width */
.carousel-inner img {
    width: 100%;
}

/* Set max-height of image that displays in "animatedModal" on "Projects" page  */
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
    max-height: 700px;
}

/* animateModal close button styling */
.closeBtnMargin {
    margin: 25px 0px;
}
/* animatedModal styling - end */

/* Project details table - displays details in modal window upon btn click for project details - start */
table {
  background: #f5f5f5;
  box-shadow: inset 0 1px 0 #fff;
  font-size: 12px;
  line-height: 24px;
  margin: 30px auto;
  text-align: left;
  max-width: 90%;
}

td {
  border: 1px solid #e8e8e8;
  padding: 10px 15px;
  position: relative;
}
/* Project details table - displays in modal window upon btn click for project details - end */


/* Customer comments carousel - start */
#carouselCustComm {
    background-color: #666666;
    border-radius: 25px;
    height: 248px;
}

#carouselCustComm h4 {
    color: #ccc;
}

.slide-custom {
    min-height:200px;
    padding:20px;
    line-height:30px;
}

.sliderText {
    color:#fff;
    font-style: italic;
    font-size: 20px;
    padding: 5px;
}
/* Customer comments carousel - end */

/* Other misc styling */

/* Extra top padding, used on various elements */
.padTop {
    padding-top: 25px;
}

/* Extra top margin, used on various elements */
.marTop {
    margin-top: 25px;
}

/* Extra botom padding, used on various elements */
.padBottom {
    padding-bottom: 25px;
}

/* "Customer Tips" comment form styling - start */
.commentForm {
    width: 50%;
}

.commentSubmit {
    float: right;
    margin-right: 20px;
    margin-top: 25px;
}
/* "Customer Tips" comment form styling - end */

/* Set text colours - start */
.whiteText {
    color: #fff; /* White text */
}

.greyText {
    color: #666; /* Grey text */
}

.greenText {
    color: green; /* Green text */
}

.red {
    color: red; /* Red text */
}
/* Set text colours - end */

.underline {
    text-decoration: underline; /* Underline text */
}

.largerText {
    font-size: 1.5em; /* Larger text */
}

.centerText {
    text-align: center; /* Center selected text */
}

.noBorderbtm {
    border-bottom: none; /* Remove bottom border */
}

/* Override Bootstrap modal styles - start */
.modal-content {
  margin-left: auto;
  margin-right: auto;
  max-width: 96%;
}

.modal-footer {
	border-top: none;
}
/* Override Bootstrap modal styles - end */

/* Custom image styling - start */
.img-rgt-margin {
	margin-right: 20px; /* Add right margin to selected images */
}

.img-btm-margin {
	margin-bottom: 20px; /* Add bottom margin to selected images */
}

.imgWidth {
    width: 100%; /* Set width for selected images */
}

.sidebar-image img {
    max-width: 100%; /* Set max-width for selected images */
}

/* Team pics styling */    
.teamPics {
    max-height: 460px;
    width: 100%;
}

/* Set size of thumb images */
.productThumb {
    margin-right: 10px; /* Add a margin between the thumbnail & text */
    height: 100px;
	width: 125px;
}
/* Custom image styling - end */

/* Mobile view settings - start */

/* Styling for screen width of 1169px - our max container width is set to 1170px */
@media only screen and (max-width: 1169px){
	
    #navRow {
        margin-bottom: 70px; /* Adds a margin to the bottom of the nav to make the below content display lower down */
    }	
	
	.commentForm {
        width: 100%;
        }
        
    .navbar-inverse {
        width: 100%;
    }
    
    .navbar-nav {
      margin-right: 0px; /* Remove right margin on tablet view */
    }
    
    .navbar-brand {
      font-size: 0.9em;
    }
    
    .container {
            max-width: 100%;
    }
		
    .slide-custom h4 {
        font-size: 1.1em;
    }
}

/* Hover image effect on "Projects" page - width 1090px - using style from jQuery rain - start */
@media only screen and (max-width: 1169px){
    
	#projectImages ul {
	    width: 340px; 
	    margin: 0 auto;
    }
    
	#projectImages li {
	    width: 100%; 
	    margin: 20px 0;
	}
	
	.port-5.effect-1 {
	    z-index: 19;
	}
}
/* Hover image effect on "Projects" page - using style from jQuery rain - end */

/* Styling for screen width of 969px */
@media only screen and (max-width: 969px){
    
    #navRow {
        margin-bottom: 120px; /* Adds a margin to the bottom of the nav to make the below content display lower down */
    }
    
    .btn-lg {
        font-size: 1.1em !important;
    }
}

/* Styling for screen width of 767px */
@media only screen and (max-width: 767px){
	#nav-bar-images {
        float: right;
    }
    
    #navRow {
        margin-bottom: 70px; /* Adds a margin to the bottom of the nav to make the below content display lower down */
    }
    
    .carousel-inner > .smallerItem {
        height: 188px; /* Makes the image container on the home page slider smaller - keeps text positioned correctly over image */
    }
}

/* Styling for screen width of 360px */
@media only screen and (max-width: 360px) {
		
	/* Nav menu background-color on mobile view */
	.navbar-collapse {
		background-color: #222;
	}
	
	/* Apply left padding to nav links on mobile view */
	.navbar-collapse {
		padding-left: 15px;
	}
	
	/* Why Us checklist smaller font-size */
	#whyUsChecklist {
        font-size: 1.3em;
    }
    
    /* Our Guarantee checklist smaller font-size */
    #ourGuaranteeChecklist {
        font-size: 1.3em;
    }
    
    /* Customer comments text styling */
    .slide-custom h4 {
        font-size: 1em;
    }
    
    /* Hide certian things on mobile view */
    .myHide {
        display: none;
    }
    
    /* Padding & margin styling for rows 3 to 6 on mobile view*/
    #row3, #row4, #row5, #row6 {
    	padding-bottom: 0px;
    	margin-bottom: 0px;
    }
    
    .centerTextMobile {
        text-align: center; /* Center selected text on mobile view*/
    }
    
    /* Location map styling for mobile view */ 
    .map {
        max-height: 500px;
    }

	.commentForm {
        width: 100%; /* Comment form width on mobile view */
    }
        
    .navbar-inverse {
        width: 100%; /* Width of the drop-down nav on mobile view */
    }   
    
    #projectImages ul {
	    width: 300px; /* jQuery rain images styling for mobile view */
	}
}
/* Mobile view settings - end */