/* CSS for All locations */
a.headinglink{
        color:#fff;
        text-decoration:none;
    }
    a.headinglink:hover, a.headinglink:focus{
        text-decoration:underline;
        color:#be5128;;
    }
    div#about{
        background-color: #004564;  overflow: hidden; color: #fff;
    }
    
.cta a{
  border: 4px solid #c4481d;
  padding-inline: 1em !important;
     border-radius: 1.5rem;
     background-color: rgba(196, 96, 29, 0.25);
}

.cta a:hover, .cta a:focus{
  background:#c4481d;
  text-shadow: none;
  color:#fff !important;
  transform: scale(1.1);
}
#header-text {
  margin-inline: auto !important;
  position: absolute;
  min-width: 100vw;
  right:0;
  left: 0;
  bottom:0;
  background-image: linear-gradient(to top, rgba(0, 40, 86,.3), rgba(0, 40, 86,.7));
  padding-block: 2rem;
}
#header-text h1 {
  text-align: left;
  font-size:5rem;
  font-weight: 900 !important;
  min-width: 100%;
  margin-left: 15%;
}
#header-text h1:before {
  content:"UTHealth Houston School of Public Health in";
  margin-left: 0%;
  font-size:1rem;
  display: block;  
}
#header-text h2{
  text-align: left;
  max-width: 50%;
  margin-left: 15%;;
}

#about-embrace{
  margin-top:0;
  padding-bottom: 3rem;
}
#latest-news-s{
  margin-block: 2rem 1rem;
}
#top-news-item-s .cell.small-12.large-6:first-of-type {
  /*! background-color: rgba(0, 67, 100, 0.05); */
  padding:1rem;
  border: 1px solid #004364;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
}
#top-news-item-s .cell.small-12.large-6 h3{
  font-size:1.5rem;
}
#top-news-item-s .cell.small-12.large-6 h3 a{
  text-decoration: none;
  color:#c4481d;
  font-weight: 900!important;
}

p.cta {
  float: unset !important;
  text-align: center;
  margin-top: 1rem;
  min-width:100%;
}
p.cta i{
  border:1px solid;
  padding:.25rem .5rem;
}
.cell.rigth-bar-news figure{
  max-width: 33%;
  float: left;
  margin-right: 2rem;
}
.cell.rigth-bar-news {
  padding-block: 1rem;
  margin-block: .5rem;
}
.cell.rigth-bar-news:not(:last-of-type){
  border-bottom:1px solid;
}
#about-city{
  margin-top:0;
  padding-block: 3rem;
 
}

#about-city h2 {
  font-size:3.5rem;
  color:#004364;
  margin-top:0;
}
#location-about a.button{
  padding-block: 1rem;
}
#location-about a.button:hover, #location-about a.button:focus{
  text-decoration:underline;
}

#location-about{
  position: relative;
  text-shadow: 2px 1px 10px rgba(0,0,0,0.5);
  border-right: 2px solid #004364;
  padding-right: 1rem;

}
#location-about .button {
    border: 2px solid var(--sph-orange);
    padding: .5rem 1rem;
    border-radius: 10px;
    color: var(--white);
    text-decoration: none;
    display: inline-block;
    margin-bottom: 1rem;
    min-width: 12rem;
    text-align: center;
    background-color: rgba(196, 72, 29, .96);
    margin-right: .25rem;
    font-weight: 600;
}

#location-research{
    margin-block:1rem 3rem;
  padding-block: 3rem;
}

.a-research-areas ul.small-up-2{
    list-style-type:none;
}
.a-research-areas li.cell {
  text-align: center;
  border:1px solid;
  margin-block: .5rem;
  padding-block: .75rem;
  border-radius:10px;
}
.a-research-areas li.cell i{
  display: block;
  font-size:2rem;
  color:#004364;
}

#latest-news-s .headline {
  font-size: 3rem;
  color:#004364;
}
#latest-news-s .headline span{
  text-transform: uppercase;
  font-weight: bold;
}
.a-research-areas {
  margin-block: 6rem 3rem;
}
#latest-news-s {
  background-color:#f8f8f8;
  border-radius: 100% 0 0 0;
}
#latest-news-s a   {
  text-decoration: none;
  color:#c4481d;
}
#latest-news-s a:hover, #latest-news-s a:focus{
    text-decoration:underline;
}
#latest-news-s a > p.h5{
    color: #c4481d !important;
}
#latest-news-s a > p.h5:hover{
    text-decoration: underline;
}

#student-life-1 figcaption,  #student-practicum figcaption  {
  background-color:#004364;
  position: relative;
  color:white;
  padding:.5rem;
  margin-top:-3rem;
  margin-left: -3rem;
  max-width: 80%;
  border-radius: 1rem;
}
#student-practicum{
    padding-top:10%;
    padding-bottom:3rem;
}


