/*
Theme Name: CreateX
Theme URI: https://createxwp.com/theme/
Author: CreateX
Author URI: https://createxwp.com/
Description: CreateX is a comprehensive multi-purpose / multi-concept Bootstrap 4 theme and UI kit that is built to meet the needs of anyone who wants to create professionally looking website in no time. Whether you’re creating a website for the first time or you’re a long time pro, Createx has got you covered. 5 Complete Website designs (more coming) and 50+ flexible components will help you to kickstart your next project. Createx is perfect for Portfolio, E-Commerce websites, Corporate websites, Marketing Agency, Construction Services, Online Education.
Requires at least: 5.3
Tested up to: 5.7
Requires PHP: 5.6
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: createx
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready

CreateX WordPress Theme, (C) 2021 createxwp.com
CreateX is distributed under the terms of the GNU GPL.
*/

/* = WordPress Core
 * ------------------------------------------------------------- */
 .alignnone {
  margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
  display: block;
  margin: 5px auto 5px auto;
}

.alignright {
  float:right;
  margin: 5px 0 20px 20px;
}

.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

a img.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}

a img.alignnone {
  margin: 5px 20px 20px 0;
}

a img.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

a img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption {
  background: #fff;
  border: 1px solid #f0f0f0;
  max-width: 96%; /* Image does not overflow the content area */
  padding: 5px 3px 10px;
  text-align: center;
}

.wp-caption.alignnone {
  margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
  margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
  margin: 5px 0 20px 20px;
}

.wp-caption img {
  border: 0 none;
  height: auto;
  margin: 0;
  max-width: 98.5%;
  padding: 0;
  width: auto;
}

.wp-caption p.wp-caption-text {
  font-size: 11px;
  line-height: 17px;
  margin: 0;
  padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
  background-color: #eee;
  clip: auto !important;
  clip-path: none;
  color: #444;
  display: block;
  font-size: 1em;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}

/* = Page Preloader
 * ------------------------------------------------------------- */
.cx-page-loading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all .4s .2s ease-in-out;
  transition: all .4s .2s ease-in-out;
  background-color: #fff;
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
}

.cx-page-loading.active {
  opacity: 1;
  visibility: visible;
}

.cx-page-loading-inner {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: opacity .2s ease-in-out;
  transition: opacity .2s ease-in-out;
  opacity: 0;
}

.cx-page-loading.active > .cx-page-loading-inner {
  opacity: 1;
}

.cx-page-loading-inner > span {
  display: block;
  font-size: 1rem;
  font-weight: normal;
  color: #787a80;
}

.cx-page-spinner {
  display: inline-block;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: .75rem;
  vertical-align: text-bottom;
  background-color: #cfcfd1; 
  border-radius: 50%;
  opacity: 0;
  -webkit-animation: cx-spinner .75s linear infinite;
  animation: cx-spinner .75s linear infinite;
}

@-webkit-keyframes cx-spinner {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes cx-spinner {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/* = Offcanvas
 * ------------------------------------------------------------- */
 .admin-bar .cx-offcanvas {
   top: 32px;
 }

 @media screen and (max-width: 782px) {
  .admin-bar .cx-offcanvas {
    top: 46px;
  }
 }

.admin-bar #createx-cart {
  height: calc( 100% - 32px );
}

@media screen and (max-width: 782px) {
  .admin-bar #createx-sidebar, 
  .admin-bar #createx-cart {
    height: calc( 100% - 46px );
  }
}

.cx-page-wrapper.container {
  box-shadow: 0 1.75rem 1.875rem rgb(154 156 165 / 16%), 0 1.25rem 1rem -0.25rem rgb(154 156 165 / 10%), 0 0.5rem 0.625rem rgb(154 156 165 / 8%), 0 0.25rem 0.25rem rgb(30 33 44 / 5%);
  transition: box-shadow .25s;
}

/* = Main Wrapper (.cx-page-wrapper)
 * ------------------------------------------------------------- */
 .cx-page-wrapper {
   background-color: #fff;
 }

