* {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently */
                               
}
.evidon-consent-button{
    display: none;
}
html,body{
    margin : 0px;
    padding : 0px;
    overflow : hidden;
    position: absolute;
    height: 100vh;
    width: 100%;
    background-color: black;
}
  
h1{
    font-size: 4vh;
    letter-spacing: 1px;
}
h2{
    font-size: 3.5vh;
    letter-spacing: 1px;
}
h3{
    font-size: 3vh;
    letter-spacing: 1px;
}

a, a:focus, a:active, a:visited {
    color: inherit;
    /* color: rgba( 255, 255, 255, 0.6 ); */
    text-decoration: none;
}

.red {
    color: #bb1b1f;
}
.btnBig{
    width: 60vw;
    height: 8vh;
    background-color: #a38d69;
    border-radius: 10px;
    text-align: center;
    margin: 0 auto;
    font-size: 3.5vh;
    line-height: 8vh;
    color: black!important;
    
}

/*****************************************************************************
/* TRAILER */
/*****************************************************************************/

/*=============================================================*/
.standardTrailer{
	background-color: black;
	z-index: 999999999!important;
}
.standardTrailer video{
	width: 100%;
}


.close {
	position : absolute;
	right : 20px;
	top : 20px;
	width : 32px;
	height : 32px;
	opacity : 1;
	cursor : pointer;  
	z-index : 3; 

}

.close:hover { transform : scale(1.1); }
.close { transition : all .2s ease-in-out; }
.close:before, .close:after {

	position : absolute;
	left : 15px;
	content : ' ';
	height : 32px;
	width : 2px;
	background-color : #ffffff;

}

.close:before {

	transform : rotate( 45deg );

}
.close:after {
  transform: rotate( -45deg );
}

#trailer_screen{
	z-index: 999;
}

/*****************************************************************************
/* LOADER */
/*****************************************************************************/
.loaderScreen{

    color:#9f855b;
    background-image: url("../assets/ui/loader/loadingScreenBG.jpg");
    background-size: cover;

}
.footsteps{
    display: flex;
    flex-direction: row;
    margin-top: 50px;

}

.step{
    width: 40px;
    height: 16.63px;
    display:block;
    animation: 3050ms pawAnimation ease-in-out infinite;
}
.stepFlip{
    -webkit-transform: scaleY(-1);
    transform:translateY(-25px) scaleY(-1);
    
}
.step:nth-child(1) {
    animation-delay: 0s;
}
  .step:nth-child(2) {
    animation-delay: 0.5s;
  }
  .step:nth-child(3) {
    animation-delay:1s;
  }
  .step:nth-child(4) {
    animation-delay: 1.5s;
  }
.step:nth-child(5) {
  animation-delay: 2s;
}
.step:nth-child(6) {
    animation-delay: 2.5s;
  }
  .step:nth-child(7) {
    animation-delay: 3s;
  }

@keyframes pawAnimation {
    0% {
      opacity: 1;
    }
    70% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  .loader_title{
      display: flex;
      flex-direction: row;
      align-items: center;
  }
.loader_line{
    width:20vw;
    background-color:#393224;
    height: 1px;

}
.loader_title_box{
    border-radius: 4px;
    border: 1px solid #393224;
    padding:10px;
    width: 60vw;
    color:#9f855b;
    text-align: center;
    letter-spacing: 1px;
}

.tutorial .loader_line{
    width : 10vw;
}



.loader_progress{
    
    color:#9f855b;
}
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/* .trailer - Pop Up trailer */
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.trailer {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background: #000;
    z-index: 99999999999;

}


.close {
	position : absolute;
	right : 20px;
	top : 20px;
	width : 32px;
	height : 32px;
	opacity : 1;
	cursor : pointer;  
	z-index : 3; 

}

.close:hover { transform : scale(1.1); }
.close { transition : all .2s ease-in-out; }
.close:before, .close:after {

	position : absolute;
	left : 15px;
	content : ' ';
	height : 32px;
	width : 2px;
	background-color : #ffffff;

}

.close:before {

	transform : rotate( 45deg );

}
.close:after {
  transform: rotate( -45deg );
}


.trailer__video {
	width: 100vmax;
	max-width: calc(100vw - 30px - 30px);
	/* vpW - padLeft - padRight */
	max-height: calc(100vh - 100px - 100px);
	/* vpH - padTop - padBott */
}



/*****************************************************************************
/* DESKTOP BLOCK SCREEN */
/*****************************************************************************/


.desktopBlock{
	color: white;
    z-index : 99999999999!important ;
    background-color: black;
    background-size: contain;
    background-repeat: repeat;
    position: fixed;
    height: 100%;
    width: 100%;
    text-align: center;
    color: #a4895d;
    letter-spacing: 1px;
}
.desktopBlock img{
    max-width: 60vw;
    margin-bottom: 20px;
}

.desktopBlockElements{

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);/*correction*/

}


