/*
 * responsive.custom.css is for custom media queries that are not set via the
 * theme settings, such as cascading media queries.
 *
 * By default all the other responsive stylesheets used in Adaptivetheme use a
 * "stacking method", however cascading media queries use a waterfall method so
 * you can leverage the cascade and inheritance for all browsers that support
 * media queries.
 *
 * @SEE http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/#mq-overlap-stack
 *
 * NOTE: this file loads by default, to disable go to your theme settings and
 * look under the "CSS" settings tab.
 */

/*
 * Really small screens and up
 */
/* @media only screen and (min-width: 220px) {} */

/*
 * Smalltouch sizes and up
 */
/* @media only screen and (min-width: 320px) {} */

/*
 * Smalltouch sizes and down
 */
@media only screen and (max-width: 480px) {
  /*
   * Float Region Blocks - custom media query CSS example:
   *
   * Float regions blocks is an Extension you can enable in the appearance
   * settings for your theme. This feature allows you to automatically float
   * blocks in regions, you can switch it on and off depending on your
   * requirements. For design purposes you many want to remove the floats for
   * devices where the entire theme is just one column - for example small
   * mobile phones. The following CSS is inside the custom media query:
   *
   *   @media only screen and (max-width: 480px){}
   *
   * This will target devices with a maximum width of 480px - most small phones.
   * In these smaller screen sizes we can remove the float and widths so all
   * blocks stack instead of displaying horizonally. The selector used is an
   * "attribute selector" which will match on any float block class. Use your
   * inspector or Firebug to get the classes from the page output if you need
   * more granular control over block alignment and stacking.
   */
  .region[class*="float-blocks"] .block {
    float: none;
    width: 100%;
  }
}

/*
 * Tablet sizes and up
 */
@media only screen and (min-width: 768px) {

  #site-name {
  text-align:left;}

  #site-slogan {
  margin-left: 3%;
  text-align:left;
  }

  #branding {
  position:absolute;
  z-index: 1;
  }

  #logo {
    width: 33%;
    float:left;
  }
  #name-and-slogan {
    float: left;
  }

  .region-header .region-inner {
    display: block;
  }

   .region-header .block-imageblock {
    float: left;
    margin: 0;
  }

  .region-header {
    float: right;
    width: 66%;
  }


  .three-header-images {
  width: 33.3%;
  }

  .region-header .block-imageblock .block-inner {
  padding: 0 2px;
    margin: 0;
    background-color: #fff;
  }

  .website-sponsorship {
    position: absolute;
    right: 4vw;
    text-align: right;
    top: 1.2vw;
    font-weight: bold;
    line-height: 1;
  }

  .website-sponsorship p {
    margin-bottom: 1vw;
    font-size: 1.2vw;
  }

  .website-sponsorship h2.block-title {
    margin-bottom: .5rem;
    font-weight: bold;
    font-style:italic;
    line-height: 1.2;
    font-size: 2vw;
  }

  #page-title {
    text-align:left;
  }

  .field-name-field-page-subtitle {
    text-align: left;
  }


  #footer .block {
    width: 33.3%;
    float: left;
    margin:0;
  }

  .block-5 .block-image {
    text-align: center;
  }

  #footer .block p {
    margin:0;
  }

  #footer .block:first-child .block-image {
    width: 66%;
  }

  #footer .block:nth-child(3) {
    text-align:right;
    font-size: 1rem;
  }

  #footer .block a {
    color: #222;
  }

  #footer .copyright {
    width: 100%;
    margin-right:0;
  }

  .field-type-image {
  float:right;
  width: 39%;
  margin: 1% 0 0 3%;
  }

  .field-type-image img {
  display: block;
  margin-left:auto;
  margin-right:auto;
  }

  .field-name-field-map-image img {
  height: auto;
  max-width:auto;
  }

  p {font-size: 100%}

  .field-name-body blockquote {
    width: 55%;
    margin-left:auto;
    margin-right:auto;
  }

  .field-name-body blockquote p {
    font-size: 150%;
  }

  .block.block-imageblock {
    display: block;
  }

  .node-map .field-type-image {
    float: none;
    margin:0;
    width: auto;
    margin-bottom: 1rem;
  }

  #footer .block-imageblock .block-body {
    text-align: left;
  }

  #block-imageblock-6 .block-body > p {
    font-family: Georgia,serif;
    font-style: italic;
    font-size: 90%;
  }

  #block-imageblock-6 img {
  max-width: 75%;
  }

  #footer #block-block-3 {
  margin-top: 1rem;
  }

  #block-block-3 .block-content.content > p {
    font-size: 100%;
  }

  .region-header .block.block-imageblock {
    display: block;
  }

  .page-node-3 .field-type-image {
    float: right;
    margin: 1% 0 0 3%;
    width: 42%;
  }

  .node-photo-gallery .field-type-image {
  float: none;
  width: auto;
  margin: 0;
  }

  .node-photo-gallery figure.field-item {
    width: 24%;
    float: left;
    margin-right: 1%;
    margin-bottom: 2vw;
  }

  .view-photo-galleries .views-columns-4 .views-column {
    width: 24%;
    float: left;
    margin-right: 1.3%;
  }

  .view-photo-galleries .views-columns-4 .views-column-last {
    margin-right: 0;
  }
  
  .node-photo-gallery figure.even.field-item {
  clear: none;
  }

  .node-photo-gallery figure.even.field-item:nth-child(5),
  .node-photo-gallery figure.even.field-item:nth-child(9),
  .node-photo-gallery figure.even.field-item:nth-child(13),
  .node-photo-gallery figure.even.field-item:nth-child(17),
  .node-photo-gallery figure.even.field-item:nth-child(21),
  .node-photo-gallery figure.even.field-item:nth-child(25),
  .node-photo-gallery figure.even.field-item:nth-child(29),
  .node-photo-gallery figure.even.field-item:nth-child(33) {
    clear: left;
  }

  .field-name-field-photo-gallery-images figcaption.caption.full-caption {
    font-size: 1.3vw;
    margin-top: 1.2vw;
  }
  
  .paragraphs-item-image-full .field-type-image {
    
    width: auto;
    float: none;
    margin-left: auto;
    margin-right: auto;
    
  }


}

/*
 * Desktops/laptops and up
 */
/* @media only screen and (min-width: 1025px) {} */