@charset "UTF-8";

/*
Theme Name: Code and Create
Theme URI: https://codeandcreate.co.uk
Author: Code and Create
Author URI: https://codeandcreate.co.uk
Description: Code and Create
Requires PHP: 5.6
Version: 1.0
Text Domain: codeandcreate

*/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

 html {
	line-height: 1.15; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
  }
  
  /* Sections
	 ========================================================================== */
  
  /**
   * Remove the margin in all browsers.
   */
  
  body {
	margin: 0;
  }
  
  /**
   * Render the `main` element consistently in IE.
   */
  
  main {
	display: block;
  }
  
  /**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
  
  h1 {
	font-size: 2em;
	margin: 0.67em 0;
  }
  
  /* Grouping content
	 ========================================================================== */
  
  /**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
  
  hr {
	box-sizing: content-box; /* 1 */
	height: 0; /* 1 */
	overflow: visible; /* 2 */
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  pre {
	font-family: monospace, monospace; /* 1 */
	font-size: 1em; /* 2 */
  }
  
  /* Text-level semantics
	 ========================================================================== */
  
  /**
   * Remove the gray background on active links in IE 10.
   */
  
  a {
	background-color: transparent;
  }
  
  /**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
  
  abbr[title] {
	border-bottom: none; /* 1 */
	text-decoration: underline; /* 2 */
	text-decoration: underline dotted; /* 2 */
  }
  
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
  
  b,
  strong {
	font-weight: bolder;
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  code,
  kbd,
  samp {
	font-family: monospace, monospace; /* 1 */
	font-size: 1em; /* 2 */
  }
  
  /**
   * Add the correct font size in all browsers.
   */
  
  small {
	font-size: 80%;
  }
  
  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
  
  sub,
  sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
  }
  
  sub {
	bottom: -0.25em;
  }
  
  sup {
	top: -0.5em;
  }
  
  /* Embedded content
	 ========================================================================== */
  
  /**
   * Remove the border on images inside links in IE 10.
   */
  
  img {
	border-style: none;
  }
  
  /* Forms
	 ========================================================================== */
  
  /**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
  
  button,
  input,
  optgroup,
  select,
  textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
  }
  
  /**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
  
  button,
  input { /* 1 */
	overflow: visible;
  }
  
  /**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
  
  button,
  select { /* 1 */
	text-transform: none;
  }
  
  /**
   * Correct the inability to style clickable types in iOS and Safari.
   */
  
  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
	-webkit-appearance: button;
  }
  
  /**
   * Remove the inner border and padding in Firefox.
   */
  
  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
  }
  
  /**
   * Restore the focus styles unset by the previous rule.
   */
  
  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
  }
  
  /**
   * Correct the padding in Firefox.
   */
  
  fieldset {
	padding: 0.35em 0.75em 0.625em;
  }
  
  /**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
  
  legend {
	box-sizing: border-box; /* 1 */
	color: inherit; /* 2 */
	display: table; /* 1 */
	max-width: 100%; /* 1 */
	padding: 0; /* 3 */
	white-space: normal; /* 1 */
  }
  
  /**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
  
  progress {
	vertical-align: baseline;
  }
  
  /**
   * Remove the default vertical scrollbar in IE 10+.
   */
  
  textarea {
	overflow: auto;
  }
  
  /**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */
  
  [type="checkbox"],
  [type="radio"] {
	box-sizing: border-box; /* 1 */
	padding: 0; /* 2 */
  }
  
  /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
  
  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
	height: auto;
  }
  
  /**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
  
  [type="search"] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
  }
  
  /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
  
  [type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
  }
  
  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
  
  ::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
  }
  
  /* Interactive
	 ========================================================================== */
  
  /*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
  
  details {
	display: block;
  }
  
  /*
   * Add the correct display in all browsers.
   */
  
  summary {
	display: list-item;
  }
  
  /* Misc
	 ========================================================================== */
  
  /**
   * Add the correct display in IE 10+.
   */
  
  template {
	display: none;
  }
  
  /**
   * Add the correct display in IE 10.
   */
  
  [hidden] {
	display: none;
  }


/* Code and Create 
	========================================================================== */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
	word-break: normal;
}

.skip-link:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	-webkit-clip-path: none;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
} 

/* Fonts
	========================================================================== */
