/*
Colour scheme:
==============
#ecf2f7 - background colour - very light gray with bit of blue rgb(236, 242, 247)
#3E5884 - dark blue rgb(62, 88, 132)
#E2F1FF - very light blueish rgb(226, 241, 255)
#D8A21B - mustard (yellowish) rgb(216, 162, 27)
#728AB9 - blueish mid intensity darker rgb(114, 138, 185)
#94ABDD - blueish mid intensity lighter rgb(148, 171, 221)
*/


/* Color variables */

:root {
  --bcgr: #ecf2f7;
  --darkest: #3E5884;
  --lightest: #E2F1FF;
  --contrast: #D8A21B;
  --mid-darker: #728AB9;
  --mid-lighter: #94ABDD;
  --green-col: green;
}

/* Global */

body {
  background-image: url("../images/texture-pixelart.png");
  background-repeat: repeat;
  background-color: var(--bcgr);
}

.main-area {
  margin-left: 10%;
  margin-right: 10%;
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 700px) {
  .main-area {
    margin-left: 0%;
    margin-right: 0%;
  }
}

/* Generic fonts */
.title-sans {
  font-family: Oswald, sans-serif;
  font-style: normal;
  font-weight: normal;
}

.ordinary-text {
  font-family: "Roboto Slab", serif;
  font-style: normal;
  font-weight: normal;
  color: var(--darkest);
}

.title-text{
  font-family: 'Roboto Slab', serif;
  font-style: normal;
  font-weight: bold;
  font-size: 2.5rem;
  color: var(--mid-darker);
}

.text-muted {
  color: var(--mid-darker)!important;
}

.yellow-header {
  background-color: var(--darkest);
  padding-top: 0.8em;
  padding-bottom: 0.8em;
  text-align: center;
  font-family: Oswald, sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 1.3rem;
  line-height: 27px;
  color: var(--contrast);
}

.read-more {
  font-family: Oswald, sans-serif;;
  font-style: normal;
  font-weight: 300;
  font-size: 1rem;
  line-height: 18px;
  color: var(--contrast);
}
.read-more:hover {
  color: var(--mid-lighter);
  text-decoration: none;
}

.description-block a {
  color: var(--mid-lighter)!important;
  border-bottom: solid 1px;
}
.description-block a:hover {
  color: var(--mid-darker)!important;
  text-decoration: none;
}

a.regular-link {
  color: var(--mid-darker);
  text-decoration: none;
  border-bottom: solid 1px;
}
a.regular-link:hover {
  color: var(--mid-lighter);
  text-decoration: none;
}

/* Navbar */
.navbar {
  padding-left: 0;
  padding-right: 0;
  padding-top: 2%;
  padding-bottom: 2%;
}

.nav-link {
  font-size: 14pt;
  color: var(--mid-darker);
}

.nav-link:hover {
  color: var(--darkest)!important;
}

a.active {
  color: var(--darkest)!important;
}


/* SVG brand color */
/* compute filter params: https://codepen.io/sosuke/pen/Pjoqqp  - for #3E5884 */
.filter-blue {
  filter: invert(31%) sepia(6%) saturate(3898%) hue-rotate(179deg) brightness(97%) contrast(86%);
}
.filter-blue:hover {
  filter: invert(59%) sepia(20%) saturate(715%) hue-rotate(181deg) brightness(87%) contrast(92%);
}

.lang-choice {
  background-color: rgba(114, 138, 185, 0.2);
  border: none;
  border-radius: 0;
}

.lang-choice:hover,
.lang-choice:focus {
  background-color: rgba(114, 138, 185, 0.3);
  color: var(--darkest);
}

/* Back To Top Button*/
#back-to-top {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  width: 50px;
  height: 50px;
  bottom: 30px; /* Place the button at the bottom of the page */
  right: 20px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: rgba(148, 171, 221, 0.9); /* Set a background color  #94abddd9*/
  color: var(--lightest); /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  font-size: 18px; /* Increase font size */
  text-align: center;
}

#back-to-top:hover {
  background-color: var(--mid-darker); /* Add a dark-grey background on hover */
}

