* {
  box-sizing: border-box; }

.color1 {
  background-color: #9fc46f; }

.color2 {
  background-color: #58b4c9; }

.color3 {
  background-color: #3f559d; }

.color4 {
  background-color: #704a4a; }

.color5 {
  background-color: #59b34c; }

.color6 {
  background-color: #b7d72f; }

/* no grid support? */
.side_wrapper,
.wrapper {
  display: flex;
  flex-wrap: wrap; }

.side_wrapper {
  display: grid;
  grid-template-columns: 1fr 4fr; }

.tall-panel {
  grid-row-end: span 2;
  grid-column-end: span 2; }

.header,
.footer {
  margin-left: 5px;
  margin-right: 5px;
  flex: 0 1 100%;
  grid-column: 1 / -1; }

.wrapper > * {
  padding: 20px;
  margin-bottom: 10px; }

/* We need to set the margin used on flex items to 0 as we have gaps in grid.  */
@supports (display: grid) {
  .wrapper > * {
    margin: 0; } }
/*---------------- Clearing -----------------*/
/* Use clearfix class on parent to clear nested columns */
.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }

.clearfix:after {
  clear: both; }

.clearfix {
  zoom: 1; }

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }