body {
     margin: 0;
     padding: 5em 0;
     /*font-family: 'Open Sans', sans-serif;*/
     font-family: 'Exo 2', sans-serif;
     display: flex;
     flex-direction: column;
     align-items: center;
     font-size: 12pt;
     /*line-height: calc(0.9em + 0.4vw);*/
     color: rgb(100, 100, 100);
}

@media all and (max-width: 600px) {
     body {
          font-size: calc(12px + 0.4vw)
     }
}

/*header {
     position: fixed;
     top: 0;
     width: 100%;
     background: white;
}*/

.articles {
     width: 45%;
}

div {
     display: flex;
     flex-direction: column;
     margin-bottom: 1em;
}

h2 {
     font-size: calc(25px + 0.5vw);
     color: #fec221;
     margin: 0 0 0.5em;
     padding: 10px 0 0;
}

h3 {
     font-size: 18px;
     margin: 0 0 12px;
}

name {
     padding-bottom: 12px;
}

abbr {
     text-decoration: none;
     border-bottom: 1px dotted gray;
}

.tab {
     position: relative;
     padding-left: 3em;
     margin: 0;
     width: 100%;
}

.tab:after {
     position: absolute;
     top: 0;
     left: 0.85em;
     width: 2px;
     height: 100%;
     content: '';
     background-color: rgb(203, 203, 203);
     z-index: 0;
     transition: all 0.3s ease-in-out;
}

.tab h3 {
     font-size: calc(18px + 0.5vw);
     margin: 0.5em 0;
}

h4 {
     margin: 0;
}

a {
     text-decoration: none;
     color: #fec221;
}

a:hover {
     color: #ff8819;
     text-decoration: underline;
}

p {
     color: #808080;
     font-style: italic;
     margin: 0.7em 0;
     line-height: 1.3em;
}

b {
     margin-top: 1em;
}

ol, ul {
     counter-reset: myCounter;
     margin-left: 0;
     margin-top: 0;
     padding: 0;
}

ul {
     padding: 0 1.5em 0;
}

li ul, li ol {
     padding: 5px 0 0;
}

ol li {
     position: relative;
     padding-left: 3em;
     padding-bottom: 0.2em;
     margin: 0.45em 0;
     list-style: none;
     line-height: 1.4em;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
}

ol li:before {
     content: counter(myCounter);
     counter-increment: myCounter;
     position: absolute;
     top: 0;
     left: 0;
     width: 1.8em;
     height: 1.8em;
     line-height: 1.8em;
     padding: 0;
     color: #fff;
     background: #ffc130;
     font-weight: bold;
     text-align: center;
     border-radius: .9em;
     box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
     z-index: 10;
     transition: all 0.3s ease-in-out;
}

ul li {
     position: relative;
     padding-left: 2.5em;
     font-size: 0.8em;
     padding-bottom: 0.2em;
     margin: 0.45em 0;
     list-style: none;
     line-height: 1.4em;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
}

ul li:before {
     content: " ";
     position: absolute;
     top: 0;
     left: 0;
     width: 1.8em;
     height: 1.8em;
     line-height: 1.8em;
     padding: 0;
     color: #fff;
     background: #ffc130;
     font-weight: bold;
     text-align: center;
     border-radius: .9em;
     box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
     z-index: 10;
     transition: all 0.3s ease-in-out;
}

ul li:hover:before, ol li:hover:before {
     background-color: #ff8819;
}

ol li li:before {
     background-color: #ffc130;
}

ol li:after {
     position: absolute;
     top: 2.1em;
     left: 0.85em;
     width: 2px;
     height: calc(100% - 2em);
     content: '';
     background-color: rgb(203, 203, 203);
     z-index: 0;
     transition: all 0.3s ease-in-out;
}

ul li:after {
     position: absolute;
     top: 2.1em;
     left: 0.85em;
     width: 2px;
     height: calc(100% - 2.5em);
     content: '';
     background-color: rgb(203, 203, 203);
     z-index: 0;
     transition: all 0.3s ease-in-out;
}

ul li:hover:after, ol li:hover:after {
     background-color: #ff8819;
}

li li {
     font-size: 0.8em;
}

.list-back {
     font-size: ;
}