/*******************************************************************************
 * mondrian.layout.scss
 *
 * Styling of the "mondrian" panels content layout.
 ******************************************************************************/

.panel-display--mondrian {
  *zoom: 1; }

  .panel-display--mondrian:after {
    content: "";
    display: table;
    clear: both; }


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


.mondrian-region--tertiary-second {
  width: 50%;
  float: left;
  margin-right: -100%;
  margin-left: 0%;
  clear: none; }


.mondrian-region--tertiary-third {
  width: 50%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none; }

@media (min-width: 320px) {

  .mondrian-region--secondary,
  .mondrian-region--tertiary-second {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    clear: left; }


  .mondrian-region--tertiary-first,
  .mondrian-region--tertiary-third {
    width: 50%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    clear: right; } }
@media (min-width: 1020px) {

  .mondrian-region--main {
    width: 75%;
    float: left;
    margin-right: -100%;
    margin-left: 0%;
    clear: none; }


  .mondrian-region--secondary {
    width: 25%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none; }


  .mondrian-region--tertiary-first {
    width: 50%;
    float: left;
    margin-right: -100%;
    margin-left: 25%;
    clear: left; }


  .mondrian-region--tertiary-second {
    width: 25%;
    float: left;
    margin-right: -100%;
    margin-left: 0%;
    clear: none; }


  .mondrian-region--tertiary-third {
    width: 25%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: right; } }