/* ============================================
   RWJBarnabas Health - Heart Month Banner
   sub-banner-cardiac.css
   
   MUST load AFTER all other stylesheets
   ============================================ */

/* ============================================
   DESKTOP BASE
   ============================================ */
img#SubBannerPanelHC2Image {
  display: block;
  width: 100% !important;
  height: 700px !important;
  max-width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 35% center;
}

@media screen and (min-width: 1400px) {
  img#SubBannerPanelHC2Image {
    height: 700px !important;
    background-position: 35% center;
  }
}

@media screen and (max-width: 1399px) {
  img#SubBannerPanelHC2Image {
    height: 580px !important;
    background-position: 30% center;
  }
}

@media screen and (max-width: 1199px) {
  img#SubBannerPanelHC2Image {
    height: 500px !important;
    background-position: 20% center;
  }
}

/* ============================================
   TABLET (800px and below)
   STACKED LAYOUT - Form below banner
   ============================================ */
@media screen and (max-width: 800px) {
  
  /* SECTION - auto height */
  #SubBannerPanelHC2,
  .sub-banner-panel.hc2.form-position {
    min-height: auto !important;
    height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  
  /* IMAGE - position relative so it takes up space in flow */
  img#SubBannerPanelHC2Image,
  .sub-banner-panel.hc2 img#SubBannerPanelHC2Image,
  .sub-banner-panel.hc2 img {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 300px !important;
    max-height: 400px !important;
    top: 0 !important;
    left: 0 !important;
    background-position: 10% center !important;
    background-size: cover !important;
  }
  
  /* BANNER CONTAINER - normal flow */
  #SubBannerPanelHC2 .banner-container.main,
  .n-landing .banner-container {
    position: relative !important;
    display: block !important;
    bottom: auto !important;
  }
  
  /* FORM COLUMN - full width, stacks below */
  #SubBannerPanelHC2 .right.full.no-js-refresh,
  #SubBannerPanelHC2 .banner-container.main .right.full {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* IFRAME WRAPPER - full width, override position: absolute */
  .iframe-wrapper.no-refresh,
  #iFrameWrapper.iframe-wrapper.no-refresh,
  .n-landing .iframe-wrapper,
  #SubBannerPanelHC2 #iFrameWrapper {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  
  /* FORM HEADER */
  #SubBannerPanelHC2 #iFrameWrapperHeader,
  .n-landing h2.iframe-header {
    text-align: center !important;
  }
  
  /* FORM CONTENT */
  #SubBannerPanelHC2 .wrap-iframered,
  #SubBannerPanelHC2 #iFrameWrapperContent {
    width: 100% !important;
    padding: 0 !important;
  }
  
  /* IFRAME */
  #SubBannerPanelHC2 iframe#appt,
  #SubBannerPanelHC2 #iFrameWrapperContent iframe {
    width: 100% !important;
    min-height: 650px !important;
  }
}
/* ============================================
   MOBILE (700px and below)
   ============================================ */
@media screen and (max-width: 700px) {
 
  .sub-banner-panel.hc2:before{
  	display:none;
}
}
/* ============================================
   MOBILE (550px and below)
   ============================================ */
@media screen and (max-width: 550px) {
  img#SubBannerPanelHC2Image,
  .sub-banner-panel.hc2 img#SubBannerPanelHC2Image,
  .sub-banner-panel.hc2 img {
    min-height: 250px !important;
    max-height: 320px !important;
  }
}

/* ============================================
   SMALL MOBILE (400px and below)
   ============================================ */
@media screen and (max-width: 400px) {
  img#SubBannerPanelHC2Image,
  .sub-banner-panel.hc2 img#SubBannerPanelHC2Image,
  .sub-banner-panel.hc2 img {
    min-height: 220px !important;
    max-height: 280px !important;
  }
  
  /* IMAGE - position relative so it takes up space in flow */
  img#SubBannerPanelHC2Image,
  .sub-banner-panel.hc2 img#SubBannerPanelHC2Image,
  .sub-banner-panel.hc2 img {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 300px !important;
    max-height: 400px !important;
    top: 0 !important;
    left: 0 !important;
    background-position: 24% center !important;
    background-size: cover !important;
  }
  
  #SubBannerPanelHC2 #iFrameWrapperContent iframe {
    min-height: 680px !important;
  }
}