/* ==|== primary styles =====================================================
   Author: Silverink
   ========================================================================== */

/* ==|== Easibuild Structural Elements =====================================================
   Structural elements such as mainContent/Wide, submenu etc. Ideally these elements will change
   to HTML5 tags...  aside, article etc.
   ========================================================================== */

   /* FONTS
   Lato
   font-family: "lato", sans-serif; 400/700
	font-family: fairplex-wide, serif; 400/700
   */


/* BRAND COLOURS */

:root {
	--brand-primary: #98BD2D;
	--white: #fffefd;
	--black: #141311;
	--ruas-brand: #DF3932;
	--eikon-brand: #0C2754;
	--beef-brand: #9B7435;
	--wf-brand: #549AC8;
	--wf-purple: rgba(60, 41, 106, 1.00);
	--purple: #A00052;
	--balmoral-brand: #98BD2D;
	--base-primary: rgb(144, 138, 132);
	--base-secondary: #B1AAA3;
	--base-tertiary: #DDD9D6;
	--base-light: #EBE8E5;


	---box-shadow: 0px 15px 25px rgba(144,138,132,0.2);
	---box-shadow-offset-top: 0px -5px 10px rgba(144,138,132,0.1);

	--font-head: "fairplex-wide", serif;
	--font-body: "lato", sans-serif;
	--font-bold: 700;
  }

  ::-webkit-input-placeholder {
    color: var(--base-tertiary) !important;
}

::-moz-placeholder {
    color: var(--base-tertiary) !important;
}

::-ms-placeholder {
    color: var(--base-tertiary) !important;
}

::placeholder {
    color: var(--base-tertiary) !important;
}

  .scrolled .vTopRow .text-end {display: none !important;}
  .scrolled .navbar-brand img {max-height: 50px;}
  .scrolled .vTopRow {padding-top: 10px;}
  .scrolled #topMenu .navbar-nav {font-size: 1.125rem;}
  
  #crossSiteHighlight:has(+ .scrolled) {
	  height: 5px
	}
  #crossSiteHighlight:has(+ .scrolled) a{
	  height: 8px
	}
	#crossSiteHighlight:has(+ .scrolled) a:hover { height: 100px;
	}
  

/* BASE BOOTSTRAP OVERRIDES */
.btn-outline-primary:hover {color: var(--white); }
.btn-primary, .btn-primary:hover {color: #fff;}

/* END BOOTSTRAP OVERRIDES */

/* Brand Backgrounds */
.bg-eikon { background-color: var(--eikon-brand); color: var(--white)}
.bg-beef {background-color: var(--beef-brand); color: var(--white)}
.bg-winter {background-color: var(--wf-brand); color: var(--white)}
.bg-balmoral {background-color: var(--balmoral-brand); color: var(--white)}
.bg-ruas {background-color: var(--ruas-brand); color: var(--white)}
.bg-white { background-color: var(--white) !important; color: var(--black)}

.card.compCard {
	box-shadow: var(---box-shadow); border: none;
}
	.compCard .card-title {
		font-weight: var(--font-bold); font-family: var(--font-head)
	}
	.compCard .card-img-top { padding-left: 3rem !important; padding-right: 3rem !important; padding-bottom: 2rem !important;}

.countdown {
	font-family: var(--font-head);
	text-align: center;
	
	font-weight: 900;
}
.countdown div {
	display: inline-block;
	margin: 0 10px;
	font-size: 1rem;

}
.countdown span {
	display: block;
	color: var(--black);
	margin-bottom: 15px;
}
#days { color: var(--wf-brand) !important;font-size: 2.5rem !important; }
#hours { color: var(--balmoral-brand) !important;font-size: 2.5rem !important; }
#seconds { color: #AF52DE !important;font-size: 2.5rem !important; }
#minutes { color: var(--ruas-brand) !important;font-size: 2.5rem !important; }

.accordion-button {text-transform: capitalize; font-weight: var(--font-bold);}
body, html {min-height: 100vh;font-family: var(--font-body);  line-height: 170%;} 
body { position: relative; min-height: 100vh; color: var(--black); padding-top: 100px;} 


.cta-panel .img-fluid {width: 100%; object-fit:cover; aspect-ratio: 16/9;}
.btn-outline-primary.dropdown-toggle:hover, .btn-outline-primary.dropdown-toggle.show {color: var(--white)}

h1,h2 {font-family: var(--font-head); font-weight: var(--font-bold)}
h1:after {	height: 5px; background-color: var(--brand-primary); display: block; width: 50px; content: " "; margin-top: 10px;}
.newsTitleRow h1:after {display: none;}
h3 {font-weight:  var(--font-bold); font-size: 1.25rem; line-height: 160%;}

.card.brand-card {cursor: pointer; border-radius: 0px; border: none;}
.card.brand-card picture > img {aspect-ratio: 16/9; object-fit: cover;}
.brand-card .card-body {position: relative;}
  .brand-card .brand-logo {  position: absolute; top: -35px; left: 0px; text-align:center; width: 100%;}
  .brand-logo span,  .brand-logo div {height: 75px; background: var(--white); padding: 5px; ;display: inline-block;}
  	.brand-logo img {max-height: 100%;}

  .breadcrumb {text-transform: capitalize; font-size: 0.75rem;}
  	.breadcrumb a {text-decoration: none;}
	.breadcrumb-item:before {color: var(--brand-primary) !important; font-weight: bold;}

	.card.competitionCard {border: none; border-top: 3px solid var(--brand-primary); margin-bottom: 15px; box-shadow: var(---box-shadow); font-family: var(--font-head);  text-transform: uppercase;}
	.card.competitionCard img {aspect-ratio: 16/9; object-fit: cover;}
	.card.competitionCard  h5 {font-weight: 700 !important;}

.card.galleryCardItem .card-title a {font-family: var(--font-head); text-decoration: none; font-weight: var(--font-bold)}
.card.galleryCardItem {border: 0px; box-shadow: var(---box-shadow); cursor: pointer;}
.card.galleryCardItem img {aspect-ratio: 4/3; object-fit: cover;}

.galleryCard img {aspect-ratio: 1/1; object-fit: cover; cursor: pointer;}
.galleryCard:hover {box-shadow: var(---box-shadow);}
.connectPanel {background: var(--purple); background-image: url("/styles/sails-highlight.svg"); background-size: 40%;     background-position: calc(100% + 130px) calc(100% + 200px);
	background-repeat: no-repeat; color: var(--white); overflow: hidden; position: relative;}
	.connectPanel .sails {width: 30%; position: absolute; bottom: -150px; right: -30px; z-index: 0;}
	.connectContain {z-index: 2;}
		.connectContainImg {width: 50%;}
.ContactDetails h1, .ContactForm h1 {font-size: 1.75em;}
	.ContactForm label, #questionForm label {display: block;}
	.ContactForm div, #questionForm div {margin-bottom: 10px;}
	.ContactForm input[type='text'], .ContactForm input[type='tel'], .ContactForm input[type='email'], .ContactForm textarea {border: 1px solid #888;}
	.notEmail {display: none;}


	#crossSiteHighlight * {
		transition: all ease 0.2s;
	  }
	  
	  #crossSiteHighlight {
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		background: var(--brand-primary);
		display: flex;
		justify-content: flex-end;
		align-items: flex-start;
		height: 6px;
		z-index: 1031;
	  }
	  #crossSiteHighlightMobile {
		margin-top: 50px;
		display: flex;
		justify-content:center;
		align-items: center;
	  }

	  #crossSiteHighlight a, #crossSiteHighlightMobile a{
		display: none;
		align-items: center;
		justify-content: center;
		height: 12px;
		width: 100px;
		position: relative;
		overflow: hidden;
		border-left: 5px solid var(--white);
	  }
	  #crossSiteHighlightMobile a {display: inline-block;
		height: 90px; width: 90px;}

	  #crossSiteHighlight a:last-child {
		border-right: 5px solid var(--white);
		margin-right: 5%;
	  }

	  #crossSiteHighlight a:hover {
		height: 100px;
	  }
	  
	  #crossSiteHighlight a img {
		opacity: 0;
		transition: opacity 0.3s;
		width: 80px;
		}
	
	#crossSiteHighlightMobile a img {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 70px;
	}
	  
	  #crossSiteHighlight a:hover img {
		top: 0;
		opacity: 1;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	  }

