* {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
main {margin-top: 64px;}

.nav-bar {
	display: none; 

	
	
	
	
}

.nav-usuario {
	width: 100%;
	font-size: 13px;
	float: right;
	text-align: right;
}
.nav-usuario a {
	text-decoration: none;
	color: navy;
}

header nav {
	position: fixed;
	top: 0;
	background: #3367d6;
	z-index: 1000;
	max-width: 1200px;
	width: 100%;
	margin: auto;





}



header nav:after {
	content: "";
	display: block;
	clear: both;
}

header nav ul { list-style: none; }

header nav ul li {
	float: left;
	position: relative;

	
	
}

header nav ul li a {
	color: #fff;
	display: block;
	padding: 20px;
	font-size: 20px;
	text-decoration: none;
	font-family: tahoma;
}

header nav ul li:hover { background: #00a2e8; }
header nav ul li:hover i { color: yellow; }
header nav ul li i { margin-right: 10px; }
header nav ul li:hover .children { display: block; }








header nav ul li .children li {
	display: block;
	width: 100%;
	border-bottom: 1px solid #ffffff;

}
header nav ul li .children li a { margin-left: 30px; }
header nav ul li .fa-angle-down {
	position: relative;
	top: 3px;
}
header nav ul li .children {
	background: #3367d6;
	z-index: 1000;
	width: 150%;
	position: absolute;
	display: none;

}
header nav ul li .children span { 
	display: none; 

}

.title {

    background-color: white;
    color: black;
    padding: 5px;
	font-weight: bold;
}

.title img {
	height: 35px;
	width: auto;
}






header { 
    width: 100%; 
    margin-bottom: 16px;
}

@media all and (max-width: 800px) {

    .title {margin-bottom: 5px;}

    body {padding-top: 63px;}

    header {margin-bottom: 0px;}
    
    .nav-bar {
		display: block;
		width: 100%;
		position: fixed;
		top: 0;
		background: #3367d6;
		z-index: 10;
    }

    .nav-bar span {
      float: left;
      font-size: 20px;
      padding: 20px;
      color: #fff;
    }

    .nav-bar .fa-bars {
      display: block;
      padding: 20px;
      color: #fff;
      overflow: hidden;
      font-size: 20px;
      font-weight: bold;
      text-decoration: none;
      float: right;
    }

    header nav {
      width: 80%;
      height: auto;
      position: fixed;
      right: 100%;
      top : 64px;
      overflow: hidden;
      height: 100%;
    }

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

    header ul li a { display: block; }

    header nav ul li .children {
      width: 100%;
      position: relative;
      overflow: hidden;
      display: none;
    }

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

    header nav ul li ul li:first-child { border-top: 1px solid #ffffff; }

    header nav ul li .children span {
      display: inline-block;
      margin-right: 10px;
    }

    header nav ul li .children a {
      margin-left: 10px;
      padding: 5px 0;
    }

    header nav ul li .fa-angle-down {
      position: relative;
      top: 3px;
    }
}