/*
//
//  CSS GRID STYLES
//  for homepage 
//
//
*/

#homepage-grid { 
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: auto;
  grid-template-areas: 
  "b b b"
  "c c c"
  "a a a"
  "e e e"
  "d d d"
  "f f f"
}

#slider {
  grid-area: a;
  background: #000000;  
}

#homepage-grid
#primo-search {
  grid-area: b;
  background: #642A90;  
  background: linear-gradient(222deg, rgba(70,22,107,1) 0%, rgba(100,42,144,1) 21%, rgba(80,29,121,1) 55%, rgba(79,28,119,0.6965161064425771) 78%, rgba(70,22,107,1) 100%);   display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}


.grid-col-container {
  background: #dccee8; 
}

.grid-col-container .container {
  padding-left: 0px;
  padding-right: 0px;
  margin: auto;
}


#library-hours {
  grid-area: l;
  background: #C2ADD2;
  padding: 20px 0px 20px 15px;
}


#events {
  grid-area: e;
  background: #dccee8;
  padding: 2rem 0.75rem 1.5rem 0.75rem;
}

#quicklinks {
  grid-area: f;
  background: #dccee8;
  padding: 20px 0px 20px 15px;
}

#how-tos {
  grid-area: e;
  background: #FBF5E6;
  padding: 10px 25px;
}

#home-promo-area {
  grid-area: h;
  padding: 20px;
  margin-top: 0px;
}

#cards {
  display: none!important; /*  turned off homepage cards for covid-19  */
  grid-area: f;
  background: #E4E4E4;
  padding: 10px 25px;
}


.card .card-header {
  background: transparent;
  padding: 0;
  border-bottom: 0px;
}


.card .card-header-home {
  background: #46166B;
  transition: .5s all;
  padding: .75rem 1.25rem;
  border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
}

table th.hours-col-loc {
  display: block;
}

#block-libcaltodayshours {
  margin: auto;
  width: 100%;
}

tr.hours-depart, tr.loc9094, tr.loc9451 {
  display: none;
}


/* 
*
*   Temporary Styles for Mockup
*
*/

.views-element-container .col-auto,
.views-element-container .row {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}




.slide-copy h2 {
  font-size: 1.641em;
  text-transform: uppercase;
}



/*
* Homepage body
*
*/


#homepage-grid
#primo-search .container {
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: stretch;
}

#homepage-grid h4 {
  color: #46166b;
  letter-spacing: 0;
  text-transform: uppercase;
  padding-bottom: 5px;
  font-size: 1.5em;
  
}


#homepage-grid .grid-regular h4 {
/*  background: rgba(255,255,255,0.7); */
  border-left: 0px; 
  margin-bottom: 0px;
  overflow: hidden;
}

.linktoall {
  text-transform: uppercase;
  text-align: center;
  display: block;
  margin-right: 7.5%;
  font-size: .85em;
}

#events .linktoall {
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  right: -20px;
}

@media all and (min-width: 768px) {

    #events .linktoall {
      margin-right: 1.25rem;
      margin-bottom: -2rem;
      border-bottom: 1px solid transparent;
      position: absolute;      
    }
}


#events .linktoall:hover {
  text-decoration: underline;
  /* border-bottom: 1px solid rgba(100,42,144, .70); */
}

.linktoall svg { 
  position: relative;
  top:-1px;
  transform: scale(.825)!important;
  padding-right: 0px!important;
  margin-right: 3px!important;
}

#library-hours {
    color: #333333;
    font-size: 16px;
    font-weight: 300;
    position: relative;
}


#library-hours  h4:before {
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: '\f017';  /* clock  */
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  display: none;
}

#library-hours h4 svg {
 /* display: inline-block; */
  margin-right: 15px;
  margin-left: 10px;
  margin-top: -2px;
  transform: scale(1.25);
  color: #642A90;
}

#library-hours a.linktoall svg {
  display: none;
}

#block-libcalhourswidget {
  padding-top: 10px;
  padding-bottom: 10px;
}