/*CTA*/
#cta-panel .panel {width: 100%; position: relative;  aspect-ratio: 1/1; background-size: cover; background-repeat: no-repeat; cursor: pointer;}
	#cta-panel .panel.memberPanel {background-image: url("/download/images/memberCTA.jpg");}
	#cta-panel .panel.contactPanel {background-image: url("/download/images/stayInTouchCTA.jpg");}
	#cta-panel .btn {background-color: rgb(144, 138, 132,0.9); border: 1px solid var(--white); color: var(--white); position: absolute; font-family: var(--font-head); font-weight:  var(--font-bold); font-size: 1.2rem; 
		top: 90%;
		left: 50%;
		min-width: 90%;
		transform: translate(-50%, -50%);
	  }

.eventCard {border: 0px; box-shadow: var(---box-shadow); cursor: pointer;}
.eventCard .card-title {font-family: var(--font-head); font-weight: bold; margin-bottom: 5px;}
.eventCard .dateText {font-size: 2.6rem}
.eventCard .eventDate {aspect-ratio: 1/1; height: 100%; max-width: 120px; background: var(--brand-primary); color: var(--white); font-family: var(--font-head); font-weight:  var(--font-bold); display: flex; align-items: center;}
	.brand-1 .eventDate { background: var(--ruas-brand); }
	.brand-2 .eventDate { background: var(--eikon-brand); }
	.brand-3 .eventDate { background: var(--beef-brand); }
	.brand-4 .eventDate { background: var(--wf-brand); }
	.brand-5 .eventDate { background: var(--balmoral-brand); }
	.brand-1 {fill: var(--ruas-brand)}
	.brand-2 { fill: var(--eikon-brand); }
	.brand-3 { fill: var(--beef-brand); }
	.brand-4 { fill: var(--wf-brand); }
	.brand-5 {fill:  var(--balmoral-brand); }

	.eventYearTitle {font-family: var(--font-head); font-weight:  var(--font-bold);}

	.eventHomeContainer {background-color: var(--white);}
.eventDate .dateMonth {font-size: 1.5rem;}
.eventCard .eventLink {aspect-ratio: 1/1; width: 30px; }

.eventModal .modal-title {font-family: var(--font-head); font-weight:  var(--font-bold);}
.eventModal img {aspect-ratio: 16/9; object-fit: cover;}

.eventHomeContainer .eventCard .dateText {font-size: 2rem;}
.eventHomeContainer .eventCard .dateMonth {font-size: 1.4rem;}
.eventHomeContainer .eventCard .eventDate  {max-width: 75px;}
.eventHomeContainer .eventCard .card-title {font-size: 0.875rem; margin-bottom: 0px;}
.eventHomeContainer .card-body p {font-size: 0.875rem;}

