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

.container {
  position: absolute;
  width: 970px;
  height: 250px;
  overflow: hidden;
}

.slider-wrapper {
  position: absolute;
  top: 25px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 776px;
  height: 200px;
  perspective: 700px;
}

.cube {
  width: 776px;
  height: 200px;
  position: absolute;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
  /* Move the cube back to compensate for translateZ so the cube would not appear bigger */
}

.face {
  position: absolute;
  width: 776px;
  height: 200px;
  background: #fff;
  backface-visibility: hidden;
  /* overflow: hidden; */
}

.face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.front {
  transform: translateZ(100px);
}

.back {
  transform: rotateY(180deg) rotateX(360deg) rotate(180deg) translateZ(100px);
}

.bottom {
  transform: rotateX(-90deg) translateZ(100px);
}

.top {
  transform: rotateX(90deg) translateZ(100px);
}

#nav_container {
  width: 97px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  flex-direction: column;
}

#prev {
  width: 30px;
  height: 30px;
  margin-bottom: 6px;
  cursor: pointer;
  transform: rotate(90deg);
}

#next {
  width: 30px;
  height: 30px;
  cursor: pointer;
  transform: rotate(90deg);
}

.plyr {
  /* width: 356px!important;
  height: 200px !important; */
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  background: black;
}

.plyr__volume {
  max-width: 100%!important;
  min-width: 0!important;
  width: auto!important;
}

#player {
  object-fit: cover;
}

#hotspot {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  z-index: 1 !important;
}

#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;
  left: 162px;
  top: 162px;
  z-index: 2;
  cursor: pointer;
}


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

}