@font-face {
  font-family: 'avenirReg';
  src: url("../assets/fonts/AvenirNextLTPro-Regular.woff"), url("../assets/fonts/AvenirNextLTPro-Regular.ttf"); }

@font-face {
  font-family: 'avenirMed';
  src: url("../assets/fonts/AvenirNextLTPro-Medium.woff"), url("../assets/fonts/AvenirNextLTPro-Medium.ttf"); }

@font-face {
  font-family: 'avenirHeavy';
  src: url("../assets/fonts/AvenirNextLTPro-Heavy.woff"), url("../assets/fonts/AvenirNextLTPro-Heavy.ttf"); }

html {
  font-size: 100%;
   -webkit-tap-highlight-color:transparent;
   -webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

-webkit-font-smoothing:antialiased;
}

body {
  padding: 0;
  margin: 0;
  background-color: #cc9b02;
  color: #2c2d2f;
  font-family: avenirHeavy, sans-serif;
  font-size: 1rem;
  overflow: hidden; }

a {
  color: #2c2d2f;
  text-decoration: none;
  outline: 0; }

html, body {
  overflow-x: hidden; }

body {
  position: relative; }

section {
  width: 100%;
  position: absolute;
  background-image: url("../assets/img/BackgroundDesktop.jpg");
  background-size: contain;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
/*
@media screen and (max-width: 800px) {
  section {
    background-image: url("../assets/img/BackgroundMobile.jpg");
  }
}
*/
p {
  padding: 0;

  -webkit-margin-before: 0;
   -webkit-margin-after: 0;
   -webkit-margin-start: 0;
     -webkit-margin-end: 0;
                 margin: 0;
}


/* «Tools» -------------------------------------------------------------------*/
.clearfix {
  overflow: auto;
  zoom: 1;
}
.Center {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.VerticalCenterContainer {
  display: table;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.VerticalCenterContainerInner {
  display: table-cell;
  vertical-align: middle;
}

/* Generic and commons -------------------------------------------------------*/
.NavBtn {
  width: 180px;
  height: 111px;
  float: left;
  text-align: center;
  line-height: 111px;
  font-size: 1.5rem;
}
.NavBtnCenter {
  text-align: center;
  display: block;
  padding: 14px;
  display: table-cell;
  vertical-align: middle;
}
.NavBtn > p,
.NavBtnCenter > p {
  line-height: initial;
}

.NavBtnInverted {
  background-color: #dfb331;
  color: #2c2d2f;
}
.BatmanLargeImg {
  position: absolute;
}
.BatLargePosText {
  background: #2C2D2F;
  color: #cc9b02;
  position: absolute;
}
.PageTitle{
  width: 100%;
  text-align: center;
}
.BrickBtn {
  background-image: url("../assets/img/LoadingBrick.png");
  background-repeat: repeat-x;
  color: #dfb331;
  text-align: center;
  cursor: pointer;
  background-size: 100% 100%;
}
.BrickBtnHover {
  background-image: url("../assets/img/LoadingBrickYellow.png");
  background-repeat: repeat-x;
  color: #2B2D2F;
}
.BrickBtnImg {
  position: absolute;
  width: 100%;
  height: 100%;
}

/**/
#ScrollbarContainer {
  position: absolute;
  overflow: hidden;;
}

/* Alert View ----------------------------------------------------------------*/
.AlertView{
  z-index: 50;
  position: absolute;
  background-color: rgba(44, 45, 47, 0.72);
  color: #cc9b02;
  width: 100%;
  height: 100%;
  text-align: center;
  padding-top: 30px;
  display: block;
}
.AlertViewContainer {
  background: #2c2d2f;
}
#AlertViewOkBtn {
  cursor: pointer;
}

/* Loader --------------------------------------------------------------------*/
.BrowserNotSupported {
  background-color: #cc9b02;
  width: 100%;
  height: 100%;
  position: fixed;
  background-image: url("../assets/img/BackgroundDesktop.jpg");
  background-size: contain;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index:1500;
  text-align: center;
}
div#NotSupportedPageTitle {
  font-size: 50px;
}
div#NotSupportedReleaseDate {
  font-size: 25px;
}
.AppPreLoader {
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background-color:#dfb331;
  z-index:2000;
}
.AppLoader {
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background-color:#dfb331;
  z-index:1000;
}
.LoadingPage {
  text-align: center;
}

