@charset "utf-8";
/* CSS Document */
/*
Version: 3.1
Author: Lance Davey
Author URI: http://www.webnerd.co.za

/* === General === */

@import url('https://fonts.googleapis.com/css?family=Black+Han+Sans|Roboto+Slab');

 body {
	width: 100%;
	height: 100%;
	font-family: "Roboto+Slab", "Open Sans", Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:400;
	 text-rendering: optimizelegibility !important;
	color: #444444;
	background: #fff;
   margin:0 0 0 0;
	padding:0;    
	}

 h1 {
	color: #585453;
	font-weight:normal; 
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 2.2em;
	text-align: center;
   }
   

 h2 {
 		text-transform: capitalize;
	color: #585453;
	font-size: 1.6em;
	 }

 h1 span, h2 span {
	color: #98301a;
	}


 h3 {
	color: #585453;
   font-size: 1.4em;
	}
 
 .brand-primary {
	color: #585453;
	text-transform: capitalize;
	font-weight:normal; 
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 2.2em;
	}

 .brand-primary span {
  	text-transform: capitalize;
  	color: #98301a;
	} 
      
 a {
	color:#000;
	text-decoration: none!important;
	}
 
 a:hover {
	color: #777777;
	text-decoration: none;
	}    
    
 .headline {
   width: 100%;
   height: 40px;	
	font-size: 20px;
	margin: 20px 0px 10px 0px;
   background: #c0c0c0;	
	padding:10px 0 10px 16px;
	box-sizing: border-box;
	}

 .content {
	display: inline-block;
	width: 100%;
	height: auto;
	background: #fff;
	border-bottom: solid 5px #6b8d00;
	padding: 0;
	margin: 0 0 0 0;
	}

 #login-bar {
	width: 100%;
	height: 36px;
	background-color: #6b8d00;
	}

 .login-bar {
	float: right;
	width: 99%;
	height: 36px;
	font-size: 14px;
	text-align: right;
	}

 .login-bar a {
 	color: #fff;
 	margin-top: 0;

	}

 .login-bar ul {

	}

 .login-bar li {
 	width: 150px;
 	line-height: 36px;
 	
	display:inline-block;
	}

.login-block {
width: 100%;
min-width: 320px;
padding: 10px;
height: auto;
}

.login-block a {
color: #444;

}
 .backdrop-main {
	position: relative;
   width: 100%;
   height: 100%;
   padding: 20px 0px;
   background: #fff;
     }

 .bacdropg {
	position: relative;
   width: 100%;
   height: 110px;
   background: #303030;
   border-bottom:5px #6b8d00 solid; 
   }
   


/* === windows === */

 #topwindow {
	position: relative;
	display: block;
	width: 100%;
	height: 45px; 
	}

 .window {
	position: relative;
	display: block;
	width: 100%;
	height: 440px;
	}

 #block-builder-wrapper, .block-builder, .footer-link {
	margin-bottom: 30px;
	}

/* === Navigation === */

 #nav-block {
 	width: 100%;
 	height: auto;
	display: inline-block;
	background-color: #fff;
	margin-bottom: 20px;
	}

 #logo{
width: 100%;
height: auto;
	margin: 10px 0 20px 0;
	}

 #logo img {
	display: block;	
	width: 100%;
	height: auto;
	}

.menu-button {
	text-align: right;
}

 #DaMenu {
	display: none;
	}

 #navbar {
	float: right;
	display: inline-block;
	width: 69%;
	padding: 0px;
	margin: 30px 0 0 0;
	}

 #navbar ul{
  	float: right;
	text-align: center;
	text-transform: uppercase;
	padding:0 0 0 0;
	margin: 0;
   z-index: 200;
	}

 #navbar ul a li {
	display:inline-block;
   width: 140px;
   height: auto;
   margin: 0px;
   background: none;
  	font-size:15px;
 	color: #878785;
 	text-decoration:none;
	padding: 20px 0px;
	}

 #navbar ul a:nth-child(4) {
	color: #444444; 
   border: solid 1px #98301a;
	}
    
 #navbar ul a li:hover {
	color:#444444;
	}

 #navbar ul a li.active {
 	color:#98301a;
	}

 .navbar-content {
	display: block;
 	position: absolute;
 	top: 40%;
 	left: 10%;
 	width: 50%;
 	height: auto;
}

 .navbar-header {
	width: 100%;
	height: 50px;
	font-family: "Black Han Sans","Open Sans";
	text-align: center; 
}

 .navbar-header-center {
	width: 100%;
	height: 300px;
	}

 .navbar-header h1 {
	color: #6b8d00;

	}

 .navbar-header p {
 	font-family: "Open Sans";
	color: #98301a;
 }

 .navbar-arrow {
	position: absolute;
	bottom: 10px;
	left: 50%;
	}

 .search {
	float: right;
	margin-top: 10px;
	}

