@import './_fonts.css';
@import './_accordion.css';
@import './_breadcrumb.css';
@import './_buttons.css';
@import './_cards.css';
@import './_dropdown.css';
@import './_form-control.css';
@import './_modal.css';
@import './_nav.css';
@import './_pagination.css';
@import './_slider.css';
@import './_table.css';

:root {
  --main-color: hsl(152, 100%, 43%);
  --main-color-fade-10: hsla(152, 100%, 43%, 10%);
  --main-color-darken-10: hsl(152, 100%, 33%);
  --main-color-dark: hsl(175, 75%, 9%);
  --accent-color: hsl(53, 100%, 49%);
  --focus-shadow: hsla(152, 100%, 33%, 25%);

  --neutral-0: hsl(0, 0%, 10%);
  --neutral-1: hsl(0, 0%, 20%);
  --neutral-2: hsl(0, 0%, 30%);
  --neutral-3: hsl(0, 0%, 40%);
  --neutral-4: hsl(0, 0%, 50%);
  --neutral-5: hsl(0, 0%, 60%);
  --neutral-6: hsl(0, 0%, 70%);
  --neutral-7: hsl(0, 0%, 80%);
  --neutral-8: hsl(0, 0%, 90%);
  --neutral-9: hsl(0, 0%, 95%);

  --white: hsl(0, 0%, 100%);
  --black: hsl(0, 0%, 0%);
  --body-bg: hsl(0, 0%, 99%);
  --text-dark: var(--main-color-dark);
  --text-light: var(--white);

  --nav-bg: var(--main-color-dark);
  --nav-border: var(--main-color);
  --nav-link-text: var(--text-light);
  --nav-link-text-hover: var(--main-color);
  --nav-hamburder-icon: var(--main-color);
  --nav-fixed-hamburder-icon: var(--neutral-6);
  --nav-fixed-bg: var(--white);
  --nav-fixed-link-text: var(--text-dark);
  --nav-fixed-link-text-hover: var(--main-color-darken-10);

  --panel-bg: var(--white);
  --panel-bg-dark: var(--neutral-9);
  --card-bg: var(--panel-bg);
  --body-text: var(--neutral-0);
  --border-color: var(--neutral-8);
  --input-border: var(--neutral-6);

  --top-banner-bg: var(--accent-color);

  --table-zebra-row: var(--main-color-fade-10);
  --table-header-bg: var(--main-color-dark);
  --table-header-text: var(--white);

  --font-size-xs: 0.813rem; /* 13px; */
  --font-size-s: 0.875rem; /* 14px; */
  --font-size-m: 1rem; /* 16px; */
  --font-size-l: 1.25rem; /* 20px; */

  --link-text: var(--main-color-darken-10);
  --title-text: var(--main-color-dark);
  --badge-text: var(--main-color-darken-10);
  --badge-bg: var(--white);
  --badge-text-hover: var(--main-color-dark);
  --badge-bg-hover: var(--main-color);
  --stats-text: var(--main-color);
  --quote-name: var(--main-color-darken-10);
  --quote-text: var(--main-color-dark);
  --quote-position: var(--main-color-dark);

  --top-banner-text: var(--main-color-dark);
  --top-banner-btn-text: var(--top-banner-text);
  --hero-banner-bg: var(--white);
  --hero-banner-border: var(--main-color);

  --big-bottom-border: var(--main-color);

  --home-hero-bg: var(--main-color-dark);
  --home-hero-title: var(--main-color);

  --footer-links-text: var(--white);
  --footer-links-bg: var(--main-color-dark);
  --footer-links-social-icons: var(--main-color);

  --corner-decor-primary: var(--main-color);
  --corner-decor-secondary: var(--main-color-dark);

  --story-logo-bg: var(--white);

  --card-product-icon-bg: var(--main-color);
  --card-product-icon-bg-hover: var(--main-color-dark);

  --select-bg-mobile: var(--body-bg);
  --select-bg: var(--white);
  --select-item-text: var(--body-text);
  --select-item-text-hover: var(--main-color-darken-10);
  --select-submenu-list-title: var(--main-color-darken-10);
  --chechbox-checked: var(--main-color-darken-10);
  --form-control-focus-border: var(--main-color-dark);

  --modal-header-bg: var(--main-color);
  --modal-header-title: var(--text-dark);

  --paginator-item-active: var(--main-color-darken-10);
  --paginator-item-text: var(--body-text);

  --btn-default-text: var(--main-color-dark);
  --btn-default-text-hover: var(--main-color-dark);
  --btn-default-text-active: var(--main-color-dark);
  --btn-default-border-hover: var(--main-color-dark);
  --btn-default-border-active-hover: var(--main-color-dark);
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: var(--body-bg);
  color: var(--body-text);
}
ul {
  padding-left: 1rem;
  list-style: url('../images/icons/list-bullet.png');
}
ul li {
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
}