/* Footer */
footer {
  background-color: var(--darkest);
  padding-top: 2em;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

.footer-text: {
  color: var(--mid-lighter);
}

.footer-menu {
  color: var(--mid-lighter);  /* почему-то при совмещении с footer-text не работает */
}
.footer-menu:hover {
  color: var(--lightest);
  text-decoration: none;
}

.footer-text {
  font-weight: 300;
  font-size: 12pt;
  color: var(--mid-lighter);
}

.footer-link,
.footer-link:hover {
  color: var(--lightest);
}

.filter-light-blue {  /* light blueish grayish #94ABDD */
  filter: invert(70%) sepia(36%) saturate(361%) hue-rotate(184deg) brightness(91%) contrast(90%);
}

table.socmedia {
  width: 100%;
  table-layout: fixed;
}


/* HomePage */
.about-block-text {
  opacity: 0;
}

.about-block-text:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.4);
  font-size: 1rem;
  line-height: 1.2rem;
  text-align: right;
  color: var(--lightest);
}

@media (max-width: 363px) {
  .about-block-text {
    font-size: 0.8rem;
    line-height: 1rem;
  }
}
@media (max-width: 333px) {
  .about-block-text {
    font-size: 0.5rem;
    line-height: 0.8rem;
  }
}

.more-recordings {
  text-align: center;
}

/* Player */
/* https://github.com/mediaelement */
/* https://github.com/r4fx/mediaelement-playlist */
.mejs__container {
  background: var(--mid-lighter);  /* light blueish grayish #94ABDD */
  font-family: Oswald, sans-serif;
  width: 100%!important;
}
.mejs__playlist {
  background-color: rgba(148, 171, 221, 0.2);  /* light blueish grayish #94ABDD with transparency */
}
.mejs__playlist li {
  color: var(--mid-darker);
  font-size: 14pt;
  margin: 0;
  list-style-type: none;
  font-family: Oswald, sans-serif;
  padding: 15px;
}
.mejs__playlist li:hover,
.mejs__playlist li.current {
    color: var(--darkest);
    cursor: pointer;
}
.mejs__playlist li.current {
    color: var(--darkest);
    cursor: pointer;
    background-color: rgba(148, 171, 221, 0.2);
}
.mejs__playlist ul {
    padding: 0;
}

/* News block */

.news-card {
  background-color: transparent;
  border: none;
}

.news-card:hover {
  background-color: transparent;
  border: none;
}

.card-link {
  color: var(--darkest);
}

.card-link:hover {
  color: var(--mid-darker);
}

.card-body {
  padding: 0!important;
}

.news-preview {
  padding: 0.5rem;
}

.news-card-header {
  font-family: Oswald, sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 27px;
  color: #3E5884;  /* blueish #3E5884 */
}

.news-card-text {
  font-family: Roboto Slab, serif;
  font-style: normal;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.3rem;
  color: #3E5884;  /* blueish #3E5884 */
}

/* Contributors block */
.contrib-card {
  background-color: transparent;
  border: none;
}

.contrib-img {
  width: 100%;
}

.contrib-card:hover {
  background-color: transparent;
  border: none;
}

.contrib-entry {
  color: var(--darkest);
  font-family: Roboto Slab, serif;
}

.contrib-card-header {
  font-family: Oswald, sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 27px;
  color: #3E5884;  /* blueish #3E5884 */
}

.contrib-card-text {
  font-family: Roboto Slab, serif;
  font-style: normal;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.3rem;
  color: #3E5884;  /* blueish #3E5884 */
}


/* Catalogue */
.opus-title-catalogue {
  font-family: Oswald, sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 1.5rem;
  line-height: 36px;
  color: #3E5884;  /* blueish #3E5884 */
}

.opus-detail-catalogue {
  font-family: Roboto Slab, serif;
  font-style: normal;
  font-weight: 200;
  font-size: .8rem;
  line-height: 24px;
  color: var(--mid-darker);  /* light blueish #728AB9 */
}

.opus-comment-catalogue {
  font-family: Roboto Slab, serif;
  font-style: normal;
  font-size: 1rem;
  line-height: 24px;
  color: #728AB9;  /* light blueish #728AB9 */
}

.opus-recname-catalogue {
  font-family: Roboto Slab, serif;
  font-style: normal;
  font-size: .8rem;
  line-height: 24px;
  color: var(--darkest);
}

/* .catalogue-entry:hover {
  background-color: #ffffff87
} */

/* Catalogue Filter */

table.years-selector {
  width: 100%;
  border-collapse: separate;
  text-align: center;
  font-family: Oswald, sans-serif;
}

.all-years-btn {
  width: 100%;
  text-align: center;
  font-family: Oswald, sans-serif;
  border: solid 2px;
}

a.year-filter-disabled {
  /* Make the disabled links grayish*/
  color: #e2f1ff78;  /*very light blueish #E2F1FF half transparent*/
  /* And disable the pointer events */
  pointer-events: none;
}

