.about-singha {
  position: relative;
  overflow: hidden;
}

.top-text-wrapper {
  padding: 0% 6% 0% 6%;
}

.rectangle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffc522;
  transform: translate(0%, -35%) skew(0deg, -14deg);
  z-index: -1;
}

.rectangle.middle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70%;
  background-color: #ffc522;
  transform: translate(0%, 24%) skew(0deg, -14deg);
  z-index: -1;
}

.title .line-1 .custom-h1 {
  font-size: 2.5vw;
  line-height: 3vw;
  font-weight: bolder;
}

.title .line-2 .custom-h1 {
  font-size: 3vw;
  line-height: 3vw;
  font-weight: bolder;
}

.title .line-2 {
  width: 60%;
}

.custom-h1 {
  margin: unset;
}

.image-wrapper.text-center {
  margin: 0% 10% 10% 10%;
}

.top-margin {
  margin-top: 5%;
  margin-bottom: 5%;
}

.award-text-wrapper {
  font-size: 3vw;
  line-height: 3vw;
  font-weight: bolder;
}

.symbol-text-wrapper {
  font-size: 3vw;
  line-height: 3vw;
  font-weight: bolder;
  margin: 6% 0;
}

.symbol-content-wrapper {
  position: relative;
  margin-bottom: 6%;
}

.context-box {
  position: absolute;
  width: 26%;
}

.beer-box {
  width: 22%;
  margin: 0 auto;
}

.first-cont .title,
.second-cont .title {
  font-size: 3.5vw;
  line-height: 3vw;
}

.second-cont .title .right {
  text-align: right;
}

.second-cont .content.right {
  text-align: right;
}

.context-box.first-cont.first-cont-pos {
  top: 15%;
  right: 6%;
}

.context-box.second-cont.second-cont-pos {
  bottom: 15%;
  left: 3%;
}

.title .dash {
  background-color: #fff;
  width: 10vw;
  height: 7px;
  display: block;
}

.title .dash-left {
  position: absolute;
  right: 2.5vw;
}

.title .dash-right {
  position: absolute;
  left: 2.5vw;
}

.col-display {
  position: relative;
}

.col-custom-margin {
  margin: auto 0;
}

.content-wrapper .content {
  margin: 3% 0;
}

.campaign-wrapper .campaign-text-wrapper {
  font-size: 3vw;
  line-height: 3vw;
  font-weight: bolder;
  margin: 6% 0;
}

.box-img {
  background-position: top center;
  background-size: cover;
}

.box-img.timeline.inside {
  position: relative;
}

.box-img.timeline.outside {
  position: relative;
}

.year.owl-carousel.owl-theme {
  position: absolute;
  top: 4%;
}

.owl-stage .owl-item .box-img.pic {
  margin: 10% 3% 10% 10%;
}

.box-img.video {
  position: relative;
}

.owl-carousel .owl-video-wrapper {
  position: absolute !important;
  width: 100%;
  height: 100%;
  background: #000;
  top: 0;
}

.comercial-archives.print .owl-stage {
  padding-left: unset !important;
}

.data-wrapper {
  position: absolute;
  bottom: 10%;
  padding: 0% 8% 0% 8%;
  cursor: pointer;
}

.data-wrapper .title {
  font-size: 1.9vw;
  line-height: 1.9vw;
  color: #fff;
}

