/* Color scheme: https://coolors.co/70709e-266dd3-194687-467999-af3e4d */


/***** 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). */
#main-nav-row {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

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

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

.headerImg {
  min-height: 300px;
  background-image: url('../images/banners/grayHive.jpg');
  background-size: cover;
}

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

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

/* 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: 0px 0px 20px 0px rgba(255,255,255,.8);
}

.headerTitle, .headerInfo {
  color: #102a83;
  padding: 10px;
  border-radius: 20px;
  border: 2px solid #102a83;
  background-color: rgba(255,255,255,.8);
}

#main-nav-row {
    background-color: #194687;
}

div.dropdown-menu {
  color: #FEFDFB;
  background-color: #194687;
}



/***** Main Content: general styling *****/
body {
  /* background-color: rgba(25, 70, 135, 0.2); */
  background-color: rgba(38, 109, 211, 0.2);
  color: #12143A;
}

.indPageTitle {
  color: #266DD3;
}

.pageSubtitle {
  color: #70709E;
}

.subSubtitle {
  color: #467999;
}

a {
  color: #973542;
}

a:hover {
  color: #266DD3;
}

.customCard {
  border: 1px solid #B8B8CF;
}

.customCardHeader {
  background-color: #266DD3;
  color: #F3F3FB;
}

.dateTitle {
  color: #205C80;
}

.customCardFooter {
  /* NOTE: typically this is a more transparent version of the card header bg color */
    background-color: rgba(156, 188, 235, .4);
}


/***** Main Content: images & icons *****/
/* change color of icons */
.icon {
  /* thanks https://codepen.io/sosuke/pen/Pjoqqp for generating this filter (the first two properties set the icon to black first to achieve a truer color match) */
  filter: brightness(0) saturate(100%) invert(25%) sepia(11%) saturate(6019%) hue-rotate(315deg) brightness(97%) contrast(89%);
}



/***** Page-specific: program.php *****/
div.mutualEvent {
  background-color: rgba(112, 112, 158, 0.1);
}

div.mutualEvent h4 {
  color: #194687;
}