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

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



.box-img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid #fff;
  background-repeat: no-repeat;
  background-size: 125%;
  background-position: center center;
}

.taste-of-singha-wrapper{
  padding: 5% 0% 5% 0%;
  overflow: hidden;
  position: relative;
}

.title .line-1 span, .title .line-2 span{
  font-size: 4vw;
  line-height: 3vw;
  font-weight: bolder;
}

.content .line-1 span, .content .line-2 span, .content .line-3 span{
  font-size: 1vw;
  color: #666;
}

.taste-of-singha  .line-1 span{
  font-size: 4vw;
  font-weight: bolder;
}

.taste-of-singha{
  margin: 15% 0% 0% 0%;
}

.article-image-wrapper {
  position: relative;
  background-size: cover;
  background-position: center center;
}

.article-sound-wrapper {
  position: absolute;
  top: 10%;
  right: 5%;
  z-index: 10;
  width: 12%;
}

.article-content-wrapper {
  position: absolute;
  top: 25%;
}

.align-left-all {
  left: 6%;
}

.article-wrapper {
  position: relative;
}

.article-content-wrapper .article-title {
  font-size: 3vw;
  /* line-height: 2.5vw; */
  line-height: 1.1;
  text-transform: uppercase;
}

.article-wrapper .article-button {
  padding-top: 0%;
}

.article-content-wrapper .article-title .first-line {
  color: #f8f9fa;
}

.article-content-wrapper .article-title .sec-line {
  color: #ffc522;
}

.article-button-custom-width {
  width: 250px !important;
}

.article-wrapper .article-button .row.bottom {
  padding-top: 2%;
}

.article-title .small-title{
  font-size: 1vw;
}

.linkbut{
  background: linear-gradient(135deg, #212529 50%, transparent 50%) ;
  color: #f8f9fa;
  font-size: 0.8vw;
  width: 55%;
  transition:all .5s ease-out;
  position: relative;
}

.linkbut:after{
  content:"";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
 /* background: linear-gradient(135deg, transparent 50%, #212529 0%) !important; */
  z-index: -1;
}

.linkbut, .linkbut:after{
  background-size: 300% ;
  background-position: 99% ;
  transition: 1s;
  color: #4d4d4d ;
  border-color: #4d4d4d;
}

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

.linkbut.color-white{
  color: #f8f9fa ;
  border-color: #f8f9fa;
}

.linkbut.bgwhite{
  background: linear-gradient(135deg, #FFC522 50%, #f8f9fa 50%) !important;
  color: #212529 !important;
  font-size: 0.8vw;
  width: 30%;
  transition:all .5s ease-out;
  position: relative;
}

.linkbut.bgwhite:after{
  content:"";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 2px;
  background: linear-gradient(135deg, #f8f9fa 50%, #FFC522 0%) !important;
  z-index: -1;
}
.linkbut.bgwhite, .linkbut.bgwhite:after{
  background-size: 300% !important;
  background-position: 99% !important;
  transition: 1s;
  border-color: #f8f9fa;
}
.linkbut:hover.bgwhite, .linkbut:hover.bgwhite:after{
  background-position: 0 !important;
  border-color: #FFC522 !important;
  color: #212529 !important;
}

.speakerradius {
  padding: 10px 33px 11px 12px;
  background-color: #FFC522;
  border-radius: 100%;
}

.text-singha {
  color: #FFC522;
}

img.clickable-product {
  cursor: pointer;
}

.product-custom-width {
  width: 50%;
}

.middle-text {
  text-transform: uppercase;
  font-size: 3vw;
  font-weight: bolder;
  /* padding: 35% 0% 2% 0%; */
}

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

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

.lastsection {
  position: relative;
  margin-top: 10%;
}

.article-content-wrapper .article-title .title{
  width: 35%;
  font-weight: bold;
}

.article-content-wrapper .article-title .content{
  font-size: 1vw;
  width: 35%;
  line-height: 1.5;
  margin: 2% 0%;
  text-transform: none;
}

.pin-wrapper{
  position: absolute;
  top: 0%;
  left: 0%;
}

.pin-wrapper {
  position: absolute;
  top: 13.8vh;
  left: 21vw;
  width: 2vw;
}

.top-banner-img-wrapper{
  position: relative;
}

@media only screen and (max-width: 992px){

  .article-title .small-title {
    font-size: 3vw;
    line-height: 3vw;
  }

  .article-button-custom-width {
    width: 50vw !important;
  }

  .linkbut.bgwhite {
    font-size: 1.8vw;
  }

  .article-content-wrapper .article-title .content {
    font-size: 3vw;
    line-height: 1.5;
    width: 70%;
  }

  .article-content-wrapper .article-title {
    font-size: 9vw;
    /* line-height: 8.5vw; */
    line-height: 1.1;
  }

  .article-content-wrapper .article-title .title {
    width: 85%;
  }

  .article-content-wrapper {
    top: 4%;
  }

  .product-custom-width {
      width: 20%;
  }

  .lastsection-wrapper .middle-text {
      font-size: 10vw;
      word-wrap: break-word;
      word-break: break-all;
      width: 47%;
      margin: 0 auto;
      line-height: 10vw;
  }

  .rectangle.lastsection {
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform: translate(0%, -14%) skew(0deg, -15deg);
  }

  .line-1.text-center {
    text-align: left !important;
  }

  .taste-of-singha .line-1.text-center{
    text-align: center !important;
  }

  .line-2.text-center {
    text-align: left !important;
  }
  .top-text-wrapper{
    padding: 0% 5.5% 0% 5.5%;
  }

  .title .line-1 span, .title .line-2 span {
    font-size: 10vw;
    line-height: 7vw;
  }

  .title .line-2 span {
    line-height: 11vw;
  }

  .taste-of-singha .line-1 span {
    font-size: 11vw;
  }

  .content.d-xs-block.d-sm-block.d-md-block.d-lg-none {
    font-size: 3vw;
  }

  .taste-of-singha {
    margin: 35% 0% 0% 0%;
  }
  .rectangle {
    transform: translate(0%, 70%) skew(0deg, -14deg);
  }

  .box-img {
    background-size: 275%;
    background-position: 12% center;
  }
}

@media only screen and (max-width: 480px) {
  .taste-of-singha .line-1 span {
    font-size: 10.9vw;
  }
  .article-content-wrapper .article-title .title {
    width: 85%;
  }

}