/* === Live Chat === */

 #live-chat {
	position: fixed;
	bottom: 0;
	right: 10px;
	width: 20%;
	min-width: 300px;
	}

 #chatboxOne {
	background-color: #6b8d00;
	color: #fff;
	}

/* === Social Media Navigation === */

 .social-float { 
	display: block;
	position: fixed;
	bottom: 150px;
	right: 0px;
	width: 70px;
	height: 100px;
	}

 .social-icon-bar { 
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	}

/* === Shopping Cart === */


.basket i {

color: #fff;
}

/* === Product special === */
	
 .product-special {
	background-color: #fff;
	}	

 .product-special h2 {
	text-transform: uppercase;
	}	

 .product-special-oldprice {
	font-size: 1.4em;
	text-decoration: line-through;
	}

 .product-special-newprice {
	color: #555;
	font-size: 1.8em;
	}

 .product-special-footer {
	padding: 10px 0;
	margin-bottom: 20px;
	}
	
/* === Slide Show Settings === */



 .slide-display {
	position: relative;
 	width: 60%; 
 	height: 250px;
 	margin: 30px 10px;
 	padding: 5px;
 	text-align: left;
 	color: #0063ab;
	}

 .slide-header {
	font-family: "Black Han Sans";
	font-size: 1.5em;
	text-shadow:1px 1px 2px rgba(0,0,0,.6);
 	width: 100%;
 	height: 50px;
 	margin: 0;
 	text-transform: uppercase;
 	padding: 0 0 0 0;
 	color: #6b8d00;             
	}

 .slide-text {
	text-shadow:1px 1px 2px rgba(0,0,0,.6);
 	width: 100%; 
 	height: 300px;
 	margin: 0;
 	padding: 0 0 0 0;
 	color: #98301a;             
	} 

 .sldide-text p {
 	height: 300px;
	}

 .slide-text-price {
	position: absolute;
	color: #fff;
	bottom: 10px;
	right: 30px;
	font-size: 1.5em;
	text-shadow:2px 2px 3px rgba(0,0,0,.6);
	}

.text-center a {
color: #fff;
}	

/* === Social Media Icons === */

 .social-icon-flex {   
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
  	width: 100%;
	height: 150px
   } 
   
 .social-icon {
	width: 80px;
	height: 80px;
	text-align: center;
	padding: 5px;
	font-size: 40px;
	border: solid 6px #484b51;
		-webkit-border-radius: 40px;
		-moz-border-radius: 40px;
	border-radius: 40px;
	background-color: #8dabb8;
	}

 .social-icon i {
	color: #484b51;
	}

 .social-icon-img {
	width: 80%;
	height: 80%;
	margin: auto;
	}
	
 .social-icon-img img {
	width: 100%;
	height: auto;
	}
	
/* === Widget block  === */

 .widget-block {
	text-align: right;
	margin-top: 20px;
	}

.panel {
	background-color: transparent;
	border: none!important;
}

.panel-default .panel-heading {
	background-color: transparent;	
	color: #777;
	
}

 .panel .panel-primary, .panel-primary .panel-heading {
 	background-color: transparent;
 	color: #333;
 	border-radius: 0;
	border: solid #333 1px;
}
.panel-primary > .panel-heading + .panel-collapse > .panel-body {
border-top: none;
}

 .panel-side-menu .list-group-item {
	background-color: transparent;	
	color: #777;
	border-top: none;
	border-right: none;
	border-bottom-color: #ebebeb;
	border-left: none;	
} 

 .panel-side-menu .list-group-item a {
	color: #777;
}
 .panel-side-menu .list-group-item a:hover, .panel-heading a:hover {
	color: #333;
}

 .panel-side-menu .list-group-item.active, .panel-side-menu .list-group-item.active:hover {
	background-color: transparent;
	border-radius: 0;
	border: solid #333 1px;
}

 .panel-list-items {
	text-align: center;
}
	
 .panel-list-items .thumbnail {
	border-top: none; 
	border-right: none; 
	border-bottom: solid 5px #6b8d00;
	border-left: none; 
 
 }	


 .panel-body.home, .product-scroller .panel-body {
 	padding-right: 0;
	padding-left: 0; 	
}

