/*
 Theme Name:   Cranbrook History Centre 2020 Theme
 Theme URI:    http://www.genexmarketing.com/
 Description:  Genex Marketing Bootstrap Starter Theme
 Author:       Genex Marketing
 Author URI:   http://www.genexmarketing.com
 Template:     toolset-starter
 Version:      4.9.9
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
	
	/* Color Palette */

	--yellow: #f0c128;
	--lightYellow: #f9e6a9;
	--red: #6e142c;
	--burgundy: #3d0b18;
	--tan: #756a6a;
	--brown: #3e2e2e;
	--gray: #2f2e2e;
	
	--mainBgColor: #fff;
	--mainColor: var(--red);
	--secondaryColor: var(--tan);
	
	--topHeaderBGcolor: #fff;
	--headerHeight: 100px;

	--menuBarBGColor: #fff;
	--menuItemsColor: var(--tan);
	--menuItemsHoverColor: var(--burgundy);
	--menuItemsHoverBGColor: transparent
	--subMenuItemsColor: var(--brown);
	--subMenuItemsHoverColor: var(--red);
	
	--menuRightPadding: 0px;
	--hamburgerButtonColor: var(--tan);
	--hamburgerButtonColorHover: var(--red);

	--MSMenuBarBGColor: transparent;
	--MSmenuItemsColor: var(--tan);
	--MSmenuItemsHoverColor: var(--red);
	--MSsubMenuItemsColor: var(--brown);
	--MSsubMenuItemsHoverColor: var(--red);
	
	--SSMenuBarBGColor: transparent;
	--SSmenuItemsColor: var(--tan);
	--SSmenuItemsHoverColor: var(--red);
	--SSsubMenuItemsColor: var(--brown);
	--SSsubMenuItemsHoverColor: var(--red);

	--superMenuBarBGColor: var(--burgundy);
	--superMenuItemsColor: #fff;
	--superMenuItemsHoverColor: #fff;
	--superMenuItemsHoverBGColor: var(--tan);
	
	--socialItemsColor: var(--burgundy);
	--socialItemsHoverColor: var(--tan);
	
	--sideMenuBarBGColor: var(--gray);
	--searchBarBGColor: var(--gray);
	
	--sideMenuItemsColor: var(--yellow);
	--sideMenuItemsHoverColor: var(--lightYellow);
	
	--footerBGColor: #000;
	--footerHeaderColor: var(--yellow);
	--footerlinkColor: var(--lightYellow);
	--footerlinkHoverColor: var(--tan);
	--footerIconColor: var(--red);
	--footerTextColor: #ccc;
	--footerMenuBulletColor: var(--tan);
	
	--mainFont: 'museo-sans', sans-serif; 
	--headerFont: 'trajan-pro-3', serif;
}

/* Layout */

html {
  scroll-behavior: smooth;
}

:target {
  display: block;
  position: relative;
  top: -120px; 
  visibility: hidden;
}

#topBar {
	background-color: var(--topHeaderBGcolor);
}

#topBar .topBarLogo {
	width: 350px;
}

#topBar .CTA {
	display: flex;
	flex-wrap: nowrap;
}

#topBar .CTA > div {
	display: flex;
	padding: 16px;
	align-items: center;
	justify-content: center;
	flex-grow: 1;
}

.top-search {
    background-color: var(--searchBarBGColor);
}

.top-search input.form-control {
	width: calc( 100% - 50px);
	background-color: #fff;
	color: #666;
}

.top-search .btn-search {
	height: 40px;
	background-color: #efefef;
	color: #373737;
}

.searchResult{
  margin-bottom:4rem;
}

nav.navbar.bootsnav .menuBar {
	background-color: var(--menuBarBGColor);
	border-bottom: 5px solid var(--mainColor);
}

/* Logo */
nav.navbar.bootsnav .logo {
	margin-top: 10px;
/*
	width: 0px;
	opacity: 0;
*/
	width: 250px;
	transition: opacity .8s;
	position: absolute;
}

/*
nav.navbar.bootsnav.scroll .logo {
	opacity: 1;
	width: 150px;
}
*/

/*
nav.navbar.bootsnav .attr-nav .social{
	display: none;
}

nav.navbar.bootsnav.scroll .attr-nav .social{
	display: block;
}
*/

main .bkgroundColor {
	background-color: var(--mainBgColor);
		z-index: 0;
	position: relative;
}

