<!-- Navigation Starts -->
<div class="row">
    <div class="col-xl-11 offset-0 offset-sm-0 offset-md-0 offset-lg-0 offset-xl-1">
        <div style="width: auto; display: table;" class="toc_container consult-background">
      
      <div>
    
          <input class="demo_navigation" id="demo_navigation_1" type="checkbox">
      
          <label for="demo_navigation_1">
          <p class="toc_title">Навигация</p>
        </label>
  
          <div>
            <ul class="toc_list">
    
                  <li>
                      <a class="navigation" href="#1">
                        <span class="navigation-black">1</span> Строительно-монтажные работы
                    </a>
                </li>
    

              <li>

                        <a class="navigation" href="#3">
                          <span class="navigation-black">3</span> Виды СМР
                      </a>
      
                  </li>
    
                </ul>
        </div>

      </div>

        </div>
  </div>
</div>
<!-- Navigation Ends -->

.toc_container {
    border-top: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
    padding: 10px;
    width: auto;
    display: table;
    font-size: 95%;
}

.toc_container a {
    text-decoration: none;
    text-shadow: none;
}

.toc_title {
    text-align: center;
  font-weight: 700;
  margin: 0;
  padding: 0;
  color: #1f1c2f;
  margin-top: 1em;
  margin-bottom: 1em;
}

.toc_list {
    margin-top:1em
}

.toc_container li, .toc_container ul, .toc_container ul li, .toc_widget_list li {
    background: 0 0;
    list-style-type: none;
    list-style: none;
}

.navigation {
  color: #12415e;
}

.navigation-black {
  color: #1f1c2f;
}

/* скрываем чекбоксы и блоки с содержанием */
.demo_navigation,
.demo_navigation + label ~ div {
    /*display: none;*/
}
/* когда чекбокс активен показываем блоки с содержанием  */
.demo_navigation + label + div {
  height: 0;
  overflow: hidden;
}
.demo_navigation:checked + label + div {
  height: auto;
    display: block;
    /* чуточку анимации при появлении */
    -webkit-animation:fade ease-in 0.5s; 
    -moz-animation:fade ease-in 0.5s;
    animation:fade ease-in 0.5s;
}

/* вид текста label при активном переключателе */
.demo_navigation:checked + label {
    color: red;
}

/* анимация при появлении скрытых блоков */
@-moz-keyframes fade {
    from { opacity: 0; }
to { opacity: 1 }
}
@-webkit-keyframes fade {
    from { opacity: 0; }
to { opacity: 1 }
}
@keyframes fade {
    from { opacity: 0; }
to { opacity: 1 }   
}

/* вид текста label */
.demo_navigation + label {
    color: green;
    cursor: pointer;
  white-space:nowrap;
}

.demo_navigation + label:before {
    content: "\002B";
    display: inline;
    float: left;
    font-size: 14px; 
    font-weight: bold;
    height: 16px;
    line-height: 16px;
    text-align: center;
}
.demo_navigation:checked + label:before {
    content: "\2212";
}