/********* CUSTOM CSS BEGIN **********/

body {
  background-color: rgb(255, 255, 255);
  font-size: 16px;
}

body,
p,
.dc-chart,
.AnyTime-win,
.AnyTime-pkr .AnyTime-btn,
.AnyTime-pkr th.AnyTime-dow {
  color: rgb(51, 51, 51);
  font-family: HKGroteskMedium;
}

p {
  font-size: 1em;
}

.main-body > .row {
  background-color: rgb(255, 255, 255);
}

.quickfile .button-group-w-arrow.expanded .button.dropdown {
  border-left-color: rgb(255, 255, 255);
}

h1, h2, h3, h4, h5, h6 {
  font-family: HKGroteskBold;
}


.public-page.panel {
  border: none;
  background: transparent;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  padding: 0;
}

.ui-widget textarea,
button,
.button,
.label,
.ui-tabs,
ul.menu li > a,
.menu li.active > a:first-child:not(.button),
.menu, body,
.tabs li > a, .tabs .tab-title > a {
  font-family: HKGroteskMedium;
}

.button,
button {
  background: rgb(56, 56, 56);
}

.button.secondary,
button.secondary {
  color: rgb(56, 56, 56);
  border: 1px solid rgb(56, 56, 56);
}

/*.top-bar,*/
body > header > .masthead {
  background-color: rgb(255, 255, 255);
}

#admin-footer {
  background-color: rgb(255, 255, 255);
  color: #383838;
}

/* admin forms */
.admin-side i.fa-arrows {
  color: rgb(56, 56, 56);
}

.admin-side .admin-actions .primary.toggle-button,
.admin-side .admin-actions .primary.toggle-button-large {
  background-color: rgb(56, 56, 56);
  color: white;
}

.admin-side .admin-actions .secondary.toggle-button,
.admin-side .admin-actions .secondary.toggle-button-large,
.admin-side form.new_saved_email .selectize-input {
  background-color: transparent;
  border: 1px solid rgb(56, 56, 56);
  color: rgb(56, 56, 56);
}
/* admin forms end */

ul.menu li {
  background-color: transparent;
}

/* Header Nav */

#site-top-bar .menu-icon a span::after {
  box-shadow: 0 0px 0 1px #383838, 0 7px 0 1px #383838, 0 14px 0 1px #383838;
}

.main-nav,
.main-nav.top-bar,
.main-nav.top-bar ul,
.main-nav .top-bar,
.main-nav .top-bar ul,
#site-top-bar a,
#site-top-bar .menu-icon a,
#site-top-bar ul.menu .dropdown li:not(.active) > a:not(.button) {
  background-color: rgb(255, 255, 255);
  color: #383838;
}

#site-top-bar li.is-dropdown-submenu-parent.is-active > a {
  background-color: #fff;
  color: rgb(235, 166, 65);
}

#site-top-bar {
  background-color: transparent;
}

#site-top-bar .dropdown.menu > li.is-dropdown-submenu-parent > a::after {
  border-color: #383838 transparent transparent;
}

#site-top-bar .dropdown.menu > li.is-dropdown-submenu-parent > a:hover::after,
#site-top-bar .dropdown.menu > li.is-dropdown-submenu-parent > a:focus::after,
#site-top-bar .dropdown.menu > li.is-dropdown-submenu-parent.is-active > a::after {
  border-color: rgb(235, 166, 65) transparent transparent;
}

#site-top-bar ul.menu .dropdown li:not(.active):hover > a:not(.button)
#site-top-bar ul.menu ul li:hover > a,
#site-top-bar ul.menu li a:not(.button):hover,
#site-top-bar ul.menu li.active a:not(.button):hover,
#site-top-bar ul.menu li.active a:not(.button) {
  background-color: #fff;
  color: rgb(235, 166, 65);
}
/* User Top Nav */

.user-side #site-top-bar .dropdown.menu > li.is-dropdown-submenu-parent > a::after {
  border-color: #383838 transparent transparent;
}

.user-side #site-top-bar .dropdown.menu > li.is-dropdown-submenu-parent > a:hover::after {
  border-color: rgb(235, 166, 65) transparent transparent;
}

.user-side .main-nav,
.user-side .main-nav .top-bar,
.user-side .main-nav .top-bar ul,
.user-side #site-top-bar a {
  background-color: rgb(255, 255, 255);
  color: #383838;
}

.user-side #site-top-bar ul.menu .dropdown li:not(.active):hover > a:not(.button)
.user-side #site-top-bar ul.menu ul li:hover > a,
.user-side #site-top-bar ul.menu li a:not(.button):hover,
.user-side #site-top-bar ul.menu li.active a:not(.button):hover,
.user-side #site-top-bar ul.menu li.active a:not(.button) {
  background-color: #fff;
  color: rgb(235, 166, 65);
}

.user-side #site-top-bar li.is-dropdown-submenu-parent.is-active > a {
  background-color: #fff;
  color: rgb(235, 166, 65);
}

/* Admin Nav */
/*#admin-nav-bar li.is-submenu-item.is-dropdown-submenu-item.is-dropdown-submenu-parent > a:after {
  border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) rgb(56, 56, 56);
}

#admin-nav-bar li.is-submenu-item.is-dropdown-submenu-item.is-dropdown-submenu-parent > a:hover::after {
  border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) rgb(244, 125, 55);
}*/

/* User Nav */
/*.icon-bar a,
.icon-bar a i,
.icon-bar a span.label,
.nav-wrapper.user,
.user > .menu,
.user > .menu a,
.user > .menu .menu-icon a,
.user > .menu li a:not(.button),
.user.expanded .menu .title-area,
.program-dropdown-selector .dropdown.menu .is-active > a,
.user.menu {
  background-color: rgb(232, 232, 232);
  color: rgb(0, 0, 0);
}
*/
/* Use top nav color if there is no public nav on user home */
.nav-wrapper.user.no-public-nav,
.nav-wrapper.user.no-public-nav .menu.cell,
.nav-wrapper.user.no-public-nav .user ul.menu li,
.nav-wrapper.user.no-public-nav .user ul.menu li.is-submenu-item.is-active,
.nav-wrapper.user.no-public-nav .user ul.menu li.is-submenu-item.is-active > a[role="menuitem"] {
  background-color: rgb(255, 255, 255);
  color: #383838;
}

.nav-wrapper.user.no-public-nav .user ul.menu li.menu-text,
.nav-wrapper.user.no-public-nav .user ul.menu li > a {
  color: #383838;
}

.top-bar.user .menu-icon a span::after {
  box-shadow: 0 0px 0 1px rgb(0, 0, 0), 0 7px 0 1px rgb(0, 0, 0), 0 14px 0 1px rgb(0, 0, 0);
}

