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

 * {
   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 issue on text */
 .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;
   background: transparent;
 }

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

 #ad_id.my-ad.halfpage {
   width: 320px;
   height: 480px;
 }

 #fader {
   width: 320px;
   height: 480px;
   z-index: 1000;
   background: #ffffff;
   pointer-events: none;
 }

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

 #click_tag_div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 118;
}

 #bg {
   background: #FFFFFF;
   width: 320px;
   height: 480px;
   left: 0px;
   top: 0px;
   position: absolute;
 }

 #logo {
   width: 120px;
   height: auto;
   position: absolute;
   top: 15px;
   left: 0;
   right: 0;
   margin: 0 auto;
   z-index: 998;
   pointer-events: none;
 }

 #cta {
   width: fit-content;
   height: auto;
   position: absolute;
   bottom: 80px;
   right: 0;
   left: 0;
   margin: 0 auto;
   overflow: hidden;
   color: #FFF;
   text-decoration: none;
   font-size: 16px;
   z-index: 998;
   padding: 0 20px;
   pointer-events: none;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: "Work Sans", sans-serif;
 }

 /* .wipe {
   width: 300px;
   height: 600px;
   transform-origin: right;
   right: 0px;
 } */

 /* #wiper_container {
   left: 0px;
   height: 600px;
   width: 300px;
   top: 0px;
   z-index: 999;
   pointer-events: none;
 } */

 #main_video_container {
   width: 320px;
   height: 480px;
   position: absolute;
   bottom: 0px;
   left: 0px;
   overflow: hidden;
   z-index: 115;
 }

 #main_video_container_inner {
   width: 304px;
   height: 464px;
   position: absolute;
   top: 0;
   left: 0;
   overflow: hidden;
 }

 #main_video {
   width: 304px;
   height: 464px;
   position: absolute;
   top: 0;
   left: 0;
   background-color: #252526;
   object-fit: cover;
 }

 .plyr {
   width: 304px;
   height: 464px;
 }

 :root {
   --plyr-color-main: gray;
 }

 #pause {
   width: 35px;
   height: 35px;
   position: absolute;
   left: 15px;
   bottom: 15px;
   z-index: 119;
   border: 2px #FFFFFF solid;
   overflow: hidden;
 }

 #play {
   width: 35px;
   height: 35px;
   position: absolute;
   left: 15px;
   bottom: 15px;
   z-index: 119;
   display: none;
   border: 2px #FFFFFF solid;
   overflow: hidden;
 }

 #mute {
   width: 35px;
   height: 35px;
   position: absolute;
   right: 15px;
   bottom: 15px;
   z-index: 119;
   border: 2px #FFFFFF solid;
   overflow: hidden;
 }

 #unmute {
   width: 35px;
   height: 35px;
   position: absolute;
   right: 15px;
   bottom: 15px;
   z-index: 119;
   display: none;
   border: 2px #FFFFFF solid;
   overflow: hidden;
 }

 #restart {
   width: 35px;
   height: 35px;
   position: absolute;
   right: 15px;
   top: 15px;
   z-index: 119;
   border: 2px #FFFFFF solid;
   overflow: hidden;
 }

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

 .shadow {
   -webkit-box-shadow: 0px 0px 7px 0px rgba(20, 20, 20, 0.2);
   -moz-box-shadow: 0px 0px 7px 0px rgba(20, 20, 20, 0.2);
   -ms-box-shadow: 0px 0px 7px 0px rgba(20, 20, 20, 0.2);
   -o-box-shadow: 0px 0px 7px 0px rgba(20, 20, 20, 0.2);
   box-shadow: 0px 0px 7px 0px rgba(20, 20, 20, 0.2);
 }