/*
Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size` variable.
@access private
@param {Number} $value - Pixel value to convert.
@param {Number} $base [null] - Base for pixel conversion.
@returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.
*/
/*
Removes the unit (e.g. px, em, rem) from a value, returning the number only.
@param {Number} $num - Number to strip unit from.
@returns {Number} The same number, sans unit.
*/
/*
Converts one or more pixel values into matching rem values.
@param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.

@param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base.

@returns {List} A list of converted values.
*/
.language-css .token.string, .style .token.string, .token.entity, .token.operator, .token.url {
	background: transparent;
}

body {
	font-family: sofia-pro, sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #75787b;
}

h1,h2,h3,h4,h5,h6 {
	font-family: sofia-pro, sans-serif;
	font-weight: 700;
}

h1 {
	font-size: 36px;
}

  pre {
	font-size: 0.875rem !important;
  }

  .tab-pane {
	display: none;
  }

  .tab-pane.active {
	display: block;
  }

  .smooth-scroll {
	padding: 40px 40px 40px 340px;
	height: auto;
	will-change: auto;
  }

  .sq-sidebar {
	background-color: #fff;
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: 300px;
	overflow: scroll;
	box-shadow: 4px 0px 14px 0px rgba(0, 0, 0, 0.05);
  }

  .sq-sidebar__heading {
	display: flex;
	width: 100%;
	border-top: 1px solid #f0f0f0;
	border-bottom: 1px solid #f0f0f0;
	align-items: flex-start;
	background-color: #fff;
	position: sticky;
	top: 0;
	padding: 0.3125rem 0;
  }

  .sq-sidebar__title {
	color: #2f1217;
	font-size: 1.125rem;
	padding: 0.625rem 1.25rem;
	font-weight: bold;
	flex-grow: 1;
  }

  .sq-sidebar__number {
	background-color: #f5f5f5;
	color: #75787b;
	display: inline-block;
	font-weight: bold;
	padding: 0.3125rem 0.9375rem;
	border-radius: 3.125rem;
	font-size: 0.75rem;
	margin-top: 0.625rem;
	margin-right: 0.625rem;
  }

  .sq-sidebar a {
	display: block;
	color: #75787b;
	text-decoration: none;
	padding: 10px 20px;
	transition: background-color 0.2s ease-out;
	font-weight: 400;
  }

  .sq-sidebar a:hover {
	background-color: #f5f5f5;
  }

  .sq-sidebar a.active {
	font-weight: bold;
	background-color: #2f1217;
	color: #fff;
  }

  section {
	margin-top: 3.75rem;
  }

  .sq-tabs {
	display: flex;
	list-style-type: none;
	padding: 0;
	margin: 0;
	margin-bottom: 3.125rem;
  }

  .sq-tabs li a {
	color: #2f1217;
	font-weight: bold;
	font-size: 14px;
	border: 1px solid #ededed;
	border-radius: 3.125rem;
	padding: 5px 20px 8px;
	transition: all 0.2s ease-out;
	margin-right: 0.625rem;
	cursor: pointer;
	text-decoration: none;
	display: block;
  }

  .sq-tabs li a:hover {
	background-color: #f5f5f5;
  }

  .sq-tabs li:last-of-type {
	margin-right: 0;
  }

  .sq-tabs li.active a {
	border-color: #2f1217;
	background-color: #2f1217;
	color: #fff;
  }

  .sq-notice {
	font-size: 16px;
	background-color: #f5f5f5;
	color: #75787b;
	padding: 1.875rem;
	border: 1px solid #f0f0f0;
	margin-top: 2.5rem;
  }

  .sq-notice h3 {
	font-size: 18px;
	margin-top: 30px;
  }

  .sq-notice h3:first-of-type {
	  margin-top: 0;
  }

  .sq-notice span {
	color: #fff !important;
  }

  .sq-code {
	font-size: 14px;
	background-color: #222;
	color: #fff;
	padding: 1.875rem;
	border: 1px solid #f0f0f0;
	margin-top: 2.5rem;
  }

  .sq-code span {
	color: #fff !important;
  }

  .sq-title {
	margin-top: 0;
	color: #2f1217;
  }

  .sq-table {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	margin-top: 20px;
	margin-bottom: 80px;
	border-radius: 5px;
	overflow: hidden;
  }

  .sq-table a {
	color: #2f1217;
  }

  .sq-table-row {
	display: flex;
  }

  .sq-table-row--head {
	background-color: #f5f5f5;
	color: #75787b;
	font-weight: bold;
  }

  .sq-block-demo {
	border: 1px solid #ededed;
  }

  .sq-block-demo > section {
	margin: 0;
  }

  .sq-table-column {
	flex: 1 1 0;
	padding: 10px;
	border: 1px solid #f5f5f5;
	font-size: 15px;
  }

  .sq-table-row--small .sq-table-column {
	font-size: 14px;
	background-color: rgba(245, 245, 245, 0.5);
  }

  .swiper-pagination {
	  position: relative;
	  bottom: auto !important;
	  margin-top: 40px;
  }

  .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	margin: 0 6px !important;
  }

  .swiper-pagination-bullet-active {
	  background: #2f1217;
  }

  #wpadminbar {
	  display: none;
  }


  .wc-memberships-frontend-banner {
	  display: none;
  }

  /*# sourceMappingURL=guide.css.map */