.nav-wrapper.user.no-public-nav .user .is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a:hover::after, /* when hovering */
.nav-wrapper.user.no-public-nav .user .is-dropdown-submenu .is-dropdown-submenu-parent.opens-right.is-active > a::after /* when clicked */ {
  border-color: transparent transparent transparent #383838;
}

.nav-wrapper.user.no-public-nav .user .is-dropdown-submenu .is-dropdown-submenu-parent.opens-left > a:hover::after, /* when hovering */
.nav-wrapper.user.no-public-nav .user .is-dropdown-submenu .is-dropdown-submenu-parent.opens-left.is-active > a::after /* when clicked */ {
  border-color: transparent #383838 transparent transparent;
}

/*.user .menu .icon-bar a:hover,
.user .menu .icon-bar a:hover span.label,
.user .menu .icon-bar a.active,
.user .menu .icon-bar a.active i,
.user .menu .icon-bar a.active span.label,
.user .menu ul li:hover > a,
.user .menu ul li:hover > a i,
.user .menu li a:not(.button):hover,
.user .menu li.active a:not(.button):hover,
.user .menu li.active a:not(.button) {
  background-color: rgb(244, 125, 55);
  color: rgb(255, 255, 255);
}
*/

.top-bar .is-dropdown-submenu > .is-dropdown-submenu-parent.opens-left > a::after {
  border-color: transparent #383838 transparent transparent;
}

.top-bar .is-dropdown-submenu > .is-dropdown-submenu-parent.opens-right > a::after {
  border-color: transparent transparent transparent #383838;
}

.icon-bar.dropdown.menu > li.is-dropdown-submenu-parent > a::after,
#public-nav ul.dropdown.menu > li.is-dropdown-submenu-parent > a::after {
/*  border-color: rgb(0, 0, 0) transparent transparent;*/
  border-top-style: none;
}

/* remove the dropdown arrows for admin icon bar */
.icon-bar.dropdown.menu > li.is-dropdown-submenu-parent > a.active::after,
.icon-bar.dropdown.menu > li.is-dropdown-submenu-parent > a:hover::after,
.icon-bar.dropdown.menu > li.is-dropdown-submenu-parent > a:focus::after {
/*  border-color: rgb(255, 255, 255) transparent transparent;*/
  border-top-style: none;
}



/* Public Nav */

#public-nav .menu li a:not(.button),
#public-nav .menu li > a,
#public-nav {
  background-color: transparent;
  color: rgb(43, 46, 52);
}

#public-nav {
  background-color: rgba(255, 255, 255, 0);
}

#public-nav ul.menu li:hover,
#public-nav ul.menu li:hover > a,
#public-nav ul.menu li a:not(.button):hover,
#public-nav ul.menu li.active,
#public-nav ul.menu li.active a:not(.button):hover,
#public-nav ul.menu li.active a:not(.button) {
  background-color: rgba(255, 255, 255, 0);
  color: rgb(235, 166, 65);
}

#public-nav ul.dropdown.menu li.is-submenu-item a {
  background-color: rgb(255, 255, 255);
  color: rgb(56, 56, 56);
}

#public-nav ul.dropdown.menu li.is-submenu-item a:hover {
  color: rgb(235, 166, 65);
}

/* Side Nav */
.icon-bar .submenu a,
.icon-bar .submenu a i,
.is-dropdown-submenu {
/*  background-color: #fff; */
  color: rgb(56, 56, 56);
}


.sidenav .menu li a {
  color: black;
}

.sidenav .menu li.active a {
  color: rgb(56, 56, 56);
  font-weight: bold;
}

.sidenav .menu li:hover a,
.sidenav .menu li:focus a,
.sidenav .menu li a:hover,
.sidenav .menu li a:not(.button):hover {
  font-weight: bold;
  color: rgb(56, 56, 56);
}

.sidenav .menu li.active:hover a,
.sidenav .menu li.active:focus a,
.sidenav .menu li.active a:hover,
.sidenav .menu li.active a:not(.button):hover {
  /*background-color: rgb(235, 166, 65);*/
  color: rgb(235, 166, 65);
}


ul.dropdown.menu li ul.submenu button:hover,
ul.dropdown.menu li ul.submenu a:hover,
#admin-nav-bar ul.dropdown.menu li ul.submenu li.active a,
#admin-nav-bar ul.dropdown.menu li ul.submenu li a:hover {
  background-color: rgb(255, 255, 255);
  color: #383838;
}

.items-toolbar ul.dropdown.menu li ul.submenu button:hover,
.items-toolbar ul.dropdown.menu li ul.submenu a:hover,
.items-toolbar ul.dropdown.menu li ul.submenu li a:hover {
  background-color: rgb(56, 56, 56);
  color: white;
}

.items-toolbar .actions .submenu .fa,
.items-toolbar .actions .submenu .far,
.items-toolbar .actions .submenu .fas,
.items-toolbar .actions .submenu .fal,
.items-toolbar .actions .submenu .fab {
  color: rgb(56, 56, 56);
}

.items-toolbar ul.dropdown.menu li ul.submenu button:hover i,
.items-toolbar ul.dropdown.menu li ul.submenu a:hover i {
  color: white;
}

/* User side nav submenu triangle */
.sidenav .accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle) > a::after {
  border-color: black transparent transparent;
  /*color: black;*/
}

.sidenav .accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle) > a:hover::after {
  border-color: rgb(56, 56, 56) transparent transparent;
}

.thredded--post .thredded--post--content a,
.thredded--preview-area--post.thredded--post--content a {
  color: rgb(56, 56, 56);
}

.thredded--pending-moderation .thredded--moderation-navigation--pending a, .thredded--moderation-history .thredded--moderation-navigation--history a, .thredded--moderation-users .thredded--moderation-navigation--users a, .thredded--moderation-user .thredded--moderation-navigation--users a, .thredded--moderation-activity .thredded--moderation-navigation--activity a, .thredded--moderation-navigation--item a:active, .thredded--navigation-breadcrumbs a:active, .thredded--user-navigation--item a:focus, .thredded--moderation-navigation--item a:focus, .thredded--navigation-breadcrumbs a:focus, .thredded--moderation-navigation--item a:hover, .thredded--topics--title, .thredded--topics--updated-by a, .thredded--navigation-breadcrumbs a, .thredded--post--user a, .thredded--topic-header--started-by a {
  color: rgb(56, 56, 56) ;
  background-color: #fff;
}

.thredded--user-navigation--item a:hover, .thredded--user-navigation--item a:focus {
  background-color: transparent;
  color: rgb(244, 125, 55);
}

.thredded--user-navigation--item a, .thredded--user-navigation--item.thredded--is-current a {
  color: rgb(56, 56, 56) ;
}

