/* This stylesheet version addresses the bug fix caused by comas used in homepage text due to the legacy cms.*/

/* ======== Color Reference */
/* UW Blue:     #063B6D  rgb: 6 59 109  */
/* Lighter blue #5f82a3; */
/* goldish hover: e7e2c5 */

/* ================================= ADJUSTMENT OVERIDES */
/* media query phablet legacy styles to remove element from painting/position effect in layout */
/* excluding these from display breaks original footer
br.clearFloat,
.clearFloat + br, */

/* to specifically target extra space attached to br tag before footer and right after js */
script+br.clearFloat {
    display: none;
  }

  #pageHeader,
  #toolbarWrapper,
  #bannerwidget,
  .home_right_column,
  .home_right_column+br,
  h1.newsTickerHeader,
  .newsTickerHeader,
  #newsTicker,
  #newsTickerRight,
  .newsTickerEnd,
  #rightPodPlaceholder {
    display: none !important;
  }

  @media only screen and (max-width: 946px) {
    #rightPodPlaceholder {
      display: none !important;
    }
  }

  /* =================================  UTILITIES */

  /* overwrites structure - needs to target home page only */

  /*
    .margin10>#contentContainer {
      margin: 0px  !important;
      padding: 0px !important;
    }
    */

  #contentContainer.width-reset-home-pg {
    margin: 0px !important;
    padding: 0px !important;
  }

  /* END style overwrite */

  /* =================================  BEGIN 2018 new styles */
  /* ========== parent container for new home sections ============ */

  .home_uwhealth {
    margin: -12px 20px -20px -20px;
    /*ct*/
  }

  #home-transitional {
    /*margin-top:-7px; */
    margin-top: 0;
    /*ct*/
  }

  @media screen and (max-width: 730px) {
    #home-transitional {
      min-width: 300px;
    }
  }

  #home-transitional section {
    padding: 16px 10px;
  }

  /* ====== removing margins  */

  #home-transitional .bleed-margins {
    margin: 0;
    padding: 0;
  }

  /* phablet styles to homepage wrap for all contents */
  /* Adjusts vertical overlap issues with header and footer */
  @media screen and (max-width: 768px) {
    #scoped-content .home_uwhealth {
      margin: 0px !important;
      padding: 0px !important;
      width: 100%;
      /* so panels become responsive */
    }
  }

  @media only screen and (max-width: 946px) {
    .home_uwhealth {
      margin: -12px -15px 0px -15px;
      overflow: hidden;
      padding: 15px;
    }
  }

  /* UTILITIES */
  .img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* =================================  NEWS PANELS */

  /* wrap all panels in flex container */
  .panel-group {
    /* flex parent */
    display: flex;
    flex: 1 1 auto;
    background-color: #264f75;
  }

  /* .news-primary = COLUMN 1 */

  .panel-group>.news-primary {
    /* flex grow shrink basis; */
    flex: 2 1 auto;
    background-image: url("../images/homepage/background-texture-home-feature.gif");
    background-repeat: no-repeat;
    background-position: top left;
  }

  /* .news-secondary = column 2 (right) */

  .panel-group>.news-secondary {
    /* flex grow shrink basis; */
    flex: 1 1 auto;
  }

  .news-secondary> :nth-child(1) {
    order: 1;
    /* fallback background image */
    background-image: url("../images/homepage/background-texture-home-feature.gif");
    background-repeat: no-repeat;
    background-position: top left;
    min-height: 105px;
  }

  .news-secondary> :nth-child(2) {
    order: 2;
    background-image: url("../images/homepage/background-texture-home-feature.gif");
    background-repeat: no-repeat;
    background-position: top left;
  }

  /* ct */
  @media only screen and (min-width: 946px) {
    .news-primary .img-responsive {
      min-height: 315px;
      min-width: 540px;
    }
  }

  @media only screen and (max-width: 947px) {
    .home_uwhealth {
      margin: -12px 0 -5px -15px;
      width: calc(100% + 30px);
      position: relative;
      padding: 0;
    }
  }

  @media screen and (max-width: 768px) {
    #scoped-content .home_uwhealth {
      margin: -12px 0 -5px -15px !important;
      width: calc(100% + 30px);
    }
  }

  @media screen and (max-width: 623px) {
    .news-secondary> :nth-child(2) {
      border-right: 0;
    }
  }

  @media screen and (max-width: 619px) {
    .news-secondary .panel:nth-of-type(1) .img-responsive {
      min-height: auto;
      min-width: auto;
    }
  }

  /* readmore lead */
  .news-secondary> :nth-child(3) {
    order: 3;
  }

  /* ============ this padding allows a more gradual gradient blur height */
  .panel-group>.news-primary a {
    padding-top: 45px;
  }

  .panel-group>.news-secondary> :nth-child(1) a,
  .panel-group>.news-secondary> :nth-child(2) a {
    padding-top: 20px;

  }

  .panel-group>.news-primary .overlay {
    height: 80px;

  }

  .panel-group>.news-primary .overlay:hover {
    height: 90px;

  }

  /* DEFAULT PANEL CONTENT STYLING FOR TEXT, LINKS, IMAGES */

  .panel-content {
    position: relative;
    width: 100%;
  }

  /* NOTE: overlay is attached to the link text */
  .overlay {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-left: 20px;
    padding-right: 20px;
    width: calc(100% - 40px);
    height: 70px;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0+19,0.14+44,0.61+95,0.79+100,0.79+100,0.79+100 */
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.14) 44%, rgba(0, 0, 0, 0.61) 95%, rgba(0, 0, 0, 0.79) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.14) 44%, rgba(0, 0, 0, 0.61) 95%, rgba(0, 0, 0, 0.79) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.14) 44%, rgba(0, 0, 0, 0.61) 95%, rgba(0, 0, 0, 0.79) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#c9000000', GradientType=0);
    /* IE6-9 */

    overflow: hidden;
    transition: 0.5s ease;
  }


  .overlay-dark {
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 38%, rgba(0, 0, 0, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 38%, rgba(0, 0, 0, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 38%, rgba(0, 0, 0, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#000000', GradientType=0);
    /* IE6-9 */
  }


  .overlay:hover {
    height: 80px;
  }

  @media screen and (max-width: 948px) {
    .overlay {
      height: 80px;
    }

    .panel-group img {
      width: 100%;
      height: auto;
      overflow: hidden;
    }
  }



  .panel-content a {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    text-shadow: 3px 0px 6px rgb(43, 43, 43);

    font-family: "Verdana", Arial Narrow, sans-serif;
    color: #fff;
    font-weight: bold;
    /*fallback*/
    font-size: 14px;
    /*to match mockup - how text breaks/proportionality */
    line-height: 1.3em;
  }

  /* to match mockup line break */
  .news-primary .panel-content a {
    font-size: 15px;
  }

  /* replaces .panel-text */
  .panel-content a span {
    color: #e7e2c5;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-top: 0.5em;
    background-image: url("../images/homepage/arrow-tan-right.png");
    background-position: center right;
    background-repeat: no-repeat;
    padding-right: 10px;
  }

  .news-secondary> :nth-child(3) {
    background-color: #063b6d;
  }

  /* LINK effect for lead-in panel */
  .news-secondary> :nth-child(3) a {
    display: block;
    margin-top: 0px;
    width: calc(100% - 40px);
    padding: 8px 20px;

    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 38%, rgba(0, 0, 0, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 38%, rgba(0, 0, 0, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 38%, rgba(0, 0, 0, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#000000', GradientType=0);
    /* IE6-9 */
  }

  /* HOVER effect for lead-in panel (smallest) */
  .news-secondary> :nth-child(3) a:hover {
    background-color: #292929;
    transition: 3s ease;
  }

  #scoped-content {
    margin: 0px !important;
    padding: 0px !important;
  }

  /* FIXED WIDTH 800 */
  /* ======================== targeted desktop styles */
  @media screen and (min-width: 946px) {
    #scoped-content {
      margin: 0px !important;
      padding: 0px !important;
      min-width: 840px;
    }
  }

  @media screen and (min-width: 769px) {
    #scoped-content {
      margin: 0px !important;
      padding: 0px !important;
    }

    /* Asign borders */
    .news-primary .panel {
      border-bottom: 0px solid #fff;
    }

    /* video */
    .news-secondary> :nth-child(1) {
      border-bottom: 4px solid #fff;
      border-left: 4px solid #fff;
    }

    .news-secondary> :nth-child(2) {
      border-bottom: 4px solid #fff;
      border-left: 4px solid #fff;

    }

    /* readmore lead */
    .news-secondary> :nth-child(3) {
      min-height: 20px;
      background-color: #264f75;
      border-left: 4px solid #fff;
    }
  }

  /*end media query */

  /* phablet styles */

  @media screen and (max-width: 768px) {
    .panel-group {
      /* flex parent for two columns */
      display: flex;
      flex-wrap: wrap;
    }

    .news-primary .panel {
      border-right: 0px solid #fff;
      border-bottom: 4px solid #fff;
    }

    /* make aside a column on narrower screens */
    .news-secondary {
      /* flex parent */
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      border-bottom: 4px solid #fff;
    }

    .news-secondary> :nth-child(1) {
      /* flex child */
      order: 2;
      border-bottom: 4px solid #fff;
      width: calc(50%-4px);
      flex-grow: 1;
    }

    .news-secondary> :nth-child(2) {
      /* flex child */
      order: 1;
      border-bottom: 4px solid #fff;
      border-right: 4px solid #fff;
      flex-grow: 1;
    }

    .news-secondary> :nth-child(2) .panel-content {
      /* flex child */
      min-height: 100%;
    }

    .news-secondary> :nth-child(3) {
      /* flex child */
      width: 100%;
    }
  }

  @media only screen and (max-width: 846px) {

    /* lesson padding in bottom link so responsive feature image can stay in proportion without bottom gap */
    .news-secondary> :nth-child(3) .panel-text {
      padding-top: 6px;
      padding-bottom: 6px;
    }
  }

  @media screen and (max-width: 598px) {
    .panel img.img-responsive {
      width: 100%;
      height: 100%;
    }

    /* adjust main feature link text space when text wraps on narrower screens */
    .panel-group>.news-primary .overlay {
      height: 90px;
    }

    .panel-group>.news-primary .overlay:hover {
      height: 100px;
    }

    .news-secondary> :nth-child(2) {
      order: 1;
      border-bottom: 4px solid #fff;
      border-right: 0px solid #fff;
      flex-grow: 1;
    }


  }

  /*END Media Query */

  /* mobile styles */

  @media screen and (max-width: 300px) {
    .news-secondary> :nth-child(1) {
      /* flex child */
      order: 2;
      width: 100%;
    }

    .news-secondary> :nth-child(2) {
      /* flex child */
      order: 1;
      width: 100%;
      border-right: 0px;
    }

    .news-secondary> :nth-child(3) {
      /* flex child */
      width: 100%;
    }
  }

  /* END Media Query for panel groups */

  /* =================================  ABOUT UWH ROW */

  section.lead-in-homepage {
    background-color: #efefef;
  }

  .lead-in-homepage article {
    padding: 15px;
    /*match with visit tools text settings */
    font-size: 16px;
    line-height: 1.6em;
  }

  /*span for bold lead-in text */
  .title-lead-in {
    font-weight: 700;
  }

  /* =================================  GET CARE NOW */
  /* ====================================== VISIT TOOLS == */
  /* NOTE background color set in html on section element, inline style */

  #visit-tools {
    padding: 21px 11px;
  }

  #visit-tools div {
    /* to make columns for each div */
    font-size: 14px;
    flex: 1 1 auto;
  }

  #visit-tools h2 {
    font-family: "BebasRegular", sans-serif;
    font-weight: 500;
    margin-bottom: 3px;
  }

  #visit-tools p {
    font-family: "Verdana", Arial Narrow, sans-serif;
  }

  #visit-tools h2,
  #visit-tools p {
    padding-right: 3em;
    line-height: 1.5em;
    padding-left: 16px;
  }

  #visit-tools h2 {
    padding-bottom: 10px;
  }

  #visit-tools ul {
    list-style-type: none;
    line-height: 2.5rem;
    padding-top: 25px;
    padding-left: 28px;
    margin: 0;
  }

  #visit-tools a {
    text-decoration: none;
  }

  #visit-tools a:hover {
    text-decoration: underline;
  }

  /* =================================  BELOW FOLD SECTIONS */

  #member-tools div,
  #action-tools div,
  #visit-tools {
    display: flex;
    flex-direction: row;
  }

  #member-tools div {
    padding-top: 12px;
  }

  section#action-tools {
    padding: 14px 10px 26px;
  }

  #member-tools a,
  #action-tools a {
    margin: 0px 10px;
  }

  #member-tools a,
  #visit-tools div {
    text-decoration: none;
    flex-basis: 256px;
    justify-content: space-between;
    justify-content: space-evenly;
  }

  #action-tools a {
    flex-basis: 256px;
    justify-content: space-between;
    justify-content: space-evenly;
    /* not widely supported */
  }

  @media screen and (max-width: 730px) {

    #member-tools div,
    #action-tools div,
    #visit-tools {
      flex: 1 1 auto;
      flex-direction: column;
      align-self: center;
    }

    #member-tools a {
      flex-basis: auto;
      margin-bottom: 20px;
    }

    #action-tools div {
      flex-direction: column;
      align-items: center;
      cursor: pointer;
    }

    #action-tools a {
      flex-basis: auto;
      margin-bottom: 20px;
    }

    #visit-tools {
      flex-direction: column;
    }

    #visit-tools div {
      margin-bottom: 0px;
    }

    #visit-tools p {
      line-height: 1.3em;
      text-align: left;
    }

    #visit-tools div,
    #visit-tools ul {
      text-align: left;
      flex-basis: auto;
    }
  }

  /*END Media Query */

  /* ====================================== TYPOGRAPHY & ARROWS IN TOOLS SECTIONS == */

  /* BEGIN SHARED TYPOGRAPHIC STYLES */
  #action-tools .tool-title,
  #action-tools .tool-navtext {
    font-family: "BebasRegular", sans-serif;
  }

  .tool-title {
    font-size: 16px;
    color: #5f82a3;
  }

  .tool-navtext {
    color: #063b6d;
    /*Darker blue */
    padding-left: 10px;
    font-size: 17px;
    font-weight: bold;
  }

  @media (max-width: 798px) and (min-width: 730px) {

    /* Adjusts icon titles to address wrapping between screen sizes */
    .icon-block .tool-navtext {
      padding-left: 0px;
      font-size: 15px;
    }
  }

  /* END Media Query */

  #member-tools .tool-title {
    font-size: 14px;
  }

  #member-tools .tool-navtext {
    line-height: 1.5em;
  }

  #action-tools .title-navtext {
    font-size: 13px;
    letter-spacing: 0.03em;
  }

  #action-tools .tool-navtext {
    font-size: 18px;
    /* mac view difference ? @ 14px? */
    letter-spacing: 0.04em;
  }

  /* END TYPOGRAPHIC COMMON DENOMINATORS */

  /* ====================================== NAV BLOCKS (WITH PICTURES) == */

  div .icon-block {
    padding: 14px 10px 18px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
  }

  a.icon-block:hover {
    background-color: #e7e2c5;
    border-radius: 4px;
    transition: 1s ease;
  }

  /*  circle behind icon */
  div a.icon-block span:first-child {
    width: 70px;
    height: 70px;
    margin-bottom: 12px;
    border-radius: 50%;
    background-color: #5f82a3;
  }

  .icon-mychart-login {
    background-image: url("../images/homepage/mychart-login.png");
    background-repeat: no-repeat;
    background-position: center;
  }

  .icon-care-anywhere {
    background-image: url("../images/homepage/care-anywhere.png");
    background-repeat: no-repeat;
    background-position: center;
  }

  .icon-new-patients {
    background-image: url("../images/homepage/new-patients.png");
    background-repeat: no-repeat;
    background-position: center;
  }

  /* ====================================== ACTION TOOLS == */

  /* STYLE CONTENT/FLEX CHILDREN */
  #action-tools a {
    text-decoration: none;
    padding-bottom: 1rem;
    display: block;
    border: 1px solid #e7e2c5;
  }

  #action-tools a:hover {
    transition: 1s ease;
    background-color: #e7e2c5;
  }

  #action-tools a img {
    /* use flex item? */
    display: flex;
    flex-direction: column;
    cursor: pointer;
  }

  #action-tools span {
    padding-left: 1rem;
    text-transform: capitalize;
    text-transform: uppercase;
    letter-spacing: 0.04rem;
    /*text-indent: 10px;*/
    align-items: left;
  }

  /* ============================= ARROWS  */

  /* used with .panel-text */
  /*
    .arrow-at-end-tan {
      background-image: url("../images/homepage/arrow-tan-right.png");
      background-position: center right;
      background-repeat: no-repeat;
      padding-right: 10px;
    }
    */

  /* used with member tools/ icon nav block text (smaller blue arrow) */
  .arrow-at-end {
    background-image: url("../images/homepage/arrow-blue-right-small.png");
    background-position: center right;
    background-repeat: no-repeat;
    padding-right: 10px;
  }

  /* used with action tools, photo/nav cards */
  .arrow-at-end-blue {
    background-image: url("../images/homepage/arrow-blue-right.png");
    background-position: center right;
    background-repeat: no-repeat;
    padding-right: 16px;
  }

  .text-dark {
    color: #063b6d;
  }