@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

#portalPage {
	--font-portal: "Roboto Condensed", sans-serif;
	--font-portal-heading-size: 6rem;
	--font-portal-heading-size-clamp: clamp(1.6rem, -0.6rem + 8.8vw, 6rem);
	--font-portal-heading-letter-spacing: -.25rem;
	--font-portal-heading-letter-spacing-tablet: -.1rem;
	--font-portal-heading-letter-spacing-mobile: -.05rem;
	--font-portal-box-heading-size: 1.5rem;
	--font-portal-box-text-size: 1.2rem;
	--font-portal-box-button-size: 1.1rem;
	--font-portal-heading-weight: 100;
	--font-portal-heading-b-weight: 700;
	--font-portal-box-heading-weight: 500;
	--font-portal-box-text-weight: 400;
	--font-portal-box-button-weight: 300;
	--font-portal-heading-color: #305988;
	--font-portal-heading-border-color: var(--font-portal-heading-color);
	--bg-color-content: #dbe9e9;
	--bg-color-content-rgba0: rgba(219, 233, 233, 0);
	--bg-color-content-rgba1: rgba(219, 233, 233, 1);
	--bg-color-box-1: #cec4b7;
	--bg-color-box-2: #e9cdb1;
	--bg-color-box-3: #b1c7d2;
	--bg-color-box-4: #e1cbbe;
	--bg-color-box-5: #aebebd;
	--bg-color-box-6: #b8b8b1;
	--bg-color-box-7: #e9dcdc;
	--bg-color-box-8: #97c8d4;
	--bg-color-box-9: #efd798;
}

body#portalPage {
	background-color: var(--bg-color-content);
}

#portalPageWrapper {
	/* Removed for SAMETINGET-179 --portal-banner: url(../images/kator-vaisaluokta_1920x1198.jpg);*/
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
}

#portalWrapper {
	position: relative;
	/* Removed for SAMETINGET-179 background: #434f4c var(--portal-banner) 50% 0 no-repeat;*/
	background-size: cover;
	background-origin: content-box;
	transition: all .2s ease-in-out;
}
#portalContentWrapper {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	min-height: 100%;
	background: linear-gradient(to bottom, var(--bg-color-content-rgba0) 95%, var(--bg-color-content-rgba1) 100%);
}
#portalContentContainer,
#portalContentRow {
	min-height: 100%;
}
#portalContent {
	position: relative;
	width: 100%;
	min-height: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 3rem;

	font-family: var(--font-portal) !important;
	font-size: var(--font-portal-box-text-size);
	font-weight: var(--font-portal-box-text-weight);
	font-optical-sizing: auto;
	font-style: normal;

	background-color: #fff;
	transition: all .2s ease-in-out;
}
@media (max-width: 750px) {
	#portalContent {
		width: 90dvw;
		margin: 0 3dvw;
		padding: 2rem;
	}
}
@media (max-width: 480px) {
	#portalContentWrapper {
		padding-left: 0;
		padding-right: 0;
	}
	#portalContent {
		width: 100%;
		margin: 0;
		padding: .5rem .8rem .5rem .5rem;
	}
}

#portalContent h1 {
	font-size: var(--font-portal-heading-size);
	font-size: var(--font-portal-heading-size-clamp);
	line-height: .85 !important;
	font-weight: var(--font-portal-heading-weight);
	letter-spacing: var(--font-portal-heading-letter-spacing);
	margin: 0 0 1.5rem 0;
	padding: 0;
	border-bottom: 1px solid var(--font-portal-heading-border-color);
	color: var(--font-portal-heading-color);
	transition: all .2s ease-in-out;
}
#portalContent h1 > b {
	font-weight: var(--font-portal-heading-b-weight);
	text-transform: uppercase;
}
#portalContent h1 .imcms-editor-area__text-label {
	letter-spacing: 0 !important;
}
@media (max-width: 750px) {
	#portalContent h1 {
		letter-spacing: var(--font-portal-heading-letter-spacing-tablet);
	}
}
@media (max-width: 480px) {
	#portalContent h1 {
		letter-spacing: var(--font-portal-heading-letter-spacing-mobile);
		margin: 1.5rem 0;
	}
}

/* *******************************************************************************************
 *         Boxes                                                                             *
 ******************************************************************************************* */

#portalBoxes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1rem;
	margin-left: -1rem;
	margin-right: -1rem;
	padding: 1rem;
}

.box {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	line-height: 1.3;
}
.box > .box-edit-label {
	position: absolute;
	top: -.65rem;
	left: .3rem;
	margin: 0;
	padding: .3rem .5rem;
	font-size: .8rem;
	line-height: .9;
	color: #000;
	background-color: #e0d89a;
	border: 1px solid #444;
}

/* Apply background colors using nth-child */
#portalBoxes .box:nth-child(9n+0) { background-color: var(--bg-color-box-9); }
#portalBoxes .box:nth-child(9n+1) { background-color: var(--bg-color-box-1); }
#portalBoxes .box:nth-child(9n+2) { background-color: var(--bg-color-box-2); }
#portalBoxes .box:nth-child(9n+3) { background-color: var(--bg-color-box-3); }
#portalBoxes .box:nth-child(9n+4) { background-color: var(--bg-color-box-4); }
#portalBoxes .box:nth-child(9n+5) { background-color: var(--bg-color-box-5); }
#portalBoxes .box:nth-child(9n+6) { background-color: var(--bg-color-box-6); }
#portalBoxes .box:nth-child(9n+7) { background-color: var(--bg-color-box-7); }
#portalBoxes .box:nth-child(9n+8) { background-color: var(--bg-color-box-8); }

#portalBoxes .box img {
	width: 100%;
	height: auto;
	margin: 0 auto 1rem auto;
}

#portalBoxes .box h2 {
	font-size: var(--font-portal-box-heading-size) !important;
	font-weight: var(--font-portal-box-heading-weight) !important;
	margin: 0.5rem 0 0.6rem 0 !important;
	padding: 0 !important;
}

#portalBoxes .box .box-text {
	flex-grow: 1;
}
@media (max-width: 400px) {
	#portalBoxes .box .box-text {
		display: none;
	}
}

#portalBoxes .button-list {
	display: block !important;
	margin: auto 0 0 0 !important;
	padding: 0;
	list-style-type: none;
}
#portalBoxes .button-list li {
	display: block !important;
	margin: 0 !important;
	padding: 1rem 0 0 0 !important;
}
#portalBoxes .button-list li::before {
	content: none !important;
	display: none !important;
}

#portalBoxes .button-list li a {
	display: block;
	padding: 0.5rem 1rem;
	font-size: var(--font-portal-box-button-size);
	font-weight: var(--font-portal-box-button-weight);
	text-decoration: none !important;
	color: rgba(0, 0, 0, 0.8) !important;
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px solid #fff;
	transition: all .2s ease-in-out;
}
#portalBoxes .button-list li a:hover,
#portalBoxes .button-list li a:focus,
#portalBoxes .button-list li a:active {
	color: rgba(0, 0, 0, 1) !important;
	background-color: rgba(255, 255, 255, 1);
}
#portalBoxes .button-list.edit-mode li a {
	background-color: transparent;
	border: 0;
	margin: .5rem 0;
	padding: 0;
}