body {
/*
background: #fefbf7;
background: #fefdfb;
*/
}

.page-wrapper {
/*
background: #fefbf7;
background: #fefdfb;
*/
}

.site-header__inner {
/*
background: #fefbf7;
background: #fefdfb;
*/
}

.header-nav {
/*
background: #fefbf7;
background: #fefdfb;
*/
}

/** Hide it for VOCFM **/
body.path-user div#header-nav {
display:none;
}

body.path-user nav.breadcrumb {
display:none;
}

body.path-user a.ite-branding__logo {
pointer-events: none;
}

div#block-vocfm-site-branding.site-branding {
background: var(--color--white)
}
.site-branding--bg-white {
/*
background: #fefbf7;
background: #fefdfb;
*/
}

div#block-vocfm-site-branding .site-branding__logo img {
height: auto;
width: 6em;
}

.header__left,  .site-header__initial {
background-color: black;
}

.is-fixed .sticky-header-toggle {
background-color: black;
}

.breadcrumb__link {
/*color: #dc3545;*/
color: #0d1214;
}

/*Links*/
.view-my-library a {
  color: #0d1214;
  font-weight: 600;
}
/* Style header and footer elements on Library/Collections */
.view-my-library .view-header, .view-my-library .view-footer {
  font-size: xx-large;
}

.site-footer a {
color: white;
text-transform: capitalize;
/*font-weight: bold;*/
}

article .field--name-price .field__item {
color: #0d1214;
font-weight: 600;
}

.primary-nav__menu-link:hover {
color: inherit;
/*color: black;*/
}

.primary-nav__menu-link-inner:after {
border-color: black;
/*border-color: #dc3545;*/
}

/*Highlight active menu item*/
li.primary-nav__menu-item a.is-active {
  color: #dc3545;
}

/*Footer*/
@media (min-width: 75rem) {
  [dir="ltr"] body:not(.is-always-mobile-nav) .site-footer {
    border-left-color: black;
  }

  /*Reduce padding to zero*/
  .site-footer__inner {
    padding-bottom: 0rem;
  }
}

/**Product front-end display**/
article .field--name-field-product-image .field__label {
display: none;
}

article .field--name-price .field__label {
display: none;
}

.short .field--name-title {
/*display: none;*/
}

a.short {
position: relative;
display:block;
}

/*Add color to default product placeholder parent*/
.slkt-placeholder-image {
/*background-color: rebeccapurple;*/
}

/*Set default product placeholder image opacity*/
.slkt-placeholder-image img {
opacity: 0.5;
opacity: 0.7;
width: 100%;
}

.short .slkt-placeholder-image ~ .trunc-title {
position: absolute;
top: 1em;

display: inherit;
/*background: black;*/
background: white;
color: black;
width: 100%;
max-height: 40%;
min-height: 20%;
/*border: thick double #32a1ce;*/

display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}

.short .slkt-placeholder-image ~ .trunc-title .field--name-title {
overflow: hidden;
/*white-space: break-spaces;*/
font-weight: 600;
padding-left: 0.5em;
/*padding-right: 0.1em;*/
max-height: 7em;
text-overflow: ellipsis;
}

.trunc-title .field--name-title {
/*display: inline-block;
width: 100%;
white-space: nowrap;
overflow: hidden;*/
text-overflow: ellipsis;
}

.trunc-title .truncate-calc, .truncate-cut, .truncate-full {
  position: relative;
}

/**Buttons**/
.button--primary {
/*background-color: #dc3545;*/
background-color: black;
}

.button {
/*border-color: #dc3545;*/
border-color: black;
}

.nav-primary__button {
/*background-color: black;*/
background-color: black;
}

.pager__item--active {
/*background-color: #dc3545;*/
background-color: black;
}

.mobile-nav-button__icon {
background-color: black;
}

.mobile-nav-button__icon:before {
background-color : black;
}

.mobile-nav-button__icon:after {
background-color : black;
}

body.path-frontpage div.field--name-field-content-link.field--type-link a {
   background: black;
    display: inline-flex;
    align-items: center;
    padding-top: 1px;
    padding-bottom: 0;
    padding-left: 1.6875rem;
    padding-right: 1.6875rem;
    line-height: 1.125rem;
    height: 3.375rem;
    color: white;
    border-radius: 0.1875rem;
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 700;
text-decoration: none;
}

/*Form*/
.main-content form#views-exposed-form-all-products-page-1 div {
display: inline-block;
}

