/******************************************* #offCanvasMenu */
#offCanvasMenu {z-index: 1000 !important;}
.sticky {z-index: 500 !important;}

.close-button {color: ##4A4A4A;}
.close-button:hover {color: #383838;}

#site-nav {margin-top: 3rem;}
ul#site-nav.vertical.menu li a {color: #383838; font-weight: 500;}
ul#site-nav.vertical.menu li:not(:last-child) {border-bottom: 1px solid #CACACA;}
ul#site-nav.vertical.menu li:hover {background: #cacaca;}

#sticky-nav .title-bar {background: #093145;}


/******************************************* FORMATS: TOC */
#content-toc ol {list-style-type: none;}
h2::before {display: block; content:" "; height: 50px; margin-top: -50px; visibility: hidden;}


/******************************************* #HOME-TEDX */
footer {padding: 0;}
footer p {font-size: 0.9rem; }


/******************************************* #HOME-TEDX */

#home-tedx .button {border-radius: 1.25rem}
#home-tedx .tedx {background: #FFFACD; font-weight: 500; color: #345A5E; width: 100%;}
#home-tedx .tedx:hover {background: #FFEA96;}
#home-tedx .fi {font-size: 1.25rem;}

/******************************************* #RESOURCE-GRID */
#resource-grid {margin-top: 1rem;}

.resource-wrapper {
  position: relative;
  margin-bottom: 0.5rem;
}

.resource-wrapper img {
  float: left;
  overflow: hidden;
  width: 100%;
}

.resource-wrapper .resource-banner {
  position: absolute; z-index: 10;
  top: 75%; width: 95%; left: 0;
  padding: 0.5rem;
  font-size: 0.95rem; font-weight: 600;
}

.resource-content {
  position: absolute; opacity: 0; z-index: 20;
  top: 0; bottom: 0; left: 0; right: 0;
  height: 100%; width: 100%;
  text-align: center;
}

.resource-content-reveal {
  position: absolute;
  width: 100%; padding: 0.5rem; top: 50%;
  transform: translateY(-50%);
}

/******************************************* STYLES: .resource-content-reveal */
.resource-content-reveal h2 {font-size: 1.05rem; font-weight: 600;}
.resource-content-reveal p {font-size: 1.0rem; font-weight: 400; }
.resource-content-reveal .fi {font-size: 1.25rem; font-weight: 400;}


/******************************************* FORMATS: .resource-banner + .resource-content */
/* DEFAULT */
.resource-wrapper .resource-banner {background-color: #345A5E; color: #FFFACD;}
.resource-wrapper img {border: 2px solid #345A5E;}
.resource-wrapper .resource-content {background-color: #FFFACD; color: #345A5E;}

/* IDs */
#raven.resource-wrapper .resource-banner {background-color: rgba(55, 61, 63, 0.9); color: #FFFFFF;}
#raven.resource-wrapper img {border: 2px solid #07565C;}
#raven.resource-wrapper .resource-content {background-color: #07565C; color: #FFFFFF;}

#darkest-indigo.resource-wrapper .resource-banner {background-color: rgba(9, 49, 69, 1); color: #FFFFFF;}
#darkest-indigo.resource-wrapper img {border: 2px solid #0C374D;}
#darkest-indigo.resource-wrapper .resource-content {background-color: #0C374D; color: #FFF7AC;}

#darkest-alice.resource-wrapper .resource-banner {background-color: rgba(16, 120, 150, 1); color: #FFF7AC;}
#darkest-alice.resource-wrapper img {border: 1px solid #107896;}
#darkest-alice.resource-wrapper .resource-content {background-color: #107896; color: #FFF7AC;}

#darkest-ruby.resource-wrapper .resource-banner {background-color: rgba(154, 38, 23, 1); color: #FFFFFF;}
#darkest-ruby.resource-wrapper img {border: 1px solid #9A2617;}
#darkest-ruby.resource-wrapper .resource-content {background-color: #9A2617; color: #FFFFFF;}

#deep-koamaru.resource-wrapper .resource-banner {background-color: rgba(54, 52, 87, 1); color: #FFFFFF;}
#deep-coamaru.resource-wrapper img {border: 1px solid #363457;}
#deep-koamaru.resource-wrapper .resource-content {background-color: #363457; color: #FFFFFF;}

#lighter-daisy.resource-wrapper .resource-banner {background-color: rgba(239, 212, 105, 1); color: #373D3F;}
#lighter-daisy.resource-wrapper img {border: 1px solid #EFD469;}
#lighter-daisy.resource-wrapper .resource-content {background-color: #EFD469;; color: #373D3F;}

#lighter-kelly.resource-wrapper .resource-banner {background-color: rgba(181, 198, 137, 1); color: #093145;}
#lighter-kelly.resource-wrapper img {border: 1px solid #B5C689;}
#lighter-kelly.resource-wrapper .resource-content {background-color: #B5C689; color: #093145;}

#acid-green.resource-wrapper .resource-banner {background-color: rgba(189, 191, 9, 1); color: #292929;}
#acid-green.resource-wrapper img {border: 1px solid #BDBF09;}
#acid-green.resource-wrapper .resource-content {background-color: #BDBF09; color: #292929;}




/******************************************* ANIMATION: .resource-wrapper:hover .resource-content */
 .resource-wrapper:hover .resource-content {
    animation: reveal-content 600ms;
  	animation-delay: 0;
  	animation-iteration-count: 1;
  	animation-fill-mode: forwards;
  	
  	-webkit-animation: reveal-content 600ms;
  	-webkit-animation-delay: 0;
  	-webkit-animation-iteration-count: 1;
  	-webkit-animation-fill-mode: forwards;
  	
  	-moz-animation: reveal-content 600ms;
  	-moz-animation-delay: 0;
  	-moz-animation-iteration-count: 1;
  	-moz-animation-fill-mode: forwards;
}

@keyframes reveal-content {
    0%{ transform:scale(0); opacity:0;}
    75%{ transform:scale(1);}
    100%{ transform:scale(0.95); opacity:1;}
}

@-webkit-keyframes reveal-content {
    0%{ transform:scale(0); opacity:0;}
    75%{ transform:scale(1);}
    100%{ transform:scale(0.95); opacity:1;}
}

@-moz-keyframes reveal-content {
    0%{ transform:scale(0); opacity:0;}
    75%{ transform:scale(1);}
    100%{ transform:scale(0.95); opacity:1;}
}

/******************************************* FOOTER */
footer {background: #093145;}


/******************************************* MODAL */
#modal-video {background: #FFFACD;}
#modal-video iframe {}
#modal-video h2 {font-size: 1.5rem; font-weight: 600; color: #345A5E;}
#modal-video h2.subheader {font-size: 1.35rem; margin-top: 0;}


/******************************************* MEDIA QUERIES */
/* Small only */
@media screen and (max-width: 39.9375em) {
  .dropdown-on-small {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown-on-small:hover .dropdown-content {
    display: block;
}
}


/* Large and up */
@media screen and (min-width: 64em) {
	#main-content {margin: 1rem 4rem;}

	#modal-video {border-radius: 1.5rem;}
}
