@font-face {
	font-family: "Switzer";
	src: url("fonts/Switzer-Variable.woff2") format("woff2-variations"),
		url("fonts/Switzer-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: block;
}

html {
	scroll-behavior: smooth
}

body {
	--grid-padding: 24px;
	padding: 0px;
	margin: 0px;
	background-color: rgb(249, 249, 252);
	font-family: "Switzer", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-size: 18px;
	overflow-x: hidden;
	color: #121212;
	line-height: 142%;
}

.main {
	display: block;
	width: 1280px;
	margin: auto;
	min-width: 300px;
}

strong {
	font-weight: 550;
}

a {
	color: inherit;
	text-decoration-color: rgb(0, 171, 255);
}

h1 {
	font-size: 54px;
	font-weight: 280;
	margin: 0px;
	line-height: 140%;
}

h2 {
	font-weight: 500;
	font-size: 18px;
	display: block;
	text-align: left;
	margin-bottom: 24px;
	margin-top: 96px;
}

h2:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	margin-top: -24px;
	left: 0px;
	border-bottom: 1px solid #efefef;
}

h3 {
	font-weight: 550;
	font-size: 18px;
	text-transform: uppercase;
}

p {
	margin-top: 0px;
	margin-bottom: 24px;
}

.product_img {

	opacity: 0;
	display: block;
	margin: auto;
	margin-top: 128px;
	box-shadow: 0px 4px 11px #000000a3;
	box-sizing: border-box;
	max-width: 90%;
}

#menu_icon, #close_icon {
	position: absolute;
	right: 0px;
	top: -2px;
	width: 28px;
	display: block;
}

#menu {
	position: fixed;
	display: none;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-color: rgba(249, 249, 252, 1);
	box-sizing: border-box;
	z-index: 2;
	user-select: none;
}

#menu_items {
	text-align: center;
	margin-top: 48px;
}

#menu_items a {
	text-decoration: none;
	font-size: 36px;
	display: block;
	margin: 48px;
	font-weight: 280;
}

#contact {
	margin-bottom: 192px;
}

#contact p {
	text-transform: none;

	font-weight: 280;
	margin-top: 0px;
	text-align: left;
	line-height: 140%;
}

.dimmed {
	opacity: 0.5;
	font-weight: 190;
}

.header {
	margin-top: calc(2 * var(--grid-padding));
}

.headline {
	padding-top: calc(8 * var(--grid-padding));
	padding-bottom: calc(8 * var(--grid-padding));
}


.slider-row {
	user-select: none;
	display: block;
	width: 100%;
	white-space: nowrap;
	box-sizing: border-box;
	width: 100%;

}

.slider-item {
	display: inline-block;
	box-sizing: border-box;
	flex: 1 1;
	position: relative;
	background-color: white;
	box-sizing: border-box;
	overflow: hidden;
	border-style: solid;
	border-width: 0px;
	width: calc(((100% - (var(--grid-padding) * 23)) / 24) * 12 + (11 * var(--grid-padding)));
	aspect-ratio: 16/ 9;
	margin-right: var(--grid-padding);
}

.slider-item:last-child {
	margin-right: 0px;
}

.slider-item .preview {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	bottom: 0px;
}

.slider-item .description {
	position: absolute;
	top: calc(100% - 72px);
	left: 0px;

	width: 100%;
	height: 100%;
	padding: var(--grid-padding);
	background-color: rgb(0, 0, 0, 0.95);
	color: white;
	text-wrap: wrap;
	box-sizing: border-box;

	transition: top 0.2s ease-in 0.25s;


}

.showmore {
	position: absolute;
	right: 24px;
	top: 22px;
	font-size: 26px;

	opacity: 0.6;
	transition: opacity 0.2s ease-in 0.25s;
	user-select: none;
}

.slider-item .description.shown {
	transition: top 0.2s ease-out;
	top: 0%;
	cursor: default !important;
}

.slider-item .description.shown .showmore {
	opacity: 0;
	transition: opacity 0.1s ease-in;
}

.slider-item .description a {
	color: white;
	text-decoration: underline;
}

.slider-item .description h3 {
	white-space: nowrap;
	font-size: 16px;
	margin-top: 0px;
	margin-bottom: 36px;
}

.slider-control {
	user-select: none;
	text-align: right;
	margin-top: 32px;
}

.slider-control img {
	width: 32px
}

.left-slider-control, .right-slider-control {
	display: inline-block;
	border-radius: 32px;
	padding: 12px;
	opacity: 0.1;
}

.left-slider-control img, .right-slider-control img {
	transform: scale(0.85);
	transition: all 0.2s;
}

.left-slider-control:hover img, .right-slider-control:hover img {
	transform: scale(1);
	transition: all 0.2s;
}

.left-slider-control {
	margin-right: 32px;
}

.left-slider-control.active_button, .right-slider-control.active_button {

	opacity: 1;
}

.left-slider-control.active_button:hover, .right-slider-control.active_button:hover {
	background-color: #f1f1f8;
	transition: all 0.2s;
}



#publicaciones-lista div {
	vertical-align: top;
}

#publicaciones-lista div p {
	margin-top: 0px;
	margin-bottom: 16px;
}

#publicaciones-lista .year {
	text-align: right;
	opacity: 0.4;
	font-weight: 500;
}