.dataTables_length {margin-bottom: 15px;}
.dataTables_length label, .dataTables_filter label {width: 100%;}
.dataTables_length label select, .dataTables_filter input  {display: inline !important; width: 60px; margin-left: 15px; margin-right: 15px;}
.dataTables_filter input {width: 200px;}
.directoryContainer { 
 box-shadow: var(---box-shadow);
 padding-top: 30px;
}

#directoryTable {margin-top: 15px;}

#eventTabs .nav-link { color:var(--purple);}

#eventTabs .nav-link.active { background-color:var(--purple); color: var(--white)}
#eventTabsContent {box-shadow: var(---box-shadow);}


/* FOOTER */

.footer {
  position: relative;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  font-size: 0.75rem;
  line-height: 140%;
}

.footer a {color: var(--black); font-weight:  var(--font-bold); text-decoration: none;}

.footer .footer-logos img {max-height: 50px !important; margin: 10px;}

form.card {background-color: var(--white)}
/* END FOOTER */

figure {position: relative;}
figure.image {display: inline-block;}
figcaption {position: absolute; bottom: 0px; left: 0px; width: 100%; background: var(--wf-purple); color: var(--white); font-style: oblique; font-size: 0.875rem; padding: 5px; line-height: 130%;}
/* ROTATING IMAGES */
#fpImageDiv {margin-bottom: 0.2rem;}
#fpImageDiv img {object-fit: contain;}
#fpImageDiv .carousel-inner {overflow: visible; } /* border-bottom: 5px solid var(--base-light) */
#fpImageDiv .carousel-control-next-icon, #fpImageDiv .carousel-control-prev-icon {border: 1px solid #fff;width: 1.8rem; height: 1.8rem; padding: 10px; background-size: 90%;}
#fpImageDiv .carousel-caption {width: 90vw; left: 5vw; bottom: -5px; background: var(--brand-primary); text-transform: uppercase; display: none;}
/* END ROTATING IMAGES */



