@font-face {
   font-family: 'Tahoma';
   src: url('webfonts/348C47_0_0.eot');
   src: url('webfonts/348C47_0_0.eot?#iefix') format('embedded-opentype'),
      url('webfonts/348C47_0_0.woff2') format('woff2'),
      url('webfonts/348C47_0_0.woff') format('woff'),
      url('webfonts/348C47_0_0.ttf') format('truetype');
}
 

*, *::after, *::before {
   box-sizing: border-box;
}

body {
   padding: 0;
   margin: 3rem;
   font-family: "Tahoma", sans-serif;
   color: #333; 
   font-size: 1rem;
   /*line-height: 0.7rem;*/
   letter-spacing: 0.1em;
}
   
h1 { 
   font-size: 1.3rem;
   font-weight: lighter;
   text-transform: uppercase;
   /*line-height: 120%;*/
   /*letter-spacing: 0.3em;*/
   letter-spacing: 0.3em;
   padding-bottom: 0.45rem;
   border-bottom: 1px solid #333;
   max-width: calc(14.625rem + 3rem + 1200px);
}

h2 {
   font-size: 1rem;
   font-weight: lighter;
   margin-bottom: 0.6rem;
}

h2+div {
   padding-bottom: 0.5rem;
}
   
a {
   text-decoration: none;
   color: #333;
}

a:hover, a:focus {
   color: #888;
}

nav {
   font-size: 0.9rem;
}

nav a {
   display: block;
   padding-bottom: 0.4rem;
}

[class^='grid-col-'] {
   float: left;  
   padding-right: 1rem;
   padding-bottom: 1rem;
}

.grid-col-1of4 {
   width: 15.625rem;
}

.grid-col-3of4 {
   width: calc(100% - 15.625rem);
   padding-top: 1rem;
}

.grid-col-1of3 {
   width: 33.333%;
   max-width: 400px;
   min-width: 200px;
}

.grid-row::after {
   display: block;
   content: "";
   clear: both;
}

img {
   display: block;
   width: auto;
   height: auto;
   max-width: 100%;
}

.spaced {
   margin-bottom: 2rem;
}


@media (max-width: 63em) {
   body {
      width: calc(600px + 4rem + 15.625rem);
   }
}