a {
  color: var(--link-text);
}
.border {
  border-color: var(--border-color) !important;
}
.mt-10 {
  margin-top: 8rem !important;
}

.ts-main-color {
  color: var(--main-color);
}
.ts-main-color-darken {
  color: var(--main-color-darken-10);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--title-text);
}

h1 {
  font-weight: bold;
  margin-bottom: 2rem;
}
h2 {
  text-align: center;
  font-weight: bold;
  margin: 0 auto 3rem auto;
}
h5,
h6 {
  font-weight: 600;
  margin-bottom: 1rem;
}

.post-title {
  margin-bottom: 1rem;
}

.post-subtitle {
  color: var(--main-color-darken-10);
  text-align: left;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  padding: initial;
}

:target {
  scroll-margin-top: 100px;
}

.badge {
  color: var(--badge-text);
  border: 1px solid var(--badge-text);
  text-transform: uppercase;
  background: var(--badge-bg);
  font-weight: 600;
  border-radius: 0;
  font-size: 0.625rem;
}

.badge:hover,
.badge:focus {
  color: var(--badge-text-hover);
  border: 1px solid var(--badge-bg-hover);
  background: var(--badge-bg-hover);
}

.ts-cookies h5,
.ts-legal h5 {
  text-align: left;
  margin: 2rem auto;
}

.ts-blocks h2,
.ts-blocks h3{
  color: var(--main-color-darken-10);
  text-align: left;
  margin: 1rem auto;
  font-weight: 500;
  font-size: calc(1.325rem + .9vw);
  line-height: 1.2;
}

.ts-blocks img {
  margin-bottom: 2rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-height: 300px;
}

.ts-lp .ts-blocks img{
  max-height: 200px;
}

.ts-blocks > div {
  margin-bottom: 1rem;
  align-items: center;
}

.ts-blocks > div:last-child {
  margin-bottom: 0;
}

.ts-panel {
  background: var(--panel-bg);
  position: relative;
}

.ts-panel-dark {
  background: var(--panel-bg-dark);
  position: relative;
}

.ts-top-banner {
  background: var(--top-banner-bg);
  color: var(--top-banner-text);
  font-size: var(--font-size-xs);
}

.ts-top-banner .btn {
  font-size: var(--font-size-xs);
  color: var(--top-banner-btn-text);
}

.ts-has-decor {
  position: relative;
}

.ts-has-decor:before {
  content: '';
  position: absolute;
  background-color: var(--corner-decor-primary);
  width: 64px;
  height: 64px;
  top: -32px;
  left: 20px;
}

/* home page */
.ts-home .ts-hero {
  background-color: var(--home-hero-bg);
}
.ts-home h1 {
  color: var(--home-hero-title);
}
.ts-home .ts-hero p {
  color: var(--text-light);
}
/*  */

.ts-hero {
  background-color: var(--hero-banner-bg);
  border-bottom: 30px solid var(--hero-banner-border);
}

.ts-hero img {
  object-fit: cover;
  display: block;
  width: 100%;
}

.ts-hero p {
  color: var(--text-dark);
}

.ts-footer-links {
  background: var(--footer-links-bg);
  color: var(--footer-links-text);
}