.food-sections {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 15px;
}
.food-section {
	background: #f8f9fa;
	padding: 15px;
	border: 1px solid #ddd;
	border-radius: 5px;
}
.food-section.trade-a {
	grid-column: span 4;
}
@media (max-width: 1024px) {
	.food-sections {
		grid-template-columns: 1fr;
	}
	.food-section.trade-a {
		grid-column: span 1;
	}
}
.food-section {
	background: #f8f9fa;
	padding: 15px;
	border: 1px solid #ddd;
	border-radius: 5px;
}
.food-section h4 {
	margin-top: 1rem;
	border-bottom: 2px solid #6c3483;
	padding-bottom: 0.5rem;
	color: #6c3483;
}
.food-section p {
	margin: 0.5rem 0;
}
.icon {
	display: inline-block;
	padding: 2px;
	margin-right: 5px;
	font-size: 0.675rem; font-weight: bold;
	width: 18px; height: 18px; line-height: 10px; text-align: center;
	border-radius: 50%;
}
.icon-df { background-color: #89CFF0; }
.icon-gf { background-color: #ffcccb; }
.icon-vg { background-color: #98FB98; }
.icon-v { background-color: #FFD700; }


img {max-width: 100%; height: auto !important;}


  /* Styles for the popup */
  .image-popup {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    align-items: center;
    justify-content: center;
  }

  /* Styles for the full-size image */
  .image-caption {
    color: #fff; /* White text */
    padding: 1rem; /* Padding around the text */
    text-align: center; /* Center the text */
    font-size: 1rem; /* Adjust the font size as needed */
    width: 100%; /* Ensure the caption takes up the full width */
    box-sizing: border-box; /* Include padding in the element's total width and height */
    position: absolute; /* Remove the caption from the normal flow to sit at the bottom */
    bottom: 0; /* Position the caption at the bottom of the popup */
    left: 0; /* Align the caption to the left of the popup */
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  }
    
  .image-popup img {
    max-width: 90%;
    max-height: 80%; /* Example adjustment to create space for the caption */
  }

  /* Styles for the close icon */
  .image-popup .close-icon {
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
  }

  .grid-item img, .popupImg {cursor: pointer; box-shadow: var(---box-shadow); padding: 0.3rem;}


.JoinCTA {background-image: url("/download/images/joinHomeCTA.jpg"); background-size: cover; color: var(--white); position: relative; }
.JoinCTA:before {content: " "; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3);z-index: 1;}

.keyFacts {
	flex-wrap: wrap;
	font-size: 4rem; font-weight: 900; 
}
.fact1 { background-color: #C6005B; color: #fff;}
.fact2 { background-color: #0091D9; color: #fff;}
.fact3 { background-color: #4C8C1E; color: #fff;}
.fact4 { background-color: var(--eikon-brand); color: #fff;}

.fact1, .fact2, .fact3, .fact4 {
	min-width: 250px; /* adjust this value as needed */
	flex-grow: 1;
}
.factValue, .valuePerc {font-size: 4rem; font-weight: 900; margin-bottom: 30px;}
.factTitle {font-size: 1.5rem; font-weight: 500; margin-top: 30px;}


#logo img {width: auto; height: auto; max-height:100%; cursor: pointer;}

.navHeading {text-transform: capitalize;}
.masonry-grid {
    column-count: 3;
    column-gap: 1rem;
  }

  @media (max-width: 767px) {
    .masonry-grid {
      column-count: 1;
    }
  }

  @media (min-width: 768px) and (max-width: 991px) {
    .masonry-grid {
      column-count: 3;
    }
  }

  .grid-item {
    break-inside: avoid;
    margin-bottom: 1rem;
  }

.navbar-toggler:focus{
    outline: none !important;
}

.btn:focus {
	box-shadow: none !important;  outline: none !important;

  }


mark {padding: 0px; background: none; border-bottom: 1px solid #a00052;}
  .nav-tabs {font-family: var(--font-head); font-weight: bold; font-size: 0.875rem;}
.nav-tabs .nav-link.active {box-shadow: var(---box-shadow-offset-top); background-color: var(--white); border-bottom: 1px solid var(--white); }
.nav-tabs .nav-link.active svg path {fill: var(--black)}
.nav-tabs svg {height: 24px;}
.nav-tabs svg path {fill: var(--brand-primary)}
.navbar-brand img {max-height: 70px;}

.newsStoryWrap .dropdown-menu, .dropdown .btn {text-transform: capitalize;}
/* Custom styles for the Our Team section */


.openContainer h1 {text-transform: capitalize;}
#our-team .team-member .image-container {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding-top: 65%; /* This is for an image aspect ratio of 16:9, adjust accordingly */
	height: 0;
  }
  
  #our-team .team-member .image-container img {
	width: 100%;
	height: 100%;
	transition: opacity 2s ease-in-out, transform 2.5s ease-in-out; /* Added transform to the transition properties */
	position: absolute;
	top: 0;
	left: 0;
  }
  
  #our-team .team-member .image-container img.top {
	opacity: 0;
  }
  
#our-team .container {
	padding-top: 1rem;
	padding-bottom: 1rem;
  }
  
  #our-team h2, #our-team h3 {
	text-align: center;
	margin-bottom: 1rem;
  }
  
  #our-team ul.list-unstyled {
	padding-left: 0;
	list-style-type: none;
  }
  
  #our-team ul.list-unstyled li {
	margin-bottom: 0.5rem;
  }
  
  /* Styles for team members with images */
  .team-member .image-container {
	position: relative;
	width: 100%;
	overflow: hidden;
  }
  
  .team-member .image-container img {
	width: 100%;
	height: auto;
	transition: opacity 2s ease-in-out;
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
  }
  
  .team-member .image-container img.top {
	opacity: 0;
  }
  
  .team-member .member-name {
	margin-top: 1rem;
  }
  
  /* Hover effect for desktop */
  @media (min-width: 992px) {
	.team-member .image-container:hover img {
		opacity: 0;
		transform: scale(1.1); /* Added to create a zoom-in effect */
	  }
	  .team-member .image-container:hover img.top {
		opacity: 1 !important;
		transform: scale(1.1); /* Added to create a zoom-in effect */
	  }
  }
  
  .siteSearchContainer {position: relative;}
.searchIcon {cursor: pointer}
#SearchFormTop {position: absolute; border-radius: 8px; box-shadow: var(---box-shadow); top: 40px; right: 0px; z-index: 1000; background: #fff; padding: 15px;}

.sponsorContain h2 {text-align: center; text-transform: capitalize;}
.sponsorCard { text-align: center; border: none; box-shadow: var(---box-shadow); padding: 15px; }
.ratio, .ratio img {aspect-ratio: 4/3 !important;}

body[data-fp="competitions"] .ratio, body[data-fp="competitions"] .ratio img {aspect-ratio: 36/9 !important;}
.platinumCat .ratio, .platinumCat .ratio img {aspect-ratio: 20/9 !important;}
.otherCat .ratio, .otherCat .ratio img {aspect-ratio: 32/9 !important;}

.sponsorCard img {object-fit: contain; height:inherit !important;}
.todaysEventsContainer {background:  linear-gradient(#98bd2d 0%, #77961f 100%); position: relative; overflow: hidden;  z-index: 1; /* Ensure the container has a z-index */}
  .todaysEventsContainer:after {content: url("logoelementFadeWhite.svg"); position: absolute; bottom: -80px; z-index: 0}
  .todaysEventsContainer * {
	position: relative;
	z-index: 1; /* Ensure all other content has a higher z-index */
  }
  .event-item {
	display: flex;
	align-items: center;
	padding: 15px;
	margin-bottom: 10px;
	border: 1px solid #98bd2d;
	color: var(--black) !important;
}
.event-item:nth-child(even) {
	background-color: #e6f4d3;
}
.event-item:nth-child(odd) {
	background-color: #f9f9f9;
}
.event-time {
	font-weight: bold;
	font-size: 1.2em;
	flex: 1;
}
.event-details {
	font-size: 1em;
	flex: 3;
}


footer li {margin-bottom: 10px;}

  #topBanner {border-bottom: 5px solid var(--base-light); background-color: var(--white);}
.topBannerImageContainer {position: relative;}
.topBannerImageContainer { text-transform: uppercase; font-size: 2.4rem; z-index: 10}
.topBannerImageContainer picture img {aspect-ratio: 16/9; object-fit: cover; object-position: top center; position: relative;}
.topBannerImageContainer .bannerHeaderText {position: absolute; bottom: 10%; width: 100%; text-align: center; font-family: var(--font-head); font-weight:  var(--font-bold); color: var(--white); text-shadow: 0px 0px 20px rgba(0,0,0,0.4); z-index: 20}

body[data-path="sub"] .topBannerImageContainer picture img {aspect-ratio: 3/1 !important; }

/* ==|== Everything Else =====================================================================
   Alphabetically ordered unles it's nested (.level2 will be nested with #submenu for example)
   =========================================================================================== */


.list-group { box-shadow: var(---box-shadow);}
	.list-group-item {border-color: var(--white);}


.month li, .year li {display: none;}
.month li.monthName, .month li.yearName {display: block;}


.visitMapContainer {width: 100%; aspect-ratio: 16/9; position: relative;}
.map-text {position: relative; padding: 30px;}
#eikonMap {position: relative; width: 100%; height: 100%;}
#eikonContactMap {aspect-ratio: 16 / 9; width: 100%;}

#map_canvas {width: 100%; min-height: 350px;}

.navbar-toggler * {transition: all 0.2s ease;}
.navbar-toggler {border: none; }
	.navbar-toggler[aria-expanded="true"] span {transform: rotate(-90deg);}


/* NEWS */
.newsFrontPage figure {min-height: 300px; background-size: cover;}
.newsImage {padding-top: 56%; background-size: cover; background-repeat: none;}
.dlLinkContain a {text-decoration: none;}
.newsCard, .downloadCard {cursor: pointer; border: 0px; background: var(--white); box-shadow: 0px 15px 25px rgba(144,138,132,0.3);}

.downloadCard:hover {cursor: pointer; border: 0px; background: var(--white); box-shadow: 0px 15px 15px rgba(144,138,132,0.2);}
	.newsCard .imageContain {border-bottom: 5px solid var(--brand-primary)}

	.brand-1 .imageContain { border-bottom: 5px solid var(--ruas-brand); }
	.brand-2 .imageContain { border-bottom: 5px solid var(--eikon-brand); }
	.brand-3 .imageContain { border-bottom: 5px solid var(--beef-brand); }
	.brand-4 .imageContain { border-bottom: 5px solid var(--wf-brand); }
	.brand-5 .imageContain { border-bottom: 5px solid var(--balmoral-brand); }
	.newsCard h4:after {height: 1px; display: block; width: 50px; content: " "; margin-top: 10px;}
	.brand-1 h4:after { border-bottom: 5px solid var(--ruas-brand); }
	.brand-2 h4:after { border-bottom: 5px solid var(--eikon-brand); }
	.brand-3 h4:after { border-bottom: 5px solid var(--beef-brand); }
	.brand-4 h4:after { border-bottom: 5px solid var(--wf-brand); }
	.brand-5 h4:after { border-bottom: 5px solid var(--balmoral-brand); }

	.newsCard .imageContain img {aspect-ratio: 16/9; object-fit: cover;}
	.newsCard .card-title a {font-family: var(--font-head); font-weight:  var(--font-bold); color: var(--black); text-decoration: none;}
.newsCard:hover {box-shadow: 0px 5px 15px rgba(144,138,132,0.4);}

.newsCard a {color: var(--black); text-decoration: none;}

.newsTitleRow {text-align: center;}
	.newsTitleRow h1 {text-transform: capitalize;}

	.newsTitleRow .date {display: inline-block; border-bottom: 5px solid var(--brand-primary); padding-bottom: 15px;}
.introduction h5 {
	line-height: 180%;
	margin-bottom: 40px;
	}
	
.card-text {
	position: relative;
	max-height: 200px;
	overflow: hidden;
  }
  
  .card-text::after {
	content: '';
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 50px;
	background: linear-gradient(transparent, var(--white));
  }



  .break-out {
	position: relative;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	max-width: 100vw;
	width: 100vw !important;
  }


.parallax {
	position: relative;
	height: 40vh;
	overflow: hidden;
  }
  


  .parallax img, .parallax video {
	position: absolute;
	top: 0;
	left: 0;
	height: 40vh !important;
	width: 100% !important;
	object-fit: cover;
	transform: translate3d(0, 0, 0);
  }
  .parallax .figure-caption {position: absolute; bottom: 0px; background: #fff;  text-align: center; margin: auto; padding-top: 30px;}

  .parallax h2 { position: absolute; top: 30vh; color: #fff;text-align: center; width: 100%; font-weight: 900; text-shadow: 0px 0px 15px rgba(0,0,0,0.8);	width: 80%;
	left: 10%; font-size: 8vw; line-height: 95%; }

  .carousel .parallax img {height: auto !important;}

  .carousel.projectCarousel img {aspect-ratio: 16/9; object-fit: cover; cursor: pointer;}
  .carousel.projectCarousel .carousel-item {position: relative;}
  .carousel.projectCarousel .carousel-caption {background-color: rgba(0,0,0,0.6);}
  .carousel.projectCarousel .carousel-item .credit a {color: #fff;}


/* PRODUCTS */
.AttributeValuesList {font-size: 1.4rem; }
.AttributeValuesList .active, .AttributeValuesList .active:hover {background-color: #888; border-color: #888}
.AttributeValuesList .list-group-item {padding: 10px; cursor: pointer;display: none;}
.AttributeValuesList .list-group-item.active, .AttributeValuesList .list-group-item.visible {display: block;}
.AttributeValuesList img {max-width: 30px; height: auto;}

.showhideOptions {cursor: pointer; font-size: 1.2rem; margin-top: 10px;}


/* END PRODUCTS */


/* SILVERINK LINK */
#silverinkWebDesign {
	font-size: 10px;
	font-family: helvetica, arial;
	margin-left: -2px;
	margin-top: 5px;
}
#silverinkWebDesign 	a {
	color: #888;
}

.socialContainer {position: relative;}
#socialIcons {position: absolute; top: 40px; right: 0px; background: #fff; box-shadow: var(---box-shadow); padding: 10px; padding-right: 15px; padding-bottom: 15px;border-radius: 8px; min-width: 110px; z-index: 1000;}
.social-icons .social-icon img {width: 18px; }
.connectPanel .social-icons .social-icon img {width: 22px; }

.social-icons-mobile .social-icon img {width: 24px; }
.socialShareLinks {float: right}
.socialShareLinks svg {width: 22px; margin-left: 15px;}
  
  /* Timeline Container */
  /* Card container */
  .tcard {
	position: relative;
	max-width: 100%;
  }
  
  /* setting padding based on even or odd */
  .tcard:nth-child(odd) {
	padding: 30px 0 30px 30px;
  }
  .tcard:nth-child(even) {
	padding: 30px 30px 30px 0;
  }
  /* Global ::before */
  .tcard::before {
	content: "";
	position: absolute;
	z-index: -1;
	width: 50%;
	border: solid var(--brand-primary);
  }
  
  /* Setting the border of top, bottom, left */
  .tcard:nth-child(odd)::before {
	left: 0px;
	top: -5px;
	bottom: -5px;
	border-width: 5px 0 5px 5px;
	border-radius: 50px 0 0 50px;
  }
  
  /* Setting the border of top, bottom, right */
  .tcard:nth-child(even)::before {
	right: 0;
	top: 0;
	bottom: 0;
	border-width: 5px 5px 5px 0;
	border-radius: 0 50px 50px 0;
  }
  
  /* Removing the border if it is the first card */
  .tcard:first-child::before {
	border-top: 0;
	border-top-left-radius: 0;
  }
  
  /* Removing the border if it is the last card  and it's odd */
  .tcard:last-child:nth-child(odd)::before {
	border-bottom: 0;
	border-bottom-left-radius: 0;
  }
  
  /* Removing the border if it is the last card  and it's even */
  .tcard:last-child:nth-child(even)::before {
	border-bottom: 0;
	border-bottom-right-radius: 0;
  }
  
  /* Information about the timeline */
  .info {
	display: flex;
	flex-direction: column;
	background: var(--white);

	color: var(--black);
	border-radius: 10px;
	padding: 10px;
  }
  
  /* Title of the card */
  .title {
	color: var(--black);
	position: relative;
  }
  
  /* Timeline dot  */
  .title::before {
	content: "";
	position: absolute;
	width: 15px;
	height: 15px;
	background: white;
	border-radius: 999px;
	border: 3px solid var(--brand-primary);
  }
  
  /* text right if the card is even  */
  .tcard:nth-child(even) > .info > .title {
	text-align: right;
  }
  
  /* setting dot to the left if the card is odd */
  .tcard:nth-child(odd) > .info > .title::before {
	left: -45px;
  }
  
  /* setting dot to the right if the card is odd */
  .tcard:nth-child(even) > .info > .title::before {
	right: -45px;
  }
  
  
  
  
  
/* Basic reset to remove default list styles */
#SubMenuUl {
    list-style: none;
    padding: 0;
    margin: 0;
	box-shadow:  var(---box-shadow);
}

/* Style for all the list items */
#SubMenuUl .nav-item {
    border-bottom: 1px solid var(--brand-primary); /* Red bottom border for each item */
}

#SubMenuUl .nav-item:last-child {
    border-bottom: none; /* Red bottom border for each item */
}
/* Style for the links */
#SubMenuUl .nav-link {
    color: var(--black); /* Black text color */
	padding: 10px;
	padding-right: 90px;
    text-decoration: none; /* Removes underline from links */
    display: block; /* Makes the link fill the entire list item for larger click area */
    position: relative; /* Positions relative for the pseudo-element */
	text-transform: capitalize;
}

