* {
	box-sizing: border-box;
}
body {
	background-color: #24564f;
	margin: 0;
	font-family : "open_sansregular", sans-serif;
	color: #24564f;
}
h1 {
	font-size: 50px;
	text-align: center;
	font-family : "open_sansbold", sans-serif;
}
h2 {
	font-size: 25px;
	font-family : "open_sansbold", sans-serif;
	background-color: #ffe04a;
	border-radius: 55px;
	border-bottom: 3px #ffcf42 solid;
	margin-left: -45px;
	padding: 10px 0 10px 45px;
	margin-top: 60px;
}

div.icon-list {
	display: flex;
	align-items: center;
}

div.icon-list__icon {
	width: 70px;
	flex-grow: 0;
}
div.icon-list__icon--small {
	width: 50px;
	flex-grow: 0;
}
div.icon-list__text {
	flex: 1;
}

div.page-container {
	max-width: 1050px;
	margin: 0px auto;
	background-color: white;
	padding: 10px 50px;
	color: #24564f;
}
a, a:link, a:visited, a:hover, a:active {
	color: #24564f;
}
img {
	max-width: 80%;
}
img.scoodle-play {
	display: block;
	margin: 0 auto;	
}
img.centered {
	display: block;
	margin: 10px auto;
	border: 2px #43c0c5 solid;
}
img.medium-size {
	max-width: 567px;
}
img.small-icon {
	max-width: 43px;
}
@media only screen and (max-width: 500px) {
	div.page-container {
		padding: 10px;
	}
	img {
		max-width: 95%;
	}
}
.list-image-container {
	padding: 10px 0px;
	clear: both;
}
.list-image {
	float: left;
}
header {
	background-color: white;
	max-width: 1050px;
	margin: 0px auto;
}
ol.contents-block {
	counter-reset: list;
	background-color: #7dbcc3;
	padding: 40px 50px;
	margin: 0;
	font-size: 20px;
}
li.contents-block__item {
	list-style: none;
	margin: 0 0 5px 0;
}
li.contents-block__item:before {
	content: counter(list) ") ";
	counter-increment: list;
}
ol > li {
	margin: 10px 0;
}
ol.bold-list {
	font-weight: bold;
}
p.inline-remark {
	margin: 10px 0;
}
div.side-by-side-image__container {
	text-align: center;
}
.side-by-side-image__image {
	/* width: 100%;
	max-width: 425px; */
	height: 550px;
	vertical-align: top;
	border: 2px #43c0c5 solid;
	margin: 10px 0;
}
span {
    font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 2em;
    font-weight: bold;
    color: #24564f;
    background-color: #ffe04a;
    display: block;
    width: 2em;
    height: 2em;
    line-height: 2em;
    border-radius: 0 0.5em 0.5em 0;
    text-align: center;
	position: fixed;
	bottom: 0;
	right: 10px;
}

span.rotated {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    /* IE < 10 follows */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}