/* =============================================================================
  MENU TOGGLE SWITCHES
============================================================================= */
/**
 * Toggle Switch Globals
 *
 * All switches should take on the class `cmn-toggle-switch` as well as their
 * variant that will give them unique properties. This class is an overview
 * class that acts as a reset for all versions of the icon.
 */
.cmn-toggle-switch {
	 display: block;
	 position: relative;
	 overflow: hidden;
	 margin: 0;
	 padding: 0;
	 font-size: 0;
	 text-indent: -9999px;
	 -webkit-appearance: none;
	 -moz-appearance: none;
	 appearance: none;
	 box-shadow: none;
	 border-radius: none;
	 border: none;
	 cursor: pointer;
	 -webkit-transition: background 0.3s;
	         transition: background 0.3s;
}

.cmn-toggle-switch:focus {
    outline: none;
}

.cmn-toggle-switch span {
	display: block;
	position: absolute;
	background: #571D74;
	border-radius: 5px;
}

.cmn-toggle-switch span::before,
.cmn-toggle-switch span::after {
	position: absolute;
	display: block;
	left: 0;
	background-color: #571D74;
	content: "";
	border-radius: 5px;
}

/**
 * Hamburger to "x" (htx). Takes on a hamburger shape, bars slide
 * down to center and transform into an "x".
 */
.cmn-toggle-switch__htx {
    background-color: #FFFFFF;
}

.cmn-toggle-switch__htx span {
    -webkit-transition: background 0s 0.3s;
            transition: background 0s 0.3s;
}

.cmn-toggle-switch__htx span::before,
.cmn-toggle-switch__htx span::after {
    -webkit-transition-duration: 0.3s, 0.3s;
            transition-duration: 0.3s, 0.3s;
    -webkit-transition-delay: 0.3s, 0s;
            transition-delay: 0.3s, 0s;
}

.cmn-toggle-switch__htx span::before {
    -webkit-transition-property: top, -webkit-transform;
            transition-property: top, transform;
}

.cmn-toggle-switch__htx span::after {
    -webkit-transition-property: bottom, -webkit-transform;
            transition-property: bottom, transform;
}

/* active state, i.e. menu open */
.cmn-toggle-switch__htx.active {
    background-color: #FFFFFF;
}

.cmn-toggle-switch__htx.active span {
    background: none;
}
.cmn-toggle-switch__htx.active span::before,
.cmn-toggle-switch__htx.active span::after {
    background-color: #571D74;
}
.cmn-toggle-switch__htx.active span::before {
    top: 0;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}

.cmn-toggle-switch__htx.active span::after {
    bottom: 0;
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

.cmn-toggle-switch__htx.active span::before,
.cmn-toggle-switch__htx.active span::after {
    -webkit-transition-delay: 0s, 0.3s;
            transition-delay: 0s, 0.3s;
}