header.thredded--messageboard--header .thredded--messageboard--title-no-image,
.community-topic-header-no-image {
  background-color: rgb(56, 56, 56);
  color: #fff;
}

.document-card-view header.document-card-header div.document-card-header-no-image {
  background-color: rgb(56, 56, 56);
  color: white;
}

.document-card-view header.document-card-header .title-text a {
    color: #fff;
  }
}

.thredded--topics--title a {
  color: rgb(56, 56, 56) ;
}

.thredded--topics--title a:hover,
.thredded--topics--updated-by a:hover, .thredded--navigation-breadcrumbs .active a, .thredded--navigation-breadcrumbs a:hover, .thredded--user-navigation--item a:hover, .thredded--post--user a:hover, .thredded--topic-header--started-by a:hover, #thredded--container a:hover {
  color: rgb(235, 166, 65);
}

#thredded--container a.button:hover {
  color: rgb(56, 56, 56);
}

/* Regular buttons */
.AnyTime-pkr th.AnyTime-dow,
.ui-widget-content a.button.secondary,
button.secondary:not(.hollow),
.button.secondary:not(.hollow) {
  color: rgb(56, 56, 56);
  border: 1px solid rgb(56, 56, 56);
  /*background-color: rgb(232, 232, 232);*/
  background-color: transparent;
}

.submenu button.secondary:not(.hollow),
.submenu .button.secondary:not(.hollow),
.submenu .button.alert {
  border: none;
}

button.arrow-only.secondary:not(.hollow)::after,
.button.arrow-only.secondary:not(.hollow)::after {
  border-top-color: #565252;
}

.dropdown.menu .is-active > a.button.secondary,
.ui-widget-content a.button.secondary:hover,
ul.pagination li.current a:hover, ul.pagination li.current button:hover,
.sub-nav dt.active a:hover, .sub-nav dd.active a:hover, .sub-nav li.active a:hover,
.grid-cell .actions a:hover,
.button.secondary:not(.hollow):hover,
.button.secondary:not(.hollow):focus {
  color: white;
  background-color: rgb(56, 56, 56);
}

/* For secondary dropdown menu buttons */
.dropdown.menu > li.is-dropdown-submenu-parent > a.secondary::after {
  border-color: #565252 transparent transparent;
}

.dropdown.menu .is-active > a.button.secondary::after,
.dropdown.menu > li.is-dropdown-submenu-parent.is-active > a.secondary::after,
.dropdown.menu > li.is-dropdown-submenu-parent > a.secondary:not(.hollow):focus::after,
.dropdown.menu > li.is-dropdown-submenu-parent > a.secondary:not(.hollow):hover::after {
  border-color: #ffffff transparent transparent;
}

/* Inverted buttons */
button.inverted,
.button.inverted {
  background-color: #565252;
  color: rgb(232, 232, 232);
}

button.inverted:hover,
.button.inverted:hover {
  background-color: #565252;
  color: rgb(232, 232, 232);
}

/* Transparent buttons */
.ui-widget-content a.button.transparent,
button.transparent,
.button.transparent,
button.transparent:focus {
  color: #565252;
}

.ui-widget-content a.button.transparent:hover,
button.transparent:hover,
.button.transparent:hover {
  color: rgb(56, 56, 56);
}

/* Trash icon to remove fields */
.button.transparent.remove_fields,
.button.transparent.delete-row {
  color: rgb(56, 56, 56);
}

button.arrow-only.transparent:not(.hollow)::after,
.button.arrow-only.transparent:not(.hollow)::after {
  border-top-color: #565252;
}

.ui-widget-content a.button.transparent:hover,
.button.transparent:not(.hollow):hover,
.button.transparent:not(.hollow):focus {
  color: #565252;
}

.sort-links .button.active,
.pagination .current,
ul.pagination li.current a,
ul.pagination li.current button {
  color: #ffffff;
  background-color: rgb(56, 56, 56);
}

a.button.disabled {
  color: black;
}


button.menu-icon,
button.menu-icon:not(.hollow):not(.transparent):hover,
button.menu-icon:not(.hollow):not(.transparent):focus {
  background: transparent;
}


.button.secondary:not(.hollow):hover p,
.button.secondary:not(.hollow):focus p {
  color: #ffffff;
}

/* Primary buttons */
a.button,
#skip-links a,
#ui-datepicker-div .ui-datepicker-current-day a,
.AnyTime-pkr .AnyTime-cur-btn,
.label,
.selectize-dropdown .active,
.selectize-dropdown .active.create,
button,
.button,
button.primary,
.button.primary,
.pagination-container .current,
.thredded--button, .thredded--form--submit {
  color: white;
  background-color: rgb(56, 56, 56);
}

ul.dropdown a.button.primary::after {
  border-color: #fff transparent transparent;
}

.dropdown.menu > li.is-dropdown-submenu-parent > a::after {
  border-color: white transparent transparent;
}

.dropdown.menu > li.is-dropdown-submenu-parent > a.disabled::after {
  border-color: black transparent transparent;
}

.dropdown.menu > li.is-dropdown-submenu-parent.is-active > a::after {
  border-color: rgb(56, 56, 56) transparent transparent;
}

.button.primary .fa, button.primary .far, button.primary .fas, button.primary .fal, button.primary .fab,
button.primary .fa, button.primary .far, button.primary .fas, button.primary .fal, button.primary .fab {
  color: #fff;
}

.ui-widget-content a.button:hover,
#ui-datepicker-div .ui-datepicker-current-day,
#ui-datepicker-div button,
.AnyTime-pkr .AnyTime-cur-btn.ui-state-focus,
.sub-nav dt.active a, .sub-nav dd.active a, .sub-nav li.active a,
button:hover,
button:focus,
.button:hover,
.button:focus,
button.primary:hover,
.button.primary:hover,
/*button:not(.hollow):not(.transparent):hover,
button:not(.hollow):not(.transparent):focus,
.button:not(.hollow):not(.transparent):hover,
.button:not(.hollow):not(.transparent):focus,*/
button.primary:focus,
.button.primary:focus,
.thredded--button:hover, .thredded--form--submit:hover, .thredded--button:focus, .thredded--form--submit:focus {
  color: white;
  background-color: rgb(235, 166, 65);
}

.slick-dots .button:not(.hollow):not(.transparent):hover,
.slick-dots button:not(.hollow):not(.transparent):hover,
.slick-dots .button:not(.hollow):not(.transparent):focus,
.slick-dots button:not(.hollow):not(.transparent):focus {
  background-color: transparent;
}

.date-badge,
a,
a.remove_fields,
ul.pagination li a,
ul.pagination li button,
.sp-cancel {
  color: rgb(56, 56, 56);
}

