body
{
  margin: 0px;
  background: #4C4532;
  line-height: 1.75em;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
}

h1 {margin: 0 0 .67em 0;}


p, ul {margin-top: 0;}

p {line-height: 180%;}

a {text-decoration: none;}

.container
{
  max-width: 960px;

  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;

  justify-content: space-between;
  margin: 0 auto;
}

#logo a 
{
  color: #D7D4C3;
  margin-top: -1em;
}

/*********************************************************************************/
/* Button Style                                                                  */
/*********************************************************************************/

.button
{
  padding: 1em 3em 1em 2em;
  background: #4C4532;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 0.90em;
  color: #FFF;
}

/*********************************************************************************/
/* Header                                                                        */
/*********************************************************************************/

#header {padding: 3em 1em;}

/*********************************************************************************/
/* Menu                                                                          */
/*********************************************************************************/

#menu li {display: inline-block;}

#menu li a
{
  padding: 0.7em 1.5em;
  color: rgba(255,255,255,0.6);
}

#menu li:hover a, #menu li.active a
{
  background: rgba(0,0,0,0.5);
  border-radius: 20px;
  color: rgba(255,255,255,0.8);
}

/*********************************************************************************/
/* Page                                                                          */
/*********************************************************************************/

#page
{
  padding: 5em 2em;
  background: #D7D4C3;
}

/*********************************************************************************/
/* Copyright                                                                     */
/*********************************************************************************/

#copyright {padding: 5em 0em;}

#copyright p
{
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-size: 0.80em;
  color: rgba(255,255,255,0.3);
}

/*********************************************************************************/
/* Article                                                                       */
/*********************************************************************************/

.article 
{
  position: relative;
  flex-basis: 32%;
  padding-bottom: 2%;
  margin-bottom: 2%;
  background: #F0EFE9;
}

.article .details {padding: 1em 2em 3em 2em;}

.article a 
{
  position: absolute;
  bottom: 0;
}

.article .img {overflow: hidden;}

.article img {width: 100%;}

/*********************************************************************************/
/* @media                                                                       */
/*********************************************************************************/

@media screen and (min-width: 1025px){

  .article .img {max-height: 135px;}
}

@media screen and (min-width: 769px)and (max-width: 1024px){

  .article {flex-basis: 49%;}

  .article .img {max-height: 200px;}

  #copyright {margin: 0 0 0 2em;}
}

@media screen and (max-width: 768px){
  .article 
  { 
    flex-basis: 100%;
    flex-grow: 1;
  }
}