HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
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.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<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‎</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 & 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 & 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 & Conditions</a></li>
<li><a class="nav-link u-header__sub-menu-nav-link" href="../pages/privacy.html">Privacy & 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>
/*----------------------------------------------------------------------
* 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
------------------------------------*/
$(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
});
});
Also see: Tab Triggers