/* COVID-19 CSS */
.homepage #covid { background: rgb(255, 255, 255); text-align: center; padding: 10px 10px 0; width: 100%; border-top: 2px solid black; border-bottom: 2px solid black;}
.homepage #covid p { margin-top: 0; font-family: acumin-pro-condensed, "Franklin Gothic", sans-serif; font-weight: 500; font-style: italic; text-transform: uppercase; text-decoration: none; color: #000; font-size: 24px;}
.homepage #covid p a { font-family: acumin-pro-condensed, "Franklin Gothic", sans-serif; font-weight: 500; font-style: italic; text-transform: uppercase; text-decoration: none; color: #000; cursor: pointer; }
.homepage #covid p a:hover { text-decoration: underline; }


/* Changes to eliminate some of the inline styles in controls/template page templates */

#feature-container.story-content {
  margin-bottom: 1rem; 
  margin-top: 30px;
}



/* Adjust background of banner buttons */
#banner-links-overlay .button { background: rgba(0, 0, 0, 0.65); }

/* Adjust feature background image */
.feature { background-x: 50%; background-y: 50%; background-position: center; background-size: cover; }

/* Hide the intro field of Event Documents when viewing them 
.event-content .event-intro {
  display: none;
}*/

.breadcrumb.row { margin-bottom :0; }

/* Styles for Blocks */
.story-box { margin-top: 30px; }
.story-box a { color: #000; }
.story-box a:hover { text-decoration: none !important; }
.story { background-color: #C4BFC0; display: block; height: 100%; padding: 0; text-decoration: none; }
.story:hover { background-color: #EBD99F; }
.story .title { font-size: 1.1rem; margin: 15px; }
.story .intro { font-size: 1.0rem; margin-left: 10%; margin-right: 10%; }
.story img { background-size: cover; background-position-y: 20%; background-position-x: 50%; height: auto; left: 0; position: absolute; top: 0; width: 100%; }
.story iframe { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }

.feature-box { background-position: right; background-size: cover; border-bottom: 2px solid #000; border-top: 2px solid #000; margin-top: 30px; }
.feature-box:after { background-size: cover !important; background-position: 0% 50% !important; }

.ONE-SIZE {
  height                  : 0;
  overflow                : hidden;
  padding-bottom          : 56.25%;
  position                : relative;
}

/* End Styles for Blocks */

/************************* Custom CSS **************************/

.button svg {
    font-size: 50px;
    padding: 8px;
    border-bottom: 2px solid white;
}

.homepage #feature-container .feature {
   background-color: inherit !important;
} 

.homepage #banner-links-overlay {
  background-color: #000;
  padding: 15px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}
      
.homepage #banner-links-overlay .button {
  color: #fff;
  padding: 8px 10px 6px 10px;
  margin: 5px;
}
      
.homepage #banner-links-overlay .button {
  color: #fff;
  padding: 8px 10px 6px 10px;
  margin: 5px;
}
@media (min-width: 854px) {
  .homepage #banner-links-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.6), rgba(0,0,0,.7), rgba(0,0,0,0.85));
    height: 9rem;
    position: relative;
    top: -9rem;
  }
/*
  .feature {
    margin-top         : -9rem;
  }
*/
}

.no-underline:hover {
   text-decoration: none;
}


.GLASS a, .GLASS h3 {
   color:white !important;
}





/*************** Blocks CSS ****************************/

#entity-subsite-title a {
  text-transform: none !important;
}
#college-proof-points-container { margin-top: auto !important; }

.IMP {
  color               : #AD3C98;
  font-weight         : 600;
}
.IMP-2 {
  color               : #FF8800;
  font-weight         : 600;
}
.BIG-IMP {
  color               : #FFF;
  font-weight         : 600;
  font-size           : 1.50em;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25);
}
.ONE-SIZE {
  height                  : 0;
  overflow                : hidden;
  padding-bottom          : 56.25%;
  position                : relative;
}
.CALLOUT-intro {
  color                   : #000;
  font-style              : italic;
  padding-top             : 0;
  text-align              : left;
}
.CALLOUT-title {
  color                   : #000;
  font-weight             : 600;
  margin                  : 1.0rem;
}

