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


/*PRESIDENT*/
	.president .mobile:not(.navigation) {display: none !important;}

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

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

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

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

	/*BIO*/
	.president .content_bio {margin-bottom: 150px;}
	/*Pearl Ornaments*/
	.president .content_bio .ornament_pearl{position:absolute; z-index:3;}

	.president .content_bio .pearl01{width:76px; right:-2px; bottom: 35px;}

	.president .content_bio .pearl02{width:38px; right:90px; bottom: 52px;}

	/*Headings*/
	.president .content_bio h3{font-size:3.750rem; margin:60px 0 100px; position:relative; margin:0 0 40px; color:var(--black);}

		.president .content_bio h3 .animation_text02{font-family:'boisterous_scriptregular', serif; font-weight:400; font-size:6.250rem; color:var(--pink); position:relative; z-index:2;}

		/*Line*/
		.president .content_bio h3::before{width:100%; height:2px; background:var(--pink); position:absolute; left:0; bottom:70px; content:'';}

		/*Animations*/
		.president .content_bio h3 .animation_text01,
		.president .content_bio h3 .animation_text02,
		.president .content_bio h3::before{transition:all 1s cubic-bezier(0.25, 0.1, 0.1, 1); -webkit-transition:all 1s cubic-bezier(0.25, 0.1, 0.1, 1);}

		.president .content_bio .ornament_pearl{transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out;}
			/*Heading*/
			.president .content_bio h3 .animation_text01{opacity:0; transform:translateX(-40px); -webkit-transform:translateX(-40px); display:inline-block;}
			.president .content_bio.show h3 .animation_text01{opacity:1; transform:translateX(0);}

			.president .content_bio h3 .animation_text02{opacity:0;}
			.president .content_bio.show h3 .animation_text02{opacity:1;}

			.president .content_bio h3::before{transform:scaleX(0); -webkit-transform:scaleX(0); transform-origin:left; -webkit-transform-origin:left;}
			.president .content_bio.show h3::before{transform:scaleX(1); -webkit-transform:scaleX(1);}

				/*Delays*/
				.president .content_bio h3 .animation_text01{transition-delay:0.1s; -webkit-transition-delay:0.1s;}

				.president .content_bio h3 .animation_text02{transition-delay:0.5s; -webkit-transition-delay:0.5s;}

				.president .content_bio h3::before{transition-delay:0s; -webkit-transition-delay:0s;}

			/*Pearls*/
			.president .content_bio .ornament_pearl{opacity:0;}
			.president .content_bio.show .ornament_pearl{opacity:1;}

	/*Info*/
	.president .content_bio .content_info {display: flex; align-items: stretch; justify-content: center; gap: 70px;}
		.president .content_bio .content_info .text {width: calc(100% - 570px);}
			.president .content_bio .content_info .text .block {margin-bottom: 30px;}
			.president .content_bio .content_info .text .block:last-child {margin-bottom: 0px;}
			.president .content_bio .content_info .text p {font-size: 1.25rem; line-height: 1.4; font-weight: 400; margin-bottom: 30px;}
			.president .content_bio .content_info .divider {padding: 50px 0; position: relative; width: 100%;}
			.president .content_bio .content_info .divider hr {border-width: 2px; border-color: var(--pink); margin: 0;}
			.president .content_bio .content_info .divider .pearl01 {position: absolute; right: -1px; width: 37px; bottom: 35px; top: initial;}
			.president .content_bio .content_info .divider01 {width: calc(100% + 188px)}
			.president .content_bio .content_info .divider02 {width: calc(100% + 95px)}
		.president .content_bio .content_info .images {display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding-bottom: 200px;}

	/*Animations*/
	.president .content_bio figure {transition: opacity 0.5s 0.3s ease-in-out; opacity: 0;}
		.president .content_bio.show figure {opacity: 1;}
	.president .content_bio p {transition: all 0.5s 0.3s ease-in-out; opacity: 0; transform: translateY(20px);}
		.president .content_bio.show p {opacity: 1; transform: translateY(0px);}
	.president .content_bio .divider hr {transition: width 0.5s 0.3s ease-in-out; width: 0;}
		.president .content_bio.show .divider hr {width: 100%;}

@media (max-width: 1000px) {
	.president .mobile:not(.navigation) {display: block !important;}
	.president .desktop {display: none !important;}
	.president .p_left_1 {padding-left: 0;}

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

	/*Bio*/
	.president .content_bio {margin-top: 50px;}
		.president .content_bio .center_content.c_12 {width: 638px;}
			.president .content_bio h3{font-size:2.375rem;}
				.president .content_bio h3::before{bottom:30px;}
				.president .content_bio h3 .animation_text01{width: 330px;}
				.president .content_bio h3 .animation_text02{font-size:3.875rem; left: -10px;}
			.president .content_bio .pearl01{width:28px; right:55px; top: 108px;}
			.president .content_bio .pearl02{width:45px; right:-2px; top: 100px;}

			.president .content_bio .content_info {flex-direction: column; gap: 63px;}
			.president .content_bio .content_info.mobile {display: flex !important;}
				.president .content_bio .content_info .text {width: 100%;}
					.president .content_bio .content_info .text p {font-size: 1.125rem;}
				.president .content_bio .content_info .images {padding-bottom: 0;}
					.president .content_bio .content_info .divider {padding: 0; margin-bottom: 36px; margin-top: -36px;}
						.president .content_bio .content_info .divider .pearl01 {bottom: -15px;}
					.president .content_bio .content_info .images:first-of-type figure {max-width: 332px;}
					.president .content_bio .content_info .images figure,
					.president .content_bio .content_info .images figure img {width: 100%;}
				.president .content_bio .content_info .group {display: flex; gap: 86px;}
					.president .content_bio .content_info .group .images {width: 50%; justify-content: flex-start;}
					.president .content_bio .content_info .group .text {width: 50%;}
}

@media (max-width: 750px) {
	/*Title*/
	.president .content_president {padding-top: 165px;}
		.president .content_president .section_title {padding: 43px 0;}
			.president .content_president .section_title h1 {font-size: 1.875rem;}
			.president .content_president .section_title hr {width: 12%;}

	/*Bio*/
	.president .content_bio {padding: 0 36px;}
		.president .content_bio .center_content.c_12 {width: 100%;}
			.president .content_bio h3 {font-size: 1.875rem; display: flex; flex-direction: column; margin-bottom: 0;}
				.president .content_bio h3 .animation_text01 {width: 270px; position: relative; bottom: -14px;}
				.president .content_bio h3 .animation_text02 {font-size: 3.125rem;}
				.president .content_bio h3::before {bottom: 90px;}
				.president .content_bio .pearl01 {width: 30px; right: -2px; bottom: 77px; top: initial;}
				.president .content_bio .pearl02 {width: 18px; right: 36px; bottom: 82px; top: initial;}

			.president .content_bio .content_info .group {flex-direction: column; gap: 55px;}
				.president .content_bio .content_info .group .images {width: 100%;}
				.president .content_bio .content_info .group .text {width: 100%;}
}