.data-wrapper .sub-title {
  font-size: 1.5vw;
  line-height: 1.5vw;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.first-cont-width {
  width: 50%;
}

.owl-dots .owl-dot button {
  background: 0 0;
  color: inherit;
  border: none;
  padding: 0 !important;
  font: inherit;
}

.custom-owl-button {
  background: 0 0;
  color: inherit;
  border: none;
  padding: 0 !important;
  font: inherit;
}

.historical-timeline {
  position: relative;
}

.comercial-archives.print,
.comercial-archives.vdo {
  position: relative;
}

.historical-timeline .owl-dots {
  position: absolute;
  bottom: 2vw;
  width: 100%;
  display: flex;
  flex-grow: 1;
  justify-content: space-around;
}

.comercial-archives.print .owl-dots {
  position: absolute;
  bottom: 2vw;
  width: 100%;
  display: flex;
  flex-grow: 1;
  justify-content: space-around;
}

.comercial-archives.vdo .owl-dots {
  position: absolute;
  bottom: 2vw;
  width: 100%;
  display: flex;
  flex-grow: 1;
  justify-content: space-around;
}

.historical-timeline .owl-dots .owl-dot .hl-line {
  content: "";
  width: 100%;
  height: 2px;
  background-color: #fff !important;
  position: absolute;
  display: block;
  left: 0;
  top: 4px;
}

.comercial-archives.print .owl-dots .owl-dot .hl-line {
  content: "";
  width: 100%;
  height: 2px;
  background-color: #989898 !important;
  position: absolute;
  display: block;
  left: 0;
  top: 4px;
}

.comercial-archives.vdo .owl-dots .owl-dot .hl-line {
  content: "";
  width: 100%;
  height: 2px;
  background-color: #989898 !important;
  position: absolute;
  display: block;
  left: 0;
  top: 4px;
}

.comercial-archives.vdo .owl-dots .owl-dot span.dot {
  background: #989898 !important;
}

.historical-timeline .owl-dots .owl-dot.lineactive .hl-line,
.comercial-archives.print .owl-dots .owl-dot.lineactive .hl-line,
.comercial-archives.vdo .owl-dots .owl-dot.lineactive .hl-line {
  background-color: #ffc522 !important;
  /* transition: background-color 1000ms linear; */
  /* -webkit-transition: background-color 1000ms linear;
  -moz-transition: background-color 1000ms linear;
  -o-transition: background-color 1000ms linear;
  -ms-transition: background-color 1000ms linear; */
}

.second-select {
  padding-left: 2%;
}

@keyframes lineanim {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

.comercial-archives.print .box-img {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.comercial-archives.print .owl-dots .owl-dot:last-child {
  padding-right: 10.6vw;
}

.comercial-archives.print .owl-dots .owl-dot .custom-year.last {
  right: 10vw;
}

.comercial-archives.vdo .owl-dots .owl-dot:last-child {
  padding-right: 8.6vw;
}

.historical-timeline .owl-dots .owl-dot:last-child {
  padding-right: 5.6vw;
}

.historical-timeline .owl-dots .owl-dot .custom-year {
  position: absolute;
  right: -0.6vw;
  color: #fff;
}

.comercial-archives.print .owl-dots .owl-dot .custom-year,
.comercial-archives.vdo .owl-dots .owl-dot .custom-year {
  position: absolute;
  right: -0.6vw;
  color: #989898;
}

.historical-timeline .owl-dots .owl-dot .custom-year.last,
.comercial-archives.vdo .owl-dots .owl-dot .custom-year.last {
  right: 5vw;
}

.owl-dot:hover span {
  background-color: #ffc522 !important;
}

.owl-theme .owl-dots .owl-dot.lineactive span.dot {
  background-color: #ffc522 !important;
}

.historical-timeline-wrapper .owl-theme .owl-dots .owl-dot.lineactive span.dot {
  background-color: #ffc522 !important;
}

.owl-theme .owl-dots .owl-dot.lineactive .custom-year {
  color: #ffc522 !important;
}

.owl-dots .owl-dot {
  width: 100%;
  position: relative;
}

.owl-dots .owl-dot span {
  margin: 5px 0 5px auto !important;
  background: #d6d6d6 !important;
}

.historical-timeline-wrapper .owl-dots .owl-dot span.dot {
  margin: 5px 0 5px auto !important;
  background: #fff !important;
}

.historical-timeline-wrapper
  .comercial-archives.print
  .owl-dots
  .owl-dot
  span.dot,
.historical-timeline-wrapper
  .comercial-archives.vdo
  .owl-dots
  .owl-dot
  span.dot {
  margin: 5px 0 5px auto !important;
  background: #989898 !important;
}

.historical-timeline-wrapper
  .comercial-archives.print.owl-theme
  .owl-dots
  .owl-dot.lineactive
  span.dot,
.historical-timeline-wrapper
  .comercial-archives.vdo.owl-theme
  .owl-dots
  .owl-dot.lineactive
  span.dot {
  background-color: #ffc522 !important;
}

.historical-timeline-wrapper .owl-dots .owl-dot span.dot:hover {
  background-color: #ffc522 !important;
  opacity: 1;
}

.historical-timeline-wrapper .owl-dots .owl-dot:hover div.custom-year {
  color: #ffc522;
}

.historical-timeline-wrapper .owl-dots .owl-dot .hl-line:hover + span.dot {
  background-color: #ffc522 !important;
}

/* .historical-timeline-wrapper .owl-dots .owl-dot:hover .custom-year{
  color: #ffc522;
}

.historical-timeline-wrapper .owl-dots .owl-dot:hover .hl-line{
  background: #fff!important;
} */

.owl-dots button.owl-dot {
  width: 100%;
}

.timeline-select-wrapper {
  position: absolute;
  z-index: 5;
  top: 1vw;
  left: 3vw;
  width: 90%;
}

.historical-timeline-wrapper {
  position: relative;
}

.custom-form-control {
  width: 250px;
  padding: unset;
  border: unset;
  border-radius: unset;
  background: unset;
  border-bottom: 1px solid #fff;
  color: #fff;
}

select.form-control.custom-form-control:focus {
  background-color: transparent;
  box-shadow: none;
  border-bottom: 1px solid #fff;
  color: #fff;
}

select option {
  margin: 40px;
  background-color: transparent;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

.first-select,
.second-select {
  display: inline-block;
}

.text-singha {
  color: #ffc522;
  text-transform: uppercase;
}

.box-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.sub-title {
  font-size: 1.1vw;
}

.title {
  font-size: 3vw;
}

.comercial-archives.vdo .title {
  font-size: 1.9vw;
}

.row-absolute {
  position: absolute;
  top: 10%;
  width: 100%;
}

.button-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

iframe#player {
  position: absolute;
  top: 0;
  left: 0;
}

.modal-image-wrapper {
  position: relative;
}

.middle-text {
  text-transform: uppercase;
  font-size: 3vw;
  font-weight: bolder;
  padding: 4vw 0% 0% 0%;
  margin-bottom: 5%;
}

.middle-button {
  width: 17vw !important;
}

.product-custom-width {
  width: 50% !important;
  display: unset !important;
}

img.clickable-product {
  cursor: pointer;
}

.custom-flex {
  flex-grow: 0;
}

.product-custom-margin {
  margin: auto 0 0 0;
}

.owl-carousel.off {
  display: flex;
}
.custom-flex {
  flex-grow: 0;
}

.lastsection {
  position: relative;
  margin: 5% 0%;
}

.product {
  /* margin: 0% 10%; */
}

.product.owl-carousel .owl-stage {
  display: flex;
  gap: 20px;
  justify-content: space-around;
}
.product.owl-carousel .owl-stage .owl-item {
  align-self: end;
}

@media (max-width: 1281px) {
  .product.owl-carousel .owl-stage .owl-item {
    width: 200px !important;
  }
}

.product.owl-theme .owl-dots .owl-dot {
  display: inline-block;
  zoom: 1;
}

.product .owl-dots .owl-dot span {
  margin: 5px 7px !important;
}

.product .owl-dots button.owl-dot {
  width: unset;
}

.product.owl-theme .owl-dots .owl-dot.active span,
.product.owl-theme .owl-dots .owl-dot:hover span {
  background-color: #ffc522 !important;
}

button:focus {
  outline: 0;
}

.linkbut.bggray {
  background: linear-gradient(135deg, #212529 50%, #4d4d4d 50%) !important;
  font-size: 0.8vw;
  width: 30%;
  transition: all 0.5s ease-out;
  position: relative;
}
.linkbut.bggray:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(135deg, #4d4d4d 50%, #212529 0%) !important;
  z-index: -1;
}

.linkbut.bggray,
.linkbut.bggray:after {
  background-size: 300% !important;
  background-position: 100% !important;
  transition: 1s;
  color: #f8f9fa !important;
  border: 1px solid #4d4d4d;
}

.linkbut:hover.bggray,
.linkbut:hover.bggray:after {
  background-position: 0 !important;
  border-color: #212529 !important;
  color: #f8f9fa !important;
}

.top-button-wrapper {
  margin-top: 0vw;
}

.select2-container--default .select2-selection--single {
  background-color: unset !important;
  border: unset !important;
  border-bottom: 1px solid #fff !important;
  border-radius: unset !important;
  font-size: 1vw;
  font-weight: 400;
  height: unset !important;
  display: flex !important;
}

.select2-dropdown {
  border: unset !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow
  b {
  border-color: #fff transparent transparent transparent !important;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: #fff !important;
}

.his-content-wrapper {
  position: absolute;
  top: 10%;
  left: 3%;
  color: #fff;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: unset !important;
  padding-right: 40px !important;
  display: inline-block !important;
}

.his-title {
  font-size: 2vw;
  text-transform: uppercase;
  font-weight: bold;
}

.his-year {
  font-size: 6vw;
  line-height: 6vw;
}

.his-content {
  width: 40%;
  font-size: 1vw;
}

.historical-timeline .box-img {
  background-position: center center;
  background-size: cover;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: unset !important;
  top: unset !important;
  right: unset !important;
  width: unset !important;
  display: inline-block;
  position: relative !important;
  align-self: center;
}

.page-number-wrapper {
  position: absolute;
  bottom: 3%;
  right: 3%;
  background-color: black;
  color: #fff;
  padding: 0.5% 4%;
  border-radius: 20px;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__rendered.black {
  color: #989898 !important;
}

.select2-container--default .select2-selection--single.black {
  border-bottom: 1px solid #989898 !important;
}

.svg-inline--fa.fa-angle-down.fa-w-10.fa-lg.black {
  color: #989898;
}

.svg-inline--fa.fa-angle-down.fa-w-10.fa-lg.white {
  color: #fff;
}

@media (max-width: 1361px) {
  .prod-of-singha-wrapper .product-custom-margin-story .product-size.size-3 {
  }
}

@media only screen and (max-width: 992px) {
  .title .dash {
    margin-right: 3vw;
  }

  .title .dash-left {
    position: relative;
    right: unset;
  }

  .title .dash-right {
    position: relative;
    left: unset;
  }

  .second-cont .title .right {
    text-align: left;
  }

  .second-cont .content.right {
    text-align: left;
  }

  .historical-timeline .box-img {
    background-position: 87% center;
  }

  .select2-container--default .select2-selection--single {
    font-size: 4vw;
  }

  .his-content-wrapper {
    top: 10%;
  }

  .his-content {
    width: 90%;
    font-size: 4vw;
    line-height: 5vw;
  }

  .his-title {
    font-size: 5vw;
  }

  .his-year {
    font-size: 17vw;
    line-height: 20vw;
  }

  .top-button-wrapper.mb {
    margin: 5% 3% 10% 3%;
    text-align: center;
  }

  .top-button-wrapper.mb a {
    font-size: 3vw;
    width: 50%;
  }

  .historical-timeline .owl-dots .owl-dot .custom-year {
    right: -1vw;
  }

  .historical-timeline .owl-dots .owl-dot .custom-year.last {
    right: 4.5vw;
  }

  .historical-timeline .owl-dots {
    bottom: 12vw;
  }

  .comercial-archives.print .owl-stage .owl-item .box-img.pic {
    margin: 0% 3vw 0% 10vw;
  }

  .comercial-archives.vdo .owl-dots {
    bottom: 8vw;
  }

  .comercial-archives.vdo .owl-stage .owl-item .box-img.pic {
    margin: unset;
  }

  /* .comercial-archives.vdo .owl-stage .owl-item .box-img.pic {
    margin: 30vw 3% 10% 8vw;
  } */

  .comercial-archives.vdo .owl-stage {
    padding-left: unset !important;
  }

  .comercial-archives.vdo .title {
    font-size: 11vw;
  }

  .product.owl-theme .owl-nav [class*="owl-"]:hover {
    background: unset;
    color: #ffc522;
    text-decoration: none;
  }

  .product.owl-carousel .owl-nav button.owl-prev {
    margin-left: 3vw;
    color: #ffc522;
  }

  .product.owl-carousel .owl-nav button.owl-next {
    margin-right: 3vw;
    color: #ffc522;
  }

  .product.owl-theme .owl-nav {
    position: absolute;
    bottom: 0;
    left: 0%;
    font-size: 7vw;
    font-weight: bolder;
    line-height: 3vw;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .product-custom-width {
    width: 15% !important;
  }

  .comercial-archives.print .owl-dots {
    bottom: 8vw;
  }

  .timeline-select-wrapper {
    top: 4vw;
  }

  .second-select {
    margin-left: auto;
  }

  .timeline-select-wrapper {
    display: flex;
    width: 94%;
  }

  .custom-form-control.mb-length {
    width: 22vw;
  }

  .custom-form-control {
    width: 57vw;
    font-size: 4.5vw;
  }

  .comercial-archives.print .owl-dots .owl-dot:last-child {
    padding-right: 9.6vw;
  }

  .comercial-archives.print .owl-dots .owl-dot .custom-year {
    right: -1.4vw;
  }

  .comercial-archives.print .owl-dots .owl-dot .custom-year.last {
    right: 8.5vw;
  }

  .box-absolute {
    position: relative;
    top: unset;
    left: unset;
    transform: unset;
    padding: 0% 3% 15vw 3%;
  }

  .sub-title {
    font-size: 4.7vw;
  }

  .title {
    font-size: 12vw;
    line-height: 11vw;
  }

  .box-img {
    background-position: 81% 0%;
    background-size: cover;
  }

  .first-cont-width {
    width: unset;
  }
  .data-wrapper .title {
    font-size: 9.5vw;
    line-height: 9.5vw;
  }

  .data-wrapper .sub-title {
    font-size: 5vw;
    line-height: 5vw;
  }

  .award-text-wrapper {
    font-size: 10.8vw;
    line-height: 10vw;
    font-weight: bolder;
  }

  .campaign-wrapper .campaign-text-wrapper {
    font-size: 10.8vw;
    line-height: 10vw;
    margin: 10% 0;
  }

  .title .line-1 .custom-h1 {
    font-size: 9.5vw;
    line-height: 9vw;
  }

  .top-text-wrapper {
    padding: 0% 3% 0% 3%;
  }

  .title .line-2 .custom-h1 {
    font-size: 9vw;
    line-height: 9vw;
    font-weight: bolder;
  }

  .title .line-2 {
    width: 80%;
  }

  .image-wrapper.text-center {
    margin: 5% 3% 10% 3%;
  }

  .top-text-wrapper .content {
    font-size: 3.5vw;
  }

  .context-box {
    position: relative;
    width: unset;
  }

  .context-box.first-cont.first-cont-pos {
    top: unset;
    right: unset;
    margin: 0% 3%;
  }

  .context-box.second-cont.second-cont-pos {
    bottom: unset;
    left: unset;
    margin: 0% 3%;
  }
  .symbol-text-wrapper {
    font-size: 10.8vw;
    line-height: 10vw;
    margin: 10% 3%;
  }

  .middle-text {
    font-size: 10vw;
    line-height: 9vw;
    padding: 7vw 0% 7vw 0%;
  }

  .middle-button {
    width: 54vw !important;
    font-size: 3vw !important;
  }

  .lastsection .top-button-wrapper {
    margin-top: 5vw;
  }

  .first-cont .title .dash {
    background-color: #ffc522;
  }
  .first-cont .title,
  .second-cont .title {
    font-size: 9.5vw;
    line-height: 9vw;
  }
  .beer-box {
    width: 45%;
    margin: 5% auto;
  }

  .content-wrapper .content {
    font-size: 3vw;
  }
}

@media only screen and (max-width: 767px) {
  .product.owl-carousel .owl-stage .owl-item {
    width: 100% !important;
  }
  .top-button-wrapper {
    margin-top: 5vw;
  }
}

@media only screen and (max-width: 575px) {
  .select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: 10px !important;
  }
  .select2-container--default .select2-selection--single {
    font-size: 4.5vw;
  }
  .symbol-text-wrapper {
    font-size: 9.8vw;
    line-height: 9vw;
  }
  .comercial-archives.print .owl-dots .owl-dot .custom-year {
    right: -3vw;
    font-size: 3.5vw;
  }

  .comercial-archives.print .owl-dots .owl-dot .custom-year.last {
    right: 6.5vw;
  }

  .historical-timeline .owl-dots .owl-dot .custom-year {
    right: -1.3vw;
    font-size: 2.4vw;
  }

  .historical-timeline .owl-dots .owl-dot .custom-year.last {
    right: 4vw;
  }
}

@media only screen and (max-width: 480px) {
  .custom-form-control.mb-length {
    width: 28vw;
  }
  .custom-form-control {
    width: 60vw;
  }

  .product.owl-theme .owl-nav {
    font-size: 12vw;
    line-height: 6vw;
  }
}