#ui-datepicker-div .ui-datepicker-current-day,
.menu li a:not(.button):hover,
a:hover, a:focus {
  color: rgb(235, 166, 65);
}

.criterion-data .read-more,
.criterion-data .read-less {
  color: white;
  background-color: rgb(56, 56, 56);
}

button[disabled], .button[disabled], button.disabled, .button.disabled {
  background: #aaa;
  border-color: #bbb;
}

button[disabled]:hover, .button[disabled]:hover, button.disabled:hover, .button.disabled:hover,
button[disabled]:focus, .button[disabled]:focus, button.disabled:focus, .button.disabled:focus {
  background: #999;
  border-color: #aaa;
}

.tabs-title > a:focus, .tabs-title > a[aria-selected='true'],
.tabs-title > a, tabs-title-alt > a:focus, .tabs-title-alt > a[aria-selected='true'], .tabs-title-alt > a,
.match {
  color: rgb(51, 51, 51);
}

.toggle-button {
  border: 1px solid rgb(56, 56, 56);
}


.fc-state-default {
  color: #333 !important;
}

.fc-state-default:hover {
  background: inherit;
}

.slick-slide:focus {
  outline: none;
  background: #181818;
}

/*********************************
 * Banner
 *********************************/

.flex-video { padding-top: 0; padding-bottom: 56.25%; }

    .slick-slide img,
    .banner .video,
    .carousel,
    .slick-slide .flex-video,
    .slick-slide {
      max-height: 640px;
    }

    .banner .video {
      max-width: 1137.7777777777778px;
    }

  .slick-slide img,
  .slick-slide .flex-video {
    width: 100%;
    max-height: none;
  }
  .banner .carousel .slick-prev.slick-arrow {
    left: 30px;
  }
  .banner .carousel .slick-next.slick-arrow {
    right: 30px;
  }

/*********************************
 * Hopscotch
 *********************************/

.hopscotch-content {
  color: rgb(51, 51, 51);
  font-family: HKGroteskMedium;
}

div.hopscotch-bubble .hopscotch-nav-button.next,
div.hopscotch-bubble .hopscotch-nav-button.prev {
  color: #fff;
  background: rgb(56, 56, 56);
  border: none;
}

div.hopscotch-bubble .hopscotch-nav-button.next:hover,
div.hopscotch-bubble .hopscotch-nav-button.prev:hover {
  color: #ffffff;
  background: rgb(235, 166, 65);
}

div.hopscotch-bubble {
  border-radius: $global-radius;
  border-color: rgb(56, 56, 56);
}

div.hopscotch-bubble .hopscotch-bubble-number {
  background: rgb(56, 56, 56);
  color: $white;
  border-radius: 1000px;
  padding-right: 0px;
}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow-border {
  border-top-color: rgb(56, 56, 56);
}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow-border {
  border-bottom-color: rgb(56, 56, 56);
}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow-border {
  border-left-color: rgb(56, 56, 56);
}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow-border {
  border-right-color: rgb(56, 56, 56);
}

#thredded--container p,
#thredded--container a,
#thredded--container label,
#thredded--container time,
#thredded--container input,
#thredded--container {
  font-family: HKGroteskMedium !important;
}

/********* CUSTOM CSS END **********/

#title img.logo {
  height: 60px;
  width: auto;
}

.public-side .masthead #title img {
  max-height: 5vw;
  height: 5vw;
}

.grid-container {
  position: relative;
  max-width: 100%;
  background: transparent;
}

.masthead .grid-container,
.main-nav>.top-bar {
  max-width: 100%;
}

/* LAYOUT */

body.user-side {
  background: #fff; /* rgb(248, 242, 237); */
}

.grid-container {
  padding-left: 0;
  padding-right: 0;
/*  background: #f8f2ed; */
}

#main-content {
  padding-bottom: 80px;
}

.main-nav {
  background: transparent;
}

.main-nav .top-bar.grid-container {
  background: #fff; /* #f8f2ed; */
}

footer .grid-container {
  background: transparent;
  text-align: left;
}

footer .powered-by {
  margin-top: 2em;
}

.back1, .back2, .back3, .back4, .back5, .back6, .back7, .back8 {
  position: relative;
}

.left-padded-block,
.padded-block {
  padding: 3em 4em;
  width: 100%;
}

.left-padded-block {
  padding-right: 0;
}

.thin-padded-block {
  padding: 2em 2em;
  width: 100%;
}

.image-block {
  width: 100%;
}

.vcenter {
  display: flex;
  align-items: center;
}

.partial-width {
  width: 70%;
}

.caption p {
  color: gray;
  font-style: italic;
  margin-top: 1em;
  font-size: 12px;
}

/* MASTHEAD */

body > header > .masthead {
  padding-top: 0;
  padding-bottom: 20px;
}

.public-side .masthead {
  height: 110px;
}

body > header > .masthead .grid-container {
  height: 100px;
  position: relative;
}

.main-nav > .top-bar {
  padding-top: 1em;
}

#public-nav {
  position: relative;
  top: -100px;
  margin: auto;
  z-index: 1;
  height: 0;
}

#public-nav > .grid-container {
  width: 60%;
  background: transparent;
}

#public-nav .menu.medium-horizontal {
  table-layout: auto;
}

.public-side #title {
  position: relative;
  top: -30px;
}

.user-side #title {
  position: relative;
  top: -10px;
  left: 20px;
}

/* TESTIMONIALS */

blockquote {
  font-size: 22px;
  color: black;
  width: 70%;
  margin: auto;
  border-left: none;
  line-height: 1.35;
}

blockquote cite {
  color: #EBA641; /* #fd7e34; */
}

blockquote em {
  color: #EBA641; /* #fd7e34; */
  font-style: normal;
  font-weight: bold;
}

blockquote cite {
  margin-top: 1em;
  font-size: 16px;
}

.testimonial {
  text-align: center;
  padding-bottom: 10em;
}

.testimonial-photo img {
  height: auto;
  width: auto;
  max-height: 160px;
  max-width: 160px;
  border-radius: 100px;
  filter: sepia(60%) saturate(240%) brightness(70%) hue-rotate(-18deg);
}

.main-body > .grid-container {
  padding-top: 0;
  padding-bottom: 0;
}


.events hgroup {
  display: none;
}


.contact-us-header {
  margin-top: 2em;
}

.sponsor-info {
  border-left: 2px solid white;
}
nav li {
  font-size: 1rem;
}

#public-nav ul.menu li > a {
  text-transform: uppercase;
  font-family: "HKGroteskExtraBold";
  font-size: 13px;
  line-height: 17px;
  letter-spacing: 0.026em;
}

/* carousel */
/* Spec: Heading 1 */
.carousel .caption h1 {
  color: #fd7e34;
  font-size: 65px;
  font-family: "HKGroteskBold";
  letter-spacing: 0.02em;
  line-height: 72px;
  text-align: center;
}