/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/open-sans-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('assets/fonts/open-sans-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('assets/fonts/open-sans-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('assets/fonts/open-sans-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('assets/fonts/open-sans-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('assets/fonts/open-sans-v18-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
  font-display: swap;
}

/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('assets/fonts/open-sans-v18-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('assets/fonts/open-sans-v18-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('assets/fonts/open-sans-v18-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('assets/fonts/open-sans-v18-latin-700.woff') format('woff'), /* Modern Browsers */
       url('assets/fonts/open-sans-v18-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('assets/fonts/open-sans-v18-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
  font-display: swap;
}

/* Variables
========================================================================== */
:root {
	/* Spacing */
	--global--spacing-unit: 4rem;
	--global--spacing-vertical: var(--global--spacing-unit);
	--global--space-gutenberg: var(--global--spacing-unit);
	--width: 80vw;
	--wide-width: 90vw;
	--full-width: 100vw;
	--mwidth: 900px;
	--wide-mwidth: 900px;
	--full-mwidth: 100%;

	/* Font Family */
	--global--font-primary: 'Open Sans', "Helvetica Neue", sans-serif;
	--global--font-secondary: 'Open Sans', "Helvetica Neue", sans-serif;

	--global--font-weight: 400;
	/* Font Size */
	--global--font-size-base: 1rem;
	--global--font-size-xs: 1rem; 
	--global--font-size-sm: 1.125rem; 
	--global--font-size-md: 1.25rem;
	--global--font-size-lg: 1.5rem;
	--global--font-size-xl: 2.25rem;
	--global--font-size-xxl: 4rem;
	--global--font-size-xxxl: 5rem;
	--global--font-size-page-title: var(--global--font-size-xxl);
	--global--letter-spacing: -0.03em;

	/* Line Height */
	--global--line-height-body: 1.7;
	--global--line-height-heading: 1.3;
	--global--line-height-page-title: 1.1;

	/* Headings */
	--heading--font-family: var(--global--font-primary);
	--heading--font-weight: normal;
	--heading--font-weight-page-title: 400;
	--heading--font-weight-strong: 700;

	--heading--font-size-h6: var(--global--font-size-xs);
	--heading--font-size-h5: var(--global--font-size-sm);
	--heading--font-size-h4: var(--global--font-size-lg);
	--heading--font-size-h3: calc(1.25 * var(--global--font-size-lg));
	--heading--font-size-h2: var(--global--font-size-xl);
	--heading--font-size-h1: var(--global--font-size-page-title);

	--heading--font-weight-h6: var(--heading--font-weight);
	--heading--font-weight-h5: var(--heading--font-weight);
	--heading--font-weight-h4: var(--heading--font-weight);
	--heading--font-weight-h3: var(--heading--font-weight);
	--heading--font-weight-h2: var(--heading--font-weight);
	--heading--font-weight-h1: var(--heading--font-weight-page-title);

	--heading--letter-spacing-h6: var(--global--letter-spacing);
	--heading--letter-spacing-h5: var(--global--letter-spacing);
	--heading--letter-spacing-h4: var(--global--letter-spacing);
	--heading--letter-spacing-h3: var(--global--letter-spacing);
	--heading--letter-spacing-h2: var(--global--letter-spacing);
	--heading--letter-spacing-h1: var(--global--letter-spacing);

	--heading--line-height-h6: var(--global--line-height-heading);
	--heading--line-height-h5: var(--global--line-height-heading);
	--heading--line-height-h4: var(--global--line-height-heading);
	--heading--line-height-h3: var(--global--line-height-heading);
	--heading--line-height-h2: var(--global--line-height-heading);
	--heading--line-height-h1: var(--global--line-height-page-title);


	/* Colors */
	--global--color-black: #000;
	--global--color-dark-gray: #28303d;
	--global--color-gray: #39414d;
	--global--color-light-gray: #f0f0f0;
	--global--color-green: #10B981;
	--global--color-dark-green: #064E3B;
	--global--color-blue: #1D4ED8;
	--global--color-dark-blue: #1E3A8A;
	--global--color-purple: #d1d1e4;
	--global--color-dark-red: #7F1D1D;
	--global--color-red: #DC2626;
	--global--color-orange: #e4dad1;
	--global--color-yellow: #eeeadd;
	--global--color-white: #fff;
	--global--color-white-50: rgba(255, 255, 255, 0.5);
	--global--color-white-90: rgba(255, 255, 255, 0.9);

	--global--color-primary: var(--global--color-dark-gray); /* Body text color, site title, footer text color. */
	--global--color-secondary: var(--global--color-gray); /* Headings */
	--global--color-primary-hover: var(--global--color-primary);
	--global--color-background: var(--global--color-blue);
	--global--color-border: var(--global--color-primary); /* Used for borders (separators) */

	/* Elevation */
	--global--elevation: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);

	/* Forms */
	--form--font-family: var(--global--font-secondary);
	--form--font-size: var(--global--font-size-sm);
	--form--line-height: var(--global--line-height-body);
	--form--color-text: var(--global--color-dark-gray); 
	--form--color-ranged: var(--global--color-secondary);
	--form--label-weight: 500;
	--form--border-color: var(--global--color-secondary);
	--form--border-width: 3px;
	--form--border-radius: 0;
	--form--spacing-unit: calc(0.5 * var(--global--spacing-unit));

	/* Cover block */
	--cover--height: calc(15 * var(--global--spacing-vertical));
	--cover--color-foreground: var(--global--color-white);
	--cover--color-background: var(--global--color-black);

	/* Buttons */
		/* Colors */
	--button--color-text: var(--global--color-background);
	--button--color-text-hover: var(--global--color-secondary);
	--button--color-text-active: var(--global--color-secondary);
	--button--color-background: var(--global--color-secondary);
	--button--color-background-hover: var(--global--color-background);
	--button--color-background-active: var(--global--color-background);
		/* Fonts */
	--button--font-family: var(--global--font-primary);
	--button--font-size: var(--global--font-size-base);
	--button--font-weight: 500;
	--button--line-height: 1.5;
	--button--font-style: normal;
		/* Borders */
	--button--border-width: 1px;
	--button--border-radius: 8px;
		/* Spacing */
	--button--padding-vertical: 15px;
	--button--padding-horizontal: calc(2 * var(--button--padding-vertical));
}

/* Mobile Variables
========================================================================== */
@media (max-width:749px){
	:root{
		/* spacing */
		--mwidth:80vw;
		--wide-mwidth: 90vw;
		--width: 100%;
		--wide-width: 100%;
		--full-width: 100%;
	}
}


/* Let's go
	========================================================================== */
*, *:before, *:after {
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
}

html{
	font-family: var(--global--font-primary);
	font-size: var(--global--font-size-base);
	line-height: var(--global--line-height-body);
	letter-spacing: var(--global--letter-spacing);
	font-weight: var(--global--font-weight);

	color: var(--global--color-prmary);
}

h1,h2,h3,h4,h5,h6{
	font-family: var(--heading--font-family);
}
h1{
	letter-spacing: var(--heading--letter-spacing-h1);
	line-height: var(--heading--line-height-h1);
	font-weight: var(--heading--font-weight-h1);
}
h2{
	letter-spacing: var(--heading--letter-spacing-h2);
	line-height: var(--heading--line-height-h2);
	font-weight: var(--heading--font-weight-h2);
}
h3{
	letter-spacing: var(--heading--letter-spacing-h3);
	line-height: var(--heading--line-height-h3);
	font-weight: var(--heading--font-weight-h3);
}
h4{
	letter-spacing: var(--heading--letter-spacing-h4);
	line-height: var(--heading--line-height-h4);
	font-weight: var(--heading--font-weight-h4);
}
h5{
	letter-spacing: var(--heading--letter-spacing-h5);
	line-height: var(--heading--line-height-h5);
	font-weight: var(--heading--font-weight-h5);
}
h6{
	letter-spacing: var(--heading--letter-spacing-h6);
	line-height: var(--heading--line-height-h6);
	font-weight: var(--heading--font-weight-h6);
}

a{
	color: var(--global--color-blue);
}

.wp-block-button__link,
.button,
button {
  font-family: var(--button--font-family);
  font-style: var(--button--font-style);
  font-weight: var(--button--font-weight);
  font-size: var(--button--font-size);
  line-height: var(--button--line-height);
  border-radius: var(--button--border-radius);
  border-width: var(--button--border-width);
  
  color: var(--button--color-text);
  background: var(--button--color-background);
  padding: var(--button--padding-vertical) var(--button--padding-horizontal);
}
.wp-block-button__link:hover,
.button:hover,
button:hover{
	color: var(--button--color-text-hover);
	background: var(--button--color-background-hover);
}

.wp-block-button__link:active,
.button:active,
button:active{
	color: var(--button--color-text-active);
	background: var(--button--color-background-active);
}

/* Gutenberg background-color options */
/* .has-background :is(
  a,
	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6
){
  color: currentColor;
} */

/* Custom gradients */
.has-purple-to-yellow-gradient-background {
	background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-yellow));
}
.has-yellow-to-purple-gradient-background {
	background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-purple));
}
.has-green-to-yellow-gradient-background {
	background: linear-gradient(160deg, var(--global--color-green), var(--global--color-yellow));
}
.has-yellow-to-green-gradient-background {
	background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-green));
}
.has-red-to-yellow-gradient-background {
	background: linear-gradient(160deg, var(--global--color-red), var(--global--color-yellow));
}
.has-yellow-to-red-gradient-background {
	background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-red));
}
.has-purple-to-red-gradient-background {
	background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-red));
}
.has-red-to-purple-gradient-background {
	background: linear-gradient(160deg, var(--global--color-red), var(--global--color-purple));
}
.has-blue-to-black-gradient-background {
	background: linear-gradient(180deg, var(--global--color-black) 0%, var(--global--color-blue) 100%);
}

