body {
  font-family: 'Open Sans', sans-serif;
  color: #444758;
  padding: 0px 20px;
  /* max-width: 1200px;
  margin: auto; */
}
section {
padding: 1rem 0rem;
}
header {
align-items: center;
border-bottom: 1px solid #d8ddf7;
margin-bottom: 20px;
padding: 20px 0 20px 0;
}
header img {
  width:315px;
  padding 10px 0 20px 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Raleway', sans-serif;
margin: 0;
font-weight: 700;
}
h1 {
font-size: 2.5rem;
}
a {
font-family: 'Raleway', sans-serif;
color: #208dd6;
}
b {
font-weight: 700;
}
.grid {
display: grid;
grid-template-columns: 200px 1fr;
grid-gap: 20px;
}
.col-l ul {
display: flex;
flex-flow: column;
margin: 0;
padding: 0;
background: #0080c6;
border-radius: 5px;
position: sticky;
position: -webkit-sticky;
top: 20px;
}
.col-l ul li {
list-style: none;
font-size: .8rem;
display: flex;
}
.col-l ul li a, .back-to-top a {
color: #fff;
text-decoration: none;
padding: 8px 16px;
width: 100%;
transition: all .2s;
}
.col-l ul li a:hover, .col-l ul li a:focus, .back-to-top a:hover, .back-to-top a:focus {
color: rgb(204, 243, 255);
background: #444758;
}

/* helpers */

.flex {
display: flex;
}
.p-t-1rem {
padding-top: 1rem;
}
.p-b-2rem {
  padding-bottom: 2rem;
}
.space-rule {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
margin: 30px 0;
}
.small {
  font-size: .8rem;
}

/* media queries */
@media all and (max-width: 767px) {
.grid {
  grid-template-columns: 1fr;
}
.col-l {
  display: none;
}
}

/* end media queries */