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

/* ===========  CONTAINERS  =========== */

html, body, .module-bgcolor, .white-bgcolor { height: 100%; min-height: 100%; font-family: 'Salesforce', 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-service  		{ background: #963cbd } 
.quad-header-mc 			{ background: #ed8b00 }
.quad-header-community 		{ background: #f0b334 }
.quad-header-analytics 		{ background: #01b2aa }
.quad-header-sf1 			{ background: #418fde }
.quad-header-dataquality  	{ background: url('https://image.mail.salesforce.com/lib/fe941c72756404757c/m/1/header-bg.jpg') }

.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-service h1  	{ color: #ffffff }
.quad-header-mc h1  		{ color: #ffffff }
.quad-header-community h1 	{ color: #002244 }
.quad-header-analytics h1  	{ color: #002244 }
.quad-header-sf1 h1  		{ color: #ffffff }
.quad-header-dataquality h1	{ color: #ffffff; font-size: 66px; line-height: 70px }

.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: 0 0 15px 0; 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-sm  { padding: 20px; font-size: 21px; font-weight: normal; line-height: 30px; vertical-align: middle; color: #ffffff; background-color: #7c868d; } 

.quad-header-banner  { padding: 20px; font-size: 22px; font-weight: normal; line-height: 30px; vertical-align: middle; color: #ffffff; background-color: #7c868d; } 

.quad-header-banner-one 	{ background-color: #7c98ae; font-size: 20px!important; line-height: 44px }
.quad-header-banner-two 	{ background-color: #4e748a; font-size: 20px!important; line-height: 44px }
.quad-header-banner-three 	{ background-color: #003c4d; font-size: 20px!important; line-height: 44px }

.quad-header-banner-one img, .quad-header-banner-two img, .quad-header-banner-three img 	{ width: 44px; height: auto; margin-right: 15px }

.quad-header-intro   { }

.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 15px 0; }
.quad-column-right-promo p   { font-size: 16px; line-height: 22px; margin:0; padding: 10px}
.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  { width: 325px; 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 }

   

/* ===========  TYPOGRAPHY  =========== */

.sf-fonts, .sf-regular, .sf-italic, .sf-bold, .sf-light, .sf-light-italic, .sf-thin, .sf-thin-italic { font-family: 'Salesforce', 'Helvetica Neue', Helvetica, Arial, sans-serif }
.sf-fonts { font-style: normal; font-weight: normal; color: #333333 }
.sf-regular  { font-weight: normal; font-style: normal}
.sf-bold { font-weight: bold; font-style: normal  }
.sf-light { font-weight: 200; font-style: normal }
.sf-light-italic { font-weight: 200; font-style: italic }
.sf-thin  { font-weight: 100; font-style: normal }
.sf-thin-italic { font-weight: 100; font-style: italic }

.chevron-down-arrow   { margin:0 auto; font-size: 36px; line-height: 50px; height: 50px; color: #0077bb; text-align: center; vertical-align: middle  }
.chevron-down-arrow i   { display: block; text-align: center }

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-analytics { background:url('https://image.mail.salesforce.com/lib/fe941c72756404757c/m/2/community-wavebanner-bg.jpg') #ffffff no-repeat 95% bottom; border-bottom: 8px solid #01b2aa; }

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

.community-banner-mc { background:url('https://image.mail.salesforce.com/lib/fe941c72756404757c/m/2/community-mcbanner-bg.jpg') #ffffff no-repeat 95% bottom; border-bottom: 8px solid #ed8b00;  }

.community-banner-service { background:url('https://image.mail.salesforce.com/lib/fe941c72756404757c/m/2/community-servicebanner-bg.jpg') #ffffff no-repeat 95% bottom; border-bottom: 8px solid #963cbd;  }

.community-banner-community { background:url('https://image.mail.salesforce.com/lib/fe941c72756404757c/m/2/community-commbanner-bg.jpg') #ffffff no-repeat 95% bottom; border-bottom: 8px solid #f0b334;  }

.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-phoneone, .footer-phonetwo, .footer-pipes, .footer-body, .footer-legal  { 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-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 }
	.quad-header p { font-size: 16px; line-height: 24px; font-weight: normal; margin: 0; letter-spacing: normal }
	.quad-header-dataquality h1  { font-size: 53px; line-height: 56px; padding: 10px 20px 10px 20px }
	.quad-header-dataquality p { font-size: 16px; line-height: 24px; padding: 0px 20px 20px 20px }
	
	.quad-header-banner, .quad-header-banner-sm { padding: 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-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-subsection  { font-size: 28px; line-height: 28px; padding: 10px 0 0 0; font-weight: 200; margin: 0 }
	
	.community-banner { padding: 0 30px 30px 0!important; 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 }
	.community-banner a, .quad-column-right-promo a { width: 100%; margin: 30px 0; padding: 15px 60px; border-radius: 40px }
	
	.footer-container  { padding: 0 40px 20px 40px; margin: 30px 0 0 0; line-height: 1.5em } 
	.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-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, .quad-header-banner-sm  { font-size: 32px; line-height: 48px; margin-bottom: 0px }
	
	.community-banner a, .quad-column-right-promo a { font-size: 28px }
	
	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, .quad-header-banner-sm  { font-size: 24px; line-height: 34px }
	
    .community-banner a, .quad-column-right-promo a { font-size: 20px }

	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, .quad-header-banner-sm  { 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, .quad-header-banner-sm  { font-size: 20px; font-weight: normal; line-height: 28px } 
	

}



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

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

}