.ProgressBar {

}
.LoadingBrick {
  fill: #8e8b8a;
  float: left;
  width: 63px;
  margin: 2px;
}
.LoadingBrickActive {
  fill: #2c2d2f;
}

/* Landscape warning ---------------------------------------------------------*/
.LandscapeWarning {
    z-index: 50;
    position: absolute;
    background-color: #cc9b02;
    width: 100%;
    height: 100%;
    text-align: center;
}

/* Floating Logo -------------------------------------------------------------*/
.FloatingLogo {
  z-index: 20;
  position: absolute;
  text-align: center;
}

/* Header --------------------------------------------------------------------*/
.header {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 20;
}
a#officialSiteLink {
  color: #cc9b02;
}
.officialSite {
  position: absolute;
  text-align: center;
  background-image: url("../assets/img/BatShape.png");
}
.officialSite > div.VerticalCenterContainer {
  height: 82%;
}
.BatHeadInsta {
  position: absolute;
}
.centerNavArea{
    width: 100%;
    text-align: center;
}

/* Ambient Music Toggle ------------------------------------------------------*/
#MusicOn,
#MusicOff {
  display: none;
}

/* Home screen ---------------------------------------------------------------*/
.HomePage {
  text-align: center;
}
.HomePageTitle {
  text-align: center;
  font-size: 2.5rem;
}
.HomePageLogo {
  margin-left: auto;
  margin-right: auto;
  display: block;
  cursor: pointer;
}
.HomePageIntro {
  line-height: 75px;
  font-size: 1.5rem;
}

/* Webcam --------------------------------------------------------------------*/
#WebCamMessages {
  text-align: center;
}


/* BatPose Selection ---------------------------------------------------------*/
.BtnBatPoseSquareContainer {
  margin: 0 auto;
  width: 652px;
  position: relative;
}
.BtnBatPoseSquare {
  float: left;
  width: 286px;
  height: 290px;
  margin: 20px;
  cursor: pointer;
  position: relative;
}
.BtnBatPoseSquare > img.ImgBatPoseSquare {
  width: 100%;
  height: 100%;
}
.BatPoseSelectTitle {
  text-align: center;
  font-size: 2.5rem;
}
.BtnBatPoseSquareHighlight {
  position: absolute;
  top: -7%;
  left: -7%;
  width: 114%;
  height: 114%;
}

/* Selfie --------------------------------------------------------------------*/
.SelfieInstructions {
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  /*background-color: rgba(44, 46, 47, 0.78);*/
  z-index:30;
}
.SelfieInstructionsTxt {
  text-align: center;
  font-size: 1.3rem;
  line-height: 0.5rem;
  /*color: #dcb131;*/
}
.TurnToLandscape {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.SelfieCanvasFlash {
  position: absolute;
  z-index: 1000;
  background-color: #FFFFFF;
}
.selfiecanvas {
  width: 620px;
  height: 466px;overflow: hidden; }

.BtnBatpose {
  float: left;
}
.BtnBatpose > img{
    width: 100%;
    height: 100%;
    opacity: 0.6;
}

/* SelfiePhotoInstructions ---------------------------------------------------*/
img.SelfiePhotoInstructions {
  position: absolute;
}
.SelfiePhotoInstructions#PhoneBg {
  z-index: 2;
}
.SelfiePhotoInstructions#BatmanPose {
  z-index: 3;
}
.SelfiePhotoInstructions#WBLogo {
  z-index: 4;
}
.SelfiePhotoInstructions#Phone {
  z-index: 5;
}

/* Selfie Age Gate -----------------------------------------------------------*/
.SelfieLegalGateContainer {
    background-color: #000;
    color: #dfb331;
    text-align: center;
    width: 60%;
}
.SelfieLegalGateContainer > img {
  margin-left: 10%;
  margin-right: 10%;
  width: 10%;
  cursor: pointer;
}
.SelfieLegalGateContainer > div {
  font-family: 'avenirReg';
  width: 90%;
  height: 77%;
  font-size: 1.1rem;
}
a.LegalLink {
  text-decoration: underline;
  color: #cc9b02;
}

