/**
 * The CSS in this file is for styling the demo page, 
 * Meny's critical styles (such as transforms) are applied
 * via JavaScript.
 *
 * See the documentation here: https://github.com/hakimel/meny#meny
 *
 * @author Hakim El Hattab | http://hakim.se
 */

* {
	margin: 0;
	padding: 0;
}


.meny {
	display: none;
	padding: 20px;
	overflow: auto;
	background: #585858;
	color: #eee;

	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
	.meny ul {
		margin-top: 10px;
	}
		.meny ul li {
			display: inline-block;
			width: 200px;
			list-style: none;
			font-size: 20px;
			padding: 3px 10px;
		}
			.meny ul li:before {
				content: '-';
				margin-right: 5px;
				color: rgba( 255, 255, 255, 0.2 );
			}
            
            .meny  a:link    {color:blue;}
			.meny  a:visited {color:blue;}
			.meny  a:hover   {color:lightblue;}
			.meny  a:active  {color:yellow;}

/**
 * Hint graphic that appears while menu is inactive
 */
.meny-arrow {
	position: absolute;
	z-index: 10;

	border: 10px solid transparent;

	-webkit-transition: opacity 0.4s ease 0.4s; 
	   -moz-transition: opacity 0.4s ease 0.4s; 
	    -ms-transition: opacity 0.4s ease 0.4s; 
	     -o-transition: opacity 0.4s ease 0.4s; 
	        transition: opacity 0.4s ease 0.4s;
}
	.meny-left .meny-arrow {
		left: 14px;
		top: 50%;
		margin-top: -16px;
		border-left: 16px solid #D8D8D8;
	}
	.meny-right .meny-arrow {
		right: 14px;
		top: 50%;
		margin-top: -16px;
		border-right: 16px solid #333;
	}
	.meny-top .meny-arrow {
		left: 50%;
		top: 14px;
		margin-left: -16px;
		border-top: 16px solid #333;
	}
	.meny-bottom .meny-arrow {
		left: 50%;
		bottom: 14px;
		margin-left: -16px;
		border-bottom: 16px solid #333;
	}
	.meny-active .meny-arrow {
		opacity: 0;

		-webkit-transition: opacity 0.2s ease; 
		   -moz-transition: opacity 0.2s ease; 
		    -ms-transition: opacity 0.2s ease; 
		     -o-transition: opacity 0.2s ease; 
		        transition: opacity 0.2s ease;
	}

/**
 * Main contents area
 */
.meny-contents {
	background: #FFFFFF;
	padding: 0px 40px;
	width: 100%;
	height: 100%;
	/* overflow-y: auto; */

	-webkit-overflow-scrolling: touch;

	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}