body{
	position: relative;
    margin: 0;
    padding: 0;
}

div{
	box-sizing: border-box;
}

.animate {
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    /*
    -webkit-perspective: 1000px;
    perspective: 1000px;
    pointer-events: none;
    */
}

.hide{
	display:none !important;
}

.single-line{
	white-space: nowrap;
}

.container-base{
	position:relative;
	display: table;
	width: 100vw;
	height: 100vh;
	margin: 0 auto;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	background-image:url('./app/FutaraDragonMinecraftFiguraBBAnimationPort_BG.jpg');
	
}

.container-sub-base{
	position:relative;
	display: table-cell;
	width: 100%;
	height:100%;
	vertical-align: middle;
	text-align: center;
	background-position:center;
	background-repeat:no-repeat;
	background-size:contain;
	background-image:url('./app/FutaraDragonMinecraftFiguraBBAnimationPort.png');
}

.container-sub-base.row{
	display: table-row;
}

#container{
	display: inline-block;
}

.bottomattach{
	position:absolute;
	width:100%;
	bottom:0;
}

#document-form{
	display:table;
	padding: 10px;
	margin: 0 auto;
	border: 3px dashed #EEE;
	border-radius:25px 0px;
	background-color:rgba(0,0,0,0.5);
	overflow: hidden;
	opacity: 1;
}

#document-form:hover{
	border: 3px solid #EEE;
}

.close{
	opacity:0;
}

.inline-block{
	display:inline-block;
}

.single-line{
	white-space:nowrap;
}

.table{
	display:table;
}

.table.inline-block{
	display:inline-table;
}

.table-row{
	display:table-row;
	width: 100%;
	height:100%;
	vertical-align: middle;
	text-align: center;
}

.table-cell{
	display:table-cell;
	width: 100%;
	height:100%;
	vertical-align: middle;
	text-align: center;
}

.table-row.collapse{
	height:0;
}

.table-cell.collapse{
	width:0;
}

.v-top{
	vertical-align: top;
}

.v-middle{
	vertical-align: middle;
}

.v-bottom{
	vertical-align: bottom;
}

.a-left{
	text-align: left;
}

.a-center{
	text-align: center;
}

.a-right{
	text-align: right;
}

.document-head{
	color:#FFF;
	font-size:20px;
	pointer-events:none;
}

.document-title{
	color:#FFF;
	font-size:50px;
	pointer-events:none;
}

.document-data{
	color:#FFF;
	font-size:40px;
	pointer-events:none;
}

#document-code-input{
}

#document-code-input:hover{
}

.document-input{
	height:50px;
	text-align: center;
	color:#FFF;
	font-size:30px;
	text-align:center;
	text-align-last:center;
	line-height:50px;
	border:3px solid #FFF;
	border-radius: 25px;
	background-color:rgba(0,0,0,0.5);
	vertical-align:top;
	box-sizing:border-box;
	outline:none;
}

.document-input:hover{
	background-color:rgba(0,0,0,1);
}

.document-input[readonly]{
	color:#AAA;
	border:3px solid #AAA;
}

#document-code-loading{
	color:#FFF;
	font-size:50px;
	line-height:66px;
	pointer-events:none;
}

#document-remote-prev{
}

#document-remote-set{
}

#document-remote-next{
}

.document-button{
	height:50px;
	padding:0 10px;
	text-align: center;
	color:#FFF;
	font-size:30px;
	text-align:center;
	text-align-last:center;
	line-height:40px;
	border:3px solid #FFF;
	border-radius: 25px;
	background-color:rgba(0,0,0,0.5);
	cursor:default;
	vertical-align:top;
	outline:none;
}

.document-button[readonly] {
	color:#AAA;
	border:3px solid #AAA;
}

.document-button.bottommargin{
	margin: auto auto 5px auto;
}

.document-button:hover{
	color:#000;
	background-color:rgba(255,255,255,1);
}

input[type=radio]:checked~.document-button,input[type=checkbox]:checked~.document-button{
	color:#000;
	background-color:rgba(255,255,255,1);
}

.document-button.active{
	color:#000;
	background-color:rgba(255,255,255,1);
}

.document-border{
	padding:5px 5px;
	text-align: center;
	color:#FFF;
	font-size:20px;
	text-align:center;
	text-align-last:center;
	border:3px solid #FFF;
	border-radius: 25px;
	background-color:rgba(0,0,0,0.5);
	cursor:default;
	vertical-align:top;
}

.document-option{
	background-color:#000;
}

.document-group-wrap{
	padding:10px;
	vertical-align:top;
	white-space:nowrap;
	text-align:center;
}

.inline{
	display:inline-block;
}

.wauto{
	width:auto;
}

.w50px{
	width:50px;
}

.w100px{
	width:100px;
}

.w150px{
	width:150px;
}

.w200px{
	width:200px;
}

.w300px{
	width:300px;
}

.w400px{
	width:400px;
}

.w500px{
	width:500px;
}

.w600px{
	width:600px;
}

.w800px{
	width:800px;
}

.hauto{
	height:auto;
}

.h100p {
  height: 100%;
}

.h80p {
  height: 80%;
}

.h60p {
  height: 60%;
}

.h50p {
  height: 50%;
}

.h20p {
  height: 20%;
}

.w100p {
  width: 100%;
}

.w90p {
  width: 90%;
}

.w80p {
  width: 80%;
}

.w75p {
  width: 75%;
}

.w70p {
  width: 70%;
}

.w60p {
  width: 60%;
}

.w50p {
  width: 50%;
}

.w40p {
  width: 40%;
}

.w33p{
	width:33.333333%;
}

.w30p {
  width: 30%;
}

.w25p {
  width: 25%;
}

.w20p {
  width: 20%;
}

.w12p {
  width: 12%;
}

.w10p {
  width: 10%;
}

.w5p {
  width: 5%;
}

.noevent{
	pointer-events:none;
}

.header{
	color:#ff6;
	border-color:#ff6;
}

.document-video{
	width:100vw;
	height:100vh;
}

.document-link{
	display: table;
	width:100vw;
	height:100vh;
}

.document-email-render{
	all:initial;
	display:block;
	background-color: rgba(255,255,255,0.5);
}

.email-render-area{
	--colormain: rgba(0,0,0,1);
	--colorfade: rgba(0,0,0,0);
}

.oversize{
	--colormain: rgba(255,0,0,1);
	--colorfade: rgba(255,0,0,0);
}

.border-animate{
	animation-name: target-outline;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes target-outline {
	0% {
	  outline-style: dashed;
	  outline-color: var(--colormain);
	  outline-width: 5px;
	  outline-offset: -5px;
	}
	50% {
	  outline-style: dashed;
	  outline-color: var(--colorfade);
	  outline-width: 5px;
	  outline-offset: -5px;
	}
	100% {
	  outline-style: dashed;
	  outline-color: var(--colormain);
	  outline-width: 5px;
	  outline-offset: -5px;
	}
}

.bgcolor-animate{
	animation-name: target-bg;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes target-bg {
	0% {
	  background-color: var(--colormain);
	}
	50% {
	  background-color: var(--colorfade);
	}
	100% {
	  background-color: var(--colormain);
	}
}

.document-email-code{
	padding: 10px;
	box-sizing: border-box;
}

.document-email-code-button{
	padding: 5px;
	box-sizing: border-box;
}

.document-email-code-input{
	position:relative;
	display:block;
	box-sizing: border-box;
	overflow:scroll;
	resize:none;
}