/*****
Theme Name: Tarjetaroja
Theme URI: http://www.tarjetaroja.eu
Author: MH Themes
Author URI: http://www.tarjetaroja.eu
Description: This is a clean, modern and fully responsive premium magazine PHP, WordPress theme for bloggers and news or editorial related websites. The theme includes custom widgets, shortcodes and advanced theme options including colorpickers with unlimited colors to create your own color scheme.
Version: 2.0.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mh
Domain Path: /languages/
Tags: two-columns, left-sidebar, right-sidebar, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-images, theme-options, threaded-comments, full-width-template, translation-ready, rtl-language-support
*****/

.menu_bar {
	display:none;
}

menu {
	width: 100%;
}

menu nav {
        border-bottom: 2px solid #ff0000;
	z-index:1000;
	max-width: 1000px;
	width: 100%;
	margin:2px 0;

}

menu nav ul {
	list-style:none;
}

menu nav ul li {
	display:inline-block;
	/*La razon por la que no usamos floar en vez de inline-block es
	porque no vamos a poder usar overflows en el header nav ul*/
	position: relative;
}

menu nav ul li:hover .children {
	display: block;
        
}

/*Submenu*/
menu nav ul li .children {
	background:#3B170B;
	position: absolute;
	display: none;
	width: 120%;
	z-index: 1000;
}

menu nav ul li .children li {
	display: block;
	overflow: hidden;
	border-bottom: 1px solid rgba(255,255,255,.5);
	/*Usamos overflow hidden porque aqui si vamos a necesitar usar float*/
}

menu nav ul li .children li a {
	display: block;
}

menu nav ul .children li a span {
	float: right;
	position: relative;
	top:3px;
	margin-right: 0px;
	margin-left:10px;
}

menu nav ul li a {
	color:#fff;
	text-decoration: none;
	display: inline-block;
	padding:9px 5px 9px 15px;
}

menu nav ul li:hover {
	background:#000;
}


menu nav ul li span {
	margin-right:10px;
}

menu nav ul li .caret {
	position: relative;
	top: 3px;
	margin-left: 10px;
	margin-right: 0;
}

@media screen and (max-width:767px) {
	body {
		padding-top:60px;
	}
	.menu_bar {
		width: 100%;
		display: block;
		position: fixed;
		top:0;
	}

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

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

	menu nav {

                border: 2px solid #ff000;
		width: 60%;
		height: calc(100% - 60px);
		right:100%; 
		/*Con esto ocultamos el menu hacia la derecha, lo agregamos hasta el final*/
		margin-top: -9px;
		position:fixed;
		overflow:auto;
   
	}

	menu nav ul li {
		display: block;
		border-bottom:1px solid rgba(255,255,255,.5);
	}

	menu nav ul li a {
		display: block;
	}

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

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

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

	menu nav ul li .caret {
		float: right;
	}
}