@import "fonts/fonts.css";
@import "colors.css";
@import "normalize.css";
@import "markup.css";
@import "grid.css";
@import "typographic.css" screen and (min-width: 768px);
@import "typographic-mobile.css?v=2" screen and (max-width: 767px);
@import "effects.css?v=2";
@import "blocks.css" screen and (min-width: 868px);
@import "blocks-mobile.css" screen and (max-width: 867px);
/* @import "blocks-mobile-se.css" screen and (max-width: 320px); */

@media (max-height: 500px) and (min-width: 500px) and (orientation: landscape) {
	html:after {
		content: "Please use portrait orientation";
		position: fixed;
		display: flex;
		font-size: 2.3rem;
		justify-content: center;
		align-items: center;
		width: 100vw;
		height: 100vh;
		top: 0; left: 0;
		z-index: 10000;
		background-color: rgba(0, 0, 0, 0);
		color: var(--gr-solid-mask);
	}
	
}


/* HORIZONAL SCROLL */
.horizontal-scroll {
	height: 400vh;
	padding-top: 0;
	display: block;  box-sizing: border-box;
	
}
.horizontal-scroll main {
	/* background: url(/img/back_art.svg);
	background-size: 120%;
	background-position-y:top;
	background-repeat: no-repeat; */

	top: 0 !important;
	overflow: hidden !important;
	width: 100%;
	height: 100vh !important;
	position: -webkit-sticky !important;
	/* position: sticky !important; */
	position: fixed !important;
	display: flex;
	/* scroll-behavior: smooth; */
}
.horizontal-scroll [class^="page-"] {
	min-width: 100%;
	background-color: transparent;
}
.horizontal-scroll #horizontal-scroll-bg {
	position: absolute;
	/* width: 400vw; REPLACED BY JS*/
	height: 100vh;
	overflow: hidden;

	background-image: url(/img/back_art.png);
	background-size: 400vw 100vh;
}