body {
  font-family: 'Lora', serif;
  font-size: 18px;
  background-color:#333;
  color:rgba(220,220,220,0.95);
}

.dark {
  background-color:#333;
  color:rgba(220,220,220,0.95);
}

.light {
  background-color:rgba(220,220,220,0.95);
  color:#333;
}

h1, h2, h3, h4, h5, h6, .btn {
  transform: scale(1,1.05);
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  letter-spacing: -0.05em;
  color:rgba(220,220,220,0.95);
}

.btn-warning
{
  color:#333;
  opacity:0.8;
}

.primary-font {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
}

.btn {
  font-size:1.25rem;
}

.navbar {
  font-family: 'Montserrat';
  background-color: #226ed8/*2f77bf*//*226ed8*//*#006DAD*/;
}

.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-brand {
  color: #fff;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-brand:hover {
  color: #ddd;
}

.navbar-brand {
  font-size:36px;
  letter-spacing: -0.05em;
  line-height:0.5;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.nav-link {
   font-size:1.2em;
   line-height:1.0;
   text-transform:lowercase;
}

main {
  margin-top:1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/*****************************************************************************/
/* https://codepen.io/quinlo/pen/ReMRXz */
ul.cb-buttons {
  list-style: none;
  padding: 0px;
}
ul.cb-buttons li{
  display: inline;
}
ul.cb-buttons li label {
    display: inline-block;
    background-color: #333;
    color: rgba(220,220,220,0.9);
    border-radius:5px;
    white-space: nowrap;
    margin: 3px 0px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: all .2s;
    padding: 8px 12px;
    cursor: pointer;
}

ul.cb-buttons li label::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding: 2px 6px 2px 2px;
    content: "\f067";
    transition: transform .3s ease-in-out;
}

ul.cb-buttons li input[type="checkbox"]:checked + label::before {
    content: "\f00c";
    transform: rotate(-360deg);
    transition: transform .3s ease-in-out;
}

ul.cb-buttons li input[type="checkbox"]:checked + label {
    background-color:#444;
    transition: all .2s;
}

ul.cb-buttons li input[type="checkbox"] {
  display: absolute;
  position: absolute;
  opacity: 0;
}

/*****************************************************************************/

/*https://www.w3schools.com/howto/howto_js_rangeslider.asp*/
.slider {
-webkit-appearance: none;
width: 100%;
height: 12px;
background: #444;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}

.slider:hover {
opacity: 1;
}

.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
border-radius:5px;
background: rgba(220,220,220,0.9);
cursor: pointer;
}

.slider::-moz-range-thumb {
width: 24px;
height: 24px;
border-radius:5px;
background: rgba(220,220,220,0.9);
cursor: pointer;
}

/*****************************************************************************/
/*.container {width:100%; max-width:100%;}*/
/*
.card {background-color:#444;border:0;border-radius:8px;}
.card img { width:100%; height: 225px; opacity:1; object-fit:cover; border-radius:8px 8px 0 0; margin:auto auto;}
.card .stretched-link { color: inherit; text-decoration: inherit; }
*/
.card-columns {
  column-count: 1;
}
@media (min-width: 48em) {
  .card-columns {
    column-count: 2;
  }
}
@media (min-width: 64em) {
  .card-columns {
    column-count: 3;
  }
}
@media (min-width: 85.375em) {
  .card-columns {
    column-count: 4;
  }
}
@media (min-width: 120em) {
  .card-columns {
    column-count: 5;
  }
}
@media (min-width: 160em) {
  .card-columns {
    column-count: 6;
  }
}

.card {
  border: 0px solid rgba(0, 0, 0, 0.19);
  background-color: #333;
  -webkit-column-break: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.card-img-top {
  border-radius: 0em;
  filter: brightness(100%);
  transition: transform .3s ease-in-out;
}
@media (min-width: 64em) {
  .card-img-top {
    filter: brightness(100%);
  }
}

.card-img-top:hover {
  filter: brightness(100%);
  transform:scale(1.05,1.05);
  transition: transform .3s ease-in-out;
}

.card h5, .card p {
  padding: 10px 10px 0 10px;
  display:none;
}

.card p {
  font-size: 0.875em;
}