/*
X Small				<576px
Small					≥576px
Medium 				≥768px
Large 				≥992px
Extra 				≥1200px
Extra large 	≥1400px

Breakpoint at 1600px to avoid that the header wraps because the menu is huge.
See end of file
*/

@media only screen and (max-width: 768px) {
	:root {
		--header-height: var(--header-height-mobile);
	}

	body {
		--wp--style--root--padding-left: var(--wp--style--root--padding-left);
		--wp--style--root--padding-right: var(--wp--style--root--padding-right);
	}

	div#bigtitle-logo-container figure {
		max-width: 90% !important;
		height: auto;
	}

	figure#bigtitle-logo img {
		width: 100%;
	}

	header nav.mega-menu-wrap>ul.mega-menu {
		height: 100vh !important;
	}

	header nav.mega-menu-wrap>ul.mega-menu>li.mega-menu-item {
		display: inline-block;
		height: auto !important;
	}

	header nav.mega-menu-wrap>ul.mega-menu>li.mega-menu-item:hover {
		background-color: rgba(255, 255, 255, 0.9);
	}

	header nav.mega-menu-wrap>ul.mega-menu>li.mega-menu-item.mega-toggle-on {
		height: auto !important;
	}

	header nav.mega-menu-wrap>ul.mega-menu>li.mega-menu-item>a.mega-menu-link {
		color: white !important;
		font-size: 1.3em !important;
		line-height: 40px !important;
		height: auto !important;
	}



	main div.frontpage-section-title-wrapper {
		position: relative;
		margin-left: calc(var(--wp--style--root--padding-left)) !important;
		justify-content: center;
		width: 100%;
		right: 0;
		background-color: rgba(0, 0, 0, 0.3);
		padding-bottom: var(--wp--preset--spacing--50) !important;
	}


	main h2.frontpage-section-title>a {
		display: inline-block;
		font-size: 3rem !important;
		font-family: "Montserrat ExtraBold" !important;
		writing-mode: horizontal-tb !important;
		transform: scale(1) !important;
	}

	main section.frontpage-section-container {
		flex-direction: column !important;
		padding: var(--wp--preset--spacing--30) 0 !important;
		min-height: auto !important;
	}

	main div.frontpage-section-content-container {
		width: 100%;
		margin-top: 2rem !important;
		margin-right: auto !important;
		margin-bottom: 2em;
		justify-content: center;
		padding-left: var(--wp--preset--spacing--30) !important;
		padding-right: var(--wp--preset--spacing--30) !important;
	}

	main div.frontpage-section-content-container {
		width: 100%;
		margin-top: 0 !important;
	}

	div#frontpage-murat-section-container {
		margin-bottom: var(--wp--style--root--padding-left) !important;
	}

	div#frontpage-murat-text-container {
		padding-right: 0 !important;
		align-items: stretch;
	}

	div#frontpage-murat-text-wrapper {
		max-width: 100% !important;

	}

	div#frontpage-jahresprojekt-container {
		width: 100%;
	}

	div#frontpage-jahresprojekt-container div.frontpage-project-title-wrapper {
		padding-left: 0 !important;
	}

	div#frontpage-jahresprojekt-container div.frontpage-project-title-wrapper h2 {
		text-align: center;
	}

	div#frontpage-jahresprojekt-container div.frontpage-project-excerpt-wrapper {
		margin-right: var(--wp--preset--spacing--20) !important;
		margin-left: var(--wp--preset--spacing--20) !important;
		padding-right: 0 !important;
	}

	div#frontpage-jahresprojekt-container div.frontpage-project-tags-wrapper {
		margin-left: var(--wp--preset--spacing--20);
	}

	main section#service-section {
		padding-bottom: 2em !important;
	}

	div.is-content-centered-right,
	div.is-content-centered-left {
		justify-content: center !important;
	}


	section#service-section {
		background-position: 30% !important;
	}

	div#frontpage-service-grid-wrapper {
		padding-left: 1em !important;
		padding-right: 1em !important;
	}


	div#frontpage-service-grid {
		grid-template-columns: calc(50% - 20px) calc(50% - 20px);
		grid-template-rows: auto auto;
		grid-row-gap: 50px;
		grid-column-gap: 40px;
	}

	main div.service-card {
		width: 100%;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	main div.service-card figure.wp-block-media-text__media {
		text-align: center;
	}

	main div.service-card figure.wp-block-media-text__media > img {
		width: 40%;
		height: auto;
	}

	main div.service-card div.wp-block-media-text__content {
		width: 100%;
		padding: 0 !important;
		margin-top: 2em;
	}

	div.include-mastodon-feed-wrapper li.status {
		min-height: unset;
	}



	footer div#footer-nav-container {
		display: none;
	}

	footer div#footer-sponsors-container figure>a {
		display: block;
		height: 100%;
		width: auto;
	}

	footer div#footer-slogan p {
		font-size: 1.2em !important;
	}
}

@media only screen and (max-width: 1024px) {
	#ocbOffCanvas-1 button.showButton {
		padding: 8px 10px 8px 10px;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1200px) {
	:root {
		--header-height: var(--header-height-tablet);
	}

	header nav.mega-menu-wrap>ul.mega-menu>li.mega-menu-item>a.mega-menu-link {
		font-size: 1.3em !important;
		line-height: var(--header-height) !important;
	}

	div#frontpage-service-grid {
		max-width: 80%;
	}
}

/*@media only screen and (min-width: 200px) and (orientation: portrait) {
	main div#bigtitle-mask-wrapper {
		-webkit-mask-image: url(https://neu.mur.at/wp-content/uploads/2026/03/murat_mask_mobile.png);
  	mask-image: url(https://neu.mur.at/wp-content/uploads/2026/03/murat_mask_mobile.png);
  }
}

@media only screen and (min-width: 200px) and (orientation: landscape) {
	main div#bigtitle-mask-wrapper {
		-webkit-mask-image: url(https://neu.mur.at/wp-content/uploads/2026/03/murat_mask.png);
  	mask-image: url(https://neu.mur.at/wp-content/uploads/2026/03/murat_mask.png);
  }
}*/

@media only screen and (max-width: 1200px) {

	div#frontpage-service-grid p {
		font-size: var(--wp--preset--font-size--large) !important;
	}

}

@media only screen and (min-width: 1201px) {
	div#frontpage-service-grid {
		max-width: 900px;
	}


}

@media only screen and (min-width: 1201px) and (max-width: 1400px) {}

@media only screen and (min-width: 1401px) {
	header nav.mega-menu-wrap>ul.mega-menu>li.mega-menu-item>a.mega-menu-link {
		font-size: 1.4em !important;
	}
}



@media screen and (min-width: 1201px) {
	:root {
		--header-height: var(--header-height-desktop);
	}

	header nav.mega-menu-wrap>ul.mega-menu>li.mega-menu-item>a.mega-menu-link {
		font-size: 1.4em !important;
		line-height: var(--header-height) !important;
	}
}