body {
	margin: 0;
	padding: 1em;
	background-color: #f5fff5;
	height: 100%;
	font-family: Roboto, Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
}

header {
	margin: 0;
	padding: 1em;
	background-color: #ebffeb;
	color: #006b00;
	clear: both;
	text-align: center;
	border: 2px solid #006b00;
	border-radius: 10px;
}

#header {
	margin: 0;
	padding: 1em;
	background-color: #ebffeb;
	color: #006b00;
	clear: both;
	text-align: center;
	border: 2px solid #006b00;
	border-radius: 10px;
}

h1, h2, h3, h4, h5, h6 {
	text-align: center;
	margin: .5em auto;
	color: #006b00;
}

#header h1 {
	font-family: 'Times New Roman', Times, serif;
	font-size: 2.5em;
	padding: 0;
	margin: 0 auto;
}

#header h2 {
	font-family: 'Times New Roman', Times, serif;
	font-size: 1.5em;
	padding: 0;
	margin: 0 auto 1em;
}

#topmenu {
	width: 100%;
	/* float: right;*/
	text-align: center;
	margin: 0 auto;
	padding: 5px;
	height: 30px;
	clear: both;
}

a:link {
	color: #00f;
}

a:visited {
	color: #800080;
}

a:active {
	color: #f00;
}

a:hover {
	color: #f00;
}

#footer a:link {
	color: #0ff;
}

#footer a:visited {
	color: #0ff;
}

#footer a:active {
	color: #f00;
}

#footer a:hover {
	color: #00f !important;
	background: #bdffbd !important;
}

p {
	padding: .5em;
}

.center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.pad-vertical {
	padding-top: 1em;
	padding-bottom: 1em;
}

.pad-horizontal {
	padding-left: 2em;
	padding-right: 2em;
}

.italic {
	font-style: italic;
}

.justify {
	text-align: justify;
}

.popbox span {
	background-color: white;
	color: black;
	left: -1000px;
	padding: fb;
	position: fixed;
	text-decoration: none;
	top: 0;
	visibility: hidden;
}

.popbox:hover span {
	background-color: white;
	border: 1px solid black;
	color: black;
	font-size: 1em;
	line-height: 1.5em;
	padding: 5px;
	text-align: left;
	text-decoration: none;
	position: fixed;
	left: 10px;
	top: 10px;
	visibility: visible;
	/*  width: 70%;*/
	width: 170px;
	z-index: 50 !important;
	/*   -webkit-border-radius: 0.50em
   -moz-border-radius: 0.50em;*/
	border-radius: .50em;
	/*   CCborderRadius: 0.50em;*/
}

.menubutton {
	border: 1px solid black;
	border-radius: 10px 10px 10px 10px;
	/*  -ms-border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  -khtml-border-radius: 10px 10px 10px 10px;*/
}

.darkshadow {
	box-shadow: 10px 10px 15px #000;
	/*   -webkit-box-shadow: 10px 10px 15px #000;
   -moz-box-shadow: 10px 10px 15px #000;*/
}

.lightshadow {
	box-shadow: 4px 4px 2px #ffc;
	/*   -webkit-box-shadow: 4px 4px 2px #ffc;
   -moz-box-shadow: 4px 4px 2px #ffc;*/
}

.innershadow {
	background-color: #fff;
	padding: 10px;
	/*   -moz-box-shadow: inset 0 0 1em gold;
   -webkit-box-shadow: inset 0 0 1em gold;*/
	box-shadow: inset 0 0 1em gold;
}

:target {
	background-color: #ff9;
	color: #00279d;
}

p:target {
	background-color: #ff9;
	color: #004f95;
}

.span-col-2 p:first-of-type::first-letter,
.fancy p:first-of-type::first-letter {
	float: left;
	color: #006b00;
	font-size: 60px;
	line-height: 50px;
	padding-right: 7px;
	font-family: Georgia;
}

.rounded-corners {
	border-radius: 10px;
}

.rounded-10	{
	border-radius: 10px;
}

.announce {
	border: 2px solid green;
	border-radius: 10px;
	background-color: #FFEBE0;
	color: black;
}

.pagetitle {
	border: 2px solid green;
	border-radius: 10px;
	background-color: #fff;
	color: black;
	text-align: justify;
	padding: 0 2em;
}

.warning {
	border: 2px solid green;
	border-radius: 10px;
	background-color: #FFE5E5;
	color: black;
	text-align: center;
	padding: 0 2em;
}

.greenstuff {
	border: 1px solid #009400;
	border-radius: 10px;
	background: #009400;
	color: #DBFFDB;
	text-align: center;
	padding: 0 .5em;
	line-height: 1.5;
	margin: 0;
}

.images {
	max-width: 100%;
}

.marginauto {
	margin: auto;
}

.bordergreen	{
	border: 1px solid green;
}

.c1 {
	border: 1px solid green;
	margin: auto;
}

.c2 {
	width: 100%;
	height: 1px;
	background-color: #00AD00
}

