/* @import "bourbon"; */
/*
Template Main SCSS 

/*  BASE - Base styles imported  */
/* load variable first  */
/* Define cover for mixin for carousel */
/* Font Colors */
/* Background Colors */
/* Greenish */
/* light brown */
/* Light Grey */
/*( Dark Green */
/* Showcase Area */
/* Showcasebg for carousel showcase Area */
/* Then load mixins so they arse available to the mixins in the other files */
/* Mixins (works like a function) */
/* For the carousel bg */
/* For border radius  */
/* Allows one to set border on differant positions using a mixin related to position  */
/* a mixin to pass in the bg colour (if color is light color text dark grey else color white  */
/* NORMALIZING the pages  */
/* All hx's to have no top marging  

h1,h2,h3,h4,h5{
	margin-top:0;
}

*/
/* Page header to have a top padding so it appears from under the NAV */
/*

.page-header{
	margin-top:30px;
}

*/
/* To deal with to bigger space between the sections then add the class no-pad-top to the HTML  */
.nopadtop {
  padding: 0px 0px 0px 0px; }

.no-pad-top {
  padding: 10px 45px 10px 45px; }

.pad-bottom {
  padding-bottom: 15px; }

.pad-top-big {
  padding-top: 125px; }

/*

.no-pad-bottom {
	padding-bottom: 0px;
}



.extra-pad{
	padding-top:40px;
	padding-bottom:40px;
}


*/
/* Top-inner used to push it down see about page */
.top-inner {
  padding: 90px 0 30px 0; }

/* Image Sizes */
.img-xsm {
  width: 100px; }

.img-sm {
  width: 200px; }

.img-md {
  width: 300px; }

.img-lg {
  width: 400px; }

.img-xlg {
  width: 700px; }

.clearfix {
  clear: both; }