.carousel .caption h2 {
  font-size: 20px;
  font-family: "HKGroteskMedium";
}

/* Title 1 as defined by spec */
h1 {
  font-size: 30px;
  font-family: "HKGroteskBold";
  line-height: 36px;
  letter-spacing: 0.023em;
}

/* Title 2 as defined by spec */
h2 {
  font-size: 26px;
  font-family: "HKGroteskBold";
  letter-spacing: 0.02em;
  line-height: 34px;
}

/* Title 3 as defined by spec */
h3 {
  font-size: 21px;
  font-family: "HKGroteskBold";
  letter-spacing: 0.02em;
  line-height: 34px;
}

.back3 a {
  font-weight: bold;
}

/*
.p1 {
  font-size: 25px;
  line-height: 33px;
  letter-spacing: 0.03em;
}

.p2 {
  font-size: 18px;
  line-height: 20px;
  letter-spacing: 0.035em;
}
*/

p, .p1, .p2, .p3 {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0.015em;
}

.image-block .caption {
  font-size: 12px;
  font-style: italic;
  line-height: 20px;
  letter-spacing: 0.015em;
}

.button {
  font-family: "HKGroteskExtraBold";
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.017em;
}

footer h3 {
  font-size: 15px;
}


/* hopscotch */
div.hopscotch-bubble h3 {
  font-size: 21px;
  font-family: "HKGroteskBold";
  letter-spacing: 0.02em;
  line-height: 34px;
}
div.hopscotch-bubble .hopscotch-content {
  font-family: "HKGroteskBold";
}
div.hopscotch-bubble .hopscotch-nav-button.next, div.hopscotch-bubble .hopscotch-nav-button.prev {
  font-family: "HKGroteskBold";
}
div.hopscotch-bubble .hopscotch-bubble-close:hover {
  cursor: pointer;
}
.pagination li {
  font-size: inherit;
}
.current-user-info .panel h2 > div {
  line-height: 20px;
}
body > footer {
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 0;
}

body > footer:first-of-type {
  margin-top: 0
}


#main-content .page-header,
#main-content .section-header {
  border-bottom: none;
}

footer .circles .image-block {
  width: 100px;
  margin-right: 10px;
}

footer .circles .image-block img {
  border-radius: 50px;
}


/* 4.  HERO AREA ==== ******/

.banner {
  margin-bottom: 0;
}

.banner .caption {
  height: 100%;
  width: 100%;
  text-align: center;
  line-height: 2;
}

.carousel .caption.overlay {
  padding: 1.25em 1em 1.5em;
  background-color: rgba(50, 50, 50, 0.65);
}

.carousel .caption.overlay.bottom .content-wrapper {
  height: 100%;
}

.carousel .image-block img {
  width: auto;
}

.caption div {
  width: 100%;
}

.carousel .caption h1, .carousel .caption h2, .carousel .caption hr, .carousel .caption {
  text-align: center;
}

.caption h1 {
  font-weight: bold;
  text-align: center;
}

.blurb {
  font-size: 1em !important;
  margin-bottom: 0 !important;
  text-align: center !important;
}

.caption .button {
  margin: 1.5rem 0.5rem;
  width: 250px;
}


/* Page banner */

.page-banner {
  margin-bottom: 0;
  height: 260px;
  overflow: hidden;
}

.page-banner .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.page-banner .caption {
  height: 100%;
  width: 100%;
}

.banner .caption.overlay,
.page-banner .caption.overlay {
  padding: 1.25em 1em 1.5em;
  background-color: rgba(50, 50, 50, 0.65);
}

.page-banner .caption.overlay.bottom .content-wrapper {
  height: 100%;
}

.banner .caption h1 {
  color: white;
  text-transform: capitalize;
  margin-top: 2em;
  margin-bottom: 0.3em;
}

.page-banner .caption h1 {
  text-align: left;
  font-size: 30px;
  color: white;
  text-transform: capitalize;
}

.page-banner img.banner-graphic {
  position: relative;
  top: -50%;
}

.page-banner .grid-container,
.page-banner .grid-x,
.page-banner .cell {
  height: 100%;
}

.center hr,
.center hr.small-divider {
  margin-left: auto;
  margin-right: auto;
}

hr {
  margin-left: 0;
}

hr.small-divider {
  border-bottom: 2px solid black;
  width: 80px;
  margin: 0 0 1em;
}

.back5 hr.small-divider,
.back6 hr.small-divider,
.back7 hr.small-divider,
.back8 hr.small-divider {
  border-bottom: 2px solid white;
}

.back4 hr.small-divider {
  border-bottom: 2px solid black;
}

hr.red {
  border-bottom: none; /* 3px solid #f24246; */
}

hr.blue {
  border-bottom: none; /* 3px solid #1795a8; */
}

hr.orange {
  border-bottom: none; /* 3px solid #fd7e34; */
}

footer hr {
  border-bottom: 2px solid white;
  width: 40px;
  margin: 0 0 1em;
}

/*
hr.big-divider,
hr.big-divider2,
hr.big-divider3,
hr.big-divider4 {
  width: 195px;
}

hr.big-divider {
  background: transparent url("https://s3.amazonaws.com/production.east.xinspire.com/images/pictures/ea6a2f10fb37b57a06fc1743a7ee930e492b632e/original.png?1599499730") no-repeat left top;
  height: 5px;
  border: none;
}

hr.big-divider2 {
  background: transparent url("https://s3.amazonaws.com/production.east.xinspire.com/images/pictures/01b36d0889e40a5f2b4d4b35eb2b81bd6a137999/original.png?1599499698") no-repeat left top;
  height: 5px;
  border: none;
}

hr.big-divider3 {
  background: transparent url("https://s3.amazonaws.com/production.east.xinspire.com/images/pictures/95b00f5cb9d1e8d63e667f7cf819cb24b03609f8/original.png?1599499713") no-repeat left top;
  height: 5px;
  border: none;
}

hr.big-divider4 {
  background: transparent url("https://s3.amazonaws.com/production.east.xinspire.com/images/pictures/c381d7295b409cc9560928e2297d78f5d4afb458/original.png?1599499687") no-repeat left top;
  height: 5px;
  border: none;
}
*/
hr.centered {
  margin: 2em auto;
}

.events h1::after {
  content: "\a" + url("https://s3.amazonaws.com/production.east.xinspire.com/images/pictures/4f4b6d9633b0fc8a9141375279af8abcb5b48c1b/original.png?1595707815");
}

.button {
  text-transform: uppercase;
  padding: 1rem 2rem;
}

.stats h3 {
  line-height: inherit;
}

