/* Gutters */
#main-content,
.block-inner,
.pane-inner,
.menu-wrapper,
.branding-elements,
.breadcrumb-wrapper,
.attribution,
.at-panel .rounded-corner,
.block-panels-mini > .block-title,
.rendered-by-ds .at-panel .region-inner,
div.messages,
.at-gutter {
  margin-left:20px;
  margin-right:20px;
}

#content .panel-display,
#content .panel-flexible {
  margin-left:-20px;
  margin-right:-20px;
}


/* MOBILE ONLY */
@media only screen and (min-width: 0px) and (max-width:480px) {
  .container {width:100%}

  div#content-column,
  div.content-inner,
  .sidebar-first div.content-inner,
  .sidebar-second div.content-inner,
  .two-sidebars div.content-inner,
  div.sidebar,
  .sidebar-first div.sidebar,
  .sidebar-second div.sidebar,
  .two-sidebars div.sidebar,
  div.region .block {
    float:none;
    clear:both;
    display:block;
    width:100%;
    margin-left:0;
    margin-right:0
  }

  .at-panel .region {
    display:inline;
    float:left
  }

  .two-brick > .panel-row > .region,
  .two-66-33 > .region,
  .two-50 > .region,
  .two-33-66 > .region,
  .three-inset-right > .inset-wrapper,
  .three-inset-right > .inset-wrapper > .region,
  .three-inset-right > .region-three-inset-right-sidebar,
  .three-inset-left > .inset-wrapper,
  .three-inset-left > .inset-wrapper > .region,
  .three-inset-left > .region-three-inset-left-sidebar,
  .three-50-25-25 > .region,
  .three-3x33 > .region,
  .three-25-50-25 > .region,
  .three-25-25-50 > .region,
  .six-6x16 > .panel-row > .region,
  .six-6x16 > .panel-row ,
  .four-4x25 > .panel-row > .region,
  .four-4x25 > .panel-row,
  .five-5x20 > .panel-row > .region,
  .five-5x20 > .panel-row {
    float:none;
    display:block;
    width:100%;
    clear:both
  }


}