.TUTORIAL-BOX, .EXAMPLE-BOX, .HEADER-BOX {
  background-color        : #EEE;
  padding                 : 30px;
  width                   : 100%;
}
.HEADER-BOX {
  background              : #635B4A;
  box-shadow              : inset 0 6px 12px rgba(0, 0, 0, 0.15);
  padding-top             : 0;
}
.CODE-BOX {
  background-color        : #FFF;
  border                  : 2px dotted #DDD;
  border-radius           : 6px;
  display                 : block;
  margin-bottom           : 30px;
  padding                 : 30px;
  text-align              : left;
  width                   : 100%;
}
.TUTORIAL-BOX .SM-text {
  color                   : #666;
}
.EXAMPLE-BOX {
  margin-top              : 0;
  padding-top             : 0;
}

/* ********************* */
/* *** D E F A U L T *** */
/* ********************* */
.PADDED         { padding-left: 30px; padding-right: 30px; }
.XS-text        { font-size: 1.00em; }
.SM-text        { font-size: 1.00em; }
.MD-text        { font-size: 1.00em; }
.LG-text        { font-size: 1.15em; }
.XL-text        { font-size: 1.35em; }
.SHADOW-text    { text-shadow: 0px 2px 2px rgba(0, 0, 0, 1); }
.EXPANDER-links { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; bottom: 0; color: #FFF; height: auto; margin: 0; padding: 0; padding-bottom: 9px; padding-top: 9px; top: auto; }
.EXPANDER-box   { height: 100%; }
.BANNER-box     { background-position: center; background-size: cover; padding: 0; }
.GLASS          { background: rgba(0, 0, 0, 0.45); border-top: 2px solid rgba(0, 0, 0, 0.65); bottom: 0; padding: 0; position: absolute; text-align: center; }
.OBSIDIAN       { background: #000; padding: 0; text-align: center; }
.BUTTON,
.BUTTON-ACTIVE  { border: 2px solid #C28E0E; color: #FFF !important; font-size: 1.15em; font-weight: 400; margin: 5px; padding: 8px 10px 6px 10px; text-transform: uppercase; text-align: center; }
.BUTTON-ACTIVE  { background: #444444; }
.BUTTON-BLACK   { border: 2px solid #C28E0E; color: #000 !important; font-size: 1.05em; font-weight: 400; margin: 5px; padding: 8px 30px 6px 30px; text-transform: uppercase; text-align: center; }
.BUTTON-BLACK:hover,
.BUTTON:hover,
.BUTTON-ACTIVE:hover { background: #C28E0E; color: #FFF !important; text-decoration: none; }

/* ***************** */
/* *** S M A L L *** */
/* ***************** */

@media (min-width: 576px) {
  .XS-text        { font-size  : 1.00em; }
  .SM-text        { font-size  : 1.00em; }
  .MD-text        { font-size  : 1.15em; }
  .LG-text        { font-size  : 1.35em; }
  .XL-text        { font-size  : 1.60em; }
  .EXPANDER-links { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; }
  .EXPANDER-box   { height: 350px; }
}

/* ******************* */
/* *** M E D I U M *** */
/* ******************* */

@media (min-width: 768px) {
  .XS-text      { font-size : 1.00em; }
  .SM-text      { font-size : 1.15em; }
  .MD-text      { font-size : 1.35em; }
  .LG-text      { font-size : 1.60em; }
  .XL-text      { font-size : 1.90em; }
  .EXPANDER-box { height: 425px; }
}

/* ***************** */
/* *** L A R G E *** */
/* ***************** */

@media (min-width: 992px) {
  .XS-text      { font-size : 1.15em; }
  .SM-text      { font-size : 1.35em; }
  .MD-text      { font-size : 1.60em; }
  .LG-text      { font-size : 1.90em; }
  .XL-text      { font-size : 2.35em; }
  .EXPANDER-box { height: 550px; }
}

/* ***************************** */
/* *** E X T R A - L A R G E *** */
/* ***************************** */

@media (min-width: 1200px) {
  .XS-text      { font-size : 1.25em; }
  .SM-text      { font-size : 1.50em; }
  .MD-text      { font-size : 1.80em; }
  .LG-text      { font-size : 2.65em; }
  .XL-text      { font-size : 2.75em; }
  .EXPANDER-box { height: 625px; }
}





/* ****************************** */
/* Updates on 08-31-2018 */
.story-content {
  margin-bottom       : 60px;
}
.story-content p, .story-content li {
  font-size           : 1.25em;
}
.cc-canopy {
  position              : absolute;
}
.cc-story:hover {
  background-color      : #C28E0E;
}
.cc-story a {
  color                 : #000;
}
.cc-story a:hover {
  color                 : #FFF !important;
  text-decoration       : none !important;
}
.cc-xl-push {
  margin-top            : 30px;
}
.cc-xl-padding {
  margin-top            : 30px;
  margin-bottom         : 30px;
}
.homepage #news-container .story a {
    display: block;
    height: 100%;
    color: #333;
    background-color: #eee;
    text-decoration: none;
}
.cc-story .title {
  font-size             : 1.0rem;
  font-weight           : 600;
  margin                : 1.0rem;
}
.cc-story .intro {
  font-size             : 0.8rem;
  margin-left           : 1.0rem;
  margin-right          : 1.0rem;
}
.cc-story .image {
  height                : 200px;
  background-size       : cover;
  background-position-y : 20%;
  background-position-x : 50%;
}
.cc-story {
  background-color   : #EEE;
  display            : block;
  height             : 100%;
  padding            : 0;
  text-decoration    : none;
}

.cc-container {
  padding-bottom     : 30px;
}
.cc-event-details {
  border-left        : 2px solid #C28E0E;
}
.cc-month {
  color              : #FFF;
  background-color   : #C28E0E;
  text-transform     : uppercase;
  text-align         : center;
  letter-spacing     : 1px;
  padding            : 3px 2px 2px 2px;
}
.cc-day {
  font-size          : 2.5rem;
  font-weight        : 600;
  text-align         : center;
  letter-spacing     : 1px;
}
.cc-focus-bar {
  background         : #000;
  padding-top        : 30px;
  padding-bottom     : 30px;
  text-align         : center;
}

.cc-boost {
  text-align         : center;
  padding-bottom     : 30px;
  padding-top        : 30px;
}
.cc-boost img {
  max-height         : 200px;
}
.cc-breadcrumbs {
  margin-top         : -9rem;
}
.cc-bouncer {
  margin-top         : 9rem;
}
@media (max-width: 767.98px) {
  .cc-bouncer, .cc-breadcrumbs {
    margin-top         : 0;
  }
  .cc-buffer {
    margin-top         : 0;
    margin-bottom      : 0;
  }
}
/* ******************************** */




/* Banner updates on 07-06-2018 */
#cc-pnp {
  background-color : rgba(0, 0, 0, 0.50);
  border           : 2px solid rgba(0, 0, 0, 0.65);
  color            : rgba(255, 255, 255, 1.0);
  display          : none;
  padding          : 2px 12px;
}
#cc-pnp:hover {
  background-color : rgba(0, 0, 0, 1.0);
  cursor           : pointer;
}
.cc-pnp-button {
  height           : 30px;
  width            : 100%;
  position         : absolute;
  right            : 4px;
  text-align       : right;
  text-shadow      : 0px 1px 1px rgba(0, 0, 0, 1);
  text-decoration  : none;
  top              : 4px;
}


/* Banner updates on 06-01-2018 */
.billboard-container-text {
  bottom          : 0px;
  margin-bottom   : 100px;
  position        : absolute;
  text-align      : center;
  text-shadow     : 0px 2px 2px rgba(0, 0, 0, 1);
  text-decoration : none;
  width           : 100%;
  /* z-index         : 1010; */
}
.billboard-container .title {
/*  background      : rgba(255, 215, 0, 0.65);*/
  color           : #FFF;
  font-size       : 1.5rem !important;
  padding         : 0;
}
.billboard-container .intro_head {
  color           : #FFF;
  font-size       : 1.3rem !important;
  margin-bottom   : 0px;
}
.shadow {
  z-index           : 1000;
}






      
/* 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 */
   
    
/* Custom media query for particular feature backgrounds */
@media (min-width: 440px) and (max-width: 575.98px) {

  #feature-container:after {
    background-size: cover !important;
    background-position: 0% 70% !important;
  }

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

  #feature-container:after {
    background-size: cover !important;
    background-position: 0% 50% !important;
  }

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

  #feature-container:after {
    background-size: cover !important;
    background-position: 0% 45% !important;
  }
  
}

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

  #feature-container:after {
    background-position: 0% 30% !important;
  }

}

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

  #feature-container:after {
    background-position: 0% 25% !important;
  }

}




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

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  #billboard-container .billboard-container-text {
    margin-bottom : 0;
  }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
  #billboard-container .billboard-container-text {
    margin-bottom : 0;
  }
}