.panel-side-menu {


}

  


/* === The Split  === */

 .the-split-text-block {
	text-align: center;
	}	
	
 .the-split-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;	
	
	}
	
/* === Popup Topbar  === */

 #mininav {
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	width: 100%;
	height: 65px;
	margin-top: 0px;
	height: 0px;
	background:#fff;
		-moz-box-shadow: 0px 2px 8px #343434;
		-webkit-box-shadow: 0px 2px 8px #343434;
	box-shadow: 0px 2px 8px #343434;
	z-index:999; 
	}

 .topbar {
	width: 1200px;
	height: 65px;
	text-align: center;
	margin: 0 auto;
   z-index: 999;
	}

.topbar img {
float: left;

}

.topbar ul{
	float: right;
	padding:0 0 0 0;
	margin: 0;
   background: none;
		
		}

.topbar li {
  display:inline-block;
  width: 110px;
  line-height: 65px;
  padding:0;
  margin: 0px;
	
}

.topbar a li {
	font-size:14px;
 	color: #343434;
 	text-decoration:none;
	
}

 .topbar ul > a li:hover, .topbar ul >a li.active {
	color:#fff;
	background: #6b8d00;

}
 

/* === telecall === */

#telecall {
	width: 100%;
	height: auto;
	padding: 15px 0;
	background-color: #6b8d00;
	margin-bottom: 30px;
}

#telecall h1 {
  color: #fff;
  font-size: 2em;
  margin: 0;
  }

.bigtxt {
  width: 100%;
  font-size:24px;
  font-weight: bold;

  }

.tel {
  width: 100%;
   text-align: right;
  }

.tel a {
   text-decoration:none; 
   font-size:25px;
	font-weight:bold;
	color:#585858;

 }

.tel span {
  color: #98301a;
  font-size: 12px;
  font-style: italic;
  }
 
 #clckdial {
 display:none;

 }
 
	/* === Bannerblock  === */

.banner-block-content {
	position: absolute;
	bottom: 10px;
	left: 0px;
	text-align: center;
}

.editContent h1, .editContent h2 {
	color: #fff;

}

.btn-block {
	
	display:inline-block;
	cursor:pointer;
	color:#242424;
	font-family:"Open Sans",Arial;
	font-size:17px;

	background-color:rgba(255, 255, 255, 0.3);
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:2px solid #dcdcdc;
	padding:12px 35px;
	text-decoration:none;
}

.btn-block:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
	background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);
	background-color:#f6f6f6;
}

.btn-block:active {
	position:relative;
	top:1px;
}

 
	/* === Call to action btn === */ 

 .wn-booking-btn {
 
 width: 90%;
 height: 60px;

background-color: #fff;
    -moz-box-shadow: 0px 4px 2px #343434;
    -webkit-box-shadow: 0px 4px 2px #343434;
    box-shadow: 0px 4px 2px #343434;
    padding: 10px;
margin: 0 auto 20px auto;

 
 }
 
  .wn-booking-btn:hover {
 

    -moz-box-shadow: 0px 3px 1px #343434;
    -webkit-box-shadow: 0px 3px 1px #343434;
    box-shadow: 0px 3px 1px #343434;


 
 }
 
  .wn-booking-btn span {
  
  color: #98301a;
  
  
  }
  .wn-booking-btn h2 {
  	font-size: 1.5em;
  	margin-top: 0;
  }

.wn-booking-btn a {
text-decoration:none;  	
  }
 
/* === font-awesome === */

.fa {
  color: #6b8d00;


}

 
/* === bootstrap btn === */

.btn-primary {

color: #f9f9f9;
background-color: #878785;
border-color: #000;
}