.top-image {
  margin-left: -10%;
  margin-block: 2rem;
  border-block: 1px solid #004364;
  padding: 1rem;
  background-color: white;

}
#top-news-item-s {

  padding-block:2rem;
}
#top-news-item-s p{
  color:black; 
}
  
#student-life-1 h2 {
  font-size: 3.25rem;
  font-weight: bolder !important; 
  color:#004364;
  
}

#student-life-1 .small-12.large-6.columns.cell.margin-medium-top.right-content .inner,
#student-practicum .small-12.large-6.columns.cell.margin-medium-top.left-content .inner {
    background-color: rgba(255, 255, 255, .9)!important;
    padding:1rem;
}
#student-life-1 .small-12.large-6.columns.cell.margin-medium-top.right-content .inner p,
#student-practicum .small-12.large-6.columns.cell.margin-medium-top.left-content .inner p{
    color:black;
}

#location-faculty{
    padding-top:2rem;
}

#location-comm ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none; /* Optional: remove bullet points */
  padding: 0;
  margin: 0;
  
}
#location-comm ul i{
  font-size:2.5rem;
  color:#c4481d;
  display: block;
  text-align: center;
  background-color:#fefefe;
  padding-block: .5rem;
  border-radius: 10px;
  margin-bottom: .75rem;
}
#location-comm ul li{
  width:calc(33.3333% - 2.5rem); 
  box-sizing: border-box;
  padding: 0.75em;
  text-align: center;
  background-color:#f1f1f1;
  margin-inline: 1rem;
  margin-block: .5rem;
  color:#004364;
  border-radius: 10px;
}

#location-comm h2{
  font-size:3rem;
  color: #004364;
  margin-bottom: 2rem;
  font-weight:bold !important;
}
#location-comm .cell.medium-9{
  background-color: rgba(245, 245 , 245, 0.9);
  padding:1.5rem;
  color: #004364;
  margin-bottom: 3rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  outline: 1px solid #004364;
  outline-offset: 1.5rem;
}
#location-research h2 {
  font-size: 3rem;
  color:#004364;
  margin-top:0;
  padding-top: 0;
  background-image: url('/global/img/layout/UTHHSPH-Health-Icons-2_copy.png');
  background-size: cover;
  text-align: center;
  padding-block: 2rem;
}

#research-1half {
  background-color:#fff;
  padding-block: 2rem;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.3);
  position: relative;
}
#research-1half:before{
  content:'';
  width: 30%;
  height: 100%;
  background-color:#c4481d;
  position: absolute;
  z-index: -1;
  top:-3rem;
  left:-3rem;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.3);
}

#research-1half:after{
  content:'';
  width: 30%;
  height: 80%;
  background-color:#c4481d;
  position: absolute;
  z-index: -1;
  bottom:-3rem;
  right:-3rem;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.3);
}

#location-research .text-center.h2 {
  color: #004364;
  font-size: 2.25rem;
  --s: 10px;   
  --c: #004364;  
  --w: 100px; 
  --g: 10px; 

  border-image: 
    linear-gradient(
      #0000      calc(50% - var(--s)/2),
      var(--c) 0 calc(50% + var(--s)/2),
      #0000 0) 
    0 1 / 0 var(--w) / 0 calc(var(--w) + var(--g));
   
}
#research-1half p {
  color:#004364;
}

#location-about.cell.medium-6 {
  display: flex;
  flex-flow: column;
  justify-content: center;
}

    @media only screen and (max-width: 1009px) {
    
    .threeCol .cell {
      margin-bottom: 4em;
    }
    }
    
@media only screen and (max-width:600px){
    #header-text h2 {
     max-width: 100%;
    margin-left: 5%;
}
    #header-text h1 {
    font-size:3.5rem;
     margin-left: 5%;
}
    #latest-news-s p.h5{
    font-size:.85rem;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}
    .cell.rigth-bar-news figure {
    max-width: 25%;
     margin-right: 1rem;
}
    #latest-news-s .headline, #about-city h2, #location-faculty h2, #location-research h2, #student-life-1 h2, #location-comm h2 {
     font-size: 2.5rem !important;
}
    #location-research .text-center.h2{
    font-size:1.7rem;
    max-width: 90%;
    margin: auto;
  }
  
    #student-life-1 figcaption,  #student-practicum figcaption {
    margin-left: 0;
    max-width: 90%;
    font-size: 1rem;
}
#location-comm ul li {
    width: calc(50% - 2.5rem);
    font-size: .75rem;
  }
  #location-comm h2{
    background-color: rgba(255, 255, 255, 0.9)
  }
}