main .container.mainContainer {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

footer {
	background-color: var(--footerBGColor);
	border-top: 5px solid var(--mainColor);
}

footer .footerContents {
	padding-top: 2rem;
	padding-bottom: 2rem;
	color: var(--footerTextColor);
}

footer .footerContents .footerLogo {
	width: 180px;
}

footer .footerContents h3 {
	color: var(--footerHeaderColor);
}

footer .footerContents i {
	color: var(--footerIconColor);
}

.partnersGrid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	border-bottom: 1px solid var(--gray);
	padding-top: 16px;
}

#genexSignature a,
footer .footerContents a {
	color: var(--footerlinkColor);
	text-decoration: none;
}

#genexSignature a:hover,
footer .footerContents a:hover {
	color: var(--footerlinkHoverColor);
}

footer .footerContents ul.menu,
footer .footerContents ul.sub-menu {
	list-style: none;
	padding-left: 30px;
}

footer .footerContents ul.menu li::before {
	font-family: "FontAwesome";
	content: "\f105";
	color: var(--footerMenuBulletColor);
	margin-right: 10px;
	margin-left: -16px;
}

footer .footerContents .addressTable {
	max-width: 360px;
}


/* Typo */
.bodyWrapper h1,
.bodyWrapper h2{
	font-family: var(--headerFont);
	margin-top: 0;
	/*color: var(--mainColor);*/
}

.bodyWrapper h3,
.bodyWrapper h4,
.bodyWrapper h5,
.bodyWrapper h6 {
	font-family: var(--mainFont);
	margin-top: 0;
	/*color: var(--mainColor);*/
}

.bodyWrapper h1.sub,
.bodyWrapper h2.sub{
	font-family: var(--mainFont);
	margin-top: 0;
	/*color: var(--mainColor);*/
}

.bodyWrapper h1 span.white,
.bodyWrapper h2 span.white,
.bodyWrapper h3 span.white,
.bodyWrapper h4 span.white,
.bodyWrapper h5 span.white,
.bodyWrapper h6 span.white {
	color: #fff;
}

.bodyWrapper h1 span.color,
.bodyWrapper h2 span.color,
.bodyWrapper h3 span.color,
.bodyWrapper h4 span.color,
.bodyWrapper h5 span.color,
.bodyWrapper h6 span.color {
	color: var(--mainColor);
}

.bodyWrapper h1 span.tan,
.bodyWrapper h2 span.tan,
.bodyWrapper h3 span.tan,
.bodyWrapper h4 span.tan,
.bodyWrapper h5 span.tan,
.bodyWrapper h6 span.tan {
	color: var(--tan);
}

.bodyWrapper h1 span.tan,
.bodyWrapper h2 span.tan,
.bodyWrapper h3 span.tan,
.bodyWrapper h4 span.tan,
.bodyWrapper h5 span.tan,
.bodyWrapper h6 span.tan {
	color: var(--tan);
}

.bodyWrapper h1 span.brown,
.bodyWrapper h2 span.brown,
.bodyWrapper h3 span.brown,
.bodyWrapper h4 span.brown,
.bodyWrapper h5 span.brown,
.bodyWrapper h6 span.brown {
	color: var(--brown);
}

.bodyWrapper h1 span.yellow,
.bodyWrapper h2 span.yellow,
.bodyWrapper h3 span.yellow,
.bodyWrapper h4 span.yellow,
.bodyWrapper h5 span.yellow,
.bodyWrapper h6 span.yellow {
	color: var(--yellow);
}

.bodyWrapper span.listNumber{
	display: inline-block;
	background-color: var(--mainColor);
	color: #fff;
	padding: 1.5rem;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	text-align: center;
	font-size: 3rem;
	line-height: 3rem;
}

.bodyWrapper {
	font-family: var(--mainFont);
	font-size: 16px;
}

.bodyWrapper main ul.cl,
.bodyWrapper main ul.customList {
	list-style: none;
	padding-left: 30px;
	white-space: normal;
}

.bodyWrapper main ul.cl li:before,
.bodyWrapper main ul.customList li:before {
	font-family: "FontAwesome";
	/*content: "\f192";*/
	content: "\f105";
	color: var(--mainColor);
	margin-right: 5px;
	margin-left: -17px;
}

.bodyWrapper main ul.cl.t li:before,
.bodyWrapper main ul.cl.thick li:before,
.bodyWrapper main ul.customList.t li:before,
.bodyWrapper main ul.customList.thick li:before{
	content: "\f00c";
}

.bodyWrapper main ul.cl ul,
.bodyWrapper main ul.customList ul{
	list-style: none;
	padding-left: 30px;
	white-space: normal;
}

