:root{
  --hl2-blue:#2563eb;
  --hl2-navy:#081c35;
  --hl2-lime:#9bea2c;
  --hl2-orange:#ff8a00;
}


/* =========================================================
   LOCK PAGE WHILE SHADOW AD IS OPEN
========================================================= */

html.hl2-shadow-active,
html.hl2-shadow-active body{

  overflow:hidden!important;

}


/* =========================================================
   BACKDROP
========================================================= */

.hl2-backdrop{

  position:fixed;

  inset:0;

  z-index:2147483000;


  background:
    rgba(
      5,
      18,
      36,
      .48
    );


  /*
  Keep the blur light.

  Heavy full-screen blur can slow down
  lower-powered devices considerably.
  */

  backdrop-filter:
    blur(2px);

  -webkit-backdrop-filter:
    blur(2px);


  opacity:0;

  pointer-events:none;


  transition:
    opacity .14s ease;

}


.hl2-backdrop.is-open{

  opacity:1;

  pointer-events:auto;

}


/* =========================================================
   SHADOW AD PANEL
========================================================= */

.hl2-panel{

  position:fixed;

  z-index:2147483001;


  top:0;

  right:0;


  width:
    min(
      980px,
      100vw
    );


  height:100vh;

  height:100dvh;


  display:grid;

  grid-template-rows:
    auto
    minmax(0,1fr);


  background:#fff;


  border-left:
    3px solid
    var(--hl2-blue);


  box-shadow:
    -24px 0 62px
    rgba(
      8,
      28,
      53,
      .32
    );


  transform:
    translate3d(
      104%,
      0,
      0
    );


  visibility:hidden;


  overflow:hidden;


  will-change:
    transform;


  transition:

    transform
    .20s
    cubic-bezier(
      .22,
      .8,
      .24,
      1
    ),

    visibility
    0s
    linear
    .20s;

}


.hl2-panel.is-open{

  transform:
    translate3d(
      0,
      0,
      0
    );


  visibility:visible;


  transition-delay:0s;

}


/* =========================================================
   HEADER
========================================================= */

.hl2-header{

  display:flex;

  align-items:center;

  justify-content:
    space-between;


  gap:18px;


  min-height:82px;


  padding:

    13px
    18px
    13px
    22px;


  background:

    linear-gradient(
      105deg,

      var(--hl2-navy),

      #174ca8 62%,

      #159fe3
    );


  color:#fff;

}


/* =========================================================
   CAMPAIGN DETAILS
========================================================= */

.hl2-details{

  display:grid;

  gap:2px;

  min-width:0;

}


.hl2-details span{

  color:
    var(--hl2-lime);


  font-size:.68rem;

  font-weight:900;

  letter-spacing:.14em;

}


.hl2-details strong{

  overflow:hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;


  font-size:1.22rem;

}


.hl2-details small{

  color:#dcecff;

  font-weight:700;

}


/* =========================================================
   HEADER ACTIONS
========================================================= */

.hl2-actions{

  display:flex;

  align-items:center;

  gap:10px;

  flex:0 0 auto;

}


/* =========================================================
   OPEN WEBSITE BUTTON
========================================================= */

.hl2-open{

  display:inline-flex;

  align-items:center;

  justify-content:center;


  min-height:43px;


  padding:
    0
    15px;


  border-radius:10px;


  background:#fff;


  color:
    #174ca8!important;


  font-size:.78rem;

  font-weight:900;


  text-decoration:
    none!important;


  box-shadow:

    0
    5px
    16px
    rgba(
      0,
      0,
      0,
      .14
    );

}


/* =========================================================
   COUNTDOWN / CLOSE
========================================================= */

.hl2-countdown,
.hl2-close{

  width:46px;

  height:46px;

  border-radius:12px;

}


.hl2-countdown{

  display:grid;

  place-items:center;


  background:
    var(--hl2-orange);


  color:#fff;


  font:
    900
    1.18rem/1
    Arial;


  box-shadow:

    0
    0
    0
    3px
    rgba(
      255,
      255,
      255,
      .22
    );

}


