/* HOME LAYOUT */	
.home-headline{
	overflow:hidden;
	background: #D2E3FC;
  	position: relative;
  	animation-name: web-background;
  	animation-duration: 30s;
  	animation-iteration-count: infinite;	
	}
	.home-headline-inner{overflow:hidden; width:1200px; margin:7.5% auto}
		.home-headline-text{overflow:hidden; float:left;width:680px;padding:120px 0 0 0}
		.home-headline-text h1 {font-size:72px; letter-spacing:-1px; line-height:1.2em;color: #1A73E8;}
		.home-headline-text p {font-size:18px;padding:10px 0 40px 0; color:#000}
			.home-title {position: relative;animation-name: web-title; animation-duration: 30s; animation-iteration-count: infinite;}	
			.home-tagline {position: relative;animation: running-text 20s linear infinite;}		
			.home-tagline-mobile {display:none}
		.home-headline-image {
			float:right;
			width:500px;
			height:500px;
			background:url(https://hrdspot.com/wp-content/uploads/banner-1.webp) no-repeat center center;
			background-color:#fff;
			border-radius:120px;
  			position: relative;
  			animation-name: web-image;
  			animation-duration: 30s;
  			animation-iteration-count: infinite;	
			}
		.home-search{width:500px;}
		/* Key frame */
		@keyframes web-background {
			0%   {background-color: #D2E3FC}
			25%  {background-color: #CEEAD6}
			50%  {background-color: #FCE8E6}
			75%  {background-color: #FEF7E0}
			}
		@keyframes web-title {
			0%   {color: #1A73E8}
			25%  {color: #1E8E3E}
			50%  {color: #C5221F}
			75%  {color: #F29900}
			}	
		@keyframes web-image {
			0%   { background:url(https://hrdspot.com/wp-content/uploads/banner-1.webp) no-repeat center center; background-color: #fff }
			25%  { background:url(https://hrdspot.com/wp-content/uploads/banner-2.webp) no-repeat center center; background-color: #fff }
			50%  { background:url(https://hrdspot.com/wp-content/uploads/banner-3.webp) no-repeat center center; background-color: #fff }
			75%  { background:url(https://hrdspot.com/wp-content/uploads/banner-4.webp) no-repeat center center; background-color: #fff }
			}	
		@keyframes running-text {
			0% { left: 100% }
			100% { left: -100% }
			}		
	@media screen and (max-width:1280px){
		.home-headline-inner{width:960px;margin:10% auto}
		.home-headline-image{width:350px;height:350px;border-radius:50px}		
		.home-headline-text{width:560px;padding:40px 0 0 0}
		.home-headline-text h1 {font-size:56px}
		.home-tagline {display:none}	
		.home-tagline-mobile {display:block; position: relative; animation: running-text 10s linear infinite;}				
		}
	@media screen and (max-width:1024px){	
		.home-headline-inner{width:90%;margin:10% 5%}	
		.home-headline-image{width:300px;height:300px}	
		.home-headline-text{width:380px;padding:0}
		.home-headline-text h1 {font-size:42px}
		.home-search{width:100%;}
		}
	@media screen and (max-width:781px){
		.home-headline-image {float:none;width:400px;height:400px;margin:auto}
		.home-headline-text {width:100%;padding:20px 0}
		.home-headline-text h1 {text-align:center}	
		.home-headline-text p {font-size:16px;padding:10px 0}
		}	
	@media screen and (max-width:576px){
		.home-headline-inner{width:95%;margin:30px 2.5% 20px 2.5%}		
		.home-headline-image {width:320px;height:320px;}
		.home-headline-text h1 {font-size:32px}		
		}
.home-body { overflow:hidden; background:#fff }
	.home-content { overflow:hidden; width:1200px; padding:30px 0;margin:0 auto }
	.home-content-title {font-weight:bold; text-align:center; margin:30px 0 10px 0; color:#333 }
	.home-content-title span {font-size:18px;letter-spacing:-0.5px  }
	.home-content-title .fa-star {font-size:0.9em;color:#F29900}
	.home-content-title .fa-star-half-alt {font-size:0.9em;color:#F29900}
	@media screen and (max-width:1280px){.home-content{width:100%;margin:0}}
.home-banner-1 {overflow:hidden;margin:0 auto;padding:10% 0;background:linear-gradient(135deg, #CEEAD6 0%, #D2E3FC 50%, #FCE8E6 100%);	 }
	.home-banner-1 span {color:#C5221F}
	.home-banner-1 h3{font-size:2.4em;line-height:1.3em;color:#000;margin:10px 0}
	.home-banner-1 h4{font-size:1.1em;font-weight:400;line-height:1.4em;color:#333;}
	.home-banner-1 h5 {
		float:left;
		font-size:14px;
		font-weight:400;
		line-height:1.4em;
		padding:10px 30px;
		margin:40px 0 0 0;
		border-radius:30px;
		background:#1A73E8;
		color:#fff;
		}
		.home-banner-1 h5:hover { background:#034DAD}
		.home-banner-1-inner {overflow:hidden;width:980px;margin: auto}
	@media screen and (max-width:1024px){
	.home-banner-1 {padding:10% 10% 15% 10%}
	.home-banner-1 h3{font-size:1.6em;}
	.home-banner-1 h4{font-size:1em}
	.home-banner-1-inner{width:100%}
	}
.home-banner-2 {overflow:hidden;margin:0 auto;padding:10% 0;background:linear-gradient(135deg, #D2E3FC 0%, #CEEAD6 50%, #FCE8E6 100%);	 }
	.home-banner-2 span {color:#C5221F}
	.home-banner-2 h3{font-size:2.4em;line-height:1.3em;color:#000;margin:10px 0}
	.home-banner-2 h4{font-size:1.1em;font-weight:400;line-height:1.4em;color:#333;}
	.home-banner-2 h5 {
		float:left;
		font-size:14px;
		font-weight:400;
		line-height:1.4em;
		padding:10px 30px;
		margin:40px 0 0 0;
		border-radius:30px;
		background:#1A73E8;
		color:#fff;
		}
		.home-banner-2 h5:hover { background:#034DAD}
		.home-banner-2-inner {overflow:hidden;width:980px;margin: auto}
	@media screen and (max-width:1024px){
	.home-banner-2 {padding:10% 10% 15% 10%}
	.home-banner-2 h3{font-size:1.6em;}
	.home-banner-2 h4{font-size:1em}
	.home-banner-2-inner{width:100%}
	}