/* Selfie Brightness slider --------------------------------------------------*/
.SelfieSliderContainer {
  height: 47px;
  width: 474px;
}
.SelfieSliderContainer > div {
  position: absolute;
}

input[type=range] {
  margin: 0;
  height: 47px;
  padding: 0;
  -webkit-appearance: none;
  width: 74%;
  background: transparent;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 0;
  height: 22px;
  width: 22px;
  border-radius: 11px;
  background: #2c2e2f;
  cursor: pointer;
  margin-top: -7px;
}
input[type=range]::-moz-range-thumb {
  border: 0;
  height: 22px;
  width: 22px;
  border-radius: 11px;
  background: #2c2e2f;
  cursor: pointer;
}
input[type=range]::-ms-thumb {
  border: 0;
  height: 22px;
  width: 22px;
  border-radius: 11px;
  background: #2c2e2f;
  cursor: pointer;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 7px;
  cursor: pointer;
  background: #2c2e2f;
  border-radius: 3px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #2c2e2f;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 7px;
  cursor: pointer;
  background: #2c2e2f;
  border-radius: 3px;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 7px;
  cursor: pointer;
  background: #2c2e2f;
  border-radius: 3px;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2c2e2f;
  border: 0;
  border-radius: 3px;
}
input[type=range]:focus::-ms-fill-lower {
  background: #2c2e2f;
}
input[type=range]::-ms-fill-upper {
  background: #2c2e2f;
  border: 0;
  border-radius: 3px;
}
input[type=range]:focus::-ms-fill-upper {
  background: #2c2e2f;
}
input[type=range]::-ms-tooltip { display: none; }



/* Selfie Result -------------------------------------------------------------*/
.SelfieResultText {
  text-align: center;
}
.SelfieResultBtns {
  margin-left: auto;
  margin-right: auto;
  display: block;

}
.SelfieResultBtns > div {
  float: left;
}
.SelfieResultBtnMoreFun > span {
  line-height: 200%;
}
.SelfieResultBtnFollow > span {
  line-height: 100%;
}
.SelfieResultBtnFollow > span > div#FollowLine01 > span {
  /*font-family: 'avenirMed';*/
  padding: 0;
}


.app {
  background-color: #cc9b02;
/*
  background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('../assets/img/background.png');*/
}

.rightNavArea {
  position: absolute;
  top: 32px;
  right: 20px;
  font-size: 0.7rem;
  font-family: 'avenirMed';
}
.rightNavArea a img,
.rightNavArea img {
  height: 1.25rem;
  width: 1.25rem;
  fill: #2C2D2F;
  margin-left: .4rem;
  margin-right: .4rem;
  padding: 0;
  cursor: pointer;
}

.rightNavArea a img.Active,
.rightNavArea img.Active {
  fill: #FFFFFF;
}





.container {
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}




.legoImages {
  width: 564px;
  margin: 0 auto;
  z-index: 5000;
}



.tools {
  width: 533px;
  margin: 0 auto;
}
.BtnTool {
  float: left;
  margin: 10px;
  position: relative;
  cursor: pointer;
}
.BtnTool > img.ImgBtnTool {
  width: 100%;
  height: 100%;
}
img.BtnToolHighlight {
  position: absolute;
  top: -7%;
  left: -7%;
  width: 114%;
  height: 114%;
}

div.donebtns {
  width: 400px;
  margin: 0 auto;
  margin-top: 30px;
}


div.SelfieBackBtn,
div.SelfieDoneBtn,
div.SelfieResultBtnSave,
div.SelfieResultBtnAnother {
  float: left;
}






.LegoBatmanMovieLogo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
  cursor: pointer;
}

.releaseDate {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin: 20px;
}



/* Footer --------------------------------------------------------------------*/
.footer{
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index:5002 ;/*20;*/
  font-size: 1rem;
  line-height: 17px;
}
.legalFooter {
  font-family: 'avenirReg', sans-serif;
  text-align: center;
  margin: 5px;
  font-size: 0.7rem;
  display:none;
}
.policyFooter {
  font-family: 'avenirReg', sans-serif;
  background-color: #000;
  color: #dfb331;
}
a.LegalLinkFooter {
  color: #dfb331;
  
}
a.LegalLinkFooter.Active {
  color: #FFF;
    -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
            transform: translateZ(0);
}
.footerLinkContainer {
  width: 100%;
  text-align: center;
}
.policyLinkSep {
  position: absolute;
  width: 2px;
  height: 20px;
  background: #cc9b02;
}
.TermsLink {
  text-align: left;
  margin-left: 10px;
}





