/* @import url('https://fonts.googleapis.com/css?family=Raleway:300,400,600'); */
	html,body{
		margin:0px;
		padding:0px;
		width:100%;
		height:100%;
		-webkit-touch-callout: none; /* iOS Safari */
		-webkit-user-select: none;   /* Chrome/Safari/Opera */
		-khtml-user-select: none;    /* Konqueror */
		-moz-user-select: none;      /* Firefox */
		-ms-user-select: none;       /* IE/Edge */
		user-select: none;           /* non-prefixed version, currently
		                               not supported by any browser */
	}
	body{
		background:#3d3e42;
		font-family: 'LotaGrotesque', sans-serif;
		overflow-y:hidden;
	}
	/*----GAME---*/
	.d-container{
	    position: fixed;
	    width: 100%;
	    height: 100%;
	    top: 0px;
	    bottom: 0px;
	    left: 0px;
	    right: 0px;
	    margin: auto;
	    display: none;
	    cursor: none;
	    box-sizing: border-box;
	    padding: 60px;
	    padding: 6vmin;
	}
	.d-container > .body{
		position:relative;
		width:100%;
		height:100%;
		background:black;
		overflow:hidden;

	}
	/*----CALIBRATION---*/
	.d-calib{
		display:none;
		position: fixed;
		width:100%;
	    z-index: 50;
	    top: 50%;
	    transform: translateY(-50%);
	    box-sizing: border-box;
		 /* -webkit-transition: all .05s ease-in-out;
		  -moz-transition: all .05s ease-in-out;
		  -o-transition: all .05s ease-in-out;
		  transition: all .05s ease-in-out;*/

	}
	.d-calib > .body{
		position: relative;
	    background: #FFBF00;
	    color: white;
	    font-weight: 600;
	    font-size: 20px;
	    font-size: 2vmin;
	    padding: 15px;
	    padding: 1.5vmin;
	    padding-left: 30px;
	    padding-left: 3vmin;
	    padding-right: 30px;
	    padding-right: 3vmin;
	    text-align:center;
	    min-height:25px;
	    min-height:2.5vmin;
	    border:3px solid;
	    border:.3vmin solid;
	    border-color:rgba(255,255,255,.3);
		/*-webkit-transition: background .5s ease-in-out;
		-moz-transition: background .5s ease-in-out;
		-o-transition: background .5s ease-in-out;
		transition: background .5s ease-in-out;*/
	}

	.d-calib-line{
		position: fixed;
		width:100%;
		height:3px;
		height:.3vmin;
		background:orange;
	    top: 50%;
	    transform: translateY(-50%);
	    z-index: 60;
	    display:none;
	}



	/*----MAIN BAR---*/
	.d-mainbar{
		display:none;
		position: fixed;
		width:auto;
	    z-index: 60;
	    top: 50%;
	    transform: translateY(-50%);
	    cursor:none;
	    box-sizing: border-box;
		  /*-webkit-transition: all .05s ease-in-out;
		  -moz-transition: all .05s ease-in-out;
		  -o-transition: all .05s ease-in-out;
		  transition: all .05s ease-in-out;*/

	}
	.d-mainbar > .body{
		position: relative;
	    background: #FFBF00;
	    color: white;
	    font-weight: 600;
	    font-size: 20px;
	    font-size: 2vmin;
	    padding: 15px;
	    padding: 1.5vmin;
	    padding-left: 30px;
	    padding-left: 3vmin;
	    padding-right: 30px;
	    padding-right: 3vmin;
	    text-align:left;
	    min-height:25px;
	    min-height:2.5vmin;
	    border:3px solid;
	    border:.3vmin solid;
	    border-color:rgba(255,255,255,.3);
		/*-webkit-transition: background .5s ease-in-out;
		-moz-transition: background .5s ease-in-out;
		-o-transition: background .5s ease-in-out;
		transition: background .5s ease-in-out;*/
	}
	.d-mainbar.ani_border > .body{
		animation: ani_border .2s infinite;
	}
	.d-mainbar.left{
		left:0px;
	}
	.d-mainbar.right{
		right:0px;
	}


	@keyframes ani_border {
	    0%   {border-color:rgba(255,255,255,.3);}
	    50%  {border-color:rgba(255,255,255,1);}
	    100% {border-color:rgba(255,255,255,.3);}
	}

	/*----VIDEO---*/
	.d-video{
		position:relative;
		width:100%;
		height:100%;
	}
	.d-video video{
		width:100%;
		height:100%;
		top:0px;
		bottom:0px;
		left:0px;
		right:0px;
		margin:auto;
		position:absolute;
	}

	/*----MODAL---*/
	.d-backdrop{
		position:fixed;
		top:0px;
		bottom:0px;
		left:0px;
		right:0px;
		background:rgba(0,0,0,.7);
		z-index:140;
		display:none;
		opacity:0;
	}
	.d-modal{
		display:none;
	    position: fixed;
	    background: #66676f;
	    width: 90%;
	    height: 90%;
	    overflow:hidden;
	    top: 50%;
	    left: 0%;
	    opacity:0;
	    transform: translate(-50%, -50%) scale(0);
	    max-width: 1200px;
	    max-width: 120vmin;
	    max-height: 750px;
	    max-height: 75vmin;
	    border-radius:50px;
	    border-radius:5vmin;
		-webkit-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.3);
		-moz-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.3);
		box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.3);
		z-index:150;

	}
	.d-modal > .body{
		position:relative;
		height:100%;
		padding:20px;
		padding:2vmin;
	}
	.d-modal > .body > .content{
		position:relative;
		background:white;
		height:85%;
	    border-top-left-radius:50px;
	    border-top-left-radius:5vmin;
	    border-top-right-radius:50px;
	    border-top-right-radius:5vmin;
		-webkit-box-shadow: inset 0px 0px 5px 2px rgba(0,0,0,0.3);
		-moz-box-shadow: inset 0px 0px 5px 2px rgba(0,0,0,0.3);
		box-shadow: inset 0px 0px 5px 2px rgba(0,0,0,0.3);
	}
	.d-modal > .body > .content > .box{
		position:relative;
		text-align:center;
    	padding: 40px;
    	padding: 12vmin;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);

	}
	.d-modal > .body > .content > .box > .title{
		font-size:30px;
		font-size:3vmin;
		font-weight:600;
		margin-bottom: 10px;
		margin-bottom: 1vmin;
	}
	.d-modal > .body > .content > .box > .message{
		font-size:25px;
		font-size:2.5vmin;
		font-weight:400;
		white-space: pre-line;
	}

	.d-modal > .body > .footer{
		position:relative;
		text-align:center;
	}
	.d-modal > .body > .footer > button{
	    padding: 10px;
	    padding: 1vmin;
	    margin: 10px;
	    margin: 1vmin;
	    background: #a6dc00;
	    color: #ffffff;
	    font-size: 25px;
	    font-size: 2.5vmin;
	    border: 0px;
	    border-radius: 5px;
	    border-radius: .5vmin;
	    border: 5px solid white;
	    border: .5vmin solid white;
	    cursor:pointer;
	    min-width: 150px;
        min-width: 15vmin;
	}
	.d-modal > .body > .footer > button:hover{
		background:#86ad10;
	}


	.d-user-info{
	position: fixed;
    color: rgba(255,255,255,.6);
    z-index: 100;
    bottom: 15%;
    left: 15%;
    font-size: 30px;
    font-size: 3vmin;
    font-weight: 600;

	}

	.btn_mobile_play{
		color:white;
		position:fixed;
	    top: 50%;
	    left:50%;
	    transform: translate(-50%,-50%);
	    z-index:200;
	    display:none;
	    cursor:pointer;
	}
	.btn_mobile_play > .material-icons{
		font-size:300px;
		font-size:30vmin;
	}


	.d-tune-cont {
    position: fixed;
    bottom: 5px;
    bottom: .5vmin;
    width: 100%;
    text-align: center;
    z-index: 1;
    padding: 5px;
    padding: .5vmin;
    display:none;
    box-sizing:;
	}
	.d-tune-cont > .body > {
		position:relative;
		height:100%;
	}
	.d-tune-cont > .body > .btn-tune{
	    border: 1px solid #B0BEC5;
	    border: .1vmin solid #B0BEC5;
	    opacity: .5;
	    background: transparent;
	    outline: none;
	    font-size: 14px;
	    font-size: 1.4vmin;
	    min-width: 125px;
	    min-width: 12.5vmin;
	    color: #B0BEC5;
	    cursor:pointer;
	}

	.d-tune-cont > .body > .btn-tune.active{
		opacity:1;
	}
	.d-tune-cont > .body > .btn-tune.active[tune='in']{
	    border-color: #4CAF50;
	    color: #ffffff;
	    background: #4CAF50;
	}
	.d-tune-cont > .body > .btn-tune.active[tune='out']{
	    border-color: #F44336;
	    color: #ffffff;
	    background: #F44336;
	}
	.d-tune-cont > .body > .tune-txt{
	    color: #efc857;
    	font-size: 14px;
    	font-size: 1.4vmin;
    	margin-bottom: 5px;
    	margin-bottom: 0.5vmin;
	}


  .d-is-cont{
    position: fixed;
    top: 10%;
    width: 90%;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 10px;
    padding: 1vmin;
    color: white;
    box-sizing: border-box;
    display:none;
	  animation: ani_fadetext 5s infinite;
  }
  .d-is-cont > .body {
    position: relative;
    height: 100%;
  }
  .d-is-cont > .body > .text {
      position: relative;
      font-size: 27px;
      font-size: 2.7vmin;
      margin-bottom: 20px;
      margin-bottom: 2vmin;
  }
  .d-is-cont > .body > .time {
      font-size: 35px;
      font-size: 3.5vmin;
  }


	@keyframes ani_fadetext {
	    0%   {
		    opacity:0;
	    }
	    20%{
		     opacity:1;
	    }
			80%{
		     opacity:1;
	    }
	    100% {
 				opacity:0;
	    }
	}