#home-promo-area h2{
   display: none;
}
/* 
#home-promo-area  h4:before {
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: '\f736';  *star calendar* 
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  display: none;
} */
/* 
#home-promo-area  h4:before {
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: '\f7fa';  * virus -- temp*
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  display: none;
} */

#home-promo-area  h4:before {
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: '\f5d4';  /* backpack -- temp  */
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300;
  display: none;
}
/* 
#home-promo-area svg:first-child {
  display: inline-block;
  margin-right: 15px;
  margin-left: 5px;
  margin-top: -5px;
  transform: scale(1.25);
  color: #642A90;
} */

/* 
#home-promo-area svg:first-child {
  display: inline-block;
  margin-right: 10px;
  margin-left: 10px;
  margin-top: -7px;
  transform: scale(1.25);
 * color: #642A90; *
 color: #eeb211;
} */


.region-home-promo div {
  width: 100%;
}

#home-promo-area svg:first-child {
  display: inline-block;
  margin-right: 15px;
  margin-left: 15px;
  margin-top: -10px;
  transform: scale(1.25);
  color: #eeb211;
}


#events  h4:before {
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: '\f736';  /* calendar star  */
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  display: none;
}

#events h4 svg {
 /* display: inline-block; */
  margin-right: 15px;
  margin-left: 10px;
  margin-top: -2px;
  transform: scale(1.25);
  color: #642A90;
}

#events a.linktoall svg {
  display: none;
}

#quicklinks h4:before {
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: '\f709';  /* fast rabbit  */
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  display: none;
}

#quicklinks svg:first-child {
  display: inline-block;
  margin-right: 10px;
  margin-left: 10px;
  margin-top: -2px;
  transform: scale(1.25);
  color: #642A90;
}

#quicklinks img, #how-tos img {
    max-width: 100%;
}

.quick-links-container {
 
}

.quick-link-block {
  padding: 16px 0px 0px 7.5%;
 /* background: rgba(255,255,255,0.75);
  border: 1px solid #642A90; */
  position: relative;
  transition: all .5s;
}

.quick-link-block h5 {
  text-decoration: underline;
}

/* .quick-link-block:hover {
  background: rgba(255,255,255,1);
} */

.quick-link-block:hover .more-links {
  color: #eeb211;
}

#quicklinks .more-links {
  position: absolute;
  bottom: 25px;
  right: 15px;
  color: #642A90;
  display: none;
}

.quick-link-block h5 {
  margin-top: -3px;
  letter-spacing: 0.0em;
  margin-bottom: 15px;
  color: #333333;
}

.quick-link-block a:hover {
  text-decoration: none;
}
.quick-link-block ul {
  list-style: none;
  padding-right: 10px;
  padding-left: 0px;
}

.quick-link-block ul li {
  text-indent: -10px;
  margin-left: 10px;
  margin-bottom: 13px;
}

.quick-link-block ul li a{
  color: #333333;
}

.quick-link-block ul li a:hover{
  color: #46166b;
  text-decoration: underline;
}

#how-tos h4 {
  margin-top: 20px;
}

#how-tos {
  font-size: .9em;
}

#how-tos #howtoquestions a {
  display: block;
  margin: 20px;
  padding-right: 75px;
  font-style: italic;
  color: #333333;
}

#cards {
  padding: 50px 10%;
  text-align: center;
}


/*----------*/

.slide-nav {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  padding: 0px 25px;
  z-index: 1020;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
}

.slide-nav a {
  color: rgba(255,255,255,0.25);
}

.slide-nav:hover a {
  color: rgba(255,255,255,0.85);
}

.slide-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.1);
  background-blend-mode: multiply;
}


a.more {
  text-decoration: none;
  font-size: .85em;
  text-transform: uppercase;
  border-bottom: 0px solid;
}



/* 
*
*   BIGGER THAN A BREAD BOX 
*
*/


