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

main .container .mirror.inner { max-width: 800px; }

.hero {
	position: relative;
	aspect-ratio:2.385/1;
}
.hero:before {
	content:"";
	display: block;
	position: absolute;
	inset:auto 0 0 0;
	height: 100%;
	background: linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.20) 40%, rgba(0,0,0,0.6) 100%);
	z-index: 1;
}
.hero figure {
	position: absolute;
	inset:0;
	background-image: url("../../images/hero/teacher-with-kids.webp");
	background-position:33% center;
	background-size: cover;
}
.hero figure figcaption {
	position: absolute;
	bottom: 25px;
	left:   25px;
	color: white;
	z-index: 2;
}
.hero figcaption > h1 { font-family: var(--banner_title);    font-weight: var(--banner_title_weight);   font-size:   var(--banner_title_fontsize);	  line-height: var(--banner_title_leading);    }
.hero figcaption > h2 { font-family: var(--banner_subtitle); font-weight: var(--banner_subtitle_weight);font-size:   var(--banner_subtitle_fontsize); line-height: var(--banner_subtitle_leading); }


/* states */

	html[data-pag="login"]        .panes .pane ul.control > li[data-label="login"]        { border-color:var(--color_secondary); border-bottom-width:4px; }




/* tabbed panes */

	.tabbed-panes {
		width: 100%;

		ul.control {
			display: grid;
			position: sticky;
			position: -webkit-sticky;
			top: 50px;
			background-color: beige;
			background-color: white;
			width: calc(100% + 60px);
			margin-left: -30px;
			grid-auto-flow:column;
			gap:0;
			padding-bottom: 15px;
			padding-bottom: 0;
			
			&[data-count="2"] { grid-template-columns: 1fr 1fr; }
			&[data-count="3"] { grid-template-columns: 1fr 1fr 1fr; }

			li {
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				border-bottom: 2px solid var(--color_border);
				font-size: 1.25rem;
				line-height: 1.2;
				align-content: center;

				a {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 100%;
					text-align: center;
					padding-top: 20px;
					padding-bottom: 15px;
					min-height: 40px;
					min-height: 0;
					i {

					}
					em {

					}
				}
			}
		}
		ul.contents {
			width: 100%;
			li {
				width: 100%;
			}
		;
			padding-top: 30px;
		}
	}