.rounded-number {
  font-size: 30px;
  width: 140px;
  height: 140px;
  line-height: 140px;
  color: white;
  font-weight: bold;
  border-radius: 70px;
  margin: auto;
  text-align: center;
}

.rounded-number + hr.centered {
  margin-top: 30px;
  margin-bottom: 25px;
}

.card.event-card .event-card-header,
.card.event-card .event-card-header .event-header-image {
  height: 320px;
}

.card.event-card {
  box-shadow: none;
}

.card.event-card .event-info .event-start {
  color: black;
}

.event-card a {
  font-weight: normal;
}

.card.event-card .event-info .event-title {
  font-size: inherit;
  margin-top: 0.5em;
}

.events .card {
  background: transparent;
}

.card.event-card .event-link a {
  text-decoration: none;
  color: #000;
  font-style: italic;
}

.card.event-card .event-link a:hover {
  text-decoration: underline;
  color: #eba641;
  font-style: italic;
}

.button.blue {
  background-color: #000; /* #1795a8; */
}

.button, button {
  border-radius: 0;
}

#social-media-icons {
  position: absolute;
  top: 34px;
  right: 10px;
}

#social-media-icons a {
  margin-left: 10px;
}

#social-media-icons img {
  height: 27px;
}

blockquote::after,
blockquote::before {
  position: absolute;
  right: 12%;
  font-size: 180px;
  top: 25%;
  font-family: georgia, serif;
}

blockquote::after {
  content: "”";
}

blockquote::before {
  content: "“";
  left: 12%;
  right: auto;
}

.step-number {
  height: 26px;
  width: 26px;
  position: absolute;
  right: 25px;
  top: 18px;
  border-radius: 20px;
  text-align: center;
  line-height: 26px;
}

.faqs .accordion-title {
  border: none;
}

.blue {
  color: #000;
}

.orange {
  color: #EBA641;
}

.rounded-number.red {
  background-color: #fafafa;
  color: black;
}

.rounded-number.blue {
  background-color: #000;
  color: white;
}

.rounded-number.orange {
  background-color: #EBA641;
  color: white;
}

/* header, bg, light pink/beige */
.back1 {
  background-color: #fafafa; /* #f8f3ee; */
  color: black;
}

.back2 {
  background-color: #ffffff;
}

/* Page block color, vapor */
.back3 {
  background-color: #fafafa;
}

/* pink */
.faqs a.back4.accordion-title:focus,
.back4, .back4:hover {
/*  background-color: #ef4247;
  color: white; */
  background-color: #fafafa;
  color: black;
}

/* blue */
.faqs a.back5.accordion-title:focus,
.back5, .back5:hover {
  background-color: black; /* #1795A8; */
  color: white;
}

.faqs a.back6.accordion-title:focus,
.back6, .back6:hover {
  background-color: #EBA641;
  color: white;
}

.faqs a.back7.accordion-title:focus,
.back7, .back7:hover {
  background-color: #000; /* #8b3d26; */
  color: white;
}

/* charcoal */
.back8, .back8:hover {
  background-color: #EBA641; /* #47494d; */
  color: white;
}

.back5 h1, .back5 h2, .back5 h3, .back5 p,
.back6 h1, .back6 h2, .back6 h3, .back6 p,
.back7 h1, .back7 h2, .back7 h3, .back7 p,
.back8 h1, .back8 h2, .back8 h3, .back8 p {
  color: white;
}

body > footer {
  background-color: #47494d;
  color: white;
}

body > footer p,
body > footer a,
body > footer h3 {
  color: white;
}

.caption h1 {
  color: #EBA641; /* #fd7e34; */
}

blockquote {
  color: black;
}

blockquote.blue,
blockquote.orange {
  color: white;
}

blockquote::before,
blockquote::after {
  color: #EBA641;
}

blockquote.blue em, blockquote.blue cite {
  color: #000;
}

blockquote.blue::before,
blockquote.blue::after {
  color: #000;
}

.light-blue-bg {
  background: transparent; /* #1ba6ba; */
}

.light-orange-bg {
  background: transparent; /* #fd9557; */
}

.light-pink-bg {
  background: transparent; /* #fd797c; */
}

.light-brown-bg {
  background: transparent; /* #a7533b; */
}

