@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');

.navbar-connect {
	background-color: #ffffff !important;
	border: none !important;
	border-bottom: 1px solid #e0e0e0 !important;
	min-height: 90px;
	padding: 0 5%;
}

.navbar {
	min-height: 90px !important;
	display: block;
}

#navbar-connect3, #navbar-connect1 {
	display: flex !important;
}

#navbar-connect3, #navbar-connect1  a {
	font-weight: bold !important;
	color: #000 !important;
}

#navbar-connect3, #navbar-connect1  a:hover {
	text-decoration: underline !important;
}

.cap-wrapper .portal-styling .navbar--connect .container-fluid {
	height:80px;
		padding-top:5px;
}

.welcome_guest_mobile {
	display: none !important;
	height: 0 !important;
}

.cap-wrapper .portal-styling .navbar--connect .container-fluid::before {
	content: "";
	display: inline-block;
	width: 150px;
	height: 70px;
	margin-right: 10px;

	background: url('../images/LBWF-Logo.svg') no-repeat center;
	background-size: contain;
	vertical-align: middle;
}

.cap-wrapper .nav.nav-pills>li {
    background-color: #FFFFFF !important;
    border: 0px !important;
}

.cap-wrapper .nav-pills>li.active>a {
    background-color: #FFFFFF !important;
}

.table_flex {
	margin-left: auto;
}

/* Footer */

.footer {
    padding: 3em;
    background-color: #000000;
    color: var(--color-white);
	font-size: 16px !important;
}

.c-wf-logo__img {
    height: auto;
    width: 125px !important;
	filter: invert(1) !important;
}

@media (min-width: 992px) {
    .footer__cell--logo {
        margin-bottom: 3rem;
    }
}

.lgd-container {
    max-width: 120rem;
    margin-inline: auto;
    width: 100%;
}

.footer__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    column-gap: 30px; 
    row-gap: 40px; 
    padding: 40px 0;
}

.footer__cell--logo {
    grid-column: 1;
    grid-row: 1;
}

.footer__cell--popular-tasks {
    grid-column: 1;
    grid-row: 2; 
}

.footer__cell--contact {
    grid-column: 2;
    grid-row: 2; 
}

.footer__cell--a11y {
    grid-column: 4;
    grid-row: 2;     
}

.footer__cell--a11y a {
    color: var(--color-white);
}

.footer__cell--a11y a:hover {
    text-decoration-thickness: 3;
}

.footer__cell--copyright {
    grid-column: 1;
    grid-column-end: 3;
    grid-row: 3;
    font-size: 14px;
}

.footer__cell--bottom-nav {
    grid-column: 3 / 5;
    grid-row: 3; 
    font-size: 14px;
    justify-self: end; 
    
    align-self: end;
}

#block-waltham-forest-footerlinks-2-menu {
    display:none;
}

.footer h2 {
    font-size: 27.2 !important;
    font-weight: 700 !important;
	color: white !important;
}

.footer p {
	color: white;
}

.footer-nav__item {
    text-decoration: underline;
    list-style: none;
    padding: 4px;
	color: white !important;
}

.footer-nav__item:hover {
    text-decoration-thickness: 3px;
}

.footer-nav--vertical {
    padding-left:0px;
}

.footer-nav--horizontal {
    display: flex;
    flex-direction: row;
    padding-left:0px;
}

.footer-nav--horizontal .footer-nav__item {
    margin-right: 3rem;
}

.footer-nav__item a {
    color: var(--color-white);
}

/* Social Media Links */

.social-media-link {
    color: var(--color-white);
    --fa-font-family: "Font Awesome 6 Brands";
    border-radius: var(--border-radius);
    display: inline-block;
    height: 45px;
    margin: 0 1rem 0 0;
    padding: unset;
    position: relative;
    text-decoration: none;
    width: 45px;
	font-weight: 400 !important;
	color: white !important;
}

.social-media-link:before {
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

.social-media-link:hover {
    background: #FFCC23;
    color: #000
}

.social-media-link:hover:visited {
    color: #000
}

.social-media-link:hover:before {
    color: #000
}

.social-media-link:not([class*=toolbar]):focus,.social-media-link:not([class*=toolbar]):focus-visible {
    background: var(--color-hover);
    -webkit-box-shadow: 0 4px var(--color-charcoal);
    box-shadow: 0 4px var(--color-charcoal)
}

.social-media-link:not([class*=toolbar]):focus:before,.social-media-link:not([class*=toolbar]):focus-visible:before {
    color: #000
}

.social-media-link:visited {
    color: var(--color-white)
}

.social-media-link:last-of-type {
    margin: 0
}

.social-media-link--x:before {
    content: "";
    font-family: var(--fa-font-family);
    font-size: 1rem;
    font-weight: 900;
    font-size: 2.5rem
}

@media(min-width: 992px) {
    .social-media-link--x:before {
        font-size:1.5rem
    }
}

.social-media-link--instagram:before {
    content: "";
    font-family: var(--fa-font-family);
    font-size: 1rem;
    font-weight: 900;
    font-size: 2.5rem
}

@media(min-width: 992px) {
    .social-media-link--instagram:before {
        font-size:1.5rem
    }
}

.social-media-link--facebook:before {
    content: "";
    font-family: var(--fa-font-family);
    font-size: 1rem;
    font-weight: 900;
    font-size: 1.5rem;
    left: calc(50% - 1px)
}

@media(min-width: 992px) {
    .social-media-link--facebook:before {
        font-size:1.5rem
    }
}

.social-media-link--youtube:before {
    content: "";
    font-family: var(--fa-font-family);
    font-size: 1rem;
    font-weight: 900;
    font-size: 2rem;
    left: 50%
}

@media(min-width: 992px) {
    .social-media-link--youtube:before {
        font-size:1.5rem
    }
}

.social-media-link--instagram:before,.social-media-link--youtube:before,.social-media-link--facebook:before {
    font-weight: 400
}

@media (max-width: 768px) {
	
	.footer__inner {
		grid-template-columns: 1fr !important;
	}
	
	.footer__inner > * {
		grid-column: 1 / -1 !important;
		grid-row: auto !important;
	}
	
	#navbar-connect1.collapse, #navbar-connect3.collapse {
		display: none !important;
	} 
	
	#navbar-connect1.collapse.in, #navbar-connect3.collapse.in {
		display: block !important;
		margin-top: 20px !important;
		background: transparent !important;
	}
	
	#navbar-connect1.collapsing, #navbar-connect3.collapsing {
		display: block !important;
		overflow: hidden !important;
	}
	
	.navbar-header {
		position: relative !important;
		min-height: 70px !important;
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
	}
	
	button.navbar-toggle {
			position: absolute !important;
			top:10px !important;
			right: 15px !important;
			margin: 0 !important;
	}
	
	.table_flex {
		width:40% !important;
	}
	
	.table_flex ul {
			margin-left: auto !important;
	}
	
	
}

@media (min-width: 769px) {
		.navbar--connect .container-fluid {
			display: flex !important;
		}
		
		#navbar-connect1, #navbar-connect3 {
			width: auto !important;
			flex-grow: 1;
			justify-content: flex-end !important;
		}
}