/* BASE ALL */
body {
  font-family: "Segoe UI", "Segoe WP", "Segoe Regular", sans-serif;
  font-size: 15px;
  line-height: 1.7em;
  color: #666666; }

/* Changes the links colours on all pages  */
a {
  color: #77A130; }

/* Changes all to have no bullets  */
/*

ul,li{
	list-style:none;
}



/* Using a mixin for input, textarea and border radius to allow for mozilla and webkit etc  */
/*

input, textarea, button{
	@include border-radius(0px);
}

/* Setting the position of the screen (device)  */
/*

img.device{
	width:100%;
}

img.device-small{
	width:70%;
	margin-bottom:-40px;
}

*/
/*  MODULES - Module styles  */
/* Lists */
.fa-primary {
  color: #77A130; }

.list-address {
  margin: 0;
  padding: 0;
  width: 100%; }
  .list-address li {
    line-height: 2.1em;
    border-bottom: 1px solid #cccccc;
    overflow: auto; }

.list, .list-address, .list-feature {
  margin-bottom: 30px; }

.list-feature {
  margin: 0;
  padding: 0;
  width: 80%;
  /* using a pseudo class called last child to change the last item  */ }
  .list-feature li {
    line-height: 2.6em;
    border-bottom: 1px solid #cccccc;
    overflow: auto; }
  .list-feature li:last-child {
    border: 0; }
  .list-feature span {
    vertical-align: top;
    padding-top: 9px;
    font-size: 120%; }
  .list-feature i {
    margin-top: -9px;
    margin-right: 5px; }

/*

.list-comments {
	margin:0;
	padding:0;
}

.list-comments li{
	padding:10px 0 5px 0;
	@include add-border(1px, #cccccc, bottom);
	overflow:auto !important;
}

.list-comments li:last-child{
	border:0;
}

.list-comments img{
	width:100px;
}

*/
/* to chage the icon styling (Use font size as its using fa  */
.fa-2 {
  font-size: 18px; }

.fa-3 {
  font-size: 24px; }

.fa-4 {
  font-size: 27px; }

.fa-5 {
  font-size: 35px; }

.fa-6 {
  font-size: 40px; }

.fa-border {
  border: 2px solid #77A130;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 5px 15px 5px 20px;
  width: 70px;
  margin-bottom: 15px; }

/* Headings */
.heading-primary, .heading-primary-a {
  color: #77A130; }

.heading-primary-a {
  border-bottom: 2px solid #77A130; }

.heading-secondary, .heading-secondary-a {
  color: #837464; }

.heading-secondary-a {
  border-bottom: 2px solid #837464; }

.heading-light, .heading-light-a {
  color: #eeeeee; }

.heading-light-a {
  border-bottom: 2px solid #eeeeee; }

.heading-dark, .heading-dark-a {
  color: #124217; }

.heading-dark-a {
  border-bottom: 2px solid #124217; }

/* Emphasis Text */
.em-primary {
  color: #77A130; }

.em-secondary {
  color: #837464; }

.em-dark {
  color: #124217; }

.em-light {
  color: #eeeeee; }

/* Blocks */
/* used in HBL */
.block-center {
  text-align: center !important; }

.block-primary {
  background: #77A130;
  color: #ffffff; }

/* change the positioning of the blocks  */
.block, .block-primary, .block-secondary {
  padding: 10px;
  margin-bottom: 15px; }
  .block h3, .block-primary h3, .block-secondary h3 {
    margin-top: 0;
    padding-top: 0; }
  .block p, .block-primary p, .block-secondary p {
    font-family: "Segoe UI", "Segoe WP", "Segoe Regular", sans-serif;
    line-height: 2.0em;
    text-align: center; }
  .block iframe, .block-primary iframe, .block-secondary iframe {
    width: 100%; }

.block-icon h3 {
  padding: 10;
  margin: 0; }
.block-icon .icon {
  float: left;
  width: 20%;
  margin-top: 10px; }
.block-icon .icon-content {
  float: left;
  width: 70%; }

.block-secondary {
  background: #837464;
  color: #ffffff; }

.block-image img {
  width: 100%; }

/* Alternate the block colours in the third section block block-primary and secondary 
Use the extend feature to inherit from another class (.block)  */
/*
	
	.block-iconx{
	h3{
		padding:10;
		margin:0;
	}
}



.block-light{
	@extend .block;
	background-color: white;
	margin-bottom:15px;
	padding: 25px 25px 25px 25px;
	font-size: 25px;
    justify-content: center;
}

.block-image-white img{
	@extend .block;
	background: white;
	margin-bottom:15px;
	padding: 25px 25px 25px 25px;
    justify-content: center;
	width:100%;
}


.block-dark{
	@extend .block;
	@include add-background($dark-color);
}
	


.block-image img{
	width:100%;
}

.block-border{
	@include add-border(2px, #cccccc, all);
}

.block-primary-head{
	h3{
		padding:15px 5px 15px 10px;
		@include add-background($primary-color);
		margin:0;
		font-size:15px
	}
	
	.block-content{
		@include add-border(1px, $primary-color, all);
		padding:10px;
	}
}

.block-light-head{
	h3{
		padding:15px 5px 15px 10px;
		@include add-background($light-color);
		margin:0;
		font-size:18px
	}
	
	.block-content{
		@include add-border(1px, $secondary-color, all);
		padding:10px;
	}
}

*/
/* Buttons */
/* Look at the feature in SASS: % lighten or darken!!  */
.btn-primary {
  background: #77A130;
  color: #ffffff;
  border: 1px solid #ffffff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  padding: 10px;
  margin: 10px; }

.btn-primary:visited {
  background: #77A130;
  color: #ffffff;
  border: 1px solid #ffffff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  padding: 10px;
  margin: 10px; }

.btn-primary:hover {
  background: #4b661e;
  border: 1px solid #ffffff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  padding: 10px;
  margin: 10px; }

.btn-primary:active {
  background: #4b661e;
  border: 1px solid #ffffff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  padding: 10px;
  margin: 10px; }

.btn-primary:focus {
  background: #4b661e;
  border: 1px solid #ffffff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  padding: 10px;
  margin: 10px; }

.btn-secondary {
  background: #837464;
  color: #ffffff;
  border: 1px solid #ffffff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  padding: 10px;
  margin: 10px; }

.btn-secondary:hover {
  background: #584e43;
  border: 1px solid #ffffff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  padding: 10px;
  margin: 10px; }

.btn-secondary-nolink {
  background: #837464;
  color: #ffffff;
  border: 1px solid #ffffff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  padding: 10px;
  margin: 10px; }

/*

.btn-inblock-primary{
	@include add-background($secondary-color);
	@include add-border(2px, #ffffff, all);
	text-decoration: none;	
	
	a{
		color: #000000;
		background-color: #ffffff;
	}
}

.btn-inblock-primary:hover{
	background:darken($primary-color,10%);
	@include add-border(2px, #ffffff, all);
	text-decoration: none;
}

.btn-inblock-secondary{
	@include add-background($secondary-color);
	@include add-border(2px, #ffffff, all);
	
	h3{
		color: #000000;
		background-color: #ffffff;
	}
}

.btn-inblock-secondary:hover{
	background:darken($secondary-color,10%);
	@include add-border(2px, #ffffff, all);
}

*/
/* Row changes */
.section-row {
  margin-left: 20px;
  margin-right: 20px; }

/* Carousel for bg */
html {
  position: relative;
  min-height: 100%; }

.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity; }

.carousel-fade .carousel-inner .active {
  opacity: 1; }

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1; }

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1; }

.carousel-fade .carousel-control {
  z-index: 2; }

.item:nth-child(1) {
  background: url(../img/showcase.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

.item:nth-child(2) {
  background: url(../img/showcase1.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

.item:nth-child(3) {
  background: url(../img/showcase2.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

.item:nth-child(4) {
  background: url(../img/showcase3.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

.carousel {
  z-index: -99; }

.carousel .item {
  position: fixed;
  width: 100%;
  height: 100%; }

.title {
  text-align: center;
  margin-top: 20px;
  padding: 10px;
  text-shadow: 2px 2px #000;
  color: #FFF; }

/* Normal carosel */
.carousel .section-showcase {
  margin-bottom: 20px; }

.carousel .section-showcase img {
  padding: 3px;
  border: 6px solid #cccccc; }

/* Tabs */
.tab-pane {
  padding: 20px 10px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin-bottom: 20px; }

.tab-primary .tab-pane, .tab-primary .nav-tabs > li.active > a, .tab-primary .nav-tabs > li.active > a:hover, .tab-primary .nav-tabs > li.active > a:focus {
  background: #77A130;
  color: #ffffff; }

.tab-secondary .tab-pane, .tab-secondary .nav-tabs > li.active > a, .tab-secondary .nav-tabs > li.active > a:hover, .tab-primary .nav-tabs > li.active > a:focus {
  background: #837464;
  color: #ffffff; }

.tab-dark .tab-pane, .tab-dark.nav-tabs > li.active > a, .tab-dark .nav-tabs > li.active > a:hover, .tab-primary .nav-tabs > li.active > a:focus {
  background: #124217;
  color: #ffffff; }

.tab-light .tab-pane, .tab-light .nav-tabs > li.active > a, .tab-light .nav-tabs > li.active > a:hover, .tab-primary .nav-tabs > li.active > a:focus {
  background: #eeeeee;
  color: #666666; }

/* Sections */
/* All sections to have default padding, then overide if needed  */
section {
  padding-top: 45px; }

.section-showcase {
  height: 400px;
  background: url(../img/showcase.jpg) no-repeat top center; }
  .section-showcase .showcase-content {
    padding: 110px 15px;
    text-align: center; }
  .section-showcase h1 {
    color: #77A130; }

/* Add colours to the sections using the mixin to auto color the text color  */
.section-primary, .section-primary-a, .section-primary-b {
  background: #77A130;
  color: #ffffff; }

.section-primary-a {
  border-top: 4px solid #837464; }

.section-primary-b {
  border-bottom: 4px solid #837464; }

.section-secondary {
  background: #837464;
  color: #ffffff; }

.section-light {
  background: #eeeeee;
  color: #666666; }

.section-dark {
  background: #124217;
  color: #ffffff; }

.section-white {
  background: white; }

/* For tables */
.table-in-block {
  align-self: center;
  background: white; }

/*  LAYOUT - Layout styles */
/* Footer */
.footer-main {
  background: #837464;
  color: #ffffff;
  border-top: 5px solid #77A130;
  min-height: 70px;
  padding: 0px 0;
  /* setting this z-index makes it take priority  */
  z-index: 100; }
  .footer-main a {
    color: #ffffff; }
  .footer-main ul {
    margin: 0;
    padding: 0; }
  .footer-main li {
    line-height: 1.8em;
    list-style: none; }

.image-foot {
  padding-top: -20px; }

/* Navbar */
.navbar {
  width: 50%;
  margin: auto;
  /* below is the mxin included on position right-left  */
  border-left: 1px solid #e7e7e7;
  border-right: 1px solid #e7e7e7;
  border-color: #e7e7e7;
  min-height: 60px;
  background: #fff;
  margin-bottom: 30px;
  margin-top: 30px; }
  .navbar a {
    color: #77A130 !important;
    font-size: 20px;
    letter-spacing: -0.5px;
    padding-bottom: 24px !important;
    padding-top: 20px !important; }

.navbar-brand {
  width: 300px;
  position: relative;
  top: -6px;
  padding-right: 10px; }

/* To make the hover and focus on NAV select all classes use F12 on G Chrome  */
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
  background: #77A130 !important;
  color: #fff !important; }

.nav-tabs {
  padding-bottom: 20px; }

/* For the carousel */
@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-fade .carousel-inner > .item.next,
  .carousel-fade .carousel-inner > .item.active.right {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }

  .carousel-fade .carousel-inner > .item.prev,
  .carousel-fade .carousel-inner > .item.active.left {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }

  .carousel-fade .carousel-inner > .item.next.left,
  .carousel-fade .carousel-inner > .item.prev.right,
  .carousel-fade .carousel-inner > .item.active {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }
@media (max-width: 768px) {
  .search {
    display: inline-block;
    text-align: center; }

  .device {
    display: block;
    margin: 20px auto 0 auto; }

  .device-small {
    margin-bottom: 20px !important; }

  .footer-main ul {
    margin-bottom: 20px;
    text-align: center; }
  .footer-main h4 {
    text-align: center; } }