/*************************************** NAV MOBIL ****************************************/
.nav-row{
	background:rgba(255,255,255,0.80);
	height:8em;
	
	-webkit-box-shadow: 0px 4px 48px -13px rgba(0,0,0,0.2);
	-moz-box-shadow: 	0px 4px 48px -13px rgba(0,0,0,0.2);
	box-shadow: 			0px 4px 48px -13px rgba(0,0,0,0.2);
}

.nav{
	width:100%;
}
.nav > li{
	width:100%;
	background:rgba(255,255,255,0.80);
}
.nav > li > a {
	  position: relative;
	  display: block;
	  text-align:left;
	  border-radius:0.4em;
	  margin-left:0.3em;
	}

.nav > li > ul >li{
	background:rgba(255,255,255,0.90);
	padding: 0.6em 0 0.6em 0;
}
.nav > li > ul >li{
	color:#f0f;
}
.navbar-toggle{
	background:#0088a2; 
	top:0;
	color:#fff;
}
@media (min-width: 768px ) {	
	.nav-row{
		background:rgba(255,255,255,0.80);
		height:12em;
		
		-webkit-box-shadow: 0px 4px 48px -13px rgba(0,0,0,0.05);
		-moz-box-shadow: 	0px 4px 48px -13px rgba(0,0,0,0.05);
		box-shadow: 			0px 4px 48px -13px rgba(0,0,0,0.05);
	}
	.nav > li{
		width:20%;
		background:rgba(255,255,255,0);
	}
	.nav > li > a {
	  text-align:center;
	}
	.nav > li:first-child > a{
		background:#ff0000;
	}
	.nav > li:nth-child(2) > a{
		background:#3300ff;
	}
	.nav > li:nth-child(3) > a{
		background:#00ff32;
	}
	.nav > li:nth-child(4) > a{
		background:#ffcd00;
	}
	.nav > li:last-child > a{
		background: rgba(255,255,255,0);
		border: #ff00ff solid 2px;
	}	
	.nav > li > ul{
		background:rgba(255,255,255,0.9);
		border-radius: 0.5em;
	}
	.nav > li > ul >li{
		background:rgba(255,255,255,0);
		padding:0;
	}
	.nav > li:first-child > ul >li > a:hover{
		background: #ff0000;
		color: #fff;
	}
	.nav > li:nth-child(2) > ul >li > a:hover{
		background: #3300ff;
		color: #fff;
	}
	.nav > li:nth-child(3) > ul >li > a:hover{
		background: #00ff32;
		color: #fff;
	}
	.nav > li:nth-child(4) > ul >li > a:hover{
		background: #ffcd00;
		color: #fff;
	}
	.nav > li:last-child > ul >li > a:hover{
		background: #ff00ff;
		color: #fff;
	}
	/************************************	HOVER HEADER ********************************/
	.navbar-default .navbar-nav > li > a {
	  color: #fff;
	  
	  -moz-transition: all 300ms ease-in-out;
	  -ms-transition: all 300ms ease-in-out;
	  -o-transition: all 300ms ease-in-out;
	  -webkit-transition: all 300ms ease-in-out;
	  transition: all 300ms ease-in-out;
	}
	.navbar-default .navbar-nav > li:last-child > a {
		color:#ff00ff;
	}
	
	.navbar-default .navbar-nav > li:first-child > a:hover,
	.navbar-default .navbar-nav > li:first-child > a:focus {
		color: #ff0000;
		background-color: transparent;
	}
	.navbar-default .navbar-nav > li:nth-child(2) > a:hover,
	.navbar-default .navbar-nav > li:nth-child(2) > a:focus {
		color: #3300ff;
		background-color: transparent;
	}
	.navbar-default .navbar-nav > li:nth-child(3) > a:hover,
	.navbar-default .navbar-nav > li:nth-child(3) > a:focus {
		color: #00ff32;
		background-color: transparent;
	}
	.navbar-default .navbar-nav > li:nth-child(4) > a:hover,
	.navbar-default .navbar-nav > li:nth-child(4) > a:focus {
		color: #ffcd00;
		background-color: transparent;
	}
	.navbar-default .navbar-nav > li:last-child > a:hover,
	.navbar-default .navbar-nav > li:last-child > a:focus {
		color: #fff;
		background-color: #ff00ff;
	}
	.navbar-default .navbar-nav > .active > a,
	.navbar-default .navbar-nav > .active > a:hover,
	.navbar-default .navbar-nav > .active > a:focus {
		color: #555;
		background-color: #e7e7e7;
	}
	.navbar-default .navbar-nav > .disabled > a,
	.navbar-default .navbar-nav > .disabled > a:hover,
	.navbar-default .navbar-nav > .disabled > a:focus {
		color: #ccc;
		background-color: transparent;
	}


/*					NAVI				*/
	ul.nav li.dropdown ul.dropdown-menu{
		display: block;
		opacity:0;
		visibility:hidden;
		z-index:1;
		left:0.4em;
		
		-webkit-transform:		translateY(20px);
		transform:				translateY(20px);
		
		-webkit-transition: 		all 500ms ease-in-out;
		transition: 				all 500ms ease-in-out;
		
		-webkit-transition-delay:	200ms;
		transition-delay:			200ms;
	}
	ul.nav li.dropdown:hover ul.dropdown-menu{
		display: block;
		opacity:1;
		visibility:visible;
		
		-webkit-transform:		translateY(5px);
		transform:				translateY(5px);
		
		-webkit-transition: 		all 300ms ease-in-out;
		transition: 				all 300ms ease-in-out;
	}	
}
@media (min-width: 992px) {}