@media (max-width: 600px) {
	body {
		font-family: Arial, Helvetica, sans-serif;
		margin: 0px;
	}
	/* Style the header */
	.header {
		background-color: #f1f1f1;
		padding: 30px;
		text-align: center;
		font-size: 35px;
	}

	/* Container for flexboxes */
	.row {
		display: -webkit-flex;
		display: flex;
	}

	/* Left and right column */

	.menu {
	   -webkit-flex: 1;
	   -ms-flex: 1;
	   flex: 1;
	   background-color: #111;
	  position: relative;
	}

	.menu a {
		color: white;
		padding: 16px;
		text-decoration: none;
		display: block;
	} 
 
	/* Change color on hover */
	.menu a:hover {
		background-color: #ddd;
		color: black;
	} 

	.menu a:not(:first-child) {display: none;}
	.menu a.icon {
	float: right;
	display: block;
	right: 0;
	top: 0;
	position: absolute;
	}
	.menu.responsive {position: relative;}
	.menu.responsive .icon {
	position: absolute;
	right: 0;
	top: 0;
	}
	.menu.responsive a {
	float: none;
	display: block;
	text-align: left;
	}
	.etusivu {
		background-color: #0198CD;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/* Middle column */
	.middle {
		-webkit-flex: 4;
		-ms-flex: 4;
		flex: 4;
		-moz-box-shadow:    inset 0 0 15px #000000;
		-webkit-box-shadow: inset 0 0 15px #000000;
		box-shadow:         inset 0 0 15px #000000;
		padding: 20px;
	}

	.middle h1 {
		margin-left: 1em;
	}

	.middle p {
		margin-left: 3em;
	}

	/* Style the footer */
	.footer {
		background-color: #f1f1f1;
		padding: 10px;
		text-align: center;
	}
	#panorama {
		width:100%;
		height: 200px;
	}
	.footer {
		font-size:1em;
	}
	.pnlm-about-msg {
		opacity: 0;
	}

	.paikkatausta {
		background-color: grey;
		-moz-box-shadow:    0 0 10px #000000;
		-webkit-box-shadow: 0 0 10px #000000;
		box-shadow:         0 0 10px #000000;
		margin-bottom: 2px;
	}
	.maps {
	overflow: hidden;
	padding-top: 56.25%;
	position: relative;
	}
	.maps iframe{
		border: 0;
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
	}
	.tr {
		height: 15px;
	}

	.td {
		width: 40px;
		text-align: center;
	}

	.avoin {
		background-color: limegreen;
		cursor: pointer;
		-moz-box-shadow:    inset 0 0 7px #000000;
		-webkit-box-shadow: inset 0 0 7px #000000;
		box-shadow:         inset 0 0 7px #000000;
	}

	.avoin:hover {
		background-color: #2db92d;
	}

	.avoin:active {
		background-color: #007acc;
	}

	.valittu {
		background-color: #0099ff;
		-moz-box-shadow:    inset 0 0 7px #000000;
		-webkit-box-shadow: inset 0 0 7px #000000;
		box-shadow:         inset 0 0 7px #000000;
	}

	.valittu:hover {
		background-color: #008ae6;
	}

	.varattu {
		background-color: red;
		-moz-box-shadow:    inset 0 0 7px #000000;
		-webkit-box-shadow: inset 0 0 7px #000000;
		box-shadow:         inset 0 0 7px #000000;
	}

	.button {
		background-color: #b3b3b3;
		border: none;
		color: white;
		padding: 10px 16px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 16px;
		margin: 4px 2px;
		cursor: pointer;
		-moz-box-shadow:    inset 0 0 7px #000000;
		-webkit-box-shadow: inset 0 0 7px #000000;
		box-shadow:         inset 0 0 7px #000000;
	}

	.button:hover {
		background-color: #999999;
	}

	.button:active {
		background-color: #8c8c8c;
	}
	table {
		border-spacing: 5px;
	}
	.currentpage {
	background-color: #34495E;
	}
	.ypview {
	background-color: #E74C3C;
	}
	.priva {
	background-color: #5D6D7E;
	}
	.staff {
	background-color: #5DADE2;
	}
	.mail {
	background-color: #111;
	}
	.logout {
	background-color: #58D68D;
	}
	.login {
	background-color: #2ECC71;
	}

}
@media (min-width: 600px) {
	.topnav.responsive {position: relative;}
	.topnav.responsive a.icon {
	position: absolute;
	right: 0;
	top: 0;
	}
	.etusivu {
	background-color: #0198CD;
	}
	.currentpage {
	background-color: #34495E;
	}
	.ypview {
	background-color: #E74C3C;
	}
	.priva {
	background-color: #5D6D7E;
	}
	.staff {
	background-color: #5DADE2;
	}
	.mail {
	background-color: #111;
	}
	.logout {
	background-color: #58D68D;
	}
	.login {
	background-color: #2ECC71;
	}
	.menu a.icon {
		opacity: 0;
	}
	.menu.responsive .icon {
		opacity: 0;
	}
	.maps {
	overflow: hidden;
	padding-top: 35%;
	position: relative;
	
	}
	.maps iframe {
		border: 0;
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 800px;
	}	
	.topnav.responsive a {
	float: none;
	display: block;
	text-align: left;
	}	
	
	
	#panorama {
		width: 800px;
		height: 400px;
	}
	#googlemaps
	{
	width:800px;
	height:400px;
	}
	.pnlm-about-msg {
		opacity: 0;
	}
	* {
		box-sizing: border-box;
	}

	.paikkatausta {
		background-color: grey;
		-moz-box-shadow:    0 0 10px #000000;
		-webkit-box-shadow: 0 0 10px #000000;
		box-shadow:         0 0 10px #000000;
		margin-bottom: 5px;
	}
	table {
		border-spacing: 10px;
	}

	.tr {
		height: 50px;
	}

	.td {
		width: 100px;
		text-align: center;
	}

	.avoin {
		background-color: limegreen;
		cursor: pointer;
		-moz-box-shadow:    inset 0 0 10px #000000;
		-webkit-box-shadow: inset 0 0 10px #000000;
		box-shadow:         inset 0 0 10px #000000;
	}

	.avoin:hover {
		background-color: #2db92d;
	}

	.avoin:active {
		background-color: #007acc;
	}

	.valittu {
		background-color: #0099ff;
		-moz-box-shadow:    inset 0 0 10px #000000;
		-webkit-box-shadow: inset 0 0 10px #000000;
		box-shadow:         inset 0 0 10px #000000;
	}

	.valittu:hover {
		background-color: #008ae6;
	}

	.varattu {
		background-color: red;
		-moz-box-shadow:    inset 0 0 10px #000000;
		-webkit-box-shadow: inset 0 0 10px #000000;
		box-shadow:         inset 0 0 10px #000000;
	}

	.button {
		background-color: #b3b3b3;
		border: none;
		color: white;
		padding: 10px 16px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 16px;
		margin: 4px 2px;
		cursor: pointer;
		-moz-box-shadow:    inset 0 0 10px #000000;
		-webkit-box-shadow: inset 0 0 10px #000000;
		box-shadow:         inset 0 0 10px #000000;
	}

	.button:hover {
		background-color: #999999;
	}

	.button:active {
		background-color: #8c8c8c;
	}

	body {
		font-family: Arial, Helvetica, sans-serif;
		margin: 0px;
	}

	/* Style the header */
	.header {
		background-color: #f1f1f1;
		padding: 30px;
		text-align: center;
		font-size: 35px;
	}

	/* Container for flexboxes */
	.row {
		display: -webkit-flex;
		display: flex;
	}

	/* Left and right column */

	.menu {
	   -webkit-flex: 1;
	   -ms-flex: 1;
	   flex: 1;
	   background-color: #111;
	   overflow-x: hidden;
	}

	.menu a {
		color: white;
		padding: 16px;
		text-decoration: none;
		display: block;
	}

	/* Change color on hover */
	.menu a:hover {
		background-color: #ddd;
		color: black;
	}

	/* Middle column */
	.middle {
		-webkit-flex: 4;
		-ms-flex: 4;
		flex: 4;
		-moz-box-shadow:    inset 0 0 15px #000000;
		-webkit-box-shadow: inset 0 0 15px #000000;
		box-shadow:         inset 0 0 15px #000000;
		padding: 20px;
	}

	.middle h1 {
		margin-left: 1em;
	}

	.middle p {
		margin-left: 3em;
	}

	/* Style the footer */
	.footer {
		background-color: #f1f1f1;
		padding: 10px;
		text-align: center;
	}
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 1000px) {
    .row {
      -webkit-flex-direction: column;
      flex-direction: column;
    }
}

.alert {
    color: #721c24;
    background: #f8d7da;
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    border-color: #f5c6cb;
}

.info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}