/* 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;
}

/* 
--------------------- BROWSER ANIMATION FIXES AND RENDERING OPTIMAZATION -------------------------
--------------------------------------------------------------------------------------------------
*/

/* Solves scaling text issues */
.smooth-text{
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizelegibility;
}

/* Add to body*/
.no-pixel-shift{
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1.0, 1.0);
  transform: translateZ(0) scale(1.0, 1.0);
}

/* Solves scaling image issues */
.crisp-image{
  image-rendering: -o-crisp-edges; /* Opera */
  image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

.will-change {
  will-change: transform;
}

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

#ad_id.my-ad{position: relative; overflow: hidden; z-index: 0; cursor: pointer; }
.black-border{position: absolute; width: 970px; height: 250px; border: 1px solid #000000; box-sizing: border-box; pointer-events: none; display: none;}
#ad_id.my-ad.halfpage{width: 970px; height: 250px;}
#fader {width: 970px; height: 250px; z-index: 10000; background: #FFFFFF;}

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

#bg {
  width: 970px;
  height: auto;
}

#logo {
  width: 138px;
  height: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  margin: 0 auto;
}

.card-container {
  width: 970px;
  height: 250px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
  perspective: 1000px;
}

.card-wrapper {
  position: relative;
  width: 290px;
  height: 200px;
}

.card-text {
  font-family: "Work Sans", sans-serif;
  font-weight: 800;
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 42px;
  line-height: 1.2;
  font-weight: bold;
  opacity: 1;
  pointer-events: none;
  z-index: 1;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  transform: translateZ(0px);
}

.card-text-b {
  font-family: "Work Sans", sans-serif;
  font-weight: 800;
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 42px;
  line-height: 1.2;
  font-weight: bold;
  opacity: 1;
  pointer-events: none;
  z-index: 1;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  transform: translateZ(0px);
}

.card {
  width: 290px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  perspective: 1800px;
  transform: translateZ(-20px);
}

.card-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transform-origin: center center;
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card-front img,
.card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-back {
  transform: rotateX(180deg);
}

.gradient-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  pointer-events: none;
}

#promo_text, #promo_text_b {
  font-family: "Work Sans", sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  position: absolute;
  top: 202px;
  right: 665px;
  margin: 0 auto;
  z-index: 1;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  color: #FFFFFF;
  transform: translateZ(1px);
}

/* 
-------------------------------- 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%;

}