.ssm-app {
	--ssm-navy: #07124e;
	--ssm-orange: #ffb23e;
	--ssm-text: #10142f;
	--ssm-muted: #62646c;
	--ssm-shadow: 0 5px 14px rgba(16, 20, 47, .22);
	color: var(--ssm-text);
	font-family: inherit;
	line-height: 1.55;
}

.ssm-app *, .ssm-app *::before, .ssm-app *::after { box-sizing: border-box; }
.ssm-app a { color: inherit; text-decoration: none; }
.ssm-app a:hover { color: var(--ssm-orange); }

.ssm-hand-title {
	margin: 0;
	font-family: "Mynerve", "Comic Sans MS", "Segoe Print", cursive;
	font-size: clamp(24px, 2.3vw, 34px);
	font-weight: 500;
	line-height: 1.25;
}

.ssm-staff-directory {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px 90px;
}

.ssm-directory-title {
	margin: 75px 0 60px;
	text-align: center;
	font-family: "Comic Sans MS", "Segoe Print", cursive;
	font-size: clamp(29px, 3vw, 39px);
	font-weight: 600;
	line-height: 1.25;
}

.ssm-staff-group {
	display: block;
	padding: 50px 0;
}

.ssm-staff-group > .ssm-hand-title {
	margin-bottom: 30px;
	text-align: center;
	font-size: 23px;
}

.ssm-staff-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 34px 42px;
}

.ssm-group-director,
.ssm-group-vice {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: 90px;
	padding: 15px 0;
}

.ssm-group-director > .ssm-hand-title,
.ssm-group-vice > .ssm-hand-title {
	margin: 0;
}

.ssm-group-director .ssm-staff-grid,
.ssm-group-vice .ssm-staff-grid {
	display: block;
}

.ssm-group-vice {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 15px;
}

.ssm-group-vice > .ssm-hand-title { grid-column: 2; grid-row: 1; }
.ssm-group-vice > .ssm-staff-grid { grid-column: 1; grid-row: 1; }

.ssm-group-pe70 { padding-top: 70px; }

.ssm-group-special-ed .ssm-staff-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 36px;
}

.ssm-person-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	min-height: 215px;
	padding: 22px 28px;
	background: #fff;
	border: 1px solid rgba(7, 18, 78, .08);
	border-radius: 22px;
	box-shadow: var(--ssm-shadow);
	transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.ssm-person-details { min-width: 0; flex: 1; }
.ssm-person-details p { display: flex; align-items: center; gap: 10px; margin: 12px 0; overflow-wrap: anywhere; }
.ssm-person-name { color: var(--ssm-navy); }
.ssm-icon { width: 17px; height: 17px; flex: 0 0 17px; }
.ssm-avatar { width: 145px; height: 145px; flex: 0 0 145px; border-radius: 50%; object-fit: cover; }

.ssm-staff-directory .ssm-person-card {
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 22px;
	min-height: 385px;
	padding: 28px 25px 30px;
	border-radius: 20px;
	font-size: 13px;
}

.ssm-staff-directory .ssm-person-details { width: 100%; }
.ssm-staff-directory .ssm-person-details p { gap: 7px; margin: 8px 0; }
.ssm-staff-directory .ssm-avatar { width: 145px; height: 145px; flex-basis: 145px; }

.ssm-group-director .ssm-person-card,
.ssm-group-vice .ssm-person-card,
.ssm-group-special-ed .ssm-person-card {
	flex-direction: row;
	justify-content: space-between;
	min-height: 215px;
	padding: 24px 30px;
}

.ssm-group-director .ssm-avatar,
.ssm-group-vice .ssm-avatar,
.ssm-group-special-ed .ssm-avatar {
	width: 145px;
	height: 145px;
	flex-basis: 145px;
}

.ssm-staff-directory .ssm-person-card:hover {
	color: #fff;
	background: var(--ssm-navy);
	transform: translateY(-3px);
	box-shadow: 0 9px 20px rgba(7, 18, 78, .28);
}

