/* Set layout for gpanels for smaller devices */

/**
 * Use this file to conditionally override gpanel layouts for devices.
 * If you adjust the media queries in the theme settings you should
 * adjust them here so they match.
 */

/* Smartphone portrait */
@media only screen and (max-width:320px) {

  .gpanel .region {
    display: block;
    float: none;
    width: 100% !important;
  }

}

/* Smartphone landscape */
@media only screen and (min-width:321px) and (max-width:480px) {

  .gpanel .region {
    display: block;
    float: none;
    width: 100% !important;
  }
  .gpanel .region-two-66-33-second {
    margin-bottom: 0;
  }

}

/* Tablet portrait */
@media only screen and (min-width:481px) and (max-width:768px) {
  .three-3x33.gpanel .region-three-33-first,
  .three-3x33.gpanel .region-three-33-second  {
    display: inline;
    float: left;
    width: 50% !important;

  }
  .three-3x33.gpanel .region-three-33-third {
    float: none;
    clear: both;
  }
  .four-4x25 .region {
    width: 50% !important;
    display: block;
  }
  .five-5x20 .region,
  .six-6x16 .region {
    display: block;
    float: none;
    width: 100% !important;
  }

}