/* COLOURS:
	blue:
	#66CCFF
	#0099CC
	#003399
	green:
	#CCFFCC
	*/

	body {
		font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
		font-size: 0.6cm;
		transition: background-color .5s;
	}

	.title{
		color: #CCFFCC;
		background-color: #003399;
		background: linear-gradient(to right, #003399, #FFFFFF); 
		border-top-left-radius: 0.5cm;
		padding: 0.25cm 0 0.5cm 0.5cm;
	}

	.hamburger {
		font-size: 1.5cm;
		cursor: pointer;
		display: inline-block;
		color: black;
	}

	.sidenav {
		height: 100%;
		width: 0;
		max-width: 100%;
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		background-color: #66CCFF;
		overflow-x: hidden;
		overflow-y:scroll;
		transition: 0.5s;
		padding-top: 2cm;
	}
		.sidenav .langbtn img{
			width: 1.5cm;
		}

		.sidenav h2 {
			display: block;
			width: 100%;
			overflow-y: hidden;
			margin: 0;
			margin: 0;
			padding: 0.25cm 0 0.25cm 2.25cm;
			border-bottom: solid 0.1cm #FFFFFF;
			background-color: #003399;
			color: #FFFFFF;
			font-size: 0.7cm;
			transition: 0.3s;
		}

	.navblock a {
		padding: 0.15cm 0.25cm 0.15cm 2.5cm;
		text-decoration: none;
		font-size: 0.5cm;
		color: black;
		display: block;
		transition: 0.3s;
	}

		.navblock a:hover, .offcanvas a:focus {
			color: white;
			background-color: #0099CC;
		}


	.navblock .commercials_header{
		padding: 0.25cm 0 0.25cm 2.25cm;
		border-bottom: solid 0.1cm #FFFFFF;
		background-color: #888888;
		color: #FFFFFF;
	}
	.navblock .commercial_item{
		padding: 0.1cm 0 0.1cm 2.25cm;
	}
	.navblock .commercial_item a{
		padding: 0;
		text-decoration: underline;
		color:blue;
		display:initial;
	}

	.sidenav .closebtn {
		position: absolute;
		top: 0;
		left: 0;
		padding: 0;
		margin: 0;
		font-size: 2cm;
		width: 2cm;
		height: 100%;
		text-align: center;
		text-decoration: none;
		color: white;
		background-color: #003399;
	}

	.sidenav .langbtn{
		position: absolute;
		top: 0;
		right: 0;

	}


	@media screen and (max-height: 450px) {
		.sidenav {
			padding-top: 0.5cm;
		}

			.sidenav h2 {
				padding: 0.1cm 0 0.2cm 2cm;
			}

			.sidenav a {
				font-size: 0.4cm;
				padding: 0.1cm 0 0.1cm 2.1cm;
			}
	}

	.main{
		transition: margin-left .5s;
		padding: 0.5cm;

	}
	.content {
		/*  https://css-tricks.com/snippets/css/a-guide-to-flexbox/  */
		display: flex;
		flex-flow: row nowrap;
/*
		justify-content: flex-start;

*/
	}

		.content_text{
			align-items: stretch;
		}

		.content_image{
			margin-right: 0.5cm;
		}
		.content_image img{
			max-width: 100%;
		}

		/* small screens: vertical layout*/
		@media screen and (max-width : 10cm) {
			.content{
				flex-flow: column;
			}
			.content_image{
				margin-right: 0;
			}
		}

		.main h2 {
			display: block;
			width: 100%;
			border-bottom: solid 0.1cm #003399;
			border-right: solid 0.1cm #003399;
			color: #003399;
			border-radius: 0 0 0.5cm 0;
		}
		h2.error{
			color: yellow;
			background-color: red;
			border-bottom: solid 0.1cm black;
			border-right: solid 0.1cm black;
		}