/* this is the container for the individual boxes of which there will always be three */
.three_to_one, .two_to_one {
	width:100%;
	padding:0px 0px 0px 0px;
	margin:0 auto;
	text-align:center;
	position:relative;
}

.two_to_one_box {
	margin: 0 auto;
	padding:20px;
	width:40%;
	display:inline-block;
	vertical-align: middle;
	position:relative;
	/* background-color:yellow;  diagnostic */
}

.three_to_one_box {
	margin:0 auto;
	padding:0px 0px, 0px, 0px;
	width:33%;
	display:inline-block;
	vertical-align: top;
	position:relative;
	/* background-color:yellow;  diagnostic */
}

.three_to_one_box img, .two_to_one_box img  {
	width:96%;
	left:10px;
}

.three_to_one_box p {
	width:90%;
	margin:0 auto;
	font-size:1em;
	line-height:1.5em;
	text-align:center;
	}
	
	
.three-to-one-flex-container {
	width:100%;
	text-align:center;
	display:flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
}

.three-to-one-flex-item {	
	width:30%;
	margin-bottom : 8px;
	margin-right: 5px;
	min-width: 260px;
	/* background: yellow; */
}

.four-to-one-item img {
	width:100%;
}

p.headline {
	color: #444;
	font-family: verdana; 
	font-size:1.1em; 
	font-weight:bold; 
	padding-bottom:.625em;
	padding-top:0;
	}
	
/* small screens */
@media screen and (max-width: 960px){
	.two_to_one_box  {
		width:86%;
		padding:0px 0px 20px 0px;
	}
	
	.three_to_one_box {
		width:86%;
		padding-bottom:30px;
	}
		
	.three-to-one-flex-item {	
		width:48%;
	}
		
	#CONTENT .three_to_one_box img { /* the mobile styles for imgs override this if #CONTENT is not specified */
		max-width:400px;
	}
}

@media screen and (max-width: 720px){
	.three-to-one-flex-item {	
		width:90%;
	}
}

/* here we define the similar class three_to_one_box_left, which has an icon and flush left text */

.three_to_one_box_left {
	margin:0 auto;
	padding:0px 0px, 20px, 0px;
	width:32%;
	display:inline-block;
	vertical-align: top;
	position:relative;
	/* background-color:pink; diagnostic */
}

.three_to_one_box_left > img {
	position:absolute;
	left:0px;
	top:-6px;
}
	
.three_to_one_box_left p {
	width:76%;
	margin:0 auto;
	font-size:.9em;
	line-height:1.5em;
	text-align:left; 
	margin-left:20%;
	}
	
/* SMALL SCREENS */
@media screen and (max-width: 960px){
	.three_to_one_box_left {
		width:100%;
		padding-bottom:30px;
		}
	
	.three_to_one_box_left img {
		position:absolute;
		left:0px;
		top:-6px;
		}	
	
	.three_to_one_box_left p {
		width:75%;
		margin-left:58px;
	}
}


.band {
	padding: 20px;
    position: relative;
    width: 100vw;
	margin:0px;
    left: calc(-50vw + 50%);
	background:#bec9e3;
	margin-bottom: 20px;
}

.band-content {
	margin:0 auto;
	padding:0px;
	padding-left:10px;
	max-width:920px;
}


/* SMALL SCREENS */
@media screen and (max-width: 960px){
	.band-content {
		padding-left:0px;
	}
}