@charset "UTF-8";
/* CSS Document */

html, body, .module-bgcolor, .white-bgcolor { height: 100%; min-height: 100%; font-family: 'Salesforce', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #333333 }

.body-bgcolor { background: #f5f5f5 }
.module-bgcolor { background: #ebebeb }
.white-bgcolor { background-color: #ffffff }

.quad-logo-header  { text-align: left; vertical-align: middle; height: 75px; line-height: 75px; padding-left: 40px }
.quad-logo-header img  { width: 180px; height: auto; margin-top: 3px }

.quad-header 				{ padding: 20px 0; margin: 0; height: auto; text-align: center; color: #ffffff }
.quad-header-sales  		{ background: #418fde } 

.quad-header h1 			{ font-family: 'Salesforce', Helvetica, Arial, sans-serif; padding: 15px 20px; margin: 0; text-align: center; font-size: 52px; line-height: 56px; font-weight: 100; font-style: normal }
.quad-header-sales h1  		{ color: #ffffff }

.quad-header p 				{ padding: 0px 20px 10px 20px; margin: 0; font-weight: bold; font-size: 16px; letter-spacing: .02em; text-transform: uppercase; text-align: center; color: #fff }

.quad-topmessage    { margin: 0 40px; padding: 0 20px; background: #d9e1e2; border: none }
.quad-topmessage h2 { margin: 0; padding: 15px 0; font-size: 32px; font-weight: 200 }
.quad-topmessage p  { margin:0; padding: 10px 15px; font-size: 18px }

.quad-subsection { font-size: 20px; line-height: 28px; color: #002244; margin-bottom: 20px }
.quad-body-pad  { padding: 20px 20px 0 20px }

.quad-column-left, .quad-column-right  { background: white; border: 1px solid #dedede; padding: 0; overflow: hidden }
.quad-column-left  { margin: 0 20px 0 40px }
.quad-column-right  { margin: 0 40px 0 20px }

.quad-header-banner  { padding: 10px 20px 8px 20px; vertical-align: middle; color: #ffffff } 
.quad-header-banner p 	{ float: left; font-size: 18px!important; padding:0; margin:0; height: 46px; line-height: 24px; vertical-align: middle; width: 300px }
.quad-header-banner img 	{ float: left; width: 44px; height: auto; margin-right: 15px }
.quad-header-banner p.centerfix  { height: 36px; margin-top: 10px }
	 
.quad-header-banner-one 	{ background-color: #7c98ae; text-transform:uppercase }
.quad-header-banner-two 	{ background-color: #4e748a; text-transform:uppercase }
.quad-header-banner-three 	{ background-color: #003c4d; text-transform:uppercase }

.quad-list-notes { margin-bottom: -20px!important }

.quad-column-right-promo   { margin: 0 40px 0 20px; background: #d9e1e2; border: 1px solid #d9e1e2; padding:0; text-align: center }
.quad-column-right-promo h2, .quad-column-right-promo h3    { text-align:center; font-weight: 200  }
.quad-column-right-promo h2  { font-size: 38px; margin: 0 0 10px 0 }
.quad-column-right-promo h3  { font-size: 20px; line-height: 28px; margin:0 0 10px 0; padding: 10px 20px }
.quad-column-right-promo p   { font-size: 16px; line-height: 22px; margin:0; padding: 10px 20px }
.quad-column-right-promo a   { margin: 20px 0; padding: 15px 50px; border-radius: 40px; text-transform: uppercase; font-weight: bold; font-size: 14px; background-color: #ffffff }
.quad-column-right-promo img  { height: auto }


.quad-column-promo   { margin: 0 40px 0 20px; background: #d9e1e2; border: 1px solid #d9e1e2; padding: 0; text-align: center }
.quad-column-promo h2 { font-size: 38px; margin: 15px 0 10px 0; text-align: center; font-style: normal; font-weight: 100 }
.quad-column-promo h3  { font-size: 24px; line-height: 32px; margin: 0; padding: 0 40px; font-style: normal; text-align:center; font-weight: 200  }
.quad-column-promo p   { font-size: 14px; line-height: 20px; margin:0; padding: 10px 20px 20px 20px }
.quad-column-promo a   { display:block; width: 60%; margin: 25px auto; padding: 15px 30px; border-radius: 40px; text-transform: uppercase; font-weight: bold; font-size: 16px; background-color: #ffffff }
.quad-column-promo img  { width: 80%; height: auto }



/*  container height equalizer - from https://getbootstrap.com.vn/examples/equal-height-columns/   */
.row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }

.top-spacer  { padding-top: 20px }

p.link-inline-title  { font-size: 20px; font-weight: bold; color: #003d4c } 
p.sf-disclaimer  { margin:0; padding: 0 20px 20px 30px; font-size: 11px; line-height: 18px }



/* ===========  BUTTONS & LINKS  =========== */

a:hover  { text-decoration: none }
.top-navbar, .top-navbar ul, .top-navbar ul li {  margin:0; padding:0; font-weight: bold; text-align: right; }
.top-navbar ul li { display: inline }
.top-navbar ul li a { color: #777; padding: 30px; height: 75px; line-height: 75px; vertical-align: middle; text-decoration: none }
.top-navbar ul li a:hover { background: #0077bb; color: #ffffff }

.quad-active { background: #0077bb; color: #ffffff!important }

a.quad-btn-cta:hover { text-decoration: none; color: #00b3f0 }

ul.quad-list-links, ul.quad-list-links-noborder  { text-transform: uppercase; font-weight: bold  }
ul.quad-list-links  { padding-bottom: 15px; margin-bottom: 15px }
ul.quad-list-links-noborder  { padding-bottom: 20px; margin-bottom: 0px }
ul.quad-list-links { border-bottom: 1px solid #d7d7d7; }
ul.quad-list-links li, ul.quad-list-links-noborder li { margin-bottom: 0; list-style-position: outside; margin-left: 15px }
ul.quad-list-links li { margin-bottom: 0 }
ul.quad-list-links-noborder li { margin-bottom: 0 }
ul.quad-list-links li a, ul.quad-list-links-noborder li a  { display:inline; margin-left: 7px; line-height: 1.5em; clear: both; text-decoration: none; color: #00a1e0 }
ul.quad-list-links li a:hover, ul.quad-list-links-noborder li a:hover  { color: #0077bb }
ul.quad-list-links li:before, ul.quad-list-links-noborder li:before  { font-family: 'FontAwesome'; content: "\f0da"; font-size: 18px; color: #555555; margin-left: -14px; background-position: left bottom }






/* ===========  COMMUNITY BANNER  =========== */

.community-banner {  padding: 10px 20px; border-top: 1px solid #cdcdcd; min-height: 300px; height: 300px }

.community-banner-sales { background:url('https://image.exacttarget.com/lib/fe941c72756404757c/m/2/community-sf1banner-bg.jpg') #ffffff no-repeat 95% bottom; border-bottom: 8px solid #418fde;  }

.community-banner h1 { font-size: 40px; line-height: 42px; font-weight: 100 }
.community-banner p { margin: 0 0 50px 0; display:inline-block; font-size: 16px; line-height: 2em; font-weight: normal; }
.community-banner a { margin: 20px 0; padding: 15px 50px; border-radius: 40px; text-transform: uppercase; font-weight: bold; font-size: 14px; background-color: #d9e1e2  }
.community-banner a:hover { text-decoration: none  }



/* ===========  FOOTER  =========== */

.footer-container  { padding: 0 }
.footer-mainphone  { display: block; font-size: 20px; line-height: 24px; margin: 0; vertical-align: middle; color: #999999 }
.footer-phoneone, .footer-phonetwo, .footer-pipes, .footer-body, .footer-legal  { display: inline-block; line-height: 26px; margin: 0; vertical-align: middle; color: #999999 }
.footer-smallphones  { display: inline-block; line-height: 26px; margin: 0; vertical-align: middle; color: #999999 }
.footer-phoneone, .footer-phonetwo, .footer-pipes   { font-size: 16px; line-height: 28px }
.footer-pipes   { font-weight: 100; color: #ababab; padding: 0 1em; display: inline-block }
.footer-pipes-inline  { margin: 0 10px }
.footer-body, .footer-legal { font-size: 11px; line-height: 1.5em; display: inline-block; margin-bottom: 1.5em }
.footer-privacy  { font-size: 12px }
.footer-legal a { width: 100%; display: inline-block; color: #00a1e0 }
.social-footer { text-align: right; padding-right:0; margin-right:0  }
ul.social-footer-links  	{ display: inline-block; text-align: right; padding: 0; vertical-align: top; margin: 0 }
ul.social-footer-links li  	{ font-size: 14px; width: 28px; display: inline-block; margin-left: 8px; vertical-align: top }
ul.social-footer-links li a { vertical-align: top; color: #999999; border: none }
ul.social-footer-links li a:hover  { opacity: 0.6 }





/* ===========  MEDIA QUERIES  =========== */



/* ===========  General Mobile  ============ */

@media only screen 
  and (min-width: 320px) 
  and (max-width: 736px)  { 

	html, body { width: 100%; min-width: 100%; padding:0; margin:0 }
	
	.show  { display: none!important }
	.hide  { display: block!important }

	.row, .container, .col-xs-12, .col-sm-12 { margin:0; padding:0!important }
	.row-eq-height { display: block; }
	
	.top-navbar, .top-navbar ul, .top-navbar ul li {  margin: 0; padding: 0; font-weight: bold; text-align: right; }
	.top-navbar ul li { display: inline }
	.top-navbar ul li a { color: #777; padding: 30px; height: 75px; line-height: 75px; vertical-align: middle; text-decoration: none }
	.top-navbar ul li a:hover { background: #0077bb; color: #ffffff }

	.mobile-navbar, .mobile-navbar ul { margin:0; padding:0 }
	.mobile-navbar ul li { font-weight: bold; vertical-align: middle; text-align: left; margin: 0  }
	.mobile-navbar ul li a { display: block; background: #dedede; width: 100%; color: #777; font-size: 24px; line-height: 75px; padding: 0 0 0 20px; vertical-align: middle; margin: 0 0 10px 0 }
	.mobile-navbar ul li a:hover { display: block; width: 100%; font-size: 24px; vertical-align: middle; background: #0077bb; color: #ffffff }
	
	.quad-active, .mobile-navbar ul li a.quad-active { background: #0077bb; color: #ffffff!important }
	
	.quad-logo-header img  {  }
	.quad-logo-header  { height: inherit }
	.quad-logo-header img  { margin: 10px auto; display:block }

	.quad-header { padding: 20px; }
	.quad-header h1 { font-size: 48px; line-height: 56px; padding: 0 20px 10px 20px; font-weight: 200 }
	.quad-header p { font-size: 16px; line-height: 24px; font-weight: normal; margin: 0; letter-spacing: normal }
	
	.quad-header-banner  { padding: 10px 20px; font-weight: normal; vertical-align: middle; color: #ffffff }
	
	.quad-header-intro   { font-size: 14px; line-height: 20px; margin-top: 20px }

	.quad-topmessage { padding: 10px 20px; margin: 0 }
	.quad-topmessage h2 { margin: 0; padding: 15px 0; font-size: 28px; font-weight: 200 }
	.quad-topmessage p { margin:0; padding: 0 0 20px 0; }
	
	.quad-column-promo   { width:100%; margin: 0; background: #d9e1e2; border: 1px solid #d9e1e2; padding: 0 25px; text-align: center }
	.quad-column-promo h2  { font-size: 42px; margin: 25px 0 10px 0; text-align: center; font-weight: 200 }
	.quad-column-promo h3  { font-size: 22px; line-height: 28px; margin: 0; padding:0; text-align:center; font-weight: 200 }
	.quad-column-promo p   { font-size: 16px; line-height: 24px; margin:0; padding: 10px 20px 20px 20px }
	.quad-column-promo a   { display:block; width: 90%; margin: 0 auto; padding: 15px 50px; border-radius: 40px; text-transform: uppercase; font-weight: bold; font-size: 20px; background-color: #ffffff }
	.quad-column-promo img  { width: 80%; height: auto; margin-bottom: 30px }
	
	.quad-column-left, .quad-column-right, .quad-column-right-promo   { margin:0; border: none; }
	ul.quad-list-links, ul.quad-list-links-noborder  { font-size: 20px }
	ul.quad-list-links li, ul.quad-list-links-noborder li { margin: 15px 15px; }
	.quad-body-pad  { padding: 0 20px }
	p.link-inline-title  { font-size: 24px; margin-top: 30px } 
	.quad-column-right-promo h2 { padding-top: 20px }
	
	.quad-column-promo img { width: 80%; height: auto; margin-bottom: 30px }
	
	.quad-subsection  { font-size: 28px; line-height: 28px; padding: 10px 0 0 0; font-weight: 200; margin: 0 }
	
	.community-banner { padding: 0 30px; text-align: center; height: auto; background-color: #ffffff; background-image:none }
	.community-banner h1 { font-weight: 200!important; margin: 30px; font-size: 48px; line-height: 56px }
	.community-banner p { display:block; font-size: 24px; line-height: 28px; font-weight: 200; padding:0; margin: 0 0 10px 0 }
	.community-banner p.last-line { padding-bottom: 20px }
	
	
	.footer-container  { padding: 0 40px 20px 40px; margin: 30px 0 0 0; line-height: 1.5em } 
	.footer-mainphone  { width: 100%; text-align: center; font-size: 24px; line-height: 30px }
	.footer-smallphones { display:block; text-align: center; margin: 5px 20px 0 20px; }
	.footer-phoneone, .footer-phonetwo { width: 100%; text-align: center; font-size: 24px; line-height: 30px }
	.footer-spacing { display: inline-block; color: #f5f5f5; margin-top: -10px }
	.footer-privacy { display: block; text-align: center; margin: 20px auto }
	.footer-body    { text-align: center; margin: 10px 20px; }
	.footer-links   { margin: 20px 10px; text-decoration: none }
	.footer-pipes, .footer-spacing   { display: none }
	.footer-pipes-inline  { margin: 0 10px }
	.footer-mobile  { display: block; margin: 5px 0; padding:0 }
	
	
	.social-footer  { text-align: center; padding: 0; margin: 0 }
	ul.social-footer-links  	{ padding: 0; margin: 0 auto }
	ul.social-footer-links li  	{ font-size: 18px; width: 32px; margin-left: 15px }
	ul.social-footer-links li:first-of-type { margin-left: 0px }
	
	}
	


/* ===========  iPhone 6  ============ */

@media only screen 
  and (min-width: 414px) 
  and (max-width: 736px)  { 
  
   .quad-logo-header img  { width: 40% }
	
	.quad-header-banner  { font-size: 32px; line-height: 48px; margin-bottom: 0px }
	.quad-header-banner p  { float: left; font-size: 30px!important; font-weight: bold; line-height: 30px; padding:0; margin:0; height: 48px; width: 360px }
	.quad-header-banner img  { float: left; width: 44px; height: auto; margin-right: 15px }
	.quad-header-banner p.centerfix  { height: 36px; margin-top: 20px }
	.quad-header-banner p.centerfix-single-line   { height: 36px; margin-top: 30px }
	
	.community-cta  { margin-bottom: 20px; font-size: 20px; padding: 10px 20px; background-color: #d9e1e2; border-radius: 60px; text-align: center  }
	.community-banner a  { width: 80%; font-size: 20px; border-radius: 0px; padding: 10px 0; background: none; text-align: center }
	
	p.sf-disclaimer  { padding-left: 20px; font-size: 14px; line-height: 20px; margin-top: 20px }
	.footer-container  { font-size: 14px } 
	
	}
	
	
/* ===========  iPhone 5  ============ */

@media only screen 
  and (min-width: 320px) 
  and (max-width: 568px) {
	
	.quad-logo-header img  { width: 50% }
	.quad-header-banner  { font-size: 22px; line-height: 34px }
	.quad-header-banner p  { float: left; font-size: 18px!important; font-weight: bold; line-height: 20px; padding:0; margin:0; height: 48px; width: 75% }
	.quad-header-banner img  { float: left; width: 44px; height: auto; margin-right: 15px }
	.quad-header-banner p.centerfix  { height: 36px; margin-top: 0px }
	.quad-header-banner p.centerfix-single-line   { height: 36px; margin-top: 10px }
	
	.community-cta  { margin-bottom: 20px; font-size: 20px; padding: 10px 20px; background-color: #d9e1e2; border-radius: 60px; text-align: center  }
	.community-banner a  { width: 80%; font-size: 20px; border-radius: 0px; padding: 10px 0; background: none; text-align: center }

	p.sf-disclaimer  { padding-left: 20px; font-size: 13px; line-height: 18px; margin-top: 20px }
	.footer-container  { font-size: 13px } 
	
	}
	
	
	  
	  
/* ===========  iPad  ============ */

@media screen and (min-width: 737px) and (max-width: 991px) { 

	.quad-logo-header { padding: 0 0 0 40px; margin: 0; }
	.quad-logo-header img { margin: 3px 0 0 0; width: 100%; height: auto!important }
	
    .quad-header-banner  { font-size: 20px; font-weight: normal; line-height: 28px } 
	
	.quad-header { padding: 0 15px }
	.quad-header h1 { font-size: 40px; line-height: 52px }
	.quad-header p { font-weight: bold; margin: 0; padding: 0 0 15px 0; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; text-align: center }
	
	.top-navbar ul { margin:0; padding:0 }
	.top-navbar ul li a { padding-left: 15px; padding-right: 15px; }
	
	.quad-topmessage    { margin: 0 40px; padding: 0 20px }
	.quad-topmessage h2 { margin: 0; padding: 15px 0; font-size: 26px }
	.quad-topmessage p  { margin:0; padding: 0 0 15px 0; font-size: 16px; line-height: 22px }

	.social-footer  { text-align: center; padding: 0; margin: 0 }
	ul.social-footer-links  	{ padding: 0; margin: 0; }
	ul.social-footer-links li 	{ width: 28px; margin: 0; padding:0 } 
	ul.social-footer-links li:first-of-type  { margin-left: 0px }
	community-banner { margin: 20px 0px }
	p.sf-disclaimer  { font-size: 14px; line-height: 22px }
	
	}
	
	
	
/* ===========  Non-Jumbotron Screens  ============ */

@media screen and (min-width: 992px) and (max-width: 1199px) { 
	
	.container { width: 960px!important }
	
	.header-logo img { width: 40px; height: auto }
	.top-navbar ul li a { padding: 30px 20px; }
	
    .quad-header-banner  { font-size: 20px; font-weight: normal; line-height: 28px } 
	
}



/* ===========  Jumbotron Screens  ============ */

@media screen and (min-width: 1200px) { 
	
	.container { width: 960px!important }

}