@media only screen and (max-width: 1200px) {
	
	#topBanner>.contentArea {
		grid-template-columns: 300px auto;
	}
	#topBanner #logoAreaWrapper {
		padding: 0px 25px 0px 0px;
	}
	nav#mainMenu {
		width: 100%;
		justify-content: normal;
	}
	nav#mainMenu a {
		padding: 0px 15px;
		font-size: 11pt;
		white-space: nowrap;
	}	
	header, #topBand, .contentArea, footer {
		width: 100%;
	}
	.contentArea, footer {
		padding: 0px 25px;
	}
	
	.notification {
		width: calc(100vw - 50px);
	}
	
	
}

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

	/* Mobile menu */

	#mobileMenuButton {
		display: block;
		position: fixed;
		z-index: 11;
		right: 15px;
		top: 25px;
		background: var(--theme);
		color: #fff;
		border: 0;
		border-radius: 6px;
		padding: 5px;
		height: 50px;
		width: 50px;
	}
	#mobileMenuButton .material-symbols-rounded {
		transition: transform 0.2s ease;
	}
	header.mobileMenuOpen #mobileMenuButton .material-symbols-rounded {
    transform: rotate(90deg);
}
	#mobileMenuHeader {
		height: 100px;
		display: flex;
		align-items: center;
		padding: 0 25px;
		background-image: url(../images/common/mobileMenuHeaderBackground.jpg);
		background-size: cover;
	}
	

	
	#mobileMenuHeader img {
		max-width: 20dvw;
	}
	#mobileMenuHeader a {
		color: #fff;
		text-decoration: none;
		
	}
	#mobileMenuHeader a span {
		font-size: 1.4rem;
		display: block;
	}
	#mobileMenuHeader a #siteName {
		font-size: 1.1rem;
		font-weight: 400;
		font-family: "Fira Sans Condensed", "Open Sans", sans-serif;
	}
	#mobileMenuHeader a span#customerName {
		line-height: 1;
	}
	#mobileMenuButton .material-symbols-rounded {
		font-size: 30px;
	}
	#mobileMenuBackground {
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100%;
		z-index: 10;

		background-color: rgba(0, 0, 0, 0);
		backdrop-filter: blur(0);
		-webkit-backdrop-filter: blur(0);

		opacity: 0;
		visibility: hidden;
		pointer-events: none;

		transition:
			opacity 1s ease,
			backdrop-filter 1s ease,
			visibility 0s linear 1s;
	}
	header #topSearchForm  {
		padding: 25px;
	}
	header #topSearchForm .material-symbols-rounded {
		left: 40px;
	}
	
	/* Mobile menu closed */
	
	header {
		height: 100px;
	}
	#topBanner {
		height: 100px;
	}
	header #logoArea {
		top: 0;
		left: 25px;
		padding: 0 50px 0 0;
		display: flex;
		align-items: center;
		
	}
	header #logoArea span#siteName {
		font-size: 1.2rem;
	}
	header #logoArea span {
		font-size: 1.4rem;
	}
	header #topNavWrapper {
		display: none;
		position: fixed;
		top: 0;
		left: calc(-100dvw - 75px);	
		width: calc(100dvw - 80px);
		height: 100dvh;
		display: block;
		padding: 0;
		border-right: 1px solid #444;
		transition: all 0.5s;
		z-index: 11;
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
	}
	header #topNav {
		z-index: 11;
		position: absolute;
		top: 100px;
		height: 100dvh;
		display: block;
		padding: 0;
	}
	header nav#mainMenu {
		height: auto;
		display: block;
	}
	header nav#mainMenu a {	
		width: 100%;
		text-align: left;
		line-height: 50px;
		background-color: #fff;
		background-repeat: no-repeat;
		background-position: center right 25px;
		background-size: auto 30px;
		border: 0px;
		border-bottom: 1px solid #ececec;
		color: #000;
		margin: 0px;
		padding: 0 25px;
	}

	/* Mobile menu open */

	header.mobileMenuOpen #topNavWrapper {
		left: 0;
	}
	header.mobileMenuOpen #mobileMenuBackground {
		background-color: rgba(0, 0, 0, 0.65);
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);

		opacity: 1;
		visibility: visible;
		pointer-events: auto;

		transition:
			opacity 1s ease,
			backdrop-filter 1s ease,
			visibility 0s;
			z-index: 10;
	}
	
	#topBanner {
		-webkit-mask-image: none;
		mask-image: none;
	}	

	.primaryAction, .secondaryAction {
		width: 100%;
		justify-content: center;
		margin-right: 0;
	}

	/* Main */
	
	main {
		min-height: calc(100vh - 100px - 100px);
	}
	main.withSidebar {
		grid-template-columns: 1fr !important;
		grid-gap: 25px;
	}
	aside {
		padding-top: 0;
	}
	aside .primaryAction, aside .secondaryAction {
		justify-content: center;
	}
	
	/* Common */
	
	img.contentImage {
		width: 40%;
		margin: 0 5px 0 5px;
	}
	.columns.wideGap {
		grid-gap: 25px;
	}

	/* Workplace list */
	
	#workplaceList > a {
		padding: 15px;
	}
	#workplaceList > a p {
		margin-bottom: 5px;
	}

	/* Workplace page */
	
	#workplaceInformation #applyForWorkplace {
		width: 100%;
	}
	#workplaceInformation #interactionButtons .material-symbols-rounded {
		display: none;
	}
	
	/* Footer */
	
	footer {
		height: auto;
		padding: 15px 0px;
		line-height: 2;
	}
	
	
	/* Admin */
	nav#adminMenu {
		grid-gap: 10px;
	}
	nav#adminMenu a {
		padding: 10px;
	}
	
	#profileFormEducationSectors {
		columns: 1;
	}
	.textColumns-2 {
		columns: 1;
	}



}

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

	
	
	
	

	#loginForm .formParts {
		width: 100%;
	}
	
	.withSidebar {
		grid-template-columns: 1fr;
	}
		
	.formButtons a, .formButtons input {
		width: 100%;
		margin-right: 0px;
		box-sizing: border-box;
		text-align: center;
		background-image: none !important;
	}
	
	#searchWorkplacesForm .formParts {
		grid-template-columns: 1fr;
	}
	
	.contentArea {
		padding: 0px 25px 25px 25px;
	}
	
	div#workplaceList {
		grid-template-columns: 1fr;
	}
	
	#workplaceListPage .action, #workplacePage .action:not(.interaction) {
		background: #fff !important;
		padding: 10px;
	}
	#workplacePage .interaction {
		width: 100%;
		box-sizing: border-box;
		text-align: center;
	}
	
	article#workplaceInformation #workplaceContent {
		grid-template-columns: 1fr;
	}
	
	.columns {
		grid-template-columns: 1fr !important;
		grid-gap: 0px;
	}
	
	h2:empty {
		display: none;
	}
	
	aside .swiper-container {
		  width: calc(100vw - 50px);
    height: auto;
	box-sizing: border-box;

	}
	
	#backgroundImagesPreview {
		grid-template-columns: 1fr 1fr;
	}
	
	img#sisaltokuva {
		display: none;
	}
	
	.h1_spacer {
		display: none;
	}

	.footerArea {
		padding: 5px;
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	
	.footerArea a {
		text-align: left;
	}
	
	
	a.primary, input.primary {
		padding: 10px 0;
		background-image: none !important;
	}
	
}