a.year-filter-link {
  color: #E2F1FF;  /*very light blueish #E2F1FF*/
  background-color: #3e5884d6;  /* blueish #3E5884 with some transparency*/
  display: block;
  margin-right: 0;
}

a.year-filter-link:hover {
  background-color: var(--darkest);  /* blueish #3E5884 */
  text-decoration: none;
}

.year-tile-disabled {
 background-color: #3e588478;  /* blueish #3E5884 half transparent */
}

a.tag-link {
  color: var(--lightest);  /*very light blueish #E2F1FF*/
  background-color: rgba(62, 88, 132, .7);  /* blueish #3E5884 with some transparency*/
  padding: 3px;
}

a.tag-link:hover {
  background-color: var(--darkest);  /* blueish #3E5884 */
  text-decoration: none;
}

.form-control {
  border-radius: 0;
  width: 100%;
}

.search-box {
  border: 1px solid #728AB9;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #728AB9;
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #728AB9;
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #728AB9;
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
}
:-moz-placeholder { /* Firefox 18- */
  color: #728AB9;
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
}
::placeholder {
    color: #728AB9;
    font-family: Oswald, sans-serif;
    text-transform: uppercase;
}

label.form-check-label {
    display: inline-block;
    font-family:  Oswald, sans-serif;
    text-transform: uppercase;
    color: #728AB9;
}

select.select-categories {
    background-color: #3E5884;  /* blueish #3E5884 */
    border: 3px solid transparent;
    font-family:  Oswald, sans-serif;
    text-transform: uppercase;
    color: #E2F1FF;  /*very light blueish #E2F1FF*/
    height: auto;
}
a.clear-filter-link {
  color:  #3e588478;  /* blueish #3E5884 half transparent */
  display: block;
  margin-right: 0;
  width: 100%;
  text-transform: uppercase;
}

a.clear-filter-link:hover {
  color: #3E5884;  /* blueish #3E5884 */
  text-decoration: none;
}

button.filter-collapse {
  font-family:  Oswald, sans-serif;
  text-align: center;
  text-transform: uppercase;
  color: #E2F1FF;  /*very light blueish #E2F1FF*/
  background-color: #728AB9;  /* light blueish #728AB9 */
  width: 100%;
  border-radius: 0;
}

button.filter-collapse:hover {
  text-decoration: none;
  color: #E2F1FF;  /*very light blueish #E2F1FF*/
  background-color: #728AB9;  /* light blueish #728AB9 */
}


/* Pagination */
.pagination {
    display: flex;
    padding-left: 0px;
    list-style: none;
    justify-content: center;
}

.paginator-box .pagination>li.active>a {
  background:  #3E5884;  /* blueish #3E5884 */
  color: #E2F1FF!important;  /*very light blueish #E2F1FF*/
}

.page-link {
    color: #E2F1FF!important;  /*very light blueish #E2F1FF*/
    background: #728AB9;  /* light blueish #728AB9 */
    border: none;
    margin-right: 0.25rem;
    margin-left: 0.25rem;
}

.page-link:hover {
    background: #3E5884;  /* blueish #3E5884 */
}

.page-item:last-child .page-link {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background: transparent;
    color: #728AB9!important;
    border: none;
    font-family: Oswald, sans-serif;
}

.page-item:first-child .page-link {
    margin-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background: transparent;
    color: #728AB9!important;
    border: none;
    font-family: Oswald, sans-serif;
}

.page-item.disabled .page-link {
  color: #728ab97d !important;
}

/* Opus Detail */

ul.no-bullets {
  list-style-type: none; /* Remove bullets */
  padding-left: 0;
}

a.filter-link {
  font-weight: 700;
  font-family: 'Roboto Slab', serif;
  color: var(--mid-darker)!important;
  border-bottom: solid 1px;
}

a.filter-link:hover {
  font-weight: 700;
  color: var(--darkest)!important;
  text-decoration: none;
  border-bottom: solid 1px;
}

.value-style {
  font-weight: 700;
  color: #3E5884;
  font-family: 'Roboto Slab', serif;
}

.key-style {
  font-weight: 300;
  color: #3E5884;
  font-family: 'Roboto Slab', serif;
}

.opus-comment {
  font-family: Roboto Slab, serif;
  font-style: normal;
  color: #3E5884;  /* blueish #3E5884 */
}



.ckeditor-html5-audio {
  margin-bottom: 2rem;
}

/*News list*/
.blog-img {
  width: 100%;
}