/* 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 */
   
   



/* Banner updates on 06-08-2018 */
.billboard-container .title.cc-xl-title {
  font-size      : 3em !important;
/*  text-transform : uppercase;*/
}
.billboard-container .intro_head.cc-xl-intro-head {
  background     : rgba(0, 0, 0, 0.8);
  font-size      : 2.0em !important;
  text-transform : uppercase;
  color          : #DAA520 !important;
}

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

.billboard-container .title.cc-xl-title           { font-size : 2.0em !important; }
.billboard-container .intro_head.cc-xl-intro-head { font-size : 1.4em !important; }
.pinnacle-container { width : 127px; }

}

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

.billboard-container .title.cc-xl-title           { font-size : 1.6em !important; }
.billboard-container .intro_head.cc-xl-intro-head { font-size : 1.2em !important; }
.pinnacle-container { width: 127px; }

}

/* Smaller devices */
@media (max-width: 575.98px) {
  .pinnacle-container { background: rgb(255, 255, 255); border: 0; margin: auto; position: relative !important; height: auto; width: 100%; }
  .pinnacle-container img { content:url("https://engineering.purdue.edu/wraps/blocks/images/150-years-of-giant-leaps-horizontal.png"); }
  .pinnacle-container:hover { background: rgba(0, 0, 0, 0.10); border: 0; }
}



