/*////////////   TABLE OF CONTENTS   //////////////
      +Page
      +Site Branding
      +Header
      +Main Menu
      +Secondary Menu
      +Body
      +Footer
      +Homepage Featured Resources View Pane
      +Homepage TEL News View Pane
      +Homepage Eugene Video
      +Homepage Shortcuts
      +Landing Pages
        +Resource Homepages
        +Main Resource Search
        +Landing Page Resource Search
          +Tel4U Promo page
        +News Page
        +News Article Node Page
      +Mobile Responsive
///////////////////////////////////////////////*/

/*  ////////////////////////////////////////////////////////////////////////
    --------------- +Page --------------
//////////////////////////////////////////////////////////////////////////*/

#page {
  font-family: sans-serif;
}

#main.clearfix {
  margin-bottom: 0;
}

#page-wrapper {
  min-width: 100%;
  width: 100%;
}

img {
  image-rendering: -webkit-optimize-contrast;
}

/* Sets the default text color and decoration. Overriden elsewhere */
a, a:hover {
  color: black;
  text-decoration: none;
}

.phelan-container .col-1, .phelan-container .col-2 {
  width: 50%;
}

.content {
  margin-top: 0;
}

#content .section {
  padding: 0;
}

a:focus, a:hover {
  text-decoration: underline;
}

/*  ////////////////////////////////////////////////////////////////////////
    --------------- +Site Branding --------------
//////////////////////////////////////////////////////////////////////////*/

#site-branding {
  background-color: #0659A2;
  color: #ffffff;
}

#site-branding a {
  color: #ffffff;
}

#site-branding p {
  margin: 0px;
  padding: 0px;
}

#site-branding .inner-branding {
  width: 90%;
  padding: 5px 0;
  margin: auto;
  text-align: right;
}

.branding-wrap {
  width: 100%;
  text-align: right;
}

.branding-img-box {
  display: inline-block;
  vertical-align: text-top;
  padding: 3px;
}

.branding-img-top-right {
  width: 45px;
  padding-top: 1px;
}

.branding-sos-font {
  font-size: 1em;
  font-weight: bolder;
  line-height: 1.5;
  letter-spacing: 0.2px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #ffffff;
  padding: 7px;
}

.branding-tharg-font {
  font-size: .75em;
  font-weight: bolder;
  line-height: 1.5;
  letter-spacing: 0.2px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #ffffff;
  margin-top: 1em;
  line-height: 1.5;
}

.branding-sos-divider {
  color: #cccccc;
  font-size: 1.4em;
  display: inline-block;
  margin-top: 2px;
  font-weight: bold;
}

.sm-grey-sos {
  color: #b0b0b0;
  font-size: .75em;
  margin-top: 1em;
  line-height: 1.5;
  letter-spacing: 0.2px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a.branding-top-right-link:link,
a.branding-top-right-link:visited {
  color: #ffffff;
  text-decoration: none;
}

a.branding-top-right-link:hover {
  color: #cccccc;
  text-decoration: none;
}

/*  ////////////////////////////////////////////////////////////////////////
    --------------- +Header --------------
//////////////////////////////////////////////////////////////////////////*/

div#header {
  background: #fff;
}

#header div.section.clearfix {
  width: 90%;
  padding: 0;
  display: flex;
  align-items: center;
  flex-direction: row;
}

#site-name a {
  text-decoration: none;
}

#logo img {
  max-width: 100%;
  vertical-align: middle;
}

a#logo {
  padding: 0;
  order: 1;
  margin-right: 1%;
  width: 12%;
}

div#name-and-slogan {
  padding: 0;
  margin: 0;
  order: 2;
  display: grid;
}

#site-name {
  font-size: 5vw;
}

#name-and-slogan,
#name-and-slogan a {
  color: #0659A2;
}

#site-slogan {
  color: #595959;
}

.region.region-header {
  order: 3;
  width: 100%;
  text-align: right;
  margin: 0px;
  padding: 0px;
}

.region-header .block {
  float: none;
}

.region.region-header p {
  margin: 0px;
  font-size: 1.25em;
}

@media screen and (max-width: 399px) {
  .hidden-sm {
    display: none;
  }
}

@media screen and (min-width: 400px) and (max-width: 750px) {
  .hidden-md {
    display: none;
  }
}

@media screen and (min-width: 751px) {
  .brown-slider {
    float: left;
    width: 80%;
  }

  .brown-top-region.brown-slider-gutter.panel-panel {
    float: right;
    width: 19%;
  }
}

/*  ////////////////////////////////////////////////////////////////////////
    --------------- +Main Menu --------------
//////////////////////////////////////////////////////////////////////////*/

.responsive-menus.responsive-menus-0-0.absolute {
  width: 100%;
  order: 3;
}

ul#main-menu-links {
  background: rgba(255, 0, 0, 0);
  font-size: 1.25em;
  line-height: 1.25em;
  margin: 0;
  padding: 1em;
}

#main-menu-links li {
  float: none;
  display: inline;
  margin: 0px;
  padding: 0px;
}

#main-menu-links a {
  color: whitesmoke;
  background: rgba(128, 128, 128, 0);
  float: none;
  height: auto;
  line-height: inherit;
  text-shadow: none;
  padding: 0 1em;
  -khtml-border-radius-topleft: 0em;
  -khtml-border-radius-topright: 0em;
  -moz-border-radius-topleft: 0;
  -moz-border-radius-topright: 0;
  -webkit-border-top-left-radius: 0;
  -webkit-border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