.hl2-countdown::after{

  content:'s';

  font-size:.62rem;

  margin-left:1px;

}


.hl2-close{

  display:grid;

  place-items:center;


  padding:0;


  border:0;


  background:#fff;


  color:#d52222;


  font:
    900
    2rem/1
    Arial;


  cursor:pointer;

}


.hl2-close:hover{

  background:#fff0f0;

}


/* =========================================================
   WEBSITE VIEWER
========================================================= */

.hl2-viewer{

  position:relative;


  display:block;


  width:100%;

  height:100%;


  min-width:0;

  min-height:0;


  background:#edf4fc;


  overflow:hidden;

}


/* =========================================================
   IFRAME
========================================================= */

.hl2-frame{

  position:absolute!important;

  inset:0!important;


  display:block!important;


  width:100%!important;

  height:100%!important;


  min-width:100%!important;

  min-height:100%!important;


  max-width:none!important;

  max-height:none!important;


  margin:0!important;

  padding:0!important;


  border:0!important;


  background:#fff;


  opacity:0;


  transition:
    opacity .12s ease;

}


.hl2-viewer.is-loaded
.hl2-frame{

  opacity:1;

}


/* =========================================================
   LOADING SCREEN
========================================================= */

.hl2-loader{

  position:absolute;

  inset:0;


  z-index:1;


  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;


  gap:5px;


  padding:24px;


  background:

    radial-gradient(
      circle
      at 50% 40%,

      rgba(
        37,
        99,
        235,
        .10
      ),

      transparent
      34%
    ),

    linear-gradient(
      135deg,
      #f7fbff,
      #fff
    );


  color:#10213a;


  text-align:center;


  transition:

    opacity .12s ease,

    visibility .12s ease;

}


/* =========================================================
   LOADING ICON
========================================================= */

.hl2-loader-mark{

  display:grid;

  place-items:center;


  width:62px;

  height:62px;


  margin-bottom:6px;


  border-radius:50%;


  background:#e9f3ff;


  font-size:1.8rem;


  animation:

    hl2Pulse
    1s
    ease-in-out
    infinite
    alternate;

}


.hl2-loader strong{

  font-size:.95rem;

}


.hl2-loader small{

  color:#6c7d94;

  font-size:.72rem;

}


/* =========================================================
   HIDE LOADER WHEN WEBSITE LOADS
========================================================= */

.hl2-viewer.is-loaded
.hl2-loader{

  opacity:0;

  visibility:hidden;

  pointer-events:none;

}


.hl2-viewer.is-slow
.hl2-loader-mark{

  animation:none;

}


/* =========================================================
   LOADING ANIMATION
========================================================= */

@keyframes hl2Pulse{

  from{

    transform:
      scale(.96);

    opacity:.7;

  }


  to{

    transform:
      scale(1.04);

    opacity:1;

  }

}


/* =========================================================
   EMBED WARNING
========================================================= */

.hl2-notice{

  position:absolute;

  z-index:2;


  left:50%;

  bottom:14px;


  transform:
    translateX(-50%);


  width:max-content;


  max-width:
    calc(
      100% - 28px
    );


  padding:
    8px
    12px;


  border:
    1px solid
    #c9d9eb;


  border-radius:9px;


  background:

    rgba(
      255,
      255,
      255,
      .94
    );


  color:#40556e;


  font-size:.72rem;

  font-weight:700;


  box-shadow:

    0
    8px
    24px
    rgba(
      15,
      45,
      88,
      .16
    );


  pointer-events:none;

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

  .hl2-panel{

    width:100vw;

  }


  .hl2-header{

    align-items:flex-start;


    padding:
      10px
      11px;

  }


  .hl2-details strong{

    max-width:42vw;

  }


  .hl2-details small{

    display:none;

  }


  .hl2-open{

    min-height:40px;


    padding:
      0
      10px;

  }


  .hl2-countdown,
  .hl2-close{

    width:42px;

    height:42px;

  }


  .hl2-notice{

    bottom:8px;

    font-size:.65rem;

    text-align:center;

  }

}