/** 
    Styles for sites based on our common lab/group template structure
    Every selector should start with .lab-group-site so as to avoid
    messing up the college or school sites!
**/


/*** Change the url below to set the default photo for your homepage ***/

.lab-group-site .hero {
  background-image: url('./images/homepage-hero.jpg');
}


/*** Misc homepage tweaks ***/

.lab-group-site .group-homepage h1:first-of-type {
  margin-top: 0;
}


/*** Set styles for the components on the homepages ***/

.lab-group-site .group-homepage .hero,
.lab-group-site .group-homepage .feed,
.lab-group-site .group-homepage .deptaudience {
  height: 100%;
}

.lab-group-site .group-homepage .hero,
.lab-group-site .group-homepage .feed .feed-container {
  overflow: hidden;
}

.lab-group-site .group-homepage .hero {
  border: 0;
  margin-bottom: 0;
}

.lab-group-site .group-homepage .maincontent {
  margin-bottom: 2rem;
}


/*** Adjustments to the name of the site in the top header area ***/

.lab-group-site .top .department a {
  line-height: 1.3em;
  position: relative;
  top: 0px;
}

.lab-group-site.homepage #maincontent {
  padding-bottom: 2rem !important;
}


/*** Styles for the four-box grid homepage option. 
     If you don't specify valid background-image URLs, the boxes will be solid colors.  ***/
     
.lab-group-site .deptaudience {
  display: grid;
}

.lab-group-site .deptaudience div {
  border-right: none;
  padding: 0px;
  margin-bottom: 1rem;
}

.lab-group-site .box a {
  display: block;
  height: 100%;
  background-position: 50% 50%;
  background-color: rgba(0,0,0,0.80);
  font-family: "United Sans",Impact,"Arial Black","sans serif";
  font-size: 1rem;
  text-align: center;
  color: #fff;
}

.lab-group-site .deptaudience .box .caption {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-transform: uppercase;
  text-shadow: none;
  display: inline;
  position: initial;
  bottom: unset;
  left: unset;
  padding: 0;
  background-color: transparent;
  border: none;
}

/* 

  .lab-group-site .box1 a,
  .lab-group-site .box2 a,
  .lab-group-site .box3 a,
  .lab-group-site .box4 a {
    background-size: cover;
    background-position: top right;
    background-repeat: no-repeat;
    color: #fff;
    text-decoration: none;
  }

  .lab-group-site .box1 a {
    background-image: url("./images/your-image-1.jpg");
  }
  
  .lab-group-site .box2 a {
    background-image: url("./images/your-image-2.jpg");
  }
  
  .lab-group-site .box3 a {
    background-image: url("./images/your-image-3.jpg");
  }
  
  .lab-group-site .box4 a {
    background-image: url("./images/your-image-4.jpg");
  }
  
  .lab-group-site .no-images .box a {
    background-image: none !important;
  }
  
  .lab-group-site .box1 a .caption,
  .lab-group-site .box2 a .caption,
  .lab-group-site .box3 a .caption,
  .lab-group-site .box4 a .caption {
    text-shadow: 2px 2px 5px #000;
  }
  
*/


/*** Featured link buttons ***/

.feature a {
  display: 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;
}

.feature a:hover {
  color: #fff;
  border-color: #8e6f3e;
  background-color: #8e6f3e;
}


/*** Make images in the page adjust to fit their container ***/

.lab-group-site .maincontent img {
  max-width: 100%;
}


/*** News and Events tweaks ***/

.lab-group-site .rightnav .event-list-past-link {
  margin-left: 0;
}


/*** Changes to navigation menus ***/

.lab-group-site #top-bar .sub-nav.open {
  width: initial;
  left: initial;
}

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

  .lab-group-site .group-homepage .feed {
    height: 200px;
  }
  
  .lab-group-site .grid-links {
    height: 200px;
  }

}
  
@media only screen and (min-width: 768px) and (max-width: 991px) {

  .lab-group-site .top .department a {
    line-height: 1.3em;
    position: relative;
    top: 2px;
  }
  
  .lab-group-site .hero-header {
    height: 300px;
  }

}

@media only screen and (min-width: 992px) and (max-width: 1199px) {

  .lab-group-site .top .department a {
    top: 2px;
  }
  
  .lab-group-site .hero-header {
    height: 375px;
  }

}

@media only screen and (min-width: 1200px) {

  .lab-group-site .top .department a {
    line-height: 1.2em;
    position: relative;
  }
  
  .lab-group-site .hero-header {
    height: 425px;
  }

}