@charset "UTF-8";
/* CSS Document */
/* NOTES: container is full width, col-sm-12 gives you 20px padding on either side*/

/* here is where you put the customizations - load this last */

body {background-color:#FFF;font-family: 'Roboto', sans-serif;font-size:14px;}

/* NOTE: width of the container is set by bootstrap according to device - use container like wrapper - put each major section into a container
/* container is full width, the columns (ie. col-sm-12) gives you 20px left and right padding */

/* SECTION BY SECTION STYLING --------- */

#top {
	position:relative;
	top:0;
	width:100%;
	height:auto;
	background-color:#0E9741;
	text-align:center;
	color:#FFF;
}
#top h1 {padding:0;font-size:2.5rem;}
#top a {color:#FFF; text-decoration:underline;}

/* ------------------------------------*/

#header {width:100%; height:100px; } 
.tagline {color:#24408F; font-weight:bold; text-align:right; padding-top:30px;font-style:italic;font-size:1.5em;}
/* main content block for all pages */

.navbar-default {background:none; border:none;}
.navbar li {text-transform:uppercase;font-size: 1.6rem;font-weight:400;
line-height: 1;display:inline-block;}
.nav .navbar-nav > li > a:hover {color:#0E9741;}

/* ------------------------------------*/

#hero {background-color:#474747;}
.hero-textbox ul {list-style:none;padding-left:5px;}
.hero-textbox ul li {padding-bottom:5px; font-size:1.1em;}
.check {color:#0E9741;padding-right:7px;}

.section-title {padding:0 0 15px 0; text-align:center;text-transform:uppercase;}
.box-title {background-color:#ddd;color:#474747;font-weight:bold;padding:10px;}

/* ------------------------------------*/

#section1 {background-color:#edecd9;padding:20px 0;border-bottom:3px solid #e8e8e8;}
#section2 {padding:20px 0;}
#process {	padding:20px 20px; background-color:#f1f1f1;}

/* ------------------------------------*/

#whowehelp {
	background:url(../images/bg-houses.jpg) no-repeat;
	background-position:center;
	padding:20px 20px;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;}
#whowehelp li {list-style-image:url(../images/check-mark.gif);padding-bottom:5px; font-size:1.2em;}

/* ------------------------------------*/

#cta {width:100%; background-color:#24408F;padding:25px;color:#FFF;}
.cta {text-align:center; font-size:2em;}
.divider-candy {
    z-index: 100;
    position: absolute;
    left: 50%;
    margin-left: -20px;
    height: 40px;
    width: 40px;
	background-color:#24408F;
	transform: rotate(135deg);
}
.divider-candy.top {margin-top:-45px;}

/* ------------------------------------*/

#about {	padding:20px 0 40px 0;
}

/* ------------------------------------*/

#bigfoot {background-color:#e2eaf7;	padding:20px 20px;} 
#bigfoot h4 {text-transform:uppercase;}
#bigfoot img {margin-left:-20px;}

/* ------------------------------------*/

#footer {background-color:#24408F;	padding:15px 0 10px 0; color:#FFF; text-align:center;font-size:90%;}


/* TEXT STYLING ----- */
h1 {font-size:2em;}
h2 {font-size:1.7em;}
h3 {font-size:1.4em;}

.emphasis {font-weight:bold; font-size:1.2em;}
.pad {padding:10px 10px;}

iframe {max-width:100%;}

/* photo frames */
.frame {border:3px solid #e8e8e8;}
.frame2 {padding:8px;background:#fff;box-shadow: 3px 5px 8px rgba(0,0,0,0.70);-moz-box-shadow: 3px 5px 8px rgba(0,0,0,0.70);-webkit-box-shadow: 3px 5px 8px rgba(0,0,0,0.70)}
.frame3 {padding:10px;background:#fff;box-shadow: 3px 5px 8px rgba(164,166,173,0.70);-moz-box-shadow: 3px 5px 8px rgba(164,166,173,0.70);-webkit-box-shadow: 3px 5px 8px rgba(164,166,173,0.70)}
/* frame 3 is lighter */

/* shadow border bottom - box-shadow: [horizontal offset] [vertical offset] [blur radius] [color];*/
.shadow-bottom {
  -webkit-box-shadow: 0 10px 15px #333;
  -moz-box-shadow: 0 10px 15px #333;
  box-shadow: 0 10px 15px #333;
}
.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}
.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 25px;
}
.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 35px;
}


/* IPAD  ----- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait){
/* styles here */
}

/* SMARTPHONE */
@media only screen 
and (max-device-width : 400px) {
	.hero-img {display:none;}
/* styles here */
}