.ah4banner {
	background-image: linear-gradient(to right, #121F24, #262012);
	background: linear-gradient(to right, #0E262E, #34270E);
   background: url('bg@2x.png') no-repeat center center;
   background-size: cover;
   text-align: center;
   overflow: hidden !important;
   padding: 0px;
   margin: 0;
   width: 100%;
   min-height: 160px;
   color: #fff;
   border-radius: 99px;
   
   animation-duration: 1s;
   
   -webkit-font-smoothing: antialiased;
   
   	-webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
    
    opacity: 1;
    transform: scale(1);
} 

.ah4banner .icon {
	margin: 0 30px 0 75px;
	position: relative;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.ah4banner:hover .icon {
	transform: scale(1.1);
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}


.ah4banner .icon-container {
	float: left;
	margin: 0 30px 0 75px;
	position: relative;
	
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.ah4banner .icon-container img {
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.ah4banner:hover .icon-container .icon-glow {
	transform: scale(1.2) rotate(5deg);
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.ah4banner:hover .icon-container .icon-tile {
	transform: scale(1.2) rotate(-5deg);
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.ah4banner:hover .icon-container .icon-mic {
	transform: scale(1.3) rotate(5deg);
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.ah4banner .title {
	margin: 26px 0 0px 280px;
	float: left;
}

.ah4banner .subtitle {
	float: left;
	margin: 3px 0 10px 280px;
}
  

@media (max-width: 631px) {
	.ah4banner {
		background: url('bg-mobile@2x.png') no-repeat center center;
	   background-size: cover;
	   background-position: center center;
	   padding: 10px 0;
	   margin: 0 2%;
	   width: 96%;
	   border-radius: 32px;
	} 
	
	.ah4banner .title {
		margin: -15px 0 0;
		float: none;
	}
	
	.ah4banner .subtitle {
		float: none;
		margin: 0;
	}
	
	.ah4banner img {
		transform: scale(0.9);
		max-width: 80%;
		margin: 0;
		animation: none;
		float: none;
	}
	
	.ah4banner .icon, .ah4banner:hover .icon {
		float: none;
		display: inline;
		margin: 0;
		transform: scale(0.7);
		margin: -30px 0 0;
	}
}


.ah4banner:hover {
	box-shadow: 4px -4px 10px color(srgb 0.976 0.635 0.161 / 0.66), -3px 3px 10px color(srgb 0.094 0.643 0.82 / 0.66);
	box-shadow: 4px -4px 10px color(display-p3 0.976 0.635 0.161 / 0.66), -3px 3px 10px color(display-p3 0.094 0.643 0.82 / 0.66);
	-webkit-transition: all 100ms ease;
	-moz-transition: all 100ms ease;
	-o-transition: all 100ms ease;
	transition: all 100ms ease;
}

.ah4banner:active {
	box-shadow: -8px 8px 30px color(srgb 0.976 0.635 0.161 / 1), 8px -8px 30px color(srgb 0.094 0.643 0.82 / 1);
	box-shadow: -8px 8px 30px color(display-p3 0.976 0.635 0.161 / 1), 8px -8px 30px color(display-p3 0.094 0.643 0.82 / 1);
	
	-webkit-transition: all 100ms ease;
	-moz-transition: all 100ms ease;
	-o-transition: all 100ms ease;
	transition: all 100ms ease;
}