/*--------------------- Globals ---------------------*/
:focus {
  outline: none;
}
::-moz-focus-inner {
  border: 0;
}
html,
body { background-color: #fff; margin: 0; padding: 0; }



#ad { color: white; position: absolute; cursor: pointer; }
#ad img,
#ad svg,
#ad div { display: block; overflow: hidden; position: absolute; width: 100%; height: 100%; }


/*
#ad {top: 0; left: 0; bottom: 0; right: 0; margin:auto; overflow:visible;
   transform: perspective(500px); -webkit-transform: perspective(500px); 
}*/

#ad #content {/* overflow:visible;*/}

#ad .lockup { width: 300px; height: 600px;}
#ad .hide { display: none; }



/* ---- particles.js container ---- */

#dust {
  position: absolute;
  width: 100%;
  height:440px;
  overflow: visible;
  transform-origin:50% 25%; -webkit-transform-origin:50% 25%; 
}



#dust .spec {
	background: transparent url('img_dust.png') no-repeat 0 0;
  background-size: 20px 20px;
	width: 20px;
	height: 20px;
  filter: blur(1px);
}

#dust .blur1 { filter: blur(5px); }
#dust .blur2 { filter: blur(3px); }


#ad #content #mc_main_scene { top:0px; left:0; overflow:visible;}

#ad #mc_main_scene #img_sky {width: 500px; height: 425px; top:-175px; left:-105px;}
#ad #mc_main_scene #img_moons {width:165px; height:135px; bottom:370px; left:190px;}



#ad #mc_main_scene #img_scene_fg,
#ad #mc_main_scene #img_scene_mg {width: 350px; height: 600px; bottom:0; left:-25px;}


#ad #content #mc_main_scene #mc_chars #img_scene_fg02 {width: 350px; height: 600px; left:-9px; top:-88px;}

#ad #content #mc_main_scene #mc_chars #img_scene_fg03 {width: 350px; height: 600px; left:-80px; top:-99px;}




#ad .char {width:335px; height:250px; top:0; left:0;
transform-origin:50% 100%; -webkit-transform-origin:50% 100%; }






#ad #content #mc_main_scene #mc_chars {width:335px; height:250px; left:-17px; top:88px; overflow:visible;}

#ad #content #mc_main_scene #mc_chars #img_scene_fg02 {}

#ad #content #mc_main_scene #mc_chars #mc_masterchief {width:150px; height:330px; top:2px; left:74px;
transform:scale(1.05); -webkit-transform:scale(1.05); 
transform-origin:65% 90%; -webkit-transform-origin:65% 90%; 
}

#ad .mstrchf {width:150px; height:330px; overflow:visible;}




#ad #dates {top:0; left:0;}


#ad .halo {background:url('img_halo.png') 0 0 no-repeat; height:60px;
background-size:350px 250px; -webkit-background-size:350px 250px; }




#ad #content #halo {width: 350px; left: -27px; top: 54px; height:60px;
transform:scale(.94); -webkit-transform:scale(.94);}

#ad #content #halo #halo_h {width:96px; left:0; 
background-position:0 -70px; -webkit-background-position:0 -70px;
transform-origin:62px 50%; -webkit-transform-origin:62px 50%; }

#ad #content #halo #halo_a {width:80px; left:96px; 
background-position:-96px -70px; -webkit-background-position:-96px -70px;}

#ad #content #halo #halo_l {width:62px; left:176px; 
background-position:-176px -70px; -webkit-background-position:-176px -70px;}

#ad #content #halo #halo_o {width:112px; left:237px; 
background-position:-237px -70px; -webkit-background-position:-237px -70px;
transform-origin:40px 50%; -webkit-transform-origin:40px 50%; }




#ad #img_orig {top:0; left:0; width:80px; height:30px;}





#ad #content #footer { width:300px; height: 82px; bottom:0; right:0;
transform-origin:50% 0; -webkit-transform-origin:50% 0;}







#ad #loading { width: 100%; height: 100%; }
#ad #loading img { width: 40px; height: 40px; top: 50%; left: 50%; margin: -20px 0 0 -20px; }

#ad #border .line { background: red; }
#ad #border .hor { width: 100%; height: 1px; }
#ad #border .ver { width: 1px; height: 100%; }
#ad #border div:nth-child(2) { bottom: 0; }
#ad #border div:nth-child(4) { right: 0; }

#ad #cta #cta_bg { background: white; width: 100%; height: 100%; }
#ad:hover #cta #cta_bg { background: #00004b; }
#ad:hover #cta #cta_txt path { fill: white; }

/*#ad #dates div { display: flex; flex-direction: column; justify-content: center; align-items: center; }*/


#ad #btn_replay { width: 32px; height: 32px; top: 0px; right: 0px; z-index: 100; justify-content: center; align-items: center; display: flex;opacity:.6;
transform:scale(0);}
#ad #btn_replay svg { width: 22px; height: 22px;}
#ad #btn_replay path { bottom: 7px; left: 7px; }


#ad #btn_replay:hover { animation:spin .5s ease-in-out 1;} 
#ad #btn_replay:hover {opacity:1;}


@keyframes spin { 
    from { 
        transform: rotate(0deg); 
       
    } to { 
        transform: rotate(-360deg); 
       
    }
}