@charset "utf-8";
/* CSS Document */


/*FORMER*/
	.former .mobile:not(.navigation) {display: none;}

	/*TITLE*/
	.former .content_former {padding-top: 170px; background-color: var(--white);}
		.former .content_former .section_title {display: flex; align-items: center; justify-content: center; padding: 25px 0;}
			.former .content_former .section_title hr {width: 17%; border-color: var(--white); border-width: 2px;}
			.former .content_former .section_title h1 {font-size: 3.75rem; color: var(--white); text-align: center; line-height: 1;}

		/*Animations*/
		.former .content_former {transition: background 0.5s ease-in-out;}
			.former .content_former.show {background-color: var(--pink);}

		.former .content_former .section_title hr {transition: all 0.5s 0.5s ease-in-out; transform: scale(0);}
			.former .content_former.show .section_title hr {transform: scale(1);}

		.former .content_former .section_title h1 {transition: opacity 0.8s 0.5s ease-in-out; opacity: 0;}
			.former .content_former.show .section_title h1 {opacity: 1;}

	/*INTRO*/
	.former .content_intro {padding: 95px 0 36px;}
		.former .content_intro .content_text {display: flex; align-items: flex-start; justify-content: center; gap: 120px;}
			.former .content_intro .content_text p {width: 50%; font-weight: 400; font-size: 1.25rem;}

		/*Animations*/
		.former .content_intro .content_text p {transition: opacity 0.5s 0.5s ease-in-out; opacity: 0;}
			.former .content_intro.show .content_text p {opacity: 1;}

	/*FORMER PRESIDENTS*/
	.former .content_presidents {margin-top: 126px;}
		.former .content_presidents .intro {background-color: var(--pink); padding: 39px 118px; margin-bottom: 86px;}
			.former .content_presidents .intro p {font-size: 1.25rem; line-height: 1.4;}

		.former .content_presidents .presidents_list {display: flex; align-items: stretch; justify-content: center; gap: 75px; flex-wrap: wrap; list-style:none; padding:0; margin:0;}
			.former .content_presidents .presidents_list li {width: calc(33% - 47px); background-color: var(--pink); padding: 0 0 32px; margin:0; border-radius: 170px 170px 0 0; position: relative;}
				.former .content_presidents .presidents_list li .leaf {width: 110px; position: absolute; top: -32px; left: 0; z-index: 2;}
					.former .content_presidents .presidents_list li .leaf p {font-weight: 900; font-size: 2.25rem; color: var(--white); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -40%);}
				.former .content_presidents .presidents_list li .content {padding: 0 24px; margin-top: 15px;}
				.former .content_presidents .presidents_list li .name {font-size: 1.75rem; font-weight: 900; min-height: 68px; display: block;}
				.former .content_presidents .presidents_list li hr {border-color: var(--white); margin: 10px 0 15px;}
				.former .content_presidents .presidents_list li .info {font-weight: 700; font-size: 1.125rem; margin-bottom: 20px;}
		.former .content_presidents .annotations {font-size: 1.25rem; line-height: 1.4; font-weight: 400; margin: 90px 0 107px;}

		/*Animations*/
		.former .content_presidents .presidents_list {transition: opacity 1s 0.5s ease-in-out; opacity: 0;}
			.former .content_presidents.show .presidents_list {opacity: 1;}

	/*FORMER DETAIL*/
	.former .modal .president_detail {background: var(--white); position: fixed; top: 50%; transform: translateY(-50%); border-radius: 180px 0 0 0; display: flex; align-items: stretch;}
		.former .modal .president_image {width: 338px; background-color: var(--pink); border-radius: 180px 180px 0 0; text-align: center; position: relative;}
			.former .modal .president_image p {font-weight: 700; font-size: 1.125rem; line-height: 1.4; margin-top: 28px;}
			.former .modal .president_image .leaf {width: 110px; position: absolute; top: -32px; left: 0; z-index: 2;}
				.former .modal .president_image .leaf p {font-weight: 900; font-size: 2.25rem; color: var(--white); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -40%); margin-top: 0;}
		.former .modal .president_content {width: calc(100% - 338px); padding: 100px 67px;}
			.former .modal .president_content .title {font-weight: 400; font-style: italic; font-size: 2.25rem;}
			.former .modal .president_content hr {border-color: var(--pink); border-width: 2px;}
			.former .modal .president_content .name {font-size: 2.25rem; font-weight: 900; display: block; margin: 50px 0 100px;}
			.former .modal .president_content .description {font-weight: 400; font-size: 1.25rem; line-height: 1.4;}
				.former .modal .president_content .description p {margin-bottom: 40px;}
				.former .modal .president_content .description b {display: block;}
				.former .modal .president_content .description ul {margin-bottom: 40px; list-style-type: disc; padding-left: 20px;}
					.former .modal .president_content .description ul li {margin-bottom: 20px; padding-left: 30px;}

	/*Close button*/
	.former .modal .btn_close_modal {width: 44px; height: 44px; top: 16px; right: 16px;}
		.former .modal .btn_close_modal svg {fill: var(--black);}

