
/* threeup is like the bootstrap style where you see three team members in a row with an image and credential, then on mobile, they all stack vertically */
 /*
.threeup {
	background: inherit; 
	width:30%;
	font-size:1.2em;
	display:inline-block;
	vertical-align: top;
	text-align: center;
	margin:0;
	padding:8px;
}
*/

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

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

.three_to_one_box img {
	width:100%;
	left:10px;
}

.three_to_one_box p {
	width:90%;
	margin:0 auto;
	font-size:1em;
	line-height:1.5em;
	text-align:center;
	}
	
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){
	.three_to_one_box {
		width:86%;
		padding-bottom:30px;
		}
		
	#CONTENT .three_to_one_box img { /* the mobile styles for imgs override this if #CONTENT is not specified */
		max-width:400px;
	}
}


/* 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:-10px;
		top:-6px;
		}	
		
	.three_to_one_box_left p {
		width:80%;
		margin-left:50px;
	}
}


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

.band_content {
	margin:0 auto;
	padding:0px;
	padding-left:10px;
	max-width:860px;
}


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