.ts-has-bg-img {
  position: relative;
}

.ts-lp .ts-contact-form,
.ts-contact-us .ts-contact-form {
  position: relative;
  background: var(--panel-bg);
  margin-top: 2rem;
}

.ts-top-left-corners,
.ts-top-right-corners,
.ts-bottom-right-corners,
.ts-bottom-left-corners {
  position: relative;
}
.ts-top-left-corners:after {
  content: '';
  position: absolute;
  background-color: var(--corner-decor-primary);
  width: 30px;
  height: 20%;
  top: 0;
  left: -30px;
}

.ts-top-left-corners:before {
  content: '';
  position: absolute;
  background-color: var(--corner-decor-primary);
  width: 60%;
  height: 30px;
  top: -30px;
  left: -30px;
}

.ts-lp .ts-contact-form:before,
.ts-contact-us .ts-contact-form:before {
  content: '';
  position: absolute;
  background-color: var(--corner-decor-secondary);
  width: 100%;
  height: 30px;
  bottom: -30px;
  right: 0;
}

.ts-bottom-right-corners:before {
  content: '';
  position: absolute;
  background-color: var(--corner-decor-primary);
  width: 100%;
  height: 30px;
  bottom: -30px;
  right: 0;
}

.ts-bottom-left-corners:before {
  content: '';
  position: absolute;
  background-color: var(--corner-decor-primary);
  width: 100%;
  height: 30px;
  bottom: -30px;
  right: 0;
}

.ts-clickable {
  box-shadow: 0px 4px 6px 0px hsla(0, 0%, 0%, 0.1);
  transition: all 0.2s;
  cursor: pointer;
}
.ts-clickable:hover {
  box-shadow: 0px 4px 10px 0px hsla(0, 0%, 0%, 0.08);
  transform: scale(1.03);
}

.ts-social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.ts-social-icons i {
  font-size: var(--font-size-l);
}

.ts-social-icons a {
  min-width: 2.5rem;
  line-height: 1rem;
  padding: 0.5rem;
}

.ts-footer-links .ts-social-icons a {
  color: var(--footer-links-social-icons);
}

.ts-article .ts-article-img  {
  max-height: 25rem;
  object-fit: cover;
  width: 100%;
}

.ts-article-summary a,
.ts-blog .ts-sticky-box a,
.ts-archive .ts-sticky-box a,
.ts-blog .accordion-body a,
.ts-archive .accordion-body a,
.ts-guides .ts-sticky-box a,
.ts-guides .accordion-body a
{
  text-decoration: none;
}
.ts-article-summary a:hover,
.ts-article-summary a:focus,
.ts-blog .ts-sticky-box a:hover,
.ts-blog .ts-sticky-box a:focus,
.ts-archive .ts-sticky-box a:hover,
.ts-archive .ts-sticky-box a:focus,
.ts-blog .accordion-body a:hover,
.ts-archive .accordion-body a:focus,
.ts-guides .ts-sticky-box a:hover,
.ts-guides .ts-sticky-box a:focus,
.ts-guides .accordion-body a:hover,
.ts-guides .accordion-body a:focus{
  text-decoration: underline;
}

.ts-sticky-box {
  flex-direction: column;
  padding: 1.5rem;
  display: block;
  position: -webkit-sticky;
  position: sticky;
  top: 7.5rem;
}

.ts-article .ts-sticky-box .btn,
.ts-article .ts-author .btn {
  padding: 0;
  text-align: left;
}
.ts-article .ts-author .btn {
  font-size: 90%;
}

.ts-story-content h2,
.ts-article-content h2 {
  text-align: left;
  padding: 0;
  margin: 2rem 0 1rem;
}



.ts-blog-articles .card.ts-clickable,
.ts-blog .card.ts-clickable {
  cursor: initial;
}

.ts-blog-articles .card .ts-btn,
.ts-blog .card .ts-btn {
  padding: 0 0 0 80%;
}

