Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <header id="header" class="u-header u-header--abs-top-md u-header--bg-transparent u-header--show-hide-md" data-header-fix-moment="500" data-header-fix-effect="slide">
    <!-- Search -->
    <div id="searchPushTop" class="u-search-push-top u-unfold--jquery-slide u-unfold--hidden" style="display: none;">
      <div class="container position-relative">
        <div class="u-search-push-top__content">
          <!-- Close Button -->
          <button type="button" class="close u-search-push-top__close-btn target-of-invoker-has-unfolds" aria-haspopup="true" aria-expanded="false" aria-controls="searchPushTop" data-unfold-type="jquery-slide" data-unfold-target="#searchPushTop">
            <span aria-hidden="true">×</span>
          </button>
          <!-- End Close Button -->

          <!-- Input -->
          <form class="js-focus-state input-group">
            <input type="search" class="form-control" placeholder="Search Front" aria-label="Search Front">
            <div class="input-group-append">
              <button type="button" class="btn btn-primary">Search</button>
            </div>
          </form>
          <!-- End Input -->

          <!-- Content -->
          <div class="row d-none d-md-flex mt-7">
            <div class="col-sm-6">
              <strong class="d-block mb-2">Quick Links</strong>

              <div class="row">
                <!-- List Group -->
                <div class="col-6">
                  <div class="list-group list-group-transparent list-group-flush list-group-borderless">
                    <a class="list-group-item list-group-item-action" href="#">
                      <span class="fas fa-angle-right list-group-icon"></span>
                      Search Results List
                    </a>
                    <a class="list-group-item list-group-item-action" href="#">
                      <span class="fas fa-angle-right list-group-icon"></span>
                      Search Results Grid
                    </a>
                    <a class="list-group-item list-group-item-action" href="#">
                      <span class="fas fa-angle-right list-group-icon"></span>
                      About
                    </a>
                    <a class="list-group-item list-group-item-action" href="#">
                      <span class="fas fa-angle-right list-group-icon"></span>
                      Services
                    </a>
                    <a class="list-group-item list-group-item-action" href="#">
                      <span class="fas fa-angle-right list-group-icon"></span>
                      Invoice
                    </a>
                  </div>
                </div>
                <!-- End List Group -->

                <!-- List Group -->
                <div class="col-6">
                  <div class="list-group list-group-transparent list-group-flush list-group-borderless">
                    <a class="list-group-item list-group-item-action" href="#">
                      <span class="fas fa-angle-right list-group-icon"></span>
                      Profile
                    </a>
                    <a class="list-group-item list-group-item-action" href="#">
                      <span class="fas fa-angle-right list-group-icon"></span>
                      User Contacts
                    </a>
                    <a class="list-group-item list-group-item-action" href="#">
                      <span class="fas fa-angle-right list-group-icon"></span>
                      Reviews
                    </a>
                    <a class="list-group-item list-group-item-action" href="#">
                      <span class="fas fa-angle-right list-group-icon"></span>
                      Settings
                    </a>
                  </div>
                </div>
                <!-- End List Group -->
              </div>
            </div>

            <div class="col-sm-6">
              <!-- Banner -->
              <div class="rounded u-search-push-top__banner">
                <div class="d-flex align-items-center">
                  <div class="u-search-push-top__banner-container">
                    <img class="img-fluid u-search-push-top__banner-img" src="https://htmlstream.com/preview/front-v2.7.0/assets/img/mockups/img3.png" alt="Image Description">
                    <img class="img-fluid u-search-push-top__banner-img" src="https://htmlstream.com/preview/front-v2.7.0/assets/img/mockups/img2.png" alt="Image Description">
                  </div>

                  <div>
                    <div class="mb-4">
                      <strong class="d-block mb-2">Featured Item</strong>
                      <p>Create astonishing web sites and pages.</p>
                    </div>
                    <a class="btn btn-xs btn-soft-success transition-3d-hover" href="index.html">Apply Now <span class="fas fa-angle-right ml-2"></span></a>
                  </div>
                </div>
              </div>
              <!-- End Banner -->
            </div>
          </div>
          <!-- End Content -->
        </div>
      </div>
    </div>
    <!-- End Search -->

    <div class="u-header__section">
      <!-- Topbar -->
      <div class="container u-header__hide-content pt-2">
        <div class="d-flex align-items-center">
          <!-- Language -->
          <div class="position-relative">
            <a id="languageDropdownInvoker" class="dropdown-nav-link dropdown-toggle d-flex align-items-center" href="javascript:;" role="button" aria-controls="languageDropdown" aria-haspopup="true" aria-expanded="false" data-unfold-event="hover" data-unfold-target="#languageDropdown" data-unfold-type="css-animation" data-unfold-duration="300" data-unfold-delay="300" data-unfold-hide-on-scroll="true" data-unfold-animation-in="slideInUp" data-unfold-animation-out="fadeOut">
               <img class="dropdown-item-icon" src="https://htmlstream.com/preview/front-v2.7.0/assets/vendor/flag-icon-css/flags/4x3/us.svg" alt="SVG">
              <span class="d-inline-block d-sm-none">US</span>
              <span class="d-none d-sm-inline-block">United States</span>
            </a>

            <div id="languageDropdown" class="dropdown-menu dropdown-unfold u-unfold--css-animation u-unfold--hidden fadeOut" aria-labelledby="languageDropdownInvoker" style="animation-duration: 300ms;">
              <a class="dropdown-item active" href="#">English</a>
              <a class="dropdown-item" href="#">Deutsch</a>
              <a class="dropdown-item" href="#">Español&lrm;</a>
            </div>
          </div>
          <!-- End Language -->

          <div class="ml-auto">
            <!-- Jump To -->
            <div class="d-inline-block d-sm-none position-relative mr-2">
              <a id="jumpToDropdownInvoker" class="dropdown-nav-link dropdown-toggle d-flex align-items-center" href="javascript:;" role="button" aria-controls="jumpToDropdown" aria-haspopup="true" aria-expanded="false" data-unfold-event="hover" data-unfold-target="#jumpToDropdown" data-unfold-type="css-animation" data-unfold-duration="300" data-unfold-delay="300" data-unfold-hide-on-scroll="true" data-unfold-animation-in="slideInUp" data-unfold-animation-out="fadeOut">
                Jump to
              </a>

              <div id="jumpToDropdown" class="dropdown-menu dropdown-unfold u-unfold--css-animation u-unfold--hidden fadeOut" aria-labelledby="jumpToDropdownInvoker" style="animation-duration: 300ms;">
                <a class="dropdown-item" href="../../html/pages/help.html">Help</a>
                <a class="dropdown-item" href="../../html/pages/contacts-agency.html">Contacts</a>
              </div>
            </div>
            <!-- End Jump To -->

            <!-- Links -->
            <div class="d-none d-sm-inline-block ml-sm-auto">
              <ul class="list-inline mb-0">
                <li class="list-inline-item mr-0">
                  <a class="u-header__navbar-link" href="../pages/help.html">Help</a>
                </li>
                <li class="list-inline-item mr-0">
                  <a class="u-header__navbar-link" href="../pages/contacts-agency.html">Contacts</a>
                </li>
              </ul>
            </div>
            <!-- End Links -->
          </div>

          <ul class="list-inline ml-2 mb-0">
            <!-- Search -->
            <li class="list-inline-item">
              <a class="btn btn-xs btn-icon btn-text-secondary target-of-invoker-has-unfolds" href="javascript:;" role="button" aria-haspopup="true" aria-expanded="false" aria-controls="searchPushTop" data-unfold-type="jquery-slide" data-unfold-target="#searchPushTop">
                <span class="fas fa-search btn-icon__inner"></span>
              </a>
            </li>
            <!-- End Search -->

            <!-- Shopping Cart -->
            <li class="list-inline-item position-relative">
              <a id="shoppingCartDropdownInvoker" class="btn btn-xs btn-icon btn-text-secondary" href="javascript:;" role="button" aria-controls="shoppingCartDropdown" aria-haspopup="true" aria-expanded="false" data-unfold-event="hover" data-unfold-target="#shoppingCartDropdown" data-unfold-type="css-animation" data-unfold-duration="300" data-unfold-delay="300" data-unfold-hide-on-scroll="true" data-unfold-animation-in="slideInUp" data-unfold-animation-out="fadeOut">
                <span class="fas fa-shopping-cart btn-icon__inner"></span>
              </a>

              <div id="shoppingCartDropdown" class="dropdown-menu dropdown-unfold dropdown-menu-right text-center p-7 u-unfold--css-animation u-unfold--hidden fadeOut" aria-labelledby="shoppingCartDropdownInvoker" style="min-width: 250px; animation-duration: 300ms;">
                <span class="btn btn-icon btn-soft-primary rounded-circle mb-3">
                  <span class="fas fa-shopping-basket btn-icon__inner"></span>
                </span>
                <span class="d-block">Your Cart is Empty</span>
              </div>
            </li>
            <!-- End Shopping Cart -->

            <!-- Account Login -->
            <li class="list-inline-item">
              <!-- Account Sidebar Toggle Button -->
              <a id="sidebarNavToggler" class="btn btn-xs btn-icon btn-text-secondary target-of-invoker-has-unfolds" href="javascript:;" role="button" aria-controls="sidebarContent" aria-haspopup="true" aria-expanded="false" data-unfold-event="click" data-unfold-hide-on-scroll="false" data-unfold-target="#sidebarContent" data-unfold-type="css-animation" data-unfold-animation-in="fadeInRight" data-unfold-animation-out="fadeOutRight" data-unfold-duration="500">
                <span class="fas fa-user-circle btn-icon__inner font-size-1"></span>
              </a>
              <!-- End Account Sidebar Toggle Button -->
            </li>
            <!-- End Account Login -->
          </ul>
        </div>
      </div>
      <!-- End Topbar -->

      <div id="logoAndNav" class="container">
        <!-- Nav -->
        <nav class="js-mega-menu navbar navbar-expand-md u-header__navbar u-header__navbar--no-space hs-menu-initialized hs-menu-horizontal">
          <!-- Logo -->
          <a class="navbar-brand u-header__navbar-brand u-header__navbar-brand-center" href="index.html" aria-label="Front">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="46px" height="46px" viewBox="0 0 46 46" xml:space="preserve" style="margin-bottom: 0;">
              <path fill="#3F7DE0" opacity=".65" d="M23,41L23,41c-9.9,0-18-8-18-18v0c0-9.9,8-18,18-18h11.3C38,5,41,8,41,11.7V23C41,32.9,32.9,41,23,41z"></path>
              <path class="fill-info" opacity=".5" d="M28,35.9L28,35.9c-9.9,0-18-8-18-18v0c0-9.9,8-18,18-18l11.3,0C43,0,46,3,46,6.6V18C46,27.9,38,35.9,28,35.9z"></path>
              <path class="fill-primary" opacity=".7" d="M18,46L18,46C8,46,0,38,0,28v0c0-9.9,8-18,18-18h11.3c3.7,0,6.6,3,6.6,6.6V28C35.9,38,27.9,46,18,46z"></path>
              <path class="fill-white" d="M17.4,34V18.3h10.2v2.9h-6.4v3.4h4.8v2.9h-4.8V34H17.4z"></path>
            </svg>
            <span class="u-header__navbar-brand-text">Front</span>
          </a>
          <!-- End Logo -->

          <!-- Responsive Toggle Button -->
          <button type="button" class="navbar-toggler btn u-hamburger" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navBar" data-toggle="collapse" data-target="#navBar">
            <span id="hamburgerTrigger" class="u-hamburger__box">
              <span class="u-hamburger__inner"></span>
            </span>
          </button>
          <!-- End Responsive Toggle Button -->

          <!-- Navigation -->
          <div id="navBar" class="collapse navbar-collapse u-header__navbar-collapse">
            <ul class="navbar-nav u-header__navbar-nav">
              <!-- Home -->
              <li class="nav-item hs-has-mega-menu u-header__nav-item" data-event="hover" data-animation-in="slideInUp" data-animation-out="fadeOut" data-position="left">
                <a id="homeMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Home</a>

                <!-- Home - Mega Menu -->
                <div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="homeMegaMenu" style="display: none;">
                  <div class="row no-gutters">
                    <div class="col-lg-6">
                      <!-- Banner Image -->
                      <div class="u-header__banner" style="background-image: url(https://htmlstream.com/preview/front-v2.7.0/assets/img/750x750/img1.jpg);">
                        <div class="u-header__banner-content">
                          <div class="mb-4">
                            <span class="u-header__banner-title">Branding Works</span>
                            <p class="u-header__banner-text">Experience a level of our quality in both design &amp; customization works.</p>
                          </div>
                          <a class="btn btn-primary btn-sm transition-3d-hover" href="#">Learn More <span class="fas fa-angle-right ml-2"></span></a>
                        </div>
                      </div>
                      <!-- End Banner Image -->
                    </div>

                    <div class="col-lg-6">
                      <div class="row u-header__mega-menu-wrapper">
                        <div class="col-sm-6 mb-3 mb-sm-0">
                          <span class="u-header__sub-menu-title">Classic</span>
                          <ul class="u-header__sub-menu-nav-group mb-3">
                            <li><a class="nav-link u-header__sub-menu-nav-link" href="index.html">Classic Agency</a></li>
                            <li><a class="nav-link u-header__sub-menu-nav-link" href="classic-business.html">Classic Business</a></li>
                            <li><a class="nav-link u-header__sub-menu-nav-link" href="classic-marketing.html">Classic Marketing</a></li>
                            <li><a class="nav-link u-header__sub-menu-nav-link" href="classic-consulting.html">Classic Consulting</a></li>
                            <li><a class="nav-link u-header__sub-menu-nav-link" href="classic-start-up.html">Classic Start-up</a></li>
                            <li><a class="nav-link u-header__sub-menu-nav-link" href="classic-studio.html">Classic Studio <span class="badge badge-success badge-pill ml-1">New</span></a></li>
                          </ul>

                          <span class="u-header__sub-menu-title">Corporate</span>
                          <ul class="u-header__sub-menu-nav-group mb-3">
                            <li><a class="nav-link u-header__sub-menu-nav-link" href="corporate-agency.html">Corporate Agency</a></li>
                            <li><a class="nav-link u-header__sub-menu-nav-link" href="corporate-start-up.html">Corporate Start-Up</a></li>
                            <li><a class="nav-link u-header__sub-menu-nav-link" href="corporate-business.html">Corporate Business</a></li>
                          </ul>

                          <span class="u-header__sub-menu-title">Portfolio</span>
                          <ul class="u-header__sub-menu-nav-group">
                            <li><a class="nav-link u-header__sub-menu-nav-link" href="portfolio-agency.html">Portfolio Agency</a></li>
                            <li><a class="nav-link u-header__sub-menu-nav-link" href="portfolio-profile.html">Portfolio Profile</a></li>
                          </ul>
                        </div>

                        <div class="col-sm-6">
                          <span class="u-header__sub-menu-title">App</span>
                          <ul class="u-header__sub-menu-nav-group mb-3">
                            <li><a class="nav-link u-header__sub-menu-nav-link" href="app-ui-kit.html">App UI kit <span class="badge badge-success badge-pill ml-1">New</span></a></li>
                            <li><a class="nav-link u-header__sub-menu-nav-link" href="app-saas.html">App SaaS <span class="badge badge-success badge-pill ml-1">New</span></a></li>
                            <li><a class="nav-link u-header__sub-menu-nav-link" href="app-workflow.html">App Workflow <span class="badge badge-success badge-pill ml-1">New</span></a></li>
                            <li><a class="nav-link u-header__sub-menu-nav-link" href="app-payment.html">App Payment</a></li>
                            <li><a class="nav-link u-header__sub-menu-nav-link" href="app-software.html">App Software</a></li>
                          </ul>

                          <span class="u-header__sub-menu-title">Onepages</span>
                          <ul class="u-header__sub-menu-nav-group mb-3">
                            <li><a class="nav-link u-header__sub-menu-nav-link" href="onepage-creative.html">Onepage Creative</a></li>
                            <li><a class="nav-link u-header__sub-menu-nav-link" href="onepage-saas.html">Onepage SaaS</a></li>
                          </ul>

                          <span class="u-header__sub-menu-title">Blog</span>
                          <ul class="u-header__sub-menu-nav-group">
                            <li><a class="nav-link u-header__sub-menu-nav-link" href="blog-agency.html">Blog Agency</a></li>
                            <li><a class="nav-link u-header__sub-menu-nav-link" href="blog-start-up.html">Blog Start-Up</a></li>
                            <li><a class="nav-link u-header__sub-menu-nav-link" href="blog-business.html">Blog Business</a></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Home - Mega Menu -->
              </li>
              <!-- End Home -->

              <!-- Pages -->
              <li class="nav-item hs-has-sub-menu u-header__nav-item" data-event="hover" data-animation-in="slideInUp" data-animation-out="fadeOut">
                <a id="pagesMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-labelledby="pagesSubMenu">Pages</a>

                <!-- Pages - Submenu -->
                <ul id="pagesSubMenu" class="hs-sub-menu u-header__sub-menu animated fadeOut" aria-labelledby="pagesMegaMenu" style="min-width: 230px; display: none;">
                  <!-- Account -->
                  <li class="hs-has-sub-menu">
                    <a id="navLinkPagesAccount" class="nav-link u-header__sub-menu-nav-link u-header__sub-menu-nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesAccount">Account</a>

                    <ul id="navSubmenuPagesAccount" class="hs-sub-menu u-header__sub-menu" aria-labelledby="navLinkPagesAccount" style="min-width: 230px; display: none;">
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../account/dashboard.html">Dashboard</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../account/profile.html">Profile</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../account/my-tasks.html">My tasks</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../account/projects.html">Projects</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../account/members.html">Members</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../account/edit-profile.html">Edit profile</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../account/change-password.html">Change password</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../account/notifications.html">Notifications</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../account/activity.html">Activity</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../account/payment-methods.html">Payment methods</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../account/invite-friends.html">Invite friends</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../account/plans.html">Plans</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../account/api-token.html">API Token</a></li>
                    </ul>
                  </li>
                  <!-- End Account -->

                  <!-- Company -->
                  <li class="hs-has-sub-menu">
                    <a id="navLinkPagesCompany" class="nav-link u-header__sub-menu-nav-link u-header__sub-menu-nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesCompany">Company</a>

                    <ul id="navSubmenuPagesCompany" class="hs-sub-menu u-header__sub-menu" aria-labelledby="navLinkPagesCompany" style="min-width: 230px; display: none;">
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/about-agency.html">About Agency</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/services-agency.html">Services Agency</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/careers.html">Careers</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/careers-single.html">Careers Single</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/hire-us.html">Hire Us</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/customers.html">Customers</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/customer-story.html">Customer story</a></li>
                    </ul>
                  </li>
                  <!-- Company -->

                  <!-- Portfolio -->
                  <li class="hs-has-sub-menu">
                    <a id="navLinkPagesPortfolio" class="nav-link u-header__sub-menu-nav-link u-header__sub-menu-nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesPortfolio">Portfolio</a>

                    <ul id="navSubmenuPagesPortfolio" class="hs-sub-menu u-header__sub-menu" aria-labelledby="navLinkPagesPortfolio" style="min-width: 230px; display: none;">
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../portfolio/boxed-classic.html">All layouts</a></li>
                      <li class="dropdown-divider"></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../portfolio/case-studies-simple.html">Case Studies Simple</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../portfolio/case-studies-modern.html">Case Studies Modern</a></li>
                      <li class="dropdown-divider"></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../portfolio/single-page-simple.html">Single Page Simple</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../portfolio/single-page-grid.html">Single Page Grid</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../portfolio/single-page-masonry.html">Single Page Masonry</a></li>
                    </ul>
                  </li>
                  <!-- End Portfolio -->

                  <!-- Login -->
                  <li class="hs-has-sub-menu">
                    <a id="navLinkPagesLogin" class="nav-link u-header__sub-menu-nav-link u-header__sub-menu-nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesLogin">Login &amp; Signup</a>

                    <ul id="navSubmenuPagesLogin" class="hs-sub-menu u-header__sub-menu" aria-labelledby="navLinkPagesLogin" style="min-width: 230px; display: none;">
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/login.html">Login</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/signup.html">Signup</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/recover-account.html">Recover Account</a></li>
                      <li class="dropdown-divider"></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/login-simple.html">Login Simple</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/signup-simple.html">Signup Simple</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/recover-account-simple.html">Recover Account Simple</a></li>
                    </ul>
                  </li>
                  <!-- Signup -->

                  <!-- Contacts -->
                  <li class="hs-has-sub-menu">
                    <a id="navLinkContactsServices" class="nav-link u-header__sub-menu-nav-link u-header__sub-menu-nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuContactsServices">Contacts</a>

                    <ul id="navSubmenuContactsServices" class="hs-sub-menu u-header__sub-menu" aria-labelledby="navLinkContactsServices" style="min-width: 230px; display: none;">
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/contacts-agency.html">Contacts Agency</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/contacts-start-up.html">Contacts Start-Up</a></li>
                    </ul>
                  </li>
                  <!-- Contacts -->

                  <!-- Resources -->
                  <li class="hs-has-sub-menu">
                    <a id="navLinkPagesResources" class="nav-link u-header__sub-menu-nav-link u-header__sub-menu-nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesResources">Resources</a>

                    <ul id="navSubmenuPagesResources" class="hs-sub-menu u-header__sub-menu" aria-labelledby="navLinkPagesResources" style="min-width: 230px; display: none;">
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/help.html">Help</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/help-article.html">Help article</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/faq.html">FAQ</a></li>
                    </ul>
                  </li>
                  <!-- Resources -->

                  <!-- Utilities -->
                  <li class="hs-has-sub-menu">
                    <a id="navLinkPagesUtilities" class="nav-link u-header__sub-menu-nav-link u-header__sub-menu-nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesUtilities">Utilities</a>

                    <ul id="navSubmenuPagesUtilities" class="hs-sub-menu u-header__sub-menu" aria-labelledby="navLinkPagesUtilities" style="min-width: 230px; display: none;">
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/pricing.html">Pricing</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/terms.html">Terms &amp; Conditions</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/privacy.html">Privacy &amp; Policy</a></li>
                    </ul>
                  </li>
                  <!-- Utilities -->

                  <!-- Specialty -->
                  <li class="hs-has-sub-menu">
                    <a id="navLinkPagesSpecialty" class="nav-link u-header__sub-menu-nav-link u-header__sub-menu-nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesSpecialty">Specialty</a>

                    <ul id="navSubmenuPagesSpecialty" class="hs-sub-menu u-header__sub-menu" aria-labelledby="navLinkPagesSpecialty" style="min-width: 230px; display: none;">
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/cover-page.html">Cover Page</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/coming-soon.html">Coming Soon</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/maintenance-mode.html">Maintenance Mode</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/status.html">Status</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/invoice.html">Invoice</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/error-404.html">Error 404</a></li>
                    </ul>
                  </li>
                  <!-- Specialty -->
                </ul>
                <!-- End Pages - Submenu -->
              </li>
              <!-- End Pages -->

              <!--  Dropdown -->
              <li class="nav-item hs-has-sub-menu u-header__nav-item" data-event="hover" data-animation-in="slideInUp" data-animation-out="fadeOut">
                <a id="dropdownMegaMenuSubmenuDark" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-labelledby="dropdownSubMenuSubmenuDark">Dropdown</a>

                <!-- Dropdown - Submenu -->
                <ul id="dropdownSubMenuSubmenuDark" class="hs-sub-menu u-header__sub-menu animated fadeOut" aria-labelledby="dropdownMegaMenuSubmenuDark" style="min-width: 230px; display: none;">
                  <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Action</a></li>
                  <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Another action</a></li>
                  <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Something else here</a></li>
                  <li class="dropdown-divider"></li>

                  <!-- Submenu -->
                  <li class="hs-has-sub-menu">
                    <a id="navLinkDropdownSubmenuDark" class="nav-link u-header__sub-menu-nav-link u-header__sub-menu-nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuDropdownSubmenuDark">Submenu</a>

                    <ul id="navSubmenuDropdownSubmenuDark" class="hs-sub-menu u-header__sub-menu animated" aria-labelledby="navLinkDropdownSubmenuDark" style="min-width: 200px; display: none;">
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Action</a></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Another action</a></li>
                      <li class="dropdown-divider"></li>
                      <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Something else here</a></li>
                    </ul>
                  </li>
                  <!-- End Submenu -->
                </ul>
                <!-- End Dropdown - Submenu -->
              </li>      
              <!--  End Dropdown -->

              <!-- Shop -->
              <li class="nav-item hs-has-mega-menu u-header__nav-item" data-event="hover" data-animation-in="slideInUp" data-animation-out="fadeOut" data-max-width="440px" data-position="right">
                <a id="shopMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Shop</a>

                <!-- Shop - Mega Menu -->
                <div class="hs-mega-menu u-header__sub-menu u-header__mega-menu-position-right-fix--md" aria-labelledby="shopMegaMenu" style="display: none;">
                  <div class="u-header__mega-menu-wrapper">
                    <span class="u-header__sub-menu-title">Shop Elements</span>

                    <div class="row">
                      <div class="col-sm-6">
                        <ul class="u-header__sub-menu-nav-group">
                          <li><a class="nav-link u-header__sub-menu-nav-link" href="../shop/classic.html">Classic</a></li>
                          <li><a class="nav-link u-header__sub-menu-nav-link" href="../shop/categories.html">Categories</a></li>
                          <li><a class="nav-link u-header__sub-menu-nav-link" href="../shop/categories-sidebar.html">Categories Sidebar</a></li>
                          <li><a class="nav-link u-header__sub-menu-nav-link" href="../shop/products-grid.html">Products Grid</a></li>
                          <li><a class="nav-link u-header__sub-menu-nav-link" href="../shop/products-list.html">Products List</a></li>
                        </ul>
                      </div>

                      <div class="col-sm-6">
                        <ul class="u-header__sub-menu-nav-group">
                          <li><a class="nav-link u-header__sub-menu-nav-link" href="../shop/single-product.html">Single Product</a></li>
                          <li><a class="nav-link u-header__sub-menu-nav-link" href="../shop/empty-cart.html">Empty Cart</a></li>
                          <li><a class="nav-link u-header__sub-menu-nav-link" href="../shop/cart.html">Cart</a></li>
                          <li><a class="nav-link u-header__sub-menu-nav-link" href="../shop/checkout.html">Checkout</a></li>
                          <li><a class="nav-link u-header__sub-menu-nav-link" href="../shop/order-completed.html">Order Completed</a></li>
                        </ul>
                      </div>
                    </div>
                  </div>

                  <!-- Mega Menu Banner -->
                  <div class="u-header__product-banner">
                    <div class="d-flex align-items-end">
                      <img class="img-fluid mr-4" src="https://htmlstream.com/preview/front-v2.7.0/assets/img/mockups/img4.png" alt="Image Description">
                      <div class="u-header__product-banner-content">
                        <div class="mb-4">
                          <span class="u-header__product-banner-title">Win T-shirt</span>
                          <p class="u-header__product-banner-text">Win one of our Front brand T-shirts.</p>
                        </div>
                        <a class="btn btn-sm btn-soft-primary transition-3d-hover" href="../shop/classic.html">Learn More <span class="fas fa-angle-right ml-2"></span></a>
                      </div>
                    </div>
                  </div>
                  <!-- End Mega Menu Banner -->
                </div>
                <!-- End Shop - Mega Menu -->
              </li>
              <!-- End Shop -->

              <!-- Demos -->
              <li class="nav-item hs-has-mega-menu u-header__nav-item" data-event="hover" data-animation-in="slideInUp" data-animation-out="fadeOut" data-max-width="600px" data-position="right">
                <a id="demosMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Demos</a>

                <!-- Demos - Mega Menu -->
                <div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="demosMegaMenu" style="display: none;">
                  <div class="row no-gutters">
                    <div class="col-md-6">
                      <!-- Promo Item -->
                      <div class="u-header__promo-item">
                        <a class="u-header__promo-link" href="../house/index.html">
                          <div class="media align-items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 120 120" style="enable-background:new 0 0 120 120;" xml:space="preserve" class="injected-svg js-svg-injector u-header__promo-icon">
<style type="text/css">
	.icon-13-0{fill:none;stroke:#FFFFFF;}
	.icon-13-1{fill:none;stroke:#BDC5D1;}
	.icon-13-2{fill:none;stroke:#377DFF;}
	.icon-13-3{fill:#377DFF;}
</style>
<polyline class="icon-13-1 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="85.3,109.2 85.3,91.3 103.1,91.3 103.1,109.2 "></polyline>
<line class="icon-13-1 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="94.2" y1="91.3" x2="94.2" y2="109.2"></line>
<g>
	<rect x="85.3" y="36.9" class="icon-13-2 fill-none stroke-primary" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="6" height="6"></rect>
	<rect x="97.2" y="36.9" class="icon-13-1 fill-none stroke-gray-400" opacity=".5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="6" height="6"></rect>
</g>
<g opacity=".5">
	<rect x="85.3" y="49.8" class="icon-13-1 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="6" height="6"></rect>
	<rect x="97.2" y="49.8" class="icon-13-1 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="6" height="6"></rect>
</g>
<g opacity=".5">
	<rect x="85.3" y="62.6" class="icon-13-1 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="6" height="6"></rect>
	<rect x="97.2" y="62.6" class="icon-13-1 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="6" height="6"></rect>
</g>
<g opacity=".5">
	<rect x="85.3" y="75.4" class="icon-13-1 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="6" height="6"></rect>
	<rect x="97.2" y="75.4" class="icon-13-1 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="6" height="6"></rect>
</g>
<g opacity=".5">
	<rect x="17.3" y="69.4" class="icon-13-1 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="5.7" height="11.3"></rect>
	<rect x="28.6" y="69.4" class="icon-13-1 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="5.7" height="11.3"></rect>
</g>
<g opacity=".5">
	<rect x="17.3" y="86.7" class="icon-13-1 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="5.7" height="11.3"></rect>
	<rect x="28.6" y="86.7" class="icon-13-1 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="5.7" height="11.3"></rect>
</g>
<g>
	<rect x="17.3" y="52.1" class="icon-13-2 fill-none stroke-primary" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="5.7" height="11.3"></rect>
	<rect x="28.6" y="52.1" class="icon-13-1 fill-none stroke-gray-400" opacity=".5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="5.7" height="11.3"></rect>
</g>
<line class="icon-13-1 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="71.7" y1="63.8" x2="77.9" y2="67.3"></line>
<polyline class="icon-13-1 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="9.5,109.2 9.5,42.8 54.7,21.4 54.7,40.1 "></polyline>
<polyline class="icon-13-1 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="77.9,109.2 77.9,4.9 110.5,19.9 110.5,109.2 "></polyline>
<line class="icon-13-1 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="101.5" y1="23" x2="104.4" y2="24.3"></line>
<line class="icon-13-1 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="84.3" y1="15" x2="97.2" y2="20.9"></line>
<polyline class="icon-13-3 fill-primary" points="39.2,109.2 39.2,40.1 71.7,40.1 71.7,109.2 "></polyline>
<g>
	<line class="icon-13-0 fill-none stroke-white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="63.9" y1="50.3" x2="46.9" y2="50.3"></line>
	<line class="icon-13-0 fill-none stroke-white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="63.9" y1="60" x2="46.9" y2="60"></line>
	<line class="icon-13-0 fill-none stroke-white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="63.9" y1="69.7" x2="46.9" y2="69.7"></line>
	<line class="icon-13-0 fill-none stroke-white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="63.9" y1="79.5" x2="46.9" y2="79.5"></line>
	<line class="icon-13-0 fill-none stroke-white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="63.9" y1="89.2" x2="46.9" y2="89.2"></line>
	<line class="icon-13-0 fill-none stroke-white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="63.9" y1="98.9" x2="46.9" y2="98.9"></line>
</g>
<line class="icon-13-2 fill-none stroke-primary" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="118.5" y1="109.2" x2="1.5" y2="109.2"></line>
</svg>
                            <div class="media-body">
                              <span class="u-header__promo-title">House</span>
                              <small class="u-header__promo-text">Real estate demo.</small>
                            </div>
                          </div>
                        </a>
                      </div>
                      <!-- End Promo Item -->

                      <!-- Promo Item -->
                      <div class="u-header__promo-item">
                        <a class="u-header__promo-link" href="../job/index.html">
                          <div class="media align-items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 120 120" style="enable-background:new 0 0 120 120;" xml:space="preserve" class="injected-svg js-svg-injector u-header__promo-icon">
<style type="text/css">
	.icon-19-0{fill:#BDC5D1;stroke:#BDC5D1;}
	.icon-19-1{fill:#377DFF;stroke:#377DFF;}
	.icon-19-2{fill:none;stroke:#BDC5D1;}
	.icon-19-3{fill:none;stroke:#377DFF;}
	.icon-19-4{fill:none;stroke:#FFFFFF;}
	.icon-19-5{fill:#FFFFFF;stroke:#377DFF;}
</style>
<g>
	<polygon class="icon-19-0 fill-gray-400 stroke-gray-400" opacity=".5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="93.6,40.8 93.6,79.6 93.6,80.5 93.6,88.7 100.6,94 107.5,88.7 107.5,80.5 107.5,79.6 107.5,40.8  "></polygon>
	<polygon class="icon-19-1 fill-primary stroke-primary" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="86.7,39 86.7,77.9 86.7,78.7 86.7,87 93.6,92.3 100.6,87 100.6,78.7 100.6,77.9 100.6,39  "></polygon>
</g>
<g>
	<polygon class="icon-19-0 fill-gray-400 stroke-gray-400" opacity=".5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="26.6,40.8 26.6,79.6 26.6,80.5 26.6,88.7 33.5,94 40.4,88.7 40.4,80.5 40.4,79.6 40.4,40.8  "></polygon>
	<polygon class="icon-19-1 fill-primary stroke-primary" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="19.7,39 19.7,77.9 19.7,78.7 19.7,87 26.6,92.3 33.5,87 33.5,78.7 33.5,77.9 33.5,39  "></polygon>
</g>
<rect x="1.9" y="39" class="icon-19-2 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="116.2" height="79.4"></rect>
<line class="icon-19-2 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="1.9" y1="71.4" x2="16.9" y2="71.4"></line>
<line class="icon-19-2 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="118.1" y1="71.4" x2="103.6" y2="71.4"></line>
<line class="icon-19-2 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="83.7" y1="71.4" x2="70.2" y2="71.4"></line>
<line class="icon-19-2 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="50.3" y1="71.4" x2="36.8" y2="71.4"></line>
<line class="icon-19-2 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="118.1" y1="110.9" x2="1.9" y2="110.9"></line>
<rect x="50.3" y="66.8" class="icon-19-3 fill-none stroke-primary" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="19.9" height="9.4"></rect>
<polyline class="icon-19-2 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="73.1,28.9 77.2,28.9 77.2,39 "></polyline>
<polyline class="icon-19-2 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="42.8,39 42.8,28.9 47.1,28.9 "></polyline>
<path class="icon-19-2 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M46,24.9L46,24.9c-2.3,0-4.2-1.9-4.2-4.2v-4.3c0-4.6,1.8-6.8,3.8-7.8C48.2,7.4,50,1.6,50,1.6h20.2l2.1,7.1  c0.6,1.9,0.9,4,0.9,6v15c0,2.2-2.1,3.8-4.4,3.1c-1.3-0.5-2.1-1.7-2.1-3.1v-0.1c0,1.8-1.5,3.2-3.2,3.2c-1.8,0-3.2-1.4-3.2-3.2v0.1  c0,2.2-2.1,3.8-4.4,3.1c-1.3-0.5-2.1-1.7-2.1-3.1v-0.1c0,2-1.9,3.5-3.9,3.1c-1.5-0.3-2.6-1.8-2.6-3.3V18.4"></path>
<line class="icon-19-4 fill-none stroke-white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="66.6" y1="26.5" x2="66.6" y2="29.5"></line>
<line class="icon-19-4 fill-none stroke-white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="60.1" y1="26.5" x2="60.1" y2="29.5"></line>
<rect x="16.9" y="65.1" class="icon-19-5 fill-white stroke-primary" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="19.9" height="12.7"></rect>
<rect x="83.7" y="65.1" class="icon-19-5 fill-white stroke-primary" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="19.9" height="12.7"></rect>
<line class="icon-19-3 fill-none stroke-primary" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="93.6" y1="72.5" x2="93.6" y2="70.5"></line>
<line class="icon-19-3 fill-none stroke-primary" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="26.9" y1="72.5" x2="26.9" y2="70.5"></line>
<line class="icon-19-4 fill-none stroke-white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="53.6" y1="26.5" x2="53.6" y2="29.5"></line>
</svg>
                            <div class="media-body">
                              <span class="u-header__promo-title">Job</span>
                              <small class="u-header__promo-text">Job vacancy demo.</small>
                            </div>
                          </div>
                        </a>
                      </div>
                      <!-- End Promo Item -->

                      <!-- Promo Item -->
                      <div class="u-header__promo-item">
                        <a class="u-header__promo-link" href="../crypto/index.html">
                          <div class="media align-items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 120 120" style="enable-background:new 0 0 120 120;" xml:space="preserve" class="injected-svg js-svg-injector u-header__promo-icon">
<style type="text/css">
	.icon-5-0{fill:#BDC5D1;}
	.icon-5-1{fill:#377DFF;}
	.icon-5-2{fill:#FFFFFF;}
	.icon-5-3{fill:none;stroke:#BDC5D1;}
	.icon-5-5{fill:none;stroke:#377DFF;}
</style>
<circle class="icon-5-0 fill-gray-400" opacity=".5" cx="82.2" cy="92.3" r="27.2"></circle>
<circle class="icon-5-1 fill-primary" cx="72.2" cy="83.8" r="27.2"></circle>
<g>
	<path class="icon-5-2 fill-white" d="M76.4,82.9c1.3,0.4,2.3,1.1,3.2,2c0.9,1,1.5,2.1,1.8,3.3s0.2,2.6-0.2,3.9c-0.5,1.4-1.4,2.6-2.7,3.4   c-1.3,0.8-2.7,1.3-4.2,1.3v3.1c0,0.3-0.1,0.6-0.3,0.7s-0.4,0.3-0.7,0.3h-2.1c-0.3,0-0.6-0.1-0.7-0.3s-0.3-0.4-0.3-0.7v-3.1   c-2.1,0-4-0.6-5.6-1.9c-0.2-0.2-0.3-0.5-0.4-0.8c0-0.3,0.1-0.6,0.3-0.8l2.2-2.2c0.2-0.1,0.4-0.2,0.6-0.3c0.2,0,0.5,0,0.7,0.2   c0.6,0.4,1.4,0.6,2.2,0.6h4.3c0.5,0,1-0.2,1.3-0.6c0.4-0.4,0.6-0.8,0.6-1.4c0-0.4-0.1-0.8-0.4-1.1c-0.3-0.3-0.6-0.6-1-0.7L68.3,86   c-1.5-0.4-2.7-1.2-3.7-2.3c-1-1.1-1.6-2.4-1.8-3.9c-0.1-1.4,0.2-2.7,0.8-3.9s1.5-2.1,2.6-2.9c1.1-0.7,2.4-1.1,3.8-1.1h0.1v-3.1   c0-0.3,0.1-0.6,0.3-0.7s0.4-0.3,0.7-0.3h2.1c0.3,0,0.6,0.1,0.7,0.3s0.3,0.4,0.3,0.7v3.1c2.1,0,3.9,0.6,5.6,1.9   c0.3,0.2,0.4,0.5,0.5,0.8c0,0.3-0.1,0.6-0.3,0.8l-2.2,2.3c-0.2,0.1-0.4,0.2-0.6,0.3c-0.2,0-0.5,0-0.7-0.1c-0.6-0.5-1.4-0.7-2.2-0.7   h-4.3c-0.5,0-1,0.2-1.3,0.6c-0.4,0.4-0.6,0.8-0.6,1.4c0,0.4,0.1,0.8,0.4,1.1c0.3,0.3,0.6,0.6,1,0.7L76.4,82.9z"></path>
</g>
<path class="icon-5-3 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M38.4,81.7H7.1c-2.7,0-5-2.2-5-5V7.5c0-2.7,2.2-5,5-5h106c2.7,0,5,2.2,5,5v69.2c0,2.7-2.2,5-5,5l0,0"></path>
<ellipse class="icon-5-3 fill-none stroke-gray-400" opacity=".5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="35.3" cy="12.6" rx="3.1" ry="3.1"></ellipse>
<circle class="icon-5-3 fill-none stroke-gray-400" opacity=".5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="23.6" cy="12.6" r="3.1"></circle>
<circle class="icon-5-5 fill-none stroke-primary" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" cx="12" cy="12.6" r="3.1"></circle>
<polyline class="icon-5-5 fill-none stroke-primary" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" points="14.7,63.8 43.3,48.1 48.6,53.9 71.2,40.1 78.5,48.5 110.4,21.6 "></polyline>
<polyline class="icon-5-5 fill-none stroke-primary" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" points="101.3,23.6 110.4,21.6 107.4,30.2 "></polyline>
<polyline class="icon-5-3 fill-none stroke-gray-400" opacity=".5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" points="83.5,34.8 83.5,17.3 89.3,17.3 89.3,29.6 "></polyline>
<polyline class="icon-5-3 fill-none stroke-gray-400" opacity=".5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" points="60.8,39 60.8,23.6 66.5,23.6 66.5,34.8 "></polyline>
<polyline class="icon-5-3 fill-none stroke-gray-400" opacity=".5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" points="49.4,45.4 49.4,36.3 55.1,36.3 55.1,42.2 "></polyline>
<polyline class="icon-5-3 fill-none stroke-gray-400" opacity=".5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" points="38,43.3 38,32 43.7,32 43.7,40.1 "></polyline>
<polyline class="icon-5-3 fill-none stroke-gray-400" opacity=".5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" points="26.6,49.6 26.6,41.6 32.3,41.6 32.3,46.4 "></polyline>
<polyline class="icon-5-3 fill-none stroke-gray-400" opacity=".5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" points="72.2,33.6 72.2,27.8 77.9,27.8 77.9,37.9 "></polyline>
</svg>
                            <div class="media-body">
                              <span class="u-header__promo-title">Crypto landing</span>
                              <small class="u-header__promo-text">Cryptocurrency demo.</small>
                            </div>
                          </div>
                        </a>
                      </div>
                      <!-- End Promo Item -->
                    </div>

                    <!-- Promo -->
                    <div class="col-md-6 u-header__promo">
                      <a class="d-block u-header__promo-inner" href="#">
                        <div class="position-relative">
                          <img class="img-fluid rounded mb-3" src="https://htmlstream.com/preview/front-v2.7.0/assets/img/380x227/img6.jpg" alt="Image Description">
                          <span class="badge badge-success badge-pill badge-pos shadow-sm mt-3">New</span>
                        </div>
                        <span class="text-secondary font-size-1">Front makes you look at things from a different perspectives.</span>
                      </a>
                    </div>
                    <!-- End Promo -->
                  </div>
                </div>
                <!-- End Demos - Mega Menu -->
              </li>
              <!-- End Demos -->

              <!-- Docs -->
              <li class="nav-item hs-has-mega-menu u-header__nav-item" data-event="hover" data-animation-in="slideInUp" data-animation-out="fadeOut" data-max-width="260px" data-position="right">
                <a id="docsMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Docs</a>

                <!-- Docs - Submenu -->
                <div class="hs-mega-menu u-header__sub-menu" aria-labelledby="docsMegaMenu" style="min-width: 330px; display: none;">
                  <!-- Promo Item -->
                  <div class="u-header__promo-item">
                    <a class="u-header__promo-link" href="../../documentation/index.html">
                      <div class="media align-items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 120 120" style="enable-background:new 0 0 120 120;" xml:space="preserve" class="injected-svg js-svg-injector u-header__promo-icon">
<style type="text/css">
	.icon-2-0{fill:none;stroke:#377DFF;}
	.icon-2-1{fill:none;stroke:#BDC5D1;}
	.icon-2-2{fill:#377DFF;}
	.icon-2-3{fill:#BDC5D1;}
	.icon-2-4{fill:#FFFFFF;}
</style>
<path class="icon-2-0 fill-none stroke-primary" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M99.1,113.3"></path>
<path class="icon-2-1 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M15.1,75.6V11l4.4-4.3l4.3,4.3l4.3-4.3l4.3,4.3l4.3-4.3l4.3,4.3l4.3-4.3l4.3,4.3l4.3-4.3l4.3,4.3l4.3-4.3  l4.3,4.3l4.3-4.3l4.3,4.3l4.3-4.3l4.3,4.3L89,6.7l4.4,4.3v96.5c0,3.2,2.6,5.8,5.8,5.8l0,0c3.2,0,5.8-2.6,5.8-5.8V13.2h-5.8v93.1"></path>
<line class="icon-2-1 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="99.1" y1="113.3" x2="26.1" y2="113.3"></line>
<g opacity=".5">
	<path class="icon-2-3 fill-gray-400" d="M78.1,44.5H39.2c-4.1,0-7.3-3.3-7.3-7.3v0c0-4.1,3.3-7.3,7.3-7.3h38.9c4.1,0,7.3,3.3,7.3,7.3v0   C85.5,41.2,82.2,44.5,78.1,44.5z"></path>
</g>
<g>
	<path class="icon-2-2 fill-primary" d="M73.1,38H34.2c-4.1,0-7.3-3.3-7.3-7.3v0c0-4.1,3.3-7.3,7.3-7.3h38.9c4.1,0,7.3,3.3,7.3,7.3v0   C80.5,34.7,77.2,38,73.1,38z"></path>
</g>
<g>
	<path class="icon-2-4 fill-white" d="M65.4,32.3H41.9c-0.9,0-1.6-0.7-1.6-1.6v0c0-0.9,0.7-1.6,1.6-1.6h23.5c0.9,0,1.6,0.7,1.6,1.6v0   C67,31.5,66.3,32.3,65.4,32.3z"></path>
</g>
<g opacity=".5">
	<line class="icon-2-1 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="3.8" y1="86" x2="33.1" y2="86"></line>
	<line class="icon-2-1 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="3.8" y1="93.5" x2="33.1" y2="93.5"></line>
	<line class="icon-2-1 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="3.8" y1="101.1" x2="18.3" y2="101.1"></line>
	<line class="icon-2-1 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="27.3" y1="101.1" x2="33.1" y2="101.1"></line>
</g>
<line class="icon-2-1 fill-none stroke-gray-400" opacity=".5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="54.4" y1="90.6" x2="54.4" y2="102.8"></line>
<line class="icon-2-1 fill-none stroke-gray-400" opacity=".5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="62.3" y1="87.1" x2="62.3" y2="102.8"></line>
<line class="icon-2-1 fill-none stroke-gray-400" opacity=".5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="70.3" y1="89.7" x2="70.3" y2="102.8"></line>
<line class="icon-2-1 fill-none stroke-gray-400" opacity=".5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="78.3" y1="81.8" x2="78.3" y2="102.8"></line>
<polyline class="icon-2-0 fill-none stroke-primary" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="50.6,86 64.2,75.6 69,81.3 80.9,71.2 "></polyline>
</svg>
                        <div class="media-body">
                          <span class="u-header__promo-title">
                            Documentation
                            <span class="badge badge-primary badge-pill ml-1">v2.7</span>
                          </span>
                          <small class="u-header__promo-text">Development guides</small>
                        </div>
                      </div>
                    </a>
                  </div>
                  <!-- End Promo Item -->

                  <!-- Promo Item -->
                  <div class="u-header__promo-item">
                    <a class="u-header__promo-link" href="../../starter/index.html">
                      <div class="media align-items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 120 120" style="enable-background:new 0 0 120 120;" xml:space="preserve" class="injected-svg js-svg-injector u-header__promo-icon">
<style type="text/css">
	.icon-1-0{fill:#BDC5D1;}
	.icon-1-1{fill:none;stroke:#BDC5D1;}
	.icon-1-2{fill:#377DFF;}
	.icon-1-3{fill:none;stroke:#FFFFFF;}
	.icon-1-4{fill:none;stroke:#377DFF;}
</style>
<circle class="icon-1-0 fill-gray-400" opacity=".5" cx="72" cy="49.3" r="31.4"></circle>
<line class="icon-1-1 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="87.2" y1="88.7" x2="77.9" y2="79.5"></line>
<circle class="icon-1-2 fill-primary" cx="58.5" cy="54.7" r="31.4"></circle>
<path class="icon-1-3 fill-none stroke-white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M80.3,41.6c2.5,4.2,3.7,9.1,3.5,13.9c-0.2,6.2-2.7,12.3-7.5,17c-9.9,9.9-26,9.9-36,0c-9.9-9.9-9.9-26,0-36  c9.9-9.9,26-9.9,36,0"></path>
<line class="icon-1-1 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="86" y1="77.6" x2="92.2" y2="83.8"></line>
<path class="icon-1-1 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M115.9,112.5L115.9,112.5c-2.6,2.6-6.9,2.6-9.5,0L84.9,91.1l9.5-9.5l21.5,21.5  C118.5,105.6,118.5,109.9,115.9,112.5z"></path>
<path class="icon-1-3 fill-none stroke-white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M54.5,37.9c0,0-10.6,0.6-12.6,11.4"></path>
<path class="icon-1-1 fill-none stroke-gray-400" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M36.6,83H7c-2.6,0-4.8-2.1-4.8-4.8V10.8c0-2.6,2.1-4.8,4.8-4.8h103.2c2.6,0,4.8,2.1,4.8,4.8v67.4  c0,2.6-2.1,4.8-4.8,4.8h-8.2"></path>
<ellipse class="icon-1-1 fill-none stroke-gray-400" opacity=".5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="35.2" cy="16" rx="3.1" ry="3.1"></ellipse>
<circle class="icon-1-1 fill-none stroke-gray-400" opacity=".5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="23.6" cy="16" r="3.1"></circle>
<circle class="icon-1-4 fill-none stroke-primary" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="12" cy="16" r="3.1"></circle>
</svg>
                        <div class="media-body">
                          <span class="u-header__promo-title">Get started</span>
                          <small class="u-header__promo-text">Components and snippets</small>
                        </div>
                      </div>
                    </a>
                  </div>
                  <!-- End Promo Item -->

                  <div class="u-header__promo-footer">
                    <!-- List -->
                    <div class="row no-gutters">
                      <div class="col-6">
                        <div class="u-header__promo-footer-item">
                          <small class="text-muted d-block">Check what's new</small>
                          <a class="small" href="../../documentation/getting-started/changelog.html">
                            Changelog
                          </a>
                        </div>
                      </div>
                      <div class="col-6 u-header__promo-footer-ver-divider">
                        <div class="u-header__promo-footer-item">
                          <small class="text-muted d-block">Have a question?</small>
                          <a class="small" href="http://htmlstream.com/contact-us">
                            Contact us
                          </a>
                        </div>
                      </div>
                    </div>
                    <!-- End List -->
                  </div>
                </div>
                <!-- End Docs - Submenu -->
              </li>
              <!-- End Docs -->

              <!-- Button -->
              <li class="nav-item u-header__nav-last-item">
                <a class="btn btn-sm btn-primary transition-3d-hover" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">
                  Buy Now
                </a>
              </li>
              <!-- End Button -->
            </ul>
          </div>
          <!-- End Navigation -->
        </nav>
        <!-- End Nav -->
      </div>
    </div>
  </header>

<div class="d-lg-flex position-relative">
      <div class="container d-lg-flex align-items-lg-center space-top-2 space-top-md-5 space-lg-0 min-height-lg-100vh">
        <!-- Content -->
        <div class="row w-100">
          <div class="col-lg-5">
            <h1 class="display-4 font-size-md-down-5 mb-3">Introducing Front</h1>
            <p>
              Your company will look
              <span class="text-primary">
                <strong class="u-text-animation u-text-animation--typing">astonishing.</strong><span class="typed-cursor typed-cursor--blink">|</span>
              </span>
              <br>
              Attract more visitors, and win more business with Front template.
            </p>

            <div class="d-flex align-items-center flex-wrap">
              <a class="btn btn-soft-primary btn-wide transition-3d-hover" href="../pages/login-simple.html">Get Started</a>

              <!-- Fancybox -->
              <a class="js-fancybox media align-items-center u-media-player min-width-21 ml-3" href="javascript:;" data-src="//vimeo.com/167434033" data-speed="700" data-animate-in="zoomIn" data-animate-out="zoomOut" data-caption="Front - Responsive Website Template">
                <span class="u-media-player__icon u-media-player__icon--success mr-3">
                  <span class="fas fa-play u-media-player__icon-inner"></span>
                </span>
                <span class="media-body">
                  Play video
                </span>
              </a>
              <!-- End Fancybox -->
            </div>
          </div>
        </div>
        <!-- End Content -->

        <!-- SVG Background -->
        <div id="SVGMainHero" class="col-lg-9 col-xl-7 d-none d-lg-block position-absolute top-0 right-0 pr-0" style="margin-top: 105.6px;">
          <figure class="ie-main-hero">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1374.7 1083.6" style="enable-background:new 0 0 1374.7 1083.6;" xml:space="preserve" class="injected-svg js-svg-injector" data-img-paths="[
                   {"targetId": "#SVGMainHeroImg1", "newPath": "https://htmlstream.com/preview/front-v2.9.2/assets/img/750x750/img2.jpg"}
                 ]" data-parent="#SVGMainHero">
<style type="text/css">
	.main-hero-0{fill:#377dff;}
</style>
<path class="main-hero-0 fill-primary" opacity=".05" d="M285.2,170.1c-94.5,8.6-181.2,57.4-235.9,134.8C-34.7,423.6-54.5,621.5,349,879.8  c636.5,407.6,600,9.3,591.9-47.4c-0.8-5.5-1.4-11.1-2-16.6l-34.2-374.1C888.4,262,729.2,129.6,549.4,146L285.2,170.1z"></path>
<g>
	<defs>
		<path id="mainHeroBlock1" d="M1374.7,0H687.6l-278,279.7c-150,150.9-148.1,395.3,4.4,543.8l0,0C554.1,960,774.9,968.7,925.4,843.6    l449.3-373.4V0z"></path>
	</defs>
	<clipPath id="mainHeroBlock2">
		<use xlink:href="#mainHeroBlock1" style="overflow:visible;"></use>
	</clipPath>
	<g transform="matrix(1 0 0 1 0 0)" style="clip-path:url(#mainHeroBlock2);">
		<!-- Apply your (750px width to 750px height) image here -->
		<image id="SVGMainHeroImg1" style="overflow:visible;" width="750" height="750" xlink:href="https://htmlstream.com/preview/front-v2.9.2/assets/img/750x750/img2.jpg" transform="matrix(1.4462 0 0 1.4448 290.09 0)"></image>
	</g>
</g>
</svg>
          </figure>
        </div>
        <!-- End SVG Background -->
      </div>
    </div> 






              
            
!

CSS

              
                

/*----------------------------------------------------------------------
  * Front - Responsive Website Template version v2.9.0
  * Copyright 2018 Htmlstream
  * Licensed under Bootstrap Themes (https://themes.getbootstrap.com/licenses/)
------------------------------------------------------------------------*/
.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

.w-auto {
  width: auto !important;
}

.w-15 {
  width: 15% !important;
}

.w-20 {
  width: 20% !important;
}

.w-30 {
  width: 30% !important;
}

.w-35 {
  width: 35% !important;
}

.w-40 {
  width: 40% !important;
}

.w-60 {
  width: 60% !important;
}

.w-65 {
  width: 65% !important;
}

.w-80 {
  width: 80% !important;
}

.w-85 {
  width: 85% !important;
}

.w-90 {
  width: 90% !important;
}

@media (min-width: 576px) {
  .w-sm-25 {
    width: 25% !important;
  }
  .w-sm-50 {
    width: 50% !important;
  }
  .w-sm-75 {
    width: 75% !important;
  }
  .w-sm-100 {
    width: 100% !important;
  }
  .w-sm-auto {
    width: auto !important;
  }
  .w-sm-15 {
    width: 15% !important;
  }
  .w-sm-20 {
    width: 20% !important;
  }
  .w-sm-30 {
    width: 30% !important;
  }
  .w-sm-35 {
    width: 35% !important;
  }
  .w-sm-40 {
    width: 40% !important;
  }
  .w-sm-60 {
    width: 60% !important;
  }
  .w-sm-65 {
    width: 65% !important;
  }
  .w-sm-80 {
    width: 80% !important;
  }
  .w-sm-85 {
    width: 85% !important;
  }
  .w-sm-90 {
    width: 90% !important;
  }
}

@media (min-width: 768px) {
  .w-md-25 {
    width: 25% !important;
  }
  .w-md-50 {
    width: 50% !important;
  }
  .w-md-75 {
    width: 75% !important;
  }
  .w-md-100 {
    width: 100% !important;
  }
  .w-md-auto {
    width: auto !important;
  }
  .w-md-15 {
    width: 15% !important;
  }
  .w-md-20 {
    width: 20% !important;
  }
  .w-md-30 {
    width: 30% !important;
  }
  .w-md-35 {
    width: 35% !important;
  }
  .w-md-40 {
    width: 40% !important;
  }
  .w-md-60 {
    width: 60% !important;
  }
  .w-md-65 {
    width: 65% !important;
  }
  .w-md-80 {
    width: 80% !important;
  }
  .w-md-85 {
    width: 85% !important;
  }
  .w-md-90 {
    width: 90% !important;
  }
}

@media (min-width: 992px) {
  .w-lg-25 {
    width: 25% !important;
  }
  .w-lg-50 {
    width: 50% !important;
  }
  .w-lg-75 {
    width: 75% !important;
  }
  .w-lg-100 {
    width: 100% !important;
  }
  .w-lg-auto {
    width: auto !important;
  }
  .w-lg-15 {
    width: 15% !important;
  }
  .w-lg-20 {
    width: 20% !important;
  }
  .w-lg-30 {
    width: 30% !important;
  }
  .w-lg-35 {
    width: 35% !important;
  }
  .w-lg-40 {
    width: 40% !important;
  }
  .w-lg-60 {
    width: 60% !important;
  }
  .w-lg-65 {
    width: 65% !important;
  }
  .w-lg-80 {
    width: 80% !important;
  }
  .w-lg-85 {
    width: 85% !important;
  }
  .w-lg-90 {
    width: 90% !important;
  }
}

@media (min-width: 1200px) {
  .w-xl-25 {
    width: 25% !important;
  }
  .w-xl-50 {
    width: 50% !important;
  }
  .w-xl-75 {
    width: 75% !important;
  }
  .w-xl-100 {
    width: 100% !important;
  }
  .w-xl-auto {
    width: auto !important;
  }
  .w-xl-15 {
    width: 15% !important;
  }
  .w-xl-20 {
    width: 20% !important;
  }
  .w-xl-30 {
    width: 30% !important;
  }
  .w-xl-35 {
    width: 35% !important;
  }
  .w-xl-40 {
    width: 40% !important;
  }
  .w-xl-60 {
    width: 60% !important;
  }
  .w-xl-65 {
    width: 65% !important;
  }
  .w-xl-80 {
    width: 80% !important;
  }
  .w-xl-85 {
    width: 85% !important;
  }
  .w-xl-90 {
    width: 90% !important;
  }
}

.space-0,
.space-top-0 {
  padding-top: 0 !important;
}

.space-0,
.space-bottom-0 {
  padding-bottom: 0 !important;
}

.space-1,
.space-top-1 {
  padding-top: 2rem !important;
}

.space-1,
.space-bottom-1 {
  padding-bottom: 2rem !important;
}

.space-2,
.space-top-2 {
  padding-top: 4rem !important;
}

.space-2,
.space-bottom-2 {
  padding-bottom: 4rem !important;
}

.space-3,
.space-top-3 {
  padding-top: 8rem !important;
}

.space-3,
.space-bottom-3 {
  padding-bottom: 8rem !important;
}

.space-4,
.space-top-4 {
  padding-top: 12.5rem !important;
}

.space-4,
.space-bottom-4 {
  padding-bottom: 12.5rem !important;
}

.space-5,
.space-top-5 {
  padding-top: 15rem !important;
}

.space-5,
.space-bottom-5 {
  padding-bottom: 15rem !important;
}

@media (min-width: 576px) {
  .space-sm-0,
  .space-top-sm-0 {
    padding-top: 0 !important;
  }
  .space-sm-0,
  .space-bottom-sm-0 {
    padding-bottom: 0 !important;
  }
  .space-sm-1,
  .space-top-sm-1 {
    padding-top: 2rem !important;
  }
  .space-sm-1,
  .space-bottom-sm-1 {
    padding-bottom: 2rem !important;
  }
  .space-sm-2,
  .space-top-sm-2 {
    padding-top: 4rem !important;
  }
  .space-sm-2,
  .space-bottom-sm-2 {
    padding-bottom: 4rem !important;
  }
  .space-sm-3,
  .space-top-sm-3 {
    padding-top: 8rem !important;
  }
  .space-sm-3,
  .space-bottom-sm-3 {
    padding-bottom: 8rem !important;
  }
  .space-sm-4,
  .space-top-sm-4 {
    padding-top: 12.5rem !important;
  }
  .space-sm-4,
  .space-bottom-sm-4 {
    padding-bottom: 12.5rem !important;
  }
  .space-sm-5,
  .space-top-sm-5 {
    padding-top: 15rem !important;
  }
  .space-sm-5,
  .space-bottom-sm-5 {
    padding-bottom: 15rem !important;
  }
}

@media (min-width: 768px) {
  .space-md-0,
  .space-top-md-0 {
    padding-top: 0 !important;
  }
  .space-md-0,
  .space-bottom-md-0 {
    padding-bottom: 0 !important;
  }
  .space-md-1,
  .space-top-md-1 {
    padding-top: 2rem !important;
  }
  .space-md-1,
  .space-bottom-md-1 {
    padding-bottom: 2rem !important;
  }
  .space-md-2,
  .space-top-md-2 {
    padding-top: 4rem !important;
  }
  .space-md-2,
  .space-bottom-md-2 {
    padding-bottom: 4rem !important;
  }
  .space-md-3,
  .space-top-md-3 {
    padding-top: 8rem !important;
  }
  .space-md-3,
  .space-bottom-md-3 {
    padding-bottom: 8rem !important;
  }
  .space-md-4,
  .space-top-md-4 {
    padding-top: 12.5rem !important;
  }
  .space-md-4,
  .space-bottom-md-4 {
    padding-bottom: 12.5rem !important;
  }
  .space-md-5,
  .space-top-md-5 {
    padding-top: 15rem !important;
  }
  .space-md-5,
  .space-bottom-md-5 {
    padding-bottom: 15rem !important;
  }
}

@media (min-width: 992px) {
  .space-lg-0,
  .space-top-lg-0 {
    padding-top: 0 !important;
  }
  .space-lg-0,
  .space-bottom-lg-0 {
    padding-bottom: 0 !important;
  }
  .space-lg-1,
  .space-top-lg-1 {
    padding-top: 2rem !important;
  }
  .space-lg-1,
  .space-bottom-lg-1 {
    padding-bottom: 2rem !important;
  }
  .space-lg-2,
  .space-top-lg-2 {
    padding-top: 4rem !important;
  }
  .space-lg-2,
  .space-bottom-lg-2 {
    padding-bottom: 4rem !important;
  }
  .space-lg-3,
  .space-top-lg-3 {
    padding-top: 8rem !important;
  }
  .space-lg-3,
  .space-bottom-lg-3 {
    padding-bottom: 8rem !important;
  }
  .space-lg-4,
  .space-top-lg-4 {
    padding-top: 12.5rem !important;
  }
  .space-lg-4,
  .space-bottom-lg-4 {
    padding-bottom: 12.5rem !important;
  }
  .space-lg-5,
  .space-top-lg-5 {
    padding-top: 15rem !important;
  }
  .space-lg-5,
  .space-bottom-lg-5 {
    padding-bottom: 15rem !important;
  }
}

@media (min-width: 1200px) {
  .space-xl-0,
  .space-top-xl-0 {
    padding-top: 0 !important;
  }
  .space-xl-0,
  .space-bottom-xl-0 {
    padding-bottom: 0 !important;
  }
  .space-xl-1,
  .space-top-xl-1 {
    padding-top: 2rem !important;
  }
  .space-xl-1,
  .space-bottom-xl-1 {
    padding-bottom: 2rem !important;
  }
  .space-xl-2,
  .space-top-xl-2 {
    padding-top: 4rem !important;
  }
  .space-xl-2,
  .space-bottom-xl-2 {
    padding-bottom: 4rem !important;
  }
  .space-xl-3,
  .space-top-xl-3 {
    padding-top: 8rem !important;
  }
  .space-xl-3,
  .space-bottom-xl-3 {
    padding-bottom: 8rem !important;
  }
  .space-xl-4,
  .space-top-xl-4 {
    padding-top: 12.5rem !important;
  }
  .space-xl-4,
  .space-bottom-xl-4 {
    padding-bottom: 12.5rem !important;
  }
  .space-xl-5,
  .space-top-xl-5 {
    padding-top: 15rem !important;
  }
  .space-xl-5,
  .space-bottom-xl-5 {
    padding-bottom: 15rem !important;
  }
}

/*------------------------------------
  Default Styles
------------------------------------*/
main {
  position: relative;
}

p {
  color: #77838f;
  line-height: 1.7;
}

h4, h5, h6,
.h4, .h5, .h6 {
  font-weight: 500;
}

h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a,
.h1 > a, .h2 > a, .h3 > a, .h4 > a, .h5 > a, .h6 > a {
  color: #1e2022;
}

h1 > a:hover, h2 > a:hover, h3 > a:hover, h4 > a:hover, h5 > a:hover, h6 > a:hover,
.h1 > a:hover, .h2 > a:hover, .h3 > a:hover, .h4 > a:hover, .h5 > a:hover, .h6 > a:hover {
  color: #0052ea;
}

h1.text-white > a, h2.text-white > a, h3.text-white > a, h4.text-white > a, h5.text-white > a, h6.text-white > a,
.h1.text-white > a, .h2.text-white > a, .h3.text-white > a, .h4.text-white > a, .h5.text-white > a, .h6.text-white > a {
  color: #fff;
}

figure {
  margin-bottom: 0;
}

strong {
  font-weight: 600;
}

svg {
  margin-bottom: -0.4375rem;
  vertical-align: baseline;
}

table th {
  font-weight: 600;
}

.fa, .fas {
  font-weight: 900;
}

/*------------------------------------
  Highlight Color
------------------------------------*/
::-moz-selection {
  color: #fff;
  background-color: #377dff;
}

::selection {
  color: #fff;
  background-color: #377dff;
}

.bg-primary ::-moz-selection {
  color: #377dff;
  background-color: #fff;
}

.bg-primary ::selection {
  color: #377dff;
  background-color: #fff;
}

/*------------------------------------
  Accessibility
------------------------------------*/
:focus,
a:focus,
button:focus {
  outline: 0;
}

.form-control:focus {
  box-shadow: 0 0 0 0 transparent;
}

.btn:focus, .btn.focus, .btn:not(:disabled):not(.disabled):active:focus, .btn:not(:disabled):not(.disabled).active:focus, .btn:not([disabled]):not(.disabled):active, .btn:not([disabled]):not(.disabled).active {
  box-shadow: 0 0 0 0 transparent;
}

.btn:not(:disabled):not(.disabled):active:focus, .btn:not(:disabled):not(.disabled).active:focus,
.show > .btn.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 transparent;
}

.custom-select:focus,
.page-link:focus {
  box-shadow: 0 0 0 0 transparent;
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:focus ~ .custom-control-label::before,
.custom-control-input:active ~ .custom-control-label::before {
  box-shadow: 0 0 0 0 transparent;
}

.custom-file-input:focus ~ .custom-file-label {
  box-shadow: 0 0 0 0 transparent;
}

.bootstrap-select .dropdown-toggle:focus {
  outline: 0 !important;
}

/*------------------------------------
  Print styles
------------------------------------*/
@media print {
  header, footer, .btn {
    display: none;
  }
}

/*------------------------------------
  Skippy
------------------------------------*/
.u-skippy {
  display: none;
}

/*------------------------------------
  List Group
------------------------------------*/
.list-group {
  list-style: none;
}

.list-group .list-group {
  margin-left: 1rem;
}

.list-group .list-group-item {
  font-size: 0.875rem;
}

.list-group .list-group-icon {
  min-width: 1rem;
  max-width: 1rem;
  color: #77838f;
  text-align: center;
  margin-right: .5rem;
}

.list-group .active > .list-group-item {
  color: #377dff;
}

.list-group .active > .list-group-text {
  color: #fff;
}

.list-group .disabled .u-icon {
  color: #77838f;
  background-color: rgba(119, 131, 143, 0.1);
}

/* Border Radius */
.list-group-rounded-0 .list-group-item:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.list-group-rounded-0 .list-group-item:last-child {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

/* Transparent */
.list-group-transparent .list-group-item {
  border-color: transparent;
  background-color: transparent;
}

/* White */
.list-group-white .list-group-item,
.list-group-white .list-group-item-action {
  color: #fff;
}

.list-group-white .list-group-item[href],
.list-group-white .list-group-item-action[href] {
  color: rgba(255, 255, 255, 0.7);
}

.list-group-white .list-group-item[href]:hover,
.list-group-white .list-group-item-action[href]:hover {
  color: #fff;
}

.list-group-white.list-group-striped .list-group-item:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.1);
}

.list-group-white .active > .list-group-item {
  color: #fff;
}

/* Flush */
.list-group-flush .list-group-item {
  padding-left: 0;
  padding-right: 0;
}

.list-group-flush .list-group-item.active {
  color: #377dff;
  background-color: transparent;
  border-color: transparent;
}

/* Borderless */
.list-group-borderless .list-group-item {
  border: none;
}

/* Striped */
.list-group-striped .list-group-item:nth-child(even) {
  background-color: #f8fafd;
}

/*------------------------------------
  Links
------------------------------------*/
.link {
  display: inline-block;
}

.link__icon {
  position: relative;
  line-height: .7;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  width: 1.375rem;
  height: 1.375rem;
  font-size: 1rem;
  color: #377dff;
  background-color: rgba(55, 125, 255, 0.1);
  border-radius: 50%;
  transition: 0.3s;
}

.link__icon-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.link:hover .link__icon {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

/* Collapse */
.link-collapse[aria-expanded="false"] .link-collapse__default {
  display: inline-block;
}

.link-collapse[aria-expanded="false"] .link-collapse__active {
  display: none;
}

.link-collapse[aria-expanded="true"] .link-collapse__default {
  display: none;
}

.link-collapse[aria-expanded="true"] .link-collapse__active {
  display: inline-block;
}

/* Link Light */
.link-light {
  color: rgba(255, 255, 255, 0.7);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.7);
}

.link-light:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}

/* Link Muted */
.link-muted {
  color: #8c98a4;
  border-bottom: 1px dashed #97a4af;
}

.link-muted:hover {
  border-color: #0052ea;
}

.link-muted__toggle-default {
  display: inline-block;
}

.link-muted__toggle-toggled {
  display: none;
}

.link-muted.toggled .link-muted__toggle-default {
  display: none;
}

.link-muted.toggled .link-muted__toggle-toggled {
  display: inline-block;
}

/* Link White */
.link-white {
  color: #fff;
  border-bottom: 1px dashed #fff;
}

.link-white:hover {
  color: #fff;
}

/*------------------------------------
  Header Default
------------------------------------*/
.u-header {
  position: relative;
  right: 0;
  left: 0;
  width: 100%;
  z-index: 1001;
}

.u-header__section {
  position: relative;
  z-index: 1;
  background-color: #fff;
  box-shadow: 0 1px 10px rgba(151, 164, 175, 0.1);
}

.u-header__section-divider {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.u-header__shadow-on-show-hide {
  box-shadow: none;
}

.js-header-fix-moment .u-header__shadow-on-show-hide {
  box-shadow: 0 1px 10px rgba(151, 164, 175, 0.1);
}

/* Navbar */
.u-header__navbar {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0;
  padding-right: 0;
}

/* Navbar Space */
@media (max-width: 991.98px) {
  .u-header .u-header__navbar.u-header__navbar--top-space {
    padding-top: 0.25rem;
  }
}

/* Navbar Brand */
.u-header__navbar-brand,
.u-header__navbar-brand > img {
  padding-top: 0;
  padding-bottom: 0;
  width: 9.375rem;
}

.u-header__navbar-brand-center {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
}

.u-header__navbar-brand-vertical {
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.5rem;
}

.u-header__navbar-brand-vertical .u-header__navbar-brand-text {
  display: block;
  margin-left: 0;
}

.u-header__navbar-brand-text {
  font-size: 2.25rem;
  font-weight: 700;
  margin-left: .5rem;
}

.u-header__navbar-brand-text, .u-header__navbar-brand-text:focus, .u-header__navbar-brand-text:hover {
  color: #377dff;
}

.u-header__navbar-brand-text-white .u-header__navbar-brand-text, .u-header__navbar-brand-text-white .u-header__navbar-brand-text:focus, .u-header__navbar-brand-text-white .u-header__navbar-brand-text:hover {
  color: #fff;
}

/* Navbar Collapse */
.u-header__navbar-collapse {
  padding-top: 0;
  padding-bottom: 0;
}

/* Navbar Link */
.u-header__navbar-link {
  color: #77838f;
  font-size: 0.875rem;
  font-weight: 300;
  padding-left: .5rem;
  padding-right: .5rem;
}

/* Nav Item */
.u-header .u-header__nav-item:first-child .u-header__nav-link {
  padding-left: 0;
}

.u-header__nav-item:hover .u-header__nav-link, .u-header__nav-item:focus .u-header__nav-link {
  color: #377dff;
}

/* Nav Link */
.u-header .active > .u-header__nav-link {
  color: #377dff;
}

.u-header__nav-link {
  color: #77838f;
}

.u-header__nav-link-toggle {
  position: relative;
}

.u-header__nav-link-toggle::after {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-size: 65%;
  font-weight: 900;
  content: "\f107";
  margin-left: .5rem;
  transition: 0.3s ease;
}

/* Sub Menu */
.u-header__sub-menu {
  width: 100%;
  padding-left: 0;
  list-style: none;
}

.u-header__sub-menu-nav-group {
  padding-left: 0;
  list-style: none;
}

.u-header__sub-menu-nav-link {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  font-size: 0.875rem;
  color: #77838f;
}

.u-header__sub-menu-nav-link-toggle {
  position: relative;
}

.u-header__sub-menu-nav-link-toggle::after {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-size: 80%;
  font-weight: 900;
  content: "\f105";
  margin-left: auto;
  margin-right: .04rem;
  transition: 0.3s ease;
}

.u-header__sub-menu .active > .u-header__sub-menu-nav-link {
  color: #377dff;
}

.u-header__sub-menu-title {
  display: block;
  color: #1e2022;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Promo */
.u-header__promo {
  background-color: #f8fafd;
}

.u-header__promo-inner {
  padding: 2rem;
}

.u-header__promo-item {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.u-header__promo-item ~ .u-header__promo-item {
  border-top: 1px solid #e7eaf3;
}

.u-header__promo-link {
  display: block;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.u-header__promo-link:hover .u-header__promo-title {
  color: #377dff;
}

.u-header__promo-card {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
}

.u-header__promo-card-deck {
  display: block;
}

.u-header__promo-card-deck:not(:last-child) .u-header__promo-item {
  border-bottom: 1px solid #e7eaf3;
}

.u-header__promo-card-deck .u-header__promo-item {
  border-top: none;
}

.u-header__promo-card-body {
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
}

.u-header__promo-icon {
  width: 100%;
  max-width: 2.75rem;
  margin-right: 1rem;
}

.u-header__promo-icon--sm {
  max-width: 1.75rem;
}

.u-header__promo-title {
  display: block;
  color: #1e2022;
  font-size: 1rem;
  font-weight: 500;
}

.u-header__promo-text {
  display: block;
  color: #77838f;
}

.u-header__promo-footer {
  background-color: #f8fafd;
  border-bottom-right-radius: 0.3125rem;
  border-bottom-left-radius: 0.3125rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.u-header__promo-footer-item {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.u-header__promo-footer-ver-divider {
  position: relative;
}

.u-header__promo-footer-ver-divider::before {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-right: 1px solid #bdc5d1;
  content: "";
}

/* Banner */
.u-header__banner {
  position: relative;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  border-bottom-left-radius: 0.3125rem;
}

.u-header__banner::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(30, 32, 34, 0.5);
  border-bottom-left-radius: 0.3125rem;
  content: "";
}

.u-header__banner-content {
  z-index: 1;
  width: 100%;
  text-align: center;
  padding: 2rem;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}

.u-header__banner-title {
  display: block;
  color: #fff;
  font-size: 1.5625rem;
  font-weight: 500;
  margin-bottom: .5rem;
}

.u-header__banner-text {
  display: block;
  color: #fff;
  margin-bottom: 0;
}

/* Product Banner */
.u-header__product-banner {
  background-color: #f8fafd;
  border-bottom-right-radius: 0.3125rem;
  border-bottom-left-radius: 0.3125rem;
  padding-right: 1.5rem;
}

.u-header__product-banner-content {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.u-header__product-banner-title {
  display: block;
  color: #377dff;
  font-size: 1.5625rem;
  font-weight: 500;
  margin-bottom: .5rem;
}

.u-header__product-banner-text {
  color: #1e2022;
  margin-bottom: 0;
}

/* Hide Content */
.u-header.js-header-fix-moment .u-header__hide-content {
  display: none;
}

.u-header.u-header--moved-up.u-header--hide-topbar {
  -webkit-transform: translate3d(0, -33px, 0);
          transform: translate3d(0, -33px, 0);
}

/*------------------------------------
  Header Helpers
------------------------------------*/
.u-header--invisible {
  display: none;
}

.u-header--moved-up {
  -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0);
}

.u-header--faded {
  opacity: 0;
  visibility: hidden;
}

.u-header__section--hidden {
  position: relative;
}

.u-header[data-header-fix-effect] {
  transition: 0.3s ease;
}

.u-header.u-header--untransitioned {
  transition: none;
}

.u-header.js-header-fix-moment {
  position: fixed;
  top: 0;
  bottom: auto;
}

.u-header--fix-top {
  position: fixed;
}

.u-header.u-header--fix-top[data-effect-compensation] {
  transition: none;
}

/*------------------------------------
  Nav Alignments
------------------------------------*/
@media (min-width: 992px) {
  .u-header__navbar-body,
  .u-header__navbar-nav {
    margin-left: auto;
  }
  .u-header-left-aligned-nav .u-header__navbar-body,
  .u-header-left-aligned-nav .u-header__navbar-nav {
    margin-left: 0;
    margin-right: auto;
  }
  .u-header-left-aligned-nav .u-header__navbar-nav {
    width: 100%;
  }
  .u-header-left-aligned-nav .u-header__navbar-brand {
    margin-left: 0;
    margin-right: 3rem;
  }
  .u-header-left-aligned-nav .u-header__nav-last-item {
    margin-left: auto;
  }
  .u-header-center-aligned-nav__col {
    -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .u-header-center-aligned-nav__col-last-item {
    text-align: right;
  }
  .u-header-center-aligned-nav .u-header__navbar-body,
  .u-header-center-aligned-nav .u-header__navbar-nav {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 1199.98px) {
  .u-header-center-aligned-nav__col:not(.u-header-center-aligned-nav__col-last-item) {
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
  }
  .u-header-center-aligned-nav__col-last-item {
    -ms-flex-positive: 1;
        flex-grow: 1;
  }
}

@media (min-width: 768px) {
  .u-header-center-aligned-nav.u-header--abs-top-sm .u-header__navbar-body,
  .u-header-center-aligned-nav.u-header--abs-top-sm .u-header__navbar-nav {
    margin-left: auto;
    margin-right: auto;
  }
}

/*------------------------------------
  Header Default
------------------------------------*/
.u-header__navbar-nav-scroll {
  max-width: 100%;
  height: 4.25rem;
  overflow: hidden;
}

.u-header__navbar-nav-scroll .u-header__navbar-nav {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

/*------------------------------------
  Fullscreen
------------------------------------*/
.u-fullscreen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  visibility: hidden;
}

.u-fullscreen--toggler {
  z-index: 1001;
}

.u-fullscreen__container, .u-fullscreen__overlay {
  transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

.u-fullscreen__container {
  position: relative;
  z-index: 1000;
  height: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  opacity: 0;
  visibility: hidden;
}

.u-fullscreen__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  background-image: linear-gradient(150deg, rgba(45, 21, 130, 0.95) 0%, rgba(25, 160, 255, 0.95) 100%);
  background-repeat: repeat-x;
  transition-delay: 0.5s;
}

.u-fullscreen.u-fullscreen--showed {
  visibility: visible;
}

.u-fullscreen.u-fullscreen--showed .u-fullscreen__container,
.u-fullscreen.u-fullscreen--showed .u-fullscreen__overlay {
  opacity: 1;
  visibility: visible;
}

.u-fullscreen.u-fullscreen--showed .u-fullscreen__overlay {
  transition-delay: 0s;
}

.u-fullscreen.u-fullscreen--showed .u-fullscreen__container {
  transition-delay: 0.5s;
}

/*------------------------------------
  Header Fullscreen Style
------------------------------------*/
.u-fullscreen__nav {
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
}

.u-fullscreen__nav-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.u-fullscreen__nav-link {
  display: inline-block;
  color: #fff;
  font-size: 1.375rem;
  padding-top: .5rem;
  padding-bottom: .5rem;
}

@media (min-width: 992px) {
  .u-fullscreen__nav-link {
    font-size: 1.75rem;
  }
}

.u-fullscreen__nav-link:hover {
  color: rgba(255, 255, 255, 0.7);
}

.u-fullscreen__submenu {
  position: relative;
  transition: 0.3s ease-in-out;
}

.u-fullscreen__submenu .u-fullscreen__nav-list {
  border-left: 2px solid rgba(255, 255, 255, 0.6);
  padding-left: 1rem;
}

.u-fullscreen__submenu-nav-link {
  display: inline-block;
  color: #fff;
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.u-fullscreen__submenu-nav-link:hover {
  color: rgba(255, 255, 255, 0.7);
}

.u-fullscreen__submenu-list {
  list-style: none;
  border-left: 2px solid rgba(255, 255, 255, 0.6);
  padding-left: 1rem;
  margin-bottom: 0;
}

.u-fullscreen__submenu-list-link {
  display: inline-block;
  color: rgba(255, 255, 255, 0.7);
}

.u-fullscreen__submenu-list-link:hover {
  color: #fff;
}

/*------------------------------------
  Header Navbar Background Colors
------------------------------------*/
.u-header--navbar-bg .u-header__navbar-brand-text {
  color: #fff;
}

.u-header--navbar-bg .u-header__nav-item:hover .u-header__nav-link {
  color: #fff;
}

.u-header--navbar-bg .active > .u-header__nav-link {
  color: #fff;
}

.u-header--navbar-bg .u-header__nav-link {
  color: rgba(255, 255, 255, 0.7);
}

.u-header--navbar-bg .u-header__nav-link:hover {
  color: #fff;
}

.u-header--navbar-bg .u-header__navbar-link,
.u-header--navbar-bg .dropdown-nav-link,
.u-header--navbar-bg .btn-text-secondary {
  color: rgba(255, 255, 255, 0.6);
}

.u-header--navbar-bg .u-header__navbar-link:hover,
.u-header--navbar-bg .dropdown-nav-link:hover,
.u-header--navbar-bg .btn-text-secondary:hover {
  color: #fff;
}

.u-header--navbar-bg .btn-text-secondary[href]:hover {
  color: #fff;
}

.u-header--navbar-bg .u-hamburger__inner, .u-header--navbar-bg .u-hamburger__inner::before, .u-header--navbar-bg .u-hamburger__inner::after {
  background-color: rgba(255, 255, 255, 0.5);
}

.u-header--navbar-bg .u-hamburger:hover .u-hamburger__inner, .u-header--navbar-bg .u-hamburger:hover .u-hamburger__inner::before, .u-header--navbar-bg .u-hamburger:hover .u-hamburger__inner::after {
  background-color: #fff;
}

/*------------------------------------
  Header Submenu Background Colors
------------------------------------*/
.u-header--sub-menu-dark-bg .u-header__sub-menu,
.u-header--sub-menu-dark-bg .u-header__promo {
  background-color: #1e2022;
}

.u-header--sub-menu-dark-bg .u-header__sub-menu-title,
.u-header--sub-menu-dark-bg .u-header__promo-title {
  color: rgba(255, 255, 255, 0.8);
}

.u-header--sub-menu-dark-bg .u-header__promo-footer {
  background-color: #1c1d1f;
}

.u-header--sub-menu-dark-bg .u-header__promo-footer-ver-divider::before {
  border-color: rgba(255, 255, 255, 0.1);
}

.u-header--sub-menu-dark-bg .u-header__promo-link::after {
  border-color: rgba(255, 255, 255, 0.1);
}

.u-header--sub-menu-dark-bg .u-header__promo-item {
  border-color: rgba(255, 255, 255, 0.1);
}

.u-header--sub-menu-dark-bg .u-header__sub-menu-nav-link {
  color: #8c98a4;
}

.u-header--sub-menu-dark-bg .u-header__sub-menu-nav-link:hover {
  color: #377dff;
}

.u-header--sub-menu-dark-bg .u-header__product-banner {
  background-color: #1c1d1f;
}

.u-header--sub-menu-dark-bg .u-header__product-banner-text {
  color: #8c98a4;
}

.u-header--sub-menu-dark-bg .dropdown-nav-link:hover {
  color: rgba(255, 255, 255, 0.8);
}

.u-header--sub-menu-dark-bg .dropdown-divider {
  border-color: rgba(255, 255, 255, 0.1);
}

@media (min-width: 576px) {
  .u-header--sub-menu-dark-bg-sm .u-header__sub-menu,
  .u-header--sub-menu-dark-bg-sm .u-header__promo {
    background-color: #1e2022;
  }
  .u-header--sub-menu-dark-bg-sm .u-header__sub-menu-title,
  .u-header--sub-menu-dark-bg-sm .u-header__promo-title {
    color: rgba(255, 255, 255, 0.8);
  }
  .u-header--sub-menu-dark-bg-sm .u-header__promo-footer {
    background-color: #1c1d1f;
  }
  .u-header--sub-menu-dark-bg-sm .u-header__promo-footer-ver-divider::before {
    border-color: rgba(255, 255, 255, 0.1);
  }
  .u-header--sub-menu-dark-bg-sm .u-header__promo-link::after {
    border-color: rgba(255, 255, 255, 0.1);
  }
  .u-header--sub-menu-dark-bg-sm .u-header__promo-item {
    border-color: rgba(255, 255, 255, 0.1);
  }
  .u-header--sub-menu-dark-bg-sm .u-header__sub-menu-nav-link {
    color: #8c98a4;
  }
  .u-header--sub-menu-dark-bg-sm .u-header__sub-menu-nav-link:hover {
    color: #377dff;
  }
  .u-header--sub-menu-dark-bg-sm .u-header__product-banner {
    background-color: #1c1d1f;
  }
  .u-header--sub-menu-dark-bg-sm .u-header__product-banner-text {
    color: #8c98a4;
  }
  .u-header--sub-menu-dark-bg-sm .dropdown-nav-link:hover {
    color: rgba(255, 255, 255, 0.8);
  }
  .u-header--sub-menu-dark-bg-sm .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.1);
  }
}

@media (min-width: 768px) {
  .u-header--sub-menu-dark-bg-md .u-header__sub-menu,
  .u-header--sub-menu-dark-bg-md .u-header__promo {
    background-color: #1e2022;
  }
  .u-header--sub-menu-dark-bg-md .u-header__sub-menu-title,
  .u-header--sub-menu-dark-bg-md .u-header__promo-title {
    color: rgba(255, 255, 255, 0.8);
  }
  .u-header--sub-menu-dark-bg-md .u-header__promo-footer {
    background-color: #1c1d1f;
  }
  .u-header--sub-menu-dark-bg-md .u-header__promo-footer-ver-divider::before {
    border-color: rgba(255, 255, 255, 0.1);
  }
  .u-header--sub-menu-dark-bg-md .u-header__promo-link::after {
    border-color: rgba(255, 255, 255, 0.1);
  }
  .u-header--sub-menu-dark-bg-md .u-header__promo-item {
    border-color: rgba(255, 255, 255, 0.1);
  }
  .u-header--sub-menu-dark-bg-md .u-header__sub-menu-nav-link {
    color: #8c98a4;
  }
  .u-header--sub-menu-dark-bg-md .u-header__sub-menu-nav-link:hover {
    color: #377dff;
  }
  .u-header--sub-menu-dark-bg-md .u-header__product-banner {
    background-color: #1c1d1f;
  }
  .u-header--sub-menu-dark-bg-md .u-header__product-banner-text {
    color: #8c98a4;
  }
  .u-header--sub-menu-dark-bg-md .dropdown-nav-link:hover {
    color: rgba(255, 255, 255, 0.8);
  }
  .u-header--sub-menu-dark-bg-md .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.1);
  }
}

@media (min-width: 992px) {
  .u-header--sub-menu-dark-bg-lg .u-header__sub-menu,
  .u-header--sub-menu-dark-bg-lg .u-header__promo {
    background-color: #1e2022;
  }
  .u-header--sub-menu-dark-bg-lg .u-header__sub-menu-title,
  .u-header--sub-menu-dark-bg-lg .u-header__promo-title {
    color: rgba(255, 255, 255, 0.8);
  }
  .u-header--sub-menu-dark-bg-lg .u-header__promo-footer {
    background-color: #1c1d1f;
  }
  .u-header--sub-menu-dark-bg-lg .u-header__promo-footer-ver-divider::before {
    border-color: rgba(255, 255, 255, 0.1);
  }
  .u-header--sub-menu-dark-bg-lg .u-header__promo-link::after {
    border-color: rgba(255, 255, 255, 0.1);
  }
  .u-header--sub-menu-dark-bg-lg .u-header__promo-item {
    border-color: rgba(255, 255, 255, 0.1);
  }
  .u-header--sub-menu-dark-bg-lg .u-header__sub-menu-nav-link {
    color: #8c98a4;
  }
  .u-header--sub-menu-dark-bg-lg .u-header__sub-menu-nav-link:hover {
    color: #377dff;
  }
  .u-header--sub-menu-dark-bg-lg .u-header__product-banner {
    background-color: #1c1d1f;
  }
  .u-header--sub-menu-dark-bg-lg .u-header__product-banner-text {
    color: #8c98a4;
  }
  .u-header--sub-menu-dark-bg-lg .dropdown-nav-link:hover {
    color: rgba(255, 255, 255, 0.8);
  }
  .u-header--sub-menu-dark-bg-lg .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.1);
  }
}

@media (min-width: 1200px) {
  .u-header--sub-menu-dark-bg-xl .u-header__sub-menu,
  .u-header--sub-menu-dark-bg-xl .u-header__promo {
    background-color: #1e2022;
  }
  .u-header--sub-menu-dark-bg-xl .u-header__sub-menu-title,
  .u-header--sub-menu-dark-bg-xl .u-header__promo-title {
    color: rgba(255, 255, 255, 0.8);
  }
  .u-header--sub-menu-dark-bg-xl .u-header__promo-footer {
    background-color: #1c1d1f;
  }
  .u-header--sub-menu-dark-bg-xl .u-header__promo-footer-ver-divider::before {
    border-color: rgba(255, 255, 255, 0.1);
  }
  .u-header--sub-menu-dark-bg-xl .u-header__promo-link::after {
    border-color: rgba(255, 255, 255, 0.1);
  }
  .u-header--sub-menu-dark-bg-xl .u-header__promo-item {
    border-color: rgba(255, 255, 255, 0.1);
  }
  .u-header--sub-menu-dark-bg-xl .u-header__sub-menu-nav-link {
    color: #8c98a4;
  }
  .u-header--sub-menu-dark-bg-xl .u-header__sub-menu-nav-link:hover {
    color: #377dff;
  }
  .u-header--sub-menu-dark-bg-xl .u-header__product-banner {
    background-color: #1c1d1f;
  }
  .u-header--sub-menu-dark-bg-xl .u-header__product-banner-text {
    color: #8c98a4;
  }
  .u-header--sub-menu-dark-bg-xl .dropdown-nav-link:hover {
    color: rgba(255, 255, 255, 0.8);
  }
  .u-header--sub-menu-dark-bg-xl .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.1);
  }
}

/*------------------------------------
  Transparent Header
------------------------------------*/
.u-header--bg-transparent:not(.js-header-fix-moment) .u-search-push-top[style*="display: block"] + .u-header__section {
  background-color: #fff;
}

.u-header--bg-transparent:not(.js-header-fix-moment) .u-header__section {
  background-color: transparent;
  box-shadow: none;
}

.u-header--bg-transparent .u-header__navbar-brand-collapsed,
.u-header--bg-transparent .u-header__navbar-brand-collapsed .u-header__navbar-brand-text,
.u-header--bg-transparent .u-header__navbar-brand-on-scroll,
.u-header--bg-transparent .u-header__navbar-brand-on-scroll .u-header__navbar-brand-text {
  display: none;
}

.u-header--bg-transparent.js-header-fix-moment .u-header__navbar-brand-default,
.u-header--bg-transparent.js-header-fix-moment .u-header__navbar-brand-default .u-header__navbar-brand-text {
  display: none;
}

.u-header--bg-transparent.js-header-fix-moment .u-header__navbar-brand-on-scroll {
  display: -ms-flexbox;
  display: flex;
}

.u-header--bg-transparent.js-header-fix-moment .u-header__navbar-brand-on-scroll .u-header__navbar-brand-text {
  display: inline-block;
}

@media (min-width: 576px) and (min-width: 576px) {
  .u-header--bg-transparent-sm:not(.js-header-fix-moment) .u-search-push-top[style*="display: block"] + .u-header__section {
    background-color: #fff;
  }
  .u-header--bg-transparent-sm:not(.js-header-fix-moment) .u-header__section {
    background-color: transparent;
    box-shadow: none;
  }
}

@media (min-width: 576px) {
  .u-header--bg-transparent-sm .u-header__navbar-brand-collapsed,
  .u-header--bg-transparent-sm .u-header__navbar-brand-collapsed .u-header__navbar-brand-text,
  .u-header--bg-transparent-sm .u-header__navbar-brand-on-scroll,
  .u-header--bg-transparent-sm .u-header__navbar-brand-on-scroll .u-header__navbar-brand-text {
    display: none;
  }
  .u-header--bg-transparent-sm.js-header-fix-moment .u-header__navbar-brand-default,
  .u-header--bg-transparent-sm.js-header-fix-moment .u-header__navbar-brand-default .u-header__navbar-brand-text {
    display: none;
  }
  .u-header--bg-transparent-sm.js-header-fix-moment .u-header__navbar-brand-on-scroll {
    display: -ms-flexbox;
    display: flex;
  }
  .u-header--bg-transparent-sm.js-header-fix-moment .u-header__navbar-brand-on-scroll .u-header__navbar-brand-text {
    display: inline-block;
  }
}

@media (min-width: 768px) and (min-width: 768px) {
  .u-header--bg-transparent-md:not(.js-header-fix-moment) .u-search-push-top[style*="display: block"] + .u-header__section {
    background-color: #fff;
  }
  .u-header--bg-transparent-md:not(.js-header-fix-moment) .u-header__section {
    background-color: transparent;
    box-shadow: none;
  }
}

@media (min-width: 768px) {
  .u-header--bg-transparent-md .u-header__navbar-brand-collapsed,
  .u-header--bg-transparent-md .u-header__navbar-brand-collapsed .u-header__navbar-brand-text,
  .u-header--bg-transparent-md .u-header__navbar-brand-on-scroll,
  .u-header--bg-transparent-md .u-header__navbar-brand-on-scroll .u-header__navbar-brand-text {
    display: none;
  }
  .u-header--bg-transparent-md.js-header-fix-moment .u-header__navbar-brand-default,
  .u-header--bg-transparent-md.js-header-fix-moment .u-header__navbar-brand-default .u-header__navbar-brand-text {
    display: none;
  }
  .u-header--bg-transparent-md.js-header-fix-moment .u-header__navbar-brand-on-scroll {
    display: -ms-flexbox;
    display: flex;
  }
  .u-header--bg-transparent-md.js-header-fix-moment .u-header__navbar-brand-on-scroll .u-header__navbar-brand-text {
    display: inline-block;
  }
}

@media (min-width: 992px) and (min-width: 992px) {
  .u-header--bg-transparent-lg:not(.js-header-fix-moment) .u-search-push-top[style*="display: block"] + .u-header__section {
    background-color: #fff;
  }
  .u-header--bg-transparent-lg:not(.js-header-fix-moment) .u-header__section {
    background-color: transparent;
    box-shadow: none;
  }
}

@media (min-width: 992px) {
  .u-header--bg-transparent-lg .u-header__navbar-brand-collapsed,
  .u-header--bg-transparent-lg .u-header__navbar-brand-collapsed .u-header__navbar-brand-text,
  .u-header--bg-transparent-lg .u-header__navbar-brand-on-scroll,
  .u-header--bg-transparent-lg .u-header__navbar-brand-on-scroll .u-header__navbar-brand-text {
    display: none;
  }
  .u-header--bg-transparent-lg.js-header-fix-moment .u-header__navbar-brand-default,
  .u-header--bg-transparent-lg.js-header-fix-moment .u-header__navbar-brand-default .u-header__navbar-brand-text {
    display: none;
  }
  .u-header--bg-transparent-lg.js-header-fix-moment .u-header__navbar-brand-on-scroll {
    display: -ms-flexbox;
    display: flex;
  }
  .u-header--bg-transparent-lg.js-header-fix-moment .u-header__navbar-brand-on-scroll .u-header__navbar-brand-text {
    display: inline-block;
  }
}

@media (min-width: 1200px) and (min-width: 1200px) {
  .u-header--bg-transparent-xl:not(.js-header-fix-moment) .u-search-push-top[style*="display: block"] + .u-header__section {
    background-color: #fff;
  }
  .u-header--bg-transparent-xl:not(.js-header-fix-moment) .u-header__section {
    background-color: transparent;
    box-shadow: none;
  }
}

@media (min-width: 1200px) {
  .u-header--bg-transparent-xl .u-header__navbar-brand-collapsed,
  .u-header--bg-transparent-xl .u-header__navbar-brand-collapsed .u-header__navbar-brand-text,
  .u-header--bg-transparent-xl .u-header__navbar-brand-on-scroll,
  .u-header--bg-transparent-xl .u-header__navbar-brand-on-scroll .u-header__navbar-brand-text {
    display: none;
  }
  .u-header--bg-transparent-xl.js-header-fix-moment .u-header__navbar-brand-default,
  .u-header--bg-transparent-xl.js-header-fix-moment .u-header__navbar-brand-default .u-header__navbar-brand-text {
    display: none;
  }
  .u-header--bg-transparent-xl.js-header-fix-moment .u-header__navbar-brand-on-scroll {
    display: -ms-flexbox;
    display: flex;
  }
  .u-header--bg-transparent-xl.js-header-fix-moment .u-header__navbar-brand-on-scroll .u-header__navbar-brand-text {
    display: inline-block;
  }
}

@media (max-width: 575.98px) {
  .u-header--bg-transparent-sm .u-header__navbar-brand-default,
  .u-header--bg-transparent-sm .u-header__navbar-brand-on-scroll {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .u-header--bg-transparent-md .u-header__navbar-brand-default,
  .u-header--bg-transparent-md .u-header__navbar-brand-on-scroll {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .u-header--bg-transparent-lg .u-header__navbar-brand-default,
  .u-header--bg-transparent-lg .u-header__navbar-brand-on-scroll {
    display: none;
  }
}

@media (max-width: 1199.98px) {
  .u-header--bg-transparent-xl .u-header__navbar-brand-default,
  .u-header--bg-transparent-xl .u-header__navbar-brand-on-scroll {
    display: none;
  }
}

.u-header--bg-transparent .u-header__navbar-brand-default,
.u-header--bg-transparent .u-header__navbar-brand-on-scroll {
  display: none;
}

.u-header--bg-transparent .u-header__navbar-brand-default {
  display: -ms-flexbox;
  display: flex;
}

@media (max-width: 767.98px) {
  .u-header--bg-transparent .u-header__navbar-nav {
    background-color: #fff;
  }
  .u-header--bg-transparent .u-header__navbar-nav {
    padding: 0.875rem 1.5rem;
    padding-top: 1rem;
  }
}

/*------------------------------------
  Header On Scroll
------------------------------------*/
.u-header--white-bg-on-scroll.u-scrolled .u-header__section {
  background-color: #fff;
  box-shadow: 0 1px 10px rgba(151, 164, 175, 0.1);
}

/*------------------------------------
  Header White Nav Links
------------------------------------*/
.u-header--white-nav-links:not(.bg-white):not(.js-header-fix-moment) .u-header__nav-item:hover .u-header__nav-link {
  color: white;
}

.u-header--white-nav-links:not(.bg-white):not(.js-header-fix-moment) .u-header__nav-link {
  color: rgba(255, 255, 255, 0.7);
}

.u-header--white-nav-links:not(.bg-white):not(.js-header-fix-moment) .u-header__nav-link:hover {
  color: white;
}

.u-header--white-nav-links:not(.bg-white):not(.js-header-fix-moment) .u-header__navbar-link,
.u-header--white-nav-links:not(.bg-white):not(.js-header-fix-moment) .dropdown-nav-link,
.u-header--white-nav-links:not(.bg-white):not(.js-header-fix-moment) .btn-text-secondary {
  color: rgba(255, 255, 255, 0.6);
}

.u-header--white-nav-links:not(.bg-white):not(.js-header-fix-moment) .u-header__navbar-link:hover,
.u-header--white-nav-links:not(.bg-white):not(.js-header-fix-moment) .dropdown-nav-link:hover,
.u-header--white-nav-links:not(.bg-white):not(.js-header-fix-moment) .btn-text-secondary:hover {
  color: white;
}

@media (min-width: 576px) {
  .u-header--white-nav-links-sm:not(.bg-white):not(.js-header-fix-moment) .u-header__nav-item:hover .u-header__nav-link {
    color: white;
  }
  .u-header--white-nav-links-sm:not(.bg-white):not(.js-header-fix-moment) .u-header__nav-link {
    color: rgba(255, 255, 255, 0.7);
  }
  .u-header--white-nav-links-sm:not(.bg-white):not(.js-header-fix-moment) .u-header__nav-link:hover {
    color: white;
  }
  .u-header--white-nav-links-sm:not(.bg-white):not(.js-header-fix-moment) .u-header__navbar-link,
  .u-header--white-nav-links-sm:not(.bg-white):not(.js-header-fix-moment) .dropdown-nav-link,
  .u-header--white-nav-links-sm:not(.bg-white):not(.js-header-fix-moment) .btn-text-secondary {
    color: rgba(255, 255, 255, 0.6);
  }
  .u-header--white-nav-links-sm:not(.bg-white):not(.js-header-fix-moment) .u-header__navbar-link:hover,
  .u-header--white-nav-links-sm:not(.bg-white):not(.js-header-fix-moment) .dropdown-nav-link:hover,
  .u-header--white-nav-links-sm:not(.bg-white):not(.js-header-fix-moment) .btn-text-secondary:hover {
    color: white;
  }
}

@media (min-width: 768px) {
  .u-header--white-nav-links-md:not(.bg-white):not(.js-header-fix-moment) .u-header__nav-item:hover .u-header__nav-link {
    color: white;
  }
  .u-header--white-nav-links-md:not(.bg-white):not(.js-header-fix-moment) .u-header__nav-link {
    color: rgba(255, 255, 255, 0.7);
  }
  .u-header--white-nav-links-md:not(.bg-white):not(.js-header-fix-moment) .u-header__nav-link:hover {
    color: white;
  }
  .u-header--white-nav-links-md:not(.bg-white):not(.js-header-fix-moment) .u-header__navbar-link,
  .u-header--white-nav-links-md:not(.bg-white):not(.js-header-fix-moment) .dropdown-nav-link,
  .u-header--white-nav-links-md:not(.bg-white):not(.js-header-fix-moment) .btn-text-secondary {
    color: rgba(255, 255, 255, 0.6);
  }
  .u-header--white-nav-links-md:not(.bg-white):not(.js-header-fix-moment) .u-header__navbar-link:hover,
  .u-header--white-nav-links-md:not(.bg-white):not(.js-header-fix-moment) .dropdown-nav-link:hover,
  .u-header--white-nav-links-md:not(.bg-white):not(.js-header-fix-moment) .btn-text-secondary:hover {
    color: white;
  }
}

@media (min-width: 992px) {
  .u-header--white-nav-links-lg:not(.bg-white):not(.js-header-fix-moment) .u-header__nav-item:hover .u-header__nav-link {
    color: white;
  }
  .u-header--white-nav-links-lg:not(.bg-white):not(.js-header-fix-moment) .u-header__nav-link {
    color: rgba(255, 255, 255, 0.7);
  }
  .u-header--white-nav-links-lg:not(.bg-white):not(.js-header-fix-moment) .u-header__nav-link:hover {
    color: white;
  }
  .u-header--white-nav-links-lg:not(.bg-white):not(.js-header-fix-moment) .u-header__navbar-link,
  .u-header--white-nav-links-lg:not(.bg-white):not(.js-header-fix-moment) .dropdown-nav-link,
  .u-header--white-nav-links-lg:not(.bg-white):not(.js-header-fix-moment) .btn-text-secondary {
    color: rgba(255, 255, 255, 0.6);
  }
  .u-header--white-nav-links-lg:not(.bg-white):not(.js-header-fix-moment) .u-header__navbar-link:hover,
  .u-header--white-nav-links-lg:not(.bg-white):not(.js-header-fix-moment) .dropdown-nav-link:hover,
  .u-header--white-nav-links-lg:not(.bg-white):not(.js-header-fix-moment) .btn-text-secondary:hover {
    color: white;
  }
}

@media (min-width: 1200px) {
  .u-header--white-nav-links-xl:not(.bg-white):not(.js-header-fix-moment) .u-header__nav-item:hover .u-header__nav-link {
    color: white;
  }
  .u-header--white-nav-links-xl:not(.bg-white):not(.js-header-fix-moment) .u-header__nav-link {
    color: rgba(255, 255, 255, 0.7);
  }
  .u-header--white-nav-links-xl:not(.bg-white):not(.js-header-fix-moment) .u-header__nav-link:hover {
    color: white;
  }
  .u-header--white-nav-links-xl:not(.bg-white):not(.js-header-fix-moment) .u-header__navbar-link,
  .u-header--white-nav-links-xl:not(.bg-white):not(.js-header-fix-moment) .dropdown-nav-link,
  .u-header--white-nav-links-xl:not(.bg-white):not(.js-header-fix-moment) .btn-text-secondary {
    color: rgba(255, 255, 255, 0.6);
  }
  .u-header--white-nav-links-xl:not(.bg-white):not(.js-header-fix-moment) .u-header__navbar-link:hover,
  .u-header--white-nav-links-xl:not(.bg-white):not(.js-header-fix-moment) .dropdown-nav-link:hover,
  .u-header--white-nav-links-xl:not(.bg-white):not(.js-header-fix-moment) .btn-text-secondary:hover {
    color: white;
  }
}

/*------------------------------------
  Navbar Expand
------------------------------------*/
.navbar-expand {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.navbar-expand.u-header__navbar--no-space {
  padding-top: 0;
  padding-bottom: 0;
}

.navbar-expand .u-header__navbar-nav {
  -ms-flex-align: center;
      align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}

.navbar-expand .u-header__navbar-nav .u-header__nav-last-item {
  text-align: right;
  padding-left: 1rem;
  padding-right: 0;
}

.navbar-expand .u-header__navbar-nav .u-header__nav-link {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-right: 0.875rem;
  padding-left: 0.875rem;
}

.navbar-expand .u-header__navbar-nav .u-header__sub-menu {
  border-top: 0.1875rem solid #377dff;
  border-bottom-right-radius: 0.3125rem;
  border-bottom-left-radius: 0.3125rem;
  box-shadow: 0 8px 20px rgba(55, 125, 255, 0.075);
}

.navbar-expand .u-header__navbar-nav .u-header__sub-menu-nav-link {
  padding-right: 1.75rem;
  padding-left: 1.75rem;
}

.navbar-expand .u-header__navbar-nav .u-header__sub-menu-nav-group .u-header__sub-menu-nav-link {
  padding-left: 0;
}

.navbar-expand .u-header__navbar-nav .u-header__sub-menu.hs-sub-menu {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.navbar-expand .u-header__navbar-nav .u-header__sub-menu .hs-has-sub-menu {
  padding: 0;
}

.navbar-expand .u-header__navbar-nav .u-header__sub-menu .hs-has-sub-menu .u-header__sub-menu {
  margin-top: -1.1875rem;
}

.navbar-expand .u-header__mega-menu-position-right-fix.hs-mega-menu.hs-position-right {
  right: 20%;
}

.navbar-expand .u-header__mega-menu-wrapper {
  padding: 2.5rem;
  margin-left: 0;
  margin-right: 0;
}

.navbar-expand .u-header__promo {
  border-bottom-right-radius: 0.3125rem;
}

.navbar-expand .u-header__promo-card {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1 0 0%;
      flex: 1 0 0%;
  -ms-flex-direction: column;
      flex-direction: column;
}

.navbar-expand .u-header__promo-card-deck {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
}

.navbar-expand .u-header__promo-card-deck .u-header__promo-item:not(:last-child) .u-header__promo-link {
  position: relative;
}

.navbar-expand .u-header__promo-card-deck .u-header__promo-item:not(:last-child) .u-header__promo-link::after {
  position: absolute;
  top: 0;
  right: 0;
  margin-right: -1.5rem;
  border-right: 1px solid #e7eaf3;
  height: 100%;
  content: "";
}

@media (min-width: 576px) {
  .navbar-expand-sm {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .navbar-expand-sm.u-header__navbar--no-space {
    padding-top: 0;
    padding-bottom: 0;
  }
  .navbar-expand-sm .u-header__navbar-nav {
    -ms-flex-align: center;
        align-items: center;
    padding-top: 0;
    padding-bottom: 0;
  }
  .navbar-expand-sm .u-header__navbar-nav .u-header__nav-last-item {
    text-align: right;
    padding-left: 1rem;
    padding-right: 0;
  }
  .navbar-expand-sm .u-header__navbar-nav .u-header__nav-link {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-right: 0.875rem;
    padding-left: 0.875rem;
  }
  .navbar-expand-sm .u-header__navbar-nav .u-header__sub-menu {
    border-top: 0.1875rem solid #377dff;
    border-bottom-right-radius: 0.3125rem;
    border-bottom-left-radius: 0.3125rem;
    box-shadow: 0 8px 20px rgba(55, 125, 255, 0.075);
  }
  .navbar-expand-sm .u-header__navbar-nav .u-header__sub-menu-nav-link {
    padding-right: 1.75rem;
    padding-left: 1.75rem;
  }
  .navbar-expand-sm .u-header__navbar-nav .u-header__sub-menu-nav-group .u-header__sub-menu-nav-link {
    padding-left: 0;
  }
  .navbar-expand-sm .u-header__navbar-nav .u-header__sub-menu.hs-sub-menu {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .navbar-expand-sm .u-header__navbar-nav .u-header__sub-menu .hs-has-sub-menu {
    padding: 0;
  }
  .navbar-expand-sm .u-header__navbar-nav .u-header__sub-menu .hs-has-sub-menu .u-header__sub-menu {
    margin-top: -1.1875rem;
  }
  .navbar-expand-sm .u-header__mega-menu-position-right-fix.hs-mega-menu.hs-position-right {
    right: 20%;
  }
  .navbar-expand-sm .u-header__mega-menu-wrapper {
    padding: 2.5rem;
    margin-left: 0;
    margin-right: 0;
  }
  .navbar-expand-sm .u-header__promo {
    border-bottom-right-radius: 0.3125rem;
  }
  .navbar-expand-sm .u-header__promo-card {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1 0 0%;
        flex: 1 0 0%;
    -ms-flex-direction: column;
        flex-direction: column;
  }
  .navbar-expand-sm .u-header__promo-card-deck {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
  }
  .navbar-expand-sm .u-header__promo-card-deck .u-header__promo-item:not(:last-child) .u-header__promo-link {
    position: relative;
  }
  .navbar-expand-sm .u-header__promo-card-deck .u-header__promo-item:not(:last-child) .u-header__promo-link::after {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: -1.5rem;
    border-right: 1px solid #e7eaf3;
    height: 100%;
    content: "";
  }
}

@media (min-width: 768px) {
  .navbar-expand-md {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .navbar-expand-md.u-header__navbar--no-space {
    padding-top: 0;
    padding-bottom: 0;
  }
  .navbar-expand-md .u-header__navbar-nav {
    -ms-flex-align: center;
        align-items: center;
    padding-top: 0;
    padding-bottom: 0;
  }
  .navbar-expand-md .u-header__navbar-nav .u-header__nav-last-item {
    text-align: right;
    padding-left: 1rem;
    padding-right: 0;
  }
  .navbar-expand-md .u-header__navbar-nav .u-header__nav-link {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-right: 0.875rem;
    padding-left: 0.875rem;
  }
  .navbar-expand-md .u-header__navbar-nav .u-header__sub-menu {
    border-top: 0.1875rem solid #377dff;
    border-bottom-right-radius: 0.3125rem;
    border-bottom-left-radius: 0.3125rem;
    box-shadow: 0 8px 20px rgba(55, 125, 255, 0.075);
  }
  .navbar-expand-md .u-header__navbar-nav .u-header__sub-menu-nav-link {
    padding-right: 1.75rem;
    padding-left: 1.75rem;
  }
  .navbar-expand-md .u-header__navbar-nav .u-header__sub-menu-nav-group .u-header__sub-menu-nav-link {
    padding-left: 0;
  }
  .navbar-expand-md .u-header__navbar-nav .u-header__sub-menu.hs-sub-menu {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .navbar-expand-md .u-header__navbar-nav .u-header__sub-menu .hs-has-sub-menu {
    padding: 0;
  }
  .navbar-expand-md .u-header__navbar-nav .u-header__sub-menu .hs-has-sub-menu .u-header__sub-menu {
    margin-top: -1.1875rem;
  }
  .navbar-expand-md .u-header__mega-menu-position-right-fix.hs-mega-menu.hs-position-right {
    right: 20%;
  }
  .navbar-expand-md .u-header__mega-menu-wrapper {
    padding: 2.5rem;
    margin-left: 0;
    margin-right: 0;
  }
  .navbar-expand-md .u-header__promo {
    border-bottom-right-radius: 0.3125rem;
  }
  .navbar-expand-md .u-header__promo-card {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1 0 0%;
        flex: 1 0 0%;
    -ms-flex-direction: column;
        flex-direction: column;
  }
  .navbar-expand-md .u-header__promo-card-deck {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
  }
  .navbar-expand-md .u-header__promo-card-deck .u-header__promo-item:not(:last-child) .u-header__promo-link {
    position: relative;
  }
  .navbar-expand-md .u-header__promo-card-deck .u-header__promo-item:not(:last-child) .u-header__promo-link::after {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: -1.5rem;
    border-right: 1px solid #e7eaf3;
    height: 100%;
    content: "";
  }
}

@media (min-width: 992px) {
  .navbar-expand-lg {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .navbar-expand-lg.u-header__navbar--no-space {
    padding-top: 0;
    padding-bottom: 0;
  }
  .navbar-expand-lg .u-header__navbar-nav {
    -ms-flex-align: center;
        align-items: center;
    padding-top: 0;
    padding-bottom: 0;
  }
  .navbar-expand-lg .u-header__navbar-nav .u-header__nav-last-item {
    text-align: right;
    padding-left: 1rem;
    padding-right: 0;
  }
  .navbar-expand-lg .u-header__navbar-nav .u-header__nav-link {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-right: 0.875rem;
    padding-left: 0.875rem;
  }
  .navbar-expand-lg .u-header__navbar-nav .u-header__sub-menu {
    border-top: 0.1875rem solid #377dff;
    border-bottom-right-radius: 0.3125rem;
    border-bottom-left-radius: 0.3125rem;
    box-shadow: 0 8px 20px rgba(55, 125, 255, 0.075);
  }
  .navbar-expand-lg .u-header__navbar-nav .u-header__sub-menu-nav-link {
    padding-right: 1.75rem;
    padding-left: 1.75rem;
  }
  .navbar-expand-lg .u-header__navbar-nav .u-header__sub-menu-nav-group .u-header__sub-menu-nav-link {
    padding-left: 0;
  }
  .navbar-expand-lg .u-header__navbar-nav .u-header__sub-menu.hs-sub-menu {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .navbar-expand-lg .u-header__navbar-nav .u-header__sub-menu .hs-has-sub-menu {
    padding: 0;
  }
  .navbar-expand-lg .u-header__navbar-nav .u-header__sub-menu .hs-has-sub-menu .u-header__sub-menu {
    margin-top: -1.1875rem;
  }
  .navbar-expand-lg .u-header__mega-menu-position-right-fix.hs-mega-menu.hs-position-right {
    right: 20%;
  }
  .navbar-expand-lg .u-header__mega-menu-wrapper {
    padding: 2.5rem;
    margin-left: 0;
    margin-right: 0;
  }
  .navbar-expand-lg .u-header__promo {
    border-bottom-right-radius: 0.3125rem;
  }
  .navbar-expand-lg .u-header__promo-card {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1 0 0%;
        flex: 1 0 0%;
    -ms-flex-direction: column;
        flex-direction: column;
  }
  .navbar-expand-lg .u-header__promo-card-deck {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
  }
  .navbar-expand-lg .u-header__promo-card-deck .u-header__promo-item:not(:last-child) .u-header__promo-link {
    position: relative;
  }
  .navbar-expand-lg .u-header__promo-card-deck .u-header__promo-item:not(:last-child) .u-header__promo-link::after {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: -1.5rem;
    border-right: 1px solid #e7eaf3;
    height: 100%;
    content: "";
  }
}

@media (min-width: 1200px) {
  .navbar-expand-xl {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .navbar-expand-xl.u-header__navbar--no-space {
    padding-top: 0;
    padding-bottom: 0;
  }
  .navbar-expand-xl .u-header__navbar-nav {
    -ms-flex-align: center;
        align-items: center;
    padding-top: 0;
    padding-bottom: 0;
  }
  .navbar-expand-xl .u-header__navbar-nav .u-header__nav-last-item {
    text-align: right;
    padding-left: 1rem;
    padding-right: 0;
  }
  .navbar-expand-xl .u-header__navbar-nav .u-header__nav-link {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-right: 0.875rem;
    padding-left: 0.875rem;
  }
  .navbar-expand-xl .u-header__navbar-nav .u-header__sub-menu {
    border-top: 0.1875rem solid #377dff;
    border-bottom-right-radius: 0.3125rem;
    border-bottom-left-radius: 0.3125rem;
    box-shadow: 0 8px 20px rgba(55, 125, 255, 0.075);
  }
  .navbar-expand-xl .u-header__navbar-nav .u-header__sub-menu-nav-link {
    padding-right: 1.75rem;
    padding-left: 1.75rem;
  }
  .navbar-expand-xl .u-header__navbar-nav .u-header__sub-menu-nav-group .u-header__sub-menu-nav-link {
    padding-left: 0;
  }
  .navbar-expand-xl .u-header__navbar-nav .u-header__sub-menu.hs-sub-menu {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .navbar-expand-xl .u-header__navbar-nav .u-header__sub-menu .hs-has-sub-menu {
    padding: 0;
  }
  .navbar-expand-xl .u-header__navbar-nav .u-header__sub-menu .hs-has-sub-menu .u-header__sub-menu {
    margin-top: -1.1875rem;
  }
  .navbar-expand-xl .u-header__mega-menu-position-right-fix.hs-mega-menu.hs-position-right {
    right: 20%;
  }
  .navbar-expand-xl .u-header__mega-menu-wrapper {
    padding: 2.5rem;
    margin-left: 0;
    margin-right: 0;
  }
  .navbar-expand-xl .u-header__promo {
    border-bottom-right-radius: 0.3125rem;
  }
  .navbar-expand-xl .u-header__promo-card {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1 0 0%;
        flex: 1 0 0%;
    -ms-flex-direction: column;
        flex-direction: column;
  }
  .navbar-expand-xl .u-header__promo-card-deck {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
  }
  .navbar-expand-xl .u-header__promo-card-deck .u-header__promo-item:not(:last-child) .u-header__promo-link {
    position: relative;
  }
  .navbar-expand-xl .u-header__promo-card-deck .u-header__promo-item:not(:last-child) .u-header__promo-link::after {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: -1.5rem;
    border-right: 1px solid #e7eaf3;
    height: 100%;
    content: "";
  }
}

@media (max-width: 575.98px) {
  .navbar-expand-sm .u-header__nav-last-item {
    display: none;
  }
  .navbar-expand-sm .u-header__nav-link,
  .navbar-expand-sm .u-header__sub-menu-nav-link {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
  }
  .navbar-expand-sm .u-header__nav-link-toggle::after,
  .navbar-expand-sm .u-header__sub-menu-nav-link-toggle::after {
    margin-left: auto;
  }
  .navbar-expand-sm .u-header__sub-menu-nav-link-toggle::after {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .navbar-expand-sm .hs-mega-menu-opened .u-header__nav-link-toggle::after,
  .navbar-expand-sm .hs-sub-menu-opened .u-header__nav-link-toggle::after {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  .navbar-expand-sm .hs-sub-menu-opened > .u-header__sub-menu-nav-link-toggle::after {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  .navbar-expand-sm .u-header__mega-menu-wrapper {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
  .navbar-expand-sm .u-header__sub-menu {
    min-width: 100% !important;
  }
  .navbar-expand-sm .u-header__sub-menu--spacer {
    padding-left: 1.5rem;
  }
  .navbar-expand-sm .u-header__sub-menu:not(.u-header__promo) {
    border-left: 0.1875rem solid #377dff;
  }
  .navbar-expand-sm .u-header__sub-menu .u-header__sub-menu {
    padding-left: 1.5rem;
  }
  .navbar-expand-sm .u-header__sub-menu-title {
    padding-left: 1.5rem;
    margin-bottom: 0;
  }
  .navbar-expand-sm .u-header__sub-menu-nav-group {
    padding-top: .5rem;
    padding-left: 1.5rem;
  }
  .navbar-expand-sm .u-header__sub-menu .hs-has-sub-menu {
    padding-left: 1.5rem;
    padding-top: 0;
    padding-bottom: 0;
  }
  .navbar-expand-sm .u-header__sub-menu .hs-has-sub-menu .hs-sub-menu {
    -webkit-animation: none;
            animation: none;
  }
  .navbar-expand-sm .u-header-center-aligned-nav__col-last-item {
    display: none;
  }
  .navbar-expand-sm .u-header__promo-card-deck:last-child .u-header__promo-item:not(:last-child) {
    border-bottom: 1px solid #e7eaf3;
  }
}

@media (max-width: 767.98px) {
  .navbar-expand-md .u-header__nav-last-item {
    display: none;
  }
  .navbar-expand-md .u-header__nav-link,
  .navbar-expand-md .u-header__sub-menu-nav-link {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
  }
  .navbar-expand-md .u-header__nav-link-toggle::after,
  .navbar-expand-md .u-header__sub-menu-nav-link-toggle::after {
    margin-left: auto;
  }
  .navbar-expand-md .u-header__sub-menu-nav-link-toggle::after {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .navbar-expand-md .hs-mega-menu-opened .u-header__nav-link-toggle::after,
  .navbar-expand-md .hs-sub-menu-opened .u-header__nav-link-toggle::after {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  .navbar-expand-md .hs-sub-menu-opened > .u-header__sub-menu-nav-link-toggle::after {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  .navbar-expand-md .u-header__mega-menu-wrapper {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
  .navbar-expand-md .u-header__sub-menu {
    min-width: 100% !important;
  }
  .navbar-expand-md .u-header__sub-menu--spacer {
    padding-left: 1.5rem;
  }
  .navbar-expand-md .u-header__sub-menu:not(.u-header__promo) {
    border-left: 0.1875rem solid #377dff;
  }
  .navbar-expand-md .u-header__sub-menu .u-header__sub-menu {
    padding-left: 1.5rem;
  }
  .navbar-expand-md .u-header__sub-menu-title {
    padding-left: 1.5rem;
    margin-bottom: 0;
  }
  .navbar-expand-md .u-header__sub-menu-nav-group {
    padding-top: .5rem;
    padding-left: 1.5rem;
  }
  .navbar-expand-md .u-header__sub-menu .hs-has-sub-menu {
    padding-left: 1.5rem;
    padding-top: 0;
    padding-bottom: 0;
  }
  .navbar-expand-md .u-header__sub-menu .hs-has-sub-menu .hs-sub-menu {
    -webkit-animation: none;
            animation: none;
  }
  .navbar-expand-md .u-header-center-aligned-nav__col-last-item {
    display: none;
  }
  .navbar-expand-md .u-header__promo-card-deck:last-child .u-header__promo-item:not(:last-child) {
    border-bottom: 1px solid #e7eaf3;
  }
}

@media (max-width: 991.98px) {
  .navbar-expand-lg .u-header__nav-last-item {
    display: none;
  }
  .navbar-expand-lg .u-header__nav-link,
  .navbar-expand-lg .u-header__sub-menu-nav-link {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
  }
  .navbar-expand-lg .u-header__nav-link-toggle::after,
  .navbar-expand-lg .u-header__sub-menu-nav-link-toggle::after {
    margin-left: auto;
  }
  .navbar-expand-lg .u-header__sub-menu-nav-link-toggle::after {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .navbar-expand-lg .hs-mega-menu-opened .u-header__nav-link-toggle::after,
  .navbar-expand-lg .hs-sub-menu-opened .u-header__nav-link-toggle::after {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  .navbar-expand-lg .hs-sub-menu-opened > .u-header__sub-menu-nav-link-toggle::after {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  .navbar-expand-lg .u-header__mega-menu-wrapper {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
  .navbar-expand-lg .u-header__sub-menu {
    min-width: 100% !important;
  }
  .navbar-expand-lg .u-header__sub-menu--spacer {
    padding-left: 1.5rem;
  }
  .navbar-expand-lg .u-header__sub-menu:not(.u-header__promo) {
    border-left: 0.1875rem solid #377dff;
  }
  .navbar-expand-lg .u-header__sub-menu .u-header__sub-menu {
    padding-left: 1.5rem;
  }
  .navbar-expand-lg .u-header__sub-menu-title {
    padding-left: 1.5rem;
    margin-bottom: 0;
  }
  .navbar-expand-lg .u-header__sub-menu-nav-group {
    padding-top: .5rem;
    padding-left: 1.5rem;
  }
  .navbar-expand-lg .u-header__sub-menu .hs-has-sub-menu {
    padding-left: 1.5rem;
    padding-top: 0;
    padding-bottom: 0;
  }
  .navbar-expand-lg .u-header__sub-menu .hs-has-sub-menu .hs-sub-menu {
    -webkit-animation: none;
            animation: none;
  }
  .navbar-expand-lg .u-header-center-aligned-nav__col-last-item {
    display: none;
  }
  .navbar-expand-lg .u-header__promo-card-deck:last-child .u-header__promo-item:not(:last-child) {
    border-bottom: 1px solid #e7eaf3;
  }
}

@media (max-width: 1199.98px) {
  .navbar-expand-xl .u-header__nav-last-item {
    display: none;
  }
  .navbar-expand-xl .u-header__nav-link,
  .navbar-expand-xl .u-header__sub-menu-nav-link {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
  }
  .navbar-expand-xl .u-header__nav-link-toggle::after,
  .navbar-expand-xl .u-header__sub-menu-nav-link-toggle::after {
    margin-left: auto;
  }
  .navbar-expand-xl .u-header__sub-menu-nav-link-toggle::after {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .navbar-expand-xl .hs-mega-menu-opened .u-header__nav-link-toggle::after,
  .navbar-expand-xl .hs-sub-menu-opened .u-header__nav-link-toggle::after {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  .navbar-expand-xl .hs-sub-menu-opened > .u-header__sub-menu-nav-link-toggle::after {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  .navbar-expand-xl .u-header__mega-menu-wrapper {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
  .navbar-expand-xl .u-header__sub-menu {
    min-width: 100% !important;
  }
  .navbar-expand-xl .u-header__sub-menu--spacer {
    padding-left: 1.5rem;
  }
  .navbar-expand-xl .u-header__sub-menu:not(.u-header__promo) {
    border-left: 0.1875rem solid #377dff;
  }
  .navbar-expand-xl .u-header__sub-menu .u-header__sub-menu {
    padding-left: 1.5rem;
  }
  .navbar-expand-xl .u-header__sub-menu-title {
    padding-left: 1.5rem;
    margin-bottom: 0;
  }
  .navbar-expand-xl .u-header__sub-menu-nav-group {
    padding-top: .5rem;
    padding-left: 1.5rem;
  }
  .navbar-expand-xl .u-header__sub-menu .hs-has-sub-menu {
    padding-left: 1.5rem;
    padding-top: 0;
    padding-bottom: 0;
  }
  .navbar-expand-xl .u-header__sub-menu .hs-has-sub-menu .hs-sub-menu {
    -webkit-animation: none;
            animation: none;
  }
  .navbar-expand-xl .u-header-center-aligned-nav__col-last-item {
    display: none;
  }
  .navbar-expand-xl .u-header__promo-card-deck:last-child .u-header__promo-item:not(:last-child) {
    border-bottom: 1px solid #e7eaf3;
  }
}

.navbar-expand .u-header__nav-last-item {
  display: none;
}

.navbar-expand .u-header__nav-link,
.navbar-expand .u-header__sub-menu-nav-link {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
}

.navbar-expand .u-header__nav-link-toggle::after,
.navbar-expand .u-header__sub-menu-nav-link-toggle::after {
  margin-left: auto;
}

.navbar-expand .u-header__sub-menu-nav-link-toggle::after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.navbar-expand .hs-mega-menu-opened .u-header__nav-link-toggle::after,
.navbar-expand .hs-sub-menu-opened .u-header__nav-link-toggle::after {
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
}

.navbar-expand .hs-sub-menu-opened > .u-header__sub-menu-nav-link-toggle::after {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.navbar-expand .u-header__mega-menu-wrapper {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.navbar-expand .u-header__sub-menu {
  min-width: 100% !important;
}

.navbar-expand .u-header__sub-menu--spacer {
  padding-left: 1.5rem;
}

.navbar-expand .u-header__sub-menu:not(.u-header__promo) {
  border-left: 0.1875rem solid #377dff;
}

.navbar-expand .u-header__sub-menu .u-header__sub-menu {
  padding-left: 1.5rem;
}

.navbar-expand .u-header__sub-menu-title {
  padding-left: 1.5rem;
  margin-bottom: 0;
}

.navbar-expand .u-header__sub-menu-nav-group {
  padding-top: .5rem;
  padding-left: 1.5rem;
}

.navbar-expand .u-header__sub-menu .hs-has-sub-menu {
  padding-left: 1.5rem;
  padding-top: 0;
  padding-bottom: 0;
}

.navbar-expand .u-header__sub-menu .hs-has-sub-menu .hs-sub-menu {
  -webkit-animation: none;
          animation: none;
}

.navbar-expand .u-header-center-aligned-nav__col-last-item {
  display: none;
}

.navbar-expand .u-header__promo-card-deck:last-child .u-header__promo-item:not(:last-child) {
  border-bottom: 1px solid #e7eaf3;
}

@media (max-width: 767.98px) {
  .navbar-expand-sm .u-header__nav-last-item {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .navbar-expand-xs .u-header__banner,
  .navbar-expand-xs .u-header__product-banner,
  .navbar-expand-sm .u-header__banner,
  .navbar-expand-sm .u-header__product-banner,
  .navbar-expand-md .u-header__banner,
  .navbar-expand-md .u-header__product-banner,
  .navbar-expand-lg .u-header__banner,
  .navbar-expand-lg .u-header__product-banner {
    display: none;
  }
}

@media (max-width: 1199.98px) {
  .navbar-expand-xl .u-header__banner,
  .navbar-expand-xl .u-header__product-banner {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .navbar-expand-md .u-header__navbar-brand {
    padding-top: .5rem;
  }
  .u-header .u-header__mega-menu-position-right-fix--md.hs-mega-menu.hs-position-right {
    right: 20%;
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .navbar-expand-sm .u-header__navbar-brand {
    padding-top: .5rem;
  }
}

@media (min-width: 992px) {
  .navbar-expand .u-header__nav-last-item {
    display: inline-block;
  }
  [class*="navbar-expand"]:not(.navbar-expand-xl) {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
  .navbar-expand-lg-collapse-block .navbar-collapse {
    display: block !important;
  }
}

/*------------------------------------
  Header Floating
------------------------------------*/
.u-header--floating {
  position: absolute;
  right: 0;
  left: 0;
  margin-top: 2rem;
}

.u-header--floating.js-header-fix-moment {
  position: fixed;
  background-color: #fff;
  box-shadow: 0 1px 10px rgba(151, 164, 175, 0.1);
  margin-top: 0;
}

.u-header--floating.js-header-fix-moment .u-header--floating__inner {
  box-shadow: none;
}

.u-header--floating .u-header--floating__scrollbar {
  max-height: 50vh;
}

.u-header--floating .u-header--floating__scrollbar.mCS_destroyed {
  position: static !important;
}

.u-header--floating .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  margin: 0 24px;
}

.u-header--floating__inner {
  border-radius: 0.3125rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 576px) {
  .u-header--floating-sm {
    position: absolute;
    right: 0;
    left: 0;
    margin-top: 2rem;
  }
  .u-header--floating-sm.js-header-fix-moment {
    position: fixed;
    background-color: #fff;
    box-shadow: 0 1px 10px rgba(151, 164, 175, 0.1);
    margin-top: 0;
  }
  .u-header--floating-sm.js-header-fix-moment .u-header--floating__inner {
    box-shadow: none;
  }
  .u-header--floating-sm .u-header--floating__scrollbar {
    max-height: 50vh;
  }
  .u-header--floating-sm .u-header--floating__scrollbar.mCS_destroyed {
    position: static !important;
  }
  .u-header--floating-sm .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    margin: 0 24px;
  }
  .u-header--floating__inner {
    border-radius: 0.3125rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (min-width: 768px) {
  .u-header--floating-md {
    position: absolute;
    right: 0;
    left: 0;
    margin-top: 2rem;
  }
  .u-header--floating-md.js-header-fix-moment {
    position: fixed;
    background-color: #fff;
    box-shadow: 0 1px 10px rgba(151, 164, 175, 0.1);
    margin-top: 0;
  }
  .u-header--floating-md.js-header-fix-moment .u-header--floating__inner {
    box-shadow: none;
  }
  .u-header--floating-md .u-header--floating__scrollbar {
    max-height: 50vh;
  }
  .u-header--floating-md .u-header--floating__scrollbar.mCS_destroyed {
    position: static !important;
  }
  .u-header--floating-md .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    margin: 0 24px;
  }
  .u-header--floating__inner {
    border-radius: 0.3125rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (min-width: 992px) {
  .u-header--floating-lg {
    position: absolute;
    right: 0;
    left: 0;
    margin-top: 2rem;
  }
  .u-header--floating-lg.js-header-fix-moment {
    position: fixed;
    background-color: #fff;
    box-shadow: 0 1px 10px rgba(151, 164, 175, 0.1);
    margin-top: 0;
  }
  .u-header--floating-lg.js-header-fix-moment .u-header--floating__inner {
    box-shadow: none;
  }
  .u-header--floating-lg .u-header--floating__scrollbar {
    max-height: 50vh;
  }
  .u-header--floating-lg .u-header--floating__scrollbar.mCS_destroyed {
    position: static !important;
  }
  .u-header--floating-lg .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    margin: 0 24px;
  }
  .u-header--floating__inner {
    border-radius: 0.3125rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (min-width: 1200px) {
  .u-header--floating-xl {
    position: absolute;
    right: 0;
    left: 0;
    margin-top: 2rem;
  }
  .u-header--floating-xl.js-header-fix-moment {
    position: fixed;
    background-color: #fff;
    box-shadow: 0 1px 10px rgba(151, 164, 175, 0.1);
    margin-top: 0;
  }
  .u-header--floating-xl.js-header-fix-moment .u-header--floating__inner {
    box-shadow: none;
  }
  .u-header--floating-xl .u-header--floating__scrollbar {
    max-height: 50vh;
  }
  .u-header--floating-xl .u-header--floating__scrollbar.mCS_destroyed {
    position: static !important;
  }
  .u-header--floating-xl .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    margin: 0 24px;
  }
  .u-header--floating__inner {
    border-radius: 0.3125rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (max-width: 575.98px) {
  .u-header--floating-sm .u-header__section {
    box-shadow: none;
  }
  .u-header--floating-sm .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .u-header--floating-md .u-header__section {
    box-shadow: none;
  }
  .u-header--floating-md .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .u-header--floating-lg .u-header__section {
    box-shadow: none;
  }
  .u-header--floating-lg .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    display: none;
  }
}

@media (max-width: 1199.98px) {
  .u-header--floating-xl .u-header__section {
    box-shadow: none;
  }
  .u-header--floating-xl .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    display: none;
  }
}

.u-header--floating .u-header__section {
  box-shadow: none;
}

.u-header--floating .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  display: none;
}

/*------------------------------------
  Absolute Positions
------------------------------------*/
.u-header--abs-top, .u-header--abs-bottom, .u-header--abs-top-2nd-screen {
  position: absolute;
}

.u-header--abs-top {
  top: 0;
  bottom: auto;
}

.u-header--abs-top-2nd-screen:not(.js-header-fix-moment) {
  top: 100%;
  bottom: auto;
}

.u-header--abs-top-2nd-screen[data-header-fix-effect] {
  transition: none;
}

.u-header--abs-bottom:not(.js-header-fix-moment) {
  top: auto;
  bottom: 0;
}

.u-header--abs-bottom:not(.js-header-fix-moment) .u-header__sub-menu {
  top: auto;
  bottom: 100%;
}

.u-header--abs-bottom:not(.js-header-fix-moment) .u-header__sub-menu .u-header__sub-menu {
  top: 0;
  bottom: auto;
}

.u-header--abs-bottom:not(.js-header-fix-moment) [class*="navbar-expand"] .u-header__navbar-nav .u-header__sub-menu {
  border-top-left-radius: 0.3125rem;
  border-top-right-radius: 0.3125rem;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: 0 -8px 20px rgba(151, 164, 175, 0.1);
}

.u-header--abs-bottom:not(.js-header-fix-moment) .slideInUp {
  -webkit-animation-name: absoluteSlideInUp;
          animation-name: absoluteSlideInUp;
}

@media (min-width: 576px) {
  .u-header--abs-top-sm, .u-header--abs-bottom-sm, .u-header--abs-top-2nd-screen-sm {
    position: absolute;
  }
  .u-header--abs-top-sm {
    top: 0;
    bottom: auto;
  }
  .u-header--abs-top-2nd-screen-sm:not(.js-header-fix-moment) {
    top: 100%;
    bottom: auto;
  }
  .u-header--abs-top-2nd-screen-sm[data-header-fix-effect] {
    transition: none;
  }
  .u-header--abs-bottom-sm:not(.js-header-fix-moment) {
    top: auto;
    bottom: 0;
  }
  .u-header--abs-bottom-sm:not(.js-header-fix-moment) .u-header__sub-menu {
    top: auto;
    bottom: 100%;
  }
  .u-header--abs-bottom-sm:not(.js-header-fix-moment) .u-header__sub-menu .u-header__sub-menu {
    top: 0;
    bottom: auto;
  }
  .u-header--abs-bottom-sm:not(.js-header-fix-moment) [class*="navbar-expand"] .u-header__navbar-nav .u-header__sub-menu {
    border-top-left-radius: 0.3125rem;
    border-top-right-radius: 0.3125rem;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: 0 -8px 20px rgba(151, 164, 175, 0.1);
  }
  .u-header--abs-bottom-sm:not(.js-header-fix-moment) .slideInUp {
    -webkit-animation-name: absoluteSlideInUp;
            animation-name: absoluteSlideInUp;
  }
}

@media (min-width: 768px) {
  .u-header--abs-top-md, .u-header--abs-bottom-md, .u-header--abs-top-2nd-screen-md {
    position: absolute;
  }
  .u-header--abs-top-md {
    top: 0;
    bottom: auto;
  }
  .u-header--abs-top-2nd-screen-md:not(.js-header-fix-moment) {
    top: 100%;
    bottom: auto;
  }
  .u-header--abs-top-2nd-screen-md[data-header-fix-effect] {
    transition: none;
  }
  .u-header--abs-bottom-md:not(.js-header-fix-moment) {
    top: auto;
    bottom: 0;
  }
  .u-header--abs-bottom-md:not(.js-header-fix-moment) .u-header__sub-menu {
    top: auto;
    bottom: 100%;
  }
  .u-header--abs-bottom-md:not(.js-header-fix-moment) .u-header__sub-menu .u-header__sub-menu {
    top: 0;
    bottom: auto;
  }
  .u-header--abs-bottom-md:not(.js-header-fix-moment) [class*="navbar-expand"] .u-header__navbar-nav .u-header__sub-menu {
    border-top-left-radius: 0.3125rem;
    border-top-right-radius: 0.3125rem;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: 0 -8px 20px rgba(151, 164, 175, 0.1);
  }
  .u-header--abs-bottom-md:not(.js-header-fix-moment) .slideInUp {
    -webkit-animation-name: absoluteSlideInUp;
            animation-name: absoluteSlideInUp;
  }
}

@media (min-width: 992px) {
  .u-header--abs-top-lg, .u-header--abs-bottom-lg, .u-header--abs-top-2nd-screen-lg {
    position: absolute;
  }
  .u-header--abs-top-lg {
    top: 0;
    bottom: auto;
  }
  .u-header--abs-top-2nd-screen-lg:not(.js-header-fix-moment) {
    top: 100%;
    bottom: auto;
  }
  .u-header--abs-top-2nd-screen-lg[data-header-fix-effect] {
    transition: none;
  }
  .u-header--abs-bottom-lg:not(.js-header-fix-moment) {
    top: auto;
    bottom: 0;
  }
  .u-header--abs-bottom-lg:not(.js-header-fix-moment) .u-header__sub-menu {
    top: auto;
    bottom: 100%;
  }
  .u-header--abs-bottom-lg:not(.js-header-fix-moment) .u-header__sub-menu .u-header__sub-menu {
    top: 0;
    bottom: auto;
  }
  .u-header--abs-bottom-lg:not(.js-header-fix-moment) [class*="navbar-expand"] .u-header__navbar-nav .u-header__sub-menu {
    border-top-left-radius: 0.3125rem;
    border-top-right-radius: 0.3125rem;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: 0 -8px 20px rgba(151, 164, 175, 0.1);
  }
  .u-header--abs-bottom-lg:not(.js-header-fix-moment) .slideInUp {
    -webkit-animation-name: absoluteSlideInUp;
            animation-name: absoluteSlideInUp;
  }
}

@media (min-width: 1200px) {
  .u-header--abs-top-xl, .u-header--abs-bottom-xl, .u-header--abs-top-2nd-screen-xl {
    position: absolute;
  }
  .u-header--abs-top-xl {
    top: 0;
    bottom: auto;
  }
  .u-header--abs-top-2nd-screen-xl:not(.js-header-fix-moment) {
    top: 100%;
    bottom: auto;
  }
  .u-header--abs-top-2nd-screen-xl[data-header-fix-effect] {
    transition: none;
  }
  .u-header--abs-bottom-xl:not(.js-header-fix-moment) {
    top: auto;
    bottom: 0;
  }
  .u-header--abs-bottom-xl:not(.js-header-fix-moment) .u-header__sub-menu {
    top: auto;
    bottom: 100%;
  }
  .u-header--abs-bottom-xl:not(.js-header-fix-moment) .u-header__sub-menu .u-header__sub-menu {
    top: 0;
    bottom: auto;
  }
  .u-header--abs-bottom-xl:not(.js-header-fix-moment) [class*="navbar-expand"] .u-header__navbar-nav .u-header__sub-menu {
    border-top-left-radius: 0.3125rem;
    border-top-right-radius: 0.3125rem;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: 0 -8px 20px rgba(151, 164, 175, 0.1);
  }
  .u-header--abs-bottom-xl:not(.js-header-fix-moment) .slideInUp {
    -webkit-animation-name: absoluteSlideInUp;
            animation-name: absoluteSlideInUp;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .u-header--abs-bottom-md:not(.js-header-fix-moment) .navbar-expand-md .hs-mega-menu {
    bottom: 52.8%;
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .u-header--abs-bottom:not(.js-header-fix-moment) .navbar-expand-md .hs-mega-menu,
  .u-header--abs-bottom-sm:not(.js-header-fix-moment) .navbar-expand-md .hs-mega-menu {
    bottom: 52.8%;
  }
}

.u-header--abs-top__inner,
.u-header--abs-bottom__inner,
.u-header--abs-top-2nd-screen__inner {
  max-height: 50vh;
}

.u-header--abs-top__inner.mCS_destroyed,
.u-header--abs-bottom__inner.mCS_destroyed,
.u-header--abs-top-2nd-screen__inner.mCS_destroyed {
  position: static !important;
}

[class*="u-header--abs"] .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  margin: 0 24px;
}

/* Disable box-shadow on mobile device */
.u-header--abs-top-2nd-screen:not(.js-header-fix-moment) [class*="navbar-expand"] .u-header__navbar-nav .u-header__sub-menu, .u-header--abs-bottom:not(.js-header-fix-moment) [class*="navbar-expand"] .u-header__navbar-nav .u-header__sub-menu {
  box-shadow: none;
}

@-webkit-keyframes absoluteSlideInUp {
  from {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }
}

@keyframes absoluteSlideInUp {
  from {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }
}

/*------------------------------------
  Header Sidebar
------------------------------------*/
.u-header-sidebar__footer-offset {
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 10.625rem;
}

.u-header-sidebar__content {
  padding: 1.5rem 3rem 3rem;
}

.u-header-sidebar__navbar-brand {
  display: block;
  width: 6.25rem;
  padding-top: 0;
  padding-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.5rem;
}

.u-header-sidebar__footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem 3rem;
}

.u-header-sidebar__footer-link {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
}

.u-header-sidebar__footer-link:hover {
  color: #fff;
}

/*------------------------------------
  Sticky Positions
------------------------------------*/
.u-header--sticky-top, .u-header--sticky-bottom {
  position: fixed;
}

.u-header--sticky-top {
  bottom: auto;
  top: 0;
}

.u-header--sticky-bottom {
  top: auto;
  bottom: 0;
}

.u-header--sticky-bottom .u-header__sub-menu {
  top: auto;
  bottom: 100%;
}

.u-header--sticky-bottom .u-header__sub-menu .u-header__sub-menu {
  top: 0;
  bottom: auto;
}

.u-header--sticky-bottom .navbar-nav .u-header__sub-menu {
  border-top-left-radius: 0.3125rem;
  border-top-right-radius: 0.3125rem;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: 0 -8px 20px rgba(151, 164, 175, 0.1);
}

.u-header--sticky-bottom .slideInUp {
  -webkit-animation-name: stickySlideInUp;
          animation-name: stickySlideInUp;
}

@media (min-width: 576px) {
  .u-header--sticky-top-sm, .u-header--sticky-bottom-sm {
    position: fixed;
  }
  .u-header--sticky-top-sm {
    bottom: auto;
    top: 0;
  }
  .u-header--sticky-bottom-sm {
    top: auto;
    bottom: 0;
  }
  .u-header--sticky-bottom-sm .u-header__sub-menu {
    top: auto;
    bottom: 100%;
  }
  .u-header--sticky-bottom-sm .u-header__sub-menu .u-header__sub-menu {
    top: 0;
    bottom: auto;
  }
  .u-header--sticky-bottom-sm .navbar-nav .u-header__sub-menu {
    border-top-left-radius: 0.3125rem;
    border-top-right-radius: 0.3125rem;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: 0 -8px 20px rgba(151, 164, 175, 0.1);
  }
  .u-header--sticky-bottom-sm .slideInUp {
    -webkit-animation-name: stickySlideInUp;
            animation-name: stickySlideInUp;
  }
}

@media (min-width: 768px) {
  .u-header--sticky-top-md, .u-header--sticky-bottom-md {
    position: fixed;
  }
  .u-header--sticky-top-md {
    bottom: auto;
    top: 0;
  }
  .u-header--sticky-bottom-md {
    top: auto;
    bottom: 0;
  }
  .u-header--sticky-bottom-md .u-header__sub-menu {
    top: auto;
    bottom: 100%;
  }
  .u-header--sticky-bottom-md .u-header__sub-menu .u-header__sub-menu {
    top: 0;
    bottom: auto;
  }
  .u-header--sticky-bottom-md .navbar-nav .u-header__sub-menu {
    border-top-left-radius: 0.3125rem;
    border-top-right-radius: 0.3125rem;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: 0 -8px 20px rgba(151, 164, 175, 0.1);
  }
  .u-header--sticky-bottom-md .slideInUp {
    -webkit-animation-name: stickySlideInUp;
            animation-name: stickySlideInUp;
  }
}

@media (min-width: 992px) {
  .u-header--sticky-top-lg, .u-header--sticky-bottom-lg {
    position: fixed;
  }
  .u-header--sticky-top-lg {
    bottom: auto;
    top: 0;
  }
  .u-header--sticky-bottom-lg {
    top: auto;
    bottom: 0;
  }
  .u-header--sticky-bottom-lg .u-header__sub-menu {
    top: auto;
    bottom: 100%;
  }
  .u-header--sticky-bottom-lg .u-header__sub-menu .u-header__sub-menu {
    top: 0;
    bottom: auto;
  }
  .u-header--sticky-bottom-lg .navbar-nav .u-header__sub-menu {
    border-top-left-radius: 0.3125rem;
    border-top-right-radius: 0.3125rem;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: 0 -8px 20px rgba(151, 164, 175, 0.1);
  }
  .u-header--sticky-bottom-lg .slideInUp {
    -webkit-animation-name: stickySlideInUp;
            animation-name: stickySlideInUp;
  }
}

@media (min-width: 1200px) {
  .u-header--sticky-top-xl, .u-header--sticky-bottom-xl {
    position: fixed;
  }
  .u-header--sticky-top-xl {
    bottom: auto;
    top: 0;
  }
  .u-header--sticky-bottom-xl {
    top: auto;
    bottom: 0;
  }
  .u-header--sticky-bottom-xl .u-header__sub-menu {
    top: auto;
    bottom: 100%;
  }
  .u-header--sticky-bottom-xl .u-header__sub-menu .u-header__sub-menu {
    top: 0;
    bottom: auto;
  }
  .u-header--sticky-bottom-xl .navbar-nav .u-header__sub-menu {
    border-top-left-radius: 0.3125rem;
    border-top-right-radius: 0.3125rem;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: 0 -8px 20px rgba(151, 164, 175, 0.1);
  }
  .u-header--sticky-bottom-xl .slideInUp {
    -webkit-animation-name: stickySlideInUp;
            animation-name: stickySlideInUp;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .u-header--sticky-bottom-md:not(.js-header-fix-moment) .navbar-expand-md .hs-mega-menu {
    bottom: 52.8%;
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .u-header--sticky-bottom:not(.js-header-fix-moment) .navbar-expand-md .hs-mega-menu,
  .u-header--sticky-bottom-sm:not(.js-header-fix-moment) .navbar-expand-md .hs-mega-menu {
    bottom: 52.8%;
  }
}

.u-header--sticky-top__inner,
.u-header--sticky-bottom__inner {
  max-height: 50vh;
}

.u-header--sticky-top__inner.mCS_destroyed,
.u-header--sticky-bottom__inner.mCS_destroyed {
  position: static !important;
}

.u-header--sticky-top__inner .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.u-header--sticky-bottom__inner .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  margin: 0 24px;
}

/* Disable box-shadow on mobile device */
.u-header--sticky-bottom:not(.js-header-fix-moment) [class*="navbar-expand"] .navbar-nav .u-header__sub-menu {
  box-shadow: none;
}

@-webkit-keyframes stickySlideInUp {
  from {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }
}

@keyframes stickySlideInUp {
  from {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }
}

/*------------------------------------
  Header Center Aligned
------------------------------------*/
.u-header--center-aligned .u-hamburger {
  display: none;
}

.u-header--center-aligned .u-header--center-aligned__inner {
  -ms-flex-pack: center;
      justify-content: center;
  text-align: center;
  padding-top: .5rem;
}

.u-header--center-aligned .u-header__navbar-brand {
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .u-header--center-aligned-sm .u-hamburger {
    display: none;
  }
  .u-header--center-aligned-sm .u-header--center-aligned__inner {
    -ms-flex-pack: center;
        justify-content: center;
    text-align: center;
    padding-top: .5rem;
  }
  .u-header--center-aligned-sm .u-header__navbar-brand {
    margin-right: auto;
    margin-left: auto;
  }
}

@media (min-width: 768px) {
  .u-header--center-aligned-md .u-hamburger {
    display: none;
  }
  .u-header--center-aligned-md .u-header--center-aligned__inner {
    -ms-flex-pack: center;
        justify-content: center;
    text-align: center;
    padding-top: .5rem;
  }
  .u-header--center-aligned-md .u-header__navbar-brand {
    margin-right: auto;
    margin-left: auto;
  }
}

@media (min-width: 992px) {
  .u-header--center-aligned-lg .u-hamburger {
    display: none;
  }
  .u-header--center-aligned-lg .u-header--center-aligned__inner {
    -ms-flex-pack: center;
        justify-content: center;
    text-align: center;
    padding-top: .5rem;
  }
  .u-header--center-aligned-lg .u-header__navbar-brand {
    margin-right: auto;
    margin-left: auto;
  }
}

@media (min-width: 1200px) {
  .u-header--center-aligned-xl .u-hamburger {
    display: none;
  }
  .u-header--center-aligned-xl .u-header--center-aligned__inner {
    -ms-flex-pack: center;
        justify-content: center;
    text-align: center;
    padding-top: .5rem;
  }
  .u-header--center-aligned-xl .u-header__navbar-brand {
    margin-right: auto;
    margin-left: auto;
  }
}

@media (max-width: 575.98px) {
  .u-header--center-aligned-sm .u-header--center-aligned__inner {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    padding-top: 0.25rem;
  }
  .u-header--center-aligned-sm .u-header__navbar {
    padding-top: 0;
  }
}

@media (max-width: 767.98px) {
  .u-header--center-aligned-md .u-header--center-aligned__inner {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    padding-top: 0.25rem;
  }
  .u-header--center-aligned-md .u-header__navbar {
    padding-top: 0;
  }
}

@media (max-width: 991.98px) {
  .u-header--center-aligned-lg .u-header--center-aligned__inner {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    padding-top: 0.25rem;
  }
  .u-header--center-aligned-lg .u-header__navbar {
    padding-top: 0;
  }
}

@media (max-width: 1199.98px) {
  .u-header--center-aligned-xl .u-header--center-aligned__inner {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    padding-top: 0.25rem;
  }
  .u-header--center-aligned-xl .u-header__navbar {
    padding-top: 0;
  }
}

.u-header--center-aligned .u-header--center-aligned__inner {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  padding-top: 0.25rem;
}

.u-header--center-aligned .u-header__navbar {
  padding-top: 0;
}

/*------------------------------------
  Header Collapse
------------------------------------*/
.u-header-collapse__nav {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.u-header-collapse__nav-list {
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
}

.u-header-collapse__nav-link {
  color: #1e2022;
}

.u-header-collapse__nav-pointer {
  position: relative;
}

.u-header-collapse__nav-pointer::after {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-size: 65%;
  font-weight: 900;
  content: "\f107";
  margin-left: auto;
  transition: 0.3s ease;
}

.u-header-collapse__nav-pointer.active::after {
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
}

.u-header-collapse__nav-link, .u-header-collapse__submenu-nav-link {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  padding-top: .625rem;
  padding-bottom: .625rem;
}

.u-header-collapse__nav-link.active, .u-header-collapse__submenu-nav-link.active {
  color: #377dff;
}

.u-header-collapse__submenu {
  position: relative;
  transition: 0.3s ease-in-out;
}

.u-header-collapse__submenu .u-header-collapse__nav-list {
  border-left: 2px solid #377dff;
  padding-left: 1rem;
}

.u-header-collapse__submenu .u-header-collapse__nav-list--no-spacer {
  padding-left: 0;
}

.u-header-collapse__submenu-nav-link {
  color: #77838f;
}

.u-header-collapse__submenu-list {
  list-style: none;
  border-left: 2px solid #377dff;
  padding-left: 0;
  margin-bottom: 0;
}

.u-header-collapse__submenu-list-link {
  display: inline-block;
  color: #77838f;
}

/*------------------------------------
  Alert
------------------------------------*/
.alert-text {
  color: inherit;
}

/*------------------------------------
  Avatar
------------------------------------*/
.u-avatar {
  width: 3.125rem;
  height: 3.125rem;
}

.u-xs-avatar {
  width: 1.375rem;
  height: 1.375rem;
}

.u-sm-avatar {
  width: 2rem;
  height: 2rem;
}

.u-lg-avatar {
  width: 5rem;
  height: 5rem;
}

.u-xl-avatar {
  width: 10rem;
  height: 10rem;
}

/*------------------------------------
  Avatar Bordered
------------------------------------*/
.u-sm-avatar--bordered {
  border: 2px solid #fff;
}

.u-xl-avatar--bordered {
  border: 7px solid #fff;
}

/*------------------------------------
  Badges
------------------------------------*/
[class*="badge-"] {
  z-index: 3;
}

.badge:empty {
  display: inherit;
}

.badge.badge-pos {
  position: absolute;
}

.btn .badge-pos {
  top: auto;
}

[class*="badge-outline"] {
  border-style: solid;
  border-width: 0.125rem;
  box-shadow: 0 3px 6px 0 rgba(140, 152, 164, 0.25);
}

/*------------------------------------
  Badge Sizes
------------------------------------*/
/* Extra Small */
.badge-xs {
  width: 0.875rem;
  height: 0.875rem;
  line-height: 1.4;
  font-size: 0.5rem;
}

/* Small */
.badge-sm {
  width: 1.125rem;
  height: 1.125rem;
  line-height: 1.4;
  font-size: 0.625rem;
}

.badge-sm[class*="badge-outline"] {
  line-height: 1;
}

/* Medium */
.badge-md {
  width: 1.375rem;
  height: 1.375rem;
  line-height: 1.7;
  font-size: 0.625rem;
}

.badge-md[class*="badge-outline"] {
  line-height: 1.3;
}

/* Bigger */
.badge-bigger {
  padding: 0.625rem;
}

/*------------------------------------
  Badge Styles
------------------------------------*/
/* primary badge */
.badge-outline-primary {
  color: #fff;
  background: #377dff;
  border-color: #fff;
}

/* secondary badge */
.badge-outline-secondary {
  color: #fff;
  background: #77838f;
  border-color: #fff;
}

/* success badge */
.badge-outline-success {
  color: #fff;
  background: #00c9a7;
  border-color: #fff;
}

/* info badge */
.badge-outline-info {
  color: #1e2022;
  background: #00dffc;
  border-color: #fff;
}

/* warning badge */
.badge-outline-warning {
  color: #1e2022;
  background: #ffc107;
  border-color: #fff;
}

/* danger badge */
.badge-outline-danger {
  color: #fff;
  background: #de4437;
  border-color: #fff;
}

/* light badge */
.badge-outline-light {
  color: #1e2022;
  background: #f8f9fa;
  border-color: #fff;
}

/* dark badge */
.badge-outline-dark {
  color: #fff;
  background: #1e2022;
  border-color: #fff;
}

/* white badge */
.badge-outline-white {
  color: #1e2022;
  background: #fff;
  border-color: #fff;
}

/* indigo badge */
.badge-outline-indigo {
  color: #fff;
  background: #2d1582;
  border-color: #fff;
}

.badge-outline-white {
  border-color: #fff;
}

/*------------------------------------
  Badge Positions
------------------------------------*/
.badge-pos:not([class*="--top-left"]):not([class*="--bottom-left"]):not([class*="--bottom-right"]) {
  top: 0;
  right: 0;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
}

.badge-pos--top-left {
  top: 0;
  left: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.badge-pos--bottom-left {
  bottom: 0;
  left: 0;
  -webkit-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
}

.badge-pos--bottom-right {
  bottom: 0;
  right: 0;
  -webkit-transform: translate(50%, 50%);
          transform: translate(50%, 50%);
}

/*------------------------------------
  Badge in Avatar Component
------------------------------------*/
/* Default Size Avatar */
.u-avatar .rounded-circle + .badge-xs.badge-pos:not([class*="--top-left"]):not([class*="--bottom-left"]):not([class*="--bottom-right"]) {
  -webkit-transform: translate(20%, -20%);
          transform: translate(20%, -20%);
}

.u-avatar .rounded-circle + .badge-xs.badge-pos--top-left {
  -webkit-transform: translate(-20%, -20%);
          transform: translate(-20%, -20%);
}

.u-avatar .rounded-circle + .badge-xs.badge-pos--bottom-left {
  -webkit-transform: translate(-20%, 20%);
          transform: translate(-20%, 20%);
}

.u-avatar .rounded-circle + .badge-xs.badge-pos--bottom-right {
  -webkit-transform: translate(20%, 20%);
          transform: translate(20%, 20%);
}

.u-avatar .rounded-circle + .badge-sm.badge-pos:not([class*="--top-left"]):not([class*="--bottom-left"]):not([class*="--bottom-right"]) {
  -webkit-transform: translate(25%, -25%);
          transform: translate(25%, -25%);
}

.u-avatar .rounded-circle + .badge-sm.badge-pos--top-left {
  -webkit-transform: translate(-25%, -25%);
          transform: translate(-25%, -25%);
}

.u-avatar .rounded-circle + .badge-sm.badge-pos--bottom-left {
  -webkit-transform: translate(-25%, 25%);
          transform: translate(-25%, 25%);
}

.u-avatar .rounded-circle + .badge-sm.badge-pos--bottom-right {
  -webkit-transform: translate(25%, 25%);
          transform: translate(25%, 25%);
}

.u-avatar .rounded-circle + .badge-md.badge-pos:not([class*="--top-left"]):not([class*="--bottom-left"]):not([class*="--bottom-right"]) {
  -webkit-transform: translate(30%, -30%);
          transform: translate(30%, -30%);
}

.u-avatar .rounded-circle + .badge-md.badge-pos--top-left {
  -webkit-transform: translate(-30%, -30%);
          transform: translate(-30%, -30%);
}

.u-avatar .rounded-circle + .badge-md.badge-pos--bottom-left {
  -webkit-transform: translate(-30%, 30%);
          transform: translate(-30%, 30%);
}

.u-avatar .rounded-circle + .badge-md.badge-pos--bottom-right {
  -webkit-transform: translate(30%, 30%);
          transform: translate(30%, 30%);
}

/* Small Size Avatar */
.u-sm-avatar .rounded-circle + .badge-xs.badge-pos:not([class*="--top-left"]):not([class*="--bottom-left"]):not([class*="--bottom-right"]) {
  -webkit-transform: translate(25%, -25%);
          transform: translate(25%, -25%);
}

.u-sm-avatar .rounded-circle + .badge-xs.badge-pos--top-left {
  -webkit-transform: translate(-25%, -25%);
          transform: translate(-25%, -25%);
}

.u-sm-avatar .rounded-circle + .badge-xs.badge-pos--bottom-left {
  -webkit-transform: translate(-25%, 25%);
          transform: translate(-25%, 25%);
}

.u-sm-avatar .rounded-circle + .badge-xs.badge-pos--bottom-right {
  -webkit-transform: translate(25%, 25%);
          transform: translate(25%, 25%);
}

.u-sm-avatar .rounded-circle + .badge-sm.badge-pos:not([class*="--top-left"]):not([class*="--bottom-left"]):not([class*="--bottom-right"]),
.u-sm-avatar .rounded-circle + .badge-md.badge-pos:not([class*="--top-left"]):not([class*="--bottom-left"]):not([class*="--bottom-right"]) {
  -webkit-transform: translate(35%, -35%);
          transform: translate(35%, -35%);
}

.u-sm-avatar .rounded-circle + .badge-sm.badge-pos--top-left,
.u-sm-avatar .rounded-circle + .badge-md.badge-pos--top-left {
  -webkit-transform: translate(-35%, -35%);
          transform: translate(-35%, -35%);
}

.u-sm-avatar .rounded-circle + .badge-sm.badge-pos--bottom-left,
.u-sm-avatar .rounded-circle + .badge-md.badge-pos--bottom-left {
  -webkit-transform: translate(-35%, 35%);
          transform: translate(-35%, 35%);
}

.u-sm-avatar .rounded-circle + .badge-sm.badge-pos--bottom-right,
.u-sm-avatar .rounded-circle + .badge-md.badge-pos--bottom-right {
  -webkit-transform: translate(35%, 35%);
          transform: translate(35%, 35%);
}

/* Large Size Avatar */
.u-lg-avatar .rounded-circle + .badge-xs.badge-pos:not([class*="--top-left"]):not([class*="--bottom-left"]):not([class*="--bottom-right"]) {
  -webkit-transform: translate(-35%, 35%);
          transform: translate(-35%, 35%);
}

.u-lg-avatar .rounded-circle + .badge-xs.badge-pos--top-left {
  -webkit-transform: translate(35%, 35%);
          transform: translate(35%, 35%);
}

.u-lg-avatar .rounded-circle + .badge-xs.badge-pos--bottom-left {
  -webkit-transform: translate(35%, -35%);
          transform: translate(35%, -35%);
}

.u-lg-avatar .rounded-circle + .badge-xs.badge-pos--bottom-right {
  -webkit-transform: translate(-35%, -35%);
          transform: translate(-35%, -35%);
}

.u-lg-avatar .rounded-circle + .badge-sm.badge-pos:not([class*="--top-left"]):not([class*="--bottom-left"]):not([class*="--bottom-right"]) {
  -webkit-transform: translate(-15%, 15%);
          transform: translate(-15%, 15%);
}

.u-lg-avatar .rounded-circle + .badge-sm.badge-pos--top-left {
  -webkit-transform: translate(15%, 15%);
          transform: translate(15%, 15%);
}

.u-lg-avatar .rounded-circle + .badge-sm.badge-pos--bottom-left {
  -webkit-transform: translate(15%, -15%);
          transform: translate(15%, -15%);
}

.u-lg-avatar .rounded-circle + .badge-sm.badge-pos--bottom-right {
  -webkit-transform: translate(-15%, -15%);
          transform: translate(-15%, -15%);
}

.u-lg-avatar .rounded-circle + .badge-md.badge-pos:not([class*="--top-left"]):not([class*="--bottom-left"]):not([class*="--bottom-right"]) {
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
}

.u-lg-avatar .rounded-circle + .badge-md.badge-pos--top-left {
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
}

.u-lg-avatar .rounded-circle + .badge-md.badge-pos--bottom-left {
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
}

.u-lg-avatar .rounded-circle + .badge-md.badge-pos--bottom-right {
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
}

/* Extra Large Size Avatar */
.u-xl-avatar .rounded-circle + .badge-xs.badge-pos:not([class*="--top-left"]):not([class*="--bottom-left"]):not([class*="--bottom-right"]) {
  -webkit-transform: translate(-100%, 100%);
          transform: translate(-100%, 100%);
}

.u-xl-avatar .rounded-circle + .badge-xs.badge-pos--top-left {
  -webkit-transform: translate(100%, 100%);
          transform: translate(100%, 100%);
}

.u-xl-avatar .rounded-circle + .badge-xs.badge-pos--bottom-left {
  -webkit-transform: translate(100%, -100%);
          transform: translate(100%, -100%);
}

.u-xl-avatar .rounded-circle + .badge-xs.badge-pos--bottom-right {
  -webkit-transform: translate(-100%, -100%);
          transform: translate(-100%, -100%);
}

.u-xl-avatar .rounded-circle + .badge-sm.badge-pos:not([class*="--top-left"]):not([class*="--bottom-left"]):not([class*="--bottom-right"]) {
  -webkit-transform: translate(-65%, 65%);
          transform: translate(-65%, 65%);
}

.u-xl-avatar .rounded-circle + .badge-sm.badge-pos--top-left {
  -webkit-transform: translate(65%, 65%);
          transform: translate(65%, 65%);
}

.u-xl-avatar .rounded-circle + .badge-sm.badge-pos--bottom-left {
  -webkit-transform: translate(65%, -65%);
          transform: translate(65%, -65%);
}

.u-xl-avatar .rounded-circle + .badge-sm.badge-pos--bottom-right {
  -webkit-transform: translate(-65%, -65%);
          transform: translate(-65%, -65%);
}

.u-xl-avatar .rounded-circle + .badge-md.badge-pos:not([class*="--top-left"]):not([class*="--bottom-left"]):not([class*="--bottom-right"]) {
  -webkit-transform: translate(-45%, 45%);
          transform: translate(-45%, 45%);
}

.u-xl-avatar .rounded-circle + .badge-md.badge-pos--top-left {
  -webkit-transform: translate(45%, 45%);
          transform: translate(45%, 45%);
}

.u-xl-avatar .rounded-circle + .badge-md.badge-pos--bottom-left {
  -webkit-transform: translate(45%, -45%);
          transform: translate(45%, -45%);
}

.u-xl-avatar .rounded-circle + .badge-md.badge-pos--bottom-right {
  -webkit-transform: translate(-45%, -45%);
          transform: translate(-45%, -45%);
}

/*------------------------------------
  Badge in Icon Component
------------------------------------*/
/* Default Size Icon */
.btn-icon.rounded-circle .badge-xs.badge-pos:not([class*="--top-left"]):not([class*="--bottom-left"]):not([class*="--bottom-right"]) {
  -webkit-transform: translate(20%, -20%);
          transform: translate(20%, -20%);
}

.btn-icon.rounded-circle .badge-xs.badge-pos--top-left {
  -webkit-transform: translate(-20%, -20%);
          transform: translate(-20%, -20%);
}

.btn-icon.rounded-circle .badge-xs.badge-pos--bottom-left {
  -webkit-transform: translate(-20%, 20%);
          transform: translate(-20%, 20%);
}

.btn-icon.rounded-circle .badge-xs.badge-pos--bottom-right {
  -webkit-transform: translate(20%, 20%);
          transform: translate(20%, 20%);
}

.btn-icon.rounded-circle .badge-sm.badge-pos:not([class*="--top-left"]):not([class*="--bottom-left"]):not([class*="--bottom-right"]) {
  -webkit-transform: translate(25%, -25%);
          transform: translate(25%, -25%);
}

.btn-icon.rounded-circle .badge-sm.badge-pos--top-left {
  -webkit-transform: translate(-25%, -25%);
          transform: translate(-25%, -25%);
}

.btn-icon.rounded-circle .badge-sm.badge-pos--bottom-left {
  -webkit-transform: translate(-25%, 25%);
          transform: translate(-25%, 25%);
}

.btn-icon.rounded-circle .badge-sm.badge-pos--bottom-right {
  -webkit-transform: translate(25%, 25%);
          transform: translate(25%, 25%);
}

.btn-icon.rounded-circle .badge-md.badge-pos:not([class*="--top-left"]):not([class*="--bottom-left"]):not([class*="--bottom-right"]) {
  -webkit-transform: translate(30%, -30%);
          transform: translate(30%, -30%);
}

.btn-icon.rounded-circle .badge-md.badge-pos--top-left {
  -webkit-transform: translate(-30%, -30%);
          transform: translate(-30%, -30%);
}

.btn-icon.rounded-circle .badge-md.badge-pos--bottom-left {
  -webkit-transform: translate(-30%, 30%);
          transform: translate(-30%, 30%);
}

.btn-icon.rounded-circle .badge-md.badge-pos--bottom-right {
  -webkit-transform: translate(30%, 30%);
          transform: translate(30%, 30%);
}

/* Small Size Icon */
.btn-sm.rounded-circle .badge-xs.badge-pos:not([class*="--top-left"]):not([class*="--bottom-left"]):not([class*="--bottom-right"]), .btn-group-sm > .rounded-circle.btn .badge-xs.badge-pos:not([class*="--top-left"]):not([class*="--bottom-left"]):not([class*="--bottom-right"]) {
  -webkit-transform: translate(25%, -25%);
          transform: translate(25%, -25%);
}

.btn-sm.rounded-circle .badge-xs.badge-pos--top-left, .btn-group-sm > .rounded-circle.btn .badge-xs.badge-pos--top-left {
  -webkit-transform: translate(-25%, -25%);
          transform: translate(-25%, -25%);
}

.btn-sm.rounded-circle .badge-xs.badge-pos--bottom-left, .btn-group-sm > .rounded-circle.btn .badge-xs.badge-pos--bottom-left {
  -webkit-transform: translate(-25%, 25%);
          transform: translate(-25%, 25%);
}

.btn-sm.rounded-circle .badge-xs.badge-pos--bottom-right, .btn-group-sm > .rounded-circle.btn .badge-xs.badge-pos--bottom-right {
  -webkit-transform: translate(25%, 25%);
          transform: translate(25%, 25%);
}

.btn-sm.rounded-circle .badge-sm.badge-pos:not([class*="--top-left"]):not([class*="--bottom-left"]):not([class*="--bottom-right"]), .btn-group-sm > .rounded-circle.btn .badge-sm.badge-pos:not([class*="--top-left"]):not([class*="--bottom-left"]):not([class*="--bottom-right"]),
.btn-sm.rounded-circle .badge-md.badge-pos:not([class*="--top-left"]):not([class*="--bottom-left"]):not([class*="--bottom-right"]),
.btn-group-sm > .rounded-circle.btn .badge-md.badge-pos:not([class*="--top-left"]):not([class*="--bottom-left"]):not([class*="--bottom-right"]) {
  -webkit-transform: translate(35%, -35%);
          transform: translate(35%, -35%);
}

.btn-sm.rounded-circle .badge-sm.badge-pos--top-left, .btn-group-sm > .rounded-circle.btn .badge-sm.badge-pos--top-left,
.btn-sm.rounded-circle .badge-md.badge-pos--top-left,
.btn-group-sm > .rounded-circle.btn .badge-md.badge-pos--top-left {
  -webkit-transform: translate(-35%, -35%);
          transform: translate(-35%, -35%);
}

.btn-sm.rounded-circle .badge-sm.badge-pos--bottom-left, .btn-group-sm > .rounded-circle.btn .badge-sm.badge-pos--bottom-left,
.btn-sm.rounded-circle .badge-md.badge-pos--bottom-left,
.btn-group-sm > .rounded-circle.btn .badge-md.badge-pos--bottom-left {
  -webkit-transform: translate(-35%, 35%);
          transform: translate(-35%, 35%);
}

.btn-sm.rounded-circle .badge-sm.badge-pos--bottom-right, .btn-group-sm > .rounded-circle.btn .badge-sm.badge-pos--bottom-right,
.btn-sm.rounded-circle .badge-md.badge-pos--bottom-right,
.btn-group-sm > .rounded-circle.btn .badge-md.badge-pos--bottom-right {
  -webkit-transform: translate(35%, 35%);
          transform: translate(35%, 35%);
}

/* Large Size Icon */
.btn-lg.rounded-circle .badge-xs.badge-pos:not([class*="--top-left"]):not([class*="--bottom-left"]):not([class*="--bottom-right"]), .btn-group-lg > .rounded-circle.btn .badge-xs.badge-pos:not([class*="--top-left"]):not([class*="--bottom-left"]):not([class*="--bottom-right"]) {
  -webkit-transform: translate(-35%, 35%);
          transform: translate(-35%, 35%);
}

.btn-lg.rounded-circle .badge-xs.badge-pos--top-left, .btn-group-lg > .rounded-circle.btn .badge-xs.badge-pos--top-left {
  -webkit-transform: translate(35%, 35%);
          transform: translate(35%, 35%);
}

.btn-lg.rounded-circle .badge-xs.badge-pos--bottom-left, .btn-group-lg > .rounded-circle.btn .badge-xs.badge-pos--bottom-left {
  -webkit-transform: translate(35%, -35%);
          transform: translate(35%, -35%);
}

.btn-lg.rounded-circle .badge-xs.badge-pos--bottom-right, .btn-group-lg > .rounded-circle.btn .badge-xs.badge-pos--bottom-right {
  -webkit-transform: translate(-35%, -35%);
          transform: translate(-35%, -35%);
}

.btn-lg.rounded-circle .badge-sm.badge-pos:not([class*="--top-left"]):not([class*="--bottom-left"]):not([class*="--bottom-right"]), .btn-group-lg > .rounded-circle.btn .badge-sm.badge-pos:not([class*="--top-left"]):not([class*="--bottom-left"]):not([class*="--bottom-right"]) {
  -webkit-transform: translate(-15%, 15%);
          transform: translate(-15%, 15%);
}

.btn-lg.rounded-circle .badge-sm.badge-pos--top-left, .btn-group-lg > .rounded-circle.btn .badge-sm.badge-pos--top-left {
  -webkit-transform: translate(15%, 15%);
          transform: translate(15%, 15%);
}

.btn-lg.rounded-circle .badge-sm.badge-pos--bottom-left, .btn-group-lg > .rounded-circle.btn .badge-sm.badge-pos--bottom-left {
  -webkit-transform: translate(15%, -15%);
          transform: translate(15%, -15%);
}

.btn-lg.rounded-circle .badge-sm.badge-pos--bottom-right, .btn-group-lg > .rounded-circle.btn .badge-sm.badge-pos--bottom-right {
  -webkit-transform: translate(-15%, -15%);
          transform: translate(-15%, -15%);
}

.btn-lg.rounded-circle .badge-md.badge-pos:not([class*="--top-left"]):not([class*="--bottom-left"]):not([class*="--bottom-right"]), .btn-group-lg > .rounded-circle.btn .badge-md.badge-pos:not([class*="--top-left"]):not([class*="--bottom-left"]):not([class*="--bottom-right"]) {
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
}

.btn-lg.rounded-circle .badge-md.badge-pos--top-left, .btn-group-lg > .rounded-circle.btn .badge-md.badge-pos--top-left {
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
}

.btn-lg.rounded-circle .badge-md.badge-pos--bottom-left, .btn-group-lg > .rounded-circle.btn .badge-md.badge-pos--bottom-left {
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
}

.btn-lg.rounded-circle .badge-md.badge-pos--bottom-right, .btn-group-lg > .rounded-circle.btn .badge-md.badge-pos--bottom-right {
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
}

/*------------------------------------
  Buttons Bootstrap Style
------------------------------------*/
/* facebook */
.btn-facebook {
  color: #fff;
  background-color: #3b5998;
  border-color: #3b5998;
}

.btn-facebook:hover {
  color: #fff;
  background-color: #30497c;
  border-color: #2d4373;
}

.btn-facebook:focus, .btn-facebook.focus {
  box-shadow: 0 0 0 0.2rem rgba(88, 114, 167, 0.5);
}

.btn-facebook.disabled, .btn-facebook:disabled {
  color: #fff;
  background-color: #3b5998;
  border-color: #3b5998;
}

.btn-facebook:not(:disabled):not(.disabled):active, .btn-facebook:not(:disabled):not(.disabled).active,
.show > .btn-facebook.dropdown-toggle {
  color: #fff;
  background-color: #2d4373;
  border-color: #293e6a;
}

.btn-facebook:not(:disabled):not(.disabled):active:focus, .btn-facebook:not(:disabled):not(.disabled).active:focus,
.show > .btn-facebook.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(88, 114, 167, 0.5);
}

/* google */
.btn-google {
  color: #fff;
  background-color: #d14130;
  border-color: #d14130;
}

.btn-google:hover {
  color: #fff;
  background-color: #b33628;
  border-color: #a93325;
}

.btn-google:focus, .btn-google.focus {
  box-shadow: 0 0 0 0.2rem rgba(216, 94, 79, 0.5);
}

.btn-google.disabled, .btn-google:disabled {
  color: #fff;
  background-color: #d14130;
  border-color: #d14130;
}

.btn-google:not(:disabled):not(.disabled):active, .btn-google:not(:disabled):not(.disabled).active,
.show > .btn-google.dropdown-toggle {
  color: #fff;
  background-color: #a93325;
  border-color: #9e3023;
}

.btn-google:not(:disabled):not(.disabled):active:focus, .btn-google:not(:disabled):not(.disabled).active:focus,
.show > .btn-google.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(216, 94, 79, 0.5);
}

/* twitter */
.btn-twitter {
  color: #fff;
  background-color: #1da1f2;
  border-color: #1da1f2;
}

.btn-twitter:hover {
  color: #fff;
  background-color: #0d8ddc;
  border-color: #0c85d0;
}

.btn-twitter:focus, .btn-twitter.focus {
  box-shadow: 0 0 0 0.2rem rgba(63, 175, 244, 0.5);
}

.btn-twitter.disabled, .btn-twitter:disabled {
  color: #fff;
  background-color: #1da1f2;
  border-color: #1da1f2;
}

.btn-twitter:not(:disabled):not(.disabled):active, .btn-twitter:not(:disabled):not(.disabled).active,
.show > .btn-twitter.dropdown-toggle {
  color: #fff;
  background-color: #0c85d0;
  border-color: #0b7ec4;
}

.btn-twitter:not(:disabled):not(.disabled):active:focus, .btn-twitter:not(:disabled):not(.disabled).active:focus,
.show > .btn-twitter.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(63, 175, 244, 0.5);
}

/* instagram */
.btn-instagram {
  color: #fff;
  background-color: #3f729b;
  border-color: #3f729b;
}

.btn-instagram:hover {
  color: #fff;
  background-color: #345e80;
  border-color: #305777;
}

.btn-instagram:focus, .btn-instagram.focus {
  box-shadow: 0 0 0 0.2rem rgba(92, 135, 170, 0.5);
}

.btn-instagram.disabled, .btn-instagram:disabled {
  color: #fff;
  background-color: #3f729b;
  border-color: #3f729b;
}

.btn-instagram:not(:disabled):not(.disabled):active, .btn-instagram:not(:disabled):not(.disabled).active,
.show > .btn-instagram.dropdown-toggle {
  color: #fff;
  background-color: #305777;
  border-color: #2d516e;
}

.btn-instagram:not(:disabled):not(.disabled):active:focus, .btn-instagram:not(:disabled):not(.disabled).active:focus,
.show > .btn-instagram.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(92, 135, 170, 0.5);
}

/* github */
.btn-github {
  color: #fff;
  background-color: #24292e;
  border-color: #24292e;
}

.btn-github:hover {
  color: #fff;
  background-color: #131619;
  border-color: #0e1011;
}

.btn-github:focus, .btn-github.focus {
  box-shadow: 0 0 0 0.2rem rgba(69, 73, 77, 0.5);
}

.btn-github.disabled, .btn-github:disabled {
  color: #fff;
  background-color: #24292e;
  border-color: #24292e;
}

.btn-github:not(:disabled):not(.disabled):active, .btn-github:not(:disabled):not(.disabled).active,
.show > .btn-github.dropdown-toggle {
  color: #fff;
  background-color: #0e1011;
  border-color: #08090a;
}

.btn-github:not(:disabled):not(.disabled):active:focus, .btn-github:not(:disabled):not(.disabled).active:focus,
.show > .btn-github.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(69, 73, 77, 0.5);
}

/* gray */
.btn-gray {
  color: #1e2022;
  background-color: #f8fafd;
  border-color: #f8fafd;
}

.btn-gray:hover {
  color: #1e2022;
  background-color: #dae5f5;
  border-color: #d0def2;
}

.btn-gray:focus, .btn-gray.focus {
  box-shadow: 0 0 0 0.2rem rgba(215, 217, 220, 0.5);
}

.btn-gray.disabled, .btn-gray:disabled {
  color: #1e2022;
  background-color: #f8fafd;
  border-color: #f8fafd;
}

.btn-gray:not(:disabled):not(.disabled):active, .btn-gray:not(:disabled):not(.disabled).active,
.show > .btn-gray.dropdown-toggle {
  color: #1e2022;
  background-color: #d0def2;
  border-color: #c6d7ef;
}

.btn-gray:not(:disabled):not(.disabled):active:focus, .btn-gray:not(:disabled):not(.disabled).active:focus,
.show > .btn-gray.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(215, 217, 220, 0.5);
}

/*------------------------------------
  Custom Buttons
------------------------------------*/
/* primary button :hover, :focus, :active effects */
.btn-primary[href]:hover, .btn-primary[href]:focus, .btn-primary[href]:active, .btn-primary[type]:hover, .btn-primary[type]:focus, .btn-primary[type]:active {
  box-shadow: 0 4px 11px rgba(55, 125, 255, 0.35);
}

.btn-primary:not(label.btn), .btn-primary:not(label.btn):not([href]):not(:disabled):not(.disabled), .btn-primary:not([href]), .btn-primary:not([href]):not([href]):not(:disabled):not(.disabled) {
  background-color: #377dff;
  border-color: #377dff;
}

.btn-primary:hover {
  background-color: #377dff;
  border-color: #377dff;
}

/* secondary button :hover, :focus, :active effects */
.btn-secondary[href]:hover, .btn-secondary[href]:focus, .btn-secondary[href]:active, .btn-secondary[type]:hover, .btn-secondary[type]:focus, .btn-secondary[type]:active {
  box-shadow: 0 4px 11px rgba(119, 131, 143, 0.35);
}

.btn-secondary:not(label.btn), .btn-secondary:not(label.btn):not([href]):not(:disabled):not(.disabled), .btn-secondary:not([href]), .btn-secondary:not([href]):not([href]):not(:disabled):not(.disabled) {
  background-color: #77838f;
  border-color: #77838f;
}

.btn-secondary:hover {
  background-color: #77838f;
  border-color: #77838f;
}

/* success button :hover, :focus, :active effects */
.btn-success[href]:hover, .btn-success[href]:focus, .btn-success[href]:active, .btn-success[type]:hover, .btn-success[type]:focus, .btn-success[type]:active {
  box-shadow: 0 4px 11px rgba(0, 201, 167, 0.35);
}

.btn-success:not(label.btn), .btn-success:not(label.btn):not([href]):not(:disabled):not(.disabled), .btn-success:not([href]), .btn-success:not([href]):not([href]):not(:disabled):not(.disabled) {
  background-color: #00c9a7;
  border-color: #00c9a7;
}

.btn-success:hover {
  background-color: #00c9a7;
  border-color: #00c9a7;
}

/* info button :hover, :focus, :active effects */
.btn-info[href]:hover, .btn-info[href]:focus, .btn-info[href]:active, .btn-info[type]:hover, .btn-info[type]:focus, .btn-info[type]:active {
  box-shadow: 0 4px 11px rgba(0, 223, 252, 0.35);
}

.btn-info:not(label.btn), .btn-info:not(label.btn):not([href]):not(:disabled):not(.disabled), .btn-info:not([href]), .btn-info:not([href]):not([href]):not(:disabled):not(.disabled) {
  background-color: #00dffc;
  border-color: #00dffc;
}

.btn-info:hover {
  background-color: #00dffc;
  border-color: #00dffc;
}

/* warning button :hover, :focus, :active effects */
.btn-warning[href]:hover, .btn-warning[href]:focus, .btn-warning[href]:active, .btn-warning[type]:hover, .btn-warning[type]:focus, .btn-warning[type]:active {
  box-shadow: 0 4px 11px rgba(255, 193, 7, 0.35);
}

.btn-warning:not(label.btn), .btn-warning:not(label.btn):not([href]):not(:disabled):not(.disabled), .btn-warning:not([href]), .btn-warning:not([href]):not([href]):not(:disabled):not(.disabled) {
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-warning:hover {
  background-color: #ffc107;
  border-color: #ffc107;
}

/* danger button :hover, :focus, :active effects */
.btn-danger[href]:hover, .btn-danger[href]:focus, .btn-danger[href]:active, .btn-danger[type]:hover, .btn-danger[type]:focus, .btn-danger[type]:active {
  box-shadow: 0 4px 11px rgba(222, 68, 55, 0.35);
}

.btn-danger:not(label.btn), .btn-danger:not(label.btn):not([href]):not(:disabled):not(.disabled), .btn-danger:not([href]), .btn-danger:not([href]):not([href]):not(:disabled):not(.disabled) {
  background-color: #de4437;
  border-color: #de4437;
}

.btn-danger:hover {
  background-color: #de4437;
  border-color: #de4437;
}

/* light button :hover, :focus, :active effects */
.btn-light[href]:hover, .btn-light[href]:focus, .btn-light[href]:active, .btn-light[type]:hover, .btn-light[type]:focus, .btn-light[type]:active {
  box-shadow: 0 4px 11px rgba(248, 249, 250, 0.35);
}

.btn-light:not(label.btn), .btn-light:not(label.btn):not([href]):not(:disabled):not(.disabled), .btn-light:not([href]), .btn-light:not([href]):not([href]):not(:disabled):not(.disabled) {
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-light:hover {
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

/* dark button :hover, :focus, :active effects */
.btn-dark[href]:hover, .btn-dark[href]:focus, .btn-dark[href]:active, .btn-dark[type]:hover, .btn-dark[type]:focus, .btn-dark[type]:active {
  box-shadow: 0 4px 11px rgba(30, 32, 34, 0.35);
}

.btn-dark:not(label.btn), .btn-dark:not(label.btn):not([href]):not(:disabled):not(.disabled), .btn-dark:not([href]), .btn-dark:not([href]):not([href]):not(:disabled):not(.disabled) {
  background-color: #1e2022;
  border-color: #1e2022;
}

.btn-dark:hover {
  background-color: #1e2022;
  border-color: #1e2022;
}

/* white button :hover, :focus, :active effects */
.btn-white[href]:hover, .btn-white[href]:focus, .btn-white[href]:active, .btn-white[type]:hover, .btn-white[type]:focus, .btn-white[type]:active {
  box-shadow: 0 4px 11px rgba(255, 255, 255, 0.35);
}

.btn-white:not(label.btn), .btn-white:not(label.btn):not([href]):not(:disabled):not(.disabled), .btn-white:not([href]), .btn-white:not([href]):not([href]):not(:disabled):not(.disabled) {
  background-color: #fff;
  border-color: #fff;
}

.btn-white:hover {
  background-color: #fff;
  border-color: #fff;
}

/* indigo button :hover, :focus, :active effects */
.btn-indigo[href]:hover, .btn-indigo[href]:focus, .btn-indigo[href]:active, .btn-indigo[type]:hover, .btn-indigo[type]:focus, .btn-indigo[type]:active {
  box-shadow: 0 4px 11px rgba(45, 21, 130, 0.35);
}

.btn-indigo:not(label.btn), .btn-indigo:not(label.btn):not([href]):not(:disabled):not(.disabled), .btn-indigo:not([href]), .btn-indigo:not([href]):not([href]):not(:disabled):not(.disabled) {
  background-color: #2d1582;
  border-color: #2d1582;
}

.btn-indigo:hover {
  background-color: #2d1582;
  border-color: #2d1582;
}

/* facebook button :hover, :focus, :active effects */
.btn-facebook[href]:hover, .btn-facebook[href]:focus, .btn-facebook[href]:active, .btn-facebook[type]:hover, .btn-facebook[type]:focus, .btn-facebook[type]:active {
  box-shadow: 0 4px 11px rgba(59, 89, 152, 0.35);
}

.btn-facebook:not(label.btn), .btn-facebook:not(label.btn):not([href]):not(:disabled):not(.disabled), .btn-facebook:not([href]), .btn-facebook:not([href]):not([href]):not(:disabled):not(.disabled) {
  background-color: #3b5998;
  border-color: #3b5998;
}

.btn-facebook:hover {
  background-color: #3b5998;
  border-color: #3b5998;
}

/* google button :hover, :focus, :active effects */
.btn-google[href]:hover, .btn-google[href]:focus, .btn-google[href]:active, .btn-google[type]:hover, .btn-google[type]:focus, .btn-google[type]:active {
  box-shadow: 0 4px 11px rgba(209, 65, 48, 0.35);
}

.btn-google:not(label.btn), .btn-google:not(label.btn):not([href]):not(:disabled):not(.disabled), .btn-google:not([href]), .btn-google:not([href]):not([href]):not(:disabled):not(.disabled) {
  background-color: #d14130;
  border-color: #d14130;
}

.btn-google:hover {
  background-color: #d14130;
  border-color: #d14130;
}

/* twitter button :hover, :focus, :active effects */
.btn-twitter[href]:hover, .btn-twitter[href]:focus, .btn-twitter[href]:active, .btn-twitter[type]:hover, .btn-twitter[type]:focus, .btn-twitter[type]:active {
  box-shadow: 0 4px 11px rgba(29, 161, 242, 0.35);
}

.btn-twitter:not(label.btn), .btn-twitter:not(label.btn):not([href]):not(:disabled):not(.disabled), .btn-twitter:not([href]), .btn-twitter:not([href]):not([href]):not(:disabled):not(.disabled) {
  background-color: #1da1f2;
  border-color: #1da1f2;
}

.btn-twitter:hover {
  background-color: #1da1f2;
  border-color: #1da1f2;
}

/* instagram button :hover, :focus, :active effects */
.btn-instagram[href]:hover, .btn-instagram[href]:focus, .btn-instagram[href]:active, .btn-instagram[type]:hover, .btn-instagram[type]:focus, .btn-instagram[type]:active {
  box-shadow: 0 4px 11px rgba(63, 114, 155, 0.35);
}

.btn-instagram:not(label.btn), .btn-instagram:not(label.btn):not([href]):not(:disabled):not(.disabled), .btn-instagram:not([href]), .btn-instagram:not([href]):not([href]):not(:disabled):not(.disabled) {
  background-color: #3f729b;
  border-color: #3f729b;
}

.btn-instagram:hover {
  background-color: #3f729b;
  border-color: #3f729b;
}

/* github button :hover, :focus, :active effects */
.btn-github[href]:hover, .btn-github[href]:focus, .btn-github[href]:active, .btn-github[type]:hover, .btn-github[type]:focus, .btn-github[type]:active {
  box-shadow: 0 4px 11px rgba(36, 41, 46, 0.35);
}

.btn-github:not(label.btn), .btn-github:not(label.btn):not([href]):not(:disabled):not(.disabled), .btn-github:not([href]), .btn-github:not([href]):not([href]):not(:disabled):not(.disabled) {
  background-color: #24292e;
  border-color: #24292e;
}

.btn-github:hover {
  background-color: #24292e;
  border-color: #24292e;
}

/* gray button :hover, :focus, :active effects */
.btn-gray[href]:hover, .btn-gray[href]:focus, .btn-gray[href]:active, .btn-gray[type]:hover, .btn-gray[type]:focus, .btn-gray[type]:active {
  box-shadow: 0 4px 11px rgba(248, 250, 253, 0.35);
}

.btn-gray:not(label.btn), .btn-gray:not(label.btn):not([href]):not(:disabled):not(.disabled), .btn-gray:not([href]), .btn-gray:not([href]):not([href]):not(:disabled):not(.disabled) {
  background-color: #f8fafd;
  border-color: #f8fafd;
}

.btn-gray:hover {
  background-color: #f8fafd;
  border-color: #f8fafd;
}

/*------------------------------------
  Custom Button Toggle
------------------------------------*/
.btn-custom-toggle-primary {
  color: #8c98a4;
  border-color: #d5dae2;
}

.btn-custom-toggle-primary:hover {
  color: #377dff;
  background-color: transparent;
  border-color: #377dff;
}

.btn-custom-toggle-primary:not(:disabled):not(.disabled):active, .btn-custom-toggle-primary:not(:disabled):not(.disabled).active, .btn-custom-toggle-primary:not(:disabled):not(.disabled):active, .btn-custom-toggle-primary:not(:disabled):not(.disabled).active {
  color: #fff;
  background-color: #377dff;
  border-color: #377dff;
}

.btn-custom-toggle-white:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
}

.btn-custom-toggle-white:not(:disabled):not(.disabled):active, .btn-custom-toggle-white:not(:disabled):not(.disabled).active, .btn-custom-toggle-white:not(:disabled):not(.disabled):active, .btn-custom-toggle-white:not(:disabled):not(.disabled).active {
  color: #377dff;
}

/*------------------------------------
  Air Button Styles
------------------------------------*/
/* primary air */
.btn-soft-primary {
  color: #377dff;
  background: rgba(55, 125, 255, 0.1);
  border-color: transparent;
}

.btn-soft-primary[href]:hover, .btn-soft-primary[href]:focus, .btn-soft-primary[href]:active, .btn-soft-primary[href].active, .btn-soft-primary[type]:hover, .btn-soft-primary[type]:focus, .btn-soft-primary[type]:active, .btn-soft-primary[type].active {
  color: #fff;
  background: #377dff;
  box-shadow: 0 4px 11px rgba(55, 125, 255, 0.35);
}

.btn-soft-primary[href].disabled, .btn-soft-primary[href]:disabled, .btn-soft-primary[type].disabled, .btn-soft-primary[type]:disabled {
  color: #377dff;
  background-color: rgba(55, 125, 255, 0.1);
  box-shadow: none;
}

.btn-soft-primary[href]:not(:disabled):not(.disabled):active, .btn-soft-primary[href]:not(:disabled):not(.disabled).active,
.show > .btn-soft-primary[href].dropdown-toggle, .btn-soft-primary[type]:not(:disabled):not(.disabled):active, .btn-soft-primary[type]:not(:disabled):not(.disabled).active,
.show > .btn-soft-primary[type].dropdown-toggle {
  color: #fff;
  background-color: #377dff;
}

.btn.btn-soft-primary {
  color: #377dff;
}

/* secondary air */
.btn-soft-secondary {
  color: #77838f;
  background: rgba(119, 131, 143, 0.1);
  border-color: transparent;
}

.btn-soft-secondary[href]:hover, .btn-soft-secondary[href]:focus, .btn-soft-secondary[href]:active, .btn-soft-secondary[href].active, .btn-soft-secondary[type]:hover, .btn-soft-secondary[type]:focus, .btn-soft-secondary[type]:active, .btn-soft-secondary[type].active {
  color: #fff;
  background: #77838f;
  box-shadow: 0 4px 11px rgba(119, 131, 143, 0.35);
}

.btn-soft-secondary[href].disabled, .btn-soft-secondary[href]:disabled, .btn-soft-secondary[type].disabled, .btn-soft-secondary[type]:disabled {
  color: #77838f;
  background-color: rgba(119, 131, 143, 0.1);
  box-shadow: none;
}

.btn-soft-secondary[href]:not(:disabled):not(.disabled):active, .btn-soft-secondary[href]:not(:disabled):not(.disabled).active,
.show > .btn-soft-secondary[href].dropdown-toggle, .btn-soft-secondary[type]:not(:disabled):not(.disabled):active, .btn-soft-secondary[type]:not(:disabled):not(.disabled).active,
.show > .btn-soft-secondary[type].dropdown-toggle {
  color: #fff;
  background-color: #77838f;
}

.btn.btn-soft-secondary {
  color: #77838f;
}

/* success air */
.btn-soft-success {
  color: #00c9a7;
  background: rgba(0, 201, 167, 0.1);
  border-color: transparent;
}

.btn-soft-success[href]:hover, .btn-soft-success[href]:focus, .btn-soft-success[href]:active, .btn-soft-success[href].active, .btn-soft-success[type]:hover, .btn-soft-success[type]:focus, .btn-soft-success[type]:active, .btn-soft-success[type].active {
  color: #fff;
  background: #00c9a7;
  box-shadow: 0 4px 11px rgba(0, 201, 167, 0.35);
}

.btn-soft-success[href].disabled, .btn-soft-success[href]:disabled, .btn-soft-success[type].disabled, .btn-soft-success[type]:disabled {
  color: #00c9a7;
  background-color: rgba(0, 201, 167, 0.1);
  box-shadow: none;
}

.btn-soft-success[href]:not(:disabled):not(.disabled):active, .btn-soft-success[href]:not(:disabled):not(.disabled).active,
.show > .btn-soft-success[href].dropdown-toggle, .btn-soft-success[type]:not(:disabled):not(.disabled):active, .btn-soft-success[type]:not(:disabled):not(.disabled).active,
.show > .btn-soft-success[type].dropdown-toggle {
  color: #fff;
  background-color: #00c9a7;
}

.btn.btn-soft-success {
  color: #00c9a7;
}

/* info air */
.btn-soft-info {
  color: #00dffc;
  background: rgba(0, 223, 252, 0.1);
  border-color: transparent;
}

.btn-soft-info[href]:hover, .btn-soft-info[href]:focus, .btn-soft-info[href]:active, .btn-soft-info[href].active, .btn-soft-info[type]:hover, .btn-soft-info[type]:focus, .btn-soft-info[type]:active, .btn-soft-info[type].active {
  color: #1e2022;
  background: #00dffc;
  box-shadow: 0 4px 11px rgba(0, 223, 252, 0.35);
}

.btn-soft-info[href].disabled, .btn-soft-info[href]:disabled, .btn-soft-info[type].disabled, .btn-soft-info[type]:disabled {
  color: #00dffc;
  background-color: rgba(0, 223, 252, 0.1);
  box-shadow: none;
}

.btn-soft-info[href]:not(:disabled):not(.disabled):active, .btn-soft-info[href]:not(:disabled):not(.disabled).active,
.show > .btn-soft-info[href].dropdown-toggle, .btn-soft-info[type]:not(:disabled):not(.disabled):active, .btn-soft-info[type]:not(:disabled):not(.disabled).active,
.show > .btn-soft-info[type].dropdown-toggle {
  color: #1e2022;
  background-color: #00dffc;
}

.btn.btn-soft-info {
  color: #00dffc;
}

/* warning air */
.btn-soft-warning {
  color: #ffc107;
  background: rgba(255, 193, 7, 0.1);
  border-color: transparent;
}

.btn-soft-warning[href]:hover, .btn-soft-warning[href]:focus, .btn-soft-warning[href]:active, .btn-soft-warning[href].active, .btn-soft-warning[type]:hover, .btn-soft-warning[type]:focus, .btn-soft-warning[type]:active, .btn-soft-warning[type].active {
  color: #1e2022;
  background: #ffc107;
  box-shadow: 0 4px 11px rgba(255, 193, 7, 0.35);
}

.btn-soft-warning[href].disabled, .btn-soft-warning[href]:disabled, .btn-soft-warning[type].disabled, .btn-soft-warning[type]:disabled {
  color: #ffc107;
  background-color: rgba(255, 193, 7, 0.1);
  box-shadow: none;
}

.btn-soft-warning[href]:not(:disabled):not(.disabled):active, .btn-soft-warning[href]:not(:disabled):not(.disabled).active,
.show > .btn-soft-warning[href].dropdown-toggle, .btn-soft-warning[type]:not(:disabled):not(.disabled):active, .btn-soft-warning[type]:not(:disabled):not(.disabled).active,
.show > .btn-soft-warning[type].dropdown-toggle {
  color: #1e2022;
  background-color: #ffc107;
}

.btn.btn-soft-warning {
  color: #ffc107;
}

/* danger air */
.btn-soft-danger {
  color: #de4437;
  background: rgba(222, 68, 55, 0.1);
  border-color: transparent;
}

.btn-soft-danger[href]:hover, .btn-soft-danger[href]:focus, .btn-soft-danger[href]:active, .btn-soft-danger[href].active, .btn-soft-danger[type]:hover, .btn-soft-danger[type]:focus, .btn-soft-danger[type]:active, .btn-soft-danger[type].active {
  color: #fff;
  background: #de4437;
  box-shadow: 0 4px 11px rgba(222, 68, 55, 0.35);
}

.btn-soft-danger[href].disabled, .btn-soft-danger[href]:disabled, .btn-soft-danger[type].disabled, .btn-soft-danger[type]:disabled {
  color: #de4437;
  background-color: rgba(222, 68, 55, 0.1);
  box-shadow: none;
}

.btn-soft-danger[href]:not(:disabled):not(.disabled):active, .btn-soft-danger[href]:not(:disabled):not(.disabled).active,
.show > .btn-soft-danger[href].dropdown-toggle, .btn-soft-danger[type]:not(:disabled):not(.disabled):active, .btn-soft-danger[type]:not(:disabled):not(.disabled).active,
.show > .btn-soft-danger[type].dropdown-toggle {
  color: #fff;
  background-color: #de4437;
}

.btn.btn-soft-danger {
  color: #de4437;
}

/* light air */
.btn-soft-light {
  color: #f8f9fa;
  background: rgba(248, 249, 250, 0.1);
  border-color: transparent;
}

.btn-soft-light[href]:hover, .btn-soft-light[href]:focus, .btn-soft-light[href]:active, .btn-soft-light[href].active, .btn-soft-light[type]:hover, .btn-soft-light[type]:focus, .btn-soft-light[type]:active, .btn-soft-light[type].active {
  color: #1e2022;
  background: #f8f9fa;
  box-shadow: 0 4px 11px rgba(248, 249, 250, 0.35);
}

.btn-soft-light[href].disabled, .btn-soft-light[href]:disabled, .btn-soft-light[type].disabled, .btn-soft-light[type]:disabled {
  color: #f8f9fa;
  background-color: rgba(248, 249, 250, 0.1);
  box-shadow: none;
}

.btn-soft-light[href]:not(:disabled):not(.disabled):active, .btn-soft-light[href]:not(:disabled):not(.disabled).active,
.show > .btn-soft-light[href].dropdown-toggle, .btn-soft-light[type]:not(:disabled):not(.disabled):active, .btn-soft-light[type]:not(:disabled):not(.disabled).active,
.show > .btn-soft-light[type].dropdown-toggle {
  color: #1e2022;
  background-color: #f8f9fa;
}

.btn.btn-soft-light {
  color: #f8f9fa;
}

/* dark air */
.btn-soft-dark {
  color: #1e2022;
  background: rgba(30, 32, 34, 0.1);
  border-color: transparent;
}

.btn-soft-dark[href]:hover, .btn-soft-dark[href]:focus, .btn-soft-dark[href]:active, .btn-soft-dark[href].active, .btn-soft-dark[type]:hover, .btn-soft-dark[type]:focus, .btn-soft-dark[type]:active, .btn-soft-dark[type].active {
  color: #fff;
  background: #1e2022;
  box-shadow: 0 4px 11px rgba(30, 32, 34, 0.35);
}

.btn-soft-dark[href].disabled, .btn-soft-dark[href]:disabled, .btn-soft-dark[type].disabled, .btn-soft-dark[type]:disabled {
  color: #1e2022;
  background-color: rgba(30, 32, 34, 0.1);
  box-shadow: none;
}

.btn-soft-dark[href]:not(:disabled):not(.disabled):active, .btn-soft-dark[href]:not(:disabled):not(.disabled).active,
.show > .btn-soft-dark[href].dropdown-toggle, .btn-soft-dark[type]:not(:disabled):not(.disabled):active, .btn-soft-dark[type]:not(:disabled):not(.disabled).active,
.show > .btn-soft-dark[type].dropdown-toggle {
  color: #fff;
  background-color: #1e2022;
}

.btn.btn-soft-dark {
  color: #1e2022;
}

/* white air */
.btn-soft-white {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: transparent;
}

.btn-soft-white[href]:hover, .btn-soft-white[href]:focus, .btn-soft-white[href]:active, .btn-soft-white[href].active, .btn-soft-white[type]:hover, .btn-soft-white[type]:focus, .btn-soft-white[type]:active, .btn-soft-white[type].active {
  color: #1e2022;
  background: #fff;
  box-shadow: 0 4px 11px rgba(255, 255, 255, 0.35);
}

.btn-soft-white[href].disabled, .btn-soft-white[href]:disabled, .btn-soft-white[type].disabled, .btn-soft-white[type]:disabled {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.btn-soft-white[href]:not(:disabled):not(.disabled):active, .btn-soft-white[href]:not(:disabled):not(.disabled).active,
.show > .btn-soft-white[href].dropdown-toggle, .btn-soft-white[type]:not(:disabled):not(.disabled):active, .btn-soft-white[type]:not(:disabled):not(.disabled).active,
.show > .btn-soft-white[type].dropdown-toggle {
  color: #1e2022;
  background-color: #fff;
}

.btn.btn-soft-white {
  color: #fff;
}

/* indigo air */
.btn-soft-indigo {
  color: #2d1582;
  background: rgba(45, 21, 130, 0.1);
  border-color: transparent;
}

.btn-soft-indigo[href]:hover, .btn-soft-indigo[href]:focus, .btn-soft-indigo[href]:active, .btn-soft-indigo[href].active, .btn-soft-indigo[type]:hover, .btn-soft-indigo[type]:focus, .btn-soft-indigo[type]:active, .btn-soft-indigo[type].active {
  color: #fff;
  background: #2d1582;
  box-shadow: 0 4px 11px rgba(45, 21, 130, 0.35);
}

.btn-soft-indigo[href].disabled, .btn-soft-indigo[href]:disabled, .btn-soft-indigo[type].disabled, .btn-soft-indigo[type]:disabled {
  color: #2d1582;
  background-color: rgba(45, 21, 130, 0.1);
  box-shadow: none;
}

.btn-soft-indigo[href]:not(:disabled):not(.disabled):active, .btn-soft-indigo[href]:not(:disabled):not(.disabled).active,
.show > .btn-soft-indigo[href].dropdown-toggle, .btn-soft-indigo[type]:not(:disabled):not(.disabled):active, .btn-soft-indigo[type]:not(:disabled):not(.disabled).active,
.show > .btn-soft-indigo[type].dropdown-toggle {
  color: #fff;
  background-color: #2d1582;
}

.btn.btn-soft-indigo {
  color: #2d1582;
}

/* facebook air */
.btn-soft-facebook {
  color: #3b5998;
  background: rgba(59, 89, 152, 0.1);
  border-color: transparent;
}

.btn-soft-facebook[href]:hover, .btn-soft-facebook[href]:focus, .btn-soft-facebook[href]:active, .btn-soft-facebook[href].active, .btn-soft-facebook[type]:hover, .btn-soft-facebook[type]:focus, .btn-soft-facebook[type]:active, .btn-soft-facebook[type].active {
  color: #fff;
  background: #3b5998;
  box-shadow: 0 4px 11px rgba(59, 89, 152, 0.35);
}

.btn-soft-facebook[href].disabled, .btn-soft-facebook[href]:disabled, .btn-soft-facebook[type].disabled, .btn-soft-facebook[type]:disabled {
  color: #3b5998;
  background-color: rgba(59, 89, 152, 0.1);
  box-shadow: none;
}

.btn-soft-facebook[href]:not(:disabled):not(.disabled):active, .btn-soft-facebook[href]:not(:disabled):not(.disabled).active,
.show > .btn-soft-facebook[href].dropdown-toggle, .btn-soft-facebook[type]:not(:disabled):not(.disabled):active, .btn-soft-facebook[type]:not(:disabled):not(.disabled).active,
.show > .btn-soft-facebook[type].dropdown-toggle {
  color: #fff;
  background-color: #3b5998;
}

.btn.btn-soft-facebook {
  color: #3b5998;
}

/* google air */
.btn-soft-google {
  color: #d14130;
  background: rgba(209, 65, 48, 0.1);
  border-color: transparent;
}

.btn-soft-google[href]:hover, .btn-soft-google[href]:focus, .btn-soft-google[href]:active, .btn-soft-google[href].active, .btn-soft-google[type]:hover, .btn-soft-google[type]:focus, .btn-soft-google[type]:active, .btn-soft-google[type].active {
  color: #fff;
  background: #d14130;
  box-shadow: 0 4px 11px rgba(209, 65, 48, 0.35);
}

.btn-soft-google[href].disabled, .btn-soft-google[href]:disabled, .btn-soft-google[type].disabled, .btn-soft-google[type]:disabled {
  color: #d14130;
  background-color: rgba(209, 65, 48, 0.1);
  box-shadow: none;
}

.btn-soft-google[href]:not(:disabled):not(.disabled):active, .btn-soft-google[href]:not(:disabled):not(.disabled).active,
.show > .btn-soft-google[href].dropdown-toggle, .btn-soft-google[type]:not(:disabled):not(.disabled):active, .btn-soft-google[type]:not(:disabled):not(.disabled).active,
.show > .btn-soft-google[type].dropdown-toggle {
  color: #fff;
  background-color: #d14130;
}

.btn.btn-soft-google {
  color: #d14130;
}

/* twitter air */
.btn-soft-twitter {
  color: #1da1f2;
  background: rgba(29, 161, 242, 0.1);
  border-color: transparent;
}

.btn-soft-twitter[href]:hover, .btn-soft-twitter[href]:focus, .btn-soft-twitter[href]:active, .btn-soft-twitter[href].active, .btn-soft-twitter[type]:hover, .btn-soft-twitter[type]:focus, .btn-soft-twitter[type]:active, .btn-soft-twitter[type].active {
  color: #fff;
  background: #1da1f2;
  box-shadow: 0 4px 11px rgba(29, 161, 242, 0.35);
}

.btn-soft-twitter[href].disabled, .btn-soft-twitter[href]:disabled, .btn-soft-twitter[type].disabled, .btn-soft-twitter[type]:disabled {
  color: #1da1f2;
  background-color: rgba(29, 161, 242, 0.1);
  box-shadow: none;
}

.btn-soft-twitter[href]:not(:disabled):not(.disabled):active, .btn-soft-twitter[href]:not(:disabled):not(.disabled).active,
.show > .btn-soft-twitter[href].dropdown-toggle, .btn-soft-twitter[type]:not(:disabled):not(.disabled):active, .btn-soft-twitter[type]:not(:disabled):not(.disabled).active,
.show > .btn-soft-twitter[type].dropdown-toggle {
  color: #fff;
  background-color: #1da1f2;
}

.btn.btn-soft-twitter {
  color: #1da1f2;
}

/* instagram air */
.btn-soft-instagram {
  color: #3f729b;
  background: rgba(63, 114, 155, 0.1);
  border-color: transparent;
}

.btn-soft-instagram[href]:hover, .btn-soft-instagram[href]:focus, .btn-soft-instagram[href]:active, .btn-soft-instagram[href].active, .btn-soft-instagram[type]:hover, .btn-soft-instagram[type]:focus, .btn-soft-instagram[type]:active, .btn-soft-instagram[type].active {
  color: #fff;
  background: #3f729b;
  box-shadow: 0 4px 11px rgba(63, 114, 155, 0.35);
}

.btn-soft-instagram[href].disabled, .btn-soft-instagram[href]:disabled, .btn-soft-instagram[type].disabled, .btn-soft-instagram[type]:disabled {
  color: #3f729b;
  background-color: rgba(63, 114, 155, 0.1);
  box-shadow: none;
}

.btn-soft-instagram[href]:not(:disabled):not(.disabled):active, .btn-soft-instagram[href]:not(:disabled):not(.disabled).active,
.show > .btn-soft-instagram[href].dropdown-toggle, .btn-soft-instagram[type]:not(:disabled):not(.disabled):active, .btn-soft-instagram[type]:not(:disabled):not(.disabled).active,
.show > .btn-soft-instagram[type].dropdown-toggle {
  color: #fff;
  background-color: #3f729b;
}

.btn.btn-soft-instagram {
  color: #3f729b;
}

/* github air */
.btn-soft-github {
  color: #24292e;
  background: rgba(36, 41, 46, 0.1);
  border-color: transparent;
}

.btn-soft-github[href]:hover, .btn-soft-github[href]:focus, .btn-soft-github[href]:active, .btn-soft-github[href].active, .btn-soft-github[type]:hover, .btn-soft-github[type]:focus, .btn-soft-github[type]:active, .btn-soft-github[type].active {
  color: #fff;
  background: #24292e;
  box-shadow: 0 4px 11px rgba(36, 41, 46, 0.35);
}

.btn-soft-github[href].disabled, .btn-soft-github[href]:disabled, .btn-soft-github[type].disabled, .btn-soft-github[type]:disabled {
  color: #24292e;
  background-color: rgba(36, 41, 46, 0.1);
  box-shadow: none;
}

.btn-soft-github[href]:not(:disabled):not(.disabled):active, .btn-soft-github[href]:not(:disabled):not(.disabled).active,
.show > .btn-soft-github[href].dropdown-toggle, .btn-soft-github[type]:not(:disabled):not(.disabled):active, .btn-soft-github[type]:not(:disabled):not(.disabled).active,
.show > .btn-soft-github[type].dropdown-toggle {
  color: #fff;
  background-color: #24292e;
}

.btn.btn-soft-github {
  color: #24292e;
}

/* gray air */
.btn-soft-gray {
  color: #f8fafd;
  background: rgba(248, 250, 253, 0.1);
  border-color: transparent;
}

.btn-soft-gray[href]:hover, .btn-soft-gray[href]:focus, .btn-soft-gray[href]:active, .btn-soft-gray[href].active, .btn-soft-gray[type]:hover, .btn-soft-gray[type]:focus, .btn-soft-gray[type]:active, .btn-soft-gray[type].active {
  color: #1e2022;
  background: #f8fafd;
  box-shadow: 0 4px 11px rgba(248, 250, 253, 0.35);
}

.btn-soft-gray[href].disabled, .btn-soft-gray[href]:disabled, .btn-soft-gray[type].disabled, .btn-soft-gray[type]:disabled {
  color: #f8fafd;
  background-color: rgba(248, 250, 253, 0.1);
  box-shadow: none;
}

.btn-soft-gray[href]:not(:disabled):not(.disabled):active, .btn-soft-gray[href]:not(:disabled):not(.disabled).active,
.show > .btn-soft-gray[href].dropdown-toggle, .btn-soft-gray[type]:not(:disabled):not(.disabled):active, .btn-soft-gray[type]:not(:disabled):not(.disabled).active,
.show > .btn-soft-gray[type].dropdown-toggle {
  color: #1e2022;
  background-color: #f8fafd;
}

.btn.btn-soft-gray {
  color: #f8fafd;
}

/*------------------------------------
  Button Sizes
------------------------------------*/
/* Wide */
.btn-wide {
  min-width: 9.6875rem;
}

.btn-sm-wide {
  min-width: 8.4375rem;
}

/* Extra Small */
.btn-xs {
  font-size: 0.6875rem;
  font-weight: 400;
  padding: 0.4375rem 0.9375rem;
}

/* Icons */
.btn-icon.btn-xs {
  font-size: 0.75rem;
  width: 1.5rem;
  height: 1.5rem;
}

.btn-icon.btn-sm, .btn-group-sm > .btn-icon.btn {
  font-size: 0.8175rem;
  width: 2rem;
  height: 2rem;
}

.btn-icon.btn-lg, .btn-group-lg > .btn-icon.btn {
  font-size: 1.75rem;
  width: 5rem;
  height: 5rem;
}

/*------------------------------------
  Text Buttons Styles
------------------------------------*/
/* primary text button */
.btn-text-primary {
  color: #377dff;
  background: transparent;
}

.btn-text-primary[href]:hover, .btn-text-primary[href]:focus, .btn-text-primary[href]:active, .btn-text-primary[type]:hover, .btn-text-primary[type]:focus, .btn-text-primary[type]:active {
  color: #1e2022;
}

/* secondary text button */
.btn-text-secondary {
  color: #77838f;
  background: transparent;
}

.btn-text-secondary[href]:hover, .btn-text-secondary[href]:focus, .btn-text-secondary[href]:active, .btn-text-secondary[type]:hover, .btn-text-secondary[type]:focus, .btn-text-secondary[type]:active {
  color: #1e2022;
}

/* success text button */
.btn-text-success {
  color: #00c9a7;
  background: transparent;
}

.btn-text-success[href]:hover, .btn-text-success[href]:focus, .btn-text-success[href]:active, .btn-text-success[type]:hover, .btn-text-success[type]:focus, .btn-text-success[type]:active {
  color: #1e2022;
}

/* info text button */
.btn-text-info {
  color: #00dffc;
  background: transparent;
}

.btn-text-info[href]:hover, .btn-text-info[href]:focus, .btn-text-info[href]:active, .btn-text-info[type]:hover, .btn-text-info[type]:focus, .btn-text-info[type]:active {
  color: #1e2022;
}

/* warning text button */
.btn-text-warning {
  color: #ffc107;
  background: transparent;
}

.btn-text-warning[href]:hover, .btn-text-warning[href]:focus, .btn-text-warning[href]:active, .btn-text-warning[type]:hover, .btn-text-warning[type]:focus, .btn-text-warning[type]:active {
  color: #1e2022;
}

/* danger text button */
.btn-text-danger {
  color: #de4437;
  background: transparent;
}

.btn-text-danger[href]:hover, .btn-text-danger[href]:focus, .btn-text-danger[href]:active, .btn-text-danger[type]:hover, .btn-text-danger[type]:focus, .btn-text-danger[type]:active {
  color: #1e2022;
}

/* light text button */
.btn-text-light {
  color: #f8f9fa;
  background: transparent;
}

.btn-text-light[href]:hover, .btn-text-light[href]:focus, .btn-text-light[href]:active, .btn-text-light[type]:hover, .btn-text-light[type]:focus, .btn-text-light[type]:active {
  color: #bdc5d1;
}

/* dark text button */
.btn-text-dark {
  color: #1e2022;
  background: transparent;
}

.btn-text-dark[href]:hover, .btn-text-dark[href]:focus, .btn-text-dark[href]:active, .btn-text-dark[type]:hover, .btn-text-dark[type]:focus, .btn-text-dark[type]:active {
  color: #1e2022;
}

/* white text button */
.btn-text-white {
  color: #fff;
  background: transparent;
}

.btn-text-white[href]:hover, .btn-text-white[href]:focus, .btn-text-white[href]:active, .btn-text-white[type]:hover, .btn-text-white[type]:focus, .btn-text-white[type]:active {
  color: #1e2022;
}

/* indigo text button */
.btn-text-indigo {
  color: #2d1582;
  background: transparent;
}

.btn-text-indigo[href]:hover, .btn-text-indigo[href]:focus, .btn-text-indigo[href]:active, .btn-text-indigo[type]:hover, .btn-text-indigo[type]:focus, .btn-text-indigo[type]:active {
  color: #1e2022;
}

/*------------------------------------
  Buttons
------------------------------------*/
.btn[href] {
  cursor: pointer;
}

.btn:not([href]):not([type]):not(:disabled):not(.disabled) {
  cursor: default;
}

a[href] .btn:not([href]):not([type]):not(:disabled):not(.disabled) {
  cursor: pointer;
}

label.btn {
  cursor: pointer !important;
}

/* Pill */
.btn-pill {
  border-radius: 6.1875rem;
}

/* Icon */
.btn-icon {
  position: relative;
  line-height: 0;
  font-size: 1rem;
  width: 3.125rem;
  height: 3.125rem;
  padding: 0;
}

.btn-icon__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.btn-icon__inner-bottom-minus {
  top: 80%;
}

/* Background Transparent */
[class*="btn-soft-"].btn-bg-transparent {
  background-color: transparent;
}

/* Toggle */
.btn__toggle-default {
  display: inline-block;
}

.btn__toggle-toggled {
  display: none;
}

.btn.toggled .btn__toggle-default {
  display: none;
}

.btn.toggled .btn__toggle-toggled {
  display: inline-block;
}

/*------------------------------------
  Brand
------------------------------------*/
.brand {
  font-size: 2rem;
  font-weight: 700;
  margin-left: .5rem;
}

.brand-primary, .brand-primary:focus, .brand-primary:hover {
  color: #377dff;
}

.brand-light, .brand-light:focus, .brand-light:hover {
  color: #fff;
}

.brand-dark, .brand-dark:focus, .brand-dark:hover {
  color: #1e2022;
}

/*------------------------------------
  Breadcrumb
------------------------------------*/
.breadcrumb-white {
  background-color: transparent;
}

.breadcrumb-white .breadcrumb-item {
  color: #fff;
}

.breadcrumb-white .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.7);
}

.breadcrumb-white .breadcrumb-link {
  color: rgba(255, 255, 255, 0.7);
}

.breadcrumb-no-gutter {
  padding: 0;
}

/*------------------------------------
  Card
------------------------------------*/
.card-2-count {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
}

.card-3-count {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
}

.card-4-count {
  -webkit-column-count: 4;
     -moz-column-count: 4;
          column-count: 4;
}

.card-1-gap {
  -webkit-column-gap: 1.5rem;
     -moz-column-gap: 1.5rem;
          column-gap: 1.5rem;
}

.card-2-gap {
  -webkit-column-gap: 2rem;
     -moz-column-gap: 2rem;
          column-gap: 2rem;
}

.card-3-gap {
  -webkit-column-gap: 3rem;
     -moz-column-gap: 3rem;
          column-gap: 3rem;
}

.card-4-gap {
  -webkit-column-gap: 4rem;
     -moz-column-gap: 4rem;
          column-gap: 4rem;
}

.card-5-gap {
  -webkit-column-gap: 5rem;
     -moz-column-gap: 5rem;
          column-gap: 5rem;
}

.card-columns {
  orphans: 1;
  widows: 1;
}

.card-columns .card {
  display: inline-block;
  width: 100%;
}

@media (min-width: 576px) {
  .card-sm-2-count {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
  }
  .card-sm-3-count {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;
  }
  .card-sm-4-count {
    -webkit-column-count: 4;
       -moz-column-count: 4;
            column-count: 4;
  }
  .card-sm-1-gap {
    -webkit-column-gap: 1.5rem;
       -moz-column-gap: 1.5rem;
            column-gap: 1.5rem;
  }
  .card-sm-2-gap {
    -webkit-column-gap: 2rem;
       -moz-column-gap: 2rem;
            column-gap: 2rem;
  }
  .card-sm-3-gap {
    -webkit-column-gap: 3rem;
       -moz-column-gap: 3rem;
            column-gap: 3rem;
  }
  .card-sm-4-gap {
    -webkit-column-gap: 4rem;
       -moz-column-gap: 4rem;
            column-gap: 4rem;
  }
  .card-sm-5-gap {
    -webkit-column-gap: 5rem;
       -moz-column-gap: 5rem;
            column-gap: 5rem;
  }
  .card-sm-columns {
    orphans: 1;
    widows: 1;
  }
  .card-sm-columns .card {
    display: inline-block;
    width: 100%;
  }
}

@media (min-width: 768px) {
  .card-md-2-count {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
  }
  .card-md-3-count {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;
  }
  .card-md-4-count {
    -webkit-column-count: 4;
       -moz-column-count: 4;
            column-count: 4;
  }
  .card-md-1-gap {
    -webkit-column-gap: 1.5rem;
       -moz-column-gap: 1.5rem;
            column-gap: 1.5rem;
  }
  .card-md-2-gap {
    -webkit-column-gap: 2rem;
       -moz-column-gap: 2rem;
            column-gap: 2rem;
  }
  .card-md-3-gap {
    -webkit-column-gap: 3rem;
       -moz-column-gap: 3rem;
            column-gap: 3rem;
  }
  .card-md-4-gap {
    -webkit-column-gap: 4rem;
       -moz-column-gap: 4rem;
            column-gap: 4rem;
  }
  .card-md-5-gap {
    -webkit-column-gap: 5rem;
       -moz-column-gap: 5rem;
            column-gap: 5rem;
  }
  .card-md-columns {
    orphans: 1;
    widows: 1;
  }
  .card-md-columns .card {
    display: inline-block;
    width: 100%;
  }
}

@media (min-width: 992px) {
  .card-lg-2-count {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
  }
  .card-lg-3-count {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;
  }
  .card-lg-4-count {
    -webkit-column-count: 4;
       -moz-column-count: 4;
            column-count: 4;
  }
  .card-lg-1-gap {
    -webkit-column-gap: 1.5rem;
       -moz-column-gap: 1.5rem;
            column-gap: 1.5rem;
  }
  .card-lg-2-gap {
    -webkit-column-gap: 2rem;
       -moz-column-gap: 2rem;
            column-gap: 2rem;
  }
  .card-lg-3-gap {
    -webkit-column-gap: 3rem;
       -moz-column-gap: 3rem;
            column-gap: 3rem;
  }
  .card-lg-4-gap {
    -webkit-column-gap: 4rem;
       -moz-column-gap: 4rem;
            column-gap: 4rem;
  }
  .card-lg-5-gap {
    -webkit-column-gap: 5rem;
       -moz-column-gap: 5rem;
            column-gap: 5rem;
  }
  .card-lg-columns {
    orphans: 1;
    widows: 1;
  }
  .card-lg-columns .card {
    display: inline-block;
    width: 100%;
  }
}

@media (min-width: 1200px) {
  .card-xl-2-count {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
  }
  .card-xl-3-count {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;
  }
  .card-xl-4-count {
    -webkit-column-count: 4;
       -moz-column-count: 4;
            column-count: 4;
  }
  .card-xl-1-gap {
    -webkit-column-gap: 1.5rem;
       -moz-column-gap: 1.5rem;
            column-gap: 1.5rem;
  }
  .card-xl-2-gap {
    -webkit-column-gap: 2rem;
       -moz-column-gap: 2rem;
            column-gap: 2rem;
  }
  .card-xl-3-gap {
    -webkit-column-gap: 3rem;
       -moz-column-gap: 3rem;
            column-gap: 3rem;
  }
  .card-xl-4-gap {
    -webkit-column-gap: 4rem;
       -moz-column-gap: 4rem;
            column-gap: 4rem;
  }
  .card-xl-5-gap {
    -webkit-column-gap: 5rem;
       -moz-column-gap: 5rem;
            column-gap: 5rem;
  }
  .card-xl-columns {
    orphans: 1;
    widows: 1;
  }
  .card-xl-columns .card {
    display: inline-block;
    width: 100%;
  }
}

/* Background Color */
.card-bg-light {
  background-color: #f8fafd;
}

.card-bg-light:hover {
  background-color: #f4f7fc;
}

/* Frame */
.card-frame {
  border: 1px solid #e7eaf3;
  transition: 0.3s;
}

.card-frame-highlighted, .card-frame:hover {
  border-color: rgba(55, 125, 255, 0.3);
  box-shadow: 0 0 35px rgba(55, 125, 255, 0.125);
}

.card-text-dark {
  color: #1e2022;
}

.card-text-dark:hover {
  color: #377dff;
}

/* Collapse */
.card-collapse {
  padding: 0;
  transition: 0.3s ease-in-out;
}

.card-collapse:hover {
  background-color: #f8fafd;
}

.card-collapse .card-body {
  color: #77838f;
}

.card-btn {
  color: #1e2022;
  text-align: left;
  white-space: inherit;
}

.card-btn-arrow {
  display: inline-block;
  color: #377dff;
  margin-left: 1rem;
  transition: 0.3s ease-in-out;
}

.collapsed .card-btn-arrow {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

/* IE image rendering fix */
.card-img-top,
.card-img-bottom {
  min-height: 1px;
}

/*------------------------------------
  Card Gutters
------------------------------------*/
@media (min-width: 576px) {
  .card-sm-gutters-1 {
    margin-right: -.25rem;
    margin-left: -.25rem;
  }
  .card-sm-gutters-1 .card {
    margin-right: .25rem;
    margin-left: .25rem;
  }
  .card-sm-gutters-2 {
    margin-right: -.5rem;
    margin-left: -.5rem;
  }
  .card-sm-gutters-2 .card {
    margin-right: .5rem;
    margin-left: .5rem;
  }
  .card-sm-gutters-3 {
    margin-right: -.9375rem;
    margin-left: -.9375rem;
  }
  .card-sm-gutters-3 .card {
    margin-right: .9375rem;
    margin-left: .9375rem;
  }
}

@media (min-width: 768px) {
  .card-md-gutters-1 {
    margin-right: -.25rem;
    margin-left: -.25rem;
  }
  .card-md-gutters-1 .card {
    margin-right: .25rem;
    margin-left: .25rem;
  }
  .card-md-gutters-2 {
    margin-right: -.5rem;
    margin-left: -.5rem;
  }
  .card-md-gutters-2 .card {
    margin-right: .5rem;
    margin-left: .5rem;
  }
  .card-md-gutters-3 {
    margin-right: -.9375rem;
    margin-left: -.9375rem;
  }
  .card-md-gutters-3 .card {
    margin-right: .9375rem;
    margin-left: .9375rem;
  }
}

@media (min-width: 992px) {
  .card-lg-gutters-1 {
    margin-right: -.25rem;
    margin-left: -.25rem;
  }
  .card-lg-gutters-1 .card {
    margin-right: .25rem;
    margin-left: .25rem;
  }
  .card-lg-gutters-2 {
    margin-right: -.5rem;
    margin-left: -.5rem;
  }
  .card-lg-gutters-2 .card {
    margin-right: .5rem;
    margin-left: .5rem;
  }
  .card-lg-gutters-3 {
    margin-right: -.9375rem;
    margin-left: -.9375rem;
  }
  .card-lg-gutters-3 .card {
    margin-right: .9375rem;
    margin-left: .9375rem;
  }
}

/*------------------------------------
  Card Group - Break
------------------------------------*/
@media (max-width: 767.98px) {
  .card-group-sm-break {
    display: block;
  }
  .card-group-sm-break > .card:not(:last-child) {
    margin-bottom: -1px;
  }
  .card-group-sm-break > .card + .card {
    border-left: 1px solid #e7eaf3;
  }
  .card-group-sm-break > .card:first-child {
    border-top-left-radius: 0.3125rem;
    border-top-right-radius: 0.3125rem;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .card-group-sm-break > .card:first-child .card-img-top,
  .card-group-sm-break > .card:first-child .card-header {
    border-top-left-radius: 0.3125rem;
    border-top-right-radius: 0.3125rem;
  }
  .card-group-sm-break > .card:first-child .card-img-bottom,
  .card-group-sm-break > .card:first-child .card-footer {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .card-group-sm-break > .card:last-child {
    border-bottom-right-radius: 0.3125rem;
    border-bottom-left-radius: 0.3125rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .card-group-sm-break > .card:last-child .card-img-top,
  .card-group-sm-break > .card:last-child .card-header {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .card-group-sm-break > .card:last-child .card-img-bottom,
  .card-group-sm-break > .card:last-child .card-footer {
    border-bottom-right-radius: 0.3125rem;
    border-bottom-left-radius: 0.3125rem;
  }
}

@media (max-width: 991.98px) {
  .card-group-md-break {
    display: block;
  }
  .card-group-md-break > .card:not(:last-child) {
    margin-bottom: -1px;
  }
  .card-group-md-break > .card + .card {
    border-left: 1px solid #e7eaf3;
  }
  .card-group-md-break > .card:first-child {
    border-top-left-radius: 0.3125rem;
    border-top-right-radius: 0.3125rem;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .card-group-md-break > .card:first-child .card-img-top,
  .card-group-md-break > .card:first-child .card-header {
    border-top-left-radius: 0.3125rem;
    border-top-right-radius: 0.3125rem;
  }
  .card-group-md-break > .card:first-child .card-img-bottom,
  .card-group-md-break > .card:first-child .card-footer {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .card-group-md-break > .card:last-child {
    border-bottom-right-radius: 0.3125rem;
    border-bottom-left-radius: 0.3125rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .card-group-md-break > .card:last-child .card-img-top,
  .card-group-md-break > .card:last-child .card-header {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .card-group-md-break > .card:last-child .card-img-bottom,
  .card-group-md-break > .card:last-child .card-footer {
    border-bottom-right-radius: 0.3125rem;
    border-bottom-left-radius: 0.3125rem;
  }
}

@media (max-width: 1199.98px) {
  .card-group-lg-break {
    display: block;
  }
  .card-group-lg-break > .card:not(:last-child) {
    margin-bottom: -1px;
  }
  .card-group-lg-break > .card + .card {
    border-left: 1px solid #e7eaf3;
  }
  .card-group-lg-break > .card:first-child {
    border-top-left-radius: 0.3125rem;
    border-top-right-radius: 0.3125rem;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .card-group-lg-break > .card:first-child .card-img-top,
  .card-group-lg-break > .card:first-child .card-header {
    border-top-left-radius: 0.3125rem;
    border-top-right-radius: 0.3125rem;
  }
  .card-group-lg-break > .card:first-child .card-img-bottom,
  .card-group-lg-break > .card:first-child .card-footer {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .card-group-lg-break > .card:last-child {
    border-bottom-right-radius: 0.3125rem;
    border-bottom-left-radius: 0.3125rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .card-group-lg-break > .card:last-child .card-img-top,
  .card-group-lg-break > .card:last-child .card-header {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .card-group-lg-break > .card:last-child .card-img-bottom,
  .card-group-lg-break > .card:last-child .card-footer {
    border-bottom-right-radius: 0.3125rem;
    border-bottom-left-radius: 0.3125rem;
  }
}

/*------------------------------------
  Sidebar Navigation
------------------------------------*/
/* Disable content revealing on page load */
.u-sidebar[aria-labelledby] {
  opacity: 0;
}

.u-sidebar[aria-labelledby][role="tabpanel"] {
  opacity: 1;
}

.u-sidebar[aria-labelledby].u-unfold--css-animation, .u-sidebar[aria-labelledby].u-unfold--jquery-slide {
  opacity: 1;
}

.u-sidebar.u-unfold--css-animation.u-unfold--hidden {
  display: none;
  opacity: 0;
  visibility: hidden;
}

.u-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1002;
  width: 23.4375rem;
  height: 100%;
  background-color: #fff;
  box-shadow: -13px 0 20px rgba(119, 131, 143, 0.08);
}

.u-sidebar__body, .u-sidebar__content {
  height: 100%;
}

.u-sidebar--left {
  right: auto;
  left: 0;
  box-shadow: 13px 0 20px rgba(119, 131, 143, 0.08);
}

.u-sidebar__scroller {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}

.u-sidebar__container {
  position: relative;
  height: 100%;
  min-height: 100%;
}

.u-sidebar__footer {
  width: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

/*------------------------------------
  Sidebar Account
------------------------------------*/
.u-sidebar--account__footer-offset {
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 10.3125rem;
}

.u-sidebar__content--account {
  padding: 1.5rem 3rem;
}

/* Holder */
.u-sidebar--account__holder {
  background-color: #f8fafd;
  padding: 1.5rem 3rem;
}

.u-sidebar--account__holder-img {
  width: 3rem;
  border-radius: 0.3125rem;
}

.u-sidebar--account__holder-text {
  display: block;
  font-size: .75rem;
  color: #8c98a4;
}

/* Toggle */
.u-sidebar--account__toggle-bg {
  position: relative;
  top: 1px;
  padding: .25rem .25rem .25rem .75rem;
  background-color: rgba(55, 125, 255, 0.1);
  border-radius: 6.1875rem;
}

@media (max-width: 767.98px) {
  .u-sidebar--account__toggle-bg {
    padding-left: .25rem;
  }
}

.u-sidebar--account__toggle-bg:hover .u-sidebar--account__toggle-text {
  color: #377dff;
}

.u-sidebar--account__toggle-text {
  color: #1e2022;
  font-size: .75rem;
  vertical-align: middle;
  margin-right: .3125rem;
}

@media (max-width: 767.98px) {
  .u-sidebar--account__toggle-text {
    display: none;
  }
}

.u-sidebar--account__toggle-img {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
}

/* List */
.u-sidebar--account__list {
  margin-bottom: 0;
}

.u-sidebar--account__list-item {
  padding-top: .25rem;
  padding-bottom: .25rem;
}

.u-sidebar--account__list-link {
  display: block;
  font-size: .875rem;
  color: #97a4af;
  border-radius: 0.3125rem;
  padding: .625rem;
  transition: 0.2s ease-in-out;
}

.u-sidebar--account__list-link.active, .u-sidebar--account__list-link:hover {
  color: #377dff;
  background-color: rgba(55, 125, 255, 0.1);
}

.u-sidebar--account__list-link.active .u-sidebar--account__list-icon, .u-sidebar--account__list-link:hover .u-sidebar--account__list-icon {
  color: #377dff;
}

.u-sidebar--account__list-icon {
  display: inline-block;
  text-align: center;
  width: 1.125rem;
  font-size: .8125rem;
  color: #8c98a4;
  transition: 0.2s ease-in-out;
}

.u-sidebar--account__list-divider {
  border-top: 1px solid #e4ecf7;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Footer Links */
.u-sidebar__footer--account {
  padding: 0 3rem 1.5rem;
}

.u-sidebar__footer--account__text {
  position: relative;
  z-index: 1;
  font-size: .875rem;
  color: rgba(255, 255, 255, 0.7);
}

.u-sidebar__footer--account__text:hover {
  color: #fff;
}

/*------------------------------------
  Sidebar Shopping Cart
------------------------------------*/
.u-sidebar__cart-footer-offset {
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 13.4375rem;
}

/*------------------------------------
  Clients
------------------------------------*/
.u-clients {
  width: 100%;
  max-width: 6rem;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

/*------------------------------------
  Close
------------------------------------*/
.close-light {
  color: rgba(255, 255, 255, 0.7);
}

.close-light:not(:disabled):not(.disabled):hover, .close-light:not(:disabled):not(.disabled):focus {
  color: #fff;
}

/*------------------------------------
  Divider
------------------------------------*/
.u-divider {
  position: relative;
  display: inline-block;
  font-size: 1rem;
}

.u-divider::before, .u-divider::after {
  position: absolute;
  top: 50%;
  content: "";
}

.u-divider::before {
  right: 100%;
  background-image: linear-gradient(45deg, transparent 0%, #bdc5d1 100%);
  background-repeat: repeat-x;
}

.u-divider::after {
  left: 100%;
  background-image: linear-gradient(45deg, #bdc5d1 0%, transparent 100%);
  background-repeat: repeat-x;
}

/*------------------------------------
  Divider Sizes
------------------------------------*/
.u-divider::before, .u-divider::after {
  width: 10rem;
  height: 0.0625rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.u-divider::before {
  margin-right: .625rem;
}

.u-divider::after {
  margin-left: .625rem;
}

@media (max-width: 767.98px) {
  .u-divider::before, .u-divider::after {
    width: 4rem;
  }
}

.u-divider--xs {
  font-size: 0.75rem;
}

.u-divider--xs::before, .u-divider--xs::after {
  width: 2rem;
  height: 0.0625rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

/*------------------------------------
  Divider Styles
------------------------------------*/
/* Text */
.u-divider--text {
  color: #8c98a4;
}

/*------------------------------------
  Vertical Divider
------------------------------------*/
.u-ver-divider {
  position: relative;
}

.u-ver-divider::after {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  border-right: 1px solid #e7eaf3;
  content: "";
}

/* Breakpoint */
@media (max-width: 575.98px) {
  .u-ver-divider--none-sm::after {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .u-ver-divider--none-md::after {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .u-ver-divider--none-lg::after {
    display: none;
  }
}

/*------------------------------------
  Divider Sizes
------------------------------------*/
/* Extra Small */
.u-ver-divider--xs::after {
  top: 50%;
  height: 1rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

/* Small */
.u-ver-divider--sm::after {
  top: 50%;
  height: 2rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

/* Large */
.u-ver-divider--lg::after {
  top: 50%;
  height: 3rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

/* Extra Large */
.u-ver-divider--xl::after {
  top: 50%;
  height: 4rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

/*------------------------------------
  Dropdown
------------------------------------*/
/* Disable content revealing on page load */
.dropdown-unfold[aria-labelledby] {
  opacity: 0;
}

.dropdown-unfold[aria-labelledby][role="tabpanel"] {
  display: block;
  opacity: 1;
}

.dropdown-unfold[aria-labelledby].u-unfold--css-animation, .dropdown-unfold[aria-labelledby].u-unfold--jquery-slide {
  display: block;
  opacity: 1;
}

.dropdown-unfold.u-unfold--css-animation.u-unfold--hidden {
  display: none;
  opacity: 0;
  visibility: hidden;
}

.u-unfold--css-animation.u-unfold--hidden {
  display: none;
  opacity: 0;
  visibility: hidden;
}

.dropdown-unfold.show {
  display: block;
  opacity: 1;
}

/* Menu */
.dropdown-menu {
  margin-top: .5rem;
  font-size: 0.875rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  box-shadow: 0 5px 9px rgba(55, 125, 255, 0.075), 0 5px 9px rgba(119, 131, 143, 0.075);
}

/* Nav Link */
.dropdown-nav-link {
  color: #77838f;
  font-weight: 300;
  font-size: 0.875rem;
}

.dropdown-nav-link:hover {
  color: #1e2022;
}

/* Item */
.dropdown-item {
  font-size: 0.875rem;
}

.dropdown-item:hover {
  color: #377dff;
}

.dropdown-item.active {
  color: #377dff;
}

.dropdown-item-icon {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  font-size: 0.8125rem;
  min-width: 1rem;
  max-width: 1rem;
  margin-right: .5rem;
}

/* Toggle */
.dropdown-toggle::after {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-size: 80%;
  font-weight: 900;
  content: "";
  margin-left: .5rem;
}

.dropdown-toggle-collapse::after {
  transition: 0.3s;
}

.dropdown-toggle-collapse[aria-expanded="true"]::after {
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
}

/* Dropdown Positions */
.dropdown-menu-top {
  top: 0;
}

.dropdown-menu-bottom {
  top: auto;
  bottom: 0;
}

@media (min-width: 576px) {
  .dropdown-menu-sm-top {
    top: 0;
  }
  .dropdown-menu-sm-bottom {
    top: auto;
    bottom: 0;
  }
}

@media (min-width: 768px) {
  .dropdown-menu-md-top {
    top: 0;
  }
  .dropdown-menu-md-bottom {
    top: auto;
    bottom: 0;
  }
}

@media (min-width: 992px) {
  .dropdown-menu-lg-top {
    top: 0;
  }
  .dropdown-menu-lg-bottom {
    top: auto;
    bottom: 0;
  }
}

@media (min-width: 1200px) {
  .dropdown-menu-xl-top {
    top: 0;
  }
  .dropdown-menu-xl-bottom {
    top: auto;
    bottom: 0;
  }
}

/*------------------------------------
  Dropdown Card
------------------------------------*/
.dropdown-card {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .dropdown-card {
    min-width: 25rem;
  }
}

/*------------------------------------
  Dropdown Sizes
------------------------------------*/
@media (min-width: 576px) {
  .dropdown-menu-size-md {
    width: 440px;
  }
  .dropdown-menu-size-lg {
    width: 340px;
  }
}

@media (min-width: 768px) {
  .dropdown-menu-size-lg {
    width: 440px;
  }
}

@media (min-width: 992px) {
  .dropdown-menu-size-lg {
    width: 740px;
  }
}

/*------------------------------------
  Form
------------------------------------*/
.custom-select:focus,
.form-control:focus {
  box-shadow: 0 0 10px rgba(55, 125, 255, 0.1);
  border-color: rgba(55, 125, 255, 0.5);
}

.form-label {
  display: block;
  text-transform: uppercase;
  font-size: 80%;
  font-weight: 500;
}

/* Form Borderless */
.input-group-borderless .form-control,
.input-group-borderless .input-group-text {
  border: none;
}

.input-group-borderless .form-control:focus,
.input-group-borderless .input-group-text:focus {
  box-shadow: none;
}

/*------------------------------------
  Form Pill
------------------------------------*/
.input-group-pill {
  border-radius: 6.1875rem;
}

.input-group-pill > .form-control:first-child {
  border-top-left-radius: 6.1875rem;
  border-bottom-left-radius: 6.1875rem;
}

.input-group-pill > .form-control:last-child {
  border-top-right-radius: 6.1875rem;
  border-bottom-right-radius: 6.1875rem;
}

.input-group-pill .input-group-prepend > .input-group-text,
.input-group-pill .input-group-prepend > .btn {
  border-top-left-radius: 6.1875rem;
  border-bottom-left-radius: 6.1875rem;
}

.input-group-pill .input-group-append > .input-group-text,
.input-group-pill .input-group-append > .btn {
  border-top-right-radius: 6.1875rem;
  border-bottom-right-radius: 6.1875rem;
}

/*------------------------------------
  Form Sizes
------------------------------------*/
/* Default Size */
.input-group.input-group-pill > .form-control:first-child {
  padding-left: 1.5rem;
}

.input-group.input-group-pill .input-group-prepend > .input-group-text,
.input-group.input-group-pill .input-group-prepend > .btn {
  padding-left: 1.25rem;
}

.input-group.input-group-pill .input-group-append > .input-group-text,
.input-group.input-group-pill .input-group-append > .btn {
  padding-right: 1.25rem;
}

.input-group .input-group-prepend > .input-group-text,
.input-group .input-group-append > .input-group-text {
  font-size: 0.875rem;
}

/* Extra Small Size */
.input-group-xs.input-group-pill > .form-control:first-child {
  padding-left: 1.375rem;
}

.input-group-xs.input-group-pill .input-group-prepend > .input-group-text,
.input-group-xs.input-group-pill .input-group-prepend > .btn {
  padding-left: 1.25rem;
}

.input-group-xs.input-group-pill .input-group-append > .input-group-text,
.input-group-xs.input-group-pill .input-group-append > .btn {
  padding-right: 1.25rem;
}

.input-group-xs .input-group-prepend > .input-group-text,
.input-group-xs .input-group-append > .input-group-text {
  font-size: 0.625rem;
}

.form-control-xs {
  height: calc(1.925rem + 1px);
  padding: 0.4375rem 0.9375rem;
  font-size: 0.75rem;
  line-height: 1.4;
}

/* Small Size */
.input-group-sm.input-group-pill > .form-control:first-child {
  padding-left: 1rem;
}

.input-group-sm.input-group-pill .input-group-prepend > .input-group-text,
.input-group-sm.input-group-pill .input-group-prepend > .btn {
  padding-left: 1rem;
}

.input-group-sm.input-group-pill .input-group-append > .input-group-text,
.input-group-sm.input-group-pill .input-group-append > .btn {
  padding-right: 1rem;
}

.input-group-sm .input-group-prepend > .input-group-text,
.input-group-sm .input-group-append > .input-group-text {
  font-size: 0.75rem;
}

/* Large Size */
.input-group-lg.input-group-pill > .form-control:first-child {
  padding-left: 2rem;
}

.input-group-lg.input-group-pill .input-group-prepend > .input-group-text,
.input-group-lg.input-group-pill .input-group-prepend > .btn {
  padding-left: 1.375rem;
}

.input-group-lg.input-group-pill .input-group-append > .input-group-text,
.input-group-lg.input-group-pill .input-group-append > .btn {
  padding-right: 1.5rem;
}

.input-group-lg .input-group-prepend > .input-group-text,
.input-group-lg .input-group-append > .input-group-text {
  font-size: 1rem;
}

/*------------------------------------
  Focus States
------------------------------------*/
.u-focus-state .form-label + .form-control,
.u-focus-state .custom-select,
.u-focus-state .input-group,
.u-focus-state .form-control:first-child:last-child {
  box-shadow: 0 0 10px rgba(55, 125, 255, 0.1);
}

.u-focus-state .input-group-text {
  color: #377dff;
}

.u-focus-state:focus,
.u-focus-state *:focus,
.u-focus-state .input-group-text,
.u-focus-state .form-control {
  border-color: rgba(55, 125, 255, 0.5);
}

.u-focus-state .form-control {
  box-shadow: none;
}

/*------------------------------------
  Success State
------------------------------------*/
.u-has-success .form-label + .form-control,
.u-has-success .custom-select,
.u-has-success .input-group,
.u-has-success .form-control:first-child:last-child {
  box-shadow: 0 0 10px rgba(0, 201, 167, 0.1);
}

.u-has-success .input-group-text {
  color: #00c9a7;
}

.u-has-success:focus,
.u-has-success *:focus,
.u-has-success .input-group-text,
.u-has-success .form-control {
  border-color: rgba(0, 201, 167, 0.5);
}

/*------------------------------------
  Error State
------------------------------------*/
.u-has-error .form-label + .form-control,
.u-has-error .custom-select,
.u-has-error .input-group,
.u-has-error .form-control:first-child:last-child {
  box-shadow: 0 0 10px rgba(222, 68, 55, 0.1);
}

.u-has-error .input-group-text {
  color: #de4437;
}

.u-has-error:focus,
.u-has-error *:focus,
.u-has-error .input-group-text,
.u-has-error .form-control {
  border-color: rgba(222, 68, 55, 0.5);
}

/*------------------------------------
  Bookmark Checkbox
------------------------------------*/
.bookmark-checkbox {
  position: relative;
  display: block;
  line-height: 0;
}

.bookmark-checkbox-input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.bookmark-checkbox-label {
  position: relative;
  width: 2rem;
  height: 2rem;
  font-size: 0.8175rem;
  color: #77838f;
  border-radius: 50%;
  cursor: pointer;
  margin-bottom: 0;
  transition: 0.3s;
}

.bookmark-checkbox-label::before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  content: "";
  font-family: "Font Awesome 5 Free";
}

.bookmark-checkbox-input:checked ~ .bookmark-checkbox-label {
  color: #fff;
  background-color: #377dff;
  box-shadow: 0 3px 6px 0 rgba(55, 125, 255, 0.25);
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

/*------------------------------------
  Checkbox Outline
------------------------------------*/
.checkbox-outline {
  padding-left: 0;
  margin-right: 0;
}

.checkbox-outline__label {
  border: 1px solid #e7eaf3;
  cursor: pointer;
}

.checkbox-outline__input:checked ~ .checkbox-outline__label {
  border-color: #377dff;
}

/*------------------------------------
  Checkbox Icon
------------------------------------*/
.checkbox-icon__label::after {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: none;
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  font-weight: 900;
  color: #377dff;
  font-size: 1.5rem;
}

.checkbox-icon__input:checked ~ .checkbox-icon__label::after {
  display: block;
  border-color: #377dff;
}

/*------------------------------------
  Checkbox Switch
------------------------------------*/
.custom-switch {
  padding-left: 3.25rem;
}

.custom-switch .custom-control-label::before {
  left: -3.25rem;
  height: 1.5rem;
  border: none;
  background-color: #e7eaf3;
  border-radius: 6.1875rem;
}

.custom-switch .custom-control-label::after {
  top: calc(0.625rem);
  left: calc(-2.875rem);
  background-color: #fff;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  -webkit-transform: translateX(1rem);
          transform: translateX(1rem);
}

/*------------------------------------
  Custom Checkbox
------------------------------------*/
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
  border-color: rgba(55, 125, 255, 0);
}

/*------------------------------------
  File Attachment Button
------------------------------------*/
.file-attachment-btn {
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
}

.file-attachment-btn__label {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  min-width: 100%;
  min-height: 100%;
  cursor: inherit;
  opacity: 0;
}

/*------------------------------------
  File Attachment Input
------------------------------------*/
.file-attachment-input {
  position: relative;
  display: block;
  background-color: #f8fafd;
  border: 2px dashed #e7eaf3;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  border-radius: 0.3125rem;
  padding: 4rem;
  margin-bottom: 0;
}

.file-attachment-input__label {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  min-width: 100%;
  min-height: 100%;
  cursor: inherit;
  opacity: 0;
}

.file-attachment-input:hover {
  background-color: #f5f8fc;
}

/*------------------------------------
  File Attachment Link
------------------------------------*/
.file-attachment-link {
  position: relative;
  top: .4375rem;
  overflow: hidden;
}

.file-attachment-link input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.file-attachment-link__label {
  color: rgba(255, 255, 255, 0.7);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.7);
  margin-bottom: 0;
}

.file-attachment-link:hover .u-file-attachment-link__label {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}

/*------------------------------------
  Google Map Interactive
------------------------------------*/
.u-gmap-interactive {
  height: 15.625rem;
  border: 4px solid #fff;
  border-radius: 0.3125rem;
  box-shadow: 0 0 45px rgba(140, 152, 164, 0.125);
}

.u-gmap-interactive .gm-style > div:first-child > div + div > div:last-child > div > div:first-child > div:first-child {
  display: none;
}

.u-gmap-interactive .gm-style-iw {
  min-width: 11.0625rem;
  background-color: #fff;
  text-align: center;
  overflow: inherit;
  box-shadow: 0 0 45px rgba(140, 152, 164, 0.4);
  border-radius: 0.3125rem;
  padding-top: 1.5rem;
  padding-bottom: .5rem;
}

.u-gmap-interactive .gm-style-iw::before {
  position: absolute;
  bottom: -.75rem;
  left: 50%;
  width: 1rem;
  height: .875rem;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.1 14.5'%3E %3Cpath fill='#fff' d='M9.8,13.5L15.9,3c0.8-1.3-0.2-3-1.7-3H2C0.5,0-0.5,1.7,0.3,3l6.1,10.5C7.1,14.8,9,14.8,9.8,13.5z' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  content: "";
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.u-gmap-interactive .gm-style-iw img {
  max-width: 100%;
}

.u-gmap-interactive__info {
  padding-right: .5rem;
  padding-bottom: .5rem;
  padding-left: .5rem;
}

/*------------------------------------
  Go To
------------------------------------*/
.u-go-to {
  display: none;
  position: relative;
  z-index: 100;
  width: 2.5rem;
  height: 2.5rem;
  background-color: #377dff;
  color: #fff;
  font-size: 0.75rem;
  border-radius: 0.3125rem;
  opacity: 0.5;
  transition: 0.3s ease-out;
}

.u-go-to__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.u-go-to:hover, .u-go-to:focus:hover {
  color: #fff;
  opacity: 1;
}

/*------------------------------------
  Got to Section - Vertical Arrow
------------------------------------*/
.u-go-to-ver-arrow {
  display: inline-block;
  color: #377dff;
  background-color: rgba(55, 125, 255, 0.1);
  padding: 2rem 1rem;
  border-radius: 6.1875rem;
}

.u-go-to-ver-arrow:hover .u-go-to-ver-arrow__inner {
  -webkit-transform: translateY(3px);
          transform: translateY(3px);
}

.u-go-to-ver-arrow__inner {
  transition: 0.2s ease-in-out;
}

/*------------------------------------
  Got to Section - Modern
------------------------------------*/
.u-go-to-modern {
  position: relative;
  z-index: 2;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1.125rem;
  color: #377dff;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 1.25rem rgba(140, 152, 164, 0.2);
}

.u-go-to-modern .u-go-to-modern__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

/*------------------------------------
  Got to Section - Wave
------------------------------------*/
.u-go-to-wave {
  width: 13.125rem;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 575.98px) {
  .u-go-to-wave {
    width: 10rem;
  }
}

.u-go-to-wave__icon {
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

/*------------------------------------
  Hamburgers
------------------------------------*/
.u-hamburger {
  font-size: inherit;
  line-height: 0;
  padding: 0.25rem;
}

.u-hamburger:hover .u-hamburger__inner, .u-hamburger:hover .u-hamburger__inner::before, .u-hamburger:hover .u-hamburger__inner::after {
  background-color: #377dff;
}

.u-hamburger__box {
  width: 1.5625rem;
  height: 0.875rem;
  display: inline-block;
  position: relative;
}

.u-hamburger__inner {
  display: block;
  top: 0.0625rem;
  margin: top, -0.0625rem;
}

.u-hamburger__inner, .u-hamburger__inner::before, .u-hamburger__inner::after {
  width: 1.5625rem;
  height: 0.125rem;
  background-color: #8c98a4;
  position: absolute;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

.u-hamburger__inner::before, .u-hamburger__inner::after {
  content: "";
  display: block;
}

.u-hamburger__inner::before {
  top: 0.375rem;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

.u-hamburger__inner::after {
  top: 0.75rem;
}

.u-hamburger[aria-expanded="true"] .u-hamburger__inner,
.u-hamburger .is-active .u-hamburger__inner {
  -webkit-transform: translate3d(0, 0.375rem, 0) rotate(45deg);
          transform: translate3d(0, 0.375rem, 0) rotate(45deg);
}

.u-hamburger[aria-expanded="true"] .u-hamburger__inner::before,
.u-hamburger .is-active .u-hamburger__inner::before {
  -webkit-transform: rotate(-45deg) translate3d(-0.22321rem, -0.25rem, 0);
          transform: rotate(-45deg) translate3d(-0.22321rem, -0.25rem, 0);
  opacity: 0;
}

.u-hamburger[aria-expanded="true"] .u-hamburger__inner::after,
.u-hamburger .is-active .u-hamburger__inner::after {
  -webkit-transform: translate3d(0, -0.75rem, 0) rotate(-90deg);
          transform: translate3d(0, -0.75rem, 0) rotate(-90deg);
}

.u-hamburger--white .u-hamburger__inner, .u-hamburger--white .u-hamburger__inner::before, .u-hamburger--white .u-hamburger__inner::after {
  background-color: rgba(255, 255, 255, 0.8);
}

.u-hamburger--white:hover .u-hamburger__inner, .u-hamburger--white:hover .u-hamburger__inner::before, .u-hamburger--white:hover .u-hamburger__inner::after {
  background-color: #fff;
}

.js-header-fix-moment .u-hamburger--white .u-hamburger__inner, .js-header-fix-moment .u-hamburger--white .u-hamburger__inner::before, .js-header-fix-moment .u-hamburger--white .u-hamburger__inner::after {
  background-color: #8c98a4;
}

.js-header-fix-moment .u-hamburger--white:hover .u-hamburger__inner, .js-header-fix-moment .u-hamburger--white:hover .u-hamburger__inner::before, .js-header-fix-moment .u-hamburger--white:hover .u-hamburger__inner::after {
  background-color: #377dff;
}

/*------------------------------------
  Hero v1
------------------------------------*/
.u-hero-v1 {
  position: relative;
}

.u-hero-v1__main {
  position: relative;
  z-index: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

@media (min-width: 992px) {
  .u-hero-v1__main {
    height: 70vh;
  }
}

.u-hero-v1__main::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-color: rgba(38, 60, 100, 0.3);
  content: "";
}

.u-hero-v1__secondary {
  position: relative;
}

@media (min-width: 992px) {
  .u-hero-v1__secondary {
    height: 30vh;
  }
}

.u-hero-v1__last {
  position: absolute;
  bottom: 0;
  left: 58.333333%;
}

.u-hero-v1__last-inner {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  width: 30%;
  padding-left: 3rem;
  padding-right: 3rem;
}

.u-hero-v1__last-next {
  color: #0049d0;
}

.u-hero-v1__last-prev {
  color: #962319;
}

/*------------------------------------
  Indicator Dots
------------------------------------*/
.u-indicator-dots {
  position: relative;
}

@media (min-width: 768px) {
  .u-indicator-dots::after {
    position: absolute;
    right: -2.1875rem;
    top: 50%;
    width: 2.4375rem;
    height: .75rem;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 55 16'%3E %3Ccircle fill='%23e7eaf3' cx='27.7' cy='8.1' r='7.7'/%3E %3Ccircle fill='%23e7eaf3' cx='5' cy='8.1' r='5'/%3E %3Ccircle fill='%23e7eaf3' cx='50' cy='8.1' r='5'/%3E %3C/svg%3E");
    background-repeat: no-repeat;
    content: "";
    margin-top: -.375rem;
  }
}

/*------------------------------------
  Indicator - Vertical Dashed
------------------------------------*/
.u-indicator-vertical-dashed-item:not(:last-child) {
  position: relative;
  margin-bottom: 1rem;
}

.u-indicator-vertical-dashed-item:not(:last-child)::after {
  position: absolute;
  top: 1.625rem;
  bottom: -.8125rem;
  left: .625rem;
  border-left: 2px dashed #e7eaf3;
  content: "";
}

/*------------------------------------
  Indicator Vertical Line
------------------------------------*/
.u-indicator-vertical-line {
  position: relative;
}

@media (min-width: 768px) {
  .u-indicator-vertical-line::after {
    position: absolute;
    right: -.9375rem;
    top: 50%;
    height: 4rem;
    border-left: 1px solid rgba(30, 32, 34, 0.2);
    content: "";
    margin-top: -2rem;
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
}

/*------------------------------------
  Indicator Steps
------------------------------------*/
.u-indicator-steps {
  position: relative;
  padding-left: 2.5rem;
}

.u-indicator-steps::before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: -.25rem;
  width: 2rem;
  height: .0625rem;
  border-top: 1px solid #e7eaf3;
  margin: auto auto auto 0;
  content: "";
}

.u-indicator-steps::after {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: -.3125rem;
  width: .0625rem;
  height: 100%;
  border-right: 1px solid #e7eaf3;
  margin: auto auto auto 0;
  content: "";
}

.u-indicator-steps:first-child::after {
  height: 50%;
  top: auto;
}

.u-indicator-steps:last-child::after {
  height: 50%;
  bottom: auto;
}

.u-indicator-steps__inner {
  min-width: 3rem;
}

/*------------------------------------
  Media Player
------------------------------------*/
.u-media-player {
  color: #1e2022;
  transition: all 0.2s ease-in-out;
}

.u-media-player__icon {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  width: 3.75rem;
  height: 3.75rem;
  font-size: 0.8125rem;
  border-radius: 50%;
  color: #1e2022;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
}

.u-media-player__icon-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  margin-left: .125rem;
}

.u-media-player__icon--box-shadow {
  box-shadow: 0 0 2.5rem rgba(140, 152, 164, 0.3);
}

.u-media-player:hover .u-media-player__icon, .u-media-player:focus .u-media-player__icon {
  color: #377dff;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.u-media-player:hover .u-media-player__icon--primary, .u-media-player:focus .u-media-player__icon--primary {
  background-color: #377dff;
}

.u-media-player:hover .u-media-player__icon--success, .u-media-player:focus .u-media-player__icon--success {
  background-color: #00c9a7;
}

/* Colors */
.u-media-player:hover .u-media-player__icon--primary, .u-media-player:hover .u-media-player__icon--success, .u-media-player:focus .u-media-player__icon--primary, .u-media-player:focus .u-media-player__icon--success {
  color: #fff;
}

.u-media-player__icon--primary {
  color: #377dff;
  background-color: rgba(55, 125, 255, 0.1);
}

.u-media-player__icon--success {
  color: #00c9a7;
  background-color: rgba(0, 201, 167, 0.1);
}

/* Large Size */
.u-media-player__icon--lg {
  width: 5rem;
  height: 5rem;
  font-size: 1rem;
}

/* Extra Large Size */
.u-media-player__icon--xl {
  width: 6.25rem;
  height: 6.25rem;
  font-size: 1rem;
}

/* Positions */
.u-media-player--centered {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

@media (min-width: 992px) {
  .u-media-player--left-minus-50x-top-50x-lg {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}

/*------------------------------------
  Media Viewer
------------------------------------*/
.u-media-viewer {
  position: relative;
  display: block;
}

.u-media-viewer:hover .u-media-viewer__icon {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.u-media-viewer__container {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.u-media-viewer__icon {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 0.75rem;
  color: #fff;
  background-color: #377dff;
  border-radius: 50%;
  opacity: 0;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
  transition: 0.3s ease-in-out;
}

.u-media-viewer__icon:hover, .u-media-viewer__icon:focus {
  color: #fff;
}

.u-media-viewer__icon--active {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.u-media-viewer__icon-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

/*------------------------------------
  Video Player
------------------------------------*/
.u-video-player {
  position: relative;
  background-color: #000;
}

.u-video-player__preview {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 1;
  -o-object-fit: cover;
     object-fit: cover;
  transition: opacity 0.3s ease-in-out;
}

.u-video-player__played .u-video-player__preview {
  opacity: 0;
  pointer-events: none;
}

.u-video-player__btn {
  z-index: 3;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}

.u-video-player__played .u-video-player__btn {
  -webkit-animation: videoPlayerButton 0.4s ease-in-out forwards;
          animation: videoPlayerButton 0.4s ease-in-out forwards;
  pointer-events: none;
}

.u-video-player__btn:hover .u-video-player__icon, .u-video-player__btn:focus .u-video-player__icon {
  color: #377dff;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.u-video-player__icon {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 0.8125rem;
  border-radius: 50%;
  color: #1e2022;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
}

.u-video-player__icon-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  margin-left: .125rem;
}

/* Large Size */
.u-video-player__icon--lg {
  width: 5rem;
  height: 5rem;
  font-size: 1rem;
}

/* Positions */
.u-video-player__centered {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

@-webkit-keyframes videoPlayerButton {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(1.3);
            transform: translate(-50%, -50%) scale(1.3);
  }
}

@keyframes videoPlayerButton {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(1.3);
            transform: translate(-50%, -50%) scale(1.3);
  }
}

/*------------------------------------
  Mockup Browser v1
------------------------------------*/
.u-browser-v1 {
  position: relative;
  max-width: 53.125rem;
}

.u-browser-v1__svg {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  max-width: 85%;
  border-radius: 0.5rem;
  box-shadow: 0 0.625rem 2.5rem 0.625rem rgba(140, 152, 164, 0.175);
}

/*------------------------------------
  Mockup Devices v1
------------------------------------*/
.u-devices-v1 {
  position: absolute;
  top: 3rem;
  left: 50%;
  width: 40.625rem;
  -webkit-transform: rotate(-17deg);
          transform: rotate(-17deg);
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
}

.u-devices-v1__tablet-svg, .u-devices-v1__phone-svg {
  border-radius: 2.125rem;
  box-shadow: 0 0 10px 6px rgba(30, 32, 34, 0.05);
}

.u-devices-v1__tablet {
  width: 26.875rem;
  height: 34.3125rem;
}

.u-devices-v1__phone {
  width: 13.75rem;
  height: 27.5rem;
  margin-right: 1.25rem;
}

/*------------------------------------
  Devices v2
------------------------------------*/
.u-devices-v2 {
  position: relative;
  overflow: hidden;
}

.u-devices-v2__tablet {
  position: absolute;
  left: 0;
  top: 0%;
  z-index: 1;
  width: 34.375rem;
  height: 50.875rem;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
  -webkit-transform-origin: 90% -20%;
          transform-origin: 90% -20%;
}

@media (max-width: 991.98px) {
  .u-devices-v2__tablet {
    -webkit-transform-origin: 100% -40%;
            transform-origin: 100% -40%;
  }
}

.u-devices-v2__tablet-svg {
  border-radius: 1.85rem;
  box-shadow: 0 0 0.75rem 0.5rem rgba(30, 32, 34, 0.1);
}

.u-devices-v2__phone {
  position: absolute;
  right: 0;
  bottom: -25%;
  z-index: 1;
  width: 19.8125rem;
  height: 41.5625rem;
  -webkit-transform: rotate(-20deg);
          transform: rotate(-20deg);
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
}

.u-devices-v2__phone--left-position {
  position: absolute;
  right: auto;
  left: 0;
  -webkit-transform-origin: 100% 40%;
          transform-origin: 100% 40%;
}

@media (max-width: 1199.98px) {
  .u-devices-v2__phone--left-position {
    -webkit-transform-origin: 100% 65%;
            transform-origin: 100% 65%;
  }
}

.u-devices-v2__phone-svg {
  border-radius: 3rem;
  box-shadow: 0 0 0.75rem 0.5rem rgba(30, 32, 34, 0.1);
}

/*------------------------------------
  Devices v3
------------------------------------*/
.u-devices-v3 {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  right: 0;
  width: 40%;
  border-radius: 4.0625rem;
  box-shadow: 10px 15px 55px 15px rgba(140, 152, 164, 0.1);
}

/*------------------------------------
  Mockup Devices v4
------------------------------------*/
.u-devices-v4 {
  -webkit-transform: rotate(-25deg);
          transform: rotate(-25deg);
}

.u-devices-v4__content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 700px;
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.u-devices-v4__laptop {
  width: 35.9375rem;
  height: 20.75rem;
}

.u-devices-v4__tablet-svg, .u-devices-v4__tablet-ver-svg {
  border-radius: 1.375rem;
  box-shadow: 0 0 0.625rem 0.375rem rgba(30, 32, 34, 0.05);
}

.u-devices-v4__tablet {
  width: 17.1875rem;
  height: 25.4375rem;
  margin-left: 1.5625rem;
}

.u-devices-v4__tablet-ver {
  width: 25rem;
  height: 16.875rem;
}

.u-devices-v4__phone {
  width: 6.25rem;
  height: 13.0625rem;
  margin-left: 1.5625rem;
}

.u-devices-v4__phone-svg {
  border-radius: 1rem;
  box-shadow: 0 0 0.625rem 0.375rem rgba(30, 32, 34, 0.05);
}

/*------------------------------------
  Modal Window
------------------------------------*/
.u-modal-window {
  display: none;
  max-height: 85vh;
}

/*------------------------------------
  Modal Window - Facebook
------------------------------------*/
.u-modal--facebook {
  width: 31.25rem;
  border-radius: 0.3125rem;
}

.u-modal--facebook__body {
  position: relative;
  background-color: #3b5998;
  border-top-left-radius: 0.3125rem;
  border-top-right-radius: 0.3125rem;
}

.u-modal--facebook__body::after {
  position: absolute;
  left: 5rem;
  top: 100%;
  display: block;
  border-style: solid;
  border-width: 1.125rem 1.375rem 0 0;
  border-color: #3b5998 transparent transparent transparent;
  content: "";
}

.u-modal--facebook__space {
  padding: 2rem;
}

.u-modal--facebook__content {
  background-color: #fff;
  padding: 2rem;
}

.u-modal--facebook__navbar {
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.u-modal--facebook__navbar-logo {
  width: 7.5rem;
}

.u-modal--facebook__text {
  font-weight: 300;
  color: #fff;
  margin-bottom: 0;
}

/*------------------------------------
  Page Preloader
------------------------------------*/
.page-preloader {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1002;
  background-color: #fff;
}

.page-preloader__content-centered {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  height: 100%;
}

/*------------------------------------
  Pagination
------------------------------------*/
.page-link {
  cursor: pointer;
  text-align: center;
  min-width: 2.25rem;
}

.page-item {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.page-item .page-link {
  border-top-left-radius: 0.3125rem;
  border-bottom-left-radius: 0.3125rem;
}

.page-item .page-link {
  border-top-right-radius: 0.3125rem;
  border-bottom-right-radius: 0.3125rem;
}

/*------------------------------------
  Navs
------------------------------------*/
.nav-classic {
  border-bottom: 1px solid #e7eaf3;
}

.nav-classic .nav-link {
  color: #77838f;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 1rem 1.5rem;
  margin-bottom: -.125rem;
  transition: 0.3s;
}

.nav-classic .nav-link:hover {
  color: #377dff;
}

.nav-classic .nav-link.active {
  color: #377dff;
  border-bottom-color: #377dff;
}

.nav-borderless {
  border-color: transparent;
}

.nav-rounded {
  border-radius: 0.3125rem;
}

.nav-rounded .nav-item:first-child .nav-link {
  border-bottom-left-radius: 0.3125rem;
}

.nav-rounded .nav-item:last-child .nav-link {
  border-bottom-right-radius: 0.3125rem;
}

.nav-shadow {
  box-shadow: 0 3px 6px 0 rgba(140, 152, 164, 0.25);
}

.nav .nav-item:not(:first-child) {
  margin-left: .25rem;
}

.nav .nav-item:not(:last-child) {
  margin-right: .25rem;
}

/* White Color */
.nav-white .nav-link {
  color: rgba(255, 255, 255, 0.7);
}

.nav-white .nav-link.active {
  color: #377dff;
  background-color: #fff;
}

.nav-white .nav-link:not(.active):hover {
  color: #fff;
}

/* White Border Color */
.nav-border-white .nav-link {
  color: rgba(255, 255, 255, 0.7);
  border-bottom: 2px solid transparent;
}

.nav-border-white .nav-link.active {
  color: #fff;
  border-bottom-color: #fff;
}

.nav-border-white .nav-link:not(.active):hover {
  color: #fff;
}

/* Box */
.nav-box .nav-link {
  color: #1e2022;
  border: 1px solid transparent;
  border-radius: 0.3125rem;
}

.nav-box .nav-link.active {
  color: #377dff;
  background-color: #fff;
  border-color: #e7eaf3;
  box-shadow: 0 0 35px rgba(140, 152, 164, 0.125);
}

.nav-box .nav-link:hover {
  border-color: #e7eaf3;
  box-shadow: 0 0 35px rgba(140, 152, 164, 0.125);
}

/* Nav Steps */
.nav-icon .nav-item {
  color: #77838f;
}

.nav-icon .nav-item.active {
  color: #377dff;
}

.nav-icon .nav-item.active .nav-icon-action {
  color: #fff;
  background-color: #377dff;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.nav-icon-action {
  position: relative;
  display: block;
  vertical-align: middle;
  text-align: center;
  z-index: 1;
  line-height: 0.7;
  width: 4rem;
  height: 4rem;
  font-size: 1.375rem;
  color: #77838f;
  background-color: rgba(119, 131, 143, 0.1);
  border-radius: 50%;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: .5rem;
  transition: 0.3s ease-in-out;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}

.nav-icon-action-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

/*------------------------------------
  Blog Thumb Minimal
------------------------------------*/
.u-blog-thumb-minimal {
  padding: .5rem;
  transition: 0.3s ease-in-out;
}

.u-blog-thumb-minimal, .u-blog-thumb-minimal__img {
  border-radius: 0.3125rem;
}

.u-blog-thumb-minimal:hover {
  background-color: #196eff;
}

.u-blog-thumb-minimal__img-wrapper {
  width: 5rem;
}

/*------------------------------------
  Vertical Progress Bar
------------------------------------*/
.progress-vertical {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  -ms-flex-pack: end;
      justify-content: flex-end;
  background-color: #f8fafd;
  height: 12.5rem;
}

/*------------------------------------
  Paging Modern
------------------------------------*/
.u-paging-modern .u-paging-modern__arrow-icon-prev, .u-paging-modern .u-paging-modern__arrow-icon-next {
  transition: 0.3s;
}

.u-paging-modern .u-paging-modern__arrow-icon-prev {
  margin-right: 1rem;
}

.u-paging-modern .u-paging-modern__arrow-icon-next {
  margin-left: 1rem;
}

.u-paging-modern:hover .u-paging-modern__arrow-icon-prev {
  -webkit-transform: translateX(-8px);
          transform: translateX(-8px);
}

.u-paging-modern:hover .u-paging-modern__arrow-icon-next {
  -webkit-transform: translateX(8px);
          transform: translateX(8px);
}

.u-paging-modern-view-all {
  color: #fff;
  text-align: center;
  background-color: #ffc107;
}

.u-paging-modern-view-all__icon {
  display: block;
  font-size: 2rem;
  margin-bottom: .5rem;
  transition: 0.3s;
}

.u-paging-modern-view-all:hover {
  color: #fff;
}

.u-paging-modern-view-all:hover .u-paging-modern-view-all__icon {
  -webkit-transform: translateY(-8px);
          transform: translateY(-8px);
}

/*------------------------------------
  Popover
------------------------------------*/
.popover-header {
  font-weight: 500;
}

/*------------------------------------
  Quantity
------------------------------------*/
.u-quantity {
  width: 4rem;
}

.u-quantity > .u-quantity__input {
  padding-right: 1.875rem;
}

.u-quantity > .u-quantity__input:not(:last-child) {
  border-radius: 0.3125rem;
}

.u-quantity__arrows {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  right: .75rem;
  z-index: 3;
}

.u-quantity__arrows-inner {
  display: block;
  color: #77838f;
  cursor: pointer;
}

.u-quantity__arrows-inner:hover {
  color: #377dff;
}

/*------------------------------------
  Search Form - Push Top
------------------------------------*/
.u-search-push-top {
  display: none;
  background-color: #f8fafd;
  padding-top: 3rem;
  padding-bottom: 3rem;
  box-shadow: inset 0 -10px 20px -10px rgba(151, 164, 175, 0.05);
}

.u-search-push-top__content {
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
}

.u-search-push-top__close-btn {
  position: absolute;
  top: -1.5625rem;
  right: .4375rem;
}

@media (max-width: 575.98px) {
  .u-search-push-top {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

/* Banner */
.u-search-push-top__banner {
  background-color: #fff;
  box-shadow: 0 10px 25px rgba(151, 164, 175, 0.05);
  padding-right: 1.5625rem;
  padding-top: 1.875rem;
  overflow: hidden;
}

.u-search-push-top__banner-container {
  position: relative;
  width: 75%;
  min-height: 11.5625rem;
}

.u-search-push-top__banner-img {
  position: absolute;
  bottom: -.625rem;
  left: -.625rem;
  transition: all .3s ease-in-out;
}

.u-search-push-top__banner:hover .u-search-push-top__banner-img:first-child {
  bottom: 0;
  left: 0;
}

/*------------------------------------
  Search Form - Slide Down
------------------------------------*/
.u-search-slide-down {
  position: absolute;
  z-index: 1003;
  top: 5rem;
  left: calc(50% - 18rem) !important;
  width: 36rem;
}

.u-search-slide-down-trigger.active .u-search-slide-down-trigger__icon::before {
  content: "\f00d";
}

.u-search-slide-down-bg-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1002;
  display: none;
  width: 100%;
  height: 100%;
}

.u-search-slide-down .u-search-slide-down__input {
  opacity: 0;
  -webkit-transform: translateY(-2rem);
          transform: translateY(-2rem);
  transition: opacity 0.2s, -webkit-transform 0.3s cubic-bezier(0.37, 0.41, 0.55, 0.98);
  transition: transform 0.3s cubic-bezier(0.37, 0.41, 0.55, 0.98), opacity 0.2s;
  transition: transform 0.3s cubic-bezier(0.37, 0.41, 0.55, 0.98), opacity 0.2s, -webkit-transform 0.3s cubic-bezier(0.37, 0.41, 0.55, 0.98);
}

.u-search-slide-down .u-search-slide-down__suggestions {
  opacity: 0;
  -webkit-transform: translateY(-3rem);
          transform: translateY(-3rem);
  transition: opacity 0.2s, -webkit-transform 0.4s cubic-bezier(0.37, 0.41, 0.55, 0.98);
  transition: transform 0.4s cubic-bezier(0.37, 0.41, 0.55, 0.98), opacity 0.2s;
  transition: transform 0.4s cubic-bezier(0.37, 0.41, 0.55, 0.98), opacity 0.2s, -webkit-transform 0.4s cubic-bezier(0.37, 0.41, 0.55, 0.98);
}

.u-search-slide-down.active .u-search-slide-down__input,
.u-search-slide-down.active .u-search-slide-down__suggestions {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}

.u-search-slide-down.active .u-search-slide-down__suggestions {
  transition-delay: 0.2s;
}

/*------------------------------------
  Slick
------------------------------------*/
.u-slick {
  position: relative;
}

.u-slick--transform-off.slick-transform-off .slick-track {
  -webkit-transform: none !important;
          transform: none !important;
}

.u-slick-thumb-progress {
  width: 110%;
  height: 110%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

/*------------------------------------
  Slick Equal Height
------------------------------------*/
.u-slick--equal-height .slick-list {
  height: 100%;
}

.u-slick--equal-height .slick-track {
  display: -ms-flexbox;
  display: flex;
  height: 100%;
}

.u-slick--equal-height .slick-track .slick-slide {
  display: -ms-flexbox;
  display: flex;
  height: auto;
}

/*------------------------------------
  Slick Gutters
------------------------------------*/
/* Gutters X */
.u-slick--gutters-1 {
  margin-left: -.25rem;
  margin-right: -.25rem;
}

.u-slick--gutters-1 .slick-slide {
  margin-left: .25rem;
  margin-right: .25rem;
}

.u-slick--gutters-2 {
  margin-left: -.5rem;
  margin-right: -.5rem;
}

.u-slick--gutters-2 .slick-slide {
  margin-left: .5rem;
  margin-right: .5rem;
}

.u-slick--gutters-3 {
  margin-left: -.9375rem;
  margin-right: -.9375rem;
}

.u-slick--gutters-3 .slick-slide {
  margin-left: .9375rem;
  margin-right: .9375rem;
}

/*------------------------------------
  Slick Zoom
------------------------------------*/
.u-slick-zoom .slick-slide .u-slick-zoom__slide {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  transition: all 0.5s ease-in-out;
}

.u-slick-zoom .slick-center .u-slick-zoom__slide {
  -webkit-transform: scale(1);
          transform: scale(1);
}

/*------------------------------------
  Slick Arrows
------------------------------------*/
.u-slick__arrow {
  z-index: 1;
  line-height: 0;
  display: inline-block;
  color: #377dff;
  background-color: rgba(55, 125, 255, 0.1);
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: 0.3s;
}

.u-slick__arrow:hover {
  color: #fff;
  background-color: #377dff;
}

.u-slick__arrow-inner:before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.u-slick__arrow-inner--left {
  left: 0;
}

.u-slick__arrow-inner--right {
  right: 0;
}

/* Flat */
.u-slick__arrow--flat {
  color: #fff;
  background-color: rgba(55, 125, 255, 0.8);
}

/* Flat White */
.u-slick__arrow--flat-white {
  color: #1e2022;
  background-color: #fff;
}

.u-slick__arrow--flat-white:hover {
  color: #377dff;
  background-color: #fff;
}

/* Offset */
@media (min-width: 992px) {
  .u-slick__arrow--offset.u-slick__arrow-inner--left {
    left: -2.5rem;
  }
  .u-slick__arrow--offset.u-slick__arrow-inner--right {
    right: -2.5rem;
  }
}

/* Vertical Center Alignment */
.u-slick__arrow-centered--y {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}

/*------------------------------------
  Slick Arrows Classic
------------------------------------*/
.u-slick__arrow-classic {
  z-index: 1;
  line-height: 0;
  display: inline-block;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: 0.3s;
}

.u-slick__arrow-classic:hover {
  color: #fff;
  background-color: #377dff;
}

.u-slick__arrow-classic-inner:before {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.u-slick__arrow-classic-inner--left {
  left: 0;
}

.u-slick__arrow-classic-inner--right {
  right: 0;
}

/*------------------------------------
  Slick Paging
------------------------------------*/
.u-slick__paging {
  position: absolute;
  bottom: 2rem;
  right: 0;
  padding-left: .9375rem;
  padding-right: .9375rem;
}

.u-slick__paging .u-paging__current {
  color: #fff;
  font-size: 3.875rem;
  font-weight: 300;
  line-height: 1;
}

.u-slick__paging .u-paging__divider {
  position: relative;
  margin-right: .5rem;
  margin-left: .25rem;
}

.u-slick__paging .u-paging__divider::before {
  position: absolute;
  top: 0;
  left: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  content: "\002f";
}

.u-slick__paging .u-paging__total {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.7);
}

/*------------------------------------
  Slick Pagination
------------------------------------*/
.u-slick__pagination {
  padding-left: 0;
}

.u-slick__pagination:not(.u-slick__pagination--block) {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  pointer-events: none;
}

.u-slick__pagination li {
  display: -ms-flexbox;
  display: flex;
  pointer-events: all;
  margin: 0 .25rem;
  cursor: pointer;
}

.u-slick__pagination li span {
  display: inline-block;
  width: 0.9375rem;
  height: 0.9375rem;
  box-sizing: border-box;
  background-color: #377dff;
  border: 3px solid transparent;
  border-radius: 50%;
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
  transition: 0.3s;
}

.u-slick__pagination li.slick-active span {
  background-color: transparent;
  border-color: #377dff;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}

/* White Version */
.u-slick__pagination--white li span {
  background-color: #fff;
}

.u-slick__pagination--white li.slick-active span {
  border-color: #fff;
}

/* Block */
.u-slick__pagination--block li {
  display: block;
}

/* Vertical Center Alignment */
.u-slick__pagination-centered--y {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}

@media (min-width: 992px) {
  /* Vertical Option */
  .u-slick__pagination--vertical-lg li {
    display: block;
    margin: .25rem 0;
  }
  /* Vertical Option Positions */
  .u-slick__pagination--vertical-pos-v1-lg {
    position: absolute;
    top: 50%;
    left: -15.7%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}

/*------------------------------------
  Slick Pagination Modern
------------------------------------*/
.u-slick--pagination-modern {
  width: 100%;
  max-width: 12.5rem;
}

.u-slick--pagination-modern .slick-slide {
  cursor: pointer;
  opacity: 0.7;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transition: 0.3s;
}

.u-slick--pagination-modern .slick-current {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

/*------------------------------------
  Slick Pagination Interactive
------------------------------------*/
.u-slick--pagination-interactive__text {
  color: rgba(255, 255, 255, 0.7);
}

.u-slick--pagination-interactive .slick-slide {
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  transition: 0.3s;
}

.u-slick--pagination-interactive .slick-slide:hover {
  background: rgba(255, 255, 255, 0.15);
}

.u-slick--pagination-interactive .slick-slide:hover.slick-center {
  background: #fff;
}

.u-slick--pagination-interactive .slick-center {
  background: #fff;
}

.u-slick--pagination-interactive .slick-center .u-slick--pagination-interactive__title {
  color: #377dff;
}

.u-slick--pagination-interactive .slick-center .u-slick--pagination-interactive__text {
  color: #77838f;
}

/*------------------------------------
  Spinner
------------------------------------*/
.spinner-border,
.spinner-grow {
  vertical-align: middle;
}

/*------------------------------------
  Stats Progress
------------------------------------*/
.u-stats-progress {
  position: relative;
  width: 13.75rem;
  height: 13.75rem;
  border-radius: 50%;
  box-shadow: 0 0.375rem 1.5rem 0 rgba(140, 152, 164, 0.125);
  margin-left: auto;
  margin-right: auto;
}

.u-stats-progress__info {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  left: 0;
  right: 0;
  padding: 2rem;
  text-align: center;
}

/*------------------------------------
  SVG
------------------------------------*/
.svg-preloader {
  z-index: -1;
  background: transparent url(../svg/preloaders/circle-preloader.svg) center no-repeat !important;
  overflow: hidden;
  transition: all 0.4s ease-in;
}

.svg-preloader *:not(.u-icon):not(.btn):not(.u-media-player):not(.u-media-player__icon):not(.u-label) {
  opacity: 0;
  transition: opacity 0.4s ease-in;
}

/*------------------------------------
  SVG IE10+ specific styles go here
------------------------------------*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .u-header__promo-icon {
    height: 48px;
  }
  .ie-height-24 {
    height: 24px;
  }
  .ie-height-40 {
    height: 40px;
  }
  .ie-height-48 {
    height: 48px;
  }
  .ie-height-56 {
    height: 56px;
  }
  .ie-height-72 {
    height: 72px;
  }
  .ie-height-90 {
    height: 90px;
  }
  .ie-height-111 {
    height: 111px;
  }
  .ie-main-hero {
    height: 686px;
  }
  .ie-soft-triangle-shape {
    height: 610px;
  }
  .ie-browser {
    height: 565px;
  }
  .ie-wave-1-bottom {
    height: 100px;
  }
  .ie-vault,
  .ie-responsive,
  .ie-easy-payment {
    height: 210px;
  }
  .ie-devices-v1-tablet {
    height: 38.5rem;
  }
  .ie-devices-v1-phone {
    height: 27.5rem;
  }
  .ie-devices-v2-tablet {
    height: 37.875rem;
  }
  .ie-devices-v2-iphone {
    height: 31rem;
  }
  .ie-devices-v3-iphone {
    height: 633px;
  }
  .ie-devices-v4-tablet-horizontal {
    height: 16.875rem;
  }
  .ie-devices-v4-tablet {
    height: 25.4375rem;
  }
  .ie-devices-v4-laptop {
    height: 20.75rem;
  }
  .ie-devices-v4-iphone {
    height: 13.0625rem;
  }
  .ie-wave-6-top-left {
    height: 379px;
  }
  .ie-double-ellipse-top-right {
    height: 431px;
  }
  .ie-double-ellipse-top-left {
    height: 788px;
  }
  .ie-double-ellipse-bottom-right {
    height: 252px;
  }
  .ie-ellipse-mockup {
    height: 656px;
  }
  .ie-irregular-shape-2-right {
    height: 660px;
  }
  .ie-irregular-shape-3-bottom {
    height: 255px;
  }
  .ie-circle-chart {
    height: 219px;
  }
  .ie-curved-shape {
    height: 55.8px;
  }
  .ie-subscribe-illustration {
    height: 329px;
  }
  .ie-subscribe-1 {
    height: 315px;
  }
  .ie-subscribe-2 {
    height: 295px;
  }
  .ie-subscribe-2-flat-icons {
    height: 200px;
  }
  .ie-color-gradient {
    height: 566px;
  }
  .ie-for-sale,
  .ie-buyer {
    height: 208px;
  }
  .ie-events,
  .ie-data-report,
  .ie-image-upload {
    height: 219px;
  }
  .ie-analysis,
  .ie-in-the-office,
  .ie-make-it-rain {
    height: 200px;
  }
  .ie-house-agency {
    height: 381px;
  }
  .ie-laptop-and-iphone {
    height: 421px;
  }
  .ie-get-answered {
    height: 386px;
  }
  .ie-bg-elements-1 {
    height: 420px;
  }
  .ie-bg-elements-2 {
    height: 374px;
  }
  .ie-bg-elements-3 {
    height: 583px;
  }
  .ie-bg-elements-4 {
    height: 850px;
  }
  .ie-circle-1 {
    height: 379px;
  }
  .ie-go-to-wave {
    height: 46px;
  }
  .ie-graphic-illustration-1 {
    height: 270px;
  }
  .ie-app-development {
    height: 328px;
  }
  .ie-we-have-an-idea {
    height: 335px;
  }
  .ie-chatting-girl,
  .ie-chatting-boy {
    height: 328px;
  }
  .ie-virtual-reality {
    height: 320px;
  }
  .ie-maintenance-mode {
    height: 200px;
  }
  .ie-non-standard-hero-shape {
    height: 556px;
  }
  .ie-enterprise-2 {
    height: 267px;
  }
  .ie-abstract-shapes-1 {
    height: 554px;
  }
  .ie-abstract-shapes-2,
  .ie-abstract-shapes-3,
  .ie-abstract-shapes-4 {
    height: 532px;
  }
  .ie-abstract-shapes-6 {
    height: 187px;
  }
  .ie-abstract-shapes-7 {
    height: 624px;
  }
  .ie-abstract-shapes-9 {
    height: 182px;
  }
  .ie-abstract-shapes-10 {
    height: 573px;
  }
  .ie-abstract-shapes-11 {
    height: 192px;
  }
  .ie-abstract-shapes-12 {
    height: 597px;
  }
  .ie-abstract-shapes-13,
  .ie-abstract-shapes-14 {
    height: 615px;
  }
  .ie-showcase-mockup-1 {
    height: 384px;
  }
  .ie-showcase-mockup-2 {
    height: 371px;
  }
  .ie-showcase-mockup-3 {
    height: 535px;
  }
  .ie-knowledgebase-community {
    height: 447px;
  }
  .ie-knowledgebase-community-2 {
    height: 542px;
  }
  .ie-files {
    height: 293px;
  }
  .ie-half-circle-1-1 {
    height: 1136px;
  }
  .ie-half-circle-2-1 {
    height: 835px;
  }
  .ie-half-circle-2-2 {
    height: 660px;
  }
  .ie-iphone-x-1 {
    height: 601px;
  }
  .ie-half-iphone-x-1-iphone {
    height: 372px;
  }
  .ie-circles-hero,
  .ie-circles-cta {
    display: none;
  }
  .ie-communicating-men {
    height: 531px;
  }
  .ie-devices-1 {
    height: 637px;
  }
  .ie-support-man,
  .ie-list-app {
    height: 215px;
  }
  .ie-mobile-article {
    height: 268px;
  }
  .ie-working-men {
    height: 325px;
  }
  .ie-server-woman {
    height: 432px;
  }
  .ie-drawing-woman {
    height: 415px;
  }
  .ie-subscribe-3 {
    height: 338px;
  }
  .ie-hiker-man {
    height: 405px;
  }
  .ie-chatting-man {
    height: 268px;
  }
}

/*------------------------------------
  Tables
------------------------------------*/
.table-heighlighted thead th {
  border-bottom-color: #1e2022;
  border-top: none;
}

.table-heighlighted tfoot td {
  border-top: 2px solid #1e2022;
}

.table-light-bordered {
  border-color: rgba(255, 255, 255, 0.3);
}

.table-light-bordered thead th,
.table-light-bordered th,
.table-light-bordered td {
  border-color: rgba(255, 255, 255, 0.3);
}

/*------------------------------------
  Timeline
------------------------------------*/
.u-timeline {
  list-style: none;
  padding-left: 1rem;
  margin-bottom: 0;
}

.u-timeline__item {
  position: relative;
  padding-right: .9375rem;
  padding-left: 2rem;
}

.u-timeline__item:not(:last-child) {
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}

.u-timeline__item::before {
  position: absolute;
  top: 3.5rem;
  bottom: 0;
  left: 0;
  height: auto;
  border-left: 0.1875rem solid #e7eaf3;
  content: "";
}

.u-timeline__icon {
  position: absolute;
  left: -.875rem;
}

.u-timeline__heading {
  position: relative;
  display: block;
  font-size: 1.25rem;
  font-weight: 500;
  padding-bottom: .75rem;
  margin-bottom: 1rem;
}

.u-timeline__heading::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 0.1rem solid #e7eaf3;
  content: "";
}

/*------------------------------------
  Sticky Blocks
------------------------------------*/
[class*="sticky-block"] {
  max-width: 100%;
}

/*------------------------------------
  Background Gradients
------------------------------------*/
.gradient-half-primary-body-v1 {
  background-image: linear-gradient(150deg, #2d1582 0%, #19a0ff 100%);
  background-repeat: repeat-x;
  background-attachment: fixed;
}

.gradient-half-primary-v1 {
  background-image: linear-gradient(150deg, #2d1582 0%, #19a0ff 100%);
  background-repeat: repeat-x;
}

.gradient-half-primary-v2 {
  background-image: linear-gradient(0deg, rgba(55, 125, 255, 0.05) 0%, transparent 100%);
  background-repeat: repeat-x;
}

.gradient-half-primary-v3 {
  background-image: linear-gradient(0deg, rgba(55, 125, 255, 0.1) 0%, transparent 100%);
  background-repeat: repeat-x;
}

.gradient-half-primary-v4 {
  background-image: linear-gradient(150deg, #2d1582 0%, #19a0ff 85%);
  background-repeat: repeat-x;
}

.gradient-half-primary-v5 {
  background-image: linear-gradient(150deg, #377dff 0%, #2d1582 100%);
  background-repeat: repeat-x;
}

.gradient-half-info-v1 {
  background-image: linear-gradient(0deg, #377dff 0%, #00dffc 100%);
  background-repeat: repeat-x;
}

.gradient-half-warning-v1 {
  background-image: linear-gradient(25deg, #ffc107 30%, #de4437 100%);
  background-repeat: repeat-x;
}

.gradient-half-warning-v2 {
  background-image: linear-gradient(150deg, #ffc107 0%, #efa02e 100%);
  background-repeat: repeat-x;
}

.gradient-half-warning-v3 {
  background-image: linear-gradient(150deg, #ffc107 0%, #de4437 100%);
  background-repeat: repeat-x;
}

/*------------------------------------
  Background Overlay Gradients
------------------------------------*/
[class*="gradient-overlay-half"] {
  position: relative;
  z-index: 1;
}

[class*="gradient-overlay-half"]::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  content: "";
}

.gradient-overlay-half-primary-video-v1::before {
  z-index: 2;
  background-image: linear-gradient(150deg, rgba(45, 21, 130, 0.9) 0%, rgba(25, 160, 255, 0.85) 100%);
  background-repeat: repeat-x;
}

.gradient-overlay-half-primary-v1::before {
  background-image: linear-gradient(150deg, rgba(45, 21, 130, 0.9) 0%, rgba(25, 160, 255, 0.85) 100%);
  background-repeat: repeat-x;
}

.gradient-overlay-half-primary-v2::before {
  background-image: linear-gradient(30deg, rgba(25, 160, 255, 0.85) 0%, rgba(45, 21, 130, 0.9) 100%);
  background-repeat: repeat-x;
}

.gradient-overlay-half-primary-v3::before {
  background-image: linear-gradient(90deg, #377dff 0%, #0055e5 100%);
  background-repeat: repeat-x;
}

.gradient-overlay-half-primary-v4::before {
  background-image: linear-gradient(0deg, rgba(55, 125, 255, 0.025) 0%, #fff 100%);
  background-repeat: repeat-x;
}

.gradient-overlay-half-indigo-v1::before {
  background-image: linear-gradient(45deg, transparent 50%, rgba(45, 21, 130, 0.1) 100%);
  background-repeat: repeat-x;
}

.gradient-overlay-half-info-v1::before {
  background-image: linear-gradient(0deg, rgba(55, 125, 255, 0.92) 0%, rgba(0, 223, 252, 0.92) 100%);
  background-repeat: repeat-x;
}

.gradient-overlay-half-dark-v1::before {
  background-image: linear-gradient(0deg, #1e2022 0%, transparent 75%);
  background-repeat: repeat-x;
}

.gradient-overlay-half-dark-v2::before {
  background-image: linear-gradient(150deg, rgba(34, 48, 73, 0.675) 0%, rgba(119, 131, 143, 0.3) 100%);
  background-repeat: repeat-x;
}

/*------------------------------------
  Fill Colors
------------------------------------*/
.fill-none {
  fill: none !important;
}

.fill-white {
  fill: #fff !important;
}

.fill-dark {
  fill: #1e2022 !important;
}

.fill-primary {
  fill: #377dff !important;
}

.fill-primary-lighter {
  fill: #19a0ff !important;
}

.fill-primary-darker {
  fill: #196eff !important;
}

.fill-success {
  fill: #00c9a7 !important;
}

.fill-success-lighter {
  fill: #13d7b6 !important;
}

.fill-info {
  fill: #00dffc !important;
}

.fill-danger {
  fill: #de4437 !important;
}

.fill-danger-lighter {
  fill: #ec5245 !important;
}

.fill-warning {
  fill: #ffc107 !important;
}

.fill-warning-lighter {
  fill: #fdd14e !important;
}

.fill-warning-darker {
  fill: #efa02e !important;
}

.fill-gray-100 {
  fill: #f8f9fa !important;
}

.fill-gray-200 {
  fill: #f8fafd !important;
}

.fill-gray-300 {
  fill: #e7eaf3 !important;
}

.fill-gray-400 {
  fill: #bdc5d1 !important;
}

.fill-gray-500 {
  fill: #97a4af !important;
}

.fill-gray-600 {
  fill: #8c98a4 !important;
}

/*------------------------------------
  Stop Colors
------------------------------------*/
.stop-color-white {
  stop-color: #fff !important;
}

.stop-color-primary {
  stop-color: #377dff !important;
}

.stop-color-primary-darker {
  stop-color: #196eff !important;
}

.stop-color-primary-lighter {
  stop-color: #19a0ff !important;
}

.stop-color-warning {
  stop-color: #ffc107 !important;
}

.stop-color-danger {
  stop-color: #de4437 !important;
}

.stop-color-info {
  stop-color: #00dffc !important;
}

.stop-color-indigo {
  stop-color: #2d1582 !important;
}

/*------------------------------------
  Stroke Colors
------------------------------------*/
.stroke-white {
  stroke: #fff !important;
}

.stroke-primary {
  stroke: #377dff !important;
}

.stroke-primary-lighter {
  stroke: #19a0ff !important;
}

.stroke-primary-darker {
  stroke: #196eff !important;
}

.stroke-success {
  stroke: #00c9a7 !important;
}

.stroke-danger {
  stroke: #de4437 !important;
}

.stroke-warning {
  stroke: #ffc107 !important;
}

.stroke-info {
  stroke: #00dffc !important;
}

.stroke-gray-200 {
  stroke: #f8fafd !important;
}

.stroke-gray-300 {
  stroke: #e7eaf3 !important;
}

.stroke-gray-400 {
  stroke: #bdc5d1 !important;
}

.stroke-gray-500 {
  stroke: #97a4af !important;
}

/*------------------------------------
  Background Image Style
------------------------------------*/
.bg-img-hero {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

.bg-img-hero-bottom {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
}

.bg-img-hero-center {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.bg-img-hero-fixed {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

/*------------------------------------
  Background Soft Colors
------------------------------------*/
.bg-soft-primary {
  background-color: rgba(55, 125, 255, 0.1);
}

.bg-soft-secondary {
  background-color: rgba(119, 131, 143, 0.1);
}

.bg-soft-success {
  background-color: rgba(0, 201, 167, 0.1);
}

.bg-soft-info {
  background-color: rgba(0, 223, 252, 0.1);
}

.bg-soft-warning {
  background-color: rgba(255, 193, 7, 0.1);
}

.bg-soft-danger {
  background-color: rgba(222, 68, 55, 0.1);
}

.bg-soft-light {
  background-color: rgba(248, 249, 250, 0.1);
}

.bg-soft-dark {
  background-color: rgba(30, 32, 34, 0.1);
}

.bg-soft-white {
  background-color: rgba(255, 255, 255, 0.1);
}

.bg-soft-indigo {
  background-color: rgba(45, 21, 130, 0.1);
}

.bg-soft-facebook {
  background-color: rgba(59, 89, 152, 0.1);
}

.bg-soft-google {
  background-color: rgba(209, 65, 48, 0.1);
}

.bg-soft-twitter {
  background-color: rgba(29, 161, 242, 0.1);
}

.bg-soft-instagram {
  background-color: rgba(63, 114, 155, 0.1);
}

.bg-soft-github {
  background-color: rgba(36, 41, 46, 0.1);
}

.bg-soft-gray {
  background-color: rgba(248, 250, 253, 0.1);
}

.bg-soft-light {
  background-color: #f8f9fa;
}

/*------------------------------------
  Borders-radius
------------------------------------*/
.rounded-pill {
  border-radius: 6.1875rem;
}

.rounded-top-pill {
  border-top-left-radius: 6.1875rem;
  border-top-right-radius: 6.1875rem;
}

.rounded-right-pill {
  border-top-right-radius: 6.1875rem;
  border-bottom-right-radius: 6.1875rem;
}

.rounded-bottom-pill {
  border-bottom-right-radius: 6.1875rem;
  border-bottom-left-radius: 6.1875rem;
}

.rounded-left-pill {
  border-top-left-radius: 6.1875rem;
  border-bottom-left-radius: 6.1875rem;
}

.rounded-top-left-pill {
  border-top-left-radius: 6.1875rem;
}

.rounded-bottom-left-pill {
  border-bottom-left-radius: 6.1875rem;
}

.rounded-pseudo {
  border-radius: 0.3125rem;
}

.rounded-pseudo::before, .rounded-pseudo::after {
  border-radius: 0.3125rem;
}

.rounded-top-pseudo {
  border-top-left-radius: 0.3125rem;
  border-top-right-radius: 0.3125rem;
}

.rounded-top-pseudo::before, .rounded-top-pseudo::after {
  border-top-left-radius: 0.3125rem;
  border-top-right-radius: 0.3125rem;
}

/*------------------------------------
  Borders
------------------------------------*/
.border-dashed {
  border: 1px dashed #e7eaf3;
}

/*------------------------------------
  Position Spaces
------------------------------------*/
.top-0 {
  top: 0;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

@media (min-width: 576px) {
  .position-sm-absolute {
    position: absolute;
  }
}

@media (min-width: 768px) {
  .top-md-0 {
    top: 0;
  }
  .right-md-0 {
    right: 0;
  }
  .bottom-md-0 {
    bottom: 0;
  }
  .left-md-0 {
    left: 0;
  }
  .position-md-absolute {
    position: absolute;
  }
}

@media (min-width: 992px) {
  .top-lg-0 {
    top: 0;
  }
  .right-lg-0 {
    right: 0;
  }
  .bottom-lg-0 {
    bottom: 0;
  }
  .left-lg-0 {
    left: 0;
  }
  .position-lg-absolute {
    position: absolute;
  }
}

/*------------------------------------
  Content Centered
------------------------------------*/
.content-centered-y {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}

@media (min-width: 768px) {
  .content-centered-y--md {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }
}

@media (min-width: 992px) {
  .content-centered-y--lg {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
  }
}

/*------------------------------------
  Margin Spacing
------------------------------------*/
.ml-n2 {
  margin-left: -.5rem;
}

.ml-n3 {
  margin-left: -1rem;
}

.mr-n2 {
  margin-right: -.5rem;
}

.mt-n1 {
  margin-top: -.25rem;
}

.mt-n5 {
  margin-top: -2rem;
}

.mt-n6 {
  margin-top: -2.5rem;
}

.mt-n9 {
  margin-top: -4rem;
}

.mt-n23 {
  margin-top: -10rem;
}

.mb-n3 {
  margin-bottom: -1rem;
}

.mb-n9 {
  margin-bottom: -4rem;
}

/* Gutters X */
.mx-gutters-1 {
  margin-right: -.25rem;
  margin-left: -.25rem;
}

.mx-gutters-1 > .col,
.mx-gutters-1 > [class*="col-"] {
  padding-right: .25rem;
  padding-left: .25rem;
}

.mx-gutters-2 {
  margin-right: -.5rem;
  margin-left: -.5rem;
}

.mx-gutters-2 > .col,
.mx-gutters-2 > [class*="col-"] {
  padding-right: .5rem;
  padding-left: .5rem;
}

/*------------------------------------
  Opacity
------------------------------------*/
.opacity-md {
  opacity: .2;
}

/*------------------------------------
  Box Shadow
------------------------------------*/
.shadow-primary-lg {
  box-shadow: 0 0 50px rgba(55, 125, 255, 0.4) !important;
}

.shadow-soft {
  box-shadow: 0 3px 6px 0 rgba(140, 152, 164, 0.25) !important;
}

/*------------------------------------
  Width
------------------------------------*/
.min-width-3 {
  min-width: 1rem !important;
}

.min-width-4 {
  min-width: 1.5rem !important;
}

.min-width-15 {
  min-width: 7rem !important;
}

.min-width-21 {
  min-width: 10rem !important;
}

.max-width-3 {
  max-width: 1rem !important;
}

.max-width-4 {
  max-width: 1.5rem !important;
}

.max-width-5 {
  max-width: 2rem !important;
}

.max-width-6 {
  max-width: 2.5rem !important;
}

.max-width-8 {
  max-width: 3.5rem;
}

.max-width-9 {
  max-width: 4rem;
}

.max-width-10 {
  max-width: 4.5rem;
}

.max-width-11 {
  max-width: 5rem;
}

.max-width-15 {
  max-width: 7rem;
}

.max-width-19 {
  max-width: 9rem;
}

.max-width-23 {
  max-width: 11rem;
}

.max-width-27 {
  max-width: 13rem;
}

.max-width-35 {
  max-width: 17rem;
}

.max-width-40 {
  max-width: 19.5rem;
}

.max-width-50 {
  max-width: 24.5rem;
}

.max-width-60 {
  max-width: 29.5rem;
}

/*------------------------------------
  Height
------------------------------------*/
.height-40vh {
  height: 40vh;
}

.height-60vh {
  height: 60vh;
}

.height-100vh {
  height: 100vh;
}

.height-4 {
  height: .25rem;
}

.height-250 {
  height: 15.625rem;
}

.height-380 {
  height: 23.75rem;
}

.height-400 {
  height: 25rem;
}

.height-450 {
  height: 28.125rem;
}

.min-height-100vh {
  min-height: 100vh;
}

.min-height-155 {
  min-height: 9.6875rem;
}

.min-height-300 {
  min-height: 18.75rem;
}

.min-height-380 {
  min-height: 23.75rem;
}

.min-height-450 {
  min-height: 28.125rem;
}

.min-height-550 {
  min-height: 34.375rem;
}

.min-height-600 {
  min-height: 37.5rem;
}

.min-height-620 {
  min-height: 38.75rem;
}

@media (min-width: 576px) {
  .height-sm-100vh {
    height: 100vh;
  }
}

@media (min-width: 768px) {
  .height-md-60vh {
    height: 60vh;
  }
  .height-md-100vh {
    height: 100vh;
  }
  .min-height-md-100vh {
    min-height: 100vh;
  }
}

@media (min-width: 992px) {
  .height-lg-100vh {
    height: 100vh;
  }
  .min-height-lg-auto {
    min-height: auto;
  }
  .min-height-lg-100vh {
    min-height: 100vh;
  }
}

@media (min-width: 1200px) {
  .min-height-xl-100vh {
    min-height: 100vh;
  }
}

/*------------------------------------
  SVG Dividers
------------------------------------*/
.svg-divider-polygon {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 35%, 0 95%);
          clip-path: polygon(0 0, 100% 0, 100% 35%, 0 95%);
}

/*------------------------------------
  Typography Font Size
------------------------------------*/
.font-size-1 {
  font-size: 0.875rem;
}

.font-size-2 {
  font-size: 1.5rem;
}

.font-size-3 {
  font-size: 2rem;
}

.font-size-4 {
  font-size: 2.5rem;
}

.font-size-5 {
  font-size: 3rem;
}

@media (max-width: 991.98px) {
  .font-size-md-down-3 {
    font-size: 2rem;
  }
  .font-size-md-down-5 {
    font-size: 3rem;
  }
}

/*------------------------------------
  Font Weight
------------------------------------*/
.font-weight-medium {
  font-weight: 500 !important;
}

.font-weight-semi-bold {
  font-weight: 600 !important;
}

/*------------------------------------
  Line Height
------------------------------------*/
.text-lh-sm {
  line-height: 1.2;
}

.text-lh-md {
  line-height: 1.8;
}

/*------------------------------------
  Text Colors
------------------------------------*/
.text-white-70 {
  color: rgba(255, 255, 255, 0.7);
}

.text-white-70[href]:hover {
  color: #fff;
}

/*------------------------------------
  Transform
------------------------------------*/
.transform-rotate-1 {
  -webkit-transform: rotate(-40deg);
          transform: rotate(-40deg);
  -webkit-transform-origin: 30% 20%;
          transform-origin: 30% 20%;
}

/*------------------------------------
  Transitions
------------------------------------*/
/* 3D Hover */
.transition-3d-hover {
  transition: all 0.2s ease-in-out;
}

.transition-3d-hover:hover, .transition-3d-hover:focus {
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
}

/*------------------------------------
  Z-Index
------------------------------------*/
.z-index-n1 {
  z-index: -1;
}

.z-index-2 {
  z-index: 2;
}

.z-index-4 {
  z-index: 4;
}

/*------------------------------------
  Animate.css
------------------------------------*/
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 25%, 0);
            transform: translate3d(0, 25%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 25%, 0);
            transform: translate3d(0, 25%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
          animation-name: slideInUp;
}

/*------------------------------------
  Area Chart
------------------------------------*/
.u-area-chart {
  position: relative;
  line-height: 0;
}

.u-area-chart .ct-point {
  stroke-width: .375rem;
}

.u-area-chart__tooltip {
  color: #77838f;
  background-color: #fff;
  border-radius: 0.3125rem;
  box-shadow: 0 0.375rem 0.9375rem 0.0625rem rgba(140, 152, 164, 0.2);
  padding: 1rem;
  font-size: .75rem;
  font-weight: 400;
  font-family: "Poppins", Helvetica, Arial, sans-serif;
}

.u-area-chart__tooltip::before {
  border: 8px #fff;
  margin-left: -.5rem;
}

.u-area-chart__tooltip .chartist-tooltip-value {
  font-weight: 600;
}

/*------------------------------------
  Cubeportfolio
------------------------------------*/
.u-cubeportfolio .u-cubeportfolio__item {
  font-size: .875rem;
  text-transform: capitalize;
  background-color: transparent;
  border: none;
  margin: 0;
  padding-left: .75rem;
  padding-right: .75rem;
}

.u-cubeportfolio .u-cubeportfolio__item:first-child {
  padding-left: 0;
}

.u-cubeportfolio .u-cubeportfolio__item:last-child {
  padding-right: 0;
}

.u-cubeportfolio .u-cubeportfolio__item:hover {
  color: #1e2022;
}

.u-cubeportfolio .u-cubeportfolio__item.cbp-filter-item-active {
  color: #377dff;
  background-color: transparent;
  border: transparent;
}

/* Load more disabled class */
.u-cubeportfolio .cbp-l-loadMore-stop {
  pointer-events: none;
  color: #77838f;
}

/* Zoom overlay effect */
.u-cubeportfolio .cbp-caption-zoom .cbp-caption-activeWrap {
  background-color: rgba(55, 125, 255, 0.9);
}

/*------------------------------------
  Hover Animation Effects
------------------------------------*/
.u-cubeportfolio--reveal-v1 .cbp-l-caption-body {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  transition: 0.4s ease-in-out;
}

.u-cubeportfolio--reveal-v1 .cbp-caption:hover .cbp-l-caption-body {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}

/*------------------------------------
  Custombox
------------------------------------*/
.custombox-lock {
  overflow: auto;
}

.u-custombox-no-scroll.custombox-lock {
  margin-right: 1.0625rem;
  overflow: hidden;
}

/*------------------------------------
  Datatable
------------------------------------*/
.u-datatable .dataTables_length,
.u-datatable .dataTables_filter,
.u-datatable .dataTables_info,
.u-datatable .dataTables_paginate {
  display: none;
}

.u-datatable__striped .odd {
  background-color: #f8fafd;
}

.u-datatable .u-datatable__trigger {
  cursor: pointer;
}

.u-datatable .u-datatable__trigger-icon::before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f107";
  margin-right: .75rem;
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
}

.u-datatable__content td[colspan] {
  padding-left: 0;
  padding-right: 0;
}

.u-datatable .opened .u-datatable__trigger-icon::before {
  content: "\f106";
}

.u-datatable__thead-icon {
  display: block;
  line-height: .7;
  cursor: pointer;
  color: #bdc5d1;
}

.u-datatable__thead-icon:hover {
  color: #377dff;
}

/*------------------------------------
  Dropzone
------------------------------------*/
.u-dropzone {
  width: 100%;
  background-color: #f8fafd;
  border: 2px dashed #e7eaf3;
  border-radius: 0.3125rem;
  cursor: pointer;
  padding: 3rem;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.u-dropzone .dz-message {
  width: 100%;
  text-align: center;
}

.u-dropzone .dz-details {
  margin-bottom: 1rem;
}

.u-dropzone .dz-file-preview {
  background-color: #fff;
  border-radius: 0.3125rem;
  padding: 1rem;
  box-shadow: 0 3px 6px 0 rgba(140, 152, 164, 0.25);
}

.u-dropzone .dz-file-wrapper {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.u-dropzone .dz-filename {
  margin-bottom: .25rem;
}

.u-dropzone .dz-img {
  max-width: 4rem;
  border: 1px solid #e7eaf3;
  border-radius: 0.3125rem;
  padding: 0.25rem;
  margin-right: .75rem;
}

.u-dropzone .dz-close-icon,
.u-dropzone .dz-size {
  color: #77838f;
}

.u-dropzone .dz-title {
  font-size: 0.75rem;
  font-weight: 600;
}

.u-dropzone .dz-size {
  font-size: 80%;
}

.u-dropzone .dz-file-abbr {
  display: inline-block;
  width: 4rem;
  height: 4rem;
  line-height: 4;
  font-weight: 600;
  font-size: 1rem;
  color: #377dff;
  text-align: center;
  background-color: rgba(55, 125, 255, 0.1);
  border-radius: 0.3125rem;
  margin-right: .75rem;
}

.u-dropzone [data-dz-thumbnail]:not([src]) {
  display: none;
  margin-bottom: 0;
}

.u-dropzone .dz-progress {
  margin-bottom: 1rem;
}

.u-dropzone.dz-started .u-dropzone__message,
.u-dropzone .dz-processing .dz-error-mark,
.u-dropzone .dz-processing .dz-success-mark {
  display: none;
}

.u-dropzone .dz-processing.dz-error .dz-error-mark,
.u-dropzone .dz-processing.dz-success .dz-success-mark {
  display: block;
}

.u-dropzone .dz-processing .dz-error-mark {
  color: #de4437;
}

.u-dropzone .dz-processing .dz-success-mark {
  color: #00c9a7;
}

/*------------------------------------
  DatePicker
------------------------------------*/
.u-datepicker {
  position: relative;
}

.u-datepicker .flatpickr-calendar {
  top: 3.75rem !important;
  left: 0 !important;
  box-shadow: 0 0.375rem 1.5rem 0 rgba(140, 152, 164, 0.125);
}

.u-datepicker .flatpickr-calendar::before, .u-datepicker .flatpickr-calendar::after {
  display: none;
}

.u-datepicker .flatpickr-months {
  position: relative;
  background-color: #377dff;
  border-top-left-radius: 0.3125rem;
  border-top-right-radius: 0.3125rem;
  padding: .75rem;
}

.u-datepicker .flatpickr-months .cur-month,
.u-datepicker .flatpickr-months .cur-year {
  color: #fff;
}

.u-datepicker .flatpickr-current-month,
.u-datepicker .flatpickr-prev-month,
.u-datepicker .flatpickr-next-month {
  padding: 0;
}

.u-datepicker .flatpickr-prev-month,
.u-datepicker .flatpickr-next-month {
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}

.u-datepicker .flatpickr-prev-month.flatpickr-prev-month,
.u-datepicker .flatpickr-next-month.flatpickr-prev-month {
  left: .75rem;
}

.u-datepicker .flatpickr-prev-month.flatpickr-next-month,
.u-datepicker .flatpickr-next-month.flatpickr-next-month {
  right: .75rem;
}

.u-datepicker .flatpickr-prev-month svg,
.u-datepicker .flatpickr-next-month svg {
  fill: rgba(255, 255, 255, 0.7);
}

.u-datepicker .flatpickr-prev-month:hover svg,
.u-datepicker .flatpickr-next-month:hover svg {
  fill: #fff;
}

.u-datepicker .flatpickr-weekday {
  color: #1e2022;
  text-transform: uppercase;
  font-weight: 500;
}

.u-datepicker .flatpickr-day {
  color: #1e2022;
  border-color: transparent;
}

.u-datepicker .flatpickr-day:focus, .u-datepicker .flatpickr-day:hover {
  color: #377dff;
  background-color: rgba(55, 125, 255, 0.1);
}

.u-datepicker .flatpickr-day.inRange {
  background-color: #e7eaf3;
  box-shadow: -0.3125rem 0 0 #e7eaf3, 0.3125rem 0 0 #e7eaf3;
}

.u-datepicker .flatpickr-day.today {
  color: #fff;
  background-color: #377dff;
}

.u-datepicker .flatpickr-day.prevMonthDay, .u-datepicker .flatpickr-day.nextMonthDay {
  color: #e7eaf3;
}

.u-datepicker .flatpickr-day.prevMonthDay:focus, .u-datepicker .flatpickr-day.prevMonthDay:hover, .u-datepicker .flatpickr-day.nextMonthDay:focus, .u-datepicker .flatpickr-day.nextMonthDay:hover {
  color: #97a4af;
  background-color: #e7eaf3;
}

.u-datepicker .flatpickr-day.disabled {
  color: #e7eaf3;
}

.u-datepicker .flatpickr-day.disabled:hover {
  color: #97a4af;
  background-color: #e7eaf3;
}

.u-datepicker .flatpickr-day.selected {
  color: #377dff;
  background-color: transparent;
  border-color: #377dff;
}

.u-datepicker .flatpickr-day.selected:focus.prevMonthDay, .u-datepicker .flatpickr-day.selected:focus.nextMonthDay, .u-datepicker .flatpickr-day.selected:hover.prevMonthDay, .u-datepicker .flatpickr-day.selected:hover.nextMonthDay {
  color: #377dff;
  background-color: transparent;
}

.u-datepicker .flatpickr-day.selected.startRange, .u-datepicker .flatpickr-day.selected.endRange {
  color: #fff;
  background-color: #377dff;
}

.u-datepicker .numInputWrapper span.arrowUp,
.u-datepicker .numInputWrapper span.arrowDown {
  display: none;
}

.u-datepicker .numInputWrapper:hover {
  background-color: transparent;
}

/* Positions */
.u-datepicker--top .flatpickr-calendar {
  top: auto !important;
  bottom: 3.5rem !important;
}

/*------------------------------------
  Dzsparallaxer
------------------------------------*/
.dzsparallaxer {
  color: inherit;
}

/*--------------------------------------------------
  Fancybox
----------------------------------------------------*/
.u-fancybox-theme .fancybox-content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.u-fancybox-theme .fancybox-slide--iframe .fancybox-content {
  position: static;
}

.u-fancybox-theme .fancybox-bg {
  background-color: #1e2022;
}

.fancybox-controls--canzoomIn .fancybox-placeholder,
.fancybox-controls--canzoomOut .fancybox-placeholder {
  cursor: inherit;
}

.fancybox-slide.has-animation {
  display: block;
}

.fancybox-is-sliding .fancybox-slide.has-animation,
.fancybox-slide--current.has-animation,
.fancybox-slide--next.has-animation,
.fancybox-slide--previous.has-animation {
  display: none;
}

.fancybox-is-sliding .fancybox-slide.has-animation.animated,
.fancybox-slide--current.has-animation.animated,
.fancybox-slide--next.has-animation.animated,
.fancybox-slide--previous.has-animation.animated {
  display: block;
}

.u-blur-30 {
  -webkit-filter: blur(30px);
          filter: blur(30px);
}

/*------------------------------------
  Fileuploader
------------------------------------*/
/* Default Style */
.fileuploader {
  margin-top: 0;
}

/* Front Style */
.u-fileuploader-input {
  display: block;
  cursor: pointer;
  background: #fff;
  border: 2px dashed #e7eaf3;
  border-radius: 0.3125rem;
  padding: 2rem 0;
  text-align: center;
}

.u-fileuploader-input__icon {
  display: block;
  color: #377dff;
  font-size: 2.5rem;
}

/* Dragging State */
.u-fileuploader-input__inner,
.u-fileuploader-input.fileuploader-dragging .u-fileuploader-input__icon {
  transition: all 0.3s ease-in-out;
}

.u-fileuploader-input.fileuploader-dragging .u-fileuploader-input__inner {
  opacity: .6;
}

.u-fileuploader-input.fileuploader-dragging .u-fileuploader-input__icon {
  -webkit-transform: translateY(18px);
          transform: translateY(18px);
}

.u-fileuploader-input.fileuploader-dragging .u-fileuploader-input__btn {
  -webkit-transform: none;
          transform: none;
  opacity: 1;
}

/*------------------------------------
  Onscroll Animation
------------------------------------*/
[data-animation]:not(.u-in-viewport) {
  visibility: hidden;
}

[data-animation].js-carousel {
  visibility: visible;
}

.u-in-viewport {
  visibility: visible;
}

/*------------------------------------
  Range Slider
------------------------------------*/
.u-range-slider {
  height: 1.25rem;
}

.u-range-slider .irs {
  height: 1.25rem;
}

.u-range-slider .irs-line {
  top: .5rem;
  height: 0.25rem;
}

.u-range-slider .irs-line-left {
  left: 0;
  height: 0.25rem;
  background-color: #e7eaf3;
  border-top-left-radius: 6.1875rem;
  border-bottom-left-radius: 6.1875rem;
}

.u-range-slider .irs-line-mid {
  height: 0.25rem;
  background-color: #e7eaf3;
}

.u-range-slider .irs-line-right {
  right: 0;
  height: 0.25rem;
  background-color: #e7eaf3;
  border-top-right-radius: 6.1875rem;
  border-bottom-right-radius: 6.1875rem;
}

.u-range-slider .irs-bar {
  top: .5rem;
  height: 0.25rem;
  background-color: #377dff;
}

.u-range-slider .irs-bar-edge {
  top: .5rem;
  left: .0625rem;
  height: 0.25rem;
  width: .6875rem;
  border-top-left-radius: 6.1875rem;
  border-bottom-left-radius: 6.1875rem;
  background-color: #377dff;
}

.u-range-slider .irs-slider {
  top: -.1875rem;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #fff;
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 0.1875rem 0.75rem rgba(140, 152, 164, 0.3125);
}

.u-range-slider .irs-slider.state_hover {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}

.u-range-slider .irs-from,
.u-range-slider .irs-to,
.u-range-slider .irs-single {
  display: inline-block;
  min-width: 2.5rem;
  background-color: #fff;
  color: #1e2022;
  font-size: 0.875rem;
  text-shadow: none;
  text-align: center;
  border-radius: 0.3125rem;
  box-shadow: 0 0 35px rgba(140, 152, 164, 0.125);
  padding: .5rem;
}

/* Indicator */
.u-range-slider-indicator {
  height: 5rem;
}

.u-range-slider-indicator .irs {
  height: 5rem;
}

.u-range-slider-indicator.u-range-slider-grid {
  height: 8rem;
}

.u-range-slider-indicator.u-range-slider-grid .irs {
  height: 8rem;
}

.u-range-slider-indicator .irs-line {
  top: 3.875rem;
}

.u-range-slider-indicator .irs-bar {
  top: 3.875rem;
}

.u-range-slider-indicator .irs-bar-edge {
  top: 3.875rem;
}

.u-range-slider-indicator .irs-slider {
  top: 3.1875rem;
}

/* Grid */
.u-range-slider-grid {
  height: 4.5rem;
}

.u-range-slider-grid .irs {
  height: 4.5rem;
}

.u-range-slider-grid .irs-grid {
  height: 2.5rem;
}

.u-range-slider-grid .irs-grid-text {
  display: inline-block;
  min-width: 2.5rem;
  line-height: 1;
  font-size: 0.875rem;
  color: #77838f;
  border-radius: 6.1875rem;
  padding: 0.25rem;
}

.u-range-slider-grid .irs-grid-text.current {
  background: rgba(55, 125, 255, 0.1);
  color: #377dff;
}

.u-range-slider-grid .irs-grid-pol {
  height: .75rem;
  background-color: #e7eaf3;
}

.u-range-slider-grid .irs-grid-pol.small {
  display: none;
}

/*------------------------------------
  Select
------------------------------------*/
.dropdown-select.bootstrap-select li .dropdown-item.opt {
  padding-left: 1.5rem;
}

.dropdown-select.bootstrap-select .bs-searchbox {
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

.dropdown-select.bootstrap-select .dropdown-header .text {
  font-size: 80%;
  font-weight: 500;
  color: #1e2022;
  text-transform: uppercase;
}

.dropdown-select .form-control {
  margin-bottom: .5rem;
}

/*------------------------------------
  Slick
------------------------------------*/
[data-lazy] {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.slick-cloned [data-scs-animation-in] {
  opacity: 0;
}

.u-slick {
  background: url(../svg/preloaders/circle-preloader.svg) no-repeat 50% 50%;
}

.u-slick .js-next,
.u-slick .js-prev {
  opacity: 0;
}

.u-slick.slick-initialized {
  background: none;
}

.u-slick.slick-initialized .js-slide,
.u-slick.slick-initialized .js-thumb {
  visibility: visible;
  height: auto;
  overflow: visible;
}

.u-slick.slick-initialized .js-next,
.u-slick.slick-initialized .js-prev {
  opacity: 1;
}

.u-slick .js-slide,
.u-slick .js-thumb {
  height: 0;
  visibility: hidden;
  overflow: hidden;
}

.u-slick .js-slide:first-child,
.u-slick .js-thumb:first-child {
  height: auto;
}

/*------------------------------------
  Summernote Editor
------------------------------------*/
.note-modal-footer {
  height: auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
      justify-content: flex-end;
  padding: 20px 30px;
}

.note-modal-footer .note-btn {
  float: inherit;
}

.u-summernote-editor .note-editor.note-frame {
  border-color: #e7eaf3;
}

.u-summernote-editor .note-editor.note-frame .note-statusbar {
  background-color: #f8fafd;
  border-top-color: #e7eaf3;
}

.u-summernote-editor .note-toolbar {
  background-color: #f8fafd;
}

.u-summernote-editor .note-toolbar > .note-btn-group {
  border: 1px solid #e7eaf3;
  border-radius: 0.3125rem;
}

.u-summernote-editor .note-toolbar .note-dropdown-menu {
  min-width: 12.5rem;
  border-color: #e7eaf3;
  box-shadow: 0 0 35px rgba(140, 152, 164, 0.125);
  padding: .5rem;
}

.u-summernote-editor .note-toolbar .note-color .note-dropdown-menu {
  min-width: 21.5rem;
}

.u-summernote-editor .note-btn:focus, .u-summernote-editor .note-btn:hover {
  color: #377dff;
  background-color: transparent;
}

.u-summernote-editor .note-dropdown-item:hover {
  background-color: #f8fafd;
}

.u-summernote-editor .dropdown-toggle::after {
  display: none;
}

/*------------------------------------
  Tagsinput
------------------------------------*/
.u-tagsinput .bootstrap-tagsinput {
  width: 100%;
  border-color: #e7eaf3;
  border-radius: 0.3125rem;
  box-shadow: none;
  padding: .25rem;
  padding-bottom: 0;
}

.u-tagsinput .bootstrap-tagsinput::before {
  content: "|";
  display: inline-block;
  width: 1px;
  line-height: 1;
  font-size: .625rem;
  opacity: 0;
  padding: .75rem 0;
}

.u-tagsinput .bootstrap-tagsinput .tag {
  position: relative;
  display: inline-block;
  font-size: .875rem;
  color: #77838f;
  background-color: rgba(119, 131, 143, 0.1);
  border-radius: 0.3125rem;
  padding: .25rem 1.875rem .25rem .75rem;
  margin-bottom: .25rem;
  margin-right: 0;
}

.u-tagsinput .bootstrap-tagsinput .tag [data-role="remove"] {
  position: absolute;
  right: .5rem;
  top: 50%;
  color: #77838f;
  font-size: 1.25rem;
  outline: none;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.u-tagsinput .bootstrap-tagsinput .tag [data-role="remove"]::after {
  content: "\00d7";
}

.u-tagsinput .bootstrap-tagsinput .tag [data-role="remove"]:hover {
  color: #1e2022;
  box-shadow: none;
}

/*------------------------------------
  Typed.js
------------------------------------*/
.typed-cursor {
  opacity: 1;
  -webkit-animation: blink 0.7s infinite;
          animation: blink 0.7s infinite;
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*------------------------------------
  File for your custom SCSS style
------------------------------------*/

              
            
!

JS

              
                
  $(window).on('load', function () {
    // initialization of HSMegaMenu component
    $('.js-mega-menu').HSMegaMenu({
      event: 'hover',
      pageContainer: $('.container'),
      breakpoint: 767.98,
      hideTimeOut: 0
    });
  });

  $(document).on('ready', function () {
    //initialization of header
    $.HSCore.components.HSHeader.init($('#header'));
    // initialization of unfold component
    $.HSCore.components.HSUnfold.init($('[data-unfold-target]'), {
      afterOpen: function () {
        //$(this).find('input[type="search"]').focus();
      }
    });
    // initialization of text animation (typing)
    var typed = new Typed(".u-text-animation--typing", {
      strings: ["more professional.", "perfect in every way.", "astonishing."],
      typeSpeed: 60,
      loop: true,
      backSpeed: 25,
      backDelay: 1500
    });
  });



              
            
!
999px

Console