#main-menu-links a:hover,
#main-menu-links a:focus {
  color: #3b3b3b;
  background: #fff;
}

#main-menu-links li a.active {
  border-bottom: none;
}

/*This controls nav links: Home, About, All Resources, News, and Feedback*/
#main-menu-links li a.active,
#main-menu-links li a.hover,
#main-menu-links li.active-trail a {
  color: #3b3b3b;
  background: #fff;
}

/*This controls Students, Adults, Educators, Librarians*/
.featured #main-menu-links li a.active,
.featured #main-menu-links li a.hover,
.featured #main-menu-links li.active-trail a {
  color: #3b3b3b;
  background: #fff;
}

.responsive-menus.responsified span.toggler {
  border-radius: 0;
  box-shadow: none;
  background: rgba(255, 0, 0, 0);
}

#main-menu-links li.menu-602 a {
  color: #ef9494;
  text-shadow: 0.25px 0.25px indianred;
}

#main-menu-links li.menu-602 a:hover,
#main-menu-links li.menu-602 a:focus {
  color: #ed7474;
  text-shadow: 0.25px 0.25px indianred;
}

/** Main Menu Breakout **/
.main-menu.breakout {
  background: #0659A2;
  width: 100%;
}

.main-menu.breakout ul#main-menu-links {
  width: 90%;
  margin: auto;
}

/*  ////////////////////////////////////////////////////////////////////////
    --------------- +Secondary Menu --------------
//////////////////////////////////////////////////////////////////////////*/

#featured .section.clearfix {
  width: 90%;
}

#featured {
  background: #6faeef;
  margin: 0px;
  padding: 0;
}

#featured ul {
  font-size: .75em;
  margin: 0;
  padding: 0 0;
}

#featured li {
  float: left;
  list-style: none;
  padding: 0 0.5em;
}

#featured a {
  color: black;
  background: rgba(30, 50, 10, 0.00);
  float: left;
  height: 2.4em;
  line-height: 2.4em;
  padding: 0 0.8em;
  text-decoration: none;
  text-shadow: 0 0 #c0c0c0;
}

#featured a:hover, #featured a:focus {
  text-decoration: underline;
}

#featured a.active:hover, #featured a.active:focus {
  text-decoration: underline;
}

#featured .active-trail.active {
  color: #000000;
}

/*  ////////////////////////////////////////////////////////////////////////
    --------------- +Body --------------
//////////////////////////////////////////////////////////////////////////*/

/* Block 4 is the Sitewide Alert banner at the top of all pages */
#block-block-4 a {
    text-decoration: underline;
}

body {
  word-wrap: normal;
}

#main {
  width: 90%;
}

.breadcrumb {
  display: none;
}

h1#page-title {
  font-size: 3em;
  line-height: 1em;
  border-bottom: 1px solid #000;
}

div#page {
  background: #e0e0e0;
}

div#main-wrapper.clearfix {
  background: #e0e0e0;
}

.phelan-column-content-region.phelan-column1.phelan-column.panel-panel {
  width: 60%;
}

.phelan-column-content-region.phelan-column2.phelan-column.panel-panel {
  width: 40%;
}

h2 {
  font-size: 1.3em;
  font-weight: bolder;
  margin: 0;
}

.phelan-column-content-region h2 {
  color: black;
}

a:focus img, a:hover img {
  opacity: 0.6;
}

/*  ////////////////////////////////////////////////////////////////////////
    --------------- +Footer --------------
//////////////////////////////////////////////////////////////////////////*/

.brown-slider-inner {
  margin-right: 0;
}

.brown-middle-region-inner, .brown-footer-region-inner {
  margin-right: 0;
}

#footer {
  margin-top: 0;
  border-top: 0;
  width: 90%;
  min-width: 90%;
}

.phelan-column-content-region.phelan-column2.phelan-column.panel-panel {
  display: flex;
}

.brown-middle-region-inner.brown-column1-inner.panel-panel-inner {
  display: flex;
  width: 100%;
}

.panel-pane.pane-custom.pane-1.footerLogo {
  vertical-align: middle;
}

.panel-pane.pane-custom.pane-3.footerLogo {
  display: table-cell;
  vertical-align: middle;
  width: 0;
}

.deptSecretary .block h2 {
  font-size: 3.3vw;
}

.deptSecretary .block h3 {
  font-size: 2vw;
}

.deptSecretary h3 {
  margin: 0;
}

.deptSecretary .pane-content {
  padding-right: 2em;
}

.footerAbout p {
  text-align: justify;
}

.menu-footer-students, .menu-footer-adults, .menu-footer-teachers, .menu-footer-librarians, .footerContact {
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  div#mini-panel-footer_menu { /*container*/
    display: flex;
    flex-direction: column;
  }

  .brown-container.brown-top.clearfix { /*first parent section*/
    order: 1;
    display: table;
  }

  .brown-top-region.brown-slider.panel-panel { /*4 menu lists w/Contact*/
    order: 2;
  }

  .brown-top-region.brown-slider-gutter.panel-panel { /*social media*/
    order: 1;
  }

  .brown-container.brown-middle.clearfix { /*second parent section*/
    display: inline-grid;
    order: 2;
    width: 100%;
  }

  .brown-middle-region.brown-column1.panel-panel { /*SOS logo and Secretary's name*/
    order: 2;
    vertical-align: middle;
    margin: 0 auto;
    width: 100%;
    float: none;
  }

  .brown-middle-region.brown-column2.panel-panel { /*TEL "made possible by" info*/
    order: 1;
    display: table;
    width: 100%; /*need to move this to a media smaller than 585px*/
  }

  .brown-middle-region.brown-column3.panel-panel { /* IMLS logo */
    order: 3;
    display: table;
    width: 100%; /*need to move this to a media smaller than 585px*/
  }

  .brown-container.brown-footer.clearfix { /*third parent section*/
    order: 3;
  }

  .brown-footer-region.brown-footer-column2.panel-panel { /* copyright */
    order: 1;
  }

  .responsive-menus.responsified span.toggler {
    font-size: 1.5em;
  }
}