.ts-story .ts-story-img {
  width: calc(100% - 1.75rem);
  max-height: 18rem;
  object-fit: cover;
}

.ts-story-logo {
  background: var(--story-logo-bg);
  width: 12rem;
  height: 6.5rem;
  padding: 1.25rem;
  position: absolute;
  bottom: 0;
  right: 0;
}

.ts-story-logo img {
  display: block;
  width: 100%;
  margin: 0 auto;
  object-fit: contain;
}

.ts-story .ts-icon {
  height: 56px;
  transform: rotate(180deg);
  opacity: 0.1;
  width: auto;
}

.blockquote {
  font-size: 1rem;
  color: var(--quote-text);
}
.blockquote p {
  font-style: italic;
}

.blockquote-footer::before {
  content: '';
}
.ts-quote-name {
  color: var(--quote-name);
  font-weight: bold;
}
.ts-quote-position {
  color: var(--quote-position);
}
.ts-author-image {
  height: 5rem;
  object-fit: cover;
  width: 5rem;
  border-radius: 50%;
}

.ts-author {
  display: flex;
  flex-direction: row;
  padding: 1.5rem;
}

.ts-archive .ts-author {
  display: flex;
  flex-direction: row;
  padding: 0;
}

.ts-archive .ts-author-image {
  border-radius: 0;
  width: 100px;
  height: 100px;
}
.ts-archive .ts-author-text {
  padding: 0 2rem;
  font-size: 1rem;
}

.ts-author .card-body {
  padding: 0 0 0 var(--bs-card-spacer-x);
}
.ts-author-name {
  color: var(--quote-name);
  font-weight: bold;
}
.ts-author-name,
.ts-author-text {
  font-size: 0.875em;
  margin-bottom: 0;
}

.ts-story .ts-sticky-box {
  margin: 0 3rem;
}

.ts-story .ts-sticky-box img {
  max-height: 4.375rem;
  margin: 0 auto;
  display: block;
}

.ts-story .ts-sticky-box .ts-stats ul {
  margin: 0;
  padding: 0;
}
.ts-story .ts-sticky-box .ts-stats li {
  list-style: none;
  padding-bottom: 2rem;
}
.ts-story .ts-sticky-box .ts-stats li:last-child {
  padding-bottom: 0;
}

.ts-story .ts-sticky-box .ts-stats li h6 {
  margin: 0;
}

.ts-story .ts-sticky-box .ts-stats li span {
  font-size: 1rem;
  font-weight: bold;
  color: var(--stats-text);
}

.ts-story .ts-sticky-box .ts-stats li.ts-number span {
  font-size: 2rem;
}

.customer-logos .slick-slide img {
  max-height: 84px;
  object-fit: contain;
}

.customer-logos .slick-slide {
  display: flex;
  align-self: center;
  padding: 0 0.5rem;
}

.ts-testimonials .ts-slide .ts-icon {
  height: 56px;
  transform: rotate(180deg);
  opacity: 0.05;
  width: auto;
}

.ts-testimonials .ts-slide img {
  object-fit: cover;
  height: 250px;
}

.ts-lp .ts-cards .card img,
.ts-white-paper img {
  width: 100%;
  object-fit: contain;
  max-height: 15rem;
}

.ts-white-paper .card.p-5 {
  padding: 1rem !important;
}


