@media (min-width: 480px) {
ul.tools:after{
	clear:both;	
}
ul.tools{
	display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
ul.tools li{
	float:left;width:45%; padding-right:	15px;
}
ul.tools li li{
	float:none;width:100%; padding-right:	0px;
}
.services label {
	font-size:16px;
}
.services label span{
	display:inline-block	
}
.cols{float: left;
    width: 55%;
    padding-right: 15px;
}
.cols2{
	float: left;
    width: 43%;
    padding-right: 15px;
}
}

@media (min-width: 579px) {

}
@media (min-width: 699px) {
header h1{
text-align:left;
display:inline;
}

.callout{
	/*line-height:45px;*/
	margin:0;
	float:right;
	text-align:right;	

}
.services label {
	font-size:18px;
}

	
}

@media (min-width: 727px) {
.hero{
    background-image: url(budgeting-for-life.jpg);
    background-size: cover;
	background-attachment:fixed;
    background-repeat: no-repeat;
    background-position: top right;
	background-color:#96d5fe
}
.inhero{
margin:0px auto;
	width:100%;
	padding:100px 0 140px 0;
	max-width:1024px;	
}

.inhero div{
	width:50%;
	padding:15px;
	text-align:left;
	background-image:url(15.png);
	min-width:320px;	
}
}
@media (min-width: 769px) {

.box{
display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden;	
}
.box .stage{
 flex: 1; margin-right: 10px;	
}

}