#footer p, #footer li a {
  font-size: 1em;
}

#footer li a {
  padding: 0;
  border-right: none;
  width: 100%; /*because of flex each li needs to be told to go onto its own line*/
}

#footer-menu-wrapper, #footer-bottom-wrapper {
  color: white;
  padding: 0.1em 0.1em 1em;
  font-size: 1em;
}

#footer-menu-wrapper {
  background-color: #292929;
}

#footer-bottom-wrapper {
  background-color: #000;
  border-top: 1px solid #fff;
  padding: 2.5%;
}

div.panels-flexible-row.panels-flexible-row-7-1.clearfix.footer-bottom {
  border-top: 0.1em solid #555;
  padding-top: 2%;
}

.socialMedia {
  clear: both;
}

.socialMedia p {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.socialMedia img {
  min-width: 3em;
  max-width: 4em;
  padding: 1em 2.5% 0;
}

.footerLogo .pane-content p {
  vertical-align: middle;
}

.footerLogo img {
  width: auto;
}

.footerLogo h2 {
  font-size: 1em;
  margin: 0;
}

.footerLogo h3 {
  font-size: 1em;
  margin: 0;
}

.menu-footer-students,
.menu-footer-adults,
.menu-footer-teachers,
.menu-footer-librarians,
.footerContact {
  width: auto;
  margin-right: 4em;
  float: left;
}

.footerContact p {
  margin: 0;
}

/* Parent div of copyright */
.brown-footer-region.brown-footer-column2.panel-panel {
  width: 100%;
}

.footer-copyright {
  text-align: center;
}

.footer-copyright a:hover {
  font-weight: bolder;
}

@media screen and (min-width: 769px) {
  .footerLogo img {
    width: auto;
  }
}

@media screen and (max-width: 768px) {
  /*helps align this div in the center*/
  #footer .brown-top-region.brown-slider.panel-panel {
    width: 100%;
  }

  /*sets up the mini menus to allow flex styles on them, also helps align center*/
  #footer .brown-top-region-inner.brown-slider-inner.panel-panel-inner {
    flex-direction: column;
    width: 50%;
    margin: auto;
  }

  /*resets float, margin and padding*/
  .menu-footer-students, .menu-footer-adults, .menu-footer-teachers, .menu-footer-librarians, .footerContact {
    float: none;
    margin: 0;
    padding-bottom: 1em;
  }
}

#mini-panel-footer_menu .pane-title {
  text-decoration: underline;
}

#footer-menu-wrapper a:hover, #footer-menu-wrapper a:focus {
  color: #fefefe;
  text-decoration: underline;
}

#footer li a, #footer p a {
  color: white;
}

/*make sure all menu titles do not word wrap*/
.menu-footer-librarians .pane-title, .menu-footer-teachers .pane-title, .menu-footer-adults .pane-title, .menu-footer-students .pane-title {
  white-space: nowrap;
}

/*  ////////////////////////////////////////////////////////////////////////
    --------------- +Homepage Featured Resources View Pane --------------
//////////////////////////////////////////////////////////////////////////*/

.hp-featured.panel-pane {
  background: #fff;
  border-radius: 0.3em;
  padding: 2%;
}

#power-search {
  margin-bottom: 1em;
}

.featuredResource td {
  background: #fff;
  border: 0;
}

.featuredResource tr {
  vertical-align: top;
}

.hp-featured a,
.lp-viewBlocks a {
  font-weight: 600;
  color: black;
}

/*  ////////////////////////////////////////////////////////////////////////
    --------------- +Homepage TEL News View Pane --------------
//////////////////////////////////////////////////////////////////////////*/

.hp-news .pane-content {
  padding-top: 1em;
}

.hp-news .view-content {
  display: flex;
  flex-wrap: wrap;
}

.hp-news.panel-pane {
  background: #fff;
  border-radius: 0.3em;
  padding: 2%;
  margin-bottom: 1em;
}

.hp-news img {
  width: 25%;
  height: auto;
  float: left;
  margin-right: 2%;
  margin-bottom: 0.1em;
}

.news-title a {
  color: black;
}

.news-title {
  margin: 0;
  padding: 0;
  font-weight: bolder;
}

.news-title a:hover, .news-title a:focus {
    text-decoration: underline;
}

.hp-news p {
  margin: 0;
}

.hp-news .views-field.views-field-view-node a:hover {
  color: blue;
}
.hp-news-img a:focus img, .hp-news-img a:hover img {
    opacity: 0.5;
}
.hp-news-summary a:hover, .hp-news-summary a:focus {
    color: black;
    text-decoration: underline;
    text-decoration-color: lightslategray;
}