.bodyWrapper main ul.cl ul li:before,
.bodyWrapper main ul.customList ul li:before{
	/*content: "\f192";*/
	color: var(--secondaryColor);
}

.bodyWrapper main ul.cl.t ul li:before,
.bodyWrapper main ul.customList.t ul li:before,
.bodyWrapper main ul.cl.thick ul li:before,
.bodyWrapper main ul.customList.thick ul li:before {
	content: "\f105";
}

.bodyWrapper main ol.cl,
.bodyWrapper main ol.customList {
	list-style: none;
	padding-left: 50px;
	white-space: normal;
}

.bodyWrapper main ol.cl > li,
.bodyWrapper main ol.customList > li {
	margin-bottom: 1.5rem;
	counter-increment: ol-counter;
	position: relative;
}


.bodyWrapper main ol.cl > li::before,
.bodyWrapper main ol.customList > li::before {
  content: counter(ol-counter);
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  position: absolute;
  --size: 35px;
  left: calc(-1 * var(--size) - 10px);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  top: 0;

  background: var(--mainColor);
  border-radius: 50%;
  text-align: center;
}

.bodyWrapper main dl dd {
	margin-bottom: 2rem;
}

hr {
	border-top: 2px solid var(--mainColor);
	width: 80%;
}

hr.s {
	margin-top: 4rem;
	margin-bottom: 4rem;
}

blockquote {
	font-style: italic;
	border-left: 5px solid var(--mainColor);
	background-color: rgba(127, 127, 127, .2);
	padding-left: 80px;
	position: relative;
}

blockquote::before {
	font-family: "FontAwesome";
	content: "\f10d";
	color: var(--mainColor);
	position: absolute;
	font-size: 5rem;
	top: 0px;
	left: 10px;
}

blockquote cite {
	display: block;
	text-align: right;
	font-weight: bold;
}

table.table thead th{
	background-color: var(--mainColor);
	text-align: center;
	color: #fff;
}

/* Navigation */
.bodyWrapper a {
	color: var(--tan);
	transition: all .2s;
	text-decoration: underline;
}

.bodyWrapper a:link {}

.bodyWrapper a:visited {}

.bodyWrapper a:focus,
.bodyWrapper a:hover {
	color: var(--red);
	/*text-decoration: none;*/
}

.bodyWrapper a:active {}

/* Super Nav */
.superMenu {
	background-color: var(--superMenuBarBGColor);
	text-align: right;
}

.superMenu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.superMenu ul li {
	display: inline-block;
	margin: 0 -3px;
	padding: 0;
}

.superMenu ul li a {
	display: inline-block;
	color: var(--superMenuItemsColor);
	/*font-size: .9em;*/
	font-size: .85em;
	margin: 0;
	padding: 5px 10px;
	transition: all .5s;
	text-decoration: none;
}

/*
nav.navbar.bootsnav.scroll .superMenu ul li a {
	font-size: .8em;
}
*/

.superMenu ul li a:hover,
.superMenu ul li a:focus,
.superMenu ul li.active a {
	background-color: var(--superMenuItemsHoverBGColor);
	color: var(--superMenuItemsHoverColor);
}

/* Side Menu */
.side {
	background-color: var(--sideMenuBarBGColor);
}

.side .widget ul.link{
	margin-top:24px
}

.side .widget ul.link li {
	padding: 2px 0;
}

.side .widget ul.link li a{
  color: var(--sideMenuItemsColor);
	text-decoration: none;
}

.side .widget ul.link li a:focus,
.side .widget ul.link li a:hover{
  color: var(--sideMenuItemsHoverColor);
}

/* Main Nav */
nav.navbar.bootsnav {
	border-bottom: none;
}

nav.navbar.bootsnav ul.nav.navbar-nav > li > a {
	font-family: var(--mainFont);
	font-size: 1.8rem;
	color: var(--menuItemsColor);
	text-transform: uppercase;
	text-decoration: none;
}

nav.navbar.bootsnav ul.nav.navbar-nav > li.active > a,
nav.navbar.bootsnav ul.nav.navbar-nav > li:focus > a,
nav.navbar.bootsnav ul.nav.navbar-nav > li:hover > a {
	color: var(--menuItemsHoverColor);
}

nav.navbar.bootsnav ul.nav.navbar-nav > li.dropdown li a {
	color: var(--subMenuItemsColor);
	text-decoration: none;
}