.btn-primary:hover {

background-color: #3f5268;
border-color: #333;
}

.btn-info, .label-info {
background-color: #6b8d00;
border-color: #444; 

}

.btn-info:hover {
background-color: #6886a2;
border-color: #444444; 

}

.header-custom {
width: 100%;
height: auto;
min-height: 150px;
margin-top: 0px;

}

.head-custom img {
width: 100%;
height: auto;
display: block;
}

.header-block {
	height: 88px;
	padding: 10px;
	background: #fff;
	border-bottom: 1px solid #ebebeb;

}
.header-block img {
margin-top: 0px;

}


.container .jumbotron {
-moz-border-radius: 0;	
-webkit-border-radius: 0;
border-radius: 0;
background: #878785;
color: #fff;

}

/* === wn product scroller === */

 .wn-scroller-heading {
	width: 100%;
	height: 50px;
	background-color: #6b8d00;
	}

 .wn-scroller-heading h3 {
	color:#fff; 
	line-height: 50px;
	}	

 .product-scroller {
	text-align: center;
	}

 .product-image {
	width: 100%;
	height: 170px;
	overflow:hidden;
	}

/* === login bar pills === */

 .nav-custom {
	background: url(../images/custom/nav-custom.png)!important;
	}

 .nav-custom .active a, .nav-custom .active a:hover {
	background: #fff !important; 
	}

 .nav-custom a:hover {
	background: url(../images/custom/nav-custom.png)!important; 
	color: #004fb4;
	}

.nav-custom a:active {
	background: none!important; 
	color: #004fb4;
	}



 /* === Footer === */

#footer {
	width: 100%;
	height: auto;
	text-align: center;
	margin: 0 0 0 0;
	color: #fff;
	background: #303030;
}
  
#footer a {
	height: 110px;
	color: #fff;
	text-decoration: none;
}

#footer a:hover {
	text-shadow:1px 1px 2px rgba(0,0,0,.6);
}

.footer-menu {
	padding: 15px 0;
}

.footer-link {
padding: 15px 0;
}

#footnotes {
	padding: 15px 0;
font-size: .8em;
}

.webnerd-edge {
color: #444;	
}
.about {

margin-top: 20px;

}

.about img {
width: 100%;
height: auto;


}

.pop-login-head .thumbnail {
background: none;
border: none;
}


@media all and (max-width: 800px) {
	body { font-size: 10px; }
#header {
height: auto;
}	

h1 { font-size: 30px; }
.navbar-content, .navbar-arrow, .window, .topbar,.navbar-header-center p { display: none; }
	#topwindow { display: none;} 
		#logo, .topbar, .navblck { width: 100%; height: auto;}
 
 #navbar {
	display:none; 
	}
 
 #DaMenu {
	display: none;
	float: left;
	width: 100%;
	height: auto;
	max-height: 1000px;
	background:#fff;
	padding: 0px;
	margin: 0;
	}
  
 #DaMenu ul {
	display: inline-block; 
 	width: 100%;
	float: left;
  background: #fff;
	text-align: center;
	padding:0 0 0 0;
	margin: 0;
   z-index: 200;

  }

 #DaMenu ul >a li {
  display:inline-block;
  width: 100%;
  line-height: 50px;
   padding:0;
   margin: 0px;
   background: none;

  }
  #DaMenu ul >a li { 
   padding: 15px 0px;
   font-size:16px;
 	color: #343434;
 	text-decoration:none;
  }
    #DaMenu ul >a li:hover {
      background:#6b8d00;
    }
     #DaMenu ul >a li:hover {
     	color:#fff;
    }
   #DaMenu ul >a li.active  {
   	background:#6b8d00;
   }
   #DaMenu ul >a li.active {
   	color:#fff;
   }
 #clckdial {
	display: block; 
	padding: 10px; 
 }

 .clckdialtxt {
 color: #585858;
 font-size:25px;
 font-weight: bold;

 text-align: center;

}
 .clckdialimg {
  width:80%;

  margin:0 auto; 
 }
 .clckdialimg img {
 	max-width: 80px;
 	height: auto;
 	margin: 0 auto;
 	}
.social-float { 
display: none;
}
#telecall { display: none; }

#footer a {
	width: 100%;
	height: 20px;
	line-height: 20px;
}

}