/* INICIO CSS menu_movil.css */

@media screen and (max-width:860px) {	
	#topMenu { z-index: 100;}
	.menu_bar {
		width: 100%;
		display: block;
		position: fixed;
		top:0;
		width: 100%;
		background:#000;
		top:0;
		z-index:100;
	    	cursor: pointer;
		background-image: url(../images/menu_movil_blanco.png);
		background-position-x: 1%;
		padding-left:2.4em;
		background-position-y: 50%;
		background-repeat: no-repeat;
		-webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
		-moz-box-shaow: 0 4px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
		box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	}

	.menu_bar .bt-menu {
		display: block;
		padding: 20px;
		color:#fff;
		overflow: hidden;
		font-size:25px;
		font-weight:bold;
		text-decoration: none;
	}

	.menu_bar span {
		float: right;
		font-size: 40px;
	}

	nav {
		width: 80%;
		height: calc(100% - 80px);
		right:100%; 
		/*Con esto ocultamos el menu hacia la derecha, lo agregamos hasta el final*/
		margin: 0;
		position:fixed;
		overflow-y:auto;
		top:5em;
	}

	nav ul li {
		clear:both;
		width:100%;
		display: block;
		border-bottom:1px solid rgba(255,255,255,.5);
	}

	nav ul li a {
		display: block;
	}

	nav ul li:hover .children{
		display: none;
	}

	nav ul li .children {
		width: 100%;
		position: relative;
		/*display: block;*/
	}

	nav ul li .children li a{
		margin-left:20px;
	}

	nav ul li .caret {
		float: right;
	}

}

 /* FIN CSS menu_movil.css */