/* ********* ORIGINAL *** */
@media only screen and (min-width: 1200px)
.college .coe-grid .box.short a {
    height: 175px;
}

.college .coe-grid .box.short a {
    height: 175px;
}

.black-bg {
background-color: #fff;
}

.fonticon {
  color:#fff; 
  font-size:1em;
}

.boxitem {
   color:#fff; 
   padding-left:.5em;
}

.astro {
   overflow: hidden;
}



/* News Items */
.morenews {
    text-align:right;
    font-style: italic;
}

.boxitem {
  color:#fff !important; 
  padding-left: .5em; 
  font-size: 1em;
}

.boxitem a {
  color:#fff;
  text-decoration: none;
}


/* Local CSS definitions Information */

#menu-box {
  width: 220px;
}

#homepage-layout {
  top: 170px;
}

#feature #feature-image-container {
  background-color: transparent;
}

table {
  border-collapse: collapse;
}
 
table.table2 {
  width: 700px;
 }
 
table.table3 {
  text-align: left;
  border: 0px; 
  padding: 0px; 
  border-spacing: 2px; 
  width: 100%;
}

.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.divclass {
  min-width: 200px;
}

table.selectives td, th{
  border-left: none;
  border-right: none;
  text-align: center;
  padding: 5px;
  border-spacing: 1px;
}