/* Header
=================================================*/
.site-header.sticky{
	position: sticky;
	top:0;
}
.site-header.relative{
	position: relative;
}
.masthead__inner{
	padding:32px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.masthead__inner.alignsmall{
	max-width: var(--mwidth);
	width: var(--width);
	margin:0 auto;
}
.masthead__inner.alignwide{
	max-width: var(--wide-mwidth);
	width: var(--wide-width);
	margin:0 auto;
}
.masthead__inner.alignfull{
	max-width: var(--full-mwidth);
	width: var(--full-width);
	margin:0 auto;
}

/* 		Navigation
=================================================*/

.site-cta{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.site-cta > * {
	margin:0 6px;
}

#site-navigation ul {
  display:flex;
  list-style: none;
  margin:0;
  padding:0;
}

#site-navigation ul li a{
  text-decoration: none;
  padding: 0 16px;
}

@media (min-width:750px){
	#primary-mobile-menu{
		display:none;
	}
}

.menu-button-container{
	align-self: flex-start;
	position: relative;
	z-index: 10;
}
#primary-mobile-menu{
	background:none;
	border:none;
	cursor: pointer;
	padding-top:0;
}
#primary-mobile-menu > * {
	pointer-events: none;
}
#primary-mobile-menu .dropdown-icon svg{
	vertical-align: middle;
}
#primary-mobile-menu .dropdown-icon.close{
	display: none;
}
@media (min-width:749px){
	#site-navigation{
		display:block !important;
	}
}
@media (max-width:749px){
	.site-cta,
	#site-navigation{
		display: none;
	}

	#site-navigation{
		padding:32px 0;
		position:absolute;
		background: #fff;
		top:0;
		left:-32px;
		width:100vw;
		z-index: 9;
		font-size:1.4rem;
	}
	#site-navigation ul{
		flex-direction: column;
		align-items: center;
	}
	#site-navigation ul li a {
		padding:.5rem 0;
		display: block;
	}
}
@media (max-width:900px){
	.site-cta {
		display: none;
	}
}

