@media only screen and ( max-width:1098px; ){body{}
#main-outer{  margin-bottom:0;   z-index:inherit;   position:relative}
#footer{clear:both; z-index:inherit; position:relative; height:100%; float:left; background:#50b990 url(../images/footer_bg2.png) repeat}

}

@media only screen and (min-width:768px) and (max-width:1024px){body{}

#hero{overflow:hidden; width:100%; height:450px}
.hero-centered{margin-top:80px; padding-left:20px; padding-right:20px}
.hero-centered h2{font-size:3.385em}
.wrap-center{padding-left:20px; padding-right:20px}


}

@media only screen and (max-width:850px){body{}
#hero{overflow:hidden; width:100%; height:520px}
.hero-centered{margin-top:80px; padding-left:20px; padding-right:20px}
.hero-centered h2{font-size:3.385em}
.wrap-center{padding-left:20px; padding-right:20px}
p.pull-left[data-pullquote]:before{float:left; margin:0 30px 0.5em 0%}
.content-indenter{margin-left:0%}

}

@media only screen and (max-width:1024px){body{}
.two-col .element{width:22.800em; height:18.333em}
.three-col .element{width:14.7em; height:16.333em}
.four-col .element{width:10.5em; height:10.333em}
.two-col-with-text .element{width:22.800em; height:30em}
.three-col-with-text .element{width:14.7em; height:21em}
.four-col-with-text .element{width:10.5em; height:19em}

p.pull-left[data-pullquote]:before{float:left; margin:0 30px 0.5em 0%}

}

@media only screen and (max-width:767px){body{}
.features .f-figure{display:none; visibility:hidden}
.features .f-detail{width:100%; float:none; display:block}
#nav{display:none}
.js .selectnav{display:block; visibility:visible; width:100%; clear:both; padding:10px; background:#fff}
.bar{padding-bottom:30px}
#logo{float:none; margin-top:7px}
#logo h1{margin-bottom:20px}
}

@media only screen and (max-width:600px){body{}
 .one-half, .one-third, .two-third, .three-fourth, .one-fourth, .one-fifth, .two-fifth, .three-fifth, .four-fifth, .one-sixth, .five-sixth{width:100%; position:relative; margin-right:0%; float:left; margin-bottom:1em; clear:both }
 #main-outer{ z-index:200;  margin-bottom:0}
#footer{clear:both; z-index:inherit; position:relative; height:inherit; float:left; background:#50b990 url(../images/footer_bg2.png) repeat}
#logo{float:none; margin-top:7px}
#logo h1{padding:0; width:126px; height:30px; margin:0 auto 20px auto; text-indent:-999999px}
#hero{overflow:hidden; width:100%; height:390px}
.hero-centered h2{font-size:2em}
.caption-wrap{display:none}
.pricing_table.two_columns ul, 
.pricing_table.three_columns ul, 
.pricing_table.four_columns ul{width:inherit; padding:2.04%}
.pricing_table .featured_plan{padding:2.04%; margin-bottom:0}
.connect ul{margin:0; padding:0; float:none; text-align:center}

.connect ul li{list-style:none; display:inline; padding-left:0px; margin-right:0px}
.connect ul li a{display:inline-block; text-indent:-9999999px!important; padding-left:30px; position:relative}
.social{float:none!important; clear:both; margin-left:-8px}

.page-title-wrap-bg .overlay-bgcolor, 
.page-title-wrap .overlay-bgcolor{padding:30px 0}
.page-title-wrap-bg{background:none!important}
.page-title-wrap-bg h3, 
.page-title-wrap h3{font-size:2.2em; color:#333!important}
.page-title-wrap h3{color:#b2b2b2!important}
.page-title-wrap-bg h2, 
.page-title-wrap h2, 
.contact-heading{color:#333!important; font-size:3.333em; font-size:2.2em; margin:0 0 0em 0; color:#fefefe; position:relative}

.list_carousel li, 
.carousel-one-item li{margin:0 2px}
.call-to-action-wide-link a{padding:.5em 0; display:inline-block; font-size:2em; line-height:1.5}
.page-title-wrap hgroup, 
.page-title-wrap .p-nav{float:none; width:100%}

}