:root {
	--menu-color: rgb(52, 50, 50);
	--hover-color: rgb(255,80,80);
	--menu-forecolor: white;
	--menu-submenu: aliceblue;
	--page-bg: #f5f7fb;
	--panel-bg: #ffffff;
	--text-color: #252a31;
	--muted-color: #606a75;
	--line-color: #dce2ea;
	font-family: 'Open Sans', sans-serif;
 }

body {
	margin: 0;
	background: var(--page-bg);
	color: var(--text-color);
	line-height: 1.65;
}

a {
	color: #225ea8;
}

.page {
	max-width: 1200px;
	margin: 0 auto;
	background: var(--panel-bg);
	box-shadow: 0 18px 45px rgba(24, 35, 49, 0.08);
}

.content {
	padding: 1.4rem clamp(1rem, 3vw, 2rem) 2rem;
}

.hero-image {
	display: block;
	width: 100%;
}

.menucontainer {
	background-color: var(--menu-color);
	align-items: left;
	display: flex;
	flex-direction: column;
	padding: 0px;
}

.menucontainer input {
	display: none;
}

#menucheck ~ #drawer {
	display: none;
}

#menucheck:checked ~ #drawer {
	display: block;
}

.menucontainer ul {
	margin: 0em;
	padding: 0em;
	list-style-type: none;
}

.menucontainer ul li {
	position: relative;
	float: none;
	background-color: var(--menu-color);
	border-left: 1px solid rgb(0,0,0,.1);
}
.menucontainer label {
	position: relative;
	float: none;
	background-color: var(--menu-color);
	height: 3em;
	display: flex;
	justify-content: center;
}
.menucontainer ul li a {
	padding: 0px 14px;
	text-decoration: none;
	height: 3em;
	display:table-cell;
	vertical-align: middle;
	color: var(--menu-forecolor);
	font-weight: 700;
}
.menucontainer ul li ul {
	left: 50%;
	top: 0em;
	position: absolute;
	display: block;
	width: 50%;
	z-index: 100;
	visibility: hidden;
	box-shadow: 0.2em 0.2em 0.2em 0.2em rgba(0,0,0,0.35);
}
  
.menucontainer ul li ul li{
	display: block;
	float: none;
	border-top: 1px solid rgb(0,0,0,.1);
	background-color: var(--menu-submenu);
}

.menucontainer ul li:hover {
	background-color: var(--hover-color);
}

.menuextra {
	display:inline;
	align-items:  center;
	background-color: yellowgreen;            
	margin-left:auto; margin-right:1em;
}
.menupulldown:after {
		content:  "\2BC8"
	}

#menudiv {
	background-color: var(--menu-color);   
	padding: 0.7em 0.5em;
	margin: auto;
	margin-left: 0px;
	color: var(--menu-forecolor);
}
#menudiv:hover {
	background-color: var(--hover-color);   
}

.responsivegrid {
	display: flex;
	flex-direction: column-reverse;
}

.responsivegrid > div {
	min-width: 0;
	padding: 0 clamp(1rem, 3vw, 2rem) 2rem;
}

.downloadbutton {
    display: block;
    margin-top: 2rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.4em;
    color: #ffffff;
    background-image: linear-gradient(to bottom right, #4792e7, #3457cc);
    padding: 0.5rem 2.5rem 0.5rem 2.5rem;
    border-radius: 1em;
	border: 0;
	text-decoration: none;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 255, 0.2), 0 6px 20px 0 rgba(0, 0, 255   , 0.19);
	width: 5em;
	text-align: center;
}

.downloadbutton a {
	color: #ffffff;
}
.downloadbutton:hover {
    background-image: linear-gradient(to bottom right, #57a2f7, #4467dc);
	text-decoration: underline;
}

.noindent {
	margin: 0.5rem 0 1rem;
	padding-left: 1.5rem;
	list-style-position: outside;
}

.noindent li {
	margin: 0.35rem 0;
	padding-left: 0.2rem;
}

.exampleheader {
	border-left:  0.3em solid #2e7d5b;
	background-color:   #edf6f2;
	padding: 0.5em 1em;
	font-weight: 700;
	border-radius: 0 8px 8px 0;

}

.notice {
	margin: 1rem 0;
	padding: 0.8rem 1rem;
	border: 1px solid #cfe4d9;
	border-radius: 8px;
	background: #f0f8f4;
	color: #245b43;
	font-weight: 700;
}

.screenshot,
.responsive-image {
	display: block;
	width: 100%;
	border-radius: 8px;
	border: 1px solid var(--line-color);
}

#box1 {
	line-height: 0px;
}

@media (min-width: 768px) {
	#menucheck ~ #drawer {
		display: block;	
	} 
	#menulabel {
		display: none;
	}   
	.menucontainer {
		align-items: center;
		flex-direction: row;
	}
	
	.menucontainer ul li {
		float: left;
	}

	.menucontainer ul li ul {
		left: 0;
		top: 3em;
		width: 15em;
	}
	
	.menucontainer ul li a {
		padding: 0px 8px;
	}
	.menupulldown:after {
		content:  "\2BC6";
	}

	.responsivegrid {
		flex-direction: row;
	}
}