.hp-news a:hover {
  text-decoration: underline;
}
/*Accessibility compliance for tab navigation*/
.hp-news a:focus {
  color: black;
  outline: 3px solid yellow;
}

/*  ////////////////////////////////////////////////////////////////////////
    --------------- +Homepage Eugene Video --------------
//////////////////////////////////////////////////////////////////////////*/

#eugeneVideo div.pane-content {
  background: #fff;
  border-radius: 0.3em;
  padding: 2%;
}

#eugeneVideo iframe {
  width: 100%;
  float: none;
  margin-right: 2%;
  margin-bottom: 0.1em;
}
#eugeneVideo a:focus {
  color: black;
}

/*  ////////////////////////////////////////////////////////////////////////
    --------------- +Homepage Shortcuts --------------
//////////////////////////////////////////////////////////////////////////*/

.hp-shortcuts {
  background: #fff;
  border-radius: 0.3em;
  padding: 2%;
  margin-bottom: 1em;
}

#shortcutContainer ul {
  list-style: none;
  display: flex;
  padding: 0;
  text-align: center;
  justify-content: space-between;
}

.region-content ul, .region-content ol {
  margin: 0;
}

.hp-shortcuts li {
  padding: 0;
  min-width: 25%;
}

.hp-shortcuts img {
  width: 5em;
}

.shortcut-one h3 {
  background: #0659A2;
}

.shortcut-two h3 {
  background: #589300;
}

.shortcut-three h3 {
  background: orange;
}

.shortcut-four h3 {
  background: firebrick;
}

.hp-shortcuts h3 {
  width: 90%;
  margin: auto;
  color: white;
}

.hp-shortcuts p {
  margin: 0;
  font-size: 0.9em;
  padding: 0.5em 1em 0;
}

.hp-shortcuts p:hover {
    text-decoration: underline;
}
/*Accessibility compliance for tab navigation*/
.hp-shortcuts a:focus {
  color: black;
  text-decoration: underline;
}

/*  ////////////////////////////////////////////////////////////////////////
    --------------- +Landing Pages --------------
//////////////////////////////////////////////////////////////////////////*/

.banner img {
  width: 100%;
  height: auto;
  margin-bottom: 0;
  border-radius: 0.3em;
}

.panel-pane.pane-views-panes {
  background: #fff;
  border-radius: 0.3em;
  padding: 2%;
  margin-bottom: 1em;
}

.lp-featResource tbody {
  vertical-align: top;
}

td {
  background: #fff;
  border: 0;
}

/* add borders to internal tables */
.node-type-page tr td,
.node-type-resource tr td {
  border: 1px solid #000;
}

/* this styles all views for home and landing pages */
.panel-pane.pane-views-panes img {
  width: 100%;
  height: auto;
}

/* center the title of resources */
.lp-viewBlocks tr td {
  text-align: center;
}

.view-filters {
  margin-bottom: 2em;
}

.views-row {
  position: relative;
}

.views-field.views-field-name {
  /* position: absolute; */
  bottom: 30px;
  margin-top: -2em;
  background: rgba(0, 0, 0, 0.5);
  padding: 0 1%;
  color: whitesmoke;
}

.banner a {
  font-size: 3em;
  color: whitesmoke;
  text-decoration: none;
}

/** Adding a hover overlay caption area **/
.landing-banner {
  position: relative;
  overflow: hidden;
}

.landing-banner img {
  display: block;
  min-width: 100%;
  max-width: 100%;
  height: auto;
}

.landing-banner img a {
  display: block;
  min-width: 100%;
  max-width: 100%;
  height: auto;
}

.landing-banner__overlay {
  font-size: 2vmax;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  color: whitesmoke;
  /*transform: translateY(80%);*/
  /*transition: transform .35s ease-out;*/
}

/*Overlays need to have some visual effect when hover or focus is applied*/
span.landing-banner__overlay:hover {
  opacity: 80%;
}
.landing-banner-container:focus img {
  opacity: 40%;
}

/*Does not pass accessibility standards*/
/*.landing-banner:hover .landing-banner__overlay {*/
/*  transform: translateY(0);*/
/*}*/

.landing-banner-row {
  margin-bottom: 1em;
}

@media screen and (max-width: 500px) {
  /*Does not pass accessibility standards*/
  /*.landing-banner__overlay {*/
  /*  transform: translateY(50%);*/
  /*}*/

  .landing-banner a {
    font-size: 1.5em;
  }
}

/** Landing Page Banner Alternate Layout 2x2 **/
.view-banners .view-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row;
}

.landing-banner-row {
  width: 49%;
}

.banner a {
  font-size: 2em;
}

/*Does not pass accessibility standards*/
/*.landing-banner__overlay {*/
/*  transform: translateY(70%);*/
/*}*/

@media screen and (max-width: 500px) {
  .view-banners .view-content {
    flex-direction: column;
  }

  .landing-banner-row {
    width: 100%;
  }
}

/*About panel page content area*/
.lp-about .region.region-content {
  background: #fff;
  border-radius: 0.3em;
  padding: 2%;
  margin-bottom: 2em;
}

/*All Resources view page content area*/
.view.view-resource-search.view-id-resource_search.view-display-id-page.main-resourceSearch {
  background: white;
  padding: 2%;
  border-radius: 0.3em;
  margin-bottom: 2em;
}

/*News panel page content area*/
.panel-display.brenham-flipped.clearfix {
  background: white;
  border-radius: 0.3em;
  padding: 2%;
  margin-bottom: 2em;
}