/* TABLET ONLY */
@media only screen and (min-width:481px) and (max-width:1226px) {
  .container {width:100%}
  .two-sidebars .content-inner,
  .one-sidebar .content-inner,
  .region-sidebar-first,
  .region-sidebar-second {
    margin-left: 0; margin-right: 0
  }
  .region-sidebar-first {width: 50%}
  .region-sidebar-second {width: 50%}
  .one-sidebar .sidebar {width: 100%}
  .region-sidebar-first,
  .region-sidebar-second {
    overflow: hidden;
    margin-top: 20px;
    float: left;
    clear: none
  }
  .region-sidebar-first.block,
  .region-sidebar-second .block {width: 100%}

  .at-panel .region {
    display:inline;
    float:left
  }

  .two-brick > .panel-row {float:none}

  .two-brick > .panel-row > .region,
  .two-50 > .region,
  .three-50-25-25 > .region-three-50-25-25-second,
  .three-50-25-25 .region-three-50-25-25-third,
  .three-3x33 > .region,
  .four-4x25 > .panel-row > .region,
  .five-5x20 > .panel-row > div.region {width:50%}

  .two-66-33 > .region-two-66-33-first,
  .two-33-66 > .region-two-33-66-second {
    width:66.666666%
  }

  .two-66-33 > .region-two-66-33-second,
  .two-33-66 > .region-two-33-66-first {width:33.333333%}

  .three-inset-right > .region-three-inset-right-sidebar,
  .three-25-50-25 > div.region-three-25-50-25-third,
  .three-25-25-50 > div.region-three-25-25-50-second {width:25%}

  .three-inset-right > .inset-wrapper {width:75%;float:left}

  .three-inset-right > .inset-wrapper > .region,
  .three-inset-left > .inset-wrapper > .region,
  .three-50-25-25 > .region-three-50-25-25-first,
  .three-3x33 > div.region-three-33-first,
  .three-25-50-25 > .region-three-25-50-25-first,
  .three-25-25-50 > .region-three-25-25-50-first,
  .six-6x16 > .panel-row,
  .four-4x25 > .panel-row,
  .five-5x20 > div.panel-row,
  .five-5x20 > div.panel-row > div.region-five-fifth {
    float:none;
    display:block;
    width:100%;
    clear:both
    }

    .three-inset-left > .region-three-inset-left-sidebar {
      width:25%;
      float:right
    }

    .three-inset-left > .inset-wrapper {width:75%;float:right}

    .three-25-50-25 > div.region-three-25-50-25-second,
    .three-25-25-50 > div.region-three-25-25-50-third {width:75%}

    .six-6x16 > .panel-row > .region {width:50%;float:left}
  }

  /* DESKTOP */
  @media only screen and (min-width:1226px) {
  .container {width:100%}

  #content-column,
  .content-column,
  div.sidebar {float: left; clear: none}
  .two-sidebars .content-inner {margin-left: 200px; margin-right: 400px}
  .sidebar-first .content-inner {margin-left: 200px; margin-right: 0}
  .sidebar-second .content-inner {margin-right: 400px; margin-left: 0}
  .region-sidebar-first {width: 200px; margin-left: -100%}
  .region-sidebar-second {width: 400px; margin-left: -400px}
  .at-panel .region {display:inline;float:left}
  .two-brick > .panel-row {float:none}

  .two-brick > .panel-row > .region,
  .two-50 > .region,
  .three-50-25-25 > div.region-three-50-25-25-first,
  .three-25-50-25 > div.region-three-25-50-25-second,
  .three-25-25-50 > div.region-three-25-25-50-third,
  .five-5x20 > .row-1 div.region-five-first,
  .five-5x20 .row-1 div.region-five-second {width:50%}

  .two-66-33 > .region-two-66-33-first,
  .two-33-66 > .region-two-33-66-second {width:66.666666%}

  .two-66-33 > .region-two-66-33-second,
  .two-33-66 > .region-two-33-66-first,
  .three-3x33 > .region,
  .five-5x20 > .panel-row > .region {width:33.333333%}

  .three-inset-right > .region-three-inset-right-sidebar,
  .three-50-25-25 > .region,
  .three-25-50-25 > .region,
  .three-25-25-50 > .region {width:25%}

  .three-inset-right > .inset-wrapper {width:75%;float:left}

  .three-inset-right > .inset-wrapper > .region,
  .three-inset-left > .inset-wrapper > .region,
  .six-6x16 > .panel-row > .region,
  .five-5x20 > .panel-row {
    float:none;
    display:block;
    width:100%;
    clear:both
  }

  .three-inset-left > .region-three-inset-left-sidebar {width:25%;float:right}
  .three-inset-left > .inset-wrapper {width:75%;float:right}
  .six-6x16 > .panel-row {width:33.333333%;float:left}

  .four-4x25 > .panel-row > .region,
  .four-4x25 > .panel-row {width:50%;float:left}
  .container {width:100%;max-width:1440px}

  #content-column,
  .content-column,
  div.sidebar {float: left; clear: none}

  .two-sidebars .content-inner {margin-left: 200px; margin-right: 400px}
  .sidebar-first .content-inner {margin-left: 200px; margin-right: 0}
  .sidebar-second .content-inner {margin-right: 400px; margin-left: 0}
  .region-sidebar-first {width: 200px; margin-left: -100%}
  .region-sidebar-second {width: 400px; margin-left: -400px}
  .at-panel .region {display:inline;float:left}
  .two-brick > .panel-row {float:none}

  .two-brick > .panel-row > .region,
  .two-50 > .region,
  .three-25-50-25 > div.region-three-25-50-25-second,
  .three-25-25-50 > div.region-three-25-25-50-third,
  .five-5x20 > .row-1 div.region-five-first,
  .five-5x20 .row-1 div.region-five-second {width:50%}

  .two-66-33 > .region-two-66-33-first,
  .two-33-66 > .region-two-33-66-second {width:66.666666%}

  .two-66-33 > .region-two-66-33-second,
  .two-33-66 > .region-two-33-66-first,
  .three-3x33 > .region,
  .five-5x20 > .panel-row > .region {width:33.333333%}

  .three-inset-right > .region-three-inset-right-sidebar,
  .three-25-50-25 > .region,
  .three-25-25-50 > .region {width:25%}

  .three-inset-right > .inset-wrapper {width:75%;float:left}

  .three-inset-right > .inset-wrapper > .region,
  .three-inset-left > .inset-wrapper > .region,
  .three-50-25-25 > .region,
  .six-6x16 > .panel-row > .region,
  .five-5x20 > .panel-row {
    float:none;
    display:block;
    width:100%;
    clear:both
  }

  .three-inset-left > .region-three-inset-left-sidebar {width:25%;float:right}
  .three-inset-left > .inset-wrapper {width:75%;float:right}
  .six-6x16 > .panel-row {width:33.333333%;float:left}

  .four-4x25 > .panel-row > .region,
  .four-4x25 > .panel-row {width:50%;float:left}
}