/************************************************
MODIFIED FROM: https://cdn.earthdata.nasa.gov/eui/0.3.10/stylesheets/application.css

Reason modified: We don't want the entire Earthdata CSS. We only want some
of it, so our Bootstrap CSS continues to work as intended. Also we don't need
all of it which is just more data to transmit.

Earthdata eui components included:
flyout (the "red thing" in the front page banner)
feature grid (the "boxes under the about us blurb" on the front page)
************************************************/

/*********** Style the eui flyout **********/
div.flyout-container {
  position: absolute;
  right: 0;
  /*top: 100px;*/
  font-size: 1em;
  background-color: black;
  color: white;
  z-index: 1010; 
}

div.flyout-container div.flyout-tab, div.flyout-container > ul {
	display: table-cell; 
}

div.flyout-container div.flyout-tab {
	vertical-align: middle;
	padding: 15px;
	background-color: #b3241c;
	cursor: pointer; 
}

div.flyout-container div.flyout-tab div.flyout-tab-nub {
	position: absolute;
	top: 0;
	height: 100%;
	margin-left: -25px;
	padding: 15px 4px;
	background-color: #871b15;
	color: #b3241c; 
}

div.flyout-container ul {
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0; 
}

div.flyout-container ul li {
	display: table-cell;
	margin: 0;
	padding: 15px;
	vertical-align: middle; 
}

div.flyout-container ul.flyout-details-visible {
	display: table-cell; 
}

div.flyout-container ul.flyout-details-visible i {
	opacity: .5; 
}

div.flyout-container ul.flyout-details-visible .link {
	background-color: #20ce6f; 
}

div.flyout-container ul.flyout-details-visible .link a, div.flyout-container ul.flyout-details-visible .link i {
	color: #fff;
	opacity: 1; 
}


/********** Style the eui feature grid **********/
.eui-feature-grid-row {
  display: table;
  width: 100%; 
}

.eui-feature-grid-row__title {
  margin: 0;
  padding: 1.2em 1.8em 0;
  font-size: 0.9em;
  min-height: 100px;
  font-weight: bold;
  position: absolute;
  width: 100%;
  z-index: 200;
  bottom: 0;
  color: white;
  -webkit-transition: min-height 0.7s ease;
  -moz-transition: min-height 0.7s ease;
  transition: min-height 0.7s ease; 
}

.eui-feature-grid-row__title .eui-icon {
  width: 38px;
  height: 38px;
  display: table;
  vertical-align: middle;
  margin: -35px auto 10px;
  border-radius: 50%;
  padding: 0;
  background-color: #2276ac;
  text-align: center;
  font-size: 2.4em;
  box-shadow: 0 0 15px rgba(50, 50, 50, 0.2);
  line-height: 1.1; 
}

.eui-feature-grid-row__description {
  position: relative;
  z-index: 300;
  margin: 115px 0 0 0;
  padding: 0 1.8em 1.2em;
  font-size: 0.8em;
  line-height: 1.6;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease; 
}

.eui-feature-grid-row__image {
  text-align: center;
  position: relative;
  display: table-cell;
  width: 33.33333%; 
}

.eui-feature-grid-row__image, .eui-feature-grid-row__image:visited {
  height: 250px;
  color: white;
  vertical-align: top;
  background-size: cover;
  background-position: center; 
}

.eui-feature-grid-row__image:hover * {
  color: white; 
}

.eui-feature-grid-row__image:hover .eui-feature-grid-row__title {
  min-height: 220px;
  background: none; 
}

.eui-feature-grid-row__image:hover .eui-feature-grid-row__description {
  visibility: visible;
  opacity: 1; 
}

.eui-feature-grid-row__image:hover:after {
  height: 250px; 
}

.eui-feature-grid-row__image:after {
  content: "";
  height: 100px;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background: #323232;
  opacity: 0.8;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out; 
}

@media screen and (min-width: new-breakpoint(max-width 800px)) {
  .eui-feature-grid-row .eui-feature-grid-row__image {
    display: block;
    width: 100%; 
  }
  .eui-feature-grid-row .eui-feature-grid-row__image:after {
    height: 250px;
    opacity: 0.6; 
  }
  .eui-feature-grid-row .eui-feature-grid-row__image .eui-feature-grid-row__title {
    position: inherit;
    background: none; 
  }
  .eui-feature-grid-row .eui-feature-grid-row__image .eui-feature-grid-row__title .eui-icon {
    margin: 10px auto; 
  }
  .eui-feature-grid-row .eui-feature-grid-row__image .eui-feature-grid-row__description {
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
    visibility: visible;
    opacity: 1;
    margin-top: 10px; 
  }
  .eui-feature-grid-row .eui-feature-grid-row__image:hover .eui-feature-grid-row__title {
    min-height: 100px;
    background: none; 
  } 
}

/********** Style the eui accordion **********/
.eui-accordion {
  margin-bottom: 0.5em;
  border: 1px solid #cccccc; }
  .eui-accordion.is-closed .eui-accordion__body {
    display: none;
	visibility: hidden; }
  .eui-accordion.is-closed .eui-accordion__icon > i {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); }
  .eui-accordion__header {
    display: block;
    border-bottom: 5px solid #ccc;
    padding: 1em;
    background-color: #edf0f0;
    color: #1f70a3;
    font-weight: bold;
    cursor: pointer; }
    .eui-accordion__header:hover {
      background-color: #dadddf; }
    .eui-accordion__header:after {
      content: '';
      display: block;
      clear: both; }
  .eui-accordion__body {
    margin: 0;
    padding: 1em; }
  .eui-accordion__icon {
    display: inline-block;
    float: right;
    padding: 0 0.5em;
    font-size: 1.2em;
    opacity: 0.7;
    cursor: pointer; }
    .eui-accordion__icon > i {
      -webkit-transition: -webkit-transform 0.2s ease-in;
      transition: -webkit-transform 0.2s ease-in;
      transition: transform 0.2s ease-in;
      transition: transform 0.2s ease-in, -webkit-transform 0.2s ease-in; }
  .eui-accordion__title {
    display: inline-block;
    float: left;
    margin: 0;
    border: 0;
    padding: 0;
    color: #1f70a3;
    font-size: 1.8em;
    font-weight: 200;
    text-decoration: none; 
	}