/*Article node page content area*/
.lp-article .region.region-content {
  background: white;
  border-radius: 0.3em;
  margin-bottom: 2em;
}

/*Resource node page content area*/
.resourcePanel .region.region-content {
  background: white;
  border-radius: 0.3em;
  padding: 2%;
  margin-bottom: 2em;
}

/* Theme all Basic Pages **/
.node-type-page #main .region.region-content {
  background: white;
  border-radius: 0.3em;
  padding: 2%;
  margin-bottom: 2em;
}

/*  ////////////////////////////////////////////////////////////////////////
    --------------- +Resource Homepages --------------
//////////////////////////////////////////////////////////////////////////*/

/* This class is used for the large button on individual resource pages. */
.resourceButton a {
  display: block;
  width: 100%;
  background: #1257A1;
  color: #FFFFFF;
  text-align: center;
  margin: 0 auto 1em;
  padding: 0.6em 0.2em;
  border-radius: 0.3em;
  font-size: 1.3em;
  text-decoration: none;
  text-transform: capitalize;
}

.resourceButton:hover a, .resourceButton:focus {
  background: black;
  color: white;
}

.rh-featuredImage img {
  width: 100%;
  height: auto;
}

div#resourceSummary {
  margin-bottom: 2em;
}

div#resourceSummary p {
  font-size: 1em;
  padding-bottom: 0.25em;
}

#resourceSummary .views-field-body {
  border-bottom: 1px solid darkcyan;
}

.resourcePanel div.panel-pane.pane-views.pane-news {
  background-color: inherit;
  padding: 0;
}

/*remove white space at top of the page*/
.webb-flipped-container, .webb-flipped-content-header {
  margin-bottom: 1em;
}

/*similar styles for Vendor, Category, and Tag clouds on resource landing pages*/
.lp-vendor a, .lp-category-cloud a, .lp-tag-cloud a {
  font-size: 16px; /*make the vendor and category name text size the same*/
  border-radius: 3px;
  padding: 2px 9px;
  background: #6faeef;
  color: black;
}

/*set margin tops for Vendor, Category, and Tag clouds to match each other*/
.panel-pane.lp-vendor, .panel-pane.lp-category-cloud, .panel-pane.lp-tag-cloud {
  margin-top: 1em;
}

/*set margin bottoms for Vendor, Category, and Tag clouds to match each other*/
.view.view-resource-views.view-id-resource_views.view-display-id-block_5.view-dom-id-24a1629ce9ca3a9801f77f561be02aa5,
.field.field-name-field-resource-category.field-type-taxonomy-term-reference.field-label-hidden.clearfix,
.field.field-name-field-resource-tags.field-type-taxonomy-term-reference.field-label-hidden.clearfix {
  margin-bottom: 1em;
}

/*set styles for any tables that are used on resource pages*/
.resourcePanel td {
  border: 1px solid black;
}

.lp-individualUserGuides a,
.lp-individualBody a,
.lp-individualSummary a,
.lp-individualNews a,
.lp-resource-news a {
  color: #e51e25;
}

.resource-vendor-image a:hover, .resource-vendor-image a:focus {
  opacity: 0.6;
}

/*  ////////////////////////////////////////////////////////////////////////
    --------------- +Main Resource Search --------------
//////////////////////////////////////////////////////////////////////////*/

.views-row .field-content {
  min-width: 50%;
}

.views-field.views-field-field-vendor-icon {
  clear: both;
  margin-right: 1em;
}

.main-resourceSearch img {
  margin-right: 1.5%;
  border-radius: 0.9em;
}

@media screen and (max-width: 500px) {
  /*parent of the vendor icon on all resources page display as inline-block forces other content onto next row*/
  .main-resourceSearch a {
    display: inline-block;
  }

  /*removing max width looks better on smaller screens*/
  .main-resourceSearch img {
    max-width: none;
  }
}

.main-resourceSearch div.views-row {
  margin-bottom: 2em;
  border-radius: 1em;
  display: flex;
  flex-direction: row;
}

.view-resource-search h3 {
  margin: 0 0.5em 0 0;
}

.main-resourceSearch .views-field p {
  margin: 0 0 1.2em;
}

/* This class is used to style all "Go to" buttons on Resource seach pages. */
.btn-goToResource {
  background: #1257A1;
  color: white;
  padding: 6px 18px;
  border-radius: 0.3em;
}

.btn-goToResource:hover {
  color: white;
  background: #000000;
  text-decoration: none;
}

/*this applies to resource search on landing pages and the main page*/
.resource-title a {
  font-weight: 600;
  color: #3b3b3b;
}

.resource-title a:hover {
  color: #757575;
  text-decoration: underline;
}

.pane-resource-search {
  background: #fff;
  border-radius: 0.3em;
  padding: 2%;
  margin-bottom: 1em;
}

.resource-title a:hover, .resource-title a:focus {
  color: black;
  text-decoration: underline;
}

.resource-summary:hover, .resource-summary:focus {
  text-decoration: underline;
  color: black;
}

.btn-goToResource:focus {
  background: black;
  text-decoration: none;
  color: white;
}

@media screen and (max-width: 500px) {
  .main-resourceSearch div.views-row {
    flex-direction: column;
  }
}

/*  ////////////////////////////////////////////////////////////////////////
    --------------- +Landing Page Resource Search --------------
//////////////////////////////////////////////////////////////////////////*/

