
/*---------------------------------
 Responsive
---------------------------------*/


@media (max-width:960px) {
	.xcontainer {width: 96%; margin: auto;}

	header {width: 96%; padding: 20px 0; margin: auto;}
	.header-right {padding-top: 0; width: 40%;}
	.xnav_container {width: 96%;}
	.xfooter {width: 96%;}
	.xfooter .xfooter_nav {font-size: 12px;}
	.xfooter .xfooter_nav a{padding: 0 6px;}
	.fm_copy {font-size: 12px;}

	.xcontent {width: 100%; min-height: 20px;}

	.sf-menu * {transition: all .5s ease; -o-transition: all .5s ease; -moz-transition: all .5s ease; -webkit-transition: all .5s ease;}
	.sf-menu a {font-size: 13px; line-height: 40px; padding: 0px 15px!important; display: block;}
	.sf-menu ul a {padding: 8px 15px!important;}
	.sf-menu li:hover ul,
	.sf-menu li.sfHover ul {top: 40px!important;}
	.sf-menu ul, .sf-sub-indicator {display: none!important;}

	#fieldset-information {width: 100%;}
	.xsearch .search-box {width: 75%;}
	.xsearch .go-btn {width: 20%;}

}

@media (max-width:800px) {
	header {margin-top: 50px;}
	.header-right {width: 50%;}
	
	.hp_content {
		width: 94%;
		background: #fff;
		padding: 25px 3%; 
		-webkit-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.5);
		-moz-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.5);
		box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.5);
	}
	
	.xsplash {display: none!important;}
	.hp_cta_block {width: 70%; margin: auto; float: none!important; padding: 0!important;}
	.hp_welcome,
	.hp_applications{width: 94%; padding: 0 3%; float: none;}
	
	.xcenter_standard {float; none; width: 94%; padding: 25px 3%;}
	.xleft_col {float; none; width: 94%; padding: 25px 3%;}
	
	.xleftnav {width: 85%; margin: 0 auto 25px;}
	.lnav_hdr{width: 95%; padding: 6px 0 6px 5%;}
	ul.fmlnav {width: 100%; padding: 0;}
	
	.xleftcallouts {width: 50%; margin: 0 auto;}
	.xint_cta {padding: 0 0 15px; width: 80%; margin: auto;}
}

@media (max-width:700px) {
	.xphone {font-size: 22px;}
	.xphone span {font-size: 16px;}
}

@media (max-width:620px) {
	.logo {margin: auto; width: 40%; float: none; display: block;}
	.xlogo .mainlogo {width: 100%; height: auto; float: none;}
	.xlogo .tagline {width: 100%; height: auto; position: relative;}
	
	.header-right {width: 90%; float: none; padding: 20px 0 0; margin: auto;}
	.xphone {text-align: center;}
	.social_icons {width: 100%; float: none; text-align: right; height: 30px; text-align: center;}
	.social_icons a {padding: 0 8px 0 0; display: inline-block; float: none;}
	.xsearch {width: 55%; height: 24px; float: none; margin: 10px auto 0; padding: 0; background: #fff; border: 1px solid #ddd; position: relative;}
	
	.xfooter .xfooter_logo {width: 30%; float: none; margin: auto;}
	.xfooter_right {width: 94%; padding: 25px 3%; float: none;}
	.xfooter .xfooter_omri {width: 25%; margin: auto; float: none; padding: 0 0 25px;}
	.xfooter .xfooter_nav {width: 100%; float: none; text-align: center;}
	.xfooter .xfooter_nav a {padding: 10px 0; display: block; background: none; font-size: 15px;}
	.fm_copy {width: 100%; float: none; font-size: 13px; color: #95816a; text-align: center; padding: 15px 0 0;}
	
	.sf-menu a {font-size: 12px;}

	.xint_header_img {display: none;}
	.xcontent #share {display: none;}
	.xcenter_standard h1 {padding-right: 0; margin-top: 5px;}
	
	.xleftcallouts {width: 80%;}
	
	.xcenter_standard iframe {width: 100%;}
	.bragboard_img {width: 90%; margin: auto; padding: 0 0 25px; float: none;}
	
	table.responsive_table.xbyb-table {padding: 0;}
	table.responsive_table.xbyb-table td {padding: 0 10px;}
}

@media (max-width:550px) {
	
	.callout-cell {float: none; display: block; width: 100%!important;}
	.xcenter_standard img {width: 70%!important; height: auto!important; margin: auto!important; padding: 10px 15%!important; float: none!important; border: none !important;}
	
	table.responsive_table td{display: block!important; width: 100%!important; padding-left: 0!important; padding-right: 0!important;}
	
	img.responsive_img {width: 90%!important; height: auto!important; float: none!important; margin: 0!important; padding: 0 5%!important; clear: both!important;}
	div.responsive_img {width: 90%!important; height: auto!important; float: none!important; margin: 0 auto!important; padding: 0 5%!important; clear: both!important;}
	div.responsive_img img {width: 100%!important; height: auto!important; clear: both!important; padding: 0!important; margin: 0!important;}
	img.calculator_btn {width: 40%!important; height: auto!important; margin: auto!important; padding: 0 30%!important; float: none!important; clear: both!important;}
}