.hoverEffect span {
    cursor: pointer;
    color: #cc9b02;
    position: relative;
    display: inline-block;
    padding: 0 14px;

    -webkit-transition: -webkit-transform 0.3s;
       -moz-transition: -moz-transform 0.3s;
            transition: transform 0.3s;

    -webkit-transform-origin: 50% 0;
       -moz-transform-origin: 50% 0;
            transform-origin: 50% 0;

    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;

}
.hoverEffect span::before {
    cursor: pointer;
    white-space: pre-wrap;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding-top: 10%;
    height: 85%;
    line-height: 150%;
    content: attr(data-hover);
    color:#cc9b02;
    background: #2c2d2f;

    -webkit-transition: background 0.3s;
       -moz-transition: background 0.3s;
            transition: background 0.3s;

    -webkit-transform: translateZ(0) rotateX(-90deg);
       -moz-transform: translateZ(0) rotateX(-90deg);
            transform: translateZ(0) rotateX(-90deg);

    -webkit-transform-origin: 50% 0;
       -moz-transform-origin: 50% 0;
            transform-origin: 50% 0;
}
.hoverEffect:hover span {
    -webkit-transform: translateZ(0) rotateX(90deg) translateY(-22px);
       -moz-transform: translateZ(0) rotateX(90deg) translateY(-22px);
            transform: translateZ(0) rotateX(90deg) translateY(-22px);
}
.hoverEffect:hover span::before {
    background: #cc9b02;
    color:#2c2d2f;
}
.hoverEffect.ie span {
    background: #2c2d2f;
    color: #cc9b02;
    position: relative;
    display: inline-block;
    padding: 0 14px;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform-style: flat;
    -moz-transform-style: flat;
    transform-style: flat;
}
.hoverEffect.ie:hover span {
    -webkit-transform: none;
    -moz-transform: none;
    transform: none;
}
.hoverEffect.ie:hover span {
    background: #cc9b02;
    color:#2c2d2f;
}





.hoverEffectInverted span {
    color: #2c2d2f;
}
.hoverEffectInverted span::before {
    color: #2c2d2f;
    background: #cc9b02;
}
.hoverEffectInverted:hover span::before {
    background: #2c2d2f;
    color:#cc9b02;
}
.hoverEffectInverted.ie span {
    background: #cc9b02;
    color: #2c2d2f;
}
.hoverEffectInverted.ie:hover span {
    background: #2c2d2f;
    color:#cc9b02;
}


.hoverEffectSingleLine span::before {
    line-height: 250%;
}

.SelfieResultBtnMoreFun span::before {
    line-height: 60%;
    height: 60%;
}

.SelfieResultBtnFollow span::before {
    padding-top: 5%;
    height: 87%;
    font-size: 95%;
    line-height: 88%;
}
.SelfieResultBtnFollow span {
    font-size: 95%;
    line-height: 100%;
}

.SelfieResultBtnAnother span::before {
    padding-top: 17%;
    height: 75%;
    line-height: 100%;
}

.SelfieInputTakePhoto span::before {
    padding-top: 17%;
    height: 75%;
    line-height: 100%;
}
.SelfieInputUploadPhoto span::before {
    padding-top: 17%;
    height: 75%;
    line-height: 100%;
}