/*****************************************************************************
/* ORIENTATION SCREEN */
/*****************************************************************************/


.orientationLock {

	 display : block; 
	position : fixed;
	width : 100%;
	height : 100%;
	z-index : 1000;
	top : 0px;
	overflow : hidden;

	background-color : rgba(0, 0, 0, 1);
	background-size:contain;
	color : black;
	text-align : center;
	margin : 0 auto;

}


.orientationLock div {

	/* height : 50vh; */
	text-align : center;
	margin : 0 auto;
	position : absolute;
	top : 40%;
	left : 50%;
	/* transform : translate(-50%, -50%); */

}
.orientationLock svg {

	fill : white;

}

.orientationLockCopy{
	font-weight: bold;
    padding-top: 45vh;
    height: 100%;
    width: 80vh;
    color: #a4895d;
    letter-spacing: 1px;
    transform: translate(-50%, -50%);
}

.orientationSprite{
	
	position : relative;
	z-index : 10;
	bottom : 0px;
	width : 128px;
	height : 85.33px;
	background-image : url( "../assets/ui/rotate/rotateScreenIcon.png" );
	display : block;
	animation : playXorientation .5s steps( 2 ) infinite,
    playYorientation 1s steps( 12 ) infinite;
    transform: translate(-50%, -50%) scale(1.4);


}

@keyframes playXorientation {

	from { background-position-x : 0px; }
	to { background-position-x : -256px; }

}

@keyframes playYorientation {

	from { background-position-y : 0px; }
	to { background-position-y : -1024px; }

}
/*   
@media screen and ( min-width : 320px ) and ( max-width :  1024px ) and ( orientation : landscape ) {
	
	.orientationLock {
	
		display : block !important;
	
	}
	
	.screens {
	
		display : none !important;
	
	}

}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
	.orientationLock {
	
		display : none !important;
	
	}
	
  } */



/*****************************************************************************
/* LANDING */
/*****************************************************************************/
.landingScreen{
    background-size : cover ;
}
.landing_top{
    position : absolute;
    top : 5vh;
    font-size: 8vw;
    color:white;
    margin : 0 auto;
    text-align : center;
}

.landing_tt{
    width : 70vw;
}
.landing_centerItems{
    position: relative;
    height: 8vh;
    width: 100%;

}
.landing_top_body{

    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width:60vw;
    margin: 0 auto;
    margin-top: 1vh;
}
.landing_top_headphones{

    font-size: 3.5vw;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
}
.landing_top_headphones img{
    
    width :15px;
    height : 15px;
    padding : 5px;

}
.dotted_line{
    width:60%;
}