nav.navbar.bootsnav ul.nav.navbar-nav > li.dropdown li:focus > a,
nav.navbar.bootsnav ul.nav.navbar-nav > li.dropdown li:hover > a {
	color: var(--subMenuItemsHoverColor);
}

nav.navbar.bootsnav .navbar-toggle i {
	color: var(--hamburgerButtonColor);
	transition: all .3s;
}

nav.navbar.bootsnav .navbar-toggle i:focus,
nav.navbar.bootsnav .navbar-toggle i:hover {
	color: var(--hamburgerButtonColorHover);
}

/* Navbar Social Styles */
nav.navbar.bootsnav .attr-nav > ul > li > a {
	color: var(--socialItemsColor);
	padding: 21px 15px 0;
	text-decoration: none;
}

nav.navbar.bootsnav .attr-nav > ul > li:focus > a,
nav.navbar.bootsnav .attr-nav > ul > li:hover > a {
	color: var(--socialItemsHoverColor);
}

.absoluteBar{
	position: absolute;
	right: 0;
}

a.btnDonate {
	display: inline-block;
	text-transform: uppercase;
	color: #fff;
	padding: 5px 16px;
	background-color: var(--red);
	border-radius: 0 0 15px 15px;
	transition: all .3s;
	text-decoration: none;
}

a.btnDonate:focus,
a.btnDonate:hover {
	color: var(--yellow);
}

nav.navbar.bootsnav .socialBar {
	display: inline-block;
	padding: 5px 16px;
	background-color: var(--red);
	border-radius: 0 0 15px 15px;
}

nav.navbar.bootsnav .socialBar a {
	color: #fff;
	margin: 0 2px;
	text-decoration: none;
}

nav.navbar.bootsnav .socialBar a:focus,
nav.navbar.bootsnav .socialBar a:hover {
	color: var(--yellow);
}

.btn.btn-default {
	text-transform: uppercase;
	white-space: normal;
	font-size: 2rem;
	/*font-weight: bold;*/
	padding: 1rem 3rem ;
	background-color: var(--mainColor);
	color: #fff;
	transition: all .2s;
	font-family: var(--mainFont);
	text-decoration: none;
}

.btn.btn-default:focus,
.btn.btn-default:hover {
	background-color: var(--secondaryColor);
	background-color: #000;
	color: #fff;
}

a.readMore {
	background-color: rgba(127, 127, 127, .2);
	padding: 5px 12px;
	border-radius: 20px;
	display: inline-block;
	text-decoration: none;
	color: var(--red);
}

a.readMore:focus,
a.readMore:hover {
	color: #000;
}

/* Pagination Override */
.paginationWrapper {
	margin-top: 3rem;
}

.pagination > li > span,
.pagination > li > a {
	color: var(--mainColor);
	border-radius: 0 !important;
	padding: 6px 12px !important;
	font-size: 1em !important;
	text-decoration: none!important;
	line-height: normal !important;
	border: 1px solid #ddd !important;
	margin: 2px !important;
	text-decoration: none;
}

.pagination > li > a:focus,
.pagination > li > a:hover {
	color: var(--mainColor);
}

.pagination > .active > span:focus,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span {
	border-color: var(--mainColor);
	background-color: var(--mainColor);
}

/* WooCommerce Button Override */
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background-color: var(--mainColor);
	color: #fff;
}

/* Pagination dots fix */
.pagination-dots > li > a.page-link {
    z-index: 0;
}



/* Chris's Styles */
/* grid for staff layouts and faq's */
.peronsastaff-grid {
  text-align: center;
}
.label {
  color: #000 !important;
}
.wp-block-faq-block-for-gutenberg-faq {
  padding: 5px;
  margin: 5px;
  background: #eee;
}
/* Block Editor Button Styling */
a.wp-block-button__link {
    text-decoration: none;
}
/* Home Page Styling */
.homeblocks .box {
    text-align: center;
}

.homeblocks .box h3 {
    color: #000 !important;
}

.homeblocks .box a {
    text-decoration: none;
}

.homeblocks .box img {
    border-bottom: 5px solid #5f0f25;
}


/* Newsletter Widget override */
#email-registration-form-container span.label{
  color: #fff !important;
}
#email-registration-form-container .email,
#email-registration-form-container .field.text{
  color: #222 !important;
}

#email-registration-form-container .btn.btn-submit.btn-submit-email{
  color: var(--red);
}

/* Notification bar Override */
#wpfront-notification-bar-spacer {
    position: relative;
    z-index: 0;
}