/* -----------------------------------------------------------------------------

    HAMBURGER ICONS COMPONENT
    
----------------------------------------------------------------------------- */
/**
    * Toggle Switch Globals
    *
    * All switches should take on the class `c-hamburger` 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.
    */
    .botMenu {
        display: block;
        position: relative;
        overflow: hidden;
        margin: 0;
        padding: 0;
        width: 50px;
        height: 49px;
        /*font-size: 3em;
        font-size: 0;
        text-indent: -9999px;*/
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        box-shadow: none;
        border-radius: none;
        border: none;
        cursor: pointer;
        background-color:transparent;
    
        -webkit-transition: background 0.3s;
                transition: background 0.3s;
        }
        .botMenu span {
            font-size: 2em;
            color:#333333;
        }
    
        .c-hamburger {
        display: block;
        position: relative;
        overflow: hidden;
        margin: 0;
        padding: 0;															  
        width: 60px;
        height: 49px;
        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;
        }
    
        .c-hamburger:focus {
        outline: none;
        }
    
        .c-hamburger span {
			display: block;
			position: absolute;
			top: 22px;
			left: 9px;
			right: 9px;
			height: 4px;
			background:#333333;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
        }
    
        .c-hamburger span::before {
			position: absolute;
			display: block;
			left: 0;
			width: 100%;
			height: 4px;
			background-color:#333333;
			content: "";
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
        }

        .c-hamburger span::after {
			position: absolute;
			display: block;
			right: 0;
			width: 100%;
			height: 4px;
			background-color:#333333;
			content: "";
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
        }
    
        .c-hamburger span::before {
        top: -10px;
        }
    
        .c-hamburger span::after {
        bottom: -10px;
        }
    
        /**
        * Style 2
        * 
        * Hamburger to "x" (htx). Takes on a hamburger shape, bars slide
        * down to center and transform into an "x".
        */
        .c-hamburger--htx {
        background-color:transparent;
        }
    
        .c-hamburger--htx span {
        -webkit-transition: background 0s 0.3s;
                transition: background 0s 0.3s;
        }
    
        .c-hamburger--htx span::before,
        .c-hamburger--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;
        }
    
        .c-hamburger--htx span::before {
        -webkit-transition-property: top, -webkit-transform;
                transition-property: top, transform;
        }
    
        .c-hamburger--htx span::after {
        -webkit-transition-property: bottom, -webkit-transform;
                transition-property: bottom, transform;
        }
    
        /* active state, i.e. menu open */
        .c-hamburger--htx.is-active {
        background-color:transparent;
        }
    
        .c-hamburger--htx.is-active span {
        background: none;
        
        }
    
        .c-hamburger--htx.is-active span::before {
        top: 0;
        -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
                transform: rotate(45deg);                
        }
    
        .c-hamburger--htx.is-active span::after {
        bottom: 0;
        -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);                
        }
    
        .c-hamburger--htx.is-active span::before,
        .c-hamburger--htx.is-active span::after {
        	-webkit-transition-delay: 0s, 0.3s;
			transition-delay: 0s, 0.3s;
			background-color:#333333;
			width: 100%;
        }
        /* -----------------------------------------------------------------------------
    
        HAMBURGER ICONS COMPONENT
        
        ----------------------------------------------------------------------------- */