.lp-resourceSearch .views-field p {
  margin: 0 0 1.2em;
}

.lp-resourceSearch img {
  max-width: 246px; /* keeps 1-column page resource search images uniform with other 2-column page images */
  margin-right: 1.5%;
  border-radius: 0.39em;
}

.lp-resourceSearch div.views-row {
  margin-bottom: 2em;
  border-radius: 1em;
  display: flex;
  flex-direction: row;
}

.panel-pane.pane-views-panes .lp-resourceSearch img {
  max-width: 246px;
  margin-right: 1.5%;
  border-radius: 0.39em;
  width: auto;
}

@media screen and (max-width: 900px) {
  /*parent of the vendor icon on all resources page display as inline-block forces other content onto next row*/
  .lp-resourceSearch a {
    display: inline-block;
  }

  /*removing max width looks better on smaller screens*/
  .lp-resourceSearch img,
  .panel-pane.pane-views-panes .lp-resourceSearch img {
    width: 100%;
  }

  .lp-resourceSearch div.views-row {
    flex-direction: column;
  }
}

.field-content.resource-title {
  margin: 0;
}

/*make the child divs on resource search results page display:flex
so that text and buttons do not wrap around under the images*/
.view-resource-search .views-field.views-field-body,
.views-field.views-field-body-summary-1 {
  display: flex;
}

/*  ////////////////////////////////////////////////////////////////////////
    --------------- +Tel4U Promo page --------------
//////////////////////////////////////////////////////////////////////////*/
/* Media queries designed at specific break points - may not be feasible
    to use in other areas of site */
@media only screen and (max-width: 480px) {
  /* generic measurements for mobile devices: */
  .tel-col-xs-1 {
    width: 8.33%;
  }

  .tel-col-xs-2 {
    width: 16.66%;
  }

  .tel-col-xs-3 {
    width: 25%;
  }

  .tel-col-xs-4 {
    width: 33.33%;
  }

  .tel-col-xs-5 {
    width: 41.66%;
  }

  .tel-col-xs-6 {
    width: 49%;
  }

  .tel-col-xs-7 {
    width: 58.33%;
  }

  .tel-col-xs-8 {
    width: 66.66%;
  }

  .tel-col-xs-9 {
    width: 75%;
  }

  .tel-col-xs-10 {
    width: 83.33%;
  }

  .tel-col-xs-11 {
    width: 91.66%;
  }

  .tel-col-xs-12 {
    width: 100%;
  }

  .hide-xs {
    display: none;
  }
}