/* Alignments 
=======================================*/
.gutenberg-content > * {
  max-width: var(--mwidth);
  margin: var(--global--space-gutenberg) auto;
  width: var(--width);
}

.gutenberg-content .alignwide {
  max-width: var(--wide-mwidth);
  margin: 0 auto;
  width: var(--wide-width);
}

.gutenberg-content .alignfull{
  max-width: var(--full-mwidth);
  margin: 0 auto;
  width: var(--full-width)
}

.gutenberg-content > .alignfull,
.gutenberg-content > .alignwide {
	margin: var(--global--space-gutenberg) auto;
}

.gutenberg-content > .wp-block-cover:first-child{
	margin-top:0;
}

.site-footer a {
	text-decoration: none;
}

/* Footer
=================================================*/
.footer__inner{
	padding: 64px 0;
	display: grid;
	grid-template-columns: 20% 30% 40%;
	align-items: flex-start;
	justify-content: space-between;
	max-width: var(--wide-mwidth);
	margin:0 auto;
	width: var(--wide-width)
}
.footer__inner.alignsmall{
	max-width: var(--mwidth);
	width: var(--width);
	margin:0 auto;
}
.footer__inner.alignwide{
	max-width: var(--wide-mwidth);
	width: var(--wide-width);
	margin:0 auto;
}
.footer__inner.alignfull{
	max-width: var(--full-mwidth);
	width: var(--full-width);
	margin:0 auto;
}

@media (max-width: 749px){
	.footer__inner{
		display: block;
	}
}

.footer__inner > div{
	width:100%;
}

.footer__navigation-wrapper {
	display: flex;
	list-style: none;
	padding:0;
	margin:0 0 1rem 0;
}
.footer__navigation-wrapper li a{
	font-weight: bold;
}
.footer__navigation-wrapper li a:after{
	content:".";
	padding-right: 0.1rem;
}

.footer_payment-methods{
	margin-top:1.5rem;
}

/* Cards */

.card{
	border: 2px solid #000;
	border-radius: 24px;
}

.is-style-card-red,
.card-red{
	background: var(--global--color-dark-red);
	border: 2px solid var(--global--color-red);
	border-color: var(--global--color-red);
	border-radius: 24px;
	padding: 60px;
}

.is-style-card-blue,
.card-blue{
	background: var(--global--color-dark-blue);
	border: 2px solid var(--global--color-blue);
	border-color: var(--global--color-blue);
	border-radius: 24px;
	padding: 60px;
}

/* Buttons */
.is-style-green-button > * {
	background: var(--global--color-dark-green);
	border: 1px solid var(--global--color-green);
	color:white;
	font-weight: bold;
	border-radius: 10px;
	transition: 300ms;
}
.is-style-green-button:hover > * {
	background:  var(--global--color-green);
}
.is-style-red-button > * {
	background: var(--global--color-dark-red);
	border: 1px solid var(--global--color-red);
	color:white;
	font-weight: bold;
	border-radius: 10px;
	transition: 300ms;
}
.is-style-red-button:hover > * {
	background:  var(--global--color-red);
}
.is-style-white-button > * {
	background: var(--global--color-white);
	color: var(--global--color-red);
	font-weight: bold;
	border-radius: 10px;
	transition: 300ms;
}
.is-style-white-button:hover > * {
	background:  var(--global--color-red);
}

