@charset "UTF-8";
html:not(.sticky-header-active) .header-logo img {
  filter:brightness(0) invert(0)
}
.main-menu > li > a {color:#000}
.header-links .nav-link {color:#000}
  html.sticky-header-active .main-menu > li > a {
    color: #fff;
  }
    html.sticky-header-active .header-links .nav-link {color:#fff}
body{-moz-font-feature-settings:"ss02";-webkit-font-feature-settings:"ss02";font-feature-settings:"ss02"}
html:not(.sticky-header-active) .header-links .nav-link,
html:not(.sticky-header-active) .main-menu>li>a {
  color:#222529;
  font-weight:600;
  letter-spacing:-0.025em
}
.sticky-header-active .menu-item-has-badge path {
  fill:#fff!important
}
.sub-title {
  font-size:1.125rem
}
.position-sticky {
  position:sticky;
  position:-webkit-sticky;
  top:100px
}
.section-concept h1 {
  font-size:4rem;
  margin:0 0 2px -4px
}
.section-concept p {
  font-size:1.375rem;
  font-weight:500;
  line-height:2.125rem
}
.section-concept span>span {
  font-size:1.52rem;
  margin-left:8px;
  transform:rotate(-10deg);
  transform-origin:0 0;
  width:14.5%;
  bottom:25px;
  color:#08c
}
.section-concept span>span:after {
  transform:scaleY(-1) rotate(5deg);
  margin-left:12px
}
@media (max-width:767px) {
  .section-concept h1 span {
    display:none
  }
}
.section-demos {
  padding-bottom:5.2rem;
  margin-top:5.2rem
}
.section-demos .demo-list {
  display:flex
}
.section-demos .demo-list>.row {
  width:calc(100% + 20px)
}
.section-demos .demo-filter {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  overflow:visible!important;
  padding-left:30px
}
.section-demos .search-form {
  position:relative;
  border:2px solid #e7e7e7;
  border-radius:3rem;
  margin-bottom:2.25rem;
  margin-right:20px
}
.section-demos .search-form input {
  padding:0.8rem 1.5rem;
  border:none;
  background-color:transparent;
  font-size:1rem;
  font-weight:500;
  letter-spacing:0em;
  color:#999;
  opacity:0.5;
  width:100%;
  min-width:12rem
}
.section-demos .search-form input::placeholder {
  color:inherit
}
.section-demos .search-form .btn {
  position:absolute;
  top:53%;
  left:-0.7rem;
  font-size:1.2rem;
  min-width:5rem;
  transform:translateY(-50%);
  padding:0;
  background:none;
  transition:color 0.3s
}
.section-demos .sample-item+h3 {
  font-size:0.875rem;
  font-weight:600;
  text-align:center;
  padding-top:0.2rem;
  margin:0.2rem 0 2.3rem
}
.section-demos .filter-list {
  margin-bottom:1rem
}
.section-demos .filter-list ul {
  list-style:none
}
.section-demos .filter-list a {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  font-size:15px;
  font-weight:700;
  color:#222529;
  padding:4px 20px 5px 15px;
  text-align: right;
}
.section-demos .filter-list a:after {
  content:"";
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  font-size:0.8rem;
  color:transparent;
  display:inline-block;
  width:32px;
  height:32px;
  border:2px solid #e7e7e7;
  border-radius:5px;
  line-height:30px;
  text-align:center;
  margin-right:0.9rem
}
.section-demos .filter-list a.active:after {
  color:#08c
}
.section-demos .scroll-wrapper {
  overflow-y:auto;
  max-height:calc(100vh - 98px);
  scrollbar-gutter:stable;
  scrollbar-color:#0088cc #f4f4f4;
  scrollbar-width:thin
}
.section-demos .scroll-wrapper::-webkit-scrollbar {
  width:7px
}
.section-demos .scroll-wrapper::-webkit-scrollbar-track {
  background-color:#f4f4f4;
  border-radius:100px
}
.section-demos .scroll-wrapper::-webkit-scrollbar-thumb {
  background-color:#0088cc;
  border-radius:100px
}
.section-demos .support-pb a {
  margin:0;
  text-transform:none
}
.section-demos .support-pb a:before {
  content:none
}
.section-demos.bg-bottom-slash:after {
  background:none;
  position:absolute;
  top:99.99%;
  left:0;
  right:0;
  border-top:2.45vw solid #fff
}
.section-demos .filter-toggle-wrapper {
  margin-bottom:34px
}
.section-demos .filter-toggle {
  display:inline-block;
  position:relative;
  width:32px;
  height:32px;
  background-color:#f1f1f1;
  border-radius:3px;
  color:#222
}
.section-demos .filter-toggle:before {
  content:"";
  width:0.55rem;
  height:0.55rem;
  border-bottom:3px solid;
  border-right:3px solid;
  transform:rotate(-45deg) translate(-50%,-50%);
  position:absolute;
  top:55%;
  left:50%;
  transform-origin:center center;
  margin-top:-0.375rem
}
.section-demos .filter-toggle-out-wrapper {
  position:absolute;
  right:0;
  top:20px;
  width:70px;
  height:100%;
  z-index:2;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.15s,visibility 0.15s
}
.section-demos .filter-toggle-out-wrapper .position-sticky {
  display:flex;
  align-items:center;
  transform:rotate(-90deg) translate(-20px,calc(-100% - 10px));
  transform-origin:top right;
  min-width:120px
}
.section-demos .filter-toggle-out-wrapper h4 {
  margin-bottom:0;
  margin-left:10px
}
.section-demos .filter-toggle-out-wrapper .filter-toggle {
  display:block
}
.section-demos .filter-toggle-out-wrapper .filter-toggle:before {
  transform:rotate(-135deg) translate(0,-50%)
}
@media (max-width:767px) {
  .section-demos .filter-toggle-out-wrapper {
    display:none
  }
}
.demo-sidebar-active .section-demos .filter-toggle-out-wrapper {
  opacity:1;
  visibility:visible
}
@media (min-width:768px) {
  .section-demos .container-fluid {
    padding:0 50px;
    max-width:1902px
  }
}
.sample-item-list {
  margin-left:-10px;
  margin-right:-10px;
  overflow:hidden
}
.sample-item-list a:hover {
  text-decoration:none
}
.sample-item .inner-wrapper {
  position:absolute;
  top:10px;
  right:10px;
  opacity:0;
  transform:translateX(8px);
  transition:opacity 0.3s,transform 0.3s
}
.sample-item:hover .inner-wrapper {
  transform:translateX(0);
  opacity:1
}
.sample-item .inner-wrapper a {
  display:block;
  width:34px;
  height:34px;
  background-color:#222529;
  margin-bottom:6px;
  border-radius:3px;
  background-position:center;
  background-repeat:no-repeat;
  font-size:11px;
  font-weight:700;
  letter-spacing:-0.05em;
  color:#fff;
  position:relative
}
.sample-item .inner-wrapper a:before {
  position:absolute;
  right:100%;
  top:4px;
  margin-right:8px;
  background-color:inherit;
  padding:4px 14px;
  line-height:18px;
  border-radius:3px
}
.sample-item .inner-wrapper a:after {
  border-left:10px solid #222529;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  position:absolute;
  right:100%;
  top:50%;
  margin-top:-9px;
  width:13px
}
.sample-item .inner-wrapper a:hover:after {
  content:""
}
.sample-item .p-wpbakery {
  background-image:url(../img/icon-wpbakery.png)
}
.sample-item .p-wpbakery:hover:before {
  content:"WPBakery"
}
.sample-item .p-elementor {
  background-image:url(../img/icon-elementor.png)
}
.sample-item .p-elementor:hover:before {
  content:"Elementor"
}
.sample-item .p-vc {
  background-image:url(../img/icon-vc.png);
  background-size:70% auto
}
.sample-item .p-vc:hover:before {
  content:"VisualComposer"
}
.sample-item .p-gutenberg {
  background-image:url(../img/icon-gutenberg.png)
}
.sample-item .p-gutenberg:hover:before {
  content:"Gutenberg"
}
@media (max-width:767px) {
  .section-demos .demo-list {
    flex-wrap:wrap
  }
  .section-demos .demo-list .scroll-wrapper {
    scrollbar-gutter:unset;
    max-height:unset;
    overflow:hidden;
    margin-bottom:30px
  }
  .section-demos .search-form {
    margin-right:0
  }
  .section-demos .search-form #demo-name {
    width:100%
  }
  .section-demos .filter-list {
    text-align:left!important;
    border:none
  }
  .demo-list .demo-filter {
    display:block!important;
    width:100%;
    padding:0
  }
  .demo-list .demo-filter .filter-toggle-wrapper {
    display:none
  }
  .demo-list .demo-filter>.position-sticky {
    position:static!important
  }
  .demo-list .demo-filter a {
    justify-content:flex-start;
    padding-left:0;
    padding-right:0
  }
  .demo-list .demo-filter a:after {
    order:-1;
    margin:0 0.9rem 0 0
  }
  .demo-list .demo-filter {
    display:block!important;
    width:100%;
    padding:0
  }
  .demo-list .demo-filter .filter-toggle-wrapper {
    display:none
  }
  .demo-list .demo-filter>.position-sticky {
    position:static!important
  }
  .demo-list .demo-filter a {
    justify-content:flex-start;
    padding-left:0;
    padding-right:0
  }
  .demo-list .demo-filter a:after {
    order:-1;
    margin:0 0.9rem 0 0
  }
}