/* Research Template over-ride
   Launched: 2020-06-15
   Author: Marketing Communications: Web
   ----------------------------------------------------*/

/* Global Styles go outside the @media screen */
:root {
  --wmck-blue:#28336b;
  --wmck-gold:#beaa88;
}

.card-list { padding:0; margin:2rem 0; list-display:none; }
.directory-grid { list-style:none; padding:0; }
  .directory-grid img { margin:0 auto 0.5rem; max-width:100%; }
.directory-name { margin:0; font-size:1.5rem; }
.directory-grid a { text-decoration:none; }
.directory-grid .grid-item { width:100%; }
.grid-item-heading { text-align:left; }

.ex-grid-expanded .grid-item-content::after { border-bottom-color:var(--wmck-gold); }
.ex-grid-expander { border-color:var(--wmck-gold); }
.ex-grid-details .bio table { width:auto; }

@media only screen {
  h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a, h6 a, .h6 a { color:var(--wmck-blue); }
  h5 { color:var(--wmck-gold); }
  .header-image, .home .header-image { background-image:url('images/hdr-keck-800.jpg'); }

  .card { display:-webkit-box; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; flex-flow:column; position:relative; padding: 1em 1em 0; text-decoration: none; -webkit-transition:-webkit-transform 0.3s ease-in-out; transition:-webkit-transform 0.3s ease-in-out; transition:transform 0.3s ease-in-out; transition:transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; }
  .card:hover { -webkit-transform:scale(1.01); transform:scale(1.01); }
  .card-body { padding: 1rem 0; }  
  .card-title { margin:0 0 0.25rem; padding:0; font-size:1.8em; }  
  .card-title .icon { font-size:0.8em; vertical-align: baseline; }  
  .card-link::after { content:''; position:absolute; top:0; bottom:0; left:0; right:0; }
  .card-link:hover { text-decoration: none; border:none;}
  .card-image { position:relative; overflow:hidden; }
  .card-image::after { left:-2em; bottom:-2px; width:50%; height:1.5em; background:white; -webkit-transform:skewX(35deg); transform:skewX(35deg); -webkit-transform-origin:bottom right; transform-origin:bottom right; content:""; position:absolute; z-index:2; }
  
  .site-title a { text-indent:-999em; width:100%; max-width:400px; height:0; padding-bottom:35%; background:url(images/keck-logo.png) 0% 50% / contain no-repeat; } 
  .home .header-tagline { display:none; background:url('//placehold.it/360x180/?text=TAG.LINE.') 0 100% / contain no-repeat; height:0; } 
  .header-image,
  .home .header-image { background: #555 url('images/hdr-keck-800.jpg') 50% 50% / cover no-repeat; }
  .home-primary { text-align:center; }
  .home-primary h2:first-child, .home-primary h3:first-child, .home-primary h4:first-child { margin-top:0; margin-bottom:1em; }
  .nav-top { background:var(--wmck-blue); border-color:#495591; }
  .home .nav-top .home, .nav-top .home:hover { color:var(--wmck-gold); }
  .nav-top li.active a, .nav-top li a:hover { color:var(--wmck-gold); }
  .nav-top li a:hover:after { background:var(--wmck-gold); }
    
  .nav-site ul > .active > a { border-color:var(--wmck-gold); }
  

  .directory-grid { display:grid; grid-gap:1.5rem; grid-template-rows:auto; grid-template-columns:1fr 1fr; }
  .directory-info {text-align:center;}
  .directory-grid span { font-weight:700; }
  .ex-grid-expander {  }
  .ex-grid-details .image-right { max-width:30%; }
  .grid-item-heading--overlay { min-height:auto; text-align:center; } 
  
  .home-secondary:after { background:var(--wmck-blue); }
  .home-secondary .card { background:#fff; margin:0 1rem; }
  
  /* News & Events
  ----------------------------------------------------*/
  .vevent-item,
  .hentry-item { position:relative; overflow:hidden; clear:both; padding:1em; margin-bottom:1em; color:#fff; }
  .vevent-item { background:#002b5c; width:100%; }
  .events .vevent { margin-left:0; }
  .hentry-item { padding:1em 2em; background:#0a233f; }
    .hentry-item .meta-item { color:#fff; font-weight:300; }
  .vevent-item a,
  .vevent-item a:visited,
  .hentry-item a,
  .hentry-item a:visited { color:#fff; text-shadow:none; display:block; z-index:10; }
  .vevent-item a::before,
  .hentry-item a::before { content:''; position:absolute; top:0; right:0; left:0; bottom:0; }
  .home-latest { margin-bottom:2em; }
  .home-latest .publish-info,
  .news-events-grid .publish-info { display:none; }
  .home-latest .entry-title { margin-top:0; }

  .vevent-inner { display:-webkit-inline-box; display:inline-flex; }
  .vevent-item .entry-date { padding-right:1em; text-align:center; font-family: GPC, "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif; }
  .entry-date-month { font-size:1.7em; margin-bottom:0.5em; display:block; text-transform:uppercase; font-weight: 300; }
  .entry-date-day { font-size:2.75em; font-weight:700; }
  .entry-title { width:100%; margin-top:1.25rem; float:none; }  
}

/* 580px
----------------------------------------------------*/
@media only screen and (min-width:36.250em) {}

/* 700px
----------------------------------------------------*/
@media only screen and (min-width:43.75em) {
  .card-list { display:grid; grid-template-columns: 1fr 1fr 1fr; }
  .home .header-tagline { height:180px; }
  .header-image, .home .header-image { background-image:url('images/hdr-keck-1200.jpg'); }
  .news-events-grid { display:-webkit-box; display:flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; flex-flow:row wrap; margin-right:-1em; }
  .news-events-grid .vevent-item { width:calc(50% - 1.25em); margin-bottom:1.5em; display:inline-block; vertical-align:top; margin-right:1em; }
  .news-events-grid .hentry-item { width:calc(50% - 1.25em); margin-bottom:1.5em; display:inline-block; vertical-align:top; margin-right:1em; }
  .page-title--highlight { background-color:#18214d; border-color:var(--wmck-gold); }
  .page-title--highlight a,
  .page-title--highlight a:visited { color:#fff; }
  .page-title--highlight:after { border-top-color:var(--wmck-gold); }
}

/* 1024px
----------------------------------------------------*/
@media only screen and (min-width:64em) {
  .directory-grid { grid-template-columns:1fr 1fr 1fr; }
}

/* 1200px
----------------------------------------------------*/
@media only screen and (min-width: 75em) {
  .header-image, .home .header-image { background-image:url('images/hdr-keck-1600.jpg'); }
}

/* 1280px
----------------------------------------------------*/
@media only screen and (min-width: 80em) {
  .directory-grid { grid-template-columns:1fr 1fr 1fr 1fr; }
}

/* Hi-res
----------------------------------------------------*/
@media print {
  .card-list li { list-style:none; width:45%; float:left; margin-right:5%; }
  .site-footer .ndmark { position:relative; }
}