.wp-block-spacer.is-style-negative{
	margin-top:-220px;
	height:0 !important;
}

.wp-block-embed.is-style-rounded {
	max-width: var(--mwidth);
	padding:5%;
	margin-left: auto;
	margin-right: auto;
}
.wp-block-embed.is-style-rounded iframe {
	border: 1px solid var(--global--color-blue);
	box-sizing: border-box;
	filter: drop-shadow(0px 24px 100px rgba(2, 28, 52, 0.7));
	border-radius: 24px;
}

.wp-block-image img {
    max-width: 100%;
    height: auto;
}

/* Alerts 
==================================*/
.alert-shortcode{
	padding:22px 33px;
	max-width: 673px;
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.alert-shortcode.is-style-card-blue, 
.alert-shortcode.is-style-card-blue a{
	color:white;
}
.alert-shortcode__close{
	background:none;
	border:none;
	cursor: pointer;
	padding:5px;
}
.alert-shortcode__closeIcon{
	pointer-events:none;
}

@media (max-width:749px){
	.alert-shortcode{
		flex-direction: column;
		text-align: center;
		width:80vw;
		padding:10px 15px 30px 15px;
	}
	.alert-shortcode.is-style-card-blue > span,
	.alert-shortcode.is-style-card-blue > a{
		order:2;
	}
	.alert-shortcode__close{
		align-self: flex-end;
		order:1;
	}
}

/* Util 
============================*/
/** Display 
============================*/
.d-flex{
	display:flex;
}
.d-block{
	display:flex;
}
.d-inline-flex{
	display:inline-flex;
}
.d-inline-block{
	display:inline-block;
}
.d-none{
	display:none;
}
/** Flex 
============================*/
.flex-wrap{
	flex-wrap: wrap;
}
.flex-nowrap{
	flex-wrap: nowrap;
}
/** Alignments 
============================*/
.justify-center{
	justify-content: center;
}
.justify-between{
	justify-content: space-between;
}
.justify-around{
	justify-content: space-around;
}
.justify-evenly{
	justify-content: space-evenly;
}
.justify-start{
	justify-content: flex-start;
}
.justify-end{
	justify-content: flex-end;
}
.align-center{
	align-items: center;
}
.align-start{
	align-items: flex-start;
}
.align-end{
	align-items: flex-end;
}
/** Margins
============================*/
.mt-0{
	margin-top:0 !important;
}
.mr-0{
	margin-right:0 !important;
}
.ml-0{
	margin-left:0 !important;
}
.mb-0{
	margin-bottom:0 !important;
}
.m-auto{
	margin: 0 auto;
}


/*------ custom ----*/

/*---- top nav ----- */

#menu-top-menu a{
	color: inherit;
	text-decoration: none;

}

#menu-top-menu{
	background: #192230;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
		margin: 0;
}

#menu-top-menu li{
	list-style: none;
	margin: 3px 10px;
}


/* additional */

.wave{
	position: relative;
	overflow: hidden;
}


