/*** 

  css_homepage_bass.css
  
  Most styles used in the layout of the college homepage.
  Some sections will have styles defined in additional stylesheets, 
  like css_homepage_proof_points.css
  
***/

.homepage #maincontent,
.homepage #maincontent .content {
  padding: 0 !important;
}

.homepage main div[id*='container'] {
  position: relative;
}

/* Temporary style to show layout blocks while developing the homepage */

.Xhomepage main div[id*='container'] {
  border: 1px solid #ccc;
}


/* Hide the site header on the homepage in mobile views - 
   discontinued a couple of days after wrap8 launched. */

.homepage #site-header-container {
  /* display: none; */
}


/* Button-like links that serve as headings for homepage sections */

.homepage #maincontent .button,
#maincontent .homepage .button,
.manual-button .button,
.button.manual-button {
  display: inline-block;
  font-family: "United Sans",Impact,"Arial Black","sans serif";
  color: #000;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 8px 3em 6px 3em;
  border: 2px solid #8e6f3e;
}

.homepage  #maincontent .button:hover,
#maincontent .homepage .button:hover,
.manual-button .button:hover,
.button.manual-button:hover {
  color: #fff;
  border-color: #8e6f3e;
  background-color: #8e6f3e;
}

/* Main content headings and blocks on homepage */

.homepage main div[id*='container'] .heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 50px 0;
}
      
.homepage #billboard-container {
}
      
.homepage #billboard-links-container {
}
      
.homepage #social-container {
}

.homepage #social-container .tint-container {
  background-color: #fff;
  margin: 30px 0;
}
      
.homepage #news-container {
}
      
.homepage #events-container {
  margin: 30px auto;
}
      
/* Feature and Dean's sections */

.homepage #feature-container .feature {
  height: 450px;
  color: #fff;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
  # background-color: rgba(255, 155, 26, 0.6);    /* Mackey Orange */
  background-color: rgba(110, 153, 180, 0.6);   /* Slayter Blue */
}

.homepage #feature-container:after {
  content: "";
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1.00;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1; 
}

.homepage #feature-container .feature,
.homepage #dean-container .dean {
  display: flex;
  justify-content: center;
  align-content: center;
}

.homepage #feature-container .feature > div,
.homepage #dean-container .dean > div {
  width: 90%;
  padding: 15px 0;
}

.homepage #feature-container .feature .headline a,
.homepage #feature-container .feature .headline a:hover,
.homepage #feature-container .feature .headline a:active {
  text-decoration: none;
  color: #fff;
}

.homepage #feature-container .feature .headline h3,
.homepage #dean-container .dean .headline h3 {
  font-size: 1.7rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
  margin: 10px 0;
}

.homepage #feature-container .feature .headline h3 strong,
.homepage #dean-container .dean .headline h3 strong {
  font-size: 2rem;
  letter-spacing: 1px;
  color: #fff;
}

.homepage #feature-container .feature .intro {
  border-top: 3px solid #fff;
}

.homepage #feature-container .feature .intro .tagline,
.homepage #dean-container .dean .intro .tagline {
  font-size: 1.25em;
  font-weight: 500;
}

.homepage #dean-container:after {
  content: "";
  background-size: cover;
  background-position: center;
  opacity: 0.25;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1; 
}

.homepage #dean-container .dean {
  height: 330px;
  color: #4c4c4c;
}

.homepage #dean-container .dean:after {
  content: "";
  background-image: url('/Wraps/ECO/wrap8/images/stripes.png');
  background-repeat: repeat;
  opacity: 0.75;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1; 
}

.homepage #dean-container .dean .headline a,
.homepage #dean-container .dean .headline a:hover,
.homepage #dean-container .dean .headline a:active {
  text-decoration: none;
  color: #555960;
}

.homepage #dean-container .dean .headline h3 {
  font-size: 1.25rem;
  letter-spacing: 0px;
  color: #555960;
}

.homepage #dean-container .dean .headline h3 strong {
  font-size: 1.75rem;
  letter-spacing: 0px;
  color: #555960;
}

.homepage #dean-container .dean .intro {
  border-top: 3px solid #555960;
}


/* Media queries for a given screen size or LARGER */

/* Extra small devices (portrait phones, less than 576px)
   No media query since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {


  .homepage #site-header-container {
    display: block;
  }
   
  .homepage #feature-container .feature > div,
  .homepage #dean-container .dean > div {
    align-self: center;
    width: unset;
    padding: 0 15px;
  }

  .homepage #feature-container .feature .intro,
  .homepage #dean-container .dean .intro {
    border-top: none;
    border-left: 3px solid #fff;
  }

  .homepage #dean-container .dean .intro {
    border-top: none;
    border-left: 3px solid #555960;
  }

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  
  .homepage #college-proof-points-container {
    margin-top: -9rem;
  }


  /* Breadcrumbs for sub-site homepages*/
  #billboard-container + .breadcrumb.row,
  #billboard-links-container + .breadcrumb.row {
    margin-top: -9rem;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}




/* Media queries for a given screen size or SMALLER */

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {

}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {

}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {

}

/* Extra large devices (large desktops)
   No media query since the extra-large breakpoint has no upper bound on its width */