@charset "UTF-8";
/* CSS Document */
    .toggle-menu {
        background: #333;
        width: 100%;
       
        padding: 15px 15px 30px 15px;
		margin: 0 20px 0 20px;
    -webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
        font-size: 1.3em;
        color: #fff;
        position: absolute;
        top: -100%;
        transition: all 1s ease-out;
	
		z-index:9998;
		
    }
    .toggle-menu h2{
        margin: 0 0 10px;
    }
    .menu-trigger{
        display: none;
		z-index:9999;
    }
    label[for="menu-trigger"] {
        width: 120px;
        height: 30px;
        background: #1686ce;
        cursor: pointer;
        position: absolute;
        left: 10px;
        top: 10px;
        border-radius: 0px;
		z-index:9999;
		
    }
    label[for="menu-trigger"]:after {
        content: '+ OPEN';
        display: block;
        position: absolute;
        color: #fff;
        left: 25%;
        top: 15%;
		z-index:9999;
    }
    .menu-trigger:checked ~ .toggle-menu {
        top: 0;
		position:relative;
		z-index:9999;
		  transition: all 1s ease-out;
	
    }
    .menu-trigger:checked + label[for="menu-trigger"]{
        top: 300px;
        position: absolute;
        background: #c32c2c;
       transition: all 1s ease-out;
		z-index:9999;
    }
    .menu-trigger:checked + label[for="menu-trigger"]:after {
        content: '- CLOSE';
        display: block;
        position: absolute;
        color: #fff;
        left: 25%;
        top: 30%;
		z-index:9999;
    }
    .menu-trigger:checked ~ .wrapper {
        top: 200px;
        margin-left: 10px;
        position: relative;
		z-index:9999;
		  transition: all 1s ease-out;
	
    }












    label[for="menu-trigger-close"] {
        width: 120px;
        height: 30px;
        background: #1686ce;
        cursor: pointer;
        position: absolute;
        left: 10px;
        top: 10px;
        border-radius: 0px;
		z-index:9999;
		
    }
   
    .menu-trigger-close:checked ~ .toggle-menu {
        top: 0;
		position:relative;
		z-index:9999;
    }
    .menu-trigger-close:checked + label[for="menu-trigger"]{
        top: 300px;
        position: absolute;
        background: #c32c2c;
       transition: all 1s ease-out;
		z-index:9999;
    }
    .menu-trigger-close:checked + label[for="menu-trigger"]:after {
        content: '- CLOSE';
        display: block;
        position: absolute;
        color: #fff;
        left: 25%;
        top: 30%;
		z-index:9999;
    }
    .menu-trigger-close:checked ~ .wrapper {
        top: 200px;
        margin-left: 10px;
        position: relative;
		z-index:9999;
    }