/* In-Margin sidebars: shrink from half-page width (300px) to wide skyscraper width (160px) based on browser window. */
@media screen and (max-width: 1618px) {
  #block-publift-helper-publift-helper-margin-left {
    width: 160px;   
    left: -160px;   /* Horizontal offset needs to be equal to -width */
  }
  
  #block-publift-helper-publift-helper-margin-right {
    width: 160px;  
    right: -160px;   /* Horizontal offset needs to be equal to -width */
  }
}

/* In-Margin sidebars: shrink from wide sky scraper width (160px) to regular skyscraper width (120px) based on browser window. */
/**
@media screen and (max-width: 1338px) {
  #block-publift-helper-publift-helper-margin-left {
    width: 120px;   
    left: -120px; 
  }
  
  #block-publift-helper-publift-helper-margin-right {
    width: 120px;  
    right: -120px;
  }
}
**/

/* In-Margin sidebars: hide completely if browser window is too narrow. */
/*@media screen and (max-width: 1258px) {*/
@media screen and (max-width: 1338px) {
  .region-in-margin-sidebar-left {
    display: none;
  }
  
  .region-in-margin-sidebar-right {
    display: none;
  }  
}

@media screen and (max-width: 1020px) {
  
  .region-below-navigation {
    max-width: 75vw;
  }
  
  .region-banner {
    max-width: 90vw;
  }    

  .region-footer {
    max-width: 90vw;
  }        
  
  .region-bottom {
    max-width: 90vw;
  }        
  
  .region-page-header {
    max-width: 75vw;
  }  
  
  .region-below-banner {
    max-width: 75vw;
  }    
  
  #messages {
    max-width: 75vw;
  }
  
  .image-ad > a > img {
    max-width: 97vw;
  }
  
  .region-content {
    max-width: 75vw;
  }  
  
  /** Ad Styling **/
 
  .mobile-ad {
    display: block;
  }
  
  .mobile-only {
    display: block;
  }  
  
  .nonmobile-ad {
    display: none;
  }

  .nonmobile-only {
    display: none;
  }  
  
  .mobile-sticky-ad {
    display: block;
    width: 320px;
    height: fit-content;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 50%;
    margin-left: -160px;    
    z-index: 999;
  }
  
  .page-node-9306 #block-publift-helper-publift-helper-header {
    display: none;  /* The header ad normally shows on both mobile and non-mobile pages. But we don't show it on anon front page */
  }

  /* Need extra margin at bottom of the page once we add the moblie-sticky-ad down there.
   * (Otherwise stuff at the bottom of the page will always be covered by the ad). */
  body {
    margin-bottom: 50px;
  }
  
  /*******************************
  * Modal Forms
  *******************************/
  
  .popup_onload .content  {
    max-width: 90vw!important;
  }  
    
  #modal-title {
    white-space: normal;
  }
  
  #modalContent {
    max-width: 90vw;
  }
  
  #modal-content {
    max-width: 80vw;
  }
  
  .popups-container {
    max-width: 90vw;
  }
  
  #modal-content input {
    max-width: 75vw;
  }

  /*******************************
  * Ads (see publift_helper.module)
  *******************************/  
  .advertisement {
    max-width: 95vw;
  }  
}

@media screen and (max-width: 780px) {
  .sumome-vex.sumome-popup-medium .sumome-popup-content {
    display: none;
  }
  
  .sumome-vex.sumome-popup .sumome-popup-overlay {
    display: none;
  }
}

@media screen and (max-width: 600px) {
  div.registration-incentive-top {
    max-width: 90vw;
  }
  
  div.registration-incentive-right {
    left: 15px;
    top: 500px;
  }
  
  div.free-kit {
    margin-top: 10px;
  }

  /* Need to pop up the uservoice feedback widget once we have mobile-sticky-ad
   * (Otherwise it covers the sticky ad). */
  .uv-icon.uv-bottom-right {
    margin-bottom: 50px;
  }
}

@media screen and (max-width: 580px) { 
  
  /******************************
   * Embedded Article Images & Videos
   ******************************/
  
  .article-img-embed-big, .article-video-embed {
    max-width: 90vw;
    left: 50%;
  }
  
  .article-img-embed-big img, .article-video-embed iframe {
    width: 100%;
    height: auto;
  }
}

@media screen and (max-width: 360px) {
  div.registration-incentive-top {
    max-width: 80vw;
  }
  
  div.free-kit {
    max-width: 80vw;
  }
}