@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

body {
	margin: 0;
}
.offer-banner-container {
	position: relative;
    z-index: 99;
	display: none; 	/* Вкл баенр */
	align-items: center;
	justify-content: center;
	height: 60px;
	padding: 0 40px 0 40px;
	background: linear-gradient(263.94deg, #7837E3 12.98%, #E730DF 121.99%);
}
.offer-banner-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 1530px;
	height: 100%;
}
.offer-banner-pic {
	display: flex;
	align-items: center;
	justify-content: center;
}
.offer-banner-pic img {
	z-index: 2;
	position: absolute;
	width: 40px;
}
/* .bg-pulse {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #cca92c;
  box-shadow: 0 0 0 rgba(113, 204, 180, 0.9);
  animation: pulse 1.5s infinite;
}
@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(113, 204, 180, 0.9);
  }
  70% {
      -webkit-box-shadow: 0 0 0 20px rgba(204,169,44, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(113, 204, 180, 0.9);
    box-shadow: 0 0 0 0 rgba(113, 204, 180, 0.9);
  }
  70% {
      -moz-box-shadow: 0 0 0 20px rgba(204,169,44, 0);
      box-shadow: 0 0 0 20px rgba(204,169,44, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
      box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
} */
.gold-gold {
	z-index: 1;
	left: 0;
	opacity: 0.9;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url(/public/images/goldgold.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: bottom -10px right 5px;
	background-size: 150%;
	width: 140px;
	height: 60px;
}
.gold-gold2 {
	z-index: 1;
	right: 0;
	transform: scaleX(-1);
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url(/public/images/goldgold.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: bottom -10px right 5px;
	background-size: 150%;
	width: 140px;
	height: 60px;
}
.offer-banner-ttb {
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
.offer-banner-tittle {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-size: 18px;
	color: #fff;
}
.offer-banner-tittle p {
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	font-size: 22px;
	color: #FCCF00;
	margin-left: 5px;
  margin-bottom: 4px;
}
.offer-banner-timer {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	margin-top: 1px;
	margin-left: 40px;
}
.offer-banner-btn {
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-size: 16px;
	color: #fff;
	background: #ffae00;
	padding: 5px 15px 6px;
	/* border: 1px solid #fff; */
	border-radius: 6px;
	margin-left: 40px;
}
.offer-banner-btn:hover {
	cursor: pointer;
	background: #dd9f19;
}
@media screen and (max-width: 1095px) {
	.offer-banner-timer {
    margin-left: 20px;
	}
	.offer-banner-btn {
    margin-left: 20px;
	}
}
@media screen and (max-width: 992px) {
	.offer-banner-container {
		height: 100px;
	}
	.gold-gold {
		height: 100px;
	}
	.gold-gold2 {
		height: 100px;
	}
}
@media screen and (max-width: 950px) {
	.offer-banner-pic {
		/* display: none; */
	}
}
@media screen and (max-width: 853px) {
	.offer-banner-container {
		height: 120px;
	}
	.offer-banner-btn {
		margin-top: 10px;
	}
	.gold-gold {
		height: 120px;
	}
	.gold-gold2 {
		height: 120px;
	}
}
@media screen and (max-width: 695px) {
    .offer-banner-tittle {
        /* margin-bottom: 15px; */
    }
	.offer-banner-container {
		height: 120px;
	}
	.offer-banner-btn {
    /* margin-top: 0px; */
		/* margin-bottom: 0px; */
	}
	.offer-banner-ttb {
		/* margin-bottom: 20px; */
	}
	.offer-banner-timer {
		margin-left: 0px;
	}
	.offer-banner-pic {
		display: flex;
	}
}
@media screen and (max-width: 617px) {
	.offer-banner-tittle {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 16px;
	}
}
@media screen and (max-width: 580px) {
	.offer-banner-pic {
		display: none;
	}
}
@media screen and (max-width: 568px) {
	.offer-banner-container {
    padding: 0 0px 0 0px;
	}
}
@media screen and (max-width: 500px) {
	.offer-banner-tittle {
		flex-wrap: wrap;
	}
}
@media screen and (max-width: 459px) {
	.offer-banner-btn {
		margin-left: 14px;
	}
}
@media screen and (max-width: 472px) {
	.offer-banner-container {
		padding: 0 10px 0 10px;
	}
}
@media screen and (max-width: 386px) {
    .offer-banner-ttb {
        margin-bottom: 0;
    }
    .offer-banner-tittle {
        margin-bottom: 10px;
    }
    .offer-banner-btn {
        margin-top: 10px;
    }
}
@media screen and (max-width: 384px) {
	.offer-banner-container {
		height: 160px;
	}
	.gold-gold {
		height: 165px;
	}
	.gold-gold2 {
		height: 165px;
	}
}
@media screen and (max-width: 376px) {
	.offer-banner-tittle {
		flex-wrap: wrap;
	}
	.offer-banner-container {
		height: 165px;
	}
	.offer-banner-ttb {
		margin-bottom: 0px;
	}
	.offer-banner-btn {
		margin-top: 10px;
	}
}
@media screen and (max-width: 371px) {
	.offer-banner-tittle {
    text-align: center;
		margin-bottom: 0px;
	}
}