/* = Navbar
 * ------------------------------------------------------------- */
 .cx-header .navbar h1.site-title {
   line-height: 0;
  margin: 0;
 }

 .cx-header .navbar h1.site-title > .navbar-brand {
   padding: 0;
   margin: 0;
 }

.admin-bar .cx-header .navbar-sticky.navbar-stuck {
  top: 32px;
 }

 @media screen and (max-width: 782px) {
  .admin-bar .cx-header .navbar-sticky.navbar-stuck {
    top: 46px;
  }
 }

 @media screen and (max-width: 600px) {
  .admin-bar .cx-header .navbar-sticky.navbar-stuck {
    top: 0;
  }
 }

 /* Boxed Layout - Center the sticky header */
 .cx-header .navbar.navbar-sticky.container {
   left: 0;
   right: 0;
 }

  /* = Mobile Primary Menu
   * ------------------------------------------------------------- */
 @media (max-width: 991.98px) {
  .cx-primary-menu {
    background-color: #fff;
  }
  .cx-primary-menu ul li {
    border: none !important;
  }
 }

 /* = Dropdown sub-menu
  * (remove this after Bootstrap nav walker is updated to version 5)
  * ------------------------------------------------------------- */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}

/* to show the arrow */
.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

.dropdown-toggle a::after{
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

/* = Navbar Style 02 [centered]
 * ------------------------------------------------------------- */
 .cx-header .navbar.navbar-expand-lg.navbar-style-02 {
   flex-flow: wrap;
   -ms-flex-flow: wrap;
 }

 .cx-header .navbar.navbar-style-02 > .container {
   display: block;
 }

 /* = Content (#createx-content)
 * ------------------------------------------------------------- */
 #createx-content {
   overflow: hidden;
 }

/* = Gallery
 * ------------------------------------------------------------- */
.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
}

.gallery-item a {
	display: block;
}

.gallery-item a:focus img {
	outline-offset: -2px;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-caption {
	display: block;
}

/* = Related Posts
 * ------------------------------------------------------------- */
#createx-related-posts .cx-image-inner.card-img-top {
  position: relative;
  width: 100%;
  height: 266px;
}

#createx-related-posts .cx-image-inner.card-img-top > img {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;
}

#createx-related-posts .cx-image-inner.card-img-top > img {
  max-height: 100%;
  max-width: 100%;
  height: 100%;
  width: 100%;
}

/* = Posts Pagination
 * ------------------------------------------------------------- */
ul.pagination .page-link.active {
  z-index: 3;
  color: var(--primary);
  background-color: rgba(0,0,0,0);
  border-color: rgba(0,0,0,0);
}

/* = Comments
 * ------------------------------------------------------------- */
.commentlist li {
  list-style: none
}

/* = Shop
 * ------------------------------------------------------------- */

 /* My Account - navigation icons */
.woocommerce #account-menu a:before {
  display: inline-block;
  font-family: "createx-icons" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  speak: never;
  text-transform: none;
  line-height: 1;
  margin-right: .5rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.woocommerce #account-menu a.dashboard:before {
  content: '\e920';
}

.woocommerce #account-menu a.orders:before {
  content: '\e970';
}

.woocommerce #account-menu a.downloads:before {
  content: '\e982';
}

.woocommerce #account-menu a.edit-address:before {
  content: '\e974';
}

.woocommerce #account-menu a.edit-account:before {
  content: '\e925';
}

.woocommerce #account-menu a.customer-logout:before {
  content: '\e973';
}

/* WooCommerce Alerts */
.woocommerce-error, .woocommerce-info, .woocommerce-message {
  background-color: #f6f8ff;
  color: #537ce8;
}

.woocommerce-info {
  border-top-color: #d1ddfe;
}

.woocommerce-info:before {
  color: #d1ddfe;
}

 /* Offcanvas Cart */
 #createx-cart img {
   max-width: 80px;
 }

/* = Footer
 * ------------------------------------------------------------- */
.createx-footer {
  background-color: #1e212c;
}

.elementor-template-full-width .cx-sidebar-toggle {
  display: none;
}