@charset "utf-8";

/* TABLETTI */
@media screen and (max-width: 900px) {
	
	#galleria {
		column-count: 3;
	}
}


/* MOBIILI */
@media screen and (max-width: 600px) {
	
	#wrapper-outer, #navi {
		width: 100%;
		max-width: 1200px;
	}
	
	#wrapped {
		width: 95%;
	}
	
	#galleria {
		column-count: 2;
	}
	
	.omakuva {
		margin-top: 50px;
	}
	
	/* Navigaatiopalkki */
	#navi {
		height: 60px;
	}

	#navi ul {
		display: none !important;
	}

	#navi ul.open {
		display: block !important;
		position: absolute;
		top: 45px;
		right: 0;
		margin: 0 !important;
		padding: 15px 25px;
		max-height: none;
		background: #151515;
	}

	#navi ul.open li {
		display: block !important;
		margin: 5px 0;
		padding: 8px 0;
		text-align: left;
		border-bottom: 0.01em solid rgba(255,255,255,0.1);
	}

	#menu-button {
		display: block;
		position: absolute;
		right: 15px;
		top: 12px;
		width: 32px;
		height: 32px;
		cursor: pointer;
		-webkit-transition:all 150ms ease-in;
		-moz-transition:all 150ms ease-in;
		-o-transition:all 150ms ease-in;
		transition:all 150ms ease-in;
	}
	
	#menu-button.open {
		transform: rotate(-90deg);
		-webkit-transition:all 150ms ease-in;
		-moz-transition:all 150ms ease-in;
		-o-transition:all 150ms ease-in;
		transition:all 150ms ease-in;
	}

	#menu-button span {
		display: block;
		width: 32px;
		height: 3px;
		margin: 7px 0;
		background: #eee;
	}
	
	#navi ul.open a {
		text-decoration: none;
	}
	
	/******GALLERIA TEOKSEN NÄYTTÖ****/
	
	#teos-title {
	font-size: 18px !important;
}

	#teos-popup {
	max-width: 90% !important;
	height: 80vh !important;
}

	#teos-description-area {
	width: calc(100% + 50px) !important;
	margin-left: -25px !important;
	}
}