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




/* ===========  PRELOADER  =========== */

body::after{
    position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
    content:url('https://image.mail.salesforce.com/lib/fe941c72756404757c/m/2/getting-started-hub-banner-940.png') url('https://image.mail.salesforce.com/lib/fe941c72756404757c/m/2/getting-started-hub-banner-1160.png') url('https://image.mail.salesforce.com/lib/fe941c72756404757c/m/2/map-chart-bg.png') url('https://image.mail.salesforce.com/lib/fe941c72756404757c/m/2/getting-started-hub-banner-480.png')
url('https://image.mail.salesforce.com/lib/fe941c72756404757c/m/2/combohub-tablet-retina.png');
}



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

html, body, .module-bgcolor, .container, .white-bgcolor, .col-xs-4  { height: 100%; font-family: 'Salesforce', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #161616 }

.panel-body  { padding-bottom: 20px }

.header-logo { padding: 15px 0 0 0; margin: 0 }

.hub-header, .hub-header-tall { padding: 0; margin:0; height: 200px; min-height: 200px; background: #4e758b url('https://image.mail.salesforce.com/lib/fe941c72756404757c/m/2/combohub-bannerbg-1140.png') repeat-x bottom left }
.hub-header h1, .hub-header-tall h1 { padding: 20px 0 0 0; font-size: 51px; font-weight: 200; text-align: center; color: #ffffff; font-weight: 100  }
.hub-header p, .hub-header-tall p { text-transform: uppercase; text-align: center; color: #ffffff; padding: 0 0 10px 0; margin: 0; font-size: 16px }


.hub-intro  { margin-left: 15px; }
.hub-intro h2  { color: #005290; font-weight: 200; margin: 10px 0 20px 0 }
.hub-intro p   { font-size: 18px; line-height: 24px }
.hub-intro p.product-intro  { font-size: 20px; line-height: 24px; font-weight: 200; margin: 30px 0 0 0}

.business-goals-inset { height: auto; min-height: 340px; padding: 0; margin: 0 15px 25px 15px; background: url('https://image.mail.salesforce.com/lib/fe941c72756404757c/m/2/map-chart-bg.png') repeat }
.business-goals-inset p { margin: 0; padding: 30px 35px 20px 35px; font-size: 18px; line-height: 24px }
.business-goals-inset p.business-description { font-size: 14px; line-height: 18px } 
.business-goals-inset a { display:block; color: #418fde; font-weight: bold; text-transform: uppercase; text-decoration: none }
.business-goals-container   { min-height: 620px; background: #ededed }
.primary-content, .primary-content-noindent   { margin: 0; padding: 0; background: white }
.primary-content img  { display: inline-block; width: 60px; float: left; margin: 0 20px 10px 0 }
.primary-content h4, .primary-content-noindent h4  { display: inline-block; overflow: hidden; margin: 0; padding: 0; font-size: 20px; line-height: 28px; font-weight: bold }
.primary-content p, .primary-content-noindent p  { overflow: hidden; font-size: 14px; line-height: 18px; padding:0; margin: 0 0 10px 0 }
.primary-content-noindent h4  { }
.primary-content-noindent p  { }
.primary-content-noindent a { display: block; margin-bottom: 20px; font-weight: bold }
.primary-content-noindent a:last-of-type { margin: 0!important }
 section.secondary-content    { padding-left: 80px }
 section.secondary-content h4 { font-size: 16px; line-height: 22px; font-weight: bold; margin-top: 20px;  }
 section.secondary-content p { font-size: 13px; line-height: 20px; margin-bottom: 10px; padding: 0 }
 section.secondary-content a { display: block; margin: 0 0 10px 0; font-weight: bold }
p.secondary-header  { margin: 30px -20px 0 -20px; padding: 10px 0 15px 100px; border-bottom: 1px solid #cdcdcd; background: #ffffff; font-size: 24px; line-height: 28px }

.section-spacer  { height: 5px; max-height: 5px; display: block; margin:0; padding: 1px 0 0 0 }



/* ===========  NAV & BUTTONS  =========== */  

#main-tab-navigation  { background: #ffffff}
ul.resp-tabs-list { position: relative; margin: 0 0 0 22px; padding: 0px; border: none !important }
.resp-tabs-list li  { font-weight: bold; width: 15%; font-size: 14px; display: inline-block; padding: 25px 15px; margin: 0px .67%; list-style: none; text-align: center; cursor: pointer; float: left; border: 1px solid black !important;  background: #fff!important }
.resp-tab-active::after {  position: absolute; top: 99%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; pointer-events: none; border-width: 12px; margin-left: -12px; z-index: 999 }
.resp-tabs-container { padding: 0px; clear: left }
h2.resp-accordion { cursor: pointer; padding: 5px; display: none; }
.resp-tab-content { display: none; padding: 0 15px 15px 15px }


	      	/*   Tab backgrounds  */

.resp-tabs-list .resp-tab-active {
	position: relative; padding: 25px 15px !important; color: #fff }
.resp-tabs-list li.sales-tab:hover, .resp-tabs-list .resp-tab-active.sales-tab  { 
	background-color: #418fde !important; border: 1px solid #418fde !important; color: #fff }
.resp-tabs-list li.service-tab:hover, .resp-tabs-list .resp-tab-active.service-tab  { 
	background-color: #953bbc !important; border: 1px solid #953bbc !important; color: #fff }
.resp-tabs-list li.marketing-tab:hover, .resp-tabs-list .resp-tab-active.marketing-tab  { 
	background-color: #ec8a00 !important; border: 1px solid #ec8a00 !important; color: #fff }
.resp-tabs-list li.community-tab:hover, .resp-tabs-list .resp-tab-active.community-tab  { 
	background-color: #ffc62c !important; border: 1px solid #ffc62c !important; color: #fff }
.resp-tabs-list li.analytics-tab:hover, .resp-tabs-list .resp-tab-active.analytics-tab  { 
	background-color: #00b1a9 !important; border: 1px solid #00b1a9 !important; color: #fff }
.resp-tabs-list li.platforms-tab:hover, .resp-tabs-list .resp-tab-active.platforms-tab  { 
	background-color: #001770 !important; border: 1px solid #001770 !important; color: #fff }	 
	 
	 
	     	/*   Tab arrows  */

li.sales-tab::after { border-top-color: #418fde !important }
li.service-tab::after { border-top-color: #953bbc !important }
li.marketing-tab::after { border-top-color: #ec8a00 !important }
li.community-tab::after { border-top-color: #ffc62c !important }
li.analytics-tab::after { border-top-color: #00b1a9 !important }
li.platforms-tab::after { border-top-color: #001770 !important }
	 
.resp-content-active, .resp-accordion-active { display: block; }
h2.resp-accordion { font-size: 13px; margin: 0px; padding: 10px 15px }
h2.resp-tab-active { margin-bottom: 0px !important; padding: 10px 15px !important; background: #418fde }



/* ===========  ACCORDIONS  =========== */

#accordion-subsections { margin: 10px 35px; padding: 35px 0 30px 0 }
#accordion-subsections div { display: none; overflow: hidden; padding: 20px; margin: 0 }
#accordion-subsections h3 { cursor: pointer; background: #b7c9d3; font-weight: normal; padding: 15px 20px; margin: 0; font-size: 22px; color: #333333 }
#accordion-subsections h3:hover { opacity: .9 }
#accordion-subsections h3 + div { margin-bottom: 0px }
i.hub-plus-expander  { vertical-align: top; margin-right: 10px; line-height: 22px; color: #0077bb }
i.hub-plus-expander-main  { display: none }
a.accordion-links  { color: #333; text-transform: none; font-weight: normal } 



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

h3.section-headers  { font-size: 24px; line-height: 32px; font-weight: bold; color: #00336f }
.section-leads  { font-size: 18px; line-height: 26px; font-weight: 200 }
.subhead  { display:block; font-size: 16px; line-height: 1.5em; font-weight: normal; margin-bottom: 2em; }

p.business-header  { margin: 20px 0 0 20px; font-family: 'Salesforce', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: bold; color: #00396b }



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

.community-banner { background:url('https://image.mail.salesforce.com/lib/fe941c72756404757c/m/1/community-banner-bg.jpg') #ffffff no-repeat 95% bottom; margin-top: 20px; padding: 10px 15px; border-top: 1px solid #cdcdcd; border-bottom: 8px solid #418fde }
.community-banner p { margin: 20px 0 30px 0}
.community-banner h1 { font-size: 40px; line-height: 42px; font-weight: 100 }
.community-banner a  { margin-bottom: 80px }



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

.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: 18px; line-height: 28px }
.footer-pipes   { font-weight: 100; color: #ababab; padding: 0 1em; display: inline-block }
.footer-body, .footer-legal { font-size: 12px; line-height: 1.5em; display: inline-block }
.footer-privacy  { font-size: 12px }
.footer-legal a { width: 100%; display: inline-block }
.social-footer { text-align: right }
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  =========== */

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

	header, section, article, aside  { margin:0!important; padding:0!important }

	.container  { margin: 0; padding: 0 }

	.header-logo  { padding: 15px 0 15px 20px; margin: 0; text-align: left }
	
	.hub-header, .hub-header-tall { padding: 10px 0; margin:0; background: #4e758b url('https://image.mail.salesforce.com/lib/fe941c72756404757c/m/2/combohub-bannerbg-480.png') repeat-x bottom left }
	.hub-header { height: 200px; min-height: 200px } 
	.hub-header-tall  { height: 240px; min-height: 240px } 
	.hub-header h1, .hub-header-tall h1 { margin: 10px 20px; padding: 0; font-size: 38px; line-height: 38px }
	.hub-header p, .hub-header-tall p { padding: 0 20px; font-size: 13px }
	
	.hub-intro  { padding: 20px 5px }
	.hub-intro h2 { color: #005290 }
	
	.business-goals-inset { width:100%; height: auto; min-height: inherit; margin: 0; background: #ebebeb }
	.business-goals-inset p { font-size: 18px; line-height: 24px }
	.business-goals-inset p.business-description { font-size: 14px; line-height: 18px } 
	.business-goals-inset a { display:block; color: #418fde; text-decoration: none; font-size: 18px; line-height: 24px }
	.primary-content, section.secondary-content   { padding: 20px!important }
	.primary-content img  { display:none }
	.primary-content h4   { margin: 0; padding: 0; font-size: 18px; line-height: 24px; width: 80% }
	.primary-content p   { font-size: 14px; line-height: 20px; padding:0; margin: 0 0 10px 0 }
	
	.primary-content-noindent  { }
	.primary-content-noindent h4  { padding: 20px 20px 0 20px; font-size: 16px; line-height: 22px  }
	.primary-content-noindent p  { padding: 0 20px; font-size: 14px; line-height: 20px;  }
	.primary-content-noindent a { padding: 0 20px; font-size: 14px; line-height: 20px; margin:0 }
	.primary-content-lastlink { margin-bottom: 0!important }
	.primary-content-noindent a:last-of-type { padding-bottom: 20px  }

	p.secondary-header, p.secondary-header-noindent { margin: 0px; font-size: 18px; line-height: 24px; padding: 15px 0 15px 20px; margin-bottom: -15px }
	section.secondary-content h4  { font-size: 16px; line-height: 22px; margin-top: 20px;  }
	section.secondary-content p  { font-size: 14px; line-height: 22px; margin-bottom: 10px }
	section.secondary-content a { margin: 0 0 10px 0 }
	section.secondary-content a.primary-content-lastlink { margin: 0 }
	.section-spacer  { height: 3px; max-height: 3px; display: block; margin:0; padding: 1px 0 0 0 }
	
	ul.resp-tabs-list { display: none }
    h2.resp-accordion  { display: block; font-size: 20px!important; padding: 20px 0; margin:0 }
    .resp-vtabs .resp-tab-content { font-size: 10px!important; }
    .resp-vtabs .resp-tabs-container { border: none; float: none; width: 100%; clear: none }
    .resp-tabs-container div  { padding:0!important }
    .resp-accordion-closed { display: none !important }
    .resp-vtabs .resp-tab-content:last-child {  }
	
	h2.sales-tab, h2.service-tab, h2.marketing-tab, h2.community-tab, h2.analytics-tab, h2.platforms-tab { color: #fff!important; margin:0; padding: 20px 0px 20px 20px !important }
	h2.sales-tab 		{ background-color: #418fde !important }
	h2.service-tab  	{ background-color: #953bbc !important }
	h2.marketing-tab 	{ background-color: #ec8a00 !important }
	h2.community-tab  	{ background-color: #ffc62c !important }
	h2.analytics-tab 	{ background-color: #00b1a9 !important }
	h2.platforms-tab 	{ background-color: #001770 !important }

	span.line-break   { display: inline-block; padding: 5px 0 }
	.two-line-nav  { padding: inherit }
    
    #accordion-subsections { margin: 0; padding:0 }
    #accordion-subsections div {  }
	#accordion-subsections h3 { background-color: #d9e1e2; font-size: 16px!important; line-height: 20px; vertical-align: middle; padding: 20px 0 20px 15px; margin:0; color: #0077bb }
	#sales-panel #accordion-subsections h3 		{ border-left: 5px solid #418fde }
	#service-panel #accordion-subsections h3 	{ border-left: 5px solid #953bbc }
	#marketing-panel #accordion-subsections h3 	{ border-left: 5px solid #ec8a00 }
	#community-panel #accordion-subsections h3 	{ border-left: 5px solid #ffc62c }
	#analytics-panel #accordion-subsections h3 	{ border-left: 5px solid #00b1a9 }
	#platforms-panel #accordion-subsections h3 	{ border-left: 5px solid #001770 }
	
	i.hub-plus-expander-main, i.hub-plus-expander  { font-size: 18px; line-height: 20px; vertical-align: middle; display: inline-block; vertical-align: middle }
	i.hub-plus-expander-main  { padding-right: 10px }
	i.hub-plus-expander  { padding-right:0 }
	a.accordion-links  { font-size: 16px!important; line-height: 20px; color: #333333 } 

	.footer-phoneone, .footer-phonetwo { width: 100%; text-align: center; font-size: 22px; line-height: 1.25em; margin-top: 10px }
	.footer-spacing { display: inline-block; color: #f5f5f5; width: -10px }
	.footer-privacy { display: block; text-align: center; margin: 20px auto }
	.footer-body, .footer-links    { text-align: center; line-height: 1.5em }
	.footer-body    { font-size: 12px; margin: 20px 0 0 0 }
	.footer-links   { font-size: 14px; margin-bottom: 10px; text-decoration: none; padding: 0  }
	.footer-pipes   { display: none }
	.footer-mobile  { display: block; margin: 5px 0; padding:0; font-size: 18px; line-height: 24px; }
	.social-footer  { text-align: center }
	ul.social-footer-links   	{ margin:0; padding:0 0 30px 0 }
	ul.social-footer-links li  	{ width: 50px; margin-left: 6px; padding:0 }
	ul.social-footer-links li:first-child  	{ margin-left: 0px }
	ul.social-footer-links li i   	{ font-size: 50px; line-height 50px }
	
}




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

	.header-logo  { padding: 10px 0 10px 20px; margin: 0 }
	
	.hub-header, .hub-header-tall { padding: 10px 0; margin:0; background: #4e758b url('https://image.mail.salesforce.com/lib/fe941c72756404757c/m/2/combohub-bannerbg-480.png') repeat-x bottom left }
	.hub-header { height: 200px; min-height: 200px } 
	.hub-header-tall  { height: 240px; min-height: 240px }  
	.hub-header h1, .hub-header-tall h1 { margin: 10px 20px; padding: 0; font-size: 32px!important; line-height: 32px!important }
	.hub-header p, .hub-header-tall p { padding: 0 10px; font-size: 12px }
	
	.hub-intro  { padding: 20px 5px }
	.hub-intro h2 { color: #005290 }
	
	ul.resp-tabs-list { display: none }
    h2.resp-accordion  { display: block; font-size: 20px!important; padding: 20px 0; margin:0 }
    .resp-vtabs .resp-tab-content { font-size: 10px!important; }
    .resp-vtabs .resp-tabs-container { border: none; float: none; width: 100%; clear: none }
    .resp-tabs-container div  { padding:0!important }
    .resp-accordion-closed { display: none !important }
    .resp-vtabs .resp-tab-content:last-child {  }
	span.line-break   { display: inline-block; padding: 5px 0 }

	.footer-phoneone, .footer-phonetwo { font-size: 20px }
	.footer-privacy { display: block; text-align: center; margin: 20px auto }
	.footer-body    { font-size: 11px; margin: 15px 0 0 0 }
	ul.social-footer-links li  	{ width: 40px; margin-left: 5px; padding:0 }
	ul.social-footer-links li i   	{ font-size: 40px; line-height 40px }
	
}



	

@media screen and (min-width: 768px) and (max-width: 939px) { 

	.container { max-width: 100% }

	ul.social-footer-links li  	{ width: 28px; margin: 0; padding: 0 }
	li.sales-tab, li.service-tab, li.marketing-tab, li.community-tab, li.analytics-tab {  }
	li.twoline-nav { padding: 15px 0; font-size: 12px; line-height: 20px  }
	.community-banner button  { margin-bottom: 20px }
	.header-logo { padding: 15px 0; margin: 0 }
	.hub-header, .hub-header-tall { padding: 0; margin:0; height: 200px; min-height: 200px; background: #4e758b url('https://image.mail.salesforce.com/lib/fe941c72756404757c/m/2/combohub-bannerbg-1140.png') repeat-x bottom left }
	.hub-header h1, .hub-header-tall h1 { padding: 20px 0 0 0; margin:0; font-size: 42px }
	.hub-header p, .hub-header-tall p { padding: 20px 0; font-size: 14px }
	.hub-intro p   { font-size: 16px; line-height: 22px }
	ul.resp-tabs-list { margin-left: 26px !important }
	.resp-tabs-list li  { margin: 0px .54%; font-size: 12px; line-height: 20px }
	
}
	
	
@media screen and (min-width: 940px) and (max-width: 1139px) { 

	.container { max-width: 940px }
	.header-logo { padding: 15px 0 0 0; margin: 0 }
	.hub-header, .hub-header-tall { padding: 0; margin:0; height: 200px; min-height: 200px; background: #4e758b url('https://image.mail.salesforce.com/lib/fe941c72756404757c/m/2/combohub-bannerbg-1140.png') repeat-x bottom left }
	.hub-intro p   { font-size: 16px; line-height: 22px }
	.hub-header h1, .hub-header-tall h1 { padding: 15px 0 10px 0; font-size: 48px }
	.hub-header p, .hub-header-tall p { padding: 0; margin:0; font-size: 13px }
	li.twoline-nav { padding: 25px 0; font-size: 12px; line-height: 17px }
	ul.resp-tabs-list { margin-left: 25px !important }
	.resp-tabs-list li  { margin: 0px .62%; font-size: 12px }

}


@media screen and (min-width: 1140px) and (max-width: 2000px) { 

	.container { max-width: 1140px }
	
	.hub-header, .hub-header-tall { padding: 0; margin:0; height: 200px; min-height: 200px; background: #4e758b url('https://image.mail.salesforce.com/lib/fe941c72756404757c/m/2/combohub-bannerbg-1140.png') repeat-x bottom left }
	.hub-header h1, .hub-header-tall h1 { padding: 20px 0 0 0; font-size: 51px;  }
	.hub-header p, .hub-header-tall p { padding: 0 0 10px 0; margin: 0; font-size: 16px }
	.minihub-intro h2  { font-size: 36px; margin: 10px 0 20px 0}
	.minihub-intro p  { font-size: 18px }
	.minihub-intro p.product-intro  { font-size: 28px; line-height: 28px; font-weight: 200 }

}