/* Style for the arrows */
#SubMenuUl .nav-link::after {
    content: '';
    display: block;
    width: 1em; /* Adjust the size as needed */
    height: 1em; /* Adjust the size as needed */
    background-image: url("data:image/svg+xml,%3Csvg id='arrow_right_square' data-name='arrow right square' xmlns='http://www.w3.org/2000/svg' width='19.3' height='29.692' viewBox='0 0 19.3 29.692'%3E%3Cpath id='arrow_right_square-2' data-name='arrow right square' d='M4.454,0,0,4.454,10.392,14.846,0,25.238l4.454,4.454L19.3,14.846Z' transform='translate(0 0)' fill='%2398BD2D'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none; /* Remove if you want a border around the pseudo-element */
}


/* Style for the selected item */
#SubMenuUl .nav-link.active {
    background-color: var(--brand-primary); /* Blue background color for selected item */
    color: #FFFFFF; /* White text color for the selected item */
}
#SubMenuUl .nav-link.active::after {
    background-image: url("data:image/svg+xml,%3Csvg id='arrow_right_square' data-name='arrow right square' xmlns='http://www.w3.org/2000/svg' width='19.3' height='29.692' viewBox='0 0 19.3 29.692'%3E%3Cpath id='arrow_right_square-2' data-name='arrow right square' d='M4.454,0,0,4.454,10.392,14.846,0,25.238l4.454,4.454L19.3,14.846Z' transform='translate(0 0)' fill='%23ffffff'/%3E%3C/svg%3E");
}

