/*****
  Color theme by Kay McKelly
  https: //color.adobe.com/nature%27s-future-color-theme-cc462217-1f98-4239-92dc-953b1d14faea/
  (a riff on the custom banner combined with the original blue 2 theme)

  HEX: #1D2310, #799441, #4983C8, #9496A6, #D03753, #C75348, #D9A87E
*****/


/***** Header (in /includes/nav.php) *****/
/* same as teal to place nav menu at top. */
#pageTop {
  /* equivalent of d-flex */
  display: -ms-flexbox !important;
  display: flex !important;
  /* equivalent of flex-column-reverse */
  -ms-flex-direction: column-reverse !important;
  flex-direction: column-reverse !important;
}

/* Make top nav sticky. This requires moving .pageTopContainer
   down the page so it isn't covered (in both desktop and mobile). */
#mainNavRow {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  background-color: rgba(73, 131, 200, 0.9);
}

.pageTopContainer {
  position: relative;
  top: 30px;
}

@media only screen and (min-width: 992px) {
  .pageTopContainer {
    top: 60px;
  }
}

/* Make the image bigger on the home page. */
body.home .headerImg {
  min-height: 350px;
}

.headerImg {
  height: 300px;
}


/* remove the blue stripe above main on mobile. */
@media only screen and (max-width: 768px) {
  main {
    margin-top: 0;
  }
}

.pageTopContainer {
  max-width: 95%;
}

/* A glow around the IACR logo */
img#logo {
  border-radius: 50%;
  box-shadow: 0 0 20px 0 rgba(217, 168, 126, 0.9);
}

.headerImg {
  background-image: url("../images/banners/sergio-sala-unsplash.jpg");
  background-size: cover;
  background-position: center 13%;
}

.headerGradient {
  background: linear-gradient(rgba(32,92,128,.5),rgba(65,64,128,.2));
}

.headerTitle, .headerInfo {
  color: #1D2310;
  padding: 10px;
  border-radius: 20px;
  background-color: rgba(253, 251, 248, 0.8);
  /* repeating the glow around the logo to really make these bgs pop */
  box-shadow: 0 0 20px 0 rgba(217, 168, 126, 0.9);
}

div.dropdown-menu {
  color: #FDFBF8;
  background-color: rgba(73, 131, 200, 0.7);
}

div.dropdown-menu a:hover {
  background-color: #FDFBF8;
  color: #1D2310;
}


/***** Main Content: general styling *****/
body {
  background-color: #FDFBF8;
}

.indPageTitle, .dateTitle, .subSubtitle {
  color: #4983C8;
}

.pageSubtitle {
  color: #688038;
}

a {
  color: #D03753;
}

a:hover {
  color: #688038;
}


/* NOTE: custom button colors typically derived from the two most common colors in a given theme */
.customBtn-warm {
  background-color: rgba(208, 55, 83, 0.3);
}

.customBtn-warm:hover {
  background-color: rgba(208, 55, 83, 0.9);
  color: #FDFBF8;
}

.customBtn-cool {
  background-color: rgba(148, 150, 166, 0.3);
}

.customBtn-cool:hover {
  background-color: rgba(73, 131, 200, 0.6);
}

code {
  color: #C75348;
}

.customCard {
  box-shadow: 2px 2px 20px 2px rgba(217, 168, 126, 0.3);
}

.customCardHeader {
  background-color: rgba(121, 148, 65, 0.6);
  color: #1D2310;
}

.customAlert-warm {
  background-color: rgba(199, 83, 72, 0.2);
  border-color: rgba(199, 83, 72, 0.5);
}

.customAlert-cool {
  background-color: rgba(73, 131, 200, 0.3);
  border-color: rgba(73, 131, 200, 0.5);
}

.customCardFooter {
  /* NOTE: typically this is a more transparent version of the card header bg color */
    background-color: rgba(121, 148, 65, 0.1);
}


/**** Program specific colors ********/
div.trackMenu .nav-link.active {
  background-color: rgba(177, 181, 231, 0.3) !important;
  color: #205c80 !important;
}

div.sessionList div.session {
  background-color: rgba(177, 181, 231, 0.3);
}