.supplierlink a{
	text-decoration: none;
}
.supplierlink{
	background: #2aabe1;
	height: 25px;
	width: 25px;
	color: white;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.homeswitch{
	background: white;
height: 200px;
	width: 200px;
	color: black;
	border: 0px;
	border-top: 2px solid white;
}

.homeswitch:hover{
	background: white;
	border-top: 2px solid #2AABE1;
	color: black;
}

.supplierimage{
	position: absolute;
	bottom: 0;
	right: 30px;
}

.who{
	width: 70%;
	margin: 30px auto;
}


.event_info{
	display: flex;
	justify-content: space-between;}
	.slickvertical{
		position: relative;
	}

.productslide{
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px;
align-items: center;
width: 100% !important;
}

.productslide img{
	margin-right: 20px;
}
.slick-dots{
		position: absolute;
	right: 50%;
	width: 50px;
	top: 50%;

}

.slick-vertical .slick-slide{
	height: 400px !important;
}
.slick-dots li{
	display: block;
}
.slick-dots li button:before{
	color: white;
}
.slick-dots li.slick-active button:before{
	color: white;
}
.slick-track{
	max-width: 600px;
	margin: auto !important;
}
.date, .speaker{margin-right: 10px;}

.wave::after{
    content: " ";
    position: absolute;
    bottom: 0;
    margin-bottom: -340px;
    width: 3000px;
    background-image: url(https://ccdev.xyz/xpressLegal/wp-content/uploads/2021/12/border.svg);
    background-repeat: no-repeat;
    background-size: contain;
	overflow: hidden;
}

.boxes > *{
	border: 1px solid #EBEBEB;
	filter: drop-shadow(0px 4px 10px rgba(2, 28, 52, 0.4));
border-radius: 8px;
	padding: 20px 25px;
	background: white;
}

.eventbtn{
	color: white;
}
.eventbtn:hover{
	background: #EBEBEB;
	color: black;
}
.icos{
	width: 60px
}
.boxes{
	max-width: 1200px !important
}


.boxes .wp-block-image{
	margin: 0;
}

.boxes img{
	width: 40px;
}
.boxes figcaption{
	font-size: 14px;
}

.boxes .aligncenter{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.boxes .wp-block-column{
	display: flex;
	align-items: center;
	justify-content: center
}

.eventgrid li{
	padding: 40px 10%;
}

.eventgrid li:nth-child(odd){
	background: #FAFAFA !important;
}
.boxes .wp-block-column:not(:first-child){
	margin-left: 10px
}

a{
	color: inherit;
}
#primary-menu-list{
	color: #192230;
	font-size: 14px;
	align-items: center;
}

.topbtn{
	background: #2aabe1;
	color: white;
	padding: 10px 0px;
	border-radius: 8px;
}

.info .wp-block-column:not(:first-child){
	margin-left: 0px
}

.wp-block-button__link{
	color: white;
}

.center{
	justify-content: center;
}

.newsbox{
	border-radius: 30px;
position: relative;
}

.newsbox .wp-block-image{
	position: absolute;
	bottom: -25px;
	left: 0;
	width: 450px
}

.testimonial-slider .glide__slide{
    padding: 20px;
    background: #223048;
    height: 240px;
    display: flex;
    align-items: center;
    font-size: 12px;
	border-top: 2px solid #223048;
}
.testimonial-slider .glide__slide--active{
	border-top: 2px solid #2AABE1;
}
}


.wpcf7-form{
	background: white;
	padding: 40px;
	border-radius: 10px;
	border: 1px #E9E9E9 solid;
	box-shadow: 0px 44px 70px -10px rgba(24, 42, 61, 0.05);
}

.wpcf7-form input, .wpcf7-form textarea{
	background: #FAFAFA;
	border: 1px #E9E9E9 solid;
	padding: 5px;
	border-radius: 5px;
}

.wpcf7-form .wpcf7-submit{
	background: #2AABE1;
	color: white;
	padding: 10px 15px;
	border: none;
}

.cards{
	max-width: 1200px !important
}

.cards .wp-block-columns .wp-block-column{
	background: #223048;
	border-radius: 5px;
	padding: 20px;
	border: 2px solid #223048;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cards .wp-block-columns .wp-block-column:hover{
	border-top: 2px solid #2AABE1;
}

.wp-block-cover {
	margin: 0 !important;
}

.newsbox{
	margin: 40px auto !important;
}

.newsbox::before{
	opacity: 0!important;
}

.site-logo img{
	width: 250px;
	height: auto;
}
.footer__col p{
	margin: 0;
}
.footer__col h3{
margin-top: 0;
font-weight: 700;}

.footer__col{
	display: flex;
	flex-direction: column;
}

.footer__col a{
	color: #2aabe1;
}

.footer__col:last-child a{
	color: black;
}

.footer__inner{
	grid-template-columns: 50% 20% 20%;
	max-width: 1200px !important;
}

.footer_payment-methods img{
width: 80%;
}
.franchise-search input{
	padding: 15px;
	width: 80%;
	background: #FAFAFA;
	border: 1px solid #EBEBEB;
	border-radius: 5px;
	margin: 10px 0;
}
.franchise-search button{
	color: white;
	background: #2AABE1;
	border: 0;
	padding: 10px;
	width: 80%;
}

.post-153 .wp-block-query a{
	text-decoration: none;
}


.ptam-block-post-grid-image{
	display: flex;
	align-items: center;
}

.ptam-block-post-grid-image img{
	object-fit: cover;
	max-width: 100%;}

.ptam-block-post-grid-link.ptam-text-link{
	background: #2AABE1;
	padding: 10px;
		color: white !important;
	width: 50%;
	text-align: center;
	padding: 10px;
	border-radius: 5px;
	font-weight: 400;
}

.ptam-block-post-grid-title a{
	text-decoration: none;
}

.page-numbers{
	text-align: center;
	padding: 5px 10px !important;
}

.page-numbers .current{
		background: #2AABE1 !important;
	border-radius: 5px;
	color: white;
}

.ptam-block-post-grid-excerpt{
	font-size: 12px !important;
	width: 80%;
}

ul.sub-menu{
	display: none !important;
	background: #223048;
	color: white;
	margin: 20px;
	font-weight: 700;
	padding: 50px;
}

.menu-item-has-children:hover > .sub-menu{
	    display: grid !important;
  grid-template-columns: repeat(4, 1fr);
	position: absolute;
	left: 0;
	z-index: 9;
	columns: 4;
	width: 100vw;
	margin-top: 50px;
	max-width: 100%;
}





.toggle{
	background: none;
	border: none;
	color: black;
	margin: 10px;
}

.buttonholder{display: flex; align-items: center; justify-content: center;}

.toggle.active{
	border: 1px solid #2AABE1;
	color: #2AABE1;
	background: white;
}

.toggle.active:hover{
	color: white;
}

.toggle:hover{
	background: #2AABE1;
		color: white;
}

.boximage{
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wp-block-embed.is-style-rounded iframe{
	border: none;
}

.info{
display: flex;
	flex-basis: 100%;
flex: 1 1 0px;
	margin: 0 !important;
}
.padded{
	padding: 80px;
	height: 100%;
}

.newsblock{
	background: #FAFAFA;
	border-radius: 10px;
	padding: 40px;
	filter: drop-shadow(0px 14px 50px rgba(2, 28, 52, 0.4));
}

.menuheader{
	position: relative;
	padding-top: 30px;
	display: flex;
flex-direction: column;
margin: 0 5px;
}

ul .menuheader a:first-child:after{
margin-left: 10px;
	content: ">";
padding: 2px 8px;
border: 1px solid white;
border-radius: 50%;
}

ul ul .menuheader ul :after{
	display: none !important;
}

.menuheader:hover:after{
	background: #2AABE1;
	border: 1px solid #2AABE1;
}

#site-navigation .sub-menu{
	padding: 50px;
}

.search{
	display: block !important;
}

.container{
	max-width: 900px;
	margin: auto;
	display: flex;
}

.contright{
	margin-top: -60px;
	margin-bottom: 30px;
	background: white;
	padding: 20px;
	border-radius: 20px;
}

.contleft{
	margin-right: 100px;
}

.searchheader{
	width: 100vw;
	max-width: 100%;
background: #192230;
	color: white;
	font-weight: 700;
	padding: 60px 20%;
}

.featuresheader{
	width: 900px;
	margin: auto;
	display: grid;
	padding: 20px;
	font-weight: 700;
grid-template-columns: 1fr 1fr;
}


.rightheader{
	color: #2AABE1
}

.featurerow{
width: 900px;
	margin: auto;
	padding: 40px 20px;
	display: grid;
grid-template-columns: 1fr 1fr;
}

.featurerow div{
	padding: 20px;
}
.featurerow:nth-child(even){
	background: white;
}

.featurerow:nth-child(odd){
	background: #FAFAFA;
}

.featurerow div:nth-child(2){
	font-weight: 700;
}

.contright a{
	text-decoration: none;
}

.contright p{
	margin: 40px 0 0;
	width: 70%;
}

.mail{
	color: #2AABE1
}

.contleft{
margin-top: 40px;}

.tax-residential-searches-category article, .tax-commercial-searches-category article{
	max-width: 900px;
	margin: auto;
}

.tax-residential-searches-category .page-header, .tax-commercial-searches-category .page-header{
	width: 100vw;
background: #192230;
	color: white;
	font-weight: 700;
	padding: 60px 0;
}

.tax-residential-searches-category h1, .tax-commercial-searches-category h1{
	margin-left: 10%;
}
.nav-links{
	display: flex;
	margin: auto;
	max-width: 950px;
}

.nav-next .post-title, .nav-previous .post-title{
	display: none;
}

.meta-nav svg{
	display: none;
}
.nav-previous a, .nav-next a{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	margin: 20px;
	padding: 10px;
	border-radius: 5px;
}

.nav-next a{
	background: #2AABE1;
	color: white;
}

.nav-previous p, .nav-next p{
	margin: 0;
}

.single-post .entry-header{
	background: #192230;
	color: white;
	margin: 0;
	min-width: 100vw;
	padding: 60px 20%;
}

.post-type-archive-commercial-searches #content p, .post-type-archive-commercial-searches #content  h2,
.post-type-archive-residential-searches #content  p, .post-type-archive-residential-searches #content  h2{
	max-width: 900px;
	margin: 50px auto;
}