.nav{
    display: flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    height: 4.375rem;
    min-height: 50px;
    width: 96%;
    padding-left: 2%;
    padding-right: 2%;
}
.navArea{
    position: relative;
    font-size: 1rem;
}
.leftNavArea{
    width: 20%;
}
.leftNavArea svg{
    fill: #2C2D2F;
    height: 1.8rem;
    margin-right: .7rem;
}
.navAreaContent{
    position: absolute;
    top:50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
}
.navTitleTreatment img{
    max-height: 35px;
    cursor: pointer;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
}
.navItems{
    display: flexbox;
    -ms-flex-pack: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
}
.navItem{
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.icons{
    display: flexbox;
    -ms-flex-pack: end;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}




/* perfect-scrollbar v0.6.10 */
.ps-container {
  -ms-touch-action: none;
  touch-action: none;
  overflow: hidden !important;
  -ms-overflow-style: none; }
  @supports (-ms-overflow-style: none) {
    .ps-container {
      overflow: auto !important; } }
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .ps-container {
      overflow: auto !important; } }
  .ps-container.ps-active-x > #ScrollbarContainer > .ps-scrollbar-x-rail,
  .ps-container.ps-active-y > #ScrollbarContainer > .ps-scrollbar-y-rail {
    background-color: transparent;
    display: block;
     }
  .ps-container.ps-in-scrolling {
    pointer-events: none; }
    .ps-container.ps-in-scrolling.ps-x > #ScrollbarContainer > .ps-scrollbar-x-rail {

      opacity: 1; }
      .ps-container.ps-in-scrolling.ps-x > #ScrollbarContainer >  .ps-scrollbar-x-rail > .ps-scrollbar-x {
         }
    .ps-container.ps-in-scrolling.ps-y > #ScrollbarContainer > .ps-scrollbar-y-rail {

      opacity: 1; }
      .ps-container.ps-in-scrolling.ps-y > #ScrollbarContainer > .ps-scrollbar-y-rail > .ps-scrollbar-y {
         }
  .ps-container > .ps-scrollbar-x-rail {
    display: none;
    position: absolute;
    /* please don't change 'position' */
    opacity: 1;
    bottom: 3px;
    /* there must be 'bottom' for ps-scrollbar-x-rail */
    height: 8px; }
    .ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
      position: absolute;
      /* please don't change 'position' */

      bottom: 0;
      /* there must be 'bottom' for ps-scrollbar-x */
      height: 8px; }
  .ps-container > #ScrollbarContainer > .ps-scrollbar-y-rail {
    opacity: 1;
    position: initial;
    /* please don't change 'position' */
    opacity: 1;

    right: 3px;
    /* there must be 'right' for ps-scrollbar-y-rail */
    width: 1px; }
    .ps-container > #ScrollbarContainer .ps-scrollbar-y-rail > .ps-scrollbar-y {
      position: absolute;
      /* please don't change 'position' */
      background-color: rgba(223, 179, 49, 0.74);
      cursor: pointer;


      /* there must be 'right' for ps-scrollbar-y */
      width: 7px; }
  .ps-container:hover.ps-in-scrolling {
    pointer-events: none; }
    .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {

      opacity: 1; }
      .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
         }
    .ps-container:hover.ps-in-scrolling.ps-y > #ScrollbarContainer >  .ps-scrollbar-y-rail {

      opacity: 1; }
      .ps-container:hover.ps-in-scrolling.ps-y > #ScrollbarContainer >  .ps-scrollbar-y-rail > .ps-scrollbar-y {
         }
  .ps-container:hover > .ps-scrollbar-x-rail,
  .ps-container:hover > #ScrollbarContainer >  .ps-scrollbar-y-rail {
    opacity: 1; }
  .ps-container:hover > .ps-scrollbar-x-rail:hover {

    opacity: 1; }
    .ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
       }
  .ps-container:hover > #ScrollbarContainer >  .ps-scrollbar-y-rail:hover {

    opacity: 1; }
    .ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
      }

.homebtnarrow{
	text-align:center;
}
.cursorstyle
{
	cursor:pointer;
}
.SelfiePhotoInstructions
{
	overflow:hidden;
}
/*.toparrow{
	position:absolute;
	background-image:url(../assets/img/nextarrow.png);
	background-repeat:no-repeat;
	height:100%;
	width:100%;
}
.bottomarrow
{
	position:relative;	
	border:1px #333333 solid;
	background-image:url(../assets/img/prevarrow.png);
	background-repeat:no-repeat;
	height:100%;
	width:100%;
}*/

.creditsFooter
{
display:none;
width:100%;
position:absolute;
background-color:rgba(0,0,0,1);

bottom:0px;

}
.rightCloseArea {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 1rem;
  font-family: 'avenirMed';
  cursor:pointer;
  color:#FFFFFF;
}
.creditsFooter img
{
margin-top:10px;
width:39%;
margin-bottom:10px;
}
#dataid_7
{
	cursor:pointer;
}
/* Portrait */

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
 and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
a.LegalLinkFooter {
 font-size:7px;

  
}
}