/*Banner: What is Selekta*/
div#block-vocfm-whatisselekta div.field--name-field-title {
display: none;
}

div#block-vocfm-whatisselekta div.field--name-field-summary{
color: black;
color: #0d1214;
font-weight: bold;
font-size: 1.15rem;
margin-top: 0.7em;
}

div.view-about-site div.views-field-body div.field-content {
  font-weight: bold;
  font-size: 1.15rem;
  margin-top: 0.7em;
}

div.view-about-site div.views-field-field-link div.field-content a {
  background: black;
    display: inline-flex;
    align-items: center;
    padding-top: 1px;
    padding-bottom: 0;
    padding-left: 1.6875rem;
    padding-right: 1.6875rem;
    line-height: 1.125rem;
    height: 3.375rem;
    color: white;
    border-radius: 0.1875rem;
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: none;
}

/*Branding*/
@media (min-width: 75rem) {
.site-branding {
    max-height: 6.25rem;
    /*min-width: calc(14.28571vw + 0.99107rem);
    padding-top: 0;
    padding-bottom: 0;*/
}

}

/*
div.all-the-products div.view-filters {
    position: absolute;
    top: -1em;
    z-index: 100;
    padding-left: 11em;
    text-align: center;
}

div.header-nav {
z-index: 1;
}*/

p.all_metadata span.thetag {
text-transform: capitalize;
}

div#block-whatisselekta div.field--name-field-content-link {
/*text-align: center;*/
}

/*Put in flex box, content above block contents*/
@media (min-width: 62.5rem) {
  div.region--content-above {
    display: flex;
  }

  /*Make all its child divs have flex:1*/
  div.region--content-above > div {
    flex: 1;
  }
  /*Make youtube video container block take up 2x the space of its sibling div*/
  div.region--content-above div.block-views-blockselekta-demo-video-block-1 {
    flex: 2;
  }
}

/*Make wider*/
@media (min-width: 62.5rem) {
/**body.path-frontpage .sidebar-grid > .site-main {**/
body.path-frontpage main {
    grid-column: 3 / 13;
}
}

body.path-frontpage div#block-vocfm-page-title {
  display:none;
}

/**Youtube related**/
.youtube-video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow:hidden;
}

.youtube-video-container iframe, .youtube-video-container embed, .youtube-video-container object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*Hide Free Access status field in general*/
div.field--name-field-free-access {
  display: none;
}
/*But Display Free access field if in a node form.*/
div.node-form div.field--name-field-free-access {
  display: block;
}
/*But Display Free access field if in a node form.*/
form.node-form div.field--name-field-free-access {
  display: block;
}
/*Hide source info*/
div.field--name-field-source-name {
display:none;
}

/*Hide source info*/
div.field--name-field-source-uri {
display:none;
}

/*Make a block presentation, to function as a linebreak. */
span.linebreaker {
display: block;
}

/*Hide the identifier metadata from the front end*/
p.all_metadata.identifier {
display: none;
}

/*Hide Node meta showing author info for now*/
div.node__meta {
display: none;
}

/*Style MoMo Decal*/
img#mtn_momo_method {
/*display:inline-block;
width:3em;
height:auto;*/

  display: inline-block;
  /*width: 40px;*/
  height: 25px;
  background-size: 40px 25px;
  text-indent: -9999px;
  box-shadow: 0 0 0.01em black;
  /*margin-left: 5px;*/
  margin-right: 5px;
  vertical-align: middle;
}

details#details-user-login-form summary {
  /*font-size: x-small;*/
  color: black;
  background-color: black;
  width: fit-content;
  opacity: 0.1;
}

/*Social related*/
.social-auth.auth-link {
  display: inline-block;
  padding-right: 1em;
}

/* Footer extra style for Mobile devices */
@media only screen and (max-width: 768px) {
}
/* Stretch white background to bottom of page to hide background image pattern */
div#page-wrapper {
  /* No need to specifiy since we have good enough results on nearly all tested screens with Chrome device emulator*/
  /*height: 100vh;*/
}
div#page {
  /* No need to specifiy since we have good enough results on nearly all tested screens with Chrome device emulator*/
  /*height: 78vh;*/
}
div#main {
  /* Set viewport height to below value so white background can stretch to bottom of page and we don't see background image pattern showing up after that. This seems to work well enough for most screens*/
  min-height: 86vh;
}
