/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block
}

body {
  line-height: 1
}

ol,
ul {
  list-style: none
}

blockquote,
q {
  quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: none
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

/* Solves outline issues */
* {
  box-sizing: border-box;
  caret-color: transparent;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

*:focus {
  outline: none !important;
  outline-width: 0 !important;
}

*:active {
  outline: none !important;
  outline-width: 0 !important;
}

/* 
-------------------------------- GENERAL BANNER CLASSES ------------------------------------
--------------------------------------------------------------------------------------------
*/

#ad_id.my-ad {
  position: relative;
  overflow: hidden;
  z-index: 0;
  cursor: pointer;
  width: 320px;
  height: 480px;
  cursor: pointer;
  /* Force this clipping box onto its own compositing layer so old Safari
     clips its 3D-transformed descendants (cards + swipe icon) against the
     real composited bounds instead of a stale/software 2D rect. */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

#black_border {
  position: absolute;
  width: 320px;
  height: 480px;
  border: 1px solid #000000;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 99;
}

#fader {
  width: 320px;
  height: 480px;
  background: #FFFFFF;
  z-index: 100;
}

/*
-------------------------------- BRAND STYLES ----------------------------------------------
--------------------------------------------------------------------------------------------
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  caret-color: transparent;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

*:focus {
  outline: none !important;
  outline-width: 0 !important;
}

*:active {
  outline: none !important;
  outline-width: 0 !important;
}

#container {
  width: 320px;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: absolute;
  z-index: 0;
}

#bg {
  background-size: cover;
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#logo {
  position: absolute;
  height: auto;
  pointer-events: none;
  z-index: 3;
}

#card-stack {
  position: absolute;
  width: 290px;
  height: 450px;
  top: 15px;
  left: 15px;
  right: 0;
  z-index: 1;
  -webkit-perspective: 1600px;
  perspective: 1600px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.card {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
  touch-action: none;
  cursor: -webkit-grab;
  cursor: grab;
  transform-origin: center;
  overflow: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

.cta_button {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  margin: 0 auto;
  width: fit-content;
  padding: 12px 24px;
  font-size: 16px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-align: center;
  font-weight: 600;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

.shimmer {
  position: absolute;
  top: 0;
  left: -200%;
  width: 200%;
  height: 100%;
  background: linear-gradient(130deg,
      rgba(255, 255, 255, 0) 20%,
      rgba(255, 255, 255, 0.2) 40%,
      rgba(255, 255, 255, 0.6) 50%,
      rgba(255, 255, 255, 0.2) 60%,
      rgba(255, 255, 255, 0) 80%);
  transform: skewX(-20deg);
  pointer-events: none;
}

#swipe_icon {
  position: absolute;
  bottom: 215px;
  opacity: 1;
  z-index: 80;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 50px;
  height: 50px;
  pointer-events: none;
  /* Establish this element's 3D rendering context and compositing layer
     up front (matching .card), instead of letting GSAP create it only once
     the hint animation starts. Old Safari can fail to promote/rotate a
     layer created mid-animation, which is what makes the icon flash
     invisible or get clipped by #ad_id's overflow:hidden. */
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

/* 
-------------------------------- HELPER STYLES ----------------------------------------------
---------------------------------------------------------------------------------------------
*/

/* OPACITY HELPERS */

.invisible {
  opacity: 0;
}

.display-none {
  display: none;
  opacity: 0;
  visibility: hidden;
}

/*. TYPOGRAPHY HELPERS */

.text-align-center {
  text-align: center;
}

.text-align-left {
  text-align: left;
}

/*. CENTERING HELPERS */

.absolute-center {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

.center-block-element {
  margin: 0 auto;
}

.display-table {
  /*Add this to parent vertical center element*/
  display: table;
}

.vertical-center {
  /*Add this to next child element of the .display-table element*/
  display: table-cell;
  vertical-align: middle;
}

/*. POSITIONING HELPERS */

.pos-a {
  position: absolute;
}

.pos-r {
  position: relative;
}

.top-0 {
  top: 0;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.zero-scale {
  transform: scale(0);
}

/*. POSITIONING HELPERS STACKING ORDER */

/*. .z-i-1 = Z Index 1 */

.z-i-1 {
  z-index: 1;
}

.z-i-2 {
  z-index: 2;
}

.z-i-3 {
  z-index: 3;
}

.z-i-4 {
  z-index: 4;
}

.z-i-5 {
  z-index: 5;
}

.z-i-6 {
  z-index: 6;
}

.z-i-7 {
  z-index: 7;
}

.z-i-8 {
  z-index: 8;
}

.z-i-9 {
  z-index: 9;
}

.z-i-10 {
  z-index: 10;
}

.z-i-11 {
  z-index: 11;
}

.z-i-12 {
  z-index: 12;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

.mask {
  overflow: hidden;
  width: 100%;

}