.container {
  max-width: 1295px;
  padding-right: 45px;
}
.admin-bar > .menu {margin-top: 32px;}
.page-template-template-tutorials #primary {
  padding-top: 82px;
  padding-bottom: 100px;
}
.admin-bar.page-template-template-tutorials #primary {
  padding-top: 105px;
  padding-bottom: 100px;
}
.sticky .menu-image img {content: initial}
.sticky .menu-left__list>.menu-item>a,
.sticky .menu-right__list .buttons .menu__buttons .btn--signin>a, .sticky .menu-right__list>li>a {
  color: var(--color-white);
}
.menu.sticky .menu-left__list>.menu-item-has-children>a:after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' stroke-width='96'%3E%3Cpath fill='white' d='M100 148.6L40.3 89c-5.5-5.5-5.5-14.2 0-19.7s14.2-5.5 19.7 0L100 109.3l40-40c5.5-5.5 14.2-5.5 19.7 0s5.5 14.2 0 19.7L100 148.6z'/%3E%3C/svg%3E");
}
.sticky .menu-right__list .btn--search svg {
  stroke: var(--color-white);
  fill: var(--color-white);
  stroke-width: 1px;
}

#hero-section .inner-banner__container{align-content:center;display:grid;gap:0 0;grid-auto-flow:column;grid-template-columns:100%;grid-template-rows:1fr;justify-content:center;position:relative}
#hero-section .inner-banner__container h1{color:var(--color-white);margin-bottom:20px}
#hero-section .inner-banner__container .inner-banner__left{display:flex;flex-flow:column;justify-content:center;margin:50px 0 0;padding:0;text-align:center;width:100%}

