/***********************************************************

* Comment:   					*

* Author:                               	*

* Date created:                            	*

 ***********************************************************/



 .hamburger {

    display: flex;

}



.hamburger>div {

    position: relative;

    width: 100%;

    height: 2px;

    background-color: var(--cfLightPink);

    transition: all 0.4s;

}



.hamburger>div::before,

.hamburger>div::after {

    content: '';

    position: absolute;

    top: 10px;

    width: 100%;

    height: 2px;

    background: inherit;

}



.hamburger>div::after {

    top: -10px;

}





/* .shoppingCart>div {

    position: relative;

    width: 100%;

    height: 2px;

    background-color: var(--cfLightGrey);

    transition: all 0.4s;

    display: none;

} */



.mobileMenu {

    background-color: var(--cfBlue);

}



.mobileMenu>ul>li {

    list-style: none;

    color: var(--cfBlack);

    font-size: 1.5rem;

    padding: 1rem;

}



.mobileMenu>ul>li>a {

    color: inherit;

    text-decoration: none;

    transition: color 0.4s ease;

}



.toggler:checked {

    z-index: 5;

}



.toggler:checked~.hamburger {

    z-index: 4;

}



.toggler:checked+.hamburger>div {

    transform: rotate(135deg);

}



.toggler:checked+.hamburger>div::before,

.toggler:checked+.hamburger>div::after {

    top: 0;

    transform: rotate(90deg);

}



.toggler:checked:hover+.hamburger>div {

    transform: rotate(225deg);

}





/* Show menu */



.toggler:checked~.mobileMenu {

    visibility: visible;

    opacity: 0.95;

}