/*Reset things*/
html body {
  margin:0px;
  font-family: 'Roboto', sans-serif;
}

a{
  color:inherit;
}

ul.no-format{
  padding:0;
  margin:0;
  list-style-type:none;
}

/*Generics*/
ul.horizonal{
  display:flex;
  flex-wrap:wrap;
}

a.button-block{
  padding:12px;
  display:block;
  text-decoration:none;
}

/*Icons on small screens*/
@media (max-width:480px) {
  *[data-icon-phone]:not([data-icon-phone=""]){
    font-size:0;
  }
  *[data-icon-phone]:not([data-icon-phone=""])::after {
    content:attr(data-icon-phone);
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
  }
  /*Small screen prevent nav bar wrapping*/
  .header-nav ul{
    flex-wrap:nowrap;
  }
  .header-nav li{
    flex: 0 0 auto;
  }
  /*Small screen hide sidebar*/
  .page-nav {
    margin-right:-170px;
    position:relative;
    left:-170px;
    transition:position 1s;
  }
  .page-nav.open{
    left:0px;
  }
}

/*Flex layout*/
body{
  display:flex;
  flex-wrap: wrap;
}

header,footer {
  flex: 100%;
}

.page-nav{
  flex: 0 auto;
}
main {
  flex: 1 1px;
}

/*Header*/
.header-image {
  width:100%;
  height:250px;
  background:url(https://pbs.twimg.com/profile_banners/482404361/1439079197/1500x500) center / cover;
}

.header-nav {
  text-transform:uppercase;
  background:#FB8C00;
  color:white;
  overflow:auto;
}

nav .active {
  border-bottom:3px solid #536DFE;
  padding-bottom:9px;
}

/*Page Nav*/
.page-nav {
  width:175px;
  background:#E65100;
  color:white;
}

.primary>article {
  padding:8px;
}

.primary>article:nth-child(even){
  background:#FFF3E0;
}

.primary>article:nth-child(odd){
  background:white;
}

.article-header {
  font-size:1.5em;
  padding:8px;
}
.article-content {
  margin-left:16px;
}