@media all and (min-width: 768px) {

  #homepage-grid { 
    -ms-grid-columns: (1fr)[2]; 
    grid-template-columns: repeat(2, 1fr);
    -ms-grid-rows: calc(50vh - 70px) 25vh;
    grid-template-rows: calc(50vh - 70px) 25vh;
        grid-template-areas: 
    "a a"
    "b b"
    "c c"
    "e e"
    "f f";
  }


  .user-logged-in #homepage-grid {  
    -ms-grid-rows: calc(75vh - 160px) 25vh;  
    grid-template-rows: calc(75vh - 160px) 25vh;
    
  }

  .grid-col-container {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
  /* background: -webkit-gradient(linear, left top, right top, color-stop(50%, #DCCEE8), color-stop(50%, #C2ADD2));
    background: -webkit-linear-gradient(left, #DCCEE8 50%, #C2ADD2 50%);
    background: -o-linear-gradient(left, #DCCEE8 50%, #C2ADD2 50%);
    background: linear-gradient(90deg, #DCCEE8 50%, #C2ADD2 50%); */
    grid-area: c;
  }

  #homepage-grid
  #primo-search .container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }

  .grid-col-container .container{

    display: grid;
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 
    "h l l";
  }


  #home-promo-area {
   
    margin-top: 20px;
  }
  
  #library-hours {
    padding: 20px;
    margin-top: 20px;
  }

  #quicklinks {
    padding: 20px 0px 20px 0px;
  }



  /* this makes the line after the heading */

  #homepage-grid .grid-regular h4:after {
    background-color: #46166b;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 40%;
    left: 0.5em;
    margin-right: -50%;
    margin-top: -5px;
  }


  /* this makes the line after the heading */
  #homepage-grid #events h4:after{
    background-color: #46166b;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 79.5%;
    left: 0.5em;
    margin-right: -50%;
    top: -4px;
  }

  #homepage-grid #quicklinks h4:after {
    background-color: #46166b;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 84%;
    left: 0.5em;
    margin-right: -50%;
    top: -4px;
  }


  .quick-links-container {
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 10px;
    margin-bottom: 15px;
    margin-left: 47px;
  }


  .quick-link-block {
    padding: 16px 0px 16px 0px;
  }

  .region-libcal-hours {
    padding-left: 0px;
  }
  
  tr.hours-depart, tr.loc9094, tr.loc9451 {
    display: table-row;
  }

  .linktoall {
    position: absolute;
    bottom: 10px;
    right: -20px;
    text-align: right;
    font-weight: 300;
    display: block;
  }

  #homepage-grid .grid-regular h4:after {
    width: 100%;
  }
 
}

@media all and (min-width: 976px) {


  .slide-copy {
    margin-left: 0px;
    font-weight: 300;
    width: 35%;
  } 

  #homepage-grid { 
    -ms-grid-rows: calc(70vh - 70px) 30vh;
    grid-template-rows: calc(70vh - 70px) 30vh;
  
  }

}





/* 
*
*   WIDER THAN A BREAD BOX 
*   fit for macbook air, chromebook 11" screens
*
*/

@media only screen and (min-width: 768px) and (max-height: 768px) and (orientation: landscape) {
 
  .region-home-slider, .views_slideshow_cycle_main, .views_slideshow_slide .slider-item, .slider-link-to-content a {
    height: calc(60vh - 70px);
  }


  #homepage-grid {
    -ms-grid-rows: calc(60vh - 70px) 40vh;
    grid-template-rows: calc(60vh - 70px) 40vh;
  }

}






/* 
*
*   BIGGER THAN A BREAD FACTORY SCREENS 
*
*/


@media (min-width: 1442px) {
    /*.slide-copy {
      width: 100%;
    }
*/

    #cards {
      padding: 50px 15%;
    }
}


/* 
*
*   IE Fixes 
*
*/



@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  #library-hours {
    float: left;
  }

  .quick-link-block {
    float: left;
    margin-left: 50px;
  }

  .grid-col-container {
    min-height: 400px;
  }

  #cards {
    clear: both;
  }
}