.header-box {position:absolute; z-index: 99; right: 14%; top: 5%; width:auto; padding:0;display:block;} 

/* meu main first level */
#menu-box {float: right;padding: 2.0em 0 0 0; display: block;}
#menu-main a{color: #FFF; text-decoration: none;}
#menu-main {font-size: 0.9em; line-height: 0.9em; padding: 0em 0em 0 0em;} 
/* first level */
			
			#menu-main > ul {
				margin:0px auto;
				padding:0 0 0 0; display:inline;font-weight:400; text-transform:none;
                text-align:left;
                float: left;
			}
			#menu-main > ul > li {
				margin:0px 0em 0px 2.5em;
				padding:0 0px 0px 0;
				list-style:none;
				position:relative;
				display:inline-block;
				
			}
			#menu-main > ul > li > a {
				display:block;
				text-align:center;
				font-weight: 400;
				text-decoration:none;
				padding:0px 0px 0.7em 0px;
                color:#000;
	
			}
			
			#menu-main > ul > li > a:hover {
				color:#6fa9d0;
			}


			#menu-main > ul > li > a.nav-active {
				color:#6fa9d0;font-weight:400;
			}

            #menu-main > ul > li > a.nav-active {
                background-image:url(../images/dot-act.png); background-repeat:no-repeat;background-size: 0.35em auto;
                background-color:#FFF;
                background-position: bottom center;
                padding: 0 0em 0.8em 0;
                text-decoration: none;
            }
            
	
 /* Second Level */
			#menu-main > ul > li > ul {
				opacity:0; 
				position:absolute;
				margin:-3px 0px 0px -10px;
				padding:10px 0 0px 0px;
				width: auto;white-space:nowrap ; 
				background-color:none;
				visibility:hidden;
			}
			/*#menu-main > ul > li > ul {
			  -webkit-box-shadow: 0px 2px 5px 0px rgba(51,50,51,0.3);
			  -moz-box-shadow: 0px 2px 2px 0px rgba(51,50,51,0.3);
				box-shadow: 0px 2px 5px 0px rgba(51,50,51,0.3);
			}*/
			#menu-main > ul > li:hover > ul {
				opacity:1; 
				-o-transition: all 0.6s ease-in-out;
    			-webkit-transition: all 0.6s ease-in-out;
    			-moz-transition: all 0.6s ease-in-out;
    			-ms-transition: all 0.6s ease-in-out;
    			transition: all 0.6s ease-in-out; visibility:visible
			}
			#menu-main > ul > li > ul > li {
				margin:0px;
				padding:0px;
				list-style:none;
                font-weight:400;
			}
			#menu-main > ul > li > ul > li > a {
				display:block;
				text-decoration:none;
				background-color:#FFF;
				margin: 0 0 0 10px;
				padding:0.4em 40px 0.4em 10px;
				color:#000;
				border-bottom:solid 0px #ebebeb;
				text-transform:none; 
                font-weight:400;
                border-left: solid 10px #FFF;
			}
			#menu-main > ul > li > ul > li > a:hover {
				background-color:#FFF;
				color:#6fa9d0;
				margin: 0 0 0 10px;
				padding:0.4em 40px 0.4em 10px;
    			-o-transition: all 0.3s ease-in-out;
    			-webkit-transition: all 0.3s ease-in-out;
    			-moz-transition: all 0.3s ease-in-out;
    			-ms-transition: all 0.3s ease-in-out;
    			transition: all 0.3s ease-in-out;  
                border-left: solid 10px #FFF;
			}
			#menu-main > ul > li > ul > li > a.active {
				background-color:#FFF;
				color:#6fa9d0;
				margin: 0 0 0 10px;
				padding:0.4em 40px 0.4em 10px;
    			-o-transition: all 0.3s ease-in-out;
    			-webkit-transition: all 0.3s ease-in-out;
    			-moz-transition: all 0.3s ease-in-out;
    			-ms-transition: all 0.3s ease-in-out;
    			transition: all 0.3s ease-in-out;  
                border-left: solid 10px #6fa9d0;
			}