.cell {
	display: block;
	box-sizing: border-box;
	flex: 1 1;
}


.cell-0 {
	display: none
}

.cell-0 {
	width: 0%;
}

.cell-1 {
	width: calc(((100% - (var(--grid-padding) * 23)) / 24));
}

.cell-2 {
	width: calc(((100% - (var(--grid-padding) * 23)) / 24) * 2 + (var(--grid-padding)));
}

.cell-3 {
	width: calc(((100% - (var(--grid-padding) * 23)) / 24) * 3 + (2 * var(--grid-padding)));
}

.cell-4 {
	width: calc(((100% - (var(--grid-padding) * 23)) / 24) * 4 + (3 * var(--grid-padding)));
}

.cell-5 {
	width: calc(((100% - (var(--grid-padding) * 23)) / 24) * 5 + (4 * var(--grid-padding)));
}

.cell-6 {
	width: calc(((100% - (var(--grid-padding) * 23)) / 24) * 6 + (5 * var(--grid-padding)));
}

.cell-7 {
	width: calc(((100% - (var(--grid-padding) * 23)) / 24) * 7 + (6 * var(--grid-padding)));
}

.cell-8 {
	width: calc(((100% - (var(--grid-padding) * 23)) / 24) * 8 + (7 * var(--grid-padding)));
}

.cell-9 {
	width: calc(((100% - (var(--grid-padding) * 23)) / 24) * 9 + (8 * var(--grid-padding)));
}

.cell-10 {
	width: calc(((100% - (var(--grid-padding) * 23)) / 24) * 10 + (9 * var(--grid-padding)));
}

.cell-11 {
	width: calc(((100% - (var(--grid-padding) * 23)) / 24) * 11 + (10 * var(--grid-padding)));
}

.cell-12 {
	width: calc(((100% - (var(--grid-padding) * 23)) / 24) * 12 + (11 * var(--grid-padding)));
}

.cell-13 {
	width: calc(((100% - (var(--grid-padding) * 23)) / 24) * 13 + (12 * var(--grid-padding)));
}

.cell-14 {
	width: calc(((100% - (var(--grid-padding) * 23)) / 24) * 14 + (13 * var(--grid-padding)));
}

.cell-15 {
	width: calc(((100% - (var(--grid-padding) * 23)) / 24) * 15 + (14 * var(--grid-padding)));
}

.cell-16 {
	width: calc(((100% - (var(--grid-padding) * 23)) / 24) * 16 + (15 * var(--grid-padding)));
}

.cell-17 {
	width: calc(((100% - (var(--grid-padding) * 23)) / 24) * 17 + (16 * var(--grid-padding)));
}

.cell-18 {
	width: calc(((100% - (var(--grid-padding) * 23)) / 24) * 18 + (17 * var(--grid-padding)));
}

.cell-19 {
	width: calc(((100% - (var(--grid-padding) * 23)) / 24) * 19 + (18 * var(--grid-padding)));
}

.cell-20 {
	width: calc(((100% - (var(--grid-padding) * 23)) / 24) * 20 + (19 * var(--grid-padding)));
}

.cell-21 {
	width: calc(((100% - (var(--grid-padding) * 23)) / 24) * 21 + (20 * var(--grid-padding)));
}

.cell-22 {
	width: calc(((100% - (var(--grid-padding) * 23)) / 24) * 22 + (21 * var(--grid-padding)));
}

.cell-23 {
	width: calc(((100% - (var(--grid-padding) * 23)) / 24) * 23 + (22 * var(--grid-padding)));
}

.cell-24 {
	width: 100%;
}

.row {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	box-sizing: border-box;
	margin-bottom: var(--grid-padding);
	gap: var(--grid-padding);
}

.row:last-child {
	margin-bottom: 0px;
}

@media only screen and (max-width : 1360px) {
	.headline {
		padding-top: calc(6 * var(--grid-padding));
		padding-bottom: calc(6 * var(--grid-padding));
	}

	h1 {
		font-size: 44px;

	}

	.main {
		width: 798px;
	}

	.slider-item {
		width: 798px;
	}

	.cell-1, .cell-2, .cell-3, .cell-4, .cell-5, .cell-6, .cell-7, .cell-8, .cell-9, .cell-10, .cell-11, .cell-12, .cell-13, .cell-14, .cell-15, .cell-16, .cell-17, .cell-18, .cell-19, .cell-20, .cell-21, .cell-22, .cell-23, .cell-24 {
		max-width: 100%;
		flex: 0 0 100%
	}

	#publicaciones-lista .year {
		display: none;
	}
}

@media only screen and (max-width : 860px) {
	.headline {
		padding-top: calc(4 * var(--grid-padding));
		padding-bottom: calc(4 * var(--grid-padding));
	}

	h1 {
		font-size: 36px;
		text-align: left;
	}

	.main {
		width: calc(100% - 42px);
	}

	.row {
		margin-bottom: var(--grid-padding);
	}

	.slider-item {
		width: 100%;
		aspect-ratio: 12/ 9;
	}

	h2 {
		text-align: center;
	}

	#contact p {
		text-align: center;
	}

	.slider-item .description {
		font-size: 14px;
	}
}

.grid {
	display: block;
	width: 100%;
	box-sizing: border-box;

}