li.level2.active:has(+ li.level3) > .nav-link  {
    background-color: var(--white) !important; /* Style as needed */
	font-weight: bold !important;
	color: var(--black) !important;
	
	border-left: 5px solid var(--brand-primary)

}

li.level2.active:has(+ li.level3) > .nav-link::after {
	background-image: url("data:image/svg+xml,%3Csvg id='arrow_right_square' data-name='arrow right square' xmlns='http://www.w3.org/2000/svg' width='29.692' height='19.3' viewBox='0 0 30 30'%3E%3Cpath id='arrow_right_square-2' data-name='arrow right square' d='M4.454,0,0,4.454,10.392,14.846,0,25.238l4.454,4.454L19.3,14.846Z' transform='rotate(90 9.65 14.846)' fill='%2398BD2D'/%3E%3C/svg%3E") !important;
	width: 24px !important; margin-left: 10px;
}


li.level3  > .nav-link  {
	color: var(--black); /* Black text color */
	border-left: 5px solid var(--brand-primary)

}

#topMenu .navbar-nav {font-family: var(--font-head);
	font-weight: var(--font-bold);
	text-transform: uppercase;
	font-size: 1.45rem;
	text-align: center;
	}

#topMenu .navbar-nav a {color: var(--black);}
#topMenu .dropdown-toggle::after {display: none;}
#topMenu .dropdown-menu {border-radius: 0px; border: 0px; box-shadow:  var(---box-shadow); text-align: center;}

