/* reset css */
    
    
    
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, navega, output, ruby, section, summary, time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline
    }
    
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, navega, section { display: block }
    
    body { line-height: 1 }
    
    ol, ul { list-style: none }
    
    blockquote, q { quotes: none }
    
    blockquote:before, blockquote:after, q:before, q:after {
      content: '';
      content: none
    }
    
    table {
      border-collapse: collapse;
      border-spacing: 0
    }
    
    body {
      font: 100% "roboto", "Trebuchet MS", sans-serif;
      background-color:#fff;
    }
    
    a { text-decoration: none; }
    
    /**
     * Hidden fallback
     */
    
    
    /**
     * Styling navegaigation
     */
    
    header {
      margin-right: auto;
      margin-left: auto;
      max-width: 80%;
      margin-top:150px;
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
    }
    
    /**
     * Styling top level items
     */
    
    .navega a, .navega label {
      display: block;
     padding: .85rem;
      color: rgb(0, 0, 0);
      background-color: #fcfcfc;
      box-shadow: inset 0 -1px #1d1d1d;
      -webkit-transition: all .25s ease-in;
      transition: all .25s ease-in;
    }
    
    .navega a:focus, .navega a:hover, .navega label:focus, .navega label:hover {
      color: #fff;
      background: #030303;
    }
    
    .navega label { cursor: pointer; }
    
    /**
     * Styling first level lists items
     */
    
    .group-list a, .group-list label {
      padding-left: 2rem;
      background: #450808;
      color: rgb(250, 250, 250);
      box-shadow: inset 0 -1px #310101;
    }
    
    .group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover { background: #131313; }
    
    /**
     * Styling second level list items
     */
    
    .sub-group-list a, .sub-group-list label {
      padding-left: 4rem;
      background: #ffffff;
      box-shadow: inset 0 -1px #ffffff;
      color: rgb(0, 0, 0);
      font-weight: bold;
    }
    
    .sub-group-list a:focus, .sub-group-list a:hover, .sub-group-list label:focus, .sub-group-list label:hover { background: #232323; }
    
    /**
     * Styling third level list items
     */
    
    .sub-sub-group-list a, .sub-sub-group-list label {
      padding-left: 6rem;
      background: #351709;
      box-shadow: inset 0 -1px #575757;
      color: #fff;
    }
    
    .sub-sub-group-list a:focus, .sub-sub-group-list a:hover, .sub-sub-group-list label:focus, .sub-sub-group-list label:hover { background: #333333; }
    
    /**
     * Hide nested lists
     */
    
    .group-list, .sub-group-list, .sub-sub-group-list {
      height: 100%;
      max-height: 0;
      overflow:auto;
      -webkit-transition: max-height .5s ease-in-out;
      transition: max-height .5s ease-in-out;
    }
    
    .navega__list input[type=checkbox]:checked + label + ul { /* reset the height when checkbox is checked */
    max-height: 1000px; }
    
    /**
     * Rotating chevron icon
     */
    
    label > span {
      float: right;
      -webkit-transition: -webkit-transform .65s ease;
      transition: transform .65s ease;
    }
    
    .navega__list input[type=checkbox]:checked + label > span {
      -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
    }