/***********************/
/* General Styles      */
/***********************/

body {
  padding: 0;
  margin: 0;

  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 12px;

  background-color: #efefef;
  overflow-x: hidden;
}
.wrapper {
  width: 960px;
  margin: 50px auto;
}

/***********************/
/* Grid styles         */
/***********************/
.header {
  grid-area: hd;
}

.navigation {
  grid-area: nav;
}

.content {
  grid-area: content;
}

.grid-wrapper {
  display: grid;
  background-color: #ffffff;
  grid-template-areas: "hd" "nav" "content";
}

/***********************/
/* Navigation          */
/***********************/
.navigation {
  width: 100%;
  /*text-align: center;*/
}

li:nth-child(1) {
  grid-area: li1;
}

li:nth-child(2) {
  grid-area: li2;
}

li:nth-child(3) {
  grid-area: li3;
}

li:nth-child(4) {
  grid-area: li4;
}

ul.nav {
  display: grid;
  grid-template-columns: 80px;
  grid-column-gap: 20px;
  grid-template-areas: ". . li1 li2 li3 li4 . . .";
  justify-items: center;
  list-style: none;

  padding: 5px 20px;
  border-top: 1px solid #ededed;
  border-bottom: 1px solid #ededed;
  line-height: 24px;
}

ul.nav li {
  display: block;
  line-height: 24px;
}
/***********************/
/* content             */
/***********************/
article {
  padding: 30px 30px 50px 30px;
  line-height: 24px;
  color: #757575;
}

/***********************/
/* Other styles        */
/***********************/

a {
  color: #6a6a6a;
  text-transform: uppercase;
  text-decoration: none;
}

a.active {
  font-weight: bold;
}
table {
  width: 100%;
}

tr {
  display: table-row;
  border-top: 1px solid #757575;
  line-height: 28px;
}