@media screen and (max-width:480px) {
    
    #menu-box {position:fixed; z-index: 100; float:left;width:100%;height:100vh;padding: 2.0em 0 0 0;text-align: left;display: none;}
    #menu-box {}
    #menu-panel{position: fixed; z-index:99; top:0;right:0%;width:100%; height:100vh; padding:0 0 0 0%;background:#FFF;display:none;}
    #menu-main {font-size: 2.1em; line-height: 1.3em; padding: 0em 0em 0 0em;margin: 0;text-align: left;}
    #menu-main > ul {text-align: center;width: 100vw; display: block; padding: 0;margin:-5em 0 0 0;}
    #menu-main > ul > li {display: block;padding: 0 0 0 0;margin: 0 0 0 0;text-align: left;;width: 100%;}
    
    #menu-main > ul > li > a {color:#000;padding: 0 0 0 0;margin: 0 0 0 0; font-weight: 400;text-align: left;}
    
    #menu-main > ul > li > a:hover {color:#6fa9d0;}
    #menu-main > ul > li > a.nav-active {color:#6fa9d0;background-image:none;padding: 0;}
    
    .content {
      position: absolute;    
      text-align: left;
      z-index: 12;
      width: 100%;
      height: 100vh;
      top:0; 
        left: 10%;
      display: -webkit-flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -moz-box-flex;
      display: flex;
      -webkit-align-items: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;   
    }
    .content-menu-box {margin: 0 0 0 20%; width: 80%; background: rgba(112,101,101,0.0); display: none;}
    
     /* Second Level */
			#menu-main > ul > li > ul {
				visibility:hidden;
                display: none; opacity: 0;
			}
    
    
}

.nav-icon-box { position:fixed; z-index:102;right:10%;  top:4.5em; margin:0px 0px 0% 0%; padding:0px 0 0 0; display:none;}
.nav-icon-box {font-size: 4.0vw; line-height:4.0vw;transition:all 0.8s ease;}
@media screen and (max-width:480px) {
    
    .nav-icon-box {display: block;}
    
}
/*######### HAMBIRGER ############*/
.c-hamburger:focus {
  outline: none;
}

.c-hamburger {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0 0 0 0;
  width: 1.8em;
  height: 3.5em;
  text-indent: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  -webkit-transition: background 0.3s;
          transition: background 0.3s; 
}

.c-hamburger span {
    display: block;
  position: absolute;
   top: 1em;
  left: 0px;
  right: 0px;
  height: 2px;
    background: #000;   
}

.c-hamburger span::before, .c-hamburger span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 2px;
  background: #000;
  content: "";
}

/**/
.blank .c-hamburger span {
  background: #111111; 
}
.blank .c-hamburger span::before{
  background: #111111; 
  content: "";
}
.blank .c-hamburger span::after {
  background: #111111; 
  content: "";
}
/**/	

/**/	

.c-hamburger span::before {
  top: -0.3em;
}

.c-hamburger span::after {
  bottom: -0.3em;
}

/**
 * Style 2
 * 
 * Hamburger to "x" (htx). Takes on a hamburger shape, bars slide
 * down to center and transform into an "x".
 */

.c-hamburger--htx span {
  -webkit-transition: background 0s 0.3s;
          transition: background 0s 0.3s;
}

.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
  -webkit-transition-duration: 0.3s, 0.3s;
          transition-duration: 0.3s, 0.3s;
  -webkit-transition-delay: 0.3s, 0s;
          transition-delay: 0.3s, 0s;
}

.c-hamburger--htx span::before {
  -webkit-transition-property: top, -webkit-transform;
          transition-property: top, transform;
}

.c-hamburger--htx span::after {
  -webkit-transition-property: bottom, -webkit-transform;
          transition-property: bottom, transform;
}

/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
}

.c-hamburger--htx.is-active span {
  background: none;
}

.c-hamburger--htx.is-active span::before {
  top: 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
		  background:#111;
}

.c-hamburger--htx.is-active span::after {
  bottom: 0;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
		   background:#111;
}

.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
  -webkit-transition-delay: 0s, 0.3s;
          transition-delay: 0s, 0.3s;
}