.c3 {
	margin: auto;
}

.c4 {
	border: 1px solid #8AFF8A;
	border-radius: 10px;
	background: #009400;
	color: #DBFFDB;
	text-align: center;
	padding: .5em;
	margin: .5em 0;
}

.float-left {
	float: left;
	margin: 5px 10px 5px 0;
}

.float-right {
	float: right;
	margin: 5px 0 5px 10px;
}

.emphasis {
	font-style: italic;
}

.greentext {
	color: #006b00;
}

.yellowback {
	background-color: #FFFFE0;
}

.greenback {
	background-color: #F0FFF0;
}

.redback {
	background-color: #FFE5E5;
}

.blueback {
	background-color: #E5F2FF;
}

.otherback {
	background-color: #FFF8F5;
}

.boldtext {
	font-weight: bold;
}

.title {
	position: relative;
	text-align: center;
	margin: 0 auto;
	width: 100%;
}

.title--regular {
	font-family: 'Roboto', Arial, sans-serif;
}

.title--size-large {
	font-size: 36px;
	line-height: 46px;
}

.title--size-semimedium {
	font-size: 20px;
	line-height: 28px;
}

.title--weight-normal {
	font-weight: 400;
}

.title--weight-bold {
	font-weight: 700;
}

.title--subtitle {
	padding-bottom: 40px;
	font-family: 'Open Sans', Arial ,sans-serif;
	text-align: center;
}

/* Grid Implementation */

.grid {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto;
	grid-gap: 10px;
}

.page {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto;
	grid-gap: 10px;
}

.span-col-1 {
	grid-column: auto;
}

.span-col-2 {
	grid-column: auto;
}

.span-col-3 {
	grid-column: auto;
}

.announce, .title, .footer  {
grid-column: auto;
}

.span-row-2 {
	grid-row: span 2 / auto;
}

.box-m	{
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto;
	grid-gap: 10px;
	align-content: center;
	height: 100%;
}

/*@media (min-width: 480px) {
.grid {
    display: grid;
    grid-template-columns: 40% 1fr;
    grid-gap: 10px;
}
.span-col-1 { grid-column: auto; }
.span-col-2 {grid-column: span 1 / auto;}
.span-col-3 {grid-column: span 2 / auto;}
.span-row-2 {grid-row: span 2 / auto;}
}*/

@media (min-width: 600px) {
	.grid {
		display: grid;
		grid-template-columns: 35% 35% 1fr;
		grid-gap: 10px;
	}

	.page {
		display: grid;
		grid-template-columns: 35% 35% 1fr;
		grid-gap: 10px;
	}

	.span-col-1 {
		grid-column: auto;
	}

	.span-col-2 {
		grid-column: span 2 / auto;
	}

	.span-col-3 {
		grid-column: span 3 / auto;
	}

	.announce, .title, .footer {
		grid-column: span 3 / auto;
	}

	.span-row-2 {
		grid-row: span 2 / auto;
	}
}

/*.span-col-1 {  }
.span-col-2 {  }
.span-col-3 {  }
.span-row-2 {  }*/
/*@supports (display: grid) {
  .ex1 .container {
    display: grid;
    grid-template:
        '??  ??' 60px
        '??  ??' 300px
        '??  ??' 100px /
        1fr 3fr ;
  }
}
*/

/* Flexbox Fallback */

.ex1 .container {
	display: flex;
	flex-wrap: wrap;
}

.ex1 .red {
	grid-area: area-red;
	/*  flex-basis: 100%;*/
	height: 60px;
}

.ex1 .orange {
	grid-area: area-orange;
	flex: 1;
}

.ex1 .yellow {
	grid-area: area-yellow;
	flex: 3;
	height: 300px;
}

.ex1 .green {
	grid-area: area-green;
	/*  flex-basis: 100%;*/
	height: 100px;
}

.fit-wide {
	position: relative;
	overflow: hidden;
	max-width: 1240px;
	margin: 0 auto;
	padding-top: 60px;
	padding-bottom: 60px;
	padding-left: 20px;
	padding-right: 20px;
}

.background-wrap {
	position: relative;
}

.background-wrap.cloud-blue {
	background-color: #b0e0e9;
}

.background-wrap.white {
	background-color: #fff;
}

.error h1, .error p {
	color: #226d7a;
}

.error--bg__cover {
	position: absolute;
	top: 0;
	width: 100%;
}

.error--shape__clouds svg {
	display: block;
}

.abstract-half-dot--circle {
	z-index: 0;
	position: absolute;
	left: 15em;
	right: 0;
	width: 300px;
	height: 300px;
	margin: 0 auto;
}

.icon-graphic {
	z-index: 1;
	position: relative;
	width: 300px;
	height: 300px;
	margin: 0 auto;
}

@media screen and (max-width: 767px) {
	.error--bg__cover {
		display: none;
	}

	.abstract-half-dot--circle {
		left: 0;
	}
}