.dark-gray-bg {
  background: transparent; /* #2b2e34; */
}
@media screen and (min-width: 1201px) {
  body {
    font-size: 1.333vw;
  }

  #site-top-bar a {
    font-size: 1.333vw;
  }

  #site-top-bar .dropdown .is-dropdown-submenu a {
    padding: 0.933vw 1.333vw;
  }

  #public-nav ul.menu li > a {
    font-size: 1.1vw;
    line-height: 1.31;
    letter-spacing: 0.026em;
  }

  /* carousel */
  /* Spec: Heading 1 */
  .carousel .caption h1 {
    font-size: 5.5vw;
    letter-spacing: 0.02em;
    line-height: 1.11;
  }

  .carousel .caption h2 {
    font-size: 1.692vw;
  }

  .carousel .caption .button.large {
    font-size: 1.667vw;
    width: 20.833vw;
  }

  /* Title 1 as defined by spec */
  h1 {
    font-size: 2.54vw;
    line-height: 1.2;
    letter-spacing: 0.023em;
  }

  /* Title 2 as defined by spec */
  h2 {
    font-size: 2.2vw;
    letter-spacing: 0.02em;
    line-height: 1.31;
  }

  /* Title 3 as defined by spec */
  h3 {
    font-size: 1.777vw;
    letter-spacing: 0.02em;
    line-height: 1.62;
  }

  .back3 a {
    font-weight: bold;
  }

  p, .p1, .p2, .p3 {
    font-size: 1.25vw;
    line-height: 1.333;
    letter-spacing: 0.015em;
  }

  .caption p {
    font-size: 1vw;
  }

  .image-block .caption {
    font-size: 1.02vw;
    line-height: 1.667;
    letter-spacing: 0.015em;
  }

  .button {
    font-size: 1.1vw;
    line-height: 1.54;
    letter-spacing: 0.017em;
  }

  footer h3 {
    font-size: 1.27vw;
  }

  blockquote cite {
    font-size: 1.333vw;
  }

  .page-banner .caption h1 {
    font-size: 2.5vw;
  }

  .selectize-control.plugin-remove_button [data-value] .remove {
    font-size: 1vw;
  }
}
@media screen and (min-width: 1201px) {
  .padded-block {
    padding: 4vw 5.333vw;
  }

  .rounded-number {
    font-size: 2.5vw;
    width: 11.667vw;
    height: 11.667vw;
    line-height: 11.667vw;
    border-radius: 6vw;
  }

  #social-media-icons img {
    height: 2.25vw;
  }

  .page-banner img.banner-graphic {
    width: 100%;
  }

  .banner .video, .carousel, .slick-slide .flex-video, .slick-slide {
    max-height: 53.3vw;
  }

  /* form elements */

  .criteria select, .criteria input.criterion-text, .criteria .selectize-input:not(.has-items), .criteria select:not([multiple]), .profile-form .form-row > .controls > select {
    padding: .6665vw 2vw .6665vw 1vw;
    height: auto;
    line-height: inherit;
  }
  input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea, select {
    font-size: 1em;
    height: auto;
    padding: .6665vw;
    line-height: inherit;
  }
  select:not([multiple]) {
    padding: .6665vw 2vw .6665vw 1vw;
  }
  #panel-participation select:not([multiple]) {
    padding: .6665vw 1.4vw .6665vw .6665vw;
  } 
  .sort-form-row select:not([multiple]) {
    padding: .6665vw 1.2vw .6665vw 0;
  }
  #interaction_mode:not([multiple]) {
    padding: .6665vw 2vw .6665vw .6665vw;
  }
  .tabs-content .selectize-input > input, .tabs-content .selectize-input .item.active > input {
    /* there is an exisiting code that uses !important so we need to override that */ 
    padding: 1.333vw !important;
  }
  .user-home-search .buttons .button {
    padding-top: .5vw;
    padding-bottom: .5vw;
  }
  .user-side .date-badge {
    width: 5.3332vw;
  }
  .user-side #new_user_bookmark .row.column.buttons .success.button {
    padding: 0 2.666vw;
  }

  .current-user-info .panel h2 > div {
    line-height: 1.667vw;
  }

  form.large-text * {
    font-size: 1.333vw;
  }

  .public-side .masthead #title {
    top: -2.5vw;
  }

  .public-side .masthead #title img {
    max-height: 5vw;
    height: 5vw;
  }

  .public-side .masthead {
    height: 9.167vw;
  }

  .user-side .top-bar-title img {
    max-height: 4.167vw;
    height: 4.167vw;
  }
}
@media only screen and (min-width: 30.063em) and (max-width: 48em) {
  body > footer {
    display: block;
  }

  .p2 {
    font-size: 13px;
    line-height: 1.2;
  }

  .friends-helping-friends {
    padding: 0;
  }

  .friends-helping-friends img {
    position: absolute;
    width: 150%;
    left: 0;
    top: 0;
    z-index: 0;
    opacity: 0.15;
  }

  .banner .caption h1 {
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    font-size: 50px !important;
    line-height: 1.2;
  }

  .banner .caption.overlay .content-wrapper > .grid-x,
  .banner .caption.overlay .cell.vcenter {
    height: 100%;
  }

  .banner .caption .button.large {
    width: 200px;
    font-size: 15px;
  }

  .slick-current > div > li > img {
    width: 120%;
    max-width: 120%;
    margin-left: -10%;
  }

  .carousel .caption.overlay {
    position: absolute;
    padding-left: 20px;
    padding-right: 20px;
    bottom: 0;
    left: 0;
    width: 100%;
  }

  h1 {
    font-size: 22px;
    line-height: 1.2;
  }

  h2 {
    font-size: 15px;
    margin: 0;
  }

  .color-blocks .p2 {
    font-size: 13px;
  }

  /* ACCORDIONS */

  .faqs .accordion-title {
    font-size: 15px !important;
    padding: 1.5rem 1rem !important;
  }

  /* PAGE BANNERS */
  .page-banner {
    height: 200px;
  }

  /*****************************
   * Blockquote changes
   *****************************/

  .testimonial blockquote {
    margin-top: 120px;
    position: relative;
  }

  .testimonial blockquote::after {
    display: none;
  }

  .testimonial blockquote::before {
    left: 50%;
    top: -120px;
    margin-left: -37px;
  }
}
@media print, screen and (max-width: 30em) {
  body > footer {
    display: block;
  }

  body > footer .grid-container {
    text-align: center;
  }

  footer .circles .image-block {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
  }

  .partial-width {
    width: 100%;
  }

  .padded-block {
    padding: 2em;
  }

  .left-padded-block {
    padding: 2em;
  }

  hr,
  hr.small-divider {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .p1 {
    font-size: 15px;
  }

  h2, h3 {
    font-size: 20px;
    line-height: 1.2;
    margin-bottom: 1em;
  }

  .banner .caption h1 {
    width: 250px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    font-size: 50px;
    line-height: 1.2;
  }

  .banner .caption.overlay .content-wrapper > .grid-x {
    height: 100%;
  }

  .banner .caption.overlay .cell.vcenter > div {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    height: 100%;
  }

  .banner .cell.vcenter .image-block {
    position: absolute;
    top: 24vw;
  }

  .banner .cell.vcenter h2 {
    position: absolute;
    width: 100%;
    top: 15vw;
  }

  .banner .cell.vcenter h1 {
    margin-top: 27vw;
    font-size: 10.4vw;
  }

  .slick-current > div > li > img {
    width: 160%;
    max-width: 160%;
    margin-left: -30%;
  }

  .carousel .caption.overlay {
    position: absolute;
    padding-left: 20px;
    padding-right: 20px;
    bottom: 0;
    left: 0;
    width: 100%;
  }

  .carousel .caption .button {
    margin: 0;
    width: 100%;
  }

  .carousel .caption .columns {
    padding: 0;
  }

  .carousel .caption.overlay {
    padding: 0;
  }

  .card .card-section {
    text-align: left;
  }

  .rounded-number {
    margin-top: 1.5em;
  }

  /*****************************
   * special changes
   *****************************/

  .cell.medium-5.vcenter .padded-block {
    padding: 0;
  }

  .friends-helping-friends img {
    width: 100%;
    opacity: 1;
  }

  /*****************************
   * Color blocks
   *****************************/
  .color-blocks img {
    position: absolute;
    left: 0;
    top: -25%;
    width: 100%;
    z-index: 0;
  }

  .color-blocks .back5 {
    background-color: rgba(0, 0, 0, 0.8); /* rgba(23, 149, 168, 0.8); */
  }

  .color-blocks .back6 {
    background-color: rgba(235, 166, 65, 0.8); /* rgba(253, 126, 52, 0.8); */
  }

  .color-blocks .back4 {
    color: black;
    background-color: #fafafacc; /* rgba(239, 66, 71, 0.8); */
  }

  .color-blocks .back7 {
    background-color: #000000cc; /* rgba(139, 61, 38, 0.8); */
  }

  .image-block {
    display: block;
  }

  .sponsor-info {
    border: none;
    text-align: center;
  }

  .page-banner {
    height: 200px;
  }

  /*****************************
   * Blockquote changes
   *****************************/

  .testimonial blockquote {
    margin-top: 120px;
    position: relative;
  }

  .testimonial blockquote::after {
    display: none;
  }

  .testimonial blockquote::before {
    left: 50%;
    top: -120px;
    margin-left: -37px;
  }
}
@media only screen and (max-width: 30em) {
  body > header > .masthead {
    padding: 0;
  }

  #title {
    position: relative;
    top: -10px !important;
    left: 0px;
  }

  .masthead .logo img {
    max-height: 24px;
    margin-left: 0;
  }

  .user-side .title-bar[data-responsive-toggle="public-nav"] {
    display: none !important;
  }

  .public-side .title-bar[data-responsive-toggle="public-nav"] {
    position: absolute;
    background: transparent;
    color: #2b2e34;
    left: 50%;
    margin-left: -15px;
    top: 50px;
  }

  .public-side .title-bar[data-responsive-toggle="public-nav"] button.menu-icon {
    width: 30px;
  }

  .public-side .title-bar[data-responsive-toggle="public-nav"] button.menu-icon::after {
    position: absolute;
    background: #2b2e34;
    box-shadow: 0 7px 0 #2b2e34, 0 14px 0 #2b2e34;
  }

  .public-side .title-bar[data-responsive-toggle="public-nav"] .title-bar-title {
    display: none;
  }

  #public-nav {
    top: 0px;
    height: auto;
  }

  #public-nav > .grid-container {
    background: #46494d;
    width: 100%;
    color: white;
  }

  .main-nav > .top-bar {
    padding-top: 0;
  }

  .main-nav > .top-bar .top-bar-right {
    flex: 0 1 auto;
    margin-left: auto;
  }

  #public-nav ul.menu li > a {
    padding: 44px 22px;
    font-family: HKGroteskBold;
  }

  #public-nav ul.menu li > a ::after {
    content: '';
    display: block;
    height: 1px;
    border-bottom: 1px solid white;
    margin: auto;
    width: 250px;
    position: relative;
    top: 44px;
  }

  #public-nav ul.menu li:last-of-type > a ::after {
    border-bottom: none;
  }

  #public-nav .menu li a:not(.button), #public-nav .menu li > a, #public-nav {
    color: white;
    font-size: 22px;
  }
}
@media only screen and (min-width: 30.063em) and (max-width: 48em) {
  .public-side #title {
    position: relative;
    top: -10px;
  }

  .masthead .logo img {
    max-height: 30px;
  }

  body > header > .masthead {
    padding: 0;
  }

  #public-nav {
    text-align: center;
  }

  .user-side .title-bar[data-responsive-toggle="public-nav"] {
    display: none !important;
  }

  .public-side .title-bar[data-responsive-toggle="public-nav"] {
    position: absolute;
    background: transparent;
    color: #2b2e34;
    left: 50%;
    margin-left: -15px;
    top: 50px;
  }

  .public-side .title-bar[data-responsive-toggle="public-nav"] button.menu-icon {
    width: 30px;
  }

  .public-side .title-bar[data-responsive-toggle="public-nav"] button.menu-icon::after {
    position: absolute;
    background: #2b2e34;
    box-shadow: 0 7px 0 #2b2e34, 0 14px 0 #2b2e34;
  }

  .public-side .title-bar[data-responsive-toggle="public-nav"] .title-bar-title {
    display: none;
  }

  #public-nav {
    top: 0px;
    height: auto;
  }

  #public-nav > .grid-container {
    background: #46494d;
    width: 100%;
    color: white;
  }

  .main-nav > .top-bar {
    padding-top: 0;
  }

  .main-nav > .top-bar .top-bar-right {
    flex: 0 1 auto;
    margin-left: auto;
  }

  #public-nav ul.menu li > a {
    padding: 44px 22px;
    font-family: HKGroteskBold;
  }

  #public-nav ul.menu li > a ::after {
    content: '';
    display: block;
    height: 1px;
    border-bottom: 1px solid #707070;
    margin: auto;
    width: 100px;
    position: relative;
    top: 44px;
  }

  #public-nav ul.menu li:last-of-type > a ::after {
    border-bottom: none;
  }

  #public-nav .menu li a:not(.button), #public-nav .menu li > a, #public-nav {
    color: white;
    font-size: 22px;
  }
}
.user-side #public-nav {
  position: relative;
  top: -80px;
  margin: auto;
  z-index: 1;
  height: 0;
}

