@import url("https://use.typekit.net/zbm2aba.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

:root {
	--angle-bottom-corner: calc(60vh - 120px);
	--angle-top-corner: calc(120px - 60vh);
}

* { font-family: 'Poppins', sans-serif; }
html body, .bg-default { 
	background-color: rgb(234,234,234); 
}


.serif-font {
	font-family: new-spirit, serif;
	font-weight: 700;
	font-style: normal;
}

.text-danger { color: rgb(233,14,24); }

.bg-red, .btn-danger {
	background-color: rgb(233,14,24);
}
.bg-dark-red { background-color: rgb(175,23,26); }
.bg-red-gradient {
	background: rgb(175,23,26);
	background: linear-gradient(0deg, rgba(175,23,26,1) 0%, rgba(233,14,24,1) 50%);
}

.text-red,
.nav-item > a:hover,
.nav-item > a.text-white:hover { color: rgb(100,100,100)!important; }
.text-shadow { text-shadow: 0px 1px 4px rgba(0,0,0,0.5); }
.img-splash { max-height: 40vh; }

.angle-stripe-background {
	min-height: 40vh;
	clip-path: polygon(0 0, 100% 30%, 100% 100%, 0% 70%);
	position: relative;
	z-index: 1;
}

.angle-stripe-content {
	min-height: 40vh;
	position: relative;
	z-index: 2;
	top: -40vh;
	margin-bottom: -40vh;
}

.angle-block-background {
	min-height: 60vh;
	clip-path: polygon(0 0, 100% 20%, 100% 100%, 0% 80%);
	position: relative;
	z-index: 1;
}

.angle-block-content {
	min-height: 60vh;
	position: relative;
	z-index: 2;
	top: -60vh;
	margin-bottom: -60vh;
}

.angle-full-background {
	min-height: 90vh;
	clip-path: polygon(0 0, 100% 12%, 100% 100%, 0% 88%);
	position: relative;
	z-index: 1;
}

.angle-full-content {
	min-height: 90vh;
	position: relative;
	z-index: 2;
	top: -90vh;
	margin-bottom: -90vh;
}

.w-one-third {
	max-width: 33.33333%!important;
}

@media (max-width: 991px) {
	.display-1 { font-size: 5rem; }
	.display-4 { font-size: 3rem; }
}
@media (max-width: 767px) {
	.display-1 { font-size: 4rem; }
	.display-1 { font-size: 2rem; }
	.img-splash { max-height: 25vh; }
}

#hero {
	background: url(/assets/images/hero_background.jpg) no-repeat top center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

	min-height: 90vh;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 85%);
}

@media (max-width: 767px) {
	#hero {
		min-height: 50vh;
	}
}

#logo, .logo {
	font-family: century-old-style-std, serif;
	font-weight: 400;
	font-style: normal;
}

#logo { font-size: 2rem; }
.logo { font-size: 2.5rem; }

#what_is_kaatsu p {
	line-height: 2.5rem;
}

@media (max-width: 767px) {
	#what_is_kaatsu p {
		line-height: 1.25rem;
	}
}

#kaatsu_programs { background: url(/assets/images/kaatsu_programs.jpg) no-repeat center center; }
#kaatsu_media { background: url(/assets/images/kaatsu_media.jpg) no-repeat center center; }
#kaatsu_specialists { background: url(/assets/images/kaatsu_programs.jpg) no-repeat center center; }
#other_applications_recovery { background: url(/assets/images/recovery_background.jpg) no-repeat center center; }
#other_applications_rehabilitation { background: url(/assets/images/rehabilitation_background.jpg) no-repeat center center; }
#other_applications_performance { background: url(/assets/images/performance_background.jpg) no-repeat center center; }
#about_us { background: url(/assets/images/about_us_background.jpg) no-repeat center center; }

#kaatsu_programs,
#kaatsu_media,
#kaatsu_specialists,
#other_applications_recovery,
#other_applications_rehabilitation,
#other_applications_performance,
#about_us {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

footer {
	clip-path: polygon(0 0, 100% 120px, 100% 100%, 0% 100%);
}

#mc_embed_signup{
	clear:left; 
	font:14px Helvetica,
	Arial,sans-serif; 
	width:100%;
}

#testimonials-container {
	background: url('/assets/images/testimonials_background.jpg') no-repeat top center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position: relative;
	z-index: 1;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
}

#testimonials-container .bg-default {
	position: relative;z-index: 2;min-height: 30vh;top: 0;margin-bottom: -30vh;clip-path: polygon(0 0, 100% 0, 100% 60%, 0 30%);
}

#learn_more {
	z-index: 10;
}

footer.bg-red {
	padding-top: 160px !important;
	position: relative; 
	z-index: 10;
}