@media only screen and (min-width: 481px) and (max-width: 767px) {
  /* For tablets: */
  .tel-col-sm-1 {
    width: 8.33%;
  }

  .tel-col-sm-2 {
    width: 16.66%;
  }

  .tel-col-sm-3 {
    width: 25%;
  }

  .tel-col-sm-4 {
    width: 31.40%;
  }

  .tel-col-sm-5 {
    width: 41.66%;
  }

  .tel-col-sm-6 {
    width: 47%;
  }

  .tel-col-sm-7 {
    width: 58.33%;
  }

  .tel-col-sm-8 {
    width: 66.66%;
  }

  .tel-col-sm-9 {
    width: 75%;
  }

  .tel-col-sm-10 {
    width: 83.33%;
  }

  .tel-col-sm-11 {
    width: 91.66%;
  }

  .tel-col-sm-12 {
    width: 100%;
  }

  .hide-sm {
    display: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1280px) {
  /* For desktop: */
  .tel-col-md-1 {
    width: 8.33%;
  }

  .tel-col-md-2 {
    width: 16.66%;
  }

  .tel-col-md-3 {
    width: 23.50%;
  }

  .tel-col-md-4 {
    width: 31%;
  }

  .tel-col-md-5 {
    width: 41.66%;
  }

  .tel-col-md-6 {
    width: 49%;
  }

  .tel-col-md-7 {
    width: 58.33%;
  }

  .tel-col-md-8 {
    width: 66.66%;
  }

  .tel-col-md-9 {
    width: 75%;
  }

  .tel-col-md-10 {
    width: 83.33%;
  }

  .tel-col-md-11 {
    width: 91.66%;
  }

  .tel-col-md-12 {
    width: 100%;
  }

  .hide-md {
    display: none;
  }
}

@media only screen and (min-width: 1281px) {
  /* For desktop: */
  .tel-col-lg-1 {
    width: 8.33%;
  }

  .tel-col-lg-2 {
    width: 16.4%;
  }

  .tel-col-lg-3 {
    width: 23%;
  }

  .tel-col-lg-4 {
    width: 33.33%;
  }

  .tel-col-lg-5 {
    width: 41.66%;
  }

  .tel-col-lg-6 {
    width: 49.5%;
  }

  .tel-col-lg-7 {
    width: 58.33%;
  }

  .tel-col-lg-8 {
    width: 66.66%;
  }

  .tel-col-lg-9 {
    width: 75%;
  }

  .tel-col-lg-10 {
    width: 83.33%;
  }

  .tel-col-lg-11 {
    width: 91.66%;
  }

  .tel-col-lg-12 {
    width: 100%;
  }

  .hide-lg {
    display: none;
  }
}

.side-block {
  display: inline-block;
}

.containment-block {
  padding: 8%;
}

.content-wrap {
  max-width: 100%;
  left: auto;
  right: auto;
}

.promo-img-box {
  padding: 2%;
  border: 1px solid #cccccc;
  background-color: #ffffff;
  box-shadow: 2px 2px 2px #aaaaaa;
}

.promo-img-box img {
  width: 100%;
}

a.tel-promo-button:link,
a.tel-promo-button:visited {
  padding: 5px 5px;
  display: block;
  background-color: #6FAEEF;
  color: #000000;
  border-radius: 3px;
  text-decoration: none;
  font-family: Helvetica, sans-serif;
  font-size: 1.2em;
  text-align: center;
  margin: 7% 5%;
}

a.tel-promo-button:hover {
  text-decoration: underline;
  background-color: #000000;
  color: white;
}

a.tel-promo-button-drk:link,
a.tel-promo-button-drk:visited {
  padding: 5px 5px;
  display: block;
  background-color: #1257A1;
  color: #ffffff;
  border-radius: 3px;
  text-decoration: none;
  font-family: Helvetica, sans-serif;
  font-size: 1.2em;
  border: 1px solid #60a3e8;
  text-align: center;
  margin: 7% 5%;
}

a.tel-promo-button-drk:hover {
  background-color: #13569b;
}

a.tel-resbutton:link,
a.tel-resbutton:visited {
  padding: 12px 5px;
  display: block;
  background-color: #6FAEEF;
  color: #ffffff;
  border-radius: 3px;
  text-decoration: none;
  font-family: Helvetica, sans-serif;
  font-size: 1em;
  border: 1px solid #60a3e8;
  text-align: center;
  margin: 2% 2%;
  box-shadow: 1px 2px 1px #aaaaaa;
}

a.tel-resbutton:hover {
  background-color: #68a1db;
}

/*  ////////////////////////////////////////////////////////////////////////
    --------------- +News Page --------------
//////////////////////////////////////////////////////////////////////////*/

.all-news img {
  outline: 0;
  max-width: 100%;
  height: auto;
  float: left;
  padding-right: 1.5em;
  padding-bottom: 1em;
}

.all-news .views-row {
  height: auto;
  margin-bottom: 0.5em;
  display: inline-table;
  padding: 0.3em;
}

a.news-title {
  font-size: 1.8em;
  color: black;
  line-height: 1;
}

.view-news .views-row {
  width: 100%;
  background: none;
  padding-bottom: 2em;
}

.all-news .views-field-body {
  display: flex;
}

a.read-more {
  color: #e51e25;
  text-decoration: underline;
}

.node-type-article a, .node-type-article a:hover,
.node-type-page a, .node-type-page a:hover {
  color: #e51e25;
  text-decoration: underline;
}

/*  ////////////////////////////////////////////////////////////////////////
    --------------- +News Article Node Page --------------
//////////////////////////////////////////////////////////////////////////*/
.boxton-container.boxton-content.boxton-content-region.panel-panel {
  display: flex;
  flex-flow: wrap;
  background: #fff;
  border-radius: 0.3em;
  padding: 2%;
  margin-bottom: 2em;
}

.panel-pane.pane-node-updated {
  flex-basis: 100%;
}

.panel-pane.pane-entity-field.pane-node-field-image {
  flex-basis: 25%;
  margin-right: 15px;
}

.panel-pane.pane-entity-field.pane-node-field-image img {
  width: 100%;
  height: auto;
}

.panel-pane.pane-entity-field.pane-node-body {
  flex-basis: 69%;
}

@media screen and (max-width: 1150px) {
  .panel-pane.pane-entity-field.pane-node-field-image {
    flex-basis: auto;
  }

  .panel-pane.pane-entity-field.pane-node-body {
    flex-basis: auto;
  }
}

/*  ////////////////////////////////////////////////////////////////////////
    --------------- +Calendar Responsive --------------
//////////////////////////////////////////////////////////////////////////*/

.responsiveCal {
  position: relative; padding-bottom: 75%; height: 0; overflow: hidden;
  }

  .responsiveCal iframe {
  position: absolute; top:0; left: 0; width: 100%; height: 100%;
  }

/*  ////////////////////////////////////////////////////////////////////////
    --------------- +Mobile Responsive --------------
//////////////////////////////////////////////////////////////////////////*/

@media only screen
and (min-width: 320px)
and (max-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
  div#name-and-slogan {
    float: left;
    width: auto;
    font-size: xx-large;
    margin: 0;
    padding: 0;
  }
}

@media screen and (max-width: 375px) {
  div#name-and-slogan {
    grid-auto-flow: row;
    text-align: left;
    width: 100%;
    justify-content: stretch;
  }

  #site-name {
    padding-bottom: 5px;
  }

  #site-slogan {
    font-size: 4vw;
    text-align: left;
    padding-bottom: 5px;
  }
}

@media screen and (max-width: 490px) {
  .dept-branding {
    display: inline-grid;
  }

  #branding-pipe {
    display: none;
  }
}

@media screen and (min-width: 491px) {
  .dept-branding {
    display: inline-flex;
  }
}

@media screen and (min-width: 376px) and (max-width: 768px) {
  div#name-and-slogan {
    grid-auto-flow: row;
    text-align: left;
    width: 100%;
    justify-content: stretch;
  }

  #site-name {
    padding-bottom: 5px;
  }

  #site-slogan {
    font-size: 2.75vw;
    text-align: left;
    padding-bottom: 5px;
  }
}

@media screen and (min-width: 769px) and (max-width: 1365px) {
  div#name-and-slogan {
    grid-auto-flow: row;
    justify-content: stretch;
    width: 100%;
  }

  #site-name {
    font-size: 4vw;
  }

  #site-slogan {
    font-size: 2vw;
    text-align: left;
  }
}

