@keyframes heartbeat
{
  0%
  {
    transform: scale( .75 );
  }
  20%
  {
    transform: scale( 1 );
  }
  40%
  {
    transform: scale( .75 );
  }
  60%
  {
    transform: scale( 1 );
  }
  80%
  {
    transform: scale( .75 );
  }
  100%
  {
    transform: scale( .75 );
  }
}

#search-overlay{
	background-color: rgba(0,0,0,0.7);
	position:fixed;
	top: 0;
	bottom:0;
	left:0;
	right:0;
	z-index:10000;
}

#search{
	display:none;
	position:fixed;
	overflow-y: auto;
	padding:10px 15px;
    width: 100%;
	top:0;
	bottom:0;
	right:0;
	background-color:#252f3f;
	z-index:10010;
}

@media (min-width: 768px){
	#search {
		width:530px!important;
		padding:40px 15px!important;
	}
	#search-header {
		display:none!important;
	}
	#search .col{
		width:33.33333333%!important;
	}
}

#search-header{
	position:relative;
	padding-right:7px;
	padding-left:7px;
}

#search-header .close{
	position:absolute;
	color:#fff;
	text-shadow: none;
	right: 0px;
    top: -23px;
    font-size: 40px;
}

#search-input{
	position:relative;
	text-align:center;
	padding-bottom:25px;
	padding-right:7px;
	padding-left:7px;
}

#search-input input{
	width: 100%;
	height: 50px;
	border-radius: 7px;
	border: 0;
	font-size: 21px;
	padding: 0 45px 0 15px;
	color: #252f3f;
	background-color: #edf4ff;
	outline: 0;
}

#search-input input::placeholder{ /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #252f3f;
  opacity: 0.3; /* Firefox */
}

#search-input input::-ms-input-placeholder { /* Microsoft Edge */
  color: #252f3f;
  opacity: 0.3; /* Firefox */
}

#search-extra{
	position: absolute;
    top: 0px;
    right: 20px;
}

#search-extra span{
    font-weight: 700;
	color: #252f3f;
/*    text-shadow: 0 1px 0 #fff;*/
    filter: alpha(opacity=20);
    opacity: .2;
}

#search-extra span.reset:focus, 
#search-extra span.reset:hover{
    filter: alpha(opacity=50);
    opacity: .5;
}

#search-extra span.reset{
    cursor: pointer;
    font-size: 36px;
	display:none;
} 

#search-extra span.loader{
    font-size: 22px;
	position: absolute;
    right: 0px;
    top: 14px;
	animation: heartbeat 1s infinite;
	display:none;
} 

#search-popular-header{
	padding-right:7px;
	padding-left:7px;
	padding-bottom:15px;
}

#search-popular-games{
	padding-bottom: 15px;	
	padding-right:-7px;
	padding-left:-7px;
}

#search-popular .fa{
	color: #ECC73F;
}

#search-message{
	padding-right:7px;
	padding-left:7px;
	padding-bottom:15px;
}

#search-result{
	padding-right:-7px;
	padding-left:-7px;
}

#search .col{
	width:50%;
	float: left;
	padding-right:7px;
	padding-left:7px;
	padding-bottom:15px;
}