@font-face {
	font-family: opensans-l;
	src: url("/opensans-l.woff2") format("woff2");
	font-style: normal;
}
@font-face {
	font-family: opensans-r;
	src: url("/opensans-r.woff2") format("woff2");
	font-style: normal;
}
html {
	height: 100%;
	margin: 0;
	padding: 0;
	width: 100%;
}
body {
	background-image: url("/simply-bob_claim.svg");
	background-size: 60% 60%;
	background-repeat: no-repeat;
	background-position: center 5rem;
	color: #404040;
	font-family: opensans-l;
	height: 90%;
	margin: 0;
	overflow: hidden;
	padding: 0;
	text-align: center;
	width: 100%;
}
h1,
h2,
input[name=menu_item],
article,
#sw_hosting:checked ~ menu > li > label[for=sw_hosting],
#sw_software:checked ~ menu > li > label[for=sw_software],
#sw_consulting:checked ~ menu > li > label[for=sw_consulting],
#sw_contact:checked ~ menu > li > label[for=sw_contact],
#sw_privacy:checked ~ menu > li > label[for=sw_privacy],
menu > li > label[for=sw_home] {
	display: none;
}
#sw_hosting:checked ~ #hosting,
#sw_software:checked ~ #software,
#sw_consulting:checked ~ #consulting,
#sw_contact:checked ~ #contact,
#sw_privacy:checked ~ #privacy {
	display: inline-block;
}
#sw_hosting:checked ~ menu > li > label[for=sw_hosting] + label,
#sw_software:checked ~ menu > li > label[for=sw_software] + label,
#sw_consulting:checked ~ menu > li > label[for=sw_consulting] + label,
#sw_contact:checked ~ menu > li > label[for=sw_contact] + label,
#sw_privacy:checked ~ menu > li > label[for=sw_privacy] + label {
	display: inline;
	color: #54a2a2;
}
article {
	background-color: rgba(255, 255, 255, .95);
	margin: 0;
	min-height: 100%;
	padding: 10vh 0;
	width: 80%;
}
article > section {
	background-color: rgba(255, 255, 255, .5);
	color: #000;
	display: inline-block;
	font-size: 1.4rem;
	max-width: 40rem;
	text-align: left;
}
article > section > h3 {
	color: #54a2a2;
	font-size: 3rem;
	margin: 1.5rem;
}
article > section > p {
	margin: 1rem 2.5rem;
}
article > section > p > a,
article > section > p > label {
	color: #54a2a2;
	font-family: opensans-r;
	text-decoration: none;
}
menu {
	bottom: 1rem;
	left: 5%;
	position: absolute;
	margin: 0;
	padding: 0;
	text-align: center;
	width: 90%
}
menu > li {
	display: inline-block;
	font-size: 1.5rem;
	margin: 0 1rem 2rem;
}
menu > li > label,
article > section > p > label {
	cursor: pointer;
}
@media only screen and (( orientation: portrait ) or ( min-height: 55rem )) {
	article > section > p > span {
		color: #fff;
		display: block;
		height: 0;
		opacity: 0;
	}
}
@media only screen and ( max-width: 80rem ) {
	menu > li {
		margin: 0 .5rem 2rem;
	}
}
@media only screen and ( max-width: 50rem ) {
	article > section {
		font-size: 1.2rem;
	}
	menu > li {
		font-size: 1.2rem;
		margin: 0 .5rem 1rem;
	}
	article > section > h3 {
		font-size: 1.5rem;
	}
}
@media only screen and ( max-width: 40rem ) {	
	article > section {
		font-size: 1.1rem;
	}
	menu > li {
		font-size: 1.1rem;
		margin: 0 .2rem .5rem;
	}
	article > section > h3 {
		font-size: 1.2rem;
	}
}
@media only screen and ( max-width: 30rem ) {	
	article > section {
		font-size: 1rem;
	}
	menu > li {
		font-size: 1rem;
	}
	article > section > h3 {
		font-size: 1rem;
	}
}
@media only screen and ( max-height: 50rem ) {
	body {
		background-position: center center;
	}
	article > section {
		max-width: 60rem;
	}
	article > section > h3 {
		margin: .5rem;
	}
	article > section > p {
		margin: .5rem 2.5rem;
	}
}
@media only screen and ( max-height: 50rem ) and ( max-width: 60rem ) {
	article > section {
		max-width: 60rem;
		font-size: .9rem;
	}
	article > section > h3 {
		margin: .5rem;
		font-size: 1.1rem;
	}
	article > section > p {
		margin: .5rem .5rem;
	}
	menu > li {
		font-size: .9rem;
	}
}
@media only screen and ( max-height: 20rem ) {
	article {
		padding: 1rem 0;
	}
	article {
		padding: 1rem 0;
	}
	article > section {
		max-width: 80rem;
	}
}
@media only screen and ( max-height: 20rem ) and ( max-width: 60rem ) {
	article > section {
		font-size: .7rem;
		max-width: 80rem;
	}
	article > section > h3 {
		font-size: .9rem;
	}
	menu > li {
		font-size: .7rem;
	}
}