/* ==|== media queries ======================================================
   Media Queries for Responsive Design.
   These override the primary ('mobile/desktop first') styles
   Modify as content requires.
   ========================================================================== */


   .video-container {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	height: 0;
	overflow: hidden;
}
.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/*===============================*/
/* 480 - LANDSCAPE MOBILE LAYOUT */
/*===============================*/

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */

}





















/*=====================*/
/* 768 - TABLET LAYOUT */
/*=====================*/
@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */

#days { color: var(--wf-brand) !important;font-size: 4rem !important; }
#hours { color: var(--balmoral-brand) !important;font-size: 4rem !important; }
#seconds { color: #AF52DE !important;font-size: 4rem !important; }
#minutes { color: var(--ruas-brand) !important;font-size: 4rem !important; }

  #cta-panel .btn {font-size: 1rem;		min-width: 60%;}
  #crossSiteHighlight a {display: flex;}

  .eventHomeContainer .eventCard .eventDate  {min-width: 110px;}
.eventHomeContainer .eventCard .card-title {font-size: 1.25rem; margin-bottom: 0px;}

	/* ROTATING IMAGES */
	#fpImageDiv {margin-bottom: 1rem;}

	#fpImageDiv .carousel-caption {width: 50vw; left: 25vw; bottom: -5px;}
	/* END ROTATING IMAGES */

	.footer {  font-size: 0.875rem; line-height: 150%;}
	.footer .footer-logos img {max-height: 60px !important; margin: 10px;}

  #mobileMenu {display: none !important;}

  .parallax {
	position: relative;
	height: 60vh;
	overflow: hidden;
  }
  .parallax img, .parallax video {
	position: absolute;
	top: 0;
	left: 0;
	height: 70vh !important;
	width: 100% !important;
	object-fit: contain;
	transform: translate3d(0, 0, 0);
  }

	#topMenu .dropdown-toggle::after {display: none;}
	#topMenu .dropdown-menu {border-radius: 0px; border: 0px; box-shadow: var(---box-shadow);}
	.topBannerImageContainer picture {position: relative; text-transform: uppercase; font-size: 1.8rem;}
	.topBannerImageContainer picture img {aspect-ratio: 24/9; object-fit: cover; }
	
		#cta-panel {clear: both; overflow: hidden}
  #cta-panel .panel {width: 50%; float: left; display: inline !important;}

}












/*=======================*/
/* 1024 - DESKTOP LAYOUT */
/*=======================*/
@media only screen and (min-width: 992px) {
  /* Style adjustments for viewports 1024px and over go here */
  body {padding-top: 135px;}
  #cta-panel .btn {font-size: 1.25rem; }
  #eventTabs {font-size: 1rem;}


  footer li {margin-bottom: 2px;}

  .map-text {position: absolute; top: 100px; left: 60px; max-width: 50vw; background: #fff; z-index: 999; padding: 30px; box-shadow: var(---box-shadow);}

  .navbar-brand img {max-height: 105px;}

  #topMenu .navbar-nav { font-size: 1.125rem; }
  #topMenu .navbar-nav {font-family: var(--font-head);
	font-weight:  var(--font-bold);
	text-transform: uppercase;
	}
	#topMenu .dropdown-menu {text-align: left;}



  #topMenu .navbar-nav { font-size: 1rem; }
  #topMenu .navbar-nav a {color: var(--black);border-bottom: 5px solid transparent}
	#topMenu .navbar-nav .nav-item > a:hover, #topMenu .navbar-nav .nav-item > a:has(+ .dropdown-menu[style="display: block;"]), #topMenu .navbar-nav .nav-item.selected > a, #topMenu .navbar-nav .nav-item .active {border-bottom: 5px solid var(--brand-primary)}
	
	body[data-path="sub"] .topBannerImageContainer picture img {aspect-ratio: 4/1 !important; }

	.vTopNavTextLinks a {color: var(--black); font-weight: bold; text-decoration: none; text-transform: uppercase; font-size: 0.75rem;}

}










/* WIDE DESKTOP LAYOUT */
@media only screen and (min-width: 1200px) {
  /* Style adjustments for viewports 1200px and over go here */

  #days { color: var(--wf-brand) !important;font-size: 5rem !important; }
#hours { color: var(--balmoral-brand) !important;font-size: 5rem !important; }
#seconds { color: #AF52DE !important;font-size: 5rem !important; }
#minutes { color: var(--ruas-brand) !important;font-size: 5rem !important; }

  #cta-panel .btn {font-size: 1.55rem; }

  #topMenu .navbar-nav { font-size: 1.25rem; }
}



