@media (min-width: 768px) {
  .p-md-6 {
    padding: 4rem !important;
  }
  .px-md-8 {
    padding-left: 6rem !important;
    padding-right: 6rem !important;
  }
  .mt-md-10 {
    margin: 8rem !important;
  }

  .ts-has-decor:before {
    left: 0;
  }

  .ts-top-banner .container {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ts-top-banner {
    font-size: var(--font-size-m);
  }

  .ts-top-banner .btn {
    font-size: var(--font-size-s);
  }

  .ts-bottom-right-corners:after {
    content: '';
    position: absolute;
    background-color: var(--corner-decor-primary);
    width: 30px;
    height: 20%;
    bottom: 0;
    right: -30px;
  }

  .ts-bottom-right-corners:before {
    right: -30px;
    width: 40%;
  }

  .ts-lp .ts-contact-form:after,
  .ts-contact-us .ts-contact-form:after {
    content: '';
    position: absolute;
    background-color: var(--corner-decor-secondary);
    width: 30px;
    height: 20%;
    bottom: 0;
    right: -30px;
  }

  .ts-lp .ts-contact-form:before,
  .ts-contact-us .ts-contact-form:before {
    right: -30px;
    width: 60%;
  }

  .ts-top-right-corners:after {
    content: '';
    position: absolute;
    background-color: var(--corner-decor-secondary);
    width: 30px;
    height: 30%;
    top: 0;
    right: -30px;
  }

  .ts-top-right-corners:before {
    content: '';
    position: absolute;
    background-color: var(--corner-decor-secondary);
    width: 15%;
    height: 30px;
    top: -30px;
    right: -30px;
  }

  .ts-bottom-left-corners:before {
    width: 15%;
    left: 0;
  }

  .ts-bottom-left-corners:after {
    content: '';
    position: absolute;
    background-color: var(--corner-decor-primary);
    width: 30px;
    height: 30%;
    bottom: -30px;
    left: -30px;
  }

  h1 {
    margin-bottom: 3rem;
    padding-top: 4rem;
  }

  h2 {
    margin-bottom: 5rem;
  }
	
  .ts-blocks h2 {
    font-size: 1.75rem;
  }

  .ts-blocks img {
    margin-bottom: 0;
  }

  .ts-blog .ts-main-article {
    padding-right: 2rem;
  }
  .ts-blog .ts-side-article {
    padding-left: 2rem;
  }
  .ts-blog .ts-side-article h2 {
    text-align: left;
    margin-bottom: 2rem;
    padding: 0;
  }

  .ts-white-paper .card.p-5 {
    padding: 3rem !important;
  }
	
  .post-subtitle {
    font-size: 1.75rem;
  }
  .ts-article .ts-article-content .wp-block-image{
	max-width: 50vw;
    margin: 2rem auto;
  }
}

@media (min-width: 992px) {
  .gap-md-7 {
    gap: 5rem !important;
  }
  .ts-hero img {
    height: initial;
  }
  h2 {
    padding: 0 8rem;
  }
  .ts-blocks h2,
  .ts-story-content h2,
  .ts-cookies h5,
  .ts-legal h5 {
    padding: 0;
  }

  .ts-story-content h2:first-child,
  .ts-article-content h2:first-child {
    margin-top: 0;
  }

  .ts-story-logo {
    bottom: -2rem;
  }

  .ts-lp .ts-contact-form,
  .ts-contact-us .ts-contact-form {
    margin-top: 0;
  }

  .ts-has-bg-img:before {
    content: url('../images/element-grid.svg');
    width: 330px;
    display: block;
    position: absolute;
    right: 0;
    top: -95px;
  }

  .ts-blocks > div {
    margin-bottom: 4rem;
  }

  .ts-story .ts-sticky-box {
    margin: 0;
  }
  .ts-article .ts-author-image {
    margin-bottom: 1rem;
  }

  .ts-author {
    flex-direction: column;
  }

  .ts-author .card-body {
    padding: 0;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1140px;
    padding-left: 0;
    padding-right: 0;
  }

  .ts-cookies .container,
  .ts-legal .container {
    padding-right: 18rem;
  }
  .ts-article .ts-article-content .wp-block-image{
	max-width: 35vw;
  }
}


/* Accordion styling */
.sp-easy-accordion .ea-card{
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
}
.sp-easy-accordion .ea-header{
	border: none;
	border-bottom: 1px solid var(--main-color);
	background: none !important;
}
.sp-easy-accordion>.ea-card.ea-expand>.ea-header a,
.sp-easy-accordion>.ea-card.ea-expand>.ea-header a i{
	color: var(--badge-text) !important;
}
.sp-easy-accordion .ea-header a,
.sp-easy-accordion .ea-body{
	padding: 15px 0 !important;
}