.searchcontainer{
	max-width: 900px;
	margin: auto;
display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
	align-items: center;
}

.searchcontainer div{
	margin: 10px;
}


.menu-item-object-commercial-searches-category .sub-menu, .menu-item-object-residential-searches-category .sub-menu{
	display: block !important;
	padding: 0 !important;
	text-align: left;
	font-weight: 400;
font-size: 12px;
margin-left: 15px !important
}

.menu-item-object-commercial-searches-category .sub-menu a, .menu-item-object-residential-searches-category .sub-menu a{
	padding: 0 !important;

}

.menu-item-object-commercial-searches-category.menu-item-has-children:hover > .sub-menu, .menu-item-object-residential-searches-category.menu-item-has-children:hover > .sub-menu{
	display: block !important;
position: inherit !important;
width: auto !important;
columns: 1;
	background: none;
}

.postholder{
	display: flex;
	max-width: 1200px;
	margin: auto;
}
.postcontent{
	width: 50%;
	margin-right: 10%;
}
.postimage{
	max-width: 40%;
align-self: flex-start;
}

.postimage img{
	align-self: flex-start;
	width: 100%;
	height: 200px;
	margin-top: -100px;
	border-radius: 20px;
	object-fit: contain;
}

.meta{
	display: flex;
	align-items: center;
	margin-bottom: 100px;
}

