
/*
 |
 |
 | Note: The **order** of the transformations is extremely important to achieving the desired effect.
 |
 */

#navigation_menu_trigger:not(:checked) ~ .primary-content .close-nav-menu {
	display: none;
}

.navigation-menu {
/* .navigation-menu + * { */
	margin-block-start: 0;
}

.cc-wordmark > img {
	max-width: 12.75rem !important;
}

.navigation-menu-trigger-icon > * {
	transform: translateY( 0 ) rotateZ( 0deg ) scaleX( 1 );
	transform-origin: 50% 50%;
	transition: all 150ms ease-in-out;
}

.navigation-menu-trigger-icon:hover > :nth-child( 1 ),
.navigation-menu-trigger-icon:hover > :nth-child( 3 ) {
	transform: translateY( 0 ) rotateZ( 0deg ) scaleX( 0.75 );
}
.navigation-menu-trigger-icon:hover > :nth-child( 2 ) {
	transform: translateY( 0 ) rotateZ( 0deg ) scaleX( 1.25 );
}

#navigation_menu_trigger:checked ~ .primary-content .navigation-menu-trigger-icon > :nth-child( 1 ) {
	transform: translateY( 7px ) rotateZ( 45deg ) scaleX( 0.75 );
}
#navigation_menu_trigger:checked ~ .primary-content .navigation-menu-trigger-icon > :nth-child( 2 ) {
	transform: translateY( 0 ) rotateZ( 0deg ) scaleX( 0 );
}
#navigation_menu_trigger:checked ~ .primary-content .navigation-menu-trigger-icon > :nth-child( 3 ) {
	transform: translateY( -7px ) rotateZ( -45deg ) scaleX( 0.75 );
}
