/*
 * 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, regardless of screen size.
 *
 * @SEE http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/#mq-overlap-stack
 *
 * NOTE: this file loads by default, to disable got to your theme settings and
 * look under the "CSS" settings tab.
 */
/*
 * Really small screens and up
 */
/* @media only screen and (min-width: 220px) {} */
/*
 * Smartphone sizes and up
 */
/* @media only screen and (min-width: 320px) {} */
/*
 * Smartphone sizes and down
 */
@media only screen and (max-width: 480px) {
  /* 
   * Float Region blocks example:
   * In smaller screen sizes we can remove the float and widths so all blocks
   * stack instead of displaying horizonally. The selector used here 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.
   * 
   * "Float Region blocks" is an extension for floating blocks in regions, see
   * your themes appearance settings, under the Extensions tab.
   */
  .region[class*="float-blocks"] .block {
    float: none;
    width: 100%;
  }
}
/*
 * Tablet sizes and up
 */
/* @media only screen and (min-width: 768px) {} */
/*
 * Desktops/laptops and up
 */
@media only screen and (min-width: 1025px) {
  .region-secondary-content .block {
    float: left;
    margin: 0 0 10px 0;
  }
  #nav-overlay {
    display: none;
  }
} 

/*
Custom rules
*/
@media only screen and (min-width: 1025px) and (max-width: 1150px) {
  #logo img {
    height: 80px;
  }
  .hero h2 {
    font-size: 42px;
  }
  .hero p {
    font-size: 20px;
  }
  .hero .button {
    font-size: 18px;
  }
}

/*****
*
 Mobile devices
 *
 ****/
 @media only screen and (max-width: 1024px) {
  html {
    font-size: 100%;
  }
  body.no-scroll {
    overflow: hidden;
  }

  /** Logo **/
  #logo img {
    height: 70px;
  }

  /** Togle navigation hamburger icon **/
  #toggle-nav {
    display: block;
    position: absolute;
    right: 90px;
    top: 48px;
    height: 36px;
    width: 36px;
  }
  #toggle-nav .material-icons {
    font-size: 36px;
    width: 36px;
    height: 36px;
    color: white; 
    cursor: pointer;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  }
  /** Navigointi **/
  body > nav .region-nav {
    display: none;
  }

  /** HERO **/
  .hero h2 {
    font-size: 28px;
  }
  .hero p {
    font-size: 14px;
  }
  .hero .button {
    font-size: 12px;
    padding: 10px 20px;
  }

  /** Info-section **/
  .info-box {
    min-width: 280px;
    max-width: 100%;
  }

  /** Main content **/
  .sidebar-second .content-inner {
    margin-right: 0%;
    margin-left: 0;
  }

  /** Sidebar **/
  #content-column, .content-column, div.sidebar {
    float: none;
    clear: both;
    width: 100%;
    margin-left: 0;
  }
  /** main content group **/
  .ds-2col-stacked-fluid > .group-right {
    float: right;
    text-align: right;
    width: 25%;
  }

  /** Featured products as a grid **/
  .view-id-featured_products .view-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    padding: 60px 5%;
  }
  .view-id-featured_products .view-content .views-row {
    margin-bottom: 0px;
  }
}