.meta img{
	border-radius: 50%;
	max-height: 60px;
	width: auto;
	margin-right: 10px;
}

#primary-mobile-menu{
	padding: 0;
}

.supplier-slider__slider .glide__slide, .supplier-slider2__slider .glide__slide{
	background: #FAFAFA;
	height: 300px;
	padding: 20px;
	color: black;
	border-radius: 10px;
	position: relative;
}

.supplier-slider__slider .glide__slide p, .supplier-slider2__slider .glide__slide p{
	font-size: 11px;
}


.supplier-slider__slider .glide__slide img, .supplier-slider2__slider .glide__slide img{
height: auto;
	max-height: 60px;
	width: auto;
	max-width: 140px;
	object-fit: contain;

}

.supplier-slider__slider .glide__slide h3{
margin-top: 0;
}

.history-slider__news-item{
	padding: 20px;
	background: #192230;
	height: 300px;
	border-radius: 20px;
border-top: 2px solid #192230;
}

.history-slider__news-item h3{
	font-weight: 700;
color: #2AABE1 !important;
}
.glide__slide--active .history-slider__news-item{
	border-top: 2px solid #2AABE1;
border-radius: 20px;}

.not a:hover{
	cursor: default !important;
	color: white;
}

.searchcontainer div{
	background: #2AABE1;
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
		border-radius: 10px;
	line-height: 20px;
	padding: 10px;
}

.searchcontainer div:hover{
	background: #192230;
}
.searchcontainer a{
	color: white;
	text-align: center;
	text-decoration: none;
}

@media only screen and (max-width: 749px) {
  .icos {
 display: none;
  }
	
	.franchisetop{
display: flex !important;
		flex-wrap: wrap-reverse;
		grid-gap: 0px !important;
	}
	
	.container{
	flex-wrap: wrap;
		padding: 20px;
}

	.contright{
		margin-top: 10px;
	}
	#menu-top-menu{
		display: none;
	}
	
	#site-navigation{
		left: 0;
	}
	#site-navigation .sub-menu{
		display: none !important;
		height: 0px;
		overflow: hidden;
		padding 0px;
	}
	
	.featuresheader, .featurerow{
		width: 80%;
		font-size: 14px
	}
	
	.site-footer{
		padding: 20px;
	}
	
	.footer__col{
		margin-bottom: 20px;
	}
	
	.searchcontainer{
		display: block;
	}
	
	.post-type-archive-commercial-searches #content p, 	.post-type-archive-residential-searches #content p, 	.post-type-archive-commercial-searches #content h2, 	.post-type-archive-residential-searches #content h2,.searchcontainer{
		margin: 20px;
	}
	.boxes > *, .who > *{
		margin: 10px;
	}
	
	.wp-image-273{
	display: none;
	}
	
	.mobile{
		box-shadow: 0px 44px 70px -10px rgba(24, 42, 61, 0.05);
	}
	
	.event_info{
		display: block;
	}
	.speaker{margin: 20px 0;}
}

@media only screen and (min-width: 749px){
	#site-navigation.mobile{
		display: none !important;
	}
	
	

}


.social-container{
	height: 100%;
	position: relative;
	padding-left: 15px;
}
.social-container	.social{
		background-color: #192230;
		border-radius: 100%;
		width: 70px;
		height: 70px;
		position: relative;
	}

	.social-toggle{
		position: absolute;
		font-size: 30px;
		cursor: pointer;
		width: 70px;
		height: 70px;
		text-align: center;
  		padding-top: 20px;
  		color: #FFF;
	}

	.social-drop{
		height: 300px;
		width: 70px;
		background: #192230;
		display: none;
		position: absolute;
		top: 55px;
		border-radius: 30px;
}
		.social-drop ul{
			margin-top: 10px;
		}

			.social-drop li{
			font-size: 35px;
			text-align: center;
			display: block;
			margin-top: 15px;
			margin-left: -23px;
			color: #FFF;
			width: 40px;
			height: 40px;
			cursor: pointer;
		}

		.tw:hover{
			color: #00aced;
		}

		.fb:hover{
			color: #3b5998;
		}

		.clip:hover{
			color: #fb8f3d;
		}

		.li:hover{
			color: #007bb6;
		}

		.wa:hover{
			color: #25D366;
		}

