/* responsive breakpoints */
.container {
  padding: 0;
  margin: 0 auto; }
  @media (max-width: 991.98px) {
    .container {
      padding: 0 16px !important; } }

.hero-banner {
  position: relative;
  height: calc(100vh - var(--header-height));
  max-height: 680px; }
  .hero-banner .mainbanner-figure img, .hero-banner .mainbanner-figure video, .hero-banner .video-holder img, .hero-banner .video-holder video {
    height: calc(100vh - var(--header-height));
    max-height: 680px;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%; }

.banner-detail {
  max-width: 635px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  margin-left: 155px; }
  .banner-detail .text-wrapper {
    margin-bottom: 40px; }
    .banner-detail .text-wrapper h1 {
      color: #FFF; }
    .banner-detail .text-wrapper .gen-text {
      color: #FFF; }
  .banner-detail .custom-btn {
    height: auto;
    width: auto;
    border: 2px solid #EE2312;
    color: #FFF;
    font: bold 14px/17px "muli", sans-serif;
    padding: 0 24px;
    /*border-radius: 28px;*/
    background-color: #EE2312;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    min-width: 160px;
    max-height: 40px;
    min-height: 40px;
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease; }
    .banner-detail .custom-btn:hover {
      background-color: #AF2025;
      color: #FFF;
      border-color: #AF2025; }
    .banner-detail .custom-btn:focus {
      background-color: #EE2312;
      color: #FFF;
      border-color: #EE2312;
      outline: 4px solid #F9B9BCBF; }
  @media (max-width: 991.98px) {
    .banner-detail {
      max-width: none;
      left: 0;
      text-align: center;
      margin-left: 0; } }

@media (max-width: 991.98px) {
  h1 {
    font: 600 26px/28px "source-serif-pro", serif;
    width: 264px;
    margin-bottom: 32px; } }

.hero-banner {
  max-height: 486px; }
  .hero-banner .mainbanner-figure img, .hero-banner .mainbanner-figure video, .hero-banner .video-holder img, .hero-banner .video-holder video {
    max-height: 486px;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%; }