/*
Theme Name: Tipperary Counselling Service
Description: Tipperary Counselling Service Child Theme
Template: hello-elementor
Version: 1.1
Tags: four-columns, right-sidebar, full-width-template
Text Domain: tcs

This theme, like WordPress, is licensed under the GPL.Use it to make something cool, have fun, and share what you've learned with others.
*/


#br-menu .three{
	display: flex;
}
.br-hamburger{
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 48px;
	height: 48px;
}

.br-hamburger .line{
	width: 32px;
	height: 2px;
	background-color: var( --e-global-color-primary );
	display: block;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;

}
.br-hamburger:hover{
	cursor: pointer;
}

/* Animation for opening (when is-active is added) */
#br-hamburger.is-active .line:nth-child(1) {
	animation: ham-anim1 1s ease-in-out forwards;
}
#br-hamburger.is-active .line:nth-child(2) {
	opacity: 0;
}
#br-hamburger.is-active .line:nth-child(3) {
	animation: ham-anim2 1s ease-in-out forwards;
}

/* Keyframes for opening */
@keyframes ham-anim1 {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(7px);
	}
	100% {
		transform: translateY(7px) rotate(45deg);
	}
}

@keyframes ham-anim2 {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-7px);
	}
	100% {
		transform: translateY(-7px) rotate(-45deg);
	}
}

/* Animation for closing (when is-active is removed) */
#br-hamburger:not(.is-active) .line:nth-child(1) {
	animation: ham-anim1-reverse 1s ease-in-out forwards;
}
#br-hamburger.not(.is-active) .line:nth-child(2) {
	opacity: 1;
}
#br-hamburger:not(.is-active) .line:nth-child(3) {
	animation: ham-anim2-reverse 1s ease-in-out forwards;
}

/* Keyframes for closing (reverse animation) */
@keyframes ham-anim1-reverse {
	0% {
		transform: translateY(7px) rotate(45deg);
	}
	50% {
		transform: translateY(7px);
	}
	100% {
		transform: translateY(0px);
	}
}

@keyframes ham-anim2-reverse {
	0% {
		transform: translateY(-7px) rotate(-45deg);
	}
	50% {
		transform: translateY(-7px);
	}
	100% {
		transform: translateY(0px);
	}
}