.hp-hero { max-width: 1920px; min-width: 320px; margin: auto; padding: 32px 40px; box-sizing: border-box; }

.hp-hero_main, .hp-hero_side > div { position: relative; }

.hp-hero_main .hp-hero_img { aspect-ratio: 1440/600; background: #DFDFDF; }

.hp-hero_side { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 40px; margin-top: 40px; }

.hp-hero_side .hp-hero_img { aspect-ratio: 696/350; background: #DFDFDF; }

.hp-hero_img { display: block; width: 100%; height: 100%; }

.hp-hero_btn { display: block; width: auto; min-width: 250px; height: 39px; padding: 0 16px; box-sizing: border-box; background: #000000; color: #FFFFFF; font: bold 14px Roboto, Arial, sans-serif; line-height: 39px; letter-spacing: 1.05px; text-transform: uppercase; text-align: center; text-decoration: none; transition: all 0.3s ease; position: absolute; left: 50%; bottom: 35px; transform: translateX(-50%); }

.hp-hero_btn:hover { background: #ED1C24; transition: all 0.3s ease; }

.__wide .hp-hero_btn { width: 250px !important; }

.hp-hero_access { font-family: Roboto, Arial, sans-serif; font-size: 16px; margin: 10px 0 0; }

.__live-text__ { display: none; }


/* Options */

.hp-hero_btn._left-align { left: 35px; transform: translateX(0); }

.hp-hero_btn._right-align { left: auto; right: 35px; transform: translateX(0); }

.hp-hero_btn._white { background: #FFFFFF; border-color: #000000; color: #000000; }

.hp-hero_btn._white:hover { background: #ED1C24; border-color: #ED1C24; color: #FFFFFF; }

.hp-hero_btn._red { background: #ED1C24; border-color: #ED1C24; color: #FFFFFF; }

.hp-hero_btn._red:hover { background: #000000; border-color: #000000; color: #FFFFFF; }

.hp-hero_btn._ghosted { background: rgba(0, 0, 0, 0); border-color: #000000; color: #000000; }

.hp-hero_btn._ghosted:hover { background: #000000; border-color: #000000; color: #FFFFFF; }


/* Controls */

.hp-hero .controls { width: 100%; height: 50px; position: absolute; bottom: 0; }

.hp-hero .controls[data-state=hidden] { display: none; }

.hp-hero .controls[data-state=visible] { display: block; }

.hp-hero .controls button { width: 50px; height: 50px; font-size: 0; background: transparent; background-size: contain; background-repeat: no-repeat; border: 3px solid #000000; border-radius: 50%; outline-color: #FFFFFF; cursor: pointer; position: absolute; right: 40px; bottom: 35px; }

.hp-hero .controls button:hover, .hp-hero .controls button:focus { opacity: 1; }

.hp-hero .controls button[data-state=play] { background-image: url("https://flooranddecor.a.bigcontent.io/v1/static/icon-play-solid-black"); background-size: 65%; background-position: center; filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(50deg) brightness(112%) contrast(105%); }

.hp-hero .controls button[data-state=pause] { background-image: url("https://flooranddecor.a.bigcontent.io/v1/static/icon-pause-black?w=24px"); background-size: 80%; background-position: center; filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(50deg) brightness(112%) contrast(105%); }

.hp-hero .controls._left button { left: 40px; right: auto; }


/* Rotator */

.hp-hero .hp-hero_rotator { display: block; aspect-ratio: 1440/600; }

.hp-hero_side .hp-hero_rotator { display: block; aspect-ratio: 696/350; }

._slide { border: none; opacity: 0 !important; position: absolute; top: 0; left: 0; -webkit-transition: opacity 2s linear; -moz-transition: opacity 2s linear; -o-transition: opacity 2s linear; transition: opacity 2s linear; }

._active { opacity: 1 !important; }

.m-loaded { display: block; }


/* Video */

.hp-hero ._embed-video { width: 100%; display: block; aspect-ratio: auto; background: #DFDFDF; }

.hp-hero #_video-container { position: relative; }


/* Overlay */

.hp-hero_overlay { position: absolute; width: max-content; }

.hp-hero_side-overlay { position: absolute; }

.hp-hero_header, .hp-hero_header > * { font-family: Roboto, Arial, sans-serif; font-size: 48px; letter-spacing: 2px; color: #FFFFFF; text-align: center; margin: 0; text-shadow: 0px 3px 60px rgba(0, 0, 0, 0.5019607843); }

.hp-hero_copy, .hp-hero_copy > * { font: 30px Roboto, Arial, sans-serif; color: #FFFFFF; text-align: center; margin: 15px 0 20px; text-shadow: 0px 3px 60px rgba(0, 0, 0, 0.5019607843); }

.hp-hero_overlay .hp-hero_btn, .hp-hero_side-overlay .hp-hero_btn { position: static; transform: none; margin: 0 auto; }

.hp-hero_overlay._xright, .hp-hero_side-overlay._xright { right: 5%; left: auto; }

.hp-hero_overlay._xleft, .hp-hero_side-overlay._xleft { right: auto; left: 5%; }

.hp-hero_overlay._xcenter,
.hp-hero_side-overlay._xcenter,
.hp-hero_side-overlay._xmidleft,
.hp-hero_side-overlay._xmidright { left: 50%; transform: translateX(-50%); }

.hp-hero_overlay._xmidright { right: 15%; left: auto; }

.hp-hero_overlay._xmidleft { right: auto; left: 15%; }

.hp-hero_overlay._ytop { top: 5%; bottom: auto; }

.hp-hero_side-overlay._ytop { top: 35px; bottom: auto; }

.hp-hero_overlay._ymidtop { top: 20%; bottom: auto; }

.hp-hero_overlay._ybottom { top: auto; bottom: 5%; }

.hp-hero_side-overlay._ybottom { top: auto; bottom: 35px; }

.hp-hero_overlay._ymidbottom { top: auto; bottom: 20%; }

.hp-hero_overlay._ycenter { top: 50%; transform: translateY(-50%); }

.hp-hero_overlay._xcenter._ycenter, .hp-hero_side-overlay._xcenter._ycenter { transform: translate(-50%,-50%); }

._tleft .hp-hero_header,
._tleft .hp-hero_header > *,
._tleft .hp-hero_copy,
._tleft .hp-hero_copy > * { text-align: left; }

._tright .hp-hero_header,
._tright .hp-hero_header > *,
._tright .hp-hero_copy,
._tright .hp-hero_copy > * { text-align: right; }

._tleft .hp-hero_btn { margin-left: 0; }

._tright .hp-hero_btn { margin-right: 0; }

@media (min-width: 1440px) {
  .hp-hero_main { width: 100%; height: auto; }

  .hp-hero_main .hp-hero_img { max-height: 600px; object-fit: cover; object-position: bottom; }

  .hp-hero .hp-hero_rotator { height: 600px; }

  .hp-hero_side .hp-hero_rotator { height: 350px; }
}

@media (min-width: 1200px) and (max-width: 1439px) {
  .hp-hero_header, .hp-hero_header > * { font-size: 48px; }

  .hp-hero_btn { min-width: 200px; }

  .hp-hero .hp-hero_rotator,
  .hp-hero_side .hp-hero_rotator { max-height: 600px; }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .hp-hero_header, .hp-hero_header > * { font-size: 42px; }

  .hp-hero_copy, .hp-hero_copy > * { font-size: 20px; }

  .hp-hero_btn { width: 200px; min-width: 200px; }

  .hp-hero_side-overlay._ybottom { bottom: 15px; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .hp-hero_header, .hp-hero_header > * { font-size: 36px; }

  .hp-hero_copy, .hp-hero_copy > * { font-size: 20px; }

  .hp-hero_btn { min-width: 153px; width: max-content; height: 30px; line-height: 30px; font-size: 12px; bottom: 25px; }

  .hp-hero_btn._left-align { left: 25px; }

  .hp-hero_btn._right-align { right: 25px; }

  .hp-hero_side-overlay._ybottom { bottom: 15px; }

  .hp-hero .controls button { width: 40px; height: 40px; right: 30px; bottom: 25px; }

  .hp-hero .controls._left button { left: 30px; right: auto; }
}

@media (min-width: 768px) {
  .hp-hero ._hide-desktop { display: none; }
}

@media (max-width: 767px) {
  .hp-hero { padding: 12px 20px; }

  .hp-hero ._embed-video { aspect-ratio: auto; }

  .hp-hero_side { grid-template-columns: 1fr; }

  .hp-hero_main .hp-hero_img, .hp-hero_side .hp-hero_img { aspect-ratio: 320/380; }

  .hp-hero_header, .hp-hero_header > * { font-size: 48px; text-align: center; }

  .hp-hero_copy, .hp-hero_copy > * { font-size: 20px; text-align: center; }

  .hp-hero_btn { min-width: 200px; width: max-content; }

  .hp-hero_btn._left-align, .hp-hero_btn._right-align { left: 50%; right: auto; transform: translateX(-50%); }

  .hp-hero ._hide-mobile { display: none; }

  .hp-hero .hp-hero_rotator,
  .hp-hero_side .hp-hero_rotator { display: block; aspect-ratio: 320/380; }

  .hp-hero .controls button { width: 40px; height: 40px; right: 30px; bottom: 25px; }

  .hp-hero .controls._left button { left: 30px; right: auto; }

  .hp-hero_video .hp-hero_overlay { width: calc(100% - 20px); padding: 20px 0 15px; margin: 0 auto; }
  
  .hp-hero_video .hp-hero_overlay._detached { display: block; position: static; transform: none !important; }

  .hp-hero_overlay._ymidtop { top: 35px; bottom: auto; }

  .hp-hero_overlay._ymidbottom { top: auto; bottom: 35px; }

  .hp-hero_video .hp-hero_overlay._tleft { padding-left: 20px; }

  .hp-hero_video .hp-hero_overlay._tright { padding-right: 20px; }
  
  .hp-hero_video .hp-hero_header, .hp-hero_video .hp-hero_header > * { font-size: 30px; }

  .hp-hero_video ._detached .hp-hero_header, .hp-hero_video ._detached .hp-hero_header > * { color: #000000; text-shadow: none; }

  .hp-hero_video ._detached .hp-hero_copy, .hp-hero_video ._detached .hp-hero_copy > * { color: #000000; text-shadow: none; }
}

@media (max-width: 540px) {
  .hp-hero_video .hp-hero_header, .hp-hero_video .hp-hero_header > * { font-size: 18px; }
  
  .hp-hero_video ._detached .hp-hero_header, .hp-hero_video ._detached .hp-hero_header > * { font-size: 24px; }

  .hp-hero_video .hp-hero_copy, .hp-hero_video .hp-hero_copy > * { font-size: 14px; }
}