/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
	
	
	KW 7-6-2025 Modal close button (x) make RED colour
-----------------------------------------------------------------*/
a:hover {color: var(--primary)}

a,
.menu-item:hover > .menu-link,
.menu-item.current > .menu-link,
.dark .menu-item:hover > .menu-link,
.dark .menu-item.current > .menu-link,
.entry-title h2 a:hover,
.entry-title h3 a:hover,
.entry-title h4 a:hover,
.post-timeline .entry:hover .entry-timeline,
.post-timeline .entry:hover .timeline-divider,
.comment-content .comment-author a:hover,
.tab-nav-lg li.ui-tabs-active a,
.btn-link,
.page-link,
.page-link:hover,
.page-link:focus,
.fbox-plain .fbox-icon i,
.fbox-plain .fbox-icon img,
.fbox-border .fbox-icon i,
.fbox-border .fbox-icon img,
.dark .menu-item:hover > .menu-link,
.dark .menu-item.current > .menu-link,
.dark .entry-title h2 a:hover,
.dark .entry-title h3 a:hover,
.dark .entry-title h4 a:hover,
.dark .tab-nav-lg li.ui-tabs-active a { color: #dea740}

body.device-lg:not(.stretched) #header.sticky-header #header-wrap {
    width: 1220px;
    left: 50%;
    margin-left: -610px;
}

body.device-md:not(.stretched) #header.sticky-header #header-wrap {
    width: 1000px;
    left: 50%;
    margin-left: -500px;
}

/* Sections buttons and on hover */
.beaver, .beaver a:hover {background-color: #03b0da;color: #dea740}
.cub, .cub a:hover {background-color: #2ba359;color: #4ae4b4}
.scout, .scout a:hover  {background-color: #2b5843;color: #daa242}
.volunteer {background-color: #2b5843;color: #daa242}

.bg-scoutpurplec {background-color: var(--primary) !important}
.bg-yellow {background-color: var(--yellow) !important}
.bg-blue { background-color: var(--blue) !important}

/* Calendar*/
.events-calendar-header{ height:40px}
.fc-calendar .fc-head{ height:34px; line-height:34px}
.fc-calendar .fc-body{height:468px}
 

.card-body {padding: 0.65rem;border-radius: 2px}

.col-padding {padding: 2rem}

#content p { line-height:1.4rem;}

#content-wrap, .content-wrap  {padding: 30px 0px}

#copyrights {padding: 20px 0;background-color: #000}
.copyright-links a:hover {
	color: var(--yellow)!important;
}

.device-md .slider-caption h4 display-4 { font-size: 1.3rem; }
.device-sm .slider-caption h4 display-4 { font-size: 1rem; }
.device-xs .slider-caption h4 display-4 { font-size: 0.6rem; }

.display-4 {
	font-size: 2.25rem;
	font-weight: 400;
	line-height: 1.2;
	font-family: 'Nunito Sans', sans-serif;, cursive !important;
	color: var(--yellow) !important;
}
.display-6 {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
}

.divider {margin: 2rem auto}

#footer {border-top: 4px solid rgba(0,0,0,0.2)}

#footer .footer-widgets-wrap {
	position: relative;
	padding: 20px 0;
}

h1, h2, h3, h4, h5, h6 {color: var(--primary);margin: 0 0 20px 0}
h5, h6 {margin: 0 0 10px 0 !important}

h4 { font-size: 20px}
h5 { font-size: 1rem}

.heading-block { margin-bottom: 20px; }
.heading-block h2 { font-size: 32px; }
.heading-block::after {display:none;}

.header-size-lg #header-wrap #logo img {height: 100px}

#header-wrap,
#header.sticky-header #header-wrap, .highlight {background-color: var(--primary)}

.header-wrap-clone {height: 132px !important}

.img-left, .img-right {
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  max-width: 100%;
  height: auto;
}
.img-left {float:left;margin:10px 20px 10px 5px}
.img-right {float:right;margin:10px 5px 10px 20px}

.lead{font-size:1rem}
.line, .double-line {margin: 2rem 0}

.list-group-item-action:hover, .list-group-item-action:focus {
	z-index: 1;
	color: #495057;
	text-decoration: none;
	background-color: #EEEEEE;
}
.menu-link {
	color: #FFF;
	font-family: 'Nunito Sans', sans-serif;, cursive;
}

.min-vh-46 {min-height: 46vh !important}

.modal-top .mfp-content {
	position: absolute;
	left: 0;
	top: 0;
}

p {margin-bottom:10px}

#page-title {padding: 2rem 0}

#page-title h1 {
	font-size: 1.5rem;
	text-transform: none !important;
}

#page-title h1, #page-title span {color:WHITE; font-weight:bold;}

/* Root scouts uk guidline colours*/
:root {
  --primary: #7413dc; 
  --secondary: #6c757d;  
  --blue: #006ddf;
  --purple: #7413dc;
  --pink: #ffb4e5;
  --red: #e22e12;
  --yellow: #ffe627;
  --green: #23a950;
  --danger: #e22e12;
 }

.section {
	position: relative;
	width: 100%;
	margin: 14px 0;
	padding: 14px 0;
	background-color: #FFF;
	overflow: hidden;
}

.section-details p { color: #2a2a2a}
.special{ border-top:2px solid var(--red);border-bottom:2px solid var(--red)}

.stretched #wrapper { border-top:4px solid var(--yellow)}

.style-3 .menu-container > .menu-item.current > .menu-link {
	color: #FFF !important;
}


.svg-trigger path{ stroke:#FFF}
.team.full-border {
	border: 3px solid  #7413dc;
	border-color: var(--primary);
	border-radius: 3px;
}

.team-title h4 {
	text-transform: none !important;
}

textarea {resize: none}

.text-muted{color:#999ca0 !important}

#top-social a {color: #2a2a2a}

.transparent {
   filter: alpha(opacity=30);
   -moz-opacity: 0.3;
   -khtml-opacity: 0.3;
   opacity: 0.3;
}
/* Remove default bullets repolace with colored ones */
ul.beavers, ul.cubs,  ul.scouts, ul.scoutpurple {
  list-style: none; 
}

ul.beavers li::before, ul.cubs li::before, ul.scouts li::before, ul.scoutpurple li::before {
  content: "\2022";  /* \2022 is the CSS Code/unicode for a bullet */
  color: #4ae4b4; /* Change the color */
  font-weight: bold; 
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; 
  margin-left: 1rem; 
}

.welcome h1{ margin-bottom:3px; color: var(--primary);text-transform: none !important;}
.beaversc, ul.beavers li::before{color: #03b0da !important}
.cubsc, ul.cubs li::before {color: #2ba359 !important}
.scoutsc, ul.scouts li::before {color: #2b5843 !important}
.volunteersc, .scoutpurplec, ul.scoutpurple li::before {color: #7413dc !important}


/* All media css*/ 
@media (min-width: 992px) {

/* Sub-Menu On-Hover Dropdown */
.sub-menu-container,
.mega-menu-content {border-top: none !important}
}

@media (max-width: 768px) {
 .sub-menu-container .menu-item > .menu-link {color: #FFF}
}

@media (max-width: 575.98px) {
#logo img {height: 60px !important}
}

.mfp-close {color:RED}