.public-side .nav-wrapper.user {
  display: none;
}

.user-side #public-nav > .grid-container {
  display: none;
}
@media screen and (min-width: 1201px) {
  form .form-row input[type="checkbox"] + label, form .form-row input[type="checkbox"] {
    vertical-align: text-bottom;
    height: 2.666vw;
  }
  input#destroy_picture {
    vertical-align: -1.9vw;
  }
  .checkbox-list-item.checkbox input[type="checkbox"] {
    vertical-align: sub;
  }
}
@media screen and (min-width: 1201px) {
  .card .badges .badge.ribbon {
    padding-left: 2.5em;
  }
  .card .badges .badge.ribbon.warning {
    border: 25px solid #ffea00;
    border-right: 12px solid rgba(0, 0, 0, 0);
    font-size: 1.333vw;
  }
  .card .badges .badge.ribbon.success {
    border: 25px solid #188200;
    border-right: 12px solid rgba(0, 0, 0, 0);
    font-size: 1.333vw;
  }

  /* Message badge */
  .user-sidenav .unread-messages-counter {
    min-width: 24px;
    height: 24px;
    vertical-align: middle;
    border-radius: 100%;
    font-size: 16px;
    padding-top: 1.2px;
    vertical-align: 2px;
  }
}
/* Hover effect on read more/read less button: */

.read-more:hover, .read-less:hover {
  opacity: .8;
}

/* Padding for selectize multi inputs: */

.selectize-control.multi .selectize-input [data-value] {
  padding: .4em;
}

.selectize-control.plugin-remove_button [data-value] .remove {
  top: 6px;
}

.card.event-card .event-card-header,
.card.event-card .event-card-header .event-header-image {
  height: 0;
  padding-bottom: 100%;
}

.events .card {
  border: none;
}
a.button.secondary, .button.secondary, button.secondary, input[type="submit"].secondary{
  background-color: #e8e8e8;
  color: #565252;
}

a.button.secondary:hover, .button.secondary:hover, button.secondary:hover, input[type="submit"].secondary:hover {
  background-color: #383838;
  color: #ffffff;
}

.button, .button.primary, button, input[type="submit"] {
  background-color: #EBA641; /* #F57D37; */
  color: #ffffff;
}

.button:hover, .button.primary:hover, button:hover, input[type="submit"]:hover {
  background-color: #383838;
  color: #ffffff;
}


.slot select {
height: 2.4375rem !important;
background-position: right 0 center !important; padding: 0.5vw 0.6665vw;
}