/* ### hero ### */
.hero { overflow: hidden; }
.hero-holder { padding-top: 39px; padding-bottom: 116px; position: relative; }
.hero-intro { margin: 0 auto; margin-bottom: 37px; position: relative; z-index: 1; width: var(--width); max-width: 950px; text-align: center; }
.hero-intro h1 { margin-bottom: 11px; line-height: 1.4; }
.hero-intro h1 strong { padding: 0px 12px; font-weight: var(--font-weight-extra-bold); color: var(--color-white); background-color: var(--color-cyan); }
.hero-text { margin-bottom: 24px; font-size: 14px; line-height: 1.6; }
.hero .card-rating { margin: 0 auto; }
.hero-gravity,
.hero-acf,
.hero-rank,
.hero-wp { position: absolute; bottom: 176px; left: 1px; width: 60px; pointer-events: none; }
.hero-rank,
.hero-acf { bottom: 45px; left: 31px; }
.hero-rank,
.hero-gravity { right: 1px; left: inherit; }
.hero-rank { right: 31px; }
.hero-gravity-line,
.hero-wp-line { position: absolute; top: 26px; left: 17px; z-index: -1; width: 294px; }
.hero-rank-line,
.hero-acf-line { position: absolute; top: 28px; left: -41px; z-index: -1; width: 46px; }
.hero-gravity-line { right: 17px; left: inherit; }
.hero-rank-line { right: -41px; left: inherit; }
.hero-rank-line img,
.hero-gravity-line img,
.hero-acf-line img,
.hero-wp-line img { width: 100%; }

@media only screen and (min-width: 768px) {
	.hero-text { padding: 0 15%; font-size: var(--font-base); }
	.hero .button { margin: 0 10px; }
}

@media only screen and (min-width: 1025px) {
	.hero-holder { padding-top: 81px; padding-bottom: 20px; }
	.hero-intro { margin-bottom: 90px; }
	.hero-intro h1 { margin-bottom: 17px; line-height: 1.2; }
	.hero-text { margin-bottom: 29px; font-size: 18px; line-height: var(--line-height-base); }
	.hero-gravity,
	.hero-acf,
	.hero-rank,
	.hero-wp { position: absolute; bottom: 177px; left: 73px; width: 60px; pointer-events: none; }
	.hero-rank,
	.hero-acf { bottom: 46px; left: 103px; }
	.hero-rank,
	.hero-gravity { right: 83px; left: inherit; }
	.hero-rank { right: 113px; }
	.hero-gravity-line,
	.hero-wp-line { position: absolute; top: 26px; left: 17px; width: 294px; }
	.hero-rank-line,
	.hero-acf-line { position: absolute; top: 28px; left: -41px; width: 46px; }
	.hero-gravity-line { right: 17px; left: inherit; }
	.hero-rank-line { right: -41px; left: inherit; }
}

@media only screen and (max-width: 768px) {
	.hero-wp, .hero-acf, .hero-gravity, .hero-rank {
		display:none;
	}
	.hero-holder {
		padding-top:60px;
		padding-bottom:20px;
	}
	.hero-intro h1 strong { 
		padding: 3px 8px;
	}
}