/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Dec 04 2020 | 21:49:21 */
/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

.meteor, .game-inst{
  display:none;
}

.bring-to-front,.metaslider,.our-services .box,
.our-services .box p,.game-container,
.btn-style,.column-form input[type="submit"],.owl-item.active,
.job-info,.job-banner,.info-block img,.info-block p,
#contact-us .form-flex form p input,
#contact-us .form-flex form p label,
#contact-us .form-flex form p textarea,
.grid-element
{
   z-index:102 !important;
   position: relative !important;
}

.meteor{
  width:120px;
  height:70px;
  /*width:40px;
  height:40px;*/
  position:absolute;
  top:237px;/*-250px;*/
  transition: transform 1.5s linear;
  cursor: url("/wp-content/uploads/2019/11/target.png") 22 22, pointer;
  z-index:100;
  background-repeat: no-repeat;
}

.tail{
  position:absolute;
  top:-830px; /*-250px;*/
  transition: transform 1.5s linear;
  z-index:100;
  background-repeat: no-repeat;
}

.tail-out{
  background:url("/wp-content/uploads/2020/07/meteor-tail.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.tail-hover {
  background:url("/wp-content/uploads/2020/07/meteor-tail-hover.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.meteor:hover{
  background:url("/wp-content/uploads/2020/07/meteor-head-hover.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  /*background-size:"contain" !important;*/
  /*height: 247px!important;
  top: 0px;
  background: url(/wp-content/uploads/2019/11/meteor-hover.png) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;*/
}
}

.move{
   transform:translateY(300vh);
}

.destroy {
  margin-top:-266px;/*-35px;/*460px;*/
  /*left:-145px;*/
  width: 70px !important;;
  height: 70px !important;;
  background: url('/wp-content/uploads/2019/11/Group-84.png') left center !important;
  animation: destroy-meteor 0.3s steps(10);
  
  opacity: 1;
  transition-property: opacity;
  transition-duration: 0.25s;
}

.game-inst
{
    position: fixed;
    background: url(/wp-content/uploads/2019/12/game-stats-bar.png);
    background-repeat: no-repeat;
    height: 46px;
    width: 539px;
    top: 73px;
    z-index: 1000;
    overflow: hidden;
  
  	transition-property: opacity, width;
  	transition-duration: 10s, 0.5s;
  
  	animation-name: hideInstructions;
  	animation-duration: 5.75s;
  	/*animation-fill-mode: forwards;*/
}

@keyframes hideInstructions{
  0%{width: 539px; background: url(/wp-content/uploads/2019/12/game-stats-bar.png); background-repeat: no-repeat;}
  95%{width: 539px; background: url(/wp-content/uploads/2019/12/game-stats-bar.png); background-repeat: no-repeat;}
  100%{width: 368px; background: url(/wp-content/uploads/2019/12/game-stats-expanded.png); background-repeat: no-repeat;}
}

.game-inst .hide-hub
{
  	width:27px;
    height:27px;
	background:url("/wp-content/uploads/2019/11/expand-btn-1.svg") center center;
  	background-repeat:no-repeat;
  	border:none;
  
  	padding-left: 50px;
  	position: absolute;
  	top: 10px;
  	right: 0px;
  transform: rotate(180deg);
  	transition-property: right;
  	transition-duration: 0.5s;
  color: transparent;
}

.game-inst .hide-hub.close{
  transform: rotate(0deg);
}

.game-inst .hide-hub:hover
{
  	width:27px;
    height:27px;
	background:url("/wp-content/uploads/2019/11/expand-btn-hover.svg") center center;
  	background-repeat:no-repeat;
  	border:none;
}

.game-inst .hide-hub:active
{
	background:url("/wp-content/uploads/2019/11/expand-btn-hover-1.svg") center center;
  	background-repeat:no-repeat;
  
}

.instructions-text
{
	font-family: 'Titillium Web', sans-serif !important;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 42px;
    display: flex;
    align-items: center;
    color: #F5F5F5;
    margin-bottom: 0px;
    margin-left: 113px;
	
  	animation-name: hideInstructionsText;
  	animation-duration: 1s;
  	animation-delay: 5s;
  	animation-fill-mode: forwards;
}

.score-text, .level-text
{
	font-family: 'Titillium Web', sans-serif !important;
	font-style: normal;
	font-weight: 600;
	font-size: 16px;
	line-height: 24px;
	display: flex;
	align-items: center;
	text-transform: uppercase;
	color: #D1D1D1;
}

.hub .final-line{
    position: relative;
    right: -7.3px;
    height: 57px;
    top: -9.3px;
  position: relative;
    right: -1.3px;
    height: 59px;
    top: -8.3px;
}

.score-value, .level
{
	font-family: 'Titillium Web', sans-serif !important;
	font-style: normal;
	font-weight: 300;
	font-size: 30px;
	line-height: 46px;
	display: flex;
	align-items: center;
	text-transform: uppercase;
  	color: #FFFFFF;
	text-shadow: 0px 0px 6px #EC1C24, 0px 0px 4px #EC1C24;
    padding-left: 5px; 
  	padding-bottom: 4px;
}

.meteor-score-text
{
  	position:absolute;
  	opacity: 0;
 	/*width: 100px;*/
  	font-family: 'Titillium Web', sans-serif !important;
  	font-style: normal;
  	font-weight: 300;
	font-size: 30px;
  	line-height: 46px;
  	color: #EC1C24;
  
  	transition-property: opacity;
  	transition-duration: 0.25s;
}

.hub
{
	display:flex;
  	opacity: 0;
  	
  	animation-name: showHub;
  	animation-duration: 1s;
  	animation-delay: 6s;
  	animation-fill-mode: forwards;
}

.hub .score-text
{
	margin-left: 114px;
}

.hub .score-value
{
	margin-right: 20px;
    width: 79px;
}

@keyframes hideInstructionsText{
  0% {
    line-height: 42px;
    opacity: 1;   
  }
  99%{
    line-height: 42px;
  }
  100% {
    line-height: 0px;
    opacity: 0;
  }
}

@keyframes showHub{
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes destroy-meteor {
   100% { background-position: -701px }
}

@keyframes fade {
   0%   { opacity: 1; }
   100% { opacity: 0; }
}