.mt-10 {margin-top:  10px; }
.mt-15 {margin-top:  15px; }
.mt-20 {margin-top:  20px; }
.mt-25 {margin-top:  25px; }
.mt-30 {margin-top:  30px; }
.mt-40 {margin-top:  40px; }
.mt-50 {margin-top:  50px; }
.mt-60 {margin-top:  60px; }

#navbar.navbar {background-color:#1A3B67;}
#navbar.navbar nav .container li a {color:#fff;}
.navbar-header .logo img {max-height: 70px; }
#navbar.navbar .search-toggle {display: none; }

#announcement {background:#0076be; padding: 16px 20px; text-align: center; position: relative; top: 120px;}
	#announcement .message {color:#fff; font-size: 22px; line-height: 24px; font-weight: 700; font-family: 'proxima-nova'; text-transform: none; }

#hero {background: url(https://static.rainfocus.com/shrm/shrmwebsite/static/staticfile/staticfile/norcal-home-hero-bg_1759512214683001RXXi.jpg) no-repeat top center / cover #ffffff;}
	.homehero {padding-top:  15%; padding-bottom: 10%;   }
	.homehero h1 {color: #fff; font-size:  48px; line-height:  56px; font-weight:  500; text-transform: uppercase; font-family: 'proxima-nova'; letter-spacing: 1.8px;}
	.homehero h3 {font-size:  28px; line-height:  38px; color:  #fff; font-weight:  400; text-transform: none; font-family: 'proxima-nova';}
	#hero .homehero .cta-btn {border-radius: 8px; background: #fff; color: #1A3B66; font-size: 18px; text-transform: uppercase; padding: 16px 32px; font-weight: 700;}
	.homehero .cta-btn-ghost {border: 2px solid #fff; background: transparent; color: #fff; font-size: 18px; text-transform: uppercase; padding: 16px 32px; margin-left: 15px; font-weight: 700; border-radius: 64px; }
	.homehero .cta {text-align: center; display: inline-block; margin-top: 35px;}

#counter {padding-top: 2%; padding-bottom: 2%; background: #1A3B66;}
    #counter .c-card {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;} 
    #counter .column {flex: 1 1 calc(20% - 10px); box-sizing: border-box; padding: 10px; text-align: center;}
    #counter .column .number {font-family: 'proxima-nova'; font-size: 32px; font-style:none; font-weight: 600; line-height: 42px; letter-spacing: 1.8px; color:#fff; text-align: center;}
    #counter .column .desc {font-family: 'proxima-nova'; font-size: 20px; font-style:normal; font-weight: 600; line-height: 26px; color:#fff; text-align: center; text-transform: uppercase;}

#walked {padding-top: 8%; padding-bottom: 5%; }
	#walked .card {width: 92%; }
	#walked .card h2 {font-size:  40px; line-height:  44px; color:  #1B3C69; font-weight:  600; text-transform: uppercase; font-style: none; font-family: 'proxima-nova'; letter-spacing: 1.7px;}
	#walked .card p {font-size:  20px; line-height:  28px; color:  #000; font-weight:  400; text-transform: none; font-family: 'proxima-nova'; }
#walked .card ul li {font-size:  20px; line-height:  28px; color:  #000; font-weight:  400; text-transform: none; font-family: 'proxima-nova'; }
	#walked .card .cta-btn-ghost {border: 2px solid #1B3C69; background: transparent; color: #1B3C69; font-size: 18px; text-transform: uppercase; padding: 16px 32px; font-weight: 700; border-radius: 8px; }
	#walked .card .cta-btn {border-radius: 8px; background: #fff; color: #1B3C69; font-size: 18px; text-transform: uppercase; padding: 16px 32px; font-weight: 700;}
    #walked .e-img img {width: 90%;}

#attend {padding-top: 7%; padding-bottom: 5%; text-align: center; background: #F1F3F6;}
	#attend h2 {font-size:  40px; line-height:  44px; color:  #1B3C69; font-weight:  600; text-transform: uppercase; font-style: none; font-family: 'proxima-nova'; letter-spacing: 1.7px;}
#attend .card {padding-left: 20px; padding-right: 20px; padding-bottom: 20px; }
#attend .card .icon {margin-left: -14px; }
	#attend .card h3 {font-size: 24px;font-family: 'proxima-nova';line-height: 29px;font-weight: 400;margin-top: 15px;color: #1B3C69;text-transform: none; letter-spacing: 1.2px; text-align: left; }
	#attend p {font-size:  18px; line-height:  24px; color: #02093B; font-weight:  400; text-transform: none; font-family: 'proxima-nova'; text-align: left; }
	
	#tracks {padding-top: 5%; padding-bottom: 5%; text-align: left;}
	#tracks h2 {font-size:  40px; line-height:  44px; color:  #1B3C69; font-weight:  600; text-transform: uppercase; font-style: none; font-family: 'proxima-nova'; letter-spacing: 1.7px;text-align: center;}
    #tracks .why-grid {display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; gap:10px; padding: 20px;}
    #tracks .grid-itemdrkblue {background: #1B3C69;color:#fff; display: flex; padding: 20px;}
    #tracks .grid-itemmedblue {background: #265D93;color:#fff; display: flex; padding: 20px;}
    #tracks .grid-itemlghtblue {background: #0076be;color:#fff; display: flex; padding: 20px;}
    #tracks h3 {font-size:  24px; line-height:  28px; color:  #fff; font-weight:  600; text-transform: uppercase; font-family: 'proxima-nova';letter-spacing: 1.2px;}
    #tracks p {font-size: 18px; line-height: 24px; color: #fff; font-weight: 400; text-transform: none; font-family: 'proxima-nova';}
	#tracks .icon img {width: 25%; }
	

#quote {padding-top: 5%; padding-bottom: 5%; background: #1B3C69; }
    #quote h4 {font-size:  32px; line-height:  40px; color:  #fff; font-weight:  400; text-transform: none; font-family: 'proxima-nova'; text-align: center;}
	#quote .name {font-size:  18px; line-height:  24px; color:#fff; font-weight:  700; text-transform: none; font-family: 'proxima-nova'; text-align: center; }
    #quote .company {font-size:  18px; line-height: 18px; color: #fff; font-weight:  400; text-transform: none; font-family: 'proxima-nova'; text-align: center; }

#venue {padding-top:  7%; padding-bottom: 10%;  background: url(https://static.rainfocus.com/shrm/shrmwebsite/static/staticfile/staticfile/HRM_SeaRoot_Patio_Dusk_1759512214598001Rqq6.jpg) no-repeat top center / cover #ffffff;}
	#venue .card {background: #efeded; padding: 30px; width: 500px; text-align: left;}
	#venue .card h3 {font-size:  32px; line-height:  38px; color:  #000; font-weight:  600; text-transform: none; font-family: 'proxima-nova'; font-style: none; letter-spacing: 1.6px;}
	#venue .card h4 {font-size:  24px; line-height:  33px; color:  #000; font-weight:  400; text-transform: none; font-family: 'proxima-nova'; font-style: none; letter-spacing: 1.6px;}
	#venue .card .cta-btn {border-radius: 8px; background: #fff; color: #225A91; font-size: 18px; text-transform: uppercase; padding: 16px 32px; font-weight: 700;}
	#venue .card .cta-btn-ghost {border: 2px solid #fff; background: transparent; color: #fff; font-size: 18px; text-transform: uppercase; padding: 16px 32px; margin-left: 15px; font-weight: 700; border-radius: 64px; }
	#venue .card .cta {text-align: center; display: inline-block; margin-top: 35px;}

/*footer*/
#footer {padding-top: 2%; padding-bottom: 2%; background: #1B3C69; }
#footer p {font-size: 14px; color:#fff; text-align: center; font-weight: 500; font-family: 'proxima-nova'; }
#footer .links {float:left; margin-top: 5%; margin-left: -15px; }
#footer .social {float:right; }
#footer .links {color:#fff;}
#footer .links a {font-size: 14px; color:#fff; text-align: center; font-weight: 500; font-family: 'proxima-nova'; text-decoration: underline; }
#footer .fineprint p {text-align: left; }


/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width : 767px) {
    #navbar.navbar .container .navbar-header {height: 80px; }
    #navbar.navbar .container a.navbar-brand {width: 65%; }
    #announcement {top: 80px;}
    #announcement .message {font-size: 18px; }
   #footer {padding-left: 15px; padding-right: 15px; }
    #footer .spread-icons {text-align: left; }
    #footer .social {float:none; }
    #footer .links {float:none; }
    #footer p {text-align: left; }
    #footer .logo img {margin-bottom: 20px; }
    .homehero {padding-top: 20%; padding-bottom: 0%; }
    .homehero .hero-card {width: auto;}
    .homehero .cta {display:grid; }
    .homehero .cta-btn {margin-bottom: 20px; }
    .homehero .cta-btn-ghost {margin-left: 0; }
    .homehero img {width: 100%; }
#attend .card {border: none; }
#attend .card img{width: 100%; }
#quote .content {padding: 20px; }
#quote h4 {font-size: 28px; line-height: 36px; }
#tracks .why-grid {display: block; }
 #walked .e-img img {width: 100%;}

    #counter .column .desc {font-size: 15px; }
#counter .c-card {display: block;}
}