:root {
  --jumbotron-padding-y: 1.5rem;
}

@font-face {
  font-family:'Montserrat';
  src: url('../fonts/Montserrat-Light.ttf');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family:'Montserrat';
  src: url('../fonts/Montserrat-Regular.ttf');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family:'Montserrat';
  src: url('../fonts/Montserrat-SemiBold.ttf');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family:'Montserrat';
  src: url('../fonts/Montserrat-Bold.ttf');
  font-weight: 700;
  font-style: normal;
}


.jumbotron {
  padding-top: var(--jumbotron-padding-y);
  padding-bottom: var(--jumbotron-padding-y);
  margin-bottom: 0;
  background-color: #fff;
}
@media (min-width: 768px) {
  .jumbotron {
    padding-top: calc(var(--jumbotron-padding-y) * 2);
    padding-bottom: calc(var(--jumbotron-padding-y) * 2);
  }
}

.jumbotron p:last-child {
  margin-bottom: 0;
}

.jumbotron-heading {
  font-weight: 900;
}

.jumbotron .container {
  max-width: 40rem;
}

footer {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

footer p {
  margin-bottom: .25rem;
}
footer p.small { font-size:12px; line-height: 16px; }

.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

.card-container { justify-content: start; }
.card {
  width: 280px;
  max-width: 90vw;
  height: auto;
  box-shadow: 0px 5px 7px -3px rgba(0,0,0,0.2);
  transform: scale(1);
  transition: all ease-in-out .15s;
}
.card:hover { box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1); transform: scale(1.02); }
.card .img-container {
  border-radius: 4px 4px 0px 0px;
  overflow: hidden;
  width: 100%;
  max-width:100%;
  min-width:100%;
  height: 280px;
  position: relative;
  pointer-events: none;
}
.card .img-container .card-img-top { 
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  object-fit: cover;
}
.card .details-container { height: 104px; }
.card .details-container .wrapper { height: 100%; overflow: hidden; }
.card .details-container .card-title { margin-bottom: 0px; }
.card .details-container h6.card-title { font-size: 16px; }
.card .details-container h5.card-title { font-size: 18px; }
.card .details-container h4.card-title { font-size: 20px; }
.card .details-container .card-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #a1a1a1;
  text-align: left;
  margin: 0px;
  overflow: hidden;
}

.details-icon img {
  width: 40px;
  height: 40px;
}

.add-cursor-p:hover {
cursor: pointer;
}

#search-result { display: none; }
#search-result.show { display: flex; flex-direction: row; }
#search-result label { color: #8b8b8b; font-family: 'BeVietnam', sans-serif;; font-size: 14px; margin-right: 20px; font-weight: 500; }
#search-result label.remove-filters { color: #f12938; margin-right: 0px; cursor: pointer; }

/*------- Typography -------*/
h1 { font-family: 'Montserrat'; font-weight: 900; }
h2 { font-family: 'Montserrat'; }
h3 { font-family: 'Montserrat'; font-weight: 600; }
h4 { font-family: 'Montserrat'; }
h5 { font-family: 'Montserrat'; }
h6 { font-family: 'Montserrat'; }


/* ------- Bootstrap's SM size ------- */
@media (max-width: 576px) {
  .card-container { justify-content: center; }
}