/*
 *  Desarrollo por Branding Emocion - Queremos fanaticos !
 * 
 *  Version 1.0
 * 
 */

/* ITEMS - LISTA HORIZONTAL (PRIMER NIVEL)*/
nav.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav.menu ul li {
    float: left;
    position: relative;
    z-index:5;
    /*padding: 0 5px;*/
}

nav.menu ul li a {
    position: relative;
    padding: 10px 0;
    color: #818181;
    text-decoration: none;
    font-size: .9em;
    min-width: 95px;
    text-align: center;
    z-index: 2;
    font-weight:bold;
    display: table-cell;
    vertical-align: middle;
}


nav.menu ul li a.selected,
nav.menu ul li:hover > a{
    color: #FFC107;
    border-bottom: 2px solid #FFC107;
}
nav.menu ul li:hover ul {
    opacity: 1;
    top: 40px;
    visibility: visible;
}

/* LISTA DE CADA ITEM*/
nav.menu ul li ul {
	width:180%;
	position:absolute;
	top:0px;
	background-color: #fff;
	visibility:hidden;
	box-shadow:1px 1px 5px gray;
	opacity:0;
	z-index:1;
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;
}

nav.menu ul li ul li {
    float: none;
}
nav.menu ul li ul li a{
	text-align:left;
	position:relative;
	padding:10px 15px;
	display: block;
	height:auto;
	font-size: .9em;
}
nav.menu ul li ul li a:hover{
	background-color:#00569F;
	color:#fff;
	border-bottom:0;
}

/*HOVER*/
nav.menu ul li ul li a:hover + .hidden,
nav.menu ul li ul li ul.hidden:hover{
	display:block;
}

/* TERCER NIVEL*/
nav.menu ul li ul li ul.hidden { /* oculto por defecto*/
	display:none;
}

nav.menu ul li ul li ul {
	left:100%;
	width:100%!important;
	top: 0!important;
}

/* BOTONES ABRIR / CERRAR MENU LATERAL RESPONSIVE */
#btnOpen{
	display:none;
	position:absolute;
	right:10px;
	top:20px;
	background-color:#000;
	color:#fff;
	padding:8px 4px;
}
#btnClose{
	display:none;
	width:100%;
	text-align:center;
	background-color:#747577;
	color:#fff;
	padding:8px 0;
}
#btnClose:hover{
	font-weight:bold;
}
#bg {
    width: 100%;
    height: 100vh;
    background-color: #000;
    z-index: 2;
    opacity: .7;
    position: fixed;
    top: 0;
    left: 0;
}

/* RESPONSIVE MENU */
@media screen and (max-width: 800px) {
	nav.menu > ul{ 
		height:calc(100vh - 35px);
		overflow:auto;
	}
	nav.menu{
		margin-top:0;
		display:none;
		position:fixed;
		height:100vh;
		width:50%!important;
		background-color:#fff;
		box-shadow:1px 1px 5px gray;
		top:0!important;
		right:0;
		z-index:2;
	}
	nav.menu ul{
		background-color:#fff;
	}
	nav.menu ul li{
		float:none;
	}
	nav.menu ul li a{
		padding-left:20px;
		text-align:left;
		display:block;
	}

	nav.menu ul li ul {
		background-color:#fff!important;
		width:100%;
		position:static;
		visibility:visible;
		opacity: 1;
	}
	
	nav.menu ul li ul li ul.hidden{
		display:block;
	}
	nav.menu ul li ul li ul li a{
		padding-left:35px;
	}
	#btnClose{
		display:block;
	}
	#btnOpen{
		display:block;
	}
}