@charset "UTF-8";
/*******************************************************/
/*******  SAMPLE USER CSS                           ****/
/*******  Rename to user.css to take effect         ****/
/*******************************************************/


/* make page container wider than 1320 for large screens*/
/*@media (width >= 1650px) {
  .container {
    max-width: 1600px; 
  }
}*/

:root { /*Set Template Colours */
	--primary: #386E24;
	--secondary: #6c757d;
	--success: #198754;
	--info: #0dcaf0;
	--warning: #ffc107;
	--danger: #dc3545;
	--light: #f8f9fa;
	--dark: #212529;
	--black: #000;
	--blue: #9ACAEB;
	--darkblue: #424077;					 
	--brown: #9c8468;	
	--indigo: #6610f2;
	--purple: #6E295B; 
	--pink: #d63384;
	--red: #FF0000;
	--orange: #FB6640;   
	--yellow: #FFED00;
	--light-yellow: #FFFF99;
	--green: #88A56A; 
	--darkgreen: #28371A; 
	--teal: #20c997;
	--cyan: #0dcaf0;
	--white: #fff;
	--gray: #6c757d;
	--gray-dark: #222222;	
	--gray-100: #f8f9fa;
	--gray-200: #e9ecef;
	--gray-300: #dee2e6;
	--gray-400: #ced4da;
	--gray-500: #adb5bd;
	--gray-600: #6c757d;
	--gray-700: #495057;
	--gray-800: #343a40;
	--gray-900: #212529;
	
	--link-color: var(--black);
	--hover-color: var(--orange);
	
	--body-font: "Open Sans", sans-serif;
	--body-font-weight: 400;
	--body-font-size: 16px;
	--body-color: var(--black);
	--body-letter-spacing: unset;

	--title-font: 'Montserrat', sans-serif;
	--title-font-weight: 400;
	--title-color: var(--black);

}	

h1,h2,.componentheading, .contentheading{
	font-family: var(--title-font);
	font-weight: var(--title-font-weight);
	font-size: 36px;
	color: var(--black);
 	margin-bottom:1em;
}

h3 {
	font-family: var(--title-font);
	font-size: 24px;
	margin-top:20px;
	margin-bottom:20px;
	color:var(--black);
}

h4{
	font-family: var(--body-font);
	font-size: 20px;
	font-weight: bold;
	color:var(--black);
}

.btn-primary, .btn-default {
	color: var(--link-color);
	border-color: var(--link-color);
	background-color: var(--white);
}

.btn-primary:hover, .btn-default:hover  {
	color: var(--hover-color);
	border-color: var(--hover-color);
	background-color: var(--white);
}

.btn:disabled, .btn.disabled, fieldset:disabled .btn {
    color: var(--white);
    pointer-events: none;
    opacity: 0.65; 
}

/*************************/
/* Layout Table Settings */
/*************************/
#wrapper_header{
	/* display: flex; */
	padding-top: 10px;
	margin: 0;
	position:relative;	
	vertical-align:top;
	margin-top:0px;
	margin-bottom:0px;
	z-index:10;
	background-color: var(--yellow);
}

.logo {
	background: var(--white);
	padding: 5px;
	border-radius: 10px;
	}

a.navbar-brand{
	padding:5px;
	padding-right:20px;
	height:inherit;
}


.header_text{
	font-family: var(--body-font);
	font-size: 32px;
	font-weight: bold;
	color: #000;
	margin-bottom:0px;
}

.header_subtext{
	font-family: var(--title-font);
    font-size: 28px;
	color: #A4587E;
	margin-bottom:0px;
}

.header_phone{
	font-size: 22px;
	font-weight: bold;
	margin-left:70px;
	display:inline-block;
	color:var(--white);
}

.contact_header{
	color: var(--black);
	padding: 0px;
	text-align:right;
}
.contact_header a{
	color: var(--black);
}
.contact_header a:hover{
	color: var(--purple);
}
.contact_phone {
	clear:right;
	font-size: 32px;
}

#wrapper_menu{
	background-color:var(--orange);
}

#admin_menu {
	background-color: var(--yellow);
}

#wrapper_slideshow{ 
	background-color:var(--black);
}

#main_container{
}

#wrapper_bottom_b{ 
 }

#wrapper_footer{
}


/**************/
/* Slideshows */
/**************/
/* Note: use units vw to scale with the viewport width */

.carousel-caption {
	/*display:none !important;*/
}


div.slide_title{	
}

div.slide_description{	
}


div.overlay_text{
}



/**************************/
/*          Menus         */
/**************************/
.navbar-toggler{
	color:var(--black);
	border: 1px solid var(--black);	
}

/* Top Level */
.nav-item a {
	font-size: 16px;
	color:var(--black);
	padding-left:20px !important;
	padding-right:20px !important;
}

/* Top Level Active*/
.nav-item.active a{
	color:var(--yellow) !important;
	padding:10px;
	background-color:var(--black);
}

/* Top Level Hover*/
.nav-item a:hover,
.nav-item a:focus{
	color:var(--yellow);
	background-color:var(--black);
	padding:10px;
	border-radius:0px;
}

/* Dropdown Box */
.dropdown-menu {
	background-color: var(--white);
}
	
/* Dropdown Item */
.dropdown-menu .nav-item a{
}
	
/* Dropdown Item Hovered*/
.dropdown-menu .nav-item a:hover{
}

	
#admin_menu .nav-item a{
}

/***************/
/* Feature Box */
/***************/
div.featurebox {
	background-color: var(--yellow);
	padding: 20px;
	border-radius: 10px;
	margin:20px;	
	font-size:20px;
	color:var(--black);
}

div.featurebox ul{
}

div.featurebox li{
	background-repeat: no-repeat;
	background-image: url(../images/tick_black.png);
	background-position: left top;
	padding-left:40px;
	list-style-type: none;
	min-height:40px;
	margin-bottom:10px;
	color:var(--black);
}

div.featurebox_blue {
}

/***************/
/* Highlight Box */
/***************/

div.highlight {
	font-family: var(--body-font);
	font-weight: bold;
	font-size: 28px;
	color: var(--black);
	background-color: var(--yellow);
	padding: 20px;
	border-radius: 10px;
}

div.highlight-orange {
}

.blue-wrapper{
}

.white-box{
}

/***************/
/* MISC */
/***************/


.table th{
	background-color:var(--yellow); !important;
}

div.notice {
	background-image: url(../images/background_xmas_2.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 75%;
	background-color: #fff;
	color:#000;
	padding: 20px;
	border-radius: 10px;
	border: 2px solid red;
	font-size:16px;
	margin-bottom: 30px;
}

div.notice li{
	background-image: url(../images/box_black.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-left:40px;
	list-style-type: none;
	min-height:40px;
	margin-bottom:10px;
}

div.notice ul{
	padding-left:0px;
}

/* Page Banners */
.item-page_gravel .page-header h1,
.item-page_rubblerecycle .page-header h1
{
	color:var(--black);
	background-color:var(--yellow);
	padding:10px;
	font-weight:bolder;
}

.item-page_gravel .page-header {
	background-image: url(../images/gravel_background.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	height:300px;
	margin-bottom:50px;
	padding:30px;
	color:var(--white);
}

.item-page_rubblerecycle .page-header {
	background-image: url(../images/concrete_rubble_background.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	height:300px;
	margin-bottom:50px;
	padding:30px;
	color:var(--white);
}