#pdfTabContent {background-color: var(--white); background-image: url("logos/beefLamb-logo-white.svg"); background-size: 70%; background-repeat: no-repeat; background-position: center center; border-left: 1px solid var(--bs-secondary-bg); border-right: 1px solid var(--bs-secondary-bg); border-bottom: 1px solid var(--bs-secondary-bg); position: relative;}

.pdf-viewer {
	position: relative;
	min-height: 800px; /* Adjust as necessary */
	max-height: 850px;
	overflow: hidden;
}

.control-contain {
	position: relative;
	display: block;
	top: 10px;
	left: 10px;
}

.controls {
	position: relative;
	display: inline-block;
	margin: 15px auto;
	background: rgba(255, 255, 255, 0.8);
	padding: 10px;
	border-radius: 5px;
	z-index: 1000;
}

.download-btn svg, .btn-next svg, .btn-prev svg {width: 18px; }
.download-btn svg path {fill: var(--brand-primary)}
.download-btn:hover svg path {fill: var(--white)}

.btn-next svg path, .btn-prev svg path {fill: var(--white)}

#pdf-container-catalogue, #pdf-container-prize-schedule, #pdf-container-exhibitors-manual {
	margin:auto; width: auto; overflow-x: hidden;
}

.tab-content canvas {z-index: 2;max-width: 100% !important; max-height: 650px; margin: auto;box-shadow: var(---box-shadow);}




/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.

RESPONSIVE TABLE
*/
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	.respTable table, .respTable thead, .respTable tbody, .respTable th, .respTable td, .respTable tr {
		display: block;
		height: auto !important;
		width: 100%;
		padding: 10px;
		text-align: center;
		margin-bottom: 10px;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	.respTable thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.respTable tr { border: 1px solid #ccc; box-shadow:  0px 0px 6px rgba(80,80,80,0.2)}

	.respTable td {
		/* Behave  like a "row" */
		border: none !important;
		position: relative;
		width: 100% !important;

	}

	.respTable td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
	}

}







/* DEAL WITH SUB MENU ON MOBILE */
    /* Custom CSS for better visibility of the toggle */
    /* Custom CSS for better visibility of the toggle */
    /* Smooth transition for the submenu */
    #SubMenuUl.collapse {
        transition: height 0.3s ease-out;
        overflow: hidden; /* Hide overflow to prevent layout issues */
    }

    #SubMenuUl.collapsing {
        height: 0;
    }

    @media (max-width: 991.98px) { /* Change breakpoint to lg */
        #SubMenuUl {
            display: block; /* Ensure block layout for submenu */
            height: 0; /* Initial height for collapse state */
        }

        #SubMenuUl.show {
            height: auto; /* Allow it to expand naturally */
        }

        #SubMenuToggle {
            display: block; /* Show the toggle button on screens smaller than lg */
				background-image: url("submenu.svg");
				background-repeat: no-repeat;
				background-position: right;
				background-size: contain;
			
        }
        #SubMenuToggle:hover {
			background-image: url("submenu_hover.svg");			
        }
    }

    @media (min-width: 992px) {
        #SubMenuUl {
            display: block !important; /* Ensure submenu is always visible on larger screens */
            height: auto; /* No height restriction */
        }
        #SubMenuToggle {
            display: none; /* Hide the toggle button on larger screens */
        }
    }


/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}



.animate {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 2s, transform 1s;
}

.animate.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in {
    opacity: 0;
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@media screen and (prefers-reduced-motion: reduce) {
	.animate { animation: none !important; }
  }


  .owl-carousel .owl-item img {
	height: 100% !important;
	aspect-ratio: 16 / 9;
	width: 100% !important; /* Cover the width of the item */
	object-fit: cover; /* Cover the area without stretching the image */
  }
  
  

  #events-carousel .owl-stage-outer {
	overflow: visible; /* Make overflow visible to show the padded items */
  }
  
  #events-carousel .owl-item {
	transition: opacity 0.5s ease; /* Smooth transition for opacity changes */
	opacity: 0.5; /* Set a low opacity for inactive items */
  }
  
  #events-carousel {
    overflow: hidden;
}
  @media (max-width: 992px) {

	#events-carousel .owl-item:not(.fully-visible) {

	transition: transform 0.5s ease, opacity 0.5s ease; /* Smooth transition for transforms and opacity changes */
	transform: scale(0.8); /* Scale down by default */
	opacity: 0.5; /* Dim by default */
  }
}
  #events-carousel .owl-item.custom-center {
	opacity: 1; /* Make the central item fully opaque */
  }
  
  @media (min-width: 992px) {
	/* Remove the styles for desktop as carousel is disabled here */
	#events-carousel .owl-item,
	#events-carousel .owl-item.custom-center {
	  opacity: 1;
	}
  }
  

  body[data-itemid="19"] #SubMenuUl {
	display: block !important; 
	height: auto; /* No height restriction */
}
  

    /* FUTURE TICKETING OVERRIDES */
	#ft_container {padding: 0px; box-shadow: none;}
	#ft_shop_purchase_ul {padding: 5px;}
	#ft_screen #ft_ticket_type_ul .ft_ticket_type_li {border-bottom: 2px solid var(--brand-primary);}
  
	.ft_button_a, .ft_button_div, .ft_form_submit, #ft_frmNoRegister .ft_form_submit {
	  background-color: var(--brand-primary); border: none;
	}
  
	.ft_button_a:hover, .ft_button_div:hover, .ft_form_submit:hover, #ft_frmNoRegister:hover .ft_form_submit:hover {
	  background-color: var(--brand-primary); border: none;
	}