@media (max-width: 1000px) {
	.former .mobile:not(.navigation) {display: block;}
	.former .desktop {display: none;}
	.former .p_left_1 {padding-left: 0;}
	.former .center_content.c_10 {width: 676px;}

	/*Title*/
	.former .content_former {padding-top: 115px;}
		.former .content_former .section_title {width: 100%;}
			.former .content_former .section_title h1 {font-size: 3rem;}

	/*Intro*/
	.former .content_intro .content_text {gap: 86px;}
		.former .content_intro .content_text p {font-size: 1.125rem; line-height: 1.3;}

	/*Presidents*/
	.former .content_presidents .presidents_list {gap: 50px 12px;}
		.former .content_presidents .presidents_list li {width: calc(50% - 6px); border-radius: 90px 0 0;}
			.former .content_presidents .presidents_list li .leaf {width: 80px;}
			.former .content_presidents .presidents_list li figure {width: 160px;}
			.former .content_presidents .presidents_list li .button {width: 222px;}

	.former .content_presidents .annotations {font-size: 1.125rem;}

	/*Former detail*/
	.former .modal .president_detail {border-radius: 90px 0 0; flex-direction: column;}
		.former .modal .btn_close_modal,
		.former .modal .btn_close_modal svg {width: 30px; height: 30px;}
		.former .modal .president_image {width: 100%; display: flex; border-radius: 90px 0 0; align-items: center;}
			.former .modal .president_image figure {width: 160px;}
			.former .modal .president_image i {font-size: 1.125rem; margin-left: 12px;}
			.former .modal .president_image .leaf {width: 80px; top: -45px;}
		.former .modal .president_content {width: 100%; padding: 27px 37px 46px 172px;}
			.former .modal .president_content hr {display: none;}
			.former .modal .president_content .title {display: none;}
			.former .modal .president_content .name {font-size: 1.75rem; margin: 0 0 31px; text-transform: uppercase;}
			.former .modal .president_content .info {font-size: 0.875rem; margin-bottom: 43px;}
			.former .modal .president_content .description {font-size: 0.875rem;}
}

@media (max-width: 750px) {
	.former .center_content.c_10 {width: 100%;}

	/*Title*/
	.former .content_former {padding-top: 165px;}
		.former .content_former .section_title {padding: 43px 0;}
			.former .content_former .section_title h1 {font-size: 1.875rem;}

	/*Intro*/
	.former .content_intro {padding: 59px 36px;}
		.former .content_intro .content_text {flex-direction: column; gap: 38px;}
			.former .content_intro .content_text p {width: 100%;}

	/*Presidents*/
	.former .content_presidents {padding: 0 36px; margin-top: 34px;}
		.former .content_presidents .center_content.c_12 {width: 100%;}
			.former .content_presidents .presidents_list li {width: 100%;}

	/*Former detail*/
	.former .content_president_modal {padding: 0 36px;}
		.former .modal .president_image {flex-direction: column; align-items: flex-start; gap: 39px; padding-bottom: 22px;}
			.former .modal .president_image i {margin-left: 24px; text-align: left;}
		.former .modal .president_content {padding: 20px 24px 0;}
}