@font-face {
  font-family: 'FS Joey';
  src: url('../fonts/FSJoey-Heavy.woff2') format('woff2'),
    url('../fonts/FSJoey-Heavy.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Museo Sans 300';
  src: url('../fonts/MuseoSans-300.woff2') format('woff2'),
    url('../fonts/MuseoSans-300.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'FV Almelo';
  src: url('../fonts/MuseoSans-300.woff2') format('woff2'),
    url('../fonts/MuseoSans-300.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}



body {
  /* font-family: "Roboto 300" !important; */
  font-family: 'Rubik', sans-serif;
  background-color: #eee;
  height: 100vh;
}



a:hover{
  text-decoration: none;
}


.bg-light{
  /* background-color: #f2f2f2 !important; */
  background-color: transparent !important;
}

.navbar-light .navbar-toggler {
  border-color: rgba(0,0,0,0);
  outline: none;
}

.bid-menu {
  text-align: center;
  padding-top:10px;
}

.bid-menu a {
  font-size: .9rem;
  padding-left:10px;
  padding-right:10px;
  color:#B6D8C7;
  font-weight: 500;
}

.bid-menu a.active {
  color:#37A56F;
}

.bid-product{
}

.bid-info{
  
}

.bid-info p{
  color:#aaa;
  margin-bottom: .5rem;
}

.bid-info .date{
  font-size: 1.1rem;
}


.bid-info h3{
  color:#2A2B3E;
  margin-bottom:20px;
}

.bid-info h2, .bid-info h1{
  color:#2A2B3E;
  margin-bottom:20px;
  font-size: 1.5rem;
}

.bid-info .countdown{
  color:#E8505B;
  font-weight: 400;
  margin-bottom: 20px;
}

.bid-info .highestbid{
  color:#00D09F;
  font-weight: 400;
  margin-bottom: 40px;
}

#bid-fixed{
  padding:20px;
  position: fixed;
  height: 230px;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  text-align: center;
  border-radius: 50px 50px 0px 0px;
  transition: 0.5s;
}

.btn-play-video{
  position:absolute;
  bottom:30px;
  right:30px;
}

.btn-play-bid{
  background-color: #00D09F;
  border-radius: 50px;
  color:#fff;
  padding: 10px 50px;
}

.btn-play-bid:hover{
  background-color: #00a07b;
  color:#fff;
}

.btn-primary{
  background-color: #00D09F;
  border:#00D09F;
}

.btn-primary:hover{
  background-color: #00a07b;
  color:#fff;
}

.poin-link,.btn-logout{
  border-radius: 20px;
}


h3.product-title{
  font-size: 1rem;
  height: 40px;
  overflow: hidden;
}

.product-info{
  font-size: .9rem;
  margin-bottom: 0px;
}

.price-sold{
  font-size: .9rem;
  margin-bottom: 0px;
  background-color: #00D09F;
  padding: 8px 20px;
  border-radius: 20px;
  color: #fff;
}
.navbar-brand {
  display: inline-block;
  padding-top: 0rem;
  padding-bottom: 0rem;
  margin-right: 0;
  margin-left: auto;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap;
}


 /* The side navigation menu */
 .sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1072; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #2E2E2E; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 1.1rem;
  color: #fff;
  display: block;
  transition: 0.3s;
  white-space: nowrap;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav #sidenav_close_btn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* #backdrop {
  height: 100%; 
  width: 100%; 
  position: fixed;
  z-index: 1071; 
  top: 0; 
  left: 0;
  background-color: #fff; 
  overflow-x: hidden; 
  padding-top: 60px; 
  background-image: url("../img/Group 1273.png");
  background-repeat: repeat;

} */

#backdrop {
  height: 100%; /* 100% Full-height */
  width: 100%; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1071; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #fff; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  background-image: url("../img/bg-menu3.png");
  background-repeat:no-repeat;
  background-size: cover;
}


.countdown{
  border : solid 1px #E8505B;
  padding : 10px 20px;
  border-radius: 20px;
  color: #E8505B;
}

.top_bid{
  border : solid 1px #00D09F;
  padding : 10px 20px;
  border-radius: 20px;
  color: #00D09F;
}

.text-small{
  font-size: .9rem;
}


a{
  color: #00D09F;
}

a:hover{
  color: #00a07b;
}

.container-timeline{
  width: 100%;
  margin-left:-10px;
}

.timeline li{
  list-style: none;
  float: left;
  width: 33.3333%;
  position: relative;
  text-align: center;
  font-size:1rem;
}

.timeline ul:nth-child(1){
  color: #ccc;
}

.timeline li:before{
  content: "";
  width: 20px;
  height: 20px;
  border: 3px solid #ccc;
  border-radius: 50%;
  display: block;
  text-align: center;
  line-height: 50px;
  margin: 0 auto 10px auto;
  background: #fff;
  color: #000;
  transition: all ease-in-out .3s;
}

.timeline li:after{
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #ccc;
  top: 10px;
  left: -50%;
  z-index: -1;
  transition: all ease-in-out .3s;
}

.timeline li:first-child:after{
  content: none; 
}

.timeline li.active-tl{
  color: #19D3A7;
}

.timeline li.active-tl:before{
  background: #19D3A7;
  color: #F1F1F1;
  border: 3px solid #19D3A7;
}

.timeline li.active-tl + li:after{
  background: #19D3A7;
}

.fancybox-content{
  height:90% !important;
}

.fancybox-iframe{
  background:#222;
}

.h2, h2, .h1, h1 {
  font-size: 1.75rem;
}

.slick-prev::before, .slick-next::before {
  font-family: 'slick';
  font-size: 32px;
  line-height: 1;
  opacity: .75;
  color: black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-next {
  right: -35px;
}

.slick-prev {
  left: -35px;
}

.loader {
  height: 0;
  width: 0;
  padding: 4px;
  border: 3px solid #fff;
  border-right-color: transparent;
  border-radius: 20px;
  -webkit-animation: rotate 1s infinite linear;
}



@-webkit-keyframes rotate {
  /* 100% keyframe for  clockwise. 
     use 0% instead for anticlockwise */
  100% {
    -webkit-transform: rotate(360deg);
  }
}


/*======== On screens that are 480px wide or less ========*/
@media screen and (max-width: 480px) {
  .bid-info{
    width: 100%;  
  }
}

/*======== On screens that are 992px wide or more ========*/
@media screen and (min-width: 992px) {

 
}