.ssm-staff-directory .ssm-person-card:hover .ssm-person-name { color: #fff; }
.ssm-staff-directory .ssm-person-card:hover a:hover { color: var(--ssm-orange); }

.ssm-class-hero {
	position: relative;
	display: flow-root;
	overflow: visible;
}

.ssm-class-hero::before,
.ssm-class-hero::after {
	content: "";
	position: absolute;
	z-index: 2;
	display: block;
	width: 200px;
	height: 200px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	pointer-events: none;
}

.ssm-class-hero::before {
	top: 0;
	right: -100px;
	background-image: url("/wp-content/uploads/2024/07/Untitled-design-54.png");
}

.ssm-class-hero::after {
	top: 998px;
	left: 3.7%;
	background-image: url("/wp-content/uploads/2024/07/Untitled-design-53.png");
}

.ssm-class-title {
	margin: 0;
	color: #000;
	font-family: "Mynerve", "Comic Sans MS", "Segoe Print", cursive;
	font-size: 57px;
	font-weight: 700;
	line-height: 60px;
	text-align: center;
}

.ssm-class-teacher {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: 0;
	width: 100%;
	margin: 100px 0 0;
	padding: 0;
}

.ssm-class-teacher > .ssm-hand-title {
	width: calc(100% - 40px);
	margin-left: 30px;
	font-size: 28px;
	font-weight: 700;
	line-height: 28px;
	text-align: center;
}
.ssm-class-teacher .ssm-person-card {
	justify-self: start;
	width: calc(100% - 90px);
	max-width: none;
	min-height: 254px;
	margin: 0 0 0 35px;
	padding: 20px 10px;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 25px;
	box-shadow: 0 0 15px rgba(0, 0, 0, .5);
	font-size: .9em;
	line-height: 27.54px;
	transition: all .2s ease-in-out;
}
.ssm-class-teacher .ssm-person-details {
	color: #010c4e;
	text-align: left;
	text-shadow: 0 1px 1px #fff;
	transition: all .5s ease-in-out;
}
.ssm-class-teacher .ssm-person-details p { margin: 0 0 15px; }
.ssm-class-teacher .ssm-person-details a { color: #010c4e; transition: color .5s ease-in-out; }
.ssm-class-teacher .ssm-person-name { color: #010c4e; }
.ssm-class-teacher .ssm-icon { color: #010c4e; }
.ssm-class-teacher .ssm-avatar {
	width: 150px;
	height: 150px;
	max-width: 150px;
	flex-basis: 150px;
	margin-bottom: 25px;
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: 0 0 2px rgba(0, 0, 0, .5);
	transition: all .5s ease-in-out;
}
.ssm-class-teacher .ssm-person-card:hover {
	color: #fff;
	background: rgba(1, 12, 78, .8);
	transform: scale(1.03);
}
.ssm-class-teacher .ssm-person-card:hover .ssm-person-details,
.ssm-class-teacher .ssm-person-card:hover .ssm-person-name,
.ssm-class-teacher .ssm-person-card:hover .ssm-person-details a,
.ssm-class-teacher .ssm-person-card:hover .ssm-icon {
	color: #fff;
	text-shadow: 0 0 #fff;
}
.ssm-class-teacher .ssm-person-card:hover .ssm-avatar {
	box-shadow: 0 0 10px rgba(0, 0, 0, .6);
}

.ssm-specialist-block .ssm-person-card {
	width: 100%;
	min-height: 225px;
	padding: 20px 10px;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 25px;
	box-shadow: 0 0 15px rgba(0, 0, 0, .5);
	font-size: .9em;
	transition: all .2s ease-in-out;
}
.ssm-specialist-block .ssm-person-details {
	color: #010c4e;
	text-align: left;
	text-shadow: 0 1px 1px #fff;
}
.ssm-specialist-block .ssm-person-details p { margin: 0 0 15px; }
.ssm-specialist-block .ssm-person-name,
.ssm-specialist-block .ssm-person-details a,
.ssm-specialist-block .ssm-icon { color: #010c4e; }
.ssm-specialist-block .ssm-avatar {
	width: 150px;
	height: 150px;
	max-width: 150px;
	flex-basis: 150px;
	margin-bottom: 25px;
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: 0 0 2px rgba(0, 0, 0, .5);
}
.ssm-specialist-block .ssm-person-card:hover {
	color: #fff;
	background: rgba(1, 12, 78, .8);
	transform: scale(1.03);
}
.ssm-specialist-block .ssm-person-card:hover .ssm-person-details,
.ssm-specialist-block .ssm-person-card:hover .ssm-person-name,
.ssm-specialist-block .ssm-person-card:hover .ssm-person-details a,
.ssm-specialist-block .ssm-person-card:hover .ssm-icon { color: #fff; text-shadow: 0 0 #fff; }
.ssm-specialist-block .ssm-person-card:hover .ssm-avatar { box-shadow: 0 0 10px rgba(0, 0, 0, .6); }

.ssm-timetable-card {
	margin: 100px 15px 70px;
	padding: 0;
	background: #fff;
	border-radius: 25px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, .35);
	overflow: hidden;
}

.ssm-table-scroll { overflow-x: auto; scrollbar-color: #8a8a8a #eee; }
.ssm-timetable { width: 100%; min-width: 0; margin: 0; border: 0; border-collapse: collapse; table-layout: auto; }
.ssm-app .ssm-timetable th,
.ssm-app .ssm-timetable td { border: 0 !important; text-align: center; vertical-align: middle; }
.ssm-app .ssm-timetable th {
	color: #0f0f0f !important;
	background: #fff !important;
	font-family: "Mynerve", "Comic Sans MS", "Segoe Print", cursive;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.45;
}
.ssm-app .ssm-timetable thead tr:last-child th { padding: 8px; }
.ssm-app .ssm-timetable thead tr:last-child th:first-child,
.ssm-app .ssm-timetable tbody th { width: 70px; padding: 15.2px; }
.ssm-app .ssm-timetable td {
	padding: 16px 12.8px;
	color: #6b6e71;
	background: #fff;
	font-family: "Nunito", sans-serif;
	font-size: 16px;
	line-height: 1.72;
}
.ssm-app .ssm-timetable tbody tr:first-child td { font-weight: 700; }
.ssm-app .ssm-timetable tbody tr:nth-child(even):not(.ssm-total) td { background: #f9f9f9; }
.ssm-app .ssm-timetable .ssm-schedule-caption { width: auto; padding: 25px; font-size: 19px; }
.ssm-app .ssm-timetable .ssm-total th { padding: 25px; text-align: center; font-size: 19px; font-weight: 700; }

.ssm-mobile-schedule { display: none; }

.ssm-section-block { margin: clamp(60px, 9vw, 125px) 0; text-align: center; }
.ssm-section-title { margin: 0 0 8px; font-size: clamp(28px, 3.1vw, 42px); font-weight: 600; }
.ssm-section-block > p { margin: 0 0 42px; color: var(--ssm-muted); }
.ssm-specialist-block .ssm-staff-grid { margin-top: 42px; text-align: left; }
.ssm-useful-link { padding: 45px 20px; }
.ssm-button { display: inline-block; margin-top: 22px; padding: 14px 28px; color: #fff !important; background: var(--ssm-orange); border-radius: 4px; font-weight: 700; }
.ssm-button:hover { background: var(--ssm-navy); }

.ssm-news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 42px; text-align: left; }
.ssm-news-card { overflow: hidden; background: #fff; box-shadow: 0 3px 13px rgba(0,0,0,.12); }
.ssm-news-image { display: block; aspect-ratio: 16/10; background: #f1f1f1; overflow: hidden; }
.ssm-news-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.ssm-news-image:hover img { transform: scale(1.03); }
.ssm-news-content { padding: 18px 20px 22px; }
.ssm-news-meta { margin: 0 0 8px !important; color: var(--ssm-muted); font-size: 13px; }
.ssm-news-content h3 { margin: 0; font-size: 19px; line-height: 1.35; }
.ssm-admin-message { padding: 12px 15px; border-left: 4px solid #d63638; background: #fff; }

@media (max-width: 980px) {
	.ssm-staff-directory .ssm-staff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ssm-specialist-block .ssm-staff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ssm-group-director,
	.ssm-group-vice { gap: 35px; }
	.ssm-group-director .ssm-staff-grid,
	.ssm-group-vice .ssm-staff-grid { display: block; }
	.ssm-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
	.ssm-class-hero::before,
	.ssm-class-hero::after { display: none; }
	.ssm-class-title {
		width: calc(100% - 20px);
		margin: 0 10px;
		font-size: 26px;
		line-height: 30px;
	}
	.ssm-staff-directory {
		max-width: 100%;
		padding: 0 12px 55px;
	}
	.ssm-directory-title {
		margin: 38px 0 28px;
		font-size: 19px;
	}
	.ssm-staff-directory .ssm-staff-group {
		display: flex;
		flex-direction: column;
		gap: 18px;
		padding: 24px 0;
	}
	.ssm-staff-directory .ssm-staff-group > .ssm-hand-title {
		order: 0;
		margin: 0;
		font-size: 15px;
	}
	.ssm-staff-directory .ssm-staff-group > .ssm-staff-grid {
		order: 1;
		display: grid;
		grid-template-columns: 1fr;
		gap: 18px;
		width: 100%;
	}
	.ssm-class-teacher {
		display: block;
		width: 100%;
		margin: 90px 0 0;
		padding: 0;
	}
	.ssm-class-teacher > .ssm-hand-title {
		width: calc(100% - 40px);
		margin: 0 20px;
		font-size: 18px;
		line-height: 18px;
	}
	.ssm-staff-directory .ssm-person-card {
		flex-direction: column-reverse;
		width: 190px;
		max-width: 100%;
		min-height: 270px;
		margin: 0 auto;
		padding: 17px 14px 19px;
		text-align: center;
		font-size: 11px;
	}
	.ssm-staff-directory .ssm-person-details p { justify-content: center; margin: 6px 0; }
	.ssm-staff-directory .ssm-avatar,
	.ssm-group-director .ssm-avatar,
	.ssm-group-vice .ssm-avatar,
	.ssm-group-special-ed .ssm-avatar { width: 88px; height: 88px; flex-basis: 88px; }
	.ssm-class-page .ssm-person-card {
		flex-direction: column-reverse;
		min-height: 0;
		padding: 22px 18px 26px;
		text-align: center;
	}
	.ssm-class-page .ssm-person-details p { justify-content: center; }
	.ssm-class-page .ssm-avatar { width: 145px; height: 145px; flex-basis: 145px; }
	.ssm-timetable-card { display: none; }
	.ssm-timetable { width: 100%; min-width: 484px; }
	.ssm-app .ssm-timetable th { font-size: 15px; line-height: 20px; }
	.ssm-app .ssm-timetable thead tr:last-child th { padding: 8px; }
	.ssm-app .ssm-timetable thead tr:last-child th:first-child,
	.ssm-app .ssm-timetable tbody th { width: 70px; padding: 7.5px; }
	.ssm-app .ssm-timetable td {
		max-width: 100px;
		padding: 7px;
		font-size: 14px;
		line-height: 19px;
		overflow-wrap: anywhere;
	}
	.ssm-app .ssm-timetable .ssm-schedule-caption,
	.ssm-app .ssm-timetable .ssm-total th { padding: 25px; font-size: 15px; line-height: 20px; }
	.ssm-mobile-schedule {
		display: block;
		margin: 80px 10px 70px;
	}
	.ssm-mobile-schedule-title {
		margin: 0 0 22px;
		padding: 18px 14px;
		color: #0f0f0f;
		background: #fff;
		border-radius: 18px;
		box-shadow: 0 5px 15px rgba(0, 0, 0, .2);
		font-family: "Mynerve", "Comic Sans MS", "Segoe Print", cursive;
		font-size: 17px;
		font-weight: 700;
		line-height: 1.35;
		text-align: center;
	}
	.ssm-mobile-days {
		display: grid;
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.ssm-mobile-day-card {
		overflow: hidden;
		margin: 0;
		background: #fff;
		border: 1px solid rgba(1, 12, 78, .1);
		border-radius: 18px;
		box-shadow: 0 5px 15px rgba(0, 0, 0, .2);
	}
	.ssm-mobile-day-card h3 {
		margin: 0;
		padding: 13px 15px;
		color: #fff;
		background: #010c4e;
		font-family: "Mynerve", "Comic Sans MS", "Segoe Print", cursive;
		font-size: 18px;
		font-weight: 700;
		line-height: 1.3;
		text-align: center;
	}
	.ssm-mobile-day-card ol { margin: 0; padding: 0; list-style: none; }
	.ssm-mobile-day-card li {
		display: grid;
		grid-template-columns: 42px minmax(0, 1fr);
		align-items: center;
		min-height: 46px;
		padding: 9px 14px;
		color: #6b6e71;
		font-family: "Nunito", sans-serif;
		font-size: 14px;
		line-height: 1.35;
	}
	.ssm-mobile-day-card li:nth-child(even) { background: #f9f9f9; }
	.ssm-mobile-period {
		color: #0f0f0f;
		font-family: "Mynerve", "Comic Sans MS", "Segoe Print", cursive;
		font-size: 15px;
		font-weight: 700;
	}
	.ssm-mobile-lesson { min-width: 0; overflow-wrap: anywhere; text-align: left; }
	.ssm-mobile-total {
		margin: 22px 0 0 !important;
		padding: 18px 14px;
		color: #0f0f0f !important;
		background: #fff;
		border-radius: 18px;
		box-shadow: 0 5px 15px rgba(0, 0, 0, .2);
		font-family: "Mynerve", "Comic Sans MS", "Segoe Print", cursive;
		font-size: 16px;
		font-weight: 700;
		text-align: center;
	}
	.ssm-specialist-block .ssm-staff-grid { grid-template-columns: 1fr; width: 100%; }
	.ssm-news-grid { grid-template-columns: 1fr; }
}

@media (max-width: 550px) {
	.ssm-class-teacher .ssm-person-card {
		width: calc(100% - 60px);
		max-width: none;
		min-height: 409px;
		margin: 50px 30px 0;
		padding: 20px 10px;
		font-size: 14.4px;
		line-height: 24.48px;
	}
	.ssm-class-teacher .ssm-avatar {
		width: 150px;
		height: 150px;
		max-width: 150px;
		flex-basis: 150px;
		margin: 0 auto;
	}
	.ssm-class-teacher .ssm-person-details {
		margin-top: 20px;
		text-align: center;
		min-width: 0;
	}
	.ssm-class-teacher .ssm-person-details p,
	.ssm-class-teacher .ssm-person-details a {
		padding: 0;
		justify-content: center;
		white-space: normal;
		word-break: break-word;
		overflow-wrap: anywhere;
	}
	.ssm-class-teacher .ssm-icon { display: none; }
	.ssm-specialist-block .ssm-person-card {
		flex-direction: column-reverse;
		width: 100%;
		max-width: 300px;
		min-height: 0;
		margin: 30px auto;
		padding: 20px 10px;
		text-align: center;
	}
	.ssm-specialist-block .ssm-avatar {
		width: 150px;
		height: 150px;
		max-width: 150px;
		flex-basis: 150px;
		margin: 0 auto;
	}
	.ssm-specialist-block .ssm-person-details { margin-top: 20px; text-align: center; min-width: 0; }
	.ssm-specialist-block .ssm-person-details p,
	.ssm-specialist-block .ssm-person-details a {
		padding: 0;
		justify-content: center;
		white-space: normal;
		word-break: break-word;
		overflow-wrap: anywhere;
	}
	.ssm-specialist-block .ssm-icon { display: none; }
}