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

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

@font-face {
  font-family: 'Canela Text Trial Medium';
  src: url('CanelaText-Medium-Trial.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

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

#ad_id.my-ad{position: relative; overflow: hidden; z-index: 0; background: #fff; caret-color: transparent;}
#black_border{position: absolute; width: 320px; height: 480px; z-index: 30; border: 1px solid #3a3a3a; box-sizing: border-box; pointer-events:none;}
#ad_id.my-ad.mobile{width: 320px;height: 480px;}
#fader {width: 320px; height: 480px; z-index: 100; background: #ffffff; pointer-events: none;}

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

#background {
  width: 320px;
  height: 480px;
  background-size: cover;
  top: 0;
  left: 0;
}

#logo {
  width: 100%;
  max-width: 164px;
  height: auto;
  top: 15px;
}

#video_container {
  width: 262px;
  height: 167px;
  top: 53px;
  z-index: 2;
}

#player {
  width: 262px;
  height: 167px;
}

#muted {
  width: 44px;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  z-index: 2;
}

#unmuted {
  width: 44px;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  z-index: 2;
}

#mute_button {
  width: 44px;
  height: 29px;
  position: absolute;
  right: 32px;
  top: 230px;
  z-index: 2;
  cursor: pointer;
}

.image {
  width: 100%;
  height: 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);
}

#cta {
  width: 130px;
  height: 27px;
  top: 440px;
  color: #a81f2f;
  /* text-transform: uppercase; */
  text-align: center;
  font-family: 'Canela Text Trial Medium';
  font-weight: 600;
  font-size: 14px;
  line-height: 27px;
  z-index: 1;
  -webkit-tap-highlight-color: initial;
  background-color: #ffffff;
  box-sizing: border-box;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  overflow: hidden;
  cursor: pointer!important;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: transform .4s ease-in-out;
  overflow: hidden;
}

#cta_text_a {
  width: 130px;
  height: 27px;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform .4s ease-in-out;
}

#cta_text_b {
  width: 130px;
  height: 27px;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(27px);
  transition: transform .4s ease-in-out;
}

#cta:hover #cta_text_a {
  transform: translateY(-27px)
}

#cta:hover #cta_text_b {
  transform: translateY(0px)
}

#cta:hover {
  transform: scale(1.1);
}

#swipe_icon {
  width: 31px;
  height: 31px;
  z-index: 1;
  top: 330px;
  /* top: 54px; */
  pointer-events: none;
}

#logo_exit {
  top:0;
  width: 100%;
  height: 53px;
  cursor: pointer;
}

#primary_text {
  font-family: 'Canela Text Trial Medium';
  top: 220px;
  width: 156px;
  height: 53px;
  overflow: hidden;
  color: #ffffff;
  padding: 5px;
  box-sizing: border-box;
}

:root {
  --plyr-color-main: #ffb724;
  --plyr-control-icon-size: 12px;
  --plyr-control-spacing: 5px;
  --plyr-range-thumb-height: 8px;
}

/* 
------------------------------------- CAROUSEL STYLES  ---------------------------------------------------
----------------------------------------------------------------------------------------------------------
*/

#carousel {
  top: 273px;
  width: 416px;
  height: 156px;
  box-sizing: border-box;
  left: -48px;
  pointer-events: none;
}

.carousel-cell {
  width: 156px;
  height: 156px;
  margin-right: -12px;
  counter-increment: gallery-cell;
  box-sizing: border-box;
  transform: scale(.76);
  transition: transform .4s ease-in-out;
}

.is-selected {
  transform: scale(1);
}

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