@import url('https://fonts.googleapis.com/css?family=Open+Sans:300');
*{margin:0; padding:0; outline:0;}
body{font:16px 'Open Sans', sans-serif; background:#f2f2f2;}

.navigation{background:#002046; position:fixed; top:0; left:-100%; height:100vh; padding-left:0; padding-top:50px; transition:all 150ms linear;}
.navigation li{height:50px; list-style:none; transition:all 150ms linear;}
.navigation li a{display:flex; align-items:center; width:100%; height:100%; text-decoration:none; color:rgba(255,255,255,.5); transition:all 150ms linear;}
.navigation li a .icon{display:block; min-width:50px; text-align:center;}
.navigation li a .icon img{max-width:50%;}
.navigation li a .title{display:block; padding:0 5px; text-align:start; white-space:nowrap;}
.navigation:hover{width:330px;}
.navigation li:hover{background:rgba(0,0,0,0.3);}
.navigation li:hover a{color:#eee;}
.navigation.active{left:0; width:100%;}

.toggle{position:fixed; display:block; top:0; right:0; width:50px; height:50px; background:#002046; border:0; cursor:pointer; z-index:12; transition:all 150ms linear;}
.toggle:before{content:"\f0c9"; font-family:"Font Awesome 5 Free"; font-weight:900; position:absolute; top:0; left:0; width:100%; height:100%; line-height:50px; text-align:center; font-size:24px; color:#eee;}
.toggle.active{background:#ed1c23;}
.toggle.active:before{content:"\f00d";}

.diagrama-container{height:100vh;}
.titulo, .diagrama{display:flex; align-items:center;}
.titulo{height:10%;}
.diagrama{height:100%;}
.diagrama img{max-height:90%;}

/* MEDIA QUERIES */
@media(min-width:1200px){
	.navigation{padding-top:0; left:0; width:50px; overflow:hidden;}
	.navigation li{height:calc(100% / 12);}
	.toggle{display:none;}
}