table.selectives2 td, th{
  text-align: center;
  padding: 5px;
  border-spacing: 1px;
}

/*** "New!" flags on Graduate job postings ***/

.event-list-new {
  background-color: #ce4844;
  border-radius: 50%;
  padding: 6px;
  font-weight: bold;
  color: #fff;
  display: block;
  margin-top: .25em;
  width: 3.25em;
}


/*** 2020-06-16 Changes added to create large headlines over video banners ***/

#billboard-container .billboard-container-text {
  margin-bottom: 0;
}

.billboard-container-text {
  bottom: 40%;
  margin-bottom: 0;
}

#billboard-container .billboard-container-text .title.xl-title.cc-xl-title {
  font-family: acumin-pro-extra-condensed, "Franklin Gothic", sans-serif !important;
  font-style: italic;
  text-transform: uppercase;
  font-size: 3rem !important;
  line-height: .75;
  color: #fff;
  text-shadow: 2px 2px 0px rgba(0,0,0,0.9) !important;
}

@media (min-width: 450px) {

  #billboard-container .billboard-container-text .title.xl-title.cc-xl-title {
    font-size: 4.25rem !important;
    text-shadow: 3px 3px 0px rgba(0,0,0,0.9) !important;
  }

}

@media (min-width: 576px) {

  #billboard-container .billboard-container-text .title.xl-title.cc-xl-title {
    font-size: 5.25rem !important;
  }

}

@media (min-width: 768px) {

  #billboard-container .billboard-container-text .title.xl-title.cc-xl-title {
    font-size: 7rem !important;
    text-shadow: 4px 4px 0px rgba(0,0,0,0.9) !important;
  }

}

@media (min-width: 992px) {

  #billboard-container .billboard-container-text .title.xl-title.cc-xl-title {
    font-size: 9rem !important;
  }

}

@media (min-width: 1200px) {

  #billboard-container .billboard-container-text .title.xl-title.cc-xl-title {
    font-size: 10.75rem !important;
    text-shadow: 5px 5px 0px rgba(0,0,0,0.9) !important;
  }

}


/*** 2022-05-24 Changes to accommodate a local version of a template for the online masters billboard ***/

.billboard-container.online {
  background-position: center; 
  border-bottom: 2px solid #000; 
  border-top: 2px solid #000; 
  margin-top: 30px;
}

.billboard-container.online .billboard-container-text {
  margin-bottom: 0;
  z-index: 1010;
}

.billboard-container.online .billboard-container-text .online-container {
  bottom: 0; 
  height: auto; 
  left: 0; 
  margin-left: 0; 
  margin-right: 0; 
  padding-top: 10px; 
  position: absolute; 
  width: 100%;
}

.billboard-container.online .billboard-container-text .online-content {
  background: rgba(0, 0, 0, 0.65); 
  border-bottom: 2px solid rgba(0, 0, 0, 0.05); 
  border-top: 6px solid rgba(0, 0, 0, 0.05); 
  box-shadow: inset 0 10px 20px -10px rgba(100, 100, 100, 0.25); 
  padding: 15px;
}

.billboard-container.online .billboard-container-text .button {
  padding-top: 4px;
  display: inline-block;
}

.billboard-container.online .billboard-container-text h3 {
  color: #FFF; 
  margin: 0;
}

.billboard-container.online .billboard-container-text .online-description {
  color: #FFF; 
  text-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.65); 
  font-size: 1.3rem; 
  line-height: 1.5;
}

@media (max-width: 575.98px) {
  .homepage #billboard-container.billboard-container.online {
    height: 271px !important;
  }
}