@media only screen and (min-device-width : 768px) and (max-device-width : 1170px),
    only screen and (min-width : 768px) and (max-width : 1170px) {

        .container {width: 95%;}
        #mobile-menu {display: block; position: absolute; right: 0px; top: 0px;}
        section.menu-area > div > .menu_container > ul {display: none;}
        section.menu-area .container {width: 100%;}
        section.top-area .info .searchform {margin-right: 40px;}

        .sf-menu {float: none;}
        .sf-menu > li {float: none; width: 100%;}

}

@media only screen and (min-device-width : 480px) and (max-device-width : 768px),
    only screen and (min-width : 480px) and (max-width : 768px) {

    	.container {width: 95%;}
        #mobile-menu {display: block; position: absolute; right: 0px; top: 5px;}

        section.top-area .info {display: none;}
        section.top-area {padding: 10px 0px;}
        section.top-area .logo {position: relative; left: auto; margin-left: auto; top: auto; float: left;}

        section.menu-area > div > .menu_container > ul {display: none;}
        section.menu-area .container {width: 100%;} 
        .sf-menu {float: none;}
        .sf-menu > li {float: none; width: 100%;}
        
        section.info .info-box {width: 100%;}
        section.info .info-box.odd {margin-bottom: 30px;}

        section.default .content.three-quarters:before {display: none;}

        .row .half {width: 100%;}
		.row .one-fifth {width: 100%;}
		.row .four-fifths {width: 100%;}
		.row .one-quarter {width: 100%;}
		.row .three-quarters {width: 100%;}
		.row .one-quarter-custom {width: 100%;}
		.row .three-quarters-custom {width: 100%;}
		.row .one-third {width: 100%;}
		.row .two-thirds {width: 100%;}
		.row .pull-left {float: none;}
		.row .pull-right {float: none;}
		.row .pull-left .row-container {margin-right: 0px;}
		.row .pull-right .row-container {margin-left: 0px;}
        
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px),
    only screen and (min-width : 320px) and (max-width : 480px){

    	.container {width: 95%;}
        #mobile-menu {display: block; position: absolute; right: 0px; top: 5px;}

        section.top-area .info {display: none;}
        section.top-area {padding: 10px 0px;}
        section.top-area .logo {position: relative; left: auto; margin-left: auto; top: auto; float: left; max-width: 130px;}

        section.menu-area > div > .menu_container > ul {display: none;}
        section.menu-area .container {width: 100%;} 
        .sf-menu {float: none;}
        .sf-menu > li {float: none; width: 100%;}
        .sf-menu > li > a {padding: .65em 1em; font-size: 16px;}
        .sf-menu ul li a {padding: .55em 1em;}
        
        section.banner .caption .the-title {padding: 15px;} 

        section.info .info-box {width: 100%;}
        section.info .info-box.odd {margin-bottom: 30px;}

        section.choices ul li {max-width: 45%; margin: 0px 5px 15px 5px;}
        section.choices ul li img {padding: 5px;}

        section.about-us .about .about-container {padding: 25px 15px;}

        section.default .content.three-quarters:before {display: none;}

        .callout h3 span {font-size: 24px;}
        .callout h3 {font-size: 18px; line-height: 28px;}
        .callout .callout-container {padding: 15px 15px;}

        section.news .the-post.the-post-blog img {width: 100%; height: auto;}
        section.news .the-post.the-post-blog.even img {float: none; margin-right: 0px;}
		section.news .the-post.the-post-blog.odd img {float: none; margin-left: 0px;}

        .row .half {width: 100%;}
		.row .one-fifth {width: 100%;}
		.row .four-fifths {width: 100%;}
		.row .one-quarter {width: 100%;}
		.row .three-quarters {width: 100%;}
		.row .one-quarter-custom {width: 100%;}
		.row .three-quarters-custom {width: 100%;}
		.row .one-third {width: 100%;}
		.row .two-thirds {width: 100%;}
		.row .pull-left {float: none;}
		.row .pull-right {float: none;}
		.row .pull-left .row-container {margin-right: 0px;}
		.row .pull-right .row-container {margin-left: 0px;}

		.spaced-x-small {padding: 30px 0px;}
		.spaced-small {padding: 30px 0px;}
		.spaced-med {padding: 30px 0px;}
		.spaced-big {padding: 30px 0px;}

		.the-title.big {font-size: 32px; line-height: 42px;}
		.the-title.med {font-size: 28px; line-height: 38px;}
		.the-title.small {font-size: 24px; line-height: 32px;}

		.page-styles h1,
		.page-styles h2 {font-size: 32px; line-height: 38px;}
		.page-styles h3 {font-size: 28px; line-height: 38px;}
		.page-styles h4 {font-size: 26px; line-height: 32px;}
		.page-styles h5 {font-size: 22px; line-height: 32px;}
		.page-styles h6 {font-size: 17px; line-height: 28px;}
       
}

@media (max-width: 1169px) {

	.callout {text-align: center;}
	.callout h3,
	.callout .btn-area {float: none;}
	.callout h3 {padding-bottom: 10px;}
  
}

@media (max-width: 768px) {

	section.banner {padding: 30px 0px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
    section.banner .caption {min-width: 100%;}
    section.banner .caption {position: relative; top: auto !important; left: auto; margin-left: auto;}
    section.banner {min-height: 100% !important;}  
}