/* Do not move this style anywhere lower in the stylesheet */
/* It needs to be defined here so it does not override the following styles. */
.hero-item { background-color: #fff; }

/* This year's Theme color: just change the hex code. */
/* Also need to search for last year's color hex code everywhere. */
.yearThemeColor		{ color: #1d75bc;}
.yearThemeColorBkg	{ background-color: #1d75bc; color: #fff;}


/* Darker purple for text: #6e2e7c */
/* Darker orange for text/links: #eb8000 */
/* Darker lime green for links: #4f9a10 */
/* Medium lime green for heads: #6eb028 */

/* Colors from the logo */
.orangeBkg 	{ background-color: #f79520; color: #fff;}
.redBkg 	{ background-color: #ec2127; color: #fff;}
.lght-yellowBkg	{ background-color: #fcee21; color: #000;}
.greenBkg	{ background-color: #3bb54a; color: #fff;}
.cyanBkg	{ background-color: #27a9e1; color: #fff;}
.purpleBkg	{ background-color: #8f489c; color: #fff;}
.pinkBkg	{ background-color: #ea0b8c; color: #fff;}
.lght-greenBkg	{ background-color: #8ec640; color: #fff;}
.blueBkg	{ background-color: #1d75bc; color: #fff;}
.yellowBkg	{ background-color: #ffcc0b; color: #000;}
.whiteBkg	{ background-color: #ffffff; color: #363636;}
.blackBkg	{ background-color: #000000; color: #ffffff;}


a.button.orangeBkg 	{ background-color: #f79520; color: #fff;}
a.button.redBkg 	{ background-color: #ec2127; color: #fff;}
a.button.lght-yellowBkg	{ background-color: #fcee21; color: #000;}
a.button.greenBkg	{ background-color: #3bb54a; color: #fff;}
a.button.cyanBkg	{ background-color: #27a9e1; color: #fff;}
a.button.purpleBkg	{ background-color: #8f489c; color: #fff;}
a.button.pinkBkg	{ background-color: #ea0b8c; color: #fff;}
a.button.lght-greenBkg	{ background-color: #8ec640; color: #fff;}
a.button.blueBkg	{ background-color: #1d75bc; color: #fff;}
a.button.yellowBkg	{ background-color: #ffcc0b; color: #000;}
a.button.whiteBkg	{ background-color: #ffffff; color: #363636;}

.highlight	{ background-color: #fff4bb; color: #000;}
.noBkg 		{ background-color: transparent; }

.arrowTail.orangeTail 	 { border-left: 12px solid #f79520;}
.arrowTail.redTail 	 { border-left: 12px solid #ec2127;}
.arrowTail.lght-yellowTail { border-left: 12px solid #fcee21;}
.arrowTail.greenTail	 { border-left: 12px solid #3bb54a;}
.arrowTail.cyanTail	 { border-left: 12px solid #27a9e1;}
.arrowTail.purpleTail	 { border-left: 12px solid #8f489c;}
.arrowTail.pinkTail	 { border-left: 12px solid #ea0b8c;}
.arrowTail.lght-greenTail { border-left: 12px solid #8ec640;}
.arrowTail.blueTail	 { border-left: 12px solid #1d75bc;}
.arrowTail.yellowTail	 { border-left: 12px solid #ffcc0b;}
.arrowTail.whiteTail	 { border-left: 12px solid #ffffff;}

.orange 	{ color: #f79520;}
.red 		{ color: #ec2127;}
.lght-yellow	{ color: #fcee21;}
.green		{ color: #3bb54a;}
.cyan		{ color: #27a9e1;}
.purple		{ color: #8f489c;}
.pink		{ color: #ea0b8c;}
.lght-green	{ color: #8ec640;}
.blue		{ color: #1d75bc;}
.yellow		{ color: #ffcc0b;}
.black		{ color: #000000;}

.white		{ color: #ffffff;}
.dark		{ color: #363636;}
.dark-grey      { color: #2b2e30;}
.lght-grey      { color: #a3a6a8;}


.tar {text-align: right;}
.tal {text-align: left;}
.padL10 {padding-left:10px;}
.padL20 {padding-left:20px;}
.padL40 {padding-left:40px;}
.padR20 {padding-right:20px;}
.padR10 {padding-right:10px;}
.clearLeft { clear: left; }
.clearRight { clear: right; }
.clearBoth { clear: both; }
.floatLeft { float: left; }
.floatRight { float: right; }
.alignCenter { text-align: center; }
.alignLeft { text-align: left; }
.alignRight { text-align: right; }
.bold { font-weight: 700; }
.fullWidth { width: 100%; }
.block 	{display: block;}
.hidden {display:none;}

.slab { font-family: "Roboto Slab", Roboto, "Open Sans", Helvetica, Arial, sans-serif; }
.vastshadow { font-family: "Vast Shadow",cursive; }
.bigNumbers {
font-family: brim-narrow-combined-1, sans-serif;
font-weight: 400;
font-style: normal;
}

ul.airy li {
	margin-bottom: 5px;
}
ul.airy li:last-child {
	margin-bottom: 0px;
}

html {
	height: 100%;
	background-color: #000;
}

body { 
	height: auto;
	position: relative;
	color: #363636;
	font-family: "Roboto Slab", "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 22px;
	background: #000; /* Old browsers */
	font-weight: 400;
	/* added for ribbons */
	overflow-x: hidden;
}

body > .container-fluid {
	position: relative;
	z-index: 10;
}
main.container-fluid {
	padding: 120px 3% 40px 3%;
	background: #fff;
	height: 100%;
	min-height: 500px;
	z-index: 2;
	/* adding for ribbon */
	margin-top: -80px; 
	margin-bottom: 40px;
}
main.container-fluid.noBkg {
	background-color: transparent;
}
.container-fluid {
	/* max-width: 1170px; */
	max-width: 1350px;
	margin: 0 auto;
	/* make the ribbon entend less */
	/*width: 97%; */
	/* critical for ribbon ends - don't change */
	width: 98.5%;
}
/* added for ribbon */
.mainWrapper {
	width: 100%;
	/* max-width: 1170px; */
	max-width: 1350px;
	position: relative;
	z-index: 10;
	margin: 60px auto 20px auto;
}

/* -------------------- */
/* Headings Styles 	*/
/* -------------------- */

h1,h2,h3,h4,h5,h6 {
	text-transform: uppercase;
	font-family: "Roboto Slab",Arial, sans-serif;
	color: #363636;
	font-style: normal;	
}
h1.sonotused {
	font-size: 38px; 
	line-height: 40px; 
	/* taken from primary-content h1 */
	/*
        margin:  0 -6% 0 -6%;
	background-color: #aaa;
        padding: 5px 3% 5px 3%;
	*/
	font-size: 30px;
	line-height: 1.2em;
	letter-spacing: 0.01em;
	color: #1d75bc;
	margin-bottom: 0.1em;
}
h1.ribbon {
	font-family: "clarendon-urw", "Roboto Slab",Arial, serif;
	font-weight: 800;
	font-style: normal;
	letter-spacing: 0.05em;
	font-size: 36px;
	line-height: 1.0em;
	padding-bottom: 15px;
}
h2 {
	font-size: 24px; 
	font-weight: normal;
	line-height: 1em;
	letter-spacing: 0.01em;
}
h3 {
	font-size: 20px; 
	line-height: 24px; 
}
h4 {
	font-size: 17px; 
	line-height: 20px; 
}
h5 {
	/* used on general_information -> Special Days */
	font-size: 14px; 
	line-height: 20px; 
	margin-bottom: 7px;
}
h6 {
	font-size: 12px; 
	line-height: 20px; 
}
/* cards */
.card {
	border-radius: 0;
}
/* headings on blocks and cards */
h2.blockTitle, h2.card-title {
	font-size: 22px;
	line-height: 24px;
	font-weight: 400;
	margin: 0px 0px 0px 0px;
	padding: 12px 10px 12px 10px;
	text-align: center;
	letter-spacing:0.03em;
}
span.blockTitleSubhead {
	display:block;
	margin-top:4px;
	font-size: 15px;
	line-height: 18px;
	text-transform:none;
	letter-spacing:0;
}
h3.blockTitle, h3.card-title {
	font-size: 18px;
	line-height: 18px;
	font-weight: 400;
	margin: 0px 0px 0px 0px;
	padding: 20px 0px 20px 20px;
	letter-spacing: 0.05em;
	font-family: "Roboto Condensed",Arial, sans-serif;
}
.index-page h2.blockTitle {
	padding-bottom: 14px;
	margin-bottom: 10px;
	z-index: 2;
}
#events h2 {
	margin-bottom: 8px;
}
.card-body h3 {
	font-size:18px;
}

p {
	margin-top: 0;
	margin-bottom: 0.8rem;
	/* margin-bottom: 0.8rem; */
}

/* ------------------------------------	*/
/* Page Header and Theme Styling	*/
/* ------------------------------------	*/

/* bodyPageBkgCycle is the same size and position as bodyPageBkg, but it has an animated background-color and lies on top of bodyPageBkg. */
/* The visibility of bodyPageBkg's backgound-image is proportional to bodyPageBkgCycle's background-color trasnparency. */
/* IOW - The more transparent bodyPageBkgCycle's background-color is, the more visible bodyPageBkg's backgound-image is. */
#bodyPageBkgCycle {
	position: absolute;
	height: 100%;
	bottom: 180px;
	left: 0;
	width: 100%;
	z-index: 2;
	-webkit-animation-name: cycleIconColorRaspberry;
	-webkit-animation-duration: 10s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation: cycleIconColorRaspberry 10s infinite linear;
	/* 10 second loop cycle */
}
/* Hold dark overlay until 25% into the 10 second cycle */
/* Dark overlay gets more transparent from 25% to 50% */
/* Dark overlay gets less transparent from 50% to 75% */
/* Hold dark overlay until end of cycle */
@keyframes cycleIconColorRaspberry {
	0%      {background-color: #a70864ee;} /* with some transparency */
	20%     {background-color: #a70864ee;} /* with some transparency */
	40%     {background-color: #a7086400;} /* with more transparency, background-image shows more */
	60%     {background-color: #a7086400;} /* with more transparency, background-image shows more */
	80%     {background-color: #a70864ee;} /* with some transparency */
	100%    {background-color: #a70864ee;} /*  with some transparency */
}
@-webkit-keyframes cycleIconColorRaspberry {
	0%      {background-color: #a70864ee;} /* with some transparency */
	20%     {background-color: #a70864ee;} /* with some transparency */
	40%     {background-color: #a7086400;} /* with more transparency, background-image shows more */
	60%     {background-color: #a7086400;} /* with more transparency, background-image shows more */
	80%     {background-color: #a70864ee;} /* with some transparency */
	100%    {background-color: #a70864ee;} /* with some transparency */
}
#bodyPageBkg {
	position: absolute;
	height: 100%;
	bottom: 180px;
	left: 0;
	width: 100%;
	/* background-image: url(../images/fair-pattern-2024.jpg); */
	/* background-image: url(../images/fair-pattern.jpg);  */
	background-image: url(../images/fair-pattern-2025.jpg); 
	z-index: 1;
}

#thisYearsTheme {
	position: absolute;
	top: 0px;
	margin-top: 15px;
	right: 60%;
	margin-right: 250px;
	margin-left: 10px;
}
#thisYearsTheme img {
	width: 100%;
	max-width: 286px;
}
#headerMain {
	z-index: 100;
	position: relative;
	/* background-image: url(../images/header_bkg_2022R.jpg); */
	/* background-image: url(../images/header_bkg_2024_both_rides.jpg); */
	/* 2025 */
	background-image: url(../images/header_bkg_2025.jpg);
	background-repeat: repeat-x;
	background-position: center 0px;
	background-color: #09204c;
	/* changing for ribbon */
	/* margin-bottom: 10px; */
	/* margin-bottom: 60px; */
	margin-bottom: 20px;
	/* box-shadow: inset 0px -60px 20px -10px #aaa; */
}
.headerCallout {
	float: right;
	width: 10%;
	background-color: gold;
	border: 2px solid white;
	height: 120px;
	margin-top: 20px;
	margin-right: 10px;
  -webkit-box-shadow: 4px 5px 1px rgba(0, 0, 0, 0.75);
          box-shadow: 4px 5px 1px rgba(0, 0, 0, 0.75);
}
#onlineStoreCallout {
	display: block;
	position: absolute;
	width: 130px;
	top: 0;
	right: 10px;
	z-index: 4000;
	text-align: right;
}
#onlineStoreCallout img {
	height: 180px;
}
.header-block {
	position: relative;
	height:166px;
	max-height:166px;
	overflow: hidden;
	margin: 0 auto;
	width: 100%;
}
.logo-block {
	position: absolute;
	/* 2025 NEW */	
	/* bottom: 16px; */
	bottom: 0px;
	/* 2025 */
	/* commented this out */
	/* max-width: 609px; */
	left: 46.8%;
	/* 2025 NEW */
	/* margin: 0 0 0 -270px; */
	margin: 0 0 0 -370px;
	z-index: 10;
	/* 2025 NEW */
	width: 86%;
}
.logo-block #CCFairLogoHoriz {
	display: block;
	/* 2025 */
	/* max-width: 609px; */
	max-width: 800px;
}
.logo-block #CCFairLogoStacked {
	display: none;
	position: relative;
	top: -12px;
}
.logo-block a:hover {
	border-bottom: none;
}
.logo-block img {
	width: 100%;
	height: auto;
}



/* -------------------------------------------	*/
/* Anchors and buttons				*/
/* The main navigation is defined later 	*/
/* but may inherit some styles from here. 	*/
/* -------------------------------------------	*/
a { 
	outline: none !important;
	color: #1d75bc;
}
a:hover { 
	color: #ea0b8c;
}

a, a:link, a:visited {
	text-decoration: none;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-transition: all 0.2s linear;
}
a.button {
	display: block;
	font-size: 1.3em;
	line-height: 1.2em;
	position: relative;
	padding-left: 50px;
	background: #1d75bc;
	/* dale 2025 - pill shape */
	border-radius: 26px;
	
}
a.button:hover { 
	background: #8ec640; 
}
a.button:link, a.button:visited {
	color: #fff;
}
a.button.stacked {
	font-size: 1.0em;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
	padding-right: 8px;

	margin-bottom: 6px;
	margin-left: 0px;
	margin-right: 0px;
}
a.button.stacked:hover {
	font-size: 1.0em;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 12px;

	margin-bottom: 6px;
	border-bottom: none;
	text-decoration: none;
}
a.button.ribbonLink {
	font-size: 14px;
	background-color: #8f489c;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	margin-bottom: 6px;

	/* slide the ribbonLinks on home page -> Popular Links, to the edge */
	margin-left: -10px;
	margin-right: 0px;
}
a.button.ribbonLink:hover {
	background-color: #1d75bc;
	border-bottom: none;
	text-decoration: none;
}
button.btn.btn-default {
	/* this is a bootstrap ovrride */
	border: 1px solid #999;
}
#events button.btn.btn-default {
	margin-bottom: 10px;
}
button, a.button .button {
	border-radius: 0 !important;
	font-size: 15px !important;
}
a.button.secondPage {
	padding-top: 8px;
	padding-left: 8px;
	padding-right: 8px;
	padding-bottom: 8px;
	font-size: 15px;
	text-align: center;
	text-transform: uppercase;
}


/* ------------------------------------	*/
/* End Anchors and buttons		*/
/* ------------------------------------	*/



/* -------------------------------------------	*/
/* Default and general_information tables 	*/
/* Events have thier own table styles elsewhere */
/* -------------------------------------------	*/
table { 
    border-spacing: 10px;
    border-collapse: separate;
}
table.GITable { 
    border-spacing: 0px;
}
table.GITable td.special{ 
	line-height: 1.3em;
	padding: 4px 0 4px 20px;

}
tr.odd {
	background-color: #fff;
	/* this is being ignored. Why ? */
	border-bottom: 1px solid #efefef;
}
tr.even {
	background-color: #efefef;
}



/* -------------------------------------------	*/
/* The main navigation 				*/
/* This is a bit messy - lots of BS overrides	*/
/* -------------------------------------------	*/
.navbar-light .navbar-nav .active .nav-link:hover {
    color: #fff;
}
.navbar-light .navbar-nav .nav-link {
	color: #222;
}
.navbar {
	border: 0;
	border-radius: 0;
	font-size: 14px;
	font-weight: 400;
}
.container > .navbar-header, .container > .navbar-collapse {
	margin-right: 0;
	margin-left: 0;
}
/* row container for hamburger */
.navbar-header {
	text-align: center;
}
.container-nav {
	max-width: 1170px;
	margin: 0 auto;
	width: 100%;
}
/* 2022 from old bootstrap */
.navbar-default .navbar-collapse {
	border-color: #e7e7e7;
}
.navbar-nav > li > a {
	padding-top: 10px;
	padding-bottom: 10px;
	line-height: 20px;
}
.navbar-nav .noDropdown a:hover { opacity: 0.7; }
@media (min-width: 768px) {
	.navbar-collapse.collapse {
		display: block !important;
		height: auto !important;
		padding-bottom: 0;
		overflow: visible !important;
	}
	.navbar-collapse {
		width: auto;
		border-top: 0;
		box-shadow: none;
	}
	.navbar-nav > li > a {
		padding-top: 15px;
		padding-bottom: 15px;
	}
}
.navbar-collapse {
	padding-right: 15px;
	padding-left: 15px;
}
.navbar-toggler {
	position: relative;
	/* float: right; */
	/* padding: 9px 10px; */
	padding: 5px 10px;
	margin-top: 4px;
/* 	margin-right: 15px; */
	margin-bottom: 4px;
/* background-color: #e7e7e7; */
	background-color: #1d75bc;
	background-image: none;
	border: 1px solid #aaa;
	border-radius: 4px;
}
.navbar-light .navbar-toggler-icon {
	background-image: url("../images/hamburgerBkg.svg");
}

/* 2022 added these two to override new bootstrap */
.navbar {
	padding-bottom: 0;
	padding-top: 0;
}
.dropdown-menu {
	border-radius: 0;
}

.navbar-collapse {
	max-height: none;
}
.navbar-nav {
	margin: 0 0;
	justify-content: center;
}
.navbar-nav > li > .dropdown-menu {
	/* make more spacey */
	/* width: 470px; */
	width: 520px;
	/* padding-top: 20px; */
	padding: 20px;
	
}
.navbar-nav .dropdown-menu li {
	margin-left: 10px;
	/* 2022 */
	font-size: 14px;
}
.navbar-nav > li > .dropdown-menu.posRight {
	right: 0;
	left: auto;
}
.navbar-nav .dropdown-submenu {
	float: left;
	/* make more spacey */
	/* padding: 0px 20px 0px 20px; */
	padding: 0px 20px 20px 30px;
}
.nav > li > a {
	position: relaive;
	display: block;
	padding-left: 11px;
	padding-right: 11px;
}
.nav > li > a.mLessPadd {
	padding-left: 10px;
	padding-right: 10px;
}
.nav > li > a:hover {
	border: 0;
}
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
	color: #222;
}

.navbar-default .navbar-nav > .active > a {
	color: #fff;
	background-color: #555;
}
.navbar-default .navbar-nav > .active > a:hover {
	color: #fff;
	background-color: #555;
}
.navbar-nav .dropdown-submenu a {
	color: #000;
	/* make more spacey */
	line-height: 1.8em;
}
.navbar-nav .dropdown-submenu a:hover {
	color: #1d75bc;
	text-decoration: none;
	border-bottom: none;
}
.dropdown-header {
	font-size: 18px;
	padding: 3px 0 3px 0;
	/* make more spacey */
	line-height: 24px;
	color: #1d75bc;
}
.navbar-nav .dropdown-menu img {
	float: left;
	display: block;
	margin-left: 10px;
	padding-right: 20px;
}
.navbar-nav .dropdown-submenu .withHeader {
	margin-left: 20px;
}
.dropdown-menu.posRight li .menuFirstSet {
	float: right;
}
#mainmenu-block-bg {
	text-align: left;
	background-color: #ffffff;
	/*
	border-top: 2px solid #777;
	border-bottom: 2px solid #777;
	*/
	width: 100%;

  -webkit-box-shadow: 0 6px 6px rgba(0, 0, 0, 0.075);
          box-shadow: 0 6px 6px rgba(0, 0, 0, 0.075);

}
/* this will appear in mobile menu */
#onlineStoreInMenu {
	display: none;
}
.current-menu-item > a, .current-menu-ancestor > a { color: #c2374c !important; }
/* ******************* */
/* End main navigation */
/* ******************* */




/* ------------------------------------	*/
/* Carousel Styling 			*/
/* ------------------------------------	*/
.carousel-control-prev, .carousel-control-next {
	/* this prevents the controls from extending into the title and footer area (and stealing the clicks) */
	top: 50px;
	bottom: 50px;
}
.carousel-control-prev .arrow, .carousel-control-next .arrow {
        font-size: 60px;
}
.carouselText {
	position: absolute;
	bottom: 0;
	left: 0;
	color: white;
	width: 100%;
	background-color: rgba(0,0,0,0.6);
	text-align: center;
	font-size: 14px;
	line-height: 1.2;
	padding: 8px 0 8px 0;
}
@media (max-width: 768px) {
	.carouselText { padding: 4px 0 4px 0; }
}
@media (max-width: 480px) {
	.carouselText { padding: 4px 0 4px 0; }
}
@media (max-width: 360px) {
	.carouselText { padding: 2px 0 2px 0; }
}
/* ------------------------------------	*/


/* ------------------------------------	*/
/* styles for text and blocks		*/
/* ------------------------------------	*/
.tagline {
	font-size: 24px;
	margin-bottom: 0.8em;
	line-height: 1.2;
}
.smallText {
	font-size: 12px;
	line-height: 16px;
}
.smallerText {
	font-size: 13px;
	line-height: 17px;
}

.blockPadded {
	padding: 16px;
}
.blockPadding {
	padding: 10px 16px;
}
.hero-item {
	-webkit-box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.375);
        	box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.375);
}
.hero-item.noShad {
	-webkit-box-shadow: none;
		box-shadow: none;
}
.hero-item img {
        max-width: 100%;
}
.hero-item.noImg {
	padding: 16px 10px 16px 10px;
}
.hero-item.noImg .blockTitle, 
.hero-item.noImg .card-title {
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
}
/* changed to buttons */
.hero-item a.stacked.blockBottom {
	text-align: center;
	margin-bottom: 0;
	padding-bottom: 10px;	
	/* 2025 - don't want these pill shaped */
	border-radius: 0px;
}
.hero-item .blockFooter {
	padding: 8px 8px 8px 8px;
	line-height: 18px;
        margin: 0;
	text-align: center;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-transition: all 0.2s linear;
}
.hero-item a .blockFooter:hover {
	padding: 8px 8px 8px 12px;
	background-color: #8ec640;
}
/*
.hero-item .blockFooter:hover {
	color: #000;
	background-color: #fff;
}
.hero-item .blockFooter.whiteBkg:hover {
	color: #fff;
	background-color: #000;
}
*/


/* ------------------------------------	*/
/* element decorations			*/
/* ------------------------------------	*/
.ribbonLinkTail {
	position: relative;
	top: -4px;
	width: 0; 
	height: 0; 
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent; 
	
	border-right:12px solid white; 
	float: right;
}
.arrowBody {
	float: right;
	font-size: 12px;
	line-height: 12px;
	padding: 6px;
	/* background-color: #fff; */
}
.arrowTail {
	width: 0; 
	height: 0; 
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	
	border-left: 12px solid white;
	float: right;
}
.decorationBar {
  -webkit-box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.10);
          box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.10);
}
.stripedBarElem {
	/* use 6 of these */
	line-height: 50px;
	width: 5%;
	height: 100%;
	margin-left: 10%;
	background-color: #fff;
	float: left;
}
.starBarElem {
	/* use 6 of these */
	font-size: 18px;
	line-height: 40px;
	width: 7%;
	margin-left: 8%;
	color: #fff;
	float: left;
}
.diagonalStripe {
	background-color: #3bb54a;
	background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.1) 35px, rgba(255,255,255,.1) 70px);
}
.slantBarBlock {
	/* background-color: purple; */
	background-image: repeating-linear-gradient(45deg, transparent, transparent 15px, rgba(255,255,255,1.0) 15px, rgba(255,255,255,1.0) 30px);
}
.stripeBarBlock {
	background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,1.0) 50%);
	background-size: 50px 50px;
}

/* ------------------------------------	*/
/* Footer Styling 			*/
/* ------------------------------------	*/
#footer {
	position: relative;
	background-color: #262626;
	/* border-top: 4px solid #a3a6a8; */
	border-top: 4px solid #333333;
	z-index: 10;
}
#footer .container {
	margin-top: 0px;
	padding-top: 10px;
	padding-bottom: 34px;
}
#footer a, #footer a:visited {
	color: #27a9e1;
}
#footer a:hover {
	color: #ffffff;
}
.copyright-info { 
	color: #fff;
	font-size: 11px;
	line-height: 13px;
	margin-top: 30px;
}
#agBadge {
	width: 70%;
	max-width: 150px;
	float: right;
	padding-bottom: 8px;
}
.socialIconFooter {
	width: 15%;
	max-width: 52px;
	margin-right: 10px;
}

/* ------------------------------------	*/
/* Modal related 			*/
/* ------------------------------------	*/
.modal .vidWrap, .modal img {
	/* margin-bottom: 10px; */
	margin: 10px auto;
}
.modalSocialIcons img {
	margin-right:5px;
}
.modalSocialIcons a:hover {
	opacity: 0.75;
}
#mapModal .modal-dialog {
	width: 96%;
	margin: 2% auto;
	max-width: 1066px;
}
#mapModal .modal-dialog .modal-body img {
	width: 100%;
}
.modal-body {
	padding: 1rem 1.5rem;
}
hr.modalDivider {
	width: 50%;
	background-color: #333;
}
/* override boostrap default */
@media (min-width: 576px) {
	.modal-dialog {
		width: 75%;
		/* max-width: 1000px; */
		max-width: 710px;
	}
}
@media (min-width: 768px) {
        #videoModal .modal-dialog {
                width: 80%;
                max-width: 960px;
        }
}


/* ------------------------------------	*/
/* Events pages 			*/
/* ------------------------------------	*/
#events a img {
    opacity: 1;
}
#events a img:hover {
    opacity: 0.85;
    transition: all 1s ease;
    transition-duration: 500ms;
}
/* 2022 added this to override new bootstrap style */
#events .eventsTable {
	border-collapse: collapse;
}

#events .eventsTable {
	width: 100%;
	border-top: 1px solid #efefef;
	border-bottom: 1px solid #efefef;
	border-left: none;
	border-right: none;
	border-spacing: 0px;
	padding: 20px 3% 20px 3%;
}
#events .eventsTable td {
	margin: 0;
	padding: 5px 2px 6px 2px;
	font-size: 14px;
	line-height: 18px;
}
#events .eventsTable th {
	margin: 0;
	padding: 2px 10px 2px 10px;
	font-size: 14px;
	line-height: 16px;
	font-weight: bold;
}
#events .eventsTable td.eventDate,
	#events .eventsTable td.eventNameAndNote,
	#events .eventsTable td.eventStart,
	#events .eventsTable td.eventEnd,
	#events .eventsTable td.eventLocation
 	{
	padding-left: 10px;
}
#events .eventsTable td.eventEnd {
	padding-right: 10px;
}
#events .eventsColLeft {
	padding-left: 0px;
	padding-right: 0px;
}
#events .eventsColRight {
	padding-top: 60px;
}
#events .eventNote {
	color: #666;
	font-size: 13px;
}
#events .eventNote a, #events .eventModalLink a {
        font-size: 13px;
}
#events .eventNote a:hover, #events .eventModalLink a:hover {
        text-decoration:underline;
}
#events tr.eventTableHeader td {
	font-weight: bold;
}
#events .dateCol {
        min-width: 70px;
}
.noWhiteWrap {
	white-space:nowrap;
}
.eventDayDivider {
	text-align: center;
	color: #1d75bc;
}
/* ---------------------- */


/* -------------------------------------*/
/* Resonsive images and video styles	*/
/* -------------------------------------*/
/* this will scale an img to fill the container BUT only up to the image's actual width */
.img-responsive-fill {
        display:block;
        max-width:100%;
        width: 100%;
        height:auto;
}
/* this will scale an img to fill the container beyond the image's actual width */
.img-responsive {
        display:block;
        max-width:100%;
        height:auto;
}

/* For embeding objects like video and other visuals that need to be kept at the correct aspect ratio */
.embed-responsive {
	position: relative;
	display: block;
	height: 0;
	padding: 0;
	overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.embed-responsive-banner {
        padding-bottom: 32.09%;
}
.embed-responsive-16by7 {
        padding-bottom: 43.75%;
}
.embed-responsive-16by9 {
	padding-bottom: 56.25%;
}
.embed-responsive-4by3 {
	padding-bottom: 75%;
}
.vidWrap {
        position: relative;
}
/* The container for the image and anchor must be position relative */
a.play {
	position: absolute;
	display: block;
	background-image: url(../images/youtube_play_arrow_grey.png);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}
a.play:hover {
	background-image: url(../images/youtube_play_arrow_red.png);
	background-position: 50% 50%;
}


/* ------------------------------------------ */
/* Start modifications for google site search */
/* ------------------------------------------ */
.gsc-search-box table {
        border-spacing: 0;
        border-collapse: initial;
}
.gsc-search-button, .gsc-search-box, .gsc-search-box table {
        box-sizing: content-box;
}
.gsib_a {
        padding: 0 0 0 0 !important;
}
.gsc-search-box * {
        padding: 0 0 0 0 !important;
        margin: 0 0 0 0 !important;
}
input.gsc-search-button-v2 {
        padding: 5px 17px !important;
        margin: 0 0 0 4px !important;
}
.gsc-search-button-v2 {
        padding: 5px 15px !important;
        margin: 0 0 0 2px !important;
	height: 16px;
	border: none !important;
}
table.gsc-search-box td {
        max-height: 26px !important;
        vertical-align: top !important;
        overflow: hidden;
}
/* This is our custom wrapper around google's search */
#searchBoxInput {
        width: 300px;
        max-width: 80%;
        float: right;
        height: 26px;
        overflow: hidden;
        margin: 0 0 8px 0;
        padding: 0;
}
/* ------------------------------------------ */
/* End google search modifications */
/* ------------------------------------------ */


@media (max-width: 860px) and (min-width: 821px) {
	.nav > li > a {
		padding-left: 8px;
		padding-right: 8px;
        }
	.nav > li > a.mLessPadd {
		padding-left: 7px;
		padding-right: 7px;
        }
}
@media (max-width: 820px) and (min-width: 768px) {
	.nav > li > a {
		padding-left: 4px;
		padding-right: 4px;
        }
	.nav > li > a.mLessPadd {
		padding-left: 4px;
		padding-right: 4px;
        }
}
@media (min-width: 1170px) {
	#onlineStoreCallout {
		left: 50%;
		margin-left: 440px;
	}
}

@media (max-width: 960px) {
	#thisYearsTheme {
		display: none;
	}
}
@media (max-width: 799px) {

	#topnav {
                float: none;
                margin: 0;
        }
        .navicon {
                display: block;
        }
        .menu-button {
                display: block;
        }
        .menuTriggerHome {
                display: block !important;
        }
        .menu-button {
                font-size: 1.05em;
                background-color: #d6d6d2;
        }
        .menu-button .touch-button {
                background-color: #b6b6b2;
        }
}
@media  (max-width: 767px) {
	#onlineStoreCallout {
		display: none;
	}
	#onlineStoreInMenu {
		display: block;
	}
	#headerMain {
		overflow: hidden;
	}
	#thisYearsTheme {
		display: none;
	}
	.logo-block {
		position: relative;
		margin: 0 auto;
		right: 0;
		left: 0;
		/* 2025 NEW */
		/* top: 30px; */
		bottom: 30px;
		/* 2025 NEW */
		/* width: 86%; */
		width: 100%;
	}
	.logo-block img {
		width: 100%;
	}
	#checkBackMay {
		width: 15%;
	}
	.bannerText {
		font-size: 16px;
		padding: 4px 0 4px 0;
	}
	.dropmeMobile {
		display: none;
	}
	.navbar-nav .noDropdown {
		border: 1px solid #efefef;
		background-color: #fff;
	}
	.navbar-nav .dropdown {
		border: 1px solid #efefef;
		background-color: #fff;
	}
	.navbar-nav .dropdown > a {
		padding-left: 11px;
	}
	.navbar-nav .dropdown-menu {
		border: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		background-clip: padding-box;
		margin: 0;
		padding: 0;
	}
	.navbar-nav .dropdown-menu img {
		display: none;
	}
	.navbar-nav .dropdown-menu li {
		margin-left: 30px;
	}
	.navbar-default .navbar-nav > li > a, 
	.navbar-default .navbar-nav > li > a:hover,
	.navbar-default .navbar-nav > li > a:focus {
	        color: #222;
		font-size: 1.3em;
	}

	/* The following openD values need to match the bootstrap values 
	   or they will animate/tween during a slideToggle */
	.navbar-nav .openD .dropdown-menu {
		position: static;
		float: none;
		width: auto;
		background-color: transparent;
		border: 0;
		box-shadow: none;
	}
	.navbar-nav .openD .dropdown-menu .dropdown-header {
		padding: 5px 15px 5px 5px;
	}
	#mainmenu-block-bg {
	        background-color: #fbfbfb;
	}
	.dropdown-menu.posRight li .menuFirstSet {
		float: left;
	}
	.navbar-nav .dropdown-submenu a {
		font-size: 1.3em;
	}

}
@media (max-width: 759px) {
	.hero-item.countdown {
		width: 96.9%;
	}
}
@media (max-width: 720px) {
	.tagline-block {
		display: none;
	}
}
/* 2025 NEW */
@media (max-width: 602px) {
	.mainWrapper {
		margin: 10px auto 20px auto;
	}
}
@media (max-width: 580px) {
	.logo-block #CCFairLogoHoriz {
		display: none;
	}
	.logo-block #CCFairLogoStacked {
		display: block;
	}
	.logo-block {
		max-width: 358px;
		width: 94%;
		top: 20px;
		height: auto;
	}
	.container-fluid {
		width: auto;
	}
        /* 8-10-22 */
        h2.blockTitle, h2.card-title {
                font-size: 18px;
                line-height: 20px;
        }
}
@media (min-width: 756px) and (max-width: 1080px) {
        /* 8-10-22 */
        h2.blockTitle, h2.card-title {
                font-size: 18px;
                line-height: 20px;
        }
}


@media (max-width: 480px) {
        #events .dateCol { 
                min-width: 30px;
        }
        #events .noWhiteWrap {
                white-space: normal;
        }
	#events .hero-item {
		width: 100%;
	}
	#events .eventsTable {
		width: 100%;
		border: none;
		border-spacing: 0px;
		padding: 20px 0 20px 0;
	}
	#events .eventsTable td {
		font-size: 13px;
		line-height: 15px;
	}
	#events .dropmeMobile {
		display: none;
	}
	.navbar-nav .dropdown-submenu {
		float: none;
	}
	.bannerText {
		font-size: 13px;
		padding: 4px 0 4px 0;
	}
        /* 6-17-2024 */
        .eventsTable {
                margin-left: -10px;
        }
        #events .eventsTable td.eventNameAndNote,
                #events .eventsTable td.eventStart,
                #events .eventsTable td.eventEnd,
                #events .eventsTable td.eventLocation
                {
                padding-left: 4px;
        }
}
@media (max-width: 360px) {
	.bannerText {
		font-size: 11px;
		padding: 2px 0 2px 0;
	}
}

/* moved here 2022 from vender and commercial exhibitors pages */
.columnWrapp {
	width: 49.8%;
	float: left;
	min-width: 400px;
}
.vendorColumn {
	width: 49.8%;
	float: left;
	min-width: 205px;
	padding-right: 20px;
/* 	font-family: Roboto, "Open Sans", Helvetica, Arial, sans-serif; */
	color: #333;
	font-size: 14px;
	font-weight: 400;
	text-align: left;
	line-height: 17px;
}
.vendorColumn h2 {
    font-size:16px;
}
.vendorColumn ul li {
    font-weight: 400;
    padding-bottom:5px;
}
@media (max-width: 930px) {
	.columnWrapp, .vendorColumn {
		min-width: 305px;
	}
}
@media (max-width: 690px) {
	.columnWrapp, .vendorColumn {
		min-width: 205px;
	}
}
@media (max-width: 480px) {
	.columnWrapp, .vendorColumn {
		width: 99%;
		min-width: 360px;
	}
}
@media (max-width: 375px) {
	.columnWrapp, .vendorColumn {
		min-width: 200px;
	}
}