body {
 position: relative;
 font-family: "Heebo", sans-serif;                    
 /* background: lightgray; */
 color: #333;
 font-size: 18px;
}

.grid {
 list-style: none;
 margin-left: -40px;
}

.gc {
 box-sizing: border-box;
 display: inline-block;
 margin-right: -.25em;
 min-height: 1px;
 padding-left: 40px;
 vertical-align: top;
}

.gc--1-of-3 {
 width: 33.33333%;
}

.gc--2-of-3 {
 width: 66.66666%;
}

.naccs {
 position: relative;
 max-width: 1140px;
 margin: 100px auto 0;
 height: 700px;
}

.naccs .menu div {
 padding: 15px 20px 15px 40px;
 margin-bottom: 10px;
 color: white;
 background: #f08519;
 box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
 cursor: pointer;
 position: relative;
 vertical-align: middle;
 font-weight: 700;
 transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);

}

.naccs .menu div:hover {
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.naccs .menu div span.light {
 height: 10px;
 width: 10px;
 position: absolute;
 top: 24px;
 left: 15px;
 background-color: #303F9F;
 border-radius: 100%;
 transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.naccs .menu div.active span.light {
 background-color: #303F9F;
 left: 0;
 height: 100%;
 width: 3px;
 top: 0;
 border-radius: 0;
}

.naccs .menu div.active {
 color: #303F9F;
 padding: 15px 20px 15px 20px;
}

ul.nacc {
 position: relative;
 height: 0px;
 list-style: none;
 margin: 0;
 padding: 0;
 transition: .5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

ul.nacc li {
 opacity: 0;
 transform: translateX(50px);
 position: absolute;
 list-style: none;
 transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

ul.nacc li.active {
 transition-delay: .3s;
 z-index: 2;
 opacity: 1;
 transform: translateX(0px);
}

ul.nacc li p {
 margin: 0;
}

@media (max-width: 768px){
    #body {
        font-size: 12px;
      }
}
@media (max-width: 456px){
    #body {
        font-size: 10px;
      }
      .naccs .menu div {
        font-size: 10px;
      }
}