.landing_bottom{
    
    position : absolute;
    bottom : 15vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.landing_bottom h3{
    margin:0px;
    text-align: center;
    font-size: 3.5vh;
}

.landing_button{
    margin-top: 20px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    width:100%;
    position: relative;
    
    
}
.landing_buttonBox{
    width: 60vw;
    border: 1px solid #393224;
    border-radius: 4px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;

}
.landing_buttonBox h2{
    
    position: absolute;
    margin: 0 auto;
    color: black;
    font-size: 3.8vh;
    letter-spacing: 1px;
}

.landing_buttonBox img{
    width: 100%;
    max-height: 36px;
}


.heartbeat{-webkit-animation:heartbeat 1.5s ease-in-out infinite both;animation:heartbeat 1.5s ease-in-out infinite both}

 @-webkit-keyframes heartbeat{from{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}10%{-webkit-transform:scale(.91);transform:scale(.91);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}17%{-webkit-transform:scale(.98);transform:scale(.98);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}33%{-webkit-transform:scale(.87);transform:scale(.87);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}45%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes heartbeat{from{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}10%{-webkit-transform:scale(.91);transform:scale(.91);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}17%{-webkit-transform:scale(.98);transform:scale(.98);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}33%{-webkit-transform:scale(.87);transform:scale(.87);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}45%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}



/********************************************************************/
#stopWatchHolder{
    text-align: center;
    margin: 0 auto;
    margin-top: 3vh;
    margin-bottom:10px;
}

.flexScreen{

    position : fixed;
    width : 100vw;
    height :100%;
    display : flex;
    justify-content : center;
    justify-items : center;
    align-items : center;
    z-index: 10;
    background-color: black;
    color : white;
    flex-direction: column
    
}
.btn{
    color : white;
    cursor: pointer;
}
.hidden{

    display : none!important;

}
.gameHeader{
    
    width: 100%;
    height: 10vh;
    position: absolute;
    top: 0px;
    z-index: 90;
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 110px;
}

.lives{

    display: flex;
    flex-direction: row;
    right: 0px;
    justify-content: center;
    align-items: center;
    margin-top: 0px;
}

.live{

    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    
}
.fillRed{
    fill:#c81b1e!important;
    
}
.empty{

    fill: none!important;
}
.game_tt{
    position: absolute;
    z-index: 10;
    bottom:0px;
    width:30vw;
    left: 0px;
    padding: 20px;
}


.audio{
    position: fixed;
    right: 0px;
    width: 30px;
    padding: 10px;
    top:0px;
    height: 30px;
    z-index: 999999;
}
.audio img{
    width : 100%
}
.audioOn {
    position: relative;
}
.audioOn img{
    position: absolute;
    top:0px;
}

.audioOn img:nth-child(2) {
    animation-delay: 0.2s;
}

.endScreen{

    background-size: contain;
    background-position: bottom;
    background-repeat: repeat-x;

}
.endScreen_tt{
    position: absolute;
    width:66vw;
    top : 3vh;
}

.endScreenContent{

    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height : 40vh;

}
.endScreen_line{
    width:10vw;
    background-color:#393224;
    height: 1px;

}
.endScreen_box{

    border-radius: 4px;
    border: 1px solid #393224;
    padding:10px;
    width: 80vw;
    color:#9f855b;
    text-align: center;
}
.endScreen_box h3{
    margin:10px auto;
}
.endScreenTimeSurvived{
    
    width: 60%;
    border: 1px solid #393224;
    border-radius: 4px;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin : 0 auto;


}
.endScreenTimeSurvived h1{
    margin: 0 auto;
}
.endScreen_characters{
    width: 70vw;
    bottom: 0vh;
    position: absolute;
}
.endScreenShare{
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin : 0 auto;
    flex-direction: row;
    padding: 2vh;
}
.endScreenShare svg{
   height: 4vh;
   width: auto;
   cursor: pointer;
   overflow: visible;
}
.endScreen_buttonBox{
    border: 0px;
    margin : 0 auto;
    cursor: pointer;
}

/******************************************************************/
/* GAME */
/******************************************************************/


.levelHolder{
    margin-top: 20px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    width: 100%;
    position: absolute;
}
.levelHolder .landing_buttonBox{
    flex-direction: column;
}

.tutorial {
    position: absolute;
    top:50px;
}
.tutorial span{
    text-align: center;
}
.tutorial h3,.tutorial h1{
    margin:0 auto;
    letter-spacing: 1px;
    text-align: center!important;
}

.tutorial h3{
    font-size: 2;
}
.tutorial .landing_buttonBox{

    flex-direction: column;
    width : 80vw;
}



/*////////////////////////////////////////////////////////////////////
// FOOTER.                                    //
///////////////////////////////////////////////////////////////////*/

@media (min-width: 200px) and (orientation: landscape) {
    footer{
        display: none;
    }
    /* Your style goes here */
    }

footer {
    /*  pointer-events: none;*/
      width: 100%;
      position: fixed;
      bottom: 1vh;
      opacity: 1;
      z-index: 999999999;
    }
    
    .footer_wrap {
      height: 5vh;
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: 100%;
    }
    
    .copy-links{
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
    }
    
    .copy-link-item{
      padding:2px 6px;
      color:white;
      text-align: center;
    }
    
    .footer-logos {
      background-image: url(../assets/ui/footer_legal.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      height: auto;
      width: 30%;
    }
    
    .footer_text {
      /*font-size: 1.5vh;*/
      margin: 2vh;
      color: #000;
      padding-top: 1vh;
    }