@import url('https://fonts.googleapis.com/css2?family=Archivo Narrow:wght@200;300;400;500;600&display=swap');

div.page {
	--color-late: #f7f2e8;
	--color-late-dark: #e4dfd5;
}

div.line-footer {
	font-size: var(--font-small);
	color: var(--color-25);
	letter-spacing: 1px;
	border-top: 2px dashed var(--color-25);
	padding-top: var(--step2);
	margin-top: var(--step6);
	display: flex;
	justify-content: start;
	align-items: center;
}

div.line-footer img {
	display: block;
	margin-right: var(--step);
}

div.page.club-page-header {
	background: linear-gradient(70deg, #73a188, #5b7c6a);
}

.club-page-header .page2 {
	min-height: 430px;
}

.club-page-header .text h1 {
	font-size: var(--font-extra);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 2px;
	line-height: 1.2;
	color: var(--color-late);
	padding-right: 20%;
	margin: 0;
}

.club-page-header .text .sub {
	font-size: var(--font-large);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--color-late);
	padding-right: 10%;
	margin-top: var(--step4);
}

.club-page-header .img {
	background: url(files/map-green.svg) 0 0 no-repeat;
	background-size: contain;
	min-height: 320px;
}

.club-page-header .img .title {
	font-size: 35px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 2px;
	line-height: 1.2;
	color: var(--color-late);
	width: max-content;
	margin-left: auto;
	margin-right: var(--step6);
}

div.page.club-page-reg {
	background-color: var(--color-keune);
}

div.page.club-page-reg .page2 {
	padding-top: var(--step6);
	padding-bottom: var(--step6);
	text-align: center;
}

div.page.club-page-b2 {
	background-color: var(--color-late);
}

div.page.club-page-b2 .page2 {
	color: var(--color-00);
	padding-top: var(--step6);
	padding-bottom: var(--step6);
}

div.page.club-page-b2 ul>li {
	background: url(files/card-green.svg) 0 0 no-repeat;
	line-height: 1.6;
	letter-spacing: 1px;
	padding: 0 0 0 48px;
}

div.page.club-page-b3 {
	color: var(--color-00);
	background-color: var(--color-late-dark);
	max-width: 100%;
	position: relative;
	z-index: 2;
}

div.page.club-page-b3 .page2 {
	padding-top: var(--step6);
	padding-bottom: 120px;
}

div.page.club-page-b3 .header-title {
	font-size: 70px;
	font-weight: 400;
	line-height: 1.0;
}

div.page.club-page-b3 .header-que {
	padding-right: var(--step6);
}

div.page.club-page-b3 .header-que img {
	max-width: 100%;
	height: auto;
}

.b3-1 {
	margin-top: 60px;
}

.b3-2>div {
	line-height: 1.6;
	color: var(--color-white);
	background-color: var(--color-green);
	padding: var(--step4);
	width: 50%;
	margin-left: auto;
	position: relative;
}

.b3-2>div::after {
	content: '';
	background: url(files/arrow-right-green.svg) 0 0 no-repeat;
	background-size: contain;
	width: 126px;
	height: 126px;
	position: absolute;
	top: 96px;
	right: -120px;
}

.b3-3>div {
	color: var(--color-05);
	padding: var(--step4);
	width: 60%;
	min-height: 450px;
	border: var(--step) solid var(--color-05);
	margin-left: 96px;
	position: relative;
	z-index: 1;
}

.b3-3>div::after {
	content: '';
	background: url(files/arrow-back-black.svg) 0 0 no-repeat;
	background-size: contain;
	width: 165px;
	height: 117px;
	position: absolute;
	bottom: -117px;
	left: -66px;
}

.b3-3 div.title {
	font-weight: 600;
	font-size: var(--font-large);
	text-transform: uppercase;
	margin-top: 60px;
	margin-bottom: var(--step4);
}

.b3-3 ul {
	font-weight: 500;
	font-size: var(--font-medium);
	padding: 0;
	margin: 0 0 0 0;
	list-style: none;
}
.b3-3 .img {
	max-width: 70%;
}
.b3-4>div {
	font-size: var(--font-small);
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.8;
	background: var(--color-100);
	padding: var(--step6) var(--step6) var(--step6) 96px;
	margin-top: -42px;
	margin-right: -42px;
	position: relative;
	z-index: 1;
}

