/* infographic */
.infographic img {
	width: 100%;
	margin-bottom: 20px;
}
.info-box {
	width: 100%;
	clear: both;
	margin-top: 20px;
}
.info-col {
	width: 100%;

	vertical-align: top;
	padding: 14px;
}
.info-col ul {
	padding-inline-start: 18px;
}
div.arrow-down {
	text-align: center;
	color: #567f45;
	font-size: 300%;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}
.arrow-right {
	display: none;
} 

.col-two {
	color: #036;
	background-color: #90abda;
}
.col-three {
	color: #fff;
	background-color: #3076b4;
}
.col-four {
	color: #fff;
	background-color: #70ae4d;
}
.inner-content {
	margin-top: 50px;
}
.circle {
	border: 2px solid #70ae4d;
	border-radius: 25px;
	color: #3076b4;
	padding: 36px;
}
.circle-content {
	margin: 30px 15px;
}
.abbrev {
	margin-top: 40px;
}
.bottom-row div {
	width: 100%;
}
@media screen and (min-width: 640px) {
	.infographic img {
	width: 20%;
	}
}
@media screen and (min-width: 1200px) {
	/* adjust bootstrap column width */
	.col-lg-4 {
		max-width: 28%;
	}
	.col-lg-8 {
		max-width: 72%;
	}
	.infographic {
		margin-top: 40px;
	}
	.info-box {

		margin-top: 40px;
		clear: both;
	}
	.info-col {
		display: inline-block;
		min-height: 580px;
	}
	.col-one {
		position: relative;
		width: 36%;
		height: 100%;
		padding-top: 40px;
	}
	.col-two, .col-three, .col-four {
		width: 20%;
		height: 100%;
	}
	.col-two {
		position: relative;
		color: #036;
		background: url("/ouri/images/lt-blue-background.png") no-repeat;
		background-size: cover;
	}
	.col-three {
		position: relative;			
		color: #fff;
		background: url("/ouri/images/med-blue-background.png") no-repeat;
		background-size: cover;
	}
	.col-four {
		color: #fff;
		background: url("/ouri/images/green-background.png") no-repeat;
		background-size: cover;
	}
	.info-col h4, .abbrev h4 {
		font-size: 85%;
	}
	.info-col li, .abbrev p {
		font-size: 75%;
	}
	.arrow-right {
		display: block;
		position: absolute;
		top: 200px;
		right: -15px;
		z-index: 100;
		color: #38572b;
		font-size: 300%;
	}
	.col-two .arrow-right,
	.col-three .arrow-right {
		top: 200px;
	}
	div.arrow-down {
		display: none;
	}
	.inner-content {
		margin-top: 80px;
		margin-bottom: 80px;
	}

	.circle-content {
		margin: 25px 15px 25px 20px;
	}
	.bottom-row  {
		width: 100%;
	}
	.bottom-row div {
		width: 30%;
		margin: auto;
		font-size: 75%;
		display: inline-block;
	}
	div.left {
		width: 40%;
		text-align: left;
	}
	div.center {
		width: 40%;
		text-align: center;
	}
	div.right {
		width: 15%;
		text-align: right;
	}
}
@media screen and (min-width: 1420px) {
	.circle {
		background: url("/ouri/images/green-circle-background.png") no-repeat;
		background-size: 100%;
		border: none;
		color: #3076b4;
		padding: 36px;
	}
}