/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

.pagination {
  position: fixed;
  top: 50%;
  right: 20px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.pager {
  height: 15px;
  text-align: right;
  cursor: pointer;
  margin-bottom: 2px;
}

.pager .dot {
  margin-top: 2px;
  height: 15px;
  width: 15px;
  display: inline-block;
  margin-right: 2px;
  opacity: 30%;
  -webkit-transition: opacity 0.2s ease, margin-right 0.2s ease;
  -o-transition: opacity 0.2s ease, margin-right 0.2s ease;
  transition: opacity 0.2s ease, margin-right 0.2s ease;
  background-size: cover;
}

.pager .dot.blue {
  background-image: url("../images/presentation/blue_point.png");
}

.pager .dot.gold {
  background-image: url("../images/presentation/gold_point.png");
}

.pager .dot.red {
  background-image: url("../images/presentation/red_point.png");
}

.pager.active .dot,
.pager:hover .dot {
  height: 15px;
  width: 15px;
  opacity: 100%;
  margin-right: 0px;
  -webkit-transition: opacity 0.2s ease, margin-right 0.2s ease;
  -o-transition: opacity 0.2s ease, margin-right 0.2s ease;
  transition: opacity 0.2s ease, margin-right 0.2s ease;
}

.pager label {
  margin-bottom: 2px;
  display: none;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  -webkit-transform: translateY(2px);
  -ms-transform: translateY(2px);
  transform: translateY(2px);
  -webkit-background-clip: text;
  color: transparent;
}

.pager.active label,
.pager:hover label {
  font-size: 12px;
  line-height: 14px;
  display: inline-block;
  text-transform: uppercase;
  margin-right: 5px;
  cursor: pointer;
  /* background: linear-gradient(to bottom, #644000, #644000);
  -webkit-background-clip: text;
  background-clip: text; */
}

.pager label.blue {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#77a6e8), to(#4686ae));
  background-image: -o-linear-gradient(top, #d0ad70, #644000);
  background-image: linear-gradient(to bottom, #d0ad70, #644000);
}

.pager label.gold {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#dbc06f), to(#9f8a3f));
  background-image: -o-linear-gradient(top, #dbc06f, #9f8a3f);
  background-image: linear-gradient(to bottom, #dbc06f, #9f8a3f);
}

.pager label.red {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#db6f6f), to(#a44242));
  background-image: -o-linear-gradient(top, #db6f6f, #a44242);
  background-image: linear-gradient(to bottom, #db6f6f, #a44242);
}

@media (max-width: 750px) {
  .pagination {
    display: none;
  }
  .button-container {
    display: none;
  }
}

.debug-scroll-position {
  position: fixed;
  top: 20px;
  left: 20px;
  color: red;
}