* {box-sizing:border:box;}
body {margin:0 auto;background-color:#E0E0E0;position: relative;}
.pp_container {
  width:100%;
  position:relative;
  display: flex;
  flex-direction: column;
  }
.pp_header_bar {
  position:relative;
  width:100%;
  min-height:60px;
  height:auto;
  background-color:#99ba88;
  }
.pp_header_bar > span {
  float:left;
  cursor:pointer;
}
/*.header_banner:after {content: "\00a0";margin-left: 30px;}*/
.header_banner {
  position:reletive;
  margin-top:16px;
  margin-left:30px;
  width:12%;
  min-width:100px;
}
.header_banner > img { position:absolute;top:16px;left:30px;z-index:4; }
.r_sel {
  float:right;
  margin-top:10px;
  line-height:20px;
  width:12%;
  min-width:120px;
  color:#99ba88; 
  text-align:center;
}
.content_container {
  width:100%;
  height:auto;
  min-height:90vh;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  text-align:center;
  }
.pp_footer {
  width:100%;
  height:auto;
  min-height:100px;
  background-color:#fff5b8;
  }
.headline {
  position:relative;
  width:100%;
  height:auto;
  padding:20px;
  }
.grab {
  position:absolute;
  top:84%;
  left:4%;
  color:#ffffff;
  background-color:transparent;
  font-weight:900;
  padding:8px;
  }
.spot_articles {
  position:relative;
  width:100%;
  height:auto;
  padding:20px;
  }
.advertisements {
  width:100%;
  height:auto;
  padding:20px;
  }
.extra_articles {
  position:relative;
  width:100%;
  height:auto;
  padding:20px;
  }
.spot_articles article, .extra_articles article {
  float:left;
  width:33%;
  align-item:stretch;
  }
.advertisements section {
  float:left;
  width:50%;
  align-items:stretch;
  }