@charset "utf-8";

/*
Theme Name: CSS3 DarkForce
Author: ONZE - Issei Hara
Author URI: http://on-ze.com
Version: 1.0
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/******************/

/*
html,
body {margin:0; width:100vw; height:100vh;}

body {
overflow:hidden;
background:url("space.jpg") center center;
background-size: cover;
	-webkit-perspective:300;
	-moz-perspective:300;
	-ms-perspective:300;
	-o-perspective:300;
	perspective:300;
	
}
*/

#d1,#d1:before,#d1:after,
#d2,#d2:before,#d2:after{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display:block;
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}

/*#d2,#d2:before,#d2:after{
display: none;
}*/

#d1,
#d2{
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-ms-transform-style:preserve-3d;
	-o-transform-style:preserve-3d;
	transform-style:preserve-3d;
}

#d1:before,#d1:after,
#d2:before,#d2:after{
	background-image:url("/eximages/2021/assets_sub/star.png");
	content:"";
	-webkit-animation:36s warp linear infinite;
	-moz-animation:36s warp linear infinite;
	-ms-animation:36s warp linear infinite;
	-o-animation:36s warp linear infinite;
	animation:36s warp linear infinite;
	visibility:visible;
	background-position:50% 50%
}

#d1:before{
	background-position:-190px 80px
}
#d1:after{
	background-position:90px -180px;
	-webkit-animation-delay:-9s;
	-moz-animation-delay:-9s;
	-ms-animation-delay:-9s;
	-o-animation-delay:-9s;
	animation-delay:-9s;
}
#d2:before{
	background-position:210px 180px;
	-webkit-animation-delay:-18s;
	-moz-animation-delay:-18s;
	-ms-animation-delay:-18s;
	-o-animation-delay:-18s;
	animation-delay:-18s;
}
#d2:after{
	background-position:-120px 40px;
	-webkit-animation-delay:-27s;
	-moz-animation-delay:-27s;
	-ms-animation-delay:-27s;
	-o-animation-delay:-27s;
	animation-delay:-27s;
}
/*
#d3:before{
	background-position:130px 140px;
	-webkit-animation-delay:-18s;
	-moz-animation-delay:-18s;
	-ms-animation-delay:-18s;
	-o-animation-delay:-18s;
	animation-delay:-18s;
}
#d3:after{
	background-position:-150px -90px;
	-webkit-animation-delay:-15s;
	-moz-animation-delay:-15s;
	-ms-animation-delay:-15s;
	-o-animation-delay:-15s;
	animation-delay:-15s;
}*/

/******************/

@-webkit-keyframes warp {
	0% {opacity:0; -webkit-transform:rotate(-60deg) translateZ(-300px)}
	50% {opacity:1; -webkit-transform:rotate(0deg) translateZ(0px)}
	100% {opacity:0; -webkit-transform:rotate(60deg) translateZ(300px)}
}
@-moz-keyframes warp {
	0% {opacity:0; -moz-transform:rotate(-60deg) translateZ(-300px)}
	50% {opacity:1; -moztransform:rotate(0deg) translateZ(0px)}
	100% {opacity:0; -moztransform:rotate(60deg) translateZ(300px)}
}
@-ms-keyframes warp {
	0% {opacity:0; -ms-transform:rotate(-60deg) translateZ(-300px)}
	50% {opacity:1; -ms-transform:rotate(0deg) translateZ(0px)}
	100% {opacity:0; -ms-transform:rotate(60deg) translateZ(300px)}
}
@-o-keyframes warp {
	0% {opacity:0; -o-transform:rotate(-60deg) translateZ(-300px)}
	50% {opacity:1; -o-transform:rotate(0deg) translateZ(0px)}
	100% {opacity:0; -o-transform:rotate(60deg) translateZ(300px)}
}
@keyframes warp{
	0% {opacity:0; transform:rotate(-60deg) translateZ(-300px);}
	50% {opacity:1; transform:rotate(0deg) translateZ(0px)}
	100% {opacity:0; transform:rotate(60deg) translateZ(300px)}
}

/******************/
/******************/

/*PC*/
@media screen and (min-width:835px){


/*#d2,#d2:before,#d2:after{
display: block;
}*/

#d1:before,#d1:after,
#d2:before,#d2:after{
	-webkit-animation:40s warp linear infinite;
	-moz-animation:40s warp linear infinite;
	-ms-animation:40s warp linear infinite;
	-o-animation:40s warp linear infinite;
	animation:40s warp linear infinite;
}
#d1:after{
	-webkit-animation-delay:-10s;
	-moz-animation-delay:-10s;
	-ms-animation-delay:-10s;
	-o-animation-delay:-10s;
	animation-delay:-10s;
}
#d2:before{
	-webkit-animation-delay:-20s;
	-moz-animation-delay:-20s;
	-ms-animation-delay:-20s;
	-o-animation-delay:-20s;
	animation-delay:-20s;
}
#d2:after{
	-webkit-animation-delay:-30s;
	-moz-animation-delay:-30s;
	-ms-animation-delay:-30s;
	-o-animation-delay:-30s;
	animation-delay:-30s;
}
/*
#d3:before{
	-webkit-animation-delay:-40s;
	-moz-animation-delay:-40s;
	-ms-animation-delay:-40s;
	-o-animation-delay:-40s;
	animation-delay:-40s;
}
#d3:after{
	-webkit-animation-delay:-50s;
	-moz-animation-delay:-50s;
	-ms-animation-delay:-50s;
	-o-animation-delay:-50s;
	animation-delay:-50s;
}
*/


}