/*******************************************************************************
 * golden.layout.scss
 *
 * Styling of the "Golden" layout demonstrating the golden rule and asymmetric
 * grids with Singularity.
 ******************************************************************************/
.panel-display--golden {
  *zoom: 1;
}
.panel-display--golden:after {
  content: "";
  display: table;
  clear: both;
}

.golden-region {
  margin-bottom: 20px;
}

@media (min-width: 700px) {
  .golden-region--first {
    width: 100.0%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }

  .golden-region--second {
    width: 61.98347%;
    float: left;
    margin-right: -100%;
    margin-left: 0%;
    clear: both;
  }

  .golden-region--third {
    width: 37.19008%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}
@media (min-width: 1250px) {
  .golden-region--first {
    width: 50.33557%;
    float: left;
    margin-right: -100%;
    margin-left: 0%;
    clear: none;
  }

  .golden-region--second {
    width: 30.20134%;
    float: left;
    margin-right: -100%;
    margin-left: 51.00671%;
    clear: none;
  }

  .golden-region--third {
    width: 18.12081%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}
