/* Less variables */
@import "../../core/less/variables.less";
/* ------------------------- */
.mainImg {
  height: 630px;
  background-color: @navColor;
  background-image: url("../images/productsBackground.jpg");
  background-size: cover;
  background-position: center;
  position: relative;
}

#mainText {
  color: @textColor;
  text-align: center;
  margin-top: 200px;
}

#mainText p {
  font-size: 23px;
  font-family: Georgia, Times, 'Times New Roman', serif;
}

#mainText h1 {
  margin-top: 20px;
  font-size: 33px;
  font-weight: bold;
  margin-bottom: 0px;
  font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
}

@media only screen and (max-width: 640px) {
  .mainImg {
    height: 440px;
    background-image: url("../images/productsBackgroundMb.jpg");
  }

  #mainText {
    width: 95%;
    margin: auto;
    margin-top: 45px;
  }

  #mainText h1 {
    font-size: 30px;
  }

  #mainText p {
    font-size: 22px;
  }

  .col-sm-6 {
    padding: 0px;
  }

  #mainText .buyButton {
    margin-top: 20px;
  }
}