.b3-5>div {
	color: var(--color-100);
	background-color: #979797;
	width: 500px;
	height: 500px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	margin-left: auto;
	margin-top: 48px;
	position: relative;
}

.b3-5 .title,
.b3-5 ul {
	letter-spacing: 1px;
	line-height: 1.6;
	max-width: 60%;
}

.b3-5 ul {
	padding-left: 12px;
}

.b3-6 {
	color: var(--color-05);
	background-color: #C4C4C4;
	width: 210px;
	height: 210px;
	border-radius: 50%;
	position: absolute;
	left: -260px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.b3-6>span {
	font-size: var(--font-small);
	color: var(--color-95);
}

.b3-7 {
	color: var(--color-05);
	background-color: #F5F5F5;
	width: 135px;
	height: 135px;
	border-radius: 50%;
	position: absolute;
	left: -435px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.b3-7>span {
	font-size: var(--font-small);
	color: var(--color-75);
}

.b3-8 {
	background-color: #FFFFFF;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	position: absolute;
	left: -510px;
	z-index: 1;
}

.b3-9 {
	color: var(--color-white);
	background: #231F20;
	padding: var(--step2) var(--step4);
	line-height: 1.6;
	position: relative;
	margin-left: 105px;
	margin-top: -96px;
}

.b3-9::before {
	content: '';
	width: 0;
	height: 0;
	border-top: 105px solid transparent;
	border-right: 105px solid #231F20;
	border-bottom: 105px solid transparent;
	position: absolute;
	left: -105px;
	top: 50%;
	transform: translateY(-50%);
}

.b3-9 ul {
	padding-left: var(--step3);
	margin: var(--step2) 0 0 0;
}

.b3-10 {
	font-size: var(--font-medium);
	text-transform: uppercase;
	line-height: 1.6;
	background: none;
	padding: 0;
	margin-top: 54px;
	margin-left: 150px;
	max-width: 900px;
	min-height: 100px;
}
.b3-11 {
	font-weight: 600;
	line-height: 1.6;
	padding: 0 0 0 80px;
	margin-top: var(--step4);
	margin-left: 150px;
	max-width: 900px;
}
.b3-12 {
	font-weight: 600;
	line-height: 1.6;
	color: var(--color-green);
	background: url(files/attention.svg) left 18px center no-repeat;
	background-size: contain;
	padding: 0 0 0 80px;
	margin-top: var(--step4);
	margin-left: 150px;
	max-width: 900px;
}

.page.page.club-page-b4 {
	background: var(--color-100);
	margin-top: 0px;
	position: relative;
	z-index: 3;
}

.page.page.club-page-b4 .page2 {
	padding-top: 60px;
	padding-bottom: 54px;
	overflow: inherit;
}

.page.page.club-page-b4 h2 {
	font-size: 42px;
	font-weight: 400;
	margin: 0;
	position: relative;
	z-index: 2;
}

.b4-1 {
	letter-spacing: 3px;
	line-height: 2;
	color: var(--color-white);
	padding: 0;
	margin-left: 0px;
	max-width: 430px;
	width: 100%;
	position: absolute;
	top: -120px;
	
}

div.page.club-page-b5 {
	background-color: var(--color-late);
}

div.page.club-page-b5 .page2 {
	color: var(--color-00);
	padding-top: var(--step6);
	padding-bottom: 120px;
}

div.page.club-page-b5 ul {
	margin-left: 0;
	padding-left: var(--step3);
}

div.page.club-page-b5 ul>li {
	line-height: 1.6;
	letter-spacing: 1px;
	padding: 0 0 0 var(--step2);
}
div.page.club-page-b5 ol>li {
	line-height: 1.6;
	letter-spacing: 1px;
	padding: 0 0 0 var(--step2);
}

div.page.club-page-b5 ul>li:not(:last-child) {
	margin-bottom: var(--step4);
}

div.page.page.club-page-b4.club-page-b6 .page2 {
	padding-top: 0px;
	padding-bottom: 0px;
	overflow: inherit;
}

.club-page-b6 .img-w {
	min-height: 250px;
	position: relative;
	z-index: 1;
}

.club-page-b6 .img {
	text-align: center;
	width: 100%;
	position: absolute;
	bottom: -80px;
	left: 50%;
	transform: translateX(-50%);
}

.club-page-b6 .img img {
	max-width: 100%;
	height: auto;
}

div.page.club-page-b6.club-page-b7 {
	background: linear-gradient(70deg, #73a188, #5b7c6a);
}
div.page.club-page-b5.club-page-b7 .page2 {
	padding-top: var(--step6);
}
.page.page.club-page-b4.club-page-b7 h2 {
  color: var(--color-white);
}
.b7-1 .img {
	margin-left: -78px;
	margin-bottom: -54px;
	position: relative;
	z-index: 1;
}

.b7-1 .img img {
	max-width: 100%;
	height: auto;
}

.b7-1-1 {
	padding: var(--step4) var(--step6);
	margin-right: var(--step6);
	border: var(--step) solid var(--color-05);
	position: relative;
	z-index: 2;
}

.b7-1-1 h3 {
	font-size: var(--font-large);
	text-transform: uppercase;
	margin: 0;
}

.b7-1-1 .text {
	line-height: 1.6;
	margin: var(--step2) 96px 0 126px;
}

.b7-2 h3 {
	font-size: var(--font-extra);
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--color-keune);
	margin: 96px 0 0 166px;
}
div.page.club-page-b5.club-page-b8 .page2 {
	padding-bottom: 0;
}
div.page.club-page-b5 .b8 h3 {
	font-size: var(--font-medium);
	letter-spacing: 1px;
	text-transform: uppercase;
	margin: 0;
}

div.page.club-page-b5 .b8 ul>li {
	line-height: 1.6;
	letter-spacing: 1px;
	background: url(files/arrow-right-black-small.svg) 0 var(--stepHalf) no-repeat;
	padding-left: var(--step4);
	list-style-type: none;
}

div.page.club-page-b5 .b8 ul>li>ul>li {
	background: none;
	padding-left: var(--step2);
	margin-bottom: 0;
	list-style-type: circle;
}

div.page.club-page-b9 {
	color: var(--color-late-dark);
	background-color: var(--color-green);
}

div.page.club-page-b9 .page2 {
	padding-bottom: var(--step6);
}

.b9 h2 {
	font-size: var(--font-medium);
	text-transform: uppercase;
	margin: var(--step6) 0 0 0;
}

.b9 p {
	font-size: var(--font-small);
	text-transform: uppercase;
	line-height: 1.6;
	letter-spacing: 2px;
	margin: var(--step2) 0 0 0;
}

.page.club-page-b10 {
	background: var(--color-late);
}

.page.club-page-b10 .page2 {
	padding-top: var(--step6);
	padding-bottom: 64px;
}
.page.club-page-b10 .b10-w {
	border: var(--step) solid var(--color-05);
	padding: var(--step6);
}
.b10 h2 {
	font-size: var(--font-medium);
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: var(--step6);
	position: relative;
	max-width: max-content;
}

.b10-w h2::before {
	content: '';
	background: url(files/card-club.svg) 0 0 no-repeat;
	background-size: 120px auto;
	width: 120px;
	height: 80px;
	position: absolute;
	top: -24px;
	right: -132px;
}
.b10-w.b10-we h2::before {
	background-image: url(files/card-expert.svg);
}
.b10 h2+.text {
	text-transform: uppercase;
}
.b10 .img img {
	margin-top: 60px;
}

.b10 ul>li:not(:last-child) {
	margin-bottom: var(--step6);
}

.page.club-page-b10.b11 {
	background-color: var(--color-100);
	position: relative;
	z-index: 1;
}

.page.club-page-b10.b11 .page2 {
	padding-top: var(--step6);
	padding-bottom: var(--step6);
}

.b10.b11 h2 {
	margin-bottom: 0;
}

.b10.b11 h2::before {
	background-image: url(files/card-keune.svg);
}

div.page.club-page-b5.b12 {
	position: relative;
	z-index: 2;
}

div.page.club-page-b5.b12 .page2 {
	overflow: inherit;
}

.b12-1 {
	margin-left: 166px;
}

.b12 .img {
	position: relative;
	margin-top: -300px;
}

.b12 .img img {
	max-width: 100%;
	height: auto;
}

div.page.club-page-b13 {
	position: relative;
	z-index: 2;
	background: var(--color-100);
}

div.page.club-page-b13 .page2 {
	overflow: inherit;
	padding-top: 0;
	padding-bottom: 0;
}

div.page.club-page-b13 .page2>div {
	margin-left: 0px;
}

.b13 .img {
	
}

.b13 .img img {
	max-width: 100%;
	height: auto;
}

.b13 .text {
	padding-left: 0px;
}

.b13 h2 {
	font-size: var(--font-medium);
  	letter-spacing: 1px;
  	border: var(--step) solid var(--color-05);
  	padding: var(--step6);
  	max-width: max-content;
}

.b13 h2 em {
	font-style: normal;
	color: var(--color-green);
}

.b13 p {
	padding-left: 166px;
	line-height: 1.6;
}
.b14 .note {
	color: var(--color-keune);
}


.b15 h2 {
	font-size: var(--font-medium);
  	letter-spacing: 1px;
  	border: var(--step) solid var(--color-05);
  	padding: var(--step6);
  	max-width: max-content;
}

.b15 h2 em {
	font-style: normal;
	color: var(--color-green);
}

.b15 ul {
	margin-bottom: 166px;
}

.b15 ul li {
	letter-spacing: 1px;
	margin-bottom: var(--step4);
}

.b16 span {
	text-transform: uppercase;
}

div.page.club-page-b17 {
	color: var(--color-white);
	background-color: #7F8F87;
}

div.page.club-page-b17 .page2 {
	padding-top: var(--step6);
	padding-bottom: var(--step4);
}

.b17 h3 {
	text-transform: uppercase;
	font-size: var(--font-medium);
	letter-spacing: 1px;
	line-height: 1.2;
	margin: 0;
}

.b17 ul {
	margin-left: 0;
	padding-left: var(--step4);
}

.b17 ul li {
	line-height: 1.6;
	letter-spacing: 1px;
	padding-left: var(--step2);
	margin-bottom: var(--step2);
}

.b17 a {
	color: var(--color-white);
}

@media screen and (max-width: 1200px) {
	.b3-5>div {
		text-align: right;
		width: 300px;
		max-width: 100%;
		height: 500px;
		border-radius: 300px 0 0 300px;
		margin-left: auto;
		margin-top: 48px;
		margin-right: calc(-1 * var(--step4));
		z-index: 2;
		position: relative;
	}

	.b3-5 .title,
	.b3-5 ul {
		max-width: calc(100% - 48px);
		padding-left: var(--step4);
	}

	.b3-5 ul li {
		list-style-type: none;
	}

	.b3-5 ul li:before {
		content: "\2022";
		font-size: var(--font-medium);
		margin-right: var(--step);
	}

	.b3-6 {
		margin-top: 96px;
	}

	.b3-7 {
		margin-top: 96px;
	}

	.b3-8 {
		margin-top: 96px;
	}

	.b15 ul {
		margin-bottom: 0px;
	}
}

@media screen and (max-width: 1000px) {
	.b3-6 {
		margin-top: 296px;
	}

	.b3-7 {
		margin-top: 296px;
	}

	.b3-8 {
		margin-top: 296px;
	}

	.b3-9 {
		margin-top: 54px;
	}

	.b7-1-1 .text {
		line-height: 1.6;
		margin: var(--step2);
		margin-left: 0;
	}

	.b7-2 h3 {
		font-size: var(--font-large);
		margin: 0px 0 0 var(--step6);
	}

	.b12 .img {
		margin-top: 0px;
	}
}

@media screen and (max-width: 810px) {
	.club-page-header .text h1 {
		font-size: var(--font-large);
		line-height: 1.2;
	}

	.club-page-header .text .sub {
		font-size: var(--font-default);
		letter-spacing: 2px;
	}

	.club-page-header .img {
		min-height: 200px;
	}

	.club-page-header .img .title {
		font-size: var(--font-medium);
		margin-right: 0;
	}

	div.page.club-page-b3 .header-title {
		font-size: var(--font-extra);

	}

	.b3-2>div {
		width: 100%;
		margin-left: 0;
	}

	.b3-2>div::after {
		top: inherit;
		right: var(--step6);
		bottom: -112px;
		transform: rotate(90deg);
	}

	.b3-3>div {
		width: 100%;
		border: var(--step) solid var(--color-05);
		margin-left: 0px;
		margin-top: 88px;
		position: relative;
		z-index: 2;
	}

	.b3-3>div::after {
		width: 165px;
		height: 117px;
		position: absolute;
		bottom: -75px;
		left: -145px;
		z-index: 3;
		transform: scale(1, -1) rotate(90deg);
	}

	.b3-4>div {
		padding: var(--step6) var(--step6) var(--step6) var(--step6);
		margin-top: 88px;
		margin-right: -42px;
		position: relative;
		z-index: 1;
	}

	.b3-6 {
		display: none;
	}

	.b3-7 {
		display: none;
	}

	.b3-8 {
		display: none;
	}

	.club-page-b6 .img-w {
		min-height: 150px;
	}

	.b7-1 .img {
		margin-left: 0px;
		margin-bottom: 0px;
		width: 40%;
		position: absolute;
		z-index: 1;
		top: 48px;
		right: 0;
	}

	.b7-1-1 .text {
		margin-right: 40%;
	}

	.b7-1-1 h3 {
		font-size: var(--font-medium);
		max-width: 70%;
	}

	.club-page-b6.club-page-b7 .img {
		bottom: inherit;
		top: var(--step2);
	}

	div.page.club-page-b5.club-page-b8 .page2 {
		padding-top: 144px;
	}

	.b10 h2 {
		font-size: var(--font-medium);
		margin-left: 72px;
		margin-bottom: var(--step6);
		position: relative;
	}

	.b12-1 {
		margin-left: 0px;
	}

	.b13 .img {
		width: 48px;
		bottom: 0;
	}

	div.page.club-page-b5.club-page-b8.b14 .page2 {
		padding-top: var(--step6);
	}

}

@media screen and (max-width: 580px) {
	div.page.club-page-b3 .header-title {
		font-size: var(--font-large);
		line-height: 1.4;
	}

	.b3-3>div::after {
		width: 165px;
		height: 117px;
		position: absolute;
		bottom: -62px;
		left: -129px;
		z-index: 3;
		transform: scale(0.6, -0.6) rotate(90deg);
	}

	.b3-3 div.title {
		font-size: var(--font-default);
		line-height: 1.6;
	}

	.b3-3 ul {
		font-size: var(--font-medium);
	}

	.b3-4>div {
		padding: var(--step2);
		margin-top: 42px;
		margin-right: 0px;
		position: relative;
		z-index: 1;
	}

	.b3-5 .title {
		padding-top: 130px;
	}

	.b3-5 ul {
		padding-bottom: 120px;
	}

	.b3-10 {
		font-size: var(--font-default);
		background: none;
		margin-top: var(--step4);
		margin-left: 0px;
	}
	.b3-11 {
		padding-left: 0;
		margin-left: 0;
	}
	
	.b3-12 {
		background-position: left 0 top var(--step);
		background-size: auto 96px;
		margin-left: 0;
		padding-left: var(--step6);
	}

	.b4-1 {
		max-width: 100%;
		margin-left: 0px;
	}

	.page.page.club-page-b4 h2 {
		font-size: var(--font-large);
	}

	.b13 h2 {
		font-size: var(--font-large);
	}

	.b13 .img {
		width: 24px;
		left: 66px;
	}
}

@media screen and (max-width: 480px) {
	div.page.club-page-header .page2 {
		padding-top: var(--step6);
		padding-bottom: var(--step6);
	}

	.b3-5>div {
		text-align: left;
		width: 100%;
		max-width: 100%;
		height: auto;
		border-radius: 0%;
		margin: var(--step6) auto 0 auto;
		z-index: 2;
		position: relative;
	}

	.b3-5 .title {
		padding-top: var(--step4);
	}

	.b3-5 ul {
		padding-bottom: var(--step4);
	}

	.b3-9 {
		font-size: var(--font-small);
	}

	div.page.club-page-b3 .page2 {

		padding-bottom: 48px;
	}

	.b4-1 {
		position: relative;
		top: -90px;
	}

	.b7-1-1 .text {
		margin-right: 0;
	}

	.b10 h2 {
		margin-bottom: 0;
	}

	.b10 .img img {
		margin-top: var(--step2);
	}

	.b13 .img {
		left: var(--step2);
	}

	.b13 h2 {
		padding-left: 54px;
	}

	.b13 p {
		padding-left: 0px;
		line-height: 1.4;
	}

	.b15 h2 {
		font-size: var(--font-large);
	}
}