@media screen and (min-width: 1366px) {
  div#name-and-slogan {
    grid-auto-flow: column;
    justify-content: stretch;
    width: 100%;
  }

  a#logo {
    width: 100px;
  }

  #logo img {
    max-height: 100px;
  }

  #site-name {
    font-size: 3.5vw;
  }

  #site-slogan {
    font-size: 2vw;
    text-align: end;
    display: block;
    padding-top: 3.5px;
  }
}

@media screen and (max-width: 319px) {
  #footer .brown-top-region-inner.brown-slider-inner.panel-panel-inner {
    width: 90%;
    margin-bottom: 90px;
  }
}

@media screen and (max-width: 480px) {
  .phelan-column-content-region.phelan-column1.phelan-column.panel-panel {
    width: 100%;
  }

  .phelan-column-content-region.phelan-column2.phelan-column.panel-panel {
    width: 100%;
  }
}

@media screen and (min-width: 320px) and (max-width: 555px) {
  #footer .brown-top-region-inner.brown-slider-inner.panel-panel-inner {
    width: 75%;
    margin-bottom: 60px;
  }
}

@media screen and (max-width: 555px) {
  #footer .brown-container.brown-top.clearfix {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  #footer .brown-container.brown-middle.clearfix {
    margin: 0;
    padding: 0;
  }

  #footer .brown-container.brown-footer.clearfix {
    margin: 0;
    padding: 0;
  }

  #footer .brown-top-region.brown-slider-gutter.panel-panel {
    margin-bottom: -20px;
  }
}

@media screen and (min-width: 556px) and (max-width: 768px) {
  #footer .brown-top-region.brown-slider-gutter.panel-panel {
    margin-bottom: -60px;
  }

  #mini-panel-footer_bottom .brown-container.brown-top.clearfix {
    display: none;
  }
}

/* Footer Styles for Screen Sizes between 585-768px */
@media screen and (min-width: 585px) and (max-width: 768px) {
  .brown-middle-region.brown-column2.panel-panel { /*TEL about paragraph*/
    width: 75%;
    margin: auto;
  }
}

@media screen and (max-width: 768px) {
  .brown-top-region.brown-slider-gutter.panel-panel {
    width: 100%;
  }

  .brown-container.brown-top.clearfix {
    width: 100%;
  }

  .brown-top-region.brown-slider.panel-panel {
    width: 100%;
  }

  .footerLogo img {
    width: 5em;
  }

  #footer .brown-top-region-inner.brown-slider-inner.panel-panel-inner {
    margin-bottom: 40px;
  }

  .imlsLogo p {
    text-align: center;
    margin: 0;
  }

  .imlsLogo img {
    width: 40%;
  }

  .brown-middle-region-inner.brown-column1-inner.panel-panel-inner {
    display: inline-flex;
    width: 100%;
    justify-content: center;
  }

  .deptSecretary .pane-content {
    padding-right: 0;
  }
}

@media screen and (min-width: 768px) {
  .imlsLogo p {
    width: 70%;
    margin: 0 auto;
  }
}

@media screen and (min-width: 769px) {
  .imlsLogo img {
    width: 100%;
  }
}

@media screen and (min-width: 769px) and (max-width: 1080px) {
  #footer .brown-top-region-inner.brown-slider-inner.panel-panel-inner {
    display: inline-grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto auto;
  }

  .menu-footer-students {
    grid-column-start: 1;
    grid-row-start: 1;
  }

  .menu-footer-adults {
    grid-column-start: 1;
    grid-row-start: 2;
  }

  .menu-footer-teachers {
    grid-column-start: 1;
    grid-row-start: 3;
  }

  .menu-footer-librarians {
    grid-column-start: 2;
    grid-row-start: 1;
  }

  .footerContact {
    grid-column-start: 2;
    grid-row-start: 2;
  }
}

@media screen and (max-width: 800px) {
  /*Shortcuts stack when screen is smaller than 768*/
  .hp-shortcuts ul {
    flex-direction: column;
  }

  /*Make homepage news images full width on screens smaller than 800*/
  .hp-news img {
    width: 100%;
  }
}

@media screen and (min-width: 1081px) and (max-width: 1280px) {
  #footer .brown-top-region-inner.brown-slider-inner.panel-panel-inner {
    display: inline-grid;
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: auto auto;
  }

  .menu-footer-students {
    grid-column-start: 1;
    grid-row-start: 1;
  }

  .menu-footer-adults {
    grid-column-start: 1;
    grid-row-start: 2;
  }

  .menu-footer-teachers {
    grid-column-start: 2;
    grid-row-start: 1;
  }

  .menu-footer-librarians {
    grid-column-start: 2;
    grid-row-start: 2;
  }

  .footerContact {
    grid-column-start: 3;
    grid-row-start: 1;
  }
}

@media screen and (min-width: 1281px) {
  /*applies flex to all the menus and contact section*/
  #footer .brown-top-region-inner.brown-slider-inner.panel-panel-inner {
    display: flex;
  }

  /*tell each menu and the contact section to take up as much space as each needs, eliminates dead space*/
  .menu-footer-students, .menu-footer-adults, .menu-footer-teachers, .menu-footer-librarians, .footerContact {
    flex-grow: 1;
  }

  .footerContact {
    flex-grow: 3;
  }
}