section.tutorials .searchandfilter ul {
  margin-left: 0;
  padding: unset;
}
section.tutorials .searchandfilter h4 {
  color: var(--color-brand-primary);
  font-size: var(--font-size-md);
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
}
section.tutorials li[data-sf-field-type=taxonomy] .sf-label-checkbox {
  color: var(--color-brand-primary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 21px;
}
.tutorials-head {
  background-color: var(--color-bg-blockquote);
  padding-block: 30px;
  margin-bottom: 50px;
}
.th-c {
  display: flex;
  align-items: center;
  gap: 20px;
}
.th-c:before {
  content: "";
  display: inline-block;
  background-image: url(../img/vid.png);
  width: 72px;
  height: 50px;
  background-size: contain;
  background-repeat: no-repeat;
}
.tutorials-head h1 {
  font-weight: 700;
  font-size: var(--font-size-3xl);
  margin: unset;
}
.tutorials-head p {
  font-size: var(--font-size-md);
  color: var(--color-brand-primary);
  margin-bottom: unset;
}
.tutorials-content {
  display: grid;
  grid-template-columns: 2fr 6fr;
  gap: 125px;
}
.tutorials-sidebar form > ul {
  padding: unset;
}
.tutorials-res {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  align-self: start;
}
.tutorials-res article {
  position: relative;
  border-radius: 5px;
  border: 1px solid var(--color-border-default);
  height: 466px;
  overflow: hidden;
}
.tutorial-tag {
  position: absolute;
  padding: 2px 10px;
  border-radius: 5px;
  font-weight: 700;
  font-size: var(--font-size-sm);
  line-height: 21px;
  color: var(--color-white);
  top: 10px;
  left: 10px;
}
.tutorial-img {
  margin-bottom: 15px;
}
.tutorial-img img {
  background-size: cover;
}
.tutorial-title {
  font-weight: 700;
  font-size: var(--font-size-md);
  line-height: 27px;
  margin-bottom: 5px;
}
.tutorial-par {
  margin-bottom: 20px;
}
.tutorial-par p {
  font-weight: 500;
  font-size: var(--font-size-sm);
  line-height: 21px;
  text-align: left;
  margin-bottom: unset;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: pre-wrap;
}
.tutorial-link {
  font-weight: 700;
  font-size: var(--font-size-sm);
  line-height: 21px;
  color: var(--color-brand-secondary);
  display: flex;
  align-items: center;
  gap: 5px;
}
.tutorial-link:hover {
  text-decoration: none;
}
.tutorial-link:after {
  content: '';
  background-image: url(../img/arrow-right.png);
  width: 8px;
  height: 11px;
  display: inline-block;
}
.tutorial-content {
  padding-inline: 15px;
}
.tutorial-cats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.tutorial-cats a {
  border: 1px solid var(--color-text-secondary);
  border-radius: 5px;
  padding: 2px 10px;
  font-weight: 500;
  font-size: var(--font-size-xs);
  line-height: 18px;
  color: var(--color-text-secondary);
}
.tutorial-cats a:hover {
  text-decoration: none;
  color: var(--color-text-secondary);
}
.mb100 {
  margin-bottom: 100px;
}
.tutorials-content.tutorials-content-full {
  grid-template-columns: 1fr;
}
.tutorials-content.tutorials-content-full .tutorials-res {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.ts-banner {
  border: 1px solid var(--color-border-default);
  border-radius: 5px;
  padding: 30px;
  margin-top: 40px;
}
.tsb-txt {
  font-weight: 500;
  font-size: var(--font-size-sm);
  line-height: 21px;
  text-align: center;
  color: var(--color-brand-primary);
  margin-bottom: 25px;
}
.tsb-link {
  display: block;
  background: var(--color-brand-secondary);
  border-radius: 5px;
  color: var(--color-white);
  text-align: center;
  font-weight: 700;
  font-size: var(--font-size-sm);
  line-height: 21px;
  padding-block: 12px;
}
.tsb-link:hover {
  color: var(--color-white);
  text-decoration: none;
}
.tutorials-res .ts-banner {
  display: none;
}
.filter-box {display: none}

@media (min-width: 48em) {
  #hero-section .inner-banner__container .inner-banner__left{align-items:flex-start;margin:auto;padding-right:40px;text-align:left}
}

@media (min-width: 64em) {
  #hero-section .inner-banner__container{grid-template-columns:50% 50%;padding:0}
}

@media screen and (min-width: 64em) and (max-width: 1299px) {
  .menu-right__list {gap: .7rem}
  .menu-right__list .buttons .menu__buttons .btn--signin {
    margin-right: 1rem;
  }
  .menu-image {padding-right: 1rem}
  .menu {padding-right: 40px}
}

@media screen and (max-width: 1340px) {
  .container {padding: unset}
  .tutorials-head, section.tutorials {padding-inline: 40px}
  .tutorials-res {grid-template-columns: 1fr 1fr}
}

@media screen and (max-width: 1024px) {
  .sticky .menu-hamburger .menu-hamburger__wrapper span {
    background-color: var(--color-white);
  }
}

@media screen and (min-width: 64em) and (max-width: 1199px) {
  .menu {
    padding: 0 20px;
  }
  .menu-left__list a {
    font-size: 13.5px;
  }
  .menu > .section-container .menu-left__list {
    margin-right: 1.5rem;
  }
}

@media screen and (max-width: 1200px) {
  .tutorials-content {
    grid-template-columns: 2.5fr 6fr;
    gap: 90px
  }
}

@media screen and (max-width: 992px) {
  .menu {
    padding-right: 20px;
  }
  .tutorials-content {
      grid-template-columns: 3.5fr 7fr;
      gap: 30px;
  }
  .searchandfilter ul li li {
    display: flex;
    align-items: flex-start;
  }
  .searchandfilter [type=checkbox] {
    margin-top: 3px;
  }
}

@media screen and (max-width: 768px) {
  .tutorials-res, .tutorials-content.tutorials-content-full .tutorials-res {
      grid-template-columns: 1fr 1fr;
  }
  .tutorials-res {gap: 16px}
  .tutorials-head {margin-bottom: 20px}
  section.tutorials .searchandfilter ul li.sf-field-search {
      display: block;
  }
  
  section.tutorials {
      padding-inline: 20px;
  }
  .tutorials-res article {height: auto}
  .th-c:before {display: none}
  .th-c h1:before {
    content: "";
    display: inline-block;
    background-image: url(../img/vid.png);
    width: 28px;
    height: 20px;
    background-size: contain;
  }
  .tutorials-head h1 {
      display: flex;
      align-items: center;
      gap: 10px;
  }
  .tutorial-img {
      margin-bottom: unset;
  }
  .tutorial-img img {
      display: block;
  }
  .tutorial-content {
      padding-block: 30px;
  }
  .tutorials-head, section.tutorials {
      padding-inline: 20px;
  }
  #search-filter-form-45610 > ul > li {
    padding: unset;
  }
  #search-filter-form-45610 > ul > li > ul {
    display: none;
    background-color: var(--color-bg-blockquote);
      padding: 15px 20px;
  }
  #search-filter-form-45610 > ul > li > ul li {
    margin-bottom: 10px;
  }
  #search-filter-form-45610 > ul > li > ul li:last-child {
    margin: unset;
  }
  #search-filter-form-45610 > ul > li h4 {
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--color-brand-primary);
    padding-inline: 20px;
    padding-block: 11px;
    padding-right: 16px;
  }
  #search-filter-form-45610 > ul > li:first-child h4 {
    border-top: 1px solid var(--color-text-secondary);
  }
  #search-filter-form-45610 > ul > li:last-child h4 {
    border: unset;
    padding-block: 20px;
  }
  #search-filter-form-45610 > ul > li a {
    display: inline-block;
  }
  #search-filter-form-45610 > ul > li > ul > li {
    display: block;
  }
  #search-filter-form-45610 > ul > li.sf-field-reset {
    padding: 20px;
  }
  .filter-box {
    border: 1px solid var(--color-brand-primary);
  }
  button.filter-btn {
    position: relative;
    border: unset;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-brand-primary);
    display: block;
    width: 100%;
    text-align: left;
    padding: 11px 15px;
    border-radius: unset;
  }
  button.filter-btn:before {
      content: "";
      background-image: url(../img/filter.svg);
      width: 18px;
      height: 12px;
      display: inline-block;
      margin-right: 10px;
      margin-top: 4px;
      float: left;
  }
  button.filter-btn.f-open:after {
      content: "";
      background-image: url(../img/close.svg);
      width: 14px;
      height: 14px;
      display: inline-block;
      float: right;
      margin-top: 5px;
  }
  
  button.filter-btn:hover {
    background: var(--color-white);
    color: var(--color-brand-primary);
  }
  button.filter-btn:focus {outline: unset}
}

@media screen and (max-width: 767px) {
  #hero-section .inner-banner__container {padding: 0 10px}
  #hero-section .inner-banner__container h1{font-size: var(--font-size-2xl);line-height:37px;margin-bottom:30px}
  .tutorials-res, .tutorials-content.tutorials-content-full .tutorials-res {
      grid-template-columns: 1fr;
      gap: 25px;
  }
  .tutorials-content {
      grid-template-columns: 1fr;
      gap: 25px;
  }
  section.tutorials .searchandfilter ul li {
      display: none;
  }
  .tutorials-res .ts-banner {
    display: none;
  }
  .tutorials-res .ts-banner {
      display: block;
      margin-top: unset;
  }
  section.tutorials .sf-field-search input {
      max-width: unset;
  }
  .searchandfilter h4:after {
      content: "";
      background-image: url(../img/arrow-down.svg);
      width: 12px;
      height: 10px;
      display: inline-block;
      float: right;
      margin-top: 5px;
      transition: .5s;
  }
  .searchandfilter h4.f--open:after {
    rotate: 180deg;
  }
  .filter-box {
    display: block;
  }
}